@atlaskit/side-navigation 2.0.4 → 3.0.0

package/constellation/index/props.mdx

@@ -1,30 +1,30 @@
-import SideNavigationProps from '!!extract-react-types-loader!../../src/components/SideNavigation'
-import HeaderProps from '!!extract-react-types-loader!../../src/components/Header'
-import FooterProps from '!!extract-react-types-loader!../../docs/ert/footer'
-import NavigationContentProps from '!!extract-react-types-loader!../../src/components/NavigationContent'
-import NestableNavigationContentProps from '!!extract-react-types-loader!../../src/components/NestableNavigationContent'
-import SectionProps from '!!extract-react-types-loader!../../src/components/Section'
+import SideNavigationProps from '!!extract-react-types-loader!../../src/components/SideNavigation';
+import HeaderProps from '!!extract-react-types-loader!../../src/components/Header';
+import FooterProps from '!!extract-react-types-loader!../../docs/ert/footer';
+import NavigationContentProps from '!!extract-react-types-loader!../../src/components/NavigationContent';
+import NestableNavigationContentProps from '!!extract-react-types-loader!../../src/components/NestableNavigationContent';
+import SectionProps from '!!extract-react-types-loader!../../src/components/Section';
 
 ### Navigation props
 
-<PropsTable heading="" props={SideNavigationProps}/>
+<PropsTable heading="" props={SideNavigationProps} />
 
 ### Header props
 
-<PropsTable heading="" props={HeaderProps}/>
+<PropsTable heading="" props={HeaderProps} />
 
 ### Footer props
 
-<PropsTable heading="" props={FooterProps}/>
+<PropsTable heading="" props={FooterProps} />
 
 ### Content props
 
-<PropsTable heading="" props={NavigationContentProps}/>
+<PropsTable heading="" props={NavigationContentProps} />
 
 ### Nestable content props
 
-<PropsTable heading="" props={NestableNavigationContentProps}/>
+<PropsTable heading="" props={NestableNavigationContentProps} />
 
 ### Section props
 
-<PropsTable heading="" props={SectionProps}/>
+<PropsTable heading="" props={SectionProps} />

package/constellation/index/usage.mdx

@@ -8,9 +8,9 @@ order: 2
 
 Occasionally it's necessary to load some of the side navigation content asynchronously. There are a few things to take care of
 
-* Only use skeletons when you're quite certain of what the loaded state will look like. Most items that would appear in side navigation are probably fine to use with skeletons, for example, `@atlaskit/tree`.
-* When transitioning from loading skeleton to loaded items, try to ensure the jump does not look janky - use the equivalent skeleton item that is appropriate and be careful of things jumping around by a few pixels. We should be striving for UI that feels __stable__, which means it doesn't jump around when content loads.
-* Ensure loading does not take too long - try to anticipate if a user will look at your menu via hover events and the like, and pre-load the data as soon as possible.
-* When content is loading in, make sure it all loads in at the same time - our minds aren't fast enough to distinguish each item loading individually, for example, and it would appear slower to most users.
+- Only use skeletons when you're quite certain of what the loaded state will look like. Most items that would appear in side navigation are probably fine to use with skeletons, for example, `@atlaskit/tree`.
+- When transitioning from loading skeleton to loaded items, try to ensure the jump does not look janky - use the equivalent skeleton item that is appropriate and be careful of things jumping around by a few pixels. We should be striving for UI that feels **stable**, which means it doesn't jump around when content loads.
+- Ensure loading does not take too long - try to anticipate if a user will look at your menu via hover events and the like, and pre-load the data as soon as possible.
+- When content is loading in, make sure it all loads in at the same time - our minds aren't fast enough to distinguish each item loading individually, for example, and it would appear slower to most users.
 
