@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,10 +0,0 @@
1
- import React, { type PropsWithChildren } from 'react';
2
- /**
3
- * __Is fhs enabled provider__
4
- *
5
- * Used to provide a custom value for is FHS enabled.
6
- */
7
- export declare const IsFhsEnabledProvider: ({ children, value, }: IsFhsEnabledProviderProps) => React.JSX.Element;
8
- export type IsFhsEnabledProviderProps = PropsWithChildren<{
9
- value: boolean;
10
- }>;
@@ -1 +0,0 @@
1
- export type Get<T> = () => T;
@@ -1,6 +0,0 @@
1
- /**
2
- * __Use is fhs enabled__
3
- *
4
- * Retrieves is FHS enabled.
5
- */
6
- export declare const useIsFhsEnabled: () => boolean;
@@ -1,29 +0,0 @@
1
- import type { StrictXCSSProp } from '@atlaskit/css';
2
- import type { CommonSlotProps } from './types';
3
- /**
4
- * The Aside is rendered to the right (inline end) of the Main area.
5
- *
6
- * You can optionally render a `PanelSplitter` as a child to make the aside area resizable.
7
- *
8
- * @deprecated Use `Panel` instead.
9
- */
10
- export declare function Aside({ children, xcss, defaultWidth: defaultWidthProp, label, skipLinkLabel, testId, id: providedId, }: CommonSlotProps & {
11
- /**
12
- * The content of the layout area.
13
- */
14
- children: React.ReactNode;
15
- /**
16
- * The accessible name of the slot, announced by screen readers.
17
- */
18
- label?: string;
19
- /**
20
- * Bounded style overrides.
21
- */
22
- xcss?: StrictXCSSProp<'backgroundColor', never>;
23
- /**
24
- * The default width of the layout area.
25
- *
26
- * It should be an integer between the resize bounds - the minimum is 120px and the maximum is 50% of the viewport width.
27
- */
28
- defaultWidth?: number;
29
- }): JSX.Element;
@@ -1,24 +0,0 @@
1
- import type { StrictXCSSProp } from '@atlaskit/css';
2
- import type { CommonSlotProps } from './types';
3
- /**
4
- * The banner layout area. It will always be displayed at the top of the screen.
5
- *
6
- * Should be used to render a `Banner` component from `@atlaskit/banner`.
7
- */
8
- export declare function Banner({ children, xcss, height, skipLinkLabel, testId, id: providedId, }: CommonSlotProps & {
9
- /**
10
- * The content of the layout area.
11
- * Should include a Banner component from `@atlaskit/banner`.
12
- */
13
- children: React.ReactNode;
14
- /**
15
- * Bounded style overrides.
16
- */
17
- xcss?: StrictXCSSProp<'backgroundColor', never>;
18
- /**
19
- * The height of the layout area.
20
- *
21
- * Defaults to 48px.
22
- */
23
- height?: number;
24
- }): JSX.Element;
@@ -1,50 +0,0 @@
1
- /**
2
- * These variables are shared across the different page layout slots.
3
- * This violates the [UI styling standard](https://atlassian.design/components/eslint-plugin-ui-styling-standard/no-imported-style-values/usage).
4
- * We have chosen to ignore this rule to prevent duplicating them across the different slots, and to provide a high level view of them and how they relate.
5
- */
6
- export declare const sideNavVar = "--n_sNvw";
7
- export declare const asideVar = "--n_asDw";
8
- export declare const panelVar = "--n_pnlW";
9
- export declare const bannerMountedVar = "--n_bnrM";
10
- export declare const topNavMountedVar = "--n_tNvM";
11
- export declare const ribbonVar = "--n_rbnW";
12
- /**
13
- * Captures the current width of the side navigation, at all times, including during resizing.
14
- *
15
- * The standard `sideNavVar` only captures the 'committed' width, not the resizing width.
16
- */
17
- export declare const sideNavLiveWidthVar = "--n_sNvlw";
18
- export declare const sideNavPanelSplitterId: unique symbol;
19
- export declare const asidePanelSplitterId: unique symbol;
20
- export declare const panelPanelSplitterId: unique symbol;
21
- export declare const contentHeightWhenFixed = "calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))";
22
- export declare const contentInsetBlockStart = "calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))";
23
- export declare const UNSAFE_topNavVar = "--topNavigationHeight";
24
- export declare const UNSAFE_bannerVar = "--bannerHeight";
25
- export declare const UNSAFE_sideNavLayoutVar = "--leftSidebarWidth";
26
- export declare const UNSAFE_ribbonVar = "--leftPanelWidth";
27
- export declare const UNSAFE_asideLayoutVar = "--rightSidebarWidth";
28
- export declare const UNSAFE_panelLayoutVar = "--rightPanelWidth";
29
- export declare const UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY: 'calc(var(--bannerHeight, 0px) + var(--topNavigationHeight, 0px))';
30
- export declare const UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY: 'calc(var(--leftPanelWidth, 0px) + var(--leftSidebarWidth, 0px))';
31
- export declare const UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY: 'calc(var(--rightSidebarWidth, 0px) + var(--rightPanelWidth, 0px))';
32
- /**
33
- * We define the z-indexes here so each page slot can be locally layered against each other.
34
- * For globally defined values such as flag, modal, etc, we can continue to
35
- * rely on accessing them through global means.
36
- */
37
- export declare const localSlotLayers: {
38
- ribbon: number;
39
- sideNavPanelSplitterFHS: number;
40
- topBar: number;
41
- banner: number;
42
- bannerFHS: number;
43
- topNavFHS: number;
44
- sideNav: number;
45
- panelSmallViewports: number;
46
- };
47
- export declare const openLayerObserverSideNavNamespace = "side-nav";
48
- export declare const openLayerObserverTopNavStartNamespace = "top-nav-start";
49
- export declare const openLayerObserverTopNavMiddleNamespace = "top-nav-middle";
50
- export declare const openLayerObserverTopNavEndNamespace = "top-nav-end";
@@ -1,8 +0,0 @@
1
- import React from 'react';
2
- import { type MediaQuery } from '@atlaskit/primitives/responsive';
3
- export declare const DangerouslyHoistCssVarToDocumentRoot: ({ variableName, value, mediaQuery, responsiveValue, }: {
4
- variableName: string;
5
- value: string | number;
6
- mediaQuery?: MediaQuery;
7
- responsiveValue?: string | number;
8
- }) => React.JSX.Element;
@@ -1,13 +0,0 @@
1
- import React from 'react';
2
- /**
3
- * This is not ideal and shouldn't be used by anything outside of `<Banner>` and `<TopNav>`.
4
- *
5
- * This makes the other page layout elements aware that the banner and top bar have been mounted, provides them
6
- * with their heights. This is needed to power the stick points of page layout elements like SideNav and Panel.
7
- *
8
- * We should clean this up once we have a better solution, such as moving the size props for banner and top bar into `Root`.
9
- */
10
- export declare const HoistCssVarToLocalGrid: ({ variableName, value, }: {
11
- variableName: string;
12
- value: number;
13
- }) => React.JSX.Element;
@@ -1,5 +0,0 @@
1
- /**
2
- * Context for whether the slot sizes are to be hoisted to the document root.
3
- * It is set by consumers using a prop on the page layout `Root` element.
4
- */
5
- export declare const DangerouslyHoistSlotSizes: import('react').Context<boolean>;
@@ -1,23 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import React from 'react';
6
- import type { StrictXCSSProp } from '@atlaskit/css';
7
- /**
8
- * The sticky header of the main layout area.
9
- */
10
- export declare function MainStickyHeader({ children, xcss, testId, }: {
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
- * The content of the layout area.
17
- */
18
- children?: React.ReactNode;
19
- /**
20
- * Bounded style overrides.
21
- */
22
- xcss?: StrictXCSSProp<'backgroundColor', never>;
23
- }): JSX.Element;
@@ -1,16 +0,0 @@
1
- import type { StrictXCSSProp } from '@atlaskit/css';
2
- import type { CommonSlotProps } from '../types';
3
- /**
4
- * Use the Main area for the main page content. It has a fluid width and will expand to fill available space.
5
- */
6
- export declare function Main({ children, xcss, skipLinkLabel, testId, id: providedId, }: CommonSlotProps & {
7
- /**
8
- * The content of the layout area.
9
- * This is where you should put the main content of your page.
10
- */
11
- children: React.ReactNode;
12
- /**
13
- * Bounded style overrides.
14
- */
15
- xcss?: StrictXCSSProp<'backgroundColor', never>;
16
- }): JSX.Element;
@@ -1,7 +0,0 @@
1
- import type { ResizeBound } from './types';
2
- /**
3
- * Resize bounds can either be provided in `vw` or `px` units. This function will convert the value into pixels.
4
- *
5
- * It accesses the `window` object to get the viewport width, so should only be used in the browser.
6
- */
7
- export declare function convertResizeBoundToPixels(resizeBound: ResizeBound): number;
@@ -1,18 +0,0 @@
1
- import type { PixelResizeBounds } from './types';
2
- /**
3
- * Returns the percentage of the current width within the resize bounds.
4
- * It expects the resize bounds to already have been converted into numeric values, in pixel units.
5
- *
6
- * The return value is clamped between 0 and 100. This is to prevent the screen reader text (aria-valuetext)
7
- * from announcing an out-of-bounds percentage when the user is resizing the viewport.
8
- *
9
- * Examples:
10
- * - if the current width is 200px, and the resize bounds are 100px and 300px,
11
- * the percentage is 50%, and the function will return the number 50.
12
- * - if the current value is 400, and the resize bounds are 100 and 300, the
13
- * "percentage" is 100% and the function will return the number 100.
14
- */
15
- export declare function getPercentageWithinPixelBounds({ currentWidth, resizeBounds, }: {
16
- currentWidth: number;
17
- resizeBounds: PixelResizeBounds;
18
- }): number;
@@ -1,4 +0,0 @@
1
- /**
2
- * Returns the computed width of an element in pixels.
3
- */
4
- export declare const getPixelWidth: (element: HTMLElement) => number;
@@ -1,8 +0,0 @@
1
- import type { DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/types';
2
- export declare const getWidthFromDragLocation: ({ initialWidth, location, initialClientX, direction, position, }: {
3
- initialWidth: number;
4
- location: DragLocationHistory;
5
- initialClientX: number;
6
- direction: "ltr" | "rtl";
7
- position: "start" | "end";
8
- }) => number;
@@ -1,9 +0,0 @@
1
- import type { ResizeBounds } from './types';
2
- export type PanelSplitterDragData = {
3
- panelId: string | symbol | undefined;
4
- initialWidth: number;
5
- resizingWidth: string;
6
- resizeBounds: ResizeBounds;
7
- direction: 'ltr' | 'rtl';
8
- };
9
- export declare function isPanelSplitterDragData(data: Record<string | symbol, unknown>): data is PanelSplitterDragData;
@@ -1,15 +0,0 @@
1
- import type { ResizeEndCallback, ResizeStartCallback } from './types';
2
- /**
3
- * Returns an instance of a state machine manager for keyboard resizing.
4
- * It handles calling the `onResizeStart` and `onResizeEnd` callbacks appropriately, as the user "starts" and "finishes" resizing
5
- * using the keyboard, to prevent calling them on every keydown.
6
- *
7
- * - `onResizeStart` is called immediately when the user starts resizing
8
- * - `onResizeEnd` is called after a wait time when the user stops resizing.
9
- */
10
- export declare function createKeyboardResizeManager({ onResizeStart, onResizeEnd, }: {
11
- onResizeStart: ResizeStartCallback;
12
- onResizeEnd: ResizeEndCallback;
13
- }): {
14
- onResize: ({ initialWidth, finalWidth }: Parameters<ResizeEndCallback>[0]) => void;
15
- };
@@ -1,8 +0,0 @@
1
- /**
2
- * Context for the panel splitter's double click handler. Only internally exported.
3
- *
4
- * NOTE: This context is a temporary workaround to enable the `SideNavPanelSplitter` component
5
- * to collapse the side nav on double click, without exposing the `onDoubleClick` prop on `PanelSplitter`.
6
- * Once `PanelSplitter` supports an `onDoubleClick` prop directly, this context should be removed.
7
- */
8
- export declare const OnDoubleClickContext: import('react').Context<(() => void) | undefined>;
@@ -1,64 +0,0 @@
1
- import { type MutableRefObject } from 'react';
2
- import type { TooltipProps } from '@atlaskit/tooltip';
3
- import { type ResizeBounds } from './types';
4
- export type PanelSplitterContextType = {
5
- /**
6
- * An optional identifier for the panel splitter, which is attached to the `pragmatic-drag-and-drop` drag data.
7
- */
8
- panelId?: symbol;
9
- /**
10
- * A ref to the page layout element that will be resized by the splitter.
11
- */
12
- panelRef: MutableRefObject<HTMLDivElement | null>;
13
- /**
14
- * The "saved" width of the panel element. Used to calculate the new width of the panel when dragging.
15
- */
16
- panelWidth: number;
17
- /**
18
- * Called when the user finishes resizing the panel. It should update the width of the panel element.
19
- */
20
- onCompleteResize: (newWidth: number) => void;
21
- /**
22
- * The minimum and maximum bounds for resizing the panel.
23
- * The bounds can be provided as `px` or `vw` values.
24
- */
25
- getResizeBounds: () => ResizeBounds;
26
- /**
27
- * A ref to the portal element where the panel splitter will be rendered.
28
- * If not provided, it will be internally set by the PanelSplitterProvider.
29
- *
30
- * This prop is useful for:
31
- * - Rendering the panel splitter outside of an overflow container.
32
- * - Positioning the panel splitter outside the resizing panel.
33
- */
34
- portalRef: MutableRefObject<HTMLDivElement | null>;
35
- /**
36
- * The CSS variable that will be set on the panel element to temporarily resize it while dragging the splitter
37
- */
38
- resizingCssVar: string;
39
- /**
40
- * The side of the panel/element that the splitter element is positioned on. Uses logical values to support right-to-left languages.
41
- *
42
- * Defaults to `start`.
43
- *
44
- * For left-to-right languages, `start` is the left side and `end` is the right side.
45
- */
46
- position: 'start' | 'end';
47
- /**
48
- * Whether the panel splitter is enabled and should be rendered.
49
- *
50
- * Defaults to `true`.
51
- * If `false`, the panel splitter will not be rendered.
52
- */
53
- isEnabled?: boolean;
54
- /**
55
- * The keyboard shortcut to display in the tooltip.
56
- *
57
- * Note this does not handle the keyboard shortcut functionality, it only displays the shortcut in the tooltip.
58
- */
59
- shortcut?: TooltipProps['shortcut'];
60
- };
61
- /**
62
- * Context for the panel splitter. Only internally exported.
63
- */
64
- export declare const PanelSplitterContext: import('react').Context<PanelSplitterContextType | null>;
@@ -1 +0,0 @@
1
- export declare const panelSplitterDragDataSymbol: unique symbol;
@@ -1,52 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import { type ReactNode } from 'react';
6
- import { type TooltipProps } from '@atlaskit/tooltip';
7
- import type { ResizeEndCallback, ResizeStartCallback } from './types';
8
- export type PanelSplitterProps = {
9
- /**
10
- * The accessible label for the panel splitter. It is visually hidden, but is required for accessibility.
11
- */
12
- label: React.ReactNode;
13
- /**
14
- * Called when the user begins resizing the panel.
15
- * Intended for analytics.
16
- */
17
- onResizeStart?: ResizeStartCallback;
18
- /**
19
- * Called when the user finishes resizing the panel.
20
- */
21
- onResizeEnd?: ResizeEndCallback;
22
- /**
23
- * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
24
- */
25
- testId?: string;
26
- /**
27
- * Displays a tooltip with the provided content.
28
- *
29
- * The `tooltipContent` will not be announced by screen readers because it pertains to the draggable element, which lacks keyboard functionality.
30
- * Use the `label` prop to provide accessible information about the panel splitter.
31
- *
32
- * Only used if `useIsFhsEnabled` is true.
33
- */
34
- tooltipContent?: TooltipProps['content'];
35
- };
36
- /**
37
- * _PanelSplitter_
38
- *
39
- * A component that allows the user to resize a layout area.
40
- * It can be used within layout areas like `Panel`, and `Aside`.
41
- * For the `SideNav`, use the `SideNavPanelSplitter` component instead, as it provides additional functionality
42
- * such as double clicking to collapse the side nav.
43
- *
44
- * Example usage:
45
- * ```tsx
46
- * <Aside>
47
- * <!-- other side nav content -->
48
- * <PanelSplitter label="Resize Side Nav" />
49
- * </Aside>
50
- * ```
51
- */
52
- export declare const PanelSplitter: ({ label, onResizeStart, onResizeEnd, testId, tooltipContent, }: PanelSplitterProps) => ReactNode;
@@ -1,28 +0,0 @@
1
- import React, { type MutableRefObject } from 'react';
2
- import { type PanelSplitterContextType } from './panel-splitter-context';
3
- export type PanelSplitterProviderProps = Omit<PanelSplitterContextType, 'portalRef' | 'position'> & {
4
- children: React.ReactNode;
5
- /**
6
- * The side of the panel/element that the splitter element is positioned on. Uses logical values to support right-to-left languages.
7
- *
8
- * Defaults to `start`.
9
- *
10
- * For left-to-right languages, `start` is the left side and `end` is the right side.
11
- */
12
- position?: 'start' | 'end';
13
- /**
14
- * A ref to the portal element where the panel splitter will be rendered.
15
- * If not provided, it will be internally set by the PanelSplitterProvider.
16
- *
17
- * This prop is useful for:
18
- * - Rendering the panel splitter outside of an overflow container.
19
- * - Positioning the panel splitter outside the resizing panel.
20
- */
21
- portalRef?: MutableRefObject<HTMLDivElement | null>;
22
- };
23
- /**
24
- * Provides the context required for the panel splitter to work within a page layout slot.
25
- *
26
- * Should be used in the layout area components, e.g. SideNav, Aside etc, as opposed to products.
27
- */
28
- export declare const PanelSplitterProvider: ({ panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, panelRef, portalRef: providedPortalRef, position, isEnabled, shortcut, children, }: PanelSplitterProviderProps) => React.JSX.Element;
@@ -1,38 +0,0 @@
1
- import { type ReactNode } from 'react';
2
- import { type PanelSplitterProps } from './panel-splitter';
3
- type SideNavPanelSplitterProps = Omit<PanelSplitterProps, 'onDoubleClick' | 'tooltipContent'> & {
4
- /**
5
- * Whether the side nav should collapse on double click.
6
- *
7
- * If not provided, it will default to `true`.
8
- */
9
- shouldCollapseOnDoubleClick?: boolean;
10
- /**
11
- * Displays a tooltip with the provided content. It is expected to be a string that explains the double click to collapse interaction.
12
- *
13
- * It will only be displayed if the `shouldCollapseOnDoubleClick` prop is `true`, or not provided (as it defaults to `true`).
14
- *
15
- * The `tooltipContent` will not be announced by screen readers because it pertains to the draggable element, which lacks keyboard functionality.
16
- * Use the `label` prop to provide accessible information about the panel splitter.
17
- *
18
- * If the `isSideNavShortcutEnabled` prop is enabled on `<Root />`, the built-in keyboard shortcut will be displayed with the tooltip.
19
- *
20
- * Only used if `useIsFhsEnabled` is true.
21
- */
22
- tooltipContent?: PanelSplitterProps['tooltipContent'];
23
- };
24
- /**
25
- * _SideNavPanelSplitter_
26
- *
27
- * A component that allows the user to resize or collapse the side nav.
28
- * It must be used within the `SideNav` layout area.
29
- *
30
- * Example usage:
31
- * ```tsx
32
- * <SideNav>
33
- * <SideNavPanelSplitter label="Double click to collapse" />
34
- * </SideNav>
35
- * ```
36
- */
37
- export declare const SideNavPanelSplitter: ({ label, onResizeStart, onResizeEnd, testId, shouldCollapseOnDoubleClick, tooltipContent, }: SideNavPanelSplitterProps) => ReactNode;
38
- export {};
@@ -1,23 +0,0 @@
1
- /**
2
- * Called when the user begins resizing the panel.
3
- * Intended for analytics.
4
- */
5
- export type ResizeStartCallback = ({ initialWidth }: {
6
- initialWidth: number;
7
- }) => void;
8
- /**
9
- * Called when the user finishes resizing the panel.
10
- */
11
- export type ResizeEndCallback = ({ initialWidth, finalWidth, }: {
12
- initialWidth: number;
13
- finalWidth: number;
14
- }) => void;
15
- export type ResizeBound = `${number}px` | `${number}vw`;
16
- export type ResizeBounds = {
17
- min: ResizeBound;
18
- max: ResizeBound;
19
- };
20
- export type PixelResizeBounds = {
21
- min: number;
22
- max: number;
23
- };
@@ -1,40 +0,0 @@
1
- import type { StrictXCSSProp } from '@atlaskit/css';
2
- import type { CommonSlotProps } from './types';
3
- /**
4
- * The Panel layout area is rendered to the right (inline end) of the Main area, or the Aside area if it is present.
5
- *
6
- * On small viewports (below 64rem, or 1024px), the Panel slot will become an overlay.
7
- *
8
- * You can optionally render a `PanelSplitter` as a child to make the panel area resizable.
9
- */
10
- export declare function Panel({ children, defaultWidth: defaultWidthProp, label, skipLinkLabel, testId, id: providedId, xcss, hasBorder, }: CommonSlotProps & {
11
- /**
12
- * The content of the layout area.
13
- */
14
- children: React.ReactNode;
15
- /**
16
- * The accessible name of the slot, announced by screen readers.
17
- */
18
- label?: string;
19
- /**
20
- * The default width of the layout area.
21
- *
22
- * It should be an integer between the resize bounds - the minimum is 120px and the maximum is 50% of the viewport width.
23
- *
24
- * This value is also used as the minimum resizing width, except when the `defaultWidth` is greater then `400px`,
25
- * in which case `400px` will be used as the minimum resizing width instead.
26
- */
27
- defaultWidth?: number;
28
- /**
29
- * Bounded style overrides.
30
- */
31
- xcss?: StrictXCSSProp<'backgroundColor', never>;
32
- /**
33
- * Whether or not the slot has its own border. On small screens this becomes a shadow.
34
- *
35
- * Defaults to true. Will be removed in the future (and disabling the border will not be supported).
36
- *
37
- * @deprecated
38
- */
39
- hasBorder?: boolean;
40
- }): JSX.Element;
@@ -1,11 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import type { CommonSlotProps } from './types';
6
- type RibbonProps = CommonSlotProps & {
7
- width: string | number;
8
- children: React.ReactNode;
9
- };
10
- export declare function UNSAFE_Ribbon({ children, testId, id: providedId, width, }: RibbonProps): JSX.Element | null;
11
- export {};
@@ -1,71 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import React from 'react';
6
- import type { StrictXCSSProp } from '@atlaskit/css';
7
- export declare const gridRootId = "unsafe-design-system-page-layout-root";
8
- /**
9
- * The root component of the navigation system. It wraps the underlying components with the necessary contexts allowing to use certain data and hooks
10
- * @param skipLinksLabel - The very first element of the layout is a skip links container that can be accessed by pressing Tab button and holds the links to the other sections of the layout thus improving accessibility. This parameter defines the header text for this container
11
- */
12
- export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes, skipLinksLabel, skipLinksTriggerLabel, testId, defaultSideNavCollapsed, isSideNavShortcutEnabled, }: {
13
- /**
14
- * For rendering the layout areas, e.g. TopNav, SideNav, Main.
15
- * They should be rendered as immediate children.
16
- */
17
- children: React.ReactNode;
18
- /**
19
- * Bounded style overrides.
20
- */
21
- xcss?: StrictXCSSProp<'backgroundColor', never>;
22
- /**
23
- * **Note: This prop is only supported for legacy purposes in Jira and Confluence,
24
- * and is subject to be removed without notice in the future.**
25
- *
26
- * Whether to dangerously hoist the layout slot sizes to the document root element,
27
- * to support some legacy use cases. Do not use this prop for new code.
28
- */
29
- UNSAFE_dangerouslyHoistSlotSizes?: boolean;
30
- /**
31
- * The header text for the skip links container element.
32
- */
33
- skipLinksLabel?: string;
34
- /**
35
- * The label for the skip links button that opens the skip links popup.
36
- */
37
- skipLinksTriggerLabel?: string;
38
- /**
39
- * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
40
- */
41
- testId?: string;
42
- /**
43
- * Whether the side nav should be collapsed by default __on desktop screens__.
44
- *
45
- * It is always collapsed by default for mobile screens.
46
- *
47
- * This value is used when the side nav is first mounted, but you should continuously update your
48
- * persisted state using the `onCollapse` and `onExpand` callbacks, to ensure it is up to date
49
- * when the app is reloaded.
50
- *
51
- * __Note:__ When provided, the `defaultCollapsed` props on `SideNav` and `SideNavToggleButton` will be ignored.
52
- */
53
- defaultSideNavCollapsed?: boolean;
54
- /**
55
- * Controls whether the side nav toggle shortcut is enabled. This will be used to bind the keyboard event listener,
56
- * and to display the keyboard shortcuts in the appropriate tooltips (`SideNavToggleButton`, `SideNavPanelSplitter`).
57
- *
58
- * The shortcut key is `Ctrl` + `[`.
59
- *
60
- * The shortcut is not enabled by default.
61
- *
62
- * The shortcut will also be ignored if there are any open ADS modal dialogs (`@atlaskit/modal-dialog`).
63
- *
64
- * `SideNav` has another prop `canToggleWithShortcut()` that can be used to run additional checks after the shortcut
65
- * is pressed, before the SideNav is toggled. You can use this to conditionally disable the shortcut based on your
66
- * your own custom checks, e.g. if there is a legacy dialog open.
67
- *
68
- * Note: The built-in keyboard shortcut is behind `useIsFhsEnabled`.
69
- */
70
- isSideNavShortcutEnabled?: boolean;
71
- }): JSX.Element;
@@ -1,5 +0,0 @@
1
- /**
2
- * How long the flyout should remain open after the users
3
- * pointer has left the side nav flyout
4
- */
5
- export declare const sideNavFlyoutCloseDelayMs = 400;
@@ -1,8 +0,0 @@
1
- import { type Context } from 'react';
2
- /**
3
- * Context for whether the side nav toggle shortcut is enabled.
4
- *
5
- * Used to share the `isSideNavShortcutEnabled` prop value from `Root` with other components,
6
- * so the visual keyboard shortcut in tooltips can be conditionally displayed.
7
- */
8
- export declare const IsSideNavShortcutEnabledContext: Context<boolean>;
@@ -1,5 +0,0 @@
1
- import React from 'react';
2
- export declare function IsSideNavShortcutEnabledProvider({ children, isSideNavShortcutEnabled, }: {
3
- children: React.ReactNode;
4
- isSideNavShortcutEnabled: boolean;
5
- }): React.JSX.Element;
@@ -1,3 +0,0 @@
1
- import { type Dispatch, type SetStateAction } from 'react';
2
- import type { SideNavState } from './types';
3
- export declare const SetSideNavVisibilityState: import('react').Context<Dispatch<SetStateAction<SideNavState | null>>>;