@dhis2/analytics 20.6.4 → 21.0.0-alpha.3

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

@@ -0,0 +1,244 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.defaultState = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _d2UiOrgUnitDialog = require("@dhis2/d2-ui-org-unit-dialog");
+
+var _ui = require("@dhis2/ui");
+
+var _sortBy = _interopRequireDefault(require("lodash/sortBy"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _organisationUnits = require("../../api/organisationUnits");
+
+var _ouIdHelper = require("../../modules/ouIdHelper");
+
+var _predefinedDimensions = require("../../modules/predefinedDimensions");
+
+var _OrgUnitDimension = _interopRequireDefault(require("./styles/OrgUnitDimension.style"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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 }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+const defaultState = {
+  root: undefined,
+  roots: undefined,
+  // use "selected" property for cloning org units while user org unit(s) is (are) selected
+  selected: [],
+  ouLevels: [],
+  ouGroups: [],
+  showOrgUnitsTree: true
+};
+exports.defaultState = defaultState;
+
+class OrgUnitDimension extends _react.Component {
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "showOrgUnitsTree", () => {
+      this.setState({
+        showOrgUnitsTree: true
+      });
+    });
+
+    _defineProperty(this, "hideOrgUnitsTree", () => {
+      this.setState({
+        showOrgUnitsTree: false
+      });
+    });
+
+    _defineProperty(this, "getUserOrgUnitsFromIds", ids => {
+      return _d2UiOrgUnitDialog.userOrgUnits.filter(ou => ids.includes(ou.id));
+    });
+
+    _defineProperty(this, "onLevelChange", event => {
+      const levelIds = event.target.value.filter(id => !!id);
+      this.props.onSelect({
+        dimensionId: _predefinedDimensions.DIMENSION_ID_ORGUNIT,
+        items: [...this.props.ouItems.filter(ou => !_ouIdHelper.ouIdHelper.hasLevelPrefix(ou.id)), ...levelIds.map(id => {
+          const levelOu = this.state.ouLevels.find(ou => ou.id === id);
+          return { ...levelOu,
+            id: _ouIdHelper.ouIdHelper.addLevelPrefix(levelOu.id)
+          };
+        })]
+      });
+    });
+
+    _defineProperty(this, "onGroupChange", event => {
+      const groupIds = event.target.value.filter(id => !!id);
+      this.props.onSelect({
+        dimensionId: _predefinedDimensions.DIMENSION_ID_ORGUNIT,
+        items: [...this.props.ouItems.filter(ou => !_ouIdHelper.ouIdHelper.hasGroupPrefix(ou.id)), ...groupIds.map(id => {
+          const groupOu = this.state.ouGroups.find(ou => ou.id === id);
+          return { ...groupOu,
+            id: _ouIdHelper.ouIdHelper.addGroupPrefix(id)
+          };
+        })]
+      });
+    });
+
+    _defineProperty(this, "onDeselectAllClick", () => this.props.onDeselect({
+      dimensionId: _predefinedDimensions.DIMENSION_ID_ORGUNIT,
+      itemIdsToRemove: this.props.ouItems.map(ou => ou.id)
+    }));
+
+    _defineProperty(this, "loadOrgUnitTree", (d2, displayNameProperty) => {
+      (0, _organisationUnits.apiFetchOrganisationUnits)(d2, displayNameProperty).then(rootLevel => rootLevel.toArray()).then(roots => {
+        this.setState({
+          roots,
+          root: roots[0]
+        });
+      });
+    });
+
+    _defineProperty(this, "loadOrgUnitGroups", (d2, displayNameProperty) => {
+      (0, _organisationUnits.apiFetchOrganisationUnitGroups)(d2, displayNameProperty).then(organisationUnitGroups => this.setState({
+        ouGroups: organisationUnitGroups
+      }));
+    });
+
+    _defineProperty(this, "loadOrgUnitLevels", d2 => {
+      (0, _organisationUnits.apiFetchOrganisationUnitLevels)(d2).then(organisationUnitLevels => this.setState({
+        ouLevels: (0, _sortBy.default)(organisationUnitLevels, ['level'])
+      }));
+    });
+
+    _defineProperty(this, "handleOrgUnitClick", (event, orgUnit) => {
+      const selected = this.props.ouItems;
+
+      if (selected.some(ou => ou.path === orgUnit.path)) {
+        this.props.onDeselect({
+          dimensionId: _predefinedDimensions.DIMENSION_ID_ORGUNIT,
+          itemIdsToRemove: [orgUnit.id]
+        });
+      } else {
+        this.props.onSelect({
+          dimensionId: _predefinedDimensions.DIMENSION_ID_ORGUNIT,
+          items: [...selected, { ...orgUnit,
+            name: orgUnit.name || orgUnit.displayName
+          }]
+        });
+      }
+    });
+
+    _defineProperty(this, "handleUserOrgUnitClick", (event, checked) => {
+      if (checked) {
+        if (!this.state.selected.length) {
+          this.setState({
+            selected: this.props.ouItems.slice()
+          });
+        }
+
+        this.props.onSelect({
+          dimensionId: _predefinedDimensions.DIMENSION_ID_ORGUNIT,
+          items: [...this.props.ouItems.filter(ou => this.userOrgUnitIds.includes(ou.id)), _d2UiOrgUnitDialog.userOrgUnits.find(ou => ou.id === event.target.name)]
+        });
+      } else {
+        if (this.props.ouItems.length === 1 && this.state.selected.length > 0) {
+          this.props.onSelect({
+            dimensionId: _predefinedDimensions.DIMENSION_ID_ORGUNIT,
+            items: this.state.selected
+          });
+        } else {
+          this.props.onDeselect({
+            dimensionId: _predefinedDimensions.DIMENSION_ID_ORGUNIT,
+            itemIdsToRemove: [event.target.name]
+          });
+        }
+      }
+    });
+
+    _defineProperty(this, "handleMultipleOrgUnitsSelect", orgUnits => {
+      const selected = this.props.ouItems;
+      this.props.onSelect({
+        dimensionId: _predefinedDimensions.DIMENSION_ID_ORGUNIT,
+        items: [...selected, ...orgUnits.reduce((obj, ou) => {
+          // avoid duplicates when clicking "Select children" multiple times
+          if (!selected.find(i => i.id === ou.id)) {
+            obj.push({ ...ou,
+              name: ou.name || ou.displayName
+            });
+          }
+
+          return obj;
+        }, [])]
+      });
+    });
+
+    _defineProperty(this, "render", () => {
+      const ids = this.props.ouItems.map(ou => ou.id);
+      const selected = this.props.ouItems.filter(ou => !this.userOrgUnitIds.includes(ou.id) && !_ouIdHelper.ouIdHelper.hasLevelPrefix(ou.id) && !_ouIdHelper.ouIdHelper.hasGroupPrefix(ou.id));
+      const userOrgUnits = this.getUserOrgUnitsFromIds(ids);
+      const level = ids.filter(_ouIdHelper.ouIdHelper.hasLevelPrefix).map(_ouIdHelper.ouIdHelper.removePrefix);
+      const group = ids.filter(_ouIdHelper.ouIdHelper.hasGroupPrefix).map(_ouIdHelper.ouIdHelper.removePrefix);
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, this.state.root && this.state.showOrgUnitsTree && /*#__PURE__*/_react.default.createElement(_d2UiOrgUnitDialog.OrgUnitSelector, {
+        d2: this.props.d2,
+        root: this.state.root,
+        roots: this.state.roots,
+        selected: selected,
+        userOrgUnits: userOrgUnits,
+        level: level,
+        group: group,
+        levelOptions: this.state.ouLevels,
+        groupOptions: this.state.ouGroups,
+        onLevelChange: this.onLevelChange,
+        onGroupChange: this.onGroupChange,
+        onDeselectAllClick: this.onDeselectAllClick,
+        handleUserOrgUnitClick: this.handleUserOrgUnitClick,
+        handleOrgUnitClick: this.handleOrgUnitClick,
+        handleMultipleOrgUnitsSelect: this.handleMultipleOrgUnitsSelect,
+        checkboxColor: "secondary",
+        deselectAllTooltipFontColor: _ui.colors.grey900,
+        deselectAllTooltipBackgroundColor: _ui.colors.grey300,
+        displayNameProperty: this.props.displayNameProperty,
+        isUserDataViewFallback: true
+      }), !this.state.root && /*#__PURE__*/_react.default.createElement("div", {
+        className: `jsx-${_OrgUnitDimension.default.__hash}` + " " + "loader"
+      }, /*#__PURE__*/_react.default.createElement(_ui.CircularLoader, null)), /*#__PURE__*/_react.default.createElement(_style.default, {
+        id: _OrgUnitDimension.default.__hash
+      }, _OrgUnitDimension.default));
+    });
+
+    this.state = defaultState;
+    this.userOrgUnitIds = _d2UiOrgUnitDialog.userOrgUnits.map(ou => ou.id);
+    this.loadOrgUnitTree(props.d2, props.displayNameProperty);
+    this.loadOrgUnitGroups(props.d2, props.displayNameProperty);
+    this.loadOrgUnitLevels(props.d2);
+  }
+
+  componentDidUpdate(prevProps) {
+    const previousId = prevProps.current ? prevProps.current.id : null;
+    const currentId = this.props.current ? this.props.current.id : null; // remount org units selector component to ensure
+    // only selected org units are expanded
+
+    if (previousId !== currentId) {
+      this.hideOrgUnitsTree();
+      setTimeout(this.showOrgUnitsTree, 0);
+    }
+  }
+
+}
+
+OrgUnitDimension.propTypes = {
+  current: _propTypes.default.object,
+  d2: _propTypes.default.object,
+  displayNameProperty: _propTypes.default.string,
+  ouItems: _propTypes.default.array,
+  onDeselect: _propTypes.default.func,
+  onSelect: _propTypes.default.func
+};
+var _default = OrgUnitDimension;
+exports.default = _default;

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

