@atlaskit/side-navigation 1.9.0 → 1.10.1

package/CHANGELOG.md

@@ -1,10 +1,22 @@
 # @atlaskit/side-navigation
 
+## 1.10.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.10.0
+
+### Minor Changes
+
+- [`ee296a14a87`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ee296a14a87) - Adds the `showTopScrollIndicator` prop to the nestable navigation content component. This prop should be used only when needed to distinctly separate the side navigation header from the side navigation content.
+
 ## 1.9.0
 
 ### Minor Changes
 
-- [`0af122e7d0f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0af122e7d0f) - [ux] Prop isList in Section component allows to add <ul> and <li> elements around the items to better semantic markup if it is a list of items
+- [`0af122e7d0f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0af122e7d0f) - [ux] Prop isList in Section component allows to add `<ul>` and `<li>` elements around the items to better semantic markup if it is a list of items
 
 ### Patch Changes
 

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

@@ -14,11 +14,11 @@ var _context = require("../NestableNavigationContent/context");
 var baseMotionStyles = (0, _react.css)({
   position: 'absolute',
   zIndex: 1,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   top: 0,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   right: 0,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   left: 0
 });
 var enteringStyles = (0, _react.css)({

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

@@ -10,7 +10,7 @@ var _colors = require("@atlaskit/theme/colors");
 var _typography = require("@atlaskit/theme/typography");
 var _constants = require("../../common/constants");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = 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; } /* eslint-disable @atlaskit/design-system/ensure-design-token-usage-spacing */
+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; } /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 var scrollIndicatorMaskZIndex = 2;
 var scrollIndicatorZIndex = 1;
 var scrollIndicatorHeight = 2;

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

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useShouldNestedElementRender = exports.useNestedContext = exports.NestedContext = void 0;
 var _react = require("react");
+/**
+ * @internal
+ */
+
 /**
  * @internal
  */

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

@@ -50,7 +50,8 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
     initialStack = props.initialStack,
     onChange = props.onChange,
     onUnknownNest = props.onUnknownNest,
-    stack = props.stack;
+    stack = props.stack,
+    showTopScrollIndicator = props.showTopScrollIndicator;
   var _useState = (0, _react.useState)(stack || initialStack || []),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     committedStack = _useState2[0],
@@ -137,9 +138,10 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
       onNest: onNestHandler,
       onUnNest: onUnNestHandler,
       parentId: ROOT_ID,
-      childIds: childIdsRef
+      childIds: childIdsRef,
+      forceShowTopScrollIndicator: showTopScrollIndicator
     };
