@atlaskit/side-navigation 1.1.2

package/dist/cjs/version.json

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

package/dist/es2019/common/constants.js

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

package/dist/es2019/common/styles.js

@@ -0,0 +1,78 @@
+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;
+const leftIconRightSpacing = gridSize * 2;
+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
+ */
+
+export const overrideStyleFunction = (baseStyle, newStyle = () => ({})) => {
+  return state => {
+    return [baseStyle(state), newStyle(state)];
+  };
+};
+const 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)
+  }
+};
+const 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 const baseSideNavItemStyle = ({
+  isSelected,
+  isDisabled
+}) => {
+  return {
+    // This padding is set to ensure that the center of the left icon
+    // is approximately center aligned with the horizontal app switcher.
+    padding: `${gridSize}px ${ITEM_SIDE_PADDING}px`,
+    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),
+    // -- END TODO --------------------------------------------------------------
+    ['& [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 const sectionHeaderStyle = () => {
+  return {
+    paddingLeft: `${ITEM_SIDE_PADDING}px`,
+    paddingRight: `${ITEM_SIDE_PADDING}px`
+  };
+};

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

@@ -0,0 +1,52 @@
+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';
+
+const Container = props => {
+  return /*#__PURE__*/React.createElement("div", props);
+};
+
+const Footer = props => {
+  const cssFn = overrideStyleFunction(() => ({
+    userSelect: 'auto',
+    div: {
+      display: 'block',
+      textAlign: 'center',
+      minHeight: '24px',
+      alignItems: 'center',
+      width: '100%'
+    },
+    ['[data-item-elem-before]']: {
+      marginRight: 0,
+      marginBottom: '8px',
+      display: 'inline-block'
+    },
+    ['[data-item-title]']: {
+      textAlign: 'center',
+      fontSize: 12
+    },
+    ['[data-item-description]']: {
+      textAlign: 'center',
+      display: 'inline-block',
+      margin: '6px'
+    },
+    // Will look interactive if the `component` is anything other than a div.
+    'div&:hover': {
+      backgroundColor: 'transparent',
+      cursor: 'default'
+    },
+    'div&:active': {
+      backgroundColor: 'transparent',
+      color: token('color.text.mediumEmphasis', N500)
+    }
+  }), props.cssFn);
+  return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {
+    component: props.component || Container,
+    cssFn: cssFn
+  }));
+};
+
+export default Footer;

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

