@atlaskit/navigation-system 9.4.3 → 10.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 (176) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/experimental/ribbon/package.json +1 -8
  3. package/fhs-rollout/package.json +1 -8
  4. package/layout/aside/package.json +1 -8
  5. package/layout/banner/package.json +1 -8
  6. package/layout/main/package.json +1 -8
  7. package/layout/panel/package.json +1 -8
  8. package/layout/panel-splitter/package.json +1 -8
  9. package/layout/root/package.json +1 -8
  10. package/layout/side-nav/package.json +1 -8
  11. package/layout/skip-links/package.json +1 -8
  12. package/layout/top-nav/package.json +1 -8
  13. package/legacy/css-variables/package.json +1 -8
  14. package/package.json +41 -49
  15. package/theming/color-utils/parse-hex/package.json +1 -8
  16. package/theming/color-utils/parse-hsl/package.json +1 -8
  17. package/theming/color-utils/parse-rgb/package.json +1 -8
  18. package/theming/color-utils/parse-user-color/package.json +1 -8
  19. package/theming/top-nav-button/package.json +1 -8
  20. package/theming/use-has-custom-theme/package.json +1 -8
  21. package/theming/use-legacy-search-theme/package.json +1 -8
  22. package/top-nav-items/create-button/package.json +1 -8
  23. package/top-nav-items/custom-title/package.json +1 -8
  24. package/top-nav-items/help/package.json +1 -8
  25. package/top-nav-items/log-in/package.json +1 -8
  26. package/top-nav-items/notifications/package.json +1 -8
  27. package/top-nav-items/package.json +1 -8
  28. package/top-nav-items/profile/package.json +1 -8
  29. package/top-nav-items/settings/package.json +1 -8
  30. package/dist/types-ts4.5/components/badge-container.d.ts +0 -32
  31. package/dist/types-ts4.5/components/list-item.d.ts +0 -27
  32. package/dist/types-ts4.5/components/list.d.ts +0 -28
  33. package/dist/types-ts4.5/components/skip-links/focus-element.d.ts +0 -4
  34. package/dist/types-ts4.5/components/skip-links/skip-link.d.ts +0 -19
  35. package/dist/types-ts4.5/components/skip-links/skip-links-container.d.ts +0 -18
  36. package/dist/types-ts4.5/components/skip-links/skip-links-popup.d.ts +0 -11
  37. package/dist/types-ts4.5/context/skip-links/skip-links-context.d.ts +0 -9
  38. package/dist/types-ts4.5/context/skip-links/skip-links-provider.d.ts +0 -13
  39. package/dist/types-ts4.5/context/skip-links/types.d.ts +0 -44
  40. package/dist/types-ts4.5/context/skip-links/use-skip-link-internal.d.ts +0 -10
  41. package/dist/types-ts4.5/context/skip-links/use-skip-link.d.ts +0 -18
  42. package/dist/types-ts4.5/context/top-nav-start/top-nav-start-attach-ref.d.ts +0 -1
  43. package/dist/types-ts4.5/context/top-nav-start/top-nav-start-context-provider.d.ts +0 -17
  44. package/dist/types-ts4.5/context/top-nav-start/top-nav-start-element.d.ts +0 -1
  45. package/dist/types-ts4.5/entry-points/experimental/ribbon.d.ts +0 -1
  46. package/dist/types-ts4.5/entry-points/fhs-rollout.d.ts +0 -3
  47. package/dist/types-ts4.5/entry-points/layout/aside.d.ts +0 -1
  48. package/dist/types-ts4.5/entry-points/layout/banner.d.ts +0 -1
  49. package/dist/types-ts4.5/entry-points/layout/main.d.ts +0 -3
  50. package/dist/types-ts4.5/entry-points/layout/panel-splitter.d.ts +0 -3
  51. package/dist/types-ts4.5/entry-points/layout/panel.d.ts +0 -1
  52. package/dist/types-ts4.5/entry-points/layout/root.d.ts +0 -1
  53. package/dist/types-ts4.5/entry-points/layout/side-nav.d.ts +0 -8
  54. package/dist/types-ts4.5/entry-points/layout/skip-links.d.ts +0 -2
  55. package/dist/types-ts4.5/entry-points/layout/top-nav.d.ts +0 -4
  56. package/dist/types-ts4.5/entry-points/legacy/css-variables.d.ts +0 -12
  57. package/dist/types-ts4.5/entry-points/theming/color-utils/parse-hex.d.ts +0 -1
  58. package/dist/types-ts4.5/entry-points/theming/color-utils/parse-hsl.d.ts +0 -1
  59. package/dist/types-ts4.5/entry-points/theming/color-utils/parse-rgb.d.ts +0 -1
  60. package/dist/types-ts4.5/entry-points/theming/color-utils/parse-user-color.d.ts +0 -1
  61. package/dist/types-ts4.5/entry-points/theming/top-nav-button.d.ts +0 -4
  62. package/dist/types-ts4.5/entry-points/theming/use-has-custom-theme.d.ts +0 -1
  63. package/dist/types-ts4.5/entry-points/theming/use-legacy-search-theme.d.ts +0 -1
  64. package/dist/types-ts4.5/entry-points/top-nav-items/create-button.d.ts +0 -1
  65. package/dist/types-ts4.5/entry-points/top-nav-items/custom-title.d.ts +0 -1
  66. package/dist/types-ts4.5/entry-points/top-nav-items/help.d.ts +0 -1
  67. package/dist/types-ts4.5/entry-points/top-nav-items/index.d.ts +0 -14
  68. package/dist/types-ts4.5/entry-points/top-nav-items/log-in.d.ts +0 -1
  69. package/dist/types-ts4.5/entry-points/top-nav-items/notifications.d.ts +0 -1
  70. package/dist/types-ts4.5/entry-points/top-nav-items/profile.d.ts +0 -1
  71. package/dist/types-ts4.5/entry-points/top-nav-items/settings.d.ts +0 -1
  72. package/dist/types-ts4.5/index.d.ts +0 -34
  73. package/dist/types-ts4.5/ui/fhs-rollout/is-custom-is-fhs-enabled-context.d.ts +0 -7
  74. package/dist/types-ts4.5/ui/fhs-rollout/is-fhs-enabled-context.d.ts +0 -8
  75. package/dist/types-ts4.5/ui/fhs-rollout/is-fhs-enabled-provider.d.ts +0 -10
  76. package/dist/types-ts4.5/ui/fhs-rollout/types.d.ts +0 -1
  77. package/dist/types-ts4.5/ui/fhs-rollout/use-is-fhs-enabled.d.ts +0 -6
  78. package/dist/types-ts4.5/ui/page-layout/aside.d.ts +0 -29
  79. package/dist/types-ts4.5/ui/page-layout/banner.d.ts +0 -24
  80. package/dist/types-ts4.5/ui/page-layout/constants.d.ts +0 -50
  81. package/dist/types-ts4.5/ui/page-layout/dangerously-hoist-css-var-to-document-root.d.ts +0 -8
  82. package/dist/types-ts4.5/ui/page-layout/hoist-css-var-to-local-grid.d.ts +0 -13
  83. package/dist/types-ts4.5/ui/page-layout/hoist-slot-sizes-context.d.ts +0 -5
  84. package/dist/types-ts4.5/ui/page-layout/main/main-sticky-header.d.ts +0 -23
  85. package/dist/types-ts4.5/ui/page-layout/main/main.d.ts +0 -16
  86. package/dist/types-ts4.5/ui/page-layout/panel-splitter/convert-resize-bound-to-pixels.d.ts +0 -7
  87. package/dist/types-ts4.5/ui/page-layout/panel-splitter/get-percentage-within-pixel-bounds.d.ts +0 -18
  88. package/dist/types-ts4.5/ui/page-layout/panel-splitter/get-pixel-width.d.ts +0 -4
  89. package/dist/types-ts4.5/ui/page-layout/panel-splitter/get-width-from-drag-location.d.ts +0 -8
  90. package/dist/types-ts4.5/ui/page-layout/panel-splitter/is-panel-splitter-drag-data.d.ts +0 -9
  91. package/dist/types-ts4.5/ui/page-layout/panel-splitter/keyboard-resize-manager.d.ts +0 -15
  92. package/dist/types-ts4.5/ui/page-layout/panel-splitter/on-double-click-context.d.ts +0 -8
  93. package/dist/types-ts4.5/ui/page-layout/panel-splitter/panel-splitter-context.d.ts +0 -64
  94. package/dist/types-ts4.5/ui/page-layout/panel-splitter/panel-splitter-drag-symbol.d.ts +0 -1
  95. package/dist/types-ts4.5/ui/page-layout/panel-splitter/panel-splitter.d.ts +0 -52
  96. package/dist/types-ts4.5/ui/page-layout/panel-splitter/provider.d.ts +0 -28
  97. package/dist/types-ts4.5/ui/page-layout/panel-splitter/side-nav-panel-splitter.d.ts +0 -38
  98. package/dist/types-ts4.5/ui/page-layout/panel-splitter/types.d.ts +0 -23
  99. package/dist/types-ts4.5/ui/page-layout/panel.d.ts +0 -40
  100. package/dist/types-ts4.5/ui/page-layout/ribbon.d.ts +0 -11
  101. package/dist/types-ts4.5/ui/page-layout/root.d.ts +0 -71
  102. package/dist/types-ts4.5/ui/page-layout/side-nav/flyout-close-delay-ms.d.ts +0 -5
  103. package/dist/types-ts4.5/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-context.d.ts +0 -8
  104. package/dist/types-ts4.5/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-provider.d.ts +0 -5
  105. package/dist/types-ts4.5/ui/page-layout/side-nav/set-side-nav-visibility-state.d.ts +0 -3
  106. package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-content.d.ts +0 -24
  107. package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-element-provider.d.ts +0 -4
  108. package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-footer.d.ts +0 -19
  109. package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-header.d.ts +0 -14
  110. package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-ref-context.d.ts +0 -2
  111. package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-toggle-button-attach-ref.d.ts +0 -1
  112. package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-toggle-button-element.d.ts +0 -5
  113. package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-toggle-tooltip-keyboard-shortcut.d.ts +0 -6
  114. package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-visibility-state.d.ts +0 -6
  115. package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav.d.ts +0 -93
  116. package/dist/types-ts4.5/ui/page-layout/side-nav/toggle-button-provider.d.ts +0 -17
  117. package/dist/types-ts4.5/ui/page-layout/side-nav/toggle-button.d.ts +0 -52
  118. package/dist/types-ts4.5/ui/page-layout/side-nav/types.d.ts +0 -61
  119. package/dist/types-ts4.5/ui/page-layout/side-nav/use-expand-side-nav.d.ts +0 -16
  120. package/dist/types-ts4.5/ui/page-layout/side-nav/use-is-side-nav-shortcut-enabled.d.ts +0 -5
  121. package/dist/types-ts4.5/ui/page-layout/side-nav/use-side-nav-ref.d.ts +0 -7
  122. package/dist/types-ts4.5/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.d.ts +0 -6
  123. package/dist/types-ts4.5/ui/page-layout/side-nav/use-side-nav-visibility-callbacks.d.ts +0 -16
  124. package/dist/types-ts4.5/ui/page-layout/side-nav/use-side-nav-visibility.d.ts +0 -20
  125. package/dist/types-ts4.5/ui/page-layout/side-nav/use-toggle-side-nav.d.ts +0 -16
  126. package/dist/types-ts4.5/ui/page-layout/side-nav/visibility-provider.d.ts +0 -8
  127. package/dist/types-ts4.5/ui/page-layout/top-nav/top-nav-end.d.ts +0 -29
  128. package/dist/types-ts4.5/ui/page-layout/top-nav/top-nav-middle.d.ts +0 -24
  129. package/dist/types-ts4.5/ui/page-layout/top-nav/top-nav-start.d.ts +0 -32
  130. package/dist/types-ts4.5/ui/page-layout/top-nav/top-nav.d.ts +0 -29
  131. package/dist/types-ts4.5/ui/page-layout/types.d.ts +0 -20
  132. package/dist/types-ts4.5/ui/page-layout/use-layout-id.d.ts +0 -12
  133. package/dist/types-ts4.5/ui/page-layout/use-resizing-width-css-var-on-root-element.d.ts +0 -9
  134. package/dist/types-ts4.5/ui/page-layout/use-safe-default-width.d.ts +0 -17
  135. package/dist/types-ts4.5/ui/page-layout/use-skip-link-id.d.ts +0 -5
  136. package/dist/types-ts4.5/ui/top-nav-items/app-switcher.d.ts +0 -32
  137. package/dist/types-ts4.5/ui/top-nav-items/chat-button.d.ts +0 -25
  138. package/dist/types-ts4.5/ui/top-nav-items/create-button.d.ts +0 -30
  139. package/dist/types-ts4.5/ui/top-nav-items/custom-title.d.ts +0 -23
  140. package/dist/types-ts4.5/ui/top-nav-items/end-item.d.ts +0 -80
  141. package/dist/types-ts4.5/ui/top-nav-items/help.d.ts +0 -19
  142. package/dist/types-ts4.5/ui/top-nav-items/icon-renderer.d.ts +0 -17
  143. package/dist/types-ts4.5/ui/top-nav-items/log-in.d.ts +0 -36
  144. package/dist/types-ts4.5/ui/top-nav-items/nav-logo/app-logo.d.ts +0 -37
  145. package/dist/types-ts4.5/ui/top-nav-items/nav-logo/custom-logo.d.ts +0 -36
  146. package/dist/types-ts4.5/ui/top-nav-items/nav-logo/logo-renderer.d.ts +0 -11
  147. package/dist/types-ts4.5/ui/top-nav-items/notifications.d.ts +0 -16
  148. package/dist/types-ts4.5/ui/top-nav-items/profile.d.ts +0 -15
  149. package/dist/types-ts4.5/ui/top-nav-items/search.d.ts +0 -38
  150. package/dist/types-ts4.5/ui/top-nav-items/settings.d.ts +0 -11
  151. package/dist/types-ts4.5/ui/top-nav-items/themed/button.d.ts +0 -7
  152. package/dist/types-ts4.5/ui/top-nav-items/themed/color-utils/formats/hex.d.ts +0 -9
  153. package/dist/types-ts4.5/ui/top-nav-items/themed/color-utils/formats/hsl.d.ts +0 -7
  154. package/dist/types-ts4.5/ui/top-nav-items/themed/color-utils/formats/rgb.d.ts +0 -7
  155. package/dist/types-ts4.5/ui/top-nav-items/themed/color-utils/index.d.ts +0 -21
  156. package/dist/types-ts4.5/ui/top-nav-items/themed/color-utils/parse-user-color.d.ts +0 -13
  157. package/dist/types-ts4.5/ui/top-nav-items/themed/color-utils/types.d.ts +0 -17
  158. package/dist/types-ts4.5/ui/top-nav-items/themed/get-custom-theme-styles.d.ts +0 -22
  159. package/dist/types-ts4.5/ui/top-nav-items/themed/get-primitives-spread-props.d.ts +0 -16
  160. package/dist/types-ts4.5/ui/top-nav-items/themed/has-custom-theme-context.d.ts +0 -8
  161. package/dist/types-ts4.5/ui/top-nav-items/themed/has-default-background-color-context.d.ts +0 -5
  162. package/dist/types-ts4.5/ui/top-nav-items/themed/icon-button.d.ts +0 -7
  163. package/dist/types-ts4.5/ui/top-nav-items/themed/link-button.d.ts +0 -3
  164. package/dist/types-ts4.5/ui/top-nav-items/themed/link-icon-button.d.ts +0 -7
  165. package/dist/types-ts4.5/ui/top-nav-items/themed/palette-rgba.d.ts +0 -14
  166. package/dist/types-ts4.5/ui/top-nav-items/themed/palette.d.ts +0 -42
  167. package/dist/types-ts4.5/ui/top-nav-items/themed/search.d.ts +0 -55
  168. package/dist/types-ts4.5/ui/top-nav-items/themed/themed-anchor.d.ts +0 -32
  169. package/dist/types-ts4.5/ui/top-nav-items/themed/themed-button.d.ts +0 -10
  170. package/dist/types-ts4.5/ui/top-nav-items/themed/themed-icon-button.d.ts +0 -10
  171. package/dist/types-ts4.5/ui/top-nav-items/themed/themed-link-button.d.ts +0 -16
  172. package/dist/types-ts4.5/ui/top-nav-items/themed/themed-link-icon-button.d.ts +0 -13
  173. package/dist/types-ts4.5/ui/top-nav-items/themed/themed-pressable.d.ts +0 -18
  174. package/dist/types-ts4.5/ui/top-nav-items/themed/types.d.ts +0 -54
  175. package/dist/types-ts4.5/ui/top-nav-items/themed/use-custom-theme-new.d.ts +0 -20
  176. package/dist/types-ts4.5/ui/top-nav-items/themed/use-custom-theme.d.ts +0 -12
