@sis-cc/dotstatsuite-visions 10.25.0 → 10.26.1

package/umd/@sis-cc/dotstatsuite-visions.js

@@ -1,5 +1,5 @@
 /*!
- * @sis-cc/dotstatsuite-visions v10.25.0 - https://visions-qa.siscc.org/#o
+ * @sis-cc/dotstatsuite-visions v10.26.1 - https://visions-qa.siscc.org/#o
  * MIT Licensed
  */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -6697,7 +6697,7 @@ function removeClassName(el
 /* 119 */
 /***/ (function(module) {
 
-module.exports = {"name":"@sis-cc/dotstatsuite-visions","version":"10.25.0","description":"Library of visual components","author":"OECD","homepage":"https://visions-qa.siscc.org/#o","license":"MIT","repository":"https://gitlab.com/sis-cc/.stat-suite/dotstatsuite-visions","main":"lib/index.js","module":"es/index.js","engines":{"node":">=14"},"files":["css","es","lib","umd"],"scripts":{"build":"nwb build-react-component --copy-files --no-demo && node scripts/doc && nwb build-demo","build:dev":"nwb build-react-component --copy-files --no-demo","clean":"nwb clean-module && nwb clean-demo","prepublishOnly":"npm run build","start":"nwb serve-react-demo","test":"jest","test:watch":"jest --watch --no-cache","lint":"eslint src/ --color","precommit":"lint-staged"},"dependencies":{"@react-hook/size":"^2.1.1","classnames":"^2.2.6","date-fns":"^1.30.1","isemail":"^3.2.0","numeral":"^2.0.6","prop-types":"^15.7.2","ramda":"^0.27.0","react-beautiful-dnd":"^13.0.0","react-draggable":"^4.4.5","react-error-boundary":"^4.0.10","react-virtualized":"^9.21.2"},"peerDependencies":{"@material-ui/core":"^4","@material-ui/icons":"^4","@sis-cc/dotstatsuite-sdmxjs":"^8.x","react":"^18","react-dom":"^18"},"devDependencies":{"@babel/eslint-parser":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@cfaester/enzyme-adapter-react-18":"^0.7.0","@material-ui/core":"^4","@material-ui/icons":"^4","@sis-cc/dotstatsuite-sdmxjs":"*","@testing-library/jest-dom":"^5.16.5","@testing-library/react":"^14.0.0","babel-jest":"^24.8.0","babel-preset-react-app":"^9.0.0","dox":"^0.9.0","eslint":"^8.39.0","eslint-plugin-import":"^2.27.5","eslint-plugin-jsx-a11y":"^6.7.1","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.32.2","eslint-plugin-react-hooks":"^4.6.0","husky":"^2.7.0","identity-obj-proxy":"^3.0.0","jest":"^24.8.0","jss":"^10.10.0","jss-rtl":"^0.2.3","lint-staged":"^8.2.1","mutationobserver-shim":"^0.3.7","nwb":"0.23.0","prettier":"^2.8.8","pretty-quick":"^3.1.3","react":"^18","react-a11y":"^1.1.0","react-dom":"^18","react-helmet":"^5.2.1","react-scrollable-anchor":"^0.6.1","react-syntax-highlighter":"^10.2.1","sanitize-html":"2.7.0","webpack":"^5.68.0","webpack-cli":"^4.9.2","webpack-dev-server":"^4.7.4"},"jest":{"verbose":true,"coverageDirectory":"coverage","collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}","!src/ScopeList/*.{js,jsx,ts,tsx}","!src/**/*.d.ts"],"setupFilesAfterEnv":["<rootDir>/tests/setup.js"],"testMatch":["**/tests/**/*.{spec,test}.{js,jsx,ts,tsx}","!**/tests/ScopeList.test.js"],"testEnvironment":"jsdom","transform":{"^.+\\.(js|jsx|ts|tsx)$":"<rootDir>/node_modules/babel-jest"},"transformIgnorePatterns":["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$","^.+\\.module\\.(css|sass|scss)$"],"modulePaths":[],"moduleNameMapper":{"^react-native$":"react-native-web","^.+\\.module\\.(css|sass|scss)$":"identity-obj-proxy","\\.(jpg|jpeg|png)$":"identity-obj-proxy"},"moduleFileExtensions":["web.js","js","web.ts","ts","web.tsx","tsx","json","web.jsx","jsx","node"]},"babel":{"presets":["react-app"],"plugins":["@babel/plugin-syntax-dynamic-import"]},"eslintConfig":{"env":{"browser":true,"jest":true,"node":true,"es6":true},"extends":["eslint:recommended","plugin:react/recommended","plugin:jsx-a11y/recommended"],"parser":"@babel/eslint-parser","parserOptions":{"babelOptions":{"presets":[["babel-preset-react-app",false],"babel-preset-react-app/test"]},"ecmaFeatures":{"experimentalObjectRestSpread":true,"jsx":true},"sourceType":"module"},"plugins":["prettier","react","import","react-hooks","jsx-a11y"],"rules":{"no-console":"warn","no-unused-vars":"error","react/display-name":"off","react-hooks/rules-of-hooks":"error","react-hooks/exhaustive-deps":"warn","no-use-before-define":"error"}},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{js,css}":["prettier --write","git add","yarn lint"]},"prettier":{"endOfLine":"lf","useTabs":false,"printWidth":100,"tabWidth":2,"singleQuote":true,"trailingComma":"all","bracketSameLine":false,"bracketSpacing":true,"parser":"babel","semi":true,"arrowParens":"avoid"}};
+module.exports = {"name":"@sis-cc/dotstatsuite-visions","version":"10.26.1","description":"Library of visual components","author":"OECD","homepage":"https://visions-qa.siscc.org/#o","license":"MIT","repository":"https://gitlab.com/sis-cc/.stat-suite/dotstatsuite-visions","main":"lib/index.js","module":"es/index.js","engines":{"node":">=14"},"files":["css","es","lib","umd"],"scripts":{"build":"nwb build-react-component --copy-files --no-demo && node scripts/doc && nwb build-demo","build:dev":"nwb build-react-component --copy-files --no-demo","clean":"nwb clean-module && nwb clean-demo","prepublishOnly":"npm run build","start":"nwb serve-react-demo","test":"jest","test:watch":"jest --watch --no-cache","lint":"eslint src/ --color","precommit":"lint-staged"},"dependencies":{"@react-hook/size":"^2.1.1","classnames":"^2.2.6","date-fns":"^1.30.1","isemail":"^3.2.0","numeral":"^2.0.6","prop-types":"^15.7.2","ramda":"^0.27.0","react-beautiful-dnd":"^13.0.0","react-draggable":"^4.4.5","react-error-boundary":"^4.0.10","react-virtualized":"^9.21.2"},"peerDependencies":{"@material-ui/core":"^4","@material-ui/icons":"^4","@sis-cc/dotstatsuite-sdmxjs":"^8.x","react":"^18","react-dom":"^18"},"devDependencies":{"@babel/eslint-parser":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@cfaester/enzyme-adapter-react-18":"^0.7.0","@material-ui/core":"^4","@material-ui/icons":"^4","@sis-cc/dotstatsuite-sdmxjs":"*","@testing-library/jest-dom":"^5.16.5","@testing-library/react":"^14.0.0","babel-jest":"^24.8.0","babel-preset-react-app":"^9.0.0","dox":"^0.9.0","eslint":"^8.39.0","eslint-plugin-import":"^2.27.5","eslint-plugin-jsx-a11y":"^6.7.1","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.32.2","eslint-plugin-react-hooks":"^4.6.0","husky":"^2.7.0","identity-obj-proxy":"^3.0.0","jest":"^24.8.0","jss":"^10.10.0","jss-rtl":"^0.2.3","lint-staged":"^8.2.1","mutationobserver-shim":"^0.3.7","nwb":"0.23.0","prettier":"^2.8.8","pretty-quick":"^3.1.3","react":"^18","react-a11y":"^1.1.0","react-dom":"^18","react-helmet":"^5.2.1","react-scrollable-anchor":"^0.6.1","react-syntax-highlighter":"^10.2.1","sanitize-html":"2.7.0","webpack":"^5.68.0","webpack-cli":"^4.9.2","webpack-dev-server":"^4.7.4"},"jest":{"verbose":true,"coverageDirectory":"coverage","collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}","!src/ScopeList/*.{js,jsx,ts,tsx}","!src/**/*.d.ts"],"setupFilesAfterEnv":["<rootDir>/tests/setup.js"],"testMatch":["**/tests/**/*.{spec,test}.{js,jsx,ts,tsx}","!**/tests/ScopeList.test.js"],"testEnvironment":"jsdom","transform":{"^.+\\.(js|jsx|ts|tsx)$":"<rootDir>/node_modules/babel-jest"},"transformIgnorePatterns":["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$","^.+\\.module\\.(css|sass|scss)$"],"modulePaths":[],"moduleNameMapper":{"^react-native$":"react-native-web","^.+\\.module\\.(css|sass|scss)$":"identity-obj-proxy","\\.(jpg|jpeg|png)$":"identity-obj-proxy"},"moduleFileExtensions":["web.js","js","web.ts","ts","web.tsx","tsx","json","web.jsx","jsx","node"]},"babel":{"presets":["react-app"],"plugins":["@babel/plugin-syntax-dynamic-import"]},"eslintConfig":{"env":{"browser":true,"jest":true,"node":true,"es6":true},"extends":["eslint:recommended","plugin:react/recommended","plugin:jsx-a11y/recommended"],"parser":"@babel/eslint-parser","parserOptions":{"babelOptions":{"presets":[["babel-preset-react-app",false],"babel-preset-react-app/test"]},"ecmaFeatures":{"experimentalObjectRestSpread":true,"jsx":true},"sourceType":"module"},"plugins":["prettier","react","import","react-hooks","jsx-a11y"],"rules":{"no-console":"warn","no-unused-vars":"error","react/display-name":"off","react-hooks/rules-of-hooks":"error","react-hooks/exhaustive-deps":"warn","no-use-before-define":"error"}},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{js,css}":["prettier --write","git add","yarn lint"]},"prettier":{"endOfLine":"lf","useTabs":false,"printWidth":100,"tabWidth":2,"singleQuote":true,"trailingComma":"all","bracketSameLine":false,"bracketSpacing":true,"parser":"babel","semi":true,"arrowParens":"avoid"}};
 
 /***/ }),
 /* 120 */