-For a more in-depth look at how to approach loading states, please check out the _work in progress_ [skeleton exploration](https://hello.atlassian.net/wiki/spaces/ADG/pages/598816601/Loading+experiences+-+3.4+-+Guideline+exploration+-+Skeleton#Exploration-(spec)) (content restricted to Atlassian staff).
+For a more in-depth look at how to approach loading states, please check out the _work in progress_ [skeleton exploration](<https://hello.atlassian.net/wiki/spaces/ADG/pages/598816601/Loading+experiences+-+3.4+-+Guideline+exploration+-+Skeleton#Exploration-(spec)>) (content restricted to Atlassian staff).

package/dist/cjs/common/constants.js

@@ -4,7 +4,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.VAR_SEPARATOR_COLOR = exports.VAR_SCROLL_INDICATOR_COLOR = void 0;
-var VAR_SEPARATOR_COLOR = '--ds-menu-seperator-color';
-exports.VAR_SEPARATOR_COLOR = VAR_SEPARATOR_COLOR;
-var VAR_SCROLL_INDICATOR_COLOR = '--ds-menu-scroll-indicator-color';
-exports.VAR_SCROLL_INDICATOR_COLOR = VAR_SCROLL_INDICATOR_COLOR;
+var VAR_SEPARATOR_COLOR = exports.VAR_SEPARATOR_COLOR = '--ds-menu-seperator-color';
+var VAR_SCROLL_INDICATOR_COLOR = exports.VAR_SCROLL_INDICATOR_COLOR = '--ds-menu-scroll-indicator-color';

package/dist/cjs/common/styles.js

@@ -16,7 +16,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  *
  * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
  */
-var overrideStyleFunction = function overrideStyleFunction(baseStyle) {
+var overrideStyleFunction = exports.overrideStyleFunction = function overrideStyleFunction(baseStyle) {
   var newStyle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
     return {};
   };
@@ -24,7 +24,6 @@ var overrideStyleFunction = function overrideStyleFunction(baseStyle) {
     return [baseStyle(state), newStyle(state)];
   };
 };
-exports.overrideStyleFunction = overrideStyleFunction;
 var defaultStyles = {
   '&:hover': {
     color: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
@@ -50,7 +49,7 @@ var selectedStyles = {
     color: "var(--ds-text-selected, ".concat(_colors.B400, ")")
   }
 };
-var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
+var baseSideNavItemStyle = exports.baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
   var isSelected = _ref.isSelected,
     isDisabled = _ref.isDisabled;
   return _objectSpread(_objectSpread(_objectSpread({
@@ -68,10 +67,8 @@ var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
     width: "var(--ds-space-300, 24px)"
   }));
 };
-exports.baseSideNavItemStyle = baseSideNavItemStyle;
-var sectionHeaderSpacingStyles = function sectionHeaderSpacingStyles() {
+var sectionHeaderSpacingStyles = exports.sectionHeaderSpacingStyles = function sectionHeaderSpacingStyles() {
   return {
     paddingInline: "var(--ds-space-100, 8px)"
   };
-};
-exports.sectionHeaderSpacingStyles = sectionHeaderSpacingStyles;
+};

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

@@ -156,5 +156,4 @@ var FooterFacade = function FooterFacade(_ref3) {
     testId: testId
   }, children);
 };
-var _default = FooterFacade;
-exports.default = _default;
+var _default = exports.default = FooterFacade;

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

@@ -27,7 +27,7 @@ var containerStyles = (0, _react2.css)({
  *
  * A container for Header and Footer that safely handles props to the child component
  */
-var Container = function Container(_ref) {
+var Container = exports.Container = function Container(_ref) {
   var children = _ref.children,
     testId = _ref['data-testid'],
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -57,7 +57,6 @@ var Container = function Container(_ref) {
     css: containerStyles
   }, safeProps), children);
 };
-exports.Container = Container;
 /**
  * __Header__
  *
@@ -101,5 +100,4 @@ var Header = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   }));
 });
-var _default = Header;
-exports.default = _default;
+var _default = exports.default = Header;

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

@@ -41,5 +41,4 @@ function (_ref, ref) {
     cssFn: cssOverride
   }, rest));
 });
-var _default = ButtonItem;
-exports.default = _default;
+var _default = exports.default = ButtonItem;

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

@@ -41,5 +41,4 @@ function (_ref, ref) {
 }
 // Dirty hack to get generics working with forward ref [2/2]
 );
-var _default = CustomItem;
-exports.default = _default;
+var _default = exports.default = CustomItem;

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

@@ -56,5 +56,4 @@ var GoBackItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     ref: ref
   }, rest));
 });
-var _default = GoBackItem;
-exports.default = _default;
+var _default = exports.default = GoBackItem;

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

@@ -43,5 +43,4 @@ function (_ref, ref) {
     cssFn: cssOverride
   }, rest));
 });
-var _default = LinkItem;
-exports.default = _default;
+var _default = exports.default = LinkItem;

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

@@ -43,5 +43,4 @@ var SkeletonItem = function SkeletonItem(props) {
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, props));
 };
-var _default = SkeletonItem;
-exports.default = _default;
+var _default = exports.default = SkeletonItem;

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

@@ -51,5 +51,4 @@ var LoadingItems = function LoadingItems(_ref) {
     }), isLoading ? fallback : children);
   }));
 };
-var _default = LoadingItems;
-exports.default = _default;
+var _default = exports.default = LoadingItems;

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

@@ -49,5 +49,4 @@ var NavigationContent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref
     })
   }, children)));
 });
-var _default = NavigationContent;
-exports.default = _default;
+var _default = exports.default = NavigationContent;

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

@@ -31,7 +31,7 @@ var skeletonHeadingBottomMargin = containerPadding * 0.75 + skeletonHeadingMargi
  * They are "conditionally" shown from the users perspective using the inner container CSS
  * which has other pseudo elements which "mask" the "real" scroll indicators.
  */
-var outerContainerCSS = function outerContainerCSS(opts) {
+var outerContainerCSS = exports.outerContainerCSS = function outerContainerCSS(opts) {
   return {
     // Flex is needed to ensure the overflow indicators are positioned correctly.
     display: 'flex',
@@ -70,8 +70,7 @@ var outerContainerCSS = function outerContainerCSS(opts) {
  * Essentially they cover (mask) the "real" scroll indicators when the user is scrolled
  * to the top or bottom of the container.
  */
-exports.outerContainerCSS = outerContainerCSS;
-var innerContainerCSS = function innerContainerCSS(opts) {
+var innerContainerCSS = exports.innerContainerCSS = function innerContainerCSS(opts) {
   return _objectSpread(_objectSpread({
     display: 'flex',
     overflow: 'auto',
@@ -108,8 +107,7 @@ var innerContainerCSS = function innerContainerCSS(opts) {
     }
   });
 };
-exports.innerContainerCSS = innerContainerCSS;
-var containerCSS = function containerCSS(opts) {
+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.
@@ -128,5 +126,4 @@ var containerCSS = function containerCSS(opts) {
       marginBottom: skeletonHeadingBottomMargin
     }
   };
-};
-exports.containerCSS = containerCSS;
+};

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

@@ -27,5 +27,4 @@ var NavigationFooter = function NavigationFooter(_ref) {
     xcss: navigationFooterStyles
   }, children);
 };
-var _default = NavigationFooter;
-exports.default = _default;
+var _default = exports.default = NavigationFooter;

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

@@ -28,5 +28,4 @@ var NavigationHeader = function NavigationHeader(props) {
     "data-navheader": true
   }, children);
 };
-var _default = NavigationHeader;
-exports.default = _default;
+var _default = exports.default = NavigationHeader;

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

@@ -12,9 +12,8 @@ var _react = require("react");
 /**
  * @internal
  */
-var NestedContext = /*#__PURE__*/(0, _react.createContext)(undefined);
-exports.NestedContext = NestedContext;
-var useNestedContext = function useNestedContext() {
+var NestedContext = exports.NestedContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+var useNestedContext = exports.useNestedContext = function useNestedContext() {
   var context = (0, _react.useContext)(NestedContext);
   if (!context) {
     var error = '';
@@ -31,8 +30,7 @@ var useNestedContext = function useNestedContext() {
  * If `shouldRender` returns `true` - return your nodes.
  * If it returns `false` - either return `null` or `children` if you have children.
  */
-exports.useNestedContext = useNestedContext;
-var useShouldNestedElementRender = function useShouldNestedElementRender() {
+var useShouldNestedElementRender = exports.useShouldNestedElementRender = function useShouldNestedElementRender() {
   var context = (0, _react.useContext)(NestedContext);
   if (!context) {
     return {
@@ -42,5 +40,4 @@ var useShouldNestedElementRender = function useShouldNestedElementRender() {
   return {
     shouldRender: context.currentStackId === context.parentId
   };
-};
-exports.useShouldNestedElementRender = useShouldNestedElementRender;
+};

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

@@ -19,8 +19,7 @@ var _nestingMotion = require("./nesting-motion");
 
 // Named so ERT doesn't pick up the override name as a type.
 
-var ROOT_ID = 'ATLASKIT_NESTED_ROOT';
-exports.ROOT_ID = ROOT_ID;
+var ROOT_ID = exports.ROOT_ID = 'ATLASKIT_NESTED_ROOT';
 var nestableNavigationContentStyles = (0, _react2.css)({
   height: '100%',
   position: 'relative',
@@ -175,5 +174,4 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
     }, children)));
   }))));
 };
-var _default = NestableNavigationContent;
-exports.default = _default;
+var _default = exports.default = NestableNavigationContent;

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

@@ -13,7 +13,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 /**
  * @internal
  */
-var NestingMotion = function NestingMotion(props) {
+var NestingMotion = exports.NestingMotion = function NestingMotion(props) {
   var children = props.children,
     enterFrom = props.enterFrom,
     exitTo = props.exitTo,
@@ -31,5 +31,4 @@ var NestingMotion = function NestingMotion(props) {
       'data-testid': testId && "".concat(testId, "-").concat(direction)
     }, innerProps));
   });
