@atlaskit/mobile-header 6.0.0 → 6.1.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/mobile-header
 
+## 6.1.0
+
+### Minor Changes
+
+- [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
+
+### Patch Changes
+
+- Updated dependencies
+
+## 6.0.1
+
+### Patch Changes
+
+- [`005b25fd40d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/005b25fd40d) - Moved `@emotion/styled` to dependency to ensure correct version (v11) is resolved.
+
 ## 6.0.0
 
 ### Major Changes

package/dist/cjs/components/MobileHeader.js

@@ -1,58 +1,35 @@
 "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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
-
 var _menu = _interopRequireDefault(require("@atlaskit/icon/glyph/menu"));
-
 var styles = _interopRequireWildcard(require("../styled"));
-
 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; }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 var MobileHeader = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(MobileHeader, _PureComponent);
-
   var _super = _createSuper(MobileHeader);
-
   function MobileHeader() {
     var _this;
-
     (0, _classCallCheck2.default)(this, MobileHeader);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       isAnimatingNavigation: false,
@@ -78,7 +55,6 @@ var MobileHeader = /*#__PURE__*/function (_PureComponent) {
     });
     return _this;
   }
-
   (0, _createClass2.default)(MobileHeader, [{
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
@@ -98,16 +74,15 @@ var MobileHeader = /*#__PURE__*/function (_PureComponent) {
     key: "render",
     value: function render() {
       var _this$state = this.state,
-          isAnimatingNavigation = _this$state.isAnimatingNavigation,
-          isAnimatingSidebar = _this$state.isAnimatingSidebar;
+        isAnimatingNavigation = _this$state.isAnimatingNavigation,
+        isAnimatingSidebar = _this$state.isAnimatingSidebar;
       var _this$props = this.props,
-          drawerState = _this$props.drawerState,
-          menuIconLabel = _this$props.menuIconLabel,
-          customMenu = _this$props.customMenu,
-          topOffset = _this$props.topOffset;
+        drawerState = _this$props.drawerState,
+        menuIconLabel = _this$props.menuIconLabel,
+        customMenu = _this$props.customMenu,
+        topOffset = _this$props.topOffset;
       var isNavigationOpen = drawerState === 'navigation';
       var isSidebarOpen = drawerState === 'sidebar';
-
       var menu = customMenu || /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
         appearance: "subtle",
         iconBefore: /*#__PURE__*/_react.default.createElement(_menu.default, {
@@ -116,7 +91,6 @@ var MobileHeader = /*#__PURE__*/function (_PureComponent) {
         }),
         onClick: this.props.onNavigationOpen
       });
-
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(styles.MobilePageHeader, null, /*#__PURE__*/_react.default.createElement(styles.MobilePageHeaderContent, {
         topOffset: topOffset
       }, menu, /*#__PURE__*/_react.default.createElement(styles.PageHeading, null, this.props.pageHeading), this.props.secondaryContent)), this.renderSlider(isNavigationOpen, isAnimatingNavigation, this.handleNavSlideFinish, 'left', this.props.navigation, topOffset), this.renderSlider(isSidebarOpen, isAnimatingSidebar, this.handleSidebarSlideFinish, 'right', this.props.sidebar, topOffset), (isNavigationOpen || isSidebarOpen || isAnimatingNavigation || isAnimatingSidebar) && /*#__PURE__*/_react.default.createElement(styles.FakeBlanket, {
@@ -127,7 +101,6 @@ var MobileHeader = /*#__PURE__*/function (_PureComponent) {
   }]);
   return MobileHeader;
 }(_react.PureComponent);
-
 (0, _defineProperty2.default)(MobileHeader, "defaultProps", {
   topOffset: 0,
   pageHeading: '',

package/dist/cjs/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
     return _MobileHeader.default;
   }
 });
-
 var _MobileHeader = _interopRequireDefault(require("./components/MobileHeader"));

package/dist/cjs/styled.js

@@ -1,73 +1,60 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PageHeading = exports.MobilePageHeaderContent = exports.MobilePageHeader = exports.MobileNavSlider = exports.FakeBlanket = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = require("@emotion/react");
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _theme = require("@atlaskit/theme");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9; // AFP-2532 TODO: Fix automatic suppressions below
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+var gridSize = (0, _theme.gridSize)();
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-
-var gridSize = (0, _theme.gridSize)(); // @atlaskit/navigation has a specific z-index, so we need to layer the header
+// @atlaskit/navigation has a specific z-index, so we need to layer the header
 // components relative to that.
-
 var navLayer = _theme.layers.navigation();
-
 var layers = {
   header: navLayer - 10,
   blanket: navLayer - 5,
   slider: navLayer + 5
 };
 var mobileHeaderHeight = 54;
-
 var xPositioning = function xPositioning(_ref) {
   var side = _ref.side,
-      isOpen = _ref.isOpen;
+    isOpen = _ref.isOpen;
   return side === 'right' ? (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        right: 0;\n        transform: translateX(", ");\n      "])), isOpen ? '0' : '100vw') : (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        left: 0;\n        transform: translateX(", ");\n      "])), isOpen ? '0' : '-100vw');
 };
-
 var MobileNavSlider = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  position: fixed;\n  top: ", "px;\n  transition: transform 0.2s ease-out;\n  z-index: ", ";\n  ", ";\n"])), function (props) {
   return "calc(100vh - ".concat(props.topOffset, "px)");
 }, function (props) {
   return props.topOffset;
-}, layers.slider, xPositioning); // make space so content below doesn't slip beneath the header
-// since the content is `position: fixed`
-
+}, layers.slider, xPositioning);
 
+// make space so content below doesn't slip beneath the header
+// since the content is `position: fixed`
 exports.MobileNavSlider = MobileNavSlider;
-
 var MobilePageHeader = _styled.default.header(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  height: ", "px;\n"])), mobileHeaderHeight);
-
 exports.MobilePageHeader = MobilePageHeader;
-
 var MobilePageHeaderContent = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: ", "px;\n  padding: ", "px;\n  position: fixed;\n  top: ", "px;\n  width: 100%;\n  z-index: ", ";\n"])), (0, _theme.themed)({
   light: _theme.colors.N20,
   dark: _theme.colors.DN10
 }), mobileHeaderHeight, gridSize, function (props) {
   return props.topOffset;
 }, layers.header);
-
 exports.MobilePageHeaderContent = MobilePageHeaderContent;
 var opacityIn = (0, _react.keyframes)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  from { opacity: 0; }\n  to { opacity: 1; }\n"])));
-var opacityOut = (0, _react.keyframes)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  from { opacity: 1; }\n  to { opacity: 0; }\n"]))); // @atlaskit/blanket has a z-index *higher* than @atlaskit/navigation,
-// so we can't display the AK blanket underneath the navigation.
+var opacityOut = (0, _react.keyframes)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  from { opacity: 1; }\n  to { opacity: 0; }\n"])));
 
+// @atlaskit/blanket has a z-index *higher* than @atlaskit/navigation,
+// so we can't display the AK blanket underneath the navigation.
 var FakeBlanket = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: ", ";\n  animation: ", " 0.2s ease-out;\n"])), _theme.colors.N100A, layers.blanket, function (p) {
   return p.isOpen ? opacityIn : opacityOut;
-}); // use proper h1 and header styles but for mobile we don't want a top margin
-
+});
 
+// use proper h1 and header styles but for mobile we don't want a top margin
 exports.FakeBlanket = FakeBlanket;
-
 var PageHeading = _styled.default.h1(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  margin-left: ", "px;\n  ", ";\n  && {\n    margin-top: 0;\n  }\n"])), gridSize, _theme.typography.h500);
-
 exports.PageHeading = PageHeading;

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/mobile-header",
-	"version": "6.0.0"
+	"version": "6.1.0"
 }

package/dist/es2019/components/MobileHeader.js

@@ -3,28 +3,23 @@ import React, { Fragment, PureComponent } from 'react';
 import Button from '@atlaskit/button/custom-theme-button';
 import MenuIcon from '@atlaskit/icon/glyph/menu';
 import * as styles from '../styled';
-
 class MobileHeader extends PureComponent {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "state", {
       isAnimatingNavigation: false,
       isAnimatingSidebar: false
     });
-
     _defineProperty(this, "handleNavSlideFinish", () => {
       this.setState({
         isAnimatingNavigation: false
       });
     });
-
     _defineProperty(this, "handleSidebarSlideFinish", () => {
       this.setState({
         isAnimatingSidebar: false
       });
     });
-
     _defineProperty(this, "renderSlider", (isOpen, isAnimating, onTransitionEnd, side, renderFn, topOffset) => /*#__PURE__*/React.createElement(styles.MobileNavSlider, {
       isOpen: isOpen,
       onTransitionEnd: onTransitionEnd,
@@ -32,7 +27,6 @@ class MobileHeader extends PureComponent {
       topOffset: topOffset
     }, (isOpen || isAnimating) && renderFn && renderFn(isOpen)));
   }
-
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.drawerState === 'none') {
       if (this.props.drawerState === 'navigation') {
@@ -46,7 +40,6 @@ class MobileHeader extends PureComponent {
       }
     }
   }
-
   render() {
     const {
       isAnimatingNavigation,
@@ -75,14 +68,11 @@ class MobileHeader extends PureComponent {
       onClick: this.props.onDrawerClose
     }));
   }
-
 }
-
 _defineProperty(MobileHeader, "defaultProps", {
   topOffset: 0,
   pageHeading: '',
   menuIconLabel: 'Menu',
   drawerState: ''
 });
-
 export default MobileHeader;

package/dist/es2019/styled.js

@@ -1,11 +1,13 @@
 import { css, keyframes } from '@emotion/react';
-import styled from '@emotion/styled'; // AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+import styled from '@emotion/styled';
 
+// AFP-2532 TODO: Fix automatic suppressions below
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { gridSize as akGridSize, layers as akLayers, colors, themed, typography } from '@atlaskit/theme';
-const gridSize = akGridSize(); // @atlaskit/navigation has a specific z-index, so we need to layer the header
-// components relative to that.
+const gridSize = akGridSize();
 
+// @atlaskit/navigation has a specific z-index, so we need to layer the header
+// components relative to that.
 const navLayer = akLayers.navigation();
 const layers = {
   header: navLayer - 10,
@@ -13,7 +15,6 @@ const layers = {
   slider: navLayer + 5
 };
 const mobileHeaderHeight = 54;
-
 const xPositioning = ({
   side,
   isOpen
@@ -24,7 +25,6 @@ const xPositioning = ({
         left: 0;
         transform: translateX(${isOpen ? '0' : '-100vw'});
       `;
-
 export const MobileNavSlider = styled.div`
   height: ${props => `calc(100vh - ${props.topOffset}px)`};
   position: fixed;
@@ -32,9 +32,10 @@ export const MobileNavSlider = styled.div`
   transition: transform 0.2s ease-out;
   z-index: ${layers.slider};
   ${xPositioning};
-`; // make space so content below doesn't slip beneath the header
-// since the content is `position: fixed`
+`;
 
+// make space so content below doesn't slip beneath the header
+// since the content is `position: fixed`
 export const MobilePageHeader = styled.header`
   height: ${mobileHeaderHeight}px;
 `;
@@ -60,9 +61,10 @@ const opacityIn = keyframes`
 const opacityOut = keyframes`
   from { opacity: 1; }
   to { opacity: 0; }
-`; // @atlaskit/blanket has a z-index *higher* than @atlaskit/navigation,
-// so we can't display the AK blanket underneath the navigation.
+`;
 
+// @atlaskit/blanket has a z-index *higher* than @atlaskit/navigation,
+// so we can't display the AK blanket underneath the navigation.
 export const FakeBlanket = styled.div`
   background: ${colors.N100A};
   bottom: 0;
@@ -72,8 +74,9 @@ export const FakeBlanket = styled.div`
   top: 0;
   z-index: ${layers.blanket};
   animation: ${p => p.isOpen ? opacityIn : opacityOut} 0.2s ease-out;
-`; // use proper h1 and header styles but for mobile we don't want a top margin
+`;
 
+// use proper h1 and header styles but for mobile we don't want a top margin
 export const PageHeading = styled.h1`
   flex-grow: 1;
   margin-left: ${gridSize}px;

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/mobile-header",
-	"version": "6.0.0"
+	"version": "6.1.0"
 }

package/dist/esm/components/MobileHeader.js

@@ -5,49 +5,36 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 import React, { Fragment, PureComponent } from 'react';
 import Button from '@atlaskit/button/custom-theme-button';
 import MenuIcon from '@atlaskit/icon/glyph/menu';
 import * as styles from '../styled';
-
 var MobileHeader = /*#__PURE__*/function (_PureComponent) {
   _inherits(MobileHeader, _PureComponent);
-
   var _super = _createSuper(MobileHeader);
-
   function MobileHeader() {
     var _this;
-
     _classCallCheck(this, MobileHeader);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
-
     _defineProperty(_assertThisInitialized(_this), "state", {
       isAnimatingNavigation: false,
       isAnimatingSidebar: false
     });
-
     _defineProperty(_assertThisInitialized(_this), "handleNavSlideFinish", function () {
       _this.setState({
         isAnimatingNavigation: false
       });
     });
-
     _defineProperty(_assertThisInitialized(_this), "handleSidebarSlideFinish", function () {
       _this.setState({
         isAnimatingSidebar: false
       });
     });
-
     _defineProperty(_assertThisInitialized(_this), "renderSlider", function (isOpen, isAnimating, onTransitionEnd, side, renderFn, topOffset) {
       return /*#__PURE__*/React.createElement(styles.MobileNavSlider, {
         isOpen: isOpen,
@@ -56,10 +43,8 @@ var MobileHeader = /*#__PURE__*/function (_PureComponent) {
         topOffset: topOffset
       }, (isOpen || isAnimating) && renderFn && renderFn(isOpen));
     });
-
     return _this;
   }
-
   _createClass(MobileHeader, [{
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
@@ -79,13 +64,13 @@ var MobileHeader = /*#__PURE__*/function (_PureComponent) {
     key: "render",
     value: function render() {
       var _this$state = this.state,
-          isAnimatingNavigation = _this$state.isAnimatingNavigation,
-          isAnimatingSidebar = _this$state.isAnimatingSidebar;
+        isAnimatingNavigation = _this$state.isAnimatingNavigation,
+        isAnimatingSidebar = _this$state.isAnimatingSidebar;
       var _this$props = this.props,
-          drawerState = _this$props.drawerState,
-          menuIconLabel = _this$props.menuIconLabel,
-          customMenu = _this$props.customMenu,
-          topOffset = _this$props.topOffset;
+        drawerState = _this$props.drawerState,
+        menuIconLabel = _this$props.menuIconLabel,
+        customMenu = _this$props.customMenu,
+        topOffset = _this$props.topOffset;
       var isNavigationOpen = drawerState === 'navigation';
       var isSidebarOpen = drawerState === 'sidebar';
       var menu = customMenu || /*#__PURE__*/React.createElement(Button, {
@@ -104,15 +89,12 @@ var MobileHeader = /*#__PURE__*/function (_PureComponent) {
       }));
     }
   }]);
-
   return MobileHeader;
 }(PureComponent);
-
 _defineProperty(MobileHeader, "defaultProps", {
   topOffset: 0,
   pageHeading: '',
   menuIconLabel: 'Menu',
   drawerState: ''
 });
-
 export default MobileHeader;

package/dist/esm/styled.js

@@ -1,15 +1,15 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-
 import { css, keyframes } from '@emotion/react';
-import styled from '@emotion/styled'; // AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+import styled from '@emotion/styled';
 
+// AFP-2532 TODO: Fix automatic suppressions below
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { gridSize as akGridSize, layers as akLayers, colors, themed, typography } from '@atlaskit/theme';
-var gridSize = akGridSize(); // @atlaskit/navigation has a specific z-index, so we need to layer the header
-// components relative to that.
+var gridSize = akGridSize();
 
+// @atlaskit/navigation has a specific z-index, so we need to layer the header
+// components relative to that.
 var navLayer = akLayers.navigation();
 var layers = {
   header: navLayer - 10,
@@ -17,20 +17,19 @@ var layers = {
   slider: navLayer + 5
 };
 var mobileHeaderHeight = 54;
-
 var xPositioning = function xPositioning(_ref) {
   var side = _ref.side,
-      isOpen = _ref.isOpen;
+    isOpen = _ref.isOpen;
   return side === 'right' ? css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        right: 0;\n        transform: translateX(", ");\n      "])), isOpen ? '0' : '100vw') : css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        left: 0;\n        transform: translateX(", ");\n      "])), isOpen ? '0' : '-100vw');
 };
-
 export var MobileNavSlider = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: ", ";\n  position: fixed;\n  top: ", "px;\n  transition: transform 0.2s ease-out;\n  z-index: ", ";\n  ", ";\n"])), function (props) {
   return "calc(100vh - ".concat(props.topOffset, "px)");
 }, function (props) {
   return props.topOffset;
-}, layers.slider, xPositioning); // make space so content below doesn't slip beneath the header
-// since the content is `position: fixed`
+}, layers.slider, xPositioning);
 
+// make space so content below doesn't slip beneath the header
+// since the content is `position: fixed`
 export var MobilePageHeader = styled.header(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: ", "px;\n"])), mobileHeaderHeight);
 export var MobilePageHeaderContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: ", "px;\n  padding: ", "px;\n  position: fixed;\n  top: ", "px;\n  width: 100%;\n  z-index: ", ";\n"])), themed({
   light: colors.N20,
@@ -39,11 +38,13 @@ export var MobilePageHeaderContent = styled.div(_templateObject5 || (_templateOb
   return props.topOffset;
 }, layers.header);
 var opacityIn = keyframes(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  from { opacity: 0; }\n  to { opacity: 1; }\n"])));
-var opacityOut = keyframes(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  from { opacity: 1; }\n  to { opacity: 0; }\n"]))); // @atlaskit/blanket has a z-index *higher* than @atlaskit/navigation,
-// so we can't display the AK blanket underneath the navigation.
+var opacityOut = keyframes(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  from { opacity: 1; }\n  to { opacity: 0; }\n"])));
 
+// @atlaskit/blanket has a z-index *higher* than @atlaskit/navigation,
+// so we can't display the AK blanket underneath the navigation.
 export var FakeBlanket = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  background: ", ";\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: ", ";\n  animation: ", " 0.2s ease-out;\n"])), colors.N100A, layers.blanket, function (p) {
   return p.isOpen ? opacityIn : opacityOut;
-}); // use proper h1 and header styles but for mobile we don't want a top margin
+});
 
+// use proper h1 and header styles but for mobile we don't want a top margin
 export var PageHeading = styled.h1(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  margin-left: ", "px;\n  ", ";\n  && {\n    margin-top: 0;\n  }\n"])), gridSize, typography.h500);

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/mobile-header",
-	"version": "6.0.0"
+	"version": "6.1.0"
 }

package/dist/types/styled.d.ts

@@ -1,16 +1,29 @@
 /// <reference types="react" />
-export declare const MobileNavSlider: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const MobileNavSlider: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
     topOffset: number | undefined;
     isOpen: boolean;
     side: string;
-}, object>;
-export declare const MobilePageHeader: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, Pick<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement>, keyof import("react").HTMLAttributes<HTMLElement>>, object>;
-export declare const MobilePageHeaderContent: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MobilePageHeader: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const MobilePageHeaderContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
     topOffset: number | undefined;
-}, object>;
-export declare const FakeBlanket: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FakeBlanket: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
     isOpen: boolean;
-}, object>;
-export declare const PageHeading: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, Pick<import("@emotion/styled-base/types/helper").Overwrapped<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, import("@atlaskit/theme").ThemeProps | undefined>, never>, {
-    __ATLASKIT_THEME__: import("@atlaskit/theme").Theme;
-}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PageHeading: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/mobile-header",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "description": "A React component rendering a mobile header",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -22,18 +22,18 @@
     }
   },
   "dependencies": {
-    "@atlaskit/button": "^16.4.0",
-    "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/theme": "^12.2.0",
-    "@babel/runtime": "^7.0.0"
+    "@atlaskit/button": "^16.7.0",
+    "@atlaskit/icon": "^21.12.0",
+    "@atlaskit/theme": "^12.5.0",
+    "@babel/runtime": "^7.0.0",
+    "@emotion/styled": "^11.0.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.0.0",
-    "@emotion/styled": "^11.0.0",
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/banner": "^12.0.0",
+    "@atlaskit/banner": "^12.1.0",
     "@atlaskit/docs": "*",
     "@atlaskit/navigation": "^37.0.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",

package/report.api.md

@@ -8,6 +8,7 @@
 ### Table of contents
 
 - [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
 
 ### Main Entry Types
 
@@ -90,3 +91,16 @@ interface MobileHeaderState {
 ```
 
 <!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{
+  "@emotion/react": "^11.0.0",
+  "react": "^16.8.0"
+}
+```
+
+<!--SECTION END: Peer Dependencies-->

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

@@ -1,72 +0,0 @@
-## API Report File for "@atlaskit/mobile-header"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-import { PureComponent } from 'react';
-import { default as React_2 } from 'react';
-import { ReactNode } from 'react';
-
-// @public (undocumented)
-class MobileHeader extends PureComponent<MobileHeaderProps, MobileHeaderState> {
-    // (undocumented)
-    static defaultProps: {
-        topOffset: number;
-        pageHeading: string;
-        menuIconLabel: string;
-        drawerState: string;
-    };
-    // (undocumented)
-    handleNavSlideFinish: () => void;
-    // (undocumented)
-    handleSidebarSlideFinish: () => void;
-    // (undocumented)
-    render(): JSX.Element;
-    // (undocumented)
-    renderSlider: (isOpen: boolean, isAnimating: boolean, onTransitionEnd: ((event: React_2.TransitionEvent<HTMLDivElement>) => void) | undefined, side: string, renderFn?: ((isOpen: boolean) => ReactNode) | undefined, topOffset?: number | undefined) => JSX.Element;
-    // (undocumented)
-    state: {
-        isAnimatingNavigation: boolean;
-        isAnimatingSidebar: boolean;
-    };
-    // (undocumented)
-    UNSAFE_componentWillReceiveProps(nextProps: MobileHeaderProps): void;
-}
-export default MobileHeader;
-
-// @public (undocumented)
-interface MobileHeaderProps {
-    // (undocumented)
-    customMenu?: ReactNode;
-    // (undocumented)
-    drawerState: 'navigation' | 'none' | 'sidebar' | string;
-    // (undocumented)
-    menuIconLabel: string;
-    // (undocumented)
-    navigation?: (isOpen: boolean) => ReactNode;
-    // (undocumented)
-    onDrawerClose?: () => void;
-    // (undocumented)
-    onNavigationOpen?: () => void;
-    // (undocumented)
-    pageHeading: ReactNode;
-    // (undocumented)
-    secondaryContent?: ReactNode;
-    // (undocumented)
-    sidebar?: (isOpen: boolean) => ReactNode;
-    // (undocumented)
-    topOffset?: number;
-}
-
-// @public (undocumented)
-interface MobileHeaderState {
-    // (undocumented)
-    isAnimatingNavigation: boolean;
-    // (undocumented)
-    isAnimatingSidebar: boolean;
-}
-
-// (No @packageDocumentation comment for this package)
-
-```