@@ -13187,25 +13187,25 @@ module.exports.DraggableCore = DraggableCore;
 /* 203 */
 /***/ (function(module, exports, __webpack_require__) {
 
-module.exports = __webpack_require__.p + "single-selection.65ce95ea.png";
+module.exports = __webpack_require__.p + "single-selection.a729a6c8.png";
 
 /***/ }),
 /* 204 */
 /***/ (function(module, exports, __webpack_require__) {
 
-module.exports = __webpack_require__.p + "children-selection.3e0401b6.png";
+module.exports = __webpack_require__.p + "children-selection.20d94242.png";
 
 /***/ }),
 /* 205 */
 /***/ (function(module, exports, __webpack_require__) {
 
-module.exports = __webpack_require__.p + "branch-selection.34eb1bca.png";
+module.exports = __webpack_require__.p + "branch-selection.54dd3bc1.png";
 
 /***/ }),
 /* 206 */
 /***/ (function(module, exports, __webpack_require__) {
 
-module.exports = __webpack_require__.p + "level-selection.03c76f56.png";
+module.exports = __webpack_require__.p + "level-selection.df116629.png";
 
 /***/ }),
 /* 207 */
@@ -52232,7 +52232,11 @@ var ShortUrls_useStyles = styles_makeStyles(function (theme) {
     },
     title: ShortUrls_extends({
       paddingBottom: 30
-    }, es_pathOr({}, ['mixins', 'share', 'title'], theme))
+    }, es_pathOr({}, ['mixins', 'share', 'title'], theme)),
+    textAreaWrapper: {
+      display: 'flex',
+      flexGrow: 1
+    }
   };
 });
 
