@sis-cc/dotstatsuite-visions 6.5.2 → 6.6.0

package/lib/Pagination/Pagination.js

@@ -1,54 +1,35 @@
-'use strict';
+"use strict";
 
-exports.__esModule = true;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _ramda = require('ramda');
-
-var R = _interopRequireWildcard(_ramda);
-
-var _styles = require('@material-ui/core/styles');
+var _interopRequireDefault = require("/builds/sis-cc/.stat-suite/dotstatsuite-visions/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
 
-var _KeyboardArrowLeft = require('@material-ui/icons/KeyboardArrowLeft');
-
-var _KeyboardArrowLeft2 = _interopRequireDefault(_KeyboardArrowLeft);
-
-var _KeyboardArrowRight = require('@material-ui/icons/KeyboardArrowRight');
-
-var _KeyboardArrowRight2 = _interopRequireDefault(_KeyboardArrowRight);
+exports.__esModule = true;
+exports.default = void 0;
 
-var _IconButton = require('@material-ui/core/IconButton');
+var _react = _interopRequireWildcard(require("react"));
 
-var _IconButton2 = _interopRequireDefault(_IconButton);
+var R = _interopRequireWildcard(require("ramda"));
 
-var _FirstPage = require('@material-ui/icons/FirstPage');
+var _styles = require("@material-ui/core/styles");
 
-var _FirstPage2 = _interopRequireDefault(_FirstPage);
+var _KeyboardArrowLeft = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowLeft"));
 
-var _LastPage = require('@material-ui/icons/LastPage');
+var _KeyboardArrowRight = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowRight"));
 
-var _LastPage2 = _interopRequireDefault(_LastPage);
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
 
-var _TextField = require('@material-ui/core/TextField');
+var _FirstPage = _interopRequireDefault(require("@material-ui/icons/FirstPage"));
 
-var _TextField2 = _interopRequireDefault(_TextField);
+var _LastPage = _interopRequireDefault(require("@material-ui/icons/LastPage"));
 
-var _Typography = require('@material-ui/core/Typography');
+var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
 
-var _Typography2 = _interopRequireDefault(_Typography);
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
 
-var _utils = require('../utils');
+var _utils = require("../utils");
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
@@ -85,7 +66,6 @@ var PageForm = function PageForm(_ref) {
       page = _ref.page,
       pages = _ref.pages,
       onSubmit = _ref.onSubmit;
-
   var classes = useStyles();
 
   var _useState = (0, _react.useState)(page),
@@ -104,6 +84,7 @@ var PageForm = function PageForm(_ref) {
   var onEnterLabel = function onEnterLabel(event) {
     if (event.key === 'Enter') {
       event.preventDefault();
+
       if (R.is(Function, onSubmit)) {
         var intValue = parseInt(event.target.value);
         if (isNaN(intValue)) return;
@@ -113,134 +94,94 @@ var PageForm = function PageForm(_ref) {
     }
   };
 
-  return _react2.default.createElement(
-    'div',
-    { className: classes.container },
-    _react2.default.createElement(
-      _Typography2.default,
-      { variant: 'body2', tabIndex: 0 },
-      R.prop('page', labels)
-    ),
-    _react2.default.createElement(_TextField2.default, {
-      inputProps: {
-        'aria-label': R.prop('page', labels),
-        className: classes.innerInput
-      },
-      className: classes.input,
-      value: value,
-      disabled: pages === 1,
-      onChange: function onChange(e) {
-        return changePageFor(e.target.value);
-      },
-      onKeyPress: onEnterLabel,
-      type: 'text',
-      variant: 'outlined'
-    }),
-    _react2.default.createElement(
-      _Typography2.default,
-      { variant: 'body2', tabIndex: 0 },
-      R.prop('of', labels) + ' ' + pages
-    )
-  );
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.container
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    variant: "body2",
+    tabIndex: 0
+  }, R.prop('page', labels)), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    inputProps: {
+      'aria-label': R.prop('page', labels),
+      className: classes.innerInput
+    },
+    className: classes.input,
+    value: value,
+    disabled: pages === 1,
+    onChange: function onChange(e) {
+      return changePageFor(e.target.value);
+    },
+    onKeyPress: onEnterLabel,
+    type: "text",
+    variant: "outlined"
+  }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    variant: "body2",
+    tabIndex: 0
+  }, R.prop('of', labels) + " " + pages));
 };
 
