@atlaskit/side-navigation 1.1.2

package/dist/cjs/common/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VAR_SCROLL_INDICATOR_COLOR = exports.VAR_SEPARATOR_COLOR = void 0;
+var VAR_SEPARATOR_COLOR = '--ds-menu-seperator-color';
+exports.VAR_SEPARATOR_COLOR = VAR_SEPARATOR_COLOR;
+var VAR_SCROLL_INDICATOR_COLOR = '--ds-menu-scroll-indicator-color';
+exports.VAR_SCROLL_INDICATOR_COLOR = VAR_SCROLL_INDICATOR_COLOR;

package/dist/cjs/common/styles.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sectionHeaderStyle = exports.baseSideNavItemStyle = exports.overrideStyleFunction = exports.ITEM_SIDE_PADDING = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _tokens = require("@atlaskit/tokens");
+
+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 gridSize = (0, _constants.gridSize)();
+var borderRadius = (0, _constants.borderRadius)();
+var itemIconSize = gridSize * 3;
+var leftIconRightSpacing = gridSize * 2;
+var ITEM_SIDE_PADDING = gridSize * 1.25;
+/**
+ * Allows chaining of style functions on top of base style functions
+ * @param baseStyle the base custom cssFn
+ * @param newStyle a new cssFn to be applied after the base style
+ */
+
+exports.ITEM_SIDE_PADDING = ITEM_SIDE_PADDING;
+
+var overrideStyleFunction = function overrideStyleFunction(baseStyle) {
+  var newStyle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
+    return {};
+  };
+  return function (state) {
+    return [baseStyle(state), newStyle(state)];
+  };
+};
+
+exports.overrideStyleFunction = overrideStyleFunction;
+var defaultStyles = {
+  '&:hover': {
+    color: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N500),
+    backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N30)
+  },
+  '&:active': {
+    color: (0, _tokens.token)('color.text.mediumEmphasis', _colors.B400),
+    backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.pressed', _colors.B50)
+  }
+};
+var selectedStyles = {
+  backgroundColor: (0, _tokens.token)('color.background.selected.resting', _colors.N30),
+  color: (0, _tokens.token)('color.text.selected', _colors.B400),
+  ':visited': {
+    color: (0, _tokens.token)('color.text.selected', _colors.B400)
+  },
+  '&:hover': {
+    backgroundColor: (0, _tokens.token)('color.background.selected.hover', _colors.N30),
+    color: (0, _tokens.token)('color.text.selected', _colors.N500)
+  },
+  '&:active': {
+    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B50),
+    color: (0, _tokens.token)('color.text.selected', _colors.B400)
+  }
+};
+
+var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
+  var isSelected = _ref.isSelected,
+      isDisabled = _ref.isDisabled;
+  return _objectSpread(_objectSpread(_objectSpread({
+    // This padding is set to ensure that the center of the left icon
+    // is approximately center aligned with the horizontal app switcher.
+    padding: "".concat(gridSize, "px ").concat(ITEM_SIDE_PADDING, "px"),
+    borderRadius: borderRadius,
+    // -- TODO: DELETE THESE COLOR OVERRIDES WHEN CLEANING UP FALLBACK THEMING --
+    // Menu and side navigation are now color aligned so they do not need this!
+    // See: https://product-fabric.atlassian.net/browse/DSP-1684
+    backgroundColor: (0, _tokens.token)('color.background.default', _colors.N10)
+  }, !isDisabled && !isSelected && defaultStyles), !isDisabled && isSelected && selectedStyles), {}, (0, _defineProperty2.default)({}, '& [data-item-elem-before]', {
+    // TODO: Can this be moved into menu?
+    // center align icons with app-switcher regardless of size
+    display: 'flex',
+    height: itemIconSize,
+    width: itemIconSize,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: leftIconRightSpacing
+  }));
+};
+
+exports.baseSideNavItemStyle = baseSideNavItemStyle;
+
+var sectionHeaderStyle = function sectionHeaderStyle() {
+  return {
+    paddingLeft: "".concat(ITEM_SIDE_PADDING, "px"),
+    paddingRight: "".concat(ITEM_SIDE_PADDING, "px")
+  };
+};
+
+exports.sectionHeaderStyle = sectionHeaderStyle;

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

@@ -0,0 +1,67 @@
+"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _tokens = require("@atlaskit/tokens");
+
+var _styles = require("../../common/styles");
+
+var _Item = require("../Item");
+
+var Container = function Container(props) {
+  return /*#__PURE__*/_react.default.createElement("div", props);
+};
+
+var Footer = function Footer(props) {
+  var cssFn = (0, _styles.overrideStyleFunction)(function () {
+    var _ref;
+
+    return _ref = {
+      userSelect: 'auto',
+      div: {
+        display: 'block',
+        textAlign: 'center',
+        minHeight: '24px',
+        alignItems: 'center',
+        width: '100%'
+      }
+    }, (0, _defineProperty2.default)(_ref, '[data-item-elem-before]', {
+      marginRight: 0,
+      marginBottom: '8px',
+      display: 'inline-block'
+    }), (0, _defineProperty2.default)(_ref, '[data-item-title]', {
+      textAlign: 'center',
+      fontSize: 12
+    }), (0, _defineProperty2.default)(_ref, '[data-item-description]', {
+      textAlign: 'center',
+      display: 'inline-block',
+      margin: '6px'
+    }), (0, _defineProperty2.default)(_ref, 'div&:hover', {
+      backgroundColor: 'transparent',
+      cursor: 'default'
+    }), (0, _defineProperty2.default)(_ref, 'div&:active', {
+      backgroundColor: 'transparent',
+      color: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N500)
+    }), _ref;
+  }, props.cssFn);
+  return /*#__PURE__*/_react.default.createElement(_Item.CustomItem, (0, _extends2.default)({}, props, {
+    component: props.component || Container,
+    cssFn: cssFn
+  }));
+};
+
+var _default = Footer;
+exports.default = _default;

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

