@atlaskit/side-navigation 1.3.0 → 1.4.0

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import React, { Fragment, useCallback, useMemo, useState } from 'react';
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import RightArrow from '@atlaskit/icon/glyph/arrow-right-circle';
 import { N10 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
@@ -10,13 +10,21 @@ import { overrideStyleFunction } from '../../common/styles';
 import { ButtonItem, CustomItem, NavigationContent } from '../index';
 import { ROOT_ID } from '../NestableNavigationContent';
 import { NestedContext, useNestedContext } from '../NestableNavigationContent/context';
+import { useChildIdsEffect } from '../utils/hooks';
 import { nestingItemStyle } from './styles';
-
+const nestingItemStyles = css({
+  marginRight: gridSize(),
+  marginLeft: gridSize(),
+  // This padding bottom needs to match the section margin inside @atlaskit/menu.
+  paddingTop: gridSize() * 0.75,
+  paddingBottom: gridSize() * 0.75
+});
 /**
  * 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,
@@ -35,7 +43,8 @@ const NestingItem = props => {
     onNest,
     onUnNest,
     backButton: contextualBackButton,
-    stack
+    stack,
+    childIds
   } = useNestedContext();
   const mergedStyles = overrideStyleFunction(nestingItemStyle, cssFn);
   const [isInteracted, setIsInteracted] = useState(false);
@@ -49,8 +58,12 @@ const NestingItem = props => {
     onNest,
     onUnNest,
     backButton,
-    parentId: id
-  }), [onNest, onUnNest, backButton, stack, id, currentStackId]);
+    parentId: id,
+    childIds
+  }), // childIds shouldn't change as it's a ref
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [onNest, onUnNest, backButton, stack, id, currentStackId]);
+  useChildIdsEffect(childIds, id);
 
   const isNormalClick = e => !(e.button || e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
   /**
@@ -79,13 +92,7 @@ const NestingItem = props => {
     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
-      }
+      css: nestingItemStyles
     }, backButton), jsx(NavigationContent, {
       testId: testId,
       showTopScrollIndicator: stack.length >= 1

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

@@ -1,9 +1,19 @@
 /** @jsx jsx */
 import { forwardRef } from 'react';
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { N10, N500 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
-
+const sideNavStyles = css({
+  display: 'flex',
+  width: '100%',
+  minWidth: gridSize() * 30,
+  height: '100%',
+  position: 'relative',
+  flexDirection: 'column',
+  backgroundColor: `var(--ds-surface, ${N10})`,
+  color: `var(--ds-text-subtle, ${N500})`,
+  overflow: 'hidden'
+});
 /**
  * __Side navigation__
  *
@@ -13,6 +23,7 @@ import { gridSize } from '@atlaskit/theme/constants';
  * - [Code](https://atlassian.design/components/side-navigation/code)
  * - [Usage](https://atlassian.design/components/side-navigation/usage)
  */
+
 const SideNavigation = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     children,
@@ -23,17 +34,7 @@ const SideNavigation = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref,
     "data-testid": testId,
     "aria-label": label,
-    css: {
-      width: '100%',
-      height: '100%',
-      color: `var(--ds-text-subtle, ${N500})`,
-      minWidth: gridSize() * 30,
-      backgroundColor: `var(--ds-surface, ${N10})`,
-      position: 'relative',
-      display: 'flex',
-      flexDirection: 'column',
-      overflow: 'hidden'
-    }
+    css: sideNavStyles
   }, children);
 });
 export default SideNavigation;

