@atlaskit/side-navigation 11.1.14 → 11.1.15

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/side-navigation
 
+## 11.1.15
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.1.14
 
 ### Patch Changes

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

@@ -14,7 +14,7 @@ var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _menu = require("@atlaskit/menu");
-var _context = require("../NestableNavigationContent/context");
+var _useShouldNestedElementRender = require("../NestableNavigationContent/use-should-nested-element-render");
 var _excluded = ["className"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
@@ -34,7 +34,7 @@ var styles = {
 var ButtonItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var className = _ref.className,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
+  var _useShouldNestedEleme = (0, _useShouldNestedElementRender.useShouldNestedElementRender)(),
     shouldRender = _useShouldNestedEleme.shouldRender;
   if (!shouldRender) {
     return null;

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

@@ -14,7 +14,7 @@ var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _menu = require("@atlaskit/menu");
-var _context = require("../NestableNavigationContent/context");
+var _useShouldNestedElementRender = require("../NestableNavigationContent/use-should-nested-element-render");
 var _excluded = ["className"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
@@ -31,7 +31,7 @@ var styles = {
 var CustomItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var className = _ref.className,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
+  var _useShouldNestedEleme = (0, _useShouldNestedElementRender.useShouldNestedElementRender)(),
     shouldRender = _useShouldNestedEleme.shouldRender;
   if (!shouldRender) {
     return null;

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

@@ -14,7 +14,7 @@ var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _menu = require("@atlaskit/menu");
-var _context = require("../NestableNavigationContent/context");
+var _useShouldNestedElementRender = require("../NestableNavigationContent/use-should-nested-element-render");
 var _excluded = ["href", "children", "className"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
@@ -38,7 +38,7 @@ var LinkItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     children = _ref.children,
     className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
+  var _useShouldNestedEleme = (0, _useShouldNestedElementRender.useShouldNestedElementRender)(),
     shouldRender = _useShouldNestedEleme.shouldRender;
   if (!shouldRender) {
     return null;

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

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _menu = require("@atlaskit/menu");
-var _context = require("../NestableNavigationContent/context");
+var _useShouldNestedElementRender = require("../NestableNavigationContent/use-should-nested-element-render");
 /**
  * __Skeleton item__
  *
@@ -18,7 +18,7 @@ var _context = require("../NestableNavigationContent/context");
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
 var SkeletonItem = function SkeletonItem(props) {
-  var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
+  var _useShouldNestedEleme = (0, _useShouldNestedElementRender.useShouldNestedElementRender)(),
     shouldRender = _useShouldNestedEleme.shouldRender;
   if (!shouldRender) {
     return null;

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

@@ -11,7 +11,7 @@ var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _motion = require("@atlaskit/motion");
-var _context = require("../NestableNavigationContent/context");
+var _useShouldNestedElementRender = require("../NestableNavigationContent/use-should-nested-element-render");
 var baseMotionStyles = null;
 var enteringStyles = null;
 
@@ -25,7 +25,7 @@ var LoadingItems = function LoadingItems(_ref) {
     isLoading = _ref.isLoading,
     fallback = _ref.fallback,
     testId = _ref.testId;
-  var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
+  var _useShouldNestedEleme = (0, _useShouldNestedElementRender.useShouldNestedElementRender)(),
     shouldRender = _useShouldNestedEleme.shouldRender;
   if (!shouldRender) {
     return children;

package/dist/cjs/components/NavigationContent/container-css.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.containerCSS = void 0;
+var containerPadding = 8;
+var scrollIndicatorHeight = 2;
+var itemHeadingContentHeight = 16; // Originally headingSizes.h100.lineHeight from '@atlaskit/theme/typography'
+var skeletonHeadingHeight = containerPadding;
+var skeletonHeadingMarginOffset = 3;
+var skeletonHeadingTopMargin = containerPadding * 2.5 + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset;
+var skeletonHeadingBottomMargin = containerPadding * 0.75 + skeletonHeadingMarginOffset;
+var containerCSS = exports.containerCSS = function containerCSS(opts) {
+  return {
+    // When the scroll indicator is always shown we need to add some padding
+    // so the spacing between matches what it would be if the indicator was a "block" element.
+    // We use margin here so any child absolutely positioned elements are positioned correctly.
+    marginTop: opts.showTopScrollIndicator ? scrollIndicatorHeight : 0,
+    marginLeft: "var(--ds-space-100, 8px)",
+    marginRight: "var(--ds-space-100, 8px)",
+    // Enables child absolutely positioned elements to be positioned relative to this element.
+    position: 'relative',
+    '& [data-ds--menu--heading-item]': {
+      marginBottom: "var(--ds-space-075, 6px)",
+      marginTop: "var(--ds-space-200, 16px)"
+    },
+    '& [data-ds--menu--skeleton-heading-item]': {
+      marginTop: skeletonHeadingTopMargin,
+      marginBottom: skeletonHeadingBottomMargin
+    }
+  };
+};

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

@@ -11,7 +11,7 @@ require("./index.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _useScrollbarWidth = _interopRequireDefault(require("@atlaskit/ds-lib/use-scrollbar-width"));
-var _context = require("../NestableNavigationContent/context");
+var _useShouldNestedElementRender = require("../NestableNavigationContent/use-should-nested-element-render");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var outerContainerCSS = null;
 var innerContainerCSS = {
@@ -35,7 +35,7 @@ var NavigationContent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref
   var showTopScrollIndicator = props.showTopScrollIndicator,
     children = props.children,
     testId = props.testId;
-  var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
+  var _useShouldNestedEleme = (0, _useShouldNestedElementRender.useShouldNestedElementRender)(),
     shouldRender = _useShouldNestedEleme.shouldRender;
   var scrollbar = (0, _useScrollbarWidth.default)();
   if (!shouldRender) {

package/dist/cjs/components/NavigationContent/inner-container-css.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.innerContainerCSS = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _constants = require("../../common/constants");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var scrollIndicatorMaskZIndex = 2;
+var scrollIndicatorHeight = 2;
+var scrollIndicatorBorderRadius = '1px';
+var innerContainerCSS = exports.innerContainerCSS = function innerContainerCSS(opts) {
+  return _objectSpread(_objectSpread({
+    display: 'flex',
+    overflow: 'auto',
+    width: '100%',
+    position: 'relative',
+    boxSizing: 'border-box',
+    flexDirection: 'column'
+  }, !opts.showTopScrollIndicator && {
+    '&::before': {
+      borderRadius: "var(--ds-radius-xsmall, ".concat(scrollIndicatorBorderRadius, ")"),
+      content: "''",
+      left: 0,
+      right: 0,
+      height: scrollIndicatorHeight,
+      backgroundColor: "var(".concat(_constants.VAR_SCROLL_INDICATOR_COLOR, ", ", "var(--ds-surface, #FFFFFF)", ")"),
+      position: 'absolute',
+      display: 'block',
+      zIndex: scrollIndicatorMaskZIndex
+    }
+  }), {}, {
+    // This after pseudo element abuses being a flex child and pushes itself down to the
+    // very bottom of the container - doing so ends up "masking" the actual scroll indicator.
+    '&::after': {
+      borderRadius: "var(--ds-radius-xsmall, ".concat(scrollIndicatorBorderRadius, ")"),
+      content: "''",
+      display: 'block',
+      flexShrink: 0,
+      height: scrollIndicatorHeight,
+      // This is used to "push" the element to the bottom of the flex container.
+      marginTop: 'auto',
+      position: 'relative',
+      zIndex: scrollIndicatorMaskZIndex,
+      backgroundColor: "var(".concat(_constants.VAR_SCROLL_INDICATOR_COLOR, ", ", "var(--ds-surface, #FFFFFF)", ")")
+    }
+  });
+};

package/dist/cjs/components/NavigationContent/outer-container-css.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.outerContainerCSS = void 0;
+var _constants = require("../../common/constants");
+var scrollIndicatorZIndex = 1;
+var scrollIndicatorHeight = 2;
+var scrollIndicatorBorderRadius = '1px';
+var containerPadding = 8;
+var outerContainerCSS = exports.outerContainerCSS = function outerContainerCSS(opts) {
+  return {
+    // Flex is needed to ensure the overflow indicators are positioned correctly.
+    display: 'flex',
+    height: '100%',
+    overflow: 'hidden',
+    position: 'relative',
+    '&::before': {
+      content: "''",
+      display: 'block',
+      left: "var(--ds-space-100, 8px)",
+      right: containerPadding + opts.scrollbarWidth,
+      height: scrollIndicatorHeight,
+      borderRadius: "var(--ds-radius-xsmall, ".concat(scrollIndicatorBorderRadius, ")"),
+      backgroundColor: "var(".concat(_constants.VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, #0B120E24)", ")"),
+      position: 'absolute',
+      zIndex: scrollIndicatorZIndex
+    },
+    '&::after': {
+      content: "''",
+      position: 'absolute',
+      display: 'block',
+      borderRadius: "var(--ds-radius-xsmall, ".concat(scrollIndicatorBorderRadius, ")"),
+      flexShrink: 0,
+      height: scrollIndicatorHeight,
+      left: "var(--ds-space-100, 8px)",
+      right: containerPadding + opts.scrollbarWidth,
+      bottom: 0,
+      zIndex: scrollIndicatorZIndex,
+      backgroundColor: "var(".concat(_constants.VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, #0B120E24)", ")")
+    }
+  };
+};

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

@@ -17,7 +17,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useChildIds2 = _interopRequireDefault(require("../../common/use-child-ids"));
 var _goBackItem = _interopRequireDefault(require("../Item/go-back-item"));
 var _NestingItem = _interopRequireDefault(require("../NestingItem"));
-var _context = require("./context");
+var _nestedContext = require("./nested-context");
 var _nestingMotion = require("./nesting-motion");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 // Named so ERT doesn't pick up the override name as a type.
@@ -176,7 +176,7 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
   }, function (motion) {
     return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, motion, {
       className: (0, _runtime.ax)(["_1e0c1txw _1bsb1osq _4t3i1osq _kqswstnw _2lx21bp4", motion.className])
-    }), /*#__PURE__*/_react.default.createElement(_context.NestedContext.Provider, {
+    }), /*#__PURE__*/_react.default.createElement(_nestedContext.NestedContext.Provider, {
       // This provider is inside the NestingMotion to ensure it keeps a stale
       // reference to the previous value.
       value: context

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

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NestedContext = void 0;
+var _react = require("react");
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+var NestedContext = exports.NestedContext = /*#__PURE__*/(0, _react.createContext)(undefined);

package/dist/cjs/components/NestableNavigationContent/use-nested-context.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNestedContext = void 0;
+var _react = require("react");
+var _nestedContext = require("./nested-context");
+var useNestedContext = exports.useNestedContext = function useNestedContext() {
+  var context = (0, _react.useContext)(_nestedContext.NestedContext);
+  if (!context) {
+    var error = '';
+    if (process.env.NODE_ENV === 'development') {
+      error = "\nTo use a <NestingItem /> it needs to be a descendant of <NestableNavigationContent>.\nYou probably need to replace your <NavigationContent> with <NestableNavigationContent>.\n\nimport { NestableNavigationContent } from '@atlaskit/side-navigation';\n      ";
+    }
+    throw new Error(error);
+  }
+  return context;
+};

package/dist/cjs/components/NestableNavigationContent/use-should-nested-element-render.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useShouldNestedElementRender = void 0;
+var _react = require("react");
+var _nestedContext = require("./nested-context");
+var useShouldNestedElementRender = exports.useShouldNestedElementRender = function useShouldNestedElementRender() {
+  var context = (0, _react.useContext)(_nestedContext.NestedContext);
+  if (!context) {
+    return {
+      shouldRender: true
+    };
+  }
+  return {
+    shouldRender: context.currentStackId === context.parentId
+  };
+};

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

@@ -23,7 +23,8 @@ var _buttonItem = _interopRequireDefault(require("../Item/button-item"));
 var _customItem = _interopRequireDefault(require("../Item/custom-item"));
 var _NavigationContent = _interopRequireDefault(require("../NavigationContent"));
 var _NestableNavigationContent = require("../NestableNavigationContent");
-var _context = require("../NestableNavigationContent/context");
+var _nestedContext = require("../NestableNavigationContent/nested-context");
+var _useNestedContext2 = require("../NestableNavigationContent/use-nested-context");
 var _excluded = ["children", "iconAfter", "title", "onClick", "className", "isDisabled", "isSelected", "id", "component", "testId"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -53,7 +54,7 @@ var NestingItem = function NestingItem(props) {
     component = props.component,
     testId = props.testId,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var _useNestedContext = (0, _context.useNestedContext)(),
+  var _useNestedContext = (0, _useNestedContext2.useNestedContext)(),
     currentStackId = _useNestedContext.currentStackId,
     onNest = _useNestedContext.onNest,
     onUnNest = _useNestedContext.onUnNest,
@@ -140,7 +141,7 @@ var NestingItem = function NestingItem(props) {
     onClick && onClick(e);
   }, [isInteracted, onClick, onNest, id]);
   if (currentStackId === id) {
-    return /*#__PURE__*/_react.default.createElement(_context.NestedContext.Provider, {
+    return /*#__PURE__*/_react.default.createElement(_nestedContext.NestedContext.Provider, {
       value: context
     }, stack.length >= 1 && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
       paddingBlock: "space.075",

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

@@ -12,12 +12,11 @@ var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _menu = require("@atlaskit/menu");
-var _context = require("../NestableNavigationContent/context");
+var _useShouldNestedElementRender = require("../NestableNavigationContent/use-should-nested-element-render");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
   headingItem: "_18zru2gc"
 };
-
 /**
  * __Heading item__
  *
@@ -25,7 +24,7 @@ var styles = {
  *
  */
 var HeadingItem = function HeadingItem(props) {
-  var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
+  var _useShouldNestedEleme = (0, _useShouldNestedElementRender.useShouldNestedElementRender)(),
     shouldRender = _useShouldNestedEleme.shouldRender;
   if (!shouldRender) {
     return null;

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

@@ -9,7 +9,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _menu = require("@atlaskit/menu");
-var _context = require("../NestableNavigationContent/context");
+var _useShouldNestedElementRender = require("../NestableNavigationContent/use-should-nested-element-render");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
  * __Section__
@@ -21,7 +21,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
 var Section = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
+  var _useShouldNestedEleme = (0, _useShouldNestedElementRender.useShouldNestedElementRender)(),
     shouldRender = _useShouldNestedEleme.shouldRender;
   if (!shouldRender) {
     return props.children;

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

@@ -11,11 +11,10 @@ var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _menu = require("@atlaskit/menu");
-var _context = require("../NestableNavigationContent/context");
+var _useShouldNestedElementRender = require("../NestableNavigationContent/use-should-nested-element-render");
 var styles = {
   root: "_18zru2gc"
 };
-
 /**
  * __Skeleton heading item__
  *
@@ -24,7 +23,7 @@ var styles = {
  * - [Examples](https://atlassian.design/components/side-navigation/examples#loading)
  */
 var SkeletonHeadingItem = function SkeletonHeadingItem(props) {
-  var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
+  var _useShouldNestedEleme = (0, _useShouldNestedElementRender.useShouldNestedElementRender)(),
     shouldRender = _useShouldNestedEleme.shouldRender;
   if (!shouldRender) {
     return null;

package/dist/cjs/index.js

@@ -37,7 +37,7 @@ Object.defineProperty(exports, "Header", {
 Object.defineProperty(exports, "HeadingItem", {
   enumerable: true,
   get: function get() {
-    return _Section.HeadingItem;
+    return _headingItem.default;
   }
 });
 Object.defineProperty(exports, "LinkItem", {
@@ -85,7 +85,7 @@ Object.defineProperty(exports, "NestingItem", {
 Object.defineProperty(exports, "Section", {
   enumerable: true,
   get: function get() {
-    return _Section.Section;
+    return _section.default;
   }
 });
 Object.defineProperty(exports, "SideNavigation", {
@@ -97,7 +97,7 @@ Object.defineProperty(exports, "SideNavigation", {
 Object.defineProperty(exports, "SkeletonHeadingItem", {
   enumerable: true,
   get: function get() {
-    return _Section.SkeletonHeadingItem;
+    return _skeletonHeadingItem.default;
   }
 });
 Object.defineProperty(exports, "SkeletonItem", {
@@ -121,11 +121,13 @@ Object.defineProperty(exports, "VAR_SEPARATOR_COLOR", {
 Object.defineProperty(exports, "useShouldNestedElementRender", {
   enumerable: true,
   get: function get() {
-    return _context.useShouldNestedElementRender;
+    return _useShouldNestedElementRender.useShouldNestedElementRender;
   }
 });
 var _SideNavigation = _interopRequireDefault(require("./components/SideNavigation"));
-var _Section = require("./components/Section");
+var _section = _interopRequireDefault(require("./components/Section/section"));
+var _headingItem = _interopRequireDefault(require("./components/Section/heading-item"));
+var _skeletonHeadingItem = _interopRequireDefault(require("./components/Section/skeleton-heading-item"));
 var _NestingItem = _interopRequireDefault(require("./components/NestingItem"));
 var _NavigationContent = _interopRequireDefault(require("./components/NavigationContent"));
 var _buttonItem = _interopRequireDefault(require("./components/Item/button-item"));
@@ -139,5 +141,5 @@ var _NavigationHeader = _interopRequireDefault(require("./components/NavigationH
 var _NavigationFooter = _interopRequireDefault(require("./components/NavigationFooter"));
 var _LoadingItems = _interopRequireDefault(require("./components/LoadingItems"));
 var _NestableNavigationContent = _interopRequireDefault(require("./components/NestableNavigationContent"));
-var _context = require("./components/NestableNavigationContent/context");
+var _useShouldNestedElementRender = require("./components/NestableNavigationContent/use-should-nested-element-render");
 var _constants = require("./common/constants");

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

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
 import { ButtonItem as Button } from '@atlaskit/menu';
-import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
+import { useShouldNestedElementRender } from '../NestableNavigationContent/use-should-nested-element-render';
 const styles = {
   root: "_2rkofajl _1rjcu2gc _18zru2gc _bfhksm61 _1a391k8s _racp1k8s _30l3azsu _irr31dpa _ppn2azsu _183jfcek",
   selectedStyles: "_bfhk15s3 _syaz6x5g _10536x5g _irr3ufnl _30l36x5g _1di6nozp _9h8h6x5g"

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

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
 import { CustomItem as Custom } from '@atlaskit/menu';
-import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
+import { useShouldNestedElementRender } from '../NestableNavigationContent/use-should-nested-element-render';
 const styles = {
   root: "_2rkofajl _1rjcu2gc _18zru2gc _bfhksm61 _1a391k8s _racp1k8s _30l3azsu _irr31dpa _ppn2azsu _183jfcek",
   selectedStyles: "_bfhk15s3 _syaz6x5g _10536x5g _irr3ufnl _30l36x5g _1di6nozp _9h8h6x5g"

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

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef, useCallback, useState } from 'react';
 import ArrowLeftIcon from '@atlaskit/icon/core/arrow-left';
 import ButtonItem from './button-item';
+
 /**
  * __Go back item__
  *

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

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
 import { LinkItem as Link } from '@atlaskit/menu';
-import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
+import { useShouldNestedElementRender } from '../NestableNavigationContent/use-should-nested-element-render';
 const styles = {
   root: "_2rkofajl _1rjcu2gc _18zru2gc _bfhksm61 _1a391k8s _racp1k8s _30l3azsu _irr31dpa _ppn2azsu _183jfcek",
   selectedStyles: "_bfhk15s3 _syaz6x5g _10536x5g _irr3ufnl _30l36x5g _1di6nozp _9h8h6x5g"

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

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { SkeletonItem as SkelItem } from '@atlaskit/menu';
-import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
+import { useShouldNestedElementRender } from '../NestableNavigationContent/use-should-nested-element-render';
+
 /**
  * __Skeleton item__
  *

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

@@ -4,7 +4,7 @@ import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
-import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
+import { useShouldNestedElementRender } from '../NestableNavigationContent/use-should-nested-element-render';
 const baseMotionStyles = null;
 const enteringStyles = null;
 

package/dist/es2019/components/NavigationContent/container-css.js

@@ -0,0 +1,25 @@
+const containerPadding = 8;
+const scrollIndicatorHeight = 2;
+const itemHeadingContentHeight = 16; // Originally headingSizes.h100.lineHeight from '@atlaskit/theme/typography'
+const skeletonHeadingHeight = containerPadding;
+const skeletonHeadingMarginOffset = 3;
+const skeletonHeadingTopMargin = containerPadding * 2.5 + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset;
+const skeletonHeadingBottomMargin = containerPadding * 0.75 + skeletonHeadingMarginOffset;
+export const containerCSS = opts => ({
+  // When the scroll indicator is always shown we need to add some padding
+  // so the spacing between matches what it would be if the indicator was a "block" element.
+  // We use margin here so any child absolutely positioned elements are positioned correctly.
+  marginTop: opts.showTopScrollIndicator ? scrollIndicatorHeight : 0,
+  marginLeft: "var(--ds-space-100, 8px)",
+  marginRight: "var(--ds-space-100, 8px)",
+  // Enables child absolutely positioned elements to be positioned relative to this element.
+  position: 'relative',
+  '& [data-ds--menu--heading-item]': {
+    marginBottom: "var(--ds-space-075, 6px)",
+    marginTop: "var(--ds-space-200, 16px)"
+  },
+  '& [data-ds--menu--skeleton-heading-item]': {
+    marginTop: skeletonHeadingTopMargin,
+    marginBottom: skeletonHeadingBottomMargin
+  }
+});

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

@@ -3,7 +3,7 @@ import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
 import useScrollbarWidth from '@atlaskit/ds-lib/use-scrollbar-width';
-import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
+import { useShouldNestedElementRender } from '../NestableNavigationContent/use-should-nested-element-render';
 const outerContainerCSS = null;
 const innerContainerCSS = {
   basic: "_1reo1wug _18m91wug _1e0c1txw _vchhusvi _1bsb1osq _kqswh2mm _2lx21bp4 _14mjlb4i _1ywu1ule _1qdgyh40 _18poh2mm _1bqqcs5v _tua5idpf _1hfk1q2g _aetrb3bt _3mxo1wug",

package/dist/es2019/components/NavigationContent/inner-container-css.js

@@ -0,0 +1,41 @@
+import { VAR_SCROLL_INDICATOR_COLOR } from '../../common/constants';
+const scrollIndicatorMaskZIndex = 2;
+const scrollIndicatorHeight = 2;
+const scrollIndicatorBorderRadius = '1px';
+export const innerContainerCSS = opts => ({
+  display: 'flex',
+  overflow: 'auto',
+  width: '100%',
+  position: 'relative',
+  boxSizing: 'border-box',
+  flexDirection: 'column',
+  // This before pseudo element is works by being positioned at the top of this scrolling
+  // container - so when you scroll down it stops "masking" the actual scroll indicator.
+  ...(!opts.showTopScrollIndicator && {
+    '&::before': {
+      borderRadius: `var(--ds-radius-xsmall, ${scrollIndicatorBorderRadius})`,
+      content: "''",
+      left: 0,
+      right: 0,
+      height: scrollIndicatorHeight,
+      backgroundColor: `var(${VAR_SCROLL_INDICATOR_COLOR}, ${"var(--ds-surface, #FFFFFF)"})`,
+      position: 'absolute',
+      display: 'block',
+      zIndex: scrollIndicatorMaskZIndex
+    }
+  }),
+  // This after pseudo element abuses being a flex child and pushes itself down to the
+  // very bottom of the container - doing so ends up "masking" the actual scroll indicator.
+  '&::after': {
+    borderRadius: `var(--ds-radius-xsmall, ${scrollIndicatorBorderRadius})`,
+    content: "''",
+    display: 'block',
+    flexShrink: 0,
+    height: scrollIndicatorHeight,
+    // This is used to "push" the element to the bottom of the flex container.
+    marginTop: 'auto',
+    position: 'relative',
+    zIndex: scrollIndicatorMaskZIndex,
+    backgroundColor: `var(${VAR_SCROLL_INDICATOR_COLOR}, ${"var(--ds-surface, #FFFFFF)"})`
+  }
+});