@synerise/ds-layout 0.8.4 → 0.10.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 +35 -0
- package/README.md +25 -13
- package/dist/Layout.js +35 -26
- package/dist/Layout.styles.d.ts +10 -1
- package/dist/Layout.styles.js +26 -8
- package/dist/Layout.types.d.ts +9 -4
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,41 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.10.2](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@0.10.1...@synerise/ds-layout@0.10.2) (2022-02-03)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-layout
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [0.10.1](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@0.10.0...@synerise/ds-layout@0.10.1) (2022-01-17)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @synerise/ds-layout
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
# [0.10.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@0.9.0...@synerise/ds-layout@0.10.0) (2022-01-13)
|
|
23
|
+
|
|
24
|
+
**Note:** Version bump only for package @synerise/ds-layout
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
# [0.9.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@0.8.4...@synerise/ds-layout@0.9.0) (2022-01-04)
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
### Features
|
|
34
|
+
|
|
35
|
+
* **layout:** adds custom width of sidebars ([cfd7a37](https://github.com/synerise/synerise-design/commit/cfd7a37e870d09e3a470f5bb113c58fd6fe413f8))
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
6
41
|
## [0.8.4](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@0.8.3...@synerise/ds-layout@0.8.4) (2021-12-29)
|
|
7
42
|
|
|
8
43
|
|
package/README.md
CHANGED
|
@@ -22,10 +22,8 @@ import Layout from '@synerise/ds-layout'
|
|
|
22
22
|
|
|
23
23
|
<Layout
|
|
24
24
|
header={<HeaderComponent />}
|
|
25
|
-
left={<LeftSidebarComponent
|
|
26
|
-
right={RightSidebarComponent}
|
|
27
|
-
leftOpened=true
|
|
28
|
-
rightOpened=true
|
|
25
|
+
left={{content: <LeftSidebarComponent />, opened: true, onChange: () => {}}}
|
|
26
|
+
right={{content: <RightSidebarComponent />, opened: false, onChange: () => {}}}
|
|
29
27
|
className={layoutClass}
|
|
30
28
|
>
|
|
31
29
|
<Content />
|
|
@@ -34,15 +32,29 @@ import Layout from '@synerise/ds-layout'
|
|
|
34
32
|
|
|
35
33
|
## API
|
|
36
34
|
|
|
37
|
-
| Property
|
|
38
|
-
| ---------
|
|
39
|
-
| header
|
|
40
|
-
| subheader
|
|
41
|
-
| left
|
|
42
|
-
| right
|
|
43
|
-
| children
|
|
44
|
-
| className
|
|
45
|
-
| styles
|
|
35
|
+
| Property | Description | Type | Default |
|
|
36
|
+
| --------- | ---------------------------------------- | --------------- | ------- |
|
|
37
|
+
| header | Set top header content page | React.ReactNode | |
|
|
38
|
+
| subheader | Set subheader content page | React.ReactNode | |
|
|
39
|
+
| left | Configuration of left sidebar | SidebarProps | |
|
|
40
|
+
| right | Configuration of right sidebar | SidebarProps | |
|
|
41
|
+
| children | The layout elements passed to the parent | React.ReactNode | |
|
|
42
|
+
| className | Layout's className | string | |
|
|
43
|
+
| styles | Custom layout styles | LayoutStyles | |
|
|
44
|
+
| leftOpened | Whether left sidebar is opened | boolean | false |
|
|
45
|
+
| rightOpened | Whether right sidebar is opened | boolean | false |
|
|
46
|
+
| leftOpenedWidth | Width of opened left sidebar | number | 320 |
|
|
47
|
+
| rightOpenedWidth | Width of opened right sidebar | number | 320 |
|
|
48
|
+
|
|
49
|
+
### SidebarProps
|
|
50
|
+
|
|
51
|
+
| Property | Description | Type | Default |
|
|
52
|
+
| --------- | ---------------------------------------- | --------------- | ------- |
|
|
53
|
+
| opened | Wheter sidebar is opened | boolean | false |
|
|
54
|
+
| onChange | Callback fired when user clicks the sidebar button | (isOpened: boolean) => void | - |
|
|
55
|
+
| content | Content of sidebar | React.ReactNode | - |
|
|
56
|
+
| width | Width of opened sidebar | number | 320 |
|
|
57
|
+
|
|
46
58
|
|
|
47
59
|
### LayoutStyles
|
|
48
60
|
|
package/dist/Layout.js
CHANGED
|
@@ -3,6 +3,7 @@ import Scrollbar from '@synerise/ds-scrollbar';
|
|
|
3
3
|
import { AngleLeftS, AngleRightS, CloseS } from '@synerise/ds-icon';
|
|
4
4
|
import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
|
|
5
5
|
import * as S from './Layout.styles';
|
|
6
|
+
var DEFAULT_SIDEBAR_WIDTH = 320;
|
|
6
7
|
|
|
7
8
|
var Layout = function Layout(_ref) {
|
|
8
9
|
var header = _ref.header,
|
|
@@ -12,40 +13,40 @@ var Layout = function Layout(_ref) {
|
|
|
12
13
|
className = _ref.className,
|
|
13
14
|
styles = _ref.styles,
|
|
14
15
|
subheader = _ref.subheader,
|
|
15
|
-
leftOpened = _ref.leftOpened,
|
|
16
|
-
rightOpened = _ref.rightOpened,
|
|
17
16
|
_ref$fullPage = _ref.fullPage,
|
|
18
|
-
fullPage = _ref$fullPage === void 0 ? false : _ref$fullPage
|
|
19
|
-
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
setRightSidebarOpened = _React$useState2[1];
|
|
27
|
-
|
|
17
|
+
fullPage = _ref$fullPage === void 0 ? false : _ref$fullPage,
|
|
18
|
+
sidebarAnimationDisabled = _ref.sidebarAnimationDisabled;
|
|
19
|
+
var leftSidebarWidth = React.useMemo(function () {
|
|
20
|
+
return (left == null ? void 0 : left.width) || DEFAULT_SIDEBAR_WIDTH;
|
|
21
|
+
}, [left]);
|
|
22
|
+
var rightSidebarWidth = React.useMemo(function () {
|
|
23
|
+
return (right == null ? void 0 : right.width) || DEFAULT_SIDEBAR_WIDTH;
|
|
24
|
+
}, [right]);
|
|
28
25
|
return /*#__PURE__*/React.createElement(S.LayoutContainer, {
|
|
29
26
|
className: "ds-layout " + (className || '')
|
|
30
27
|
}, header ? /*#__PURE__*/React.createElement(S.LayoutHeader, {
|
|
31
28
|
className: "ds-layout__header"
|
|
32
29
|
}, header) : null, /*#__PURE__*/React.createElement(S.LayoutContent, null, /*#__PURE__*/React.createElement(S.LayoutBody, null, /*#__PURE__*/React.createElement(React.Fragment, null, left ? /*#__PURE__*/React.createElement(S.LayoutSidebarWrapper, {
|
|
33
|
-
opened:
|
|
30
|
+
opened: !!(left != null && left.opened),
|
|
31
|
+
openedWidth: leftSidebarWidth,
|
|
32
|
+
animationDisabled: !!sidebarAnimationDisabled
|
|
34
33
|
}, /*#__PURE__*/React.createElement(S.LayoutSidebar, {
|
|
35
34
|
className: "ds-layout__sidebar",
|
|
36
35
|
style: styles && styles.left,
|
|
37
|
-
opened:
|
|
36
|
+
opened: !!left.opened,
|
|
37
|
+
openedWidth: leftSidebarWidth,
|
|
38
|
+
animationDisabled: !!sidebarAnimationDisabled
|
|
38
39
|
}, /*#__PURE__*/React.createElement(Scrollbar, {
|
|
39
40
|
absolute: true
|
|
40
41
|
}, /*#__PURE__*/React.createElement(S.LayoutSidebarInner, {
|
|
41
42
|
style: styles && styles.leftInner
|
|
42
|
-
}, left))), /*#__PURE__*/React.createElement(S.SidebarButton, {
|
|
43
|
+
}, left == null ? void 0 : left.content))), /*#__PURE__*/React.createElement(S.SidebarButton, {
|
|
43
44
|
withSubheader: Boolean(subheader),
|
|
44
45
|
onClick: function onClick() {
|
|
45
|
-
return
|
|
46
|
+
return left == null ? void 0 : left.onChange(!(left != null && left.opened));
|
|
46
47
|
},
|
|
47
|
-
opened:
|
|
48
|
-
bothOpened:
|
|
48
|
+
opened: !!(left != null && left.opened),
|
|
49
|
+
bothOpened: (left == null ? void 0 : left.opened) && (right == null ? void 0 : right.opened)
|
|
49
50
|
}, /*#__PURE__*/React.createElement(S.ArrowIcon, {
|
|
50
51
|
component: /*#__PURE__*/React.createElement(AngleRightS, null),
|
|
51
52
|
color: theme.palette.white
|
|
@@ -55,31 +56,39 @@ var Layout = function Layout(_ref) {
|
|
|
55
56
|
}))) : null), /*#__PURE__*/React.createElement(S.LayoutMain, {
|
|
56
57
|
className: "ds-layout__main",
|
|
57
58
|
"data-popup-container": true,
|
|
58
|
-
style: styles && styles.main
|
|
59
|
+
style: styles && styles.main,
|
|
60
|
+
leftOpened: !!(left != null && left.opened),
|
|
61
|
+
rightOpened: !!(right != null && right.opened),
|
|
62
|
+
leftSidebarWidth: leftSidebarWidth,
|
|
63
|
+
rightSidebarWidth: rightSidebarWidth
|
|
59
64
|
}, /*#__PURE__*/React.createElement(S.LayoutSubheader, null, subheader), /*#__PURE__*/React.createElement(Scrollbar, {
|
|
60
65
|
absolute: true
|
|
61
66
|
}, /*#__PURE__*/React.createElement(S.LayoutMainInner, {
|
|
62
67
|
fullPage: fullPage,
|
|
63
68
|
style: styles && styles.mainInner
|
|
64
69
|
}, children))), /*#__PURE__*/React.createElement(React.Fragment, null, right ? /*#__PURE__*/React.createElement(S.LayoutSidebarWrapper, {
|
|
65
|
-
opened:
|
|
66
|
-
right: true
|
|
70
|
+
opened: !!(right != null && right.opened),
|
|
71
|
+
right: true,
|
|
72
|
+
openedWidth: rightSidebarWidth,
|
|
73
|
+
animationDisabled: !!sidebarAnimationDisabled
|
|
67
74
|
}, /*#__PURE__*/React.createElement(S.LayoutSidebar, {
|
|
68
75
|
className: "ds-layout__sidebar ds-layout__sidebar--right",
|
|
69
76
|
style: styles && styles.right,
|
|
70
|
-
opened:
|
|
77
|
+
opened: !!(right != null && right.opened),
|
|
78
|
+
openedWidth: rightSidebarWidth,
|
|
79
|
+
animationDisabled: !!sidebarAnimationDisabled
|
|
71
80
|
}, /*#__PURE__*/React.createElement(Scrollbar, {
|
|
72
81
|
absolute: true
|
|
73
82
|
}, /*#__PURE__*/React.createElement(S.LayoutSidebarInner, {
|
|
74
83
|
style: styles && styles.rightInner
|
|
75
|
-
}, right))), /*#__PURE__*/React.createElement(S.SidebarButton, {
|
|
84
|
+
}, right == null ? void 0 : right.content))), /*#__PURE__*/React.createElement(S.SidebarButton, {
|
|
76
85
|
withSubheader: Boolean(subheader),
|
|
77
86
|
onClick: function onClick() {
|
|
78
|
-
return
|
|
87
|
+
return right == null ? void 0 : right.onChange(!(right != null && right.opened));
|
|
79
88
|
},
|
|
80
89
|
right: true,
|
|
81
|
-
opened:
|
|
82
|
-
bothOpened:
|
|
90
|
+
opened: !!(right != null && right.opened),
|
|
91
|
+
bothOpened: (left == null ? void 0 : left.opened) && (right == null ? void 0 : right.opened)
|
|
83
92
|
}, /*#__PURE__*/React.createElement(S.ArrowIcon, {
|
|
84
93
|
component: /*#__PURE__*/React.createElement(AngleLeftS, null),
|
|
85
94
|
color: theme.palette.white
|
package/dist/Layout.styles.d.ts
CHANGED
|
@@ -6,7 +6,12 @@ export declare const LayoutContent: import("styled-components").StyledComponent<
|
|
|
6
6
|
export declare const LayoutHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
7
7
|
export declare const LayoutSubheader: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
8
8
|
export declare const LayoutBody: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
9
|
-
export declare const LayoutMain: import("styled-components").StyledComponent<"div", any, {
|
|
9
|
+
export declare const LayoutMain: import("styled-components").StyledComponent<"div", any, {
|
|
10
|
+
leftOpened: boolean;
|
|
11
|
+
rightOpened: boolean;
|
|
12
|
+
leftSidebarWidth: number;
|
|
13
|
+
rightSidebarWidth: number;
|
|
14
|
+
}, never>;
|
|
10
15
|
export declare const LayoutMainInner: import("styled-components").StyledComponent<"div", any, {
|
|
11
16
|
fullPage: boolean;
|
|
12
17
|
}, never>;
|
|
@@ -19,11 +24,15 @@ declare type SidebarButtonProps = {
|
|
|
19
24
|
export declare const SidebarButton: import("styled-components").StyledComponent<"button", any, SidebarButtonProps, never>;
|
|
20
25
|
declare type LayoutSidebarProps = {
|
|
21
26
|
opened: boolean;
|
|
27
|
+
openedWidth: number;
|
|
28
|
+
animationDisabled: boolean;
|
|
22
29
|
};
|
|
23
30
|
export declare const LayoutSidebar: import("styled-components").StyledComponent<"div", any, LayoutSidebarProps, never>;
|
|
24
31
|
declare type LayoutSidebarWrapperProps = {
|
|
25
32
|
opened: boolean;
|
|
26
33
|
right?: boolean;
|
|
34
|
+
openedWidth: number;
|
|
35
|
+
animationDisabled: boolean;
|
|
27
36
|
};
|
|
28
37
|
export declare const LayoutSidebarWrapper: import("styled-components").StyledComponent<"div", any, LayoutSidebarWrapperProps, never>;
|
|
29
38
|
export declare const LayoutSidebarInner: import("styled-components").StyledComponent<"div", any, {}, never>;
|
package/dist/Layout.styles.js
CHANGED
|
@@ -41,7 +41,7 @@ export var LayoutBody = styled.div.withConfig({
|
|
|
41
41
|
export var LayoutMain = styled.div.withConfig({
|
|
42
42
|
displayName: "Layoutstyles__LayoutMain",
|
|
43
43
|
componentId: "i053aj-7"
|
|
44
|
-
})(["
|
|
44
|
+
})(["position:relative;max-width:100%;width:100%;", ";"], mediaQuery.to.small(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["min-width: 704px;"]))));
|
|
45
45
|
export var LayoutMainInner = styled.div.withConfig({
|
|
46
46
|
displayName: "Layoutstyles__LayoutMainInner",
|
|
47
47
|
componentId: "i053aj-8"
|
|
@@ -51,7 +51,7 @@ export var LayoutMainInner = styled.div.withConfig({
|
|
|
51
51
|
export var SidebarButton = styled.button.withConfig({
|
|
52
52
|
displayName: "Layoutstyles__SidebarButton",
|
|
53
53
|
componentId: "i053aj-9"
|
|
54
|
-
})(["width:36px;height:44px;background-color:", ";align-items:center;justify-content:center;position:absolute;cursor:pointer;border-radius:", ";right:", ";left:", ";top:", ";outline:0;border:0;display:flex;opacity:1;visibility:visible;transition:all 0.3s ease
|
|
54
|
+
})(["width:36px;height:44px;background-color:", ";align-items:center;justify-content:center;position:absolute;cursor:pointer;border-radius:", ";right:", ";left:", ";top:", ";outline:0;border:0;display:flex;opacity:1;visibility:visible;transition:all 0.3s ease;z-index:1;", ";", "{transition:transform 0.3s ease;}", ";", ";", " ", ";"], function (props) {
|
|
55
55
|
return props.theme.palette['grey-500'];
|
|
56
56
|
}, function (props) {
|
|
57
57
|
return props.right ? '3px 0 0 3px' : '0 3px 3px 0';
|
|
@@ -73,16 +73,32 @@ export var SidebarButton = styled.button.withConfig({
|
|
|
73
73
|
export var LayoutSidebar = styled.div.withConfig({
|
|
74
74
|
displayName: "Layoutstyles__LayoutSidebar",
|
|
75
75
|
componentId: "i053aj-10"
|
|
76
|
-
})(["position:relative;z-index:10;overflow-y:auto;overflow-x:hidden;background-color:#fff;height:100%;box-shadow:0 4px 12px 0 rgba(35,41,54,0.04);
|
|
77
|
-
return props.
|
|
78
|
-
}
|
|
76
|
+
})(["", ";position:relative;z-index:10;overflow-y:auto;overflow-x:hidden;background-color:#fff;height:100%;box-shadow:0 4px 12px 0 rgba(35,41,54,0.04);width:", ";max-width:100%;", ";", ";", ";", ";", "}"], function (props) {
|
|
77
|
+
return !props.animationDisabled && css(["will-change:width;transform-style:preserve-3d;transition:max-width 0.3s ease;"]);
|
|
78
|
+
}, function (props) {
|
|
79
|
+
return props.openedWidth + "px";
|
|
80
|
+
}, mediaQuery.to.medium(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["flex: 0 0 auto;"]))), mediaQuery.from.medium(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["flex: 0 1 ", "; width: ", ""])), function (props) {
|
|
81
|
+
return props.openedWidth + "px";
|
|
82
|
+
}, function (props) {
|
|
83
|
+
return props.openedWidth + "px;";
|
|
84
|
+
}), mediaQuery.from.medium(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["max-width: ", ";"])), function (props) {
|
|
85
|
+
return props.opened ? props.openedWidth + "px" : '0px';
|
|
86
|
+
}), mediaQuery.from.medium(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n &.slide-enter {\n max-width: 0;\n }\n &.slide-enter.slide-enter-active {\n max-width: ", ";\n }\n &.slide-leave {\n max-width: ", ";\n }\n &.slide-leave.slide-leave-active {\n max-width: 0;\n }\n "])), function (props) {
|
|
87
|
+
return props.openedWidth + "px";
|
|
88
|
+
}, function (props) {
|
|
89
|
+
return props.openedWidth + "px";
|
|
90
|
+
}), mediaQuery.to.medium(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n width: ", ";\n "])), function (props) {
|
|
91
|
+
return props.openedWidth + "px";
|
|
92
|
+
}));
|
|
79
93
|
export var LayoutSidebarWrapper = styled.div.withConfig({
|
|
80
94
|
displayName: "Layoutstyles__LayoutSidebarWrapper",
|
|
81
95
|
componentId: "i053aj-11"
|
|
82
|
-
})(["position:relative;overflow:visible;height:100%;
|
|
96
|
+
})(["position:relative;overflow:visible;height:100%;left:", ";right:", ";z-index:10;", ";&:hover{", "{background-color:", ";left:", ";right:", ";", ";", ";}}", ";", ";", ";", ";)"], function (props) {
|
|
83
97
|
return props.right ? 'auto' : '0';
|
|
84
98
|
}, function (props) {
|
|
85
99
|
return props.right ? '0' : 'auto';
|
|
100
|
+
}, function (props) {
|
|
101
|
+
return !props.animationDisabled && css(["will-change:width,transform;transform-style:preserve-3d;transition:width 0.3s ease,transform 0.3s ease;"]);
|
|
86
102
|
}, SidebarButton, function (props) {
|
|
87
103
|
return props.theme.palette['grey-600'];
|
|
88
104
|
}, function (props) {
|
|
@@ -93,8 +109,10 @@ export var LayoutSidebarWrapper = styled.div.withConfig({
|
|
|
93
109
|
return props.right && props.opened && 'left: -44px';
|
|
94
110
|
}), mediaQuery.to.medium(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["", ""])), function (props) {
|
|
95
111
|
return !props.right && props.opened && 'right: -44px';
|
|
96
|
-
}), mediaQuery.to.medium(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["position: absolute;"]))), mediaQuery.to.medium(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["width:
|
|
97
|
-
return props.
|
|
112
|
+
}), mediaQuery.to.medium(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["position: absolute;"]))), mediaQuery.to.medium(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["width: ", ";"])), function (props) {
|
|
113
|
+
return props.openedWidth + "px";
|
|
114
|
+
}), mediaQuery.to.medium(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["transform: ", ""])), function (props) {
|
|
115
|
+
return props.right ? "translateX(" + props.openedWidth + "px)" : "translateX(-" + props.openedWidth + "px)";
|
|
98
116
|
}), function (props) {
|
|
99
117
|
return props.opened && css(["&&{margin:", ";transform:translateX(0);}"], props.right ? '0 0 0 1px' : '0 1px 0 0');
|
|
100
118
|
});
|
package/dist/Layout.types.d.ts
CHANGED
|
@@ -7,15 +7,20 @@ export interface Style<T> {
|
|
|
7
7
|
right?: T;
|
|
8
8
|
rightInner?: T;
|
|
9
9
|
}
|
|
10
|
+
export declare type SidebarProps = {
|
|
11
|
+
content: React.ReactNode;
|
|
12
|
+
opened: boolean;
|
|
13
|
+
onChange: (isOpened: boolean) => void;
|
|
14
|
+
width?: number;
|
|
15
|
+
};
|
|
10
16
|
export declare type LayoutProps = {
|
|
11
17
|
header?: React.ReactNode;
|
|
12
18
|
subheader?: React.ReactNode;
|
|
13
|
-
left?:
|
|
14
|
-
right?:
|
|
19
|
+
left?: SidebarProps;
|
|
20
|
+
right?: SidebarProps;
|
|
15
21
|
children: React.ReactNode;
|
|
16
22
|
className?: string;
|
|
17
23
|
styles?: Style<React.CSSProperties>;
|
|
18
|
-
leftOpened?: boolean;
|
|
19
|
-
rightOpened?: boolean;
|
|
20
24
|
fullPage?: boolean;
|
|
25
|
+
sidebarAnimationDisabled?: boolean;
|
|
21
26
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-layout",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.10.2",
|
|
4
4
|
"description": "Layout UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "synerise/synerise-design",
|
|
@@ -32,13 +32,13 @@
|
|
|
32
32
|
],
|
|
33
33
|
"types": "dist/index.d.ts",
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@synerise/ds-icon": "^0.
|
|
36
|
-
"@synerise/ds-scrollbar": "^0.4.
|
|
37
|
-
"@synerise/ds-utils": "^0.
|
|
35
|
+
"@synerise/ds-icon": "^0.47.1",
|
|
36
|
+
"@synerise/ds-scrollbar": "^0.4.4",
|
|
37
|
+
"@synerise/ds-utils": "^0.21.5"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
40
40
|
"@synerise/ds-core": "*",
|
|
41
41
|
"react": ">=16.9.0 < 17.0.0"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "27ef26e44f1814e7fc97b46668078e9a78e8f217"
|
|
44
44
|
}
|