-  }, [currentStackId, backButton, committedStack, onNestHandler, onUnNestHandler, childIdsRef]);
+  }, [currentStackId, backButton, committedStack, onNestHandler, onUnNestHandler, childIdsRef, showTopScrollIndicator]);
   var manageFocus = function manageFocus(event) {
     var triggeredByKeyboard = event.nativeEvent.detail === 0;
     if (triggeredByKeyboard) {

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

@@ -52,7 +52,8 @@ var NestingItem = function NestingItem(props) {
     onUnNest = _useNestedContext.onUnNest,
     contextualBackButton = _useNestedContext.backButton,
     stack = _useNestedContext.stack,
-    childIds = _useNestedContext.childIds;
+    childIds = _useNestedContext.childIds,
+    forceShowTopScrollIndicator = _useNestedContext.forceShowTopScrollIndicator;
   var mergedStyles = (0, _styles.overrideStyleFunction)(_styles2.nestingItemStyle, cssFn);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -70,12 +71,10 @@ var NestingItem = function NestingItem(props) {
       onUnNest: onUnNest,
       backButton: backButton,
       parentId: id,
-      childIds: childIds
+      childIds: childIds,
+      forceShowTopScrollIndicator: forceShowTopScrollIndicator
     };
-  },
-  // childIds shouldn't change as it's a ref
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [onNest, onUnNest, backButton, stack, id, currentStackId]);
+  }, [stack, currentStackId, onNest, onUnNest, backButton, id, childIds, forceShowTopScrollIndicator]);
   (0, _hooks.useChildIdsEffect)(childIds, id);
   var isNormalClick = function isNormalClick(e) {
     return !(e.button || e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
@@ -109,7 +108,7 @@ var NestingItem = function NestingItem(props) {
       paddingInline: "space.100"
     }, backButton), (0, _react2.jsx)(_index.NavigationContent, {
       testId: testId,
-      showTopScrollIndicator: stack.length >= 1
+      showTopScrollIndicator: forceShowTopScrollIndicator || stack.length >= 1
     }, children));
   }
   if ([_NestableNavigationContent.ROOT_ID].concat((0, _toConsumableArray2.default)(stack)).includes(id)) {

package/dist/cjs/version.json

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

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

@@ -6,11 +6,11 @@ import { useShouldNestedElementRender } from '../NestableNavigationContent/conte
 const baseMotionStyles = css({
   position: 'absolute',
   zIndex: 1,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   top: 0,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   right: 0,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   left: 0
 });
 const enteringStyles = css({

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

@@ -1,4 +1,4 @@
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage-spacing */
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { N10, N30 } from '@atlaskit/theme/colors';
 import { headingSizes } from '@atlaskit/theme/typography';
 import { VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR } from '../../common/constants';

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

@@ -1,4 +1,9 @@
 import { createContext, useContext } from 'react';
+
+/**
+ * @internal
+ */
+
 /**
  * @internal
  */

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

@@ -41,7 +41,8 @@ const NestableNavigationContent = props => {
     initialStack,
     onChange,
     onUnknownNest,
-    stack
+    stack,
+    showTopScrollIndicator
   } = props;
   const [committedStack, setCommittedStack] = useState(stack || initialStack || []);
   const controlledStack = stack || undefined;
@@ -121,8 +122,9 @@ const NestableNavigationContent = props => {
     onNest: onNestHandler,
     onUnNest: onUnNestHandler,
     parentId: ROOT_ID,
-    childIds: childIdsRef
-  }), [currentStackId, backButton, committedStack, onNestHandler, onUnNestHandler, childIdsRef]);
+    childIds: childIdsRef,
+    forceShowTopScrollIndicator: showTopScrollIndicator
+  }), [currentStackId, backButton, committedStack, onNestHandler, onUnNestHandler, childIdsRef, showTopScrollIndicator]);
   const manageFocus = event => {
     const triggeredByKeyboard = event.nativeEvent.detail === 0;
     if (triggeredByKeyboard) {

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

@@ -38,7 +38,8 @@ const NestingItem = props => {
     onUnNest,
     backButton: contextualBackButton,
     stack,
-    childIds
+    childIds,
+    forceShowTopScrollIndicator
   } = useNestedContext();
   const mergedStyles = overrideStyleFunction(nestingItemStyle, cssFn);
   const [isInteracted, setIsInteracted] = useState(false);
@@ -53,11 +54,9 @@ const NestingItem = props => {
     onUnNest,
     backButton,
     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]);
+    childIds,
+    forceShowTopScrollIndicator
+  }), [stack, currentStackId, onNest, onUnNest, backButton, id, childIds, forceShowTopScrollIndicator]);
   useChildIdsEffect(childIds, id);
   const isNormalClick = e => !(e.button || e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
 
@@ -89,7 +88,7 @@ const NestingItem = props => {
       paddingInline: "space.100"
     }, backButton), jsx(NavigationContent, {
       testId: testId,
-      showTopScrollIndicator: stack.length >= 1
+      showTopScrollIndicator: forceShowTopScrollIndicator || stack.length >= 1
     }, children));
   }
   if ([ROOT_ID, ...stack].includes(id)) {

package/dist/es2019/version.json

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

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

@@ -6,11 +6,11 @@ import { useShouldNestedElementRender } from '../NestableNavigationContent/conte
 var baseMotionStyles = css({
   position: 'absolute',
   zIndex: 1,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   top: 0,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   right: 0,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   left: 0
 });
 var enteringStyles = css({

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

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(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; }
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage-spacing */
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { N10, N30 } from '@atlaskit/theme/colors';
 import { headingSizes } from '@atlaskit/theme/typography';
 import { VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR } from '../../common/constants';

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

@@ -1,4 +1,9 @@
 import { createContext, useContext } from 'react';
+
+/**
+ * @internal
+ */
+
 /**
  * @internal
  */

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

@@ -41,7 +41,8 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
     initialStack = props.initialStack,
     onChange = props.onChange,
     onUnknownNest = props.onUnknownNest,
-    stack = props.stack;
+    stack = props.stack,
+    showTopScrollIndicator = props.showTopScrollIndicator;
   var _useState = useState(stack || initialStack || []),
     _useState2 = _slicedToArray(_useState, 2),
     committedStack = _useState2[0],
@@ -128,9 +129,10 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
       onNest: onNestHandler,
       onUnNest: onUnNestHandler,
       parentId: ROOT_ID,
-      childIds: childIdsRef
+      childIds: childIdsRef,
+      forceShowTopScrollIndicator: showTopScrollIndicator
     };
-  }, [currentStackId, backButton, committedStack, onNestHandler, onUnNestHandler, childIdsRef]);
+  }, [currentStackId, backButton, committedStack, onNestHandler, onUnNestHandler, childIdsRef, showTopScrollIndicator]);
   var manageFocus = function manageFocus(event) {
     var triggeredByKeyboard = event.nativeEvent.detail === 0;
     if (triggeredByKeyboard) {

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

@@ -43,7 +43,8 @@ var NestingItem = function NestingItem(props) {
     onUnNest = _useNestedContext.onUnNest,
     contextualBackButton = _useNestedContext.backButton,
     stack = _useNestedContext.stack,
-    childIds = _useNestedContext.childIds;
+    childIds = _useNestedContext.childIds,
+    forceShowTopScrollIndicator = _useNestedContext.forceShowTopScrollIndicator;
   var mergedStyles = overrideStyleFunction(nestingItemStyle, cssFn);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -61,12 +62,10 @@ var NestingItem = function NestingItem(props) {
       onUnNest: onUnNest,
       backButton: backButton,
       parentId: id,
-      childIds: childIds
+      childIds: childIds,
+      forceShowTopScrollIndicator: forceShowTopScrollIndicator
     };
-  },
-  // childIds shouldn't change as it's a ref
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [onNest, onUnNest, backButton, stack, id, currentStackId]);
+  }, [stack, currentStackId, onNest, onUnNest, backButton, id, childIds, forceShowTopScrollIndicator]);
   useChildIdsEffect(childIds, id);
   var isNormalClick = function isNormalClick(e) {
     return !(e.button || e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
@@ -100,7 +99,7 @@ var NestingItem = function NestingItem(props) {
       paddingInline: "space.100"
     }, backButton), jsx(NavigationContent, {
       testId: testId,
-      showTopScrollIndicator: stack.length >= 1
+      showTopScrollIndicator: forceShowTopScrollIndicator || stack.length >= 1
     }, children));
   }
   if ([ROOT_ID].concat(_toConsumableArray(stack)).includes(id)) {

package/dist/esm/version.json

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

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

@@ -3,7 +3,7 @@ import { HTMLAttributes } from 'react';
 export interface NavigationContentProps {
     children: React.ReactNode;
     /**
-     * Forces the top scroll indicator to be shown all the time.
+     * Forces the top scroll indicator to be shown.
      */
     showTopScrollIndicator?: boolean;
     /**

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

@@ -1,5 +1,8 @@
 import { MutableRefObject } from 'react';
-interface NestedContext {
+/**
+ * @internal
+ */
+export interface NestedContextValue {
     currentStackId: string;
     onNest: (id: string) => void;
     onUnNest: () => void;
@@ -7,12 +10,13 @@ interface NestedContext {
     parentId: string;
     backButton?: React.ReactNode;
     childIds: MutableRefObject<Set<string>>;
+    forceShowTopScrollIndicator: boolean | undefined;
 }
 /**
  * @internal
  */
-export declare const NestedContext: import("react").Context<NestedContext | undefined>;
-export declare const useNestedContext: () => NestedContext;
+export declare const NestedContext: import("react").Context<NestedContextValue | undefined>;
+export declare const useNestedContext: () => NestedContextValue;
 /**
  * Used by children of the NestableNavigationContent component to see if they should render or not.
  * If `shouldRender` returns `true` - return your nodes.
@@ -21,4 +25,3 @@ export declare const useNestedContext: () => NestedContext;
 export declare const useShouldNestedElementRender: () => {
     shouldRender: boolean;
 };
-export {};

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

@@ -18,6 +18,11 @@ export interface NestableNavigationContentProps {
      * - The back item (displayed when inside a nested view) - `{testId}--go-back-item`
      */
     testId?: string;
+    /**
+     * Forces the top scroll indicator to be shown. This prop should be used when needing to
+     * distinctly separate the side navigation header from the side navigation content.
+     */
+    showTopScrollIndicator?: boolean;
     /**
      * Array of the initial stack you want to show.
      * Useful when wanting to set the initial nested view but not wanting to opt into controlled state.

package/dist/types-ts4.5/components/NavigationContent/index.d.ts

@@ -3,7 +3,7 @@ import { HTMLAttributes } from 'react';
 export interface NavigationContentProps {
     children: React.ReactNode;
     /**
-     * Forces the top scroll indicator to be shown all the time.
+     * Forces the top scroll indicator to be shown.
      */
     showTopScrollIndicator?: boolean;
     /**

package/dist/types-ts4.5/components/NestableNavigationContent/context.d.ts

@@ -1,5 +1,8 @@
 import { MutableRefObject } from 'react';
-interface NestedContext {
+/**
+ * @internal
+ */
+export interface NestedContextValue {
     currentStackId: string;
     onNest: (id: string) => void;
     onUnNest: () => void;
@@ -7,12 +10,13 @@ interface NestedContext {
     parentId: string;
     backButton?: React.ReactNode;
     childIds: MutableRefObject<Set<string>>;
+    forceShowTopScrollIndicator: boolean | undefined;
 }
 /**
  * @internal
  */
-export declare const NestedContext: import("react").Context<NestedContext | undefined>;
-export declare const useNestedContext: () => NestedContext;
+export declare const NestedContext: import("react").Context<NestedContextValue | undefined>;
+export declare const useNestedContext: () => NestedContextValue;
 /**
  * Used by children of the NestableNavigationContent component to see if they should render or not.
  * If `shouldRender` returns `true` - return your nodes.
@@ -21,4 +25,3 @@ export declare const useNestedContext: () => NestedContext;
 export declare const useShouldNestedElementRender: () => {
     shouldRender: boolean;
 };
-export {};

package/dist/types-ts4.5/components/NestableNavigationContent/index.d.ts

@@ -18,6 +18,11 @@ export interface NestableNavigationContentProps {
      * - The back item (displayed when inside a nested view) - `{testId}--go-back-item`
      */
     testId?: string;
+    /**
+     * Forces the top scroll indicator to be shown. This prop should be used when needing to
+     * distinctly separate the side navigation header from the side navigation content.
+     */
+    showTopScrollIndicator?: boolean;
     /**
      * Array of the initial stack you want to show.
      * Useful when wanting to set the initial nested view but not wanting to opt into controlled state.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/side-navigation",
-  "version": "1.9.0",
+  "version": "1.10.1",
   "description": "A highly composable side navigation component that supports nested views.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -37,9 +37,9 @@
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/menu": "^1.9.0",
     "@atlaskit/motion": "^1.4.0",
-    "@atlaskit/primitives": "^0.14.0",
+    "@atlaskit/primitives": "^0.15.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.9.0",
+    "@atlaskit/tokens": "^1.10.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -58,6 +58,7 @@
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/feature-flags-test-utils": "*",
+    "@atlassian/gemini-visual-regression": "*",
     "@testing-library/react": "^12.1.5",
     "@types/jest-axe": "^3.5.0",
     "ast-types": "^0.13.3",

package/report.api.md

@@ -191,6 +191,7 @@ export interface NestableNavigationContentProps {
       }) => React.ReactNode;
     };
   };
+  showTopScrollIndicator?: boolean;
   stack?: string[];
   testId?: string;
 }

package/tmp/api-report-tmp.d.ts

@@ -144,6 +144,7 @@ export interface NestableNavigationContentProps {
             }) => React.ReactNode;
         };
     };
+    showTopScrollIndicator?: boolean;
     stack?: string[];
     testId?: string;
 }