@atlaskit/side-navigation 1.1.2

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

@@ -0,0 +1,3 @@
+export { default as HeadingItem } from './heading-item';
+export { default as Section } from './section';
+export { default as SkeletonHeadingItem } from './skeleton-heading-item';

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

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef } from 'react';
+import { Section as MenuSection } from '@atlaskit/menu';
+import { sectionHeaderStyle } from '../../common/styles';
+import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
+// Type needed on props to extract types with extract react types.
+const Section = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    shouldRender
+  } = useShouldNestedElementRender();
+
+  if (!shouldRender) {
+    return props.children;
+  }
+
+  return /*#__PURE__*/React.createElement(MenuSection, _extends({}, props, {
+    ref: ref,
+    overrides: {
+      HeadingItem: {
+        cssFn: sectionHeaderStyle
+      }
+    }
+  }));
+});
+export default Section;

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

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { SkeletonHeadingItem as MenuSkeletonHeadingItem } from '@atlaskit/menu';
+import { ITEM_SIDE_PADDING } from '../../common/styles';
+import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
+
+const SkeletonHeadingItem = props => {
+  const {
+    shouldRender
+  } = useShouldNestedElementRender();
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(MenuSkeletonHeadingItem, _extends({
+    cssFn: () => ({
+      paddingLeft: ITEM_SIDE_PADDING,
+      paddingRight: ITEM_SIDE_PADDING
+    })
+  }, props));
+};
+
+export default SkeletonHeadingItem;

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

@@ -0,0 +1,30 @@
+/** @jsx jsx */
+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,
+    testId,
+    label
+  } = props;
+  return jsx("nav", {
+    ref: ref,
+    "data-testid": testId,
+    "aria-label": label,
+    css: {
+      width: '100%',
+      height: '100%',
+      color: token('color.text.mediumEmphasis', N500),
+      minWidth: gridSize() * 30,
+      backgroundColor: token('color.background.default', N10),
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden'
+    }
+  }, children);
+});
+export default SideNavigation;

package/dist/es2019/components/index.js

@@ -0,0 +1,11 @@
+export { default as SideNavigation } from './SideNavigation';
+export { Section, HeadingItem, SkeletonHeadingItem } from './Section';
+export { default as NestingItem } from './NestingItem';
+export { default as NavigationContent } from './NavigationContent';
+export { ButtonItem, GoBackItem, LinkItem, CustomItem, SkeletonItem } from './Item';
+export { default as Footer } from './Footer';
+export { default as Header } from './Header';
+export { default as NavigationHeader } from './NavigationHeader';
+export { default as NavigationFooter } from './NavigationFooter';
+export { default as LoadingItems } from './LoadingItems';
+export { default as NestableNavigationContent } from './NestableNavigationContent';

package/dist/es2019/index.js

@@ -0,0 +1,3 @@
+export { SideNavigation, Header, NavigationHeader, NavigationContent, Section, HeadingItem, SkeletonHeadingItem, NestableNavigationContent, NestingItem, ButtonItem, LinkItem, GoBackItem, CustomItem, SkeletonItem, Footer, NavigationFooter, LoadingItems } from './components';
+export { useShouldNestedElementRender } from './components/NestableNavigationContent/context';
+export { VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR } from './common/constants';

package/dist/es2019/version.json

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

package/dist/esm/common/constants.js

@@ -0,0 +1,2 @@
+export var VAR_SEPARATOR_COLOR = '--ds-menu-seperator-color';
+export var VAR_SCROLL_INDICATOR_COLOR = '--ds-menu-scroll-indicator-color';

package/dist/esm/common/styles.js

