@sis-cc/dotstatsuite-visions 10.21.2 → 10.22.0

package/es/AdvancedFilterDialog/AdvancedFilterDialog.js

@@ -2,11 +2,11 @@ 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, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import cx from 'classnames';
-import { getEvolvedDisableAccessor, getHierarchicalId, getScopeGetters, isItemSelected } from '../VirtualizedTree/utils';
+import { getEvolvedDisableAccessor, getHierarchicalId, getScopeGetters } from '../VirtualizedTree/utils';
 import IconButton from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
 import DialogTitle from '@material-ui/core/DialogTitle';
@@ -47,10 +47,16 @@ var useStyles = makeStyles(function (theme) {
     },
     headerLabel: {
       fontSize: '16px',
-      font: 'PT Sans Narrow',
+      fontFamily: 'PT Sans Narrow',
       fontWeight: '700',
       color: theme.palette.grey[700]
     },
+    selectionTitle: {
+      fontSize: '12px',
+      fontFamily: 'Helvetica Neue',
+      fontWeight: '500',
+      color: theme.palette.grey['A700']
+    },
     closeButton: {
       color: 'grey !important',
       padding: 0
@@ -112,9 +118,10 @@ var useStyles = makeStyles(function (theme) {
       alignItems: 'center',
       '& p': {
         fontSize: '12px',
-        font: 'Helvetica Neue',
-        color: '#0549AB',
-        fontWeight: '500px'
+        fontFamily: 'Helvetica Neue',
+        color: theme.palette.primary.main,
+        fontWeight: '500',
+        lineHeight: 1.43
       },
       '& img': {
         width: 21,
@@ -124,7 +131,9 @@ var useStyles = makeStyles(function (theme) {
     hint: {
       display: 'flex',
       flexDirection: 'row',
-      alignItems: 'center'
+      alignItems: 'center',
+      marginRight: 7,
+      color: theme.palette.primary.main
     },
     divider: {
       backgroundColor: theme.palette.primary.light
@@ -252,32 +261,32 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
     setSelection({});
     setSpotlight({ term: '' });
   };
-
-  var _useMemo = useMemo(function () {
-    var refinedItems = R.map(function (item) {
-      return _extends({}, item, {
-        isSelected: isItemSelected(selectIds)(item),
-        isGreyed: R.is(Function, isDisabled) ? isDisabled(item) : false,
-        isDisabled: R.is(Function, _disableAccessor) ? _disableAccessor(item, selectIds) : false
-      });
-    }, selectionItems);
-    var indexedItemsById = R.indexBy(getHierarchicalId, refinedItems);
-    var groupedItemsByParentId = R.groupBy(R.propOr('#ROOT', 'parentId'), refinedItems);
-    return { indexedItemsById: indexedItemsById, groupedItemsByParentId: groupedItemsByParentId };
-  }, [selectionItems, selectIds]),
-      indexedItemsById = _useMemo.indexedItemsById,
-      groupedItemsByParentId = _useMemo.groupedItemsByParentId;
-
   var rejectonlyDisabledItems = function rejectonlyDisabledItems(item) {
     return R.prop('isDisabled')(item) && !R.has('isForced')(item);
   };
+  var getSelectedItems = function getSelectedItems(item) {
+    return R.prop('isSelected')(item);
+  };
+
   var selectAll = function selectAll() {
-    var ids = R.pluck('id', R.reject(rejectonlyDisabledItems, R.values(indexedItemsById)));
+    var ids = R.pluck('id', R.reject(getSelectedItems, R.reject(rejectonlyDisabledItems, items)));
     var nextSelection = R.reduce(function (acc, id) {
       return R.has(id, acc) ? acc : R.assoc(id, id, acc);
     }, selection, ids);
+    setSelectionMode('selectAll');
+    setSelection(nextSelection);
+  };
+
+  var deselectAll = function deselectAll() {
+    var itemIds = R.pipe(R.filter(getSelectedItems), R.pluck('id'))(items);
+    var ids = R.difference(itemIds, selection);
+    var nextSelection = R.reduce(function (acc, id) {
+      return R.has(id, acc) ? acc : R.assoc(id, id, acc);
+    }, {}, ids);
+    setSelectionMode('deselectAll');
     setSelection(nextSelection);
   };
+
   return React.createElement(
     Dialog,
     {
@@ -285,7 +294,8 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
       PaperComponent: PaperComponent,
       'aria-labelledby': 'draggable-dialog-title',
       onClose: onClose,
-      ref: measureRef
+      ref: measureRef,
+      'aria-modal': true
     },
     React.createElement(
       DialogTitle,
@@ -295,7 +305,7 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
         { className: classes.header },
         React.createElement(
           'div',
-          { className: classes.headerLabel },
+          { className: classes.headerLabel, 'aria-label': title },
           '\xA0',
           title
         ),
@@ -313,13 +323,19 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
                   Typography,
                   { variant: 'body2' },
                   R.prop('hint', labels)
-                )
+                ),
+                'aria-label': R.prop('hint', labels),
+                tabIndex: 0
               },
               React.createElement(HintIcon, null)
             ),
             React.createElement(
               Typography,
-              { variant: 'body2' },
+              {
+                className: classes.selectionTitle,
+                'aria-label': R.prop('selectionMode', labels),
+                tabIndex: 0
+              },
               R.prop('selectionMode', labels)
             )
           ),
@@ -332,7 +348,8 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
               {
                 key: value,
                 classes: { tooltip: classes.tooltip },
-                title: React.createElement('img', { style: { width: '72px', height: '90px' }, src: img, alt: value })
+                title: React.createElement('img', { style: { width: '72px', height: '90px' }, src: img, alt: value }),
+                tabIndex: -1
               },
               React.createElement(
                 Button,
@@ -343,14 +360,15 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
                     setSelectionMode(value);
                   },
                   'aria-pressed': value === selectionMode,
-                  'aria-label': label
+                  'aria-label': label,
+                  tabIndex: 0
                 },
                 React.createElement(
                   Paper,
                   { className: classes.selectModeItem, key: value },
                   React.createElement(
                     Typography,
-                    { variant: 'body2' },
+                    null,
                     label
                   ),
                   !R.isNil(img) && R.is(String, img) && React.createElement('img', { src: img, alt: value })
@@ -360,7 +378,11 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
           }, selectionOptions),
           onClose && React.createElement(
             IconButton,
-            { className: classes.closeButton, onClick: onClose },
+            {
+              className: classes.closeButton,
+              onClick: onClose,
+              'aria-label': R.prop('cancel', labels)
+            },
             React.createElement(CloseIcon, null)
           )
         )
@@ -407,9 +429,7 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
             ),
             React.createElement(
               Button,
-              { style: { marginLeft: 10 }, onClick: function onClick() {
-                  return setSelection({});
-                }, color: 'primary' },
+              { style: { marginLeft: 10 }, onClick: deselectAll, color: 'primary' },
               R.prop('deselectAll', labels)
             )
           ),