@@ -52264,7 +52268,7 @@ var ShortUrls_ShortUrls = function ShortUrls(_ref) {
       },
       react_default.a.createElement(
         esm_Grid_Grid,
-        { item: true, xs: 12, sm: 12, md: 4, lg: 5 },
+        { item: true, style: { padding: isNarrow ? '20px 0 0 0' : '0 20px 0 0' } },
         react_default.a.createElement(
           src_Button_Button,
           {
@@ -52282,7 +52286,7 @@ var ShortUrls_ShortUrls = function ShortUrls(_ref) {
       ),
       react_default.a.createElement(
         esm_Grid_Grid,
-        { item: true, xs: 12, sm: 12, md: 8, lg: 7 },
+        { item: true, className: classes.textAreaWrapper },
         react_default.a.createElement(esm_TextareaAutosize_TextareaAutosize, {
           'aria-label': contentValue,
           className: classes.textarea,
@@ -72095,7 +72099,7 @@ var AdvancedFilterDialog_useStyles = styles_makeStyles(function (theme) {
     },
     selectionTitle: {
       fontSize: '12px',
-      fontFamily: 'Helvetica Neue',
+      fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
       fontWeight: '500',
       color: theme.palette.grey['A700']
     },
@@ -72159,11 +72163,13 @@ var AdvancedFilterDialog_useStyles = styles_makeStyles(function (theme) {
       flexDirection: 'row-reverse',
       alignItems: 'center',
       '& p': {
+        paddingLeft: '5px',
         fontSize: '12px',
-        fontFamily: 'Helvetica Neue',
+        fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
         color: theme.palette.primary.main,
         fontWeight: '500',
-        lineHeight: 1.43
+        lineHeight: 1.43,
+        textAlign: 'left'
       },
       '& img': {
         width: 21,
@@ -72190,12 +72196,21 @@ var AdvancedFilterDialog_useStyles = styles_makeStyles(function (theme) {
     },
     tooltip: {
       backgroundColor: theme.palette.action.hover
+    },
+    subheader: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      justifyContent: 'space-between'
+    },
+    narrowHeader: {
+      alignItems: 'flex-start'
     }
   };
 });
 
 var AdvancedFilterDialog_AdvancedFilterDialog = function AdvancedFilterDialog(props) {
-  var _cx;
+  var _cx, _cx2, _cx3, _cx4;
 
   var id = props.id,
       title = props.title,
@@ -72225,11 +72240,7 @@ var AdvancedFilterDialog_AdvancedFilterDialog = function AdvancedFilterDialog(pr
       setSelection = _useState2[1];
 
   var classes = AdvancedFilterDialog_useStyles();
-
-  var _useState3 = Object(react["useState"])(0),
-      height = _useState3[0],
-      setHeight = _useState3[1];
-
+  // const [height, setHeight] = useState(0);
   var getTotal = function getTotal(items, spotlightAcc) {
     var itemsIds = es_pluck('id', items);
     var total = pipe(es_uniq, es_length)(itemsIds);
@@ -72238,13 +72249,13 @@ var AdvancedFilterDialog_AdvancedFilterDialog = function AdvancedFilterDialog(pr
     }
     return total;
   };
-  var measureRef = react_default.a.useCallback(function (node) {
-    if (node !== null) {
-      setHeight(node.getBoundingClientRect().height * 75 / 100);
-    }
-  });
+  // const measureRef = React.useCallback(node => {
+  //   if (node !== null) {
+  //     setHeight((node.getBoundingClientRect().height * 75) / 100);
+  //   }
+  // });
 
-  var listHeight = height - 170;
+  // const listHeight = height - 170;
   var selectionItems = es_map(function (item) {
     return AdvancedFilterDialog_extends({}, item, {
       isSelected: es_has(item.id, selection) ? !item.isSelected : !!item.isSelected
@@ -72252,7 +72263,7 @@ var AdvancedFilterDialog_AdvancedFilterDialog = function AdvancedFilterDialog(pr
   }, items);
   var indexedFilteredItems = es_indexBy(utils_getHierarchicalId, selectionItems);
 
-  var selectionOptions = [{
+  var selectionOptions = [[{
     value: 'single',
     label: es_prop('singleSelection', labels),
     img: single_selection_default.a
@@ -72260,7 +72271,7 @@ var AdvancedFilterDialog_AdvancedFilterDialog = function AdvancedFilterDialog(pr
     value: 'children',
     label: es_prop('childrenSelection', labels),
     img: children_selection_default.a
-  }, {
+  }], [{
     value: 'branch',
     label: es_prop('branchSelection', labels),
     img: branch_selection_default.a
@@ -72268,7 +72279,7 @@ var AdvancedFilterDialog_AdvancedFilterDialog = function AdvancedFilterDialog(pr
     value: 'level',
     label: es_prop('levelSelection', labels),
     img: level_selection_default.a
-  }];
+  }]];
 
   var _allGroupedItems = pipe(es_map(function (item) {
     return AdvancedFilterDialog_extends({}, item, {
@@ -72323,7 +72334,6 @@ var AdvancedFilterDialog_AdvancedFilterDialog = function AdvancedFilterDialog(pr
     var nextSelection = es_reduce(function (acc, id) {
       return es_has(id, acc) ? acc : es_assoc(id, id, acc);
     }, {}, allIds);
-    setSelectionMode('selectAll');
     setSelection(nextSelection);
   };
 
@@ -72333,99 +72343,118 @@ var AdvancedFilterDialog_AdvancedFilterDialog = function AdvancedFilterDialog(pr
     var nextSelection = es_reduce(function (acc, id) {
       return es_has(id, acc) ? acc : es_assoc(id, id, acc);
     }, {}, ids);
-    setSelectionMode('deselectAll');
     setSelection(nextSelection);
   };
-
+  var mapIndexed = es_addIndex(es_map);
   return react_default.a.createElement(
     esm_Dialog_Dialog,
     {
       open: isOpen,
       PaperComponent: AdvancedFilterDialog_PaperComponent,
       'aria-labelledby': 'draggable-dialog-title',
-      onClose: onClose,
-      ref: measureRef,
-      'aria-modal': true
+      onClose: onClose
+      // ref={measureRef}
+      , 'aria-modal': true
     },
     react_default.a.createElement(
       esm_DialogTitle_DialogTitle,
       { style: { cursor: 'move' }, id: 'draggable-dialog-title' },
       react_default.a.createElement(
         'div',
-        { className: classes.header },
+        { className: classnames_default()(classes.header, (_cx = {}, _cx[classes.narrowHeader] = isNarrow, _cx)) },
         react_default.a.createElement(
           'div',
-          { className: classes.headerLabel, 'aria-label': title },
-          '\xA0',
-          title
-        ),
-        react_default.a.createElement(
-          'div',
-          { className: classes.selectModeContainer },
+          { className: isNarrow ? classes.subheader : classes.header },
           react_default.a.createElement(
             'div',
-            { className: classes.hint },
-            react_default.a.createElement(
-              src_Tooltip_Tooltip,
-              {
-                variant: 'light',
-                title: react_default.a.createElement(
-                  esm_Typography_Typography,
-                  { variant: 'body2' },
-                  es_prop('hint', labels)
-                ),
-                'aria-label': es_prop('hint', labels),
-                tabIndex: 0
-              },
-              react_default.a.createElement(EmojiObjects_default.a, null)
-            ),
-            react_default.a.createElement(
-              esm_Typography_Typography,
-              {
-                className: classes.selectionTitle,
-                'aria-label': es_prop('selectionMode', labels),
-                tabIndex: 0
-              },
-              es_prop('selectionMode', labels)
-            )
+            { className: classes.headerLabel, 'aria-label': title },
+            '\xA0',
+            title
           ),
-          es_map(function (_ref) {
-            var value = _ref.value,
-                label = _ref.label,
-                img = _ref.img;
-            return react_default.a.createElement(
-              src_Tooltip_Tooltip,
-              {
-                key: value,
-                classes: { tooltip: classes.tooltip },
-                title: react_default.a.createElement('img', { style: { width: '72px', height: '90px' }, src: img, alt: value }),
-                tabIndex: -1
-              },
+          react_default.a.createElement(
+            'div',
+            { className: classnames_default()(classes.selectModeContainer, (_cx2 = {}, _cx2[classes.narrowHeader] = isNarrow, _cx2)) },
+            react_default.a.createElement(
+              'div',
+              { className: classes.hint },
               react_default.a.createElement(
-                src_Button_Button,
+                src_Tooltip_Tooltip,
                 {
-                  className: classes.selectButton,
-                  selected: value === selectionMode,
-                  onClick: function onClick() {
-                    setSelectionMode(value);
-                  },
-                  'aria-pressed': value === selectionMode,
-                  'aria-label': label,
-                  tabIndex: 0
-                },
-                react_default.a.createElement(
-                  esm_Paper_Paper,
-                  { className: classes.selectModeItem, key: value },
-                  react_default.a.createElement(
+                  variant: 'light',
+                  title: react_default.a.createElement(
                     esm_Typography_Typography,
-                    null,
-                    label
+                    { variant: 'body2' },
+                    es_prop('hint', labels)
                   ),
-                  !es_isNil(img) && es_is(String, img) && react_default.a.createElement('img', { src: img, alt: value })
-                )
+                  'aria-label': es_prop('hint', labels),
+                  tabIndex: 0
+                },
+                react_default.a.createElement(EmojiObjects_default.a, null)
+              ),
+              react_default.a.createElement(
+                esm_Typography_Typography,
+                {
+                  className: classes.selectionTitle,
+                  'aria-label': es_prop('selectionMode', labels),
+                  tabIndex: 0
+                },
+                es_prop('selectionMode', labels)
               )
-            );
-          }, selectionOptions)
+            ),
+            react_default.a.createElement(
+              'div',
+              {
+                className: classnames_default()(classes.selectModeContainer, (_cx3 = {}, _cx3[classes.narrowHeader] = isNarrow, _cx3))
+              },
+              mapIndexed(function (el, index) {
+                return react_default.a.createElement(
+                  'div',
+                  { key: index },
+                  es_map(function (_ref) {
+                    var value = _ref.value,
+                        label = _ref.label,
+                        img = _ref.img;
+                    return react_default.a.createElement(
+                      src_Tooltip_Tooltip,
+                      {
+                        key: value,
+                        classes: { tooltip: classes.tooltip },
+                        title: react_default.a.createElement('img', {
+                          style: { width: '72px', height: '90px' },
+                          src: img,
+                          alt: value
+                        }),
+                        tabIndex: -1
+                      },
+                      react_default.a.createElement(
+                        src_Button_Button,
+                        {
+                          className: classes.selectButton,
+                          selected: value === selectionMode,
+                          onClick: function onClick() {
+                            setSelectionMode(value);
+                          },
+                          'aria-pressed': value === selectionMode,
+                          'aria-label': label,
+                          tabIndex: 0
+                        },
+                        react_default.a.createElement(
+                          esm_Paper_Paper,
+                          { className: classes.selectModeItem, key: value },
+                          react_default.a.createElement(
+                            esm_Typography_Typography,
+                            null,
+                            label
+                          ),
+                          !es_isNil(img) && es_is(String, img) && react_default.a.createElement('img', { src: img, alt: value })
+                        )
+                      )
+                    );
+                  }, el)
+                );
+              }, selectionOptions)
+            )
+          )
         ),
         react_default.a.createElement(
           'div',
@@ -72450,7 +72479,7 @@ var AdvancedFilterDialog_AdvancedFilterDialog = function AdvancedFilterDialog(pr
         { container: true },
         react_default.a.createElement(
           esm_Grid_Grid,
-          { item: true, xs: 12, className: classnames_default()(classes.topElements, (_cx = {}, _cx[classes.narrowTop] = isNarrow, _cx)) },
+          { item: true, xs: 12, className: classnames_default()(classes.topElements, (_cx4 = {}, _cx4[classes.narrowTop] = isNarrow, _cx4)) },
           react_default.a.createElement(
             'div',
             { className: isNarrow ? classes.narrowSpotlight : classes.spotlight },
@@ -72465,26 +72494,34 @@ var AdvancedFilterDialog_AdvancedFilterDialog = function AdvancedFilterDialog(pr
           ),
           react_default.a.createElement(
             'div',
-            null,
-            react_default.a.createElement(
-              src_Button_Button,
-              { onClick: collapseAll, color: 'primary' },
-              es_prop('colapseAll', labels)
-            ),
+            { style: { display: 'flex', flexDirection: isNarrow ? 'column' : 'row' } },
             react_default.a.createElement(
-              src_Button_Button,
-              { style: { marginLeft: 10 }, onClick: expandAll, color: 'primary' },
-              es_prop('expandAll', labels)
-            ),
-            react_default.a.createElement(
-              src_Button_Button,
-              { onClick: selectAll, color: 'primary' },
-              es_prop('selectAll', labels)
+              'div',
+              null,
+              react_default.a.createElement(
+                src_Button_Button,
+                { onClick: collapseAll, color: 'primary' },
+                es_prop('colapseAll', labels)
+              ),
+              react_default.a.createElement(
+                src_Button_Button,
+                { style: { marginLeft: 10 }, onClick: expandAll, color: 'primary' },
+                es_prop('expandAll', labels)
+              )
             ),
             react_default.a.createElement(
-              src_Button_Button,
-              { style: { marginLeft: 10 }, onClick: deselectAll, color: 'primary' },
-              es_prop('deselectAll', labels)
+              'div',
+              null,
+              react_default.a.createElement(
+                src_Button_Button,
+                { onClick: selectAll, color: 'primary' },
+                es_prop('selectAll', labels)
+              ),
+              react_default.a.createElement(
+                src_Button_Button,
+                { style: { marginLeft: 10 }, onClick: deselectAll, color: 'primary' },
+                es_prop('deselectAll', labels)
+              )
             )
           ),
           react_default.a.createElement(esm_Divider_Divider, { className: classes.divider })
@@ -72500,7 +72537,7 @@ var AdvancedFilterDialog_AdvancedFilterDialog = function AdvancedFilterDialog(pr
             items: selectionItems,
             changeSelection: onChangeSelection,
             withExpandControl: true,
-            treeHeight: listHeight,
+            treeHeight: 0,
             scopeGetter: scopeGetter,
             expandedIds: expandedIds
           }))