@atlaskit/side-navigation 1.2.0 → 1.2.4

package/dist/cjs/components/index.js

@@ -5,106 +5,106 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "SideNavigation", {
+Object.defineProperty(exports, "ButtonItem", {
   enumerable: true,
   get: function get() {
-    return _SideNavigation.default;
+    return _Item.ButtonItem;
   }
 });
-Object.defineProperty(exports, "Section", {
+Object.defineProperty(exports, "CustomItem", {
   enumerable: true,
   get: function get() {
-    return _Section.Section;
+    return _Item.CustomItem;
   }
 });
-Object.defineProperty(exports, "HeadingItem", {
+Object.defineProperty(exports, "Footer", {
   enumerable: true,
   get: function get() {
-    return _Section.HeadingItem;
+    return _Footer.default;
   }
 });
-Object.defineProperty(exports, "SkeletonHeadingItem", {
+Object.defineProperty(exports, "GoBackItem", {
   enumerable: true,
   get: function get() {
-    return _Section.SkeletonHeadingItem;
+    return _Item.GoBackItem;
   }
 });
-Object.defineProperty(exports, "NestingItem", {
+Object.defineProperty(exports, "Header", {
   enumerable: true,
   get: function get() {
-    return _NestingItem.default;
+    return _Header.default;
   }
 });
-Object.defineProperty(exports, "NavigationContent", {
+Object.defineProperty(exports, "HeadingItem", {
   enumerable: true,
   get: function get() {
-    return _NavigationContent.default;
+    return _Section.HeadingItem;
   }
 });
-Object.defineProperty(exports, "ButtonItem", {
+Object.defineProperty(exports, "LinkItem", {
   enumerable: true,
   get: function get() {
-    return _Item.ButtonItem;
+    return _Item.LinkItem;
   }
 });
-Object.defineProperty(exports, "GoBackItem", {
+Object.defineProperty(exports, "LoadingItems", {
   enumerable: true,
   get: function get() {
-    return _Item.GoBackItem;
+    return _LoadingItems.default;
   }
 });
-Object.defineProperty(exports, "LinkItem", {
+Object.defineProperty(exports, "NavigationContent", {
   enumerable: true,
   get: function get() {
-    return _Item.LinkItem;
+    return _NavigationContent.default;
   }
 });
-Object.defineProperty(exports, "CustomItem", {
+Object.defineProperty(exports, "NavigationFooter", {
   enumerable: true,
   get: function get() {
-    return _Item.CustomItem;
+    return _NavigationFooter.default;
   }
 });
-Object.defineProperty(exports, "SkeletonItem", {
+Object.defineProperty(exports, "NavigationHeader", {
   enumerable: true,
   get: function get() {
-    return _Item.SkeletonItem;
+    return _NavigationHeader.default;
   }
 });
-Object.defineProperty(exports, "Footer", {
+Object.defineProperty(exports, "NestableNavigationContent", {
   enumerable: true,
   get: function get() {
-    return _Footer.default;
+    return _NestableNavigationContent.default;
   }
 });
-Object.defineProperty(exports, "Header", {
+Object.defineProperty(exports, "NestingItem", {
   enumerable: true,
   get: function get() {
-    return _Header.default;
+    return _NestingItem.default;
   }
 });
-Object.defineProperty(exports, "NavigationHeader", {
+Object.defineProperty(exports, "Section", {
   enumerable: true,
   get: function get() {
-    return _NavigationHeader.default;
+    return _Section.Section;
   }
 });
-Object.defineProperty(exports, "NavigationFooter", {
+Object.defineProperty(exports, "SideNavigation", {
   enumerable: true,
   get: function get() {
-    return _NavigationFooter.default;
+    return _SideNavigation.default;
   }
 });
-Object.defineProperty(exports, "LoadingItems", {
+Object.defineProperty(exports, "SkeletonHeadingItem", {
   enumerable: true,
   get: function get() {
-    return _LoadingItems.default;
+    return _Section.SkeletonHeadingItem;
   }
 });
-Object.defineProperty(exports, "NestableNavigationContent", {
+Object.defineProperty(exports, "SkeletonItem", {
   enumerable: true,
   get: function get() {
-    return _NestableNavigationContent.default;
+    return _Item.SkeletonItem;
   }
 });
 

package/dist/cjs/index.js

@@ -3,34 +3,34 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "SideNavigation", {
+Object.defineProperty(exports, "ButtonItem", {
   enumerable: true,
   get: function get() {
-    return _components.SideNavigation;
+    return _components.ButtonItem;
   }
 });
-Object.defineProperty(exports, "Header", {
+Object.defineProperty(exports, "CustomItem", {
   enumerable: true,
   get: function get() {
-    return _components.Header;
+    return _components.CustomItem;
   }
 });
-Object.defineProperty(exports, "NavigationHeader", {
+Object.defineProperty(exports, "Footer", {
   enumerable: true,
   get: function get() {
-    return _components.NavigationHeader;
+    return _components.Footer;
   }
 });
-Object.defineProperty(exports, "NavigationContent", {
+Object.defineProperty(exports, "GoBackItem", {
   enumerable: true,
   get: function get() {
-    return _components.NavigationContent;
+    return _components.GoBackItem;
   }
 });
-Object.defineProperty(exports, "Section", {
+Object.defineProperty(exports, "Header", {
   enumerable: true,
   get: function get() {
-    return _components.Section;
+    return _components.Header;
   }
 });
 Object.defineProperty(exports, "HeadingItem", {
@@ -39,76 +39,70 @@ Object.defineProperty(exports, "HeadingItem", {
     return _components.HeadingItem;
   }
 });
-Object.defineProperty(exports, "SkeletonHeadingItem", {
-  enumerable: true,
-  get: function get() {
-    return _components.SkeletonHeadingItem;
-  }
-});
-Object.defineProperty(exports, "NestableNavigationContent", {
+Object.defineProperty(exports, "LinkItem", {
   enumerable: true,
   get: function get() {
-    return _components.NestableNavigationContent;
+    return _components.LinkItem;
   }
 });
-Object.defineProperty(exports, "NestingItem", {
+Object.defineProperty(exports, "LoadingItems", {
   enumerable: true,
   get: function get() {
-    return _components.NestingItem;
+    return _components.LoadingItems;
   }
 });
-Object.defineProperty(exports, "ButtonItem", {
+Object.defineProperty(exports, "NavigationContent", {
   enumerable: true,
   get: function get() {
-    return _components.ButtonItem;
+    return _components.NavigationContent;
   }
 });
-Object.defineProperty(exports, "LinkItem", {
+Object.defineProperty(exports, "NavigationFooter", {
   enumerable: true,
   get: function get() {
-    return _components.LinkItem;
+    return _components.NavigationFooter;
   }
 });
-Object.defineProperty(exports, "GoBackItem", {
+Object.defineProperty(exports, "NavigationHeader", {
   enumerable: true,
   get: function get() {
-    return _components.GoBackItem;
+    return _components.NavigationHeader;
   }
 });
-Object.defineProperty(exports, "CustomItem", {
+Object.defineProperty(exports, "NestableNavigationContent", {
   enumerable: true,
   get: function get() {
-    return _components.CustomItem;
+    return _components.NestableNavigationContent;
   }
 });
-Object.defineProperty(exports, "SkeletonItem", {
+Object.defineProperty(exports, "NestingItem", {
   enumerable: true,
   get: function get() {
-    return _components.SkeletonItem;
+    return _components.NestingItem;
   }
 });
-Object.defineProperty(exports, "Footer", {
+Object.defineProperty(exports, "Section", {
   enumerable: true,
   get: function get() {
-    return _components.Footer;
+    return _components.Section;
   }
 });
-Object.defineProperty(exports, "NavigationFooter", {
+Object.defineProperty(exports, "SideNavigation", {
   enumerable: true,
   get: function get() {
-    return _components.NavigationFooter;
+    return _components.SideNavigation;
   }
 });
-Object.defineProperty(exports, "LoadingItems", {
+Object.defineProperty(exports, "SkeletonHeadingItem", {
   enumerable: true,
   get: function get() {
-    return _components.LoadingItems;
+    return _components.SkeletonHeadingItem;
   }
 });
-Object.defineProperty(exports, "useShouldNestedElementRender", {
+Object.defineProperty(exports, "SkeletonItem", {
   enumerable: true,
   get: function get() {
-    return _context.useShouldNestedElementRender;
+    return _components.SkeletonItem;
   }
 });
 Object.defineProperty(exports, "VAR_SCROLL_INDICATOR_COLOR", {
@@ -123,6 +117,12 @@ Object.defineProperty(exports, "VAR_SEPARATOR_COLOR", {
     return _constants.VAR_SEPARATOR_COLOR;
   }
 });
+Object.defineProperty(exports, "useShouldNestedElementRender", {
+  enumerable: true,
+  get: function get() {
+    return _context.useShouldNestedElementRender;
+  }
+});
 
 var _components = require("./components");
 

package/dist/cjs/version.json

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

package/dist/es2019/common/styles.js

@@ -1,6 +1,5 @@
 import { B400, B50, N10, N30, N500 } from '@atlaskit/theme/colors';
 import { borderRadius as borderRadiusFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 const gridSize = gridSizeFn();
 const borderRadius = borderRadiusFn();
 const itemIconSize = gridSize * 3;
@@ -10,6 +9,8 @@ export const ITEM_SIDE_PADDING = gridSize * 1.25;
  * 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 const overrideStyleFunction = (baseStyle, newStyle = () => ({})) => {
@@ -19,27 +20,27 @@ export const overrideStyleFunction = (baseStyle, newStyle = () => ({})) => {
 };
 const defaultStyles = {
   '&:hover': {
-    color: token('color.text.mediumEmphasis', N500),
-    backgroundColor: token('color.background.transparentNeutral.hover', N30)
+    color: `var(--ds-text-subtle, ${N500})`,
+    backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${N30})`
   },
   '&:active': {
-    color: token('color.text.mediumEmphasis', B400),
-    backgroundColor: token('color.background.transparentNeutral.pressed', B50)
+    color: `var(--ds-text-subtle, ${B400})`,
+    backgroundColor: `var(--ds-background-neutral-subtle-pressed, ${B50})`
   }
 };
 const selectedStyles = {
-  backgroundColor: token('color.background.selected.resting', N30),
-  color: token('color.text.selected', B400),
+  backgroundColor: `var(--ds-background-brand, ${N30})`,
+  color: `var(--ds-text-brand, ${B400})`,
   ':visited': {
-    color: token('color.text.selected', B400)
+    color: `var(--ds-text-brand, ${B400})`
   },
   '&:hover': {
-    backgroundColor: token('color.background.selected.hover', N30),
-    color: token('color.text.selected', N500)
+    backgroundColor: `var(--ds-background-brand-hovered, ${N30})`,
+    color: `var(--ds-text-brand, ${N500})`
   },
   '&:active': {
-    backgroundColor: token('color.background.selected.pressed', B50),
-    color: token('color.text.selected', B400)
+    backgroundColor: `var(--ds-background-brand-pressed, ${B50})`,
+    color: `var(--ds-text-brand, ${B400})`
   }
 };
 export const baseSideNavItemStyle = ({
@@ -54,7 +55,7 @@ export const baseSideNavItemStyle = ({
     // -- TODO: DELETE THESE COLOR OVERRIDES WHEN CLEANING UP FALLBACK THEMING --
     // Menu and side navigation are now color aligned so they do not need this!
     // See: https://product-fabric.atlassian.net/browse/DSP-1684
-    backgroundColor: token('color.background.default', N10),
+    backgroundColor: `var(--ds-surface, ${N10})`,
     ...(!isDisabled && !isSelected && defaultStyles),
     ...(!isDisabled && isSelected && selectedStyles),
     // -- END TODO --------------------------------------------------------------

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

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { N500 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { overrideStyleFunction } from '../../common/styles';
 import { CustomItem } from '../Item';
 
@@ -38,7 +37,7 @@ const Footer = props => {
     },
     'div&:active': {
       backgroundColor: 'transparent',
-      color: token('color.text.mediumEmphasis', N500)
+      color: `var(--ds-text-subtle, ${N500})`
     }
   }), props.cssFn);
   return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {

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

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef } from 'react';
 import { N500 } from '@atlaskit/theme/colors';
 import { headingSizes } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 import { overrideStyleFunction } from '../../common/styles';
 import { CustomItem } from '../Item';
 
@@ -17,7 +16,7 @@ const Header = /*#__PURE__*/forwardRef((props, ref) => {
       fontSize: headingSizes.h400.size,
       letterSpacing: '-0.003em',
       fontWeight: 600,
-      color: token('color.text.highEmphasis', N500)
+      color: `var(--ds-text, ${N500})`
     },
     // Will look interactive if the `component` is anything other than a div.
     'div&:hover': {
@@ -26,7 +25,7 @@ const Header = /*#__PURE__*/forwardRef((props, ref) => {
     },
     'div&:active': {
       backgroundColor: 'transparent',
-      color: token('color.text.highEmphasis', N500)
+      color: `var(--ds-text, ${N500})`
     }
   }), props.cssFn);
   return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {

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

@@ -16,7 +16,8 @@ const ButtonItem = /*#__PURE__*/forwardRef( // Type needed on props to extract t
     return null;
   }
 
-  const cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn);
+  const cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+
   return /*#__PURE__*/React.createElement(Button, _extends({
     ref: ref,
     cssFn: cssOverride

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

@@ -21,7 +21,8 @@ const CustomItem = /*#__PURE__*/forwardRef( // Type needed on props to extract t
     return null;
   }
 
-  const cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn);
+  const cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+
   return /*#__PURE__*/React.createElement(Custom, _extends({
     ref: ref,
     cssFn: cssOverride

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

@@ -2,12 +2,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef, useCallback, useState } from 'react';
 import LeftArrow from '@atlaskit/icon/glyph/arrow-left-circle';
 import { N10 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import ButtonItem from './button-item';
 const GoBackItem = /*#__PURE__*/forwardRef(({
   cssFn,
   iconBefore = /*#__PURE__*/React.createElement(LeftArrow, {
-    secondaryColor: token('color.background.default', N10),
+    secondaryColor: `var(--ds-surface, ${N10})`,
     label: ""
   }),
   onClick,

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

@@ -16,7 +16,8 @@ const LinkItem = /*#__PURE__*/forwardRef( // Type needed on props to extract typ
     return null;
   }
 
-  const cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn);
+  const cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+
   return /*#__PURE__*/React.createElement(Link, _extends({
     ref: ref,
     cssFn: cssOverride

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

@@ -13,7 +13,8 @@ const SkeletonItem = props => {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(SkelItem, _extends({
+  return /*#__PURE__*/React.createElement(SkelItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+  , _extends({
     cssFn: () => ({
       paddingLeft: ITEM_SIDE_PADDING,
       paddingRight: ITEM_SIDE_PADDING,

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

@@ -1,7 +1,6 @@
 import { N10, N30 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 import { VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR } from '../../common/constants';
 const scrollIndicatorMaskZIndex = 2;
 const scrollIndicatorZIndex = 1;
@@ -39,7 +38,7 @@ export const outerContainerCSS = opts => ({
     right: containerPadding + opts.scrollbarWidth,
     height: scrollIndicatorHeight,
     borderRadius: scrollIndicatorBorderRadius,
-    backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${token('color.border.neutral', N30)})`,
+    backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${`var(--ds-border, ${N30})`})`,
     position: 'absolute',
     zIndex: scrollIndicatorZIndex
   },
@@ -54,7 +53,7 @@ export const outerContainerCSS = opts => ({
     right: containerPadding + opts.scrollbarWidth,
     bottom: 0,
     zIndex: scrollIndicatorZIndex,
-    backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${token('color.border.neutral', N30)})`
+    backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${`var(--ds-border, ${N30})`})`
   }
 });
 /**
@@ -79,7 +78,7 @@ export const innerContainerCSS = opts => ({
       left: 0,
       right: 0,
       height: scrollIndicatorHeight,
-      backgroundColor: `var(${VAR_SCROLL_INDICATOR_COLOR}, ${token('color.background.default', N10)})`,
+      backgroundColor: `var(${VAR_SCROLL_INDICATOR_COLOR}, ${`var(--ds-surface, ${N10})`})`,
       position: 'absolute',
       display: 'block',
       zIndex: scrollIndicatorMaskZIndex
@@ -97,7 +96,7 @@ export const innerContainerCSS = opts => ({
     marginTop: 'auto',
     position: 'relative',
     zIndex: scrollIndicatorMaskZIndex,
-    backgroundColor: `var(${VAR_SCROLL_INDICATOR_COLOR}, ${token('color.background.default', N10)})`
+    backgroundColor: `var(${VAR_SCROLL_INDICATOR_COLOR}, ${`var(--ds-surface, ${N10})`})`
   }
 });
 export const containerCSS = opts => ({

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

@@ -6,7 +6,6 @@ import { jsx } from '@emotion/core';
 import RightArrow from '@atlaskit/icon/glyph/arrow-right-circle';
 import { N10 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import { overrideStyleFunction } from '../../common/styles';
 import { ButtonItem, CustomItem, NavigationContent } from '../index';
 import { ROOT_ID } from '../NestableNavigationContent';
@@ -104,7 +103,7 @@ const NestingItem = props => {
       "data-right-arrow": true
     }, jsx(RightArrow, {
       testId: testId && `${testId}--item--right-arrow`,
-      secondaryColor: token('color.background.default', N10),
+      secondaryColor: `var(--ds-surface, ${N10})`,
       label: ""
     }))),
     onClick: onClickHandler,

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

@@ -13,7 +13,8 @@ const HeadingItem = props => {
     return null;
   }
 
-  const cssFn = overrideStyleFunction(sectionHeaderStyle, props.cssFn);
+  const cssFn = overrideStyleFunction(sectionHeaderStyle, props.cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+
   return /*#__PURE__*/React.createElement(MenuHeadingItem, _extends({}, props, {
     cssFn: cssFn
   }));

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

@@ -14,7 +14,8 @@ const Section = /*#__PURE__*/forwardRef((props, ref) => {
   }
 
   return /*#__PURE__*/React.createElement(MenuSection, _extends({}, props, {
-    ref: ref,
+    ref: ref // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+    ,
     overrides: {
       HeadingItem: {
         cssFn: sectionHeaderStyle

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

@@ -13,7 +13,8 @@ const SkeletonHeadingItem = props => {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(MenuSkeletonHeadingItem, _extends({
+  return /*#__PURE__*/React.createElement(MenuSkeletonHeadingItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+  , _extends({
     cssFn: () => ({
       paddingLeft: ITEM_SIDE_PADDING,
       paddingRight: ITEM_SIDE_PADDING

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

@@ -3,7 +3,6 @@ import { forwardRef } from 'react';
 import { jsx } from '@emotion/core';
 import { N10, N500 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 const SideNavigation = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     children,
@@ -17,9 +16,9 @@ const SideNavigation = /*#__PURE__*/forwardRef((props, ref) => {
     css: {
       width: '100%',
       height: '100%',
-      color: token('color.text.mediumEmphasis', N500),
+      color: `var(--ds-text-subtle, ${N500})`,
       minWidth: gridSize() * 30,
-      backgroundColor: token('color.background.default', N10),
+      backgroundColor: `var(--ds-surface, ${N10})`,
       position: 'relative',
       display: 'flex',
       flexDirection: 'column',

package/dist/es2019/version.json

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