@sis-cc/dotstatsuite-visions 6.6.1 → 6.7.0

package/lib/DataEdit/Input.js

@@ -45,7 +45,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-var useStyles = (0, _styles.makeStyles)(function (theme) {
+var useStyles = (0, _styles.makeStyles)(function () {
   return {
     visibility: {
       visibility: 'hidden'

package/lib/Share/Mode.js

@@ -42,6 +42,8 @@ var _Radio = require('@material-ui/core/Radio');
 
 var _Radio2 = _interopRequireDefault(_Radio);
 
+var _ = require('../');
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -63,16 +65,54 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
         padding: theme.spacing(1, 0)
       }
     },
-    label: theme.typography.body2
+    label: theme.typography.body2,
+    warning: _extends({
+      marginLeft: theme.spacing(0.5),
+      width: 'unset',
+      fontSize: 'inherit',
+      height: '1.3em'
+    }, R.pathOr({}, ['mixins', 'share', 'warning'], theme))
   };
 });
 
-var Mode = function Mode(_ref) {
-  var changeMode = _ref.changeMode,
-      mode = _ref.mode,
-      _ref$modes = _ref.modes,
-      modes = _ref$modes === undefined ? [] : _ref$modes,
-      title = _ref.title;
+var Warning = function Warning(_ref) {
+  var title = _ref.title;
+
+  var classes = useStyles();
+  var theme = (0, _styles.useTheme)();
+  var warningColor = R.path(['palette', 'highlight', 'hl1'], theme) || theme.palette.primary.dark;
+  var warningTextColor = theme.palette.getContrastText(warningColor);
+  return _react2.default.createElement(
+    _.Tooltip,
+    {
+      className: classes.warning,
+      title: title,
+      tabIndex: 0,
+      variant: 'warning',
+      'aria-hidden': false,
+      placement: 'bottom',
+      PopperProps: {
+        modifiers: {
+          flip: {
+            behavior: ['bottom', 'top', 'left', 'right']
+          }
+        }
+      }
+    },
+    _react2.default.createElement(_.Warning, { pathBackgroundColor: warningColor, pathColor: warningTextColor })
+  );
+};
+
+Warning.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: _propTypes2.default.string
+} : {};
+
+var Mode = function Mode(_ref2) {
+  var changeMode = _ref2.changeMode,
+      mode = _ref2.mode,
+      _ref2$modes = _ref2.modes,
+      modes = _ref2$modes === undefined ? [] : _ref2$modes,
+      title = _ref2.title;
 
   var classes = useStyles();
   return _react2.default.createElement(
@@ -91,14 +131,20 @@ var Mode = function Mode(_ref) {
         { onChange: function onChange(e) {
             return changeMode(e.target.value);
           }, value: mode },
-        R.map(function (_ref2) {
-          var label = _ref2.label,
-              value = _ref2.value;
+        R.map(function (_ref3) {
+          var label = _ref3.label,
+              value = _ref3.value,
+              warningMessage = _ref3.warningMessage;
           return _react2.default.createElement(_FormControlLabel2.default, {
             classes: { label: classes.label },
             key: value,
             control: _react2.default.createElement(_Radio2.default, { variant: 'outlined', color: 'primary' }),
-            label: label,
+            label: _react2.default.createElement(
+              'span',
+              null,
+              label,
+              warningMessage && _react2.default.createElement(Warning, { title: warningMessage })
+            ),
             value: value
           });
         })(modes)
@@ -112,7 +158,8 @@ Mode.propTypes = process.env.NODE_ENV !== "production" ? {
   mode: _propTypes2.default.string,
   modes: _propTypes2.default.arrayOf(_propTypes2.default.shape({
     label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
-    value: _propTypes2.default.string
+    value: _propTypes2.default.string,
+    warningMessage: _propTypes2.default.string
   })),
   title: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element])
 } : {};

package/lib/TableHtml5/TableHtml5.js

@@ -101,7 +101,10 @@ var TableHtml5 = function TableHtml5(_ref) {
       sectionsData = _ref$sectionsData === undefined ? [] : _ref$sectionsData,
       cellHandler = _ref.cellHandler,
       activeCellIds = _ref.activeCellIds,
-      activeCellHandler = _ref.activeCellHandler;
+      activeCellHandler = _ref.activeCellHandler,
+      sideToggle = _ref.sideToggle,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === undefined ? 'vis-table' : _ref$testId;
 
   var classes = useStyles();
 
@@ -143,22 +146,29 @@ var TableHtml5 = function TableHtml5(_ref) {
   var xLayoutDataLength = R.length(xLayoutData);
   var valuesHeaderData = getEnhancedValuesHeaderData(headerData);
   var nbColumnsByRows = R.map(R.length)(valuesHeaderData);
-
   return _react2.default.createElement(
     _Table2.default,
-    { className: classes.table, 'aria-label': 'table', size: 'small', style: { padding: '0px 0px' } },
+    {
+      className: classes.table,
+      'aria-label': 'table',
+      size: 'small',
+      style: { padding: '0px 0px' },
+      'data-testid': testId
+    },
     _react2.default.createElement(
       'thead',
       { ref: headerRef, className: classes.stickyHeader },
       _react2.default.createElement(_header2.default, {
         headerData: headerData,
         valuesHeaderData: valuesHeaderData,
-        xLayoutDataLength: xLayoutDataLength
+        xLayoutDataLength: xLayoutDataLength,
+        subHeadCellsWidth: subHeadCellsWidth
       }),
       _react2.default.createElement(_subHeader2.default, {
         headerData: headerData,
         xLayoutData: xLayoutData,
         activeCellIds: activeCellIds,
+        sideToggle: sideToggle,
         ref: subHeadCellsRef,
         subHeadCellsWidth: subHeadCellsWidth
       })
@@ -176,6 +186,7 @@ var TableHtml5 = function TableHtml5(_ref) {
         cellHandler: cellHandler,
         activeCellIds: activeCellIds,
         activeCellHandler: activeCellHandler,
+        sideToggle: sideToggle,
         subHeadCellsWidth: subHeadCellsWidth
       });
     }, sectionsData)
@@ -188,7 +199,9 @@ TableHtml5.propTypes = process.env.NODE_ENV !== "production" ? {
   sectionsData: _propTypes2.default.array,
   cellHandler: _propTypes2.default.func,
   activeCellHandler: _propTypes2.default.func,
-  activeCellIds: _propTypes2.default.object
+  activeCellIds: _propTypes2.default.object,
+  sideToggle: _propTypes2.default.func,
+  testId: _propTypes2.default.string
 } : {};
 
 exports.default = TableHtml5;

package/lib/TableHtml5/cell.js

@@ -32,6 +32,10 @@ var _Link = require('@material-ui/core/Link');
 
 var _Link2 = _interopRequireDefault(_Link);
 
+var _sideIcon = require('./sideIcon');
+
+var _sideIcon2 = _interopRequireDefault(_sideIcon);
+
 var _flags = require('./flags');
 
 var _flags2 = _interopRequireDefault(_flags);
@@ -79,7 +83,9 @@ var Cell = function Cell(_ref) {
       cellHandler = _ref.cellHandler,
       activeCellHandler = _ref.activeCellHandler,
       isActive = _ref.isActive,
-      isHighlight = _ref.isHighlight;
+      isHighlight = _ref.isHighlight,
+      sideProps = _ref.sideProps,
+      sideToggle = _ref.sideToggle;
 
   var classes = useStyles();
   var hasFlag = R.not(R.isEmpty(flags));
@@ -112,6 +118,7 @@ var Cell = function Cell(_ref) {
       _react2.default.createElement(
         _Typography2.default,
         { variant: 'body1', tabIndex: 0, noWrap: hasFlag },
+        _react2.default.createElement(_sideIcon2.default, { sideProps: sideProps, sideToggle: sideToggle }),
         hasFlag && _react2.default.createElement(_flags2.default, { flags: flags }),
         uiValue
       )
@@ -128,7 +135,9 @@ Cell.propTypes = process.env.NODE_ENV !== "production" ? {
   cellHandler: _propTypes2.default.func,
   isActive: _propTypes2.default.bool,
   isHighlight: _propTypes2.default.bool,
-  activeCellHandler: _propTypes2.default.func
+  activeCellHandler: _propTypes2.default.func,
+  sideProps: _propTypes2.default.object,
+  sideToggle: _propTypes2.default.func
 } : {};
 
 exports.default = Cell;

package/lib/TableHtml5/header.js

@@ -36,6 +36,8 @@ var _flags = require('./flags');
 
 var _flags2 = _interopRequireDefault(_flags);
 
+var _utils = require('../utils');
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -72,9 +74,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       paddingTop: 0
     },
     stickyLabel: {
-      position: 'sticky',
-      left: theme.spacing(1),
-      right: theme.spacing(1)
+      position: 'sticky'
     }
   };
 });
@@ -85,9 +85,15 @@ var mapIndexed = R.addIndex(R.map);
 var Header = function Header(_ref) {
   var headerData = _ref.headerData,
       valuesHeaderData = _ref.valuesHeaderData,
-      xLayoutDataLength = _ref.xLayoutDataLength;
+      xLayoutDataLength = _ref.xLayoutDataLength,
+      subHeadCellsWidth = _ref.subHeadCellsWidth;
 
   var classes = useStyles();
+  var theme = (0, _styles.useTheme)();
+  var isRtl = (0, _utils.getIsRtl)(theme);
+
+  var stickyLabelPosition = R.last(subHeadCellsWidth) + 30 + theme.spacing(1);
+
   if (R.compose(R.anyPass([R.isNil, R.isEmpty]), R.path([0, 'data']))(headerData)) return null;
   return timesIndexed(function (index) {
     var _cx;
@@ -107,7 +113,7 @@ var Header = function Header(_ref) {
           colSpan: R.inc(xLayoutDataLength),
           id: id,
           tabIndex: 0,
-          style: { position: 'sticky', left: 0, zIndex: 1 }
+          style: isRtl ? { position: 'sticky', zIndex: 1, right: 0 } : { position: 'sticky', zIndex: 1, left: 0 }
         },
         _react2.default.createElement(
           'div',
@@ -140,7 +146,14 @@ var Header = function Header(_ref) {
             { className: classes.cellContentCenter },
             _react2.default.createElement(
               _Typography2.default,
-              { className: classes.stickyLabel, variant: 'body1' },
+              {
+                className: classes.stickyLabel,
+                style: {
+                  left: isRtl ? theme.spacing(1) : stickyLabelPosition,
+                  right: isRtl ? stickyLabelPosition : theme.spacing(1)
+                },
+                variant: 'body1'
+              },
               R.prop('label', headerItem),
               _react2.default.createElement(_flags2.default, { flags: flags, isHeader: true })
             )
@@ -154,7 +167,8 @@ var Header = function Header(_ref) {
 Header.propTypes = process.env.NODE_ENV !== "production" ? {
   headerData: _propTypes2.default.array,
   valuesHeaderData: _propTypes2.default.array,
-  xLayoutDataLength: _propTypes2.default.number
+  xLayoutDataLength: _propTypes2.default.number,
+  subHeadCellsWidth: _propTypes2.default.array
 } : {};
 
 exports.default = Header;

package/lib/TableHtml5/section.js

@@ -46,6 +46,10 @@ var _cell = require('./cell');
 
 var _cell2 = _interopRequireDefault(_cell);
 
+var _sideIcon = require('./sideIcon');
+
+var _sideIcon2 = _interopRequireDefault(_sideIcon);
+
 var _utils = require('../utils');
 
 var _flags = require('./flags');
@@ -74,7 +78,8 @@ 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.5) + 'px ' + theme.spacing(1) + 'px',
+      position: 'sticky'
     },
     cellContent: {
       display: 'flex',
@@ -91,7 +96,11 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     hierarchySpace: {
       marginBottom: 'auto'
     },
-    highlight: theme.mixins.table.cellHighlight
+    highlight: theme.mixins.table.cellHighlight,
+    stickyHeader: {
+      position: 'sticky',
+      zIndex: 1
+    }
   };
 });
 var mapIndexed = R.addIndex(R.map);
@@ -107,12 +116,15 @@ var Section = function Section(_ref) {
       headerHeight = _ref.headerHeight,
       sectionIndex = _ref.sectionIndex,
       nbColumnsByRows = _ref.nbColumnsByRows,
+      sideToggle = _ref.sideToggle,
       subHeadCellsWidth = _ref.subHeadCellsWidth;
 
   var classes = useStyles();
   var currentSection = R.path([0, 'key'], section);
   var headerNumberRows = R.length(nbColumnsByRows);
   var maxColumns = R.last(nbColumnsByRows);
+  var theme = (0, _styles.useTheme)();
+  var isRtl = (0, _utils.getIsRtl)(theme);
 
   return _react2.default.createElement(
     _TableBody2.default,
@@ -122,7 +134,8 @@ var Section = function Section(_ref) {
       section: section,
       currentSection: currentSection,
       xLayoutDataLength: xLayoutDataLength,
-      headerHeight: headerHeight
+      headerHeight: headerHeight,
+      sideToggle: sideToggle
     }),
     R.map(function (sectionbody) {
       var _cx2;
@@ -151,11 +164,11 @@ var Section = function Section(_ref) {
             _TableCell2.default,
             {
               key: id,
-              className: (0, _classnames2.default)(classes.rowTitle, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx[classes.highlight] = R.prop(rowId)(activeCellIds), _cx)),
+              className: (0, _classnames2.default)(classes.rowTitle, classes.stickyHeader, (_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',
-              style: { position: 'sticky', left: subHeadCellsWidth[index], zIndex: 1 }
+              style: isRtl ? { right: subHeadCellsWidth[index] } : { left: subHeadCellsWidth[index] }
             },
             _react2.default.createElement(
               'div',
@@ -178,11 +191,12 @@ var Section = function Section(_ref) {
           _TableCell2.default,
           {
             className: (0, _classnames2.default)(classes.fillerCell, (_cx2 = {}, _cx2[classes.highlight] = R.prop(rowId)(activeCellIds), _cx2)),
-            style: { position: 'sticky', left: R.last(subHeadCellsWidth) }
+            style: isRtl ? { right: R.last(subHeadCellsWidth) } : { left: R.last(subHeadCellsWidth) }
           },
           _react2.default.createElement(
             'div',
             { className: classes.flagContainer },
+            _react2.default.createElement(_sideIcon2.default, { sideProps: R.prop('sideProps', sectionbody), sideToggle: sideToggle }),
             _react2.default.createElement(_flags2.default, { flags: R.prop('flags', sectionbody) })
           )
         ),
@@ -199,6 +213,7 @@ var Section = function Section(_ref) {
           }, R.pathOr({ value: '..' }, [item.key, currentSection, sectionbody.key, 0], cells), {
             headers: rowIds + ' ' + columnIds + ' ' + currentSection,
             cellHandler: cellHandler,
+            sideToggle: sideToggle,
             isActive: isActive,
             isHighlight: R.any(R.identity)([R.prop(rowId)(activeCellIds), R.prop(columnIndex)(activeCellIds)]),
             activeCellHandler: R.is(Function)(activeCellHandler) ? function () {
@@ -226,6 +241,7 @@ Section.propTypes = process.env.NODE_ENV !== "production" ? {
   headerNumberRows: _propTypes2.default.number,
   nbColumnsByRows: _propTypes2.default.array,
   maxColumns: _propTypes2.default.number,
+  sideToggle: _propTypes2.default.func,
   subHeadCellsWidth: _propTypes2.default.arrayOf(_propTypes2.default.number)
 } : {};
 

package/lib/TableHtml5/sectionHeader.js

@@ -34,6 +34,10 @@ var _TableRow = require('@material-ui/core/TableRow');
 
 var _TableRow2 = _interopRequireDefault(_TableRow);
 
+var _sideIcon = require('./sideIcon');
+
+var _sideIcon2 = _interopRequireDefault(_sideIcon);
+
 var _flags = require('./flags');
 
 var _flags2 = _interopRequireDefault(_flags);
@@ -87,7 +91,8 @@ var SectionHeader = function SectionHeader(_ref) {
       section = _ref.section,
       currentSection = _ref.currentSection,
       xLayoutDataLength = _ref.xLayoutDataLength,
-      headerHeight = _ref.headerHeight;
+      headerHeight = _ref.headerHeight,
+      sideToggle = _ref.sideToggle;
 
   var classes = useStyles();
   if (R.compose(R.anyPass([R.isNil, R.isEmpty]), R.path([0, 'data']))(section)) return null;
@@ -142,6 +147,7 @@ var SectionHeader = function SectionHeader(_ref) {
         _react2.default.createElement(
           'div',
           { className: classes.flag },
+          _react2.default.createElement(_sideIcon2.default, { sideProps: R.path([0, 'sideProps'], section), sideToggle: sideToggle }),
           _react2.default.createElement(_flags2.default, { flags: R.path([0, 'flags'], section) })
         )
       )
@@ -154,7 +160,8 @@ SectionHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   section: _propTypes2.default.array,
   currentSection: _propTypes2.default.string,
   xLayoutDataLength: _propTypes2.default.number,
-  headerHeight: _propTypes2.default.number
+  headerHeight: _propTypes2.default.number,
+  sideToggle: _propTypes2.default.func
 } : {};
 
 exports.default = SectionHeader;

package/lib/TableHtml5/sideIcon.js

@@ -0,0 +1,68 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _ramda = require('ramda');
+
+var R = _interopRequireWildcard(_ramda);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _styles = require('@material-ui/core/styles');
+
+var _Info = require('@material-ui/icons//Info');
+
+var _Info2 = _interopRequireDefault(_Info);
+
+var _IconButton = require('@material-ui/core/IconButton');
+
+var _IconButton2 = _interopRequireDefault(_IconButton);
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    icon: {
+      color: theme.palette.primary.main,
+      padding: 0
+    }
+  };
+});
+
+var SideIcon = function SideIcon(_ref) {
+  var sideProps = _ref.sideProps,
+      sideToggle = _ref.sideToggle;
+
+  var classes = useStyles();
+  if (R.isNil(sideProps) || !R.is(Function, sideToggle)) {
+    return null;
+  }
+  return _react2.default.createElement(
+    _IconButton2.default,
+    {
+      size: 'small',
+      className: classes.icon,
+      onClick: function onClick() {
+        return sideToggle(sideProps);
+      },
+      'data-testid': 'ref-md-info'
+    },
+    _react2.default.createElement(_Info2.default, { fontSize: 'small' })
+  );
+};
+
+SideIcon.propTypes = process.env.NODE_ENV !== "production" ? {
+  sideProps: _propTypes2.default.object,
+  sideToggle: _propTypes2.default.func
+} : {};
+
+exports.default = SideIcon;
+module.exports = exports['default'];

package/lib/TableHtml5/subHeader.js

@@ -38,6 +38,10 @@ var _flags = require('./flags');
 
 var _flags2 = _interopRequireDefault(_flags);
 
+var _sideIcon = require('./sideIcon');
+
+var _sideIcon2 = _interopRequireDefault(_sideIcon);
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -51,7 +55,9 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       borderRight: '1px solid ' + theme.palette.grey[500],
       padding: theme.spacing(0.5) + 'px ' + theme.spacing(1) + 'px',
       color: theme.palette.grey['A700'],
-      verticalAlign: 'middle'
+      verticalAlign: 'middle',
+      position: 'sticky',
+      zIndex: 1
     },
     fillerCell: {
       backgroundColor: theme.palette.grey[200],
@@ -81,9 +87,12 @@ var SubHeader = _react2.default.forwardRef(function (_ref, refs) {
   var headerData = _ref.headerData,
       xLayoutData = _ref.xLayoutData,
       activeCellIds = _ref.activeCellIds,
-      subHeadCellsWidth = _ref.subHeadCellsWidth;
+      subHeadCellsWidth = _ref.subHeadCellsWidth,
+      sideToggle = _ref.sideToggle;
 
   var classes = useStyles();
+  var theme = (0, _styles.useTheme)();
+  var isRtl = (0, _utils.getIsRtl)(theme);
   return _react2.default.createElement(
     _TableRow2.default,
     null,
@@ -95,7 +104,7 @@ var SubHeader = _react2.default.forwardRef(function (_ref, refs) {
           className: classes.columnsTitle,
           key: index,
           id: 'subHeader_' + index,
-          style: { position: 'sticky', left: subHeadCellsWidth[index], zIndex: 1 },
+          style: isRtl ? { right: subHeadCellsWidth[index] } : { left: subHeadCellsWidth[index] },
           ref: function ref(element) {
             return refs.current[index] = element;
           }
@@ -114,7 +123,7 @@ var SubHeader = _react2.default.forwardRef(function (_ref, refs) {
     }, xLayoutData),
     _react2.default.createElement(_TableCell2.default, {
       className: classes.fillerCell,
-      style: { position: 'sticky', left: R.last(subHeadCellsWidth) }
+      style: isRtl ? { position: 'sticky', right: R.last(subHeadCellsWidth) } : { position: 'sticky', left: R.last(subHeadCellsWidth) }
     }),
     mapIndexed(function (item, index) {
       var _cx;
@@ -125,6 +134,7 @@ var SubHeader = _react2.default.forwardRef(function (_ref, refs) {
           key: index,
           className: (0, _classnames2.default)(classes.fillerCell, (_cx = {}, _cx[classes.highlight] = R.prop(index)(activeCellIds), _cx))
         },
+        _react2.default.createElement(_sideIcon2.default, { sideProps: R.prop('sideProps', item), sideToggle: sideToggle }),
         _react2.default.createElement(_flags2.default, { flags: R.prop('flags', item) })
       );
     }, headerData)
@@ -135,6 +145,7 @@ SubHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   activeCellIds: _propTypes2.default.object,
   headerData: _propTypes2.default.array,
   xLayoutData: _propTypes2.default.array,
+  sideToggle: _propTypes2.default.func,
   subHeadCellsWidth: _propTypes2.default.arrayOf(_propTypes2.default.number)
 } : {};
 

package/lib/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 exports.__esModule = true;
-exports.T4_BREAKPOINTS = exports.innerPalette = exports.sisccTheme = exports.AuthDialog = exports.VerticalButton = exports.Tooltip = exports.ToggleButton = exports.Tag = exports.TablePreview = exports.TableLayout = exports.Cell = exports.TableHtml5 = exports.TableHeader = exports.TableFooter = exports.Table = exports.Spotlight = exports.SisccFooter = exports.Share = exports.Select = exports.ScopeList = exports.reduceChildren = exports.spotlightScopeListEngine = exports.PeriodPicker = exports.Pagination = exports.NoData = exports.Logo = exports.Loading = exports.LabelDivider = exports.InputNumber = exports.Input = exports.ExpansionPanel = exports.DataFooter = exports.DataHeader = exports.Dataflow = exports.DataEdit = exports.CollapseButtons = exports.Chips = exports.ChartsConfig = exports.Button = exports.Breadcrumbs = exports.ApiQueries = exports.Alert = undefined;
+exports.T4_BREAKPOINTS = exports.innerPalette = exports.sisccTheme = exports.AuthDialog = exports.VerticalButton = exports.Tooltip = exports.ToggleButton = exports.Tag = exports.TablePreview = exports.TableLayout = exports.Cell = exports.TableHtml5 = exports.TableHeader = exports.TableFooter = exports.Table = exports.Spotlight = exports.SisccFooter = exports.Share = exports.Select = exports.ScopeList = exports.reduceChildren = exports.spotlightScopeListEngine = exports.PeriodPicker = exports.Pagination = exports.NoData = exports.Logo = exports.Loading = exports.LabelDivider = exports.InputNumber = exports.Input = exports.ExpansionPanel = exports.DataFooter = exports.DataHeader = exports.Dataflow = exports.DataEdit = exports.CollapsibleTree = exports.CollapseButtons = exports.Chips = exports.ChartsConfig = exports.Button = exports.Breadcrumbs = exports.ApiQueries = exports.Alert = undefined;
 
 var _Alert = require('./Alert');
 
@@ -66,6 +66,15 @@ Object.defineProperty(exports, 'CollapseButtons', {
   }
 });
 
+var _CollapsibleTree = require('./CollapsibleTree');
+
+Object.defineProperty(exports, 'CollapsibleTree', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_CollapsibleTree).default;
+  }
+});
+
 var _DataEdit = require('./DataEdit');
 
 Object.defineProperty(exports, 'DataEdit', {

package/lib/theme.js

@@ -218,6 +218,19 @@ var sisccTheme = exports.sisccTheme = function sisccTheme(_ref) {
           fontFamily: "'Roboto Slab', serif"
         }
       },
+      collapsibleTree: {
+        title: {
+          fontSize: 17,
+          fontFamily: "'PT Sans Narrow', 'Helvetica Neue', Helvetica, Arial, sans-serif",
+          color: outerPalette.textLight || innerPalette.textLight
+        },
+        buttonSublevel: {
+          color: outerPalette.textLight || innerPalette.textLight,
+          fontSize: 14,
+          fontWeight: 700,
+          fontFamily: "'PT Sans Narrow', 'Helvetica Neue', Helvetica, Arial, sans-serif"
+        }
+      },
       dataEdit: {
         root: {
           fontWeight: 400,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sis-cc/dotstatsuite-visions",
-  "version": "6.6.1",
+  "version": "6.7.0",
   "description": "Library of visual components",
   "author": "OECD",
   "homepage": "https://visions-qa.siscc.org/#o",
@@ -39,7 +39,7 @@
     "glamorous": "^5.0.0",
     "numeral": "^2.0.6",
     "prop-types": "^15.7.2",
-    "ramda": "^0.26.1",
+    "ramda": "^0.27.0",
     "react": "^16.13.0",
     "react-beautiful-dnd": "^13.0.0",
     "react-dom": "^16.8.6",