@sis-cc/dotstatsuite-visions 7.1.0 → 7.2.0

package/es/DataHeader/DataHeader.js

@@ -15,7 +15,6 @@ import Flags from './Flags';
 import TooltipHeader from './TooltipHeader';
 import { getReducedContent } from './utils';
 import { Tooltip, Warning as WarningIcon } from '../';
-import InfoIcon from '../InfoIcon/InfoIcon';
 
 var useStyles = makeStyles(function (theme) {
   return {
@@ -98,33 +97,15 @@ var useStyles = makeStyles(function (theme) {
   };
 });
 
-var SideIcon = function SideIcon(_ref4) {
-  var sideProps = _ref4.sideProps,
-      sideToggle = _ref4.sideToggle;
-
-  if (R.isNil(sideProps) || !R.is(Function, sideToggle)) {
-    return null;
-  }
-  var isSelected = R.propOr(false, 'isSelected', sideProps);
-  return React.createElement(InfoIcon, { onClick: function onClick() {
-      return sideToggle(sideProps);
-    }, isSelected: isSelected });
-};
-
-SideIcon.propTypes = process.env.NODE_ENV !== "production" ? {
-  sideProps: PropTypes.object,
-  sideToggle: PropTypes.func
-} : {};
-
-var DataHeader = function DataHeader(_ref5) {
-  var children = _ref5.children,
-      title = _ref5.title,
-      _ref5$subtitle = _ref5.subtitle,
-      subtitle = _ref5$subtitle === undefined ? [] : _ref5$subtitle,
-      uprs = _ref5.uprs,
-      disclaimer = _ref5.disclaimer,
-      sideProps = _ref5.sideProps,
-      sideToggle = _ref5.sideToggle;
+var DataHeader = function DataHeader(_ref4) {
+  var children = _ref4.children,
+      title = _ref4.title,
+      _ref4$subtitle = _ref4.subtitle,
+      subtitle = _ref4$subtitle === undefined ? [] : _ref4$subtitle,
+      uprs = _ref4.uprs,
+      disclaimer = _ref4.disclaimer,
+      sideProps = _ref4.sideProps,
+      SideIcon = _ref4.SideIcon;
 
   var target = React.useRef(null);
 
@@ -154,6 +135,11 @@ var DataHeader = function DataHeader(_ref5) {
         Typography,
         { variant: 'h1', className: classes.title },
         title.label,
+        !R.isNil(SideIcon) && React.createElement(
+          'span',
+          { style: { 'margin-left': '10px' } },
+          React.createElement(SideIcon, { sideProps: sideProps })
+        ),
         React.createElement(Flags, { classes: classes, content: R.propOr([], 'flags', title) }),
         disclaimer && React.createElement(
           Tooltip,
@@ -207,7 +193,6 @@ var DataHeader = function DataHeader(_ref5) {
     React.createElement(
       'div',
       { className: classes.children },
-      React.createElement(SideIcon, { sideProps: sideProps, sideToggle: sideToggle }),
       R.not(R.isEmpty(reducedContent)) && React.createElement(
         TooltipHeader,
         { classes: classes, content: reducedContent },
@@ -245,7 +230,7 @@ DataHeader.propTypes = process.env.NODE_ENV !== "production" ? {
     label: PropTypes.string
   }),
   sideProps: PropTypes.object,
-  sideToggle: PropTypes.func,
+  SideIcon: PropTypes.func,
   disclaimer: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   children: PropTypes.node
 } : {};

package/es/TableHtml5/TableHtml5.js

@@ -69,8 +69,7 @@ var TableHtml5 = function TableHtml5(_ref) {
       cellHandler = _ref.cellHandler,
       activeCellIds = _ref.activeCellIds,
       activeCellHandler = _ref.activeCellHandler,
-      sideToggle = _ref.sideToggle,
-      selectedSideCoord = _ref.selectedSideCoord,
+      SideIcon = _ref.SideIcon,
       _ref$testId = _ref.testId,
       testId = _ref$testId === undefined ? 'vis-table' : _ref$testId;
 
@@ -136,8 +135,7 @@ var TableHtml5 = function TableHtml5(_ref) {
         headerData: headerData,
         xLayoutData: xLayoutData,
         activeCellIds: activeCellIds,
-        sideToggle: sideToggle,
-        selectedSideCoord: selectedSideCoord,
+        SideIcon: SideIcon,
         ref: subHeadCellsRef,
         subHeadCellsWidth: subHeadCellsWidth
       })
@@ -155,8 +153,7 @@ var TableHtml5 = function TableHtml5(_ref) {
         cellHandler: cellHandler,
         activeCellIds: activeCellIds,
         activeCellHandler: activeCellHandler,
-        sideToggle: sideToggle,
-        selectedSideCoord: selectedSideCoord,
+        SideIcon: SideIcon,
         subHeadCellsWidth: subHeadCellsWidth
       });
     }, sectionsData)
@@ -170,8 +167,7 @@ TableHtml5.propTypes = process.env.NODE_ENV !== "production" ? {
   cellHandler: PropTypes.func,
   activeCellHandler: PropTypes.func,
   activeCellIds: PropTypes.object,
-  sideToggle: PropTypes.func,
-  selectedSideCoord: PropTypes.object,
+  SideIcon: PropTypes.func,
   testId: PropTypes.string
 } : {};
 

package/es/TableHtml5/cell.js

@@ -6,7 +6,6 @@ import { makeStyles } from '@material-ui/core/styles';
 import TableCell from '@material-ui/core/TableCell';
 import Typography from '@material-ui/core/Typography';
 import Link from '@material-ui/core/Link';
-import SideIcon from './sideIcon';
 import Flags from './flags';
 
 var useStyles = makeStyles(function (theme) {
@@ -50,7 +49,7 @@ var Cell = function Cell(_ref) {
       isActive = _ref.isActive,
       isHighlight = _ref.isHighlight,
       sideProps = _ref.sideProps,
-      sideToggle = _ref.sideToggle;
+      SideIcon = _ref.SideIcon;
 
   var classes = useStyles();
   var hasFlag = R.not(R.isEmpty(flags));
@@ -83,7 +82,7 @@ var Cell = function Cell(_ref) {
       React.createElement(
         Typography,
         { variant: 'body1', tabIndex: 0, noWrap: hasFlag },
-        React.createElement(SideIcon, { sideProps: sideProps, sideToggle: sideToggle }),
+        !R.isNil(SideIcon) && React.createElement(SideIcon, { sideProps: sideProps }),
         hasFlag && React.createElement(Flags, { flags: flags }),
         uiValue
       )
@@ -102,7 +101,7 @@ Cell.propTypes = process.env.NODE_ENV !== "production" ? {
   isHighlight: PropTypes.bool,
   activeCellHandler: PropTypes.func,
   sideProps: PropTypes.object,
-  sideToggle: PropTypes.func
+  SideIcon: PropTypes.func
 } : {};
 
 export default Cell;

package/es/TableHtml5/section.js

@@ -11,7 +11,6 @@ import TableCell from '@material-ui/core/TableCell';
 import TableRow from '@material-ui/core/TableRow';
 import SectionHeader from './sectionHeader';
 import Cell from './cell';
-import SideIcon from './sideIcon';
 import { getLight, getIsRtl } from '../utils';
 import Flags from './flags';
 
@@ -71,8 +70,7 @@ var Section = function Section(_ref) {
       headerHeight = _ref.headerHeight,
       sectionIndex = _ref.sectionIndex,
       nbColumnsByRows = _ref.nbColumnsByRows,
-      sideToggle = _ref.sideToggle,
-      selectedSideCoord = _ref.selectedSideCoord,
+      SideIcon = _ref.SideIcon,
       subHeadCellsWidth = _ref.subHeadCellsWidth;
 
   var classes = useStyles();
@@ -91,8 +89,7 @@ var Section = function Section(_ref) {
       currentSection: currentSection,
       xLayoutDataLength: xLayoutDataLength,
       headerHeight: headerHeight,
-      sideToggle: sideToggle,
-      selectedSideCoord: selectedSideCoord
+      SideIcon: SideIcon
     }),
     R.map(function (sectionbody) {
       var _cx2;
@@ -153,11 +150,7 @@ var Section = function Section(_ref) {
           React.createElement(
             'div',
             { className: classes.flagContainer },
-            React.createElement(SideIcon, {
-              sideProps: R.prop('sideProps', sectionbody),
-              sideToggle: sideToggle,
-              selectedSideCoord: selectedSideCoord
-            }),
+            !R.isNil(SideIcon) && React.createElement(SideIcon, { sideProps: R.prop('sideProps', sectionbody) }),
             React.createElement(Flags, { flags: R.prop('flags', sectionbody) })
           )
         ),
@@ -174,7 +167,7 @@ var Section = function Section(_ref) {
           }, R.pathOr({ value: '..' }, [item.key, currentSection, sectionbody.key, 0], cells), {
             headers: rowIds + ' ' + columnIds + ' ' + currentSection,
             cellHandler: cellHandler,
-            sideToggle: sideToggle,
+            SideIcon: SideIcon,
             isActive: isActive,
             isHighlight: R.any(R.identity)([R.prop(rowId)(activeCellIds), R.prop(columnIndex)(activeCellIds)]),
             activeCellHandler: R.is(Function)(activeCellHandler) ? function () {
@@ -202,8 +195,7 @@ Section.propTypes = process.env.NODE_ENV !== "production" ? {
   headerNumberRows: PropTypes.number,
   nbColumnsByRows: PropTypes.array,
   maxColumns: PropTypes.number,
-  sideToggle: PropTypes.func,
-  selectedSideCoord: PropTypes.object,
+  SideIcon: PropTypes.func,
   subHeadCellsWidth: PropTypes.arrayOf(PropTypes.number)
 } : {};
 

package/es/TableHtml5/sectionHeader.js

@@ -8,7 +8,6 @@ import { makeStyles } from '@material-ui/core/styles';
 import Lens from '@material-ui/icons/Lens';
 import TableCell from '@material-ui/core/TableCell';
 import TableRow from '@material-ui/core/TableRow';
-import SideIcon from './sideIcon';
 import Flags from './flags';
 import { getDark } from '../utils';
 
@@ -33,8 +32,8 @@ var useStyles = makeStyles(function (theme) {
       marginRight: theme.spacing(0.5)
     },
     containerSection: {
-      display: 'flex',
-      justifyContent: 'space-between'
+      alignItems: 'baseline',
+      display: 'flex'
     },
     stickyHeaderSection: {
       position: 'sticky'
@@ -42,6 +41,9 @@ var useStyles = makeStyles(function (theme) {
     containerTextSection: {
       display: 'flex',
       alignItems: 'center'
+    },
+    flags: {
+      paddingLeft: 12
     }
   };
 });
@@ -53,8 +55,7 @@ var SectionHeader = function SectionHeader(_ref) {
       currentSection = _ref.currentSection,
       xLayoutDataLength = _ref.xLayoutDataLength,
       headerHeight = _ref.headerHeight,
-      sideToggle = _ref.sideToggle,
-      selectedSideCoord = _ref.selectedSideCoord;
+      SideIcon = _ref.SideIcon;
 
   var classes = useStyles();
   if (R.compose(R.anyPass([R.isNil, R.isEmpty]), R.path([0, 'data']))(section)) return null;
@@ -108,12 +109,8 @@ var SectionHeader = function SectionHeader(_ref) {
         ),
         React.createElement(
           'div',
-          null,
-          React.createElement(SideIcon, {
-            sideProps: R.path([0, 'sideProps'], section),
-            sideToggle: sideToggle,
-            selectedSideCoord: selectedSideCoord
-          }),
+          { className: classes.flags },
+          !R.isNil(SideIcon) && React.createElement(SideIcon, { sideProps: R.path([0, 'sideProps'], section) }),
           React.createElement(Flags, { flags: R.path([0, 'flags'], section) })
         )
       )
@@ -127,8 +124,7 @@ SectionHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   currentSection: PropTypes.string,
   xLayoutDataLength: PropTypes.number,
   headerHeight: PropTypes.number,
-  sideToggle: PropTypes.func,
-  selectedSideCoord: PropTypes.object
+  SideIcon: PropTypes.func
 } : {};
 
 export default SectionHeader;

package/es/TableHtml5/subHeader.js

@@ -8,7 +8,6 @@ import TableCell from '@material-ui/core/TableCell';
 import TableRow from '@material-ui/core/TableRow';
 import { getLight, getIsRtl } from '../utils';
 import Flags from './flags';
-import SideIcon from './sideIcon';
 
 var useStyles = makeStyles(function (theme) {
   return {
@@ -52,8 +51,7 @@ var SubHeader = React.forwardRef(function (_ref, refs) {
       xLayoutData = _ref.xLayoutData,
       activeCellIds = _ref.activeCellIds,
       subHeadCellsWidth = _ref.subHeadCellsWidth,
-      sideToggle = _ref.sideToggle,
-      selectedSideCoord = _ref.selectedSideCoord;
+      SideIcon = _ref.SideIcon;
 
   var classes = useStyles();
   var theme = useTheme();
@@ -99,11 +97,7 @@ var SubHeader = React.forwardRef(function (_ref, refs) {
           key: index,
           className: cx(classes.fillerCell, (_cx = {}, _cx[classes.highlight] = R.prop(index)(activeCellIds), _cx))
         },
-        React.createElement(SideIcon, {
-          sideProps: R.prop('sideProps', item),
-          sideToggle: sideToggle,
-          selectedSideCoord: selectedSideCoord
-        }),
+        !R.isNil(SideIcon) && React.createElement(SideIcon, { sideProps: R.prop('sideProps', item) }),
         React.createElement(Flags, { flags: R.prop('flags', item) })
       );
     }, headerData)
@@ -114,8 +108,7 @@ SubHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   activeCellIds: PropTypes.object,
   headerData: PropTypes.array,
   xLayoutData: PropTypes.array,
-  sideToggle: PropTypes.func,
-  selectedSideCoord: PropTypes.object,
+  SideIcon: PropTypes.func,
   subHeadCellsWidth: PropTypes.arrayOf(PropTypes.number)
 } : {};
 

package/lib/DataHeader/DataHeader.js

@@ -52,10 +52,6 @@ var _utils = require('./utils');
 
 var _ = require('../');
 
-var _InfoIcon = require('../InfoIcon/InfoIcon');
-
-var _InfoIcon2 = _interopRequireDefault(_InfoIcon);
-
 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 }; }
@@ -141,33 +137,15 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
   };
 });
 
-var SideIcon = function SideIcon(_ref4) {
-  var sideProps = _ref4.sideProps,
-      sideToggle = _ref4.sideToggle;
-
-  if (R.isNil(sideProps) || !R.is(Function, sideToggle)) {
-    return null;
-  }
-  var isSelected = R.propOr(false, 'isSelected', sideProps);
-  return _react2.default.createElement(_InfoIcon2.default, { onClick: function onClick() {
-      return sideToggle(sideProps);
-    }, isSelected: isSelected });
-};
-
-SideIcon.propTypes = process.env.NODE_ENV !== "production" ? {
-  sideProps: _propTypes2.default.object,
-  sideToggle: _propTypes2.default.func
-} : {};
-
-var DataHeader = function DataHeader(_ref5) {
-  var children = _ref5.children,
-      title = _ref5.title,
-      _ref5$subtitle = _ref5.subtitle,
-      subtitle = _ref5$subtitle === undefined ? [] : _ref5$subtitle,
-      uprs = _ref5.uprs,
-      disclaimer = _ref5.disclaimer,
-      sideProps = _ref5.sideProps,
-      sideToggle = _ref5.sideToggle;
+var DataHeader = function DataHeader(_ref4) {
+  var children = _ref4.children,
+      title = _ref4.title,
+      _ref4$subtitle = _ref4.subtitle,
+      subtitle = _ref4$subtitle === undefined ? [] : _ref4$subtitle,
+      uprs = _ref4.uprs,
+      disclaimer = _ref4.disclaimer,
+      sideProps = _ref4.sideProps,
+      SideIcon = _ref4.SideIcon;
 
   var target = _react2.default.useRef(null);
 
@@ -197,6 +175,11 @@ var DataHeader = function DataHeader(_ref5) {
         _Typography2.default,
         { variant: 'h1', className: classes.title },
         title.label,
+        !R.isNil(SideIcon) && _react2.default.createElement(
+          'span',
+          { style: { 'margin-left': '10px' } },
+          _react2.default.createElement(SideIcon, { sideProps: sideProps })
+        ),
         _react2.default.createElement(_Flags2.default, { classes: classes, content: R.propOr([], 'flags', title) }),
         disclaimer && _react2.default.createElement(
           _.Tooltip,
@@ -250,7 +233,6 @@ var DataHeader = function DataHeader(_ref5) {
     _react2.default.createElement(
       'div',
       { className: classes.children },
-      _react2.default.createElement(SideIcon, { sideProps: sideProps, sideToggle: sideToggle }),
       R.not(R.isEmpty(reducedContent)) && _react2.default.createElement(
         _TooltipHeader2.default,
         { classes: classes, content: reducedContent },
@@ -288,7 +270,7 @@ DataHeader.propTypes = process.env.NODE_ENV !== "production" ? {
     label: _propTypes2.default.string
   }),
   sideProps: _propTypes2.default.object,
-  sideToggle: _propTypes2.default.func,
+  SideIcon: _propTypes2.default.func,
   disclaimer: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
   children: _propTypes2.default.node
 } : {};

package/lib/TableHtml5/TableHtml5.js

@@ -102,8 +102,7 @@ var TableHtml5 = function TableHtml5(_ref) {
       cellHandler = _ref.cellHandler,
       activeCellIds = _ref.activeCellIds,
       activeCellHandler = _ref.activeCellHandler,
-      sideToggle = _ref.sideToggle,
-      selectedSideCoord = _ref.selectedSideCoord,
+      SideIcon = _ref.SideIcon,
       _ref$testId = _ref.testId,
       testId = _ref$testId === undefined ? 'vis-table' : _ref$testId;
 
@@ -169,8 +168,7 @@ var TableHtml5 = function TableHtml5(_ref) {
         headerData: headerData,
         xLayoutData: xLayoutData,
         activeCellIds: activeCellIds,
-        sideToggle: sideToggle,
-        selectedSideCoord: selectedSideCoord,
+        SideIcon: SideIcon,
         ref: subHeadCellsRef,
         subHeadCellsWidth: subHeadCellsWidth
       })
@@ -188,8 +186,7 @@ var TableHtml5 = function TableHtml5(_ref) {
         cellHandler: cellHandler,
         activeCellIds: activeCellIds,
         activeCellHandler: activeCellHandler,
-        sideToggle: sideToggle,
-        selectedSideCoord: selectedSideCoord,
+        SideIcon: SideIcon,
         subHeadCellsWidth: subHeadCellsWidth
       });
     }, sectionsData)
@@ -203,8 +200,7 @@ TableHtml5.propTypes = process.env.NODE_ENV !== "production" ? {
   cellHandler: _propTypes2.default.func,
   activeCellHandler: _propTypes2.default.func,
   activeCellIds: _propTypes2.default.object,
-  sideToggle: _propTypes2.default.func,
-  selectedSideCoord: _propTypes2.default.object,
+  SideIcon: _propTypes2.default.func,
   testId: _propTypes2.default.string
 } : {};
 

package/lib/TableHtml5/cell.js

@@ -32,10 +32,6 @@ 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);
@@ -85,7 +81,7 @@ var Cell = function Cell(_ref) {
       isActive = _ref.isActive,
       isHighlight = _ref.isHighlight,
       sideProps = _ref.sideProps,
-      sideToggle = _ref.sideToggle;
+      SideIcon = _ref.SideIcon;
 
   var classes = useStyles();
   var hasFlag = R.not(R.isEmpty(flags));
@@ -118,7 +114,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 }),
+        !R.isNil(SideIcon) && _react2.default.createElement(SideIcon, { sideProps: sideProps }),
         hasFlag && _react2.default.createElement(_flags2.default, { flags: flags }),
         uiValue
       )
@@ -137,7 +133,7 @@ Cell.propTypes = process.env.NODE_ENV !== "production" ? {
   isHighlight: _propTypes2.default.bool,
   activeCellHandler: _propTypes2.default.func,
   sideProps: _propTypes2.default.object,
-  sideToggle: _propTypes2.default.func
+  SideIcon: _propTypes2.default.func
 } : {};
 
 exports.default = Cell;

package/lib/TableHtml5/section.js

@@ -46,10 +46,6 @@ var _cell = require('./cell');
 
 var _cell2 = _interopRequireDefault(_cell);
 
-var _sideIcon = require('./sideIcon');
-
-var _sideIcon2 = _interopRequireDefault(_sideIcon);
-
 var _utils = require('../utils');
 
 var _flags = require('./flags');
@@ -116,8 +112,7 @@ var Section = function Section(_ref) {
       headerHeight = _ref.headerHeight,
       sectionIndex = _ref.sectionIndex,
       nbColumnsByRows = _ref.nbColumnsByRows,
-      sideToggle = _ref.sideToggle,
-      selectedSideCoord = _ref.selectedSideCoord,
+      SideIcon = _ref.SideIcon,
       subHeadCellsWidth = _ref.subHeadCellsWidth;
 
   var classes = useStyles();
@@ -136,8 +131,7 @@ var Section = function Section(_ref) {
       currentSection: currentSection,
       xLayoutDataLength: xLayoutDataLength,
       headerHeight: headerHeight,
-      sideToggle: sideToggle,
-      selectedSideCoord: selectedSideCoord
+      SideIcon: SideIcon
     }),
     R.map(function (sectionbody) {
       var _cx2;
@@ -198,11 +192,7 @@ var Section = function Section(_ref) {
           _react2.default.createElement(
             'div',
             { className: classes.flagContainer },
-            _react2.default.createElement(_sideIcon2.default, {
-              sideProps: R.prop('sideProps', sectionbody),
-              sideToggle: sideToggle,
-              selectedSideCoord: selectedSideCoord
-            }),
+            !R.isNil(SideIcon) && _react2.default.createElement(SideIcon, { sideProps: R.prop('sideProps', sectionbody) }),
             _react2.default.createElement(_flags2.default, { flags: R.prop('flags', sectionbody) })
           )
         ),
@@ -219,7 +209,7 @@ var Section = function Section(_ref) {
           }, R.pathOr({ value: '..' }, [item.key, currentSection, sectionbody.key, 0], cells), {
             headers: rowIds + ' ' + columnIds + ' ' + currentSection,
             cellHandler: cellHandler,
-            sideToggle: sideToggle,
+            SideIcon: SideIcon,
             isActive: isActive,
             isHighlight: R.any(R.identity)([R.prop(rowId)(activeCellIds), R.prop(columnIndex)(activeCellIds)]),
             activeCellHandler: R.is(Function)(activeCellHandler) ? function () {
@@ -247,8 +237,7 @@ Section.propTypes = process.env.NODE_ENV !== "production" ? {
   headerNumberRows: _propTypes2.default.number,
   nbColumnsByRows: _propTypes2.default.array,
   maxColumns: _propTypes2.default.number,
-  sideToggle: _propTypes2.default.func,
-  selectedSideCoord: _propTypes2.default.object,
+  SideIcon: _propTypes2.default.func,
   subHeadCellsWidth: _propTypes2.default.arrayOf(_propTypes2.default.number)
 } : {};
 

package/lib/TableHtml5/sectionHeader.js

@@ -34,10 +34,6 @@ 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);
@@ -69,8 +65,8 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       marginRight: theme.spacing(0.5)
     },
     containerSection: {
-      display: 'flex',
-      justifyContent: 'space-between'
+      alignItems: 'baseline',
+      display: 'flex'
     },
     stickyHeaderSection: {
       position: 'sticky'
@@ -78,6 +74,9 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     containerTextSection: {
       display: 'flex',
       alignItems: 'center'
+    },
+    flags: {
+      paddingLeft: 12
     }
   };
 });
@@ -89,8 +88,7 @@ var SectionHeader = function SectionHeader(_ref) {
       currentSection = _ref.currentSection,
       xLayoutDataLength = _ref.xLayoutDataLength,
       headerHeight = _ref.headerHeight,
-      sideToggle = _ref.sideToggle,
-      selectedSideCoord = _ref.selectedSideCoord;
+      SideIcon = _ref.SideIcon;
 
   var classes = useStyles();
   if (R.compose(R.anyPass([R.isNil, R.isEmpty]), R.path([0, 'data']))(section)) return null;
@@ -144,12 +142,8 @@ var SectionHeader = function SectionHeader(_ref) {
         ),
         _react2.default.createElement(
           'div',
-          null,
-          _react2.default.createElement(_sideIcon2.default, {
-            sideProps: R.path([0, 'sideProps'], section),
-            sideToggle: sideToggle,
-            selectedSideCoord: selectedSideCoord
-          }),
+          { className: classes.flags },
+          !R.isNil(SideIcon) && _react2.default.createElement(SideIcon, { sideProps: R.path([0, 'sideProps'], section) }),
           _react2.default.createElement(_flags2.default, { flags: R.path([0, 'flags'], section) })
         )
       )
@@ -163,8 +157,7 @@ SectionHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   currentSection: _propTypes2.default.string,
   xLayoutDataLength: _propTypes2.default.number,
   headerHeight: _propTypes2.default.number,
-  sideToggle: _propTypes2.default.func,
-  selectedSideCoord: _propTypes2.default.object
+  SideIcon: _propTypes2.default.func
 } : {};
 
 exports.default = SectionHeader;

package/lib/TableHtml5/subHeader.js

@@ -38,10 +38,6 @@ 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 }; }
@@ -88,8 +84,7 @@ var SubHeader = _react2.default.forwardRef(function (_ref, refs) {
       xLayoutData = _ref.xLayoutData,
       activeCellIds = _ref.activeCellIds,
       subHeadCellsWidth = _ref.subHeadCellsWidth,
-      sideToggle = _ref.sideToggle,
-      selectedSideCoord = _ref.selectedSideCoord;
+      SideIcon = _ref.SideIcon;
 
   var classes = useStyles();
   var theme = (0, _styles.useTheme)();
@@ -135,11 +130,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,
-          selectedSideCoord: selectedSideCoord
-        }),
+        !R.isNil(SideIcon) && _react2.default.createElement(SideIcon, { sideProps: R.prop('sideProps', item) }),
         _react2.default.createElement(_flags2.default, { flags: R.prop('flags', item) })
       );
     }, headerData)
@@ -150,8 +141,7 @@ SubHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   activeCellIds: _propTypes2.default.object,
   headerData: _propTypes2.default.array,
   xLayoutData: _propTypes2.default.array,
-  sideToggle: _propTypes2.default.func,
-  selectedSideCoord: _propTypes2.default.object,
+  SideIcon: _propTypes2.default.func,
   subHeadCellsWidth: _propTypes2.default.arrayOf(_propTypes2.default.number)
 } : {};
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sis-cc/dotstatsuite-visions",
-  "version": "7.1.0",
+  "version": "7.2.0",
   "description": "Library of visual components",
   "author": "OECD",
   "homepage": "https://visions-qa.siscc.org/#o",
@@ -19,6 +19,7 @@
   ],
   "scripts": {
     "build": "nwb build-react-component --no-demo && node scripts/doc && nwb build-demo",
+    "build:dev": "nwb build-react-component --no-demo",
     "clean": "nwb clean-module && nwb clean-demo",
     "prepublishOnly": "npm run build",
     "start": "nwb serve-react-demo",

package/es/InfoIcon/InfoIcon.js

@@ -1,37 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
-import MuiInfoIcon from '@material-ui/icons//Info';
-import IconButton from '@material-ui/core/IconButton';
-
-var useStyles = makeStyles(function (theme) {
-  return {
-    icon: {
-      color: function color(_ref) {
-        var isSelected = _ref.isSelected;
-        return isSelected ? theme.palette.highlight.hl1 : theme.palette.primary.main;
-      },
-      padding: 0
-    }
-  };
-});
-
-var InfoIcon = function InfoIcon(_ref2) {
-  var onClick = _ref2.onClick,
-      _ref2$isSelected = _ref2.isSelected,
-      isSelected = _ref2$isSelected === undefined ? false : _ref2$isSelected;
-
-  var classes = useStyles({ isSelected: isSelected });
-  return React.createElement(
-    IconButton,
-    { size: 'small', className: classes.icon, onClick: onClick, 'data-testid': 'ref-md-info' },
-    React.createElement(MuiInfoIcon, { fontSize: 'small' })
-  );
-};
-
-InfoIcon.propTypes = process.env.NODE_ENV !== "production" ? {
-  onClick: PropTypes.func.isRequired,
-  isSelected: PropTypes.bool
-} : {};
-
-export default InfoIcon;

package/es/TableHtml5/sideIcon.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import * as R from 'ramda';
-import PropTypes from 'prop-types';
-import InfoIcon from '../InfoIcon/InfoIcon';
-
-var SideIcon = function SideIcon(_ref) {
-  var sideProps = _ref.sideProps,
-      sideToggle = _ref.sideToggle,
-      selectedSideCoord = _ref.selectedSideCoord;
-
-  if (R.isNil(sideProps) || !R.is(Function, sideToggle)) {
-    return null;
-  }
-  var isSelected = R.equals(sideProps.coordinates, selectedSideCoord);
-  return React.createElement(InfoIcon, { onClick: function onClick() {
-      return sideToggle(sideProps);
-    }, isSelected: isSelected });
-};
-
-SideIcon.propTypes = process.env.NODE_ENV !== "production" ? {
-  selectedSideCoord: PropTypes.object,
-  sideProps: PropTypes.object,
-  sideToggle: PropTypes.func
-} : {};
-
-export default SideIcon;

package/lib/InfoIcon/InfoIcon.js

@@ -1,56 +0,0 @@
-'use strict';
-
-exports.__esModule = true;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var useStyles = (0, _styles.makeStyles)(function (theme) {
-  return {
-    icon: {
-      color: function color(_ref) {
-        var isSelected = _ref.isSelected;
-        return isSelected ? theme.palette.highlight.hl1 : theme.palette.primary.main;
-      },
-      padding: 0
-    }
-  };
-});
-
-var InfoIcon = function InfoIcon(_ref2) {
-  var onClick = _ref2.onClick,
-      _ref2$isSelected = _ref2.isSelected,
-      isSelected = _ref2$isSelected === undefined ? false : _ref2$isSelected;
-
-  var classes = useStyles({ isSelected: isSelected });
-  return _react2.default.createElement(
-    _IconButton2.default,
-    { size: 'small', className: classes.icon, onClick: onClick, 'data-testid': 'ref-md-info' },
-    _react2.default.createElement(_Info2.default, { fontSize: 'small' })
-  );
-};
-
-InfoIcon.propTypes = process.env.NODE_ENV !== "production" ? {
-  onClick: _propTypes2.default.func.isRequired,
-  isSelected: _propTypes2.default.bool
-} : {};
-
-exports.default = InfoIcon;
-module.exports = exports['default'];

package/lib/TableHtml5/sideIcon.js

@@ -1,46 +0,0 @@
-'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 _InfoIcon = require('../InfoIcon/InfoIcon');
-
-var _InfoIcon2 = _interopRequireDefault(_InfoIcon);
-
-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 SideIcon = function SideIcon(_ref) {
-  var sideProps = _ref.sideProps,
-      sideToggle = _ref.sideToggle,
-      selectedSideCoord = _ref.selectedSideCoord;
-
-  if (R.isNil(sideProps) || !R.is(Function, sideToggle)) {
-    return null;
-  }
-  var isSelected = R.equals(sideProps.coordinates, selectedSideCoord);
-  return _react2.default.createElement(_InfoIcon2.default, { onClick: function onClick() {
-      return sideToggle(sideProps);
-    }, isSelected: isSelected });
-};
-
-SideIcon.propTypes = process.env.NODE_ENV !== "production" ? {
-  selectedSideCoord: _propTypes2.default.object,
-  sideProps: _propTypes2.default.object,
-  sideToggle: _propTypes2.default.func
-} : {};
-
-exports.default = SideIcon;
-module.exports = exports['default'];