@atlaskit/mobile-header 5.0.12 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/styled.js +11 -15
  3. package/dist/cjs/version.json +1 -1
  4. package/dist/es2019/styled.js +2 -1
  5. package/dist/es2019/version.json +1 -1
  6. package/dist/esm/styled.js +2 -1
  7. package/dist/esm/version.json +1 -1
  8. package/dist/types/styled.d.ts +9 -11
  9. package/package.json +5 -11
  10. package/report.api.md +1 -1
  11. package/dist/types-ts4.0/components/MobileHeader.d.ts +0 -35
  12. package/dist/types-ts4.0/index.d.ts +0 -1
  13. package/dist/types-ts4.0/styled.d.ts +0 -18
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/mobile-header
2
2
 
3
+ ## 6.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [`16f5b6bdaee`](https://bitbucket.org/atlassian/atlassian-frontend/commits/16f5b6bdaee) - Peer Dependencies have changed due to the migration from styled-components to @emotion v11.
8
+
3
9
  ## 5.0.12
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/styled.js CHANGED
@@ -2,8 +2,6 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
 
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
@@ -11,16 +9,14 @@ exports.PageHeading = exports.MobilePageHeaderContent = exports.MobilePageHeader
11
9
 
12
10
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
11
 
14
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
12
+ var _react = require("@emotion/react");
13
+
14
+ var _styled = _interopRequireDefault(require("@emotion/styled"));
15
15
 
16
16
  var _theme = require("@atlaskit/theme");
17
17
 
18
18
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
19
19
 
20
- 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); }
21
-
22
- 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; }
23
-
24
20
  var gridSize = (0, _theme.gridSize)(); // @atlaskit/navigation has a specific z-index, so we need to layer the header
25
21
  // components relative to that.
26
22
 
@@ -36,10 +32,10 @@ var mobileHeaderHeight = 54;
36
32
  var xPositioning = function xPositioning(_ref) {
37
33
  var side = _ref.side,
38
34
  isOpen = _ref.isOpen;
39
- return side === 'right' ? (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n right: 0;\n transform: translateX(", ");\n "])), isOpen ? '0' : '100vw') : (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n left: 0;\n transform: translateX(", ");\n "])), isOpen ? '0' : '-100vw');
35
+ 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');
40
36
  };
41
37
 
