@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,36 +0,0 @@
1
- import React from 'react';
2
- import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
3
- import type { AnchorProps } from '@atlaskit/primitives/anchor';
4
- interface LogInProps extends Pick<AnchorProps, 'href'> {
5
- /**
6
- * Provide an accessible label, often used by screen readers.
7
- */
8
- label: React.ReactNode;
9
- /**
10
- * Handler called on click. You can use the second argument to fire Atlaskit analytics events on custom channels.
11
- * They could then be routed to GASv3 analytics. See the pressable or anchor primitive code examples for
12
- * information on [firing Atlaskit analytics events](https://atlassian.design/components/primitives/pressable/examples#atlaskit-analytics)
13
- * or [routing these to GASv3 analytics](https://atlassian.design/components/primitives/pressable/examples#gasv3-analytics).
14
- */
15
- onClick?: (e: React.MouseEvent<HTMLAnchorElement>, analyticsEvent: UIAnalyticsEvent) => void;
16
- /**
17
- * Called when the mouse enters the element container.
18
- * Allows preloading popup components
19
- */
20
- onMouseEnter?: React.MouseEventHandler<HTMLAnchorElement>;
21
- /**
22
- * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
23
- */
24
- testId?: string;
25
- /**
26
- * 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).
27
- */
28
- interactionName?: string;
29
- }
30
- /**
31
- * __Log in__
32
- *
33
- * The Log in button for the top navigation.
34
- */
35
- export declare const LogIn: React.ForwardRefExoticComponent<React.PropsWithoutRef<LogInProps> & React.RefAttributes<HTMLAnchorElement>>;
36
- export {};
@@ -1,37 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import React from 'react';
6
- import type { LogoProps } from '@atlaskit/logo';
7
- /**
8
- * __App logo__
9
- *
10
- * The app logo for the top navigation.
11
- *
12
- * To provide a responsive experience, label text will render next to an icon at larger viewports.
13
- */
14
- export declare const AppLogo: ({ name, label, href, icon, onClick, }: {
15
- /**
16
- * The name of the app. Will be displayed next to the logo in wider viewports, and is used as an accessible label at smaller viewports.
17
- */
18
- name: string;
19
- /**
20
- * Provide an accessible label, often used by screen readers.
21
- * This label should include the name of the app, and if applicable,
22
- * the location the user will navigate to on click.
23
- */
24
- label: string;
25
- /**
26
- * The URL to navigate to when the element is clicked.
27
- */
28
- href: string;
29
- /**
30
- * The icon to render.
31
- */
32
- icon: (props: LogoProps) => JSX.Element;
33
- /**
34
- * Handler called on click.
35
- */
36
- onClick?: React.MouseEventHandler<HTMLAnchorElement>;
37
- }) => JSX.Element;
@@ -1,36 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import React from 'react';
6
- import type { LogoProps } from '@atlaskit/logo';
7
- /**
8
- * __Custom logo__
9
- *
10
- * Custom logo for the top navigation.
11
- *
12
- * To provide a responsive experience, it requires both a logo and an icon component.
13
- * The logo component will be used for large viewports, and the icon component will be used for small viewports.
14
- */
15
- export declare const CustomLogo: ({ href, logo, icon, onClick, label, }: {
16
- /**
17
- * Provide an accessible label, often used by screen readers.
18
- */
19
- label: string;
20
- /**
21
- * The URL to navigate to when the element is clicked.
22
- */
23
- href: string;
24
- /**
25
- * The logo component to render. It will be used for large viewports.
26
- */
27
- logo: (props: LogoProps) => JSX.Element;
28
- /**
29
- * The icon component to render. It will be used for small viewports.
30
- */
31
- icon: (props: LogoProps) => JSX.Element;
32
- /**
33
- * Handler called on click.
34
- */
35
- onClick?: React.MouseEventHandler<HTMLAnchorElement>;
36
- }) => JSX.Element;
@@ -1,11 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import type { LogoProps } from '@atlaskit/logo';
6
- export declare const themedLogoIcon = "--ds-top-bar-logo-icon";
7
- export declare const themedLogoText = "--ds-top-bar-logo-text";
8
- export declare function LogoRenderer({ logoOrIcon: LogoOrIcon, shouldUseNewLogoDesign, }: {
9
- logoOrIcon: (props: LogoProps) => JSX.Element;
10
- shouldUseNewLogoDesign?: boolean;
11
- }): JSX.Element;
@@ -1,16 +0,0 @@
1
- import React, { type ComponentType } from 'react';
2
- import { type EndItemProps } from './end-item';
3
- interface NotificationsProps extends Omit<EndItemProps, 'icon'> {
4
- /**
5
- * The component to render as the badge.
6
- * You are recommended to use the Badge component from `@atlaskit/badge`.
7
- */
8
- badge: ComponentType;
9
- }
10
- /**
11
- * __Notifications__
12
- *
13
- * The trigger button for the notifications menu in the top navigation bar.
14
- */
15
- export declare const Notifications: React.ForwardRefExoticComponent<React.PropsWithoutRef<NotificationsProps> & React.RefAttributes<HTMLButtonElement>>;
16
- export {};
@@ -1,15 +0,0 @@
1
- import React from 'react';
2
- import { type EndItemProps } from './end-item';
3
- interface ProfileProps extends Omit<EndItemProps, 'icon'> {
4
- /**
5
- * The URL of the image to display in the avatar.
6
- */
7
- src?: string;
8
- }
9
- /**
10
- * __Profile__
11
- *
12
- * The Profile button for the top navigation.
13
- */
14
- export declare const Profile: React.ForwardRefExoticComponent<React.PropsWithoutRef<ProfileProps> & React.RefAttributes<HTMLButtonElement>>;
15
- export {};
@@ -1,38 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import React from 'react';
6
- import type { NewIconProps } from '@atlaskit/icon';
7
- type SearchProps = {
8
- /**
9
- * Provide an accessible label, often used by screen readers.
10
- */
11
- label: React.ReactNode;
12
- /**
13
- * The icon component to render before the search input.
14
- */
15
- iconBefore?: React.ComponentType<NewIconProps & {
16
- spacing: 'spacious';
17
- }>;
18
- /**
19
- * The component to render after the search input.
20
- */
21
- elemAfter?: React.ReactNode;
22
- /**
23
- * Handler called on click.
24
- */
25
- onClick?: React.MouseEventHandler<HTMLButtonElement>;
26
- /**
27
- * 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).
28
- */
29
- interactionName?: string;
30
- 'aria-haspopup'?: React.AriaAttributes['aria-haspopup'];
31
- };
32
- /**
33
- * __Search__
34
- *
35
- * The search element for the top navigation.
36
- */
37
- export declare const Search: (props: SearchProps) => JSX.Element;
38
- export {};
@@ -1,11 +0,0 @@
1
- import React from 'react';
2
- import { type EndItemProps } from './end-item';
3
- interface SettingsProps extends Omit<EndItemProps, 'icon'> {
4
- }
5
- /**
6
- * __Settings__
7
- *
8
- * The Settings button for the top navigation.
9
- */
10
- export declare const Settings: React.ForwardRefExoticComponent<React.PropsWithoutRef<SettingsProps> & React.RefAttributes<HTMLButtonElement>>;
11
- export {};
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- import { type ThemedButtonProps } from './themed-button';
3
- type IconButtonMigrationProps = {
4
- isTooltipDisabled?: boolean;
5
- };
6
- export declare const Button: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedButtonProps & IconButtonMigrationProps> & React.RefAttributes<HTMLButtonElement>>;
7
- export {};
@@ -1,9 +0,0 @@
1
- import type { RGB } from '../types';
2
- /**
3
- * Attempts to parse a hex color into RGB.
4
- *
5
- * Alpha channel will be accepted but ignored.
6
- *
7
- * Returns `null` on failure.
8
- */
9
- export declare function parseHex(color: string): RGB | null;
@@ -1,7 +0,0 @@
1
- import type { RGB } from '../types';
2
- /**
3
- * Attempts to parse a legacy notation CSS `hsl()` color string.
4
- *
5
- * Returns `null` on failure.
6
- */
7
- export declare function parseHsl(color: string): RGB | null;
@@ -1,7 +0,0 @@
1
- import type { RGB } from '../types';
2
- /**
3
- * Attempts to parse a legacy notation CSS `rgb()` color string.
4
- *
5
- * Returns `null` on failure.
6
- */
7
- export declare function parseRgb(color: string): RGB | null;
@@ -1,21 +0,0 @@
1
- import type { RGB, RGBA } from './types';
2
- export declare function isLight(color: RGB): boolean;
3
- export type ColorMode = 'light' | 'dark';
4
- export declare function getColorMode(backgroundColor: RGB): ColorMode;
5
- export declare function getTextColor(backgroundColor: RGB): {
6
- hex: string;
7
- rgb: RGB;
8
- };
9
- /**
10
- * Simple alpha compositing as defined in
11
- * https://www.w3.org/TR/compositing-1/#simplealphacompositing
12
- *
13
- * This is the standard approach for alpha blending using the
14
- * Porter-Duff 'source over' compositing operator.
15
- *
16
- * This has been simplified to assume the background has no transparency.
17
- */
18
- export declare function simpleAlphaComposite({ background, foreground, }: {
19
- background: RGB;
20
- foreground: RGBA;
21
- }): RGB;
@@ -1,13 +0,0 @@
1
- import type { RGB } from './types';
2
- /**
3
- * Attempts to parse a CSS color string into a standard RGB format.
4
- *
5
- * Supported formats:
6
- *
7
- * - Hex
8
- * - RGB
9
- * - HSL
10
- *
11
- * Returns `null` on failure.
12
- */
13
- export declare function parseUserColor(color: string): RGB | null;
@@ -1,17 +0,0 @@
1
- export type RGB = {
2
- r: number;
3
- g: number;
4
- b: number;
5
- a?: never;
6
- };
7
- export type RGBA = {
8
- r: number;
9
- g: number;
10
- b: number;
11
- a: number;
12
- };
13
- export type HSL = {
14
- h: number;
15
- s: number;
16
- l: number;
17
- };
@@ -1,22 +0,0 @@
1
- import type React from 'react';
2
- import type { RGB } from './color-utils/types';
3
- /**
4
- * Expects colors to be passed as `RGB` objects.
5
- *
6
- * Allows `string` for hex strings only, for backwards compatibility.
7
- * This will likely be removed in the future.
8
- *
9
- * Allows `null` for ergonomic reasons, because our color parsing utilities can return
10
- * `null` if they cannot parse a color string.
11
- */
12
- export type CustomTheme = {
13
- backgroundColor: string | RGB | null;
14
- highlightColor: string | RGB | null;
15
- };
16
- /**
17
- * Provides a `style` prop value for the `TopNav` that defines required CSS variables.
18
- *
19
- * If a provided `backgroundColor` or `highlightColor` cannot be parsed,
20
- * then `null` will be returned.
21
- */
22
- export declare function getCustomThemeStyles({ backgroundColor, highlightColor, }: CustomTheme): React.CSSProperties | null;
@@ -1,16 +0,0 @@
1
- /**
2
- * Props from primitives that we explicitly ignore and remove from spread props,
3
- * because they apply styles.
4
- *
5
- * `css` / `className` are not here because primitives don't support them.
6
- *
7
- * See `packages/design-system/primitives/src/components/anchor.tsx` and `packages/design-system/primitives/src/components/pressable.tsx`
8
- * for where these are defined. These shouldn't change very often as the direction is `xcss` over individual props.
9
- */
10
- export type IgnoredPrimitiveProps = 'style' | 'xcss' | 'backgroundColor' | 'padding' | 'paddingBlock' | 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInline' | 'paddingInlineStart' | 'paddingInlineEnd';
11
- /**
12
- * Returns the spread props to pass through to underlying primitive components.
13
- *
14
- * It removes the props which apply styles.
15
- */
16
- export declare function getPrimitiveSpreadProps<Props extends Record<string, unknown>>({ style, xcss, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, ...props }: Props): Omit<Props, IgnoredPrimitiveProps>;
@@ -1,8 +0,0 @@
1
- /**
2
- * Context to let components know if a custom theme is being applied.
3
- */
4
- export declare const HasCustomThemeContext: import('react').Context<boolean>;
5
- /**
6
- * Returns whether a custom theme is being applied.
7
- */
8
- export declare function useHasCustomTheme(): boolean;
@@ -1,5 +0,0 @@
1
- /**
2
- * Context to let components know if the top nav background color is the default background color,
3
- * even while a custom theme is being applied.
4
- */
5
- export declare const HasDefaultBackgroundColorContext: import('react').Context<boolean>;
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- import { type ThemedIconButtonProps } from './themed-icon-button';
3
- type IconButtonMigrationProps = {
4
- isTooltipDisabled?: boolean;
5
- };
6
- export declare const IconButton: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedIconButtonProps & IconButtonMigrationProps> & React.RefAttributes<HTMLButtonElement>>;
7
- export {};
@@ -1,3 +0,0 @@
1
- import React from 'react';
2
- import { type ThemedLinkButtonProps } from './themed-link-button';
3
- export declare const LinkButton: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedLinkButtonProps> & React.RefAttributes<HTMLAnchorElement>>;
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- import { type ThemedLinkIconButtonProps } from './themed-link-icon-button';
3
- type IconButtonMigrationProps = {
4
- isTooltipDisabled?: boolean;
5
- };
6
- export declare const LinkIconButton: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedLinkIconButtonProps & IconButtonMigrationProps> & React.RefAttributes<HTMLAnchorElement>>;
7
- export {};
@@ -1,14 +0,0 @@
1
- export declare const paletteRgba: {
2
- DarkNeutral300A: {
3
- r: number;
4
- g: number;
5
- b: number;
6
- a: number;
7
- };
8
- Neutral300A: {
9
- r: number;
10
- g: number;
11
- b: number;
12
- a: number;
13
- };
14
- };
@@ -1,42 +0,0 @@
1
- export declare const palette: {
2
- 'DarkNeutral-100': string;
3
- 'DarkNeutral-100A': string;
4
- DarkNeutral0: string;
5
- DarkNeutral100: string;
6
- DarkNeutral100A: string;
7
- DarkNeutral200: string;
8
- DarkNeutral200A: string;
9
- DarkNeutral250: string;
10
- DarkNeutral250A: string;
11
- DarkNeutral300: string;
12
- DarkNeutral300A: string;
13
- DarkNeutral350: string;
14
- DarkNeutral350A: string;
15
- DarkNeutral400: string;
16
- DarkNeutral400A: string;
17
- DarkNeutral500: string;
18
- DarkNeutral500A: string;
19
- DarkNeutral600: string;
20
- DarkNeutral700: string;
21
- DarkNeutral800: string;
22
- DarkNeutral900: string;
23
- DarkNeutral1000: string;
24
- DarkNeutral1100: string;
25
- Neutral0: string;
26
- Neutral100: string;
27
- Neutral100A: string;
28
- Neutral200: string;
29
- Neutral200A: string;
30
- Neutral300: string;
31
- Neutral300A: string;
32
- Neutral400: string;
33
- Neutral400A: string;
34
- Neutral500: string;
35
- Neutral500A: string;
36
- Neutral600: string;
37
- Neutral700: string;
38
- Neutral800: string;
39
- Neutral900: string;
40
- Neutral1000: string;
41
- Neutral1100: string;
42
- };
@@ -1,55 +0,0 @@
1
- export declare const themedSearchBorder = "--ds-top-bar-search-border";
2
- export declare const themedSearchBorderFocused = "--ds-top-bar-search-border-focused";
3
- /**
4
- * Theme object intended for use with Search Platform components while transitioning to nav4.
5
- *
6
- * This is for backwards compatibility with the legacy theming API that was designed for nav3.
7
- *
8
- * As nav4 matures we will ideally evolve the theming solution inside Search Platform,
9
- * at which point this legacy theme object will not be needed.
10
- */
11
- declare const legacySearchTheme: {
12
- default: {
13
- backgroundColor: string;
14
- color: string;
15
- borderColor: string;
16
- };
17
- focus: {
18
- /**
19
- * When expanded the input ignores the custom theme,
20
- * except for its border which is derived from the highlight color.
21
- */
22
- color: 'var(--ds-text)';
23
- backgroundColor: 'var(--ds-background-input-pressed)';
24
- borderColor: string;
25
- boxShadow: string;
26
- };
27
- hover: {
28
- /**
29
- * This is not actually used for the search bar input (at least by the Search Platform components).
30
- *
31
- * Instead it's used as the hover background color for a close button when on mobile.
32
- */
33
- backgroundColor: string;
34
- };
35
- };
36
- /**
37
- * We are just using the inferred type instead of declaring it as `SearchCSS` (the type `@atlassian/search-dialog` expects)
38
- *
39
- * Importing the type from `@atlassian/search-dialog` means we have to declare it as a full dependency,
40
- * rather than a dev dependency. Even though it's type-only, this is how local consumption is setup.
41
- *
42
- * This was failing typechecking in Post Office, presumably due to different versions of `@emotion/styled`.
43
- * It is also a code smell having an unnecessary dependency.
44
- *
45
- * We still have indirect type safety from our example + product integrations, so a PR that breaks the types won't be able to merge.
46
- */
47
- type LegacySearchTheme = typeof legacySearchTheme;
48
- /**
49
- * Provides the `theme` value for Search Platform components.
50
- *
51
- * This may be a `SearchCSS` object or undefined,
52
- * depending on if the top bar is using custom theming.
53
- */
54
- export declare function useLegacySearchTheme(): LegacySearchTheme | undefined;
55
- export {};
@@ -1,32 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import React from 'react';
6
- import { type AnchorProps } from '@atlaskit/primitives/compiled';
7
- import type { CommonProps, OverriddenPrimitiveProps } from './types';
8
- /**
9
- * Props that are common between link buttons.
10
- */
11
- interface LinkVariantCommonProps<RouterLinkConfig extends Record<string, any> = never> extends CommonProps, Omit<AnchorProps<RouterLinkConfig>, OverriddenPrimitiveProps> {
12
- }
13
- /**
14
- * Props shared by `ThemedPressable` and `ThemedAnchor`
15
- */
16
- interface ThemedPrimitiveProps {
17
- shape?: 'default' | 'square';
18
- children: React.ReactNode;
19
- }
20
- interface ThemedAnchorProps<RouterLinkConfig extends Record<string, any> = never> extends ThemedPrimitiveProps, LinkVariantCommonProps<RouterLinkConfig> {
21
- }
22
- /**
23
- * Intentionally an almost-duplicate of `ThemedPressable` - make sure to update both.
24
- *
25
- * More 'clever' solutions were tried but I couldn't get them working in an acceptable state.
26
- *
27
- * Polymorphism had many typing issues and required sacrificing type safety.
28
- *
29
- * Render props had problems passing down styles through `xcss` to the `children` function.
30
- */
31
- export declare const ThemedAnchor: <RouterLinkConfig extends Record<string, any> = never>(props: ThemedAnchorProps<RouterLinkConfig> & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
32
- export {};
@@ -1,10 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import React from 'react';
6
- import type { PressableProps } from '@atlaskit/primitives/compiled';
7
- import type { CommonProps, OverriddenPrimitiveProps, TextButtonCommonProps } from './types';
8
- export interface ThemedButtonProps extends CommonProps, Omit<PressableProps, OverriddenPrimitiveProps>, TextButtonCommonProps {
9
- }
10
- export declare const ThemedButton: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedButtonProps> & React.RefAttributes<HTMLButtonElement>>;
@@ -1,10 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import React from 'react';
6
- import type { PressableProps } from '@atlaskit/primitives/compiled';
7
- import type { CommonProps, IconButtonCommonProps, OverriddenPrimitiveProps } from './types';
8
- export interface ThemedIconButtonProps extends CommonProps, Omit<PressableProps, OverriddenPrimitiveProps>, IconButtonCommonProps {
9
- }
10
- export declare const ThemedIconButton: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedIconButtonProps> & React.RefAttributes<HTMLButtonElement>>;
@@ -1,16 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import React from 'react';
6
- import type { AnchorProps } from '@atlaskit/primitives/compiled';
7
- import type { CommonProps, OverriddenPrimitiveProps, TextButtonCommonProps } from './types';
8
- /**
9
- * Props that are common between link buttons.
10
- */
11
- interface LinkVariantCommonProps<RouterLinkConfig extends Record<string, any> = never> extends CommonProps, Omit<AnchorProps<RouterLinkConfig>, OverriddenPrimitiveProps> {
12
- }
13
- export interface ThemedLinkButtonProps<RouterLinkConfig extends Record<string, any> = never> extends LinkVariantCommonProps<RouterLinkConfig>, TextButtonCommonProps {
14
- }
15
- export declare const ThemedLinkButton: <RouterLinkConfig extends Record<string, any> = never>(props: ThemedLinkButtonProps<RouterLinkConfig> & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
16
- export {};
@@ -1,13 +0,0 @@
1
- import React from 'react';
2
- import type { AnchorProps } from '@atlaskit/primitives/compiled';
3
- import type { CommonProps, IconButtonCommonProps, OverriddenPrimitiveProps } from './types';
4
- /**
5
- * Props that are common between link buttons.
6
- */
7
- interface LinkVariantCommonProps<RouterLinkConfig extends Record<string, any> = never> extends CommonProps, Omit<AnchorProps<RouterLinkConfig>, OverriddenPrimitiveProps> {
8
- }
9
- export interface ThemedLinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> extends LinkVariantCommonProps<RouterLinkConfig>, IconButtonCommonProps {
10
- href: string | RouterLinkConfig;
11
- }
12
- export declare const ThemedLinkIconButton: <RouterLinkConfig extends Record<string, any> = never>(props: ThemedLinkIconButtonProps<RouterLinkConfig> & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
13
- export {};
@@ -1,18 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import React from 'react';
6
- import { type PressableProps } from '@atlaskit/primitives/compiled';
7
- import type { CommonProps, OverriddenPrimitiveProps } from './types';
8
- /**
9
- * Props shared by `ThemedPressable` and `ThemedAnchor`
10
- */
11
- interface ThemedPrimitiveProps {
12
- shape?: 'default' | 'square';
13
- children: React.ReactNode;
14
- }
15
- interface ThemedPressableProps extends ThemedPrimitiveProps, CommonProps, Omit<PressableProps, OverriddenPrimitiveProps> {
16
- }
17
- export declare const ThemedPressable: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedPressableProps> & React.RefAttributes<HTMLButtonElement>>;
18
- export {};