@atlaskit/side-navigation 11.1.14 → 11.1.15

package/dist/types/components/Section/skeleton-heading-item.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { type SkeletonHeadingItemProps } from '@atlaskit/menu';
-export type { SkeletonHeadingItemProps } from '@atlaskit/menu';
+import { type SkeletonHeadingItemProps as MenuSkeletonHeadingItemProps } from '@atlaskit/menu';
+export interface SkeletonHeadingItemProps extends MenuSkeletonHeadingItemProps {
+}
 /**
  * __Skeleton heading item__
  *

package/dist/types/index.d.ts

@@ -1,7 +1,11 @@
 export { default as SideNavigation } from './components/SideNavigation';
 export type { SideNavigationProps } from './components/SideNavigation';
-export { Section, HeadingItem, SkeletonHeadingItem } from './components/Section';
-export type { HeadingItemProps, SectionProps, SkeletonHeadingItemProps, } from './components/Section';
+export { default as Section } from './components/Section/section';
+export { default as HeadingItem } from './components/Section/heading-item';
+export { default as SkeletonHeadingItem } from './components/Section/skeleton-heading-item';
+export type { HeadingItemProps } from './components/Section/heading-item';
+export type { SectionProps } from './components/Section/section';
+export type { SkeletonHeadingItemProps } from './components/Section/skeleton-heading-item';
 export { default as NestingItem } from './components/NestingItem';
 export type { NestingItemProps } from './components/NestingItem';
 export { default as NavigationContent } from './components/NavigationContent';
@@ -11,11 +15,11 @@ export { default as GoBackItem } from './components/Item/go-back-item';
 export { default as LinkItem } from './components/Item/link-item';
 export { default as CustomItem } from './components/Item/custom-item';
 export { default as SkeletonItem } from './components/Item/skeleton-item';
-export type { CustomItemComponentProps, CustomItemProps } from './components/Item/custom-item';
-export type { ButtonItemProps } from './components/Item/button-item';
-export type { GoBackItemProps } from './components/Item/go-back-item';
-export type { LinkItemProps } from './components/Item/link-item';
-export type { SkeletonItemProps } from './components/Item/skeleton-item';
+export type { CustomItemComponentProps, CustomItemProps } from '@atlaskit/menu';
+export type { ButtonItemProps } from '@atlaskit/menu';
+export type { ButtonItemProps as GoBackItemProps } from '@atlaskit/menu';
+export type { LinkItemProps } from '@atlaskit/menu';
+export type { SkeletonItemProps } from '@atlaskit/menu';
 export { default as Footer } from './components/Footer';
 export type { FooterProps } from './components/Footer';
 export { default as Header } from './components/Header';
@@ -28,5 +32,5 @@ export { default as LoadingItems } from './components/LoadingItems';
 export type { LoadingItemsProps } from './components/LoadingItems';
 export { default as NestableNavigationContent } from './components/NestableNavigationContent';
 export type { NestableNavigationContentProps } from './components/NestableNavigationContent';
-export { useShouldNestedElementRender } from './components/NestableNavigationContent/context';
+export { useShouldNestedElementRender } from './components/NestableNavigationContent/use-should-nested-element-render';
 export { VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR } from './common/constants';

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

@@ -1,5 +1,4 @@
 import { type ButtonItemProps } from '@atlaskit/menu';
-export type { ButtonItemProps } from '@atlaskit/menu';
 /**
  * __Button item__
  *

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

@@ -1,5 +1,6 @@
-import { type CustomItemComponentProps, type CustomItemProps } from '@atlaskit/menu';
-export type { CustomItemComponentProps, CustomItemProps } from '@atlaskit/menu';
+import { type CustomItemProps, type CustomItemComponentProps as MenuCustomItemComponentProps } from '@atlaskit/menu';
+export interface CustomItemComponentProps extends MenuCustomItemComponentProps {
+}
 interface CustomItemPropsHack {
     <TComponentProps extends {}>(props: CustomItemProps<TComponentProps> & {
         ref?: any;

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import type { ButtonItemProps } from '@atlaskit/menu';
-export type { ButtonItemProps as GoBackItemProps } from '@atlaskit/menu';
 /**
  * __Go back item__
  *

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

@@ -1,5 +1,4 @@
 import { type LinkItemProps } from '@atlaskit/menu';
-export type { LinkItemProps } from '@atlaskit/menu';
 /**
  * __Link item__
  *

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { type SkeletonItemProps } from '@atlaskit/menu';
-export type { SkeletonItemProps } from '@atlaskit/menu';
 /**
  * __Skeleton item__
  *

package/dist/types-ts4.5/components/NavigationContent/container-css.d.ts

@@ -0,0 +1,18 @@
+interface StyleOpts {
+    showTopScrollIndicator?: boolean;
+}
+export declare const containerCSS: (opts: StyleOpts) => {
+    readonly marginTop: 0 | 2;
+    readonly marginLeft: "var(--ds-space-100)";
+    readonly marginRight: "var(--ds-space-100)";
+    readonly position: "relative";
+    readonly "& [data-ds--menu--heading-item]": {
+        readonly marginBottom: "var(--ds-space-075)";
+        readonly marginTop: "var(--ds-space-200)";
+    };
+    readonly "& [data-ds--menu--skeleton-heading-item]": {
+        readonly marginTop: number;
+        readonly marginBottom: number;
+    };
+};
+export {};

package/dist/types-ts4.5/components/NavigationContent/inner-container-css.d.ts

@@ -0,0 +1,34 @@
+interface StyleOpts {
+    showTopScrollIndicator?: boolean;
+}
+export declare const innerContainerCSS: (opts: StyleOpts) => {
+    readonly "&::after": {
+        readonly borderRadius: "var(--ds-radius-xsmall)";
+        readonly content: "''";
+        readonly display: "block";
+        readonly flexShrink: 0;
+        readonly height: 2;
+        readonly marginTop: "auto";
+        readonly position: "relative";
+        readonly zIndex: 2;
+        readonly backgroundColor: "var(--ds-menu-scroll-indicator-color, var(--ds-surface))";
+    };
+    readonly "&::before"?: {
+        readonly borderRadius: "var(--ds-radius-xsmall)";
+        readonly content: "''";
+        readonly left: 0;
+        readonly right: 0;
+        readonly height: 2;
+        readonly backgroundColor: "var(--ds-menu-scroll-indicator-color, var(--ds-surface))";
+        readonly position: "absolute";
+        readonly display: "block";
+        readonly zIndex: 2;
+    } | undefined;
+    readonly display: "flex";
+    readonly overflow: "auto";
+    readonly width: "100%";
+    readonly position: "relative";
+    readonly boxSizing: "border-box";
+    readonly flexDirection: "column";
+};
+export {};

package/dist/types-ts4.5/components/NavigationContent/outer-container-css.d.ts

@@ -0,0 +1,36 @@
+interface StyleOpts {
+    showTopScrollIndicator?: boolean;
+}
+export declare const outerContainerCSS: (opts: StyleOpts & {
+    scrollbarWidth: number;
+}) => {
+    readonly display: "flex";
+    readonly height: "100%";
+    readonly overflow: "hidden";
+    readonly position: "relative";
+    readonly "&::before": {
+        readonly content: "''";
+        readonly display: "block";
+        readonly left: "var(--ds-space-100)";
+        readonly right: number;
+        readonly height: 2;
+        readonly borderRadius: "var(--ds-radius-xsmall)";
+        readonly backgroundColor: "var(--ds-menu-seperator-color, var(--ds-border))";
+        readonly position: "absolute";
+        readonly zIndex: 1;
+    };
+    readonly "&::after": {
+        readonly content: "''";
+        readonly position: "absolute";
+        readonly display: "block";
+        readonly borderRadius: "var(--ds-radius-xsmall)";
+        readonly flexShrink: 0;
+        readonly height: 2;
+        readonly left: "var(--ds-space-100)";
+        readonly right: number;
+        readonly bottom: 0;
+        readonly zIndex: 1;
+        readonly backgroundColor: "var(--ds-menu-seperator-color, var(--ds-border))";
+    };
+};
+export {};

package/dist/types-ts4.5/components/NestableNavigationContent/{context.d.ts → nested-context.d.ts}

@@ -1,7 +1,4 @@
 import { type MutableRefObject } from 'react';
-/**
- * @internal
- */
 export interface NestedContextValue {
     currentStackId: string;
     onNest: (id: string) => void;
@@ -16,16 +13,4 @@ export interface NestedContextValue {
     isDefaultFocusControl?: boolean;
     focusGoBackButton?: boolean;
 }
-/**
- * @internal
- */
 export declare const NestedContext: import('react').Context<NestedContextValue | undefined>;
-export declare const useNestedContext: () => NestedContextValue;
-/**
- * Used by children of the NestableNavigationContent component to see if they should render or not.
- * If `shouldRender` returns `true` - return your nodes.
- * If it returns `false` - either return `null` or `children` if you have children.
- */
-export declare const useShouldNestedElementRender: () => {
-    shouldRender: boolean;
-};

package/dist/types-ts4.5/components/NestableNavigationContent/use-nested-context.d.ts

@@ -0,0 +1,2 @@
+import { type NestedContextValue } from './nested-context';
+export declare const useNestedContext: () => NestedContextValue;

package/dist/types-ts4.5/components/NestableNavigationContent/use-should-nested-element-render.d.ts

@@ -0,0 +1,3 @@
+export declare const useShouldNestedElementRender: () => {
+    shouldRender: boolean;
+};

package/dist/types-ts4.5/components/Section/heading-item.d.ts

@@ -2,8 +2,9 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { type HeadingItemProps } from '@atlaskit/menu';
-export type { HeadingItemProps } from '@atlaskit/menu';
+import { type HeadingItemProps as MenuHeadingItemProps } from '@atlaskit/menu';
+export interface HeadingItemProps extends MenuHeadingItemProps {
+}
 /**
  * __Heading item__
  *

package/dist/types-ts4.5/components/Section/skeleton-heading-item.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { type SkeletonHeadingItemProps } from '@atlaskit/menu';
-export type { SkeletonHeadingItemProps } from '@atlaskit/menu';
+import { type SkeletonHeadingItemProps as MenuSkeletonHeadingItemProps } from '@atlaskit/menu';
+export interface SkeletonHeadingItemProps extends MenuSkeletonHeadingItemProps {
+}
 /**
  * __Skeleton heading item__
  *

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

@@ -1,7 +1,11 @@
 export { default as SideNavigation } from './components/SideNavigation';
 export type { SideNavigationProps } from './components/SideNavigation';
-export { Section, HeadingItem, SkeletonHeadingItem } from './components/Section';
-export type { HeadingItemProps, SectionProps, SkeletonHeadingItemProps, } from './components/Section';
+export { default as Section } from './components/Section/section';
+export { default as HeadingItem } from './components/Section/heading-item';
+export { default as SkeletonHeadingItem } from './components/Section/skeleton-heading-item';
+export type { HeadingItemProps } from './components/Section/heading-item';
+export type { SectionProps } from './components/Section/section';
+export type { SkeletonHeadingItemProps } from './components/Section/skeleton-heading-item';
 export { default as NestingItem } from './components/NestingItem';
 export type { NestingItemProps } from './components/NestingItem';
 export { default as NavigationContent } from './components/NavigationContent';
@@ -11,11 +15,11 @@ export { default as GoBackItem } from './components/Item/go-back-item';
 export { default as LinkItem } from './components/Item/link-item';
 export { default as CustomItem } from './components/Item/custom-item';
 export { default as SkeletonItem } from './components/Item/skeleton-item';
-export type { CustomItemComponentProps, CustomItemProps } from './components/Item/custom-item';
-export type { ButtonItemProps } from './components/Item/button-item';
-export type { GoBackItemProps } from './components/Item/go-back-item';
-export type { LinkItemProps } from './components/Item/link-item';
-export type { SkeletonItemProps } from './components/Item/skeleton-item';
+export type { CustomItemComponentProps, CustomItemProps } from '@atlaskit/menu';
+export type { ButtonItemProps } from '@atlaskit/menu';
+export type { ButtonItemProps as GoBackItemProps } from '@atlaskit/menu';
+export type { LinkItemProps } from '@atlaskit/menu';
+export type { SkeletonItemProps } from '@atlaskit/menu';
 export { default as Footer } from './components/Footer';
 export type { FooterProps } from './components/Footer';
 export { default as Header } from './components/Header';
@@ -28,5 +32,5 @@ export { default as LoadingItems } from './components/LoadingItems';
 export type { LoadingItemsProps } from './components/LoadingItems';
 export { default as NestableNavigationContent } from './components/NestableNavigationContent';
 export type { NestableNavigationContentProps } from './components/NestableNavigationContent';
-export { useShouldNestedElementRender } from './components/NestableNavigationContent/context';
+export { useShouldNestedElementRender } from './components/NestableNavigationContent/use-should-nested-element-render';
 export { VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR } from './common/constants';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/side-navigation",
-	"version": "11.1.14",
+	"version": "11.1.15",
 	"description": "A highly composable side navigation component that supports nested views.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -36,13 +36,13 @@
 	},
 	"dependencies": {
 		"@atlaskit/css": "^0.19.0",
-		"@atlaskit/ds-lib": "^6.0.0",
+		"@atlaskit/ds-lib": "^7.0.0",
 		"@atlaskit/icon": "^34.0.0",
 		"@atlaskit/menu": "^8.4.0",
 		"@atlaskit/motion": "^5.5.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^18.1.0",
-		"@atlaskit/tokens": "^11.4.0",
+		"@atlaskit/tokens": "^12.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0"
 	},
@@ -54,13 +54,13 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/atlassian-navigation": "^5.6.0",
-		"@atlaskit/button": "^23.10.0",
+		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/docs": "^11.7.0",
 		"@atlaskit/dropdown-menu": "^16.8.0",
 		"@atlaskit/form": "^15.5.0",
 		"@atlaskit/image": "^3.0.0",
-		"@atlaskit/link": "^3.3.0",
-		"@atlaskit/logo": "^19.10.0",
+		"@atlaskit/link": "^3.4.0",
+		"@atlaskit/logo": "^20.0.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/pragmatic-drag-and-drop-live-region": "^1.3.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-accessibility": "^2.2.0",

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

@@ -1,127 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.outerContainerCSS = exports.innerContainerCSS = exports.containerCSS = 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 scrollIndicatorZIndex = 1;
-var scrollIndicatorHeight = 2;
-var scrollIndicatorBorderRadius = '1px';
-var containerPadding = 8;
-var itemHeadingContentHeight = 16; // Originally headingSizes.h100.lineHeight from '@atlaskit/theme/typography'
-var skeletonHeadingHeight = containerPadding;
-var skeletonHeadingMarginOffset = 3;
-// Skeleton content is slightly shorter than the real content.
-// Because of that we slightly increase the top margin to offset this so the
-// containing size both real and skeleton always equal approx 30px.
-var skeletonHeadingTopMargin = containerPadding * 2.5 + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset;
-// We want to move the entire body up by 3px without affecting the height of the skeleton container.
-var skeletonHeadingBottomMargin = containerPadding * 0.75 + skeletonHeadingMarginOffset;
-/**
- * This outer container css contains the "real" scroll indicators which are
- * always rendered to the screen.
- * 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 = 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)", ")")
-    }
-  };
-};
-
-/**
- * This inner container css contains the "mask" logic for the scroll indicators.
- * Essentially they cover (mask) the "real" scroll indicators when the user is scrolled
- * to the top or bottom of the container.
- */
-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)", ")")
-    }
-  });
-};
-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/NestableNavigationContent/context.js