@@ -4,7 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-const _defaultExport = [".loader.jsx-3308394077{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;min-height:100px;}"];
-_defaultExport.__hash = "3308394077";
+
+var _ui = require("@dhis2/ui");
+
+const _defaultExport = [".container.jsx-2759088229{height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".orgUnitTreeWrapper.jsx-2759088229{height:418px;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow:auto;}", ".orgUnitTreeWrapper.jsx-2759088229>*{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".disabled.jsx-2759088229{cursor:not-allowed;opacity:0.5;}", ".disabled.jsx-2759088229>*{pointer-events:none;}", `.userOrgUnitsWrapper.jsx-2759088229{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:${_ui.colors.grey200};padding:${_ui.spacers.dp8} ${_ui.spacers.dp8} ${_ui.spacers.dp8} ${_ui.spacers.dp24};margin-bottom:${_ui.spacers.dp12};}`, `.userOrgUnitsWrapper.jsx-2759088229>*{margin-right:${_ui.spacers.dp48};}`, `.selectsWrapper.jsx-2759088229{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:${_ui.spacers.dp8};margin-top:${_ui.spacers.dp12};}`, ".selectsWrapper.jsx-2759088229>*{width:50%;}", `.summaryWrapper.jsx-2759088229{margin-top:${_ui.spacers.dp8};}`, `.summaryText.jsx-2759088229{font-size:14px;line-height:18px;color:${_ui.colors.grey700};}`, `.deselectButton.jsx-2759088229{display:inline-block;margin-left:${_ui.spacers.dp8};}`];
+_defaultExport.__hash = "2759088229";
 var _default = _defaultExport;
 exports.default = _default;

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

@@ -34,7 +34,7 @@ const FixedPeriodFilter = ({
 }) => {
   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", {
-    className: "jsx-".concat(_PeriodFilter.default.__hash) + " " + "leftSection"
+    className: `jsx-${_PeriodFilter.default.__hash}` + " " + "leftSection"
   }, /*#__PURE__*/_react.default.createElement(_ui.SingleSelectField, {
     label: _index.default.t('Period type'),
     onChange: ({
@@ -44,14 +44,14 @@ const FixedPeriodFilter = ({
     selected: currentPeriodType,
     disabled: onlyAllowedTypeIsSelected,
     className: "filterElement",
-    dataTest: "".concat(dataTest, "-period-type")
+    dataTest: `${dataTest}-period-type`
   }, (allowedPeriodTypes ? (0, _fixedPeriods.getFixedPeriodsOptions)().filter(option => allowedPeriodTypes.some(type => type === option.id)) : (0, _index2.filterPeriodTypesById)((0, _fixedPeriods.getFixedPeriodsOptions)(), excludedPeriodTypes)).map(option => /*#__PURE__*/_react.default.createElement(_ui.SingleSelectOption, {
     key: option.id,
     value: option.id,
     label: option.name,
-    dataTest: "".concat(dataTest, "-period-type-option-").concat(option.id)
+    dataTest: `${dataTest}-period-type-option-${option.id}`
   })))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "jsx-".concat(_PeriodFilter.default.__hash) + " " + "rightSection"
+    className: `jsx-${_PeriodFilter.default.__hash}` + " " + "rightSection"
   }, /*#__PURE__*/_react.default.createElement(_ui.InputField, {
     label: _index.default.t('Year'),
     className: "filterElement",
@@ -62,7 +62,7 @@ const FixedPeriodFilter = ({
       value
     }) => onSelectYear(value),
     dense: true,
-    dataTest: "".concat(dataTest, "-year")
+    dataTest: `${dataTest}-year`
   })), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: _PeriodFilter.default.__hash
   }, _PeriodFilter.default));

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

