@atlaskit/side-navigation 1.2.10 → 1.2.13

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/side-navigation
 
+## 1.2.13
+
+### Patch Changes
+
+- [`b2767947029`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b2767947029) - Internal code change turning on new linting rules.
+- Updated dependencies
+
+## 1.2.12
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.2.11
+
+### Patch Changes
+
+- [`efa50ac72ba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/efa50ac72ba) - Adjusts jsdoc strings to improve prop documentation
+
 ## 1.2.10
 
 ### Patch Changes

package/constellation/index/usage.mdx

@@ -2,7 +2,6 @@
 order: 2
 ---
 
-import DoDont from '@atlaskit/gatsby-theme-brisk/src/components/do-dont';
 import buttonConciseDo from './images/button-concise-do.png';
 import buttonConciseDont from './images/button-concise-dont.png';
 import buttonCapitalizationDo from './images/button-capitalization-do.png';

package/dist/cjs/components/Footer/index.js

@@ -18,9 +18,16 @@ var _styles = require("../../common/styles");
 var _Item = require("../Item");
 
 var Container = function Container(props) {
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   return /*#__PURE__*/_react.default.createElement("div", props);
 };
 
+/**
+ * __Header__
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 var Footer = function Footer(props) {
   var cssFn = (0, _styles.overrideStyleFunction)(function () {
     return {
@@ -55,8 +62,10 @@ var Footer = function Footer(props) {
       }
     };
   }, props.cssFn);
-  return /*#__PURE__*/_react.default.createElement(_Item.CustomItem, (0, _extends2.default)({}, props, {
-    component: props.component || Container,
+  return /*#__PURE__*/_react.default.createElement(_Item.CustomItem // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , (0, _extends2.default)({}, props, {
+    component: props.component || Container // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+    ,
     cssFn: cssFn
   }));
 };

package/dist/cjs/components/Header/index.js

@@ -32,9 +32,16 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var Container = function Container(props) {
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   return /*#__PURE__*/_react.default.createElement("div", props);
 };
 
+/**
+ * __Header__
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 var Header = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var cssFn = (0, _styles.overrideStyleFunction)(function () {
     var _ref;
@@ -56,8 +63,10 @@ var Header = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, props.cssFn);
   return /*#__PURE__*/_react.default.createElement(_Item.CustomItem, (0, _extends2.default)({}, props, {
     ref: ref,
-    component: props.component || Container,
-    cssFn: cssFn,
+    component: props.component || Container // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+    ,
+    cssFn: cssFn // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+    ,
     overrides: {
       Title: {
         render: function render(_, _ref2) {

package/dist/cjs/components/Item/button-item.js

@@ -27,6 +27,15 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+/**
+ * __Button item__
+ *
+ * A button item renders an item wrapped in a button tag, used primarily when an
+ * action does something other than changing routes.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#button-item)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 var ButtonItem = /*#__PURE__*/(0, _react.forwardRef)( // Type needed on props to extract types with extract react types.
 function (_ref, ref) {
   var cssFn = _ref.cssFn,
@@ -39,7 +48,7 @@ function (_ref, ref) {
     return null;
   }
 
-  var cssOverride = (0, _styles.overrideStyleFunction)(_styles.baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+  var cssOverride = (0, _styles.overrideStyleFunction)(_styles.baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
 
   return /*#__PURE__*/_react.default.createElement(_menu.ButtonItem, (0, _extends2.default)({
     ref: ref,

package/dist/cjs/components/Item/go-back-item.js

@@ -29,6 +29,15 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+/**
+ * __Go back item__
+ *
+ * A go back item is used to provide a customized "go back" button in nested
+ * navigations.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#go-back-item)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 var GoBackItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var cssFn = _ref.cssFn,
       _ref$iconBefore = _ref.iconBefore,
@@ -54,7 +63,8 @@ var GoBackItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     onClick && onClick(e);
   }, [onClick, isInteracted]);
   return /*#__PURE__*/_react.default.createElement(_buttonItem.default, (0, _extends2.default)({
-    isSelected: isSelected || isInteracted,
+    isSelected: isSelected || isInteracted // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+    ,
     cssFn: cssFn,
     iconBefore: iconBefore,
     onClick: onClickHandler,

package/dist/cjs/components/Item/link-item.js

@@ -27,6 +27,17 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+/**
+ * __Link item__
+ *
+ * Renders an item wrapped in an anchor tag, useful when you have an item that
+ * should change routes using native browser navigation. For SPA transitions use
+ * a [custom item](https://atlassian.design/components/side-navigation/examples#custom-item)
+ * with the respective router logic.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#link-item)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 var LinkItem = /*#__PURE__*/(0, _react.forwardRef)( // Type needed on props to extract types with extract react types.
 function (_ref, ref) {
   var cssFn = _ref.cssFn,
@@ -39,7 +50,7 @@ function (_ref, ref) {
     return null;
   }
 
-  var cssOverride = (0, _styles.overrideStyleFunction)(_styles.baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+  var cssOverride = (0, _styles.overrideStyleFunction)(_styles.baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
 
   return /*#__PURE__*/_react.default.createElement(_menu.LinkItem, (0, _extends2.default)({
     ref: ref,

package/dist/cjs/components/Item/skeleton-item.js

@@ -17,6 +17,14 @@ var _styles = require("../../common/styles");
 
 var _context = require("../NestableNavigationContent/context");
 
+/**
+ * __Skeleton item__
+ *
+ * A skeleton item can be used to reduce the perceived laoding time.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#loading)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 var SkeletonItem = function SkeletonItem(props) {
   var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
       shouldRender = _useShouldNestedEleme.shouldRender;
@@ -25,7 +33,7 @@ var SkeletonItem = function SkeletonItem(props) {
     return null;
   }
 
-  return /*#__PURE__*/_react.default.createElement(_menu.SkeletonItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+  return /*#__PURE__*/_react.default.createElement(_menu.SkeletonItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
   , (0, _extends2.default)({
     cssFn: function cssFn() {
       return {
@@ -36,7 +44,8 @@ var SkeletonItem = function SkeletonItem(props) {
           marginRight: 18
         }
       };
-    }
+    } // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
   }, props));
 };
 

package/dist/cjs/components/LoadingItems/index.js

@@ -16,6 +16,12 @@ var _motion = require("@atlaskit/motion");
 var _context = require("../NestableNavigationContent/context");
 
 /** @jsx jsx */
+
+/**
+ * __Loading items__
+ *
+ * Loading items conditionally render based on the useShouldNestedElementRender() hook.
+ */
 var LoadingItems = function LoadingItems(_ref) {
   var children = _ref.children,
       isLoading = _ref.isLoading,

package/dist/cjs/components/NavigationContent/index.js

@@ -18,6 +18,15 @@ var _context = require("../NestableNavigationContent/context");
 var _styles = require("./styles");
 
 /** @jsx jsx */
+
+/**
+ * __Navigation content__
+ *
+ * A navigation content is used as the container for navigation items.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#content)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 var NavigationContent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var showTopScrollIndicator = props.showTopScrollIndicator,
       children = props.children;

package/dist/cjs/components/NavigationContent/styles.js

@@ -58,7 +58,7 @@ var outerContainerCSS = function outerContainerCSS(opts) {
       right: containerPadding + opts.scrollbarWidth,
       height: scrollIndicatorHeight,
       borderRadius: scrollIndicatorBorderRadius,
-      backgroundColor: "var(".concat(_constants2.VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border, ".concat(_colors.N30, ")"), ")"),
+      backgroundColor: "var(".concat(_constants2.VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(_colors.N30, ")"), ")"),
       position: 'absolute',
       zIndex: scrollIndicatorZIndex
     },
@@ -73,7 +73,7 @@ var outerContainerCSS = function outerContainerCSS(opts) {
       right: containerPadding + opts.scrollbarWidth,
       bottom: 0,
       zIndex: scrollIndicatorZIndex,
-      backgroundColor: "var(".concat(_constants2.VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border, ".concat(_colors.N30, ")"), ")")
+      backgroundColor: "var(".concat(_constants2.VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(_colors.N30, ")"), ")")
     }
   };
 };
@@ -101,7 +101,7 @@ var innerContainerCSS = function innerContainerCSS(opts) {
       left: 0,
       right: 0,
       height: scrollIndicatorHeight,
-      backgroundColor: "var(".concat(_constants2.VAR_SCROLL_INDICATOR_COLOR, ", ").concat("var(--ds-surface, ".concat(_colors.N10, ")"), ")"),
+      backgroundColor: "var(".concat(_constants2.VAR_SCROLL_INDICATOR_COLOR, ", ", "var(--ds-surface, ".concat(_colors.N10, ")"), ")"),
       position: 'absolute',
       display: 'block',
       zIndex: scrollIndicatorMaskZIndex
@@ -119,7 +119,7 @@ var innerContainerCSS = function innerContainerCSS(opts) {
       marginTop: 'auto',
       position: 'relative',
       zIndex: scrollIndicatorMaskZIndex,
-      backgroundColor: "var(".concat(_constants2.VAR_SCROLL_INDICATOR_COLOR, ", ").concat("var(--ds-surface, ".concat(_colors.N10, ")"), ")")
+      backgroundColor: "var(".concat(_constants2.VAR_SCROLL_INDICATOR_COLOR, ", ", "var(--ds-surface, ".concat(_colors.N10, ")"), ")")
     }
   });
 };

package/dist/cjs/components/NavigationFooter/index.js

@@ -15,6 +15,14 @@ var footerCSS = {
   padding: (0, _constants.gridSize)(),
   paddingBottom: (0, _constants.gridSize)() * 1.75
 };
+/**
+ * __Navigation footer__
+ *
+ * Allows for customisation of the footer.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 
 var NavigationFooter = function NavigationFooter(_ref) {
   var children = _ref.children;

package/dist/cjs/components/NavigationHeader/index.js

@@ -10,6 +10,15 @@ var _core = require("@emotion/core");
 var _constants = require("@atlaskit/theme/constants");
 
 /** @jsx jsx */
+
+/**
+ * __Navigation header__
+ *
+ * Allows for customisation of the header.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 var NavigationHeader = function NavigationHeader(props) {
   var children = props.children;
   return (0, _core.jsx)("div", {

package/dist/cjs/components/NestableNavigationContent/context.js

@@ -7,6 +7,9 @@ exports.useShouldNestedElementRender = exports.useNestedContext = exports.Nested
 
 var _react = require("react");
 
+/**
+ * @internal
+ */
 var NestedContext = /*#__PURE__*/(0, _react.createContext)(undefined);
 exports.NestedContext = NestedContext;
 

package/dist/cjs/components/NestableNavigationContent/index.js

@@ -30,6 +30,14 @@ var _nestingMotion = require("./nesting-motion");
 var ROOT_ID = 'ATLASKIT_NESTED_ROOT';
 exports.ROOT_ID = ROOT_ID;
 
+/**
+ * __Nestable navigation content__
+ *
+ * The container for navigation items with nested views
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#nested-navigation)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 var NestableNavigationContent = function NestableNavigationContent(props) {
   var containerRef = (0, _react.useRef)(null);
   var children = props.children,

package/dist/cjs/components/NestableNavigationContent/nesting-motion.js

@@ -17,6 +17,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+/**
+ * @internal
+ */
 var NestingMotion = function NestingMotion(props) {
   var children = props.children,
       enterFrom = props.enterFrom,

package/dist/cjs/components/NestingItem/hack-for-ert.js

@@ -5,4 +5,5 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = _default;
 
+// eslint-disable-next-line @repo/internal/react/use-noop
 function _default(_) {}

package/dist/cjs/components/Section/heading-item.js

@@ -17,6 +17,12 @@ var _styles = require("../../common/styles");
 
 var _context = require("../NestableNavigationContent/context");
 
+/**
+ * __Heading item__
+ *
+ * Available for advanced use cases, for most situations providing a title to Section should be enough.
+ *
+ */
 var HeadingItem = function HeadingItem(props) {
   var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
       shouldRender = _useShouldNestedEleme.shouldRender;
@@ -25,7 +31,7 @@ var HeadingItem = function HeadingItem(props) {
     return null;
   }
 
-  var cssFn = (0, _styles.overrideStyleFunction)(_styles.sectionHeaderStyle, props.cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+  var cssFn = (0, _styles.overrideStyleFunction)(_styles.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
 
   return /*#__PURE__*/_react.default.createElement(_menu.HeadingItem, (0, _extends2.default)({}, props, {
     cssFn: cssFn

package/dist/cjs/components/Section/section.js

@@ -24,6 +24,16 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 // Type needed on props to extract types with extract react types.
+
+/**
+ * __Section__
+ *
+ * Used to separate items into sections. Using the title prop makes a section
+ * implicitly group the items for screen readers with no additional work required.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#section)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 var Section = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
       shouldRender = _useShouldNestedEleme.shouldRender;
@@ -33,7 +43,7 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }
 
   return /*#__PURE__*/_react.default.createElement(_menu.Section, (0, _extends2.default)({}, props, {
-    ref: ref // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+    ref: ref // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
     ,
     overrides: {
       HeadingItem: {

package/dist/cjs/components/Section/skeleton-heading-item.js

@@ -17,6 +17,13 @@ var _styles = require("../../common/styles");
 
 var _context = require("../NestableNavigationContent/context");
 
+/**
+ * __Skeleton heading item__
+ *
+ * A skeleton heading item for use in managing loading states.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#loading)
+ */
 var SkeletonHeadingItem = function SkeletonHeadingItem(props) {
   var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
       shouldRender = _useShouldNestedEleme.shouldRender;
@@ -25,14 +32,15 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(props) {
     return null;
   }
 
-  return /*#__PURE__*/_react.default.createElement(_menu.SkeletonHeadingItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+  return /*#__PURE__*/_react.default.createElement(_menu.SkeletonHeadingItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
   , (0, _extends2.default)({
     cssFn: function cssFn() {
       return {
         paddingLeft: _styles.ITEM_SIDE_PADDING,
         paddingRight: _styles.ITEM_SIDE_PADDING
       };
-    }
+    } // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
   }, props));
 };
 

package/dist/cjs/components/SideNavigation/index.js

@@ -14,6 +14,16 @@ var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 
 /** @jsx jsx */
+
+/**
+ * __Side navigation__
+ *
+ * A highly composable side navigation component that supports nested views.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ * - [Usage](https://atlassian.design/components/side-navigation/usage)
+ */
 var SideNavigation = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
       testId = props.testId,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/side-navigation",
-	"version": "1.2.10",
+	"version": "1.2.13",
 	"sideEffects": false
 }

package/dist/es2019/components/Footer/index.js

@@ -5,9 +5,16 @@ import { overrideStyleFunction } from '../../common/styles';
 import { CustomItem } from '../Item';
 
 const Container = props => {
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   return /*#__PURE__*/React.createElement("div", props);
 };
 
+/**
+ * __Header__
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 const Footer = props => {
   const cssFn = overrideStyleFunction(() => ({
     userSelect: 'auto',
@@ -40,8 +47,10 @@ const Footer = props => {
       color: `var(--ds-text-subtle, ${N500})`
     }
   }), props.cssFn);
-  return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {
-    component: props.component || Container,
+  return /*#__PURE__*/React.createElement(CustomItem // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , _extends({}, props, {
+    component: props.component || Container // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+    ,
     cssFn: cssFn
   }));
 };

package/dist/es2019/components/Header/index.js

@@ -6,9 +6,16 @@ import { overrideStyleFunction } from '../../common/styles';
 import { CustomItem } from '../Item';
 
 const Container = props => {
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   return /*#__PURE__*/React.createElement("div", props);
 };
 
+/**
+ * __Header__
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 const Header = /*#__PURE__*/forwardRef((props, ref) => {
   const cssFn = overrideStyleFunction(() => ({
     userSelect: 'auto',
@@ -30,8 +37,10 @@ const Header = /*#__PURE__*/forwardRef((props, ref) => {
   }), props.cssFn);
   return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {
     ref: ref,
-    component: props.component || Container,
-    cssFn: cssFn,
+    component: props.component || Container // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+    ,
+    cssFn: cssFn // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+    ,
     overrides: {
       Title: {
         render: (_, {

package/dist/es2019/components/Item/button-item.js

@@ -3,6 +3,16 @@ import React, { forwardRef } from 'react';
 import { ButtonItem as Button } from '@atlaskit/menu';
 import { baseSideNavItemStyle, overrideStyleFunction } from '../../common/styles';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
+
+/**
+ * __Button item__
+ *
+ * A button item renders an item wrapped in a button tag, used primarily when an
+ * action does something other than changing routes.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#button-item)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 const ButtonItem = /*#__PURE__*/forwardRef( // Type needed on props to extract types with extract react types.
 ({
   cssFn,
@@ -16,7 +26,7 @@ const ButtonItem = /*#__PURE__*/forwardRef( // Type needed on props to extract t
     return null;
   }
 
-  const cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+  const cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
 
   return /*#__PURE__*/React.createElement(Button, _extends({
     ref: ref,

package/dist/es2019/components/Item/custom-item.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
+
+/* eslint-disable @repo/internal/react/no-unsafe-overrides */
 import React, { forwardRef } from 'react';
 import { CustomItem as Custom } from '@atlaskit/menu';
 import { baseSideNavItemStyle, overrideStyleFunction } from '../../common/styles';

package/dist/es2019/components/Item/go-back-item.js

@@ -3,6 +3,16 @@ import React, { forwardRef, useCallback, useState } from 'react';
 import LeftArrow from '@atlaskit/icon/glyph/arrow-left-circle';
 import { N10 } from '@atlaskit/theme/colors';
 import ButtonItem from './button-item';
+
+/**
+ * __Go back item__
+ *
+ * A go back item is used to provide a customized "go back" button in nested
+ * navigations.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#go-back-item)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 const GoBackItem = /*#__PURE__*/forwardRef(({
   cssFn,
   iconBefore = /*#__PURE__*/React.createElement(LeftArrow, {
@@ -23,7 +33,8 @@ const GoBackItem = /*#__PURE__*/forwardRef(({
     onClick && onClick(e);
   }, [onClick, isInteracted]);
   return /*#__PURE__*/React.createElement(ButtonItem, _extends({
-    isSelected: isSelected || isInteracted,
+    isSelected: isSelected || isInteracted // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+    ,
     cssFn: cssFn,
     iconBefore: iconBefore,
     onClick: onClickHandler,

package/dist/es2019/components/Item/link-item.js

@@ -3,6 +3,18 @@ import React, { forwardRef } from 'react';
 import { LinkItem as Link } from '@atlaskit/menu';
 import { baseSideNavItemStyle, overrideStyleFunction } from '../../common/styles';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
+
+/**
+ * __Link item__
+ *
+ * Renders an item wrapped in an anchor tag, useful when you have an item that
+ * should change routes using native browser navigation. For SPA transitions use
+ * a [custom item](https://atlassian.design/components/side-navigation/examples#custom-item)
+ * with the respective router logic.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#link-item)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 const LinkItem = /*#__PURE__*/forwardRef( // Type needed on props to extract types with extract react types.
 ({
   cssFn,
@@ -16,7 +28,7 @@ const LinkItem = /*#__PURE__*/forwardRef( // Type needed on props to extract typ
     return null;
   }
 
-  const cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+  const cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
 
   return /*#__PURE__*/React.createElement(Link, _extends({
     ref: ref,