@@ -0,0 +1,82 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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';
+var gridSize = gridSizeFn();
+var borderRadius = borderRadiusFn();
+var itemIconSize = gridSize * 3;
+var leftIconRightSpacing = gridSize * 2;
+export var 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
+ */
+
+export var overrideStyleFunction = function overrideStyleFunction(baseStyle) {
+  var newStyle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
+    return {};
+  };
+  return function (state) {
+    return [baseStyle(state), newStyle(state)];
+  };
+};
+var defaultStyles = {
+  '&:hover': {
+    color: token('color.text.mediumEmphasis', N500),
+    backgroundColor: token('color.background.transparentNeutral.hover', N30)
+  },
+  '&:active': {
+    color: token('color.text.mediumEmphasis', B400),
+    backgroundColor: token('color.background.transparentNeutral.pressed', B50)
+  }
+};
+var selectedStyles = {
+  backgroundColor: token('color.background.selected.resting', N30),
+  color: token('color.text.selected', B400),
+  ':visited': {
+    color: token('color.text.selected', B400)
+  },
+  '&:hover': {
+    backgroundColor: token('color.background.selected.hover', N30),
+    color: token('color.text.selected', N500)
+  },
+  '&:active': {
+    backgroundColor: token('color.background.selected.pressed', B50),
+    color: token('color.text.selected', B400)
+  }
+};
+export var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
+  var isSelected = _ref.isSelected,
+      isDisabled = _ref.isDisabled;
+  return _objectSpread(_objectSpread(_objectSpread({
+    // This padding is set to ensure that the center of the left icon
+    // is approximately center aligned with the horizontal app switcher.
+    padding: "".concat(gridSize, "px ").concat(ITEM_SIDE_PADDING, "px"),
+    borderRadius: borderRadius,
+    // -- 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)
+  }, !isDisabled && !isSelected && defaultStyles), !isDisabled && isSelected && selectedStyles), {}, _defineProperty({}, '& [data-item-elem-before]', {
+    // TODO: Can this be moved into menu?
+    // center align icons with app-switcher regardless of size
+    display: 'flex',
+    height: itemIconSize,
+    width: itemIconSize,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: leftIconRightSpacing
+  }));
+};
+export var sectionHeaderStyle = function sectionHeaderStyle() {
+  return {
+    paddingLeft: "".concat(ITEM_SIDE_PADDING, "px"),
+    paddingRight: "".concat(ITEM_SIDE_PADDING, "px")
+  };
+};

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

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { N500 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+import { overrideStyleFunction } from '../../common/styles';
+import { CustomItem } from '../Item';
+
+var Container = function Container(props) {
+  return /*#__PURE__*/React.createElement("div", props);
+};
+
+var Footer = function Footer(props) {
+  var cssFn = overrideStyleFunction(function () {
+    var _ref;
+
+    return _ref = {
+      userSelect: 'auto',
+      div: {
+        display: 'block',
+        textAlign: 'center',
+        minHeight: '24px',
+        alignItems: 'center',
+        width: '100%'
+      }
+    }, _defineProperty(_ref, '[data-item-elem-before]', {
+      marginRight: 0,
+      marginBottom: '8px',
+      display: 'inline-block'
+    }), _defineProperty(_ref, '[data-item-title]', {
+      textAlign: 'center',
+      fontSize: 12
+    }), _defineProperty(_ref, '[data-item-description]', {
+      textAlign: 'center',
+      display: 'inline-block',
+      margin: '6px'
+    }), _defineProperty(_ref, 'div&:hover', {
+      backgroundColor: 'transparent',
+      cursor: 'default'
+    }), _defineProperty(_ref, 'div&:active', {
+      backgroundColor: 'transparent',
+      color: token('color.text.mediumEmphasis', N500)
+    }), _ref;
+  }, props.cssFn);
+  return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {
+    component: props.component || Container,
+    cssFn: cssFn
+  }));
+};
+
+export default Footer;

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

