@sis-cc/dotstatsuite-visions 6.5.0 → 6.6.1

package/es/AuthDialog/index.js

@@ -28,9 +28,7 @@ import Button from '../Button';
 import Checkbox from '@material-ui/core/Checkbox';
 import CloseIcon from '@material-ui/icons/Close';
 import Dialog from '@material-ui/core/Dialog';
-import MuiDialogTitle from '@material-ui/core/DialogTitle';
 import IconButton from '@material-ui/core/IconButton';
-import Input from '@material-ui/core/Input';
 import PersonIcon from '@material-ui/icons/Person';
 import TextField from '@material-ui/core/TextField';
 import Typography from '@material-ui/core/Typography';
@@ -132,20 +130,38 @@ var AuthDialog = function AuthDialog(_ref) {
       )
     ),
     React.createElement(
-      'div',
+      'form',
       { className: classes.content },
-      labels.user,
+      React.createElement(
+        'label',
+        { htmlFor: 'login' },
+        labels.user
+      ),
       React.createElement(TextField, {
-        inputProps: { className: classes.input },
+        inputProps: {
+          className: classes.input,
+          id: 'login',
+          autoComplete: 'username',
+          name: 'username'
+        },
         value: user,
         onChange: function onChange(e) {
           return setUser(e.target.value);
         },
         disabled: isAnonymous
       }),
-      labels.password,
+      React.createElement(
+        'label',
+        { htmlFor: 'password' },
+        labels.password
+      ),
       React.createElement(TextField, {
-        inputProps: { className: classes.input },
+        inputProps: {
+          className: classes.input,
+          id: 'password',
+          autoComplete: 'current-password',
+          name: 'password'
+        },
         value: password,
         onChange: function onChange(e) {
           return setPassword(e.target.value);

package/es/CollapseButtons/CollapseButtons.js

@@ -38,7 +38,9 @@ var CollapseButtons = function CollapseButtons(props) {
       breakpoint = _props$breakpoint === undefined ? function (theme) {
     return theme.breakpoints.down('sm');
   } : _props$breakpoint,
-      justify = props.justify;
+      justify = props.justify,
+      _props$textTransform = props.textTransform,
+      textTransform = _props$textTransform === undefined ? 'none' : _props$textTransform;
 
 
   var classes = useStyles();
@@ -80,6 +82,7 @@ var CollapseButtons = function CollapseButtons(props) {
         Grid,
         _extends({ item: true, xs: 12, sm: 12, md: R.nth(nbColumns)(COLUMNS) }, gridButtonsProps, { key: id }),
         React.createElement(ToggleButton, {
+          textTransform: textTransform,
           label: label,
           tabindex: R.isNil(toggleId) || R.prop(id)(toggleId) || R.compose(R.not, R.head, R.values)(toggleId) ? 0 : -1,
           isOpen: R.prop(id)(toggleId),
@@ -151,7 +154,8 @@ CollapseButtons.propTypes = process.env.NODE_ENV !== "production" ? {
   isSecondLevelClikable: PropTypes.bool,
   breakpoint: PropTypes.func,
   gridButtonsProps: PropTypes.object,
-  justify: PropTypes.string
+  justify: PropTypes.string,
+  textTransform: PropTypes.string
 } : {};
 
 export default CollapseButtons;

package/es/CollapseButtons/index.js

@@ -10,6 +10,8 @@
  * | 'space-around'
  * | 'space-evenly'
  *
+ * textTransform: 'none' | 'capitalize' | 'uppercase' | 'lowercase'
+ *
  * to manage layout you have three properties
  * nbColumns: numbers of column you want to have
  * gridButtonsProps: mainly to manage breakpoints in the differents layout of buttons but you can change all the grid properties. (nbColumns is use with the "sm" breakpoint)
@@ -51,6 +53,7 @@
  *   breakpoint: PropTypes.func,
  *   gridButtonsProps: PropTypes.object,
  *   justify: PropTypes.string,
+ *   textTransform: PropTypes.string,
  * };
  * @theme
  * // button (See ToggleButton Component)

package/es/TableHtml5/TableHtml5.js

@@ -27,7 +27,8 @@ var useStyles = makeStyles(function (theme) {
     },
     stickyHeader: {
       position: 'sticky',
-      top: 0
+      top: 0,
+      zIndex: 2
     }
   };
 });
@@ -55,6 +56,10 @@ export var getEnhancedValuesHeaderData = function getEnhancedValuesHeaderData(da
   }, R.times(R.always([]), colLength)))(data);
 };
 
+var getCellsWidth = R.addIndex(R.reduce)(function (acc, element, index) {
+  return R.append(R.add(acc[index], R.propOr(0, 'offsetWidth', element)), acc);
+}, [0]);
+
 var TableHtml5 = function TableHtml5(_ref) {
   var cells = _ref.cells,
       _ref$headerData = _ref.headerData,
@@ -71,10 +76,16 @@ var TableHtml5 = function TableHtml5(_ref) {
       headerHeight = _useState[0],
       setHeaderHeight = _useState[1];
 
+  var _useState2 = useState([0]),
+      subHeadCellsWidth = _useState2[0],
+      setSubHeadCellsWidth = _useState2[1];
+
   var headerRef = useRef(null);
+  var subHeadCellsRef = useRef([]);
 
   useEffect(function () {
     setHeaderHeight(R.pathOr(0, ['current', 'clientHeight'], headerRef));
+    setSubHeadCellsWidth(getCellsWidth(R.prop('current', subHeadCellsRef)));
   }, [cells, headerData, sectionsData]);
 
   useEffect(function () {
@@ -82,8 +93,9 @@ var TableHtml5 = function TableHtml5(_ref) {
     var resizeListener = function resizeListener() {
       clearTimeout(timeoutId);
       timeoutId = setTimeout(function () {
-        return setHeaderHeight(R.pathOr(0, ['current', 'clientHeight'], headerRef), 150);
-      });
+        setHeaderHeight(R.pathOr(0, ['current', 'clientHeight'], headerRef));
+        setSubHeadCellsWidth(getCellsWidth(R.prop('current', subHeadCellsRef)));
+      }, 150);
     };
     window.addEventListener('resize', resizeListener);
     return function () {
@@ -113,7 +125,9 @@ var TableHtml5 = function TableHtml5(_ref) {
       React.createElement(SubHeader, {
         headerData: headerData,
         xLayoutData: xLayoutData,
-        activeCellIds: activeCellIds
+        activeCellIds: activeCellIds,
+        ref: subHeadCellsRef,
+        subHeadCellsWidth: subHeadCellsWidth
       })
     ),
     mapIndexed(function (section, index) {
@@ -128,7 +142,8 @@ var TableHtml5 = function TableHtml5(_ref) {
         xLayoutDataLength: xLayoutDataLength,
         cellHandler: cellHandler,
         activeCellIds: activeCellIds,
-        activeCellHandler: activeCellHandler
+        activeCellHandler: activeCellHandler,
+        subHeadCellsWidth: subHeadCellsWidth
       });
     }, sectionsData)
   );

package/es/TableHtml5/header.js

@@ -74,7 +74,8 @@ var Header = function Header(_ref) {
           className: cx(classes.tableHeadCell, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx)),
           colSpan: R.inc(xLayoutDataLength),
           id: id,
-          tabIndex: 0
+          tabIndex: 0,
+          style: { position: 'sticky', left: 0, zIndex: 1 }
         },
         React.createElement(
           'div',

package/es/TableHtml5/section.js

@@ -26,7 +26,7 @@ var useStyles = makeStyles(function (theme) {
       verticalAlign: 'middle'
     },
     fillerCell: {
-      width: '30px',
+      minWidth: '30px',
       backgroundColor: theme.palette.grey[200],
       verticalAlign: 'top',
       border: 'inherit',
@@ -64,7 +64,8 @@ var Section = function Section(_ref) {
       activeCellIds = _ref.activeCellIds,
       headerHeight = _ref.headerHeight,
       sectionIndex = _ref.sectionIndex,
-      nbColumnsByRows = _ref.nbColumnsByRows;
+      nbColumnsByRows = _ref.nbColumnsByRows,
+      subHeadCellsWidth = _ref.subHeadCellsWidth;
 
   var classes = useStyles();
   var currentSection = R.path([0, 'key'], section);
@@ -111,7 +112,8 @@ var Section = function Section(_ref) {
               className: cx(classes.rowTitle, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx[classes.highlight] = R.prop(rowId)(activeCellIds), _cx)),
               id: id,
               headers: 'subHeader_' + index + ' ' + currentSection,
-              component: 'th'
+              component: 'th',
+              style: { position: 'sticky', left: subHeadCellsWidth[index], zIndex: 1 }
             },
             React.createElement(
               'div',
@@ -133,7 +135,8 @@ var Section = function Section(_ref) {
         React.createElement(
           TableCell,
           {
-            className: cx(classes.fillerCell, (_cx2 = {}, _cx2[classes.highlight] = R.prop(rowId)(activeCellIds), _cx2))
+            className: cx(classes.fillerCell, (_cx2 = {}, _cx2[classes.highlight] = R.prop(rowId)(activeCellIds), _cx2)),
+            style: { position: 'sticky', left: R.last(subHeadCellsWidth) }
           },
           React.createElement(
             'div',
@@ -180,7 +183,8 @@ Section.propTypes = process.env.NODE_ENV !== "production" ? {
   sectionIndex: PropTypes.number,
   headerNumberRows: PropTypes.number,
   nbColumnsByRows: PropTypes.array,
-  maxColumns: PropTypes.number
+  maxColumns: PropTypes.number,
+  subHeadCellsWidth: PropTypes.arrayOf(PropTypes.number)
 } : {};
 
 export default Section;

package/es/TableHtml5/sectionHeader.js

@@ -64,7 +64,7 @@ var SectionHeader = function SectionHeader(_ref) {
     {
       key: section.key,
       className: classes.stickyHeaderSection,
-      style: { top: headerHeight + 'px' }
+      style: { top: headerHeight, zIndex: 2 }
     },
     React.createElement(
       TableCell,

package/es/TableHtml5/subHeader.js

@@ -44,10 +44,11 @@ var useStyles = makeStyles(function (theme) {
 
 var mapIndexed = R.addIndex(R.map);
 
-var SubHeader = function SubHeader(_ref) {
+var SubHeader = React.forwardRef(function (_ref, refs) {
   var headerData = _ref.headerData,
       xLayoutData = _ref.xLayoutData,
-      activeCellIds = _ref.activeCellIds;
+      activeCellIds = _ref.activeCellIds,
+      subHeadCellsWidth = _ref.subHeadCellsWidth;
 
   var classes = useStyles();
   return React.createElement(
@@ -60,7 +61,11 @@ var SubHeader = function SubHeader(_ref) {
           component: 'th',
           className: classes.columnsTitle,
           key: index,
-          id: 'subHeader_' + index
+          id: 'subHeader_' + index,
+          style: { position: 'sticky', left: subHeadCellsWidth[index], zIndex: 1 },
+          ref: function ref(element) {
+            return refs.current[index] = element;
+          }
         },
         React.createElement(
           'div',
@@ -74,7 +79,10 @@ var SubHeader = function SubHeader(_ref) {
         )
       );
     }, xLayoutData),
-    React.createElement(TableCell, { className: classes.fillerCell }),
+    React.createElement(TableCell, {
+      className: classes.fillerCell,
+      style: { position: 'sticky', left: R.last(subHeadCellsWidth) }
+    }),
     mapIndexed(function (item, index) {
       var _cx;
 
@@ -88,12 +96,13 @@ var SubHeader = function SubHeader(_ref) {
       );
     }, headerData)
   );
-};
+});
 
 SubHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   activeCellIds: PropTypes.object,
   headerData: PropTypes.array,
-  xLayoutData: PropTypes.array
+  xLayoutData: PropTypes.array,
+  subHeadCellsWidth: PropTypes.arrayOf(PropTypes.number)
 } : {};
 
 export default SubHeader;

package/es/ToggleButton/ToggleButton.js

@@ -24,7 +24,10 @@ var useStyles = makeStyles(function (theme) {
       }
     },
     label: {
-      textTransform: 'capitalize',
+      textTransform: function textTransform(_ref) {
+        var _textTransform = _ref.textTransform;
+        return _textTransform;
+      },
       textAlign: 'left',
       fontSize: '0.9375rem',
       lineHeight: '1.0'
@@ -36,17 +39,19 @@ var useStyles = makeStyles(function (theme) {
   };
 });
 
-var ToggleButton = function ToggleButton(_ref) {
+var ToggleButton = function ToggleButton(_ref2) {
   var _cx;
 
-  var isOpen = _ref.isOpen,
-      label = _ref.label,
-      toggle = _ref.toggle,
-      testId = _ref.testId,
-      _ref$tabindex = _ref.tabindex,
-      tabindex = _ref$tabindex === undefined ? 0 : _ref$tabindex;
+  var isOpen = _ref2.isOpen,
+      label = _ref2.label,
+      toggle = _ref2.toggle,
+      testId = _ref2.testId,
+      _ref2$tabindex = _ref2.tabindex,
+      tabindex = _ref2$tabindex === undefined ? 0 : _ref2$tabindex,
+      _ref2$textTransform = _ref2.textTransform,
+      textTransform = _ref2$textTransform === undefined ? 'capitalize' : _ref2$textTransform;
 
-  var classes = useStyles();
+  var classes = useStyles({ textTransform: textTransform });
   return React.createElement(
     Button,
     {
@@ -69,7 +74,8 @@ ToggleButton.propTypes = process.env.NODE_ENV !== "production" ? {
   tabindex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   isOpen: PropTypes.bool,
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  toggle: PropTypes.func
+  toggle: PropTypes.func,
+  textTransform: PropTypes.string
 } : {};
 
 export default ToggleButton;

package/es/ToggleButton/index.js

@@ -1,6 +1,8 @@
 /**
  * Button use api of material ui https://material-ui.com/api/button/
  *
+ * textTransform: 'none' | 'capitalize' | 'uppercase' | 'lowercase'
+ *
  * @memberOf VISIONS
  * @name ToggleButton
  * @tag component
@@ -12,6 +14,7 @@
  *   isOpen: PropTypes.bool,
  *   label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
  *   toggle: PropTypes.func,
+ *   textTransform: PropTypes.string,
  * };
  *
  * @theme

package/lib/AuthDialog/index.js

@@ -28,18 +28,10 @@ var _Dialog = require('@material-ui/core/Dialog');
 
 var _Dialog2 = _interopRequireDefault(_Dialog);
 
-var _DialogTitle = require('@material-ui/core/DialogTitle');
-
-var _DialogTitle2 = _interopRequireDefault(_DialogTitle);
-
 var _IconButton = require('@material-ui/core/IconButton');
 
 var _IconButton2 = _interopRequireDefault(_IconButton);
 
-var _Input = require('@material-ui/core/Input');
-
-var _Input2 = _interopRequireDefault(_Input);
-
 var _Person = require('@material-ui/icons/Person');
 
 var _Person2 = _interopRequireDefault(_Person);
@@ -175,20 +167,38 @@ var AuthDialog = function AuthDialog(_ref) {
       )
     ),
     _react2.default.createElement(
-      'div',
+      'form',
       { className: classes.content },
-      labels.user,
+      _react2.default.createElement(
+        'label',
+        { htmlFor: 'login' },
+        labels.user
+      ),
       _react2.default.createElement(_TextField2.default, {
-        inputProps: { className: classes.input },
+        inputProps: {
+          className: classes.input,
+          id: 'login',
+          autoComplete: 'username',
+          name: 'username'
+        },
         value: user,
         onChange: function onChange(e) {
           return setUser(e.target.value);
         },
         disabled: isAnonymous
       }),
-      labels.password,
+      _react2.default.createElement(
+        'label',
+        { htmlFor: 'password' },
+        labels.password
+      ),
       _react2.default.createElement(_TextField2.default, {
-        inputProps: { className: classes.input },
+        inputProps: {
+          className: classes.input,
+          id: 'password',
+          autoComplete: 'current-password',
+          name: 'password'
+        },
         value: password,
         onChange: function onChange(e) {
           return setPassword(e.target.value);

package/lib/CollapseButtons/CollapseButtons.js

@@ -72,7 +72,9 @@ var CollapseButtons = function CollapseButtons(props) {
       breakpoint = _props$breakpoint === undefined ? function (theme) {
     return theme.breakpoints.down('sm');
   } : _props$breakpoint,
-      justify = props.justify;
+      justify = props.justify,
+      _props$textTransform = props.textTransform,
+      textTransform = _props$textTransform === undefined ? 'none' : _props$textTransform;
 
 
   var classes = useStyles();
@@ -114,6 +116,7 @@ var CollapseButtons = function CollapseButtons(props) {
         _Grid2.default,
         _extends({ item: true, xs: 12, sm: 12, md: R.nth(nbColumns)(COLUMNS) }, gridButtonsProps, { key: id }),
         _react2.default.createElement(_.ToggleButton, {
+          textTransform: textTransform,
           label: label,
           tabindex: R.isNil(toggleId) || R.prop(id)(toggleId) || R.compose(R.not, R.head, R.values)(toggleId) ? 0 : -1,
           isOpen: R.prop(id)(toggleId),
@@ -185,7 +188,8 @@ CollapseButtons.propTypes = process.env.NODE_ENV !== "production" ? {
   isSecondLevelClikable: _propTypes2.default.bool,
   breakpoint: _propTypes2.default.func,
   gridButtonsProps: _propTypes2.default.object,
-  justify: _propTypes2.default.string
+  justify: _propTypes2.default.string,
+  textTransform: _propTypes2.default.string
 } : {};
 
 exports.default = CollapseButtons;

package/lib/TableHtml5/TableHtml5.js

@@ -60,7 +60,8 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     },
     stickyHeader: {
       position: 'sticky',
-      top: 0
+      top: 0,
+      zIndex: 2
     }
   };
 });
@@ -88,6 +89,10 @@ var getEnhancedValuesHeaderData = exports.getEnhancedValuesHeaderData = function
   }, R.times(R.always([]), colLength)))(data);
 };
 
+var getCellsWidth = R.addIndex(R.reduce)(function (acc, element, index) {
+  return R.append(R.add(acc[index], R.propOr(0, 'offsetWidth', element)), acc);
+}, [0]);
+
 var TableHtml5 = function TableHtml5(_ref) {
   var cells = _ref.cells,
       _ref$headerData = _ref.headerData,
@@ -104,10 +109,16 @@ var TableHtml5 = function TableHtml5(_ref) {
       headerHeight = _useState[0],
       setHeaderHeight = _useState[1];
 
+  var _useState2 = (0, _react.useState)([0]),
+      subHeadCellsWidth = _useState2[0],
+      setSubHeadCellsWidth = _useState2[1];
+
   var headerRef = (0, _react.useRef)(null);
+  var subHeadCellsRef = (0, _react.useRef)([]);
 
   (0, _react.useEffect)(function () {
     setHeaderHeight(R.pathOr(0, ['current', 'clientHeight'], headerRef));
+    setSubHeadCellsWidth(getCellsWidth(R.prop('current', subHeadCellsRef)));
   }, [cells, headerData, sectionsData]);
 
   (0, _react.useEffect)(function () {
@@ -115,8 +126,9 @@ var TableHtml5 = function TableHtml5(_ref) {
     var resizeListener = function resizeListener() {
       clearTimeout(timeoutId);
       timeoutId = setTimeout(function () {
-        return setHeaderHeight(R.pathOr(0, ['current', 'clientHeight'], headerRef), 150);
-      });
+        setHeaderHeight(R.pathOr(0, ['current', 'clientHeight'], headerRef));
+        setSubHeadCellsWidth(getCellsWidth(R.prop('current', subHeadCellsRef)));
+      }, 150);
     };
     window.addEventListener('resize', resizeListener);
     return function () {
@@ -146,7 +158,9 @@ var TableHtml5 = function TableHtml5(_ref) {
       _react2.default.createElement(_subHeader2.default, {
         headerData: headerData,
         xLayoutData: xLayoutData,
-        activeCellIds: activeCellIds
+        activeCellIds: activeCellIds,
+        ref: subHeadCellsRef,
+        subHeadCellsWidth: subHeadCellsWidth
       })
     ),
     mapIndexed(function (section, index) {
@@ -161,7 +175,8 @@ var TableHtml5 = function TableHtml5(_ref) {
         xLayoutDataLength: xLayoutDataLength,
         cellHandler: cellHandler,
         activeCellIds: activeCellIds,
-        activeCellHandler: activeCellHandler
+        activeCellHandler: activeCellHandler,
+        subHeadCellsWidth: subHeadCellsWidth
       });
     }, sectionsData)
   );

package/lib/TableHtml5/header.js

@@ -106,7 +106,8 @@ var Header = function Header(_ref) {
           className: (0, _classnames2.default)(classes.tableHeadCell, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx)),
           colSpan: R.inc(xLayoutDataLength),
           id: id,
-          tabIndex: 0
+          tabIndex: 0,
+          style: { position: 'sticky', left: 0, zIndex: 1 }
         },
         _react2.default.createElement(
           'div',

package/lib/TableHtml5/section.js

@@ -68,7 +68,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       verticalAlign: 'middle'
     },
     fillerCell: {
-      width: '30px',
+      minWidth: '30px',
       backgroundColor: theme.palette.grey[200],
       verticalAlign: 'top',
       border: 'inherit',
@@ -106,7 +106,8 @@ var Section = function Section(_ref) {
       activeCellIds = _ref.activeCellIds,
       headerHeight = _ref.headerHeight,
       sectionIndex = _ref.sectionIndex,
-      nbColumnsByRows = _ref.nbColumnsByRows;
+      nbColumnsByRows = _ref.nbColumnsByRows,
+      subHeadCellsWidth = _ref.subHeadCellsWidth;
 
   var classes = useStyles();
   var currentSection = R.path([0, 'key'], section);
@@ -153,7 +154,8 @@ var Section = function Section(_ref) {
               className: (0, _classnames2.default)(classes.rowTitle, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx[classes.highlight] = R.prop(rowId)(activeCellIds), _cx)),
               id: id,
               headers: 'subHeader_' + index + ' ' + currentSection,
-              component: 'th'
+              component: 'th',
+              style: { position: 'sticky', left: subHeadCellsWidth[index], zIndex: 1 }
             },
             _react2.default.createElement(
               'div',
@@ -175,7 +177,8 @@ var Section = function Section(_ref) {
         _react2.default.createElement(
           _TableCell2.default,
           {
-            className: (0, _classnames2.default)(classes.fillerCell, (_cx2 = {}, _cx2[classes.highlight] = R.prop(rowId)(activeCellIds), _cx2))
+            className: (0, _classnames2.default)(classes.fillerCell, (_cx2 = {}, _cx2[classes.highlight] = R.prop(rowId)(activeCellIds), _cx2)),
+            style: { position: 'sticky', left: R.last(subHeadCellsWidth) }
           },
           _react2.default.createElement(
             'div',
@@ -222,7 +225,8 @@ Section.propTypes = process.env.NODE_ENV !== "production" ? {
   sectionIndex: _propTypes2.default.number,
   headerNumberRows: _propTypes2.default.number,
   nbColumnsByRows: _propTypes2.default.array,
-  maxColumns: _propTypes2.default.number
+  maxColumns: _propTypes2.default.number,
+  subHeadCellsWidth: _propTypes2.default.arrayOf(_propTypes2.default.number)
 } : {};
 
 exports.default = Section;

package/lib/TableHtml5/sectionHeader.js

@@ -97,7 +97,7 @@ var SectionHeader = function SectionHeader(_ref) {
     {
       key: section.key,
       className: classes.stickyHeaderSection,
-      style: { top: headerHeight + 'px' }
+      style: { top: headerHeight, zIndex: 2 }
     },
     _react2.default.createElement(
       _TableCell2.default,

package/lib/TableHtml5/subHeader.js

@@ -77,10 +77,11 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
 
 var mapIndexed = R.addIndex(R.map);
 
-var SubHeader = function SubHeader(_ref) {
+var SubHeader = _react2.default.forwardRef(function (_ref, refs) {
   var headerData = _ref.headerData,
       xLayoutData = _ref.xLayoutData,
-      activeCellIds = _ref.activeCellIds;
+      activeCellIds = _ref.activeCellIds,
+      subHeadCellsWidth = _ref.subHeadCellsWidth;
 
   var classes = useStyles();
   return _react2.default.createElement(
@@ -93,7 +94,11 @@ var SubHeader = function SubHeader(_ref) {
           component: 'th',
           className: classes.columnsTitle,
           key: index,
-          id: 'subHeader_' + index
+          id: 'subHeader_' + index,
+          style: { position: 'sticky', left: subHeadCellsWidth[index], zIndex: 1 },
+          ref: function ref(element) {
+            return refs.current[index] = element;
+          }
         },
         _react2.default.createElement(
           'div',
@@ -107,7 +112,10 @@ var SubHeader = function SubHeader(_ref) {
         )
       );
     }, xLayoutData),
-    _react2.default.createElement(_TableCell2.default, { className: classes.fillerCell }),
+    _react2.default.createElement(_TableCell2.default, {
+      className: classes.fillerCell,
+      style: { position: 'sticky', left: R.last(subHeadCellsWidth) }
+    }),
     mapIndexed(function (item, index) {
       var _cx;
 
@@ -121,12 +129,13 @@ var SubHeader = function SubHeader(_ref) {
       );
     }, headerData)
   );
-};
+});
 
 SubHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   activeCellIds: _propTypes2.default.object,
   headerData: _propTypes2.default.array,
-  xLayoutData: _propTypes2.default.array
+  xLayoutData: _propTypes2.default.array,
+  subHeadCellsWidth: _propTypes2.default.arrayOf(_propTypes2.default.number)
 } : {};
 
 exports.default = SubHeader;

package/lib/ToggleButton/ToggleButton.js

@@ -53,7 +53,10 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       }
     },
     label: {
-      textTransform: 'capitalize',
+      textTransform: function textTransform(_ref) {
+        var _textTransform = _ref.textTransform;
+        return _textTransform;
+      },
       textAlign: 'left',
       fontSize: '0.9375rem',
       lineHeight: '1.0'
@@ -65,17 +68,19 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
   };
 });
 
-var ToggleButton = function ToggleButton(_ref) {
+var ToggleButton = function ToggleButton(_ref2) {
   var _cx;
 
-  var isOpen = _ref.isOpen,
-      label = _ref.label,
-      toggle = _ref.toggle,
-      testId = _ref.testId,
-      _ref$tabindex = _ref.tabindex,
-      tabindex = _ref$tabindex === undefined ? 0 : _ref$tabindex;
+  var isOpen = _ref2.isOpen,
+      label = _ref2.label,
+      toggle = _ref2.toggle,
+      testId = _ref2.testId,
+      _ref2$tabindex = _ref2.tabindex,
+      tabindex = _ref2$tabindex === undefined ? 0 : _ref2$tabindex,
+      _ref2$textTransform = _ref2.textTransform,
+      textTransform = _ref2$textTransform === undefined ? 'capitalize' : _ref2$textTransform;
 
-  var classes = useStyles();
+  var classes = useStyles({ textTransform: textTransform });
   return _react2.default.createElement(
     _Button2.default,
     {
@@ -98,7 +103,8 @@ ToggleButton.propTypes = process.env.NODE_ENV !== "production" ? {
   tabindex: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
   isOpen: _propTypes2.default.bool,
   label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
-  toggle: _propTypes2.default.func
+  toggle: _propTypes2.default.func,
+  textTransform: _propTypes2.default.string
 } : {};
 
 exports.default = ToggleButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sis-cc/dotstatsuite-visions",
-  "version": "6.5.0",
+  "version": "6.6.1",
   "description": "Library of visual components",
   "author": "OECD",
   "homepage": "https://visions-qa.siscc.org/#o",
@@ -76,7 +76,7 @@
     "jest-environment-jsdom-fourteen": "0.1.0",
     "jss-rtl": "^0.2.3",
     "lint-staged": "^8.2.1",
-    "nwb": "^0.23.0",
+    "nwb": "0.23.0",
     "prettier": "1.12.1",
     "pretty-quick": "^1.10.0",
     "react-a11y": "^1.1.0",