@sis-cc/dotstatsuite-visions 7.1.0 → 7.3.1

package/es/CollapsibleTree/CollapsibleTree.js

@@ -78,7 +78,7 @@ var CollapsibleTree = function CollapsibleTree(_ref) {
         {
           'aria-label': buttonAllOpenLabel,
           color: 'primary',
-          endIcon: isAllOpen ? React.createElement(KeyboardArrowDownIcon, { color: 'primary' }) : React.createElement(KeyboardArrowUpIcon, { color: 'primary' }),
+          endIcon: isAllOpen ? React.createElement(KeyboardArrowUpIcon, { color: 'primary' }) : React.createElement(KeyboardArrowDownIcon, { color: 'primary' }),
           onClick: function onClick() {
             return handleCollapse(isAllOpen);
           }

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 {
@@ -94,37 +93,22 @@ var useStyles = makeStyles(function (theme) {
       padding: 0,
       marginLeft: 20,
       maxWidth: 270
-    }, theme.typography.body1)
+    }, theme.typography.body1),
+    sideIconContainer: {
+      marginLeft: '10px'
+    }
   };
 });
 
-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 +138,11 @@ var DataHeader = function DataHeader(_ref5) {
         Typography,
         { variant: 'h1', className: classes.title },
         title.label,
+        !R.isNil(SideIcon) && React.createElement(
+          'span',
+          { className: classes.sideIconContainer },
+          React.createElement(SideIcon, { sideProps: sideProps })
+        ),
         React.createElement(Flags, { classes: classes, content: R.propOr([], 'flags', title) }),
         disclaimer && React.createElement(
           Tooltip,
@@ -207,7 +196,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 +233,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/PeriodPicker/PeriodPicker.js

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

package/es/PeriodPicker/lib.js

@@ -114,11 +114,6 @@ export var getAjustedDate = function getAjustedDate(frequency) {
 };
 
 export var isValidNumber = R.both(R.is(Number), R.complement(R.equals(NaN)));
-export var getSupportFrequencies = function getSupportFrequencies(availableFrequencies) {
-  return R.filter(function (freq) {
-    return R.includes(freq)(supportedFrequenciesKey);
-  })(availableFrequencies);
-};
 export var getDefaultFrequency = function getDefaultFrequency(_ref4) {
   var defaultFrequency = _ref4.defaultFrequency,
       frequencies = _ref4.frequencies;
@@ -128,10 +123,14 @@ export var getDefaultFrequency = function getDefaultFrequency(_ref4) {
 };
 
 export var getFrequencyOptions = function getFrequencyOptions(frequencyoptions, frequencyLabels) {
-  var availableFrequencies = R.or(R.isEmpty(frequencyoptions), R.isNil(frequencyoptions)) ? [defaultfreq] : getSupportFrequencies(frequencyoptions);
-  return R.map(function (option) {
-    return { value: option, label: R.prop(option)(frequencyLabels) };
+  var availableFrequencies = R.or(R.isEmpty(frequencyoptions), R.isNil(frequencyoptions)) ? [defaultfreq] : R.filter(function (freq) {
+    return R.includes(freq, supportedFrequenciesKey);
+  })(frequencyoptions);
+  var options = R.map(function (option) {
+    return { value: option, label: R.prop(option, frequencyLabels) };
   })(availableFrequencies);
+  if (R.isEmpty(options)) return [{ value: 'A', label: R.propOr('Annual', 'A', frequencyLabels) }];
+  return options;
 };
 
 export var getLayout = function getLayout(type, range) {

package/es/Select/Select.js

@@ -1,11 +1,12 @@
 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, { useEffect } from 'react';
 import * as R from 'ramda';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 import MenuItem from '@material-ui/core/MenuItem';
+import { Tooltip } from '../';
 
 var useStyles = makeStyles(function (theme) {
   return {
@@ -34,6 +35,15 @@ var Select = function Select(_ref) {
       dataTestId = _ref$dataTestId === undefined ? 'select-testid' : _ref$dataTestId;
 
   var classes = useStyles();
+  var ref = React.useRef(null);
+
+  var _React$useState = React.useState(false),
+      open = _React$useState[0],
+      setOpen = _React$useState[1];
+
+  var _React$useState2 = React.useState(0),
+      width = _React$useState2[0],
+      setWidth = _React$useState2[1];
 
   var handleChange = function handleChange(event) {
     if (R.is(Function)(onChange)) {
@@ -41,6 +51,12 @@ var Select = function Select(_ref) {
     }
   };
 
+  useEffect(function () {
+    if (ref.current && open) {
+      setWidth(ref.current.clientWidth);
+    }
+  }, [ref.current, open]);
+
   var getter = function getter(key) {
     return function (accessor) {
       return R.ifElse(R.is(Object), function (item) {
@@ -49,42 +65,62 @@ var Select = function Select(_ref) {
     };
   };
 
+  var joinByValue = R.innerJoin(function (obj, value) {
+    return obj.value === value;
+  });
+  var labels = R.pluck('label', joinByValue(items, R.is(Array, value) ? value : [value]));
   return React.createElement(
     TextField,
     _extends({
+      select: true,
       id: id,
       'data-testid': dataTestId,
       disabled: R.isEmpty(items),
-      select: true,
       label: label,
       value: value,
+      title: R.join(', ', labels),
       onChange: handleChange,
       variant: 'outlined',
       size: 'small',
       fullWidth: true,
       SelectProps: {
+        ref: ref,
+        open: open,
+        autoWidth: true,
         multiple: isMultiple,
+        onOpen: function onOpen() {
+          return setOpen(true);
+        },
+        onClose: function onClose() {
+          return setOpen(false);
+        },
         classes: { root: classes.root },
         MenuProps: {
           getContentAnchorEl: null,
           anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
           transformOrigin: { vertical: 'top', horizontal: 'center' },
-          classes: { paper: classes.paper }
+          classes: { paper: classes.paper },
+          PaperProps: {
+            style: { width: width }
+          }
         }
       },
       className: classes.root
     }, textFieldProps),
     R.map(function (item) {
+      var value = getter('value')(valueAccessor)(item);
+      var label = getter('label')(labelAccessor)(item);
       return React.createElement(
         MenuItem,
         {
-          key: optionsKey + '-' + getter('value')(valueAccessor)(item),
-          value: getter('value')(valueAccessor)(item),
+          key: optionsKey + '-' + value,
+          id: label,
+          value: value,
           dense: true,
-          id: getter('label')(labelAccessor)(item),
-          'aria-label': getter('label')(labelAccessor)(item)
+          'aria-label': label,
+          title: label
         },
-        getter('label')(labelAccessor)(item)
+        label
       );
     })(items)
   );

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

@@ -122,7 +122,7 @@ var CollapsibleTree = function CollapsibleTree(_ref) {
         {
           'aria-label': buttonAllOpenLabel,
           color: 'primary',
-          endIcon: isAllOpen ? _react2.default.createElement(_KeyboardArrowDown2.default, { color: 'primary' }) : _react2.default.createElement(_KeyboardArrowUp2.default, { color: 'primary' }),
+          endIcon: isAllOpen ? _react2.default.createElement(_KeyboardArrowUp2.default, { color: 'primary' }) : _react2.default.createElement(_KeyboardArrowDown2.default, { color: 'primary' }),
           onClick: function onClick() {
             return handleCollapse(isAllOpen);
           }

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 }; }
@@ -137,37 +133,22 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       padding: 0,
       marginLeft: 20,
       maxWidth: 270
-    }, theme.typography.body1)
+    }, theme.typography.body1),
+    sideIconContainer: {
+      marginLeft: '10px'
+    }
   };
 });
 
-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 +178,11 @@ var DataHeader = function DataHeader(_ref5) {
         _Typography2.default,
         { variant: 'h1', className: classes.title },
         title.label,
+        !R.isNil(SideIcon) && _react2.default.createElement(
+          'span',
+          { className: classes.sideIconContainer },
+          _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 +236,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 +273,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/PeriodPicker/PeriodPicker.js

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

package/lib/PeriodPicker/lib.js

@@ -1,7 +1,7 @@
 'use strict';
 
 exports.__esModule = true;
-exports.numeralFormat = exports.getDateInTheRange = exports.getDate = exports.getPeriodValue = exports.getLayout = exports.getFrequencyOptions = exports.getDefaultFrequency = exports.getSupportFrequencies = exports.isValidNumber = exports.getAjustedDate = exports.getRange = exports.getDestructuringDate = undefined;
+exports.numeralFormat = exports.getDateInTheRange = exports.getDate = exports.getPeriodValue = exports.getLayout = exports.getFrequencyOptions = exports.getDefaultFrequency = exports.isValidNumber = exports.getAjustedDate = exports.getRange = exports.getDestructuringDate = undefined;
 
 var _numeralFormat;
 
@@ -132,11 +132,6 @@ var getAjustedDate = exports.getAjustedDate = function getAjustedDate(frequency)
 };
 
 var isValidNumber = exports.isValidNumber = R.both(R.is(Number), R.complement(R.equals(NaN)));
-var getSupportFrequencies = exports.getSupportFrequencies = function getSupportFrequencies(availableFrequencies) {
-  return R.filter(function (freq) {
-    return R.includes(freq)(supportedFrequenciesKey);
-  })(availableFrequencies);
-};
 var getDefaultFrequency = exports.getDefaultFrequency = function getDefaultFrequency(_ref4) {
   var defaultFrequency = _ref4.defaultFrequency,
       frequencies = _ref4.frequencies;
@@ -146,10 +141,14 @@ var getDefaultFrequency = exports.getDefaultFrequency = function getDefaultFrequ
 };
 
 var getFrequencyOptions = exports.getFrequencyOptions = function getFrequencyOptions(frequencyoptions, frequencyLabels) {
-  var availableFrequencies = R.or(R.isEmpty(frequencyoptions), R.isNil(frequencyoptions)) ? [_constants.defaultfreq] : getSupportFrequencies(frequencyoptions);
-  return R.map(function (option) {
-    return { value: option, label: R.prop(option)(frequencyLabels) };
+  var availableFrequencies = R.or(R.isEmpty(frequencyoptions), R.isNil(frequencyoptions)) ? [_constants.defaultfreq] : R.filter(function (freq) {
+    return R.includes(freq, supportedFrequenciesKey);
+  })(frequencyoptions);
+  var options = R.map(function (option) {
+    return { value: option, label: R.prop(option, frequencyLabels) };
   })(availableFrequencies);
+  if (R.isEmpty(options)) return [{ value: 'A', label: R.propOr('Annual', 'A', frequencyLabels) }];
+  return options;
 };
 
 var getLayout = exports.getLayout = function getLayout(type, range) {

package/lib/Select/Select.js

@@ -26,6 +26,8 @@ var _MenuItem = require('@material-ui/core/MenuItem');
 
 var _MenuItem2 = _interopRequireDefault(_MenuItem);
 
+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 }; }
@@ -57,6 +59,15 @@ var Select = function Select(_ref) {
       dataTestId = _ref$dataTestId === undefined ? 'select-testid' : _ref$dataTestId;
 
   var classes = useStyles();
+  var ref = _react2.default.useRef(null);
+
+  var _React$useState = _react2.default.useState(false),
+      open = _React$useState[0],
+      setOpen = _React$useState[1];
+
+  var _React$useState2 = _react2.default.useState(0),
+      width = _React$useState2[0],
+      setWidth = _React$useState2[1];
 
   var handleChange = function handleChange(event) {
     if (R.is(Function)(onChange)) {
@@ -64,6 +75,12 @@ var Select = function Select(_ref) {
     }
   };
 
+  (0, _react.useEffect)(function () {
+    if (ref.current && open) {
+      setWidth(ref.current.clientWidth);
+    }
+  }, [ref.current, open]);
+
   var getter = function getter(key) {
     return function (accessor) {
       return R.ifElse(R.is(Object), function (item) {
@@ -72,42 +89,62 @@ var Select = function Select(_ref) {
     };
   };
 
+  var joinByValue = R.innerJoin(function (obj, value) {
+    return obj.value === value;
+  });
+  var labels = R.pluck('label', joinByValue(items, R.is(Array, value) ? value : [value]));
   return _react2.default.createElement(
     _TextField2.default,
     _extends({
+      select: true,
       id: id,
       'data-testid': dataTestId,
       disabled: R.isEmpty(items),
-      select: true,
       label: label,
       value: value,
+      title: R.join(', ', labels),
       onChange: handleChange,
       variant: 'outlined',
       size: 'small',
       fullWidth: true,
       SelectProps: {
+        ref: ref,
+        open: open,
+        autoWidth: true,
         multiple: isMultiple,
+        onOpen: function onOpen() {
+          return setOpen(true);
+        },
+        onClose: function onClose() {
+          return setOpen(false);
+        },
         classes: { root: classes.root },
         MenuProps: {
           getContentAnchorEl: null,
           anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
           transformOrigin: { vertical: 'top', horizontal: 'center' },
-          classes: { paper: classes.paper }
+          classes: { paper: classes.paper },
+          PaperProps: {
+            style: { width: width }
+          }
         }
       },
       className: classes.root
     }, textFieldProps),
     R.map(function (item) {
+      var value = getter('value')(valueAccessor)(item);
+      var label = getter('label')(labelAccessor)(item);
       return _react2.default.createElement(
         _MenuItem2.default,
         {
-          key: optionsKey + '-' + getter('value')(valueAccessor)(item),
-          value: getter('value')(valueAccessor)(item),
+          key: optionsKey + '-' + value,
+          id: label,
+          value: value,
           dense: true,
-          id: getter('label')(labelAccessor)(item),
-          'aria-label': getter('label')(labelAccessor)(item)
+          'aria-label': label,
+          title: label
         },
-        getter('label')(labelAccessor)(item)
+        label
       );
     })(items)
   );

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.3.1",
   "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'];