@synerise/ds-layout 1.0.22 → 1.1.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 (7) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/Layout.d.ts +1 -1
  3. package/dist/Layout.js +31 -70
  4. package/dist/Layout.types.d.ts +2 -0
  5. package/dist/Sidebar/Sidebar.d.ts +19 -0
  6. package/dist/Sidebar/Sidebar.js +59 -0
  7. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,25 @@
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.1.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@1.0.23...@synerise/ds-layout@1.1.0) (2025-12-01)
7
+
8
+
9
+ ### Features
10
+
11
+ * **layout:** layout sidebars without scroll ([15e7c32](https://github.com/synerise/synerise-design/commit/15e7c32d871a65729d89ed0f6f5ab031d0bb90a3))
12
+
13
+
14
+
15
+
16
+
17
+ ## [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)
18
+
19
+ **Note:** Version bump only for package @synerise/ds-layout
20
+
21
+
22
+
23
+
24
+
6
25
  ## [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)
7
26
 
8
27
  **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.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.22",
3
+ "version": "1.1.0",
4
4
  "description": "Layout UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "synerise/synerise-design",
@@ -35,8 +35,8 @@
35
35
  ],
36
36
  "types": "dist/index.d.ts",
37
37
  "dependencies": {
38
- "@synerise/ds-icon": "^1.8.0",
39
- "@synerise/ds-scrollbar": "^1.2.0",
38
+ "@synerise/ds-icon": "^1.9.0",
39
+ "@synerise/ds-scrollbar": "^1.2.1",
40
40
  "@synerise/ds-utils": "^1.5.0"
41
41
  },
42
42
  "peerDependencies": {
@@ -44,5 +44,5 @@
44
44
  "react": ">=16.9.0 <= 18.3.1",
45
45
  "styled-components": "^5.3.3"
46
46
  },
47
- "gitHead": "cbbb7d9f155735bcc4035d8fd8a7813878d6e051"
47
+ "gitHead": "5de2a1bf9ca25a01726f62ed33f49e7a30bb29a7"
48
48
  }