@atlaskit/side-navigation 1.3.1 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/side-navigation
 
+## 1.4.0
+
+### Minor Changes
+
+- [`5c065ba2010`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5c065ba2010) - Improve state management to allow detection of invalid stack state. Add prop `onUnknownNest` to allow handling of invalid stack state.
+
 ## 1.3.1
 
 ### Patch Changes

package/codemods/helpers/generic.tsx

@@ -562,19 +562,17 @@ export function changeImportFor({
       .filter((path) => path.node.source.value === oldPackagePath)
       .find(j.ImportSpecifier)
       .nodes()
-      .map(
-        (specifier): Nullable<string> => {
-          if (specifier.imported.name !== currentName) {
-            return null;
-          }
-          // If aliased: return the alias
-          if (specifier.local && specifier.local.name !== currentName) {
-            return specifier.local.name;
-          }
-
+      .map((specifier): Nullable<string> => {
+        if (specifier.imported.name !== currentName) {
           return null;
-        },
-      )
+        }
+        // If aliased: return the alias
+        if (specifier.local && specifier.local.name !== currentName) {
+          return specifier.local.name;
+        }
+
+        return null;
+      })
       .filter(Boolean)[0] || null;
 
   base

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

@@ -21,6 +21,8 @@ var _Item = require("../Item");
 
 var _NestingItem = _interopRequireDefault(require("../NestingItem"));
 
+var _hooks = require("../utils/hooks");
+
 var _context = require("./context");
 
 var _nestingMotion = require("./nesting-motion");
@@ -57,6 +59,7 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
       overrides = props.overrides,
       initialStack = props.initialStack,
       onChange = props.onChange,
+      onUnknownNest = props.onUnknownNest,
       stack = props.stack;
 
   var _useState = (0, _react.useState)(stack || initialStack || []),
@@ -76,6 +79,10 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
   var renderGoBackItem = overrides && overrides.GoBackItem && overrides.GoBackItem.render ? overrides.GoBackItem.render : function (props) {
     return (0, _react2.jsx)(_Item.GoBackItem, props, "Go back");
   };
+
+  var _useChildIds = (0, _hooks.useChildIds)(currentStackId, committedStack, onUnknownNest),
+      childIdsRef = _useChildIds.childIdsRef;
+
   var onNestHandler = (0, _react.useCallback)(function (layerId) {
     onChange && onChange(committedStack.concat(layerId));
 
@@ -149,9 +156,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;

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

@@ -37,6 +37,8 @@ var _NestableNavigationContent = require("../NestableNavigationContent");
 
 var _context = require("../NestableNavigationContent/context");
 
+var _hooks = require("../utils/hooks");
+
 var _styles2 = require("./styles");
 
 var _excluded = ["children", "iconAfter", "title", "onClick", "cssFn", "isSelected", "id", "component", "testId"];
@@ -79,7 +81,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 = (0, _styles.overrideStyleFunction)(_styles2.nestingItemStyle, cssFn);
 
@@ -99,9 +102,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]);
+  (0, _hooks.useChildIdsEffect)(childIds, id);
 
   var isNormalClick = function isNormalClick(e) {
     return !(e.button || e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);

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

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChildIdsEffect = exports.useChildIds = void 0;
+
+var _react = require("react");
+
+var _NestableNavigationContent = require("../NestableNavigationContent");
+
+var useChildIds = function useChildIds(currentStackId, committedStack, onUnknownNest) {
+  var childIdsRef = (0, _react.useRef)(new Set());
+  (0, _react.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 === _NestableNavigationContent.ROOT_ID || !childIdsRef.current.size || childIdsRef.current.has(currentStackId) || !onUnknownNest) {
+      return;
+    }
+
+    onUnknownNest(committedStack || [currentStackId]);
+  }, [currentStackId, committedStack, onUnknownNest]);
+  return {
+    childIdsRef: childIdsRef
+  };
+};
+
+exports.useChildIds = useChildIds;
+
+var useChildIdsEffect = function useChildIdsEffect(childIds, id) {
+  (0, _react.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]);
+};
+
+exports.useChildIdsEffect = useChildIdsEffect;

package/dist/cjs/version.json

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

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

@@ -6,6 +6,7 @@ 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.
 
@@ -39,6 +40,7 @@ const NestableNavigationContent = props => {
     overrides,
     initialStack,
     onChange,
+    onUnknownNest,
     stack
   } = props;
   const [committedStack, setCommittedStack] = useState(stack || initialStack || []);
@@ -47,6 +49,9 @@ const NestableNavigationContent = props => {
   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 {
+    childIdsRef
+  } = useChildIds(currentStackId, committedStack, onUnknownNest);
   const onNestHandler = useCallback(layerId => {
     onChange && onChange(committedStack.concat(layerId));
 
@@ -119,8 +124,9 @@ const NestableNavigationContent = props => {
     stack: committedStack,
     onNest: onNestHandler,
     onUnNest: onUnNestHandler,
-    parentId: ROOT_ID
-  }), [onNestHandler, onUnNestHandler, backButton, committedStack, currentStackId]);
+    parentId: ROOT_ID,
+    childIds: childIdsRef
+  }), [currentStackId, backButton, committedStack, onNestHandler, onUnNestHandler, childIdsRef]);
 
   const manageFocus = event => {
     const triggeredByKeyboard = event.nativeEvent.detail === 0;

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

@@ -10,6 +10,7 @@ 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(),
@@ -42,7 +43,8 @@ const NestingItem = props => {
     onNest,
     onUnNest,
     backButton: contextualBackButton,
-    stack
+    stack,
+    childIds
   } = useNestedContext();
   const mergedStyles = overrideStyleFunction(nestingItemStyle, cssFn);
   const [isInteracted, setIsInteracted] = useState(false);
@@ -56,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);
   /**

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.1",
+	"version": "1.4.0",
 	"sideEffects": false
 }

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

@@ -7,6 +7,7 @@ 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.
 
@@ -39,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 || []),
@@ -58,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));
 
@@ -131,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;

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

@@ -19,6 +19,7 @@ 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(),
@@ -50,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);
 
@@ -70,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);

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.1",
+	"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.1",
+  "version": "1.4.0",
   "description": "A highly composable side navigation component that supports nested views.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,14 +12,6 @@
   "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/*",
-        "dist/types-ts4.0/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
@@ -35,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",
@@ -46,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",