@sis-cc/dotstatsuite-visions 7.4.0 → 7.5.0

package/es/DataFooter/DataFooter.js

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 import * as R from 'ramda';
 import useSize from '@react-hook/size';
 import Grid from '@material-ui/core/Grid';
@@ -42,15 +43,23 @@ var useStyles = makeStyles(function (theme) {
     logo: {
       height: HEIGHT / 2,
       display: 'flex'
+    },
+    sticky: {
+      position: 'sticky',
+      right: 0
     }
   };
 });
 
 var DataFooter = function DataFooter(_ref3) {
+  var _cx;
+
   var logo = _ref3.logo,
       source = _ref3.source,
       copyright = _ref3.copyright,
-      legend = _ref3.legend;
+      legend = _ref3.legend,
+      _ref3$isSticky = _ref3.isSticky,
+      isSticky = _ref3$isSticky === undefined ? false : _ref3$isSticky;
 
   var target = React.useRef(null);
 
@@ -81,7 +90,7 @@ var DataFooter = function DataFooter(_ref3) {
     ),
     React.createElement(
       Grid,
-      { item: true, style: { alignSelf: 'flex-end' } },
+      { item: true, style: { alignSelf: 'flex-end' }, className: cx((_cx = {}, _cx[classes.sticky] = isSticky, _cx)) },
       React.createElement(
         Grid,
         {
@@ -168,7 +177,8 @@ DataFooter.propTypes = process.env.NODE_ENV !== "production" ? {
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     content: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
   }),
-  legend: PropTypes.element
+  legend: PropTypes.element,
+  isSticky: PropTypes.bool
 } : {};
 
 export default DataFooter;

package/es/DataFooter/index.js

@@ -23,6 +23,7 @@
  *  content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
  * }),
  * legend: PropTypes.element,
+ * isSticky: PropTypes.bool,
  * @theme
  * // tooltip (see Tooltip Component)
  * @demoReady

package/es/DataHeader/DataHeader.js

@@ -94,6 +94,10 @@ var useStyles = makeStyles(function (theme) {
       marginLeft: 20,
       maxWidth: 270
     }, theme.typography.body1),
+    sticky: {
+      position: 'sticky',
+      left: 0
+    },
     sideIconContainer: {
       marginLeft: '10px'
     }
