@synerise/ds-layout 1.0.14 → 1.0.16

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 (4) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/Layout.styles.d.ts +6 -7
  3. package/dist/Layout.styles.js +25 -25
  4. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -3,6 +3,22 @@
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.16](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@1.0.15...@synerise/ds-layout@1.0.16) (2025-07-24)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-layout
9
+
10
+
11
+
12
+
13
+
14
+ ## [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)
15
+
16
+ **Note:** Version bump only for package @synerise/ds-layout
17
+
18
+
19
+
20
+
21
+
6
22
  ## [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)
7
23
 
8
24
  **Note:** Version bump only for package @synerise/ds-layout
package/dist/Layout.styles.d.ts CHANGED
@@ -1,20 +1,19 @@
1
- /// <reference types="react" />
2
- export declare const ArrowIcon: import("styled-components").StyledComponent<({ name, component, className, ...rest }: import("@synerise/ds-icon").IconProps) => import("react").JSX.Element, any, {}, never>;
3
- export declare const CloseIcon: import("styled-components").StyledComponent<({ name, component, className, ...rest }: import("@synerise/ds-icon").IconProps) => import("react").JSX.Element, any, {}, never>;
1
+ export declare const ArrowIcon: import("styled-components").StyledComponent<({ name, component, className, ...rest }: import("@synerise/ds-icon").IconProps) => React.JSX.Element, any, {}, never>;
2
+ export declare const CloseIcon: import("styled-components").StyledComponent<({ name, component, className, ...rest }: import("@synerise/ds-icon").IconProps) => React.JSX.Element, any, {}, never>;
4
3
  export declare const LayoutContent: import("styled-components").StyledComponent<"div", any, {}, never>;
5
4
  export declare const LayoutHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
6
5
  export declare const LayoutSubheader: import("styled-components").StyledComponent<"div", any, {}, never>;
7
6
  export declare const LayoutBody: import("styled-components").StyledComponent<"div", any, {
8
- allowOverflow?: boolean | undefined;
7
+ allowOverflow?: boolean;
9
8
  }, never>;
10
9
  export declare const LayoutMain: import("styled-components").StyledComponent<"div", any, {}, never>;
11
10
  export declare const LayoutMainInner: import("styled-components").StyledComponent<"div", any, {
12
11
  fullPage: boolean;
13
12
  }, never>;
14
13
  export declare const LayoutContainer: import("styled-components").StyledComponent<"div", any, {
15
- nativeScroll?: boolean | undefined;
16
- fillViewport?: boolean | undefined;
17
- viewportTopOffset?: number | undefined;
14
+ nativeScroll?: boolean;
15
+ fillViewport?: boolean;
16
+ viewportTopOffset?: number;
18
17
  }, never>;
19
18
  type SidebarButtonProps = {
20
19
  right?: boolean;
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;
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;
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';
@@ -60,7 +60,7 @@ export var LayoutContainer = styled.div.withConfig({
60
60
  export var SidebarButton = styled.button.withConfig({
61
61
  displayName: "Layoutstyles__SidebarButton",
62
62
  componentId: "sc-i053aj-9"
63
- })(["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) {
63
+ })(["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) {
64
64
  return props.theme.palette['grey-500'];
65
65
  }, function (props) {
66
66
  return props.right ? '3px 0 0 3px' : '0 3px 3px 0';
@@ -70,14 +70,18 @@ export var SidebarButton = styled.button.withConfig({
70
70
  return !props.right ? 'auto' : '-32px';
71
71
  }, function (props) {
72
72
  return props.withSubheader ? '170px' : '48px';
73
- }, mediaQuery.to.medium(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["display: flex; opacity: 1; visibility: visible"]))), ArrowIcon, mediaQuery.to.medium(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["", ""])), function (props) {
74
- return props.right && props.opened && 'left: -44px';
75
- }), mediaQuery.to.medium(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["", ""])), function (props) {
76
- return !props.right && props.opened && 'right: -44px';
77
- }), mediaQuery.to.small(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["", ""])), function (props) {
78
- return props.right && props.bothOpened && 'transform: translateY(56px)';
79
- }), function (props) {
80
- return props.opened && css(["right:", ";left:", ";", ";", ";", "{transform:rotateZ(180deg);", ";}", "{", ";}"], props.right ? 'auto' : '-4px', !props.right ? 'auto' : '-4px', mediaQuery.to.medium(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["width: 44px;"]))), mediaQuery.to.medium(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["background-color: ", ";"])), props.theme.palette['grey-600']), ArrowIcon, mediaQuery.to.medium(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["display: none;"]))), CloseIcon, mediaQuery.to.medium(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["display: flex;"]))));
73
+ }, function (props) {
74
+ return mediaQuery.to.medium(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["display: flex; ", " opacity: 1; visibility: visible"])), props.theme.palette.white);
75
+ }, ArrowIcon, function (props) {
76
+ return mediaQuery.to.medium(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n ", "\n "])), props.right && props.opened && 'left: -44px');
77
+ }, function (props) {
78
+ return props.right && props.opened && mediaQuery.to.medium(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n 'left: -44px'}\n "])));
79
+ }, function (props) {
80
+ return !props.right && props.opened && mediaQuery.to.medium(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["right: -44px"])));
81
+ }, function (props) {
82
+ return props.right && props.bothOpened && mediaQuery.to.small(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["transform: translateY(56px)"])));
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, mediaQuery.to.medium(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["display: none;"]))), CloseIcon, mediaQuery.to.medium(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["display: flex;"]))));
81
85
  });