-};
-exports.NestingMotion = NestingMotion;
+};

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

@@ -145,5 +145,4 @@ var NestingItem = function NestingItem(props) {
   }
   return (0, _react2.jsx)(_index.ButtonItem, componentProps);
 };
-var _default = NestingItem;
-exports.default = _default;
+var _default = exports.default = NestingItem;

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

@@ -10,7 +10,7 @@ var _enabledCSS, _disabledCSS;
 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; }
 // exposed for testing purposes
-var enabledCSS = (_enabledCSS = {}, (0, _defineProperty2.default)(_enabledCSS, '&:hover [data-custom-icon]', {
+var enabledCSS = exports.enabledCSS = (_enabledCSS = {}, (0, _defineProperty2.default)(_enabledCSS, '&:hover [data-custom-icon]', {
   display: 'none'
 }), (0, _defineProperty2.default)(_enabledCSS, '&:active [data-custom-icon]', {
   display: 'none'
@@ -27,13 +27,11 @@ var enabledCSS = (_enabledCSS = {}, (0, _defineProperty2.default)(_enabledCSS, '
 }), (0, _defineProperty2.default)(_enabledCSS, '& [data-right-arrow]', {
   display: 'none'
 }), _enabledCSS);
-exports.enabledCSS = enabledCSS;
 var disabledCSS = (_disabledCSS = {}, (0, _defineProperty2.default)(_disabledCSS, '[data-item-elem-after]', {
   opacity: 0
 }), (0, _defineProperty2.default)(_disabledCSS, '& [data-right-arrow]', {
   display: 'none'
 }), _disabledCSS);
-var nestingItemStyle = function nestingItemStyle(state) {
+var nestingItemStyle = exports.nestingItemStyle = function nestingItemStyle(state) {
   return _objectSpread({}, state.isDisabled ? disabledCSS : enabledCSS);
-};
-exports.nestingItemStyle = nestingItemStyle;
+};

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

@@ -29,5 +29,4 @@ var HeadingItem = function HeadingItem(props) {
     cssFn: cssFn
   }));
 };
-var _default = HeadingItem;
-exports.default = _default;
+var _default = exports.default = HeadingItem;

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

@@ -40,5 +40,4 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   }));
 });
