@sis-cc/dotstatsuite-visions 6.6.4 → 7.1.0

package/es/AuthDialog/index.js

@@ -19,12 +19,12 @@
  *   onClose: PropTypes.func.isRequired,
  *   onSubmit: PropTypes.func.isRequired
  * };
+ * @demoReady
  */
 
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { isEmpty } from 'ramda';
-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';
@@ -33,8 +33,9 @@ import PersonIcon from '@material-ui/icons/Person';
 import TextField from '@material-ui/core/TextField';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
+import Button from '../Button';
 
-var useStyles = makeStyles(function (theme) {
+var useStyles = makeStyles(function () {
   return {
     header: {
       color: 'grey',

package/es/CollapsibleTree/Collapse.js

@@ -0,0 +1,97 @@
+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, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { pathOr } from 'ramda';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
+import Collapse from '@material-ui/core/Collapse';
+import Button from '@material-ui/core/Button';
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
+
+var VARIANT_ICON = 'icon';
+export var VARIANT_BOLD = 'bold';
+
+var useStyles = makeStyles(function (theme) {
+  var _ref;
+
+  return _ref = {
+    buttonExpand: {
+      display: 'flex',
+      justifyContent: 'space-between'
+    }
+  }, _ref['button' + VARIANT_ICON] = {
+    color: theme.palette.primary.main,
+    backgroundColor: 'rgba(24, 32, 38, 0.04)',
+    margin: theme.spacing(1, 0)
+  }, _ref['button' + VARIANT_BOLD] = _extends({
+    marginBottom: theme.spacing(1),
+    padding: theme.spacing(0.5, 0, 1, 0),
+    '&:hover': {
+      backgroundColor: 'unset'
+    }
+  }, pathOr({}, ['mixins', 'collapsibleTree', 'buttonSublevel'], theme)), _ref['collapsibleContainer' + VARIANT_BOLD] = {
+    borderTop: '2px solid black',
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2)
+  }, _ref;
+});
+
+var CollapseComponent = function CollapseComponent(_ref2) {
+  var label = _ref2.label,
+      isOpen = _ref2.isOpen,
+      children = _ref2.children,
+      _ref2$variant = _ref2.variant,
+      variant = _ref2$variant === undefined ? VARIANT_ICON : _ref2$variant,
+      level = _ref2.level;
+
+  var classes = useStyles();
+  var theme = useTheme();
+
+  var _React$useState = React.useState(isOpen),
+      open = _React$useState[0],
+      setOpen = _React$useState[1];
+
+  useEffect(function () {
+    return setOpen(isOpen);
+  }, [isOpen]);
+
+  return React.createElement(
+    'div',
+    {
+      className: cx(classes['collapsibleContainer' + variant]),
+      style: {
+        marginRight: theme.spacing(level * 2),
+        marginLeft: theme.spacing(level * 2)
+      }
+    },
+    React.createElement(
+      Button,
+      {
+        className: cx(classes.buttonExpand, classes['button' + variant]),
+        onClick: function onClick() {
+          return setOpen(!open);
+        },
+        fullWidth: true
+      },
+      label,
+      open ? React.createElement(KeyboardArrowUpIcon, { color: 'primary' }) : React.createElement(KeyboardArrowDownIcon, { color: 'primary' })
+    ),
+    React.createElement(
+      Collapse,
+      { 'in': open, timeout: 'auto' },
+      children
+    )
+  );
+};
+
+CollapseComponent.propTypes = process.env.NODE_ENV !== "production" ? {
+  label: PropTypes.string,
+  isOpen: PropTypes.bool,
+  children: PropTypes.node,
+  variant: PropTypes.oneOf([VARIANT_ICON, VARIANT_BOLD]),
+  level: PropTypes.number
+} : {};
+
+export default CollapseComponent;

package/es/CollapsibleTree/CollapsibleTree.js

@@ -0,0 +1,171 @@
+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, { useState, Fragment, useEffect } from 'react';
+import * as R from 'ramda';
+import PropTypes from 'prop-types';
+import Container from '@material-ui/core/Container';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Divider from '@material-ui/core/Divider';
+import Button from '@material-ui/core/Button';
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import Grid from '@material-ui/core/Grid';
+import Collapse, { VARIANT_BOLD } from './Collapse';
+
+var useStyles = makeStyles(function (theme) {
+  return {
+    title: _extends({
+      fontWeight: 'bold'
+    }, R.pathOr({}, ['mixins', 'collapsibleTree', 'title'], theme)),
+    divider: {
+      marginBottom: theme.spacing(2)
+    },
+    spacingValue: {
+      marginLeft: theme.spacing(2),
+      marginRight: theme.spacing(2),
+      marginBottom: theme.spacing(2)
+    }
+  };
+});
+
+var CollapsibleTree = function CollapsibleTree(_ref) {
+  var _ref$data = _ref.data,
+      data = _ref$data === undefined ? [] : _ref$data,
+      _ref$defaultDepthLeve = _ref.defaultDepthLevel,
+      defaultDepthLevel = _ref$defaultDepthLeve === undefined ? 1 : _ref$defaultDepthLeve,
+      isLoading = _ref.isLoading,
+      children = _ref.children,
+      labels = _ref.labels,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === undefined ? 'collapsible-tree' : _ref$testId;
+
+  var classes = useStyles();
+
+  var _useState = useState(defaultDepthLevel),
+      depthLevel = _useState[0],
+      setDepthLevel = _useState[1];
+
+  useEffect(function () {
+    return setDepthLevel(defaultDepthLevel);
+  }, [defaultDepthLevel]);
+
+  if (isLoading) {
+    return React.createElement(
+      Grid,
+      { container: true, item: true, justifyContent: 'center' },
+      React.createElement(CircularProgress, null)
+    );
+  }
+
+  var handleCollapse = function handleCollapse(isAllOpen) {
+    if (isAllOpen) return setDepthLevel(undefined);
+    return setDepthLevel(defaultDepthLevel);
+  };
+
+  var isAllOpen = depthLevel >= defaultDepthLevel;
+  var buttonAllOpenLabel = isAllOpen ? R.prop('collapseAll', labels) : R.prop('expandAll', labels);
+
+  return React.createElement(
+    Fragment,
+    null,
+    React.createElement(
+      Container,
+      { disableGutters: true, 'data-testid': testId },
+      React.createElement(
+        Button,
+        {
+          'aria-label': buttonAllOpenLabel,
+          color: 'primary',
+          endIcon: isAllOpen ? React.createElement(KeyboardArrowDownIcon, { color: 'primary' }) : React.createElement(KeyboardArrowUpIcon, { color: 'primary' }),
+          onClick: function onClick() {
+            return handleCollapse(isAllOpen);
+          }
+        },
+        buttonAllOpenLabel
+      ),
+      children
+    ),
+    R.map(function (_ref2) {
+      var id = _ref2.id,
+          label = _ref2.label,
+          _ref2$children = _ref2.children,
+          children = _ref2$children === undefined ? [] : _ref2$children;
+
+      return React.createElement(
+        Fragment,
+        { key: id },
+        React.createElement(Divider, { className: classes.divider }),
+        React.createElement(
+          Typography,
+          { variant: 'h5', className: classes.title },
+          label
+        ),
+        R.map(function (_ref3) {
+          var id = _ref3.id,
+              label = _ref3.label,
+              children = _ref3.children,
+              value = _ref3.value;
+
+          return React.createElement(
+            Collapse,
+            { key: id, level: 0, label: label, isOpen: depthLevel >= 0 },
+            value && React.createElement(
+              Typography,
+              { className: classes.spacingValue, variant: 'body2' },
+              value
+            ),
+            children && R.map(function (_ref4) {
+              var id = _ref4.id,
+                  label = _ref4.label,
+                  value = _ref4.value;
+
+              return React.createElement(
+                Collapse,
+                {
+                  key: id,
+                  level: 1,
+                  variant: VARIANT_BOLD,
+                  label: label,
+                  isOpen: depthLevel >= 1
+                },
+                React.createElement(
+                  Typography,
+                  { variant: 'body2' },
+                  value
+                )
+              );
+            }, children)
+          );
+        }, children)
+      );
+    }, data)
+  );
+};
+
+CollapsibleTree.propTypes = process.env.NODE_ENV !== "production" ? {
+  data: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    label: PropTypes.string,
+    children: PropTypes.arrayOf(PropTypes.shape({
+      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+      label: PropTypes.string,
+      children: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+        label: PropTypes.string,
+        value: PropTypes.string
+      }))
+    }))
+  })),
+  defaultDepthLevel: PropTypes.number,
+  isLoading: PropTypes.bool,
+  children: PropTypes.node,
+  labels: PropTypes.shape({
+    collapseAll: PropTypes.string,
+    expandAll: PropTypes.string
+  }),
+  testId: PropTypes.string
+} : {};
+
+export default CollapsibleTree;