-PageForm.propTypes = process.env.NODE_ENV !== "production" ? {
-  page: _propTypes2.default.number,
-  pages: _propTypes2.default.number,
-  onChange: _propTypes2.default.func,
-  onSubmit: _propTypes2.default.func,
-  labels: _propTypes2.default.object
-} : {};
-
 var Pagination = function Pagination(_ref2) {
   var labels = _ref2.labels,
       page = _ref2.page,
       pages = _ref2.pages,
       onChange = _ref2.onChange,
       onSubmit = _ref2.onSubmit;
-
   var classes = useStyles();
   var theme = (0, _styles.useTheme)();
-  return _react2.default.createElement(
-    'div',
-    { 'data-testid': 'pagination-test-id', className: classes.container },
-    _react2.default.createElement(
-      _IconButton2.default,
-      {
-        className: classes.iconButton,
-        disabled: page === 1,
-        color: 'primary',
-        onClick: function onClick() {
-          return onChange(1);
-        },
-        'aria-label': R.prop('startPage', labels),
-        size: 'small'
-      },
-      theme.direction === 'rtl' ? _react2.default.createElement(_LastPage2.default, null) : _react2.default.createElement(_FirstPage2.default, null)
-    ),
-    _react2.default.createElement(
-      _IconButton2.default,
-      {
-        className: classes.iconButton,
-        disabled: page === 1,
-        color: 'primary',
-        onClick: function onClick() {
-          return onChange(page - 1);
-        },
-        'aria-label': R.prop('previousPage', labels),
-        size: 'small'
-      },
-      theme.direction === 'rtl' ? _react2.default.createElement(_KeyboardArrowRight2.default, null) : _react2.default.createElement(_KeyboardArrowLeft2.default, null)
-    ),
-    _react2.default.createElement(PageForm, { labels: labels, page: page, pages: pages, onSubmit: onSubmit }),
-    _react2.default.createElement(
-      _IconButton2.default,
-      {
-        className: classes.iconButton,
-        disabled: page === pages,
-        color: 'primary',
-        onClick: function onClick() {
-          return onChange(page + 1);
-        },
-        'aria-label': R.prop('nextPage', labels),
-        size: 'small'
-      },
-      theme.direction === 'rtl' ? _react2.default.createElement(_KeyboardArrowLeft2.default, null) : _react2.default.createElement(_KeyboardArrowRight2.default, null)
-    ),
-    _react2.default.createElement(
-      _IconButton2.default,
-      {
-        className: classes.iconButton,
-        disabled: page === pages,
-        color: 'primary',
-        onClick: function onClick() {
-          return onChange(pages);
-        },
-        'aria-label': R.prop('endPage', labels),
-        size: 'small'
-      },
-      theme.direction === 'rtl' ? _react2.default.createElement(_FirstPage2.default, null) : _react2.default.createElement(_LastPage2.default, null)
-    )
-  );
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "pagination-test-id",
+    className: classes.container
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    className: classes.iconButton,
+    disabled: page === 1,
+    color: "primary",
+    onClick: function onClick() {
+      return onChange(1);
+    },
+    "aria-label": R.prop('startPage', labels),
+    size: "small"
+  }, theme.direction === 'rtl' ? /*#__PURE__*/_react.default.createElement(_LastPage.default, null) : /*#__PURE__*/_react.default.createElement(_FirstPage.default, null)), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    className: classes.iconButton,
+    disabled: page === 1,
+    color: "primary",
+    onClick: function onClick() {
+      return onChange(page - 1);
+    },
+    "aria-label": R.prop('previousPage', labels),
+    size: "small"
+  }, theme.direction === 'rtl' ? /*#__PURE__*/_react.default.createElement(_KeyboardArrowRight.default, null) : /*#__PURE__*/_react.default.createElement(_KeyboardArrowLeft.default, null)), /*#__PURE__*/_react.default.createElement(PageForm, {
+    labels: labels,
+    page: page,
+    pages: pages,
+    onSubmit: onSubmit
+  }), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    className: classes.iconButton,
+    disabled: page === pages,
+    color: "primary",
+    onClick: function onClick() {
+      return onChange(page + 1);
+    },
+    "aria-label": R.prop('nextPage', labels),
+    size: "small"
+  }, theme.direction === 'rtl' ? /*#__PURE__*/_react.default.createElement(_KeyboardArrowLeft.default, null) : /*#__PURE__*/_react.default.createElement(_KeyboardArrowRight.default, null)), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    className: classes.iconButton,
+    disabled: page === pages,
+    color: "primary",
+    onClick: function onClick() {
+      return onChange(pages);
+    },
+    "aria-label": R.prop('endPage', labels),
+    size: "small"
+  }, theme.direction === 'rtl' ? /*#__PURE__*/_react.default.createElement(_FirstPage.default, null) : /*#__PURE__*/_react.default.createElement(_LastPage.default, null)));
 };
 
