@atlaskit/side-navigation 1.1.2

package/dist/cjs/components/Item/link-item.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _menu = require("@atlaskit/menu");
+
+var _styles = require("../../common/styles");
+
+var _context = require("../NestableNavigationContent/context");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var LinkItem = /*#__PURE__*/(0, _react.forwardRef)( // Type needed on props to extract types with extract react types.
+function (_ref, ref) {
+  var cssFn = _ref.cssFn,
+      rest = (0, _objectWithoutProperties2.default)(_ref, ["cssFn"]);
+
+  var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
+      shouldRender = _useShouldNestedEleme.shouldRender;
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  var cssOverride = (0, _styles.overrideStyleFunction)(_styles.baseSideNavItemStyle, cssFn);
+  return /*#__PURE__*/_react.default.createElement(_menu.LinkItem, (0, _extends2.default)({
+    ref: ref,
+    cssFn: cssOverride
+  }, rest));
+});
+var _default = LinkItem;
+exports.default = _default;

package/dist/cjs/components/Item/skeleton-item.js

@@ -0,0 +1,43 @@
+"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 = _interopRequireDefault(require("react"));
+
+var _menu = require("@atlaskit/menu");
+
+var _styles = require("../../common/styles");
+
+var _context = require("../NestableNavigationContent/context");
+
+var SkeletonItem = function SkeletonItem(props) {
+  var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
+      shouldRender = _useShouldNestedEleme.shouldRender;
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_menu.SkeletonItem, (0, _extends2.default)({
+    cssFn: function cssFn() {
+      return {
+        paddingLeft: _styles.ITEM_SIDE_PADDING,
+        paddingRight: _styles.ITEM_SIDE_PADDING,
+        '&&::before': {
+          // This doubles up & to get a higher specificity as well as to not overwite the base styles.
+          marginRight: 18
+        }
+      };
+    }
+  }, props));
+};
+
+var _default = SkeletonItem;
+exports.default = _default;

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

@@ -0,0 +1,51 @@
+"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 _core = require("@emotion/core");
+
+var _motion = require("@atlaskit/motion");
+
+var _context = require("../NestableNavigationContent/context");
+
+/** @jsx jsx */
+var LoadingItems = function LoadingItems(_ref) {
+  var children = _ref.children,
+      isLoading = _ref.isLoading,
+      fallback = _ref.fallback,
+      testId = _ref.testId;
+
+  var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
+      shouldRender = _useShouldNestedEleme.shouldRender;
+
+  if (!shouldRender) {
+    return children;
+  }
+
+  return (0, _core.jsx)(_motion.ExitingPersistence, null, (0, _core.jsx)(_motion.FadeIn, {
+    key: "loading-section-".concat(isLoading),
+    duration: _motion.mediumDurationMs
+  }, function (motion, state) {
+    return (0, _core.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
+      }
+    }), isLoading ? fallback : children);
+  }));
+};
+
+var _default = LoadingItems;
+exports.default = _default;

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

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _core = require("@emotion/core");
+
+var _useScrollbarWidth = _interopRequireDefault(require("@atlaskit/ds-lib/use-scrollbar-width"));
+
+var _context = require("../NestableNavigationContent/context");
+
+var _styles = require("./styles");
+
+/** @jsx jsx */
+var NavigationContent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var showTopScrollIndicator = props.showTopScrollIndicator,
+      children = props.children;
+
+  var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
+      shouldRender = _useShouldNestedEleme.shouldRender;
+
+  var scrollbar = (0, _useScrollbarWidth.default)();
+
+  if (!shouldRender) {
+    return children;
+  }
+
+  return (0, _core.jsx)("div", {
+    ref: ref,
+    css: (0, _styles.outerContainerCSS)({
+      showTopScrollIndicator: showTopScrollIndicator,
+      scrollbarWidth: scrollbar.width
+    })
+  }, (0, _core.jsx)("div", {
+    ref: scrollbar.ref,
+    css: (0, _styles.innerContainerCSS)({
+      showTopScrollIndicator: showTopScrollIndicator
+    })
+  }, (0, _core.jsx)("div", {
+    css: (0, _styles.containerCSS)({
+      showTopScrollIndicator: showTopScrollIndicator
+    })
+  }, children)));
+});
+var _default = NavigationContent;
+exports.default = _default;

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

