@atlaskit/side-navigation 1.1.2

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

@@ -0,0 +1,39 @@
+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';
+
+var LoadingItems = function LoadingItems(_ref) {
+  var children = _ref.children,
+      isLoading = _ref.isLoading,
+      fallback = _ref.fallback,
+      testId = _ref.testId;
+
+  var _useShouldNestedEleme = useShouldNestedElementRender(),
+      shouldRender = _useShouldNestedEleme.shouldRender;
+
+  if (!shouldRender) {
+    return children;
+  }
+
+  return jsx(ExitingPersistence, null, jsx(FadeIn, {
+    key: "loading-section-".concat(isLoading),
+    duration: mediumDurationMs
+  }, function (motion, state) {
+    return jsx("span", _extends({}, motion, {
+      "data-testid": testId && "".concat(testId, "--").concat(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/esm/components/NavigationContent/index.js

@@ -0,0 +1,37 @@
+/** @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';
+var NavigationContent = /*#__PURE__*/forwardRef(function (props, ref) {
+  var showTopScrollIndicator = props.showTopScrollIndicator,
+      children = props.children;
+
+  var _useShouldNestedEleme = useShouldNestedElementRender(),
+      shouldRender = _useShouldNestedEleme.shouldRender;
+
+  var scrollbar = useScrollbarWidth();
+
+  if (!shouldRender) {
+    return children;
+  }
+
+  return jsx("div", {
+    ref: ref,
+    css: outerContainerCSS({
+      showTopScrollIndicator: showTopScrollIndicator,
+      scrollbarWidth: scrollbar.width
+    })
+  }, jsx("div", {
+    ref: scrollbar.ref,
+    css: innerContainerCSS({
+      showTopScrollIndicator: showTopScrollIndicator
+    })
+  }, jsx("div", {
+    css: containerCSS({
+      showTopScrollIndicator: showTopScrollIndicator
+    })
+  }, children)));
+});
+export default NavigationContent;

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

@@ -0,0 +1,130 @@
+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 { 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';
+var scrollIndicatorMaskZIndex = 2;
+var scrollIndicatorZIndex = 1;
+var scrollIndicatorHeight = 2;
+var scrollIndicatorBorderRadius = 1;
+var containerPadding = gridSize();
+var itemHeadingTopMargin = containerPadding * 2.5;
+var 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.
+
+var itemHeadingContentHeight = headingSizes.h100.lineHeight;
+var skeletonHeadingHeight = containerPadding;
+var skeletonHeadingMarginOffset = 3;
+var skeletonHeadingTopMargin = itemHeadingTopMargin + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset; // We want to move the entire body up by 3px without affecting the height of the skeleton container.
+
+var 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 var 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: containerPadding,
+      right: containerPadding + opts.scrollbarWidth,
+      height: scrollIndicatorHeight,
+      borderRadius: scrollIndicatorBorderRadius,
+      backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ").concat(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(".concat(VAR_SEPARATOR_COLOR, ", ").concat(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 var innerContainerCSS = function innerContainerCSS(opts) {
+  return _objectSpread(_objectSpread({
+    display: 'flex',
+    overflow: 'auto',
+    width: '100%',
+    position: 'relative',
+    boxSizing: 'border-box',
+    flexDirection: 'column'
+  }, !opts.showTopScrollIndicator && {
+    '&::before': {
+      borderRadius: scrollIndicatorBorderRadius,
+      content: "''",
+      left: 0,
+      right: 0,
+      height: scrollIndicatorHeight,
+      backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ").concat(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(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ").concat(token('color.background.default', N10), ")")
+    }
+  });
+};
+export var 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: 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
+    }
+  };
+};

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

@@ -0,0 +1,17 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { gridSize } from '@atlaskit/theme/constants';
+var footerCSS = {
+  position: 'relative',
+  padding: gridSize(),
+  paddingBottom: gridSize() * 1.75
+};
+
+var NavigationFooter = function NavigationFooter(_ref) {
+  var children = _ref.children;
+  return jsx("div", {
+    css: footerCSS
+  }, children);
+};
+
+export default NavigationFooter;

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

@@ -0,0 +1,18 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { gridSize } from '@atlaskit/theme/constants';
+
+var NavigationHeader = function NavigationHeader(props) {
+  var children = props.children;
+  return jsx("div", {
+    "data-navheader": true,
+    css: {
+      paddingTop: gridSize() * 3,
+      paddingBottom: gridSize(),
+      paddingLeft: gridSize(),
+      paddingRight: gridSize()
+    }
+  }, children);
+};
+
+export default NavigationHeader;

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

@@ -0,0 +1,36 @@
+import { createContext, useContext } from 'react';
+export var NestedContext = /*#__PURE__*/createContext(undefined);
+export var useNestedContext = function useNestedContext() {
+  var context = 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.
+ */
+
+export var useShouldNestedElementRender = function useShouldNestedElementRender() {
+  var context = useContext(NestedContext);
+
+  if (!context) {
+    return {
+      shouldRender: true
+    };
+  }
+
+  return {
+    shouldRender: context.currentStackId === context.parentId
+  };
+};

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

@@ -0,0 +1,163 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/** @jsx jsx */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { jsx } from '@emotion/core';
+import { ExitingPersistence } from '@atlaskit/motion';
+import { GoBackItem as GoBackButton } from '../Item';
+import { default as NestingItem } from '../NestingItem';
+import { NestedContext } from './context';
+import { NestingMotion } from './nesting-motion'; // Named so ERT doesn't pick up the override name as a type.
+
+export var ROOT_ID = 'ATLASKIT_NESTED_ROOT';
+
+var NestableNavigationContent = function NestableNavigationContent(props) {
+  var containerRef = useRef(null);
+  var children = props.children,
+      testId = props.testId,
+      overrides = props.overrides,
+      initialStack = props.initialStack,
+      onChange = props.onChange,
+      stack = props.stack;
+
+  var _useState = useState(stack || initialStack || []),
+      _useState2 = _slicedToArray(_useState, 2),
+      committedStack = _useState2[0],
+      setCommittedStack = _useState2[1];
+
+  var controlledStack = stack || undefined;
+  var currentStackId = committedStack[committedStack.length - 1] || ROOT_ID;
+
+  var _useState3 = useState('nesting'),
+      _useState4 = _slicedToArray(_useState3, 2),
+      transition = _useState4[0],
+      setTransition = _useState4[1];
+
+  var backTestId = testId && "".concat(testId, "--go-back-item");
+  var renderGoBackItem = overrides && overrides.GoBackItem && overrides.GoBackItem.render ? overrides.GoBackItem.render : function (props) {
+    return jsx(GoBackButton, props, "Go back");
+  };
+  var onNestHandler = useCallback(function (layerId) {
+    onChange && onChange(committedStack.concat(layerId));
+
+    if (controlledStack) {
+      // We are in controlled mode - ignore the steps.
+      return;
+    } // We need to split the state update into to parts.
+    // First: Updating the direction of the motions.
+    // Second: Actually updating the stack (which will cause elements to enter & leave).
+
+
+    setTransition('nesting');
+    requestAnimationFrame(function () {
+      setCommittedStack(function (prev) {
+        var newStack = prev.concat(layerId);
+        return newStack;
+      });
+    });
+  }, [controlledStack, onChange, committedStack]);
+  var onUnNestHandler = useCallback(function () {
+    onChange && onChange(committedStack.slice(0, committedStack.length - 1));
+
+    if (controlledStack) {
+      // We are in controlled mode - ignore the steps.
+      return;
+    } // We need to split the state update into to parts.
+    // First: Updating the direction of the motions.
+    // Second: Actually updating the stack (which will cause elements to enter & leave).
+
+
+    setTransition('unnesting');
+    requestAnimationFrame(function () {
+      setCommittedStack(function (prev) {
+        var newStack = prev.slice(0, prev.length - 1);
+        return newStack;
+      });
+    });
+  }, [controlledStack, onChange, committedStack]);
+  useEffect(function () {
+    if (!controlledStack) {
+      // We aren't in controlled mode - bail out.
+      return;
+    }
+
+    if (JSON.stringify(committedStack) === JSON.stringify(controlledStack)) {
+      // stacks are equal - do nothing!
+      return;
+    } // Controlled prop updated, let's figure out if we're nesting or unnesting.
+
+
+    if (controlledStack.length < committedStack.length) {
+      // We are unnesting (removing from the stack)
+      setTransition('unnesting');
+    } else {
+      // We are nesting (adding to the stack)
+      setTransition('nesting');
+    }
+
+    requestAnimationFrame(function () {
+      setCommittedStack(controlledStack);
+    });
+  }, [committedStack, controlledStack]);
+  var backButton = renderGoBackItem({
+    onClick: onUnNestHandler,
+    testId: backTestId
+  });
+  var context = useMemo(function () {
+    return {
+      currentStackId: currentStackId,
+      backButton: backButton,
+      stack: committedStack,
+      onNest: onNestHandler,
+      onUnNest: onUnNestHandler,
+      parentId: ROOT_ID
+    };
+  }, [onNestHandler, onUnNestHandler, backButton, committedStack, currentStackId]);
+
+  var manageFocus = function manageFocus(event) {
+    var triggeredByKeyboard = event.nativeEvent.detail === 0;
+
+    if (triggeredByKeyboard) {
+      containerRef.current && containerRef.current.focus();
+    }
+  };
+
+  return jsx("div", {
+    "data-testid": testId,
+    css: {
+      position: 'relative',
+      height: '100%',
+      outline: 'none'
+    },
+    ref: containerRef,
+    tabIndex: -1,
+    onClick: manageFocus
+  }, jsx(ExitingPersistence, null, jsx(NestingMotion // Key is needed to have a unique react instance per stack name.
+  // This enables us to easily animate it in & out with exiting persistence.
+  , {
+    key: currentStackId,
+    enterFrom: transition === 'nesting' ? 'right' : 'left',
+    exitTo: transition === 'nesting' ? 'left' : 'right',
+    testId: testId && "".concat(testId, "-anim")
+  }, function (motion) {
+    return jsx("div", _extends({
+      css: {
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column'
+      }
+    }, motion), jsx(NestedContext.Provider, {
+      // This provider is inside the NestingMotion to ensure it keeps a stale
+      // reference to the previous value.
+      value: context
+    }, jsx(NestingItem, {
+      title: "",
+      id: ROOT_ID
+    }, children)));
+  })));
+};
+
+export default NestableNavigationContent;