@sis-cc/dotstatsuite-visions 12.21.0 → 12.22.0

package/es/DynamicDrawer/AdvancedSelection.js

@@ -376,7 +376,7 @@ var AdvancedSelection = function AdvancedSelection(props) {
           return onChangeSelection(selection, ids, filter);
         },
         withExpandControl: true,
-        treeHeight: isNarrow ? 0 : '700px',
+        treeHeight: isNarrow ? 0 : '450px',
         scopeGetter: scopeGetter,
         expandedIds: expandedIds
       }))

package/es/DynamicDrawer/DynamicDrawer.js

@@ -2,7 +2,7 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import cx from 'classnames';
@@ -57,7 +57,9 @@ var TabPanel = function TabPanel(props) {
       isNarrow = props.isNarrow,
       setOpen = props.setOpen,
       labelRenderer = props.labelRenderer,
-      other = _objectWithoutProperties(props, ['children', 'open', 'item', 'classes', 'labels', 'onClose', 'isNarrow', 'setOpen', 'labelRenderer']);
+      _props$styles = props.styles,
+      styles = _props$styles === undefined ? {} : _props$styles,
+      other = _objectWithoutProperties(props, ['children', 'open', 'item', 'classes', 'labels', 'onClose', 'isNarrow', 'setOpen', 'labelRenderer', 'styles']);
 
   return React.createElement(
     'div',
@@ -66,7 +68,8 @@ var 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.createElement(
       Box,
@@ -143,7 +146,8 @@ TabPanel.propTypes = process.env.NODE_ENV !== "production" ? {
   children: PropTypes.node,
   isNarrow: PropTypes.bool,
   setOpen: PropTypes.func,
-  labelRenderer: PropTypes.func
+  labelRenderer: PropTypes.func,
+  styles: PropTypes.object
 } : {};
 
 var PaperComponent = function PaperComponent(props) {
@@ -195,6 +199,10 @@ var DynamicDrawer = function DynamicDrawer(props) {
       allSelection = _useState4[0],
       setAllSelection = _useState4[1];
 
+  var _useState5 = useState(-1),
+      value = _useState5[0],
+      setValue = _useState5[1];
+
   var getCounter = function getCounter(items, tagAccessor) {
     var selectedItemsIds = R.reduce(function (acc, item) {
       if (R.prop('isSelected', item)) {
@@ -230,12 +238,15 @@ var DynamicDrawer = function DynamicDrawer(props) {
       tagAccessor = props.tagAccessor,
       tagAriaLabel = props.tagAriaLabel,
       children = props.children,
-      rest = _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 = _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) {
     setSelection(_extends({}, allSelection[item.id]));
     handleChangePanel(item.id, selection, allSelection);
     setFilter(item);
+    setValue(item.id);
     setOpen(true);
   };
   var handleSubmit = function handleSubmit() {
@@ -243,15 +254,27 @@ var DynamicDrawer = function DynamicDrawer(props) {
     setAllSelection({});
     setSelection({});
     setOpen(false);
+    setFilter({});
   };
   var handleClose = function handleClose() {
     setOpen(false);
     setAllSelection({});
     setSelection({});
+    setFilter({});
   };
 
   var isHidden = open && isNarrow;
   var isNotHiddenButton = !R.isEmpty(allSelection) && isNarrow;
+  useEffect(function () {
+    if (open) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return function () {
+      document.body.style.overflow = '';
+    };
+  }, [open]);
 
   return React.createElement(
     'div',
@@ -274,7 +297,10 @@ var DynamicDrawer = function DynamicDrawer(props) {
       {
         orientation: 'vertical',
         variant: 'scrollable',
-        value: false,
+        TabIndicatorProps: { style: { transition: 'none' } },
+        scrollButtons: false,
+        disableScrollButtons: true,
+        value: value,
         onChange: handleChange,
         'aria-label': 'filters',
         'data-testid': testId,
@@ -284,7 +310,8 @@ var DynamicDrawer = function DynamicDrawer(props) {
           height: '100%',
           borderRight: 1,
           borderColor: 'divider',
-          zIndex: 1000
+          zIndex: 1000,
+          overflow: 'auto'
         }
       },
       R.map(function (item) {
@@ -317,7 +344,9 @@ var DynamicDrawer = function DynamicDrawer(props) {
             alignItems: 'start',
             maxWidth: '100%'
           },
-          wrapped: true
+          wrapped: true,
+          disableRipple: true,
+          disableFocusRipple: true
         });
       })(list),
       open && !isNarrow && React.createElement(
@@ -354,7 +383,8 @@ var DynamicDrawer = function DynamicDrawer(props) {
         onClose: handleClose,
         isNarrow: isNarrow,
         setOpen: setOpen,
-        labelRenderer: labelRenderer
+        labelRenderer: labelRenderer,
+        styles: styles
       },
       R.equals(filter.id, periodPanel) ? children : React.createElement(AdvancedSelection, _extends({
         id: filter.id,
@@ -410,7 +440,8 @@ DynamicDrawer.propTypes = process.env.NODE_ENV !== "production" ? {
   periodPanel: PropTypes.string,
   isNarrow: PropTypes.bool,
   disableAccessor: PropTypes.func,
-  children: PropTypes.node
+  children: PropTypes.node,
+  styles: PropTypes.object
 } : {};
 
 export default DynamicDrawer;

package/es/DynamicDrawer/SelectionModesMobile.js

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import cx from 'classnames';
-import { Box, Button, Paper, Typography } from '@mui/material';
-import { Tooltip } from '..';
+import { Box, Paper, Typography } from '@mui/material';
+import { Tooltip, Button } from '..';
 
 var mapIndexed = R.addIndex(R.map);
 var ButtonCarousel = function ButtonCarousel(_ref) {

package/lib/DynamicDrawer/AdvancedSelection.js

@@ -433,7 +433,7 @@ var AdvancedSelection = function AdvancedSelection(props) {
           return onChangeSelection(selection, ids, filter);
         },
         withExpandControl: true,
-        treeHeight: isNarrow ? 0 : '700px',
+        treeHeight: isNarrow ? 0 : '450px',
         scopeGetter: scopeGetter,
         expandedIds: expandedIds
       }))

package/lib/DynamicDrawer/DynamicDrawer.js

@@ -96,7 +96,9 @@ var TabPanel = function TabPanel(props) {
       isNarrow = props.isNarrow,
       setOpen = props.setOpen,
       labelRenderer = props.labelRenderer,
-      other = _objectWithoutProperties(props, ['children', 'open', 'item', 'classes', 'labels', 'onClose', 'isNarrow', 'setOpen', 'labelRenderer']);
+      _props$styles = props.styles,
+      styles = _props$styles === undefined ? {} : _props$styles,
+      other = _objectWithoutProperties(props, ['children', 'open', 'item', 'classes', 'labels', 'onClose', 'isNarrow', 'setOpen', 'labelRenderer', 'styles']);
 
   return _react2.default.createElement(
     'div',
@@ -105,7 +107,8 @@ var 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 && _react2.default.createElement(
       _Box2.default,
@@ -182,7 +185,8 @@ TabPanel.propTypes = process.env.NODE_ENV !== "production" ? {
   children: _propTypes2.default.node,
   isNarrow: _propTypes2.default.bool,
   setOpen: _propTypes2.default.func,
-  labelRenderer: _propTypes2.default.func
+  labelRenderer: _propTypes2.default.func,
+  styles: _propTypes2.default.object
 } : {};
 
 var PaperComponent = function PaperComponent(props) {
@@ -234,6 +238,10 @@ var DynamicDrawer = function DynamicDrawer(props) {
       allSelection = _useState4[0],
       setAllSelection = _useState4[1];
 
+  var _useState5 = (0, _react.useState)(-1),
+      value = _useState5[0],
+      setValue = _useState5[1];
+
   var getCounter = function getCounter(items, tagAccessor) {
     var selectedItemsIds = R.reduce(function (acc, item) {
       if (R.prop('isSelected', item)) {
@@ -269,12 +277,15 @@ var DynamicDrawer = function DynamicDrawer(props) {
       tagAccessor = props.tagAccessor,
       tagAriaLabel = props.tagAriaLabel,
       children = props.children,
-      rest = _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 = _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) {
     setSelection(_extends({}, allSelection[item.id]));
     handleChangePanel(item.id, selection, allSelection);
     setFilter(item);
+    setValue(item.id);
     setOpen(true);
   };
   var handleSubmit = function handleSubmit() {
@@ -282,15 +293,27 @@ var DynamicDrawer = function DynamicDrawer(props) {
     setAllSelection({});
     setSelection({});
     setOpen(false);
+    setFilter({});
   };
   var handleClose = function handleClose() {
     setOpen(false);
     setAllSelection({});
     setSelection({});
+    setFilter({});
   };
 
   var isHidden = open && isNarrow;
   var isNotHiddenButton = !R.isEmpty(allSelection) && isNarrow;
+  (0, _react.useEffect)(function () {
+    if (open) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return function () {
+      document.body.style.overflow = '';
+    };
+  }, [open]);
 
   return _react2.default.createElement(
     'div',
@@ -313,7 +336,10 @@ var DynamicDrawer = function DynamicDrawer(props) {
       {
         orientation: 'vertical',
         variant: 'scrollable',
-        value: false,
+        TabIndicatorProps: { style: { transition: 'none' } },
+        scrollButtons: false,
+        disableScrollButtons: true,
+        value: value,
         onChange: handleChange,
         'aria-label': 'filters',
         'data-testid': testId,
@@ -323,7 +349,8 @@ var DynamicDrawer = function DynamicDrawer(props) {
           height: '100%',
           borderRight: 1,
           borderColor: 'divider',
-          zIndex: 1000
+          zIndex: 1000,
+          overflow: 'auto'
         }
       },
       R.map(function (item) {
@@ -356,7 +383,9 @@ var DynamicDrawer = function DynamicDrawer(props) {
             alignItems: 'start',
             maxWidth: '100%'
           },
-          wrapped: true
+          wrapped: true,
+          disableRipple: true,
+          disableFocusRipple: true
         });
       })(list),
       open && !isNarrow && _react2.default.createElement(
@@ -393,7 +422,8 @@ var DynamicDrawer = function DynamicDrawer(props) {
         onClose: handleClose,
         isNarrow: isNarrow,
         setOpen: setOpen,
-        labelRenderer: labelRenderer
+        labelRenderer: labelRenderer,
+        styles: styles
       },
       R.equals(filter.id, periodPanel) ? children : _react2.default.createElement(_AdvancedSelection2.default, _extends({
         id: filter.id,
@@ -449,7 +479,8 @@ DynamicDrawer.propTypes = process.env.NODE_ENV !== "production" ? {
   periodPanel: _propTypes2.default.string,
   isNarrow: _propTypes2.default.bool,
   disableAccessor: _propTypes2.default.func,
-  children: _propTypes2.default.node
+  children: _propTypes2.default.node,
+  styles: _propTypes2.default.object
 } : {};
 
 exports.default = DynamicDrawer;

package/lib/DynamicDrawer/SelectionModesMobile.js

@@ -60,7 +60,7 @@ var ButtonCarousel = function ButtonCarousel(_ref) {
           tabIndex: -1
         },
         _react2.default.createElement(
-          _material.Button,
+          _.Button,
           {
             className: (0, _classnames2.default)(classes.selectButton, classes.selectButtonNarrow),
             selected: value === selectionMode,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sis-cc/dotstatsuite-visions",
-  "version": "12.21.0",
+  "version": "12.22.0",
   "description": "Library of visual components",
   "author": "OECD",
   "homepage": "https://visions-qa.siscc.org/#o",

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

@@ -1,5 +1,5 @@
 /*!
- * @sis-cc/dotstatsuite-visions v12.21.0 - 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) {
@@ -9216,7 +9216,7 @@ if (true) {
 /* 157 */
 /***/ (function(module) {
 
-module.exports = {"name":"@sis-cc/dotstatsuite-visions","version":"12.21.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"}};
+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 */
@@ -58514,7 +58514,7 @@ var SelectionModesMobile_ButtonCarousel = function ButtonCarousel(_ref) {
           tabIndex: -1
         },
         react_default.a.createElement(
-          material_Button_Button,
+          src_Button_Button,
           {
             className: classnames_default()(classes.selectButton, classes.selectButtonNarrow),
             selected: value === selectionMode,
@@ -58938,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
       }))
@@ -60314,7 +60314,9 @@ var DynamicDrawer_TabPanel = function TabPanel(props) {
       isNarrow = props.isNarrow,
       setOpen = props.setOpen,
       labelRenderer = props.labelRenderer,
-      other = DynamicDrawer_objectWithoutProperties(props, ['children', 'open', 'item', 'classes', 'labels', 'onClose', 'isNarrow', 'setOpen', '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',
@@ -60323,7 +60325,8 @@ 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,
@@ -60400,7 +60403,8 @@ DynamicDrawer_TabPanel.propTypes = {
   children: prop_types_default.a.node,
   isNarrow: prop_types_default.a.bool,
   setOpen: prop_types_default.a.func,
-  labelRenderer: prop_types_default.a.func
+  labelRenderer: prop_types_default.a.func,
+  styles: prop_types_default.a.object
 };
 
 var DynamicDrawer_PaperComponent = function PaperComponent(props) {
@@ -60452,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)) {
@@ -60487,12 +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) {
     setSelection(DynamicDrawer_extends({}, allSelection[item.id]));
     handleChangePanel(item.id, selection, allSelection);
     setFilter(item);
+    setValue(item.id);
     setOpen(true);
   };
   var handleSubmit = function handleSubmit() {
@@ -60500,15 +60511,27 @@ 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',
@@ -60531,7 +60554,10 @@ var DynamicDrawer_DynamicDrawer = function DynamicDrawer(props) {
       {
         orientation: 'vertical',
         variant: 'scrollable',
-        value: false,
+        TabIndicatorProps: { style: { transition: 'none' } },
+        scrollButtons: false,
+        disableScrollButtons: true,
+        value: value,
         onChange: handleChange,
         'aria-label': 'filters',
         'data-testid': testId,
@@ -60541,7 +60567,8 @@ var DynamicDrawer_DynamicDrawer = function DynamicDrawer(props) {
           height: '100%',
           borderRight: 1,
           borderColor: 'divider',
-          zIndex: 1000
+          zIndex: 1000,
+          overflow: 'auto'
         }
       },
       es_map(function (item) {
@@ -60574,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(
@@ -60611,7 +60640,8 @@ var DynamicDrawer_DynamicDrawer = function DynamicDrawer(props) {
         onClose: handleClose,
         isNarrow: isNarrow,
         setOpen: setOpen,
-        labelRenderer: labelRenderer
+        labelRenderer: labelRenderer,
+        styles: styles
       },
       es_equals(filter.id, periodPanel) ? children : react_default.a.createElement(DynamicDrawer_AdvancedSelection, DynamicDrawer_extends({
         id: filter.id,
@@ -60667,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);