-Pagination.propTypes = process.env.NODE_ENV !== "production" ? {
-  page: _propTypes2.default.number,
-  pages: _propTypes2.default.number,
-  onChange: _propTypes2.default.func,
-  onSubmit: _propTypes2.default.func,
-  labels: _propTypes2.default.shape({
-    page: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
-    of: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element])
-  })
-} : {};
-
-exports.default = (0, _utils.withBlank)(function (_ref3) {
+var _default = (0, _utils.withBlank)(function (_ref3) {
   var isBlank = _ref3.isBlank,
       _ref3$pages = _ref3.pages,
-      pages = _ref3$pages === undefined ? 1 : _ref3$pages;
+      pages = _ref3$pages === void 0 ? 1 : _ref3$pages;
   return {
     isBlank: R.or(isBlank, R.equals(1, pages))
   };
 })(Pagination);
-module.exports = exports['default'];
+
+exports.default = _default;
+module.exports = exports.default;

package/lib/Pagination/index.js

@@ -1,16 +1,11 @@
-'use strict';
+"use strict";
 
-exports.__esModule = true;
-
-var _Pagination = require('./Pagination');
+var _interopRequireDefault = require("/builds/sis-cc/.stat-suite/dotstatsuite-visions/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
 
-Object.defineProperty(exports, 'default', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_Pagination).default;
-  }
-});
+exports.__esModule = true;
+exports.default = void 0;
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _Pagination = _interopRequireDefault(require("./Pagination"));
 
-module.exports = exports['default'];
+exports.default = _Pagination.default;
+module.exports = exports.default;

package/lib/PeriodPicker/PeriodPicker.js

@@ -1,44 +1,35 @@
-'use strict';
+"use strict";
 
