@sis-cc/dotstatsuite-visions 12.20.2 → 12.22.0

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

@@ -1,5 +1,5 @@
 /*!
- * @sis-cc/dotstatsuite-visions v12.20.2 - https://visions-qa.siscc.org/#o
+ * @sis-cc/dotstatsuite-visions v12.22.0 - https://visions-qa.siscc.org/#o
  * MIT Licensed
  */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -4979,7 +4979,9 @@ function isMuiElement(element, muiNames) {
 /* harmony default export */ var utils_isMuiElement = __webpack_exports__["a"] = (isMuiElement);
 
 /***/ }),
-/* 84 */
+/* 84 */,
+/* 85 */,
+/* 86 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4994,12 +4996,10 @@ exports.default = void 0;
 var _createSvgIcon = _interopRequireDefault(__webpack_require__(19));
 var _jsxRuntime = __webpack_require__(3);
 var _default = exports.default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-  d: "M12 3c-.46 0-.93.04-1.4.14-2.76.53-4.96 2.76-5.48 5.52-.48 2.61.48 5.01 2.22 6.56.43.38.66.91.66 1.47V19c0 1.1.9 2 2 2h.28c.35.6.98 1 1.72 1s1.38-.4 1.72-1H14c1.1 0 2-.9 2-2v-2.31c0-.55.22-1.09.64-1.46C18.09 13.95 19 12.08 19 10c0-3.87-3.13-7-7-7m2 16h-4v-1h4zm0-2h-4v-1h4zm-1.5-5.59V14h-1v-2.59L9.67 9.59l.71-.71L12 10.5l1.62-1.62.71.71z"
-}), 'EmojiObjects');
+  d: "M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z"
+}), 'KeyboardArrowUp');
 
 /***/ }),
-/* 85 */,
-/* 86 */,
 /* 87 */
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -5015,8 +5015,8 @@ exports.default = void 0;
 var _createSvgIcon = _interopRequireDefault(__webpack_require__(19));
 var _jsxRuntime = __webpack_require__(3);
 var _default = exports.default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-  d: "M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z"
-}), 'KeyboardArrowUp');
+  d: "M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"
+}), 'KeyboardArrowDown');
 
 /***/ }),
 /* 88 */
@@ -5034,8 +5034,8 @@ exports.default = void 0;
 var _createSvgIcon = _interopRequireDefault(__webpack_require__(19));
 var _jsxRuntime = __webpack_require__(3);
 var _default = exports.default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-  d: "M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"
-}), 'KeyboardArrowDown');
+  d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+}), 'ExpandMore');
 
 /***/ }),
 /* 89 */
@@ -5053,8 +5053,8 @@ exports.default = void 0;
 var _createSvgIcon = _interopRequireDefault(__webpack_require__(19));
 var _jsxRuntime = __webpack_require__(3);
 var _default = exports.default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-  d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
-}), 'ExpandMore');
+  d: "M12 3c-.46 0-.93.04-1.4.14-2.76.53-4.96 2.76-5.48 5.52-.48 2.61.48 5.01 2.22 6.56.43.38.66.91.66 1.47V19c0 1.1.9 2 2 2h.28c.35.6.98 1 1.72 1s1.38-.4 1.72-1H14c1.1 0 2-.9 2-2v-2.31c0-.55.22-1.09.64-1.46C18.09 13.95 19 12.08 19 10c0-3.87-3.13-7-7-7m2 16h-4v-1h4zm0-2h-4v-1h4zm-1.5-5.59V14h-1v-2.59L9.67 9.59l.71-.71L12 10.5l1.62-1.62.71.71z"
+}), 'EmojiObjects');
 
 /***/ }),
 /* 90 */