42
- var MobileNavSlider = _styledComponents.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) {
38
+ 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) {
43
39
  return "calc(100vh - ".concat(props.topOffset, "px)");
44
40
  }, function (props) {
45
41
  return props.topOffset;
@@ -49,11 +45,11 @@ var MobileNavSlider = _styledComponents.default.div(_templateObject3 || (_templa
49
45
 
50
46
  exports.MobileNavSlider = MobileNavSlider;
51
47
 
52
- var MobilePageHeader = _styledComponents.default.header(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n height: ", "px;\n"])), mobileHeaderHeight);
48
+ var MobilePageHeader = _styled.default.header(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n height: ", "px;\n"])), mobileHeaderHeight);
53
49
 
54
50
  exports.MobilePageHeader = MobilePageHeader;
55
51
 
56
- var MobilePageHeaderContent = _styledComponents.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)({
52
+ 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)({
57
53
  light: _theme.colors.N20,
58
54
  dark: _theme.colors.DN10
59
55
  }), mobileHeaderHeight, gridSize, function (props) {
@@ -61,17 +57,17 @@ var MobilePageHeaderContent = _styledComponents.default.div(_templateObject5 ||
61
57
  }, layers.header);
62
58
 
63
59
  exports.MobilePageHeaderContent = MobilePageHeaderContent;
64
- var opacityIn = (0, _styledComponents.keyframes)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n from { opacity: 0; }\n to { opacity: 1; }\n"])));
65
- var opacityOut = (0, _styledComponents.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,
60
+ var opacityIn = (0, _react.keyframes)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n from { opacity: 0; }\n to { opacity: 1; }\n"])));
61
+ 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,
66
62
  // so we can't display the AK blanket underneath the navigation.
67
63
 
68
- var FakeBlanket = _styledComponents.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) {
64
+ 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) {
69
65
  return p.isOpen ? opacityIn : opacityOut;
70
66
  }); // use proper h1 and header styles but for mobile we don't want a top margin
71
67
 
72
68
 
73
69
  exports.FakeBlanket = FakeBlanket;
74
70
 
75
- var PageHeading = _styledComponents.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);
71
+ 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);
76
72
 
77
73
  exports.PageHeading = PageHeading;
package/dist/cjs/version.json CHANGED
@@ -1,4 +1,4 @@
1
1
  {
2
2
  "name": "@atlaskit/mobile-header",
3
- "version": "5.0.12"
3
+ "version": "6.0.0"
4
4
  }
package/dist/es2019/styled.js CHANGED
@@ -1,4 +1,5 @@
1
- import styled, { css, keyframes } from 'styled-components'; // AFP-2532 TODO: Fix automatic suppressions below
1
+ import { css, keyframes } from '@emotion/react';
2
+ import styled from '@emotion/styled'; // AFP-2532 TODO: Fix automatic suppressions below
2
3
  // eslint-disable-next-line @atlassian/tangerine/import/entry-points
3
4
 
4
5
  import { gridSize as akGridSize, layers as akLayers, colors, themed, typography } from '@atlaskit/theme';
package/dist/es2019/version.json CHANGED
@@ -1,4 +1,4 @@
1
1
  {
2
2
  "name": "@atlaskit/mobile-header",
3
- "version": "5.0.12"
3
+ "version": "6.0.0"
4
4
  }
package/dist/esm/styled.js CHANGED
@@ -2,7 +2,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
2
2
 
3
3
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
4
4
 
5
- import styled, { css, keyframes } from 'styled-components'; // AFP-2532 TODO: Fix automatic suppressions below
5
+ import { css, keyframes } from '@emotion/react';
6
+ import styled from '@emotion/styled'; // AFP-2532 TODO: Fix automatic suppressions below
6
7
  // eslint-disable-next-line @atlassian/tangerine/import/entry-points
7
8
 
8
9
  import { gridSize as akGridSize, layers as akLayers, colors, themed, typography } from '@atlaskit/theme';
package/dist/esm/version.json CHANGED
@@ -1,4 +1,4 @@
1
1
  {
2
2
  "name": "@atlaskit/mobile-header",
3
- "version": "5.0.12"
3
+ "version": "6.0.0"
4
4
  }
package/dist/types/styled.d.ts CHANGED
@@ -1,18 +1,16 @@
1
1
  /// <reference types="react" />
2
- export declare const MobileNavSlider: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
2
+ export declare const MobileNavSlider: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
3
3
  topOffset: number | undefined;
4
4
  isOpen: boolean;
5
5
  side: string;
6
- }, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
6
+ }, object>;
7
+ 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>;
8
+ export declare const MobilePageHeaderContent: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
7
9
  topOffset: number | undefined;
10
+ }, object>;
11
+ export declare const FakeBlanket: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
8
12
  isOpen: boolean;
9
- side: string;
10
- }>;
11
- export declare const MobilePageHeader: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement>, any, import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement>>;
12
- export declare const MobilePageHeaderContent: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & (import("@atlaskit/theme").ThemeProps | undefined), any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & (import("@atlaskit/theme").ThemeProps | undefined)>;
13
- export declare const FakeBlanket: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
14
- isOpen: boolean;
15
- }, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
16
- isOpen: boolean;
13
+ }, object>;
14
+ 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>, {
15
+ __ATLASKIT_THEME__: import("@atlaskit/theme").Theme;
17
16
  }>;
18
- export declare const PageHeading: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & (import("@atlaskit/theme").ThemeProps | undefined), any, import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & (import("@atlaskit/theme").ThemeProps | undefined)>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/mobile-header",
3
- "version": "5.0.12",
3
+ "version": "6.0.0",
4
4
  "description": "A React component rendering a mobile header",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -12,13 +12,6 @@
12
12
  "module": "dist/esm/index.js",
13
13
  "module:es2019": "dist/es2019/index.js",
14
14
  "types": "dist/types/index.d.ts",
15
- "typesVersions": {
16
- ">=4.0 <4.5": {
17
- "*": [
18
- "dist/types-ts4.0/*"
19
- ]
20
- }
21
- },
22
15
  "atlaskit:src": "src/index.ts",