package/dist/es2019/components/utils/hooks.js

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from 'react';
+import { ROOT_ID } from '../NestableNavigationContent';
+export const useChildIds = (currentStackId, committedStack, onUnknownNest) => {
+  const childIdsRef = useRef(new Set());
+  useEffect(() => {
+    // we are holding navigation item IDs in childIdsRef
+    // check if the current displayed nav item (currentStackId) is in childIdsRef. if it's not, this means it's undefined
+    if (currentStackId === ROOT_ID || !childIdsRef.current.size || childIdsRef.current.has(currentStackId) || !onUnknownNest) {
+      return;
+    }
+
+    onUnknownNest(committedStack || [currentStackId]);
+  }, [currentStackId, committedStack, onUnknownNest]);
+  return {
+    childIdsRef
+  };
+};
+export const useChildIdsEffect = (childIds, id) => {
+  useEffect(() => {
+    if (!childIds || !childIds.current) {
+      return;
+    }
+
+    if (!childIds.current.has(id)) {
+      childIds.current.add(id);
+    }
+
+    return () => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      childIds.current.delete(id);
+    }; // childIds shouldn't change as it's a ref
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
+};

package/dist/es2019/version.json

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

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

@@ -1,15 +1,26 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { ExitingPersistence, FadeIn, mediumDurationMs } from '@atlaskit/motion';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
-
+var baseMotionStyles = css({
+  position: 'absolute',
+  zIndex: 1,
+  top: 0,
+  right: 0,
+  left: 0
+});
+var enteringStyles = css({
+  position: 'static',
+  zIndex: 2
+});
 /**
  * __Loading items__
  *
  * Loading items conditionally render based on the useShouldNestedElementRender() hook.
  */
+
 var LoadingItems = function LoadingItems(_ref) {
   var children = _ref.children,
       isLoading = _ref.isLoading,
@@ -29,14 +40,7 @@ var LoadingItems = function LoadingItems(_ref) {
   }, 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
-      }
+      css: [baseMotionStyles, state === 'entering' && enteringStyles]
     }), isLoading ? fallback : children);
   }));
 };

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

@@ -1,11 +1,11 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
-var footerCSS = {
-  position: 'relative',
+var footerStyles = css({
   padding: gridSize(),
-  paddingBottom: gridSize() * 1.75
-};
+  paddingBottom: gridSize() * 1.75,
+  position: 'relative'
+});
 /**
  * __Navigation footer__
  *
@@ -18,7 +18,7 @@ var footerCSS = {
 var NavigationFooter = function NavigationFooter(_ref) {
   var children = _ref.children;
   return jsx("div", {
-    css: footerCSS
+    css: footerStyles
   }, children);
 };
 

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

@@ -1,7 +1,12 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
-
+var navigationHeaderStyles = css({
+  paddingTop: gridSize() * 3,
+  paddingRight: gridSize(),
+  paddingBottom: gridSize(),
+  paddingLeft: gridSize()
+});
 /**
  * __Navigation header__
  *
@@ -10,16 +15,12 @@ import { gridSize } from '@atlaskit/theme/constants';
  * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
+
 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()
-    }
+    css: navigationHeaderStyles
   }, children);
 };
 

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

@@ -3,15 +3,27 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 /** @jsx jsx */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { ExitingPersistence } from '@atlaskit/motion';
 import { GoBackItem as GoBackButton } from '../Item';
 import { default as NestingItem } from '../NestingItem';
