@sis-cc/dotstatsuite-visions 12.32.0 → 12.33.0

package/es/DynamicDrawer/DynamicDrawer.js

@@ -49,6 +49,21 @@ var useStyles = makeStyles(function (theme) {
     }
   };
 });
+var getCounter = function getCounter(items, tagAccessor) {
+  var selectedItemsIds = R.reduce(function (acc, item) {
+    if (R.prop('isSelected', item)) {
+      return R.append(item.id, acc);
+    }
+    return acc;
+  }, [], items);
+  var itemsIds = R.pluck('id', items);
+  var count = R.pipe(R.uniq, R.length)(selectedItemsIds);
+  var total = R.pipe(R.uniq, R.length)(itemsIds);
+  if (R.is(Function, tagAccessor)) {
+    return tagAccessor(count, total);
+  }
+  return count + '/' + total;
+};
 
 var TabPanel = function TabPanel(props) {
   var children = props.children,
@@ -61,18 +76,19 @@ var TabPanel = function TabPanel(props) {
       setOpen = props.setOpen,
       labelRenderer = props.labelRenderer,
       _props$styles = props.styles,
-      styles = _props$styles === undefined ? {} : _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',
-    {
+    _extends({
       role: 'tabpanel',
       hidden: !open,
       id: 'vertical-tabpanel-' + item.index,
       'aria-labelledby': 'vertical-tab-' + item.index,
       className: isNarrow ? classes.tabPanelNarrow : classes.tabPanel,
       style: styles
-    },
+    }, other),
     open && React.createElement(
       Box,
       { sx: { p: 3 } },
@@ -152,13 +168,21 @@ TabPanel.propTypes = process.env.NODE_ENV !== "production" ? {
   styles: PropTypes.object
 } : {};
 
-var PaperComponent = function PaperComponent(props) {
+var PaperComponent = React.forwardRef(function (_ref, ref) {
   var _cx;
 
+  var label = _ref.label,
+      selected = _ref.selected,
+      item = _ref.item,
+      tagAccessor = _ref.tagAccessor,
+      tagValueLabel = _ref.tagValueLabel,
+      rest = _objectWithoutProperties(_ref, ['label', 'selected', 'item', 'tagAccessor', 'tagValueLabel']);
+
+  var Chip = R.isNil(item.tag) ? InternalTag : item.tag;
   var classes = useStyles();
   return React.createElement(
     Paper,
-    props,
+    _extends({}, rest, { ref: ref }),
     React.createElement(
       Box,
       { sx: { display: 'flex', justifyContent: 'space-between', width: '100%' } },
@@ -167,19 +191,25 @@ var PaperComponent = function PaperComponent(props) {
         {
           noWrap: true,
           variant: 'body2',
-          title: props.label,
-          className: cx(classes.label, (_cx = {}, _cx[classes.labelSelected] = props.selected, _cx))
+          title: label,
+          className: cx(classes.label, (_cx = {}, _cx[classes.labelSelected] = selected, _cx))
         },
-        props.label
+        label
       ),
-      props.tag
+      R.isNil(item.tag) ? React.createElement(
+        Chip,
+        { items: item.values, tagValueLabel: tagValueLabel },
+        getCounter(item.values, tagAccessor)
+      ) : item.tag
     )
   );
-};
+});
 PaperComponent.propTypes = process.env.NODE_ENV !== "production" ? {
   label: PropTypes.string,
-  tag: PropTypes.elementType,
-  selected: PropTypes.bool
+  selected: PropTypes.bool,
+  item: PropTypes.object,
+  tagAccessor: PropTypes.func,
+  tagValueLabel: PropTypes.func
 } : {};
 
 var DynamicDrawer = function DynamicDrawer(props) {
@@ -201,22 +231,6 @@ var DynamicDrawer = function DynamicDrawer(props) {
       allSelection = _useState4[0],
       setAllSelection = _useState4[1];
 
-  var getCounter = function getCounter(items, tagAccessor) {
-    var selectedItemsIds = R.reduce(function (acc, item) {
-      if (R.prop('isSelected', item)) {
-        return R.append(item.id, acc);
-      }
-      return acc;
-    }, [], items);
-    var itemsIds = R.pluck('id', items);
-    var count = R.pipe(R.uniq, R.length)(selectedItemsIds);
-    var total = R.pipe(R.uniq, R.length)(itemsIds);
-    if (R.is(Function, tagAccessor)) {
-      return tagAccessor(count, total);
-    }
-    return count + '/' + total;
-  };
-
   var list = props.list,
       labelRenderer = props.labelRenderer,
       onClick = props.onClick,
@@ -328,24 +342,23 @@ var DynamicDrawer = function DynamicDrawer(props) {
       R.map(function (item) {
         var _cx2;
 
-        var Chip = R.isNil(item.tag) ? InternalTag : item.tag;
         var tagValueLabel = R.isNil(item.tag) && getCounter(item.values, tagAriaLabel);
 
         return React.createElement(Tab, {
           key: item.id,
           id: filter.id,
           'data-testid': item.id + '-tab',
-          component: function component(props) {
-            return PaperComponent(_extends({
+          component: React.forwardRef(function TabPaper(tabProps, ref) {
+            return React.createElement(PaperComponent, _extends({
+              ref: ref
+            }, tabProps, {
               label: labelRenderer(item),
               selected: selectedId === item.id,
-              tag: R.isNil(item.tag) ? React.createElement(
-                Chip,
-                { items: item.values, tagValueLabel: tagValueLabel },
-                getCounter(item.values, tagAccessor)
-              ) : item.tag
-            }, props));
-          },
+              item: item,
+              tagAccessor: tagAccessor,
+              tagValueLabel: tagValueLabel
+            }));
+          }),
           label: labelRenderer(item),
           'aria-label': labelRenderer(item),
           value: item,
@@ -430,7 +443,7 @@ DynamicDrawer.propTypes = process.env.NODE_ENV !== "production" ? {
   tagAriaLabel: PropTypes.func,
   handleChangePanel: PropTypes.func,
   onClosePanel: PropTypes.func,
-  displayChildren: PropTypes.func,
+  displayChildren: PropTypes.bool,
   labels: PropTypes.shape({
     placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     disableItemLabel: PropTypes.string,

package/lib/DynamicDrawer/DynamicDrawer.js

@@ -99,6 +99,21 @@ var useStyles = (0, _makeStyles2.default)(function (theme) {
     }
   };
 });
+var getCounter = function getCounter(items, tagAccessor) {
+  var selectedItemsIds = R.reduce(function (acc, item) {
+    if (R.prop('isSelected', item)) {
+      return R.append(item.id, acc);
+    }
+    return acc;
+  }, [], items);
+  var itemsIds = R.pluck('id', items);
+  var count = R.pipe(R.uniq, R.length)(selectedItemsIds);
+  var total = R.pipe(R.uniq, R.length)(itemsIds);
+  if (R.is(Function, tagAccessor)) {
+    return tagAccessor(count, total);
+  }
+  return count + '/' + total;
+};
 
 var TabPanel = function TabPanel(props) {
   var children = props.children,
@@ -111,18 +126,19 @@ var TabPanel = function TabPanel(props) {
       setOpen = props.setOpen,
       labelRenderer = props.labelRenderer,
       _props$styles = props.styles,
-      styles = _props$styles === undefined ? {} : _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',
-    {
+    _extends({
       role: 'tabpanel',
       hidden: !open,
       id: 'vertical-tabpanel-' + item.index,
       'aria-labelledby': 'vertical-tab-' + item.index,
       className: isNarrow ? classes.tabPanelNarrow : classes.tabPanel,
       style: styles
-    },
+    }, other),
     open && _react2.default.createElement(
       _Box2.default,
       { sx: { p: 3 } },
@@ -202,13 +218,21 @@ TabPanel.propTypes = process.env.NODE_ENV !== "production" ? {
   styles: _propTypes2.default.object
 } : {};
 
-var PaperComponent = function PaperComponent(props) {
+var PaperComponent = _react2.default.forwardRef(function (_ref, ref) {
   var _cx;
 
+  var label = _ref.label,
+      selected = _ref.selected,
+      item = _ref.item,
+      tagAccessor = _ref.tagAccessor,
+      tagValueLabel = _ref.tagValueLabel,
+      rest = _objectWithoutProperties(_ref, ['label', 'selected', 'item', 'tagAccessor', 'tagValueLabel']);
+
+  var Chip = R.isNil(item.tag) ? _.Tag : item.tag;
   var classes = useStyles();
   return _react2.default.createElement(
     _Paper2.default,
-    props,
+    _extends({}, rest, { ref: ref }),
     _react2.default.createElement(
       _Box2.default,
       { sx: { display: 'flex', justifyContent: 'space-between', width: '100%' } },
@@ -217,19 +241,25 @@ var PaperComponent = function PaperComponent(props) {
         {
           noWrap: true,
           variant: 'body2',
-          title: props.label,
-          className: (0, _classnames2.default)(classes.label, (_cx = {}, _cx[classes.labelSelected] = props.selected, _cx))
+          title: label,
+          className: (0, _classnames2.default)(classes.label, (_cx = {}, _cx[classes.labelSelected] = selected, _cx))
         },
-        props.label
+        label
       ),
-      props.tag
+      R.isNil(item.tag) ? _react2.default.createElement(
+        Chip,
+        { items: item.values, tagValueLabel: tagValueLabel },
+        getCounter(item.values, tagAccessor)
+      ) : item.tag
     )
   );
-};
+});
 PaperComponent.propTypes = process.env.NODE_ENV !== "production" ? {
   label: _propTypes2.default.string,
-  tag: _propTypes2.default.elementType,
-  selected: _propTypes2.default.bool
+  selected: _propTypes2.default.bool,
+  item: _propTypes2.default.object,
+  tagAccessor: _propTypes2.default.func,
+  tagValueLabel: _propTypes2.default.func
 } : {};
 
 var DynamicDrawer = function DynamicDrawer(props) {
@@ -251,22 +281,6 @@ var DynamicDrawer = function DynamicDrawer(props) {
       allSelection = _useState4[0],
       setAllSelection = _useState4[1];
 
-  var getCounter = function getCounter(items, tagAccessor) {
-    var selectedItemsIds = R.reduce(function (acc, item) {
-      if (R.prop('isSelected', item)) {
-        return R.append(item.id, acc);
-      }
-      return acc;
-    }, [], items);
-    var itemsIds = R.pluck('id', items);
-    var count = R.pipe(R.uniq, R.length)(selectedItemsIds);
-    var total = R.pipe(R.uniq, R.length)(itemsIds);
-    if (R.is(Function, tagAccessor)) {
-      return tagAccessor(count, total);
-    }
-    return count + '/' + total;
-  };
-
   var list = props.list,
       labelRenderer = props.labelRenderer,
       onClick = props.onClick,
@@ -378,24 +392,23 @@ var DynamicDrawer = function DynamicDrawer(props) {
       R.map(function (item) {
         var _cx2;
 
-        var Chip = R.isNil(item.tag) ? _.Tag : item.tag;
         var tagValueLabel = R.isNil(item.tag) && getCounter(item.values, tagAriaLabel);
 
         return _react2.default.createElement(_Tab2.default, {
           key: item.id,
           id: filter.id,
           'data-testid': item.id + '-tab',
-          component: function component(props) {
-            return PaperComponent(_extends({
+          component: _react2.default.forwardRef(function TabPaper(tabProps, ref) {
+            return _react2.default.createElement(PaperComponent, _extends({
+              ref: ref
+            }, tabProps, {
               label: labelRenderer(item),
               selected: selectedId === item.id,
-              tag: R.isNil(item.tag) ? _react2.default.createElement(
-                Chip,
-                { items: item.values, tagValueLabel: tagValueLabel },
-                getCounter(item.values, tagAccessor)
-              ) : item.tag
-            }, props));
-          },
+              item: item,
+              tagAccessor: tagAccessor,
+              tagValueLabel: tagValueLabel
+            }));
+          }),
           label: labelRenderer(item),
           'aria-label': labelRenderer(item),
           value: item,
@@ -480,7 +493,7 @@ DynamicDrawer.propTypes = process.env.NODE_ENV !== "production" ? {
   tagAriaLabel: _propTypes2.default.func,
   handleChangePanel: _propTypes2.default.func,
   onClosePanel: _propTypes2.default.func,
-  displayChildren: _propTypes2.default.func,
+  displayChildren: _propTypes2.default.bool,
   labels: _propTypes2.default.shape({
     placeholder: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
     disableItemLabel: _propTypes2.default.string,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sis-cc/dotstatsuite-visions",
-  "version": "12.32.0",
+  "version": "12.33.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.32.0 - https://visions-qa.siscc.org/#o
+ * @sis-cc/dotstatsuite-visions v12.33.0 - https://visions-qa.siscc.org/#o
  * MIT Licensed
  */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -8876,7 +8876,7 @@ if (true) {
 /* 157 */
 /***/ (function(module) {
 
-module.exports = {"name":"@sis-cc/dotstatsuite-visions","version":"12.32.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":">=18"},"files":["css","es","lib","umd"],"scripts":{"peers":"install-peers --force-run","build":"cross-env NODE_OPTIONS=--openssl-legacy-provider nwb build-react-component --copy-files --no-demo && node scripts/doc && cross-env NODE_OPTIONS=--openssl-legacy-provider nwb build-demo","build:dev":"cross-env NODE_OPTIONS=--openssl-legacy-provider nwb build-react-component --copy-files --no-demo","clean":"nwb clean-module && nwb clean-demo","prepublishOnly":"npm run build","start":"cross-env NODE_OPTIONS=--openssl-legacy-provider nwb serve-react-demo","test":"jest","test:watch":"jest --watch --no-cache","lint":"eslint src/ --color","precommit":"lint-staged","transform":"npx jscodeshift -t scripts/transform-mui-imports.js demo/"},"dependencies":{"@hello-pangea/dnd":"^16.6.0","@react-hook/size":"^2.1.1","classnames":"^2.2.6","diacritics":"^1.3.0","isemail":"^3.2.0","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":{"@emotion/react":"^11","@emotion/styled":"^11","@mui/icons-material":"^5","@mui/material":"^5","@mui/styles":"^5","date-fns":"^1.30.1","numeral":"^2.0.6","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","@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","cross-env":"^7.0.3","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","install-peers-cli":"^2.2.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-a11y":"^1.1.0","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.33.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":">=18"},"files":["css","es","lib","umd"],"scripts":{"peers":"install-peers --force-run","build":"cross-env NODE_OPTIONS=--openssl-legacy-provider nwb build-react-component --copy-files --no-demo && node scripts/doc && cross-env NODE_OPTIONS=--openssl-legacy-provider nwb build-demo","build:dev":"cross-env NODE_OPTIONS=--openssl-legacy-provider nwb build-react-component --copy-files --no-demo","clean":"nwb clean-module && nwb clean-demo","prepublishOnly":"npm run build","start":"cross-env NODE_OPTIONS=--openssl-legacy-provider nwb serve-react-demo","test":"jest","test:watch":"jest --watch --no-cache","lint":"eslint src/ --color","precommit":"lint-staged","transform":"npx jscodeshift -t scripts/transform-mui-imports.js demo/"},"dependencies":{"@hello-pangea/dnd":"^16.6.0","@react-hook/size":"^2.1.1","classnames":"^2.2.6","diacritics":"^1.3.0","isemail":"^3.2.0","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":{"@emotion/react":"^11","@emotion/styled":"^11","@mui/icons-material":"^5","@mui/material":"^5","@mui/styles":"^5","date-fns":"^1.30.1","numeral":"^2.0.6","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","@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","cross-env":"^7.0.3","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","install-peers-cli":"^2.2.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-a11y":"^1.1.0","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 */
@@ -61412,6 +61412,21 @@ var DynamicDrawer_useStyles = makeStyles(function (theme) {
     }
   };
 });
+var DynamicDrawer_getCounter = function getCounter(items, tagAccessor) {
+  var selectedItemsIds = es_reduce(function (acc, item) {
+    if (es_prop('isSelected', item)) {
+      return es_append(item.id, acc);
+    }
+    return acc;
+  }, [], items);
+  var itemsIds = es_pluck('id', items);
+  var count = pipe(es_uniq, es_length)(selectedItemsIds);
+  var total = pipe(es_uniq, es_length)(itemsIds);
+  if (es_is(Function, tagAccessor)) {
+    return tagAccessor(count, total);
+  }
+  return count + '/' + total;
+};
 
 var DynamicDrawer_TabPanel = function TabPanel(props) {
   var children = props.children,
@@ -61424,18 +61439,19 @@ var DynamicDrawer_TabPanel = function TabPanel(props) {
       setOpen = props.setOpen,
       labelRenderer = props.labelRenderer,
       _props$styles = props.styles,
-      styles = _props$styles === undefined ? {} : _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',
-    {
+    DynamicDrawer_extends({
       role: 'tabpanel',
       hidden: !open,
       id: 'vertical-tabpanel-' + item.index,
       'aria-labelledby': 'vertical-tab-' + item.index,
       className: isNarrow ? classes.tabPanelNarrow : classes.tabPanel,
       style: styles
-    },
+    }, other),
     open && react_default.a.createElement(
       material_Box_Box,
       { sx: { p: 3 } },
@@ -61515,13 +61531,21 @@ DynamicDrawer_TabPanel.propTypes = {
   styles: prop_types_default.a.object
 };
 
-var DynamicDrawer_PaperComponent = function PaperComponent(props) {
+var DynamicDrawer_PaperComponent = react_default.a.forwardRef(function (_ref, ref) {
   var _cx;
 
+  var label = _ref.label,
+      selected = _ref.selected,
+      item = _ref.item,
+      tagAccessor = _ref.tagAccessor,
+      tagValueLabel = _ref.tagValueLabel,
+      rest = DynamicDrawer_objectWithoutProperties(_ref, ['label', 'selected', 'item', 'tagAccessor', 'tagValueLabel']);
+
+  var Chip = es_isNil(item.tag) ? src_Tag_Tag : item.tag;
   var classes = DynamicDrawer_useStyles();
   return react_default.a.createElement(
     material_Paper_Paper,
-    props,
+    DynamicDrawer_extends({}, rest, { ref: ref }),
     react_default.a.createElement(
       material_Box_Box,
       { sx: { display: 'flex', justifyContent: 'space-between', width: '100%' } },
@@ -61530,19 +61554,25 @@ var DynamicDrawer_PaperComponent = function PaperComponent(props) {
         {
           noWrap: true,
           variant: 'body2',
-          title: props.label,
-          className: classnames_default()(classes.label, (_cx = {}, _cx[classes.labelSelected] = props.selected, _cx))
+          title: label,
+          className: classnames_default()(classes.label, (_cx = {}, _cx[classes.labelSelected] = selected, _cx))
         },
-        props.label
+        label
       ),
-      props.tag
+      es_isNil(item.tag) ? react_default.a.createElement(
+        Chip,
+        { items: item.values, tagValueLabel: tagValueLabel },
+        DynamicDrawer_getCounter(item.values, tagAccessor)
+      ) : item.tag
     )
   );
-};
+});
 DynamicDrawer_PaperComponent.propTypes = {
   label: prop_types_default.a.string,
-  tag: prop_types_default.a.elementType,
-  selected: prop_types_default.a.bool
+  selected: prop_types_default.a.bool,
+  item: prop_types_default.a.object,
+  tagAccessor: prop_types_default.a.func,
+  tagValueLabel: prop_types_default.a.func
 };
 
 var DynamicDrawer_DynamicDrawer = function DynamicDrawer(props) {
@@ -61564,22 +61594,6 @@ var DynamicDrawer_DynamicDrawer = function DynamicDrawer(props) {
       allSelection = _useState4[0],
       setAllSelection = _useState4[1];
 
-  var getCounter = function getCounter(items, tagAccessor) {
-    var selectedItemsIds = es_reduce(function (acc, item) {
-      if (es_prop('isSelected', item)) {
-        return es_append(item.id, acc);
-      }
-      return acc;
-    }, [], items);
-    var itemsIds = es_pluck('id', items);
-    var count = pipe(es_uniq, es_length)(selectedItemsIds);
-    var total = pipe(es_uniq, es_length)(itemsIds);
-    if (es_is(Function, tagAccessor)) {
-      return tagAccessor(count, total);
-    }
-    return count + '/' + total;
-  };
-
   var list = props.list,
       labelRenderer = props.labelRenderer,
       onClick = props.onClick,
@@ -61691,24 +61705,23 @@ var DynamicDrawer_DynamicDrawer = function DynamicDrawer(props) {
       es_map(function (item) {
         var _cx2;
 
-        var Chip = es_isNil(item.tag) ? src_Tag_Tag : item.tag;
-        var tagValueLabel = es_isNil(item.tag) && getCounter(item.values, tagAriaLabel);
+        var tagValueLabel = es_isNil(item.tag) && DynamicDrawer_getCounter(item.values, tagAriaLabel);
 
         return react_default.a.createElement(material_Tab_Tab, {
           key: item.id,
           id: filter.id,
           'data-testid': item.id + '-tab',
-          component: function component(props) {
-            return DynamicDrawer_PaperComponent(DynamicDrawer_extends({
+          component: react_default.a.forwardRef(function TabPaper(tabProps, ref) {
+            return react_default.a.createElement(DynamicDrawer_PaperComponent, DynamicDrawer_extends({
+              ref: ref
+            }, tabProps, {
               label: labelRenderer(item),
               selected: selectedId === item.id,
-              tag: es_isNil(item.tag) ? react_default.a.createElement(
-                Chip,
-                { items: item.values, tagValueLabel: tagValueLabel },
-                getCounter(item.values, tagAccessor)
-              ) : item.tag
-            }, props));
-          },
+              item: item,
+              tagAccessor: tagAccessor,
+              tagValueLabel: tagValueLabel
+            }));
+          }),
           label: labelRenderer(item),
           'aria-label': labelRenderer(item),
           value: item,
@@ -61793,7 +61806,7 @@ DynamicDrawer_DynamicDrawer.propTypes = {
   tagAriaLabel: prop_types_default.a.func,
   handleChangePanel: prop_types_default.a.func,
   onClosePanel: prop_types_default.a.func,
-  displayChildren: prop_types_default.a.func,
+  displayChildren: prop_types_default.a.bool,
   labels: prop_types_default.a.shape({
     placeholder: prop_types_default.a.oneOfType([prop_types_default.a.string, prop_types_default.a.func]),
     disableItemLabel: prop_types_default.a.string,