@synerise/ds-layout 1.0.23 → 1.1.1

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 (8) hide show
  1. package/CHANGELOG.md +8 -51
  2. package/dist/Layout.d.ts +1 -1
  3. package/dist/Layout.js +31 -70
  4. package/dist/Layout.styles.js +12 -12
  5. package/dist/Layout.types.d.ts +2 -0
  6. package/dist/Sidebar/Sidebar.d.ts +19 -0
  7. package/dist/Sidebar/Sidebar.js +59 -0
  8. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -3,113 +3,70 @@
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
- ## [1.0.23](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@1.0.22...@synerise/ds-layout@1.0.23) (2025-11-28)
6
+ ## [1.1.1](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@1.1.0...@synerise/ds-layout@1.1.1) (2025-12-15)
7
7
 
8
8
  **Note:** Version bump only for package @synerise/ds-layout
9
9
 
10
+ # [1.1.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@1.0.23...@synerise/ds-layout@1.1.0) (2025-12-01)
10
11
 
12
+ ### Features
11
13
 
14
+ - **layout:** layout sidebars without scroll ([15e7c32](https://github.com/synerise/synerise-design/commit/15e7c32d871a65729d89ed0f6f5ab031d0bb90a3))
12
15
 
13
-
14
- ## [1.0.22](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@1.0.21...@synerise/ds-layout@1.0.22) (2025-11-06)
16
+ ## [1.0.23](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@1.0.22...@synerise/ds-layout@1.0.23) (2025-11-28)
15
17
 
16
18
  **Note:** Version bump only for package @synerise/ds-layout
17
19
 
20
+ ## [1.0.22](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@1.0.21...@synerise/ds-layout@1.0.22) (2025-11-06)
18
21
 
19
-
20
-
22
+ **Note:** Version bump only for package @synerise/ds-layout
21
23
 
22
24
  ## [1.0.21](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@1.0.20...@synerise/ds-layout@1.0.21) (2025-10-31)
23
25
 
24
-
25
26
  ### Bug Fixes
26
27
 
27
- * **layout:** sidebar button sc workaround ([7fd9198](https://github.com/synerise/synerise-design/commit/7fd91987948610e5d7a55c47852b533f63929a1f))
28
-
29
-
30
-
31
-
28
+ - **layout:** sidebar button sc workaround ([7fd9198](https://github.com/synerise/synerise-design/commit/7fd91987948610e5d7a55c47852b533f63929a1f))
32
29
 
33
30
  ## [1.0.20](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@1.0.19...@synerise/ds-layout@1.0.20) (2025-10-10)
34
31
 
35
32
  **Note:** Version bump only for package @synerise/ds-layout
36
33
 
37
-
38
-
39
-
40
-
41
34
  ## [1.0.19](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@1.0.18...@synerise/ds-layout@1.0.19) (2025-09-16)
42
35
 
43
36
  **Note:** Version bump only for package @synerise/ds-layout
44
37
 
45
-
46
-
47
-
48
-
49
38
  ## [1.0.18](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@1.0.17...@synerise/ds-layout@1.0.18) (2025-08-28)
50
39
 
51
40
  **Note:** Version bump only for package @synerise/ds-layout
52
41
 
53
-
54
-
55
-
56
-
57
42
  ## [1.0.17](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@1.0.16...@synerise/ds-layout@1.0.17) (2025-08-14)
58
43
 
59
44
  **Note:** Version bump only for package @synerise/ds-layout
60
45
 
61
-
62
-
63
-
64
-
65
46
  ## [1.0.16](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@1.0.15...@synerise/ds-layout@1.0.16) (2025-07-24)
66
47
 
67
48
  **Note:** Version bump only for package @synerise/ds-layout
68
49
 
69
-
70
-
71
-
72
-
73
50
  ## [1.0.15](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@1.0.14...@synerise/ds-layout@1.0.15) (2025-07-17)
74
51
 
75
52
  **Note:** Version bump only for package @synerise/ds-layout
76
53
 
77
-
78
-
79
-
80
-
81
54
  ## [1.0.14](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@1.0.13...@synerise/ds-layout@1.0.14) (2025-07-15)
82
55
 
83
56
  **Note:** Version bump only for package @synerise/ds-layout
84
57
 
85
-
86
-
87
-
88
-
89
58
  ## [1.0.13](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@1.0.12...@synerise/ds-layout@1.0.13) (2025-07-01)
90
59
 
91
60
  **Note:** Version bump only for package @synerise/ds-layout
92
61
 
93
-
94
-
95
-
96
-
97
62
  ## [1.0.12](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@1.0.11...@synerise/ds-layout@1.0.12) (2025-06-26)
98
63
 
99
64
  **Note:** Version bump only for package @synerise/ds-layout
100
65
 
101
-
102
-
103
-
104
-
105
66
  ## [1.0.11](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@1.0.10...@synerise/ds-layout@1.0.11) (2025-06-24)
106
67
 
107
68
  **Note:** Version bump only for package @synerise/ds-layout
108
69
 
109
-
110
-
111
-
112
-
113
70
  ## [1.0.10](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@1.0.9...@synerise/ds-layout@1.0.10) (2025-06-05)
114
71
 
115
72
  **Note:** Version bump only for package @synerise/ds-layout
package/dist/Layout.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import type * as T from './Layout.types';
3
- declare const Layout: ({ header, left, right, children, className, styles, subheader, fullPage, nativeScroll, nativeScrollRef, fillViewport, viewportTopOffset, sidebarAnimationDisabled, renderLeftSidebarControls, renderRightSidebarControls, leftSidebarWithDnd, rightSidebarWithDnd, mainSidebarWithDnd, }: T.LayoutProps) => React.JSX.Element;
3
+ declare const Layout: ({ header, left, right, children, className, styles, subheader, fullPage, nativeScroll, nativeScrollRef, fillViewport, viewportTopOffset, sidebarAnimationDisabled, renderLeftSidebarControls, renderRightSidebarControls, leftSidebarWithDnd, rightSidebarWithDnd, leftSidebarWithScrollbar, rightSidebarWithScrollbar, mainSidebarWithDnd, }: T.LayoutProps) => React.JSX.Element;
4
4
  export default Layout;
package/dist/Layout.js CHANGED
@@ -1,8 +1,7 @@
1
- import React, { useMemo } from 'react';
2
- import { useTheme } from '@synerise/ds-core';
3
- import { AngleLeftS, AngleRightS, CloseS } from '@synerise/ds-icon';
1
+ import React from 'react';
4
2
  import Scrollbar from '@synerise/ds-scrollbar';
5
3
  import * as S from './Layout.styles';
4
+ import { Sidebar } from './Sidebar/Sidebar';
6
5
  var DEFAULT_SIDEBAR_WIDTH = 320;
7
6
  var Layout = function Layout(_ref) {
8
7
  var header = _ref.header,
@@ -27,21 +26,16 @@ var Layout = function Layout(_ref) {
27
26
  leftSidebarWithDnd = _ref$leftSidebarWithD === void 0 ? false : _ref$leftSidebarWithD,
28
27
  _ref$rightSidebarWith = _ref.rightSidebarWithDnd,
29
28
  rightSidebarWithDnd = _ref$rightSidebarWith === void 0 ? false : _ref$rightSidebarWith,
29
+ _ref$leftSidebarWithS = _ref.leftSidebarWithScrollbar,
30
+ leftSidebarWithScrollbar = _ref$leftSidebarWithS === void 0 ? true : _ref$leftSidebarWithS,
31
+ _ref$rightSidebarWith2 = _ref.rightSidebarWithScrollbar,
32
+ rightSidebarWithScrollbar = _ref$rightSidebarWith2 === void 0 ? true : _ref$rightSidebarWith2,
30
33
  _ref$mainSidebarWithD = _ref.mainSidebarWithDnd,
31
34
  mainSidebarWithDnd = _ref$mainSidebarWithD === void 0 ? false : _ref$mainSidebarWithD;
32
- var theme = useTheme();
33
- var leftSidebarWidth = useMemo(function () {
34
- return (left == null ? void 0 : left.width) || DEFAULT_SIDEBAR_WIDTH;
35
- }, [left]);
36
- var rightSidebarWidth = useMemo(function () {
37
- return (right == null ? void 0 : right.width) || DEFAULT_SIDEBAR_WIDTH;
38
- }, [right]);
39
- var showLeftSidebar = useMemo(function () {
40
- return (left == null ? void 0 : left.opened) || !renderLeftSidebarControls;
41
- }, [left, renderLeftSidebarControls]);
42
- var showRightSidebar = useMemo(function () {
43
- return (right == null ? void 0 : right.opened) || !renderRightSidebarControls;
44
- }, [right, renderRightSidebarControls]);
35
+ var leftSidebarWidth = (left == null ? void 0 : left.width) || DEFAULT_SIDEBAR_WIDTH;
36
+ var rightSidebarWidth = (right == null ? void 0 : right.width) || DEFAULT_SIDEBAR_WIDTH;
37
+ var showLeftSidebar = (left == null ? void 0 : left.opened) || !renderLeftSidebarControls;
38
+ var showRightSidebar = (right == null ? void 0 : right.opened) || !renderRightSidebarControls;
45
39
  var mainColumnInner = nativeScroll ? /*#__PURE__*/React.createElement(S.LayoutMainInner, {
46
40
  fullPage: fullPage,
47
41
  style: styles && styles.mainInner,
@@ -64,70 +58,37 @@ var Layout = function Layout(_ref) {
64
58
  className: "ds-layout__header"
65
59
  }, header) : null, /*#__PURE__*/React.createElement(S.LayoutContent, null, /*#__PURE__*/React.createElement(S.LayoutBody, {
66
60
  allowOverflow: !leftSidebarHasControls || !rightSidebarHasControls
67
- }, /*#__PURE__*/React.createElement(React.Fragment, null, left ? /*#__PURE__*/React.createElement(S.LayoutSidebarWrapper, {
61
+ }, left && /*#__PURE__*/React.createElement(Sidebar, {
68
62
  opened: showLeftSidebar,
63
+ bothOpened: Boolean((left == null ? void 0 : left.opened) && (right == null ? void 0 : right.opened)),
69
64
  openedWidth: leftSidebarWidth,
70
65
  animationDisabled: !!sidebarAnimationDisabled,
71
- hasControlButton: !!leftSidebarHasControls
72
- }, /*#__PURE__*/React.createElement(S.LayoutSidebar, {
73
- className: "ds-layout__sidebar",
74
- style: styles && styles.left,
75
- opened: showLeftSidebar,
76
- openedWidth: leftSidebarWidth,
77
- animationDisabled: !!sidebarAnimationDisabled
78
- }, /*#__PURE__*/React.createElement(Scrollbar, {
79
- absolute: true,
80
- withDnd: leftSidebarWithDnd
81
- }, /*#__PURE__*/React.createElement(S.LayoutSidebarInner, {
82
- style: styles && styles.leftInner
83
- }, left == null ? void 0 : left.content))), typeof renderLeftSidebarControls === 'function' && renderLeftSidebarControls() || renderLeftSidebarControls === true && /*#__PURE__*/React.createElement(S.SidebarButton, {
66
+ withControlButton: !!leftSidebarHasControls,
67
+ outerStyles: styles == null ? void 0 : styles.left,
68
+ innerStyles: styles == null ? void 0 : styles.leftInner,
69
+ withScrollbar: leftSidebarWithScrollbar,
70
+ scrollWithDnd: leftSidebarWithDnd,
71
+ renderControls: renderLeftSidebarControls,
84
72
  withSubheader: Boolean(subheader),
85
- onClick: function onClick() {
86
- return left == null ? void 0 : left.onChange(!(left != null && left.opened));
87
- },
88
- opened: !!(left != null && left.opened),
89
- bothOpened: (left == null ? void 0 : left.opened) && (right == null ? void 0 : right.opened)
90
- }, /*#__PURE__*/React.createElement(S.ArrowIcon, {
91
- component: /*#__PURE__*/React.createElement(AngleRightS, null),
92
- color: theme.palette.white
93
- }), /*#__PURE__*/React.createElement(S.CloseIcon, {
94
- component: /*#__PURE__*/React.createElement(CloseS, null),
95
- color: theme.palette.white
96
- }))) : null), /*#__PURE__*/React.createElement(S.LayoutMain, {
73
+ onChange: left == null ? void 0 : left.onChange
74
+ }, left.content), /*#__PURE__*/React.createElement(S.LayoutMain, {
97
75
  className: "ds-layout__main",
98
76
  "data-popup-container": true,
99
77
  style: styles && styles.main
100
- }, /*#__PURE__*/React.createElement(S.LayoutSubheader, null, subheader), mainColumnInner), /*#__PURE__*/React.createElement(React.Fragment, null, right ? /*#__PURE__*/React.createElement(S.LayoutSidebarWrapper, {
78
+ }, /*#__PURE__*/React.createElement(S.LayoutSubheader, null, subheader), mainColumnInner), right && /*#__PURE__*/React.createElement(Sidebar, {
101
79
  opened: showRightSidebar,
102
- right: true,
80
+ side: "right",
81
+ bothOpened: Boolean((left == null ? void 0 : left.opened) && (right == null ? void 0 : right.opened)),
103
82
  openedWidth: rightSidebarWidth,
104
83
  animationDisabled: !!sidebarAnimationDisabled,
105
- hasControlButton: !!rightSidebarHasControls
106
- }, /*#__PURE__*/React.createElement(S.LayoutSidebar, {
107
- className: "ds-layout__sidebar ds-layout__sidebar--right",
108
- style: styles && styles.right,
109
- opened: showRightSidebar,
110
- openedWidth: rightSidebarWidth,
111
- animationDisabled: !!sidebarAnimationDisabled
112
- }, /*#__PURE__*/React.createElement(Scrollbar, {
113
- absolute: true,
114
- withDnd: rightSidebarWithDnd
115
- }, /*#__PURE__*/React.createElement(S.LayoutSidebarInner, {
116
- style: styles && styles.rightInner
117
- }, right == null ? void 0 : right.content))), typeof renderRightSidebarControls === 'function' && renderRightSidebarControls() || renderRightSidebarControls === true && /*#__PURE__*/React.createElement(S.SidebarButton, {
84
+ withControlButton: !!rightSidebarHasControls,
85
+ outerStyles: styles == null ? void 0 : styles.right,
86
+ innerStyles: styles == null ? void 0 : styles.rightInner,
87
+ withScrollbar: rightSidebarWithScrollbar,
88
+ scrollWithDnd: rightSidebarWithDnd,
89
+ renderControls: renderRightSidebarControls,
118
90
  withSubheader: Boolean(subheader),
119
- onClick: function onClick() {
120
- return right == null ? void 0 : right.onChange(!(right != null && right.opened));
121
- },
122
- right: true,
123
- opened: !!(right != null && right.opened),
124
- bothOpened: (left == null ? void 0 : left.opened) && (right == null ? void 0 : right.opened)
125
- }, /*#__PURE__*/React.createElement(S.ArrowIcon, {
126
- component: /*#__PURE__*/React.createElement(AngleLeftS, null),
127
- color: theme.palette.white
128
- }), /*#__PURE__*/React.createElement(S.CloseIcon, {
129
- component: /*#__PURE__*/React.createElement(CloseS, null),
130
- color: theme.palette.white
131
- }))) : null))));
91
+ onChange: right == null ? void 0 : right.onChange
92
+ }, right.content))));
132
93
  };
133
94
  export default Layout;
package/dist/Layout.styles.js CHANGED
@@ -1,4 +1,4 @@
1
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23;
1
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
2
2
  function _taggedTemplateLiteralLoose(e, t) { return t || (t = e.slice(0)), e.raw = t, e; }
3
3
  import styled, { css } from 'styled-components';
4
4
  import { mediaQuery } from '@synerise/ds-core';
@@ -75,13 +75,13 @@ export var SidebarButton = styled.button.withConfig({
75
75
  }, ArrowIcon, function (props) {
76
76
  return mediaQuery.to.medium(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n ", "\n "])), props.right && props.opened && 'left: -44px');
77
77
  }, function (props) {
78
- return props.right && props.opened && mediaQuery.to.medium(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n 'left: -44px'}\n "])));
78
+ return props.right && props.opened && mediaQuery.to.medium(_templateObject0 || (_templateObject0 = _taggedTemplateLiteralLoose(["\n 'left: -44px'}\n "])));
79
79
  }, function (props) {
80
- return !props.right && props.opened && mediaQuery.to.medium(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["right: -44px"])));
80
+ return !props.right && props.opened && mediaQuery.to.medium(_templateObject1 || (_templateObject1 = _taggedTemplateLiteralLoose(["right: -44px"])));
81
81
  }, function (props) {
82
- return props.right && props.bothOpened && mediaQuery.to.small(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["transform: translateY(56px)"])));
82
+ return props.right && props.bothOpened && mediaQuery.to.small(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["transform: translateY(56px)"])));
83
83
  }, function (props) {
84
- return props.opened && css(["right:", ";left:", ";", ";", ";", "", "{transform:rotateZ(180deg);", ";}", "", "{", ";}"], props.right ? 'auto' : '-4px', !props.right ? 'auto' : '-4px', mediaQuery.to.medium(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["width: 44px;"]))), mediaQuery.to.medium(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["background-color: ", ";"])), props.theme.palette['grey-600']), ArrowIcon, ArrowIcon, mediaQuery.to.medium(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["display: none;"]))), CloseIcon, CloseIcon, mediaQuery.to.medium(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["display: flex;"]))));
84
+ return props.opened && css(["right:", ";left:", ";", ";", ";", "", "{transform:rotateZ(180deg);", ";}", "", "{", ";}"], props.right ? 'auto' : '-4px', !props.right ? 'auto' : '-4px', mediaQuery.to.medium(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["width: 44px;"]))), mediaQuery.to.medium(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["background-color: ", ";"])), props.theme.palette['grey-600']), ArrowIcon, ArrowIcon, mediaQuery.to.medium(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["display: none;"]))), CloseIcon, CloseIcon, mediaQuery.to.medium(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["display: flex;"]))));
85
85
  });