@@ -1,43 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useShouldNestedElementRender = exports.useNestedContext = exports.NestedContext = void 0;
-var _react = require("react");
-/**
- * @internal
- */
-
-/**
- * @internal
- */
-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 = '';
-    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;
-};
-
-/**
- * Used by children of the NestableNavigationContent component to see if they should render or not.
- * If `shouldRender` returns `true` - return your nodes.
- * If it returns `false` - either return `null` or `children` if you have children.
- */
-var useShouldNestedElementRender = exports.useShouldNestedElementRender = function useShouldNestedElementRender() {
-  var context = (0, _react.useContext)(NestedContext);
-  if (!context) {
-    return {
-      shouldRender: true
-    };
-  }
-  return {
-    shouldRender: context.currentStackId === context.parentId
-  };
-};

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

@@ -1,27 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "HeadingItem", {
-  enumerable: true,
-  get: function get() {
-    return _headingItem.default;
-  }
-});
-Object.defineProperty(exports, "Section", {
-  enumerable: true,
-  get: function get() {
-    return _section.default;
-  }
-});
-Object.defineProperty(exports, "SkeletonHeadingItem", {
-  enumerable: true,
-  get: function get() {
-    return _skeletonHeadingItem.default;
-  }
-});
-var _headingItem = _interopRequireDefault(require("./heading-item"));
-var _section = _interopRequireDefault(require("./section"));
-var _skeletonHeadingItem = _interopRequireDefault(require("./skeleton-heading-item"));

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

