@synerise/ds-layout 0.14.7 → 0.14.8

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 (5) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/Layout.js +10 -8
  3. package/dist/Layout.styles.d.ts +4 -6
  4. package/dist/Layout.styles.js +10 -12
  5. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
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.14.8](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@0.14.7...@synerise/ds-layout@0.14.8) (2024-04-05)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **layout:** fixed sidebar overlap ([b4d21a4](https://github.com/synerise/synerise-design/commit/b4d21a4e757f6e787ad4c6f79f359a2e64d59ad0))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [0.14.7](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@0.14.6...@synerise/ds-layout@0.14.7) (2024-04-02)
7
18
 
8
19
  **Note:** Version bump only for package @synerise/ds-layout
package/dist/Layout.js CHANGED
@@ -53,6 +53,8 @@ var Layout = function Layout(_ref) {
53
53
  fullPage: fullPage,
54
54
  style: styles && styles.mainInner
55
55
  }, children));
56
+ var leftSidebarHasControls = left && renderLeftSidebarControls;
57
+ var rightSidebarHasControls = right && renderRightSidebarControls;
56
58
  return /*#__PURE__*/React.createElement(S.LayoutContainer, {
57
59
  fillViewport: fillViewport,
58
60
  viewportTopOffset: viewportTopOffset,
@@ -60,10 +62,13 @@ var Layout = function Layout(_ref) {
60
62
  className: "ds-layout " + (className || '')
61
63
  }, header ? /*#__PURE__*/React.createElement(S.LayoutHeader, {
62
64
  className: "ds-layout__header"
63
- }, 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, {
65
+ }, header) : null, /*#__PURE__*/React.createElement(S.LayoutContent, null, /*#__PURE__*/React.createElement(S.LayoutBody, {
66
+ allowOverflow: !leftSidebarHasControls || !rightSidebarHasControls
67
+ }, /*#__PURE__*/React.createElement(React.Fragment, null, left ? /*#__PURE__*/React.createElement(S.LayoutSidebarWrapper, {
64
68
  opened: showLeftSidebar,
65
69
  openedWidth: leftSidebarWidth,
66
- animationDisabled: !!sidebarAnimationDisabled
70
+ animationDisabled: !!sidebarAnimationDisabled,
71
+ hasControlButton: !!leftSidebarHasControls
67
72
  }, /*#__PURE__*/React.createElement(S.LayoutSidebar, {
68
73
  className: "ds-layout__sidebar",
69
74
  style: styles && styles.left,
@@ -91,16 +96,13 @@ var Layout = function Layout(_ref) {
91
96
  }))) : null), /*#__PURE__*/React.createElement(S.LayoutMain, {
92
97
  className: "ds-layout__main",
93
98
  "data-popup-container": true,
94
- style: styles && styles.main,
95
- leftOpened: showLeftSidebar,
96
- rightOpened: showRightSidebar,
97
- leftSidebarWidth: leftSidebarWidth,
98
- rightSidebarWidth: rightSidebarWidth
99
+ style: styles && styles.main
99
100
  }, /*#__PURE__*/React.createElement(S.LayoutSubheader, null, subheader), mainColumnInner), /*#__PURE__*/React.createElement(React.Fragment, null, right ? /*#__PURE__*/React.createElement(S.LayoutSidebarWrapper, {
100
101
  opened: showRightSidebar,
101
102
  right: true,
102
103
  openedWidth: rightSidebarWidth,
103
- animationDisabled: !!sidebarAnimationDisabled
104
+ animationDisabled: !!sidebarAnimationDisabled,
105
+ hasControlButton: !!rightSidebarHasControls
104
106
  }, /*#__PURE__*/React.createElement(S.LayoutSidebar, {
105
107
  className: "ds-layout__sidebar ds-layout__sidebar--right",
106
108
  style: styles && styles.right,
package/dist/Layout.styles.d.ts CHANGED
@@ -4,13 +4,10 @@ export declare const CloseIcon: import("styled-components").StyledComponent<impo
4
4
  export declare const LayoutContent: import("styled-components").StyledComponent<"div", any, {}, never>;
5
5
  export declare const LayoutHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
6
6
  export declare const LayoutSubheader: import("styled-components").StyledComponent<"div", any, {}, never>;
7
- export declare const LayoutBody: import("styled-components").StyledComponent<"div", any, {}, never>;
8
- export declare const LayoutMain: import("styled-components").StyledComponent<"div", any, {
9
- leftOpened: boolean;
10
- rightOpened: boolean;
11
- leftSidebarWidth: number;
12
- rightSidebarWidth: number;
7
+ export declare const LayoutBody: import("styled-components").StyledComponent<"div", any, {
8
+ allowOverflow?: boolean | undefined;
13
9
  }, never>;
10
+ export declare const LayoutMain: import("styled-components").StyledComponent<"div", any, {}, never>;
14
11
  export declare const LayoutMainInner: import("styled-components").StyledComponent<"div", any, {
15
12
  fullPage: boolean;
16
13
  }, never>;
@@ -33,6 +30,7 @@ type LayoutSidebarProps = {
33
30
  };
34
31
  export declare const LayoutSidebar: import("styled-components").StyledComponent<"div", any, LayoutSidebarProps, never>;
35
32
  type LayoutSidebarWrapperProps = {
33
+ hasControlButton: boolean;
36
34
  opened: boolean;
37
35
  right?: boolean;
38
36
  openedWidth: number;
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, _templateObject24, _templateObject25;
1
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
2
2
 
3
3
  function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
4
4
 
@@ -34,7 +34,9 @@ export var LayoutSubheader = styled.div.withConfig({
34
34
  export var LayoutBody = styled.div.withConfig({
35
35
  displayName: "Layoutstyles__LayoutBody",
36
36
  componentId: "i053aj-5"
37
- })(["flex:1;display:flex;flex-direction:column;min-height:0;min-width:0;position:relative;overflow:hidden;height:100%;", ";", ";"], mediaQuery.from.medium(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["flex-direction: row;"]))), mediaQuery.to.small(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["min-width: 704px;"]))));
37
+ })(["flex:1;display:flex;flex-direction:row;min-height:0;min-width:0;position:relative;overflow:hidden;height:100%;", ";", ";"], mediaQuery.to.small(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["min-width: 704px;}"]))), function (props) {
38
+ return props.allowOverflow && mediaQuery.to.small(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["overflow-x: auto;"])));
39
+ });
38
40
  export var LayoutMain = styled.div.withConfig({
39
41
  displayName: "Layoutstyles__LayoutMain",
40
42
  componentId: "i053aj-6"
@@ -82,7 +84,7 @@ export var SidebarButton = styled.button.withConfig({
82
84
  export var LayoutSidebar = styled.div.withConfig({
83
85
  displayName: "Layoutstyles__LayoutSidebar",
84
86
  componentId: "i053aj-10"
85
- })(["", ";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) {
87
+ })(["", ";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) {
86
88
  return !props.animationDisabled && css(["will-change:width;transform-style:preserve-3d;transition:max-width 0.3s ease;"]);
87
89
  }, function (props) {
88
90
  return props.openedWidth + "px";
@@ -96,13 +98,11 @@ export var LayoutSidebar = styled.div.withConfig({
96
98
  return props.openedWidth + "px";
97
99
  }, function (props) {
98
100
  return props.openedWidth + "px";
99
- }), mediaQuery.to.medium(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n width: ", ";\n "])), function (props) {
100
- return props.openedWidth + "px";
101
101
  }));
102
102
  export var LayoutSidebarWrapper = styled.div.withConfig({
103
103
  displayName: "Layoutstyles__LayoutSidebarWrapper",
104
104
  componentId: "i053aj-11"
105
- })(["position:relative;overflow:visible;height:100%;left:", ";right:", ";z-index:10;", ";&:hover{", "{background-color:", ";left:", ";right:", ";", ";", ";}}", ";", ";", ";", ";)"], function (props) {
105
+ })(["position:relative;overflow:visible;height:100%;left:", ";right:", ";z-index:10;", ";&:hover{", "{background-color:", ";left:", ";right:", ";", ";", ";}}", ";", ";)"], function (props) {
106
106
  return props.right ? 'auto' : '0';
107
107
  }, function (props) {
108
108
  return props.right ? '0' : 'auto';
@@ -114,15 +114,13 @@ export var LayoutSidebarWrapper = styled.div.withConfig({
114
114
  return props.right ? '-32px' : 'auto';
115
115
  }, function (props) {
116
116
  return props.right ? 'auto' : '-32px';
117
- }, mediaQuery.to.medium(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["", ""])), function (props) {
117
+ }, mediaQuery.to.medium(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["", ""])), function (props) {
118
118
  return props.right && props.opened && 'left: -44px';
119
- }), mediaQuery.to.medium(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["", ""])), function (props) {
119
+ }), mediaQuery.to.medium(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["", ""])), function (props) {
120
120
  return !props.right && props.opened && 'right: -44px';
121
- }), mediaQuery.to.medium(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["position: absolute;"]))), mediaQuery.to.medium(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["width: ", ";"])), function (props) {
122
- return props.openedWidth + "px";
123
- }), mediaQuery.to.medium(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["transform: ", ""])), function (props) {
124
- return props.right ? "translateX(" + props.openedWidth + "px)" : "translateX(-" + props.openedWidth + "px)";
125
121
  }), function (props) {
122
+ return props.hasControlButton && css(["", ";"], mediaQuery.to.medium(_templateObject22 || (_templateObject22 = _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));
123
+ }, function (props) {
126
124
  return props.opened && css(["&&{margin:", ";transform:translateX(0);}"], props.right ? '0 0 0 1px' : '0 1px 0 0');
127
125
  });
128
126
  export var LayoutSidebarInner = styled.div.withConfig({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-layout",
3
- "version": "0.14.7",
3
+ "version": "0.14.8",
4
4
  "description": "Layout UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "synerise/synerise-design",
@@ -42,5 +42,5 @@
42
42
  "react": ">=16.9.0 < 17.0.0",
43
43
  "styled-components": "5.0.1"
44
44
  },
45
- "gitHead": "67108cb227db0024b189fa289840cfb5a5d0de8c"
45
+ "gitHead": "84c9ff34c60369cc819ab1d4307373fafaf06462"
46
46
  }