@sis-cc/dotstatsuite-visions 7.11.4 → 7.12.2

package/es/DataHeader/DataHeader.js

@@ -61,9 +61,12 @@ var useStyles = makeStyles(function (theme) {
       }
     }),
     disclaimer: _extends({
-      marginLeft: theme.spacing(0.5),
-      width: 'unset',
-      fontSize: 'inherit'
+      padding: theme.spacing(0.5),
+      fontSize: function fontSize(_ref4) {
+        var isWidthLess = _ref4.isWidthLess;
+        return R.cond([[R.always(isWidthLess(T4_BREAKPOINTS.xs3)), R.always(12)], [R.always(isWidthLess(T4_BREAKPOINTS.sm)), R.always(13)]])(14);
+      },
+      lineHeight: 1.5
     }, R.pathOr({}, ['mixins', 'dataHeader', 'disclaimer'], theme)),
     infoIcon: {
       height: '0.8em',
@@ -104,19 +107,19 @@ var useStyles = makeStyles(function (theme) {
   };
 });
 
-var DataHeader = function DataHeader(_ref4) {
+var DataHeader = function DataHeader(_ref5) {
   var _cx;
 
-  var children = _ref4.children,
-      title = _ref4.title,
-      _ref4$subtitle = _ref4.subtitle,
-      subtitle = _ref4$subtitle === undefined ? [] : _ref4$subtitle,
-      uprs = _ref4.uprs,
-      disclaimer = _ref4.disclaimer,
-      sideProps = _ref4.sideProps,
-      SideIcon = _ref4.SideIcon,
-      _ref4$isSticky = _ref4.isSticky,
-      isSticky = _ref4$isSticky === undefined ? false : _ref4$isSticky;
+  var children = _ref5.children,
+      title = _ref5.title,
+      _ref5$subtitle = _ref5.subtitle,
+      subtitle = _ref5$subtitle === undefined ? [] : _ref5$subtitle,
+      uprs = _ref5.uprs,
+      disclaimer = _ref5.disclaimer,
+      sideProps = _ref5.sideProps,
+      SideIcon = _ref5.SideIcon,
+      _ref5$isSticky = _ref5.isSticky,
+      isSticky = _ref5$isSticky === undefined ? false : _ref5$isSticky;
 
   var target = React.useRef(null);
 
@@ -151,27 +154,7 @@ var DataHeader = function DataHeader(_ref4) {
           { className: classes.sideIconContainer },
           React.createElement(SideIcon, { sideProps: sideProps })
         ),
-        React.createElement(Flags, { classes: classes, content: R.propOr([], 'flags', title) }),
-        disclaimer && React.createElement(
-          Tooltip,
-          {
-            className: cx(classes.title, classes.disclaimer),
-            title: disclaimer,
-            tabIndex: 0,
-            'data-testid': 'data-header-disclaimer',
-            variant: 'warning',
-            'aria-hidden': false,
-            placement: 'bottom',
-            PopperProps: {
-              modifiers: {
-                flip: {
-                  behavior: ['bottom', 'top', 'left', 'right']
-                }
-              }
-            }
-          },
-          React.createElement(WarningIcon, { pathBackgroundColor: warningColor, pathColor: warningTextColor })
-        )
+        React.createElement(Flags, { classes: classes, content: R.propOr([], 'flags', title) })
       ),
       isWidthUp(T4_BREAKPOINTS.xs3) && subtitle && R.not(R.isEmpty(subtitle)) && React.createElement(
         'div',
@@ -200,6 +183,11 @@ var DataHeader = function DataHeader(_ref4) {
         { className: classes.subtitle },
         React.createElement(Title, { header: uprs.header }),
         uprs.label
+      ),
+      isWidthUp(T4_BREAKPOINTS.xs3) && disclaimer && React.createElement(
+        Typography,
+        { 'data-testid': 'data-header-disclaimer', className: classes.disclaimer },
+        disclaimer
       )
     ),
     React.createElement(

package/es/Loading/Loading.js

@@ -1,8 +1,8 @@
 import React from 'react';
+import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
-import CircularProgress from '@material-ui/core/CircularProgress';
 
 var useStyles = makeStyles(function (theme) {
   return {
@@ -14,27 +14,47 @@ var useStyles = makeStyles(function (theme) {
       justifyContent: 'center',
       alignItems: 'center'
     },
-    progress: {
-      margin: theme.spacing(2),
-      color: function color(_ref) {
-        var isWarning = _ref.isWarning;
-        return isWarning ? theme.palette.warning.main : theme.palette.primary.main;
+    circularProgress: {
+      width: '48px',
+      height: ' 48px',
+      borderStyle: 'solid',
+      borderWidth: '5px',
+      borderColor: theme.palette.primary.main,
+      borderBottomColor: 'transparent',
+      borderRadius: '50%',
+      display: 'inline-block',
+      boxSizing: 'border-box',
+      animation: '$rotate 1s linear infinite',
+      margin: theme.spacing(2)
+    },
+    '@keyframes rotate': {
+      '0%': {
+        transform: 'rotate(0deg)'
+      },
+      '100%': {
+        transform: 'rotate(360deg)'
       }
+    },
+    warning: {
+      borderColor: theme.palette.warning.main,
+      borderBottomColor: 'transparent'
     }
   };
 });
 
-var Loading = function Loading(_ref2) {
-  var message = _ref2.message,
-      _ref2$isWarning = _ref2.isWarning,
-      isWarning = _ref2$isWarning === undefined ? false : _ref2$isWarning;
+var Loading = function Loading(_ref) {
+  var _cx;
+
+  var message = _ref.message,
+      _ref$isWarning = _ref.isWarning,
+      isWarning = _ref$isWarning === undefined ? false : _ref$isWarning;
 
-  var classes = useStyles({ isWarning: isWarning });
+  var classes = useStyles();
 
   return React.createElement(
     'div',
     { className: classes.root },
-    React.createElement(CircularProgress, { className: classes.progress }),
+    React.createElement('div', { className: cx(classes.circularProgress, (_cx = {}, _cx[classes.warning] = isWarning, _cx)) }),
     React.createElement(
       Typography,
       { variant: 'subtitle1', noWrap: true, align: 'center' },

package/es/ScopeList/ScopeList.js

@@ -95,6 +95,13 @@ var ScopeList = function ScopeList(props) {
     }, 0);
   }, [isLoading, items, itemsById, disableAccessor]);
 
+  useEffect(function () {
+    var scrollEl = R.path(['children', 0, 'children', 0], ref.current);
+    if (scrollEl) {
+      setScrollTop(0);
+    }
+  }, [R.prop('id', R.last(currentItem || []))]);
+
   useEffect(function () {
     var current = ref.current;
     var handler = function handler(event) {

package/es/theme.js

@@ -255,7 +255,7 @@ export var sisccTheme = function sisccTheme(_ref) {
           color: '#494444'
         },
         disclaimer: {
-          color: outerPalette.highlight1 || innerPalette.highlight1
+          backgroundColor: outerPalette.highlight1 || innerPalette.highlight1
         },
         subtitle: {
           color: '#494444',

package/lib/DataHeader/DataHeader.js

@@ -101,9 +101,12 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       }
     }),
     disclaimer: _extends({
-      marginLeft: theme.spacing(0.5),
-      width: 'unset',
-      fontSize: 'inherit'
+      padding: theme.spacing(0.5),
+      fontSize: function fontSize(_ref4) {
+        var isWidthLess = _ref4.isWidthLess;
+        return R.cond([[R.always(isWidthLess(_theme.T4_BREAKPOINTS.xs3)), R.always(12)], [R.always(isWidthLess(_theme.T4_BREAKPOINTS.sm)), R.always(13)]])(14);
+      },
+      lineHeight: 1.5
     }, R.pathOr({}, ['mixins', 'dataHeader', 'disclaimer'], theme)),
     infoIcon: {
       height: '0.8em',
@@ -144,19 +147,19 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
   };
 });
 
-var DataHeader = function DataHeader(_ref4) {
+var DataHeader = function DataHeader(_ref5) {
   var _cx;
 
-  var children = _ref4.children,
-      title = _ref4.title,
-      _ref4$subtitle = _ref4.subtitle,
-      subtitle = _ref4$subtitle === undefined ? [] : _ref4$subtitle,
-      uprs = _ref4.uprs,
-      disclaimer = _ref4.disclaimer,
-      sideProps = _ref4.sideProps,
-      SideIcon = _ref4.SideIcon,
-      _ref4$isSticky = _ref4.isSticky,
-      isSticky = _ref4$isSticky === undefined ? false : _ref4$isSticky;
+  var children = _ref5.children,
+      title = _ref5.title,
+      _ref5$subtitle = _ref5.subtitle,
+      subtitle = _ref5$subtitle === undefined ? [] : _ref5$subtitle,
+      uprs = _ref5.uprs,
+      disclaimer = _ref5.disclaimer,
+      sideProps = _ref5.sideProps,
+      SideIcon = _ref5.SideIcon,
+      _ref5$isSticky = _ref5.isSticky,
+      isSticky = _ref5$isSticky === undefined ? false : _ref5$isSticky;
 
   var target = _react2.default.useRef(null);
 
@@ -191,27 +194,7 @@ var DataHeader = function DataHeader(_ref4) {
           { className: classes.sideIconContainer },
           _react2.default.createElement(SideIcon, { sideProps: sideProps })
         ),
-        _react2.default.createElement(_Flags2.default, { classes: classes, content: R.propOr([], 'flags', title) }),
-        disclaimer && _react2.default.createElement(
-          _.Tooltip,
-          {
-            className: (0, _classnames2.default)(classes.title, classes.disclaimer),
-            title: disclaimer,
-            tabIndex: 0,
-            'data-testid': 'data-header-disclaimer',
-            variant: 'warning',
-            'aria-hidden': false,
-            placement: 'bottom',
-            PopperProps: {
-              modifiers: {
-                flip: {
-                  behavior: ['bottom', 'top', 'left', 'right']
-                }
-              }
-            }
-          },
-          _react2.default.createElement(_.Warning, { pathBackgroundColor: warningColor, pathColor: warningTextColor })
-        )
+        _react2.default.createElement(_Flags2.default, { classes: classes, content: R.propOr([], 'flags', title) })
       ),
       isWidthUp(_theme.T4_BREAKPOINTS.xs3) && subtitle && R.not(R.isEmpty(subtitle)) && _react2.default.createElement(
         'div',
@@ -240,6 +223,11 @@ var DataHeader = function DataHeader(_ref4) {
         { className: classes.subtitle },
         _react2.default.createElement(_Title2.default, { header: uprs.header }),
         uprs.label
+      ),
+      isWidthUp(_theme.T4_BREAKPOINTS.xs3) && disclaimer && _react2.default.createElement(
+        _Typography2.default,
+        { 'data-testid': 'data-header-disclaimer', className: classes.disclaimer },
+        disclaimer
       )
     ),
     _react2.default.createElement(

package/lib/Loading/Loading.js

@@ -6,6 +6,10 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
@@ -16,10 +20,6 @@ var _Typography = require('@material-ui/core/Typography');
 
 var _Typography2 = _interopRequireDefault(_Typography);
 
-var _CircularProgress = require('@material-ui/core/CircularProgress');
-
-var _CircularProgress2 = _interopRequireDefault(_CircularProgress);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var useStyles = (0, _styles.makeStyles)(function (theme) {
@@ -32,27 +32,47 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       justifyContent: 'center',
       alignItems: 'center'
     },
-    progress: {
-      margin: theme.spacing(2),
-      color: function color(_ref) {
-        var isWarning = _ref.isWarning;
-        return isWarning ? theme.palette.warning.main : theme.palette.primary.main;
+    circularProgress: {
+      width: '48px',
+      height: ' 48px',
+      borderStyle: 'solid',
+      borderWidth: '5px',
+      borderColor: theme.palette.primary.main,
+      borderBottomColor: 'transparent',
+      borderRadius: '50%',
+      display: 'inline-block',
+      boxSizing: 'border-box',
+      animation: '$rotate 1s linear infinite',
+      margin: theme.spacing(2)
+    },
+    '@keyframes rotate': {
+      '0%': {
+        transform: 'rotate(0deg)'
+      },
+      '100%': {
+        transform: 'rotate(360deg)'
       }
+    },
+    warning: {
+      borderColor: theme.palette.warning.main,
+      borderBottomColor: 'transparent'
     }
   };
 });
 
-var Loading = function Loading(_ref2) {
-  var message = _ref2.message,
-      _ref2$isWarning = _ref2.isWarning,
-      isWarning = _ref2$isWarning === undefined ? false : _ref2$isWarning;
+var Loading = function Loading(_ref) {
+  var _cx;
+
+  var message = _ref.message,
+      _ref$isWarning = _ref.isWarning,
+      isWarning = _ref$isWarning === undefined ? false : _ref$isWarning;
 
-  var classes = useStyles({ isWarning: isWarning });
+  var classes = useStyles();
 
   return _react2.default.createElement(
     'div',
     { className: classes.root },
-    _react2.default.createElement(_CircularProgress2.default, { className: classes.progress }),
+    _react2.default.createElement('div', { className: (0, _classnames2.default)(classes.circularProgress, (_cx = {}, _cx[classes.warning] = isWarning, _cx)) }),
     _react2.default.createElement(
       _Typography2.default,
       { variant: 'subtitle1', noWrap: true, align: 'center' },

package/lib/ScopeList/ScopeList.js

@@ -148,6 +148,13 @@ var ScopeList = function ScopeList(props) {
     }, 0);
   }, [isLoading, items, itemsById, disableAccessor]);
 
+  (0, _react.useEffect)(function () {
+    var scrollEl = R.path(['children', 0, 'children', 0], ref.current);
+    if (scrollEl) {
+      setScrollTop(0);
+    }
+  }, [R.prop('id', R.last(currentItem || []))]);
+
   (0, _react.useEffect)(function () {
     var current = ref.current;
     var handler = function handler(event) {

package/lib/theme.js

@@ -258,7 +258,7 @@ var sisccTheme = exports.sisccTheme = function sisccTheme(_ref) {
           color: '#494444'
         },
         disclaimer: {
-          color: outerPalette.highlight1 || innerPalette.highlight1
+          backgroundColor: outerPalette.highlight1 || innerPalette.highlight1
         },
         subtitle: {
           color: '#494444',

package/package.json

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