@@ -7,10 +7,10 @@ exports.default = void 0;
 
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 
-var _propTypes = _interopRequireDefault(require("@dhis2/prop-types"));
-
 var _ui = require("@dhis2/ui");
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _index = _interopRequireDefault(require("../../locales/index.js"));
@@ -21,9 +21,9 @@ var _FixedPeriodSelectStyle = _interopRequireDefault(require("./styles/FixedPeri
 
 var _fixedPeriods = require("./utils/fixedPeriods.js");
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _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 }; }
 
@@ -92,9 +92,9 @@ class FixedPeriodSelect extends _react.Component {
   render() {
     return /*#__PURE__*/_react.default.createElement("div", {
       "data-test": this.props.dataTest,
-      className: "jsx-".concat(_FixedPeriodSelectStyle.default.__hash) + " " + (this.props.className || "")
+      className: `jsx-${_FixedPeriodSelectStyle.default.__hash}` + " " + (this.props.className || "")
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "jsx-".concat(_FixedPeriodSelectStyle.default.__hash) + " " + "row"
+      className: `jsx-${_FixedPeriodSelectStyle.default.__hash}` + " " + "row"
     }, /*#__PURE__*/_react.default.createElement(_FixedPeriodFilter.default, {
       allowedPeriodTypes: this.props.allowedPeriodTypes,
       currentPeriodType: this.state.periodType,

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

@@ -33,9 +33,9 @@ var _index2 = require("./utils/index.js");
 
 var _relativePeriods = require("./utils/relativePeriods");
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _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 }; }
 
@@ -79,13 +79,13 @@ const PeriodTransfer = ({
   const renderLeftHeader = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ui.TabBar, null, /*#__PURE__*/_react.default.createElement(_ui.Tab, {
     selected: isRelative,
     onClick: () => onIsRelativeClick(true),
-    dataTest: "".concat(dataTest, "-relative-periods-button")
+    dataTest: `${dataTest}-relative-periods-button`
   }, _index.default.t('Relative periods')), /*#__PURE__*/_react.default.createElement(_ui.Tab, {
     selected: !isRelative,
     onClick: () => onIsRelativeClick(false),
-    dataTest: "".concat(dataTest, "-fixed-periods-button")
+    dataTest: `${dataTest}-fixed-periods-button`
   }, _index.default.t('Fixed periods'))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "jsx-".concat(_DimensionSelector.default.__hash) + " " + "filterContainer"
+    className: `jsx-${_DimensionSelector.default.__hash}` + " " + "filterContainer"
   }, isRelative ? /*#__PURE__*/_react.default.createElement(_RelativePeriodFilter.default, {
     currentFilter: relativeFilter.periodType,
     onSelectFilter: filter => {
@@ -94,7 +94,7 @@ const PeriodTransfer = ({
       });
       setAllPeriods((0, _relativePeriods.getRelativePeriodsOptionsById)(filter).getPeriods());
     },
-    dataTest: "".concat(dataTest, "-relative-period-filter"),
+    dataTest: `${dataTest}-relative-period-filter`,
     excludedPeriodTypes: excludedPeriodTypes
   }) : /*#__PURE__*/_react.default.createElement(_FixedPeriodFilter.default, {
     currentPeriodType: fixedFilter.periodType,
@@ -111,14 +111,14 @@ const PeriodTransfer = ({
         year
       });
     },
-    dataTest: "".concat(dataTest, "-fixed-period-filter"),
+    dataTest: `${dataTest}-fixed-period-filter`,
     excludedPeriodTypes: excludedPeriodTypes
   })), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: _DimensionSelector.default.__hash
   }, _DimensionSelector.default));
 
   const renderRightHeader = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
