@atlaskit/navigation-system 5.0.1 → 5.0.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlassian/navigation-system
 
+## 5.0.2
+
+### Patch Changes
+
+- [`bb5f1424b34de`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bb5f1424b34de) -
+  [ux] Fixes the scrolled indicator in SideNavContent to set initial state for SSR'd scroll
+  position. Behind the `navx-full-height-sidebar` gate.
+
 ## 5.0.1
 
 ### Patch Changes

package/dist/cjs/ui/page-layout/side-nav/side-nav-content.compiled.css

@@ -1,10 +1,13 @@
-._16jlkb7n{flex-grow:1}
-._16qs10dg{box-shadow:0 -1px var(--ds-border,#091e4224)}
+
+._1un9baqb{scroll-timeline:--sNcst block}._16jlkb7n{flex-grow:1}
 ._18m91wug{overflow-y:auto}
 ._1o9zkb7n{flex-shrink:1}
 ._1q51utpp{padding-block-start:var(--ds-space-150,9pt)}
 ._1reo1wug{overflow-x:auto}
+._21o1gc9s{animation-timeline:--sNcst}
 ._85i5utpp{padding-block-end:var(--ds-space-150,9pt)}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._i0dlf1ug{flex-basis:0%}
-._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
+._j7hq1ysc{animation-name:kewh7qa}
+._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
+@keyframes kewh7qa{0%{box-shadow:none}0.1%{box-shadow:0 -1px var(--ds-border,#091e4224)}to{box-shadow:0 -1px var(--ds-border,#091e4224)}}

package/dist/cjs/ui/page-layout/side-nav/side-nav-content.js

@@ -9,10 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.SideNavContent = void 0;
 require("./side-nav-content.compiled.css");
 var _runtime = require("@compiled/react/runtime");
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _bindEventListener = require("bind-event-listener");
-var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -29,8 +26,20 @@ var styles = {
   scrollContainer: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo1wug _18m91wug",
   paddingContainer: "_1q51utpp _y4tiutpp _85i5utpp _bozgutpp"
 };
+
+/**
+ * Using CSS scroll-driven animations to apply a scrolled indicator border.
+ *
+ * This approach is better for SSR, as some apps like Confluence will apply the
+ * initial scroll position of the side nav content using JS before hydration.
+ *
+ * If we applied the border through React state it would only appear after hydration,
+ * whereas this CSS approach should show even before hydration.
+ */
+var scrolledBorder = null;
+var scrollTimelineVar = '--sNcst';
 var fullHeightSidebarStyles = {
-  scrolled: "_16qs10dg"
+  scrollContainer: "_1un9baqb _21o1gc9s _j7hq1ysc"
 };
 function _SideNavContent(_ref, forwardedRef) {
   var children = _ref.children,
@@ -39,43 +48,11 @@ function _SideNavContent(_ref, forwardedRef) {
   var mergedRef = (0, _react.useMemo)(function () {
     return (0, _mergeRefs.default)([internalRef, forwardedRef]);
   }, [forwardedRef]);
-  var isScrolled = useIsScrolled(internalRef);
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') ? mergedRef : forwardedRef,
     "data-testid": testId,
-    className: (0, _runtime.ax)([styles.scrollContainer, isScrolled && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && fullHeightSidebarStyles.scrolled])
+    className: (0, _runtime.ax)([styles.scrollContainer, (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && fullHeightSidebarStyles.scrollContainer])
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)([styles.paddingContainer])
   }, children));
-}
-function useIsScrolled(ref) {
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isScrolled = _useState2[0],
-    setIsScrolled = _useState2[1];
-  (0, _react.useEffect)(function () {
-    if (!(0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
-      return;
-    }
-    if (!ref.current) {
-      return;
-    }
-    var scrollContainer = ref.current;
-
-    // Listener is throttled to requestAnimationFrame()
-    var listener = (0, _rafSchd.default)(function () {
-      setIsScrolled(scrollContainer.scrollTop > 0);
-    });
-    return (0, _bindEventListener.bind)(scrollContainer, {
-      type: 'scroll',
-      options: {
-        // Passive means we cannot call event.preventDefault()
-        // It allows the browser to optimize scrolling performance:
-        // https://developer.chrome.com/docs/lighthouse/best-practices/uses-passive-event-listeners
-        passive: true
-      },
-      listener: listener
-    });
-  }, [ref]);
-  return isScrolled;
 }

package/dist/es2019/ui/page-layout/side-nav/side-nav-content.compiled.css

@@ -1,10 +1,13 @@
-._16jlkb7n{flex-grow:1}
-._16qs10dg{box-shadow:0 -1px var(--ds-border,#091e4224)}
+
+._1un9baqb{scroll-timeline:--sNcst block}._16jlkb7n{flex-grow:1}
 ._18m91wug{overflow-y:auto}
 ._1o9zkb7n{flex-shrink:1}
 ._1q51utpp{padding-block-start:var(--ds-space-150,9pt)}
 ._1reo1wug{overflow-x:auto}
+._21o1gc9s{animation-timeline:--sNcst}
 ._85i5utpp{padding-block-end:var(--ds-space-150,9pt)}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._i0dlf1ug{flex-basis:0%}
-._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
+._j7hq98ya{animation-name:k1v0uu2e}
+._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
+@keyframes k1v0uu2e{0%{box-shadow:none}0.1%{box-shadow:0 -1px var(--ds-border,#091e4224)}to{box-shadow:0 -1px var(--ds-border,#091e4224)}}

package/dist/es2019/ui/page-layout/side-nav/side-nav-content.js

@@ -1,9 +1,7 @@
 /* side-nav-content.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./side-nav-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
-import { bind } from 'bind-event-listener';
-import rafSchd from 'raf-schd';
+import React, { forwardRef, useMemo, useRef } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { fg } from '@atlaskit/platform-feature-flags';
 /**
@@ -19,8 +17,20 @@ const styles = {
   scrollContainer: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo1wug _18m91wug",
   paddingContainer: "_1q51utpp _y4tiutpp _85i5utpp _bozgutpp"
 };
+
+/**
+ * Using CSS scroll-driven animations to apply a scrolled indicator border.
+ *
+ * This approach is better for SSR, as some apps like Confluence will apply the
+ * initial scroll position of the side nav content using JS before hydration.
+ *
+ * If we applied the border through React state it would only appear after hydration,
+ * whereas this CSS approach should show even before hydration.
+ */
+const scrolledBorder = null;
+const scrollTimelineVar = '--sNcst';
 const fullHeightSidebarStyles = {
-  scrolled: "_16qs10dg"
+  scrollContainer: "_1un9baqb _21o1gc9s _j7hq98ya"
 };
 function _SideNavContent({
   children,
@@ -28,40 +38,11 @@ function _SideNavContent({
 }, forwardedRef) {
   const internalRef = useRef(null);
   const mergedRef = useMemo(() => mergeRefs([internalRef, forwardedRef]), [forwardedRef]);
-  const isScrolled = useIsScrolled(internalRef);
   return /*#__PURE__*/React.createElement("div", {
     ref: fg('navx-full-height-sidebar') ? mergedRef : forwardedRef,
     "data-testid": testId,
-    className: ax([styles.scrollContainer, isScrolled && fg('navx-full-height-sidebar') && fullHeightSidebarStyles.scrolled])
+    className: ax([styles.scrollContainer, fg('navx-full-height-sidebar') && fullHeightSidebarStyles.scrollContainer])
   }, /*#__PURE__*/React.createElement("div", {
     className: ax([styles.paddingContainer])
   }, children));
-}
-function useIsScrolled(ref) {
-  const [isScrolled, setIsScrolled] = useState(false);
-  useEffect(() => {
-    if (!fg('navx-full-height-sidebar')) {
-      return;
-    }
-    if (!ref.current) {
-      return;
-    }
-    const scrollContainer = ref.current;
-
-    // Listener is throttled to requestAnimationFrame()
-    const listener = rafSchd(() => {
-      setIsScrolled(scrollContainer.scrollTop > 0);
-    });
-    return bind(scrollContainer, {
-      type: 'scroll',
-      options: {
-        // Passive means we cannot call event.preventDefault()
-        // It allows the browser to optimize scrolling performance:
-        // https://developer.chrome.com/docs/lighthouse/best-practices/uses-passive-event-listeners
-        passive: true
-      },
-      listener
-    });
-  }, [ref]);
-  return isScrolled;
 }

package/dist/esm/ui/page-layout/side-nav/side-nav-content.compiled.css

@@ -1,10 +1,13 @@
-._16jlkb7n{flex-grow:1}
-._16qs10dg{box-shadow:0 -1px var(--ds-border,#091e4224)}
+
+._1un9baqb{scroll-timeline:--sNcst block}._16jlkb7n{flex-grow:1}
 ._18m91wug{overflow-y:auto}
 ._1o9zkb7n{flex-shrink:1}
 ._1q51utpp{padding-block-start:var(--ds-space-150,9pt)}
 ._1reo1wug{overflow-x:auto}
+._21o1gc9s{animation-timeline:--sNcst}
 ._85i5utpp{padding-block-end:var(--ds-space-150,9pt)}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._i0dlf1ug{flex-basis:0%}
-._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
+._j7hq1ysc{animation-name:kewh7qa}
+._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
+@keyframes kewh7qa{0%{box-shadow:none}0.1%{box-shadow:0 -1px var(--ds-border,#091e4224)}to{box-shadow:0 -1px var(--ds-border,#091e4224)}}

package/dist/esm/ui/page-layout/side-nav/side-nav-content.js

@@ -1,10 +1,7 @@
 /* side-nav-content.tsx generated by @compiled/babel-plugin v0.38.1 */
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./side-nav-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
-import { bind } from 'bind-event-listener';
-import rafSchd from 'raf-schd';
+import React, { forwardRef, useMemo, useRef } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { fg } from '@atlaskit/platform-feature-flags';
 /**
@@ -20,8 +17,20 @@ var styles = {
   scrollContainer: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo1wug _18m91wug",
   paddingContainer: "_1q51utpp _y4tiutpp _85i5utpp _bozgutpp"
 };
+
+/**
+ * Using CSS scroll-driven animations to apply a scrolled indicator border.
+ *
+ * This approach is better for SSR, as some apps like Confluence will apply the
+ * initial scroll position of the side nav content using JS before hydration.
+ *
+ * If we applied the border through React state it would only appear after hydration,
+ * whereas this CSS approach should show even before hydration.
+ */
+var scrolledBorder = null;
+var scrollTimelineVar = '--sNcst';
 var fullHeightSidebarStyles = {
-  scrolled: "_16qs10dg"
+  scrollContainer: "_1un9baqb _21o1gc9s _j7hq1ysc"
 };
 function _SideNavContent(_ref, forwardedRef) {
   var children = _ref.children,
@@ -30,43 +39,11 @@ function _SideNavContent(_ref, forwardedRef) {
   var mergedRef = useMemo(function () {
     return mergeRefs([internalRef, forwardedRef]);
   }, [forwardedRef]);
-  var isScrolled = useIsScrolled(internalRef);
   return /*#__PURE__*/React.createElement("div", {
     ref: fg('navx-full-height-sidebar') ? mergedRef : forwardedRef,
     "data-testid": testId,
-    className: ax([styles.scrollContainer, isScrolled && fg('navx-full-height-sidebar') && fullHeightSidebarStyles.scrolled])
+    className: ax([styles.scrollContainer, fg('navx-full-height-sidebar') && fullHeightSidebarStyles.scrollContainer])
   }, /*#__PURE__*/React.createElement("div", {
     className: ax([styles.paddingContainer])
   }, children));
-}
-function useIsScrolled(ref) {
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isScrolled = _useState2[0],
-    setIsScrolled = _useState2[1];
-  useEffect(function () {
-    if (!fg('navx-full-height-sidebar')) {
-      return;
-    }
-    if (!ref.current) {
-      return;
-    }
-    var scrollContainer = ref.current;
-
-    // Listener is throttled to requestAnimationFrame()
-    var listener = rafSchd(function () {
-      setIsScrolled(scrollContainer.scrollTop > 0);
-    });
-    return bind(scrollContainer, {
-      type: 'scroll',
-      options: {
-        // Passive means we cannot call event.preventDefault()
-        // It allows the browser to optimize scrolling performance:
-        // https://developer.chrome.com/docs/lighthouse/best-practices/uses-passive-event-listeners
-        passive: true
-      },
-      listener: listener
-    });
-  }, [ref]);
-  return isScrolled;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "5.0.1",
+	"version": "5.0.2",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -80,7 +80,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^16.1.0",
-		"@atlaskit/tokens": "^7.0.0",
+		"@atlaskit/tokens": "^7.1.0",
 		"@atlaskit/tooltip": "^20.7.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",