@dhis2/analytics 28.0.3 → 28.0.5

package/build/cjs/components/OrgUnitDimension/OrgUnitDimension.js

@@ -16,21 +16,19 @@ var _list = require("../../modules/list.js");
 var _index2 = require("../../modules/ouIdHelper/index.js");
 var _predefinedDimensions = require("../../modules/predefinedDimensions.js");
 var _OrgUnitDimensionStyle = _interopRequireDefault(require("./styles/OrgUnitDimension.style.js"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const DYNAMIC_ORG_UNITS = [_index2.USER_ORG_UNIT, _index2.USER_ORG_UNIT_CHILDREN, _index2.USER_ORG_UNIT_GRANDCHILDREN];
-const OrgUnitDimension = _ref => {
-  let {
-    roots,
-    selected,
-    onSelect,
-    hideGroupSelect,
-    hideLevelSelect,
-    hideUserOrgUnits,
-    warning,
-    displayNameProp
-  } = _ref;
+const OrgUnitDimension = ({
+  roots,
+  selected,
+  onSelect,
+  hideGroupSelect = false,
+  hideLevelSelect = false,
+  hideUserOrgUnits = false,
+  warning,
+  displayNameProp
+}) => {
   const [ouLevels, setOuLevels] = (0, _react.useState)([]);
   const [ouGroups, setOuGroups] = (0, _react.useState)([]);
   const dataEngine = (0, _appRuntime.useDataEngine)();
@@ -147,44 +145,35 @@ const OrgUnitDimension = _ref => {
   }, /*#__PURE__*/_react.default.createElement(_ui.Checkbox, {
     label: _index.default.t('User organisation unit'),
     checked: selected.some(item => item.id === _index2.USER_ORG_UNIT),
-    onChange: _ref2 => {
-      let {
-        checked
-      } = _ref2;
-      return onSelectItems({
-        id: _index2.USER_ORG_UNIT,
-        checked,
-        displayName: _index.default.t('User organisation unit')
-      });
-    },
+    onChange: ({
+      checked
+    }) => onSelectItems({
+      id: _index2.USER_ORG_UNIT,
+      checked,
+      displayName: _index.default.t('User organisation unit')
+    }),
     dense: true
   }), /*#__PURE__*/_react.default.createElement(_ui.Checkbox, {
     label: _index.default.t('User sub-units'),
     checked: selected.some(item => item.id === _index2.USER_ORG_UNIT_CHILDREN),
-    onChange: _ref3 => {
-      let {
-        checked
-      } = _ref3;
-      return onSelectItems({
-        id: _index2.USER_ORG_UNIT_CHILDREN,
-        checked,
-        displayName: _index.default.t('User sub-units')
-      });
-    },
+    onChange: ({
+      checked
+    }) => onSelectItems({
+      id: _index2.USER_ORG_UNIT_CHILDREN,
+      checked,
+      displayName: _index.default.t('User sub-units')
+    }),
     dense: true
   }), /*#__PURE__*/_react.default.createElement(_ui.Checkbox, {
     label: _index.default.t('User sub-x2-units'),
     checked: selected.some(item => item.id === _index2.USER_ORG_UNIT_GRANDCHILDREN),
-    onChange: _ref4 => {
-      let {
-        checked
-      } = _ref4;
-      return onSelectItems({
-        id: _index2.USER_ORG_UNIT_GRANDCHILDREN,
-        checked,
-        displayName: _index.default.t('User sub-x2-units')
-      });
-    },
+    onChange: ({
+      checked
+    }) => onSelectItems({
+      id: _index2.USER_ORG_UNIT_GRANDCHILDREN,
+      checked,
+      displayName: _index.default.t('User sub-x2-units')
+    }),
     dense: true
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: `jsx-${_OrgUnitDimensionStyle.default.__hash}` + " " + "orgUnitTreeWrapper"
@@ -200,12 +189,9 @@ const OrgUnitDimension = _ref => {
     }) || "")
   }, !hideLevelSelect && /*#__PURE__*/_react.default.createElement(_ui.MultiSelect, {
     selected: ouLevels.length ? selected.filter(item => _index2.ouIdHelper.hasLevelPrefix(item.id)).map(item => _index2.ouIdHelper.removePrefix(item.id)) : [],
-    onChange: _ref5 => {
-      let {
-        selected
-      } = _ref5;
-      return onLevelChange(selected);
-    },
+    onChange: ({
+      selected
+    }) => onLevelChange(selected),
     placeholder: _index.default.t('Select a level'),
     loading: !ouLevels.length,
     dense: true,
@@ -217,12 +203,9 @@ const OrgUnitDimension = _ref => {
     dataTest: `org-unit-level-select-option-${level.id}`
   }))), !hideGroupSelect && /*#__PURE__*/_react.default.createElement(_ui.MultiSelect, {
     selected: ouGroups.length ? selected.filter(item => _index2.ouIdHelper.hasGroupPrefix(item.id)).map(item => _index2.ouIdHelper.removePrefix(item.id)) : [],
-    onChange: _ref6 => {
-      let {
-        selected
-      } = _ref6;
-      return onGroupChange(selected);
-    },
+    onChange: ({
+      selected
+    }) => onGroupChange(selected),
     placeholder: _index.default.t('Select a group'),
     loading: !ouGroups.length,
     dense: true,
@@ -253,11 +236,6 @@ const OrgUnitDimension = _ref => {
     id: _OrgUnitDimensionStyle.default.__hash
   }, _OrgUnitDimensionStyle.default));
 };
-OrgUnitDimension.defaultProps = {
-  hideGroupSelect: false,
-  hideLevelSelect: false,
-  hideUserOrgUnits: false
-};
 OrgUnitDimension.propTypes = {
   displayNameProp: _propTypes.default.string,
   hideGroupSelect: _propTypes.default.bool,

package/build/cjs/components/OrgUnitDimension/__tests__/OrgUnitDimension.spec.js

@@ -1,58 +1,92 @@
 "use strict";
 
-var _enzyme = require("enzyme");
-var _react = _interopRequireDefault(require("react"));
+var _appRuntime = require("@dhis2/app-runtime");
+var _react = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _react2 = _interopRequireDefault(require("react"));
 var _OrgUnitDimension = _interopRequireDefault(require("../OrgUnitDimension.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-describe('The OrgUnitDimension component', () => {
-  let props;
-  let shallowOrgUnitDimension;
-  const getWrapper = () => {
-    if (!shallowOrgUnitDimension) {
-      shallowOrgUnitDimension = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_OrgUnitDimension.default, props));
-    }
-    return shallowOrgUnitDimension;
+jest.mock('@dhis2-ui/organisation-unit-tree', () => {
+  const lib = jest.requireActual('@dhis2-ui/organisation-unit-tree');
+  return {
+    ...lib,
+    OrganisationUnitTree: () => /*#__PURE__*/_react2.default.createElement("div", null, "Org unit tree component mock")
   };
-  beforeEach(() => {
-    props = {
-      roots: [],
-      selected: [],
-      onSelect: jest.fn(),
-      hideGroupSelect: false,
-      hideLevelSelect: false,
-      hideUserOrgUnits: false,
-      warning: ''
-    };
-    shallowOrgUnitDimension = undefined;
-  });
-  it('matches the snapshot', () => {
-    const wrapper = getWrapper();
-    expect(wrapper).toMatchSnapshot();
+});
+describe('OrgUnitDimension', () => {
+  const onSelect = jest.fn();
+  const props = {
+    roots: [],
+    selected: [],
+    onSelect: onSelect,
+    hideGroupSelect: false,
+    hideLevelSelect: false,
+    hideUserOrgUnits: false,
+    warning: ''
+  };
+  const renderOrgUnitDimension = props => (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_appRuntime.CustomDataProvider, {
+    data: {
+      organisationUnitLevels: {
+        organisationUnitLevels: []
+      },
+      organisationUnitGroups: {
+        organisationUnitGroups: []
+      }
+    }
+  }, /*#__PURE__*/_react2.default.createElement(_OrgUnitDimension.default, props)));
+  beforeEach(() => onSelect.mockClear());
+  test('OrgUnitDimension is rendered correctly', async () => {
+    renderOrgUnitDimension(props);
+
+    // wait for the component to be loaded, here done by testing that the OrganisationUnitTree component is loaded
+    // avoid the act warning due to the snapshot being taken before async code is run
+    await _react.screen.findByText('Org unit tree component mock');
+
+    // the top user org unit checkboxes are rendered
+    expect(_react.screen.getByLabelText('User organisation unit')).toBeInTheDocument();
+    expect(_react.screen.getByLabelText('User sub-units')).toBeInTheDocument();
+    expect(_react.screen.getByLabelText('User sub-x2-units')).toBeInTheDocument();
+
+    // the OrganisationUnitTree component is rendered
+    expect(_react.screen.getByText('Org unit tree component mock')).toBeInTheDocument();
+
+    // the level selector is rendered
+    expect(_react.screen.getByText('Select a level')).toBeInTheDocument();
+
+    // the group selector is rendered
+    expect(_react.screen.getByText('Select a group')).toBeInTheDocument();
+
+    // the Deselect all button is rendered
+    expect(_react.screen.getByRole('button', {
+      name: 'Deselect all'
+    })).toBeInTheDocument();
   });
-  it('calls onSelect when an organisation unit is selected', () => {
-    const wrapper = getWrapper();
-    const orgUnitTree = wrapper.find('OrganisationUnitTree');
-    const testOrgUnit = {
-      id: 'testId',
-      path: '/testPath',
-      displayName: 'Test Org Unit',
-      checked: true
-    };
-    orgUnitTree.props().onChange(testOrgUnit);
-    expect(props.onSelect).toHaveBeenCalledWith({
+  test('OrgUnitDimension calls onSelect when an organisation unit is selected', async () => {
+    const user = _userEvent.default.setup();
+    renderOrgUnitDimension(props);
+    await user.click(_react.screen.getByText('User organisation unit'));
+    expect(onSelect).toHaveBeenCalledWith({
       dimensionId: 'ou',
       items: [{
-        id: 'testId',
-        path: '/testPath',
-        name: 'Test Org Unit'
+        id: 'USER_ORGUNIT',
+        displayName: 'User organisation unit'
       }]
     });
   });
-  it('calls onSelect with an empty array when selection is cleared', () => {
-    const wrapper = getWrapper();
-    const deselectButton = wrapper.find('Button[onClick]');
-    deselectButton.simulate('click');
-    expect(props.onSelect).toHaveBeenCalledWith({
+  test('OrgUnitDimension calls onSelect with an empty array when selection is cleared', async () => {
+    const user = _userEvent.default.setup();
+    renderOrgUnitDimension({
+      ...props,
+      // make some selection to enable the deselect all button
+      selected: [{
+        id: 'USER_ORGUNIT_CHILDREN',
+        name: 'User sub-units'
+      }]
+    });
+    await user.click(_react.screen.getByRole('button', {
+      name: 'Deselect all'
+    }));
+    expect(onSelect).toHaveBeenLastCalledWith({
       dimensionId: 'ou',
       items: []
     });

package/build/cjs/components/PeriodDimension/FixedPeriodFilter.js

@@ -13,27 +13,25 @@ var _PeriodFilterStyle = _interopRequireDefault(require("./styles/PeriodFilter.s
 var _fixedPeriods = require("./utils/fixedPeriods.js");
 var _index2 = require("./utils/index.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const FixedPeriodFilter = _ref => {
-  let {
-    allowedPeriodTypes,
-    excludedPeriodTypes,
-    currentPeriodType,
-    currentYear,
-    onSelectPeriodType,
-    onSelectYear,
-    dataTest
-  } = _ref;
+const EXCLUDED_PERIOD_TYPES_PROP_DEFAULT = [];
+const FixedPeriodFilter = ({
+  allowedPeriodTypes,
+  excludedPeriodTypes = EXCLUDED_PERIOD_TYPES_PROP_DEFAULT,
+  currentPeriodType,
+  currentYear,
+  onSelectPeriodType,
+  onSelectYear,
+  dataTest
+}) => {
   const onlyAllowedTypeIsSelected = Array.isArray(allowedPeriodTypes) && allowedPeriodTypes.length === 1 && allowedPeriodTypes[0] === currentPeriodType;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    "data-test": dataTest,
     className: `jsx-${_PeriodFilterStyle.default.__hash}` + " " + "leftSection"
   }, /*#__PURE__*/_react.default.createElement(_ui.SingleSelectField, {
     label: _index.default.t('Period type'),
-    onChange: _ref2 => {
-      let {
-        selected
-      } = _ref2;
-      return onSelectPeriodType(selected);
-    },
+    onChange: ({
+      selected
+    }) => onSelectPeriodType(selected),
     dense: true,
     selected: currentPeriodType,
     disabled: onlyAllowedTypeIsSelected,
@@ -52,21 +50,15 @@ const FixedPeriodFilter = _ref => {
     type: "number",
     placeholder: _index.default.t('Select year'),
     value: currentYear,
-    onChange: _ref3 => {
-      let {
-        value
-      } = _ref3;
-      return onSelectYear(value);
-    },
+    onChange: ({
+      value
+    }) => onSelectYear(value),
     dense: true,
     dataTest: `${dataTest}-year`
   })), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: _PeriodFilterStyle.default.__hash
   }, _PeriodFilterStyle.default));
 };
-FixedPeriodFilter.defaultProps = {
-  excludedPeriodTypes: []
-};
 FixedPeriodFilter.propTypes = {
   currentPeriodType: _propTypes.default.string.isRequired,
   currentYear: _propTypes.default.string.isRequired,

package/build/cjs/components/PeriodDimension/FixedPeriodSelect.js

@@ -12,15 +12,14 @@ var _index = _interopRequireDefault(require("../../locales/index.js"));
 var _FixedPeriodFilter = _interopRequireDefault(require("./FixedPeriodFilter.js"));
 var _FixedPeriodSelectStyle = _interopRequireDefault(require("./styles/FixedPeriodSelect.style.js"));
 var _fixedPeriods = require("./utils/fixedPeriods.js");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 class FixedPeriodSelect extends _react.Component {
-  constructor() {
-    super(...arguments);
+  constructor(...args) {
+    super(...args);
     _defineProperty(this, "state", {
       periodType: '',
       year: '',
@@ -40,24 +39,19 @@ class FixedPeriodSelect extends _react.Component {
       });
       this.props.onChange();
     });
-    _defineProperty(this, "onSelectPeriod", (_ref, event) => {
-      let {
-        selected: periodId
-      } = _ref;
-      const period = this.state.options.find(_ref2 => {
-        let {
-          id
-        } = _ref2;
-        return id === periodId;
-      });
+    _defineProperty(this, "onSelectPeriod", ({
+      selected: periodId
+    }, event) => {
+      const period = this.state.options.find(({
+        id
+      }) => id === periodId);
       this.props.onChange(period, event);
     });
   }
-  static getDerivedStateFromProps(_ref3) {
-    let {
-      value,
-      allowedPeriodTypes
-    } = _ref3;
+  static getDerivedStateFromProps({
+    value,
+    allowedPeriodTypes
+  }) {
     const period = (0, _fixedPeriods.parsePeriodCode)(value, allowedPeriodTypes);
     if (!period) {
       return null;
@@ -100,10 +94,10 @@ class FixedPeriodSelect extends _react.Component {
     }, _FixedPeriodSelectStyle.default));
   }
 }
-FixedPeriodSelect.defaultProps = {
+_defineProperty(FixedPeriodSelect, "defaultProps", {
   dataTest: 'dhis2-analytics-fixedperiodselect',
   value: ''
-};
+});
 FixedPeriodSelect.propTypes = {
   onChange: _propTypes.default.func.isRequired,
   allowedPeriodTypes: _propTypes.default.arrayOf(_propTypes.default.string),

package/build/cjs/components/PeriodDimension/PeriodDimension.js

@@ -18,15 +18,15 @@ const userSettingsQuery = {
     }
   }
 };
-const PeriodDimension = _ref => {
-  let {
-    onSelect,
-    selectedPeriods,
-    rightFooter,
-    excludedPeriodTypes,
-    infoBoxMessage,
-    height
-  } = _ref;
+const SELECTED_PERIODS_PROP_DEFAULT = [];
+const PeriodDimension = ({
+  onSelect,
+  selectedPeriods = SELECTED_PERIODS_PROP_DEFAULT,
+  rightFooter,
+  excludedPeriodTypes,
+  infoBoxMessage,
+  height
+}) => {
   const {
     systemInfo
   } = (0, _appRuntime.useConfig)();
@@ -70,7 +70,4 @@ PeriodDimension.propTypes = {
   rightFooter: _propTypes.default.node,
   selectedPeriods: _propTypes.default.array
 };
-PeriodDimension.defaultProps = {
-  selectedPeriods: []
-};
 var _default = exports.default = PeriodDimension;

package/build/cjs/components/PeriodDimension/PeriodTransfer.js

@@ -19,40 +19,41 @@ var _RelativePeriodFilter = _interopRequireDefault(require("./RelativePeriodFilt
 var _fixedPeriods = require("./utils/fixedPeriods.js");
 var _index2 = require("./utils/index.js");
 var _relativePeriods = require("./utils/relativePeriods.js");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } //TODO: Reimplement the icon.js
-const RightHeader = _ref => {
-  let {
-    infoBoxMessage
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
-    className: `jsx-${_DimensionSelectorStyle.default.__hash}` + " " + "rightHeader"
-  }, _index.default.t('Selected Periods')), infoBoxMessage && /*#__PURE__*/_react.default.createElement("div", {
-    className: `jsx-${_DimensionSelectorStyle.default.__hash}` + " " + "info-container"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: `jsx-${_DimensionSelectorStyle.default.__hash}`
-  }, /*#__PURE__*/_react.default.createElement(_ui.IconInfo16, null)), /*#__PURE__*/_react.default.createElement("span", {
-    className: `jsx-${_DimensionSelectorStyle.default.__hash}` + " " + "info-text"
-  }, infoBoxMessage)), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: _DimensionSelectorStyle.default.__hash
-  }, _DimensionSelectorStyle.default));
-};
+const RightHeader = ({
+  infoBoxMessage
+}) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
+  className: `jsx-${_DimensionSelectorStyle.default.__hash}` + " " + "rightHeader"
+}, _index.default.t('Selected Periods')), infoBoxMessage && /*#__PURE__*/_react.default.createElement("div", {
+  className: `jsx-${_DimensionSelectorStyle.default.__hash}` + " " + "info-container"
+}, /*#__PURE__*/_react.default.createElement("div", {
+  className: `jsx-${_DimensionSelectorStyle.default.__hash}`
+}, /*#__PURE__*/_react.default.createElement(_ui.IconInfo16, null)), /*#__PURE__*/_react.default.createElement("span", {
+  className: `jsx-${_DimensionSelectorStyle.default.__hash}` + " " + "info-text"
+}, infoBoxMessage)), /*#__PURE__*/_react.default.createElement(_style.default, {
+  id: _DimensionSelectorStyle.default.__hash
+}, _DimensionSelectorStyle.default));
 RightHeader.propTypes = {
   infoBoxMessage: _propTypes.default.string
 };
-const PeriodTransfer = _ref2 => {
-  let {
-    onSelect,
-    dataTest,
-    selectedItems,
-    rightFooter,
-    excludedPeriodTypes,
-    periodsSettings,
-    infoBoxMessage,
-    height = _dimensionSelectorHelper.TRANSFER_HEIGHT
-  } = _ref2;
+const SELECTED_ITEMS_PROP_DEFAULT = [];
+const EXCLUDED_PERIOD_TYPES_PROP_DEFAULT = [];
+const PERIODS_SETTINGS_PROP_DEFAULT = {
+  calendar: 'gregory',
+  locale: 'en'
+};
+const PeriodTransfer = ({
+  onSelect,
+  dataTest,
+  selectedItems = SELECTED_ITEMS_PROP_DEFAULT,
+  rightFooter,
+  excludedPeriodTypes = EXCLUDED_PERIOD_TYPES_PROP_DEFAULT,
+  periodsSettings = PERIODS_SETTINGS_PROP_DEFAULT,
+  infoBoxMessage,
+  height = _dimensionSelectorHelper.TRANSFER_HEIGHT
+}) => {
   const defaultRelativePeriodType = excludedPeriodTypes.includes(_index2.MONTHLY) ? (0, _relativePeriods.getRelativePeriodsOptionsById)(_index2.QUARTERLY) : (0, _relativePeriods.getRelativePeriodsOptionsById)(_index2.MONTHLY);
   const defaultFixedPeriodType = excludedPeriodTypes.includes(_index2.MONTHLY) ? (0, _fixedPeriods.getFixedPeriodsOptionsById)(_index2.QUARTERLY, periodsSettings) : (0, _fixedPeriods.getFixedPeriodsOptionsById)(_index2.MONTHLY, periodsSettings);
   const now = (0, _multiCalendarDates.getNowInCalendar)(periodsSettings.calendar);
@@ -135,10 +136,9 @@ const PeriodTransfer = _ref2 => {
     id: _DimensionSelectorStyle.default.__hash
   }, _DimensionSelectorStyle.default));
   return /*#__PURE__*/_react.default.createElement(_ui.Transfer, {
-    onChange: _ref3 => {
-      let {
-        selected
-      } = _ref3;
+    onChange: ({
+      selected
+    }) => {
       const formattedItems = selected.map(id => {
         const matchingItem = [...allPeriods, ...selectedItems].find(item => item.id === id);
         return {
@@ -160,39 +160,25 @@ const PeriodTransfer = _ref2 => {
       infoBoxMessage: infoBoxMessage
     }),
     rightFooter: rightFooter,
-    options: [...allPeriods, ...selectedItems].map(_ref4 => {
-      let {
-        id,
-        name
-      } = _ref4;
-      return {
-        label: name,
-        value: id
-      };
-    }),
-    renderOption: _ref5 => {
-      let {
-        value,
-        ...props
-      } = _ref5;
-      return /*#__PURE__*/_react.default.createElement(_TransferOption.TransferOption, _extends({}, props, {
-        value: value,
-        active: isActive(value),
-        icon: _PeriodIcon.default,
-        dataTest: `${dataTest}-transfer-option`
-      }));
-    },
+    options: [...allPeriods, ...selectedItems].map(({
+      id,
+      name
+    }) => ({
+      label: name,
+      value: id
+    })),
+    renderOption: ({
+      value,
+      ...props
+    }) => /*#__PURE__*/_react.default.createElement(_TransferOption.TransferOption, _extends({}, props, {
+      value: value,
+      active: isActive(value),
+      icon: _PeriodIcon.default,
+      dataTest: `${dataTest}-transfer-option`
+    })),
     dataTest: `${dataTest}-transfer`
   });
 };
-PeriodTransfer.defaultProps = {
-  selectedItems: [],
-  excludedPeriodTypes: [],
-  periodsSettings: {
-    calendar: 'gregory',
-    locale: 'en'
-  }
-};
 PeriodTransfer.propTypes = {
   onSelect: _propTypes.default.func.isRequired,
   dataTest: _propTypes.default.string,