@atlaskit/right-side-panel 3.0.0 → 3.0.2
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.
- package/CHANGELOG.md +16 -0
- package/dist/cjs/components/RightSidePanel/index.js +6 -2
- package/dist/cjs/components/RightSidePanel/styled.compiled.css +0 -1
- package/dist/cjs/components/RightSidePanel/styled.js +28 -20
- package/dist/es2019/components/RightSidePanel/index.js +5 -2
- package/dist/es2019/components/RightSidePanel/styled.compiled.css +1 -4
- package/dist/es2019/components/RightSidePanel/styled.js +20 -11
- package/dist/esm/components/RightSidePanel/index.js +6 -2
- package/dist/esm/components/RightSidePanel/styled.compiled.css +0 -1
- package/dist/esm/components/RightSidePanel/styled.js +28 -20
- package/dist/types/components/RightSidePanel/index.d.ts +1 -0
- package/dist/types/components/RightSidePanel/styled.d.ts +4 -2
- package/dist/types-ts4.5/components/RightSidePanel/index.d.ts +1 -0
- package/dist/types-ts4.5/components/RightSidePanel/styled.d.ts +4 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/right-side-panel
|
|
2
2
|
|
|
3
|
+
## 3.0.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#145839](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/145839)
|
|
8
|
+
[`275b54ae946ff`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/275b54ae946ff) -
|
|
9
|
+
[ux] Adding width prop
|
|
10
|
+
|
|
11
|
+
## 3.0.1
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [#144736](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/144736)
|
|
16
|
+
[`ff74b78729adb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ff74b78729adb) -
|
|
17
|
+
Internal change to move to Compiled CSS-in-JS styling.
|
|
18
|
+
|
|
3
19
|
## 3.0.0
|
|
4
20
|
|
|
5
21
|
### Major Changes
|
|
@@ -47,6 +47,7 @@ var RightSidePanel = exports.RightSidePanel = /*#__PURE__*/function (_Component)
|
|
|
47
47
|
}, {
|
|
48
48
|
key: "renderDrawer",
|
|
49
49
|
value: function renderDrawer(Container) {
|
|
50
|
+
var _this2 = this;
|
|
50
51
|
var _this$props = this.props,
|
|
51
52
|
children = _this$props.children,
|
|
52
53
|
isOpen = _this$props.isOpen,
|
|
@@ -74,8 +75,11 @@ var RightSidePanel = exports.RightSidePanel = /*#__PURE__*/function (_Component)
|
|
|
74
75
|
onExited: onCloseAnimationFinished
|
|
75
76
|
}, function (state) {
|
|
76
77
|
return /*#__PURE__*/_react.default.createElement(_styled.RightSidePanelDrawer, {
|
|
77
|
-
transitionState: state
|
|
78
|
-
|
|
78
|
+
transitionState: state,
|
|
79
|
+
width: _this2.props.width
|
|
80
|
+
}, /*#__PURE__*/_react.default.createElement(_styled.RightSidePanelDrawerContent, {
|
|
81
|
+
width: _this2.props.width
|
|
82
|
+
}, children));
|
|
79
83
|
}), Container);
|
|
80
84
|
}
|
|
81
85
|
}, {
|
|
@@ -16,37 +16,45 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
16
16
|
var PANEL_WIDTH = 368;
|
|
17
17
|
var transitionDurationMs = exports.transitionDurationMs = 220;
|
|
18
18
|
var rightSidePanelDrawerStyles = null;
|
|
19
|
-
var rightSidePanelDrawerTransitionStyles = {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
19
|
+
var rightSidePanelDrawerTransitionStyles = function rightSidePanelDrawerTransitionStyles(width) {
|
|
20
|
+
return {
|
|
21
|
+
entered: {
|
|
22
|
+
width: "".concat(width, "px"),
|
|
23
|
+
flex: "0 0 ".concat(width, "px")
|
|
24
|
+
},
|
|
25
|
+
exiting: {
|
|
26
|
+
width: 0,
|
|
27
|
+
flex: "0 0 0"
|
|
28
|
+
},
|
|
29
|
+
exited: {
|
|
30
|
+
width: 0,
|
|
31
|
+
flex: "0 0 0"
|
|
32
|
+
}
|
|
33
|
+
};
|
|
28
34
|
};
|
|
29
35
|
var RightSidePanelDrawer = exports.RightSidePanelDrawer = function RightSidePanelDrawer(_ref) {
|
|
30
36
|
var transitionState = _ref.transitionState,
|
|
31
|
-
children = _ref.children
|
|
37
|
+
children = _ref.children,
|
|
38
|
+
_ref$width = _ref.width,
|
|
39
|
+
width = _ref$width === void 0 ? PANEL_WIDTH : _ref$width;
|
|
32
40
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
"--_h7eijm": (0, _runtime.ix)("".concat(PANEL_WIDTH, "px")),
|
|
40
|
-
"--_14jqjno": (0, _runtime.ix)("0 0 ".concat(PANEL_WIDTH, "px"))
|
|
41
|
-
})
|
|
41
|
+
style: _objectSpread({
|
|
42
|
+
width: "".concat(width, "px"),
|
|
43
|
+
flex: "0 0 ".concat(width, "px"),
|
|
44
|
+
transition: "width ".concat(0.6 * width, "ms, flex ").concat(0.6 * width, "ms")
|
|
45
|
+
}, rightSidePanelDrawerTransitionStyles(width)[transitionState]),
|
|
46
|
+
className: (0, _runtime.ax)(["_1reo15vq _18m915vq _kqswh2mm"])
|
|
42
47
|
}, children);
|
|
43
48
|
};
|
|
44
49
|
var rightSidePanelDrawerContentStyles = null;
|
|
45
50
|
var RightSidePanelDrawerContent = exports.RightSidePanelDrawerContent = function RightSidePanelDrawerContent(_ref2) {
|
|
46
|
-
var children = _ref2.children
|
|
51
|
+
var children = _ref2.children,
|
|
52
|
+
_ref2$width = _ref2.width,
|
|
53
|
+
width = _ref2$width === void 0 ? PANEL_WIDTH : _ref2$width;
|
|
47
54
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
48
55
|
className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1kl75djz _bfhk1bhr _vchhusvi _2lx21bp4 _1bsb1xdr _4t3i1osq _kqsw1n9t"]),
|
|
49
56
|
style: {
|
|
57
|
+
width: "".concat(width, "px"),
|
|
50
58
|
"--_1na4za0": (0, _runtime.ix)("3px solid ".concat("var(--ds-border, ".concat(_colors.N30, ")"))),
|
|
51
59
|
"--_h7eijm": (0, _runtime.ix)("".concat(PANEL_WIDTH, "px"))
|
|
52
60
|
}
|
|
@@ -42,8 +42,11 @@ export class RightSidePanel extends Component {
|
|
|
42
42
|
onEntered: onOpenAnimationFinished,
|
|
43
43
|
onExited: onCloseAnimationFinished
|
|
44
44
|
}, state => /*#__PURE__*/React.createElement(RightSidePanelDrawer, {
|
|
45
|
-
transitionState: state
|
|
46
|
-
|
|
45
|
+
transitionState: state,
|
|
46
|
+
width: this.props.width
|
|
47
|
+
}, /*#__PURE__*/React.createElement(RightSidePanelDrawerContent, {
|
|
48
|
+
width: this.props.width
|
|
49
|
+
}, children))), Container);
|
|
47
50
|
}
|
|
48
51
|
render() {
|
|
49
52
|
const {
|
|
@@ -1,16 +1,13 @@
|
|
|
1
1
|
|
|
2
|
-
._1kl71osx{border-left:3px solid var(--ds-border,#ebecf0)}.
|
|
3
|
-
._16jlkb7n{flex-grow:1}
|
|
2
|
+
._1kl71osx{border-left:3px solid var(--ds-border,#ebecf0)}._16jlkb7n{flex-grow:1}
|
|
4
3
|
._18m915vq{overflow-y:hidden}
|
|
5
4
|
._1bsb1feq{width:23pc}
|
|
6
|
-
._1o9zidpf{flex-shrink:0}
|
|
7
5
|
._1o9zkb7n{flex-shrink:1}
|
|
8
6
|
._1reo15vq{overflow-x:hidden}
|
|
9
7
|
._2lx21bp4{flex-direction:column}
|
|
10
8
|
._4t3i1osq{height:100%}
|
|
11
9
|
._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
|
|
12
10
|
._i0dlf1ug{flex-basis:0%}
|
|
13
|
-
._i0dlorbt{flex-basis:368px}
|
|
14
11
|
._kqsw1n9t{position:fixed}
|
|
15
12
|
._kqswh2mm{position:relative}
|
|
16
13
|
._vchhusvi{box-sizing:border-box}
|
|
@@ -6,32 +6,41 @@ import { N30 } from '@atlaskit/theme/colors';
|
|
|
6
6
|
const PANEL_WIDTH = 368;
|
|
7
7
|
export const transitionDurationMs = 220;
|
|
8
8
|
const rightSidePanelDrawerStyles = null;
|
|
9
|
-
const rightSidePanelDrawerTransitionStyles = {
|
|
9
|
+
const rightSidePanelDrawerTransitionStyles = width => ({
|
|
10
10
|
entered: {
|
|
11
|
-
width: `${
|
|
12
|
-
flex: `0 0 ${
|
|
11
|
+
width: `${width}px`,
|
|
12
|
+
flex: `0 0 ${width}px`
|
|
13
|
+
},
|
|
14
|
+
exiting: {
|
|
15
|
+
width: 0,
|
|
16
|
+
flex: `0 0 0`
|
|
13
17
|
},
|
|
14
18
|
exited: {
|
|
15
19
|
width: 0,
|
|
16
20
|
flex: `0 0 0`
|
|
17
21
|
}
|
|
18
|
-
};
|
|
22
|
+
});
|
|
19
23
|
export const RightSidePanelDrawer = ({
|
|
20
24
|
transitionState,
|
|
21
|
-
children
|
|
25
|
+
children,
|
|
26
|
+
width = PANEL_WIDTH
|
|
22
27
|
}) => /*#__PURE__*/React.createElement("div", {
|
|
23
28
|
style: {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
29
|
+
width: `${width}px`,
|
|
30
|
+
flex: `0 0 ${width}px`,
|
|
31
|
+
transition: `width ${0.6 * width}ms, flex ${0.6 * width}ms`,
|
|
27
32
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
28
|
-
...rightSidePanelDrawerTransitionStyles[transitionState]
|
|
33
|
+
...rightSidePanelDrawerTransitionStyles(width)[transitionState]
|
|
29
34
|
},
|
|
30
|
-
className: ax(["
|
|
35
|
+
className: ax(["_1reo15vq _18m915vq _kqswh2mm"])
|
|
31
36
|
}, children);
|
|
32
37
|
const rightSidePanelDrawerContentStyles = null;
|
|
33
38
|
export const RightSidePanelDrawerContent = ({
|
|
34
|
-
children
|
|
39
|
+
children,
|
|
40
|
+
width = PANEL_WIDTH
|
|
35
41
|
}) => /*#__PURE__*/React.createElement("div", {
|
|
42
|
+
style: {
|
|
43
|
+
width: `${width}px`
|
|
44
|
+
},
|
|
36
45
|
className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1kl71osx _bfhk1bhr _vchhusvi _2lx21bp4 _1bsb1feq _4t3i1osq _kqsw1n9t"])
|
|
37
46
|
}, children);
|
|
@@ -38,6 +38,7 @@ export var RightSidePanel = /*#__PURE__*/function (_Component) {
|
|
|
38
38
|
}, {
|
|
39
39
|
key: "renderDrawer",
|
|
40
40
|
value: function renderDrawer(Container) {
|
|
41
|
+
var _this2 = this;
|
|
41
42
|
var _this$props = this.props,
|
|
42
43
|
children = _this$props.children,
|
|
43
44
|
isOpen = _this$props.isOpen,
|
|
@@ -65,8 +66,11 @@ export var RightSidePanel = /*#__PURE__*/function (_Component) {
|
|
|
65
66
|
onExited: onCloseAnimationFinished
|
|
66
67
|
}, function (state) {
|
|
67
68
|
return /*#__PURE__*/React.createElement(RightSidePanelDrawer, {
|
|
68
|
-
transitionState: state
|
|
69
|
-
|
|
69
|
+
transitionState: state,
|
|
70
|
+
width: _this2.props.width
|
|
71
|
+
}, /*#__PURE__*/React.createElement(RightSidePanelDrawerContent, {
|
|
72
|
+
width: _this2.props.width
|
|
73
|
+
}, children));
|
|
70
74
|
}), Container);
|
|
71
75
|
}
|
|
72
76
|
}, {
|
|
@@ -9,37 +9,45 @@ import { N30 } from '@atlaskit/theme/colors';
|
|
|
9
9
|
var PANEL_WIDTH = 368;
|
|
10
10
|
export var transitionDurationMs = 220;
|
|
11
11
|
var rightSidePanelDrawerStyles = null;
|
|
12
|
-
var rightSidePanelDrawerTransitionStyles = {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
12
|
+
var rightSidePanelDrawerTransitionStyles = function rightSidePanelDrawerTransitionStyles(width) {
|
|
13
|
+
return {
|
|
14
|
+
entered: {
|
|
15
|
+
width: "".concat(width, "px"),
|
|
16
|
+
flex: "0 0 ".concat(width, "px")
|
|
17
|
+
},
|
|
18
|
+
exiting: {
|
|
19
|
+
width: 0,
|
|
20
|
+
flex: "0 0 0"
|
|
21
|
+
},
|
|
22
|
+
exited: {
|
|
23
|
+
width: 0,
|
|
24
|
+
flex: "0 0 0"
|
|
25
|
+
}
|
|
26
|
+
};
|
|
21
27
|
};
|
|
22
28
|
export var RightSidePanelDrawer = function RightSidePanelDrawer(_ref) {
|
|
23
29
|
var transitionState = _ref.transitionState,
|
|
24
|
-
children = _ref.children
|
|
30
|
+
children = _ref.children,
|
|
31
|
+
_ref$width = _ref.width,
|
|
32
|
+
width = _ref$width === void 0 ? PANEL_WIDTH : _ref$width;
|
|
25
33
|
return /*#__PURE__*/React.createElement("div", {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
"--_h7eijm": ix("".concat(PANEL_WIDTH, "px")),
|
|
33
|
-
"--_14jqjno": ix("0 0 ".concat(PANEL_WIDTH, "px"))
|
|
34
|
-
})
|
|
34
|
+
style: _objectSpread({
|
|
35
|
+
width: "".concat(width, "px"),
|
|
36
|
+
flex: "0 0 ".concat(width, "px"),
|
|
37
|
+
transition: "width ".concat(0.6 * width, "ms, flex ").concat(0.6 * width, "ms")
|
|
38
|
+
}, rightSidePanelDrawerTransitionStyles(width)[transitionState]),
|
|
39
|
+
className: ax(["_1reo15vq _18m915vq _kqswh2mm"])
|
|
35
40
|
}, children);
|
|
36
41
|
};
|
|
37
42
|
var rightSidePanelDrawerContentStyles = null;
|
|
38
43
|
export var RightSidePanelDrawerContent = function RightSidePanelDrawerContent(_ref2) {
|
|
39
|
-
var children = _ref2.children
|
|
44
|
+
var children = _ref2.children,
|
|
45
|
+
_ref2$width = _ref2.width,
|
|
46
|
+
width = _ref2$width === void 0 ? PANEL_WIDTH : _ref2$width;
|
|
40
47
|
return /*#__PURE__*/React.createElement("div", {
|
|
41
48
|
className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1kl75djz _bfhk1bhr _vchhusvi _2lx21bp4 _1bsb1xdr _4t3i1osq _kqsw1n9t"]),
|
|
42
49
|
style: {
|
|
50
|
+
width: "".concat(width, "px"),
|
|
43
51
|
"--_1na4za0": ix("3px solid ".concat("var(--ds-border, ".concat(N30, ")"))),
|
|
44
52
|
"--_h7eijm": ix("".concat(PANEL_WIDTH, "px"))
|
|
45
53
|
}
|
|
@@ -5,10 +5,12 @@
|
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import { TransitionStatus } from '.';
|
|
7
7
|
export declare const transitionDurationMs = 220;
|
|
8
|
-
export declare const RightSidePanelDrawer: ({ transitionState, children, }: {
|
|
8
|
+
export declare const RightSidePanelDrawer: ({ transitionState, children, width, }: {
|
|
9
9
|
transitionState: TransitionStatus;
|
|
10
10
|
children: React.ReactNode;
|
|
11
|
+
width?: number | undefined;
|
|
11
12
|
}) => JSX.Element;
|
|
12
|
-
export declare const RightSidePanelDrawerContent: ({ children }: {
|
|
13
|
+
export declare const RightSidePanelDrawerContent: ({ children, width, }: {
|
|
13
14
|
children: React.ReactNode;
|
|
15
|
+
width?: number | undefined;
|
|
14
16
|
}) => JSX.Element;
|
|
@@ -5,10 +5,12 @@
|
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import { TransitionStatus } from '.';
|
|
7
7
|
export declare const transitionDurationMs = 220;
|
|
8
|
-
export declare const RightSidePanelDrawer: ({ transitionState, children, }: {
|
|
8
|
+
export declare const RightSidePanelDrawer: ({ transitionState, children, width, }: {
|
|
9
9
|
transitionState: TransitionStatus;
|
|
10
10
|
children: React.ReactNode;
|
|
11
|
+
width?: number | undefined;
|
|
11
12
|
}) => JSX.Element;
|
|
12
|
-
export declare const RightSidePanelDrawerContent: ({ children }: {
|
|
13
|
+
export declare const RightSidePanelDrawerContent: ({ children, width, }: {
|
|
13
14
|
children: React.ReactNode;
|
|
15
|
+
width?: number | undefined;
|
|
14
16
|
}) => JSX.Element;
|