@sis-cc/dotstatsuite-visions 12.31.0 → 12.33.0

package/es/Button/Button.js

@@ -48,7 +48,7 @@ var MyButton = React.forwardRef(function (_ref, ref) {
       className: cx(className, R.prop(alternative + 'Root')(classes), (_cx = {}, _cx[R.prop(alternative + 'Selected')(classes)] = selected, _cx)),
       'aria-pressed': selected,
       ref: ref
-    }, props),
+    }, R.omit(['indicator', 'textColor', 'selectionFollowsFocus'], props)),
     props.children
   );
 });

package/es/CollapseButtons/CollapseButtons.js

@@ -91,7 +91,7 @@ var CollapseButtons = function CollapseButtons(props) {
           React.createElement(ToggleButton, {
             textTransform: textTransform,
             label: label,
-            tabindex: R.isNil(toggleId) || R.prop(id)(toggleId) || R.compose(R.not, R.head, R.values)(toggleId) ? 0 : -1,
+            tabIndex: R.isNil(toggleId) || R.prop(id)(toggleId) || R.compose(R.not, R.head, R.values)(toggleId) ? 0 : -1,
             isOpen: R.prop(id)(toggleId),
             toggle: function toggle() {
               var _setIsOpen2;

package/es/DataHeader/DataHeader.js

@@ -161,7 +161,7 @@ var DataHeader = function DataHeader(_ref2) {
           className: classes.title,
           style: { fontSize: fontSizeTitle },
           'data-testid': 'data-header-title',
-          tabindex: '-1',
+          tabIndex: '-1',
           'aria-label': title.label
         },
         title.label,

package/es/DynamicDrawer/AdvancedSelection.js

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

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,
@@ -153,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%' } },
@@ -168,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) {
@@ -202,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,
@@ -312,7 +325,6 @@ var DynamicDrawer = function DynamicDrawer(props) {
         variant: 'scrollable',
         TabIndicatorProps: { style: { transition: 'none' } },
         scrollButtons: false,
-        disableScrollButtons: true,
         value: false,
         onChange: handleChange,
         'aria-label': 'filters',
@@ -330,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,
@@ -365,7 +376,7 @@ var DynamicDrawer = function DynamicDrawer(props) {
       open && !isNarrow && React.createElement(
         Button,
         {
-          sx: { float: 'bottom', margin: '10px' },
+          style: { float: 'bottom', margin: '10px' },
           'aria-label': R.prop('apply', labels),
           id: 'apply_button',
           variant: 'contained',
@@ -376,7 +387,7 @@ var DynamicDrawer = function DynamicDrawer(props) {
       isNotHiddenButton && React.createElement(
         Button,
         {
-          sx: { float: 'bottom', margin: '10px' },
+          style: { float: 'bottom', margin: '10px' },
           'aria-label': R.prop('apply', labels),
           id: 'apply_button',
           variant: 'contained',
@@ -432,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/es/Spotlight/Spotlight.js

@@ -102,7 +102,7 @@ var Spotlight = function Spotlight(_ref) {
       R.gt(size(R.prop('fields', spotlight)), 1) ? React.createElement(
         Fragment,
         null,
-        React.createElement(Divider, { className: classes.divider }),
+        React.createElement(Divider, { className: classes.divider, 'aria-hidden': 'true' }),
         React.createElement(Field, {
           spotlight: spotlight,
           onChangeField: onChangeField,
@@ -114,7 +114,7 @@ var Spotlight = function Spotlight(_ref) {
       hasCommit ? React.createElement(
         Fragment,
         null,
-        React.createElement(Divider, { className: classes.divider }),
+        React.createElement(Divider, { className: classes.divider, 'aria-hidden': 'true' }),
         React.createElement(
           IconButton,
           {

package/lib/Button/Button.js

@@ -73,7 +73,7 @@ var MyButton = _react2.default.forwardRef(function (_ref, ref) {
       className: (0, _classnames2.default)(className, R.prop(alternative + 'Root')(classes), (_cx = {}, _cx[R.prop(alternative + 'Selected')(classes)] = selected, _cx)),
       'aria-pressed': selected,
       ref: ref
-    }, props),
+    }, R.omit(['indicator', 'textColor', 'selectionFollowsFocus'], props)),
     props.children
   );
 });

package/lib/CollapseButtons/CollapseButtons.js

@@ -130,7 +130,7 @@ var CollapseButtons = function CollapseButtons(props) {
           _react2.default.createElement(_.ToggleButton, {
             textTransform: textTransform,
             label: label,
-            tabindex: R.isNil(toggleId) || R.prop(id)(toggleId) || R.compose(R.not, R.head, R.values)(toggleId) ? 0 : -1,
+            tabIndex: R.isNil(toggleId) || R.prop(id)(toggleId) || R.compose(R.not, R.head, R.values)(toggleId) ? 0 : -1,
             isOpen: R.prop(id)(toggleId),
             toggle: function toggle() {
               var _setIsOpen2;

package/lib/DataHeader/DataHeader.js

@@ -204,7 +204,7 @@ var DataHeader = function DataHeader(_ref2) {
           className: classes.title,
           style: { fontSize: fontSizeTitle },
           'data-testid': 'data-header-title',
-          tabindex: '-1',
+          tabIndex: '-1',
           'aria-label': title.label
         },
         title.label,

package/lib/DynamicDrawer/AdvancedSelection.js

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

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,
@@ -203,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%' } },
@@ -218,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) {
@@ -252,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,
@@ -362,7 +375,6 @@ var DynamicDrawer = function DynamicDrawer(props) {
         variant: 'scrollable',
         TabIndicatorProps: { style: { transition: 'none' } },
         scrollButtons: false,
-        disableScrollButtons: true,
         value: false,
         onChange: handleChange,
         'aria-label': 'filters',
@@ -380,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,
@@ -415,7 +426,7 @@ var DynamicDrawer = function DynamicDrawer(props) {
       open && !isNarrow && _react2.default.createElement(
         _.Button,
         {
-          sx: { float: 'bottom', margin: '10px' },
+          style: { float: 'bottom', margin: '10px' },
           'aria-label': R.prop('apply', labels),
           id: 'apply_button',
           variant: 'contained',
@@ -426,7 +437,7 @@ var DynamicDrawer = function DynamicDrawer(props) {
       isNotHiddenButton && _react2.default.createElement(
         _.Button,
         {
-          sx: { float: 'bottom', margin: '10px' },
+          style: { float: 'bottom', margin: '10px' },
           'aria-label': R.prop('apply', labels),
           id: 'apply_button',
           variant: 'contained',
@@ -482,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/lib/Spotlight/Spotlight.js

@@ -149,7 +149,7 @@ var Spotlight = function Spotlight(_ref) {
       R.gt(size(R.prop('fields', spotlight)), 1) ? _react2.default.createElement(
         _react.Fragment,
         null,
-        _react2.default.createElement(_Divider2.default, { className: classes.divider }),
+        _react2.default.createElement(_Divider2.default, { className: classes.divider, 'aria-hidden': 'true' }),
         _react2.default.createElement(_Fields.Field, {
           spotlight: spotlight,
           onChangeField: onChangeField,
@@ -161,7 +161,7 @@ var Spotlight = function Spotlight(_ref) {
       hasCommit ? _react2.default.createElement(
         _react.Fragment,
         null,
-        _react2.default.createElement(_Divider2.default, { className: classes.divider }),
+        _react2.default.createElement(_Divider2.default, { className: classes.divider, 'aria-hidden': 'true' }),
         _react2.default.createElement(
           _IconButton2.default,
           {

package/package.json

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