82
86
  export var LayoutSidebar = styled.div.withConfig({
83
87
  displayName: "Layoutstyles__LayoutSidebar",
@@ -86,17 +90,13 @@ export var LayoutSidebar = styled.div.withConfig({
86
90
  return !props.animationDisabled && css(["will-change:width;transform-style:preserve-3d;transition:max-width 0.3s ease;"]);
87
91
  }, function (props) {
88
92
  return props.openedWidth + "px";
89
- }, mediaQuery.to.medium(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["flex: 0 0 auto;"]))), mediaQuery.from.medium(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["flex: 0 1 ", "; width: ", ""])), function (props) {
90
- 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);
91
95
  }, function (props) {
92
- return props.openedWidth + "px;";
93
- }), mediaQuery.from.medium(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["max-width: ", ";"])), function (props) {
94
- return props.opened ? props.openedWidth + "px" : '0px';
95
- }), mediaQuery.from.medium(_templateObject19 || (_templateObject19 = _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) {
96
- return props.openedWidth + "px";
96
+ return mediaQuery.from.medium(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n max-width: ", "px"])), props.opened ? props.openedWidth : 0);
97
97
  }, function (props) {
98
- return props.openedWidth + "px";
99
- }));
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);
99
+ });
100
100
  export var LayoutSidebarWrapper = styled.div.withConfig({
101
101
  displayName: "Layoutstyles__LayoutSidebarWrapper",
102
102
  componentId: "sc-i053aj-11"
@@ -112,12 +112,12 @@ export var LayoutSidebarWrapper = styled.div.withConfig({
112
112
  return props.right ? '-32px' : 'auto';
113
113
  }, function (props) {
114
114
  return props.right ? 'auto' : '-32px';
115
- }, mediaQuery.to.medium(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["", ""])), function (props) {
116
- return props.right && props.opened && 'left: -44px';
117
- }), mediaQuery.to.medium(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["", ""])), function (props) {
118
- return !props.right && props.opened && 'right: -44px';
119
- }), function (props) {
120
- 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));
115
+ }, function (props) {
116
+ return mediaQuery.to.medium(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["", ""])), props.right && props.opened && 'left: -44px');
117
+ }, function (props) {
118
+ return mediaQuery.to.medium(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["", ""])), !props.right && props.opened && 'right: -44px');
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));
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-layout",
3
- "version": "1.0.14",
3
+ "version": "1.0.16",
4
4
  "description": "Layout UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "synerise/synerise-design",
@@ -34,14 +34,14 @@
34
34
  ],
35
35
  "types": "dist/index.d.ts",
36
36
  "dependencies": {
37
- "@synerise/ds-icon": "^1.6.0",
38
- "@synerise/ds-scrollbar": "^1.1.3",
39
- "@synerise/ds-utils": "^1.3.1"
37
+ "@synerise/ds-icon": "^1.6.2",
38
+ "@synerise/ds-scrollbar": "^1.1.5",
39
+ "@synerise/ds-utils": "^1.4.0"
40
40
  },
41
41
  "peerDependencies": {
42
42
  "@synerise/ds-core": "*",
43
43
  "react": ">=16.9.0 <= 18.3.1",
44
44
  "styled-components": "^5.3.3"
45
45
  },
46
- "gitHead": "f7c362a4f370d86b51df9aba9e91ac8f7fe4ed8f"
46
+ "gitHead": "b35b1875727156fe9f5b3bad55aed5ca447c8c8d"
47
47
  }