+import { useChildIds } from '../utils/hooks';
 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 nestableNavigationContentStyles = css({
+  height: '100%',
+  position: 'relative',
+  outline: 'none'
+});
+var nestingRootStyles = css({
+  display: 'flex',
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  flexDirection: 'column'
+});
 /**
  * __Nestable navigation content__
  *
@@ -20,6 +32,7 @@ export var ROOT_ID = 'ATLASKIT_NESTED_ROOT';
  * - [Examples](https://atlassian.design/components/side-navigation/examples#nested-navigation)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
+
 var NestableNavigationContent = function NestableNavigationContent(props) {
   var containerRef = useRef(null);
   var children = props.children,
@@ -27,6 +40,7 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
       overrides = props.overrides,
       initialStack = props.initialStack,
       onChange = props.onChange,
+      onUnknownNest = props.onUnknownNest,
       stack = props.stack;
 
   var _useState = useState(stack || initialStack || []),
@@ -46,6 +60,10 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
   var renderGoBackItem = overrides && overrides.GoBackItem && overrides.GoBackItem.render ? overrides.GoBackItem.render : function (props) {
     return jsx(GoBackButton, props, "Go back");
   };
+
+  var _useChildIds = useChildIds(currentStackId, committedStack, onUnknownNest),
+      childIdsRef = _useChildIds.childIdsRef;
+
   var onNestHandler = useCallback(function (layerId) {
     onChange && onChange(committedStack.concat(layerId));
 
@@ -119,9 +137,10 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
       stack: committedStack,
       onNest: onNestHandler,
       onUnNest: onUnNestHandler,
-      parentId: ROOT_ID
+      parentId: ROOT_ID,
+      childIds: childIdsRef
     };
-  }, [onNestHandler, onUnNestHandler, backButton, committedStack, currentStackId]);
+  }, [currentStackId, backButton, committedStack, onNestHandler, onUnNestHandler, childIdsRef]);
 
   var manageFocus = function manageFocus(event) {
     var triggeredByKeyboard = event.nativeEvent.detail === 0;
@@ -133,11 +152,7 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
 
   return jsx("div", {
     "data-testid": testId,
-    css: {
-      position: 'relative',
-      height: '100%',
-      outline: 'none'
-    },
+    css: nestableNavigationContentStyles,
     ref: containerRef,
     tabIndex: -1,
     onClick: manageFocus
@@ -150,13 +165,7 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
     testId: testId && "".concat(testId, "-anim")
   }, function (motion) {
     return jsx("div", _extends({
-      css: {
-        position: 'absolute',
-        width: '100%',
-        height: '100%',
-        display: 'flex',
-        flexDirection: 'column'
-      }
+      css: nestingRootStyles
     }, motion), jsx(NestedContext.Provider, {
       // This provider is inside the NestingMotion to ensure it keeps a stale
       // reference to the previous value.

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

@@ -11,7 +11,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @jsx jsx */
 import React, { Fragment, useCallback, useMemo, useState } from 'react';
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import RightArrow from '@atlaskit/icon/glyph/arrow-right-circle';
 import { N10 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
@@ -19,13 +19,21 @@ import { overrideStyleFunction } from '../../common/styles';
 import { ButtonItem, CustomItem, NavigationContent } from '../index';
 import { ROOT_ID } from '../NestableNavigationContent';
 import { NestedContext, useNestedContext } from '../NestableNavigationContent/context';
+import { useChildIdsEffect } from '../utils/hooks';
 import { nestingItemStyle } from './styles';
-
+var nestingItemStyles = css({
+  marginRight: gridSize(),
+  marginLeft: gridSize(),
+  // This padding bottom needs to match the section margin inside @atlaskit/menu.
+  paddingTop: gridSize() * 0.75,
+  paddingBottom: gridSize() * 0.75
+});
 /**
  * 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.
  */
+
 var NestingItem = function NestingItem(props) {
   var children = props.children,
       iconAfter = props.iconAfter,
@@ -43,7 +51,8 @@ var NestingItem = function NestingItem(props) {
       onNest = _useNestedContext.onNest,
       onUnNest = _useNestedContext.onUnNest,
       contextualBackButton = _useNestedContext.backButton,
-      stack = _useNestedContext.stack;
+      stack = _useNestedContext.stack,
+      childIds = _useNestedContext.childIds;
 
   var mergedStyles = overrideStyleFunction(nestingItemStyle, cssFn);
 
@@ -63,9 +72,13 @@ var NestingItem = function NestingItem(props) {
       onNest: onNest,
       onUnNest: onUnNest,
       backButton: backButton,
-      parentId: id
+      parentId: id,
+      childIds: childIds
     };
-  }, [onNest, onUnNest, backButton, stack, id, currentStackId]);
+  }, // childIds shouldn't change as it's a ref
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [onNest, onUnNest, backButton, stack, id, currentStackId]);
+  useChildIdsEffect(childIds, id);
 
   var isNormalClick = function isNormalClick(e) {
     return !(e.button || e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
@@ -96,13 +109,7 @@ var NestingItem = function NestingItem(props) {
     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
-      }
+      css: nestingItemStyles
     }, backButton), jsx(NavigationContent, {
       testId: testId,
       showTopScrollIndicator: stack.length >= 1

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

@@ -1,9 +1,19 @@
 /** @jsx jsx */
 import { forwardRef } from 'react';
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { N10, N500 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
-
+var sideNavStyles = css({
+  display: 'flex',
+  width: '100%',
+  minWidth: gridSize() * 30,
+  height: '100%',
+  position: 'relative',
+  flexDirection: 'column',
+  backgroundColor: "var(--ds-surface, ".concat(N10, ")"),
+  color: "var(--ds-text-subtle, ".concat(N500, ")"),
+  overflow: 'hidden'
+});
 /**
  * __Side navigation__
  *
@@ -13,6 +23,7 @@ import { gridSize } from '@atlaskit/theme/constants';
  * - [Code](https://atlassian.design/components/side-navigation/code)
  * - [Usage](https://atlassian.design/components/side-navigation/usage)
  */
+
 var SideNavigation = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
       testId = props.testId,
@@ -21,17 +32,7 @@ var SideNavigation = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: ref,
     "data-testid": testId,
     "aria-label": label,
-    css: {
-      width: '100%',
-      height: '100%',
-      color: "var(--ds-text-subtle, ".concat(N500, ")"),
-      minWidth: gridSize() * 30,
-      backgroundColor: "var(--ds-surface, ".concat(N10, ")"),
-      position: 'relative',
-      display: 'flex',
-      flexDirection: 'column',
-      overflow: 'hidden'
-    }
+    css: sideNavStyles
   }, children);
 });
 export default SideNavigation;