@@ -1,52 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import React from 'react';
6
- import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
7
- export type SideNavVisibilityChangeAnalyticsAttributes = {
8
- isSideNavVisible: boolean;
9
- };
10
- /**
11
- * __SideNavToggleButton__
12
- *
13
- * Button for toggling the side nav. It should be used in the top bar.
14
- */
15
- export declare const SideNavToggleButton: ({ defaultCollapsed, expandLabel, collapseLabel, testId, interactionName, onClick, }: {
16
- /**
17
- * @deprecated
18
- *
19
- * This prop is being replaced by `defaultSideNavCollapsed` on the `Root` element,
20
- * and will be removed in the future.
21
- *
22
- * ---
23
- *
24
- * Whether the side nav should be collapsed by default __on desktop screens__.
25
- *
26
- * It is always collapsed by default for mobile screens.
27
- *
28
- * __Note:__ If using this prop, ensure that it is also provided to the `SideNav` slot.
29
- * This is to ensure the state is in sync before post-SSR hydration.
30
- */
31
- defaultCollapsed?: boolean;
32
- /**
33
- * The label when the toggle button will expand the side nav.
34
- */
35
- expandLabel: React.ReactNode;
36
- /**
37
- * The label when the toggle button will collapse the side nav.
38
- */
39
- collapseLabel: React.ReactNode;
40
- /**
41
- * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
42
- */
43
- testId?: string;
44
- /**
45
- * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
46
- */
47
- interactionName?: string;
48
- /**
49
- * The callback function that is called when the toggle button is clicked.
50
- */
51
- onClick?: (e: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent, attributes?: SideNavVisibilityChangeAnalyticsAttributes) => void;
52
- }) => JSX.Element;
@@ -1,61 +0,0 @@
1
- /**
2
- * Using a union type to represent the possible states of the side nav.
3
- * The flyout cannot be open when the desktop side nav is expanded.
4
- *
5
- * The flyout can be in the following states:
6
- * - `open` - the flyout is open and visible
7
- * - `triggered-animate-close` - the flyout was just closed. This is used so we can only animate the sidebar collapsing, when the flyout was open and gets collapsed.
8
- * - `closed` - the flyout state is closed and not visible. This is the default state.
9
- */
10
- export type SideNavState = {
11
- desktop: 'expanded';
12
- mobile: 'expanded';
13
- flyout: 'closed';
14
- lastTrigger: SideNavTrigger | null;
15
- } | {
16
- desktop: 'expanded';
17
- mobile: 'collapsed';
18
- flyout: 'closed';
19
- lastTrigger: SideNavTrigger | null;
20
- } | {
21
- desktop: 'collapsed';
22
- mobile: 'expanded';
23
- flyout: 'closed';
24
- lastTrigger: SideNavTrigger | null;
25
- } | {
26
- desktop: 'collapsed';
27
- mobile: 'expanded';
28
- flyout: 'open';
29
- lastTrigger: SideNavTrigger | null;
30
- } | {
31
- desktop: 'collapsed';
32
- mobile: 'expanded';
33
- flyout: 'triggered-animate-close';
34
- lastTrigger: SideNavTrigger | null;
35
- } | {
36
- desktop: 'collapsed';
37
- mobile: 'collapsed';
38
- flyout: 'closed';
39
- lastTrigger: SideNavTrigger | null;
40
- } | {
41
- desktop: 'collapsed';
42
- mobile: 'collapsed';
43
- flyout: 'open';
44
- lastTrigger: SideNavTrigger | null;
45
- } | {
46
- desktop: 'collapsed';
47
- mobile: 'collapsed';
48
- flyout: 'triggered-animate-close';
49
- lastTrigger: SideNavTrigger | null;
50
- };
51
- /**
52
- * The type of trigger that caused the side nav to be toggled.
53
- * - `click-outside-on-mobile` - toggled by clicking outside of the side nav (mobile only)
54
- * - `double-click` - toggled by double clicking on the side nav panel splitter
55
- * - `keyboard` - toggled by a keyboard action
56
- * - `programmatic` - toggled by a custom action, this is the default value when using the `useToggleSideNav` hook without specifying a trigger
57
- * - `screen-resize` - toggled by a screen resize action
58
- * - `skip-link` - toggled by a skip link action
59
- * - `toggle-button` - toggled by the `SideNavToggleButton` component
60
- */
61
- export type SideNavTrigger = 'click-outside-on-mobile' | 'double-click' | 'keyboard' | 'programmatic' | 'screen-resize' | 'skip-link' | 'toggle-button';
@@ -1,16 +0,0 @@
1
- import { type SideNavTrigger } from './types';
2
- type ExpandSideNav = () => void;
3
- type UseExpandSideNavOptions = {
4
- trigger?: SideNavTrigger;
5
- };
6
- /**
7
- * __useExpandSideNav__
8
- *
9
- * Returns a function that will expand the side nav when called.
10
- *
11
- * It will switch the appropriate internal desktop or mobile side nav visibility state based on the current screen size.
12
- *
13
- * If you need a function to toggle the side nav, use `useToggleSideNav` instead.
14
- */
15
- export declare function useExpandSideNav({ trigger, }?: UseExpandSideNavOptions): ExpandSideNav;
16
- export {};
@@ -1,5 +0,0 @@
1
- /**
2
- * Returns the value of the `isSideNavShortcutEnabled` prop from the `Root` component, which
3
- * is shared through context.
4
- */
5
- export declare function useIsSideNavShortcutEnabled(): boolean;
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- /**
3
- * Returns a ref for the side navigation that is accessible to other Page Layout slots.
4
- *
5
- * Used by the Panel to measure the SideNav when it is calculating its resize bounds.
6
- */
7
- export declare function useSideNavRef(): React.RefObject<HTMLDivElement>;
@@ -1,6 +0,0 @@
1
- /**
2
- * Binds the keyboard shortcut to toggle the side nav.
3
- */
4
- export declare function useSideNavToggleKeyboardShortcut({ canToggleWithShortcut, }: {
5
- canToggleWithShortcut?: () => boolean;
6
- }): void;
@@ -1,16 +0,0 @@
1
- import { type SideNavTrigger } from './types';
2
- export type VisibilityCallback = (args: {
3
- screen: 'mobile' | 'desktop';
4
- trigger?: SideNavTrigger | null;
5
- }) => void;
6
- /**
7
- * Calls the `onExpand` and `onCollapse` callbacks as required.
8
- * This is used for both user-provided callbacks, as well as internal callbacks to respond to visibility state changes.
9
- */
10
- export declare function useSideNavVisibilityCallbacks({ onExpand, onCollapse, isExpandedOnDesktop, isExpandedOnMobile, lastTrigger, }: {
11
- onExpand?: VisibilityCallback;
12
- onCollapse?: VisibilityCallback;
13
- isExpandedOnDesktop: boolean;
14
- isExpandedOnMobile: boolean;
15
- lastTrigger: SideNavTrigger | null;
16
- }): void;
@@ -1,20 +0,0 @@
1
- type HookArgs = {
2
- /**
3
- * The default visibility state of the side nav on desktop screens.
4
- * This value will be used if the visibility state is not set in context yet, e.g. during SSR.
5
- */
6
- defaultCollapsed?: boolean;
7
- };
8
- type HookReturnValue = {
9
- isExpandedOnDesktop: boolean;
10
- isExpandedOnMobile: boolean;
11
- };
12
- /**
13
- * This hook is intended to be used internally within the `@atlaskit/navigation-system` package.
14
- *
15
- * It handles using whether to use the desktop visibility state from _context_, or the _defaultCollapsed_ arg (which comes
16
- * from component props) - based on whether the context has been set yet. In SSR / initial render, the context would not have been
17
- * set yet, so we need to use the _defaultCollapsed_ argument value instead.
18
- */
19
- export declare const useSideNavVisibility: ({ defaultCollapsed, }?: HookArgs) => HookReturnValue;
20
- export {};
@@ -1,16 +0,0 @@
1
- import { type SideNavTrigger } from './types';
2
- type ToggleSideNav = () => void;
3
- type UseToggleSideNavOptions = {
4
- trigger?: SideNavTrigger;
5
- };
6
- /**
7
- * __useToggleSideNav__
8
- *
9
- * Returns a function to toggle the side nav visibility.
10
- *
11
- * It will toggle the appropriate internal desktop or mobile side nav visibility state based on the current screen size.
12
- *
13
- * If you need a function to make the side nav visible, use `useExpandSideNav` instead.
14
- */
15
- export declare function useToggleSideNav({ trigger, }?: UseToggleSideNavOptions): ToggleSideNav;
16
- export {};
@@ -1,8 +0,0 @@
1
- import React from 'react';
2
- /**
3
- * Manages the side nav visibility state and provides the context.
4
- */
5
- export declare const SideNavVisibilityProvider: ({ children, defaultCollapsed, }: {
6
- children: React.ReactNode;
7
- defaultCollapsed?: boolean;
8
- }) => React.JSX.Element;
@@ -1,29 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import React from 'react';
6
- /**
7
- * __TopNavEnd__
8
- *
9
- * Wrapper for the top navigation actions on the inline-end (right) side of the top navigation.
10
- *
11
- * On small viewports, the children will be placed inside a popup, and a button will be rendered to open the popup.
12
- * This is to prevent the actions from overflowing the top navigation.
13
- */
14
- export declare function TopNavEnd({ children, label, showMoreButtonLabel, }: {
15
- /**
16
- * The content of the layout area.
17
- *
18
- * Should contain top nav end item components like `Notifications`, `Help`, `LogIn` etc.
19
- */
20
- children: React.ReactNode;
21
- /**
22
- * Provide an accessible label, often used by screen readers.
23
- */
24
- label?: string;
25
- /**
26
- * The label for the show more button.
27
- */
28
- showMoreButtonLabel?: string;
29
- }): JSX.Element;
@@ -1,24 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import React from 'react';
6
- /**
7
- * __TopNavMiddle__
8
- *
9
- * Wrapper for the actions in the middle of the top navigation.
10
- *
11
- * Expects that the search bar is the first child.
12
- * If it is not, you might see unexpected layout behavior.
13
- */
14
- export declare function TopNavMiddle({ children, }: {
15
- /**
16
- * The content of the layout area.
17
- *
18
- * The first child should be the search bar.
19
- * If it is not, you might see unexpected layout behavior.
20
- *
21
- * Should also contain the Create button.
22
- */
23
- children: React.ReactNode;
24
- }): JSX.Element;
@@ -1,32 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import React from 'react';
6
- type TopNavStartProps = {
7
- /**
8
- * The content of the layout area.
9
- *
10
- * Should contain `SideNavToggleButton`, `AppSwitcher`, and `AppLogo`/`CustomLogo` components.
11
- */
12
- children: React.ReactNode;
13
- /**
14
- * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
15
- */
16
- testId?: string;
17
- /**
18
- * Slot for the side nav toggle button.
19
- *
20
- * You should only render `<SideNavToggleButton>` inside this slot, not as a child.
21
- *
22
- * Consumers that do not need a toggle button can explicitly pass `null`.
23
- */
24
- sideNavToggleButton: React.ReactNode;
25
- };
26
- /**
27
- * __TopNavStart__
28
- *
29
- * Wrapper for the top navigation actions on the inline-start (left) side of the top navigation.
30
- */
31
- export declare function TopNavStart({ children, testId, sideNavToggleButton, }: TopNavStartProps): JSX.Element;
32
- export {};
@@ -1,29 +0,0 @@
1
- import type { StrictXCSSProp } from '@atlaskit/css';
2
- import { type CustomTheme } from '../../top-nav-items/themed/get-custom-theme-styles';
3
- import type { CommonSlotProps } from '../types';
4
- type TopNavProps = CommonSlotProps & {
5
- /**
6
- * The content of the layout area.
7
- * Should include `TopNavStart`, `TopNavMiddle`, and `TopNavEnd`.
8
- */
9
- children: React.ReactNode;
10
- /**
11
- * Bounded style overrides.
12
- */
13
- xcss?: StrictXCSSProp<'backgroundColor', never>;
14
- /**
15
- * Not intended for long term use. This is added to support the migration to the new page layout.
16
- * We may replace this prop in a future release.
17
- */
18
- height?: number;
19
- /**
20
- * Custom theme for the top navigation. This is a port of Nav 3 functionality, and not recommended for new usage,
21
- * as it does not align with our future vision.
22
- */
23
- customTheme?: CustomTheme;
24
- };
25
- /**
26
- * The top nav layout area. It will display at the top of the screen, below the banner if one is present.
27
- */
28
- export declare const TopNav: (props: TopNavProps) => React.ReactNode;
29
- export {};
@@ -1,20 +0,0 @@
1
- /**
2
- * Common props for layout slots.
3
- *
4
- * Does not include `children`, because we want to provide tailored JSDocs for each layout slot.
5
- */
6
- export type CommonSlotProps = {
7
- /**
8
- * The label for this slot's skip link. Defaults to the slot's `label` value.
9
- */
10
- skipLinkLabel?: string;
11
- /**
12
- * The `id` attribute of the slot. Used to connect the layout slot's skip link to the layout element.
13
- * If not provided, a unique ID will be generated.
14
- */
15
- id?: string;
16
- /**
17
- * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
18
- */
19
- testId?: string;
20
- };
@@ -1,12 +0,0 @@
1
- /**
2
- * Returns an ID for use by the layout element and skip links.
3
- *
4
- * If the consumer has already provided an ID, it will be used instead.
5
- * Otherwise, a unique ID will be returned.
6
- */
7
- export declare function useLayoutId({ providedId, }?: {
8
- /**
9
- * The ID provided by the consumer. If provided, it will be used instead.
10
- */
11
- providedId?: string;
12
- }): string;
@@ -1,9 +0,0 @@
1
- /**
2
- * Monitors resizing on the panel splitter with the provided `panelId`
3
- * and writes the resizing width to the `cssVar` on the root element (`<html>`).
4
- */
5
- export declare function useResizingWidthCssVarOnRootElement({ isEnabled, cssVar, panelId, }: {
6
- isEnabled?: boolean;
7
- cssVar: string;
8
- panelId: symbol;
9
- }): void;
@@ -1,17 +0,0 @@
1
- /**
2
- * Returns the `fallbackWidth` if the provided `defaultWidthProp` is not an integer value.
3
- */
4
- export declare function useSafeDefaultWidth({ defaultWidthProp, fallbackDefaultWidth, slotName, }: {
5
- /**
6
- * The `defaultWidth` passed in by the app.
7
- */
8
- defaultWidthProp: number;
9
- /**
10
- * The fallback value for `defaultWidth` if `defaultWidthProp` is invalid.
11
- */
12
- fallbackDefaultWidth: number;
13
- /**
14
- * The name of the slot, used for the dev-time console error.
15
- */
16
- slotName: string;
17
- }): number;
@@ -1,5 +0,0 @@
1
- /**
2
- * Returns a unique ID for use by layout elements and skip links.
3
- * You can use this for custom skip links.
4
- */
5
- export declare function useSkipLinkId(): string;
@@ -1,32 +0,0 @@
1
- import React from 'react';
2
- import type { TriggerProps } from '@atlaskit/popup/types';
3
- interface AppSwitcherProps extends Partial<Omit<TriggerProps, 'ref' | 'data-ds--level'>> {
4
- /**
5
- * Provide an accessible label, often used by screen readers.
6
- */
7
- label: React.ReactNode;
8
- /**
9
- * Handler called on click.
10
- */
11
- onClick?: React.MouseEventHandler<HTMLButtonElement>;
12
- /**
13
- * Called when the mouse enters the element container.
14
- * Allows preloading popup components
15
- */
16
- onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
17
- /**
18
- * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
19
- */
20
- interactionName?: string;
21
- /**
22
- * Indicates that the button is selected.
23
- */
24
- isSelected?: boolean;
25
- }
26
- /**
27
- * __App switcher__
28
- *
29
- * The trigger button for the app switcher. Allows users to switch between Atlassian products.
30
- */
31
- export declare const AppSwitcher: React.ForwardRefExoticComponent<React.PropsWithoutRef<AppSwitcherProps> & React.RefAttributes<HTMLButtonElement>>;
32
- export {};
@@ -1,25 +0,0 @@
1
- import React from 'react';
2
- /**
3
- * __Chat button__
4
- *
5
- * The chat button for the top navigation.
6
- * TODO: check if this is still needed and remove. Jira doesn't use it - there's a separate button for ConversationAssistant
7
- */
8
- export declare const ChatButton: ({ children, onClick, isSelected, interactionName, }: {
9
- /**
10
- * Text content to be rendered in the button.
11
- */
12
- children: React.ReactNode;
13
- /**
14
- * Handler called on click.
15
- */
16
- onClick?: React.MouseEventHandler<HTMLButtonElement>;
17
- /**
18
- * Indicates that the button is selected.
19
- */
20
- isSelected?: boolean;
21
- /**
22
- * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
23
- */
24
- interactionName?: string;
25
- }) => React.JSX.Element;
@@ -1,30 +0,0 @@
1
- import React from 'react';
2
- import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
3
- type CreateButtonProps = {
4
- /**
5
- * The content of the button.
6
- */
7
- children: React.ReactNode;
8
- /**
9
- * Handler called on click. You can use the second argument to fire Atlaskit analytics events on custom channels.
10
- * They could then be routed to GASv3 analytics. See the pressable or anchor primitive code examples for
11
- * information on [firing Atlaskit analytics events](https://atlassian.design/components/primitives/pressable/examples#atlaskit-analytics)
12
- * or [routing these to GASv3 analytics](https://atlassian.design/components/primitives/pressable/examples#gasv3-analytics).
13
- */
14
- onClick?: (e: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
15
- /**
16
- * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
17
- */
18
- testId?: string;
19
- /**
20
- * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
21
- */
22
- interactionName?: string;
23
- };
24
- /**
25
- * __Create button__
26
- *
27
- * The create button for the top navigation.
28
- */
29
- export declare const CreateButton: React.ForwardRefExoticComponent<React.PropsWithoutRef<CreateButtonProps> & React.RefAttributes<HTMLButtonElement>>;
30
- export {};
@@ -1,23 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import { type ReactNode } from 'react';
6
- type CustomTitleProps = {
7
- /**
8
- * The custom title value to display.
9
- */
10
- children: ReactNode;
11
- /**
12
- * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
13
- */
14
- testId?: string;
15
- };
16
- /**
17
- * __Custom title__
18
- *
19
- * A custom site title to be displayed in the top navigation, to the right of the logo.
20
- * It is hidden on smaller viewports.
21
- */
22
- export declare const CustomTitle: React.ForwardRefExoticComponent<React.PropsWithoutRef<CustomTitleProps> & React.RefAttributes<HTMLDivElement>>;
23
- export {};
@@ -1,80 +0,0 @@
1
- import React from 'react';
2
- import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
3
- import { type IconButtonProps } from '@atlaskit/button/new';
4
- import type { TriggerProps } from '@atlaskit/popup/types';
5
- import type { TooltipProps } from '@atlaskit/tooltip';
6
- export interface EndItemProps extends Partial<Pick<TriggerProps, 'aria-controls' | 'aria-expanded' | 'aria-haspopup'>> {
7
- /**
8
- * Provide an accessible label, often used by screen readers.
9
- */
10
- label: React.ReactNode;
11
- /**
12
- * Places an icon within the button.
13
- */
14
- icon: IconButtonProps['icon'];
15
- /**
16
- * Handler called on click. You can use the second argument to fire Atlaskit analytics events on custom channels.
17
- * They could then be routed to GASv3 analytics. See the pressable or anchor primitive code examples for
18
- * information on [firing Atlaskit analytics events](https://atlassian.design/components/primitives/pressable/examples#atlaskit-analytics)
19
- * or [routing these to GASv3 analytics](https://atlassian.design/components/primitives/pressable/examples#gasv3-analytics).
20
- */
21
- onClick?: (e: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
22
- /**
23
- * Called when the mouse enters the element container.
24
- * Allows preloading popup components
25
- */
26
- onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
27
- /**
28
- * Indicates that the button is selected.
29
- */
30
- isSelected?: boolean;
31
- /**
32
- * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
33
- */
34
- testId?: string;
35
- /**
36
- * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
37
- */
38
- interactionName?: string;
39
- /**
40
- * Can be used to disable the default `listitem` role.
41
- *
42
- * This is intended for when the item is a popup trigger,
43
- * and requires you to render your own `<MenuListItem>` to wrap the action.
44
- *
45
- * @default true
46
- *
47
- * @example
48
- * ```tsx
49
- * <TopNavEnd>
50
- * <MenuListItem>
51
- * <DropdownMenu
52
- * shouldRenderToParent
53
- * trigger={({ triggerRef, ...props }) => (
54
- * <Profile {...props} ref={triggerRef} label="Profile" isListItem={false} />
55
- * )}
56
- * >
57
- * <DropdownItemGroup>
58
- * <DropdownItem>Account</DropdownItem>
59
- * </DropdownItemGroup>
60
- * </DropdownMenu>
61
- * </MenuListItem>
62
- * </TopNavEnd>
63
- * ```
64
- */
65
- isListItem?: boolean;
66
- /**
67
- * Display a keyboard shortcut in the tooltip.
68
- *
69
- * Keys will be displayed as individual keyboard key segments after the tooltip content.
70
- */
71
- shortcut?: TooltipProps['shortcut'];
72
- }
73
- /**
74
- * __EndItem__
75
- *
76
- * An icon button for the `TopNavEnd` layout area of the top navigation. Used for adding custom actions that are not already provided.
77
- *
78
- * For common actions, like `Notifications`, `Help`, `Profile`, `Settings`, use the provided components as appropriate.
79
- */
80
- export declare const EndItem: React.ForwardRefExoticComponent<React.PropsWithoutRef<EndItemProps> & React.RefAttributes<HTMLButtonElement>>;
@@ -1,19 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- */
4
- import React, { type ComponentType } from 'react';
5
- import { type EndItemProps } from './end-item';
6
- interface HelpProps extends Omit<EndItemProps, 'icon' | 'aria-controls' | 'aria-expanded' | 'aria-haspopup'> {
7
- /**
8
- * The component to render as the badge.
9
- * You are recommended to use the Badge component from `@atlaskit/badge`.
10
- */
11
- badge?: ComponentType;
12
- }
13
- /**
14
- * __Help__
15
- *
16
- * The trigger button for the help menu in the top navigation bar.
17
- */
18
- export declare const Help: React.ForwardRefExoticComponent<React.PropsWithoutRef<HelpProps> & React.RefAttributes<HTMLButtonElement>>;
19
- export {};
@@ -1,17 +0,0 @@
1
- import React from 'react';
2
- import { type IconProp } from '@atlaskit/button/new';
3
- /**
4
- * __Icon renderer__
5
- *
6
- * Used to support render props with icons.
7
- *
8
- * This is copied from @atlaskit/button to render IconButtons. Some IconButton's DOM element
9
- * will be re-created during SSR -> SPA hydration without using this, which delays TTVC. As
10
- * IconRenderer is already used in @atlaskit/button to mitigate this issue, add it here to
11
- * mitigate the same issue for IconButtons in navigation-system, especially for ThemedIconButton.
12
- *
13
- */
14
- declare const IconRenderer: ({ icon: Icon }: {
15
- icon: IconProp;
16
- }) => React.JSX.Element;
17
- export default IconRenderer;