@@ -1,113 +0,0 @@
-import { VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR } from '../../common/constants';
-const scrollIndicatorMaskZIndex = 2;
-const scrollIndicatorZIndex = 1;
-const scrollIndicatorHeight = 2;
-const scrollIndicatorBorderRadius = '1px';
-const containerPadding = 8;
-const itemHeadingContentHeight = 16; // Originally headingSizes.h100.lineHeight from '@atlaskit/theme/typography'
-const skeletonHeadingHeight = containerPadding;
-const skeletonHeadingMarginOffset = 3;
-// Skeleton content is slightly shorter than the real content.
-// Because of that we slightly increase the top margin to offset this so the
-// containing size both real and skeleton always equal approx 30px.
-const skeletonHeadingTopMargin = containerPadding * 2.5 + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset;
-// We want to move the entire body up by 3px without affecting the height of the skeleton container.
-const skeletonHeadingBottomMargin = containerPadding * 0.75 + skeletonHeadingMarginOffset;
-/**
- * This outer container css contains the "real" scroll indicators which are
- * always rendered to the screen.
- * They are "conditionally" shown from the users perspective using the inner container CSS
- * which has other pseudo elements which "mask" the "real" scroll indicators.
- */
-export const outerContainerCSS = opts => ({
-  // 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, ${scrollIndicatorBorderRadius})`,
-    backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${"var(--ds-border, #0B120E24)"})`,
-    position: 'absolute',
-    zIndex: scrollIndicatorZIndex
-  },
-  '&::after': {
-    content: "''",
-    position: 'absolute',
-    display: 'block',
-    borderRadius: `var(--ds-radius-xsmall, ${scrollIndicatorBorderRadius})`,
-    flexShrink: 0,
-    height: scrollIndicatorHeight,
-    left: "var(--ds-space-100, 8px)",
-    right: containerPadding + opts.scrollbarWidth,
-    bottom: 0,
-    zIndex: scrollIndicatorZIndex,
-    backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${"var(--ds-border, #0B120E24)"})`
-  }
-});
-
-/**
- * This inner container css contains the "mask" logic for the scroll indicators.
- * Essentially they cover (mask) the "real" scroll indicators when the user is scrolled
- * to the top or bottom of the container.
- */
-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)"})`
-  }
-});
-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
-  }
-});