@sis-cc/dotstatsuite-visions 7.2.1 → 7.4.1

package/es/DataHeader/DataHeader.js

@@ -93,7 +93,10 @@ var useStyles = makeStyles(function (theme) {
       padding: 0,
       marginLeft: 20,
       maxWidth: 270
-    }, theme.typography.body1)
+    }, theme.typography.body1),
+    sideIconContainer: {
+      marginLeft: '10px'
+    }
   };
 });
 
@@ -137,7 +140,7 @@ var DataHeader = function DataHeader(_ref4) {
         title.label,
         !R.isNil(SideIcon) && React.createElement(
           'span',
-          { style: { 'margin-left': '10px' } },
+          { className: classes.sideIconContainer },
           React.createElement(SideIcon, { sideProps: sideProps })
         ),
         React.createElement(Flags, { classes: classes, content: R.propOr([], 'flags', title) }),

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/ScopeList/Item.js

@@ -10,6 +10,7 @@ import ListItemText from '@material-ui/core/ListItemText';
 import IconButton from '@material-ui/core/IconButton';
 import SvgIcon from '@material-ui/core/SvgIcon';
 import cx from 'classnames';
+import { Tooltip } from '../';
 
 var checkBoxPath = 'M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z';
 var checkPath = 'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z';
@@ -32,11 +33,13 @@ var Item = function Item(_ref) {
   var classes = _ref.classes,
       id = _ref.id,
       label = _ref.label,
+      description = _ref.description,
       _ref$nodePath = _ref.nodePath,
       nodePath = _ref$nodePath === undefined ? [] : _ref$nodePath,
       isSelected = _ref.isSelected,
       isDisabled = _ref.isDisabled,
       changeList = _ref.changeList,
+      changeListDescription = _ref.changeListDescription,
       ariaLabel = _ref.ariaLabel,
       NavigateIcon = _ref.NavigateIcon,
       changeSelection = _ref.changeSelection,
@@ -101,14 +104,24 @@ var Item = function Item(_ref) {
           React.createElement('path', { d: svgPath })
         ),
         React.createElement(
-          Typography,
+          Tooltip,
           {
-            'data-testid': testId + '_value_' + id,
-            color: 'inherit',
-            variant: 'body2',
-            className: cx(classes.label, (_cx6 = {}, _cx6[classes.disabledLabel] = isDisabled, _cx6))
+            title: R.isNil(description) ? '' : description,
+            tabIndex: 0,
+            'aria-label': description,
+            'aria-hidden': false,
+            placement: 'top'
           },
-          label
+          React.createElement(
+            Typography,
+            {
+              'data-testid': testId + '_value_' + id,
+              color: 'inherit',
+              variant: 'body2',
+              className: cx(classes.label, (_cx6 = {}, _cx6[classes.disabledLabel] = isDisabled, _cx6[classes.tooltipNotice] = !R.isNil(description), _cx6))
+            },
+            label
+          )
         ),
         R.not(R.isNil(count)) && React.createElement(
           Typography,
@@ -148,17 +161,28 @@ var Item = function Item(_ref) {
         }
       },
       React.createElement(
-        IconButton,
+        Tooltip,
         {
-          disableRipple: true,
-          disableFocusRipple: true,
-          className: classes.arrow,
-          'aria-label': ariaLabel,
-          tabIndex: -1,
-          size: 'small',
-          color: 'inherit'
+          title: changeListDescription || '',
+          tabIndex: 0,
+          'aria-label': changeListDescription,
+          'aria-hidden': false,
+          placement: 'top',
+          variant: 'light'
         },
-        React.createElement(NavigateIcon, null)
+        React.createElement(
+          IconButton,
+          {
+            disableRipple: true,
+            disableFocusRipple: true,
+            className: classes.arrow,
+            'aria-label': ariaLabel,
+            tabIndex: -1,
+            size: 'small',
+            color: 'inherit'
+          },
+          React.createElement(NavigateIcon, null)
+        )
       )
     )
   );