@@ -0,0 +1,46 @@
+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';
+
+const Container = props => {
+  return /*#__PURE__*/React.createElement("div", props);
+};
+
+const Header = /*#__PURE__*/forwardRef((props, ref) => {
+  const cssFn = overrideStyleFunction(() => ({
+    userSelect: 'auto',
+    ['[data-item-title]']: {
+      fontSize: headingSizes.h400.size,
+      letterSpacing: '-0.003em',
+      fontWeight: 600,
+      color: token('color.text.highEmphasis', N500)
+    },
+    // Will look interactive if the `component` is anything other than a div.
+    'div&:hover': {
+      backgroundColor: 'transparent',
+      cursor: 'default'
+    },
+    'div&:active': {
+      backgroundColor: 'transparent',
+      color: token('color.text.highEmphasis', N500)
+    }
+  }), props.cssFn);
+  return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {
+    ref: ref,
+    component: props.component || Container,
+    cssFn: cssFn,
+    overrides: {
+      Title: {
+        render: (_, {
+          children,
+          ...props
+        }) => /*#__PURE__*/React.createElement("h2", props, children)
+      }
+    }
+  }));
+});
+export default Header;

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

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

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

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/extends";
+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.
+ */
+const CustomItem = /*#__PURE__*/forwardRef( // Type needed on props to extract types with extract react types.
+({
+  cssFn,
+  ...rest
+}, ref) => {
+  const {
+    shouldRender
+  } = useShouldNestedElementRender();
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  const 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/es2019/components/Item/go-back-item.js

@@ -0,0 +1,34 @@
+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),
+    label: ""
+  }),
+  onClick,
+  isSelected,
+  ...rest
+}, ref) => {
+  const [isInteracted, setIsInteracted] = useState(false);
+  const onClickHandler = useCallback(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/es2019/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/es2019/components/Item/link-item.js

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

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

@@ -0,0 +1,28 @@
+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';
+
+const SkeletonItem = props => {
+  const {
+    shouldRender
+  } = useShouldNestedElementRender();
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(SkelItem, _extends({
+    cssFn: () => ({
+      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;

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

@@ -0,0 +1,38 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { ExitingPersistence, FadeIn, mediumDurationMs } from '@atlaskit/motion';
+import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
+
+const LoadingItems = ({
+  children,
+  isLoading,
+  fallback,
+  testId
+}) => {
+  const {
+    shouldRender
+  } = useShouldNestedElementRender();
+
+  if (!shouldRender) {
+    return children;
+  }
+
+  return jsx(ExitingPersistence, null, jsx(FadeIn, {
+    key: `loading-section-${isLoading}`,
+    duration: mediumDurationMs
+  }, (motion, state) => jsx("span", _extends({}, motion, {
+    "data-testid": testId && `${testId}--${state}`,
+    css: {
+      // Used to have the exiting section appear above the entering one.
+      position: state === 'entering' ? undefined : 'absolute',
+      zIndex: state === 'entering' ? 2 : 1,
+      top: 0,
+      left: 0,
+      right: 0
+    }
+  }), isLoading ? fallback : children)));
+};
+
+export default LoadingItems;

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

@@ -0,0 +1,38 @@
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { jsx } from '@emotion/core';
+import useScrollbarWidth from '@atlaskit/ds-lib/use-scrollbar-width';
+import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
+import { containerCSS, innerContainerCSS, outerContainerCSS } from './styles';
+const NavigationContent = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    showTopScrollIndicator,
+    children
+  } = props;
+  const {
+    shouldRender
+  } = useShouldNestedElementRender();
+  const scrollbar = useScrollbarWidth();
+
+  if (!shouldRender) {
+    return children;
+  }
+
+  return jsx("div", {
+    ref: ref,
+    css: outerContainerCSS({
+      showTopScrollIndicator,
+      scrollbarWidth: scrollbar.width
+    })
+  }, jsx("div", {
+    ref: scrollbar.ref,
+    css: innerContainerCSS({
+      showTopScrollIndicator
+    })
+  }, jsx("div", {
+    css: containerCSS({
+      showTopScrollIndicator
+    })
+  }, children)));
+});
+export default NavigationContent;

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

@@ -0,0 +1,120 @@
+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;
+const scrollIndicatorHeight = 2;
+const scrollIndicatorBorderRadius = 1;
+const containerPadding = gridSize();
+const itemHeadingTopMargin = containerPadding * 2.5;
+const itemHeadingBottomMargin = containerPadding * 0.75; // 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 itemHeadingContentHeight = headingSizes.h100.lineHeight;
+const skeletonHeadingHeight = containerPadding;
+const skeletonHeadingMarginOffset = 3;
+const skeletonHeadingTopMargin = itemHeadingTopMargin + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset; // We want to move the entire body up by 3px without affecting the height of the skeleton container.
+
+const skeletonHeadingBottomMargin = itemHeadingBottomMargin + 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: containerPadding,
+    right: containerPadding + opts.scrollbarWidth,
+    height: scrollIndicatorHeight,
+    borderRadius: scrollIndicatorBorderRadius,
+    backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${token('color.border.neutral', N30)})`,
+    position: 'absolute',
+    zIndex: scrollIndicatorZIndex
+  },
+  '&::after': {
+    content: "''",
+    position: 'absolute',
+    display: 'block',
+    borderRadius: scrollIndicatorBorderRadius,
+    flexShrink: 0,
+    height: scrollIndicatorHeight,
+    left: containerPadding,
+    right: containerPadding + opts.scrollbarWidth,
+    bottom: 0,
+    zIndex: scrollIndicatorZIndex,
+    backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${token('color.border.neutral', N30)})`
+  }
+});
+/**
+ * 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: scrollIndicatorBorderRadius,
+      content: "''",
+      left: 0,
+      right: 0,
+      height: scrollIndicatorHeight,
+      backgroundColor: `var(${VAR_SCROLL_INDICATOR_COLOR}, ${token('color.background.default', N10)})`,
+      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: 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}, ${token('color.background.default', N10)})`
+  }
+});
+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: containerPadding,
+  marginRight: containerPadding,
+  // Enables child absolutely positioned elements to be positioned relative to this element.
+  position: 'relative',
+  '& [data-ds--menu--heading-item]': {
+    marginTop: itemHeadingTopMargin,
+    marginBottom: itemHeadingBottomMargin
+  },
+  '& [data-ds--menu--skeleton-heading-item]': {
+    marginTop: skeletonHeadingTopMargin,
+    marginBottom: skeletonHeadingBottomMargin
+  }
+});