@atlaskit/right-side-panel 1.1.11 → 1.1.13

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 (14) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/components/RightSidePanel/index.js +14 -46
  3. package/dist/cjs/components/RightSidePanel/styled.js +1 -16
  4. package/dist/cjs/components/styled.js +0 -8
  5. package/dist/cjs/index.js +0 -3
  6. package/dist/cjs/version.json +1 -1
  7. package/dist/es2019/components/RightSidePanel/index.js +2 -9
  8. package/dist/es2019/components/RightSidePanel/styled.js +2 -3
  9. package/dist/es2019/version.json +1 -1
  10. package/dist/esm/components/RightSidePanel/index.js +14 -31
  11. package/dist/esm/components/RightSidePanel/styled.js +1 -4
  12. package/dist/esm/components/styled.js +0 -2
  13. package/dist/esm/version.json +1 -1
  14. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/right-side-panel
2
2
 
3
+ ## 1.1.13
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 1.1.12
10
+
11
+ ### Patch Changes
12
+
13
+ - [`6455cf006b3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6455cf006b3) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving performance.
14
+
3
15
  ## 1.1.11
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/components/RightSidePanel/index.js CHANGED
@@ -1,52 +1,30 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
10
8
  exports.default = exports.UNMOUNTED = exports.TransitionStatus = exports.RightSidePanel = exports.EXITING = exports.EXITED = exports.ENTERING = exports.ENTERED = void 0;
11
-
12
9
  var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
13
-
14
10
  var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
15
-
16
11
  var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
17
-
18
12
  var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
19
-
20
13
  var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
21
-
22
14
  var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
23
-
24
15
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
25
-
26
16
  var _react = _interopRequireWildcard(require("react"));
27
-
28
17
  var _exenv = require("exenv");
29
-
30
18
  var _reactDom = require("react-dom");
31
-
32
19
  var _reactTransitionGroup = require("react-transition-group");
33
-
34
20
  var _constants = require("./constants");
35
-
36
21
  var _styled = require("./styled");
37
-
38
22
  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); }
39
-
40
23
  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; }
41
-
42
24
  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; }
43
-
44
25
  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; }
45
-
46
26
  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); }; }
47
-
48
27
  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; } }
49
-
50
28
  var UNMOUNTED = 'unmounted';
51
29
  exports.UNMOUNTED = UNMOUNTED;
52
30
  var EXITED = 'exited';
@@ -59,7 +37,6 @@ var EXITING = 'exiting';
59
37
  exports.EXITING = EXITING;
60
38
  var TransitionStatus;
61
39
  exports.TransitionStatus = TransitionStatus;
62
-
63
40
  (function (TransitionStatus) {
64
41
  TransitionStatus["UNMOUNTED"] = "unmounted";
65
42
  TransitionStatus["EXITED"] = "exited";
@@ -67,7 +44,6 @@ exports.TransitionStatus = TransitionStatus;
67
44
  TransitionStatus["ENTERED"] = "entered";
68
45
  TransitionStatus["EXITING"] = "exiting";
69
46
  })(TransitionStatus || (exports.TransitionStatus = TransitionStatus = {}));
70
-
71
47
  var defaultStyle = {
72
48
  transition: "width ".concat(_constants.transitionDurationMs, "ms,\n flex ").concat(_constants.transitionDurationMs, "ms"),
73
49
  width: "0",
@@ -83,21 +59,15 @@ var transitionStyles = {
83
59
  flex: "0 0 0"
84
60
  }
85
61
  };
86
-
87
62
  var RightSidePanel = /*#__PURE__*/function (_Component) {
88
63
  (0, _inherits2.default)(RightSidePanel, _Component);
89
-
90
64
  var _super = _createSuper(RightSidePanel);
91
-
92
65
  function RightSidePanel() {
93
66
  var _this;
94
-
95
67
  (0, _classCallCheck2.default)(this, RightSidePanel);
96
-
97
68
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
98
69
  args[_key] = arguments[_key];
99
70
  }
100
-
101
71
  _this = _super.call.apply(_super, [this].concat(args));
102
72
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "attachPanelTo", _this.props.attachPanelTo);
103
73
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
@@ -106,7 +76,6 @@ var RightSidePanel = /*#__PURE__*/function (_Component) {
106
76
  });
107
77
  return _this;
108
78
  }
109
-
110
79
  (0, _createClass2.default)(RightSidePanel, [{
111
80
  key: "componentDidMount",
112
81
  value: function componentDidMount() {
@@ -118,20 +87,20 @@ var RightSidePanel = /*#__PURE__*/function (_Component) {
118
87
  key: "renderDrawer",
119
88
  value: function renderDrawer(Container) {
120
89
  var _this$props = this.props,
121
- children = _this$props.children,
122
- isOpen = _this$props.isOpen,
123
- _this$props$skipAnima = _this$props.skipAnimationOnMount,
124
- skipAnimationOnMount = _this$props$skipAnima === void 0 ? false : _this$props$skipAnima,
125
- _this$props$mountOnEn = _this$props.mountOnEnter,
126
- mountOnEnter = _this$props$mountOnEn === void 0 ? true : _this$props$mountOnEn,
127
- _this$props$unmountOn = _this$props.unmountOnExit,
128
- unmountOnExit = _this$props$unmountOn === void 0 ? true : _this$props$unmountOn,
129
- _this$props$disableEn = _this$props.disableEnterAnimation,
130
- disableEnterAnimation = _this$props$disableEn === void 0 ? false : _this$props$disableEn,
131
- _this$props$disableEx = _this$props.disableExitAnimation,
132
- disableExitAnimation = _this$props$disableEx === void 0 ? false : _this$props$disableEx,
133
- onOpenAnimationFinished = _this$props.onOpenAnimationFinished,
134
- onCloseAnimationFinished = _this$props.onCloseAnimationFinished;
90
+ children = _this$props.children,
91
+ isOpen = _this$props.isOpen,
92
+ _this$props$skipAnima = _this$props.skipAnimationOnMount,
93
+ skipAnimationOnMount = _this$props$skipAnima === void 0 ? false : _this$props$skipAnima,
94
+ _this$props$mountOnEn = _this$props.mountOnEnter,
95
+ mountOnEnter = _this$props$mountOnEn === void 0 ? true : _this$props$mountOnEn,
96
+ _this$props$unmountOn = _this$props.unmountOnExit,
97
+ unmountOnExit = _this$props$unmountOn === void 0 ? true : _this$props$unmountOn,
98
+ _this$props$disableEn = _this$props.disableEnterAnimation,
99
+ disableEnterAnimation = _this$props$disableEn === void 0 ? false : _this$props$disableEn,
100
+ _this$props$disableEx = _this$props.disableExitAnimation,
101
+ disableExitAnimation = _this$props$disableEx === void 0 ? false : _this$props$disableEx,
102
+ onOpenAnimationFinished = _this$props.onOpenAnimationFinished,
103
+ onCloseAnimationFinished = _this$props.onCloseAnimationFinished;
135
104
  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
136
105
  in: isOpen,
137
106
  timeout: _constants.transitionDurationMs,
@@ -157,7 +126,6 @@ var RightSidePanel = /*#__PURE__*/function (_Component) {
157
126
  }]);
158
127
  return RightSidePanel;
159
128
  }(_react.Component);
160
-
161
129
  exports.RightSidePanel = RightSidePanel;
162
130
  var _default = RightSidePanel;
163
131
  exports.default = _default;
package/dist/cjs/components/RightSidePanel/styled.js CHANGED
@@ -1,34 +1,19 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
10
8
  exports.RightSidePanelDrawerContent = exports.RightSidePanelDrawer = void 0;
11
-
12
9
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
10
  var _styled = _interopRequireDefault(require("@emotion/styled"));
15
-
16
11
  var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
17
-
18
- var _tokens = require("@atlaskit/tokens");
19
-
20
12
  var _constants = require("./constants");
21
-
22
13
  var _templateObject, _templateObject2;
23
-
24
14
  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); }
25
-
26
15
  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; }
27
-
28
16
  var RightSidePanelDrawer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: ", "px;\n flex: 0 0 ", "px;\n position: relative;\n overflow: hidden;\n"])), _constants.panelWidth, _constants.panelWidth);
29
-
30
17
  exports.RightSidePanelDrawer = RightSidePanelDrawer;
31
-
32
- var RightSidePanelDrawerContent = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n box-sizing: border-box;\n flex: 1;\n border-left: 3px solid ", ";\n overflow: hidden;\n flex-direction: column;\n width: ", "px;\n height: 100%;\n position: fixed;\n"])), (0, _tokens.token)('elevation.surface.overlay', 'white'), (0, _tokens.token)('color.border', colors.N30), _constants.panelWidth);
33
-
18
+ var RightSidePanelDrawerContent = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n box-sizing: border-box;\n flex: 1;\n border-left: 3px solid ", ";\n overflow: hidden;\n flex-direction: column;\n width: ", "px;\n height: 100%;\n position: fixed;\n"])), "var(--ds-surface-overlay, white)", "var(--ds-border, ".concat(colors.N30, ")"), _constants.panelWidth);
34
19
  exports.RightSidePanelDrawerContent = RightSidePanelDrawerContent;
package/dist/cjs/components/styled.js CHANGED
@@ -1,22 +1,14 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.FlexContainer = exports.ContentWrapper = void 0;
9
-
10
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
-
12
9
  var _styled = _interopRequireDefault(require("@emotion/styled"));
13
-
14
10
  var _templateObject, _templateObject2;
15
-
16
11
  var FlexContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n"])));
17
-
18
12
  exports.FlexContainer = FlexContainer;
19
-
20
13
  var ContentWrapper = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n min-width: 0;\n flex: 1 1 auto;\n overflow-x: hidden;\n"])));
21
-
22
14
  exports.ContentWrapper = ContentWrapper;
package/dist/cjs/index.js CHANGED
@@ -1,7 +1,6 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
@@ -23,7 +22,5 @@ Object.defineProperty(exports, "RightSidePanel", {
23
22
  return _RightSidePanel.default;
24
23
  }
25
24
  });
26
-
27
25
  var _RightSidePanel = _interopRequireDefault(require("./components/RightSidePanel"));
28
-
29
26
  var _styled = require("./components/styled");
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/right-side-panel",
3
- "version": "1.1.11",
3
+ "version": "1.1.13",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/components/RightSidePanel/index.js CHANGED
@@ -12,7 +12,6 @@ export const ENTERING = 'entering';
12
12
  export const ENTERED = 'entered';
13
13
  export const EXITING = 'exiting';
14
14
  export let TransitionStatus;
15
-
16
15
  (function (TransitionStatus) {
17
16
  TransitionStatus["UNMOUNTED"] = "unmounted";
18
17
  TransitionStatus["EXITED"] = "exited";
@@ -20,7 +19,6 @@ export let TransitionStatus;
20
19
  TransitionStatus["ENTERED"] = "entered";
21
20
  TransitionStatus["EXITING"] = "exiting";
22
21
  })(TransitionStatus || (TransitionStatus = {}));
23
-
24
22
  const defaultStyle = {
25
23
  transition: `width ${transitionDurationMs}ms,
26
24
  flex ${transitionDurationMs}ms`,
@@ -40,21 +38,17 @@ const transitionStyles = {
40
38
  export class RightSidePanel extends Component {
41
39
  constructor(...args) {
42
40
  super(...args);
43
-
44
41
  _defineProperty(this, "attachPanelTo", this.props.attachPanelTo);
45
-
46
42
  _defineProperty(this, "state", {
47
43
  entered: false,
48
44
  container: undefined
49
45
  });
50
46
  }
51
-
52
47
  componentDidMount() {
53
48
  this.setState({
54
49
  container: canUseDOM ? document.querySelector('#' + this.attachPanelTo) : undefined
55
50
  });
56
51
  }
57
-
58
52
  renderDrawer(Container) {
59
53
  const {
60
54
  children,
@@ -78,18 +72,17 @@ export class RightSidePanel extends Component {
78
72
  onEntered: onOpenAnimationFinished,
79
73
  onExited: onCloseAnimationFinished
80
74
  }, state => /*#__PURE__*/React.createElement(RightSidePanelDrawer, {
81
- style: { ...defaultStyle,
75
+ style: {
76
+ ...defaultStyle,
82
77
  ...transitionStyles[state]
83
78
  }
84
79
  }, /*#__PURE__*/React.createElement(RightSidePanelDrawerContent, null, children))), Container);
85
80
  }
86
-
87
81
  render() {
88
82
  const {
89
83
  container
90
84
  } = this.state;
91
85
  return !!container ? this.renderDrawer(container) : null;
92
86
  }
93
-
94
87
  }
95
88
  export default RightSidePanel;
package/dist/es2019/components/RightSidePanel/styled.js CHANGED
@@ -1,7 +1,6 @@
1
1
  /** @jsx jsx */
2
2
  import styled from '@emotion/styled';
3
3
  import * as colors from '@atlaskit/theme/colors';
4
- import { token } from '@atlaskit/tokens';
5
4
  import { panelWidth } from './constants';
6
5
  export const RightSidePanelDrawer = styled.div`
7
6
  width: ${panelWidth}px;
@@ -10,10 +9,10 @@ export const RightSidePanelDrawer = styled.div`
10
9
  overflow: hidden;
11
10
  `;
12
11
  export const RightSidePanelDrawerContent = styled.div`
13
- background-color: ${token('elevation.surface.overlay', 'white')};
12
+ background-color: ${"var(--ds-surface-overlay, white)"};
14
13
  box-sizing: border-box;
15
14
  flex: 1;
16
- border-left: 3px solid ${token('color.border', colors.N30)};
15
+ border-left: 3px solid ${`var(--ds-border, ${colors.N30})`};
17
16
  overflow: hidden;
18
17
  flex-direction: column;
19
18
  width: ${panelWidth}px;
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/right-side-panel",
3
- "version": "1.1.11",
3
+ "version": "1.1.13",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/components/RightSidePanel/index.js CHANGED
@@ -5,15 +5,10 @@ import _inherits from "@babel/runtime/helpers/inherits";
5
5
  import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
6
6
  import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
7
7
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
8
-
9
8
  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; }
10
-
11
9
  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) { _defineProperty(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; }
12
-
13
10
  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); }; }
14
-
15
11
  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; } }
16
-
17
12
  import React from 'react';
18
13
  import { Component } from 'react';
19
14
  import { canUseDOM } from 'exenv';
@@ -27,7 +22,6 @@ export var ENTERING = 'entering';
27
22
  export var ENTERED = 'entered';
28
23
  export var EXITING = 'exiting';
29
24
  export var TransitionStatus;
30
-
31
25
  (function (TransitionStatus) {
32
26
  TransitionStatus["UNMOUNTED"] = "unmounted";
33
27
  TransitionStatus["EXITED"] = "exited";
@@ -35,7 +29,6 @@ export var TransitionStatus;
35
29
  TransitionStatus["ENTERED"] = "entered";
36
30
  TransitionStatus["EXITING"] = "exiting";
37
31
  })(TransitionStatus || (TransitionStatus = {}));
38
-
39
32
  var defaultStyle = {
40
33
  transition: "width ".concat(transitionDurationMs, "ms,\n flex ").concat(transitionDurationMs, "ms"),
41
34
  width: "0",
@@ -53,30 +46,21 @@ var transitionStyles = {
53
46
  };
54
47
  export var RightSidePanel = /*#__PURE__*/function (_Component) {
55
48
  _inherits(RightSidePanel, _Component);
56
-
57
49
  var _super = _createSuper(RightSidePanel);
58
-
59
50
  function RightSidePanel() {
60
51
  var _this;
61
-
62
52
  _classCallCheck(this, RightSidePanel);
63
-
64
53
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
65
54
  args[_key] = arguments[_key];
66
55
  }
67
-
68
56
  _this = _super.call.apply(_super, [this].concat(args));
69
-
70
57
  _defineProperty(_assertThisInitialized(_this), "attachPanelTo", _this.props.attachPanelTo);
71
-
72
58
  _defineProperty(_assertThisInitialized(_this), "state", {
73
59
  entered: false,
74
60
  container: undefined
75
61
  });
76
-
77
62
  return _this;
78
63
  }
79
-
80
64
  _createClass(RightSidePanel, [{
81
65
  key: "componentDidMount",
82
66
  value: function componentDidMount() {
@@ -88,20 +72,20 @@ export var RightSidePanel = /*#__PURE__*/function (_Component) {
88
72
  key: "renderDrawer",
89
73
  value: function renderDrawer(Container) {
90
74
  var _this$props = this.props,
91
- children = _this$props.children,
92
- isOpen = _this$props.isOpen,
93
- _this$props$skipAnima = _this$props.skipAnimationOnMount,
94
- skipAnimationOnMount = _this$props$skipAnima === void 0 ? false : _this$props$skipAnima,
95
- _this$props$mountOnEn = _this$props.mountOnEnter,
96
- mountOnEnter = _this$props$mountOnEn === void 0 ? true : _this$props$mountOnEn,
97
- _this$props$unmountOn = _this$props.unmountOnExit,
98
- unmountOnExit = _this$props$unmountOn === void 0 ? true : _this$props$unmountOn,
99
- _this$props$disableEn = _this$props.disableEnterAnimation,
100
- disableEnterAnimation = _this$props$disableEn === void 0 ? false : _this$props$disableEn,
101
- _this$props$disableEx = _this$props.disableExitAnimation,
102
- disableExitAnimation = _this$props$disableEx === void 0 ? false : _this$props$disableEx,
103
- onOpenAnimationFinished = _this$props.onOpenAnimationFinished,
104
- onCloseAnimationFinished = _this$props.onCloseAnimationFinished;
75
+ children = _this$props.children,
76
+ isOpen = _this$props.isOpen,
77
+ _this$props$skipAnima = _this$props.skipAnimationOnMount,
78
+ skipAnimationOnMount = _this$props$skipAnima === void 0 ? false : _this$props$skipAnima,
79
+ _this$props$mountOnEn = _this$props.mountOnEnter,
80
+ mountOnEnter = _this$props$mountOnEn === void 0 ? true : _this$props$mountOnEn,
81
+ _this$props$unmountOn = _this$props.unmountOnExit,
82
+ unmountOnExit = _this$props$unmountOn === void 0 ? true : _this$props$unmountOn,
83
+ _this$props$disableEn = _this$props.disableEnterAnimation,
84
+ disableEnterAnimation = _this$props$disableEn === void 0 ? false : _this$props$disableEn,
85
+ _this$props$disableEx = _this$props.disableExitAnimation,
86
+ disableExitAnimation = _this$props$disableEx === void 0 ? false : _this$props$disableEx,
87
+ onOpenAnimationFinished = _this$props.onOpenAnimationFinished,
88
+ onCloseAnimationFinished = _this$props.onCloseAnimationFinished;
105
89
  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Transition, {
106
90
  in: isOpen,
107
91
  timeout: transitionDurationMs,
@@ -125,7 +109,6 @@ export var RightSidePanel = /*#__PURE__*/function (_Component) {
125
109
  return !!container ? this.renderDrawer(container) : null;
126
110
  }
127
111
  }]);
128
-
129
112
  return RightSidePanel;
130
113
  }(Component);
131
114
  export default RightSidePanel;
package/dist/esm/components/RightSidePanel/styled.js CHANGED
@@ -1,11 +1,8 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
-
3
2
  var _templateObject, _templateObject2;
4
-
5
3
  /** @jsx jsx */
6
4
  import styled from '@emotion/styled';
7
5
  import * as colors from '@atlaskit/theme/colors';
8
- import { token } from '@atlaskit/tokens';
9
6
  import { panelWidth } from './constants';
10
7
  export var RightSidePanelDrawer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: ", "px;\n flex: 0 0 ", "px;\n position: relative;\n overflow: hidden;\n"])), panelWidth, panelWidth);
11
- export var RightSidePanelDrawerContent = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background-color: ", ";\n box-sizing: border-box;\n flex: 1;\n border-left: 3px solid ", ";\n overflow: hidden;\n flex-direction: column;\n width: ", "px;\n height: 100%;\n position: fixed;\n"])), token('elevation.surface.overlay', 'white'), token('color.border', colors.N30), panelWidth);
8
+ export var RightSidePanelDrawerContent = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background-color: ", ";\n box-sizing: border-box;\n flex: 1;\n border-left: 3px solid ", ";\n overflow: hidden;\n flex-direction: column;\n width: ", "px;\n height: 100%;\n position: fixed;\n"])), "var(--ds-surface-overlay, white)", "var(--ds-border, ".concat(colors.N30, ")"), panelWidth);
package/dist/esm/components/styled.js CHANGED
@@ -1,7 +1,5 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
-
3
2
  var _templateObject, _templateObject2;
4
-
5
3
  /** @jsx jsx */
6
4
  import styled from '@emotion/styled';
7
5
  export var FlexContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n"])));
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/right-side-panel",
3
- "version": "1.1.11",
3
+ "version": "1.1.13",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/right-side-panel",
3
- "version": "1.1.11",
3
+ "version": "1.1.13",
4
4
  "description": "A cross-product right-side-panel component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -24,7 +24,7 @@
24
24
  },
25
25
  "dependencies": {
26
26
  "@atlaskit/theme": "^12.2.0",
27
- "@atlaskit/tokens": "^0.13.0",
27
+ "@atlaskit/tokens": "^1.0.0",
28
28
  "@babel/runtime": "^7.0.0",
29
29
  "@emotion/styled": "^10.0.7",
30
30
  "exenv": "^1.2.2",