@@ -168,6 +192,7 @@ Item.propTypes = process.env.NODE_ENV !== "production" ? {
   classes: PropTypes.object,
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   label: PropTypes.string,
+  description: PropTypes.string,
   parentId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   nodePath: PropTypes.array,
   ariaLabel: PropTypes.string,
@@ -177,6 +202,7 @@ Item.propTypes = process.env.NODE_ENV !== "production" ? {
   hasChild: PropTypes.bool,
   isSection: PropTypes.bool,
   changeList: PropTypes.func,
+  changeListDescription: PropTypes.string,
   changeSelection: PropTypes.func,
   changeMouseSelection: PropTypes.func,
   count: PropTypes.number,

package/es/ScopeList/ScopeList.js

@@ -244,6 +244,7 @@ var ScopeList = function ScopeList(props) {
                 classes: classes,
                 isRtl: isRtl,
                 changeList: changeList,
+                changeListDescription: labels.childrenNavigateDesc,
                 changeSelection: changeSelection,
                 changeMouseSelection: changeMouseSelection,
                 ariaLabel: R.prop('navigateNext')(labels),
@@ -284,6 +285,7 @@ ScopeList.propTypes = process.env.NODE_ENV !== "production" ? {
   isBlank: PropTypes.bool,
   isCurrentListAllSelected: PropTypes.bool,
   labels: PropTypes.shape({
+    childrenNavigateDesc: PropTypes.string,
     navigateNext: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     backHelper: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     selection: PropTypes.shape({

package/es/ScopeList/index.js

@@ -47,6 +47,7 @@
  *   hasPath: PropTypes.bool,
  *   changeSelection: PropTypes.func,
  *   labels: {
+ *     childrenNavigateDesc: PropTypes.string,
  *     navigateBefore: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
  *     navigateNext: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
  *     backHelper: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),

package/es/ScopeList/styles.js

@@ -143,6 +143,9 @@ export var useStyles = makeStyles(function (theme) {
     },
     bulkSelectionIcon: {
       minWidth: 50
+    },
+    tooltipNotice: {
+      textDecoration: 'underline dotted'
     }
   };
 });

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/lib/DataHeader/DataHeader.js

@@ -133,7 +133,10 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       padding: 0,
       marginLeft: 20,
       maxWidth: 270
-    }, theme.typography.body1)
+    }, theme.typography.body1),
+    sideIconContainer: {
+      marginLeft: '10px'
+    }
   };
 });
 