@@ -430,9 +450,7 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
             selectIds: selectIds,
             treeHeight: listHeight,
             scopeGetter: scopeGetter,
-            expandedIds: expandedIds,
-            indexedItemsById: indexedItemsById,
-            groupedItemsByParentId: groupedItemsByParentId
+            expandedIds: expandedIds
           }))
         )
       )

package/es/TableHtml5/cell.js

@@ -39,7 +39,7 @@ var useStyles = makeStyles(function (theme) {
     rightAlign: {
       // only for rtl layout !
       // changed by right in rtl mode
-      textAlign: 'left'
+      textAlign: 'right'
     }
   };
 });
@@ -81,8 +81,14 @@ var Cell = function Cell(_ref) {
       },
       className: classes.link
     },
-    R.is(Function, HTMLRenderer) ? React.createElement(HTMLRenderer, { html: value, style: { float: textAlign } }) : value
-  ) : R.is(Function, HTMLRenderer) ? React.createElement(HTMLRenderer, { html: value, style: { float: textAlign } }) : value;
+    R.is(Function, HTMLRenderer) ? React.createElement(HTMLRenderer, {
+      html: value,
+      style: { float: isRtl && R.isNil(textAlign) ? 'left' : textAlign }
+    }) : value
+  ) : R.is(Function, HTMLRenderer) ? React.createElement(HTMLRenderer, {
+    html: value,
+    style: { float: isRtl && R.isNil(textAlign) ? 'left' : textAlign }
+  }) : value;
 
   return React.createElement(
     TableCell,

package/es/VirtualizedTree/VirtualizedTree.js

@@ -44,14 +44,16 @@ export var getHasChildrenOnLevel = function getHasChildrenOnLevel(groupedItems)
 var VirtualizedTree = function VirtualizedTree(props) {
   var accessibility = props.accessibility,
       changeSelection = props.changeSelection,
-      _props$disableAccesso = props.disableAccessor,
-      disableAccessor = _props$disableAccesso === undefined ? R.always(false) : _props$disableAccesso,
-      _props$isGreyed = props.isGreyed,
-      isGreyed = _props$isGreyed === undefined ? R.always(false) : _props$isGreyed,
       HTMLRenderer = props.HTMLRenderer,
       items = props.items,
+      selectIds = props.selectIds,
+      setSelectIds = props.setSelectIds,
       labelRenderer = props.labelRenderer,
       labels = props.labels,
+      _props$disableAccesso = props.disableAccessor,
+      disableAccessor = _props$disableAccesso === undefined ? R.always(false) : _props$disableAccesso,
+      _props$isGreyed = props.isGreyed,
+      isGreyed = _props$isGreyed === undefined ? R.always(false) : _props$isGreyed,
       expandedIds = props.expandedIds,
       expand = props.expand,
       collapse = props.collapse,
@@ -74,17 +76,13 @@ var VirtualizedTree = function VirtualizedTree(props) {
       shiftIndexes = _useState2[0],
       setShiftIndexes = _useState2[1];
 
-  var _useState3 = useState({}),
-      selectIds = _useState3[0],
-      setSelectIds = _useState3[1];
-
-  var _useState4 = useState(false),
-      isMouseDown = _useState4[0],
-      setIsMouseDown = _useState4[1];
+  var _useState3 = useState(false),
+      isMouseDown = _useState3[0],
+      setIsMouseDown = _useState3[1];
 
-  var _useState5 = useState(null),
-      lastItemId = _useState5[0],
-      setLastItemId = _useState5[1];
+  var _useState4 = useState(null),
+      lastItemId = _useState4[0],
+      setLastItemId = _useState4[1];
 
   var _useMemo = useMemo(function () {
     var refinedItems = R.map(function (item) {
@@ -340,6 +338,8 @@ var VirtualizedTree = function VirtualizedTree(props) {
 };
 
 VirtualizedTree.propTypes = process.env.NODE_ENV !== "production" ? {
+  selectIds: PropTypes.object,
+  setSelectIds: PropTypes.func,
   accessibility: PropTypes.bool,
   changeSelection: PropTypes.func,
   disableAccessor: PropTypes.func,

package/lib/AdvancedFilterDialog/AdvancedFilterDialog.js

@@ -117,10 +117,16 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     },
     headerLabel: {
       fontSize: '16px',
-      font: 'PT Sans Narrow',
+      fontFamily: 'PT Sans Narrow',
       fontWeight: '700',
       color: theme.palette.grey[700]
     },
+    selectionTitle: {
+      fontSize: '12px',
+      fontFamily: 'Helvetica Neue',
+      fontWeight: '500',
+      color: theme.palette.grey['A700']
+    },
     closeButton: {
       color: 'grey !important',
       padding: 0
@@ -182,9 +188,10 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       alignItems: 'center',
       '& p': {
         fontSize: '12px',
-        font: 'Helvetica Neue',
-        color: '#0549AB',
-        fontWeight: '500px'
+        fontFamily: 'Helvetica Neue',
+        color: theme.palette.primary.main,
+        fontWeight: '500',
+        lineHeight: 1.43
       },
       '& img': {
         width: 21,
@@ -194,7 +201,9 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     hint: {
       display: 'flex',
       flexDirection: 'row',
-      alignItems: 'center'
+      alignItems: 'center',
+      marginRight: 7,
+      color: theme.palette.primary.main
     },
     divider: {
       backgroundColor: theme.palette.primary.light
@@ -322,32 +331,32 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
     setSelection({});
     setSpotlight({ term: '' });
   };
-
-  var _useMemo = (0, _react.useMemo)(function () {
-    var refinedItems = R.map(function (item) {
-      return _extends({}, item, {
-        isSelected: (0, _utils.isItemSelected)(selectIds)(item),
-        isGreyed: R.is(Function, isDisabled) ? isDisabled(item) : false,
-        isDisabled: R.is(Function, _disableAccessor) ? _disableAccessor(item, selectIds) : false
-      });
-    }, selectionItems);
-    var indexedItemsById = R.indexBy(_utils.getHierarchicalId, refinedItems);
-    var groupedItemsByParentId = R.groupBy(R.propOr('#ROOT', 'parentId'), refinedItems);
-    return { indexedItemsById: indexedItemsById, groupedItemsByParentId: groupedItemsByParentId };
-  }, [selectionItems, selectIds]),
-      indexedItemsById = _useMemo.indexedItemsById,
-      groupedItemsByParentId = _useMemo.groupedItemsByParentId;
-
   var rejectonlyDisabledItems = function rejectonlyDisabledItems(item) {
     return R.prop('isDisabled')(item) && !R.has('isForced')(item);
   };
+  var getSelectedItems = function getSelectedItems(item) {
+    return R.prop('isSelected')(item);
+  };
+
   var selectAll = function selectAll() {
-    var ids = R.pluck('id', R.reject(rejectonlyDisabledItems, R.values(indexedItemsById)));
+    var ids = R.pluck('id', R.reject(getSelectedItems, R.reject(rejectonlyDisabledItems, items)));
     var nextSelection = R.reduce(function (acc, id) {
       return R.has(id, acc) ? acc : R.assoc(id, id, acc);
     }, selection, ids);
+    setSelectionMode('selectAll');
+    setSelection(nextSelection);
+  };
+
+  var deselectAll = function deselectAll() {
+    var itemIds = R.pipe(R.filter(getSelectedItems), R.pluck('id'))(items);
+    var ids = R.difference(itemIds, selection);
+    var nextSelection = R.reduce(function (acc, id) {
+      return R.has(id, acc) ? acc : R.assoc(id, id, acc);
+    }, {}, ids);
+    setSelectionMode('deselectAll');
     setSelection(nextSelection);
   };
+
   return _react2.default.createElement(
     _Dialog2.default,
     {
@@ -355,7 +364,8 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
       PaperComponent: PaperComponent,
       'aria-labelledby': 'draggable-dialog-title',
       onClose: onClose,
-      ref: measureRef
+      ref: measureRef,
+      'aria-modal': true
     },
     _react2.default.createElement(
       _DialogTitle2.default,
@@ -365,7 +375,7 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
         { className: classes.header },
         _react2.default.createElement(
           'div',
-          { className: classes.headerLabel },
+          { className: classes.headerLabel, 'aria-label': title },
           '\xA0',
           title
         ),
@@ -383,13 +393,19 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
                   _Typography2.default,
                   { variant: 'body2' },
                   R.prop('hint', labels)
-                )
+                ),
+                'aria-label': R.prop('hint', labels),
+                tabIndex: 0
               },
               _react2.default.createElement(_EmojiObjects2.default, null)
             ),
             _react2.default.createElement(
               _Typography2.default,
-              { variant: 'body2' },
+              {
+                className: classes.selectionTitle,
+                'aria-label': R.prop('selectionMode', labels),
+                tabIndex: 0
+              },
               R.prop('selectionMode', labels)
             )
           ),
@@ -402,7 +418,8 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
               {
                 key: value,
                 classes: { tooltip: classes.tooltip },
-                title: _react2.default.createElement('img', { style: { width: '72px', height: '90px' }, src: img, alt: value })
+                title: _react2.default.createElement('img', { style: { width: '72px', height: '90px' }, src: img, alt: value }),
+                tabIndex: -1
               },
               _react2.default.createElement(
                 _.Button,
@@ -413,14 +430,15 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
                     setSelectionMode(value);
                   },
                   'aria-pressed': value === selectionMode,
-                  'aria-label': label
+                  'aria-label': label,
+                  tabIndex: 0
                 },
                 _react2.default.createElement(
                   _Paper2.default,
                   { className: classes.selectModeItem, key: value },
                   _react2.default.createElement(
                     _Typography2.default,
-                    { variant: 'body2' },
+                    null,
                     label
                   ),
                   !R.isNil(img) && R.is(String, img) && _react2.default.createElement('img', { src: img, alt: value })
@@ -430,7 +448,11 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
           }, selectionOptions),
           onClose && _react2.default.createElement(
             _Button2.default,
-            { className: classes.closeButton, onClick: onClose },
+            {
+              className: classes.closeButton,
+              onClick: onClose,
+              'aria-label': R.prop('cancel', labels)
+            },
             _react2.default.createElement(_Close2.default, null)
           )
         )
@@ -477,9 +499,7 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
             ),
             _react2.default.createElement(
               _.Button,
-              { style: { marginLeft: 10 }, onClick: function onClick() {
-                  return setSelection({});
-                }, color: 'primary' },
+              { style: { marginLeft: 10 }, onClick: deselectAll, color: 'primary' },
               R.prop('deselectAll', labels)
             )
           ),
@@ -500,9 +520,7 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
             selectIds: selectIds,
             treeHeight: listHeight,
             scopeGetter: scopeGetter,
-            expandedIds: expandedIds,
-            indexedItemsById: indexedItemsById,
-            groupedItemsByParentId: groupedItemsByParentId
+            expandedIds: expandedIds
           }))
         )
       )

