@atlaskit/side-navigation 1.5.1 → 1.5.3

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

@@ -1,21 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = require("@emotion/react");
-
 var _motion = require("@atlaskit/motion");
-
 var _context = require("../NestableNavigationContent/context");
-
 /** @jsx jsx */
+
 var baseMotionStyles = (0, _react.css)({
   position: 'absolute',
   zIndex: 1,
@@ -27,30 +22,28 @@ 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,
-      fallback = _ref.fallback,
-      testId = _ref.testId;
-
+    isLoading = _ref.isLoading,
+    fallback = _ref.fallback,
+    testId = _ref.testId;
   var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
-      shouldRender = _useShouldNestedEleme.shouldRender;
-
+    shouldRender = _useShouldNestedEleme.shouldRender;
   if (!shouldRender) {
     return children;
   }
-
   return (0, _react.jsx)(_motion.ExitingPersistence, null, (0, _react.jsx)(_motion.FadeIn, {
     key: "loading-section-".concat(isLoading),
     duration: _motion.mediumDurationMs
   }, function (motion, state) {
-    return (// eslint-disable-next-line @repo/internal/react/use-primitives
+    return (
+      // eslint-disable-next-line @repo/internal/react/use-primitives
       (0, _react.jsx)("span", (0, _extends2.default)({}, motion, {
         "data-testid": testId && "".concat(testId, "--").concat(state),
         css: [baseMotionStyles, state === 'entering' && enteringStyles]
@@ -58,6 +51,5 @@ var LoadingItems = function LoadingItems(_ref) {
     );
   }));
 };
-
 var _default = LoadingItems;
 exports.default = _default;

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

@@ -1,24 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("react");
-
 var _react2 = require("@emotion/react");
-
 var _useScrollbarWidth = _interopRequireDefault(require("@atlaskit/ds-lib/use-scrollbar-width"));
-
 var _context = require("../NestableNavigationContent/context");
-
 var _styles = require("./styles");
-
 /* eslint-disable @repo/internal/react/use-primitives */
-
 /** @jsx jsx */
 
 /**
@@ -31,18 +23,14 @@ var _styles = require("./styles");
  */
 var NavigationContent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var showTopScrollIndicator = props.showTopScrollIndicator,
-      children = props.children,
-      testId = props.testId;
-
+    children = props.children,
+    testId = props.testId;
   var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
-      shouldRender = _useShouldNestedEleme.shouldRender;
-
+    shouldRender = _useShouldNestedEleme.shouldRender;
   var scrollbar = (0, _useScrollbarWidth.default)();
-
   if (!shouldRender) {
     return children;
   }
-
   var typedRef = ref;
   return (0, _react2.jsx)("div", {
     ref: typedRef,

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

@@ -1,26 +1,17 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.outerContainerCSS = exports.innerContainerCSS = exports.containerCSS = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _constants = require("@atlaskit/theme/constants");
-
 var _typography = require("@atlaskit/theme/typography");
-
 var _constants2 = 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; }
-
 var scrollIndicatorMaskZIndex = 2;
 var scrollIndicatorZIndex = 1;
 var scrollIndicatorHeight = 2;
@@ -28,14 +19,13 @@ var scrollIndicatorBorderRadius = 1;
 var containerPadding = (0, _constants.gridSize)();
 var itemHeadingContentHeight = _typography.headingSizes.h100.lineHeight;
 var skeletonHeadingHeight = containerPadding;
-var skeletonHeadingMarginOffset = 3; // Skeleton content is slightly shorter than the real content.
+var skeletonHeadingMarginOffset = 3;
+// Skeleton content is slightly shorter than the real content.
 // Because of that we slightly increase the top margin to offset this so the
 // containing size both real and skeleton always equal approx 30px.
-
-var skeletonHeadingTopMargin = containerPadding * 2.5 + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset; // We want to move the entire body up by 3px without affecting the height of the skeleton container.
-
+var skeletonHeadingTopMargin = containerPadding * 2.5 + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset;
+// We want to move the entire body up by 3px without affecting the height of the skeleton container.
 var skeletonHeadingBottomMargin = containerPadding * 0.75 + skeletonHeadingMarginOffset;
-
 /**
  * This outer container css contains the "real" scroll indicators which are
  * always rendered to the screen.
@@ -75,15 +65,13 @@ var outerContainerCSS = function outerContainerCSS(opts) {
     }
   };
 };
+
 /**
  * This inner container css contains the "mask" logic for the scroll indicators.
  * Essentially they cover (mask) the "real" scroll indicators when the user is scrolled
  * to the top or bottom of the container.
  */
-
-
 exports.outerContainerCSS = outerContainerCSS;
-
 var innerContainerCSS = function innerContainerCSS(opts) {
   return _objectSpread(_objectSpread({
     display: 'flex',
@@ -121,22 +109,20 @@ var innerContainerCSS = function innerContainerCSS(opts) {
     }
   });
 };
-
 exports.innerContainerCSS = innerContainerCSS;
-
 var containerCSS = function containerCSS(opts) {
   return {
     // When the scroll indicator is always shown we need to add some padding
     // so the spacing between matches what it would be if the indicator was a "block" element.
     // We use margin here so any child absolutely positioned elements are positioned correctly.
     marginTop: opts.showTopScrollIndicator ? scrollIndicatorHeight : 0,
-    marginLeft: "var(--ds-scale-100, 8px)",
-    marginRight: "var(--ds-scale-100, 8px)",
+    marginLeft: "var(--ds-space-100, 8px)",
+    marginRight: "var(--ds-space-100, 8px)",
     // Enables child absolutely positioned elements to be positioned relative to this element.
     position: 'relative',
     '& [data-ds--menu--heading-item]': {
-      marginBottom: "var(--ds-scale-075, 6px)",
-      marginTop: "var(--ds-scale-200, 20px)"
+      marginBottom: "var(--ds-space-075, 6px)",
+      marginTop: "var(--ds-space-200, 20px)"
     },
     '& [data-ds--menu--skeleton-heading-item]': {
       marginTop: skeletonHeadingTopMargin,
@@ -144,5 +130,4 @@ var containerCSS = function containerCSS(opts) {
     }
   };
 };
-
 exports.containerCSS = containerCSS;

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

@@ -1,16 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("@emotion/react");
-
 var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
-
 /** @jsx jsx */
 
 /**
@@ -28,10 +24,9 @@ var NavigationFooter = function NavigationFooter(_ref) {
     position: "relative",
     padding: "space.100",
     UNSAFE_style: {
-      paddingBottom: "var(--ds-scale-200, 14px)"
+      paddingBottom: "var(--ds-space-200, 14px)"
     }
   }, children);
 };
-
 var _default = NavigationFooter;
 exports.default = _default;

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

@@ -1,16 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("@emotion/react");
-
 var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
-
 /** @jsx jsx */
 
 /**
@@ -28,10 +24,9 @@ var NavigationHeader = function NavigationHeader(props) {
     "data-navheader": true,
     padding: "space.100",
     UNSAFE_style: {
-      paddingTop: "var(--ds-scale-300, 24px)"
+      paddingTop: "var(--ds-space-300, 24px)"
     }
   }, children);
 };
-
 var _default = NavigationHeader;
 exports.default = _default;

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

@@ -4,51 +4,39 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useShouldNestedElementRender = exports.useNestedContext = exports.NestedContext = void 0;
-
 var _react = require("react");
-
 /**
  * @internal
  */
 var NestedContext = /*#__PURE__*/(0, _react.createContext)(undefined);
 exports.NestedContext = NestedContext;
-
 var useNestedContext = function useNestedContext() {
   var context = (0, _react.useContext)(NestedContext);
-
   if (!context) {
     var error = '';
-
     if (process.env.NODE_ENV === 'development') {
       error = "\nTo use a <NestingItem /> it needs to be a descendant of <NestableNavigationContent>.\nYou probably need to replace your <NavigationContent> with <NestableNavigationContent>.\n\nimport { NestableNavigationContent } from '@atlaskit/side-navigation';\n      ";
     }
-
     throw new Error(error);
   }
-
   return context;
 };
+
 /**
  * Used by children of the NestableNavigationContent component to see if they should render or not.
  * If `shouldRender` returns `true` - return your nodes.
  * If it returns `false` - either return `null` or `children` if you have children.
  */
-
-
 exports.useNestedContext = useNestedContext;
-
 var useShouldNestedElementRender = function useShouldNestedElementRender() {
   var context = (0, _react.useContext)(NestedContext);
-
   if (!context) {
     return {
       shouldRender: true
     };
   }
-
   return {
     shouldRender: context.currentStackId === context.parentId
   };
 };
-
 exports.useShouldNestedElementRender = useShouldNestedElementRender;

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

@@ -1,34 +1,24 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ROOT_ID = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = require("react");
-
 var _react2 = require("@emotion/react");
-
 var _motion = require("@atlaskit/motion");
-
 var _Item = require("../Item");
-
 var _NestingItem = _interopRequireDefault(require("../NestingItem"));
-
 var _hooks = require("../utils/hooks");
-
 var _context = require("./context");
-
 var _nestingMotion = require("./nesting-motion");
-
 /** @jsx jsx */
+
 // 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)({
@@ -43,6 +33,7 @@ var nestingRootStyles = (0, _react2.css)({
   position: 'absolute',
   flexDirection: 'column'
 });
+
 /**
  * __Nestable navigation content__
  *
@@ -51,49 +42,41 @@ var nestingRootStyles = (0, _react2.css)({
  * - [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,
-      testId = props.testId,
-      overrides = props.overrides,
-      initialStack = props.initialStack,
-      onChange = props.onChange,
-      onUnknownNest = props.onUnknownNest,
-      stack = props.stack;
-
+    testId = props.testId,
+    overrides = props.overrides,
+    initialStack = props.initialStack,
+    onChange = props.onChange,
+    onUnknownNest = props.onUnknownNest,
+    stack = props.stack;
   var _useState = (0, _react.useState)(stack || initialStack || []),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      committedStack = _useState2[0],
-      setCommittedStack = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    committedStack = _useState2[0],
+    setCommittedStack = _useState2[1];
   var controlledStack = stack || undefined;
   var currentStackId = committedStack[committedStack.length - 1] || ROOT_ID;
-
   var _useState3 = (0, _react.useState)('nesting'),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      transition = _useState4[0],
-      setTransition = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    transition = _useState4[0],
+    setTransition = _useState4[1];
   var backTestId = testId && "".concat(testId, "--go-back-item");
   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;
-
+    childIdsRef = _useChildIds.childIdsRef;
   var onNestHandler = (0, _react.useCallback)(function (layerId) {
     onChange && onChange(committedStack.concat(layerId));
-
     if (controlledStack) {
       // We are in controlled mode - ignore the steps.
       return;
-    } // We need to split the state update into to parts.
+    }
+
+    // We need to split the state update into to parts.
     // First: Updating the direction of the motions.
     // Second: Actually updating the stack (which will cause elements to enter & leave).
-
-
     setTransition('nesting');
     requestAnimationFrame(function () {
       setCommittedStack(function (prev) {
@@ -104,15 +87,14 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
   }, [controlledStack, onChange, committedStack]);
   var onUnNestHandler = (0, _react.useCallback)(function () {
     onChange && onChange(committedStack.slice(0, committedStack.length - 1));
-
     if (controlledStack) {
       // We are in controlled mode - ignore the steps.
       return;
-    } // We need to split the state update into to parts.
+    }
+
+    // We need to split the state update into to parts.
     // First: Updating the direction of the motions.
     // Second: Actually updating the stack (which will cause elements to enter & leave).
-
-
     setTransition('unnesting');
     requestAnimationFrame(function () {
       setCommittedStack(function (prev) {
@@ -126,13 +108,12 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
       // We aren't in controlled mode - bail out.
       return;
     }
-
     if (JSON.stringify(committedStack) === JSON.stringify(controlledStack)) {
       // stacks are equal - do nothing!
       return;
-    } // Controlled prop updated, let's figure out if we're nesting or unnesting.
-
+    }
 
+    // Controlled prop updated, let's figure out if we're nesting or unnesting.
     if (controlledStack.length < committedStack.length) {
       // We are unnesting (removing from the stack)
       setTransition('unnesting');
@@ -140,7 +121,6 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
       // We are nesting (adding to the stack)
       setTransition('nesting');
     }
-
     requestAnimationFrame(function () {
       setCommittedStack(controlledStack);
     });
@@ -160,23 +140,22 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
       childIds: childIdsRef
     };
   }, [currentStackId, backButton, committedStack, onNestHandler, onUnNestHandler, childIdsRef]);
-
   var manageFocus = function manageFocus(event) {
     var triggeredByKeyboard = event.nativeEvent.detail === 0;
-
     if (triggeredByKeyboard) {
       containerRef.current && containerRef.current.focus();
     }
   };
-
-  return (// eslint-disable-next-line @repo/internal/react/use-primitives
+  return (
+    // eslint-disable-next-line @repo/internal/react/use-primitives
     (0, _react2.jsx)("div", {
       "data-testid": testId,
       css: nestableNavigationContentStyles,
       ref: containerRef,
       tabIndex: -1,
       onClick: manageFocus
-    }, (0, _react2.jsx)(_motion.ExitingPersistence, null, (0, _react2.jsx)(_nestingMotion.NestingMotion // Key is needed to have a unique react instance per stack name.
+    }, (0, _react2.jsx)(_motion.ExitingPersistence, null, (0, _react2.jsx)(_nestingMotion.NestingMotion
+    // Key is needed to have a unique react instance per stack name.
     // This enables us to easily animate it in & out with exiting persistence.
     , {
       key: currentStackId,
@@ -184,7 +163,8 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
       exitTo: transition === 'nesting' ? 'left' : 'right',
       testId: testId && "".concat(testId, "-anim")
     }, function (motion) {
-      return (// eslint-disable-next-line @repo/internal/react/use-primitives
+      return (
+        // eslint-disable-next-line @repo/internal/react/use-primitives
         (0, _react2.jsx)("div", (0, _extends2.default)({
           css: nestingRootStyles
         }, motion), (0, _react2.jsx)(_context.NestedContext.Provider, {
@@ -199,6 +179,5 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
     })))
   );
 };
-
 var _default = NestableNavigationContent;
 exports.default = _default;

package/dist/cjs/components/NestableNavigationContent/nesting-motion.js

@@ -1,30 +1,23 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NestingMotion = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = require("@emotion/react");
-
 var _motion = require("@atlaskit/motion");
-
 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; }
-
 /**
  * @internal
  */
 var NestingMotion = function NestingMotion(props) {
   var children = props.children,
-      enterFrom = props.enterFrom,
-      exitTo = props.exitTo,
-      testId = props.testId;
+    enterFrom = props.enterFrom,
+    exitTo = props.exitTo,
+    testId = props.testId;
   return (0, _react.jsx)(_motion.SlideIn, {
     exitTo: exitTo,
     enterFrom: enterFrom,
@@ -39,5 +32,4 @@ var NestingMotion = function NestingMotion(props) {
     }, innerProps));
   });
 };
-
 exports.NestingMotion = NestingMotion;

package/dist/cjs/components/NestingItem/hack-for-ert.js

@@ -4,6 +4,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = _default;
-
 // eslint-disable-next-line @repo/internal/react/use-noop
 function _default(_) {}