-var _default = Section;
-exports.default = _default;
+var _default = exports.default = Section;

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

@@ -35,5 +35,4 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(props) {
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, props));
 };
-var _default = SkeletonHeadingItem;
-exports.default = _default;
+var _default = exports.default = SkeletonHeadingItem;

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

@@ -45,5 +45,4 @@ var SideNavigation = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     value: "notch"
   }, children));
 });
-var _default = SideNavigation;
-exports.default = _default;
+var _default = exports.default = SideNavigation;

package/dist/cjs/components/utils/hooks.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useChildIdsEffect = exports.useChildIds = void 0;
 var _react = require("react");
 var _NestableNavigationContent = require("../NestableNavigationContent");
-var useChildIds = function useChildIds(currentStackId, committedStack, onUnknownNest) {
+var useChildIds = exports.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
@@ -20,8 +20,7 @@ var useChildIds = function useChildIds(currentStackId, committedStack, onUnknown
     childIdsRef: childIdsRef
   };
 };
-exports.useChildIds = useChildIds;
-var useChildIdsEffect = function useChildIdsEffect(childIds, id) {
+var useChildIdsEffect = exports.useChildIdsEffect = function useChildIdsEffect(childIds, id) {
   (0, _react.useEffect)(function () {
     if (!childIds || !childIds.current) {
       return;
@@ -36,5 +35,4 @@ var useChildIdsEffect = function useChildIdsEffect(childIds, id) {
     // childIds shouldn't change as it's a ref
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id]);
-};
-exports.useChildIdsEffect = useChildIdsEffect;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/side-navigation",
-  "version": "2.0.4",
+  "version": "3.0.0",
   "description": "A highly composable side navigation component that supports nested views.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,14 +12,6 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.5 <4.9": {
-      "*": [
-        "dist/types-ts4.5/*",
-        "dist/types-ts4.5/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
@@ -32,14 +24,14 @@
     }
   },
   "dependencies": {
-    "@atlaskit/ds-explorations": "^2.2.0",
+    "@atlaskit/ds-explorations": "^3.0.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/menu": "^1.10.0",
-    "@atlaskit/motion": "^1.4.0",
-    "@atlaskit/primitives": "^1.4.0",
+    "@atlaskit/menu": "^2.0.0",
+    "@atlaskit/motion": "^1.5.0",
+    "@atlaskit/primitives": "^1.6.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.21.0",
+    "@atlaskit/tokens": "^1.25.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -81,9 +73,12 @@
       "deprecation": "no-deprecated-imports"
     }
   },
-  "platform-feature-flags": {
-    "platform.design-system-team.menu-selected-state-change_0see9": {
-      "type": "boolean"
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
     }
   },
   "homepage": "https://atlassian.design/components/side-navigation/",

package/dist/types-ts4.5/common/constants.d.ts

@@ -1,2 +0,0 @@
-export declare const VAR_SEPARATOR_COLOR = "--ds-menu-seperator-color";
-export declare const VAR_SCROLL_INDICATOR_COLOR = "--ds-menu-scroll-indicator-color";

package/dist/types-ts4.5/common/styles.d.ts

@@ -1,11 +0,0 @@
-import { CSSFn, StatelessCSSFn } from '@atlaskit/menu';
-/**
- * Allows chaining of style functions on top of base style functions
- * @param baseStyle the base custom cssFn
- * @param newStyle a new cssFn to be applied after the base style
- *
- * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
- */
-export declare const overrideStyleFunction: <TState>(baseStyle: CSSFn<TState>, newStyle?: CSSFn<TState> | undefined) => CSSFn<TState>;
-export declare const baseSideNavItemStyle: CSSFn;
-export declare const sectionHeaderSpacingStyles: StatelessCSSFn;

package/dist/types-ts4.5/components/Footer/index.d.ts

@@ -1,28 +0,0 @@
-/// <reference types="react" />
-import { HeaderProps } from '../Header';
-type NewFooterProps = Omit<HeaderProps, 'cssFn' | 'component' | 'onClick'>;
-type FooterFacadeProps = (HeaderProps & {
-    /**
-     * @private
-     * @deprecated
-     */
-    useDeprecatedApi?: true;
-}) | (NewFooterProps & {
-    /**
-     * @private
-     * @deprecated
-     */
-    useDeprecatedApi?: false;
-    cssFn?: never;
-    component?: never;
-    onClick?: never;
-});
-export type FooterProps = HeaderProps | NewFooterProps;
-/**
- * __Footer__
- *
- * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
- * - [Code](https://atlassian.design/components/side-navigation/code)
- */
-declare const FooterFacade: ({ useDeprecatedApi, description, iconBefore, testId, children, component, cssFn, onClick, }: FooterFacadeProps) => JSX.Element;
-export default FooterFacade;

package/dist/types-ts4.5/components/Header/index.d.ts

@@ -1,56 +0,0 @@
-/// <reference types="react" />
-import { jsx } from '@emotion/react';
-import { CSSFn, CustomItemComponentProps } from '@atlaskit/menu';
-/**
- * __Container__
- *
- * A container for Header and Footer that safely handles props to the child component
- */
-export declare const Container: ({ children, "data-testid": testId, ...props }: CustomItemComponentProps) => jsx.JSX.Element;
-export type HeaderProps = {
-    /**
-     * A function that can be used to override the styles of the component.
-     * It receives the current styles and state and expects a styles object.
-     * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
-     */
-    cssFn?: CSSFn;
-    /**
-     * Element to render before the item text.
-     * Generally should be an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
-     */
-    iconBefore?: React.ReactNode;
-    /**
-     * Event that is triggered when the element is clicked.
-     */
-    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
-    /**
-     * Description of the item.
-     * This will render smaller text below the primary text of the item as well as slightly increasing the height of the item.
-     */
-    description?: string | JSX.Element;
-    /**
-     * Primary content for the item.
-     */
-    children?: React.ReactNode;
-    /**
-     * A `testId` prop is provided for specified elements,
-     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests.
-     */
-    testId?: string;
-    /**
-     * Custom component to render as an item.
-     * This can be both a functional component or a class component.
-     * __Will return `null` if no component is defined.__
-     * __NOTE:__ Make sure the reference for this component does not change between renders else undefined behavior may happen.
-     */
-    component?: React.ComponentType<CustomItemComponentProps>;
-};
-/**
- * __Header__
- *
- * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
- * - [Code](https://atlassian.design/components/side-navigation/code)
- */
-declare const Header: import("react").ForwardRefExoticComponent<HeaderProps & import("react").RefAttributes<HTMLElement>>;
-export default Header;

package/dist/types-ts4.5/components/Item/button-item.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import { ButtonItemProps } from '@atlaskit/menu';
-export type { ButtonItemProps } from '@atlaskit/menu';
-/**
- * __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)
- */
-declare const ButtonItem: React.ForwardRefExoticComponent<ButtonItemProps & React.RefAttributes<HTMLElement>>;
-export default ButtonItem;

package/dist/types-ts4.5/components/Item/custom-item.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import { CustomItemComponentProps, CustomItemProps } from '@atlaskit/menu';
-export type { CustomItemComponentProps, CustomItemProps } from '@atlaskit/menu';
-interface CustomItemPropsHack {
-    <TComponentProps extends {}>(props: CustomItemProps<TComponentProps> & {
-        ref?: any;
-    } & Omit<TComponentProps, keyof CustomItemComponentProps>): JSX.Element | null;
-}
-/**
- * Used to support any custom items needed by products alongside the Header and Footer patterns.
- * Specific implementation of headers and footers are provided in the examples folder.
- */
-declare const CustomItem: CustomItemPropsHack;
-export default CustomItem;

package/dist/types-ts4.5/components/Item/go-back-item.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import type { ButtonItemProps } from '@atlaskit/menu';
-export type { ButtonItemProps as GoBackItemProps } from '@atlaskit/menu';
-/**
- * __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)
- */
-declare const GoBackItem: React.ForwardRefExoticComponent<ButtonItemProps & React.RefAttributes<HTMLElement>>;
-export default GoBackItem;

package/dist/types-ts4.5/components/Item/index.d.ts

@@ -1,10 +0,0 @@
-export { default as ButtonItem } from './button-item';
-export type { ButtonItemProps } from './button-item';
-export { default as CustomItem } from './custom-item';
-export type { CustomItemProps, CustomItemComponentProps } from './custom-item';
-export { default as GoBackItem } from './go-back-item';
-export type { GoBackItemProps } from './go-back-item';
-export { default as LinkItem } from './link-item';
-export type { LinkItemProps } from './link-item';
-export { default as SkeletonItem } from './skeleton-item';
-export type { SkeletonItemProps } from './skeleton-item';