@@ -177,7 +180,7 @@ var DataHeader = function DataHeader(_ref4) {
         title.label,
         !R.isNil(SideIcon) && _react2.default.createElement(
           'span',
-          { style: { 'margin-left': '10px' } },
+          { className: classes.sideIconContainer },
           _react2.default.createElement(SideIcon, { sideProps: sideProps })
         ),
         _react2.default.createElement(_Flags2.default, { classes: classes, content: R.propOr([], 'flags', title) }),

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/ScopeList/Item.js

@@ -44,6 +44,8 @@ var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
+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 }; }
@@ -69,11 +71,13 @@ var Item = function Item(_ref) {
   var classes = _ref.classes,
       id = _ref.id,
       label = _ref.label,
+      description = _ref.description,
       _ref$nodePath = _ref.nodePath,
       nodePath = _ref$nodePath === undefined ? [] : _ref$nodePath,
       isSelected = _ref.isSelected,
       isDisabled = _ref.isDisabled,
       changeList = _ref.changeList,
+      changeListDescription = _ref.changeListDescription,
       ariaLabel = _ref.ariaLabel,
       NavigateIcon = _ref.NavigateIcon,
       changeSelection = _ref.changeSelection,
@@ -138,14 +142,24 @@ var Item = function Item(_ref) {
           _react2.default.createElement('path', { d: svgPath })
         ),
         _react2.default.createElement(
-          _Typography2.default,
+          _.Tooltip,
           {
-            'data-testid': testId + '_value_' + id,
-            color: 'inherit',
-            variant: 'body2',
-            className: (0, _classnames2.default)(classes.label, (_cx6 = {}, _cx6[classes.disabledLabel] = isDisabled, _cx6))
+            title: R.isNil(description) ? '' : description,
+            tabIndex: 0,
+            'aria-label': description,
+            'aria-hidden': false,
+            placement: 'top'
           },
-          label
+          _react2.default.createElement(
+            _Typography2.default,
+            {
+              'data-testid': testId + '_value_' + id,
+              color: 'inherit',
+              variant: 'body2',
+              className: (0, _classnames2.default)(classes.label, (_cx6 = {}, _cx6[classes.disabledLabel] = isDisabled, _cx6[classes.tooltipNotice] = !R.isNil(description), _cx6))
+            },
+            label
+          )
         ),
         R.not(R.isNil(count)) && _react2.default.createElement(
           _Typography2.default,
@@ -185,17 +199,28 @@ var Item = function Item(_ref) {
         }
       },
       _react2.default.createElement(
-        _IconButton2.default,
+        _.Tooltip,
         {
-          disableRipple: true,
-          disableFocusRipple: true,
-          className: classes.arrow,
-          'aria-label': ariaLabel,
-          tabIndex: -1,
-          size: 'small',
-          color: 'inherit'
+          title: changeListDescription || '',
+          tabIndex: 0,
+          'aria-label': changeListDescription,
+          'aria-hidden': false,
+          placement: 'top',
+          variant: 'light'
         },
-        _react2.default.createElement(NavigateIcon, null)
+        _react2.default.createElement(
+          _IconButton2.default,
+          {
+            disableRipple: true,
+            disableFocusRipple: true,
+            className: classes.arrow,
+            'aria-label': ariaLabel,
+            tabIndex: -1,
+            size: 'small',
+            color: 'inherit'
+          },
+          _react2.default.createElement(NavigateIcon, null)
+        )
       )
     )
   );
@@ -205,6 +230,7 @@ Item.propTypes = process.env.NODE_ENV !== "production" ? {
   classes: _propTypes2.default.object,
   id: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
   label: _propTypes2.default.string,
+  description: _propTypes2.default.string,
   parentId: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
   nodePath: _propTypes2.default.array,
   ariaLabel: _propTypes2.default.string,
@@ -214,6 +240,7 @@ Item.propTypes = process.env.NODE_ENV !== "production" ? {
   hasChild: _propTypes2.default.bool,
   isSection: _propTypes2.default.bool,
   changeList: _propTypes2.default.func,
+  changeListDescription: _propTypes2.default.string,
   changeSelection: _propTypes2.default.func,
   changeMouseSelection: _propTypes2.default.func,
   count: _propTypes2.default.number,

package/lib/ScopeList/ScopeList.js

@@ -297,6 +297,7 @@ var ScopeList = function ScopeList(props) {
                 classes: classes,
                 isRtl: isRtl,
                 changeList: changeList,
+                changeListDescription: labels.childrenNavigateDesc,
                 changeSelection: changeSelection,
                 changeMouseSelection: changeMouseSelection,
                 ariaLabel: R.prop('navigateNext')(labels),
@@ -337,6 +338,7 @@ ScopeList.propTypes = process.env.NODE_ENV !== "production" ? {
   isBlank: _propTypes2.default.bool,
   isCurrentListAllSelected: _propTypes2.default.bool,
   labels: _propTypes2.default.shape({
+    childrenNavigateDesc: _propTypes2.default.string,
     navigateNext: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
     backHelper: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
     selection: _propTypes2.default.shape({

package/lib/ScopeList/styles.js

@@ -149,6 +149,9 @@ var useStyles = exports.useStyles = (0, _styles.makeStyles)(function (theme) {
     },
     bulkSelectionIcon: {
       minWidth: 50
+    },
+    tooltipNotice: {
+      textDecoration: 'underline dotted'
     }
   };
 });

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sis-cc/dotstatsuite-visions",
-  "version": "7.2.1",
+  "version": "7.4.1",
   "description": "Library of visual components",
   "author": "OECD",
   "homepage": "https://visions-qa.siscc.org/#o",