@atlaskit/side-navigation 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+- [`5f36f2ce46d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f36f2ce46d) - Adds a defensive `css()` function wrapping to many of the style calls in the side-navigation package. This is expected to help fix an issue with certain styles in side navigation not appearing if consumed when different versions of `@emotion` are present on the page.
+
 ## 1.3.0
 
 ### Minor 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/LoadingItems/index.js

@@ -16,12 +16,23 @@ var _motion = require("@atlaskit/motion");
 var _context = require("../NestableNavigationContent/context");
 
 /** @jsx jsx */
-
+var baseMotionStyles = (0, _react.css)({
+  position: 'absolute',
+  zIndex: 1,
+  top: 0,
+  right: 0,
+  left: 0
+});
+var enteringStyles = (0, _react.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,
@@ -41,14 +52,7 @@ var LoadingItems = function LoadingItems(_ref) {
   }, function (motion, state) {
     return (0, _react.jsx)("span", (0, _extends2.default)({}, 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/cjs/components/NavigationFooter/index.js

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

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

@@ -10,7 +10,12 @@ var _react = require("@emotion/react");
 var _constants = require("@atlaskit/theme/constants");
 
 /** @jsx jsx */
-
+var navigationHeaderStyles = (0, _react.css)({
+  paddingTop: (0, _constants.gridSize)() * 3,
+  paddingRight: (0, _constants.gridSize)(),
+  paddingBottom: (0, _constants.gridSize)(),
+  paddingLeft: (0, _constants.gridSize)()
+});
 /**
  * __Navigation header__
  *
@@ -19,16 +24,12 @@ var _constants = require("@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 (0, _react.jsx)("div", {
     "data-navheader": true,
-    css: {
-      paddingTop: (0, _constants.gridSize)() * 3,
-      paddingBottom: (0, _constants.gridSize)(),
-      paddingLeft: (0, _constants.gridSize)(),
-      paddingRight: (0, _constants.gridSize)()
-    }
+    css: navigationHeaderStyles
   }, children);
 };
 

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");
@@ -29,7 +31,18 @@ var _nestingMotion = require("./nesting-motion");
 // Named so ERT doesn't pick up the override name as a type.
 var ROOT_ID = 'ATLASKIT_NESTED_ROOT';
 exports.ROOT_ID = ROOT_ID;
-
+var nestableNavigationContentStyles = (0, _react2.css)({
+  height: '100%',
+  position: 'relative',
+  outline: 'none'
+});
+var nestingRootStyles = (0, _react2.css)({
+  display: 'flex',
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  flexDirection: 'column'
+});
 /**
  * __Nestable navigation content__
  *
@@ -38,6 +51,7 @@ exports.ROOT_ID = ROOT_ID;
  * - [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 = (0, _react.useRef)(null);
   var children = props.children,
@@ -45,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 || []),
@@ -64,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));
 
@@ -137,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;
@@ -151,11 +171,7 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
 
   return (0, _react2.jsx)("div", {
     "data-testid": testId,
-    css: {
-      position: 'relative',
-      height: '100%',
-      outline: 'none'
-    },
+    css: nestableNavigationContentStyles,
     ref: containerRef,
     tabIndex: -1,
     onClick: manageFocus
@@ -168,13 +184,7 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
     testId: testId && "".concat(testId, "-anim")
   }, function (motion) {
     return (0, _react2.jsx)("div", (0, _extends2.default)({
-      css: {
-        position: 'absolute',
-        width: '100%',
-        height: '100%',
-        display: 'flex',
-        flexDirection: 'column'
-      }
+      css: nestingRootStyles
     }, motion), (0, _react2.jsx)(_context.NestedContext.Provider, {
       // This provider is inside the NestingMotion to ensure it keeps a stale
       // reference to the previous value.

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"];
@@ -49,11 +51,19 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+var nestingItemStyles = (0, _react2.css)({
+  marginRight: (0, _constants.gridSize)(),
+  marginLeft: (0, _constants.gridSize)(),
+  // This padding bottom needs to match the section margin inside @atlaskit/menu.
+  paddingTop: (0, _constants.gridSize)() * 0.75,
+  paddingBottom: (0, _constants.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,
@@ -71,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);
 
@@ -91,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);
@@ -124,13 +139,7 @@ var NestingItem = function NestingItem(props) {
     return (0, _react2.jsx)(_context.NestedContext.Provider, {
       value: context
     }, stack.length >= 1 && (0, _react2.jsx)("div", {
-      css: {
-        marginLeft: (0, _constants.gridSize)(),
-        marginRight: (0, _constants.gridSize)(),
-        // This padding bottom needs to match the section margin inside @atlaskit/menu.
-        paddingTop: (0, _constants.gridSize)() * 0.75,
-        paddingBottom: (0, _constants.gridSize)() * 0.75
-      }
+      css: nestingItemStyles
     }, backButton), (0, _react2.jsx)(_index.NavigationContent, {
       testId: testId,
       showTopScrollIndicator: stack.length >= 1

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

@@ -14,7 +14,17 @@ var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 
 /** @jsx jsx */
-
+var sideNavStyles = (0, _react2.css)({
+  display: 'flex',
+  width: '100%',
+  minWidth: (0, _constants.gridSize)() * 30,
+  height: '100%',
+  position: 'relative',
+  flexDirection: 'column',
+  backgroundColor: "var(--ds-surface, ".concat(_colors.N10, ")"),
+  color: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
+  overflow: 'hidden'
+});
 /**
  * __Side navigation__
  *
@@ -24,6 +34,7 @@ var _constants = require("@atlaskit/theme/constants");
  * - [Code](https://atlassian.design/components/side-navigation/code)
  * - [Usage](https://atlassian.design/components/side-navigation/usage)
  */
+
 var SideNavigation = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
       testId = props.testId,
@@ -32,17 +43,7 @@ var SideNavigation = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: ref,
     "data-testid": testId,
     "aria-label": label,
-    css: {
-      width: '100%',
-      height: '100%',
-      color: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
-      minWidth: (0, _constants.gridSize)() * 30,
-      backgroundColor: "var(--ds-surface, ".concat(_colors.N10, ")"),
-      position: 'relative',
-      display: 'flex',
-      flexDirection: 'column',
-      overflow: 'hidden'
-    }
+    css: sideNavStyles
   }, children);
 });
 var _default = SideNavigation;

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

package/dist/es2019/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';
-
+const baseMotionStyles = css({
+  position: 'absolute',
+  zIndex: 1,
+  top: 0,
+  right: 0,
+  left: 0
+});
+const enteringStyles = css({
+  position: 'static',
+  zIndex: 2
+});
 /**
  * __Loading items__
  *
  * Loading items conditionally render based on the useShouldNestedElementRender() hook.
  */
+
 const LoadingItems = ({
   children,
   isLoading,
@@ -29,14 +40,7 @@ const LoadingItems = ({
     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
-    }
+    css: [baseMotionStyles, state === 'entering' && enteringStyles]
   }), isLoading ? fallback : children)));
 };
 

package/dist/es2019/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';
-const footerCSS = {
-  position: 'relative',
+const footerStyles = css({
   padding: gridSize(),
-  paddingBottom: gridSize() * 1.75
-};
+  paddingBottom: gridSize() * 1.75,
+  position: 'relative'
+});
 /**
  * __Navigation footer__
  *
@@ -19,7 +19,7 @@ const NavigationFooter = ({
   children
 }) => {
   return jsx("div", {
-    css: footerCSS
+    css: footerStyles
   }, children);
 };
 

package/dist/es2019/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';
-
+const navigationHeaderStyles = css({
+  paddingTop: gridSize() * 3,
+  paddingRight: gridSize(),
+  paddingBottom: gridSize(),
+  paddingLeft: gridSize()
+});
 /**
  * __Navigation header__
  *
@@ -10,18 +15,14 @@ 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)
  */
+
 const NavigationHeader = props => {
   const {
     children
   } = props;
   return jsx("div", {
     "data-navheader": true,
-    css: {
-      paddingTop: gridSize() * 3,
-      paddingBottom: gridSize(),
-      paddingLeft: gridSize(),
-      paddingRight: gridSize()
-    }
+    css: navigationHeaderStyles
   }, children);
 };
 

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

@@ -2,15 +2,27 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @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 const ROOT_ID = 'ATLASKIT_NESTED_ROOT';
-
+const nestableNavigationContentStyles = css({
+  height: '100%',
+  position: 'relative',
+  outline: 'none'
+});
+const nestingRootStyles = css({
+  display: 'flex',
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  flexDirection: 'column'
+});
 /**
  * __Nestable navigation content__
  *
@@ -19,6 +31,7 @@ export const ROOT_ID = 'ATLASKIT_NESTED_ROOT';
  * - [Examples](https://atlassian.design/components/side-navigation/examples#nested-navigation)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
+
 const NestableNavigationContent = props => {
   const containerRef = useRef(null);
   const {
@@ -27,6 +40,7 @@ const NestableNavigationContent = props => {
     overrides,
     initialStack,
     onChange,
+    onUnknownNest,
     stack
   } = props;
   const [committedStack, setCommittedStack] = useState(stack || initialStack || []);
@@ -35,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));
 
@@ -107,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;
@@ -120,11 +138,7 @@ const NestableNavigationContent = props => {
 
   return jsx("div", {
     "data-testid": testId,
-    css: {
-      position: 'relative',
-      height: '100%',
-      outline: 'none'
-    },
+    css: nestableNavigationContentStyles,
     ref: containerRef,
     tabIndex: -1,
     onClick: manageFocus
@@ -136,13 +150,7 @@ const NestableNavigationContent = props => {
     exitTo: transition === 'nesting' ? 'left' : 'right',
     testId: testId && `${testId}-anim`
   }, motion => 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.