@@ -0,0 +1,50 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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';
+
+var Container = function Container(props) {
+  return /*#__PURE__*/React.createElement("div", props);
+};
+
+var Header = /*#__PURE__*/forwardRef(function (props, ref) {
+  var cssFn = overrideStyleFunction(function () {
+    var _ref;
+
+    return _ref = {
+      userSelect: 'auto'
+    }, _defineProperty(_ref, '[data-item-title]', {
+      fontSize: headingSizes.h400.size,
+      letterSpacing: '-0.003em',
+      fontWeight: 600,
+      color: token('color.text.highEmphasis', N500)
+    }), _defineProperty(_ref, 'div&:hover', {
+      backgroundColor: 'transparent',
+      cursor: 'default'
+    }), _defineProperty(_ref, 'div&:active', {
+      backgroundColor: 'transparent',
+      color: token('color.text.highEmphasis', N500)
+    }), _ref;
+  }, props.cssFn);
+  return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {
+    ref: ref,
+    component: props.component || Container,
+    cssFn: cssFn,
+    overrides: {
+      Title: {
+        render: function render(_, _ref2) {
+          var children = _ref2.children,
+              props = _objectWithoutProperties(_ref2, ["children"]);
+
+          return /*#__PURE__*/React.createElement("h2", props, children);
+        }
+      }
+    }
+  }));
+});
+export default Header;

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

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import React, { forwardRef } from 'react';
+import { ButtonItem as Button } from '@atlaskit/menu';
+import { baseSideNavItemStyle, overrideStyleFunction } from '../../common/styles';
+import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
+var ButtonItem = /*#__PURE__*/forwardRef( // Type needed on props to extract types with extract react types.
+function (_ref, ref) {
+  var cssFn = _ref.cssFn,
+      rest = _objectWithoutProperties(_ref, ["cssFn"]);
+
+  var _useShouldNestedEleme = useShouldNestedElementRender(),
+      shouldRender = _useShouldNestedEleme.shouldRender;
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  var cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn);
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    ref: ref,
+    cssFn: cssOverride
+  }, rest));
+});
+export default ButtonItem;

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

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import React, { forwardRef } from 'react';
+import { CustomItem as Custom } from '@atlaskit/menu';
+import { baseSideNavItemStyle, overrideStyleFunction } from '../../common/styles';
+import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
+
+/**
+ * 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.
+ */
+var CustomItem = /*#__PURE__*/forwardRef( // Type needed on props to extract types with extract react types.
+function (_ref, ref) {
+  var cssFn = _ref.cssFn,
+      rest = _objectWithoutProperties(_ref, ["cssFn"]);
+
+  var _useShouldNestedEleme = useShouldNestedElementRender(),
+      shouldRender = _useShouldNestedEleme.shouldRender;
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  var cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn);
+  return /*#__PURE__*/React.createElement(Custom, _extends({
+    ref: ref,
+    cssFn: cssOverride
+  }, rest));
+} // Dirty hack to get generics working with forward ref [2/2]
+);
+export default CustomItem;

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

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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';
+var GoBackItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var cssFn = _ref.cssFn,
+      _ref$iconBefore = _ref.iconBefore,
+      iconBefore = _ref$iconBefore === void 0 ? /*#__PURE__*/React.createElement(LeftArrow, {
+    secondaryColor: token('color.background.default', N10),
+    label: ""
+  }) : _ref$iconBefore,
+      onClick = _ref.onClick,
+      isSelected = _ref.isSelected,
+      rest = _objectWithoutProperties(_ref, ["cssFn", "iconBefore", "onClick", "isSelected"]);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isInteracted = _useState2[0],
+      setIsInteracted = _useState2[1];
+
+  var onClickHandler = useCallback(function (e) {
+    if (isInteracted) {
+      return;
+    }
+
+    setIsInteracted(true);
+    onClick && onClick(e);
+  }, [onClick, isInteracted]);
+  return /*#__PURE__*/React.createElement(ButtonItem, _extends({
+    isSelected: isSelected || isInteracted,
+    cssFn: cssFn,
+    iconBefore: iconBefore,
+    onClick: onClickHandler,
+    ref: ref
+  }, rest));
+});
+export default GoBackItem;

package/dist/esm/components/Item/index.js

@@ -0,0 +1,5 @@
+export { default as ButtonItem } from './button-item';
+export { default as CustomItem } from './custom-item';
+export { default as GoBackItem } from './go-back-item';
+export { default as LinkItem } from './link-item';
+export { default as SkeletonItem } from './skeleton-item';

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

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import React, { forwardRef } from 'react';
+import { LinkItem as Link } from '@atlaskit/menu';
+import { baseSideNavItemStyle, overrideStyleFunction } from '../../common/styles';
+import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
+var LinkItem = /*#__PURE__*/forwardRef( // Type needed on props to extract types with extract react types.
+function (_ref, ref) {
+  var cssFn = _ref.cssFn,
+      rest = _objectWithoutProperties(_ref, ["cssFn"]);
+
+  var _useShouldNestedEleme = useShouldNestedElementRender(),
+      shouldRender = _useShouldNestedEleme.shouldRender;
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  var cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn);
+  return /*#__PURE__*/React.createElement(Link, _extends({
+    ref: ref,
+    cssFn: cssOverride
+  }, rest));
+});
+export default LinkItem;

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

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { SkeletonItem as SkelItem } from '@atlaskit/menu';
+import { ITEM_SIDE_PADDING } from '../../common/styles';
+import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
+
+var SkeletonItem = function SkeletonItem(props) {
+  var _useShouldNestedEleme = useShouldNestedElementRender(),
+      shouldRender = _useShouldNestedEleme.shouldRender;
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(SkelItem, _extends({
+    cssFn: function cssFn() {
+      return {
+        paddingLeft: ITEM_SIDE_PADDING,
+        paddingRight: ITEM_SIDE_PADDING,
+        '&&::before': {
+          // This doubles up & to get a higher specificity as well as to not overwite the base styles.
+          marginRight: 18
+        }
+      };
+    }
+  }, props));
+};
+
+export default SkeletonItem;