@@ -101,6 +105,8 @@ var useStyles = makeStyles(function (theme) {
 });
 
 var DataHeader = function DataHeader(_ref4) {
+  var _cx;
+
   var children = _ref4.children,
       title = _ref4.title,
       _ref4$subtitle = _ref4.subtitle,
@@ -108,7 +114,9 @@ var DataHeader = function DataHeader(_ref4) {
       uprs = _ref4.uprs,
       disclaimer = _ref4.disclaimer,
       sideProps = _ref4.sideProps,
-      SideIcon = _ref4.SideIcon;
+      SideIcon = _ref4.SideIcon,
+      _ref4$isSticky = _ref4.isSticky,
+      isSticky = _ref4$isSticky === undefined ? false : _ref4$isSticky;
 
   var target = React.useRef(null);
 
@@ -133,7 +141,7 @@ var DataHeader = function DataHeader(_ref4) {
     { className: classes.header, ref: target },
     React.createElement(
       'div',
-      { className: classes.container },
+      { className: cx(classes.container, (_cx = {}, _cx[classes.sticky] = isSticky, _cx)) },
       isWidthUp(T4_BREAKPOINTS.xs2) && title && React.createElement(
         Typography,
         { variant: 'h1', className: classes.title },
@@ -235,7 +243,8 @@ DataHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   sideProps: PropTypes.object,
   SideIcon: PropTypes.func,
   disclaimer: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  children: PropTypes.node
+  children: PropTypes.node,
+  isSticky: PropTypes.bool
 } : {};
 
 export default DataHeader;

package/es/DataHeader/index.js

@@ -35,6 +35,7 @@
  *   label: PropTypes.string,
  * }),
  * disclaimer: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ * isSticky: PropTypes.bool,
  * @theme
  * // tooltip (see Tooltip Component)
  * {

package/es/ExpansionPanel/ExpansionPanel.js

@@ -93,7 +93,6 @@ var CustomExpansionPanel = function CustomExpansionPanel(_ref) {
 CustomExpansionPanel.propTypes = process.env.NODE_ENV !== "production" ? {
   testId: PropTypes.string,
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  classes: PropTypes.object,
   topElementComponent: PropTypes.element,
   onChangeActivePanel: PropTypes.func,
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),

package/es/ExpansionPanel/index.js

@@ -9,7 +9,6 @@
  * ExpansionPanel.propTypes = {
  *   testId: PropTypes.string,
  *   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
- *   classes: PropTypes.object,
  *   topElementComponent: PropTypes.element,
  *   onChangeActivePanel: PropTypes.func,
  *   label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),

package/es/ScopeList/Item.js

@@ -33,6 +33,7 @@ var Item = function Item(_ref) {
   var classes = _ref.classes,
       id = _ref.id,
       label = _ref.label,
+      description = _ref.description,
       _ref$nodePath = _ref.nodePath,
       nodePath = _ref$nodePath === undefined ? [] : _ref$nodePath,
       isSelected = _ref.isSelected,
@@ -103,14 +104,24 @@ var Item = function Item(_ref) {
           React.createElement('path', { d: svgPath })
         ),
         React.createElement(
-          Typography,
+          Tooltip,
           {
-            'data-testid': testId + '_value_' + id,
-            color: 'inherit',
-            variant: 'body2',
-            className: cx(classes.label, (_cx6 = {}, _cx6[classes.disabledLabel] = isDisabled, _cx6))
+            title: R.isNil(description) ? '' : description,
+            tabIndex: 0,
+            'aria-label': description,
+            'aria-hidden': false,
+            placement: 'top'
           },
-          label
+          React.createElement(
+            Typography,
+            {
+              'data-testid': testId + '_value_' + id,
+              color: 'inherit',
+              variant: 'body2',
+              className: cx(classes.label, (_cx6 = {}, _cx6[classes.disabledLabel] = isDisabled, _cx6[classes.tooltipNotice] = !R.isNil(description), _cx6))
+            },
+            label
+          )
         ),
         R.not(R.isNil(count)) && React.createElement(
           Typography,
@@ -181,6 +192,7 @@ Item.propTypes = process.env.NODE_ENV !== "production" ? {
   classes: PropTypes.object,
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   label: PropTypes.string,
+  description: PropTypes.string,
   parentId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   nodePath: PropTypes.array,
   ariaLabel: PropTypes.string,

package/es/ScopeList/styles.js

@@ -143,6 +143,9 @@ export var useStyles = makeStyles(function (theme) {
     },
     bulkSelectionIcon: {
       minWidth: 50
+    },
+    tooltipNotice: {
+      textDecoration: 'underline dotted'
     }
   };
 });

package/es/SisccFooter/SisccFooter.js

@@ -31,16 +31,24 @@ var useStyles = makeStyles(function (theme) {
     },
     rtl: {
       textAlign: 'right'
+    },
+    fixed: {
+      position: 'fixed',
+      bottom: 0,
+      left: 0,
+      width: '100%',
+      zIndex: 0
     }
   };
 });
 
-var SisccFooter = function SisccFooter(_ref) {
-  var _cx, _cx2;
+var SisccFooter = React.forwardRef(function (_ref, ref) {
+  var _cx, _cx2, _cx3;
 
   var leftLabel = _ref.leftLabel,
       _ref$rightLabel = _ref.rightLabel,
-      rightLabel = _ref$rightLabel === undefined ? [] : _ref$rightLabel;
+      rightLabel = _ref$rightLabel === undefined ? [] : _ref$rightLabel,
+      isFixed = _ref.isFixed;
 
   var classes = useStyles();
   var theme = useTheme();
@@ -48,7 +56,12 @@ var SisccFooter = function SisccFooter(_ref) {
 
   return React.createElement(
     AppBar,
-    { 'data-testid': 'footer-bar-test-id', position: 'static', className: classes.appBar },
+    {
+      ref: ref,
+      'data-testid': 'footer-bar-test-id',
+      position: 'static',
+      className: cx(classes.appBar, (_cx = {}, _cx[classes.fixed] = isFixed, _cx))
+    },
     React.createElement(
       Toolbar,
       { classes: { root: classes.root, gutters: classes.gutters } },
@@ -57,7 +70,7 @@ var SisccFooter = function SisccFooter(_ref) {
         { xs: 4, item: true, container: true, justifyContent: 'flex-start', alignItems: 'flex-start' },
         React.createElement(
           Typography,
-          { variant: 'body2', className: cx(classes.leftLabel, (_cx = {}, _cx[classes.rtl] = isRtl, _cx)) },
+          { variant: 'body2', className: cx(classes.leftLabel, (_cx2 = {}, _cx2[classes.rtl] = isRtl, _cx2)) },
           leftLabel
         )
       ),
@@ -66,17 +79,18 @@ var SisccFooter = function SisccFooter(_ref) {
         { xs: 8, item: true, container: true, justifyContent: 'flex-end', alignItems: 'flex-start' },
         React.createElement(
           Typography,
-          { variant: 'body2', className: cx(classes.rightLabel, (_cx2 = {}, _cx2[classes.rtl] = !isRtl, _cx2)) },
+          { variant: 'body2', className: cx(classes.rightLabel, (_cx3 = {}, _cx3[classes.rtl] = !isRtl, _cx3)) },
           rightLabel
         )
       )
     )
   );
-};
+});
 
 SisccFooter.propTypes = process.env.NODE_ENV !== "production" ? {
   leftLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  rightLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
+  rightLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  isFixed: PropTypes.bool
 } : {};
 
 export default SisccFooter;

package/es/TableHtml5/cell.js

@@ -31,6 +31,9 @@ var useStyles = makeStyles(function (theme) {
     link: {
       position: 'inherit',
       userSelect: 'inherit'
+    },
+    value: {
+      overflow: 'inherit'
     }
   };
 });
@@ -82,7 +85,7 @@ var Cell = function Cell(_ref) {
       React.createElement(
         Typography,
         { variant: 'body1', tabIndex: 0, noWrap: hasFlag },
-        !R.isNil(SideIcon) && React.createElement(SideIcon, { sideProps: sideProps }),
+        !R.isNil(SideIcon) && React.createElement(SideIcon, { sideProps: sideProps, className: classes.value }),
         hasFlag && React.createElement(Flags, { flags: flags }),
         uiValue
       )

package/es/TableHtml5/flags.js

@@ -20,7 +20,6 @@ var useStyles = makeStyles(function (theme) {
       margin: 0
     }, theme.typography.body1),
     flags: _extends({
-      verticalAlign: 'super',
       borderBottom: '1px dotted',
       borderColor: 'inherit',
       margin: theme.spacing(0, 0.5),
@@ -28,7 +27,9 @@ var useStyles = makeStyles(function (theme) {
       display: 'inline',
       fontWeight: 'bold',
       fontStyle: 'normal',
-      textTransform: 'uppercase'
+      textTransform: 'uppercase',
+      position: 'relative',
+      top: '-4px'
     }, R.pathOr({}, ['mixins', 'table', 'flag'], theme)),
     svg: {
       verticalAlign: 'middle'

package/es/TableHtml5/header.js

@@ -37,9 +37,6 @@ var useStyles = makeStyles(function (theme) {
       fontStyle: 'inherit',
       fontWeight: 'bold'
     },
-    topCell: {
-      paddingTop: 0
-    },
     stickyLabel: {
       position: 'sticky'
     }
@@ -63,8 +60,6 @@ var Header = function Header(_ref) {
 
   if (R.compose(R.anyPass([R.isNil, R.isEmpty]), R.path([0, 'data']))(headerData)) return null;
   return timesIndexed(function (index) {
-    var _cx;
-
     var flags = R.path([0, 'data', index, 'dimension', 'flags'], headerData);
     var id = 'header_' + index;
     return React.createElement(
@@ -76,7 +71,7 @@ var Header = function Header(_ref) {
           component: 'th',
           padding: 'none',
           align: 'center',
-          className: cx(classes.tableHeadCell, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx)),
+          className: classes.tableHeadCell,
           colSpan: R.inc(xLayoutDataLength),
           id: id,
           tabIndex: 0,
@@ -94,7 +89,7 @@ var Header = function Header(_ref) {
         )
       ),
       mapIndexed(function (headerItem, idx) {
-        var _cx2;
+        var _cx;
 
         var flags = R.prop('flags', headerItem);
         return React.createElement(
@@ -102,7 +97,7 @@ var Header = function Header(_ref) {
           {
             key: R.prop('id', headerItem) + '-' + idx,
             component: 'th',
-            className: cx(classes.tableHeadCell, (_cx2 = {}, _cx2[classes.topCell] = R.not(R.isEmpty(flags)), _cx2)),
+            className: cx(classes.tableHeadCell, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx)),
             id: idx + '_' + index,
             headers: 'header_' + index,
             colSpan: R.prop('spanCount', headerItem),

package/es/TableHtml5/section.js

@@ -1,6 +1,6 @@
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-import React, { Fragment } from 'react';
+import React from 'react';
 import * as R from 'ramda';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -33,7 +33,8 @@ var useStyles = makeStyles(function (theme) {
       borderBottom: '1px solid ' + theme.palette.grey[500],
       borderRight: '1px solid ' + theme.palette.grey[500],
       padding: theme.spacing(0.5) + 'px ' + theme.spacing(1) + 'px',
-      position: 'sticky'
+      position: 'sticky',
+      zIndex: 1
     },
     cellContent: {
       display: 'flex',

package/es/TableHtml5/sectionHeader.js

@@ -3,6 +3,7 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 import React, { Fragment } from 'react';
 import * as R from 'ramda';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import Lens from '@material-ui/icons/Lens';
@@ -18,7 +19,7 @@ var useStyles = makeStyles(function (theme) {
       border: 'inherit',
       borderBottom: '1px solid ' + theme.palette.grey[500],
       borderRight: '1px solid ' + theme.palette.grey[500],
-      padding: theme.spacing(0.5) + 'px ' + theme.spacing(1) + 'px',
+      padding: theme.spacing(0, 1),
       color: theme.palette.grey['A700'],
       verticalAlign: 'middle'
     },
@@ -32,18 +33,26 @@ var useStyles = makeStyles(function (theme) {
       marginRight: theme.spacing(0.5)
     },
     containerSection: {
-      alignItems: 'baseline',
-      display: 'flex'
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center'
     },
     stickyHeaderSection: {
       position: 'sticky'
     },
-    containerTextSection: {
-      display: 'flex',
-      alignItems: 'center'
-    },
-    flags: {
+    flag: {
+      height: '100%',
+      backgroundColor: getDark(theme) || theme.palette.secondary.dark,
       paddingLeft: 12
+    },
+    leftLabelPosition: {
+      left: theme.spacing(1)
+    },
+    rightLabelPosition: {
+      right: theme.spacing(1)
+    },
+    sectionLabelsContainer: {
+      padding: theme.spacing(0.5, 0)
     }
   };
 });
@@ -77,10 +86,12 @@ var SectionHeader = function SectionHeader(_ref) {
       },
       React.createElement(
         Typography,
-        { noWrap: true, variant: 'body1', component: 'div', className: classes.containerSection },
+        { variant: 'body1', component: 'div', className: classes.containerSection },
         React.createElement(
-          'div',
-          null,
+          'span',
+          {
+            className: cx(classes.stickyHeaderSection, classes.leftLabelPosition, classes.sectionLabelsContainer)
+          },
           mapIndexed(function (sectionHeader, index) {
             return React.createElement(
               Fragment,
@@ -101,15 +112,17 @@ var SectionHeader = function SectionHeader(_ref) {
               React.createElement(
                 Typography,
                 { noWrap: true, variant: 'body1', component: 'span', tabIndex: 0 },
-                R.path(['value', 'label'], sectionHeader),
-                React.createElement(Flags, { flags: R.path(['value', 'flags'], sectionHeader) })
-              )
+                R.path(['value', 'label'], sectionHeader)
+              ),
+              React.createElement(Flags, { flags: R.path(['value', 'flags'], sectionHeader) })
             );
           }, R.path([0, 'data'], section))
         ),
         React.createElement(
           'div',
-          { className: classes.flags },
+          {
+            className: cx(classes.flag, classes.stickyHeaderSection, classes.rightLabelPosition, classes.sectionLabelsContainer)
+          },
           !R.isNil(SideIcon) && React.createElement(SideIcon, { sideProps: R.path([0, 'sideProps'], section) }),
           React.createElement(Flags, { flags: R.path([0, 'flags'], section) })
         )

package/es/theme.js

@@ -287,8 +287,7 @@ export var sisccTheme = function sisccTheme(_ref) {
       },
       table: {
         flag: {
-          fontFamily: "'PT Sans Narrow', 'Helvetica Neue', Helvetica, Arial, sans-serif",
-          fontSize: 12,
+          fontSize: 10,
           color: outerPalette.textLight || innerPalette.textLight
         },
         dot: {

package/lib/DataFooter/DataFooter.js

@@ -10,6 +10,10 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _ramda = require('ramda');
 
 var R = _interopRequireWildcard(_ramda);
@@ -73,15 +77,23 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     logo: {
       height: HEIGHT / 2,
       display: 'flex'
+    },
+    sticky: {
+      position: 'sticky',
+      right: 0
     }
   };
 });
 
 var DataFooter = function DataFooter(_ref3) {
+  var _cx;
+
   var logo = _ref3.logo,
       source = _ref3.source,
       copyright = _ref3.copyright,
-      legend = _ref3.legend;
+      legend = _ref3.legend,
+      _ref3$isSticky = _ref3.isSticky,
+      isSticky = _ref3$isSticky === undefined ? false : _ref3$isSticky;
 
   var target = _react2.default.useRef(null);
 
@@ -112,7 +124,7 @@ var DataFooter = function DataFooter(_ref3) {
     ),
     _react2.default.createElement(
       _Grid2.default,
-      { item: true, style: { alignSelf: 'flex-end' } },
+      { item: true, style: { alignSelf: 'flex-end' }, className: (0, _classnames2.default)((_cx = {}, _cx[classes.sticky] = isSticky, _cx)) },
       _react2.default.createElement(
         _Grid2.default,
         {
@@ -199,7 +211,8 @@ DataFooter.propTypes = process.env.NODE_ENV !== "production" ? {
     label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
     content: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element])
   }),
-  legend: _propTypes2.default.element
+  legend: _propTypes2.default.element,
+  isSticky: _propTypes2.default.bool
 } : {};
 
 exports.default = DataFooter;

package/lib/DataHeader/DataHeader.js

@@ -134,6 +134,10 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       marginLeft: 20,
       maxWidth: 270
     }, theme.typography.body1),
+    sticky: {
+      position: 'sticky',
+      left: 0
+    },
     sideIconContainer: {
       marginLeft: '10px'
     }
@@ -141,6 +145,8 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
 });
 
 var DataHeader = function DataHeader(_ref4) {
+  var _cx;
+
   var children = _ref4.children,
       title = _ref4.title,
       _ref4$subtitle = _ref4.subtitle,
@@ -148,7 +154,9 @@ var DataHeader = function DataHeader(_ref4) {
       uprs = _ref4.uprs,
       disclaimer = _ref4.disclaimer,
       sideProps = _ref4.sideProps,
-      SideIcon = _ref4.SideIcon;
+      SideIcon = _ref4.SideIcon,
+      _ref4$isSticky = _ref4.isSticky,
+      isSticky = _ref4$isSticky === undefined ? false : _ref4$isSticky;
 
   var target = _react2.default.useRef(null);
 
@@ -173,7 +181,7 @@ var DataHeader = function DataHeader(_ref4) {
     { className: classes.header, ref: target },
     _react2.default.createElement(
       'div',
-      { className: classes.container },
+      { className: (0, _classnames2.default)(classes.container, (_cx = {}, _cx[classes.sticky] = isSticky, _cx)) },
       isWidthUp(_theme.T4_BREAKPOINTS.xs2) && title && _react2.default.createElement(
         _Typography2.default,
         { variant: 'h1', className: classes.title },
@@ -275,7 +283,8 @@ DataHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   sideProps: _propTypes2.default.object,
   SideIcon: _propTypes2.default.func,
   disclaimer: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
-  children: _propTypes2.default.node
+  children: _propTypes2.default.node,
+  isSticky: _propTypes2.default.bool
 } : {};
 
 exports.default = DataHeader;

package/lib/ExpansionPanel/ExpansionPanel.js

@@ -132,7 +132,6 @@ var CustomExpansionPanel = function CustomExpansionPanel(_ref) {
 CustomExpansionPanel.propTypes = process.env.NODE_ENV !== "production" ? {
   testId: _propTypes2.default.string,
   id: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
-  classes: _propTypes2.default.object,
   topElementComponent: _propTypes2.default.element,
   onChangeActivePanel: _propTypes2.default.func,
   label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),

package/lib/ScopeList/Item.js

@@ -71,6 +71,7 @@ var Item = function Item(_ref) {
   var classes = _ref.classes,
       id = _ref.id,
       label = _ref.label,
+      description = _ref.description,
       _ref$nodePath = _ref.nodePath,
       nodePath = _ref$nodePath === undefined ? [] : _ref$nodePath,
       isSelected = _ref.isSelected,
@@ -141,14 +142,24 @@ var Item = function Item(_ref) {
           _react2.default.createElement('path', { d: svgPath })
         ),
         _react2.default.createElement(
-          _Typography2.default,
+          _.Tooltip,
           {
-            'data-testid': testId + '_value_' + id,
-            color: 'inherit',
-            variant: 'body2',
-            className: (0, _classnames2.default)(classes.label, (_cx6 = {}, _cx6[classes.disabledLabel] = isDisabled, _cx6))
+            title: R.isNil(description) ? '' : description,
+            tabIndex: 0,
+            'aria-label': description,
+            'aria-hidden': false,
+            placement: 'top'
           },
-          label
+          _react2.default.createElement(
+            _Typography2.default,
+            {
+              'data-testid': testId + '_value_' + id,
+              color: 'inherit',
+              variant: 'body2',
+              className: (0, _classnames2.default)(classes.label, (_cx6 = {}, _cx6[classes.disabledLabel] = isDisabled, _cx6[classes.tooltipNotice] = !R.isNil(description), _cx6))
+            },
+            label
+          )
         ),
         R.not(R.isNil(count)) && _react2.default.createElement(
           _Typography2.default,
@@ -219,6 +230,7 @@ Item.propTypes = process.env.NODE_ENV !== "production" ? {
   classes: _propTypes2.default.object,
   id: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
   label: _propTypes2.default.string,
+  description: _propTypes2.default.string,
   parentId: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
   nodePath: _propTypes2.default.array,
   ariaLabel: _propTypes2.default.string,

package/lib/ScopeList/styles.js

@@ -149,6 +149,9 @@ var useStyles = exports.useStyles = (0, _styles.makeStyles)(function (theme) {
     },
     bulkSelectionIcon: {
       minWidth: 50
+    },
+    tooltipNotice: {
+      textDecoration: 'underline dotted'
     }
   };
 });

package/lib/SisccFooter/SisccFooter.js

@@ -59,16 +59,24 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     },
     rtl: {
       textAlign: 'right'
+    },
+    fixed: {
+      position: 'fixed',
+      bottom: 0,
+      left: 0,
+      width: '100%',
+      zIndex: 0
     }
   };
 });
 
-var SisccFooter = function SisccFooter(_ref) {
-  var _cx, _cx2;
+var SisccFooter = _react2.default.forwardRef(function (_ref, ref) {
+  var _cx, _cx2, _cx3;
 
   var leftLabel = _ref.leftLabel,
       _ref$rightLabel = _ref.rightLabel,
-      rightLabel = _ref$rightLabel === undefined ? [] : _ref$rightLabel;
+      rightLabel = _ref$rightLabel === undefined ? [] : _ref$rightLabel,
+      isFixed = _ref.isFixed;
 
   var classes = useStyles();
   var theme = (0, _styles.useTheme)();
@@ -76,7 +84,12 @@ var SisccFooter = function SisccFooter(_ref) {
 
   return _react2.default.createElement(
     _AppBar2.default,
-    { 'data-testid': 'footer-bar-test-id', position: 'static', className: classes.appBar },
+    {
+      ref: ref,
+      'data-testid': 'footer-bar-test-id',
+      position: 'static',
+      className: (0, _classnames2.default)(classes.appBar, (_cx = {}, _cx[classes.fixed] = isFixed, _cx))
+    },
     _react2.default.createElement(
       _Toolbar2.default,
       { classes: { root: classes.root, gutters: classes.gutters } },
@@ -85,7 +98,7 @@ var SisccFooter = function SisccFooter(_ref) {
         { xs: 4, item: true, container: true, justifyContent: 'flex-start', alignItems: 'flex-start' },
         _react2.default.createElement(
           _Typography2.default,
-          { variant: 'body2', className: (0, _classnames2.default)(classes.leftLabel, (_cx = {}, _cx[classes.rtl] = isRtl, _cx)) },
+          { variant: 'body2', className: (0, _classnames2.default)(classes.leftLabel, (_cx2 = {}, _cx2[classes.rtl] = isRtl, _cx2)) },
           leftLabel
         )
       ),
@@ -94,17 +107,18 @@ var SisccFooter = function SisccFooter(_ref) {
         { xs: 8, item: true, container: true, justifyContent: 'flex-end', alignItems: 'flex-start' },
         _react2.default.createElement(
           _Typography2.default,
-          { variant: 'body2', className: (0, _classnames2.default)(classes.rightLabel, (_cx2 = {}, _cx2[classes.rtl] = !isRtl, _cx2)) },
+          { variant: 'body2', className: (0, _classnames2.default)(classes.rightLabel, (_cx3 = {}, _cx3[classes.rtl] = !isRtl, _cx3)) },
           rightLabel
         )
       )
     )
   );
-};
+});
 
 SisccFooter.propTypes = process.env.NODE_ENV !== "production" ? {
   leftLabel: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
-  rightLabel: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element])
+  rightLabel: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
+  isFixed: _propTypes2.default.bool
 } : {};
 
 exports.default = SisccFooter;

package/lib/TableHtml5/cell.js

@@ -63,6 +63,9 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     link: {
       position: 'inherit',
       userSelect: 'inherit'
+    },
+    value: {
+      overflow: 'inherit'
     }
   };
 });
@@ -114,7 +117,7 @@ var Cell = function Cell(_ref) {
       _react2.default.createElement(
         _Typography2.default,
         { variant: 'body1', tabIndex: 0, noWrap: hasFlag },
-        !R.isNil(SideIcon) && _react2.default.createElement(SideIcon, { sideProps: sideProps }),
+        !R.isNil(SideIcon) && _react2.default.createElement(SideIcon, { sideProps: sideProps, className: classes.value }),
         hasFlag && _react2.default.createElement(_flags2.default, { flags: flags }),
         uiValue
       )

package/lib/TableHtml5/flags.js

@@ -47,7 +47,6 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       margin: 0
     }, theme.typography.body1),
     flags: _extends({
-      verticalAlign: 'super',
       borderBottom: '1px dotted',
       borderColor: 'inherit',
       margin: theme.spacing(0, 0.5),
@@ -55,7 +54,9 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       display: 'inline',
       fontWeight: 'bold',
       fontStyle: 'normal',
-      textTransform: 'uppercase'
+      textTransform: 'uppercase',
+      position: 'relative',
+      top: '-4px'
     }, R.pathOr({}, ['mixins', 'table', 'flag'], theme)),
     svg: {
       verticalAlign: 'middle'

package/lib/TableHtml5/header.js

@@ -70,9 +70,6 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       fontStyle: 'inherit',
       fontWeight: 'bold'
     },
-    topCell: {
-      paddingTop: 0
-    },
     stickyLabel: {
       position: 'sticky'
     }
@@ -96,8 +93,6 @@ var Header = function Header(_ref) {
 
   if (R.compose(R.anyPass([R.isNil, R.isEmpty]), R.path([0, 'data']))(headerData)) return null;
   return timesIndexed(function (index) {
-    var _cx;
-
     var flags = R.path([0, 'data', index, 'dimension', 'flags'], headerData);
     var id = 'header_' + index;
     return _react2.default.createElement(
@@ -109,7 +104,7 @@ var Header = function Header(_ref) {
           component: 'th',
           padding: 'none',
           align: 'center',
-          className: (0, _classnames2.default)(classes.tableHeadCell, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx)),
+          className: classes.tableHeadCell,
           colSpan: R.inc(xLayoutDataLength),
           id: id,
           tabIndex: 0,
@@ -127,7 +122,7 @@ var Header = function Header(_ref) {
         )
       ),
       mapIndexed(function (headerItem, idx) {
-        var _cx2;
+        var _cx;
 
         var flags = R.prop('flags', headerItem);
         return _react2.default.createElement(
@@ -135,7 +130,7 @@ var Header = function Header(_ref) {
           {
             key: R.prop('id', headerItem) + '-' + idx,
             component: 'th',
-            className: (0, _classnames2.default)(classes.tableHeadCell, (_cx2 = {}, _cx2[classes.topCell] = R.not(R.isEmpty(flags)), _cx2)),
+            className: (0, _classnames2.default)(classes.tableHeadCell, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx)),
             id: idx + '_' + index,
             headers: 'header_' + index,
             colSpan: R.prop('spanCount', headerItem),

package/lib/TableHtml5/section.js

@@ -75,7 +75,8 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       borderBottom: '1px solid ' + theme.palette.grey[500],
       borderRight: '1px solid ' + theme.palette.grey[500],
       padding: theme.spacing(0.5) + 'px ' + theme.spacing(1) + 'px',
-      position: 'sticky'
+      position: 'sticky',
+      zIndex: 1
     },
     cellContent: {
       display: 'flex',

package/lib/TableHtml5/sectionHeader.js

@@ -16,6 +16,10 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _Typography = require('@material-ui/core/Typography');
 
 var _Typography2 = _interopRequireDefault(_Typography);
@@ -51,7 +55,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       border: 'inherit',
       borderBottom: '1px solid ' + theme.palette.grey[500],
       borderRight: '1px solid ' + theme.palette.grey[500],
-      padding: theme.spacing(0.5) + 'px ' + theme.spacing(1) + 'px',
+      padding: theme.spacing(0, 1),
       color: theme.palette.grey['A700'],
       verticalAlign: 'middle'
     },
@@ -65,18 +69,26 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       marginRight: theme.spacing(0.5)
     },
     containerSection: {
-      alignItems: 'baseline',
-      display: 'flex'
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center'
     },
     stickyHeaderSection: {
       position: 'sticky'
     },
-    containerTextSection: {
-      display: 'flex',
-      alignItems: 'center'
-    },
-    flags: {
+    flag: {
+      height: '100%',
+      backgroundColor: (0, _utils.getDark)(theme) || theme.palette.secondary.dark,
       paddingLeft: 12
+    },
+    leftLabelPosition: {
+      left: theme.spacing(1)
+    },
+    rightLabelPosition: {
+      right: theme.spacing(1)
+    },
+    sectionLabelsContainer: {
+      padding: theme.spacing(0.5, 0)
     }
   };
 });
@@ -110,10 +122,12 @@ var SectionHeader = function SectionHeader(_ref) {
       },
       _react2.default.createElement(
         _Typography2.default,
-        { noWrap: true, variant: 'body1', component: 'div', className: classes.containerSection },
+        { variant: 'body1', component: 'div', className: classes.containerSection },
         _react2.default.createElement(
-          'div',
-          null,
+          'span',
+          {
+            className: (0, _classnames2.default)(classes.stickyHeaderSection, classes.leftLabelPosition, classes.sectionLabelsContainer)
+          },
           mapIndexed(function (sectionHeader, index) {
             return _react2.default.createElement(
               _react.Fragment,
@@ -134,15 +148,17 @@ var SectionHeader = function SectionHeader(_ref) {
               _react2.default.createElement(
                 _Typography2.default,
                 { noWrap: true, variant: 'body1', component: 'span', tabIndex: 0 },
-                R.path(['value', 'label'], sectionHeader),
-                _react2.default.createElement(_flags2.default, { flags: R.path(['value', 'flags'], sectionHeader) })
-              )
+                R.path(['value', 'label'], sectionHeader)
+              ),
+              _react2.default.createElement(_flags2.default, { flags: R.path(['value', 'flags'], sectionHeader) })
             );
           }, R.path([0, 'data'], section))
         ),
         _react2.default.createElement(
           'div',
-          { className: classes.flags },
+          {
+            className: (0, _classnames2.default)(classes.flag, classes.stickyHeaderSection, classes.rightLabelPosition, classes.sectionLabelsContainer)
+          },
           !R.isNil(SideIcon) && _react2.default.createElement(SideIcon, { sideProps: R.path([0, 'sideProps'], section) }),
           _react2.default.createElement(_flags2.default, { flags: R.path([0, 'flags'], section) })
         )

package/lib/theme.js

@@ -290,8 +290,7 @@ var sisccTheme = exports.sisccTheme = function sisccTheme(_ref) {
       },
       table: {
         flag: {
-          fontFamily: "'PT Sans Narrow', 'Helvetica Neue', Helvetica, Arial, sans-serif",
-          fontSize: 12,
+          fontSize: 10,
           color: outerPalette.textLight || innerPalette.textLight
         },
         dot: {

package/package.json

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