@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.
Files changed (100) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/codemods/{0.8.0-change-css-fn-prop.ts → 0.8.0-change-css-fn-prop.tsx} +0 -0
  3. package/codemods/__tests__/{0.8.0-change-css-fn-prop.ts → 0.8.0-change-css-fn-prop.tsx} +0 -0
  4. package/codemods/helpers/{generic.ts → generic.tsx} +0 -0
  5. package/dist/cjs/components/Footer/index.js +11 -2
  6. package/dist/cjs/components/Header/index.js +11 -2
  7. package/dist/cjs/components/Item/button-item.js +10 -1
  8. package/dist/cjs/components/Item/go-back-item.js +11 -1
  9. package/dist/cjs/components/Item/link-item.js +12 -1
  10. package/dist/cjs/components/Item/skeleton-item.js +11 -2
  11. package/dist/cjs/components/LoadingItems/index.js +6 -0
  12. package/dist/cjs/components/NavigationContent/index.js +9 -0
  13. package/dist/cjs/components/NavigationFooter/index.js +8 -0
  14. package/dist/cjs/components/NavigationHeader/index.js +9 -0
  15. package/dist/cjs/components/NestableNavigationContent/context.js +3 -0
  16. package/dist/cjs/components/NestableNavigationContent/index.js +8 -0
  17. package/dist/cjs/components/NestableNavigationContent/nesting-motion.js +3 -0
  18. package/dist/cjs/components/NestingItem/hack-for-ert.js +1 -0
  19. package/dist/cjs/components/Section/heading-item.js +7 -1
  20. package/dist/cjs/components/Section/section.js +11 -1
  21. package/dist/cjs/components/Section/skeleton-heading-item.js +10 -2
  22. package/dist/cjs/components/SideNavigation/index.js +10 -0
  23. package/dist/cjs/version.json +1 -1
  24. package/dist/es2019/components/Footer/index.js +11 -2
  25. package/dist/es2019/components/Header/index.js +11 -2
  26. package/dist/es2019/components/Item/button-item.js +11 -1
  27. package/dist/es2019/components/Item/custom-item.js +2 -0
  28. package/dist/es2019/components/Item/go-back-item.js +12 -1
  29. package/dist/es2019/components/Item/link-item.js +13 -1
  30. package/dist/es2019/components/Item/skeleton-item.js +11 -2
  31. package/dist/es2019/components/LoadingItems/index.js +5 -0
  32. package/dist/es2019/components/NavigationContent/index.js +9 -0
  33. package/dist/es2019/components/NavigationFooter/index.js +8 -0
  34. package/dist/es2019/components/NavigationHeader/index.js +8 -0
  35. package/dist/es2019/components/NestableNavigationContent/context.js +4 -0
  36. package/dist/es2019/components/NestableNavigationContent/index.js +8 -0
  37. package/dist/es2019/components/NestableNavigationContent/nesting-motion.js +4 -0
  38. package/dist/es2019/components/NestingItem/hack-for-ert.js +1 -0
  39. package/dist/es2019/components/Section/heading-item.js +7 -1
  40. package/dist/es2019/components/Section/section.js +11 -1
  41. package/dist/es2019/components/Section/skeleton-heading-item.js +10 -2
  42. package/dist/es2019/components/SideNavigation/index.js +10 -0
  43. package/dist/es2019/version.json +1 -1
  44. package/dist/esm/components/Footer/index.js +11 -2
  45. package/dist/esm/components/Header/index.js +11 -2
  46. package/dist/esm/components/Item/button-item.js +11 -1
  47. package/dist/esm/components/Item/custom-item.js +2 -0
  48. package/dist/esm/components/Item/go-back-item.js +12 -1
  49. package/dist/esm/components/Item/link-item.js +13 -1
  50. package/dist/esm/components/Item/skeleton-item.js +11 -2
  51. package/dist/esm/components/LoadingItems/index.js +5 -0
  52. package/dist/esm/components/NavigationContent/index.js +9 -0
  53. package/dist/esm/components/NavigationFooter/index.js +8 -0
  54. package/dist/esm/components/NavigationHeader/index.js +8 -0
  55. package/dist/esm/components/NestableNavigationContent/context.js +4 -0
  56. package/dist/esm/components/NestableNavigationContent/index.js +8 -0
  57. package/dist/esm/components/NestableNavigationContent/nesting-motion.js +4 -0
  58. package/dist/esm/components/NestingItem/hack-for-ert.js +1 -0
  59. package/dist/esm/components/Section/heading-item.js +7 -1
  60. package/dist/esm/components/Section/section.js +11 -1
  61. package/dist/esm/components/Section/skeleton-heading-item.js +10 -2
  62. package/dist/esm/components/SideNavigation/index.js +10 -0
  63. package/dist/esm/version.json +1 -1
  64. package/dist/types/components/Footer/index.d.ts +6 -0
  65. package/dist/types/components/Header/index.d.ts +9 -3
  66. package/dist/types/components/Item/button-item.d.ts +9 -0
  67. package/dist/types/components/Item/custom-item.d.ts +2 -2
  68. package/dist/types/components/Item/go-back-item.d.ts +9 -0
  69. package/dist/types/components/Item/link-item.d.ts +11 -0
  70. package/dist/types/components/Item/skeleton-item.d.ts +8 -0
  71. package/dist/types/components/LoadingItems/index.d.ts +6 -1
  72. package/dist/types/components/NavigationContent/index.d.ts +8 -0
  73. package/dist/types/components/NavigationFooter/index.d.ts +8 -0
  74. package/dist/types/components/NavigationHeader/index.d.ts +8 -0
  75. package/dist/types/components/NestableNavigationContent/context.d.ts +3 -0
  76. package/dist/types/components/NestableNavigationContent/index.d.ts +12 -4
  77. package/dist/types/components/NestableNavigationContent/nesting-motion.d.ts +3 -0
  78. package/dist/types/components/NestingItem/index.d.ts +1 -1
  79. package/dist/types/components/Section/heading-item.d.ts +6 -0
  80. package/dist/types/components/Section/section.d.ts +9 -0
  81. package/dist/types/components/Section/skeleton-heading-item.d.ts +7 -0
  82. package/dist/types/components/SideNavigation/index.d.ts +9 -0
  83. package/docs/00-intro.tsx +10 -65
  84. package/package.json +8 -7
  85. package/report.api.md +419 -0
  86. package/docs/01-side-navigation.tsx +0 -33
  87. package/docs/02-navigation-header.tsx +0 -39
  88. package/docs/03-navigation-content.tsx +0 -40
  89. package/docs/04-nestable-navigation-content.tsx +0 -95
  90. package/docs/05-navigation-footer.tsx +0 -38
  91. package/docs/99-loading-states.tsx +0 -95
  92. package/docs/button-item.tsx +0 -38
  93. package/docs/custom-item.tsx +0 -45
  94. package/docs/go-back-item.tsx +0 -31
  95. package/docs/heading-item.tsx +0 -30
  96. package/docs/link-item.tsx +0 -39
  97. package/docs/nesting-item.tsx +0 -52
  98. package/docs/section.tsx +0 -40
  99. package/docs/skeleton-heading-item.tsx +0 -30
  100. 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
