@synerise/ds-layout 0.13.32 → 0.13.34

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.styles.d.ts +3 -3
  3. package/dist/Layout.styles.js +15 -15
  4. package/dist/Layout.types.d.ts +2 -2
  5. package/dist/Page/Page.d.ts +1 -1
  6. package/dist/Page/Page.js +0 -1
  7. package/package.json +5 -5
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
+ ## [0.13.34](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@0.13.33...@synerise/ds-layout@0.13.34) (2023-10-06)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **layout:** add 100% height to LayoutMain container under 960 width ([83ef5fb](https://github.com/synerise/synerise-design/commit/83ef5fb0e15faea91774ebae0d8a1c38fc68934f))
12
+
13
+
14
+
15
+
16
+
17
+ ## [0.13.33](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@0.13.32...@synerise/ds-layout@0.13.33) (2023-10-02)
18
+
19
+ **Note:** Version bump only for package @synerise/ds-layout
20
+
21
+
22
+
23
+
24
+
6
25
  ## [0.13.32](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@0.13.31...@synerise/ds-layout@0.13.32) (2023-09-26)
7
26
 
8
27
  **Note:** Version bump only for package @synerise/ds-layout
package/dist/Layout.styles.d.ts CHANGED
@@ -15,20 +15,20 @@ export declare const LayoutMain: import("styled-components").StyledComponent<"di
15
15
  export declare const LayoutMainInner: import("styled-components").StyledComponent<"div", any, {
16
16
  fullPage: boolean;
17
17
  }, never>;
18
- declare type SidebarButtonProps = {
18
+ type SidebarButtonProps = {
19
19
  right?: boolean;
20
20
  opened: boolean;
21
21
  withSubheader?: boolean;
22
22
  bothOpened?: boolean;
23
23
  };
24
24
  export declare const SidebarButton: import("styled-components").StyledComponent<"button", any, SidebarButtonProps, never>;
25
- declare type LayoutSidebarProps = {
25
+ type LayoutSidebarProps = {
26
26
  opened: boolean;
27
27
  openedWidth: number;
28
28
  animationDisabled: boolean;
29
29
  };
30
30
  export declare const LayoutSidebar: import("styled-components").StyledComponent<"div", any, LayoutSidebarProps, never>;
31
- declare type LayoutSidebarWrapperProps = {
31
+ type LayoutSidebarWrapperProps = {
32
32
  opened: boolean;
33
33
  right?: boolean;
34
34
  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;
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;
2
2
 
3
3
  function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
4
4
 
@@ -41,11 +41,11 @@ 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
- })(["position:relative;max-width:100%;width:100%;", ";"], mediaQuery.to.small(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["min-width: 704px;"]))));
44
+ })(["position:relative;max-width:100%;width:100%;", ";", ";"], mediaQuery.to.small(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["min-width: 704px;"]))), mediaQuery.to.medium(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["height: 100%;"]))));
45
45
  export var LayoutMainInner = styled.div.withConfig({
46
46
  displayName: "Layoutstyles__LayoutMainInner",
47
47
  componentId: "i053aj-8"
48
- })(["", ";", ";&&{padding:", ";}"], mediaQuery.to.medium(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["flex: 0 0 auto;"]))), mediaQuery.from.medium(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["padding: 24px;"]))), function (props) {
48
+ })(["", ";", ";&&{padding:", ";}"], mediaQuery.to.medium(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["flex: 0 0 auto;"]))), mediaQuery.from.medium(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["padding: 24px;"]))), function (props) {
49
49
  return props.fullPage ? '0' : '24px';
50
50
  });
51
51
  export var SidebarButton = styled.button.withConfig({
@@ -61,14 +61,14 @@ export var SidebarButton = styled.button.withConfig({
61
61
  return !props.right ? 'auto' : '-32px';
62
62
  }, function (props) {
63
63
  return props.withSubheader ? '170px' : '48px';
64
- }, mediaQuery.to.medium(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["display: flex; opacity: 1; visibility: visible"]))), ArrowIcon, mediaQuery.to.medium(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["", ""])), function (props) {
64
+ }, mediaQuery.to.medium(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["display: flex; opacity: 1; visibility: visible"]))), ArrowIcon, mediaQuery.to.medium(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["", ""])), function (props) {
65
65
  return props.right && props.opened && 'left: -44px';
66
- }), mediaQuery.to.medium(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["", ""])), function (props) {
66
+ }), mediaQuery.to.medium(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["", ""])), function (props) {
67
67
  return !props.right && props.opened && 'right: -44px';
68
- }), mediaQuery.to.small(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["", ""])), function (props) {
68
+ }), mediaQuery.to.small(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["", ""])), function (props) {
69
69
  return props.right && props.bothOpened && 'transform: translateY(56px)';
70
70
  }), function (props) {
71
- 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, mediaQuery.to.medium(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["display: none;"]))), CloseIcon, mediaQuery.to.medium(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["display: flex;"]))));
71
+ 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;"]))));
72
72
  });
