@atlaskit/side-navigation 11.2.2 → 12.0.1
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.
- package/CHANGELOG.md +35 -0
- package/afm-cc/tsconfig.json +3 -0
- package/afm-products/tsconfig.json +3 -0
- package/button-item/package.json +1 -8
- package/constants/package.json +1 -8
- package/custom-item/package.json +1 -8
- package/footer/package.json +1 -8
- package/go-back-item/package.json +1 -8
- package/header/package.json +1 -8
- package/heading-item/package.json +1 -8
- package/link-item/package.json +1 -8
- package/loading-items/package.json +1 -8
- package/navigation-content/package.json +1 -8
- package/navigation-footer/package.json +1 -8
- package/navigation-header/package.json +1 -8
- package/nestable-navigation-content/package.json +1 -8
- package/nesting-item/package.json +1 -8
- package/package.json +26 -33
- package/section/package.json +1 -8
- package/side-navigation/package.json +1 -8
- package/skeleton-heading-item/package.json +1 -8
- package/skeleton-item/package.json +1 -8
- package/use-should-nested-element-render/package.json +1 -8
- package/dist/types-ts4.5/common/constants.d.ts +0 -8
- package/dist/types-ts4.5/common/use-child-ids-effect.d.ts +0 -3
- package/dist/types-ts4.5/common/use-child-ids.d.ts +0 -5
- package/dist/types-ts4.5/components/Footer/index.d.ts +0 -31
- package/dist/types-ts4.5/components/Header/header-container.d.ts +0 -8
- package/dist/types-ts4.5/components/Header/index.d.ts +0 -52
- package/dist/types-ts4.5/components/Item/button-item.d.ts +0 -14
- package/dist/types-ts4.5/components/Item/custom-item.d.ts +0 -16
- package/dist/types-ts4.5/components/Item/go-back-item.d.ts +0 -15
- package/dist/types-ts4.5/components/Item/link-item.d.ts +0 -16
- package/dist/types-ts4.5/components/Item/skeleton-item.d.ts +0 -14
- package/dist/types-ts4.5/components/LoadingItems/index.d.ts +0 -44
- package/dist/types-ts4.5/components/NavigationContent/container-css.d.ts +0 -18
- package/dist/types-ts4.5/components/NavigationContent/index.d.ts +0 -33
- package/dist/types-ts4.5/components/NavigationContent/inner-container-css.d.ts +0 -34
- package/dist/types-ts4.5/components/NavigationContent/outer-container-css.d.ts +0 -36
- package/dist/types-ts4.5/components/NavigationFooter/index.d.ts +0 -23
- package/dist/types-ts4.5/components/NavigationHeader/index.d.ts +0 -18
- package/dist/types-ts4.5/components/NestableNavigationContent/index.d.ts +0 -94
- package/dist/types-ts4.5/components/NestableNavigationContent/nested-context.d.ts +0 -16
- package/dist/types-ts4.5/components/NestableNavigationContent/nesting-motion.d.ts +0 -20
- package/dist/types-ts4.5/components/NestableNavigationContent/use-nested-context.d.ts +0 -2
- package/dist/types-ts4.5/components/NestableNavigationContent/use-should-nested-element-render.d.ts +0 -8
- package/dist/types-ts4.5/components/NestingItem/index.d.ts +0 -101
- package/dist/types-ts4.5/components/Section/heading-item.d.ts +0 -19
- package/dist/types-ts4.5/components/Section/section.d.ts +0 -44
- package/dist/types-ts4.5/components/Section/skeleton-heading-item.d.ts +0 -18
- package/dist/types-ts4.5/components/SideNavigation/index.d.ts +0 -44
- package/dist/types-ts4.5/entry-points/button-item.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/constants.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/custom-item.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/footer.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/go-back-item.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/header.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/heading-item.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/link-item.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/loading-items.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/navigation-content.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/navigation-footer.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/navigation-header.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/nestable-navigation-content.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/nesting-item.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/section.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/side-navigation.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/skeleton-heading-item.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/skeleton-item.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/use-should-nested-element-render.d.ts +0 -1
- package/dist/types-ts4.5/index.d.ts +0 -36
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import React from 'react';
|
|
6
|
-
/**
|
|
7
|
-
* @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
|
|
8
|
-
*/
|
|
9
|
-
export interface LoadingItemsProps {
|
|
10
|
-
/**
|
|
11
|
-
* Child items that will be loaded asynchronously.
|
|
12
|
-
*/
|
|
13
|
-
children: React.ReactNode;
|
|
14
|
-
/**
|
|
15
|
-
* Fallback you want to show when loading.
|
|
16
|
-
* You'll want to use the supplied [skeleton item](/packages/navigation/side-navigation/docs/skeleton-item)
|
|
17
|
-
* or [skeleton heading item](/packages/navigation/side-navigation/docs/skeleton-heading-item) components.
|
|
18
|
-
*/
|
|
19
|
-
fallback: React.ReactNode;
|
|
20
|
-
/**
|
|
21
|
-
* Use this to show either the loading fallback or the loaded contents.
|
|
22
|
-
* It will cross fade between children and fallback when the value is flipped.
|
|
23
|
-
*/
|
|
24
|
-
isLoading?: boolean;
|
|
25
|
-
/**
|
|
26
|
-
* A `testId` prop is provided for specified elements,
|
|
27
|
-
* which is a unique string that appears as a data attribute `data-testid` in the rendered code,
|
|
28
|
-
* serving as a hook for automated tests.
|
|
29
|
-
*
|
|
30
|
-
* Will set these elements when defined:
|
|
31
|
-
* - The entering container - `{testId}--entering`
|
|
32
|
-
* - The exiting container - `{testId}--exiting`
|
|
33
|
-
*/
|
|
34
|
-
testId?: string;
|
|
35
|
-
}
|
|
36
|
-
/**
|
|
37
|
-
* __Loading items__
|
|
38
|
-
*
|
|
39
|
-
* Loading items conditionally render based on the useShouldNestedElementRender() hook.
|
|
40
|
-
*
|
|
41
|
-
* @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
|
|
42
|
-
*/
|
|
43
|
-
declare const LoadingItems: ({ children, isLoading, fallback, testId, }: LoadingItemsProps) => JSX.Element;
|
|
44
|
-
export default LoadingItems;
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
interface StyleOpts {
|
|
2
|
-
showTopScrollIndicator?: boolean;
|
|
3
|
-
}
|
|
4
|
-
export declare const containerCSS: (opts: StyleOpts) => {
|
|
5
|
-
readonly marginTop: 0 | 2;
|
|
6
|
-
readonly marginLeft: "var(--ds-space-100)";
|
|
7
|
-
readonly marginRight: "var(--ds-space-100)";
|
|
8
|
-
readonly position: "relative";
|
|
9
|
-
readonly "& [data-ds--menu--heading-item]": {
|
|
10
|
-
readonly marginBottom: "var(--ds-space-075)";
|
|
11
|
-
readonly marginTop: "var(--ds-space-200)";
|
|
12
|
-
};
|
|
13
|
-
readonly "& [data-ds--menu--skeleton-heading-item]": {
|
|
14
|
-
readonly marginTop: number;
|
|
15
|
-
readonly marginBottom: number;
|
|
16
|
-
};
|
|
17
|
-
};
|
|
18
|
-
export {};
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import React, { type HTMLAttributes } from 'react';
|
|
6
|
-
/**
|
|
7
|
-
* @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
|
|
8
|
-
*/
|
|
9
|
-
export interface NavigationContentProps {
|
|
10
|
-
children: React.ReactNode;
|
|
11
|
-
/**
|
|
12
|
-
* Forces the top scroll indicator to be shown.
|
|
13
|
-
*/
|
|
14
|
-
showTopScrollIndicator?: boolean;
|
|
15
|
-
/**
|
|
16
|
-
* A `testId` prop is provided for specified elements,
|
|
17
|
-
* which is a unique string that appears as a data attribute `data-testid` in the rendered code,
|
|
18
|
-
* serving as a hook for automated tests.
|
|
19
|
-
*/
|
|
20
|
-
testId?: string;
|
|
21
|
-
}
|
|
22
|
-
/**
|
|
23
|
-
* __Navigation content__
|
|
24
|
-
*
|
|
25
|
-
* A navigation content is used as the container for navigation items.
|
|
26
|
-
*
|
|
27
|
-
* - [Examples](https://atlassian.design/components/side-navigation/examples#content)
|
|
28
|
-
* - [Code](https://atlassian.design/components/side-navigation/code)
|
|
29
|
-
*
|
|
30
|
-
* @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
|
|
31
|
-
*/
|
|
32
|
-
declare const NavigationContent: React.ForwardRefExoticComponent<React.PropsWithoutRef<NavigationContentProps & HTMLAttributes<HTMLElement>> & React.RefAttributes<HTMLElement>>;
|
|
33
|
-
export default NavigationContent;
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
interface StyleOpts {
|
|
2
|
-
showTopScrollIndicator?: boolean;
|
|
3
|
-
}
|
|
4
|
-
export declare const innerContainerCSS: (opts: StyleOpts) => {
|
|
5
|
-
readonly "&::after": {
|
|
6
|
-
readonly borderRadius: "var(--ds-radius-xsmall)";
|
|
7
|
-
readonly content: "''";
|
|
8
|
-
readonly display: "block";
|
|
9
|
-
readonly flexShrink: 0;
|
|
10
|
-
readonly height: 2;
|
|
11
|
-
readonly marginTop: "auto";
|
|
12
|
-
readonly position: "relative";
|
|
13
|
-
readonly zIndex: 2;
|
|
14
|
-
readonly backgroundColor: "var(--ds-menu-scroll-indicator-color, var(--ds-surface))";
|
|
15
|
-
};
|
|
16
|
-
readonly "&::before"?: {
|
|
17
|
-
readonly borderRadius: "var(--ds-radius-xsmall)";
|
|
18
|
-
readonly content: "''";
|
|
19
|
-
readonly left: 0;
|
|
20
|
-
readonly right: 0;
|
|
21
|
-
readonly height: 2;
|
|
22
|
-
readonly backgroundColor: "var(--ds-menu-scroll-indicator-color, var(--ds-surface))";
|
|
23
|
-
readonly position: "absolute";
|
|
24
|
-
readonly display: "block";
|
|
25
|
-
readonly zIndex: 2;
|
|
26
|
-
} | undefined;
|
|
27
|
-
readonly display: "flex";
|
|
28
|
-
readonly overflow: "auto";
|
|
29
|
-
readonly width: "100%";
|
|
30
|
-
readonly position: "relative";
|
|
31
|
-
readonly boxSizing: "border-box";
|
|
32
|
-
readonly flexDirection: "column";
|
|
33
|
-
};
|
|
34
|
-
export {};
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
interface StyleOpts {
|
|
2
|
-
showTopScrollIndicator?: boolean;
|
|
3
|
-
}
|
|
4
|
-
export declare const outerContainerCSS: (opts: StyleOpts & {
|
|
5
|
-
scrollbarWidth: number;
|
|
6
|
-
}) => {
|
|
7
|
-
readonly display: "flex";
|
|
8
|
-
readonly height: "100%";
|
|
9
|
-
readonly overflow: "hidden";
|
|
10
|
-
readonly position: "relative";
|
|
11
|
-
readonly "&::before": {
|
|
12
|
-
readonly content: "''";
|
|
13
|
-
readonly display: "block";
|
|
14
|
-
readonly left: "var(--ds-space-100)";
|
|
15
|
-
readonly right: number;
|
|
16
|
-
readonly height: 2;
|
|
17
|
-
readonly borderRadius: "var(--ds-radius-xsmall)";
|
|
18
|
-
readonly backgroundColor: "var(--ds-menu-seperator-color, var(--ds-border))";
|
|
19
|
-
readonly position: "absolute";
|
|
20
|
-
readonly zIndex: 1;
|
|
21
|
-
};
|
|
22
|
-
readonly "&::after": {
|
|
23
|
-
readonly content: "''";
|
|
24
|
-
readonly position: "absolute";
|
|
25
|
-
readonly display: "block";
|
|
26
|
-
readonly borderRadius: "var(--ds-radius-xsmall)";
|
|
27
|
-
readonly flexShrink: 0;
|
|
28
|
-
readonly height: 2;
|
|
29
|
-
readonly left: "var(--ds-space-100)";
|
|
30
|
-
readonly right: number;
|
|
31
|
-
readonly bottom: 0;
|
|
32
|
-
readonly zIndex: 1;
|
|
33
|
-
readonly backgroundColor: "var(--ds-menu-seperator-color, var(--ds-border))";
|
|
34
|
-
};
|
|
35
|
-
};
|
|
36
|
-
export {};
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { type ReactNode } from 'react';
|
|
6
|
-
/**
|
|
7
|
-
* @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
|
|
8
|
-
*/
|
|
9
|
-
export interface NavigationFooterProps {
|
|
10
|
-
children: ReactNode;
|
|
11
|
-
}
|
|
12
|
-
/**
|
|
13
|
-
* __Navigation footer__
|
|
14
|
-
*
|
|
15
|
-
* Allows for customisation of the footer.
|
|
16
|
-
*
|
|
17
|
-
* - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
|
|
18
|
-
* - [Code](https://atlassian.design/components/side-navigation/code)
|
|
19
|
-
*
|
|
20
|
-
* @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
|
|
21
|
-
*/
|
|
22
|
-
declare const NavigationFooter: ({ children }: NavigationFooterProps) => JSX.Element;
|
|
23
|
-
export default NavigationFooter;
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
|
|
3
|
-
*/
|
|
4
|
-
export interface NavigationHeaderProps {
|
|
5
|
-
children: JSX.Element | JSX.Element[];
|
|
6
|
-
}
|
|
7
|
-
/**
|
|
8
|
-
* __Navigation header__
|
|
9
|
-
*
|
|
10
|
-
* Allows for customisation of the header.
|
|
11
|
-
*
|
|
12
|
-
* - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
|
|
13
|
-
* - [Code](https://atlassian.design/components/side-navigation/code)
|
|
14
|
-
*
|
|
15
|
-
* @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
|
|
16
|
-
*/
|
|
17
|
-
declare const NavigationHeader: (props: NavigationHeaderProps) => JSX.Element;
|
|
18
|
-
export default NavigationHeader;
|
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import React from 'react';
|
|
6
|
-
export declare const ROOT_ID = "ATLASKIT_NESTED_ROOT";
|
|
7
|
-
/**
|
|
8
|
-
* @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
|
|
9
|
-
*/
|
|
10
|
-
export interface NestableNavigationContentProps {
|
|
11
|
-
/**
|
|
12
|
-
* The NestableNavigationContent wraps the entire navigation hierarchy of a side navigation.
|
|
13
|
-
* Using this component is only needed if you want to enable nested views with [nesting items](/packages/navigation/side-navigation/docs/nesting-item),
|
|
14
|
-
* otherwise you should use [navigation content](/packages/navigation/side-navigation/docs/navigation-content) instead.
|
|
15
|
-
*/
|
|
16
|
-
children: JSX.Element | JSX.Element[];
|
|
17
|
-
/**
|
|
18
|
-
* A `testId` prop is provided for specified elements,
|
|
19
|
-
* which is a unique string that appears as a data attribute `data-testid` in the rendered code,
|
|
20
|
-
* serving as a hook for automated tests.
|
|
21
|
-
* Will set these elements when defined:
|
|
22
|
-
* - This wrapper - `{testId}`
|
|
23
|
-
* - The back item (displayed when inside a nested view) - `{testId}--go-back-item`
|
|
24
|
-
*/
|
|
25
|
-
testId?: string;
|
|
26
|
-
/**
|
|
27
|
-
* This forces the top scroll indicator to be shown. Use this prop when you need to
|
|
28
|
-
* distinctly separate the side navigation header from the side navigation content.
|
|
29
|
-
*/
|
|
30
|
-
showTopScrollIndicator?: boolean;
|
|
31
|
-
/**
|
|
32
|
-
* Array of the initial stack you want to show.
|
|
33
|
-
* This is useful when you want to set the initial nested view but don't want to opt into a controlled state.
|
|
34
|
-
* Make sure to have all intermediate navigation pages line up.
|
|
35
|
-
*/
|
|
36
|
-
initialStack?: string[];
|
|
37
|
-
/**
|
|
38
|
-
* Enables you to control the stack of navigation views you want to show.
|
|
39
|
-
* Do not jump between controlled and uncontrolled else undefined behaviour will occur.
|
|
40
|
-
* This means either using `initialStack` OR `stack` but not both.
|
|
41
|
-
* Make sure your stack array has a stable reference and does not change between renders.
|
|
42
|
-
*/
|
|
43
|
-
stack?: string[];
|
|
44
|
-
/**
|
|
45
|
-
* Allows you to react based on transitions between [nesting items](/packages/navigation/side-navigation/docs/nesting-item).
|
|
46
|
-
* It will be called everytime a person navigates from one [nesting item](/packages/navigation/side-navigation/docs/nesting-item) to another,
|
|
47
|
-
* both up or down the navigation hierarchy.
|
|
48
|
-
* This prop should be used with the `stack` prop for controlled behavior.
|
|
49
|
-
*/
|
|
50
|
-
onChange?: (stack: string[]) => void;
|
|
51
|
-
/**
|
|
52
|
-
* Called when a nesting ID that does not exist among `<NestingItem>`s is pushed to the stack. Use this callback to be notified when there is an undefined nesting state.
|
|
53
|
-
* Provides you with the stack which led to the undefined state, with the top of the stack (last item in array) being the invalid item.
|
|
54
|
-
*/
|
|
55
|
-
onUnknownNest?: (stack: string[]) => void;
|
|
56
|
-
/**
|
|
57
|
-
* Custom overrides for the composed components.
|
|
58
|
-
*
|
|
59
|
-
* @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
|
|
60
|
-
*/
|
|
61
|
-
overrides?: {
|
|
62
|
-
/**
|
|
63
|
-
* Use this to override the default back button displayed when navigation is nested.
|
|
64
|
-
* You'll want to import the [go back item](/packages/navigation/docs/go-back-item) component and use it here.
|
|
65
|
-
* This will be displayed for all children [nesting items](/packages/navigation/side-navigation/docs/nesting-item) unless they define their own.
|
|
66
|
-
* Your custom component should be wrapped with forwardRef to support assistive technologies.
|
|
67
|
-
*/
|
|
68
|
-
GoBackItem?: {
|
|
69
|
-
render?: (props: {
|
|
70
|
-
onClick: () => void;
|
|
71
|
-
testId?: string;
|
|
72
|
-
ref?: React.Ref<HTMLElement>;
|
|
73
|
-
}) => React.ReactNode;
|
|
74
|
-
};
|
|
75
|
-
};
|
|
76
|
-
/**
|
|
77
|
-
* This property is enabled by default (set to true) and is designed to manage keyboard focus
|
|
78
|
-
* for the "go back" button or the last active parent within the `<NestingItem/>` component.
|
|
79
|
-
* It is applicable only when using our `<NestingItem/>` component.
|
|
80
|
-
*/
|
|
81
|
-
isDefaultFocusControl?: boolean;
|
|
82
|
-
}
|
|
83
|
-
/**
|
|
84
|
-
* __Nestable navigation content__
|
|
85
|
-
*
|
|
86
|
-
* The container for navigation items with nested views
|
|
87
|
-
*
|
|
88
|
-
* - [Examples](https://atlassian.design/components/side-navigation/examples#nested-navigation)
|
|
89
|
-
* - [Code](https://atlassian.design/components/side-navigation/code)
|
|
90
|
-
*
|
|
91
|
-
* @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
|
|
92
|
-
*/
|
|
93
|
-
declare const NestableNavigationContent: (props: NestableNavigationContentProps) => JSX.Element;
|
|
94
|
-
export default NestableNavigationContent;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { type MutableRefObject } from 'react';
|
|
2
|
-
export interface NestedContextValue {
|
|
3
|
-
currentStackId: string;
|
|
4
|
-
onNest: (id: string) => void;
|
|
5
|
-
onUnNest: () => void;
|
|
6
|
-
stack: string[];
|
|
7
|
-
parentId: string;
|
|
8
|
-
backButton?: React.ReactNode;
|
|
9
|
-
childIds: MutableRefObject<Set<string>>;
|
|
10
|
-
forceShowTopScrollIndicator: boolean | undefined;
|
|
11
|
-
activeParentId?: string;
|
|
12
|
-
goBackButtonRef?: React.MutableRefObject<HTMLButtonElement | null>;
|
|
13
|
-
isDefaultFocusControl?: boolean;
|
|
14
|
-
focusGoBackButton?: boolean;
|
|
15
|
-
}
|
|
16
|
-
export declare const NestedContext: import('react').Context<NestedContextValue | undefined>;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import React, { type Ref } from 'react';
|
|
2
|
-
import { type Direction } from '@atlaskit/motion';
|
|
3
|
-
interface ChildrenAsFunctionProps {
|
|
4
|
-
'data-enter-from': string;
|
|
5
|
-
'data-exit-to': string;
|
|
6
|
-
'data-testid'?: string;
|
|
7
|
-
className?: string;
|
|
8
|
-
ref: Ref<any>;
|
|
9
|
-
}
|
|
10
|
-
interface NestingMotionProps {
|
|
11
|
-
enterFrom: Direction;
|
|
12
|
-
exitTo: Direction;
|
|
13
|
-
children: (props: ChildrenAsFunctionProps) => React.ReactNode;
|
|
14
|
-
testId?: string;
|
|
15
|
-
}
|
|
16
|
-
/**
|
|
17
|
-
* @internal
|
|
18
|
-
*/
|
|
19
|
-
export declare const NestingMotion: (props: NestingMotionProps) => React.JSX.Element;
|
|
20
|
-
export {};
|
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import React from 'react';
|
|
6
|
-
import { type CustomItemComponentProps } from '@atlaskit/menu';
|
|
7
|
-
interface NestingItemOverrides {
|
|
8
|
-
/**
|
|
9
|
-
* Use this to override the back button displayed when navigation is nested.
|
|
10
|
-
* You'll want to import the [go back item](/packages/navigation/side-navigation/docs/go-back-item) component and use it here.
|
|
11
|
-
* This will be displayed for all children nesting item components unless they define their own.
|
|
12
|
-
* Your custom component should be wrapped with forwardRef to support assistive technologies.
|
|
13
|
-
*/
|
|
14
|
-
GoBackItem?: {
|
|
15
|
-
render?: (props: {
|
|
16
|
-
onClick: () => void;
|
|
17
|
-
testId?: string;
|
|
18
|
-
ref?: React.Ref<HTMLElement>;
|
|
19
|
-
}) => React.ReactNode;
|
|
20
|
-
};
|
|
21
|
-
}
|
|
22
|
-
/**
|
|
23
|
-
* @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
|
|
24
|
-
*/
|
|
25
|
-
export interface NestingItemProps<TCustomComponentProps = CustomItemComponentProps> {
|
|
26
|
-
/**
|
|
27
|
-
* A unique identifier for the nesting item.
|
|
28
|
-
* Every nesting item component needs a unique ID, or else undefined behavior will occur.
|
|
29
|
-
*/
|
|
30
|
-
id: string;
|
|
31
|
-
/**
|
|
32
|
-
* Text to display when the nesting item is rendered as a interactable element.
|
|
33
|
-
*/
|
|
34
|
-
title: React.ReactNode;
|
|
35
|
-
/**
|
|
36
|
-
* The view that should be shown when this nesting item is visible.
|
|
37
|
-
*/
|
|
38
|
-
children: React.ReactNode;
|
|
39
|
-
/**
|
|
40
|
-
* Used to customize the rendered component when shown as an item.
|
|
41
|
-
* You can use this for example to change it to a SPA link.
|
|
42
|
-
* Your custom component should be wrapped with forwardRef to support assistive technologies.
|
|
43
|
-
*/
|
|
44
|
-
component?: React.ComponentType<TCustomComponentProps>;
|
|
45
|
-
/**
|
|
46
|
-
* A `testId` prop is provided for specified elements,
|
|
47
|
-
* which is a unique string that appears as a data attribute `data-testid` in the rendered code,
|
|
48
|
-
* serving as a hook for automated tests.
|
|
49
|
-
*
|
|
50
|
-
* Will set these elements when defined:
|
|
51
|
-
* - The container - `{testId}--container`
|
|
52
|
-
* - The nesting item - `{testId}--item`
|
|
53
|
-
* - The go back item - `{testId}--go-back-item` (only used if you pass in a override).
|
|
54
|
-
* - The nesting item default right arrow icon - `{testId}--item--right-arrow`
|
|
55
|
-
*/
|
|
56
|
-
testId?: string;
|
|
57
|
-
/**
|
|
58
|
-
* Not recommended for general use as it enables unsafe style overrides.
|
|
59
|
-
*/
|
|
60
|
-
className?: string;
|
|
61
|
-
/**
|
|
62
|
-
* Element to render before the item text.
|
|
63
|
-
* Generally should be an [icon](https://atlassian.design/components/icon/icon-explorer) component.
|
|
64
|
-
*/
|
|
65
|
-
iconBefore?: React.ReactNode;
|
|
66
|
-
/**
|
|
67
|
-
* Element to render after the item text.
|
|
68
|
-
* Generally should be an [icon](https://atlassian.design/components/icon/icon-explorer) component.
|
|
69
|
-
*/
|
|
70
|
-
iconAfter?: React.ReactNode;
|
|
71
|
-
/**
|
|
72
|
-
* Event that is triggered when a person clicks the element.
|
|
73
|
-
*/
|
|
74
|
-
onClick?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
|
|
75
|
-
/**
|
|
76
|
-
* Description of the item.
|
|
77
|
-
* This will render smaller text below the primary text of the item as well as slightly increasing the height of the item.
|
|
78
|
-
*/
|
|
79
|
-
description?: string | JSX.Element;
|
|
80
|
-
/**
|
|
81
|
-
* Makes the element appear disabled and removes interactivity. Be aware that disabled UI does not appear to people who use assistive technology, so avoid using this if it still needs to appear in the tab order.
|
|
82
|
-
*/
|
|
83
|
-
isDisabled?: boolean;
|
|
84
|
-
/**
|
|
85
|
-
* Makes the element appear selected.
|
|
86
|
-
*/
|
|
87
|
-
isSelected?: boolean;
|
|
88
|
-
/**
|
|
89
|
-
* Custom overrides for the composed components.
|
|
90
|
-
*/
|
|
91
|
-
overrides?: NestingItemOverrides;
|
|
92
|
-
}
|
|
93
|
-
/**
|
|
94
|
-
* NestingItem will render itself differently depending in what context it is rendered in.
|
|
95
|
-
* When not open - it will render itself as an item.
|
|
96
|
-
* When open - it will render its children.
|
|
97
|
-
*
|
|
98
|
-
* @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
|
|
99
|
-
*/
|
|
100
|
-
declare const NestingItem: <TCustomComponentProps extends CustomItemComponentProps>(props: NestingItemProps<TCustomComponentProps> & Omit<TCustomComponentProps, keyof CustomItemComponentProps>) => JSX.Element;
|
|
101
|
-
export default NestingItem;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { type HeadingItemProps as MenuHeadingItemProps } from '@atlaskit/menu';
|
|
6
|
-
/**
|
|
7
|
-
* @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
|
|
8
|
-
*/
|
|
9
|
-
export interface HeadingItemProps extends MenuHeadingItemProps {
|
|
10
|
-
}
|
|
11
|
-
/**
|
|
12
|
-
* __Heading item__
|
|
13
|
-
*
|
|
14
|
-
* Available for advanced use cases, for most situations providing a `title` to `section` should be enough.
|
|
15
|
-
*
|
|
16
|
-
* @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
|
|
17
|
-
*/
|
|
18
|
-
declare const HeadingItem: (props: HeadingItemProps) => JSX.Element | null;
|
|
19
|
-
export default HeadingItem;
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
|
|
4
|
-
*/
|
|
5
|
-
export interface SectionProps {
|
|
6
|
-
/**
|
|
7
|
-
* The children of the section.
|
|
8
|
-
* These should generally be item or heading components.
|
|
9
|
-
*/
|
|
10
|
-
children: React.ReactNode;
|
|
11
|
-
/**
|
|
12
|
-
* The text passed to heading.
|
|
13
|
-
* If you don't provide a title, then the heading won't be rendered.
|
|
14
|
-
*/
|
|
15
|
-
title?: string;
|
|
16
|
-
/**
|
|
17
|
-
* This will render a border at the top of the section.
|
|
18
|
-
*/
|
|
19
|
-
hasSeparator?: boolean;
|
|
20
|
-
/**
|
|
21
|
-
* A `testId` prop is provided for specified elements,
|
|
22
|
-
* which is a unique string that appears as a data attribute `data-testid` in the rendered code,
|
|
23
|
-
* serving as a hook for automated tests.
|
|
24
|
-
*/
|
|
25
|
-
testId?: string;
|
|
26
|
-
/**
|
|
27
|
-
* Adds `<ul>` and `<li>` tags around the items for better semantic markup in a list of items.
|
|
28
|
-
*
|
|
29
|
-
*/
|
|
30
|
-
isList?: boolean;
|
|
31
|
-
}
|
|
32
|
-
/**
|
|
33
|
-
* __Section__
|
|
34
|
-
*
|
|
35
|
-
* Used to separate items into sections. Using the title prop makes a section
|
|
36
|
-
* implicitly group the items for screen readers with no additional work required.
|
|
37
|
-
*
|
|
38
|
-
* - [Examples](https://atlassian.design/components/side-navigation/examples#section)
|
|
39
|
-
* - [Code](https://atlassian.design/components/side-navigation/code)
|
|
40
|
-
*
|
|
41
|
-
* @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
|
|
42
|
-
*/
|
|
43
|
-
declare const Section: React.ForwardRefExoticComponent<React.PropsWithoutRef<SectionProps> & React.RefAttributes<HTMLElement>>;
|
|
44
|
-
export default Section;
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { type SkeletonHeadingItemProps as MenuSkeletonHeadingItemProps } from '@atlaskit/menu';
|
|
3
|
-
/**
|
|
4
|
-
* @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
|
|
5
|
-
*/
|
|
6
|
-
export interface SkeletonHeadingItemProps extends MenuSkeletonHeadingItemProps {
|
|
7
|
-
}
|
|
8
|
-
/**
|
|
9
|
-
* __Skeleton heading item__
|
|
10
|
-
*
|
|
11
|
-
* A skeleton heading item for use in managing loading states.
|
|
12
|
-
*
|
|
13
|
-
* - [Examples](https://atlassian.design/components/side-navigation/examples#loading)
|
|
14
|
-
*
|
|
15
|
-
* @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
|
|
16
|
-
*/
|
|
17
|
-
declare const SkeletonHeadingItem: (props: SkeletonHeadingItemProps) => React.JSX.Element | null;
|
|
18
|
-
export default SkeletonHeadingItem;
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
|
|
3
|
-
*/
|
|
4
|
-
export interface SideNavigationProps {
|
|
5
|
-
/**
|
|
6
|
-
* Describes the specific role of this navigation component for people viewing the page with assistive technology.
|
|
7
|
-
* This differentiates the navigation from other navigation components on a page.
|
|
8
|
-
*/
|
|
9
|
-
label: string;
|
|
10
|
-
/**
|
|
11
|
-
* Child navigation elements.
|
|
12
|
-
* You'll want to compose children from [navigation header](/packages/navigation/side-navigation/docs/navigation-header),
|
|
13
|
-
* [navigation content](/packages/navigation/side-navigation/docs/navigation-content) or [nestable navigation content](/packages/navigation/side-navigation/docs/nestable-navigation-content),
|
|
14
|
-
* and [navigation footer](/packages/navigation/side-navigation/docs/navigation-footer).
|
|
15
|
-
*/
|
|
16
|
-
children: JSX.Element[] | JSX.Element;
|
|
17
|
-
/**
|
|
18
|
-
* A `testId` prop is provided for specified elements,
|
|
19
|
-
* which is a unique string that appears as a data attribute `data-testid` in the rendered code,
|
|
20
|
-
* serving as a hook for automated tests.
|
|
21
|
-
*/
|
|
22
|
-
testId?: string;
|
|
23
|
-
/**
|
|
24
|
-
* Whether nav is rendered on the server.
|
|
25
|
-
*/
|
|
26
|
-
isServer?: boolean;
|
|
27
|
-
/**
|
|
28
|
-
* Whether to enable SSR placeholder replacement.
|
|
29
|
-
*/
|
|
30
|
-
isSSRPlaceholderEnabled?: boolean;
|
|
31
|
-
}
|
|
32
|
-
/**
|
|
33
|
-
* __Side navigation__
|
|
34
|
-
*
|
|
35
|
-
* A highly composable side navigation component that supports nested views.
|
|
36
|
-
*
|
|
37
|
-
* - [Examples](https://atlassian.design/components/side-navigation/examples)
|
|
38
|
-
* - [Code](https://atlassian.design/components/side-navigation/code)
|
|
39
|
-
* - [Usage](https://atlassian.design/components/side-navigation/usage)
|
|
40
|
-
*
|
|
41
|
-
* @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
|
|
42
|
-
*/
|
|
43
|
-
declare const SideNavigation: React.ForwardRefExoticComponent<React.PropsWithoutRef<SideNavigationProps> & React.RefAttributes<HTMLElement>>;
|
|
44
|
-
export default SideNavigation;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as ButtonItem } from '../components/Item/button-item';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR } from '../common/constants';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as CustomItem } from '../components/Item/custom-item';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as GoBackItem } from '../components/Item/go-back-item';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as LinkItem } from '../components/Item/link-item';
|