@@ -0,0 +1,73 @@
+"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _typography = require("@atlaskit/theme/typography");
+
+var _tokens = require("@atlaskit/tokens");
+
+var _styles = require("../../common/styles");
+
+var _Item = require("../Item");
+
+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 Container = function Container(props) {
+  return /*#__PURE__*/_react.default.createElement("div", props);
+};
+
+var Header = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var cssFn = (0, _styles.overrideStyleFunction)(function () {
+    var _ref;
+
+    return _ref = {
+      userSelect: 'auto'
+    }, (0, _defineProperty2.default)(_ref, '[data-item-title]', {
+      fontSize: _typography.headingSizes.h400.size,
+      letterSpacing: '-0.003em',
+      fontWeight: 600,
+      color: (0, _tokens.token)('color.text.highEmphasis', _colors.N500)
+    }), (0, _defineProperty2.default)(_ref, 'div&:hover', {
+      backgroundColor: 'transparent',
+      cursor: 'default'
+    }), (0, _defineProperty2.default)(_ref, 'div&:active', {
+      backgroundColor: 'transparent',
+      color: (0, _tokens.token)('color.text.highEmphasis', _colors.N500)
+    }), _ref;
+  }, props.cssFn);
+  return /*#__PURE__*/_react.default.createElement(_Item.CustomItem, (0, _extends2.default)({}, props, {
+    ref: ref,
+    component: props.component || Container,
+    cssFn: cssFn,
+    overrides: {
+      Title: {
+        render: function render(_, _ref2) {
+          var children = _ref2.children,
+              props = (0, _objectWithoutProperties2.default)(_ref2, ["children"]);
+          return /*#__PURE__*/_react.default.createElement("h2", props, children);
+        }
+      }
+    }
+  }));
+});
+var _default = Header;
+exports.default = _default;

package/dist/cjs/components/Item/button-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 ButtonItem = /*#__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.ButtonItem, (0, _extends2.default)({
+    ref: ref,
+    cssFn: cssOverride
+  }, rest));
+});
+var _default = ButtonItem;
+exports.default = _default;

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

@@ -0,0 +1,52 @@
+"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; }
+
+/**
+ * Used to support any custom items needed by products alongside the Header and Footer patterns.
+ * Specific implementation of headers and footers are provided in the examples folder.
+ */
+var CustomItem = /*#__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.CustomItem, (0, _extends2.default)({
+    ref: ref,
+    cssFn: cssOverride
+  }, rest));
+} // Dirty hack to get generics working with forward ref [2/2]
+);
+var _default = CustomItem;
+exports.default = _default;

package/dist/cjs/components/Item/go-back-item.js

@@ -0,0 +1,65 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _arrowLeftCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-left-circle"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _tokens = require("@atlaskit/tokens");
+
+var _buttonItem = _interopRequireDefault(require("./button-item"));
+
+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 GoBackItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var cssFn = _ref.cssFn,
+      _ref$iconBefore = _ref.iconBefore,
+      iconBefore = _ref$iconBefore === void 0 ? /*#__PURE__*/_react.default.createElement(_arrowLeftCircle.default, {
+    secondaryColor: (0, _tokens.token)('color.background.default', _colors.N10),
+    label: ""
+  }) : _ref$iconBefore,
+      onClick = _ref.onClick,
+      isSelected = _ref.isSelected,
+      rest = (0, _objectWithoutProperties2.default)(_ref, ["cssFn", "iconBefore", "onClick", "isSelected"]);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isInteracted = _useState2[0],
+      setIsInteracted = _useState2[1];
+
+  var onClickHandler = (0, _react.useCallback)(function (e) {
+    if (isInteracted) {
+      return;
+    }
+
+    setIsInteracted(true);
+    onClick && onClick(e);
+  }, [onClick, isInteracted]);
+  return /*#__PURE__*/_react.default.createElement(_buttonItem.default, (0, _extends2.default)({
+    isSelected: isSelected || isInteracted,
+    cssFn: cssFn,
+    iconBefore: iconBefore,
+    onClick: onClickHandler,
+    ref: ref
+  }, rest));
+});
+var _default = GoBackItem;
+exports.default = _default;

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

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ButtonItem", {
+  enumerable: true,
+  get: function get() {
+    return _buttonItem.default;
+  }
+});
+Object.defineProperty(exports, "CustomItem", {
+  enumerable: true,
+  get: function get() {
+    return _customItem.default;
+  }
+});
+Object.defineProperty(exports, "GoBackItem", {
+  enumerable: true,
+  get: function get() {
+    return _goBackItem.default;
+  }
+});
+Object.defineProperty(exports, "LinkItem", {
+  enumerable: true,
+  get: function get() {
+    return _linkItem.default;
+  }
+});
+Object.defineProperty(exports, "SkeletonItem", {
+  enumerable: true,
+  get: function get() {
+    return _skeletonItem.default;
+  }
+});
+
+var _buttonItem = _interopRequireDefault(require("./button-item"));
+
+var _customItem = _interopRequireDefault(require("./custom-item"));
+
+var _goBackItem = _interopRequireDefault(require("./go-back-item"));
+
+var _linkItem = _interopRequireDefault(require("./link-item"));
+
+var _skeletonItem = _interopRequireDefault(require("./skeleton-item"));