package/es/CollapsibleTree/index.js

@@ -0,0 +1,44 @@
+/**
+ * CollapsibleTree is a component that show you a tree structure with a button to expand/collapse each node.
+ * defaultDepthLevel is the maximum level that will be open by "collapse all" button value could be 0|1. set to 1 by default.
+ *
+ * @memberOf VISIONS
+ * @name CollapsibleTree
+ * @tag component
+ * @api public
+ * @props
+ * CollapsibleTree.propTypes = {
+ *  data: PropTypes.arrayOf(PropTypes.shape({
+ *    id: PropTypes.string.isRequired,
+ *    label: PropTypes.string,
+ *    children: PropTypes.arrayOf(PropTypes.shape({
+ *      id: PropTypes.string.isRequired,
+ *      label: PropTypes.string,
+ *      children: PropTypes.arrayOf(PropTypes.shape({
+ *        id: PropTypes.string.isRequired,
+ *        label: PropTypes.string,
+ *        value: PropTypes.string,
+ *      })),
+ *    }))
+ *  })),
+ *  defaultDepthLevel: PropTypes.number,
+ *  testId: PropTypes.string,
+ *};
+ * @theme
+ * {
+ *   palette: {
+ *     primary: {
+ *       main: // color label button
+ *     },
+ *   }
+ *   mixins: {
+ *    CollapsibleTree: {
+ *      title: {
+ *        // font, color, of titles
+ *      },
+ * }
+ * @demoReady
+ *
+ */
+
+export { default } from './CollapsibleTree';

