@synerise/ds-layout 0.13.45 → 0.14.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.14.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@0.13.45...@synerise/ds-layout@0.14.0) (2024-02-19)
+
+
+### Features
+
+* **layout:** add useNativeScroll prop for main content column ([699f3b2](https://github.com/synerise/synerise-design/commit/699f3b2980f816905046b69c36f1cc0ca7a2d98b))
+
+
+
+
+
 ## [0.13.45](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@0.13.44...@synerise/ds-layout@0.13.45) (2024-02-15)
 
 

package/README.md

@@ -50,6 +50,10 @@ import Layout from '@synerise/ds-layout'
 | leftSidebarWithDnd         | Set withDnd in left sidebar scrollbar                             | boolean             | false   |
 | mainSidebarWithDnd         | Set withDnd in main sidebar scrollbar                             | boolean             | false   |
 | rightSidebarWithDnd        | Set withDnd in right sidebar scrollbar                            | boolean             | false   |
+| nativeScroll               | Set main column to use native browser scroll                      | boolean             | false   |
+| nativeScrollRef            | ref to pass to scrollable element                                 | Ref<HTMLDivElement> | -       |
+| fillViewport               | sets layout to absolute with calc(100vh - viewportTopOffset) height | boolean           | false   |
+| viewportTopOffset          | top viewport offset (if fillViewport is true)                     | number              | 55      |
 
 ### SidebarProps
 

package/dist/Layout.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import * as T from './Layout.types';
-declare const Layout: React.FC<T.LayoutProps>;
+declare const Layout: ({ header, left, right, children, className, styles, subheader, fullPage, nativeScroll, nativeScrollRef, fillViewport, viewportTopOffset, sidebarAnimationDisabled, renderLeftSidebarControls, renderRightSidebarControls, leftSidebarWithDnd, rightSidebarWithDnd, mainSidebarWithDnd, }: T.LayoutProps) => JSX.Element;
 export default Layout;

package/dist/Layout.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useMemo } from 'react';
 import Scrollbar from '@synerise/ds-scrollbar';
 import { AngleLeftS, AngleRightS, CloseS } from '@synerise/ds-icon';
 import { theme } from '@synerise/ds-core';
@@ -15,6 +15,10 @@ var Layout = function Layout(_ref) {
       subheader = _ref.subheader,
       _ref$fullPage = _ref.fullPage,
       fullPage = _ref$fullPage === void 0 ? false : _ref$fullPage,
+      nativeScroll = _ref.nativeScroll,
+      nativeScrollRef = _ref.nativeScrollRef,
+      fillViewport = _ref.fillViewport,
+      viewportTopOffset = _ref.viewportTopOffset,
       sidebarAnimationDisabled = _ref.sidebarAnimationDisabled,
       _ref$renderLeftSideba = _ref.renderLeftSidebarControls,
       renderLeftSidebarControls = _ref$renderLeftSideba === void 0 ? false : _ref$renderLeftSideba,
@@ -26,19 +30,33 @@ var Layout = function Layout(_ref) {
       rightSidebarWithDnd = _ref$rightSidebarWith === void 0 ? false : _ref$rightSidebarWith,
       _ref$mainSidebarWithD = _ref.mainSidebarWithDnd,
       mainSidebarWithDnd = _ref$mainSidebarWithD === void 0 ? false : _ref$mainSidebarWithD;
-  var leftSidebarWidth = React.useMemo(function () {
+  var leftSidebarWidth = useMemo(function () {
     return (left == null ? void 0 : left.width) || DEFAULT_SIDEBAR_WIDTH;
   }, [left]);
-  var rightSidebarWidth = React.useMemo(function () {
+  var rightSidebarWidth = useMemo(function () {
     return (right == null ? void 0 : right.width) || DEFAULT_SIDEBAR_WIDTH;
   }, [right]);
-  var showLeftSidebar = React.useMemo(function () {
+  var showLeftSidebar = useMemo(function () {
     return (left == null ? void 0 : left.opened) || !renderLeftSidebarControls;
   }, [left, renderLeftSidebarControls]);
-  var showRightSidebar = React.useMemo(function () {
+  var showRightSidebar = useMemo(function () {
     return (right == null ? void 0 : right.opened) || !renderRightSidebarControls;
   }, [right, renderRightSidebarControls]);
+  var mainColumnInner = nativeScroll ? /*#__PURE__*/React.createElement(S.LayoutMainInner, {
+    fullPage: fullPage,
+    style: styles && styles.mainInner,
+    ref: nativeScrollRef
+  }, children) : /*#__PURE__*/React.createElement(Scrollbar, {
+    absolute: true,
+    withDnd: mainSidebarWithDnd
+  }, /*#__PURE__*/React.createElement(S.LayoutMainInner, {
+    fullPage: fullPage,
+    style: styles && styles.mainInner
+  }, children));
   return /*#__PURE__*/React.createElement(S.LayoutContainer, {
+    fillViewport: fillViewport,
+    viewportTopOffset: viewportTopOffset,
+    nativeScroll: nativeScroll,
     className: "ds-layout " + (className || '')
   }, header ? /*#__PURE__*/React.createElement(S.LayoutHeader, {
     className: "ds-layout__header"
@@ -78,13 +96,7 @@ var Layout = function Layout(_ref) {
     rightOpened: showRightSidebar,
     leftSidebarWidth: leftSidebarWidth,
     rightSidebarWidth: rightSidebarWidth
-  }, /*#__PURE__*/React.createElement(S.LayoutSubheader, null, subheader), /*#__PURE__*/React.createElement(Scrollbar, {
-    absolute: true,
-    withDnd: mainSidebarWithDnd
-  }, /*#__PURE__*/React.createElement(S.LayoutMainInner, {
-    fullPage: fullPage,
-    style: styles && styles.mainInner
-  }, children))), /*#__PURE__*/React.createElement(React.Fragment, null, right ? /*#__PURE__*/React.createElement(S.LayoutSidebarWrapper, {
+  }, /*#__PURE__*/React.createElement(S.LayoutSubheader, null, subheader), mainColumnInner), /*#__PURE__*/React.createElement(React.Fragment, null, right ? /*#__PURE__*/React.createElement(S.LayoutSidebarWrapper, {
     opened: showRightSidebar,
     right: true,
     openedWidth: rightSidebarWidth,

package/dist/Layout.styles.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 export declare const ArrowIcon: import("styled-components").StyledComponent<import("react").FC<import("@synerise/ds-icon").IconProps>, any, {}, never>;
 export declare const CloseIcon: import("styled-components").StyledComponent<import("react").FC<import("@synerise/ds-icon").IconProps>, any, {}, never>;
-export declare const LayoutContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LayoutContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LayoutHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LayoutSubheader: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -15,6 +14,11 @@ export declare const LayoutMain: import("styled-components").StyledComponent<"di
 export declare const LayoutMainInner: import("styled-components").StyledComponent<"div", any, {
     fullPage: boolean;
 }, never>;
+export declare const LayoutContainer: import("styled-components").StyledComponent<"div", any, {
+    nativeScroll?: boolean | undefined;
+    fillViewport?: boolean | undefined;
+    viewportTopOffset?: number | undefined;
+}, never>;
 type SidebarButtonProps = {
     right?: boolean;
     opened: boolean;

package/dist/Layout.styles.js

@@ -6,6 +6,7 @@ import styled, { css } from 'styled-components';
 import { hexToRgba } from '@synerise/ds-utils';
 import { mediaQuery } from '@synerise/ds-core';
 import Icon from '@synerise/ds-icon';
+var DEFAULT_TOP_OFFSET = 55;
 export var ArrowIcon = styled(Icon).withConfig({
   displayName: "Layoutstyles__ArrowIcon",
   componentId: "i053aj-0"
@@ -14,17 +15,13 @@ export var CloseIcon = styled(Icon).withConfig({
   displayName: "Layoutstyles__CloseIcon",
   componentId: "i053aj-1"
 })(["display:none;"]);
-export var LayoutContainer = styled.div.withConfig({
-  displayName: "Layoutstyles__LayoutContainer",
-  componentId: "i053aj-2"
-})(["height:100%;overflow:hidden;"]);
 export var LayoutContent = styled.div.withConfig({
   displayName: "Layoutstyles__LayoutContent",
-  componentId: "i053aj-3"
+  componentId: "i053aj-2"
 })(["overflow:hidden;width:100%;height:100%;", ";"], mediaQuery.to.small(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["overflow-x: auto;"]))));
 export var LayoutHeader = styled.div.withConfig({
   displayName: "Layoutstyles__LayoutHeader",
-  componentId: "i053aj-4"
+  componentId: "i053aj-3"
 })(["&&&{margin:0;display:block;width:100%;}z-index:1;box-shadow:0 2px 6px ", ";border-bottom:1px solid ", ";"], function (props) {
   return hexToRgba(props.theme.palette['grey-400'], 0.12);
 }, function (props) {
@@ -32,22 +29,34 @@ export var LayoutHeader = styled.div.withConfig({
 });
 export var LayoutSubheader = styled.div.withConfig({
   displayName: "Layoutstyles__LayoutSubheader",
-  componentId: "i053aj-5"
+  componentId: "i053aj-4"
 })(["position:relative;max-width:100%;top:0;z-index:1;box-shadow:0 4px 12px 0 rgba(35,41,54,0.04);"]);
 export var LayoutBody = styled.div.withConfig({
   displayName: "Layoutstyles__LayoutBody",
-  componentId: "i053aj-6"
+  componentId: "i053aj-5"
 })(["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;"]))));
 export var LayoutMain = styled.div.withConfig({
   displayName: "Layoutstyles__LayoutMain",
-  componentId: "i053aj-7"
+  componentId: "i053aj-6"
 })(["position:relative;max-width:100%;width:100%;", ";", ";"], mediaQuery.to.small(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["min-width: 704px;"]))), mediaQuery.to.medium(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["height: 100%;"]))));
 export var LayoutMainInner = styled.div.withConfig({
   displayName: "Layoutstyles__LayoutMainInner",
-  componentId: "i053aj-8"
+  componentId: "i053aj-7"
 })(["", ";", ";&&{padding:", ";}"], mediaQuery.to.medium(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["flex: 0 0 auto;"]))), mediaQuery.from.medium(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["padding: 24px;"]))), function (props) {
   return props.fullPage ? '0' : '24px';
 });
+export var LayoutContainer = styled.div.withConfig({
+  displayName: "Layoutstyles__LayoutContainer",
+  componentId: "i053aj-8"
+})(["height:100%;display:flex;flex-direction:column;overflow:hidden;", ";", "{", ";}", "{overflow:", ";", ";}"], function (props) {
+  return props.fillViewport && css(["position:absolute;width:100%;height:calc(100vh - ", "px);"], props.viewportTopOffset !== undefined ? props.viewportTopOffset : DEFAULT_TOP_OFFSET);
+}, LayoutMain, function (props) {
+  return props.nativeScroll && css(["display:flex;flex-direction:column;overflow:hidden;"]);
+}, LayoutMainInner, function (props) {
+  return props.nativeScroll ? 'auto' : 'hidden';
+}, function (props) {
+  return props.nativeScroll && 'flex-grow: 1';
+});
 export var SidebarButton = styled.button.withConfig({
   displayName: "Layoutstyles__SidebarButton",
   componentId: "i053aj-9"

package/dist/Layout.types.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-export interface Style<T> {
+import { ReactNode, CSSProperties, Ref } from 'react';
+export interface ColumnProps<T> {
     left?: T;
     leftInner?: T;
     main?: T;
@@ -8,29 +8,33 @@ export interface Style<T> {
     rightInner?: T;
 }
 export type SidebarProps = {
-    content: React.ReactNode;
+    content: ReactNode;
     opened: boolean;
     onChange: (isOpened: boolean) => void;
     width?: number;
 };
 export type LayoutProps = {
-    header?: React.ReactNode;
-    subheader?: React.ReactNode;
+    nativeScroll?: boolean;
+    nativeScrollRef?: Ref<HTMLDivElement>;
+    header?: ReactNode;
+    subheader?: ReactNode;
     left?: SidebarProps;
     right?: SidebarProps;
-    children: React.ReactNode;
+    children: ReactNode;
     className?: string;
-    styles?: Style<React.CSSProperties>;
+    styles?: ColumnProps<CSSProperties>;
     fullPage?: boolean;
+    fillViewport?: boolean;
+    viewportTopOffset?: number;
     sidebarAnimationDisabled?: boolean;
     /**
      * Left sidebar: render visibility of show/hide button. Accepts function returning `ReactNode` (see source code).
      */
-    renderLeftSidebarControls?: boolean | (() => React.ReactNode);
+    renderLeftSidebarControls?: boolean | (() => ReactNode);
     /**
      * Right sidebar: render visibility of show/hide button. Accepts function returning `ReactNode` (see source code).
      */
-    renderRightSidebarControls?: boolean | (() => React.ReactNode);
+    renderRightSidebarControls?: boolean | (() => ReactNode);
     leftSidebarWithDnd?: boolean;
     rightSidebarWithDnd?: boolean;
     mainSidebarWithDnd?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-layout",
-  "version": "0.13.45",
+  "version": "0.14.0",
   "description": "Layout UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -34,7 +34,7 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@synerise/ds-icon": "^0.60.0",
-    "@synerise/ds-scrollbar": "^0.7.3",
+    "@synerise/ds-scrollbar": "^0.8.0",
     "@synerise/ds-utils": "^0.24.24"
   },
   "peerDependencies": {
@@ -42,5 +42,5 @@
     "react": ">=16.9.0 < 17.0.0",
     "styled-components": "5.0.1"
   },
-  "gitHead": "a61bf46e0ab1fdb9154808bbdd3c7163aa7b0576"
+  "gitHead": "17e3bca1d4d134a28aaa186f0e2637616ca86174"
 }