86
86
  export var LayoutSidebar = styled.div.withConfig({
87
87
  displayName: "Layoutstyles__LayoutSidebar",
@@ -90,12 +90,12 @@ export var LayoutSidebar = styled.div.withConfig({
90
90
  return !props.animationDisabled && css(["will-change:width;transform-style:preserve-3d;transition:max-width 0.3s ease;"]);
91
91
  }, function (props) {
92
92
  return props.openedWidth + "px";
93
- }, mediaQuery.to.medium(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["flex: 0 0 auto;"]))), function (props) {
94
- return mediaQuery.from.medium(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n flex: 0 1 ", "px;\n width: ", "px;"])), props.openedWidth, props.openedWidth);
93
+ }, mediaQuery.to.medium(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["flex: 0 0 auto;"]))), function (props) {
94
+ return mediaQuery.from.medium(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n flex: 0 1 ", "px;\n width: ", "px;"])), props.openedWidth, props.openedWidth);
95
95
  }, function (props) {
96
- return mediaQuery.from.medium(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n max-width: ", "px"])), props.opened ? props.openedWidth : 0);
96
+ return mediaQuery.from.medium(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n max-width: ", "px"])), props.opened ? props.openedWidth : 0);
97
97
  }, function (props) {
98
- return mediaQuery.from.medium(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n &.slide-enter {\n max-width: 0;\n }\n &.slide-enter.slide-enter-active {\n max-width: ", "px;\n }\n &.slide-leave {\n max-width: ", "px;\n }\n &.slide-leave.slide-leave-active {\n max-width: 0;\n }\n "])), props.openedWidth, props.openedWidth);
98
+ return mediaQuery.from.medium(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n &.slide-enter {\n max-width: 0;\n }\n &.slide-enter.slide-enter-active {\n max-width: ", "px;\n }\n &.slide-leave {\n max-width: ", "px;\n }\n &.slide-leave.slide-leave-active {\n max-width: 0;\n }\n "])), props.openedWidth, props.openedWidth);
99
99
  });
100
100
  export var LayoutSidebarWrapper = styled.div.withConfig({
101
101
  displayName: "Layoutstyles__LayoutSidebarWrapper",
@@ -113,11 +113,11 @@ export var LayoutSidebarWrapper = styled.div.withConfig({
113
113
  }, function (props) {
114
114
  return props.right ? 'auto' : '-32px';
115
115
  }, function (props) {
116
- return mediaQuery.to.medium(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["", ""])), props.right && props.opened && 'left: -44px');
116
+ return mediaQuery.to.medium(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["", ""])), props.right && props.opened && 'left: -44px');
117
117
  }, function (props) {
118
- return mediaQuery.to.medium(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["", ""])), !props.right && props.opened && 'right: -44px');
118
+ return mediaQuery.to.medium(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["", ""])), !props.right && props.opened && 'right: -44px');
119
119
  }, function (props) {
120
- return props.hasControlButton && css(["", ";"], mediaQuery.to.medium(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: ", "px;\n transform: ", ";\n\n ", " {\n position: absolute;\n top: 0;\n left: 0;\n width: ", "px;\n }\n "])), props.openedWidth, props.right ? "translateX(" + props.openedWidth + "px)" : "translateX(-" + props.openedWidth + "px)", LayoutSidebar, props.openedWidth));
120
+ return props.hasControlButton && css(["", ";"], mediaQuery.to.medium(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: ", "px;\n transform: ", ";\n\n ", " {\n position: absolute;\n top: 0;\n left: 0;\n width: ", "px;\n }\n "])), props.openedWidth, props.right ? "translateX(" + props.openedWidth + "px)" : "translateX(-" + props.openedWidth + "px)", LayoutSidebar, props.openedWidth));
121
121
  }, function (props) {
122
122
  return props.opened && css(["&&{margin:", ";transform:translateX(0);}"], props.right ? '0 0 0 1px' : '0 1px 0 0');
123
123
  });
package/dist/Layout.types.d.ts CHANGED
@@ -37,5 +37,7 @@ export type LayoutProps = {
37
37
  renderRightSidebarControls?: boolean | (() => ReactNode);
38
38
  leftSidebarWithDnd?: boolean;
39
39
  rightSidebarWithDnd?: boolean;
40
+ leftSidebarWithScrollbar?: boolean;
41
+ rightSidebarWithScrollbar?: boolean;
40
42
  mainSidebarWithDnd?: boolean;
41
43
  };
package/dist/Sidebar/Sidebar.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ import React, { type CSSProperties, type ReactNode } from 'react';
2
+ type SidebarProps = {
3
+ opened: boolean;
4
+ bothOpened: boolean;
5
+ withScrollbar: boolean;
6
+ withSubheader: boolean;
7
+ scrollWithDnd: boolean;
8
+ openedWidth: number;
9
+ animationDisabled: boolean;
10
+ withControlButton: boolean;
11
+ outerStyles?: CSSProperties;
12
+ innerStyles?: CSSProperties;
13
+ children?: ReactNode;
14
+ renderControls?: (() => ReactNode) | boolean;
15
+ onChange?: (isOpen: boolean) => void;
16
+ side?: 'right' | 'left';
17
+ };
18
+ export declare const Sidebar: ({ opened, openedWidth, animationDisabled, withControlButton, innerStyles, outerStyles, scrollWithDnd, children, withScrollbar, renderControls, withSubheader, side, bothOpened, onChange, }: SidebarProps) => React.JSX.Element;
19
+ export {};
package/dist/Sidebar/Sidebar.js ADDED
@@ -0,0 +1,59 @@
1
+ import React, { useMemo } from 'react';
2
+ import { useTheme } from '@synerise/ds-core';
3
+ import { AngleLeftS, AngleRightS, CloseS } from '@synerise/ds-icon';
4
+ import Scrollbar from '@synerise/ds-scrollbar';
5
+ import * as S from '../Layout.styles';
6
+ export var Sidebar = function Sidebar(_ref) {
7
+ var opened = _ref.opened,
8
+ openedWidth = _ref.openedWidth,
9
+ animationDisabled = _ref.animationDisabled,
10
+ withControlButton = _ref.withControlButton,
11
+ innerStyles = _ref.innerStyles,
12
+ outerStyles = _ref.outerStyles,
13
+ scrollWithDnd = _ref.scrollWithDnd,
14
+ children = _ref.children,
15
+ withScrollbar = _ref.withScrollbar,
16
+ renderControls = _ref.renderControls,
17
+ withSubheader = _ref.withSubheader,
18
+ side = _ref.side,
19
+ bothOpened = _ref.bothOpened,
20
+ onChange = _ref.onChange;
21
+ var theme = useTheme();
22
+ var contentWithScrollbar = useMemo(function () {
23
+ var content = /*#__PURE__*/React.createElement(S.LayoutSidebarInner, {
24
+ style: innerStyles
25
+ }, children);
26
+ return withScrollbar ? /*#__PURE__*/React.createElement(Scrollbar, {
27
+ absolute: true,
28
+ withDnd: scrollWithDnd
29
+ }, content) : content;
30
+ }, [children, scrollWithDnd, innerStyles, withScrollbar]);
31
+ var handleChange = function handleChange() {
32
+ return onChange == null ? void 0 : onChange(!opened);
33
+ };
34
+ return /*#__PURE__*/React.createElement(S.LayoutSidebarWrapper, {
35
+ opened: opened,
36
+ right: side === 'right',
37
+ openedWidth: openedWidth,
38
+ animationDisabled: animationDisabled,
39
+ hasControlButton: withControlButton
40
+ }, /*#__PURE__*/React.createElement(S.LayoutSidebar, {
41
+ className: "ds-layout__sidebar " + (side === 'right' && 'ds-layout__sidebar--right'),
42
+ style: outerStyles,
43
+ opened: opened,
44
+ openedWidth: openedWidth,
45
+ animationDisabled: animationDisabled
46
+ }, contentWithScrollbar), typeof renderControls === 'function' && renderControls() || renderControls === true && /*#__PURE__*/React.createElement(S.SidebarButton, {
47
+ withSubheader: withSubheader,
48
+ onClick: handleChange,
49
+ opened: opened,
50
+ right: side === 'right',
51
+ bothOpened: bothOpened
52
+ }, /*#__PURE__*/React.createElement(S.ArrowIcon, {
53
+ component: side === 'right' ? /*#__PURE__*/React.createElement(AngleLeftS, null) : /*#__PURE__*/React.createElement(AngleRightS, null),
54
+ color: theme.palette.white
55
+ }), /*#__PURE__*/React.createElement(S.CloseIcon, {
56
+ component: /*#__PURE__*/React.createElement(CloseS, null),
57
+ color: theme.palette.white
58
+ })));
59
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-layout",
3
- "version": "1.0.23",
3
+ "version": "1.1.1",
4
4
  "description": "Layout UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "synerise/synerise-design",
@@ -21,7 +21,7 @@
21
21
  "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
22
22
  "build:watch": "npm run build:js -- --watch",
23
23
  "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
24
- "pack:ci": "npm pack --pack-destination ../../storybook/storybook-static/static",
24
+ "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
25
25
  "prepublish": "npm run build",
26
26
  "test": "jest",
27
27
  "test:watch": "npm run test -- --watchAll",
@@ -35,14 +35,14 @@
35
35
  ],
36
36
  "types": "dist/index.d.ts",
37
37
  "dependencies": {
38
- "@synerise/ds-icon": "^1.9.0",
39
- "@synerise/ds-scrollbar": "^1.2.1",
40
- "@synerise/ds-utils": "^1.5.0"
38
+ "@synerise/ds-icon": "^1.9.1",
39
+ "@synerise/ds-scrollbar": "^1.2.2",
40
+ "@synerise/ds-utils": "^1.5.1"
41
41
  },
42
42
  "peerDependencies": {
43
43
  "@synerise/ds-core": "*",
44
44
  "react": ">=16.9.0 <= 18.3.1",
45
45
  "styled-components": "^5.3.3"
46
46
  },
47
- "gitHead": "d5bd7fbc9d840ac30e2b79b36c451b486e178445"
47
+ "gitHead": "b1279d5354132a2bf0b6f0cfa343db4c6c928f72"
48
48
  }