-    className: "jsx-".concat(_DimensionSelector.default.__hash) + " " + "rightHeader"
+    className: `jsx-${_DimensionSelector.default.__hash}` + " " + "rightHeader"
   }, _index.default.t('Selected Periods')), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: _DimensionSelector.default.__hash
   }, _DimensionSelector.default));
@@ -129,7 +129,7 @@ const PeriodTransfer = ({
   };
 
   const renderEmptySelection = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
-    className: "jsx-".concat(_DimensionSelector.default.__hash) + " " + "emptyList"
+    className: `jsx-${_DimensionSelector.default.__hash}` + " " + "emptyList"
   }, _index.default.t('No periods selected')), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: _DimensionSelector.default.__hash
   }, _DimensionSelector.default));
@@ -163,9 +163,9 @@ const PeriodTransfer = ({
     })),
     renderOption: props => /*#__PURE__*/_react.default.createElement(_TransferOption.TransferOption, _extends({}, props, {
       icon: _PeriodIcon.default,
-      dataTest: "".concat(dataTest, "-transfer-option")
+      dataTest: `${dataTest}-transfer-option`
     })),
-    dataTest: "".concat(dataTest, "-transfer")
+    dataTest: `${dataTest}-transfer`
   });
 };
 

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

@@ -29,7 +29,7 @@ const RelativePeriodFilter = ({
   dataTest,
   excludedPeriodTypes
 }) => /*#__PURE__*/_react.default.createElement("div", {
-  className: "jsx-".concat(_PeriodFilter.default.__hash) + " " + "leftSection"
+  className: `jsx-${_PeriodFilter.default.__hash}` + " " + "leftSection"
 }, /*#__PURE__*/_react.default.createElement(_ui.SingleSelectField, {
   label: _index.default.t('Period type'),
   onChange: ({
@@ -43,7 +43,7 @@ const RelativePeriodFilter = ({
   key: option.id,
   value: option.id,
   label: option.name,
-  dataTest: "".concat(dataTest, "-option-").concat(option.id)
+  dataTest: `${dataTest}-option-${option.id}`
 }))), /*#__PURE__*/_react.default.createElement(_style.default, {
   id: _PeriodFilter.default.__hash
 }, _PeriodFilter.default));

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

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _ui = require("@dhis2/ui");
 
-const _defaultExport = [".row.jsx-86888579{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-bottom:".concat(_ui.spacers.dp8, ";}")];
+const _defaultExport = [`.row.jsx-86888579{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-bottom:${_ui.spacers.dp8};}`];
 _defaultExport.__hash = "86888579";
 var _default = _defaultExport;
 exports.default = _default;

package/build/cjs/components/PeriodDimension/styles/PeriodFilter.style.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _ui = require("@dhis2/ui");
 
-const _defaultExport = [".leftSection.jsx-2872988609{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".leftSection.jsx-2872988609>.filterElement,.rightSection.jsx-2872988609>.filterElement{margin:0;}", ".rightSection.jsx-2872988609{width:120px;margin-left:".concat(_ui.spacers.dp8, ";}")];
+const _defaultExport = [".leftSection.jsx-2872988609{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".leftSection.jsx-2872988609>.filterElement,.rightSection.jsx-2872988609>.filterElement{margin:0;}", `.rightSection.jsx-2872988609{width:120px;margin-left:${_ui.spacers.dp8};}`];
 _defaultExport.__hash = "2872988609";
 var _default = _defaultExport;
 exports.default = _default;