@@ -1,4 +1,8 @@
1
1
  import { createContext, useContext } from 'react';
2
+
3
+ /**
4
+ * @internal
5
+ */
2
6
  export const NestedContext = /*#__PURE__*/createContext(undefined);
3
7
  export const useNestedContext = () => {
4
8
  const context = useContext(NestedContext);
@@ -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 {
@@ -1,6 +1,10 @@
1
1
  /** @jsx jsx */
2
2
  import { jsx } from '@emotion/core';
3
3
  import { easeOut, SlideIn } from '@atlaskit/motion';
4
+
5
+ /**
6
+ * @internal
7
+ */
4
8
  export const NestingMotion = props => {
5
9
  const {
6
10
  children,
@@ -1 +1,2 @@
1
+ // eslint-disable-next-line @repo/internal/react/use-noop
1
2
  export default function (_) {}
@@ -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,
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/side-navigation",
3
- "version": "1.2.12",
3
+ "version": "1.2.13",
4
4
  "sideEffects": false
5
5
  }
@@ -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, _extends({}, props, {
46
- component: props.component || Container,
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
- cssFn: cssFn,
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", {
@@ -1,4 +1,8 @@
1
1
  import { createContext, useContext } from 'react';
2
+
3
+ /**
4
+ * @internal
5
+ */
2
6
  export var NestedContext = /*#__PURE__*/createContext(undefined);
3
7
  export var useNestedContext = function useNestedContext() {
4
8
  var context = useContext(NestedContext);
@@ -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,
@@ -1 +1,2 @@
1
+ // eslint-disable-next-line @repo/internal/react/use-noop
1
2
  export default function (_) {}
@@ -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,
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/side-navigation",
3
- "version": "1.2.12",
3
+ "version": "1.2.13",
4
4
  "sideEffects": false
5
5
  }
@@ -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
- * **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.
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 CustomItemType {
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: CustomItemType;
13
+ declare const CustomItem: CustomItemPropsHack;
14
14
  export default CustomItem;