@atlaskit/side-navigation 11.1.11 → 11.1.13

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/side-navigation
 
+## 11.1.13
+
+### Patch Changes
+
+- [`c966e427a25c6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c966e427a25c6) -
+  Removes internal barrel files and instead imports modules directly.
+
+## 11.1.12
+
+### Patch Changes
+
+- [`e2085d35701ca`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e2085d35701ca) -
+  Internal changes to remove unnecessary token fallbacks and imports from `@atlaskit/theme`
+- Updated dependencies
+
 ## 11.1.11
 
 ### Patch Changes

package/dist/cjs/common/use-child-ids-effect.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var useChildIdsEffect = function useChildIdsEffect(childIds, id) {
+  (0, _react.useEffect)(function () {
+    if (!childIds || !childIds.current) {
+      return;
+    }
+    if (!childIds.current.has(id)) {
+      childIds.current.add(id);
+    }
+    return function () {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      childIds.current.delete(id);
+    };
+    // childIds shouldn't change as it's a ref
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
+};
+var _default = exports.default = useChildIdsEffect;

package/dist/cjs/common/use-child-ids.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _NestableNavigationContent = require("../components/NestableNavigationContent");
+var useChildIds = function useChildIds(currentStackId, committedStack, onUnknownNest) {
+  var childIdsRef = (0, _react.useRef)(new Set());
+  (0, _react.useEffect)(function () {
+    // we are holding navigation item IDs in childIdsRef
+    // check if the current displayed nav item (currentStackId) is in childIdsRef. if it's not, this means it's undefined
+    if (currentStackId === _NestableNavigationContent.ROOT_ID || !childIdsRef.current.size || childIdsRef.current.has(currentStackId) || !onUnknownNest) {
+      return;
+    }
+    onUnknownNest(committedStack || [currentStackId]);
+  }, [currentStackId, committedStack, onUnknownNest]);
+  return {
+    childIdsRef: childIdsRef
+  };
+};
+var _default = exports.default = useChildIds;

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

@@ -13,8 +13,8 @@ var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _compiled = require("@atlaskit/primitives/compiled");
-var _Header = require("../Header");
-var _Item = require("../Item");
+var _headerContainer = _interopRequireDefault(require("../Header/header-container"));
+var _customItem = _interopRequireDefault(require("../Item/custom-item"));
 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); }
 /* eslint-disable @repo/internal/react/consistent-props-definitions */
 var styles = {
@@ -43,8 +43,8 @@ var OldFooter = function OldFooter(props) {
       testId: testId
     };
   }(props);
-  return /*#__PURE__*/React.createElement(_Item.CustomItem, (0, _extends2.default)({}, safeProps, {
-    component: props.component || _Header.Container,
+  return /*#__PURE__*/React.createElement(_customItem.default, (0, _extends2.default)({}, safeProps, {
+    component: props.component || _headerContainer.default,
     className: (0, _runtime.ax)([styles.oldFooter])
   }));
 };

package/dist/cjs/components/Header/header-container.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _excluded = ["children", "data-testid"];
+/**
+ * __Container__
+ *
+ * A container for Header and Footer that safely handles props to the child component
+ */
+var HeaderContainer = function HeaderContainer(_ref) {
+  var children = _ref.children,
+    testId = _ref['data-testid'],
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // https://stackoverflow.com/a/39333479
+  var safeProps = function (_ref2) {
+    var className = _ref2.className,
+      onClick = _ref2.onClick,
+      onMouseDown = _ref2.onMouseDown,
+      onDragStart = _ref2.onDragStart,
+      draggable = _ref2.draggable,
+      ref = _ref2.ref,
+      tabIndex = _ref2.tabIndex,
+      disabled = _ref2.disabled;
+    return {
+      className: className,
+      onClick: onClick,
+      onMouseDown: onMouseDown,
+      onDragStart: onDragStart,
+      draggable: draggable,
+      ref: ref,
+      tabIndex: tabIndex,
+      disabled: disabled
+    };
+  }(props);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    _react.default.createElement("div", (0, _extends2.default)({
+      "data-testid": testId,
+      style: {
+        position: 'relative'
+      }
+    }, safeProps), children)
+  );
+};
+var _default = exports.default = HeaderContainer;

package/dist/cjs/components/Header/index.compiled.css

@@ -1,7 +1,7 @@
 
 ._vrjt1qyo [data-item-title]{font:var(--ds-font-heading-xsmall,normal 653 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._1cmdi7uo [data-item-title]{color:var(--ds-text,#292a2e)}
 ._uizt1wug{-webkit-user-select:auto;-ms-user-select:auto;user-select:auto}
-div._11kjqtfy:hover{background-color:var(--ds-background-neutral-subtle,transparent)}
+div._11kjsm61:hover{background-color:var(--ds-background-neutral-subtle,#00000000)}
 div._jl2n73ad:hover{cursor:default}
-div._1et6qtfy:active{background-color:var(--ds-background-neutral-subtle,transparent)}
+div._1et6sm61:active{background-color:var(--ds-background-neutral-subtle,#00000000)}
 div._1v6ji7uo:active{color:var(--ds-text,#292a2e)}

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

@@ -6,59 +6,16 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Container = void 0;
+exports.default = void 0;
 require("./index.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _Item = require("../Item");
-var _excluded = ["children", "data-testid"];
+var _customItem = _interopRequireDefault(require("../Item/custom-item"));
+var _headerContainer = _interopRequireDefault(require("./header-container"));
 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 = {
-  header: "_uizt1wug _vrjt1qyo _1cmdi7uo _11kjqtfy _jl2n73ad _1et6qtfy _1v6ji7uo"
-};
-
-/**
- * __Container__
- *
- * A container for Header and Footer that safely handles props to the child component
- */
-var Container = exports.Container = function Container(_ref) {
-  var children = _ref.children,
-    testId = _ref['data-testid'],
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  // https://stackoverflow.com/a/39333479
-  var safeProps = function (_ref2) {
-    var className = _ref2.className,
-      onClick = _ref2.onClick,
-      onMouseDown = _ref2.onMouseDown,
-      onDragStart = _ref2.onDragStart,
-      draggable = _ref2.draggable,
-      ref = _ref2.ref,
-      tabIndex = _ref2.tabIndex,
-      disabled = _ref2.disabled;
-    return {
-      className: className,
-      onClick: onClick,
-      onMouseDown: onMouseDown,
-      onDragStart: onDragStart,
-      draggable: draggable,
-      ref: ref,
-      tabIndex: tabIndex,
-      disabled: disabled
-    };
-  }(props);
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-    _react.default.createElement("div", (0, _extends2.default)({
-      "data-testid": testId,
-      style: {
-        position: 'relative'
-      }
-    }, safeProps), children)
-  );
+  header: "_uizt1wug _vrjt1qyo _1cmdi7uo _11kjsm61 _jl2n73ad _1et6sm61 _1v6ji7uo"
 };
 /**
  * __Header__
@@ -67,9 +24,9 @@ var Container = exports.Container = function Container(_ref) {
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
 var Header = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  return /*#__PURE__*/_react.default.createElement(_Item.CustomItem, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/_react.default.createElement(_customItem.default, (0, _extends2.default)({}, props, {
     ref: ref,
-    component: props.component || Container,
+    component: props.component || _headerContainer.default,
     isTitleHeading: true,
     className: (0, _runtime.ax)([styles.header])
   }));

package/dist/cjs/components/Item/button-item.compiled.css

@@ -4,7 +4,7 @@
 ._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
 ._1a391k8s [data-item-elem-before]{height:1.5rem}
 ._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
-._bfhkqtfy{background-color:var(--ds-background-neutral-subtle,transparent)}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._racp1k8s [data-item-elem-before]{width:1.5rem}
 ._syaz6x5g{color:var(--ds-text-selected,#1868db)}._10536x5g:visited{color:var(--ds-text-selected,#1868db)}
 ._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}

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

@@ -18,7 +18,7 @@ var _context = require("../NestableNavigationContent/context");
 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 = {
-  root: "_2rkofajl _1rjcu2gc _18zru2gc _bfhkqtfy _1a391k8s _racp1k8s _30l3azsu _irr31dpa _ppn2azsu _183jfcek",
+  root: "_2rkofajl _1rjcu2gc _18zru2gc _bfhksm61 _1a391k8s _racp1k8s _30l3azsu _irr31dpa _ppn2azsu _183jfcek",
   selectedStyles: "_bfhk15s3 _syaz6x5g _10536x5g _irr3ufnl _30l36x5g _1di6nozp _9h8h6x5g"
 };
 

package/dist/cjs/components/Item/custom-item.compiled.css

@@ -4,7 +4,7 @@
 ._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
 ._1a391k8s [data-item-elem-before]{height:1.5rem}
 ._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
-._bfhkqtfy{background-color:var(--ds-background-neutral-subtle,transparent)}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._racp1k8s [data-item-elem-before]{width:1.5rem}
 ._syaz6x5g{color:var(--ds-text-selected,#1868db)}._10536x5g:visited{color:var(--ds-text-selected,#1868db)}
 ._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}

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

@@ -18,7 +18,7 @@ var _context = require("../NestableNavigationContent/context");
 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 = {
-  root: "_2rkofajl _1rjcu2gc _18zru2gc _bfhkqtfy _1a391k8s _racp1k8s _30l3azsu _irr31dpa _ppn2azsu _183jfcek",
+  root: "_2rkofajl _1rjcu2gc _18zru2gc _bfhksm61 _1a391k8s _racp1k8s _30l3azsu _irr31dpa _ppn2azsu _183jfcek",
   selectedStyles: "_bfhk15s3 _syaz6x5g _10536x5g _irr3ufnl _30l36x5g _1di6nozp _9h8h6x5g"
 };
 

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

@@ -14,9 +14,9 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _motion = require("@atlaskit/motion");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _Item = require("../Item");
+var _useChildIds2 = _interopRequireDefault(require("../../common/use-child-ids"));
+var _goBackItem = _interopRequireDefault(require("../Item/go-back-item"));
 var _NestingItem = _interopRequireDefault(require("../NestingItem"));
-var _hooks = require("../utils/hooks");
 var _context = require("./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); }
@@ -68,9 +68,9 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
     setFocusGoBackButton = _useState8[1];
   var shouldFocus = isDefaultFocusControl && (0, _platformFeatureFlags.fg)('platform-side-navigation-keyboard-focus');
   var renderGoBackItem = overrides && overrides.GoBackItem && overrides.GoBackItem.render ? overrides.GoBackItem.render : function (props) {
-    return /*#__PURE__*/_react.default.createElement(_Item.GoBackItem, props, "Go back");
+    return /*#__PURE__*/_react.default.createElement(_goBackItem.default, props, "Go back");
   };
-  var _useChildIds = (0, _hooks.useChildIds)(currentStackId, committedStack, onUnknownNest),
+  var _useChildIds = (0, _useChildIds2.default)(currentStackId, committedStack, onUnknownNest),
     childIdsRef = _useChildIds.childIdsRef;
   var onNestHandler = (0, _react.useCallback)(function (layerId) {
     onChange && onChange(committedStack.concat(layerId));

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

@@ -18,10 +18,12 @@ var _react = _interopRequireWildcard(require("react"));
 var _arrowRight = _interopRequireDefault(require("@atlaskit/icon/core/arrow-right"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
-var _index = require("../index");
+var _useChildIdsEffect = _interopRequireDefault(require("../../common/use-child-ids-effect"));
+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 _hooks = require("../utils/hooks");
 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; }
@@ -113,7 +115,7 @@ var NestingItem = function NestingItem(props) {
       focusGoBackButton: focusGoBackButton
     };
   }, [stack, currentStackId, onNest, onUnNest, backButton, id, childIds, forceShowTopScrollIndicator, activeParentId, goBackButtonRef, isDefaultFocusControl, focusGoBackButton]);
-  (0, _hooks.useChildIdsEffect)(childIds, id);
+  (0, _useChildIdsEffect.default)(childIds, id);
   var isNormalClick = function isNormalClick(e) {
     return !(e.button || e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
   };
@@ -143,7 +145,7 @@ var NestingItem = function NestingItem(props) {
     }, stack.length >= 1 && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
       paddingBlock: "space.075",
       paddingInline: "space.100"
-    }, backButton), /*#__PURE__*/_react.default.createElement(_index.NavigationContent, {
+    }, backButton), /*#__PURE__*/_react.default.createElement(_NavigationContent.default, {
       testId: testId,
       showTopScrollIndicator: forceShowTopScrollIndicator || stack.length >= 1
     }, children));
@@ -173,7 +175,7 @@ var NestingItem = function NestingItem(props) {
     children: title
   });
   if (component) {
-    return /*#__PURE__*/_react.default.createElement(_index.CustomItem, (0, _extends2.default)({
+    return /*#__PURE__*/_react.default.createElement(_customItem.default, (0, _extends2.default)({
       ref: isForwardRefCheck(component) ? parentItemRef : null
     }, componentProps, {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -183,7 +185,7 @@ var NestingItem = function NestingItem(props) {
       component: component
     }));
   }
-  return /*#__PURE__*/_react.default.createElement(_index.ButtonItem, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_buttonItem.default, (0, _extends2.default)({
     ref: activeParentRef
   }, componentProps, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop

package/dist/cjs/index.js

@@ -1,108 +1,109 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "ButtonItem", {
   enumerable: true,
   get: function get() {
-    return _components.ButtonItem;
+    return _buttonItem.default;
   }
 });
 Object.defineProperty(exports, "CustomItem", {
   enumerable: true,
   get: function get() {
-    return _components.CustomItem;
+    return _customItem.default;
   }
 });
 Object.defineProperty(exports, "Footer", {
   enumerable: true,
   get: function get() {
-    return _components.Footer;
+    return _Footer.default;
   }
 });
 Object.defineProperty(exports, "GoBackItem", {
   enumerable: true,
   get: function get() {
-    return _components.GoBackItem;
+    return _goBackItem.default;
   }
 });
 Object.defineProperty(exports, "Header", {
   enumerable: true,
   get: function get() {
-    return _components.Header;
+    return _Header.default;
   }
 });
 Object.defineProperty(exports, "HeadingItem", {
   enumerable: true,
   get: function get() {
-    return _components.HeadingItem;
+    return _Section.HeadingItem;
   }
 });
 Object.defineProperty(exports, "LinkItem", {
   enumerable: true,
   get: function get() {
-    return _components.LinkItem;
+    return _linkItem.default;
   }
 });
 Object.defineProperty(exports, "LoadingItems", {
   enumerable: true,
   get: function get() {
-    return _components.LoadingItems;
+    return _LoadingItems.default;
   }
 });
 Object.defineProperty(exports, "NavigationContent", {
   enumerable: true,
   get: function get() {
-    return _components.NavigationContent;
+    return _NavigationContent.default;
   }
 });
 Object.defineProperty(exports, "NavigationFooter", {
   enumerable: true,
   get: function get() {
-    return _components.NavigationFooter;
+    return _NavigationFooter.default;
   }
 });
 Object.defineProperty(exports, "NavigationHeader", {
   enumerable: true,
   get: function get() {
-    return _components.NavigationHeader;
+    return _NavigationHeader.default;
   }
 });
 Object.defineProperty(exports, "NestableNavigationContent", {
   enumerable: true,
   get: function get() {
-    return _components.NestableNavigationContent;
+    return _NestableNavigationContent.default;
   }
 });
 Object.defineProperty(exports, "NestingItem", {
   enumerable: true,
   get: function get() {
-    return _components.NestingItem;
+    return _NestingItem.default;
   }
 });
 Object.defineProperty(exports, "Section", {
   enumerable: true,
   get: function get() {
-    return _components.Section;
+    return _Section.Section;
   }
 });
 Object.defineProperty(exports, "SideNavigation", {
   enumerable: true,
   get: function get() {
-    return _components.SideNavigation;
+    return _SideNavigation.default;
   }
 });
 Object.defineProperty(exports, "SkeletonHeadingItem", {
   enumerable: true,
   get: function get() {
-    return _components.SkeletonHeadingItem;
+    return _Section.SkeletonHeadingItem;
   }
 });
 Object.defineProperty(exports, "SkeletonItem", {
   enumerable: true,
   get: function get() {
-    return _components.SkeletonItem;
+    return _skeletonItem.default;
   }
 });
 Object.defineProperty(exports, "VAR_SCROLL_INDICATOR_COLOR", {
@@ -123,6 +124,20 @@ Object.defineProperty(exports, "useShouldNestedElementRender", {
     return _context.useShouldNestedElementRender;
   }
 });
-var _components = require("./components");
+var _SideNavigation = _interopRequireDefault(require("./components/SideNavigation"));
+var _Section = require("./components/Section");
+var _NestingItem = _interopRequireDefault(require("./components/NestingItem"));
+var _NavigationContent = _interopRequireDefault(require("./components/NavigationContent"));
+var _buttonItem = _interopRequireDefault(require("./components/Item/button-item"));
+var _goBackItem = _interopRequireDefault(require("./components/Item/go-back-item"));
+var _linkItem = _interopRequireDefault(require("./components/Item/link-item"));
+var _customItem = _interopRequireDefault(require("./components/Item/custom-item"));
+var _skeletonItem = _interopRequireDefault(require("./components/Item/skeleton-item"));
+var _Footer = _interopRequireDefault(require("./components/Footer"));
+var _Header = _interopRequireDefault(require("./components/Header"));
+var _NavigationHeader = _interopRequireDefault(require("./components/NavigationHeader"));
+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 _constants = require("./common/constants");

package/dist/es2019/common/use-child-ids-effect.js

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+const useChildIdsEffect = (childIds, id) => {
+  useEffect(() => {
+    if (!childIds || !childIds.current) {
+      return;
+    }
+    if (!childIds.current.has(id)) {
+      childIds.current.add(id);
+    }
+    return () => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      childIds.current.delete(id);
+    };
+    // childIds shouldn't change as it's a ref
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
+};
+export default useChildIdsEffect;

package/dist/es2019/common/use-child-ids.js

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from 'react';
+import { ROOT_ID } from '../components/NestableNavigationContent';
+const useChildIds = (currentStackId, committedStack, onUnknownNest) => {
+  const childIdsRef = useRef(new Set());
+  useEffect(() => {
+    // we are holding navigation item IDs in childIdsRef
+    // check if the current displayed nav item (currentStackId) is in childIdsRef. if it's not, this means it's undefined
+    if (currentStackId === ROOT_ID || !childIdsRef.current.size || childIdsRef.current.has(currentStackId) || !onUnknownNest) {
+      return;
+    }
+    onUnknownNest(committedStack || [currentStackId]);
+  }, [currentStackId, committedStack, onUnknownNest]);
+  return {
+    childIdsRef
+  };
+};
+export default useChildIds;

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

@@ -7,8 +7,8 @@ import { ax, ix } from "@compiled/react/runtime";
 
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import { Box, Stack, Text } from '@atlaskit/primitives/compiled';
-import { Container } from '../Header';
-import { CustomItem } from '../Item';
+import HeaderContainer from '../Header/header-container';
+import CustomItem from '../Item/custom-item';
 const styles = {
   iconContainer: "_1e0c1o8l _1bsb1k8s _4t3i1k8s",
   oldFooter: "_uizt1wug _1e0c1ule _y3gn1h6o _1tke1tcg _4cvr1h6o _1bsb1osq _vrjtwadc _16vx1h6o _bek6ze3t _rh04u2gc _76zj1o8l _13e21h6o _14bw1o8l _xosk12x7 _wte412x7 _ou5312x7 _1jo512x7 _11kjsm61 _jl2n73ad _1et6sm61 _1v6jazsu"
@@ -35,7 +35,7 @@ const OldFooter = props => {
     testId
   }))(props);
   return /*#__PURE__*/React.createElement(CustomItem, _extends({}, safeProps, {
-    component: props.component || Container,
+    component: props.component || HeaderContainer,
     className: ax([styles.oldFooter])
   }));
 };

package/dist/es2019/components/Header/header-container.js

@@ -0,0 +1,44 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+/**
+ * __Container__
+ *
+ * A container for Header and Footer that safely handles props to the child component
+ */
+const HeaderContainer = ({
+  children,
+  'data-testid': testId,
+  ...props
+}) => {
+  // https://stackoverflow.com/a/39333479
+  const safeProps = (({
+    className,
+    onClick,
+    onMouseDown,
+    onDragStart,
+    draggable,
+    ref,
+    tabIndex,
+    disabled
+  }) => ({
+    className,
+    onClick,
+    onMouseDown,
+    onDragStart,
+    draggable,
+    ref,
+    tabIndex,
+    disabled
+  }))(props);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    React.createElement("div", _extends({
+      "data-testid": testId,
+      style: {
+        position: 'relative'
+      }
+    }, safeProps), children)
+  );
+};
+export default HeaderContainer;

package/dist/es2019/components/Header/index.compiled.css

@@ -1,7 +1,7 @@
 
 ._vrjt1qyo [data-item-title]{font:var(--ds-font-heading-xsmall,normal 653 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._1cmdi7uo [data-item-title]{color:var(--ds-text,#292a2e)}
 ._uizt1wug{-webkit-user-select:auto;-ms-user-select:auto;user-select:auto}
-div._11kjqtfy:hover{background-color:var(--ds-background-neutral-subtle,transparent)}
+div._11kjsm61:hover{background-color:var(--ds-background-neutral-subtle,#00000000)}
 div._jl2n73ad:hover{cursor:default}
-div._1et6qtfy:active{background-color:var(--ds-background-neutral-subtle,transparent)}
+div._1et6sm61:active{background-color:var(--ds-background-neutral-subtle,#00000000)}
 div._1v6ji7uo:active{color:var(--ds-text,#292a2e)}