@@ -9216,7 +9216,7 @@ if (true) {
 /* 157 */
 /***/ (function(module) {
 
-module.exports = {"name":"@sis-cc/dotstatsuite-visions","version":"12.20.2","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":{"@emotion/react":"^11.13.0","@emotion/styled":"^11.13.0","@hello-pangea/dnd":"^16.6.0","@mui/icons-material":"^5.16.5","@mui/material":"^5.16.5","@mui/styles":"^5.16.5","@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-draggable":"^4.4.5","react-error-boundary":"^4.0.10","react-virtualized":"^9.21.2"},"peerDependencies":{"@mui/icons-material":"^5.16.5","@mui/material":"^5.16.5","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","@mui/icons-material":"^5.16.5","@mui/material":"^5.16.5","@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":"12.22.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":{"@emotion/react":"^11.13.0","@emotion/styled":"^11.13.0","@hello-pangea/dnd":"^16.6.0","@mui/icons-material":"^5.16.5","@mui/material":"^5.16.5","@mui/styles":"^5.16.5","@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-draggable":"^4.4.5","react-error-boundary":"^4.0.10","react-virtualized":"^9.21.2"},"peerDependencies":{"@mui/icons-material":"^5.16.5","@mui/material":"^5.16.5","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","@mui/icons-material":"^5.16.5","@mui/material":"^5.16.5","@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"}};
 
 /***/ }),
 /* 158 */
@@ -52642,11 +52642,11 @@ const Container_Container = createContainer({
  false ? undefined : void 0;
 /* harmony default export */ var material_Container_Container = (Container_Container);
 // EXTERNAL MODULE: ./node_modules/@mui/icons-material/KeyboardArrowDown.js
-var KeyboardArrowDown = __webpack_require__(88);
+var KeyboardArrowDown = __webpack_require__(87);
 var KeyboardArrowDown_default = /*#__PURE__*/__webpack_require__.n(KeyboardArrowDown);
 
 // EXTERNAL MODULE: ./node_modules/@mui/icons-material/KeyboardArrowUp.js
-var KeyboardArrowUp = __webpack_require__(87);
+var KeyboardArrowUp = __webpack_require__(86);
 var KeyboardArrowUp_default = /*#__PURE__*/__webpack_require__.n(KeyboardArrowUp);
 
 // CONCATENATED MODULE: ./node_modules/@mui/material/CircularProgress/circularProgressClasses.js
@@ -55511,7 +55511,7 @@ const CardActions_CardActions = /*#__PURE__*/react["forwardRef"](function CardAc
  false ? undefined : void 0;
 /* harmony default export */ var material_CardActions_CardActions = (CardActions_CardActions);
 // EXTERNAL MODULE: ./node_modules/@mui/icons-material/ExpandMore.js
-var ExpandMore = __webpack_require__(89);
+var ExpandMore = __webpack_require__(88);
 var ExpandMore_default = /*#__PURE__*/__webpack_require__.n(ExpandMore);
 
 // EXTERNAL MODULE: ./node_modules/@mui/icons-material/ExpandLess.js
@@ -57870,6 +57870,37 @@ const Box_Box = createBox({
 });
  false ? undefined : void 0;
 /* harmony default export */ var material_Box_Box = (Box_Box);
+// CONCATENATED MODULE: ./node_modules/ramda/es/includes.js
+
+
+/**
+ * Returns `true` if the specified value is equal, in [`R.equals`](#equals)
+ * terms, to at least one element of the given list; `false` otherwise.
+ * Works also with strings.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.26.0
+ * @category List
+ * @sig a -> [a] -> Boolean
+ * @param {Object} a The item to compare against.
+ * @param {Array} list The array to consider.
+ * @return {Boolean} `true` if an equivalent item is in the list, `false` otherwise.
+ * @see R.any
+ * @example
+ *
+ *      R.includes(3, [1, 2, 3]); //=> true
+ *      R.includes(4, [1, 2, 3]); //=> false
+ *      R.includes({ name: 'Fred' }, [{ name: 'Fred' }]); //=> true
+ *      R.includes([42], [[42]]); //=> true
+ *      R.includes('ba', 'banana'); //=>true
+ */
+
+var includes =
+/*#__PURE__*/
+_curry2(_includes);
+
+/* harmony default export */ var es_includes = (includes);
 // CONCATENATED MODULE: ./node_modules/ramda/es/groupBy.js
 
 
@@ -58046,37 +58077,6 @@ _curry2(function difference(first, second) {
 });
 
 /* harmony default export */ var es_difference = (difference_difference);
-// CONCATENATED MODULE: ./node_modules/ramda/es/includes.js
-
-
-/**
- * Returns `true` if the specified value is equal, in [`R.equals`](#equals)
- * terms, to at least one element of the given list; `false` otherwise.
- * Works also with strings.
- *
- * @func
- * @memberOf R
- * @since v0.26.0
- * @category List
- * @sig a -> [a] -> Boolean
- * @param {Object} a The item to compare against.
- * @param {Array} list The array to consider.
- * @return {Boolean} `true` if an equivalent item is in the list, `false` otherwise.
- * @see R.any
- * @example
- *
- *      R.includes(3, [1, 2, 3]); //=> true
- *      R.includes(4, [1, 2, 3]); //=> false
- *      R.includes({ name: 'Fred' }, [{ name: 'Fred' }]); //=> true
- *      R.includes([42], [[42]]); //=> true
- *      R.includes('ba', 'banana'); //=>true
- */
-
-var includes =
-/*#__PURE__*/
-_curry2(_includes);
-
-/* harmony default export */ var es_includes = (includes);
 // CONCATENATED MODULE: ./src/VirtualizedTree/utils.js
 
 
@@ -58453,7 +58453,7 @@ var withSpotlight_withSpotlight = function withSpotlight(Component) {
 };
 
 // EXTERNAL MODULE: ./node_modules/@mui/icons-material/EmojiObjects.js
-var EmojiObjects = __webpack_require__(84);
+var EmojiObjects = __webpack_require__(89);
 var EmojiObjects_default = /*#__PURE__*/__webpack_require__.n(EmojiObjects);
 
 // EXTERNAL MODULE: ./src/AdvancedFilterDialog/images/single-selection.png
@@ -58479,6 +58479,7 @@ var level_selection_default = /*#__PURE__*/__webpack_require__.n(level_selection
 
 
 
+
 var SelectionModesMobile_mapIndexed = es_addIndex(es_map);
 var SelectionModesMobile_ButtonCarousel = function ButtonCarousel(_ref) {
   var selectionModes = _ref.selectionModes,
@@ -58513,9 +58514,9 @@ var SelectionModesMobile_ButtonCarousel = function ButtonCarousel(_ref) {
           tabIndex: -1
         },
         react_default.a.createElement(
-          material_Button_Button,
+          src_Button_Button,
           {
-            className: classes.selectButton,
+            className: classnames_default()(classes.selectButton, classes.selectButtonNarrow),
             selected: value === selectionMode,
             onClick: function onClick() {
               setSelectionMode(value);
@@ -58526,8 +58527,8 @@ var SelectionModesMobile_ButtonCarousel = function ButtonCarousel(_ref) {
             sx: {
               flex: '0 0 auto', // Prevents buttons from shrinking
               scrollSnapAlign: 'center',
-              minWidth: 120, // Minimum width for buttons
-              whiteSpace: 'nowrap'
+              minWidth: 40, // Minimum width for buttons
+              whiteSpace: 'wrap'
             }
           },
           react_default.a.createElement(
@@ -58636,12 +58637,7 @@ var AdvancedSelection_useStyles = makeStyles(function (theme) {
       marginRight: 10
     },
     selectionMenu: {
-      width: '50%',
-      maxHeight: '100%',
-      position: 'absolute',
-      top: 110,
-      right: 48,
-      zIndex: 1
+      padding: 24
     },
     narrowSelectionMenu: {
       width: '100%'
@@ -58652,6 +58648,12 @@ var AdvancedSelection_useStyles = makeStyles(function (theme) {
       flexWrap: 'wrap',
       alignItems: 'flex-start'
     },
+    selectButtonNarrow: {
+      width: 160,
+      height: 50,
+      border: '1px solid ' + theme.palette.primary.light,
+      margin: 5
+    },
     selectButton: {
       color: theme.palette.primary.main,
       '&:hover': {
@@ -58676,7 +58678,7 @@ var AdvancedSelection_useStyles = makeStyles(function (theme) {
       },
       '& img': {
         width: 21,
-        height: 24
+        height: 30
       }
     },
     hint: {
@@ -58719,7 +58721,7 @@ var AdvancedSelection_useStyles = makeStyles(function (theme) {
 });
 
 var AdvancedSelection_AdvancedSelection = function AdvancedSelection(props) {
-  var _cx, _cx2, _cx3, _cx4;
+  var _cx, _cx2;
 
   var id = props.id,
       items = props.items,
@@ -58756,8 +58758,9 @@ var AdvancedSelection_AdvancedSelection = function AdvancedSelection(props) {
   };
 
   var selectionItems = es_map(function (item) {
+    var selectedIds = es_propOr([], id, allSelection);
     return AdvancedSelection_extends({}, item, {
-      isSelected: es_has(item.id, selection) ? !item.isSelected : !!item.isSelected
+      isSelected: es_includes(item.id, selectedIds) ? !item.isSelected : !!item.isSelected
     });
   }, items);
   var indexedFilteredItems = es_indexBy(utils_getHierarchicalId, selectionItems);
@@ -58867,38 +58870,6 @@ var AdvancedSelection_AdvancedSelection = function AdvancedSelection(props) {
         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_Tooltip_Tooltip,
-              {
-                role: 'tooltip',
-                variant: 'light',
-                title: react_default.a.createElement(
-                  material_Typography_Typography,
-                  { variant: 'body2' },
-                  es_prop('hint', labels)
-                ),
-                'aria-label': es_prop('hint', labels),
-                tabIndex: 0
-              },
-              react_default.a.createElement(
-                material_Button_Button,
-                null,
-                react_default.a.createElement(EmojiObjects_default.a, null)
-              )
-            ),
-            react_default.a.createElement(
-              material_Typography_Typography,
-              {
-                className: classes.selectionTitle,
-                'aria-label': es_prop('selectionMode', labels),
-                tabIndex: 0
-              },
-              es_prop('selectionMode', labels)
-            )
-          ),
           react_default.a.createElement(SelectionModesMobile, {
             selectionModes: selectionOptions,
             selectionMode: selectionMode,
@@ -58967,7 +58938,7 @@ var AdvancedSelection_AdvancedSelection = function AdvancedSelection(props) {
           return onChangeSelection(selection, ids, filter);
         },
         withExpandControl: true,
-        treeHeight: isNarrow ? 0 : '700px',
+        treeHeight: isNarrow ? 0 : '450px',
         scopeGetter: scopeGetter,
         expandedIds: expandedIds
       }))
@@ -58977,7 +58948,7 @@ var AdvancedSelection_AdvancedSelection = function AdvancedSelection(props) {
       { item: true, container: true, xs: 4 },
       react_default.a.createElement(
         'div',
-        { className: classnames_default()(classes.selectModeContainer, (_cx3 = {}, _cx3[classes.narrowHeader] = isNarrow, _cx3)) },
+        { className: classnames_default()(classes.selectModeContainer) },
         react_default.a.createElement(
           'div',
           { className: classes.hint },
@@ -59012,7 +58983,7 @@ var AdvancedSelection_AdvancedSelection = function AdvancedSelection(props) {
         ),
         react_default.a.createElement(
           'div',
-          { className: classnames_default()(classes.selectModeContainer, (_cx4 = {}, _cx4[classes.narrowHeader] = isNarrow, _cx4)) },
+          { className: classnames_default()(classes.selectModeContainer, classes.selectionMenu) },
           mapIndexed(function (_ref) {
             var value = _ref.value,
                 label = _ref.label,
@@ -60342,7 +60313,10 @@ var DynamicDrawer_TabPanel = function TabPanel(props) {
       onClose = props.onClose,
       isNarrow = props.isNarrow,
       setOpen = props.setOpen,
-      other = DynamicDrawer_objectWithoutProperties(props, ['children', 'open', 'item', 'classes', 'labels', 'onClose', 'isNarrow', 'setOpen']);
+      labelRenderer = props.labelRenderer,
+      _props$styles = props.styles,
+      styles = _props$styles === undefined ? {} : _props$styles,
+      other = DynamicDrawer_objectWithoutProperties(props, ['children', 'open', 'item', 'classes', 'labels', 'onClose', 'isNarrow', 'setOpen', 'labelRenderer', 'styles']);
 
   return react_default.a.createElement(
     'div',
@@ -60351,40 +60325,70 @@ var DynamicDrawer_TabPanel = function TabPanel(props) {
       hidden: !open,
       id: 'vertical-tabpanel-' + item.index,
       'aria-labelledby': 'vertical-tab-' + item.index,
-      className: isNarrow ? classes.tabPanelNarrow : classes.tabPanel
+      className: isNarrow ? classes.tabPanelNarrow : classes.tabPanel,
+      style: styles
     }, other),
     open && react_default.a.createElement(
       material_Box_Box,
       { sx: { p: 3 } },
-      isNarrow && react_default.a.createElement(
-        material_Button_Button,
-        {
-          onClick: function onClick() {
-            return setOpen(false);
-          },
-          'data-testid': 'back_button',
-          'aria-label': es_prop('cancel', labels),
-          sx: {
-            padding: 0,
-            float: 'left'
-          },
-          size: 'large'
-        },
-        react_default.a.createElement(ArrowBack_default.a, null)
-      ),
       react_default.a.createElement(
-        material_Button_Button,
+        material_Box_Box,
         {
-          onClick: onClose,
-          'aria-label': es_prop('cancel', labels),
-          sx: {
-            color: 'grey !important',
-            padding: 0,
-            float: 'right'
-          },
-          size: 'large'
+          display: 'flex',
+          justifyContent: isNarrow ? 'space-between' : 'flex-end',
+          alignItems: 'center'
         },
-        react_default.a.createElement(Close_default.a, null)
+        isNarrow && react_default.a.createElement(
+          material_Box_Box,
+          { display: 'flex', justifyContent: 'flex-start', alignItems: 'center' },
+          react_default.a.createElement(
+            material_Button_Button,
+            {
+              onClick: function onClick() {
+                return setOpen(false);
+              },
+              'data-testid': 'back_button',
+              'aria-label': es_prop('cancel', labels),
+              sx: {
+                padding: 0,
+                float: 'left',
+                justifyContent: 'flex-start',
+                minWidth: '24px'
+              },
+              size: 'large',
+              edge: 'start'
+            },
+            react_default.a.createElement(ArrowBack_default.a, null)
+          ),
+          react_default.a.createElement(
+            material_Typography_Typography,
+            {
+              variant: 'h6',
+              'aria-label': es_prop('title', labels)(labelRenderer(item)),
+              tabIndex: 0,
+              sx: {
+                margin: 0,
+                padding: 0
+              }
+            },
+            es_prop('title', labels)(labelRenderer(item))
+          )
+        ),
+        react_default.a.createElement(
+          material_Button_Button,
+          {
+            onClick: onClose,
+            'aria-label': es_prop('cancel', labels),
+            sx: {
+              color: 'grey !important',
+              minWidth: '24px',
+              padding: 0,
+              float: 'right'
+            },
+            size: 'large'
+          },
+          react_default.a.createElement(Close_default.a, null)
+        )
       ),
       children
     )
@@ -60398,7 +60402,9 @@ DynamicDrawer_TabPanel.propTypes = {
   onClose: prop_types_default.a.func,
   children: prop_types_default.a.node,
   isNarrow: prop_types_default.a.bool,
-  setOpen: prop_types_default.a.func
+  setOpen: prop_types_default.a.func,
+  labelRenderer: prop_types_default.a.func,
+  styles: prop_types_default.a.object
 };
 
 var DynamicDrawer_PaperComponent = function PaperComponent(props) {
@@ -60450,6 +60456,10 @@ var DynamicDrawer_DynamicDrawer = function DynamicDrawer(props) {
       allSelection = _useState4[0],
       setAllSelection = _useState4[1];
 
+  var _useState5 = Object(react["useState"])(-1),
+      value = _useState5[0],
+      setValue = _useState5[1];
+
   var getCounter = function getCounter(items, tagAccessor) {
     var selectedItemsIds = es_reduce(function (acc, item) {
       if (es_prop('isSelected', item)) {
@@ -60485,13 +60495,15 @@ var DynamicDrawer_DynamicDrawer = function DynamicDrawer(props) {
       tagAccessor = props.tagAccessor,
       tagAriaLabel = props.tagAriaLabel,
       children = props.children,
-      rest = DynamicDrawer_objectWithoutProperties(props, ['list', 'labelRenderer', 'onClick', 'handleChangePanel', 'isNarrow', 'labels', 'disableAccessor', 'expandAll', 'collapseAll', 'expandedIds', 'allItems', 'periodPanel', 'classes', 'testId', 'tagAccessor', 'tagAriaLabel', 'children']);
+      _props$styles2 = props.styles,
+      styles = _props$styles2 === undefined ? {} : _props$styles2,
+      rest = DynamicDrawer_objectWithoutProperties(props, ['list', 'labelRenderer', 'onClick', 'handleChangePanel', 'isNarrow', 'labels', 'disableAccessor', 'expandAll', 'collapseAll', 'expandedIds', 'allItems', 'periodPanel', 'classes', 'testId', 'tagAccessor', 'tagAriaLabel', 'children', 'styles']);
 
   var handleChange = function handleChange(e, item) {
-    console.log({ item: item, selection: selection, allSelection: allSelection });
     setSelection(DynamicDrawer_extends({}, allSelection[item.id]));
-    handleChangePanel(item.id, allSelection);
+    handleChangePanel(item.id, selection, allSelection);
     setFilter(item);
+    setValue(item.id);
     setOpen(true);
   };
   var handleSubmit = function handleSubmit() {
@@ -60499,24 +60511,53 @@ var DynamicDrawer_DynamicDrawer = function DynamicDrawer(props) {
     setAllSelection({});
     setSelection({});
     setOpen(false);
+    setFilter({});
   };
   var handleClose = function handleClose() {
     setOpen(false);
     setAllSelection({});
     setSelection({});
+    setFilter({});
   };
+
   var isHidden = open && isNarrow;
   var isNotHiddenButton = !es_isEmpty(allSelection) && isNarrow;
+  Object(react["useEffect"])(function () {
+    if (open) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return function () {
+      document.body.style.overflow = '';
+    };
+  }, [open]);
 
   return react_default.a.createElement(
     'div',
     { style: { display: 'flex', flexDirection: 'row' } },
+    open && !isNarrow && react_default.a.createElement(material_Box_Box, {
+      onClick: function onClick() {
+        return handleClose();
+      },
+      sx: {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height: '100vh',
+        zIndex: 990
+      }
+    }),
     react_default.a.createElement(
       material_Tabs_Tabs,
       {
         orientation: 'vertical',
         variant: 'scrollable',
-        value: false,
+        TabIndicatorProps: { style: { transition: 'none' } },
+        scrollButtons: false,
+        disableScrollButtons: true,
+        value: value,
         onChange: handleChange,
         'aria-label': 'filters',
         'data-testid': testId,
@@ -60525,7 +60566,9 @@ var DynamicDrawer_DynamicDrawer = function DynamicDrawer(props) {
           width: '100%',
           height: '100%',
           borderRight: 1,
-          borderColor: 'divider'
+          borderColor: 'divider',
+          zIndex: 1000,
+          overflow: 'auto'
         }
       },
       es_map(function (item) {
@@ -60558,7 +60601,9 @@ var DynamicDrawer_DynamicDrawer = function DynamicDrawer(props) {
             alignItems: 'start',
             maxWidth: '100%'
           },
-          wrapped: true
+          wrapped: true,
+          disableRipple: true,
+          disableFocusRipple: true
         });
       })(list),
       open && !isNarrow && react_default.a.createElement(
@@ -60594,7 +60639,9 @@ var DynamicDrawer_DynamicDrawer = function DynamicDrawer(props) {
         classes: classes,
         onClose: handleClose,
         isNarrow: isNarrow,
-        setOpen: setOpen
+        setOpen: setOpen,
+        labelRenderer: labelRenderer,
+        styles: styles
       },
       es_equals(filter.id, periodPanel) ? children : react_default.a.createElement(DynamicDrawer_AdvancedSelection, DynamicDrawer_extends({
         id: filter.id,
@@ -60650,7 +60697,8 @@ DynamicDrawer_DynamicDrawer.propTypes = {
   periodPanel: prop_types_default.a.string,
   isNarrow: prop_types_default.a.bool,
   disableAccessor: prop_types_default.a.func,
-  children: prop_types_default.a.node
+  children: prop_types_default.a.node,
+  styles: prop_types_default.a.object
 };
 
 /* harmony default export */ var src_DynamicDrawer_DynamicDrawer = (DynamicDrawer_DynamicDrawer);
@@ -63978,7 +64026,6 @@ var PeriodPicker_Period = function Period(_ref) {
   var destructuringDates = es_map(lib_getDestructuringDate)(period);
 
   var onClickFrequency = function onClickFrequency(e, value) {
-    console.log(value);
     if (es_is(Function, changeFrequency)) return changeFrequency(value);
   };
   var _getIsDisabled = function _getIsDisabled(getter) {