23
16
  "atlassian": {
24
17
  "team": "Bitbucket: CoreX",
@@ -29,14 +22,15 @@
29
22
  }
30
23
  },
31
24
  "dependencies": {
32
- "@atlaskit/button": "^16.3.0",
25
+ "@atlaskit/button": "^16.4.0",
33
26
  "@atlaskit/icon": "^21.11.0",
34
27
  "@atlaskit/theme": "^12.2.0",
35
28
  "@babel/runtime": "^7.0.0"
36
29
  },
37
30
  "peerDependencies": {
38
- "react": "^16.8.0",
39
- "styled-components": "^3.2.6"
31
+ "@emotion/react": "^11.0.0",
32
+ "@emotion/styled": "^11.0.0",
33
+ "react": "^16.8.0"
40
34
  },
41
35
  "devDependencies": {
42
36
  "@atlaskit/banner": "^12.0.0",
package/report.api.md CHANGED
@@ -1,4 +1,4 @@
1
- <!-- API Report Version: 2.2 -->
1
+ <!-- API Report Version: 2.3 -->
2
2
 
3
3
  ## API Report File for "@atlaskit/mobile-header"
4
4
 
package/dist/types-ts4.0/components/MobileHeader.d.ts DELETED
@@ -1,35 +0,0 @@
1
- import React, { PureComponent, ReactNode } from 'react';
2
- interface MobileHeaderProps {
3
- navigation?: (isOpen: boolean) => ReactNode;
4
- sidebar?: (isOpen: boolean) => ReactNode;
5
- onNavigationOpen?: () => void;
6
- onDrawerClose?: () => void;
7
- drawerState: 'navigation' | 'sidebar' | 'none' | string;
8
- secondaryContent?: ReactNode;
9
- pageHeading: ReactNode;
10
- menuIconLabel: string;
11
- customMenu?: ReactNode;
12
- topOffset?: number;
13
- }
14
- interface MobileHeaderState {
15
- isAnimatingSidebar: boolean;
16
- isAnimatingNavigation: boolean;
17
- }
18
- declare class MobileHeader extends PureComponent<MobileHeaderProps, MobileHeaderState> {
19
- state: {
20
- isAnimatingNavigation: boolean;
21
- isAnimatingSidebar: boolean;
22
- };
23
- static defaultProps: {
24
- topOffset: number;
25
- pageHeading: string;
26
- menuIconLabel: string;
27
- drawerState: string;
28
- };
29
- UNSAFE_componentWillReceiveProps(nextProps: MobileHeaderProps): void;
30
- handleNavSlideFinish: () => void;
31
- handleSidebarSlideFinish: () => void;
32
- renderSlider: (isOpen: boolean, isAnimating: boolean, onTransitionEnd: ((event: React.TransitionEvent<HTMLDivElement>) => void) | undefined, side: string, renderFn?: ((isOpen: boolean) => ReactNode) | undefined, topOffset?: number | undefined) => JSX.Element;
33
- render(): JSX.Element;
34
- }
35
- export default MobileHeader;
package/dist/types-ts4.0/index.d.ts DELETED
@@ -1 +0,0 @@
1
- export { default } from './components/MobileHeader';
package/dist/types-ts4.0/styled.d.ts DELETED
@@ -1,18 +0,0 @@
1
- /// <reference types="react" />
2
- export declare const MobileNavSlider: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
3
- topOffset: number | undefined;
4
- isOpen: boolean;
5
- side: string;
6
- }, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
7
- topOffset: number | undefined;
8
- isOpen: boolean;
9
- side: string;
10
- }>;
11
- export declare const MobilePageHeader: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement>, any, import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement>>;
12
- export declare const MobilePageHeaderContent: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & (import("@atlaskit/theme").ThemeProps | undefined), any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & (import("@atlaskit/theme").ThemeProps | undefined)>;
13
- export declare const FakeBlanket: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
14
- isOpen: boolean;
15
- }, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
16
- isOpen: boolean;
17
- }>;
18
- export declare const PageHeading: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & (import("@atlaskit/theme").ThemeProps | undefined), any, import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & (import("@atlaskit/theme").ThemeProps | undefined)>;