@atlaskit/side-navigation 1.2.12 → 1.2.13
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 +7 -0
- package/codemods/{0.8.0-change-css-fn-prop.ts → 0.8.0-change-css-fn-prop.tsx} +0 -0
- package/codemods/__tests__/{0.8.0-change-css-fn-prop.ts → 0.8.0-change-css-fn-prop.tsx} +0 -0
- package/codemods/helpers/{generic.ts → generic.tsx} +0 -0
- package/dist/cjs/components/Footer/index.js +11 -2
- package/dist/cjs/components/Header/index.js +11 -2
- package/dist/cjs/components/Item/button-item.js +10 -1
- package/dist/cjs/components/Item/go-back-item.js +11 -1
- package/dist/cjs/components/Item/link-item.js +12 -1
- package/dist/cjs/components/Item/skeleton-item.js +11 -2
- package/dist/cjs/components/LoadingItems/index.js +6 -0
- package/dist/cjs/components/NavigationContent/index.js +9 -0
- package/dist/cjs/components/NavigationFooter/index.js +8 -0
- package/dist/cjs/components/NavigationHeader/index.js +9 -0
- package/dist/cjs/components/NestableNavigationContent/context.js +3 -0
- package/dist/cjs/components/NestableNavigationContent/index.js +8 -0
- package/dist/cjs/components/NestableNavigationContent/nesting-motion.js +3 -0
- package/dist/cjs/components/NestingItem/hack-for-ert.js +1 -0
- package/dist/cjs/components/Section/heading-item.js +7 -1
- package/dist/cjs/components/Section/section.js +11 -1
- package/dist/cjs/components/Section/skeleton-heading-item.js +10 -2
- package/dist/cjs/components/SideNavigation/index.js +10 -0
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/components/Footer/index.js +11 -2
- package/dist/es2019/components/Header/index.js +11 -2
- package/dist/es2019/components/Item/button-item.js +11 -1
- package/dist/es2019/components/Item/custom-item.js +2 -0
- package/dist/es2019/components/Item/go-back-item.js +12 -1
- package/dist/es2019/components/Item/link-item.js +13 -1
- package/dist/es2019/components/Item/skeleton-item.js +11 -2
- package/dist/es2019/components/LoadingItems/index.js +5 -0
- package/dist/es2019/components/NavigationContent/index.js +9 -0
- package/dist/es2019/components/NavigationFooter/index.js +8 -0
- package/dist/es2019/components/NavigationHeader/index.js +8 -0
- package/dist/es2019/components/NestableNavigationContent/context.js +4 -0
- package/dist/es2019/components/NestableNavigationContent/index.js +8 -0
- package/dist/es2019/components/NestableNavigationContent/nesting-motion.js +4 -0
- package/dist/es2019/components/NestingItem/hack-for-ert.js +1 -0
- package/dist/es2019/components/Section/heading-item.js +7 -1
- package/dist/es2019/components/Section/section.js +11 -1
- package/dist/es2019/components/Section/skeleton-heading-item.js +10 -2
- package/dist/es2019/components/SideNavigation/index.js +10 -0
- package/dist/es2019/version.json +1 -1
- package/dist/esm/components/Footer/index.js +11 -2
- package/dist/esm/components/Header/index.js +11 -2
- package/dist/esm/components/Item/button-item.js +11 -1
- package/dist/esm/components/Item/custom-item.js +2 -0
- package/dist/esm/components/Item/go-back-item.js +12 -1
- package/dist/esm/components/Item/link-item.js +13 -1
- package/dist/esm/components/Item/skeleton-item.js +11 -2
- package/dist/esm/components/LoadingItems/index.js +5 -0
- package/dist/esm/components/NavigationContent/index.js +9 -0
- package/dist/esm/components/NavigationFooter/index.js +8 -0
- package/dist/esm/components/NavigationHeader/index.js +8 -0
- package/dist/esm/components/NestableNavigationContent/context.js +4 -0
- package/dist/esm/components/NestableNavigationContent/index.js +8 -0
- package/dist/esm/components/NestableNavigationContent/nesting-motion.js +4 -0
- package/dist/esm/components/NestingItem/hack-for-ert.js +1 -0
- package/dist/esm/components/Section/heading-item.js +7 -1
- package/dist/esm/components/Section/section.js +11 -1
- package/dist/esm/components/Section/skeleton-heading-item.js +10 -2
- package/dist/esm/components/SideNavigation/index.js +10 -0
- package/dist/esm/version.json +1 -1
- package/dist/types/components/Footer/index.d.ts +6 -0
- package/dist/types/components/Header/index.d.ts +9 -3
- package/dist/types/components/Item/button-item.d.ts +9 -0
- package/dist/types/components/Item/custom-item.d.ts +2 -2
- package/dist/types/components/Item/go-back-item.d.ts +9 -0
- package/dist/types/components/Item/link-item.d.ts +11 -0
- package/dist/types/components/Item/skeleton-item.d.ts +8 -0
- package/dist/types/components/LoadingItems/index.d.ts +6 -1
- package/dist/types/components/NavigationContent/index.d.ts +8 -0
- package/dist/types/components/NavigationFooter/index.d.ts +8 -0
- package/dist/types/components/NavigationHeader/index.d.ts +8 -0
- package/dist/types/components/NestableNavigationContent/context.d.ts +3 -0
- package/dist/types/components/NestableNavigationContent/index.d.ts +12 -4
- package/dist/types/components/NestableNavigationContent/nesting-motion.d.ts +3 -0
- package/dist/types/components/NestingItem/index.d.ts +1 -1
- package/dist/types/components/Section/heading-item.d.ts +6 -0
- package/dist/types/components/Section/section.d.ts +9 -0
- package/dist/types/components/Section/skeleton-heading-item.d.ts +7 -0
- package/dist/types/components/SideNavigation/index.d.ts +9 -0
- package/docs/00-intro.tsx +10 -65
- package/package.json +8 -7
- package/report.api.md +419 -0
- package/docs/01-side-navigation.tsx +0 -33
- package/docs/02-navigation-header.tsx +0 -39
- package/docs/03-navigation-content.tsx +0 -40
- package/docs/04-nestable-navigation-content.tsx +0 -95
- package/docs/05-navigation-footer.tsx +0 -38
- package/docs/99-loading-states.tsx +0 -95
- package/docs/button-item.tsx +0 -38
- package/docs/custom-item.tsx +0 -45
- package/docs/go-back-item.tsx +0 -31
- package/docs/heading-item.tsx +0 -30
- package/docs/link-item.tsx +0 -39
- package/docs/nesting-item.tsx +0 -52
- package/docs/section.tsx +0 -40
- package/docs/skeleton-heading-item.tsx +0 -30
- package/docs/skeleton-item.tsx +0 -30
|
@@ -6,6 +6,14 @@ const footerCSS = {
|
|
|
6
6
|
padding: gridSize(),
|
|
7
7
|
paddingBottom: gridSize() * 1.75
|
|
8
8
|
};
|
|
9
|
+
/**
|
|
10
|
+
* __Navigation footer__
|
|
11
|
+
*
|
|
12
|
+
* Allows for customisation of the footer.
|
|
13
|
+
*
|
|
14
|
+
* - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
|
|
15
|
+
* - [Code](https://atlassian.design/components/side-navigation/code)
|
|
16
|
+
*/
|
|
9
17
|
|
|
10
18
|
const NavigationFooter = ({
|
|
11
19
|
children
|
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
import { jsx } from '@emotion/core';
|
|
3
3
|
import { gridSize } from '@atlaskit/theme/constants';
|
|
4
4
|
|
|
5
|
+
/**
|
|
6
|
+
* __Navigation header__
|
|
7
|
+
*
|
|
8
|
+
* Allows for customisation of the header.
|
|
9
|
+
*
|
|
10
|
+
* - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
|
|
11
|
+
* - [Code](https://atlassian.design/components/side-navigation/code)
|
|
12
|
+
*/
|
|
5
13
|
const NavigationHeader = props => {
|
|
6
14
|
const {
|
|
7
15
|
children
|
|
@@ -11,6 +11,14 @@ import { NestingMotion } from './nesting-motion'; // Named so ERT doesn't pick u
|
|
|
11
11
|
|
|
12
12
|
export const ROOT_ID = 'ATLASKIT_NESTED_ROOT';
|
|
13
13
|
|
|
14
|
+
/**
|
|
15
|
+
* __Nestable navigation content__
|
|
16
|
+
*
|
|
17
|
+
* The container for navigation items with nested views
|
|
18
|
+
*
|
|
19
|
+
* - [Examples](https://atlassian.design/components/side-navigation/examples#nested-navigation)
|
|
20
|
+
* - [Code](https://atlassian.design/components/side-navigation/code)
|
|
21
|
+
*/
|
|
14
22
|
const NestableNavigationContent = props => {
|
|
15
23
|
const containerRef = useRef(null);
|
|
16
24
|
const {
|
|
@@ -4,6 +4,12 @@ import { HeadingItem as MenuHeadingItem } from '@atlaskit/menu';
|
|
|
4
4
|
import { overrideStyleFunction, sectionHeaderStyle } from '../../common/styles';
|
|
5
5
|
import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
|
|
6
6
|
|
|
7
|
+
/**
|
|
8
|
+
* __Heading item__
|
|
9
|
+
*
|
|
10
|
+
* Available for advanced use cases, for most situations providing a title to Section should be enough.
|
|
11
|
+
*
|
|
12
|
+
*/
|
|
7
13
|
const HeadingItem = props => {
|
|
8
14
|
const {
|
|
9
15
|
shouldRender
|
|
@@ -13,7 +19,7 @@ const HeadingItem = props => {
|
|
|
13
19
|
return null;
|
|
14
20
|
}
|
|
15
21
|
|
|
16
|
-
const cssFn = overrideStyleFunction(sectionHeaderStyle, props.cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
|
|
22
|
+
const cssFn = overrideStyleFunction(sectionHeaderStyle, props.cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides, @repo/internal/react/no-unsafe-spread-props
|
|
17
23
|
|
|
18
24
|
return /*#__PURE__*/React.createElement(MenuHeadingItem, _extends({}, props, {
|
|
19
25
|
cssFn: cssFn
|
|
@@ -4,6 +4,16 @@ import { Section as MenuSection } from '@atlaskit/menu';
|
|
|
4
4
|
import { sectionHeaderStyle } from '../../common/styles';
|
|
5
5
|
import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
|
|
6
6
|
// Type needed on props to extract types with extract react types.
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* __Section__
|
|
10
|
+
*
|
|
11
|
+
* Used to separate items into sections. Using the title prop makes a section
|
|
12
|
+
* implicitly group the items for screen readers with no additional work required.
|
|
13
|
+
*
|
|
14
|
+
* - [Examples](https://atlassian.design/components/side-navigation/examples#section)
|
|
15
|
+
* - [Code](https://atlassian.design/components/side-navigation/code)
|
|
16
|
+
*/
|
|
7
17
|
const Section = /*#__PURE__*/forwardRef((props, ref) => {
|
|
8
18
|
const {
|
|
9
19
|
shouldRender
|
|
@@ -14,7 +24,7 @@ const Section = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
14
24
|
}
|
|
15
25
|
|
|
16
26
|
return /*#__PURE__*/React.createElement(MenuSection, _extends({}, props, {
|
|
17
|
-
ref: ref // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
|
|
27
|
+
ref: ref // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
|
|
18
28
|
,
|
|
19
29
|
overrides: {
|
|
20
30
|
HeadingItem: {
|
|
@@ -4,6 +4,13 @@ import { SkeletonHeadingItem as MenuSkeletonHeadingItem } from '@atlaskit/menu';
|
|
|
4
4
|
import { ITEM_SIDE_PADDING } from '../../common/styles';
|
|
5
5
|
import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
|
|
6
6
|
|
|
7
|
+
/**
|
|
8
|
+
* __Skeleton heading item__
|
|
9
|
+
*
|
|
10
|
+
* A skeleton heading item for use in managing loading states.
|
|
11
|
+
*
|
|
12
|
+
* - [Examples](https://atlassian.design/components/side-navigation/examples#loading)
|
|
13
|
+
*/
|
|
7
14
|
const SkeletonHeadingItem = props => {
|
|
8
15
|
const {
|
|
9
16
|
shouldRender
|
|
@@ -13,12 +20,13 @@ const SkeletonHeadingItem = props => {
|
|
|
13
20
|
return null;
|
|
14
21
|
}
|
|
15
22
|
|
|
16
|
-
return /*#__PURE__*/React.createElement(MenuSkeletonHeadingItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
|
|
23
|
+
return /*#__PURE__*/React.createElement(MenuSkeletonHeadingItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
|
|
17
24
|
, _extends({
|
|
18
25
|
cssFn: () => ({
|
|
19
26
|
paddingLeft: ITEM_SIDE_PADDING,
|
|
20
27
|
paddingRight: ITEM_SIDE_PADDING
|
|
21
|
-
})
|
|
28
|
+
}) // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
29
|
+
|
|
22
30
|
}, props));
|
|
23
31
|
};
|
|
24
32
|
|
|
@@ -3,6 +3,16 @@ import { forwardRef } from 'react';
|
|
|
3
3
|
import { jsx } from '@emotion/core';
|
|
4
4
|
import { N10, N500 } from '@atlaskit/theme/colors';
|
|
5
5
|
import { gridSize } from '@atlaskit/theme/constants';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* __Side navigation__
|
|
9
|
+
*
|
|
10
|
+
* A highly composable side navigation component that supports nested views.
|
|
11
|
+
*
|
|
12
|
+
* - [Examples](https://atlassian.design/components/side-navigation/examples)
|
|
13
|
+
* - [Code](https://atlassian.design/components/side-navigation/code)
|
|
14
|
+
* - [Usage](https://atlassian.design/components/side-navigation/usage)
|
|
15
|
+
*/
|
|
6
16
|
const SideNavigation = /*#__PURE__*/forwardRef((props, ref) => {
|
|
7
17
|
const {
|
|
8
18
|
children,
|
package/dist/es2019/version.json
CHANGED
|
@@ -5,9 +5,16 @@ import { overrideStyleFunction } from '../../common/styles';
|
|
|
5
5
|
import { CustomItem } from '../Item';
|
|
6
6
|
|
|
7
7
|
var Container = function Container(props) {
|
|
8
|
+
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
8
9
|
return /*#__PURE__*/React.createElement("div", props);
|
|
9
10
|
};
|
|
10
11
|
|
|
12
|
+
/**
|
|
13
|
+
* __Header__
|
|
14
|
+
*
|
|
15
|
+
* - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
|
|
16
|
+
* - [Code](https://atlassian.design/components/side-navigation/code)
|
|
17
|
+
*/
|
|
11
18
|
var Footer = function Footer(props) {
|
|
12
19
|
var cssFn = overrideStyleFunction(function () {
|
|
13
20
|
return {
|
|
@@ -42,8 +49,10 @@ var Footer = function Footer(props) {
|
|
|
42
49
|
}
|
|
43
50
|
};
|
|
44
51
|
}, props.cssFn);
|
|
45
|
-
return /*#__PURE__*/React.createElement(CustomItem
|
|
46
|
-
|
|
52
|
+
return /*#__PURE__*/React.createElement(CustomItem // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
53
|
+
, _extends({}, props, {
|
|
54
|
+
component: props.component || Container // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
|
|
55
|
+
,
|
|
47
56
|
cssFn: cssFn
|
|
48
57
|
}));
|
|
49
58
|
};
|
|
@@ -9,9 +9,16 @@ import { overrideStyleFunction } from '../../common/styles';
|
|
|
9
9
|
import { CustomItem } from '../Item';
|
|
10
10
|
|
|
11
11
|
var Container = function Container(props) {
|
|
12
|
+
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
12
13
|
return /*#__PURE__*/React.createElement("div", props);
|
|
13
14
|
};
|
|
14
15
|
|
|
16
|
+
/**
|
|
17
|
+
* __Header__
|
|
18
|
+
*
|
|
19
|
+
* - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
|
|
20
|
+
* - [Code](https://atlassian.design/components/side-navigation/code)
|
|
21
|
+
*/
|
|
15
22
|
var Header = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
16
23
|
var cssFn = overrideStyleFunction(function () {
|
|
17
24
|
var _ref;
|
|
@@ -33,8 +40,10 @@ var Header = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
33
40
|
}, props.cssFn);
|
|
34
41
|
return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {
|
|
35
42
|
ref: ref,
|
|
36
|
-
component: props.component || Container
|
|
37
|
-
|
|
43
|
+
component: props.component || Container // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
|
|
44
|
+
,
|
|
45
|
+
cssFn: cssFn // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
|
|
46
|
+
,
|
|
38
47
|
overrides: {
|
|
39
48
|
Title: {
|
|
40
49
|
render: function render(_, _ref2) {
|
|
@@ -5,6 +5,16 @@ import React, { forwardRef } from 'react';
|
|
|
5
5
|
import { ButtonItem as Button } from '@atlaskit/menu';
|
|
6
6
|
import { baseSideNavItemStyle, overrideStyleFunction } from '../../common/styles';
|
|
7
7
|
import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* __Button item__
|
|
11
|
+
*
|
|
12
|
+
* A button item renders an item wrapped in a button tag, used primarily when an
|
|
13
|
+
* action does something other than changing routes.
|
|
14
|
+
*
|
|
15
|
+
* - [Examples](https://atlassian.design/components/side-navigation/examples#button-item)
|
|
16
|
+
* - [Code](https://atlassian.design/components/side-navigation/code)
|
|
17
|
+
*/
|
|
8
18
|
var ButtonItem = /*#__PURE__*/forwardRef( // Type needed on props to extract types with extract react types.
|
|
9
19
|
function (_ref, ref) {
|
|
10
20
|
var cssFn = _ref.cssFn,
|
|
@@ -17,7 +27,7 @@ function (_ref, ref) {
|
|
|
17
27
|
return null;
|
|
18
28
|
}
|
|
19
29
|
|
|
20
|
-
var cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
|
|
30
|
+
var cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
|
|
21
31
|
|
|
22
32
|
return /*#__PURE__*/React.createElement(Button, _extends({
|
|
23
33
|
ref: ref,
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
var _excluded = ["cssFn"];
|
|
4
|
+
|
|
5
|
+
/* eslint-disable @repo/internal/react/no-unsafe-overrides */
|
|
4
6
|
import React, { forwardRef } from 'react';
|
|
5
7
|
import { CustomItem as Custom } from '@atlaskit/menu';
|
|
6
8
|
import { baseSideNavItemStyle, overrideStyleFunction } from '../../common/styles';
|
|
@@ -6,6 +6,16 @@ import React, { forwardRef, useCallback, useState } from 'react';
|
|
|
6
6
|
import LeftArrow from '@atlaskit/icon/glyph/arrow-left-circle';
|
|
7
7
|
import { N10 } from '@atlaskit/theme/colors';
|
|
8
8
|
import ButtonItem from './button-item';
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* __Go back item__
|
|
12
|
+
*
|
|
13
|
+
* A go back item is used to provide a customized "go back" button in nested
|
|
14
|
+
* navigations.
|
|
15
|
+
*
|
|
16
|
+
* - [Examples](https://atlassian.design/components/side-navigation/examples#go-back-item)
|
|
17
|
+
* - [Code](https://atlassian.design/components/side-navigation/code)
|
|
18
|
+
*/
|
|
9
19
|
var GoBackItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
10
20
|
var cssFn = _ref.cssFn,
|
|
11
21
|
_ref$iconBefore = _ref.iconBefore,
|
|
@@ -31,7 +41,8 @@ var GoBackItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
31
41
|
onClick && onClick(e);
|
|
32
42
|
}, [onClick, isInteracted]);
|
|
33
43
|
return /*#__PURE__*/React.createElement(ButtonItem, _extends({
|
|
34
|
-
isSelected: isSelected || isInteracted
|
|
44
|
+
isSelected: isSelected || isInteracted // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
|
|
45
|
+
,
|
|
35
46
|
cssFn: cssFn,
|
|
36
47
|
iconBefore: iconBefore,
|
|
37
48
|
onClick: onClickHandler,
|
|
@@ -5,6 +5,18 @@ import React, { forwardRef } from 'react';
|
|
|
5
5
|
import { LinkItem as Link } from '@atlaskit/menu';
|
|
6
6
|
import { baseSideNavItemStyle, overrideStyleFunction } from '../../common/styles';
|
|
7
7
|
import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* __Link item__
|
|
11
|
+
*
|
|
12
|
+
* Renders an item wrapped in an anchor tag, useful when you have an item that
|
|
13
|
+
* should change routes using native browser navigation. For SPA transitions use
|
|
14
|
+
* a [custom item](https://atlassian.design/components/side-navigation/examples#custom-item)
|
|
15
|
+
* with the respective router logic.
|
|
16
|
+
*
|
|
17
|
+
* - [Examples](https://atlassian.design/components/side-navigation/examples#link-item)
|
|
18
|
+
* - [Code](https://atlassian.design/components/side-navigation/code)
|
|
19
|
+
*/
|
|
8
20
|
var LinkItem = /*#__PURE__*/forwardRef( // Type needed on props to extract types with extract react types.
|
|
9
21
|
function (_ref, ref) {
|
|
10
22
|
var cssFn = _ref.cssFn,
|
|
@@ -17,7 +29,7 @@ function (_ref, ref) {
|
|
|
17
29
|
return null;
|
|
18
30
|
}
|
|
19
31
|
|
|
20
|
-
var cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
|
|
32
|
+
var cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
|
|
21
33
|
|
|
22
34
|
return /*#__PURE__*/React.createElement(Link, _extends({
|
|
23
35
|
ref: ref,
|
|
@@ -4,6 +4,14 @@ import { SkeletonItem as SkelItem } from '@atlaskit/menu';
|
|
|
4
4
|
import { ITEM_SIDE_PADDING } from '../../common/styles';
|
|
5
5
|
import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
|
|
6
6
|
|
|
7
|
+
/**
|
|
8
|
+
* __Skeleton item__
|
|
9
|
+
*
|
|
10
|
+
* A skeleton item can be used to reduce the perceived laoding time.
|
|
11
|
+
*
|
|
12
|
+
* - [Examples](https://atlassian.design/components/side-navigation/examples#loading)
|
|
13
|
+
* - [Code](https://atlassian.design/components/side-navigation/code)
|
|
14
|
+
*/
|
|
7
15
|
var SkeletonItem = function SkeletonItem(props) {
|
|
8
16
|
var _useShouldNestedEleme = useShouldNestedElementRender(),
|
|
9
17
|
shouldRender = _useShouldNestedEleme.shouldRender;
|
|
@@ -12,7 +20,7 @@ var SkeletonItem = function SkeletonItem(props) {
|
|
|
12
20
|
return null;
|
|
13
21
|
}
|
|
14
22
|
|
|
15
|
-
return /*#__PURE__*/React.createElement(SkelItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
|
|
23
|
+
return /*#__PURE__*/React.createElement(SkelItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
|
|
16
24
|
, _extends({
|
|
17
25
|
cssFn: function cssFn() {
|
|
18
26
|
return {
|
|
@@ -23,7 +31,8 @@ var SkeletonItem = function SkeletonItem(props) {
|
|
|
23
31
|
marginRight: 18
|
|
24
32
|
}
|
|
25
33
|
};
|
|
26
|
-
}
|
|
34
|
+
} // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
35
|
+
|
|
27
36
|
}, props));
|
|
28
37
|
};
|
|
29
38
|
|
|
@@ -5,6 +5,11 @@ import { jsx } from '@emotion/core';
|
|
|
5
5
|
import { ExitingPersistence, FadeIn, mediumDurationMs } from '@atlaskit/motion';
|
|
6
6
|
import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
|
|
7
7
|
|
|
8
|
+
/**
|
|
9
|
+
* __Loading items__
|
|
10
|
+
*
|
|
11
|
+
* Loading items conditionally render based on the useShouldNestedElementRender() hook.
|
|
12
|
+
*/
|
|
8
13
|
var LoadingItems = function LoadingItems(_ref) {
|
|
9
14
|
var children = _ref.children,
|
|
10
15
|
isLoading = _ref.isLoading,
|
|
@@ -4,6 +4,15 @@ import { jsx } from '@emotion/core';
|
|
|
4
4
|
import useScrollbarWidth from '@atlaskit/ds-lib/use-scrollbar-width';
|
|
5
5
|
import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
|
|
6
6
|
import { containerCSS, innerContainerCSS, outerContainerCSS } from './styles';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* __Navigation content__
|
|
10
|
+
*
|
|
11
|
+
* A navigation content is used as the container for navigation items.
|
|
12
|
+
*
|
|
13
|
+
* - [Examples](https://atlassian.design/components/side-navigation/examples#content)
|
|
14
|
+
* - [Code](https://atlassian.design/components/side-navigation/code)
|
|
15
|
+
*/
|
|
7
16
|
var NavigationContent = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
8
17
|
var showTopScrollIndicator = props.showTopScrollIndicator,
|
|
9
18
|
children = props.children;
|
|
@@ -6,6 +6,14 @@ var footerCSS = {
|
|
|
6
6
|
padding: gridSize(),
|
|
7
7
|
paddingBottom: gridSize() * 1.75
|
|
8
8
|
};
|
|
9
|
+
/**
|
|
10
|
+
* __Navigation footer__
|
|
11
|
+
*
|
|
12
|
+
* Allows for customisation of the footer.
|
|
13
|
+
*
|
|
14
|
+
* - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
|
|
15
|
+
* - [Code](https://atlassian.design/components/side-navigation/code)
|
|
16
|
+
*/
|
|
9
17
|
|
|
10
18
|
var NavigationFooter = function NavigationFooter(_ref) {
|
|
11
19
|
var children = _ref.children;
|
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
import { jsx } from '@emotion/core';
|
|
3
3
|
import { gridSize } from '@atlaskit/theme/constants';
|
|
4
4
|
|
|
5
|
+
/**
|
|
6
|
+
* __Navigation header__
|
|
7
|
+
*
|
|
8
|
+
* Allows for customisation of the header.
|
|
9
|
+
*
|
|
10
|
+
* - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
|
|
11
|
+
* - [Code](https://atlassian.design/components/side-navigation/code)
|
|
12
|
+
*/
|
|
5
13
|
var NavigationHeader = function NavigationHeader(props) {
|
|
6
14
|
var children = props.children;
|
|
7
15
|
return jsx("div", {
|
|
@@ -12,6 +12,14 @@ import { NestingMotion } from './nesting-motion'; // Named so ERT doesn't pick u
|
|
|
12
12
|
|
|
13
13
|
export var ROOT_ID = 'ATLASKIT_NESTED_ROOT';
|
|
14
14
|
|
|
15
|
+
/**
|
|
16
|
+
* __Nestable navigation content__
|
|
17
|
+
*
|
|
18
|
+
* The container for navigation items with nested views
|
|
19
|
+
*
|
|
20
|
+
* - [Examples](https://atlassian.design/components/side-navigation/examples#nested-navigation)
|
|
21
|
+
* - [Code](https://atlassian.design/components/side-navigation/code)
|
|
22
|
+
*/
|
|
15
23
|
var NestableNavigationContent = function NestableNavigationContent(props) {
|
|
16
24
|
var containerRef = useRef(null);
|
|
17
25
|
var children = props.children,
|
|
@@ -7,6 +7,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
7
7
|
/** @jsx jsx */
|
|
8
8
|
import { jsx } from '@emotion/core';
|
|
9
9
|
import { easeOut, SlideIn } from '@atlaskit/motion';
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* @internal
|
|
13
|
+
*/
|
|
10
14
|
export var NestingMotion = function NestingMotion(props) {
|
|
11
15
|
var children = props.children,
|
|
12
16
|
enterFrom = props.enterFrom,
|
|
@@ -4,6 +4,12 @@ import { HeadingItem as MenuHeadingItem } from '@atlaskit/menu';
|
|
|
4
4
|
import { overrideStyleFunction, sectionHeaderStyle } from '../../common/styles';
|
|
5
5
|
import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
|
|
6
6
|
|
|
7
|
+
/**
|
|
8
|
+
* __Heading item__
|
|
9
|
+
*
|
|
10
|
+
* Available for advanced use cases, for most situations providing a title to Section should be enough.
|
|
11
|
+
*
|
|
12
|
+
*/
|
|
7
13
|
var HeadingItem = function HeadingItem(props) {
|
|
8
14
|
var _useShouldNestedEleme = useShouldNestedElementRender(),
|
|
9
15
|
shouldRender = _useShouldNestedEleme.shouldRender;
|
|
@@ -12,7 +18,7 @@ var HeadingItem = function HeadingItem(props) {
|
|
|
12
18
|
return null;
|
|
13
19
|
}
|
|
14
20
|
|
|
15
|
-
var cssFn = overrideStyleFunction(sectionHeaderStyle, props.cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
|
|
21
|
+
var cssFn = overrideStyleFunction(sectionHeaderStyle, props.cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides, @repo/internal/react/no-unsafe-spread-props
|
|
16
22
|
|
|
17
23
|
return /*#__PURE__*/React.createElement(MenuHeadingItem, _extends({}, props, {
|
|
18
24
|
cssFn: cssFn
|
|
@@ -4,6 +4,16 @@ import { Section as MenuSection } from '@atlaskit/menu';
|
|
|
4
4
|
import { sectionHeaderStyle } from '../../common/styles';
|
|
5
5
|
import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
|
|
6
6
|
// Type needed on props to extract types with extract react types.
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* __Section__
|
|
10
|
+
*
|
|
11
|
+
* Used to separate items into sections. Using the title prop makes a section
|
|
12
|
+
* implicitly group the items for screen readers with no additional work required.
|
|
13
|
+
*
|
|
14
|
+
* - [Examples](https://atlassian.design/components/side-navigation/examples#section)
|
|
15
|
+
* - [Code](https://atlassian.design/components/side-navigation/code)
|
|
16
|
+
*/
|
|
7
17
|
var Section = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
8
18
|
var _useShouldNestedEleme = useShouldNestedElementRender(),
|
|
9
19
|
shouldRender = _useShouldNestedEleme.shouldRender;
|
|
@@ -13,7 +23,7 @@ var Section = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
13
23
|
}
|
|
14
24
|
|
|
15
25
|
return /*#__PURE__*/React.createElement(MenuSection, _extends({}, props, {
|
|
16
|
-
ref: ref // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
|
|
26
|
+
ref: ref // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
|
|
17
27
|
,
|
|
18
28
|
overrides: {
|
|
19
29
|
HeadingItem: {
|
|
@@ -4,6 +4,13 @@ import { SkeletonHeadingItem as MenuSkeletonHeadingItem } from '@atlaskit/menu';
|
|
|
4
4
|
import { ITEM_SIDE_PADDING } from '../../common/styles';
|
|
5
5
|
import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
|
|
6
6
|
|
|
7
|
+
/**
|
|
8
|
+
* __Skeleton heading item__
|
|
9
|
+
*
|
|
10
|
+
* A skeleton heading item for use in managing loading states.
|
|
11
|
+
*
|
|
12
|
+
* - [Examples](https://atlassian.design/components/side-navigation/examples#loading)
|
|
13
|
+
*/
|
|
7
14
|
var SkeletonHeadingItem = function SkeletonHeadingItem(props) {
|
|
8
15
|
var _useShouldNestedEleme = useShouldNestedElementRender(),
|
|
9
16
|
shouldRender = _useShouldNestedEleme.shouldRender;
|
|
@@ -12,14 +19,15 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(props) {
|
|
|
12
19
|
return null;
|
|
13
20
|
}
|
|
14
21
|
|
|
15
|
-
return /*#__PURE__*/React.createElement(MenuSkeletonHeadingItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
|
|
22
|
+
return /*#__PURE__*/React.createElement(MenuSkeletonHeadingItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
|
|
16
23
|
, _extends({
|
|
17
24
|
cssFn: function cssFn() {
|
|
18
25
|
return {
|
|
19
26
|
paddingLeft: ITEM_SIDE_PADDING,
|
|
20
27
|
paddingRight: ITEM_SIDE_PADDING
|
|
21
28
|
};
|
|
22
|
-
}
|
|
29
|
+
} // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
30
|
+
|
|
23
31
|
}, props));
|
|
24
32
|
};
|
|
25
33
|
|
|
@@ -3,6 +3,16 @@ import { forwardRef } from 'react';
|
|
|
3
3
|
import { jsx } from '@emotion/core';
|
|
4
4
|
import { N10, N500 } from '@atlaskit/theme/colors';
|
|
5
5
|
import { gridSize } from '@atlaskit/theme/constants';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* __Side navigation__
|
|
9
|
+
*
|
|
10
|
+
* A highly composable side navigation component that supports nested views.
|
|
11
|
+
*
|
|
12
|
+
* - [Examples](https://atlassian.design/components/side-navigation/examples)
|
|
13
|
+
* - [Code](https://atlassian.design/components/side-navigation/code)
|
|
14
|
+
* - [Usage](https://atlassian.design/components/side-navigation/usage)
|
|
15
|
+
*/
|
|
6
16
|
var SideNavigation = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
7
17
|
var children = props.children,
|
|
8
18
|
testId = props.testId,
|
package/dist/esm/version.json
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { HeaderProps } from '../Header';
|
|
3
3
|
export type { HeaderProps as FooterProps } from '../Header';
|
|
4
|
+
/**
|
|
5
|
+
* __Header__
|
|
6
|
+
*
|
|
7
|
+
* - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
|
|
8
|
+
* - [Code](https://atlassian.design/components/side-navigation/code)
|
|
9
|
+
*/
|
|
4
10
|
declare const Footer: (props: HeaderProps) => JSX.Element;
|
|
5
11
|
export default Footer;
|
|
@@ -34,11 +34,17 @@ export interface HeaderProps {
|
|
|
34
34
|
/**
|
|
35
35
|
* Custom component to render as an item.
|
|
36
36
|
* This can be both a functional component or a class component.
|
|
37
|
-
*
|
|
38
|
-
|
|
39
|
-
*
|
|
37
|
+
* __Will return `null` if no component is defined.__
|
|
38
|
+
*
|
|
39
|
+
* __NOTE:__ Make sure the reference for this component does not change between renders else undefined behavior may happen.
|
|
40
40
|
*/
|
|
41
41
|
component?: React.ComponentType<CustomItemComponentProps>;
|
|
42
42
|
}
|
|
43
|
+
/**
|
|
44
|
+
* __Header__
|
|
45
|
+
*
|
|
46
|
+
* - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
|
|
47
|
+
* - [Code](https://atlassian.design/components/side-navigation/code)
|
|
48
|
+
*/
|
|
43
49
|
declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;
|
|
44
50
|
export default Header;
|
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ButtonItemProps } from '@atlaskit/menu';
|
|
3
3
|
export type { ButtonItemProps } from '@atlaskit/menu';
|
|
4
|
+
/**
|
|
5
|
+
* __Button item__
|
|
6
|
+
*
|
|
7
|
+
* A button item renders an item wrapped in a button tag, used primarily when an
|
|
8
|
+
* action does something other than changing routes.
|
|
9
|
+
*
|
|
10
|
+
* - [Examples](https://atlassian.design/components/side-navigation/examples#button-item)
|
|
11
|
+
* - [Code](https://atlassian.design/components/side-navigation/code)
|
|
12
|
+
*/
|
|
4
13
|
declare const ButtonItem: React.ForwardRefExoticComponent<ButtonItemProps & React.RefAttributes<HTMLElement>>;
|
|
5
14
|
export default ButtonItem;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { CustomItemComponentProps, CustomItemProps } from '@atlaskit/menu';
|
|
3
3
|
export type { CustomItemComponentProps, CustomItemProps } from '@atlaskit/menu';
|
|
4
|
-
interface
|
|
4
|
+
interface CustomItemPropsHack {
|
|
5
5
|
<TComponentProps extends {}>(props: CustomItemProps<TComponentProps> & {
|
|
6
6
|
ref?: any;
|
|
7
7
|
} & Omit<TComponentProps, keyof CustomItemComponentProps>): JSX.Element | null;
|
|
@@ -10,5 +10,5 @@ interface CustomItemType {
|
|
|
10
10
|
* Used to support any custom items needed by products alongside the Header and Footer patterns.
|
|
11
11
|
* Specific implementation of headers and footers are provided in the examples folder.
|
|
12
12
|
*/
|
|
13
|
-
declare const CustomItem:
|
|
13
|
+
declare const CustomItem: CustomItemPropsHack;
|
|
14
14
|
export default CustomItem;
|