@sis-cc/dotstatsuite-visions 12.20.2 → 12.21.0

package/es/DynamicDrawer/AdvancedSelection.js

@@ -75,12 +75,7 @@ var useStyles = makeStyles(function (theme) {
       marginRight: 10
     },
     selectionMenu: {
-      width: '50%',
-      maxHeight: '100%',
-      position: 'absolute',
-      top: 110,
-      right: 48,
-      zIndex: 1
+      padding: 24
     },
     narrowSelectionMenu: {
       width: '100%'
@@ -91,6 +86,12 @@ var useStyles = makeStyles(function (theme) {
       flexWrap: 'wrap',
       alignItems: 'flex-start'
     },
+    selectButtonNarrow: {
+      width: 160,
+      height: 50,
+      border: '1px solid ' + theme.palette.primary.light,
+      margin: 5
+    },
     selectButton: {
       color: theme.palette.primary.main,
       '&:hover': {
@@ -115,7 +116,7 @@ var useStyles = makeStyles(function (theme) {
       },
       '& img': {
         width: 21,
-        height: 24
+        height: 30
       }
     },
     hint: {
@@ -158,7 +159,7 @@ var useStyles = makeStyles(function (theme) {
 });
 
 var AdvancedSelection = function AdvancedSelection(props) {
-  var _cx, _cx2, _cx3, _cx4;
+  var _cx, _cx2;
 
   var id = props.id,
       items = props.items,
@@ -195,8 +196,9 @@ var AdvancedSelection = function AdvancedSelection(props) {
   };
 
   var selectionItems = R.map(function (item) {
+    var selectedIds = R.propOr([], id, allSelection);
     return _extends({}, item, {
-      isSelected: R.has(item.id, selection) ? !item.isSelected : !!item.isSelected
+      isSelected: R.includes(item.id, selectedIds) ? !item.isSelected : !!item.isSelected
     });
   }, items);
   var indexedFilteredItems = R.indexBy(getHierarchicalId, selectionItems);
@@ -306,38 +308,6 @@ var AdvancedSelection = function AdvancedSelection(props) {
         React.createElement(
           'div',
           { className: cx(classes.selectModeContainer, (_cx2 = {}, _cx2[classes.narrowHeader] = isNarrow, _cx2)) },
-          React.createElement(
-            'div',
-            { className: classes.hint },
-            React.createElement(
-              Tooltip,
-              {
-                role: 'tooltip',
-                variant: 'light',
-                title: React.createElement(
-                  Typography,
-                  { variant: 'body2' },
-                  R.prop('hint', labels)
-                ),
-                'aria-label': R.prop('hint', labels),
-                tabIndex: 0
-              },
-              React.createElement(
-                IconButton,
-                null,
-                React.createElement(HintIcon, null)
-              )
-            ),
-            React.createElement(
-              Typography,
-              {
-                className: classes.selectionTitle,
-                'aria-label': R.prop('selectionMode', labels),
-                tabIndex: 0
-              },
-              R.prop('selectionMode', labels)
-            )
-          ),
           React.createElement(ButtonCarousel, {
             selectionModes: selectionOptions,
             selectionMode: selectionMode,
@@ -416,7 +386,7 @@ var AdvancedSelection = function AdvancedSelection(props) {
       { item: true, container: true, xs: 4 },
       React.createElement(
         'div',
-        { className: cx(classes.selectModeContainer, (_cx3 = {}, _cx3[classes.narrowHeader] = isNarrow, _cx3)) },
+        { className: cx(classes.selectModeContainer) },
         React.createElement(
           'div',
           { className: classes.hint },
@@ -451,7 +421,7 @@ var AdvancedSelection = function AdvancedSelection(props) {
         ),
         React.createElement(
           'div',
-          { className: cx(classes.selectModeContainer, (_cx4 = {}, _cx4[classes.narrowHeader] = isNarrow, _cx4)) },
+          { className: cx(classes.selectModeContainer, classes.selectionMenu) },
           mapIndexed(function (_ref) {
             var value = _ref.value,
                 label = _ref.label,

package/es/DynamicDrawer/DynamicDrawer.js

@@ -56,7 +56,8 @@ var TabPanel = function TabPanel(props) {
       onClose = props.onClose,
       isNarrow = props.isNarrow,
       setOpen = props.setOpen,
-      other = _objectWithoutProperties(props, ['children', 'open', 'item', 'classes', 'labels', 'onClose', 'isNarrow', 'setOpen']);
+      labelRenderer = props.labelRenderer,
+      other = _objectWithoutProperties(props, ['children', 'open', 'item', 'classes', 'labels', 'onClose', 'isNarrow', 'setOpen', 'labelRenderer']);
 
   return React.createElement(
     'div',
@@ -70,35 +71,64 @@ var TabPanel = function TabPanel(props) {
     open && React.createElement(
       Box,
       { sx: { p: 3 } },
-      isNarrow && React.createElement(
-        IconButton,
-        {
-          onClick: function onClick() {
-            return setOpen(false);
-          },
-          'data-testid': 'back_button',
-          'aria-label': R.prop('cancel', labels),
-          sx: {
-            padding: 0,
-            float: 'left'
-          },
-          size: 'large'
-        },
-        React.createElement(BackIcon, null)
-      ),
       React.createElement(
-        IconButton,
+        Box,
         {
-          onClick: onClose,
-          'aria-label': R.prop('cancel', labels),
-          sx: {
-            color: 'grey !important',
-            padding: 0,
-            float: 'right'
-          },
-          size: 'large'
+          display: 'flex',
+          justifyContent: isNarrow ? 'space-between' : 'flex-end',
+          alignItems: 'center'
         },
-        React.createElement(CloseIcon, null)
+        isNarrow && React.createElement(
+          Box,
+          { display: 'flex', justifyContent: 'flex-start', alignItems: 'center' },
+          React.createElement(
+            IconButton,
+            {
+              onClick: function onClick() {
+                return setOpen(false);
+              },
+              'data-testid': 'back_button',
+              'aria-label': R.prop('cancel', labels),
+              sx: {
+                padding: 0,
+                float: 'left',
+                justifyContent: 'flex-start',
+                minWidth: '24px'
+              },
+              size: 'large',
+              edge: 'start'
+            },
+            React.createElement(BackIcon, null)
+          ),
+          React.createElement(
+            Typography,
+            {
+              variant: 'h6',
+              'aria-label': R.prop('title', labels)(labelRenderer(item)),
+              tabIndex: 0,
+              sx: {
+                margin: 0,
+                padding: 0
+              }
+            },
+            R.prop('title', labels)(labelRenderer(item))
+          )
+        ),
+        React.createElement(
+          IconButton,
+          {
+            onClick: onClose,
+            'aria-label': R.prop('cancel', labels),
+            sx: {
+              color: 'grey !important',
+              minWidth: '24px',
+              padding: 0,
+              float: 'right'
+            },
+            size: 'large'
+          },
+          React.createElement(CloseIcon, null)
+        )
       ),
       children
     )
@@ -112,7 +142,8 @@ TabPanel.propTypes = process.env.NODE_ENV !== "production" ? {
   onClose: PropTypes.func,
   children: PropTypes.node,
   isNarrow: PropTypes.bool,
-  setOpen: PropTypes.func
+  setOpen: PropTypes.func,
+  labelRenderer: PropTypes.func
 } : {};
 
 var PaperComponent = function PaperComponent(props) {
@@ -202,9 +233,8 @@ var DynamicDrawer = function DynamicDrawer(props) {
       rest = _objectWithoutProperties(props, ['list', 'labelRenderer', 'onClick', 'handleChangePanel', 'isNarrow', 'labels', 'disableAccessor', 'expandAll', 'collapseAll', 'expandedIds', 'allItems', 'periodPanel', 'classes', 'testId', 'tagAccessor', 'tagAriaLabel', 'children']);
 
   var handleChange = function handleChange(e, item) {
-    console.log({ item: item, selection: selection, allSelection: allSelection });
     setSelection(_extends({}, allSelection[item.id]));
-    handleChangePanel(item.id, allSelection);
+    handleChangePanel(item.id, selection, allSelection);
     setFilter(item);
     setOpen(true);
   };
@@ -219,12 +249,26 @@ var DynamicDrawer = function DynamicDrawer(props) {
     setAllSelection({});
     setSelection({});
   };
+
   var isHidden = open && isNarrow;
   var isNotHiddenButton = !R.isEmpty(allSelection) && isNarrow;
 
   return React.createElement(
     'div',
     { style: { display: 'flex', flexDirection: 'row' } },
+    open && !isNarrow && React.createElement(Box, {
+      onClick: function onClick() {
+        return handleClose();
+      },
+      sx: {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height: '100vh',
+        zIndex: 990
+      }
+    }),
     React.createElement(
       Tabs,
       {
@@ -239,7 +283,8 @@ var DynamicDrawer = function DynamicDrawer(props) {
           width: '100%',
           height: '100%',
           borderRight: 1,
-          borderColor: 'divider'
+          borderColor: 'divider',
+          zIndex: 1000
         }
       },
       R.map(function (item) {
@@ -308,7 +353,8 @@ var DynamicDrawer = function DynamicDrawer(props) {
         classes: classes,
         onClose: handleClose,
         isNarrow: isNarrow,
-        setOpen: setOpen
+        setOpen: setOpen,
+        labelRenderer: labelRenderer
       },
       R.equals(filter.id, periodPanel) ? children : React.createElement(AdvancedSelection, _extends({
         id: filter.id,

package/es/DynamicDrawer/SelectionModesMobile.js

@@ -1,6 +1,7 @@
 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 '..';
 
@@ -40,7 +41,7 @@ var ButtonCarousel = function ButtonCarousel(_ref) {
         React.createElement(
           Button,
           {
-            className: classes.selectButton,
+            className: cx(classes.selectButton, classes.selectButtonNarrow),
             selected: value === selectionMode,
             onClick: function onClick() {
               setSelectionMode(value);
@@ -51,8 +52,8 @@ var ButtonCarousel = function ButtonCarousel(_ref) {
             sx: {
               flex: '0 0 auto', // Prevents buttons from shrinking
               scrollSnapAlign: 'center',
-              minWidth: 120, // Minimum width for buttons
-              whiteSpace: 'nowrap'
+              minWidth: 40, // Minimum width for buttons
+              whiteSpace: 'wrap'
             }
           },
           React.createElement(

package/es/PeriodPicker/PeriodPicker.js

@@ -47,7 +47,6 @@ var Period = function Period(_ref) {
   var destructuringDates = R.map(getDestructuringDate)(period);
 
   var onClickFrequency = function onClickFrequency(e, value) {
-    console.log(value);
     if (R.is(Function, changeFrequency)) return changeFrequency(value);
   };
   var _getIsDisabled = function _getIsDisabled(getter) {

package/lib/DynamicDrawer/AdvancedSelection.js

@@ -132,12 +132,7 @@ var useStyles = (0, _makeStyles2.default)(function (theme) {
       marginRight: 10
     },
     selectionMenu: {
-      width: '50%',
-      maxHeight: '100%',
-      position: 'absolute',
-      top: 110,
-      right: 48,
-      zIndex: 1
+      padding: 24
     },
     narrowSelectionMenu: {
       width: '100%'
@@ -148,6 +143,12 @@ var useStyles = (0, _makeStyles2.default)(function (theme) {
       flexWrap: 'wrap',
       alignItems: 'flex-start'
     },
+    selectButtonNarrow: {
+      width: 160,
+      height: 50,
+      border: '1px solid ' + theme.palette.primary.light,
+      margin: 5
+    },
     selectButton: {
       color: theme.palette.primary.main,
       '&:hover': {
@@ -172,7 +173,7 @@ var useStyles = (0, _makeStyles2.default)(function (theme) {
       },
       '& img': {
         width: 21,
-        height: 24
+        height: 30
       }
     },
     hint: {
@@ -215,7 +216,7 @@ var useStyles = (0, _makeStyles2.default)(function (theme) {
 });
 
 var AdvancedSelection = function AdvancedSelection(props) {
-  var _cx, _cx2, _cx3, _cx4;
+  var _cx, _cx2;
 
   var id = props.id,
       items = props.items,
@@ -252,8 +253,9 @@ var AdvancedSelection = function AdvancedSelection(props) {
   };
 
   var selectionItems = R.map(function (item) {
+    var selectedIds = R.propOr([], id, allSelection);
     return _extends({}, item, {
-      isSelected: R.has(item.id, selection) ? !item.isSelected : !!item.isSelected
+      isSelected: R.includes(item.id, selectedIds) ? !item.isSelected : !!item.isSelected
     });
   }, items);
   var indexedFilteredItems = R.indexBy(_utils.getHierarchicalId, selectionItems);
@@ -363,38 +365,6 @@ var AdvancedSelection = function AdvancedSelection(props) {
         _react2.default.createElement(
           'div',
           { className: (0, _classnames2.default)(classes.selectModeContainer, (_cx2 = {}, _cx2[classes.narrowHeader] = isNarrow, _cx2)) },
-          _react2.default.createElement(
-            'div',
-            { className: classes.hint },
-            _react2.default.createElement(
-              _.Tooltip,
-              {
-                role: 'tooltip',
-                variant: 'light',
-                title: _react2.default.createElement(
-                  _Typography2.default,
-                  { variant: 'body2' },
-                  R.prop('hint', labels)
-                ),
-                'aria-label': R.prop('hint', labels),
-                tabIndex: 0
-              },
-              _react2.default.createElement(
-                _Button2.default,
-                null,
-                _react2.default.createElement(_EmojiObjects2.default, null)
-              )
-            ),
-            _react2.default.createElement(
-              _Typography2.default,
-              {
-                className: classes.selectionTitle,
-                'aria-label': R.prop('selectionMode', labels),
-                tabIndex: 0
-              },
-              R.prop('selectionMode', labels)
-            )
-          ),
           _react2.default.createElement(_SelectionModesMobile2.default, {
             selectionModes: selectionOptions,
             selectionMode: selectionMode,
@@ -473,7 +443,7 @@ var AdvancedSelection = function AdvancedSelection(props) {
       { item: true, container: true, xs: 4 },
       _react2.default.createElement(
         'div',
-        { className: (0, _classnames2.default)(classes.selectModeContainer, (_cx3 = {}, _cx3[classes.narrowHeader] = isNarrow, _cx3)) },
+        { className: (0, _classnames2.default)(classes.selectModeContainer) },
         _react2.default.createElement(
           'div',
           { className: classes.hint },
@@ -508,7 +478,7 @@ var AdvancedSelection = function AdvancedSelection(props) {
         ),
         _react2.default.createElement(
           'div',
-          { className: (0, _classnames2.default)(classes.selectModeContainer, (_cx4 = {}, _cx4[classes.narrowHeader] = isNarrow, _cx4)) },
+          { className: (0, _classnames2.default)(classes.selectModeContainer, classes.selectionMenu) },
           mapIndexed(function (_ref) {
             var value = _ref.value,
                 label = _ref.label,

package/lib/DynamicDrawer/DynamicDrawer.js

@@ -95,7 +95,8 @@ var TabPanel = function TabPanel(props) {
       onClose = props.onClose,
       isNarrow = props.isNarrow,
       setOpen = props.setOpen,
-      other = _objectWithoutProperties(props, ['children', 'open', 'item', 'classes', 'labels', 'onClose', 'isNarrow', 'setOpen']);
+      labelRenderer = props.labelRenderer,
+      other = _objectWithoutProperties(props, ['children', 'open', 'item', 'classes', 'labels', 'onClose', 'isNarrow', 'setOpen', 'labelRenderer']);
 
   return _react2.default.createElement(
     'div',
@@ -109,35 +110,64 @@ var TabPanel = function TabPanel(props) {
     open && _react2.default.createElement(
       _Box2.default,
       { sx: { p: 3 } },
-      isNarrow && _react2.default.createElement(
-        _Button2.default,
-        {
-          onClick: function onClick() {
-            return setOpen(false);
-          },
-          'data-testid': 'back_button',
-          'aria-label': R.prop('cancel', labels),
-          sx: {
-            padding: 0,
-            float: 'left'
-          },
-          size: 'large'
-        },
-        _react2.default.createElement(_ArrowBack2.default, null)
-      ),
       _react2.default.createElement(
-        _Button2.default,
+        _Box2.default,
         {
-          onClick: onClose,
-          'aria-label': R.prop('cancel', labels),
-          sx: {
-            color: 'grey !important',
-            padding: 0,
-            float: 'right'
-          },
-          size: 'large'
+          display: 'flex',
+          justifyContent: isNarrow ? 'space-between' : 'flex-end',
+          alignItems: 'center'
         },
-        _react2.default.createElement(_Close2.default, null)
+        isNarrow && _react2.default.createElement(
+          _Box2.default,
+          { display: 'flex', justifyContent: 'flex-start', alignItems: 'center' },
+          _react2.default.createElement(
+            _Button2.default,
+            {
+              onClick: function onClick() {
+                return setOpen(false);
+              },
+              'data-testid': 'back_button',
+              'aria-label': R.prop('cancel', labels),
+              sx: {
+                padding: 0,
+                float: 'left',
+                justifyContent: 'flex-start',
+                minWidth: '24px'
+              },
+              size: 'large',
+              edge: 'start'
+            },
+            _react2.default.createElement(_ArrowBack2.default, null)
+          ),
+          _react2.default.createElement(
+            _material.Typography,
+            {
+              variant: 'h6',
+              'aria-label': R.prop('title', labels)(labelRenderer(item)),
+              tabIndex: 0,
+              sx: {
+                margin: 0,
+                padding: 0
+              }
+            },
+            R.prop('title', labels)(labelRenderer(item))
+          )
+        ),
+        _react2.default.createElement(
+          _Button2.default,
+          {
+            onClick: onClose,
+            'aria-label': R.prop('cancel', labels),
+            sx: {
+              color: 'grey !important',
+              minWidth: '24px',
+              padding: 0,
+              float: 'right'
+            },
+            size: 'large'
+          },
+          _react2.default.createElement(_Close2.default, null)
+        )
       ),
       children
     )
@@ -151,7 +181,8 @@ TabPanel.propTypes = process.env.NODE_ENV !== "production" ? {
   onClose: _propTypes2.default.func,
   children: _propTypes2.default.node,
   isNarrow: _propTypes2.default.bool,
-  setOpen: _propTypes2.default.func
+  setOpen: _propTypes2.default.func,
+  labelRenderer: _propTypes2.default.func
 } : {};
 
 var PaperComponent = function PaperComponent(props) {
@@ -241,9 +272,8 @@ var DynamicDrawer = function DynamicDrawer(props) {
       rest = _objectWithoutProperties(props, ['list', 'labelRenderer', 'onClick', 'handleChangePanel', 'isNarrow', 'labels', 'disableAccessor', 'expandAll', 'collapseAll', 'expandedIds', 'allItems', 'periodPanel', 'classes', 'testId', 'tagAccessor', 'tagAriaLabel', 'children']);
 
   var handleChange = function handleChange(e, item) {
-    console.log({ item: item, selection: selection, allSelection: allSelection });
     setSelection(_extends({}, allSelection[item.id]));
-    handleChangePanel(item.id, allSelection);
+    handleChangePanel(item.id, selection, allSelection);
     setFilter(item);
     setOpen(true);
   };
@@ -258,12 +288,26 @@ var DynamicDrawer = function DynamicDrawer(props) {
     setAllSelection({});
     setSelection({});
   };
+
   var isHidden = open && isNarrow;
   var isNotHiddenButton = !R.isEmpty(allSelection) && isNarrow;
 
   return _react2.default.createElement(
     'div',
     { style: { display: 'flex', flexDirection: 'row' } },
+    open && !isNarrow && _react2.default.createElement(_Box2.default, {
+      onClick: function onClick() {
+        return handleClose();
+      },
+      sx: {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height: '100vh',
+        zIndex: 990
+      }
+    }),
     _react2.default.createElement(
       _material.Tabs,
       {
@@ -278,7 +322,8 @@ var DynamicDrawer = function DynamicDrawer(props) {
           width: '100%',
           height: '100%',
           borderRight: 1,
-          borderColor: 'divider'
+          borderColor: 'divider',
+          zIndex: 1000
         }
       },
       R.map(function (item) {
@@ -347,7 +392,8 @@ var DynamicDrawer = function DynamicDrawer(props) {
         classes: classes,
         onClose: handleClose,
         isNarrow: isNarrow,
-        setOpen: setOpen
+        setOpen: setOpen,
+        labelRenderer: labelRenderer
       },
       R.equals(filter.id, periodPanel) ? children : _react2.default.createElement(_AdvancedSelection2.default, _extends({
         id: filter.id,

package/lib/DynamicDrawer/SelectionModesMobile.js

@@ -14,6 +14,10 @@ var _ramda = require('ramda');
 
 var R = _interopRequireWildcard(_ramda);
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _material = require('@mui/material');
 
 var _ = require('..');
@@ -58,7 +62,7 @@ var ButtonCarousel = function ButtonCarousel(_ref) {
         _react2.default.createElement(
           _material.Button,
           {
-            className: classes.selectButton,
+            className: (0, _classnames2.default)(classes.selectButton, classes.selectButtonNarrow),
             selected: value === selectionMode,
             onClick: function onClick() {
               setSelectionMode(value);
@@ -69,8 +73,8 @@ var ButtonCarousel = function ButtonCarousel(_ref) {
             sx: {
               flex: '0 0 auto', // Prevents buttons from shrinking
               scrollSnapAlign: 'center',
-              minWidth: 120, // Minimum width for buttons
-              whiteSpace: 'nowrap'
+              minWidth: 40, // Minimum width for buttons
+              whiteSpace: 'wrap'
             }
           },
           _react2.default.createElement(

package/lib/PeriodPicker/PeriodPicker.js

@@ -73,7 +73,6 @@ var Period = function Period(_ref) {
   var destructuringDates = R.map(_lib.getDestructuringDate)(period);
 
   var onClickFrequency = function onClickFrequency(e, value) {
-    console.log(value);
     if (R.is(Function, changeFrequency)) return changeFrequency(value);
   };
   var _getIsDisabled = function _getIsDisabled(getter) {

package/package.json

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