-exports.__esModule = true;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _ramda = require('ramda');
+var _interopRequireDefault = require("/builds/sis-cc/.stat-suite/dotstatsuite-visions/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
 
-var R = _interopRequireWildcard(_ramda);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
+exports.__esModule = true;
+exports.default = void 0;
 
-var _Grid = require('@material-ui/core/Grid');
+var _react = _interopRequireDefault(require("react"));
 
-var _Grid2 = _interopRequireDefault(_Grid);
+var R = _interopRequireWildcard(require("ramda"));
 
-var _lib = require('./lib');
+var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
 
-var _ = require('../');
+var _lib = require("./lib");
 
-var _styles = require('./styles');
+var _ = require("../");
 
-var _styles2 = _interopRequireDefault(_styles);
+var _styles = _interopRequireDefault(require("./styles"));
 
-var _constants = require('./constants');
+var _constants = require("./constants");
 
-var _utils = require('../utils');
+var _utils = require("../utils");
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var Period = function Period(_ref) {
   var _ref$defaultFrequency = _ref.defaultFrequency,
-      defaultFrequency = _ref$defaultFrequency === undefined ? _constants.defaultfreq : _ref$defaultFrequency,
+      defaultFrequency = _ref$defaultFrequency === void 0 ? _constants.defaultfreq : _ref$defaultFrequency,
       _ref$availableFrequen = _ref.availableFrequencies,
-      availableFrequencies = _ref$availableFrequen === undefined ? [_constants.defaultfreq] : _ref$availableFrequen,
+      availableFrequencies = _ref$availableFrequen === void 0 ? [_constants.defaultfreq] : _ref$availableFrequen,
       _boundaries = _ref.boundaries,
       changePeriod = _ref.changePeriod,
       changeFrequency = _ref.changeFrequency,
@@ -46,8 +37,7 @@ var Period = function Period(_ref) {
       labels = _ref.labels,
       periodDisabled = _ref.periodDisabled,
       frequencyDisabled = _ref.frequencyDisabled;
-
-  var classes = (0, _styles2.default)();
+  var classes = (0, _styles.default)();
   var frequencies = (0, _lib.getFrequencyOptions)(availableFrequencies, labels);
   var frequency = (0, _lib.getDefaultFrequency)({
     defaultFrequency: defaultFrequency,
@@ -63,16 +53,25 @@ var Period = function Period(_ref) {
   var ranges = [(0, _lib.getRange)(startPeriodBoundaries, startDate), (0, _lib.getRange)(endPeriodBoundaries, endDate)];
   var showFrequency = R.and(R.gt(R.length(frequencies), 1), R.not(frequencyDisabled));
   var destructuringDates = R.map(_lib.getDestructuringDate)(period);
+
   var onChangeFrequency = function onChangeFrequency(value) {
     if (R.is(Function, changeFrequency)) return changeFrequency(value);
   };
+
   var onChangePeriod = function onChangePeriod(getter, id) {
     return function (value) {
-      var fn = R.prop(getter)({ start: R.head, end: R.last });
-      var lensIndex = R.prop(getter)({ start: R.lensIndex(0), end: R.lensIndex(1) });
+      var fn = R.prop(getter)({
+        start: R.head,
+        end: R.last
+      });
+      var lensIndex = R.prop(getter)({
+        start: R.lensIndex(0),
+        end: R.lensIndex(1)
+      });
       var dateValue = (0, _lib.getPeriodValue)(fn(destructuringDates));
       var selectedValue = R.ifElse(_lib.isValidNumber, R.assoc(id, R.__, {}), R.always(undefined))(Number(value));
       var newDate = (0, _lib.getDate)(frequency, dateValue, selectedValue, getter === 'end');
+
       if (R.is(Function, changePeriod)) {
         return changePeriod(R.pipe(R.set(lensIndex, newDate), function (_ref2) {
           var startDate = _ref2[0],
@@ -82,128 +81,98 @@ var Period = function Period(_ref) {
       }
     };
   };
-  return _react2.default.createElement(
-    _Grid2.default,
-    { 'data-testid': 'period-picker-test-id', container: true, direction: 'row' },
-    showFrequency && _react2.default.createElement(
-      _Grid2.default,
-      {
-        item: true,
-        xs: 12,
-        className: classes.headerContainer,
-        'data-testid': 'period-picker-frequency-test-id'
-      },
-      _react2.default.createElement(
-        _Grid2.default,
-        { container: true, direction: 'row' },
-        _react2.default.createElement(
-          _Grid2.default,
-          { item: true, xs: 12 },
-          _react2.default.createElement(_.Select, {
-            id: labels.frequency,
-            label: labels.frequency,
-            onChange: onChangeFrequency,
-            value: frequency,
-            items: frequencies
-          })
-        )
-      )
-    ),
-    R.not(isPeriodDisabled) && R.map(function (_ref3) {
-      var getter = _ref3.getter,
-          layout = _ref3.layout,
-          label = _ref3.label,
-          value = _ref3.value,
-          testId = _ref3.testId;
-      return _react2.default.createElement(
-        _Grid2.default,
-        { key: getter, item: true, xs: 12, 'data-testid': testId },
-        _react2.default.createElement(
-          _Grid2.default,
-          { container: true, direction: 'row' },
-          _react2.default.createElement(
-            _Grid2.default,
-            { item: true, xs: 12, className: classes.sideLabel },
-            _react2.default.createElement(
-              'span',
-              null,
-              label
-            )
-          )
-        ),
-        _react2.default.createElement(
-          _Grid2.default,
-          { container: true, direction: 'row' },
-          _react2.default.createElement(
-            _Grid2.default,
-            { item: true, xs: 12 },
-            _react2.default.createElement(
-              _Grid2.default,
-              { container: true, className: classes.headerContainer, spacing: 1 },
-              R.map(function (row) {
-                return R.map(function (_ref4) {
-                  var id = _ref4.id,
-                      values = _ref4.values;
-
-                  var selectedValue = R.isNil(R.prop(id)(value)) ? R.head(values) : R.prop(id)(value);
-                  return _react2.default.createElement(
-                    _Grid2.default,
-                    {
-                      key: id,
-                      item: true,
-                      xs: 12 / R.length(row),
-                      className: classes.selectContainer
-                    },
-                    _react2.default.createElement(_.Select, {
-                      onChange: onChangePeriod(getter, id),
-                      label: R.prop(id)(labels),
-                      id: id + '-' + label,
-                      dataTestId: id + '-' + label + '-test-id',
-                      value: selectedValue,
-                      items: R.map(function (option) {
-                        return {
-                          id: id,
-                          value: option,
-                          label: R.ifElse(R.is(String), R.identity, R.prop(id)(_lib.numeralFormat))(option)
-                        };
-                      })(values)
-                    })
-                  );
-                })(row);
-              })(layout)
-            )
-          )
-        )
-      );
-    })([{
-      getter: 'start',
-      testId: 'period-picker-start-period-test-id',
-      layout: (0, _lib.getLayout)(frequency, R.head(ranges), R.head),
-      label: R.prop('start')(labels),
-      value: (0, _lib.getPeriodValue)(R.head(destructuringDates))
-    }, {
-      getter: 'end',
-      testId: 'period-picker-end-period-test-id',
-      layout: (0, _lib.getLayout)(frequency, R.last(ranges), R.last),
-      label: R.prop('end')(labels),
-      value: (0, _lib.getPeriodValue)(R.last(destructuringDates))
-    }])
-  );
+
+  return /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    "data-testid": "period-picker-test-id",
+    container: true,
+    direction: "row"
+  }, showFrequency && /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    item: true,
+    xs: 12,
+    className: classes.headerContainer,
+    "data-testid": "period-picker-frequency-test-id"
+  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    container: true,
+    direction: "row"
+  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/_react.default.createElement(_.Select, {
+    id: labels.frequency,
+    label: labels.frequency,
+    onChange: onChangeFrequency,
+    value: frequency,
+    items: frequencies
+  })))), R.not(isPeriodDisabled) && R.map(function (_ref3) {
+    var getter = _ref3.getter,
+        layout = _ref3.layout,
+        label = _ref3.label,
+        value = _ref3.value,
+        testId = _ref3.testId;
+    return /*#__PURE__*/_react.default.createElement(_Grid.default, {
+      key: getter,
+      item: true,
+      xs: 12,
+      "data-testid": testId
+    }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
+      container: true,
+      direction: "row"
+    }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
+      item: true,
+      xs: 12,
+      className: classes.sideLabel
+    }, /*#__PURE__*/_react.default.createElement("span", null, label))), /*#__PURE__*/_react.default.createElement(_Grid.default, {
+      container: true,
+      direction: "row"
+    }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
+      item: true,
+      xs: 12
+    }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
+      container: true,
+      className: classes.headerContainer,
+      spacing: 1
+    }, R.map(function (row) {
+      return R.map(function (_ref4) {
+        var id = _ref4.id,
+            values = _ref4.values;
+        var selectedValue = R.isNil(R.prop(id)(value)) ? R.head(values) : R.prop(id)(value);
+        return /*#__PURE__*/_react.default.createElement(_Grid.default, {
+          key: id,
+          item: true,
+          xs: 12 / R.length(row),
+          className: classes.selectContainer
+        }, /*#__PURE__*/_react.default.createElement(_.Select, {
+          onChange: onChangePeriod(getter, id),
+          label: R.prop(id)(labels),
+          id: id + "-" + label,
+          dataTestId: id + "-" + label + "-test-id",
+          value: selectedValue,
+          items: R.map(function (option) {
+            return {
+              id: id,
+              value: option,
+              label: R.ifElse(R.is(String), R.identity, R.prop(id)(_lib.numeralFormat))(option)
+            };
+          })(values)
+        }));
+      })(row);
+    })(layout)))));
+  })([{
+    getter: 'start',
+    testId: 'period-picker-start-period-test-id',
+    layout: (0, _lib.getLayout)(frequency, R.head(ranges), R.head),
+    label: R.prop('start')(labels),
+    value: (0, _lib.getPeriodValue)(R.head(destructuringDates))
+  }, {
+    getter: 'end',
+    testId: 'period-picker-end-period-test-id',
+    layout: (0, _lib.getLayout)(frequency, R.last(ranges), R.last),
+    label: R.prop('end')(labels),
+    value: (0, _lib.getPeriodValue)(R.last(destructuringDates))
+  }]));
 };
 
-Period.propTypes = process.env.NODE_ENV !== "production" ? {
-  defaultFrequency: _propTypes2.default.string,
-  availableFrequencies: _propTypes2.default.array,
-  boundaries: _propTypes2.default.array,
-  changePeriod: _propTypes2.default.func,
-  changeFrequency: _propTypes2.default.func,
-  period: _propTypes2.default.array,
-  labels: _propTypes2.default.object,
-  periodDisabled: _propTypes2.default.bool,
-  frequencyDisabled: _propTypes2.default.bool
-} : {};
-
-exports.default = (0, _utils.withBlank)(function (_ref5) {
+var _default = (0, _utils.withBlank)(function (_ref5) {
   var periodDisabled = _ref5.periodDisabled,
       frequencyDisabled = _ref5.frequencyDisabled,
       isBlank = _ref5.isBlank;
@@ -211,4 +180,6 @@ exports.default = (0, _utils.withBlank)(function (_ref5) {
     isBlank: R.or(isBlank, R.and(periodDisabled, frequencyDisabled))
   };
 })(Period);
-module.exports = exports['default'];
+
+exports.default = _default;
+module.exports = exports.default;