73
73
  export var LayoutSidebar = styled.div.withConfig({
74
74
  displayName: "Layoutstyles__LayoutSidebar",
@@ -77,17 +77,17 @@ export var LayoutSidebar = styled.div.withConfig({
77
77
  return !props.animationDisabled && css(["will-change:width;transform-style:preserve-3d;transition:max-width 0.3s ease;"]);
78
78
  }, function (props) {
79
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) {
80
+ }, mediaQuery.to.medium(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["flex: 0 0 auto;"]))), mediaQuery.from.medium(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["flex: 0 1 ", "; width: ", ""])), function (props) {
81
81
  return props.openedWidth + "px";
82
82
  }, function (props) {
83
83
  return props.openedWidth + "px;";
84
- }), mediaQuery.from.medium(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["max-width: ", ";"])), function (props) {
84
+ }), mediaQuery.from.medium(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["max-width: ", ";"])), function (props) {
85
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) {
86
+ }), 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) {
87
87
  return props.openedWidth + "px";
88
88
  }, function (props) {
89
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) {
90
+ }), mediaQuery.to.medium(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n width: ", ";\n "])), function (props) {
91
91
  return props.openedWidth + "px";
92
92
  }));
93
93
  export var LayoutSidebarWrapper = styled.div.withConfig({
@@ -105,13 +105,13 @@ export var LayoutSidebarWrapper = styled.div.withConfig({
105
105
  return props.right ? '-32px' : 'auto';
106
106
  }, function (props) {
107
107
  return props.right ? 'auto' : '-32px';
108
- }, mediaQuery.to.medium(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["", ""])), function (props) {
108
+ }, mediaQuery.to.medium(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["", ""])), function (props) {
109
109
  return props.right && props.opened && 'left: -44px';
110
- }), mediaQuery.to.medium(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["", ""])), function (props) {
110
+ }), mediaQuery.to.medium(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["", ""])), function (props) {
111
111
  return !props.right && props.opened && 'right: -44px';
112
- }), mediaQuery.to.medium(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["position: absolute;"]))), mediaQuery.to.medium(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["width: ", ";"])), function (props) {
112
+ }), mediaQuery.to.medium(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["position: absolute;"]))), mediaQuery.to.medium(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["width: ", ";"])), function (props) {
113
113
  return props.openedWidth + "px";
114
- }), mediaQuery.to.medium(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["transform: ", ""])), function (props) {
114
+ }), mediaQuery.to.medium(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["transform: ", ""])), function (props) {
115
115
  return props.right ? "translateX(" + props.openedWidth + "px)" : "translateX(-" + props.openedWidth + "px)";
116
116
  }), function (props) {
117
117
  return props.opened && css(["&&{margin:", ";transform:translateX(0);}"], props.right ? '0 0 0 1px' : '0 1px 0 0');
package/dist/Layout.types.d.ts CHANGED
@@ -7,13 +7,13 @@ export interface Style<T> {
7
7
  right?: T;
8
8
  rightInner?: T;
9
9
  }
10
- export declare type SidebarProps = {
10
+ export type SidebarProps = {
11
11
  content: React.ReactNode;
12
12
  opened: boolean;
13
13
  onChange: (isOpened: boolean) => void;
14
14
  width?: number;
15
15
  };
16
- export declare type LayoutProps = {
16
+ export type LayoutProps = {
17
17
  header?: React.ReactNode;
18
18
  subheader?: React.ReactNode;
19
19
  left?: SidebarProps;
package/dist/Page/Page.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- declare type LayoutProps = {
2
+ type LayoutProps = {
3
3
  navBar?: React.ReactNode;
4
4
  appMenu?: React.Component;
5
5
  children: JSX.Element;
package/dist/Page/Page.js CHANGED
@@ -7,7 +7,6 @@ var Page = function Page(_ref) {
7
7
  children = _ref.children;
8
8
  var renderAppMenu = React.useMemo(function () {
9
9
  if (appMenu) {
10
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
11
10
  // @ts-ignore
12
11
  return React.cloneElement(appMenu, {
13
12
  top: navBar ? 56 : 0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-layout",
3
- "version": "0.13.32",
3
+ "version": "0.13.34",
4
4
  "description": "Layout UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "synerise/synerise-design",
@@ -32,14 +32,14 @@
32
32
  ],
33
33
  "types": "dist/index.d.ts",
34
34
  "dependencies": {
35
- "@synerise/ds-icon": "^0.58.2",
36
- "@synerise/ds-scrollbar": "^0.6.7",
37
- "@synerise/ds-utils": "^0.24.16"
35
+ "@synerise/ds-icon": "^0.58.3",
36
+ "@synerise/ds-scrollbar": "^0.6.8",
37
+ "@synerise/ds-utils": "^0.24.17"
38
38
  },
39
39
  "peerDependencies": {
40
40
  "@synerise/ds-core": "*",
41
41
  "react": ">=16.9.0 < 17.0.0",
42
42
  "styled-components": "5.0.1"
43
43
  },
44
- "gitHead": "f1f520c4c5ef9f90bacb5d5e0b2e778ceb8fdf79"
44
+ "gitHead": "d944339a738211d8f74b27360481aafd7ef51ddd"
45
45
  }