@atlaskit/navigation-system 9.4.2 → 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 (190) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/constellation/layout/code.mdx +2 -1
  3. package/constellation/layout/usage.mdx +7 -7
  4. package/dist/cjs/components/skip-links/skip-link.js +0 -1
  5. package/dist/cjs/ui/page-layout/root.compiled.css +1 -0
  6. package/dist/cjs/ui/page-layout/root.js +8 -3
  7. package/dist/cjs/ui/top-nav-items/nav-logo/custom-logo.js +0 -1
  8. package/dist/es2019/components/skip-links/skip-link.js +0 -1
  9. package/dist/es2019/ui/page-layout/root.compiled.css +1 -0
  10. package/dist/es2019/ui/page-layout/root.js +8 -3
  11. package/dist/es2019/ui/top-nav-items/nav-logo/custom-logo.js +0 -1
  12. package/dist/esm/components/skip-links/skip-link.js +0 -1
  13. package/dist/esm/ui/page-layout/root.compiled.css +1 -0
  14. package/dist/esm/ui/page-layout/root.js +8 -3
  15. package/dist/esm/ui/top-nav-items/nav-logo/custom-logo.js +0 -1
  16. package/experimental/ribbon/package.json +1 -8
  17. package/fhs-rollout/package.json +1 -8
  18. package/layout/aside/package.json +1 -8
  19. package/layout/banner/package.json +1 -8
  20. package/layout/main/package.json +1 -8
  21. package/layout/panel/package.json +1 -8
  22. package/layout/panel-splitter/package.json +1 -8
  23. package/layout/root/package.json +1 -8
  24. package/layout/side-nav/package.json +1 -8
  25. package/layout/skip-links/package.json +1 -8
  26. package/layout/top-nav/package.json +1 -8
  27. package/legacy/css-variables/package.json +1 -8
  28. package/package.json +42 -50
  29. package/theming/color-utils/parse-hex/package.json +1 -8
  30. package/theming/color-utils/parse-hsl/package.json +1 -8
  31. package/theming/color-utils/parse-rgb/package.json +1 -8
  32. package/theming/color-utils/parse-user-color/package.json +1 -8
  33. package/theming/top-nav-button/package.json +1 -8
  34. package/theming/use-has-custom-theme/package.json +1 -8
  35. package/theming/use-legacy-search-theme/package.json +1 -8
  36. package/top-nav-items/create-button/package.json +1 -8
  37. package/top-nav-items/custom-title/package.json +1 -8
  38. package/top-nav-items/help/package.json +1 -8
  39. package/top-nav-items/log-in/package.json +1 -8
  40. package/top-nav-items/notifications/package.json +1 -8
  41. package/top-nav-items/package.json +1 -8
  42. package/top-nav-items/profile/package.json +1 -8
  43. package/top-nav-items/settings/package.json +1 -8
  44. package/dist/types-ts4.5/components/badge-container.d.ts +0 -32
  45. package/dist/types-ts4.5/components/list-item.d.ts +0 -27
  46. package/dist/types-ts4.5/components/list.d.ts +0 -28
  47. package/dist/types-ts4.5/components/skip-links/focus-element.d.ts +0 -4
  48. package/dist/types-ts4.5/components/skip-links/skip-link.d.ts +0 -19
  49. package/dist/types-ts4.5/components/skip-links/skip-links-container.d.ts +0 -18
  50. package/dist/types-ts4.5/components/skip-links/skip-links-popup.d.ts +0 -11
  51. package/dist/types-ts4.5/context/skip-links/skip-links-context.d.ts +0 -9
  52. package/dist/types-ts4.5/context/skip-links/skip-links-provider.d.ts +0 -13
  53. package/dist/types-ts4.5/context/skip-links/types.d.ts +0 -44
  54. package/dist/types-ts4.5/context/skip-links/use-skip-link-internal.d.ts +0 -10
  55. package/dist/types-ts4.5/context/skip-links/use-skip-link.d.ts +0 -18
  56. package/dist/types-ts4.5/context/top-nav-start/top-nav-start-attach-ref.d.ts +0 -1
  57. package/dist/types-ts4.5/context/top-nav-start/top-nav-start-context-provider.d.ts +0 -17
  58. package/dist/types-ts4.5/context/top-nav-start/top-nav-start-element.d.ts +0 -1
  59. package/dist/types-ts4.5/entry-points/experimental/ribbon.d.ts +0 -1
  60. package/dist/types-ts4.5/entry-points/fhs-rollout.d.ts +0 -3
  61. package/dist/types-ts4.5/entry-points/layout/aside.d.ts +0 -1
  62. package/dist/types-ts4.5/entry-points/layout/banner.d.ts +0 -1
  63. package/dist/types-ts4.5/entry-points/layout/main.d.ts +0 -3
  64. package/dist/types-ts4.5/entry-points/layout/panel-splitter.d.ts +0 -3
  65. package/dist/types-ts4.5/entry-points/layout/panel.d.ts +0 -1
  66. package/dist/types-ts4.5/entry-points/layout/root.d.ts +0 -1
  67. package/dist/types-ts4.5/entry-points/layout/side-nav.d.ts +0 -8
  68. package/dist/types-ts4.5/entry-points/layout/skip-links.d.ts +0 -2
  69. package/dist/types-ts4.5/entry-points/layout/top-nav.d.ts +0 -4
  70. package/dist/types-ts4.5/entry-points/legacy/css-variables.d.ts +0 -12
  71. package/dist/types-ts4.5/entry-points/theming/color-utils/parse-hex.d.ts +0 -1
  72. package/dist/types-ts4.5/entry-points/theming/color-utils/parse-hsl.d.ts +0 -1
  73. package/dist/types-ts4.5/entry-points/theming/color-utils/parse-rgb.d.ts +0 -1
  74. package/dist/types-ts4.5/entry-points/theming/color-utils/parse-user-color.d.ts +0 -1
  75. package/dist/types-ts4.5/entry-points/theming/top-nav-button.d.ts +0 -4
  76. package/dist/types-ts4.5/entry-points/theming/use-has-custom-theme.d.ts +0 -1
  77. package/dist/types-ts4.5/entry-points/theming/use-legacy-search-theme.d.ts +0 -1
  78. package/dist/types-ts4.5/entry-points/top-nav-items/create-button.d.ts +0 -1
  79. package/dist/types-ts4.5/entry-points/top-nav-items/custom-title.d.ts +0 -1
  80. package/dist/types-ts4.5/entry-points/top-nav-items/help.d.ts +0 -1
  81. package/dist/types-ts4.5/entry-points/top-nav-items/index.d.ts +0 -14
  82. package/dist/types-ts4.5/entry-points/top-nav-items/log-in.d.ts +0 -1
  83. package/dist/types-ts4.5/entry-points/top-nav-items/notifications.d.ts +0 -1
  84. package/dist/types-ts4.5/entry-points/top-nav-items/profile.d.ts +0 -1
  85. package/dist/types-ts4.5/entry-points/top-nav-items/settings.d.ts +0 -1
  86. package/dist/types-ts4.5/index.d.ts +0 -34
  87. package/dist/types-ts4.5/ui/fhs-rollout/is-custom-is-fhs-enabled-context.d.ts +0 -7
  88. package/dist/types-ts4.5/ui/fhs-rollout/is-fhs-enabled-context.d.ts +0 -8
  89. package/dist/types-ts4.5/ui/fhs-rollout/is-fhs-enabled-provider.d.ts +0 -10
  90. package/dist/types-ts4.5/ui/fhs-rollout/types.d.ts +0 -1
  91. package/dist/types-ts4.5/ui/fhs-rollout/use-is-fhs-enabled.d.ts +0 -6
  92. package/dist/types-ts4.5/ui/page-layout/aside.d.ts +0 -29
  93. package/dist/types-ts4.5/ui/page-layout/banner.d.ts +0 -24
  94. package/dist/types-ts4.5/ui/page-layout/constants.d.ts +0 -50
  95. package/dist/types-ts4.5/ui/page-layout/dangerously-hoist-css-var-to-document-root.d.ts +0 -8
  96. package/dist/types-ts4.5/ui/page-layout/hoist-css-var-to-local-grid.d.ts +0 -13
  97. package/dist/types-ts4.5/ui/page-layout/hoist-slot-sizes-context.d.ts +0 -5
  98. package/dist/types-ts4.5/ui/page-layout/main/main-sticky-header.d.ts +0 -23
  99. package/dist/types-ts4.5/ui/page-layout/main/main.d.ts +0 -16
  100. package/dist/types-ts4.5/ui/page-layout/panel-splitter/convert-resize-bound-to-pixels.d.ts +0 -7
  101. package/dist/types-ts4.5/ui/page-layout/panel-splitter/get-percentage-within-pixel-bounds.d.ts +0 -18
  102. package/dist/types-ts4.5/ui/page-layout/panel-splitter/get-pixel-width.d.ts +0 -4
  103. package/dist/types-ts4.5/ui/page-layout/panel-splitter/get-width-from-drag-location.d.ts +0 -8
  104. package/dist/types-ts4.5/ui/page-layout/panel-splitter/is-panel-splitter-drag-data.d.ts +0 -9
  105. package/dist/types-ts4.5/ui/page-layout/panel-splitter/keyboard-resize-manager.d.ts +0 -15
  106. package/dist/types-ts4.5/ui/page-layout/panel-splitter/on-double-click-context.d.ts +0 -8
  107. package/dist/types-ts4.5/ui/page-layout/panel-splitter/panel-splitter-context.d.ts +0 -64
  108. package/dist/types-ts4.5/ui/page-layout/panel-splitter/panel-splitter-drag-symbol.d.ts +0 -1
  109. package/dist/types-ts4.5/ui/page-layout/panel-splitter/panel-splitter.d.ts +0 -52
  110. package/dist/types-ts4.5/ui/page-layout/panel-splitter/provider.d.ts +0 -28
  111. package/dist/types-ts4.5/ui/page-layout/panel-splitter/side-nav-panel-splitter.d.ts +0 -38
  112. package/dist/types-ts4.5/ui/page-layout/panel-splitter/types.d.ts +0 -23
  113. package/dist/types-ts4.5/ui/page-layout/panel.d.ts +0 -40
  114. package/dist/types-ts4.5/ui/page-layout/ribbon.d.ts +0 -11
  115. package/dist/types-ts4.5/ui/page-layout/root.d.ts +0 -71
  116. package/dist/types-ts4.5/ui/page-layout/side-nav/flyout-close-delay-ms.d.ts +0 -5
  117. package/dist/types-ts4.5/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-context.d.ts +0 -8
  118. package/dist/types-ts4.5/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-provider.d.ts +0 -5
  119. package/dist/types-ts4.5/ui/page-layout/side-nav/set-side-nav-visibility-state.d.ts +0 -3
  120. package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-content.d.ts +0 -24
  121. package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-element-provider.d.ts +0 -4
  122. package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-footer.d.ts +0 -19
  123. package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-header.d.ts +0 -14
  124. package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-ref-context.d.ts +0 -2
  125. package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-toggle-button-attach-ref.d.ts +0 -1
  126. package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-toggle-button-element.d.ts +0 -5
  127. package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-toggle-tooltip-keyboard-shortcut.d.ts +0 -6
  128. package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-visibility-state.d.ts +0 -6
  129. package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav.d.ts +0 -93
  130. package/dist/types-ts4.5/ui/page-layout/side-nav/toggle-button-provider.d.ts +0 -17
  131. package/dist/types-ts4.5/ui/page-layout/side-nav/toggle-button.d.ts +0 -52
  132. package/dist/types-ts4.5/ui/page-layout/side-nav/types.d.ts +0 -61
  133. package/dist/types-ts4.5/ui/page-layout/side-nav/use-expand-side-nav.d.ts +0 -16
  134. package/dist/types-ts4.5/ui/page-layout/side-nav/use-is-side-nav-shortcut-enabled.d.ts +0 -5
  135. package/dist/types-ts4.5/ui/page-layout/side-nav/use-side-nav-ref.d.ts +0 -7
  136. package/dist/types-ts4.5/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.d.ts +0 -6
  137. package/dist/types-ts4.5/ui/page-layout/side-nav/use-side-nav-visibility-callbacks.d.ts +0 -16
  138. package/dist/types-ts4.5/ui/page-layout/side-nav/use-side-nav-visibility.d.ts +0 -20
  139. package/dist/types-ts4.5/ui/page-layout/side-nav/use-toggle-side-nav.d.ts +0 -16
  140. package/dist/types-ts4.5/ui/page-layout/side-nav/visibility-provider.d.ts +0 -8
  141. package/dist/types-ts4.5/ui/page-layout/top-nav/top-nav-end.d.ts +0 -29
  142. package/dist/types-ts4.5/ui/page-layout/top-nav/top-nav-middle.d.ts +0 -24
  143. package/dist/types-ts4.5/ui/page-layout/top-nav/top-nav-start.d.ts +0 -32
  144. package/dist/types-ts4.5/ui/page-layout/top-nav/top-nav.d.ts +0 -29
  145. package/dist/types-ts4.5/ui/page-layout/types.d.ts +0 -20
  146. package/dist/types-ts4.5/ui/page-layout/use-layout-id.d.ts +0 -12
  147. package/dist/types-ts4.5/ui/page-layout/use-resizing-width-css-var-on-root-element.d.ts +0 -9
  148. package/dist/types-ts4.5/ui/page-layout/use-safe-default-width.d.ts +0 -17
  149. package/dist/types-ts4.5/ui/page-layout/use-skip-link-id.d.ts +0 -5
  150. package/dist/types-ts4.5/ui/top-nav-items/app-switcher.d.ts +0 -32
  151. package/dist/types-ts4.5/ui/top-nav-items/chat-button.d.ts +0 -25
  152. package/dist/types-ts4.5/ui/top-nav-items/create-button.d.ts +0 -30
  153. package/dist/types-ts4.5/ui/top-nav-items/custom-title.d.ts +0 -23
  154. package/dist/types-ts4.5/ui/top-nav-items/end-item.d.ts +0 -80
  155. package/dist/types-ts4.5/ui/top-nav-items/help.d.ts +0 -19
  156. package/dist/types-ts4.5/ui/top-nav-items/icon-renderer.d.ts +0 -17
  157. package/dist/types-ts4.5/ui/top-nav-items/log-in.d.ts +0 -36
  158. package/dist/types-ts4.5/ui/top-nav-items/nav-logo/app-logo.d.ts +0 -37
  159. package/dist/types-ts4.5/ui/top-nav-items/nav-logo/custom-logo.d.ts +0 -36
  160. package/dist/types-ts4.5/ui/top-nav-items/nav-logo/logo-renderer.d.ts +0 -11
  161. package/dist/types-ts4.5/ui/top-nav-items/notifications.d.ts +0 -16
  162. package/dist/types-ts4.5/ui/top-nav-items/profile.d.ts +0 -15
  163. package/dist/types-ts4.5/ui/top-nav-items/search.d.ts +0 -38
  164. package/dist/types-ts4.5/ui/top-nav-items/settings.d.ts +0 -11
  165. package/dist/types-ts4.5/ui/top-nav-items/themed/button.d.ts +0 -7
  166. package/dist/types-ts4.5/ui/top-nav-items/themed/color-utils/formats/hex.d.ts +0 -9
  167. package/dist/types-ts4.5/ui/top-nav-items/themed/color-utils/formats/hsl.d.ts +0 -7
  168. package/dist/types-ts4.5/ui/top-nav-items/themed/color-utils/formats/rgb.d.ts +0 -7
  169. package/dist/types-ts4.5/ui/top-nav-items/themed/color-utils/index.d.ts +0 -21
  170. package/dist/types-ts4.5/ui/top-nav-items/themed/color-utils/parse-user-color.d.ts +0 -13
  171. package/dist/types-ts4.5/ui/top-nav-items/themed/color-utils/types.d.ts +0 -17
  172. package/dist/types-ts4.5/ui/top-nav-items/themed/get-custom-theme-styles.d.ts +0 -22
  173. package/dist/types-ts4.5/ui/top-nav-items/themed/get-primitives-spread-props.d.ts +0 -16
  174. package/dist/types-ts4.5/ui/top-nav-items/themed/has-custom-theme-context.d.ts +0 -8
  175. package/dist/types-ts4.5/ui/top-nav-items/themed/has-default-background-color-context.d.ts +0 -5
  176. package/dist/types-ts4.5/ui/top-nav-items/themed/icon-button.d.ts +0 -7
  177. package/dist/types-ts4.5/ui/top-nav-items/themed/link-button.d.ts +0 -3
  178. package/dist/types-ts4.5/ui/top-nav-items/themed/link-icon-button.d.ts +0 -7
  179. package/dist/types-ts4.5/ui/top-nav-items/themed/palette-rgba.d.ts +0 -14
  180. package/dist/types-ts4.5/ui/top-nav-items/themed/palette.d.ts +0 -42
  181. package/dist/types-ts4.5/ui/top-nav-items/themed/search.d.ts +0 -55
  182. package/dist/types-ts4.5/ui/top-nav-items/themed/themed-anchor.d.ts +0 -32
  183. package/dist/types-ts4.5/ui/top-nav-items/themed/themed-button.d.ts +0 -10
  184. package/dist/types-ts4.5/ui/top-nav-items/themed/themed-icon-button.d.ts +0 -10
  185. package/dist/types-ts4.5/ui/top-nav-items/themed/themed-link-button.d.ts +0 -16
  186. package/dist/types-ts4.5/ui/top-nav-items/themed/themed-link-icon-button.d.ts +0 -13
  187. package/dist/types-ts4.5/ui/top-nav-items/themed/themed-pressable.d.ts +0 -18
  188. package/dist/types-ts4.5/ui/top-nav-items/themed/types.d.ts +0 -54
  189. package/dist/types-ts4.5/ui/top-nav-items/themed/use-custom-theme-new.d.ts +0 -20
  190. package/dist/types-ts4.5/ui/top-nav-items/themed/use-custom-theme.d.ts +0 -12
