@sis-cc/dotstatsuite-visions 6.6.0 → 6.6.1

package/lib/Pagination/Pagination.js

@@ -1,35 +1,54 @@
-"use strict";
-
-var _interopRequireDefault = require("/builds/sis-cc/.stat-suite/dotstatsuite-visions/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+'use strict';
 
 exports.__esModule = true;
-exports.default = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+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 _KeyboardArrowLeft = require('@material-ui/icons/KeyboardArrowLeft');
 
-var R = _interopRequireWildcard(require("ramda"));
+var _KeyboardArrowLeft2 = _interopRequireDefault(_KeyboardArrowLeft);
 
-var _styles = require("@material-ui/core/styles");
+var _KeyboardArrowRight = require('@material-ui/icons/KeyboardArrowRight');
 
-var _KeyboardArrowLeft = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowLeft"));
+var _KeyboardArrowRight2 = _interopRequireDefault(_KeyboardArrowRight);
 
-var _KeyboardArrowRight = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowRight"));
+var _IconButton = require('@material-ui/core/IconButton');
 
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _IconButton2 = _interopRequireDefault(_IconButton);
 
-var _FirstPage = _interopRequireDefault(require("@material-ui/icons/FirstPage"));
+var _FirstPage = require('@material-ui/icons/FirstPage');
 
-var _LastPage = _interopRequireDefault(require("@material-ui/icons/LastPage"));
+var _FirstPage2 = _interopRequireDefault(_FirstPage);
 
-var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+var _LastPage = require('@material-ui/icons/LastPage');
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _LastPage2 = _interopRequireDefault(_LastPage);
 
-var _utils = require("../utils");
+var _TextField = require('@material-ui/core/TextField');
 
-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); }
+var _TextField2 = _interopRequireDefault(_TextField);
 
-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 _Typography = require('@material-ui/core/Typography');
+
+var _Typography2 = _interopRequireDefault(_Typography);
+
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
@@ -66,6 +85,7 @@ var PageForm = function PageForm(_ref) {
       page = _ref.page,
       pages = _ref.pages,
       onSubmit = _ref.onSubmit;
+
   var classes = useStyles();
 
   var _useState = (0, _react.useState)(page),
@@ -84,7 +104,6 @@ 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;
@@ -94,94 +113,134 @@ var PageForm = function PageForm(_ref) {
     }
   };
 
-  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));
+  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
+    )
+  );
 };
 
+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 /*#__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)));
+  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)
+    )
+  );
 };
 
-var _default = (0, _utils.withBlank)(function (_ref3) {
+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 isBlank = _ref3.isBlank,
       _ref3$pages = _ref3.pages,
-      pages = _ref3$pages === void 0 ? 1 : _ref3$pages;
+      pages = _ref3$pages === undefined ? 1 : _ref3$pages;
   return {
     isBlank: R.or(isBlank, R.equals(1, pages))
   };
 })(Pagination);
-
-exports.default = _default;
-module.exports = exports.default;
+module.exports = exports['default'];

package/lib/Pagination/index.js

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

package/lib/PeriodPicker/PeriodPicker.js

@@ -1,35 +1,44 @@
-"use strict";
-
-var _interopRequireDefault = require("/builds/sis-cc/.stat-suite/dotstatsuite-visions/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+'use strict';
 
 exports.__esModule = true;
-exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+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 _Grid = require('@material-ui/core/Grid');
 
-var R = _interopRequireWildcard(require("ramda"));
+var _Grid2 = _interopRequireDefault(_Grid);
 
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
+var _lib = require('./lib');
 
-var _lib = require("./lib");
+var _ = require('../');
 
-var _ = require("../");
+var _styles = require('./styles');
 
-var _styles = _interopRequireDefault(require("./styles"));
+var _styles2 = _interopRequireDefault(_styles);
 
-var _constants = require("./constants");
+var _constants = require('./constants');
 
-var _utils = require("../utils");
+var _utils = require('../utils');
 
-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 _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 _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; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var Period = function Period(_ref) {
   var _ref$defaultFrequency = _ref.defaultFrequency,
-      defaultFrequency = _ref$defaultFrequency === void 0 ? _constants.defaultfreq : _ref$defaultFrequency,
+      defaultFrequency = _ref$defaultFrequency === undefined ? _constants.defaultfreq : _ref$defaultFrequency,
       _ref$availableFrequen = _ref.availableFrequencies,
-      availableFrequencies = _ref$availableFrequen === void 0 ? [_constants.defaultfreq] : _ref$availableFrequen,
+      availableFrequencies = _ref$availableFrequen === undefined ? [_constants.defaultfreq] : _ref$availableFrequen,
       _boundaries = _ref.boundaries,
       changePeriod = _ref.changePeriod,
       changeFrequency = _ref.changeFrequency,
@@ -37,7 +46,8 @@ var Period = function Period(_ref) {
       labels = _ref.labels,
       periodDisabled = _ref.periodDisabled,
       frequencyDisabled = _ref.frequencyDisabled;
-  var classes = (0, _styles.default)();
+
+  var classes = (0, _styles2.default)();
   var frequencies = (0, _lib.getFrequencyOptions)(availableFrequencies, labels);
   var frequency = (0, _lib.getDefaultFrequency)({
     defaultFrequency: defaultFrequency,
@@ -53,25 +63,16 @@ 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],
@@ -81,98 +82,128 @@ var Period = function Period(_ref) {
       }
     };
   };
-
-  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))
-  }]));
+  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))
+    }])
+  );
 };
 
-var _default = (0, _utils.withBlank)(function (_ref5) {
+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 periodDisabled = _ref5.periodDisabled,
       frequencyDisabled = _ref5.frequencyDisabled,
       isBlank = _ref5.isBlank;
@@ -180,6 +211,4 @@ var _default = (0, _utils.withBlank)(function (_ref5) {
     isBlank: R.or(isBlank, R.and(periodDisabled, frequencyDisabled))
   };
 })(Period);
-
-exports.default = _default;
-module.exports = exports.default;
+module.exports = exports['default'];