@@ -0,0 +1,152 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.containerCSS = exports.innerContainerCSS = exports.outerContainerCSS = 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 _tokens = require("@atlaskit/tokens");
+
+var _constants2 = require("../../common/constants");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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;
+var scrollIndicatorBorderRadius = 1;
+var containerPadding = (0, _constants.gridSize)();
+var itemHeadingTopMargin = containerPadding * 2.5;
+var itemHeadingBottomMargin = containerPadding * 0.75; // 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 itemHeadingContentHeight = _typography.headingSizes.h100.lineHeight;
+var skeletonHeadingHeight = containerPadding;
+var skeletonHeadingMarginOffset = 3;
+var skeletonHeadingTopMargin = itemHeadingTopMargin + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset; // We want to move the entire body up by 3px without affecting the height of the skeleton container.
+
+var skeletonHeadingBottomMargin = itemHeadingBottomMargin + skeletonHeadingMarginOffset;
+
+/**
+ * This outer container css contains the "real" scroll indicators which are
+ * always rendered to the screen.
+ * They are "conditionally" shown from the users perspective using the inner container CSS
+ * which has other pseudo elements which "mask" the "real" scroll indicators.
+ */
+var outerContainerCSS = function outerContainerCSS(opts) {
+  return {
+    // Flex is needed to ensure the overflow indicators are positioned correctly.
+    display: 'flex',
+    height: '100%',
+    overflow: 'hidden',
+    position: 'relative',
+    '&::before': {
+      content: "''",
+      display: 'block',
+      left: containerPadding,
+      right: containerPadding + opts.scrollbarWidth,
+      height: scrollIndicatorHeight,
+      borderRadius: scrollIndicatorBorderRadius,
+      backgroundColor: "var(".concat(_constants2.VAR_SEPARATOR_COLOR, ", ").concat((0, _tokens.token)('color.border.neutral', _colors.N30), ")"),
+      position: 'absolute',
+      zIndex: scrollIndicatorZIndex
+    },
+    '&::after': {
+      content: "''",
+      position: 'absolute',
+      display: 'block',
+      borderRadius: scrollIndicatorBorderRadius,
+      flexShrink: 0,
+      height: scrollIndicatorHeight,
+      left: containerPadding,
+      right: containerPadding + opts.scrollbarWidth,
+      bottom: 0,
+      zIndex: scrollIndicatorZIndex,
+      backgroundColor: "var(".concat(_constants2.VAR_SEPARATOR_COLOR, ", ").concat((0, _tokens.token)('color.border.neutral', _colors.N30), ")")
+    }
+  };
+};
+/**
+ * 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',
+    overflow: 'auto',
+    width: '100%',
+    position: 'relative',
+    boxSizing: 'border-box',
+    flexDirection: 'column'
+  }, !opts.showTopScrollIndicator && {
+    '&::before': {
+      borderRadius: scrollIndicatorBorderRadius,
+      content: "''",
+      left: 0,
+      right: 0,
+      height: scrollIndicatorHeight,
+      backgroundColor: "var(".concat(_constants2.VAR_SCROLL_INDICATOR_COLOR, ", ").concat((0, _tokens.token)('color.background.default', _colors.N10), ")"),
+      position: 'absolute',
+      display: 'block',
+      zIndex: scrollIndicatorMaskZIndex
+    }
+  }), {}, {
+    // This after pseudo element abuses being a flex child and pushes itself down to the
+    // very bottom of the container - doing so ends up "masking" the actual scroll indicator.
+    '&::after': {
+      borderRadius: scrollIndicatorBorderRadius,
+      content: "''",
+      display: 'block',
+      flexShrink: 0,
+      height: scrollIndicatorHeight,
+      // This is used to "push" the element to the bottom of the flex container.
+      marginTop: 'auto',
+      position: 'relative',
+      zIndex: scrollIndicatorMaskZIndex,
+      backgroundColor: "var(".concat(_constants2.VAR_SCROLL_INDICATOR_COLOR, ", ").concat((0, _tokens.token)('color.background.default', _colors.N10), ")")
+    }
+  });
+};
+
+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: containerPadding,
+    marginRight: containerPadding,
+    // Enables child absolutely positioned elements to be positioned relative to this element.
+    position: 'relative',
+    '& [data-ds--menu--heading-item]': {
+      marginTop: itemHeadingTopMargin,
+      marginBottom: itemHeadingBottomMargin
+    },
+    '& [data-ds--menu--skeleton-heading-item]': {
+      marginTop: skeletonHeadingTopMargin,
+      marginBottom: skeletonHeadingBottomMargin
+    }
+  };
+};
+
+exports.containerCSS = containerCSS;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@emotion/core");
+
+var _constants = require("@atlaskit/theme/constants");
+
+/** @jsx jsx */
+var footerCSS = {
+  position: 'relative',
+  padding: (0, _constants.gridSize)(),
+  paddingBottom: (0, _constants.gridSize)() * 1.75
+};
+
+var NavigationFooter = function NavigationFooter(_ref) {
+  var children = _ref.children;
+  return (0, _core.jsx)("div", {
+    css: footerCSS
+  }, children);
+};
+
+var _default = NavigationFooter;
+exports.default = _default;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@emotion/core");
+
+var _constants = require("@atlaskit/theme/constants");
+
+/** @jsx jsx */
+var NavigationHeader = function NavigationHeader(props) {
+  var children = props.children;
+  return (0, _core.jsx)("div", {
+    "data-navheader": true,
+    css: {
+      paddingTop: (0, _constants.gridSize)() * 3,
+      paddingBottom: (0, _constants.gridSize)(),
+      paddingLeft: (0, _constants.gridSize)(),
+      paddingRight: (0, _constants.gridSize)()
+    }
+  }, children);
+};
+
+var _default = NavigationHeader;
+exports.default = _default;

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

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useShouldNestedElementRender = exports.useNestedContext = exports.NestedContext = void 0;
+
+var _react = require("react");
+
+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;