package/es/DataEdit/Input.js

@@ -12,7 +12,7 @@ import IconButton from '@material-ui/core/IconButton';
 import Done from '@material-ui/icons/Done';
 import RotateLeftIcon from '@material-ui/icons/RotateLeft';
 
-var useStyles = makeStyles(function (theme) {
+var useStyles = makeStyles(function () {
   return {
     visibility: {
       visibility: 'hidden'

package/es/DataHeader/DataHeader.js

@@ -15,6 +15,7 @@ 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 {
@@ -97,13 +98,33 @@ var useStyles = makeStyles(function (theme) {
   };
 });
 
-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;
+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 target = React.useRef(null);
 
@@ -186,6 +207,7 @@ var DataHeader = function DataHeader(_ref4) {
     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 },
@@ -222,6 +244,8 @@ DataHeader.propTypes = process.env.NODE_ENV !== "production" ? {
     header: PropTypes.string,
     label: PropTypes.string
   }),
+  sideProps: PropTypes.object,
+  sideToggle: PropTypes.func,
   disclaimer: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   children: PropTypes.node
 } : {};

package/es/InfoIcon/InfoIcon.js

@@ -0,0 +1,37 @@
+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/TableHtml5.js

@@ -68,7 +68,11 @@ 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,
+      selectedSideCoord = _ref.selectedSideCoord,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === undefined ? 'vis-table' : _ref$testId;
 
   var classes = useStyles();
 
@@ -112,7 +116,13 @@ var TableHtml5 = function TableHtml5(_ref) {
   var nbColumnsByRows = R.map(R.length)(valuesHeaderData);
   return React.createElement(
     Table,
-    { 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
+    },
     React.createElement(
       'thead',
       { ref: headerRef, className: classes.stickyHeader },
@@ -126,6 +136,8 @@ var TableHtml5 = function TableHtml5(_ref) {
         headerData: headerData,
         xLayoutData: xLayoutData,
         activeCellIds: activeCellIds,
+        sideToggle: sideToggle,
+        selectedSideCoord: selectedSideCoord,
         ref: subHeadCellsRef,
         subHeadCellsWidth: subHeadCellsWidth
       })
@@ -143,6 +155,8 @@ var TableHtml5 = function TableHtml5(_ref) {
         cellHandler: cellHandler,
         activeCellIds: activeCellIds,
         activeCellHandler: activeCellHandler,
+        sideToggle: sideToggle,
+        selectedSideCoord: selectedSideCoord,
         subHeadCellsWidth: subHeadCellsWidth
       });
     }, sectionsData)
@@ -155,7 +169,10 @@ TableHtml5.propTypes = process.env.NODE_ENV !== "production" ? {
   sectionsData: PropTypes.array,
   cellHandler: PropTypes.func,
   activeCellHandler: PropTypes.func,
-  activeCellIds: PropTypes.object
+  activeCellIds: PropTypes.object,
+  sideToggle: PropTypes.func,
+  selectedSideCoord: PropTypes.object,
+  testId: PropTypes.string
 } : {};
 
 export default TableHtml5;

package/es/TableHtml5/cell.js

@@ -6,6 +6,7 @@ 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) {
@@ -47,7 +48,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));
@@ -80,6 +83,7 @@ var Cell = function Cell(_ref) {
       React.createElement(
         Typography,
         { variant: 'body1', tabIndex: 0, noWrap: hasFlag },
+        React.createElement(SideIcon, { sideProps: sideProps, sideToggle: sideToggle }),
         hasFlag && React.createElement(Flags, { flags: flags }),
         uiValue
       )
@@ -96,7 +100,9 @@ Cell.propTypes = process.env.NODE_ENV !== "production" ? {
   cellHandler: PropTypes.func,
   isActive: PropTypes.bool,
   isHighlight: PropTypes.bool,
-  activeCellHandler: PropTypes.func
+  activeCellHandler: PropTypes.func,
+  sideProps: PropTypes.object,
+  sideToggle: PropTypes.func
 } : {};
 
 export default Cell;

package/es/TableHtml5/flags.js

@@ -25,6 +25,7 @@ var useStyles = makeStyles(function (theme) {
       borderColor: 'inherit',
       margin: theme.spacing(0, 0.5),
       whiteSpace: 'nowrap',
+      display: 'inline',
       fontWeight: 'bold',
       fontStyle: 'normal',
       textTransform: 'uppercase'
@@ -87,6 +88,7 @@ var Flags = function Flags(_ref) {
       hasUncoded && React.createElement(
         Fragment,
         null,
+        '\xA0',
         React.createElement(Asterisk, { className: classes.svg, style: { fontSize: 11 } }),
         React.createElement(
           Typography,

package/es/TableHtml5/index.js

@@ -13,6 +13,7 @@
  *   cellHandler: PropTypes.func,
  *   activeCellHandler: PropTypes.func,
  *   activeCellIds: PropTypes.string,
+ *   selectedSideCoord: PropTypes.object,
  * };
  * @theme
  * {

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 from 'react';
+import React, { Fragment } from 'react';
 import * as R from 'ramda';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -11,6 +11,7 @@ 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';
 
@@ -70,6 +71,8 @@ var Section = function Section(_ref) {
       headerHeight = _ref.headerHeight,
       sectionIndex = _ref.sectionIndex,
       nbColumnsByRows = _ref.nbColumnsByRows,
+      sideToggle = _ref.sideToggle,
+      selectedSideCoord = _ref.selectedSideCoord,
       subHeadCellsWidth = _ref.subHeadCellsWidth;
 
   var classes = useStyles();
@@ -87,7 +90,9 @@ var Section = function Section(_ref) {
       section: section,
       currentSection: currentSection,
       xLayoutDataLength: xLayoutDataLength,
-      headerHeight: headerHeight
+      headerHeight: headerHeight,
+      sideToggle: sideToggle,
+      selectedSideCoord: selectedSideCoord
     }),
     R.map(function (sectionbody) {
       var _cx2;
@@ -148,6 +153,11 @@ var Section = function Section(_ref) {
           React.createElement(
             'div',
             { className: classes.flagContainer },
+            React.createElement(SideIcon, {
+              sideProps: R.prop('sideProps', sectionbody),
+              sideToggle: sideToggle,
+              selectedSideCoord: selectedSideCoord
+            }),
             React.createElement(Flags, { flags: R.prop('flags', sectionbody) })
           )
         ),
@@ -164,6 +174,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 () {
@@ -191,6 +202,8 @@ Section.propTypes = process.env.NODE_ENV !== "production" ? {
   headerNumberRows: PropTypes.number,
   nbColumnsByRows: PropTypes.array,
   maxColumns: PropTypes.number,
+  sideToggle: PropTypes.func,
+  selectedSideCoord: PropTypes.object,
   subHeadCellsWidth: PropTypes.arrayOf(PropTypes.number)
 } : {};
 

package/es/TableHtml5/sectionHeader.js

@@ -8,6 +8,7 @@ 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';
 
@@ -41,9 +42,6 @@ var useStyles = makeStyles(function (theme) {
     containerTextSection: {
       display: 'flex',
       alignItems: 'center'
-    },
-    flag: {
-      height: 0
     }
   };
 });
@@ -54,7 +52,9 @@ var SectionHeader = function SectionHeader(_ref) {
       section = _ref.section,
       currentSection = _ref.currentSection,
       xLayoutDataLength = _ref.xLayoutDataLength,
-      headerHeight = _ref.headerHeight;
+      headerHeight = _ref.headerHeight,
+      sideToggle = _ref.sideToggle,
+      selectedSideCoord = _ref.selectedSideCoord;
 
   var classes = useStyles();
   if (R.compose(R.anyPass([R.isNil, R.isEmpty]), R.path([0, 'data']))(section)) return null;
@@ -108,7 +108,12 @@ var SectionHeader = function SectionHeader(_ref) {
         ),
         React.createElement(
           'div',
-          { className: classes.flag },
+          null,
+          React.createElement(SideIcon, {
+            sideProps: R.path([0, 'sideProps'], section),
+            sideToggle: sideToggle,
+            selectedSideCoord: selectedSideCoord
+          }),
           React.createElement(Flags, { flags: R.path([0, 'flags'], section) })
         )
       )
@@ -121,7 +126,9 @@ SectionHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   section: PropTypes.array,
   currentSection: PropTypes.string,
   xLayoutDataLength: PropTypes.number,
-  headerHeight: PropTypes.number
+  headerHeight: PropTypes.number,
+  sideToggle: PropTypes.func,
+  selectedSideCoord: PropTypes.object
 } : {};
 
 export default SectionHeader;