package/dist/esm/components/utils/hooks.js

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from 'react';
+import { ROOT_ID } from '../NestableNavigationContent';
+export var useChildIds = function useChildIds(currentStackId, committedStack, onUnknownNest) {
+  var childIdsRef = useRef(new Set());
+  useEffect(function () {
+    // we are holding navigation item IDs in childIdsRef
+    // check if the current displayed nav item (currentStackId) is in childIdsRef. if it's not, this means it's undefined
+    if (currentStackId === ROOT_ID || !childIdsRef.current.size || childIdsRef.current.has(currentStackId) || !onUnknownNest) {
+      return;
+    }
+
+    onUnknownNest(committedStack || [currentStackId]);
+  }, [currentStackId, committedStack, onUnknownNest]);
+  return {
+    childIdsRef: childIdsRef
+  };
+};
+export var useChildIdsEffect = function useChildIdsEffect(childIds, id) {
+  useEffect(function () {
+    if (!childIds || !childIds.current) {
+      return;
+    }
+
+    if (!childIds.current.has(id)) {
+      childIds.current.add(id);
+    }
+
+    return function () {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      childIds.current.delete(id);
+    }; // childIds shouldn't change as it's a ref
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
+};

package/dist/esm/version.json

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

package/dist/types/components/NestableNavigationContent/context.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { MutableRefObject } from 'react';
 interface NestedContext {
     currentStackId: string;
     onNest: (id: string) => void;
@@ -6,6 +6,7 @@ interface NestedContext {
     stack: string[];
     parentId: string;
     backButton?: React.ReactNode;
+    childIds: MutableRefObject<Set<string>>;
 }
 /**
  * @internal

package/dist/types/components/NestableNavigationContent/index.d.ts

@@ -38,6 +38,11 @@ export interface NestableNavigationContentProps {
      * This prop should be used with the `stack` prop for controlled behavior.
      */
     onChange?: (stack: string[]) => void;
+    /**
+     * Called when a nesting id that does not exist among `<NestingItem>`s is pushed to the stack. Use this callback to be notified when there is an undefined nesting state.
+     * Provides you with the stack which led to the undefined state, with the top of the stack (last item in array) being the invalid item.
+     */
+    onUnknownNest?: (stack: string[]) => void;
     /**
      * Custom overrides for the composed components.
      *

package/dist/types/components/utils/hooks.d.ts

@@ -0,0 +1,5 @@
+import { MutableRefObject } from 'react';
+export declare const useChildIds: (currentStackId: string, committedStack: string[], onUnknownNest?: ((stack: string[]) => void) | undefined) => {
+    childIdsRef: MutableRefObject<Set<string>>;
+};
+export declare const useChildIdsEffect: (childIds: MutableRefObject<Set<string>>, id: string) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/side-navigation",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "A highly composable side navigation component that supports nested views.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,16 +12,10 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.0 <4.5": {
-      "*": [
-        "dist/types-ts4.0/*"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
+    "disableProductCI": true,
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
     "releaseModel": "scheduled",
@@ -33,8 +27,8 @@
   "dependencies": {
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/menu": "^1.3.0",
-    "@atlaskit/motion": "^1.2.0",
+    "@atlaskit/menu": "^1.4.0",
+    "@atlaskit/motion": "^1.3.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
@@ -44,8 +38,8 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/atlassian-navigation": "^2.2.0",
-    "@atlaskit/button": "^16.3.0",
+    "@atlaskit/atlassian-navigation": "^2.3.0",
+    "@atlaskit/button": "^16.4.0",
     "@atlaskit/docs": "*",
     "@atlaskit/logo": "^13.10.0",
     "@atlaskit/onboarding": "^10.6.0",