package/lib/TableHtml5/cell.js

@@ -69,7 +69,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     rightAlign: {
       // only for rtl layout !
       // changed by right in rtl mode
-      textAlign: 'left'
+      textAlign: 'right'
     }
   };
 });
@@ -111,8 +111,14 @@ var Cell = function Cell(_ref) {
       },
       className: classes.link
     },
-    R.is(Function, HTMLRenderer) ? _react2.default.createElement(HTMLRenderer, { html: value, style: { float: textAlign } }) : value
-  ) : R.is(Function, HTMLRenderer) ? _react2.default.createElement(HTMLRenderer, { html: value, style: { float: textAlign } }) : value;
+    R.is(Function, HTMLRenderer) ? _react2.default.createElement(HTMLRenderer, {
+      html: value,
+      style: { float: isRtl && R.isNil(textAlign) ? 'left' : textAlign }
+    }) : value
+  ) : R.is(Function, HTMLRenderer) ? _react2.default.createElement(HTMLRenderer, {
+    html: value,
+    style: { float: isRtl && R.isNil(textAlign) ? 'left' : textAlign }
+  }) : value;
 
   return _react2.default.createElement(
     _TableCell2.default,

package/lib/VirtualizedTree/VirtualizedTree.js

@@ -80,14 +80,16 @@ var getHasChildrenOnLevel = exports.getHasChildrenOnLevel = function getHasChild
 var VirtualizedTree = function VirtualizedTree(props) {
   var accessibility = props.accessibility,
       changeSelection = props.changeSelection,
-      _props$disableAccesso = props.disableAccessor,
-      disableAccessor = _props$disableAccesso === undefined ? R.always(false) : _props$disableAccesso,
-      _props$isGreyed = props.isGreyed,
-      isGreyed = _props$isGreyed === undefined ? R.always(false) : _props$isGreyed,
       HTMLRenderer = props.HTMLRenderer,
       items = props.items,
+      selectIds = props.selectIds,
+      setSelectIds = props.setSelectIds,
       labelRenderer = props.labelRenderer,
       labels = props.labels,
+      _props$disableAccesso = props.disableAccessor,
+      disableAccessor = _props$disableAccesso === undefined ? R.always(false) : _props$disableAccesso,
+      _props$isGreyed = props.isGreyed,
+      isGreyed = _props$isGreyed === undefined ? R.always(false) : _props$isGreyed,
       expandedIds = props.expandedIds,
       expand = props.expand,
       collapse = props.collapse,
@@ -110,17 +112,13 @@ var VirtualizedTree = function VirtualizedTree(props) {
       shiftIndexes = _useState2[0],
       setShiftIndexes = _useState2[1];
 
-  var _useState3 = (0, _react.useState)({}),
-      selectIds = _useState3[0],
-      setSelectIds = _useState3[1];
-
-  var _useState4 = (0, _react.useState)(false),
-      isMouseDown = _useState4[0],
-      setIsMouseDown = _useState4[1];
+  var _useState3 = (0, _react.useState)(false),
+      isMouseDown = _useState3[0],
+      setIsMouseDown = _useState3[1];
 
-  var _useState5 = (0, _react.useState)(null),
-      lastItemId = _useState5[0],
-      setLastItemId = _useState5[1];
+  var _useState4 = (0, _react.useState)(null),
+      lastItemId = _useState4[0],
+      setLastItemId = _useState4[1];
 
   var _useMemo = (0, _react.useMemo)(function () {
     var refinedItems = R.map(function (item) {
@@ -376,6 +374,8 @@ var VirtualizedTree = function VirtualizedTree(props) {
 };
 
 VirtualizedTree.propTypes = process.env.NODE_ENV !== "production" ? {
+  selectIds: _propTypes2.default.object,
+  setSelectIds: _propTypes2.default.func,
   accessibility: _propTypes2.default.bool,
   changeSelection: _propTypes2.default.func,
   disableAccessor: _propTypes2.default.func,

package/package.json

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