@sis-cc/dotstatsuite-visions 12.19.0 → 12.20.0

package/es/DynamicDrawer/AdvancedSelection.js

@@ -21,6 +21,7 @@ import childrenImg from '../AdvancedFilterDialog/images/children-selection.png';
 import branchImg from '../AdvancedFilterDialog/images/branch-selection.png';
 import levelImg from '../AdvancedFilterDialog/images/level-selection.png';
 import { Divider } from '@mui/material';
+import ButtonCarousel from './SelectionModesMobile';
 
 var useStyles = makeStyles(function (theme) {
   return {
@@ -145,7 +146,8 @@ var useStyles = makeStyles(function (theme) {
       justifyContent: 'space-between'
     },
     narrowHeader: {
-      alignItems: 'flex-start'
+      alignItems: 'flex-start',
+      width: '100%'
     },
     topElements: {
       display: 'flex',
@@ -156,7 +158,7 @@ var useStyles = makeStyles(function (theme) {
 });
 
 var AdvancedSelection = function AdvancedSelection(props) {
-  var _cx, _cx2, _cx3;
+  var _cx, _cx2, _cx3, _cx4;
 
   var id = props.id,
       items = props.items,
@@ -298,6 +300,53 @@ var AdvancedSelection = function AdvancedSelection(props) {
         xs: 12,
         className: cx(classes.topElements, (_cx = {}, _cx[classes.narrowTop] = isNarrow, _cx))
       },
+      isNarrow && React.createElement(
+        Grid,
+        { item: true, container: true, xs: 12 },
+        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,
+            setSelectionMode: setSelectionMode,
+            classes: classes,
+            isNarrow: isNarrow
+          })
+        )
+      ),
       React.createElement(
         'div',
         { className: classes.spotlight },
@@ -313,10 +362,10 @@ var AdvancedSelection = function AdvancedSelection(props) {
     ),
     React.createElement(
       Grid,
-      { item: true, xs: 8 },
+      { item: true, xs: isNarrow ? 12 : 8 },
       React.createElement(
         'div',
-        { style: { display: 'flex', flexDirection: isNarrow ? 'column' : 'row' } },
+        { style: { display: 'flex', flexDirection: 'row' } },
         React.createElement(
           'div',
           null,
@@ -356,18 +405,18 @@ var AdvancedSelection = function AdvancedSelection(props) {
         changeSelection: function changeSelection(selection, ids) {
           return onChangeSelection(selection, ids, filter);
         },
-        withExpandControl: true
-        // treeHeight={"100vh"}
-        , scopeGetter: scopeGetter,
+        withExpandControl: true,
+        treeHeight: isNarrow ? 0 : '700px',
+        scopeGetter: scopeGetter,
         expandedIds: expandedIds
       }))
     ),
-    React.createElement(
+    !isNarrow && React.createElement(
       Grid,
       { item: true, container: true, xs: 4 },
       React.createElement(
         'div',
-        { className: cx(classes.selectModeContainer, (_cx2 = {}, _cx2[classes.narrowHeader] = isNarrow, _cx2)) },
+        { className: cx(classes.selectModeContainer, (_cx3 = {}, _cx3[classes.narrowHeader] = isNarrow, _cx3)) },
         React.createElement(
           'div',
           { className: classes.hint },
@@ -402,7 +451,7 @@ var AdvancedSelection = function AdvancedSelection(props) {
         ),
         React.createElement(
           'div',
-          { className: cx(classes.selectModeContainer, (_cx3 = {}, _cx3[classes.narrowHeader] = isNarrow, _cx3)) },
+          { className: cx(classes.selectModeContainer, (_cx4 = {}, _cx4[classes.narrowHeader] = isNarrow, _cx4)) },
           mapIndexed(function (_ref) {
             var value = _ref.value,
                 label = _ref.label,

package/es/DynamicDrawer/DynamicDrawer.js

@@ -5,13 +5,15 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in ob
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
+import cx from 'classnames';
 import Box from '@mui/material/Box';
 import AdvancedSelection from './AdvancedSelection';
 import { Paper, Tab, Tabs, Typography } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import CloseIcon from '@mui/icons-material/Close';
 import IconButton from '@mui/material/Button';
-import { Button } from '..';
+import BackIcon from '@mui/icons-material/ArrowBack';
+import { Button, Tag as InternalTag } from '..';
 
 var useStyles = makeStyles(function (theme) {
   return {
@@ -19,6 +21,20 @@ var useStyles = makeStyles(function (theme) {
       textTransform: 'none',
       color: theme.palette.grey[700]
     }, R.pathOr({}, ['mixins', 'expansionPanel', 'title'], theme)),
+    labelSelected: {
+      color: theme.palette.primary.main
+    },
+    tabSelected: {
+      backgroundColor: theme.palette.action.hover + ' !important',
+      '&:hover': {
+        backgroundColor: theme.palette.action.selected + ' !important'
+      }
+    },
+    tab: {
+      '&:hover': {
+        backgroundColor: '' + theme.palette.action.selected
+      }
+    },
     tabPanel: {
       backgroundColor: theme.palette.background.default,
       position: 'absolute',
@@ -38,7 +54,9 @@ var TabPanel = function TabPanel(props) {
       classes = props.classes,
       labels = props.labels,
       onClose = props.onClose,
-      other = _objectWithoutProperties(props, ['children', 'open', 'item', 'classes', 'labels', 'onClose']);
+      isNarrow = props.isNarrow,
+      setOpen = props.setOpen,
+      other = _objectWithoutProperties(props, ['children', 'open', 'item', 'classes', 'labels', 'onClose', 'isNarrow', 'setOpen']);
 
   return React.createElement(
     'div',
@@ -47,11 +65,27 @@ var TabPanel = function TabPanel(props) {
       hidden: !open,
       id: 'vertical-tabpanel-' + item.index,
       'aria-labelledby': 'vertical-tab-' + item.index,
-      className: classes.tabPanel
+      className: isNarrow ? classes.tabPanelNarrow : classes.tabPanel
     }, 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,
         {
@@ -76,31 +110,44 @@ TabPanel.propTypes = process.env.NODE_ENV !== "production" ? {
   classes: PropTypes.object,
   labels: PropTypes.object,
   onClose: PropTypes.func,
-  children: PropTypes.node
+  children: PropTypes.node,
+  isNarrow: PropTypes.bool,
+  setOpen: PropTypes.func
 } : {};
 
 var PaperComponent = function PaperComponent(props) {
+  var _cx;
+
   var classes = useStyles();
-  // const Chip = R.isNil(props.tag) ? InternalTag : props.tag;
   return React.createElement(
     Paper,
     props,
     React.createElement(
-      Typography,
-      { noWrap: true, variant: 'body2', title: props.label, className: classes.label },
-      props.label
+      Box,
+      { sx: { display: 'flex', justifyContent: 'space-between', width: '100%' } },
+      React.createElement(
+        Typography,
+        {
+          noWrap: true,
+          variant: 'body2',
+          title: props.label,
+          className: cx(classes.label, (_cx = {}, _cx[classes.labelSelected] = props.selected, _cx))
+        },
+        props.label
+      ),
+      props.tag
     )
   );
 };
 PaperComponent.propTypes = process.env.NODE_ENV !== "production" ? {
   label: PropTypes.string,
   tag: PropTypes.elementType,
-  items: PropTypes.array,
-  tagValueLabel: PropTypes.func,
-  tagValue: PropTypes.string
+  selected: PropTypes.bool
 } : {};
 
 var DynamicDrawer = function DynamicDrawer(props) {
+  var classNames = useStyles();
+
   var _useState = useState(false),
       open = _useState[0],
       setOpen = _useState[1];
@@ -117,6 +164,22 @@ 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,
@@ -131,11 +194,12 @@ var DynamicDrawer = function DynamicDrawer(props) {
       allItems = props.allItems,
       periodPanel = props.periodPanel,
       classes = props.classes,
-      tag = props.tag,
       _props$testId = props.testId,
       testId = _props$testId === undefined ? 'tabs' : _props$testId,
+      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', 'tag', 'testId', 'children']);
+      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 });
@@ -150,6 +214,13 @@ var DynamicDrawer = function DynamicDrawer(props) {
     setSelection({});
     setOpen(false);
   };
+  var handleClose = function handleClose() {
+    setOpen(false);
+    setAllSelection({});
+    setSelection({});
+  };
+  var isHidden = open && isNarrow;
+  var isNotHiddenButton = !R.isEmpty(allSelection) && isNarrow;
 
   return React.createElement(
     'div',
@@ -163,25 +234,59 @@ var DynamicDrawer = function DynamicDrawer(props) {
         onChange: handleChange,
         'aria-label': 'filters',
         'data-testid': testId,
-        sx: { width: '100%', height: '100%', borderRight: 1, borderColor: 'divider' }
+        sx: {
+          display: isHidden ? 'none' : 'flex',
+          width: '100%',
+          height: '100%',
+          borderRight: 1,
+          borderColor: 'divider'
+        }
       },
       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({ label: labelRenderer(item), tag: tag }, props));
+            return PaperComponent(_extends({
+              label: labelRenderer(item),
+              selected: filter.id === item.id,
+              tag: R.isNil(item.tag) ? React.createElement(
+                Chip,
+                { items: item.values, tagValueLabel: tagValueLabel },
+                getCounter(item.values, tagAccessor)
+              ) : item.tag
+            }, props));
           },
           label: labelRenderer(item),
           'aria-label': labelRenderer(item),
-          sx: { alignItems: 'start', maxWidth: '100%' },
           value: item,
           'aria-selected': filter.id === item.id,
+          className: cx(classNames.tab, (_cx2 = {}, _cx2[classNames.tabSelected] = filter.id === item.id, _cx2)),
+          sx: {
+            alignItems: 'start',
+            maxWidth: '100%'
+          },
           wrapped: true
         });
       })(list),
-      open && React.createElement(
+      open && !isNarrow && React.createElement(
+        Button,
+        {
+          sx: { float: 'bottom', margin: '10px' },
+          'aria-label': R.prop('apply', labels),
+          id: 'apply_button',
+          variant: 'contained',
+          onClick: handleSubmit
+        },
+        R.prop('apply', labels)
+      ),
+      isNotHiddenButton && React.createElement(
         Button,
         {
           sx: { float: 'bottom', margin: '10px' },
@@ -201,9 +306,9 @@ var DynamicDrawer = function DynamicDrawer(props) {
         open: open,
         labels: labels,
         classes: classes,
-        onClose: function onClose() {
-          return setOpen(false);
-        }
+        onClose: handleClose,
+        isNarrow: isNarrow,
+        setOpen: setOpen
       },
       R.equals(filter.id, periodPanel) ? children : React.createElement(AdvancedSelection, _extends({
         id: filter.id,

package/es/DynamicDrawer/SelectionModesMobile.js

@@ -1,80 +1,73 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
 import * as R from 'ramda';
 import { Box, Button, Paper, Typography } from '@mui/material';
 import { Tooltip } from '..';
 
 var mapIndexed = R.addIndex(R.map);
 var ButtonCarousel = function ButtonCarousel(_ref) {
-  var _cx;
-
   var selectionModes = _ref.selectionModes,
       selectionMode = _ref.selectionMode,
       setSelectionMode = _ref.setSelectionMode,
-      isNarrow = _ref.isNarrow,
       classes = _ref.classes;
 
   return React.createElement(
     Box,
     {
       sx: {
-        display: 'flex',
         overflowX: 'auto',
-        gap: 2,
-        padding: 2,
-        scrollSnapType: 'x mandatory',
-        '&::-webkit-scrollbar': { display: 'none' }, // Hide scrollbar on Webkit
-        scrollbarWidth: 'none' // Hide scrollbar on Firefox
+        overflowY: 'hidden',
+        whiteSpace: 'nowrap',
+        display: 'block', // allow horizontal scrolling
+        width: '100%',
+        maxWidth: '100%',
+        '&::-webkit-scrollbar': { display: 'none' }, // optional: hide scrollbar
+        scrollbarWidth: 'none'
       }
     },
-    React.createElement(
-      'div',
-      { className: cx(classes.selectModeContainer, (_cx = {}, _cx[classes.narrowHeader] = isNarrow, _cx)) },
-      mapIndexed(function (_ref2) {
-        var value = _ref2.value,
-            label = _ref2.label,
-            img = _ref2.img;
-        return React.createElement(
-          Tooltip,
+    mapIndexed(function (_ref2) {
+      var value = _ref2.value,
+          label = _ref2.label,
+          img = _ref2.img;
+      return React.createElement(
+        Tooltip,
+        {
+          key: value,
+          classes: { tooltip: classes.tooltip },
+          title: React.createElement('img', { style: { width: '72px', height: '90px' }, src: img, alt: value }),
+          tabIndex: -1
+        },
+        React.createElement(
+          Button,
           {
-            key: value,
-            classes: { tooltip: classes.tooltip },
-            title: React.createElement('img', { style: { width: '72px', height: '90px' }, src: img, alt: value }),
-            tabIndex: -1
+            className: classes.selectButton,
+            selected: value === selectionMode,
+            onClick: function onClick() {
+              setSelectionMode(value);
+            },
+            'aria-pressed': value === selectionMode,
+            'aria-label': label,
+            tabIndex: 0,
+            sx: {
+              flex: '0 0 auto', // Prevents buttons from shrinking
+              scrollSnapAlign: 'center',
+              minWidth: 120, // Minimum width for buttons
+              whiteSpace: 'nowrap'
+            }
           },
           React.createElement(
-            Button,
-            {
-              className: classes.selectButton,
-              selected: value === selectionMode,
-              onClick: function onClick() {
-                setSelectionMode(value);
-              },
-              'aria-pressed': value === selectionMode,
-              'aria-label': label,
-              tabIndex: 0,
-              sx: {
-                flex: '0 0 auto', // Prevents buttons from shrinking
-                scrollSnapAlign: 'center',
-                minWidth: 120, // Minimum width for buttons
-                whiteSpace: 'nowrap'
-              }
-            },
+            Paper,
+            { elevation: 0, className: classes.selectModeItem, key: value },
             React.createElement(
-              Paper,
-              { elevation: 0, className: classes.selectModeItem, key: value },
-              React.createElement(
-                Typography,
-                null,
-                label
-              ),
-              !R.isNil(img) && R.is(String, img) && React.createElement('img', { src: img, alt: value })
-            )
+              Typography,
+              null,
+              label
+            ),
+            !R.isNil(img) && R.is(String, img) && React.createElement('img', { src: img, alt: value })
           )
-        );
-      }, selectionModes)
-    )
+        )
+      );
+    }, selectionModes)
   );
 };
 
@@ -88,6 +81,5 @@ ButtonCarousel.propTypes = process.env.NODE_ENV !== "production" ? {
   })).isRequired,
   selectionMode: PropTypes.string.isRequired,
   setSelectionMode: PropTypes.func.isRequired,
-  classes: PropTypes.object.isRequired,
-  isNarrow: PropTypes.bool.isRequired
+  classes: PropTypes.object.isRequired
 } : {};

package/lib/DynamicDrawer/AdvancedSelection.js

@@ -70,6 +70,10 @@ var _levelSelection2 = _interopRequireDefault(_levelSelection);
 
 var _material = require('@mui/material');
 
+var _SelectionModesMobile = require('./SelectionModesMobile');
+
+var _SelectionModesMobile2 = _interopRequireDefault(_SelectionModesMobile);
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -199,7 +203,8 @@ var useStyles = (0, _makeStyles2.default)(function (theme) {
       justifyContent: 'space-between'
     },
     narrowHeader: {
-      alignItems: 'flex-start'
+      alignItems: 'flex-start',
+      width: '100%'
     },
     topElements: {
       display: 'flex',
@@ -210,7 +215,7 @@ var useStyles = (0, _makeStyles2.default)(function (theme) {
 });
 
 var AdvancedSelection = function AdvancedSelection(props) {
-  var _cx, _cx2, _cx3;
+  var _cx, _cx2, _cx3, _cx4;
 
   var id = props.id,
       items = props.items,
@@ -352,6 +357,53 @@ var AdvancedSelection = function AdvancedSelection(props) {
         xs: 12,
         className: (0, _classnames2.default)(classes.topElements, (_cx = {}, _cx[classes.narrowTop] = isNarrow, _cx))
       },
+      isNarrow && _react2.default.createElement(
+        _Grid2.default,
+        { item: true, container: true, xs: 12 },
+        _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,
+            setSelectionMode: setSelectionMode,
+            classes: classes,
+            isNarrow: isNarrow
+          })
+        )
+      ),
       _react2.default.createElement(
         'div',
         { className: classes.spotlight },
@@ -367,10 +419,10 @@ var AdvancedSelection = function AdvancedSelection(props) {
     ),
     _react2.default.createElement(
       _Grid2.default,
-      { item: true, xs: 8 },
+      { item: true, xs: isNarrow ? 12 : 8 },
       _react2.default.createElement(
         'div',
-        { style: { display: 'flex', flexDirection: isNarrow ? 'column' : 'row' } },
+        { style: { display: 'flex', flexDirection: 'row' } },
         _react2.default.createElement(
           'div',
           null,
@@ -410,18 +462,18 @@ var AdvancedSelection = function AdvancedSelection(props) {
         changeSelection: function changeSelection(selection, ids) {
           return onChangeSelection(selection, ids, filter);
         },
-        withExpandControl: true
-        // treeHeight={"100vh"}
-        , scopeGetter: scopeGetter,
+        withExpandControl: true,
+        treeHeight: isNarrow ? 0 : '700px',
+        scopeGetter: scopeGetter,
         expandedIds: expandedIds
       }))
     ),
-    _react2.default.createElement(
+    !isNarrow && _react2.default.createElement(
       _Grid2.default,
       { item: true, container: true, xs: 4 },
       _react2.default.createElement(
         'div',
-        { className: (0, _classnames2.default)(classes.selectModeContainer, (_cx2 = {}, _cx2[classes.narrowHeader] = isNarrow, _cx2)) },
+        { className: (0, _classnames2.default)(classes.selectModeContainer, (_cx3 = {}, _cx3[classes.narrowHeader] = isNarrow, _cx3)) },
         _react2.default.createElement(
           'div',
           { className: classes.hint },
@@ -456,7 +508,7 @@ var AdvancedSelection = function AdvancedSelection(props) {
         ),
         _react2.default.createElement(
           'div',
-          { className: (0, _classnames2.default)(classes.selectModeContainer, (_cx3 = {}, _cx3[classes.narrowHeader] = isNarrow, _cx3)) },
+          { className: (0, _classnames2.default)(classes.selectModeContainer, (_cx4 = {}, _cx4[classes.narrowHeader] = isNarrow, _cx4)) },
           mapIndexed(function (_ref) {
             var value = _ref.value,
                 label = _ref.label,