@@ -1,24 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import React, { type ReactNode } from 'react';
6
- /**
7
- * The main content of the side nav, filling up the middle section. It acts as a scroll container.
8
- *
9
- * It will grow to take up the available space in the side nav — this is used to push the footer to the
10
- * bottom of the side nav.
11
- */
12
- export declare const SideNavBody: React.ForwardRefExoticComponent<React.PropsWithoutRef<SideNavContentProps> & React.RefAttributes<HTMLDivElement>>;
13
- type SideNavContentProps = {
14
- /**
15
- * The content of the layout area.
16
- * Should contain side nav menu items.
17
- */
18
- children: ReactNode;
19
- /**
20
- * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
21
- */
22
- testId?: string;
23
- };
24
- export {};
@@ -1,4 +0,0 @@
1
- import React, { type ReactNode } from 'react';
2
- export declare function SideNavElementProvider({ children }: {
3
- children: ReactNode;
4
- }): React.JSX.Element;
@@ -1,19 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import type { ReactNode } from 'react';
6
- import { type StrictXCSSProp } from '@atlaskit/css';
7
- /**
8
- * The bottom part of the side nav.
9
- */
10
- export declare const SideNavFooter: ({ children, xcss, }: {
11
- /**
12
- * The content of the layout area.
13
- */
14
- children: ReactNode;
15
- /**
16
- * Bounded style overrides.
17
- */
18
- xcss?: StrictXCSSProp<'backgroundColor', never>;
19
- }) => JSX.Element;
@@ -1,14 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import type { ReactNode } from 'react';
6
- /**
7
- * The top part of the side nav.
8
- */
9
- export declare const SideNavHeader: ({ children, }: {
10
- /**
11
- * The content of the layout area.
12
- */
13
- children: ReactNode;
14
- }) => JSX.Element;
@@ -1,2 +0,0 @@
1
- import { type Context } from 'react';
2
- export declare const SideNavRefContext: Context<React.RefObject<HTMLDivElement>>;
@@ -1 +0,0 @@
1
- export declare const SideNavToggleButtonAttachRef: import('react').Context<(newVal: HTMLButtonElement | null) => void>;
@@ -1,5 +0,0 @@
1
- /**
2
- * Context for the side nav toggle button element.
3
- * Used to power the side nav flyout by allowing the side nav to bind event listeners to the button element.
4
- */
5
- export declare const SideNavToggleButtonElement: import('react').Context<HTMLButtonElement | null>;
@@ -1,6 +0,0 @@
1
- /**
2
- * The keyboard shortcut used in tooltips for indicating how to toggle the side nav.
3
- *
4
- * Used in `SideNavToggleButton` and `SideNavPanelSplitter` tooltips.
5
- */
6
- export declare const sideNavToggleTooltipKeyboardShortcut: string[];
@@ -1,6 +0,0 @@
1
- import type { SideNavState } from './types';
2
- /**
3
- * Context for the visibility of the side nav.
4
- * State is initialised as null. This is used when the value has not been set yet - which is important to know for SSR.
5
- */
6
- export declare const SideNavVisibilityState: import('react').Context<SideNavState | null>;
@@ -1,93 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- * @jsxFrag
5
- */
6
- import React from 'react';
7
- import type { CommonSlotProps } from '../types';
8
- import { type VisibilityCallback } from './use-side-nav-visibility-callbacks';
9
- type SideNavProps = CommonSlotProps & {
10
- /**
11
- * The content of the layout area.
12
- * Should include side nav layout areas as required: `SideNavHeader`, `SideNavBody`, `SideNavFooter`.
13
- * Within these, you can use side nav menu items.
14
- */
15
- children: React.ReactNode;
16
- /**
17
- * The accessible name of the slot, announced by screen readers.
18
- */
19
- label?: string;
20
- /**
21
- * @deprecated
22
- *
23
- * This prop is being replaced by `defaultSideNavCollapsed` on the `Root` element,
24
- * and will be removed in the future.
25
- *
26
- * ---
27
- *
28
- * Whether the side nav should be collapsed by default __on desktop screens__.
29
- *
30
- * It is always collapsed by default for mobile screens.
31
- *
32
- * This value is used when the side nav is first mounted, but you should continuously update your
33
- * persisted state using the `onCollapse` and `onExpand` callbacks, to ensure it is up to date
34
- * when the app is reloaded.
35
- *
36
- * __Note:__ If using this prop, ensure that it is also provided to the `SideNavToggleButton`.
37
- * This is to ensure the state is in sync before post-SSR hydration.
38
- */
39
- defaultCollapsed?: boolean;
40
- /**
41
- * The default width of the side nav layout area.
42
- *
43
- * It should be an integer between the resize bounds - the minimum is 240px and the maximum is 50% of the viewport width.
44
- *
45
- * It is only used when the side nav is first mounted, but you should continuously update your
46
- * persisted state using the `onResizeEnd` callback of `PanelSplitter`, to ensure it is up to date
47
- * when the app is reloaded.
48
- */
49
- defaultWidth?: number;
50
- /**
51
- * Called when the side nav is expanded.
52
- */
53
- onExpand?: VisibilityCallback;
54
- /**
55
- * Called when the side nav is collapsed.
56
- */
57
- onCollapse?: VisibilityCallback;
58
- /**
59
- * Called when the side nav begins peeking / flyout.
60
- */
61
- onPeekStart?: () => void;
62
- /**
63
- * Called when the side nav stops peeking / flyout.
64
- */
65
- onPeekEnd?: (args: {
66
- trigger: 'mouse-leave' | 'side-nav-expand';
67
- }) => void;
68
- /**
69
- * Whether the side nav should be toggled in response to the built-in keyboard shortcut. Use this callback to
70
- * conditionally disable the shortcut based on your own custom checks, e.g. if there is a legacy dialog open.
71
- *
72
- * This prop will do nothing if `isSideNavShortcutEnabled` on Root is not set to `true`, as the keyboard event
73
- * listener is only binded if `isSideNavShortcutEnabled` is `true`.
74
- *
75
- * The shortcut key is `Ctrl` + `[`.
76
- *
77
- * Note: The built-in keyboard shortcut is behind `useIsFhsEnabled`.
78
- */
79
- canToggleWithShortcut?: () => boolean;
80
- };
81
- export declare const onPeekStartDelayMs = 500;
82
- /**
83
- * The side navigation layout area. It will show on the left (inline start) of the screen.
84
- *
85
- * Use the side nav area components (`SideNavHeader`, `SideNavBody`, `SideNavFooter`) to position
86
- * content within areas of the side nav.
87
- *
88
- * You can optionally render a `PanelSplitter` as a child to make the side navigation slot resizable.
89
- */
90
- export declare function SideNav({ children, defaultCollapsed, defaultWidth, testId, label, // Default value is defined in `SideNavInternal`
91
- skipLinkLabel, // Default value is defined in `SideNavInternal`
92
- onExpand, onCollapse, onPeekStart, onPeekEnd, canToggleWithShortcut, id, }: SideNavProps): JSX.Element;
93
- export {};
@@ -1,17 +0,0 @@
1
- import React from 'react';
2
- /**
3
- * Provider for the side nav toggle button contexts.
4
- *
5
- * We are using a [ref callback](https://react.dev/reference/react-dom/components/common#ref-callback) along with a state
6
- * for storing the button element once it has mounted, so that the side nav can bind event listeners to the button
7
- * once it is mounted.
8
- *
9
- * Otherwise, the side nav can be mounted before the button (e.g. if the button is lazy loaded), which would prevent the
10
- * event listeners from being set up.
11
- *
12
- * State is required as opposed to just a ref so that the effects in the side nav can react the element actually being mounted,
13
- * as ref values cannot be added as effect dependencies.
14
- */
15
- export declare const SideNavToggleButtonProvider: ({ children, }: {
16
- children: React.ReactNode;
17
- }) => React.JSX.Element;
@@ -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 {};