@sis-cc/dotstatsuite-visions 12.20.2 → 12.22.0

package/lib/DynamicDrawer/DynamicDrawer.js

@@ -95,7 +95,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 _react2.default.createElement(
     'div',
@@ -104,40 +107,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 && _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 +184,9 @@ 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,
+  styles: _propTypes2.default.object
 } : {};
 
 var PaperComponent = function PaperComponent(props) {
@@ -203,6 +238,10 @@ var DynamicDrawer = function DynamicDrawer(props) {
       allSelection = _useState4[0],
       setAllSelection = _useState4[1];
 
+  var _useState5 = (0, _react.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)) {
@@ -238,13 +277,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() {
@@ -252,24 +293,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;
+  (0, _react.useEffect)(function () {
+    if (open) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return function () {
+      document.body.style.overflow = '';
+    };
+  }, [open]);
 
   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,
       {
         orientation: 'vertical',
         variant: 'scrollable',
-        value: false,
+        TabIndicatorProps: { style: { transition: 'none' } },
+        scrollButtons: false,
+        disableScrollButtons: true,
+        value: value,
         onChange: handleChange,
         'aria-label': 'filters',
         'data-testid': testId,
@@ -278,7 +348,9 @@ var DynamicDrawer = function DynamicDrawer(props) {
           width: '100%',
           height: '100%',
           borderRight: 1,
-          borderColor: 'divider'
+          borderColor: 'divider',
+          zIndex: 1000,
+          overflow: 'auto'
         }
       },
       R.map(function (item) {
@@ -311,7 +383,9 @@ var DynamicDrawer = function DynamicDrawer(props) {
             alignItems: 'start',
             maxWidth: '100%'
           },
-          wrapped: true
+          wrapped: true,
+          disableRipple: true,
+          disableFocusRipple: true
         });
       })(list),
       open && !isNarrow && _react2.default.createElement(
@@ -347,7 +421,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 : _react2.default.createElement(_AdvancedSelection2.default, _extends({
         id: filter.id,
@@ -403,7 +479,8 @@ DynamicDrawer.propTypes = process.env.NODE_ENV !== "production" ? {
   periodPanel: _propTypes2.default.string,
   isNarrow: _propTypes2.default.bool,
   disableAccessor: _propTypes2.default.func,
-  children: _propTypes2.default.node
+  children: _propTypes2.default.node,
+  styles: _propTypes2.default.object
 } : {};
 
 exports.default = DynamicDrawer;

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('..');
@@ -56,9 +60,9 @@ var ButtonCarousel = function ButtonCarousel(_ref) {
           tabIndex: -1
         },
         _react2.default.createElement(
-          _material.Button,
+          _.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.22.0",
   "description": "Library of visual components",
   "author": "OECD",
   "homepage": "https://visions-qa.siscc.org/#o",