From d986751205c685b4ffa6713443e3f9eeca8a1f9f Mon Sep 17 00:00:00 2001
From: Ilya Oleshko <oleshko.ilya@gmail.com>
Date: Mon, 13 Apr 2020 15:56:47 +0300
Subject: [PATCH 1/2] Web: Components: Changed DropDown dynamic container from
 FixedSizeList to VariableSizeList.

---
 .../src/components/drop-down/index.js         | 27 +++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/web/ASC.Web.Components/src/components/drop-down/index.js b/web/ASC.Web.Components/src/components/drop-down/index.js
index c083ad1dfc..acbb4b49ed 100644
--- a/web/ASC.Web.Components/src/components/drop-down/index.js
+++ b/web/ASC.Web.Components/src/components/drop-down/index.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import CustomScrollbarsVirtualList from '../scrollbar/custom-scrollbars-virtual-list'
 import DropDownItem from '../drop-down-item'
 import Backdrop from '../backdrop'
-import { FixedSizeList } from "react-window"
+import { VariableSizeList } from "react-window"
 import onClickOutside from "react-onclickoutside";
 
 const StyledDropdown = styled.div`
@@ -43,12 +43,14 @@ const StyledDropdown = styled.div`
 // eslint-disable-next-line react/display-name, react/prop-types
 const Row = memo(({ data, index, style }) => {
   const option = data[index];
+  const separator = option.props.isSeparator ? { width: `calc(100% - 32px)`, height: `1px` } : {}
+  const newStyle = {...style, ...separator};
 
   return (
     <DropDownItem
       // eslint-disable-next-line react/prop-types
       {...option.props}
-      style={style} />
+      style={newStyle} />
   );
 });
 
@@ -115,12 +117,21 @@ class DropDown extends React.PureComponent {
     });
   }
 
+  getItemHeight = (item) => {
+    const isTablet = window.innerWidth < 1024; //TODO: Make some better
+
+    if (item && item.props.isSeparator)
+      return isTablet ? 16 : 12;
+
+    return isTablet ? 36 : 32;
+  }
+
   render() {
     const { maxHeight, children } = this.props;
     const { directionX, directionY, width } = this.state;
-    const isTablet = window.innerWidth < 1024; //TODO: Make some better
-    const itemHeight = isTablet ? 36 : 32;
-    const fullHeight = children && children.length * itemHeight;
+    const rowHeights = React.Children.map(children, child => this.getItemHeight(child));
+    const getItemSize = index => rowHeights[index];
+    const fullHeight = children && rowHeights.reduce((a, b) => a + b, 0);
     const calculatedHeight = ((fullHeight > 0) && (fullHeight < maxHeight)) ? fullHeight : maxHeight;
     const dropDownMaxHeightProp = maxHeight ? { height: calculatedHeight + 'px' } : {};
     //console.log("DropDown render", this.props);
@@ -133,16 +144,16 @@ class DropDown extends React.PureComponent {
         {...dropDownMaxHeightProp}
       >
         {maxHeight
-          ? <FixedSizeList
+          ? <VariableSizeList
             height={calculatedHeight}
             width={width}
-            itemSize={itemHeight}
+            itemSize={getItemSize}
             itemCount={children.length}
             itemData={children}
             outerElementType={CustomScrollbarsVirtualList}
           >
             {Row}
-          </FixedSizeList>
+          </VariableSizeList>
           : children}
       </StyledDropdown>
     );

From c57af32d0dd49349284dc4701133d94a443d7b8d Mon Sep 17 00:00:00 2001
From: Ilya Oleshko <oleshko.ilya@gmail.com>
Date: Mon, 13 Apr 2020 15:56:57 +0300
Subject: [PATCH 2/2] web: components: bump version

---
 web/ASC.Web.Components/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/ASC.Web.Components/package.json b/web/ASC.Web.Components/package.json
index dab17b2d0a..60332b3d14 100644
--- a/web/ASC.Web.Components/package.json
+++ b/web/ASC.Web.Components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "asc-web-components",
-  "version": "1.0.378",
+  "version": "1.0.379",
   "description": "Ascensio System SIA component library",
   "license": "AGPL-3.0",
   "main": "dist/asc-web-components.js",