@sis-cc/dotstatsuite-visions 7.4.1 → 7.6.0

package/es/CollapsibleTree/CollapsibleTree.js

@@ -39,7 +39,8 @@ var CollapsibleTree = function CollapsibleTree(_ref) {
       children = _ref.children,
       labels = _ref.labels,
       _ref$testId = _ref.testId,
-      testId = _ref$testId === undefined ? 'collapsible-tree' : _ref$testId;
+      testId = _ref$testId === undefined ? 'collapsible-tree' : _ref$testId,
+      valueHandler = _ref.valueHandler;
 
   var classes = useStyles();
 
@@ -106,7 +107,9 @@ var CollapsibleTree = function CollapsibleTree(_ref) {
           var id = _ref3.id,
               label = _ref3.label,
               children = _ref3.children,
-              value = _ref3.value;
+              value = _ref3.value,
+              _ref3$handlerProps = _ref3.handlerProps,
+              handlerProps = _ref3$handlerProps === undefined ? {} : _ref3$handlerProps;
 
           return React.createElement(
             Collapse,
@@ -114,12 +117,14 @@ var CollapsibleTree = function CollapsibleTree(_ref) {
             value && React.createElement(
               Typography,
               { className: classes.spacingValue, variant: 'body2' },
-              value
+              R.is(Function, valueHandler) ? valueHandler(_extends({ value: value }, handlerProps)) : value
             ),
             children && R.map(function (_ref4) {
               var id = _ref4.id,
                   label = _ref4.label,
-                  value = _ref4.value;
+                  value = _ref4.value,
+                  _ref4$handlerProps = _ref4.handlerProps,
+                  handlerProps = _ref4$handlerProps === undefined ? {} : _ref4$handlerProps;
 
               return React.createElement(
                 Collapse,
@@ -133,7 +138,7 @@ var CollapsibleTree = function CollapsibleTree(_ref) {
                 React.createElement(
                   Typography,
                   { variant: 'body2' },
-                  value
+                  R.is(Function, valueHandler) ? valueHandler(_extends({ value: value }, handlerProps)) : value
                 )
               );
             }, children)
@@ -165,7 +170,8 @@ CollapsibleTree.propTypes = process.env.NODE_ENV !== "production" ? {
     collapseAll: PropTypes.string,
     expandAll: PropTypes.string
   }),
-  testId: PropTypes.string
+  testId: PropTypes.string,
+  valueHandler: PropTypes.func
 } : {};
 
 export default CollapsibleTree;

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/PeriodPicker/PeriodPicker.js

@@ -24,13 +24,11 @@ var Period = function Period(_ref) {
 
   var classes = useStyles();
   var frequencies = getFrequencyOptions(availableFrequencies, labels);
-  console.log('frequencies', frequencies);
   if (R.isEmpty(frequencies)) return null;
   var frequency = getDefaultFrequency({
     defaultFrequency: defaultFrequency,
     frequencies: R.pluck('value')(frequencies)
   });
-  console.log('frequency', frequency);
   var period = R.defaultTo([], _period);
   var boundaries = R.defaultTo([], _boundaries);
   var isPeriodDisabled = R.or(R.any(R.isEmpty)([period, boundaries]), periodDisabled);

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,13 @@ var useStyles = makeStyles(function (theme) {
     link: {
       position: 'inherit',
       userSelect: 'inherit'
+    },
+    value: {
+      overflow: 'inherit'
+    },
+    textValue: {
+      textAlign: 'right',
+      whiteSpace: 'nowrap'
     }
   };
 });
@@ -78,11 +85,11 @@ var Cell = function Cell(_ref) {
     },
     React.createElement(
       'div',
-      { style: { textAlign: 'right' } },
+      { className: classes.textValue },
       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,9 +19,10 @@ 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'
+      verticalAlign: 'middle',
+      whiteSpace: 'nowrap'
     },
     lens: _extends({}, theme.mixins.table.dot, {
       marginLeft: theme.spacing(1),
@@ -32,18 +34,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 +87,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 +113,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/CollapsibleTree/CollapsibleTree.js

@@ -83,7 +83,8 @@ var CollapsibleTree = function CollapsibleTree(_ref) {
       children = _ref.children,
       labels = _ref.labels,
       _ref$testId = _ref.testId,
-      testId = _ref$testId === undefined ? 'collapsible-tree' : _ref$testId;
+      testId = _ref$testId === undefined ? 'collapsible-tree' : _ref$testId,
+      valueHandler = _ref.valueHandler;
 
   var classes = useStyles();
 
@@ -150,7 +151,9 @@ var CollapsibleTree = function CollapsibleTree(_ref) {
           var id = _ref3.id,
               label = _ref3.label,
               children = _ref3.children,
-              value = _ref3.value;
+              value = _ref3.value,
+              _ref3$handlerProps = _ref3.handlerProps,
+              handlerProps = _ref3$handlerProps === undefined ? {} : _ref3$handlerProps;
 
           return _react2.default.createElement(
             _Collapse2.default,
@@ -158,12 +161,14 @@ var CollapsibleTree = function CollapsibleTree(_ref) {
             value && _react2.default.createElement(
               _Typography2.default,
               { className: classes.spacingValue, variant: 'body2' },
-              value
+              R.is(Function, valueHandler) ? valueHandler(_extends({ value: value }, handlerProps)) : value
             ),
             children && R.map(function (_ref4) {
               var id = _ref4.id,
                   label = _ref4.label,
-                  value = _ref4.value;
+                  value = _ref4.value,
+                  _ref4$handlerProps = _ref4.handlerProps,
+                  handlerProps = _ref4$handlerProps === undefined ? {} : _ref4$handlerProps;
 
               return _react2.default.createElement(
                 _Collapse2.default,
@@ -177,7 +182,7 @@ var CollapsibleTree = function CollapsibleTree(_ref) {
                 _react2.default.createElement(
                   _Typography2.default,
                   { variant: 'body2' },
-                  value
+                  R.is(Function, valueHandler) ? valueHandler(_extends({ value: value }, handlerProps)) : value
                 )
               );
             }, children)
@@ -209,7 +214,8 @@ CollapsibleTree.propTypes = process.env.NODE_ENV !== "production" ? {
     collapseAll: _propTypes2.default.string,
     expandAll: _propTypes2.default.string
   }),
-  testId: _propTypes2.default.string
+  testId: _propTypes2.default.string,
+  valueHandler: _propTypes2.default.func
 } : {};
 
 exports.default = CollapsibleTree;

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/PeriodPicker/PeriodPicker.js

@@ -49,13 +49,11 @@ var Period = function Period(_ref) {
 
   var classes = (0, _styles2.default)();
   var frequencies = (0, _lib.getFrequencyOptions)(availableFrequencies, labels);
-  console.log('frequencies', frequencies);
   if (R.isEmpty(frequencies)) return null;
   var frequency = (0, _lib.getDefaultFrequency)({
     defaultFrequency: defaultFrequency,
     frequencies: R.pluck('value')(frequencies)
   });
-  console.log('frequency', frequency);
   var period = R.defaultTo([], _period);
   var boundaries = R.defaultTo([], _boundaries);
   var isPeriodDisabled = R.or(R.any(R.isEmpty)([period, boundaries]), periodDisabled);

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,13 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     link: {
       position: 'inherit',
       userSelect: 'inherit'
+    },
+    value: {
+      overflow: 'inherit'
+    },
+    textValue: {
+      textAlign: 'right',
+      whiteSpace: 'nowrap'
     }
   };
 });
@@ -110,11 +117,11 @@ var Cell = function Cell(_ref) {
     },
     _react2.default.createElement(
       'div',
-      { style: { textAlign: 'right' } },
+      { className: classes.textValue },
       _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,9 +55,10 @@ 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'
+      verticalAlign: 'middle',
+      whiteSpace: 'nowrap'
     },
     lens: _extends({}, theme.mixins.table.dot, {
       marginLeft: theme.spacing(1),
@@ -65,18 +70,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 +123,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 +149,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.1",
+  "version": "7.6.0",
   "description": "Library of visual components",
   "author": "OECD",
   "homepage": "https://visions-qa.siscc.org/#o",