@sis-cc/dotstatsuite-visions 12.20.2 → 12.22.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,
@@ -406,7 +376,7 @@ var AdvancedSelection = function AdvancedSelection(props) {
           return onChangeSelection(selection, ids, filter);
         },
         withExpandControl: true,
-        treeHeight: isNarrow ? 0 : '700px',
+        treeHeight: isNarrow ? 0 : '450px',
         scopeGetter: scopeGetter,
         expandedIds: expandedIds
       }))
@@ -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

@@ -2,7 +2,7 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import cx from 'classnames';
@@ -56,7 +56,10 @@ 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,
+      _props$styles = props.styles,
+      styles = _props$styles === undefined ? {} : _props$styles,
+      other = _objectWithoutProperties(props, ['children', 'open', 'item', 'classes', 'labels', 'onClose', 'isNarrow', 'setOpen', 'labelRenderer', 'styles']);
 
   return React.createElement(
     'div',
@@ -65,40 +68,70 @@ var TabPanel = function TabPanel(props) {
       hidden: !open,
       id: 'vertical-tabpanel-' + item.index,
       'aria-labelledby': 'vertical-tab-' + item.index,
-      className: isNarrow ? classes.tabPanelNarrow : classes.tabPanel
+      className: isNarrow ? classes.tabPanelNarrow : classes.tabPanel,
+      style: styles
     }, other),
     open && React.createElement(
       Box,
       { 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 +145,9 @@ 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,
+  styles: PropTypes.object
 } : {};
 
 var PaperComponent = function PaperComponent(props) {
@@ -164,6 +199,10 @@ var DynamicDrawer = function DynamicDrawer(props) {
       allSelection = _useState4[0],
       setAllSelection = _useState4[1];
 
+  var _useState5 = useState(-1),
+      value = _useState5[0],
+      setValue = _useState5[1];
+
   var getCounter = function getCounter(items, tagAccessor) {
     var selectedItemsIds = R.reduce(function (acc, item) {
       if (R.prop('isSelected', item)) {
@@ -199,13 +238,15 @@ var DynamicDrawer = function DynamicDrawer(props) {
       tagAccessor = props.tagAccessor,
       tagAriaLabel = props.tagAriaLabel,
       children = props.children,
-      rest = _objectWithoutProperties(props, ['list', 'labelRenderer', 'onClick', 'handleChangePanel', 'isNarrow', 'labels', 'disableAccessor', 'expandAll', 'collapseAll', 'expandedIds', 'allItems', 'periodPanel', 'classes', 'testId', 'tagAccessor', 'tagAriaLabel', 'children']);
+      _props$styles2 = props.styles,
+      styles = _props$styles2 === undefined ? {} : _props$styles2,
+      rest = _objectWithoutProperties(props, ['list', 'labelRenderer', 'onClick', 'handleChangePanel', 'isNarrow', 'labels', 'disableAccessor', 'expandAll', 'collapseAll', 'expandedIds', 'allItems', 'periodPanel', 'classes', 'testId', 'tagAccessor', 'tagAriaLabel', 'children', 'styles']);
 
   var handleChange = function handleChange(e, item) {
-    console.log({ item: item, selection: selection, allSelection: allSelection });
     setSelection(_extends({}, allSelection[item.id]));
-    handleChangePanel(item.id, allSelection);
+    handleChangePanel(item.id, selection, allSelection);
     setFilter(item);
+    setValue(item.id);
     setOpen(true);
   };
   var handleSubmit = function handleSubmit() {
@@ -213,24 +254,53 @@ var DynamicDrawer = function DynamicDrawer(props) {
     setAllSelection({});
     setSelection({});
     setOpen(false);
+    setFilter({});
   };
   var handleClose = function handleClose() {
     setOpen(false);
     setAllSelection({});
     setSelection({});
+    setFilter({});
   };
+
   var isHidden = open && isNarrow;
   var isNotHiddenButton = !R.isEmpty(allSelection) && isNarrow;
+  useEffect(function () {
+    if (open) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return function () {
+      document.body.style.overflow = '';
+    };
+  }, [open]);
 
   return React.createElement(
     'div',
     { 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,
       {
         orientation: 'vertical',
         variant: 'scrollable',
-        value: false,
+        TabIndicatorProps: { style: { transition: 'none' } },
+        scrollButtons: false,
+        disableScrollButtons: true,
+        value: value,
         onChange: handleChange,
         'aria-label': 'filters',
         'data-testid': testId,
@@ -239,7 +309,9 @@ var DynamicDrawer = function DynamicDrawer(props) {
           width: '100%',
           height: '100%',
           borderRight: 1,
-          borderColor: 'divider'
+          borderColor: 'divider',
+          zIndex: 1000,
+          overflow: 'auto'
         }
       },
       R.map(function (item) {
@@ -272,7 +344,9 @@ var DynamicDrawer = function DynamicDrawer(props) {
             alignItems: 'start',
             maxWidth: '100%'
           },
-          wrapped: true
+          wrapped: true,
+          disableRipple: true,
+          disableFocusRipple: true
         });
       })(list),
       open && !isNarrow && React.createElement(
@@ -308,7 +382,9 @@ var DynamicDrawer = function DynamicDrawer(props) {
         classes: classes,
         onClose: handleClose,
         isNarrow: isNarrow,
-        setOpen: setOpen
+        setOpen: setOpen,
+        labelRenderer: labelRenderer,
+        styles: styles
       },
       R.equals(filter.id, periodPanel) ? children : React.createElement(AdvancedSelection, _extends({
         id: filter.id,
@@ -364,7 +440,8 @@ DynamicDrawer.propTypes = process.env.NODE_ENV !== "production" ? {
   periodPanel: PropTypes.string,
   isNarrow: PropTypes.bool,
   disableAccessor: PropTypes.func,
-  children: PropTypes.node
+  children: PropTypes.node,
+  styles: PropTypes.object
 } : {};
 
 export default DynamicDrawer;

package/es/DynamicDrawer/SelectionModesMobile.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
-import { Box, Button, Paper, Typography } from '@mui/material';
-import { Tooltip } from '..';
+import cx from 'classnames';
+import { Box, Paper, Typography } from '@mui/material';
+import { Tooltip, Button } from '..';
 
 var mapIndexed = R.addIndex(R.map);
 var ButtonCarousel = function ButtonCarousel(_ref) {
@@ -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,
@@ -463,7 +433,7 @@ var AdvancedSelection = function AdvancedSelection(props) {
           return onChangeSelection(selection, ids, filter);
         },
         withExpandControl: true,
-        treeHeight: isNarrow ? 0 : '700px',
+        treeHeight: isNarrow ? 0 : '450px',
         scopeGetter: scopeGetter,
         expandedIds: expandedIds
       }))
@@ -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,