@atlaskit/side-navigation 1.1.2

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

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

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

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

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

@@ -0,0 +1,41 @@
+import { createContext, useContext } from 'react';
+export const NestedContext = /*#__PURE__*/createContext(undefined);
+export const useNestedContext = () => {
+  const context = useContext(NestedContext);
+
+  if (!context) {
+    let error = '';
+
+    if (process.env.NODE_ENV === 'development') {
+      error = `
+To use a <NestingItem /> it needs to be a descendant of <NestableNavigationContent>.
+You probably need to replace your <NavigationContent> with <NestableNavigationContent>.
+
+import { NestableNavigationContent } from '@atlaskit/side-navigation';
+      `;
+    }
+
+    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 const useShouldNestedElementRender = () => {
+  const context = useContext(NestedContext);
+
+  if (!context) {
+    return {
+      shouldRender: true
+    };
+  }
+
+  return {
+    shouldRender: context.currentStackId === context.parentId
+  };
+};

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

@@ -0,0 +1,148 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @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 const ROOT_ID = 'ATLASKIT_NESTED_ROOT';
+
+const NestableNavigationContent = props => {
+  const containerRef = useRef(null);
+  const {
+    children,
+    testId,
+    overrides,
+    initialStack,
+    onChange,
+    stack
+  } = props;
+  const [committedStack, setCommittedStack] = useState(stack || initialStack || []);
+  const controlledStack = stack || undefined;
+  const currentStackId = committedStack[committedStack.length - 1] || ROOT_ID;
+  const [transition, setTransition] = useState('nesting');
+  const backTestId = testId && `${testId}--go-back-item`;
+  const renderGoBackItem = overrides && overrides.GoBackItem && overrides.GoBackItem.render ? overrides.GoBackItem.render : props => jsx(GoBackButton, props, "Go back");
+  const onNestHandler = useCallback(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(() => {
+      setCommittedStack(prev => {
+        const newStack = prev.concat(layerId);
+        return newStack;
+      });
+    });
+  }, [controlledStack, onChange, committedStack]);
+  const onUnNestHandler = useCallback(() => {
+    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(() => {
+      setCommittedStack(prev => {
+        const newStack = prev.slice(0, prev.length - 1);
+        return newStack;
+      });
+    });
+  }, [controlledStack, onChange, committedStack]);
+  useEffect(() => {
+    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(() => {
+      setCommittedStack(controlledStack);
+    });
+  }, [committedStack, controlledStack]);
+  const backButton = renderGoBackItem({
+    onClick: onUnNestHandler,
+    testId: backTestId
+  });
+  const context = useMemo(() => ({
+    currentStackId,
+    backButton,
+    stack: committedStack,
+    onNest: onNestHandler,
+    onUnNest: onUnNestHandler,
+    parentId: ROOT_ID
+  }), [onNestHandler, onUnNestHandler, backButton, committedStack, currentStackId]);
+
+  const manageFocus = event => {
+    const 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 && `${testId}-anim`
+  }, motion => 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;

package/dist/es2019/components/NestableNavigationContent/nesting-motion.js

@@ -0,0 +1,21 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { easeOut, SlideIn } from '@atlaskit/motion';
+export const NestingMotion = props => {
+  const {
+    children,
+    enterFrom,
+    exitTo,
+    testId
+  } = props;
+  return jsx(SlideIn, {
+    exitTo: exitTo,
+    enterFrom: enterFrom,
+    animationTimingFunction: _ => easeOut
+  }, (innerProps, direction) => children({
+    'data-enter-from': enterFrom,
+    'data-exit-to': exitTo,
+    'data-testid': testId && `${testId}-${direction}`,
+    ...innerProps
+  }));
+};

package/dist/es2019/components/NestingItem/hack-for-ert.js

@@ -0,0 +1 @@
+export default function (_) {}

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

@@ -0,0 +1,128 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import React, { Fragment, useCallback, useMemo, useState } from 'react';
+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';
+import { NestedContext, useNestedContext } from '../NestableNavigationContent/context';
+import { nestingItemStyle } from './styles';
+
+/**
+ * NestingItem will render itself differently depending in what context it is rendered in.
+ * When not open - it will render itself as an item.
+ * When open - it will render its children.
+ */
+const NestingItem = props => {
+  const {
+    children,
+    iconAfter,
+    title,
+    onClick,
+    cssFn,
+    isSelected,
+    id,
+    component,
+    testId,
+    ...rest
+  } = props;
+  const {
+    currentStackId,
+    onNest,
+    onUnNest,
+    backButton: contextualBackButton,
+    stack
+  } = useNestedContext();
+  const mergedStyles = overrideStyleFunction(nestingItemStyle, cssFn);
+  const [isInteracted, setIsInteracted] = useState(false);
+  const backButton = props.overrides && props.overrides.GoBackItem && props.overrides.GoBackItem.render && props.overrides.GoBackItem.render({
+    onClick: onUnNest,
+    testId: testId && `${testId}--go-back-item`
+  }) || contextualBackButton;
+  const context = useMemo(() => ({
+    stack,
+    currentStackId,
+    onNest,
+    onUnNest,
+    backButton,
+    parentId: id
+  }), [onNest, onUnNest, backButton, stack, id, currentStackId]);
+
+  const isNormalClick = e => !(e.button || e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
+  /**
+   * We want both the on nest handler and the onclick handler to be called.
+   * We create a wrapper function to call both.
+   */
+
+
+  const onClickHandler = useCallback(e => {
+    if (isInteracted) {
+      // We return early if this has been interacted with because its assumed
+      // this will be already exiting - so we don't want to double up the click.
+      return;
+    } // Avoid a nesting transition if a modifier key is detected during click.
+
+
+    if (isNormalClick(e)) {
+      setIsInteracted(true);
+      onNest(id);
+    }
+
+    onClick && onClick(e);
+  }, [isInteracted, onClick, onNest, id]);
+
+  if (currentStackId === id) {
+    return jsx(NestedContext.Provider, {
+      value: context
+    }, stack.length >= 1 && jsx("div", {
+      css: {
+        marginLeft: gridSize(),
+        marginRight: gridSize(),
+        // This padding bottom needs to match the section margin inside @atlaskit/menu.
+        paddingTop: gridSize() * 0.75,
+        paddingBottom: gridSize() * 0.75
+      }
+    }, backButton), jsx(NavigationContent, {
+      testId: testId,
+      showTopScrollIndicator: stack.length >= 1
+    }, children));
+  }
+
+  if ([ROOT_ID, ...stack].includes(id)) {
+    return children;
+  }
+
+  const componentProps = {
+    iconAfter: jsx(Fragment, null, iconAfter ? jsx("span", {
+      "data-custom-icon": true
+    }, iconAfter) : null, jsx("span", {
+      "data-right-arrow": true
+    }, jsx(RightArrow, {
+      testId: testId && `${testId}--item--right-arrow`,
+      secondaryColor: token('color.background.default', N10),
+      label: ""
+    }))),
+    onClick: onClickHandler,
+    isSelected: isSelected || isInteracted,
+    testId: testId && `${testId}--item`,
+    ...rest,
+    children: title,
+    cssFn: mergedStyles
+  };
+
+  if (component) {
+    return jsx(CustomItem, _extends({}, componentProps, {
+      //@ts-expect-error TODO Fix legit TypeScript 3.9.6 improved inference error
+      component: component
+    }));
+  }
+
+  return jsx(ButtonItem, componentProps);
+};
+
+export default NestingItem;

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

@@ -0,0 +1,39 @@
+// exposed for testing purposes
+export const enabledCSS = {
+  ['&:hover [data-custom-icon]']: {
+    display: 'none'
+  },
+  ['&:active [data-custom-icon]']: {
+    display: 'none'
+  },
+  ['&:focus [data-custom-icon]']: {
+    display: 'none'
+  },
+  ['& [data-custom-icon]']: {
+    display: 'inherit'
+  },
+  ['&:hover [data-right-arrow]']: {
+    display: 'inherit'
+  },
+  ['&:active [data-right-arrow]']: {
+    display: 'inherit'
+  },
+  ['&:focus [data-right-arrow]']: {
+    display: 'inherit'
+  },
+  ['& [data-right-arrow]']: {
+    display: 'none'
+  }
+};
+const disabledCSS = {
+  ['[data-item-elem-after]']: {
+    opacity: 0
+  },
+  ['& [data-right-arrow]']: {
+    display: 'none'
+  }
+};
+export const nestingItemStyle = state => {
+  return { ...(state.isDisabled ? disabledCSS : enabledCSS)
+  };
+};

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

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