@dhis2/analytics 20.6.5 → 21.0.0-alpha.1

package/build/es/components/OpenFileDialog/OpenFileDialog.js

@@ -24,14 +24,14 @@ const getQuery = type => ({
     }) => {
       const queryParams = {
         filter: filters,
-        fields: "id,type,displayName,title,displayDescription,created,lastUpdated,user,access,href",
+        fields: `id,type,displayName,title,displayDescription,created,lastUpdated,user,access,href`,
         paging: true,
         pageSize: 8,
         page
       };
 
       if (sortDirection !== 'default') {
-        queryParams.order = "".concat(sortField, ":").concat(sortDirection);
+        queryParams.order = `${sortField}:${sortDirection}`;
       }
 
       return queryParams;
@@ -70,11 +70,11 @@ export const OpenFileDialog = ({
 
     switch (filters.createdBy) {
       case CREATED_BY_ALL_BUT_CURRENT_USER:
-        queryFilters.push("user.id:!eq:".concat(currentUser.id));
+        queryFilters.push(`user.id:!eq:${currentUser.id}`);
         break;
 
       case CREATED_BY_CURRENT_USER:
-        queryFilters.push("user.id:eq:".concat(currentUser.id));
+        queryFilters.push(`user.id:eq:${currentUser.id}`);
         break;
 
       case CREATED_BY_ALL:
@@ -91,12 +91,12 @@ export const OpenFileDialog = ({
         break;
 
       default:
-        queryFilters.push("type:eq:".concat(filters.visType));
+        queryFilters.push(`type:eq:${filters.visType}`);
         break;
     }
 
     if (filters.searchTerm) {
-      queryFilters.push("name:ilike:".concat(filters.searchTerm));
+      queryFilters.push(`name:ilike:${filters.searchTerm}`);
     } // for ER 2.38 only show line list ER types
 
 
@@ -174,11 +174,11 @@ export const OpenFileDialog = ({
   }, /*#__PURE__*/React.createElement(ModalTitle, null, getTranslatedString(type, 'modalTitle')), /*#__PURE__*/React.createElement(ModalContent, null, /*#__PURE__*/React.createElement(Box, {
     minHeight: "496px"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "jsx-".concat(styles.__hash) + " " + "search-and-filter-bar"
+    className: `jsx-${styles.__hash}` + " " + "search-and-filter-bar"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "jsx-".concat(styles.__hash) + " " + "search-field-container"
+    className: `jsx-${styles.__hash}` + " " + "search-field-container"
   }, /*#__PURE__*/React.createElement(NameFilter, {
-    dataTest: "".concat(cypressSelector, "-name-filter"),
+    dataTest: `${cypressSelector}-name-filter`,
     value: nameFilterValue,
     onChange: value => {
       setNameFilterValue(value);
@@ -188,14 +188,14 @@ export const OpenFileDialog = ({
       }), 200));
     }
   })), type === AO_TYPE_VISUALIZATION && /*#__PURE__*/React.createElement("div", {
-    className: "jsx-".concat(styles.__hash) + " " + "type-field-container"
+    className: `jsx-${styles.__hash}` + " " + "type-field-container"
   }, /*#__PURE__*/React.createElement(VisTypeFilter, {
     selected: filters.visType,
     onChange: value => setFilters({ ...filters,
       visType: value
     })
   })), /*#__PURE__*/React.createElement("div", {
-    className: "jsx-".concat(styles.__hash) + " " + "created-by-field-container"
+    className: `jsx-${styles.__hash}` + " " + "created-by-field-container"
   }, /*#__PURE__*/React.createElement(CreatedByFilter, {
     selected: filters.createdBy,
     onChange: value => setFilters({ ...filters,
@@ -233,25 +233,25 @@ export const OpenFileDialog = ({
   }, /*#__PURE__*/React.createElement(Box, {
     height: "384px"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "jsx-".concat(styles.__hash) + " " + "info-cell"
+    className: `jsx-${styles.__hash}` + " " + "info-cell"
   }, /*#__PURE__*/React.createElement(CircularLoader, {
     small: true
   }), /*#__PURE__*/React.createElement("span", {
-    className: "jsx-".concat(styles.__hash) + " " + "info-text"
+    className: `jsx-${styles.__hash}` + " " + "info-text"
   }, getTranslatedString(type, 'loadingText')))))), !loading && !(data !== null && data !== void 0 && data.files[AOTypeMap[type].apiEndpoint].length) > 0 && /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableCell, {
     large: true
   }, /*#__PURE__*/React.createElement(Box, {
     minHeight: "384px"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "jsx-".concat(styles.__hash) + " " + "info-cell"
+    className: `jsx-${styles.__hash}` + " " + "info-cell"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "jsx-".concat(styles.__hash) + " " + "info-container"
+    className: `jsx-${styles.__hash}` + " " + "info-container"
   }, !isEqual(filters, defaultFilters) ? /*#__PURE__*/React.createElement("span", {
-    className: "jsx-".concat(styles.__hash) + " " + "info-text"
+    className: `jsx-${styles.__hash}` + " " + "info-text"
   }, getTranslatedString(type, 'noFilteredDataText')) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "jsx-".concat(styles.__hash) + " " + "info-text"
+    className: `jsx-${styles.__hash}` + " " + "info-text"
   }, getTranslatedString(type, 'noDataText')), /*#__PURE__*/React.createElement("div", {
-    className: "jsx-".concat(styles.__hash) + " " + "info-button"
+    className: `jsx-${styles.__hash}` + " " + "info-button"
   }, /*#__PURE__*/React.createElement(Button, {
     onClick: () => {
       onNew();
@@ -264,7 +264,7 @@ export const OpenFileDialog = ({
   }))), (data === null || data === void 0 ? void 0 : data.files[AOTypeMap[type].apiEndpoint].length) > 0 && /*#__PURE__*/React.createElement(DataTableToolbar, {
     position: "bottom"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "jsx-".concat(styles.__hash) + " " + "pagination-controls"
+    className: `jsx-${styles.__hash}` + " " + "pagination-controls"
   }, /*#__PURE__*/React.createElement(PaginationControls, {
     page: page,
     pager: data.files.pager,

package/build/es/components/OpenFileDialog/OpenFileDialog.styles.js

@@ -1,3 +1,3 @@
 import { colors, spacers } from '@dhis2/ui';
-export const styles = [".data-table-body.jsx-2890213967{min-height:465px;}", ".pagination-controls.jsx-2890213967{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}", ".search-and-filter-bar.jsx-2890213967{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;margin-bottom:".concat(spacers.dp8, ";}"), ".search-field-container.jsx-2890213967{min-width:220px;}", ".type-field-container.jsx-2890213967,.created-by-field-container.jsx-2890213967{min-width:180px;}", ".info-cell.jsx-2890213967{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;margin:".concat(spacers.dp32, " 0;}"), ".info-container.jsx-2890213967{max-width:400px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-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;}", ".info-text.jsx-2890213967{text-align:center;font-size:14px;line-height:19px;color:".concat(colors.grey700, ";}"), ".info-button.jsx-2890213967{margin-top:".concat(spacers.dp12, ";}")];
+export const styles = [".data-table-body.jsx-2890213967{min-height:465px;}", ".pagination-controls.jsx-2890213967{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}", `.search-and-filter-bar.jsx-2890213967{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;margin-bottom:${spacers.dp8};}`, ".search-field-container.jsx-2890213967{min-width:220px;}", ".type-field-container.jsx-2890213967,.created-by-field-container.jsx-2890213967{min-width:180px;}", `.info-cell.jsx-2890213967{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;margin:${spacers.dp32} 0;}`, ".info-container.jsx-2890213967{max-width:400px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-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;}", `.info-text.jsx-2890213967{text-align:center;font-size:14px;line-height:19px;color:${colors.grey700};}`, `.info-button.jsx-2890213967{margin-top:${spacers.dp12};}`];
 styles.__hash = "2890213967";

package/build/es/components/OpenFileDialog/styles/CustomSelectOption.style.js

@@ -1,4 +1,4 @@
 import { colors, spacers } from '@dhis2/ui';
-const _defaultExport = ["div.jsx-1267200705{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;cursor:pointer;font-size:14px;-webkit-text-decoration:none;text-decoration:none;color:".concat(colors.grey900, ";padding:").concat(spacers.dp8, " ").concat(spacers.dp12, ";}"), "div.jsx-1267200705:hover{background-color:".concat(colors.grey200, ";}"), "div.jsx-1267200705:active,div.active.jsx-1267200705{background-color:".concat(colors.teal700, ";color:").concat(colors.white, ";cursor:auto;}"), "div.disabled.jsx-1267200705{color:".concat(colors.grey500, ";cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"), "div.disabled.jsx-1267200705:hover{background-color:initial;}", "span.label.jsx-1267200705{margin-left:".concat(spacers.dp8, ";}")];
+const _defaultExport = [`div.jsx-1267200705{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;cursor:pointer;font-size:14px;-webkit-text-decoration:none;text-decoration:none;color:${colors.grey900};padding:${spacers.dp8} ${spacers.dp12};}`, `div.jsx-1267200705:hover{background-color:${colors.grey200};}`, `div.jsx-1267200705:active,div.active.jsx-1267200705{background-color:${colors.teal700};color:${colors.white};cursor:auto;}`, `div.disabled.jsx-1267200705{color:${colors.grey500};cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}`, "div.disabled.jsx-1267200705:hover{background-color:initial;}", `span.label.jsx-1267200705{margin-left:${spacers.dp8};}`];
 _defaultExport.__hash = "1267200705";
 export default _defaultExport;

package/build/es/components/Options/styles/VisualizationOptions.style.js

@@ -12,19 +12,19 @@ export const modalContent = {
 export const tabBar = {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3103009923"
-  }, ["div.jsx-3103009923{padding-right:".concat(spacers.dp24, ";}")]),
+  }, [`div.jsx-3103009923{padding-right:${spacers.dp24};}`]),
   className: "jsx-3103009923"
 };
 export const tabContent = {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2208787536"
-  }, ["div.jsx-2208787536{overflow:auto;padding-right:".concat(spacers.dp24, ";}")]),
+  }, [`div.jsx-2208787536{overflow:auto;padding-right:${spacers.dp24};}`]),
   className: "jsx-2208787536"
 };
 export const tabSection = {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1427514941"
-  }, ["div.jsx-1427514941{padding:".concat(spacers.dp16, " 0;}"), "div.jsx-1427514941:not(:last-child){border-bottom:1px solid ".concat(colors.grey300, ";margin-bottom:").concat(spacers.dp8, ";}")]),
+  }, [`div.jsx-1427514941{padding:${spacers.dp16} 0;}`, `div.jsx-1427514941:not(:last-child){border-bottom:1px solid ${colors.grey300};margin-bottom:${spacers.dp8};}`]),
   className: "jsx-1427514941"
 };
 export const tabSectionContent = {
@@ -36,37 +36,37 @@ export const tabSectionContent = {
 export const tabSectionTitle = {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3115295887"
-  }, ["span.jsx-3115295887{display:inline-block;padding-bottom:".concat(spacers.dp12, ";font-size:15px;color:").concat(colors.grey900, ";font-weight:500;-webkit-letter-spacing:0.2px;-moz-letter-spacing:0.2px;-ms-letter-spacing:0.2px;letter-spacing:0.2px;}")]),
+  }, [`span.jsx-3115295887{display:inline-block;padding-bottom:${spacers.dp12};font-size:15px;color:${colors.grey900};font-weight:500;-webkit-letter-spacing:0.2px;-moz-letter-spacing:0.2px;-ms-letter-spacing:0.2px;letter-spacing:0.2px;}`]),
   className: "jsx-3115295887"
 };
 export const tabSectionTitleMargin = {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "642558349"
-  }, ["span.jsx-642558349{margin-top:".concat(spacers.dp8, ";}")]),
+  }, [`span.jsx-642558349{margin-top:${spacers.dp8};}`]),
   className: "jsx-642558349"
 };
 export const tabSectionOption = {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1665807213"
-  }, ["div.jsx-1665807213:not(:last-child):not(.inline){padding-bottom:".concat(spacers.dp16, ";}")]),
+  }, [`div.jsx-1665807213:not(:last-child):not(.inline){padding-bottom:${spacers.dp16};}`]),
   className: "jsx-1665807213"
 };
 export const tabSectionOptionItem = {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2983019948"
-  }, ["div.jsx-2983019948:not(:last-child){padding-bottom:".concat(spacers.dp8, ";}")]),
+  }, [`div.jsx-2983019948:not(:last-child){padding-bottom:${spacers.dp8};}`]),
   className: "jsx-2983019948"
 };
 export const tabSectionOptionText = {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3330936769"
-  }, ["p.jsx-3330936769{margin:0;padding-bottom:".concat(spacers.dp8, ";font-size:14px;line-height:19px;color:").concat(colors.grey700, ";}")]),
+  }, [`p.jsx-3330936769{margin:0;padding-bottom:${spacers.dp8};font-size:14px;line-height:19px;color:${colors.grey700};}`]),
   className: "jsx-3330936769"
 };
 export const tabSectionOptionToggleable = {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "684239008"
-  }, ["div.jsx-684239008{margin:".concat(spacers.dp4, " 0 0 23px;}")]),
+  }, [`div.jsx-684239008{margin:${spacers.dp4} 0 0 23px;}`]),
   className: "jsx-684239008"
 };
 export const tabSectionToggleableSubsection = {
@@ -84,6 +84,6 @@ export const tabSectionOptionComplexInline = {
 export const tabSectionOptionIcon = {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "112181591"
-  }, ["span.jsx-112181591{vertical-align:top;margin-right:".concat(spacers.dp4, ";color:").concat(colors.grey600, ";}")]),
+  }, [`span.jsx-112181591{vertical-align:top;margin-right:${spacers.dp4};color:${colors.grey600};}`]),
   className: "jsx-112181591"
 };

package/build/es/components/OrgUnitDimension/OrgUnitDimension.js

@@ -1,220 +1,179 @@
 import _JSXStyle from "styled-jsx/style";
-
-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; }
-
-import { OrgUnitSelector, userOrgUnits } from '@dhis2/d2-ui-org-unit-dialog';
-import { CircularLoader, colors } from '@dhis2/ui';
-import sortBy from 'lodash/sortBy';
+import { useDataEngine } from '@dhis2/app-runtime';
+import { OrganisationUnitTree, Checkbox, MultiSelect, MultiSelectOption } from '@dhis2/ui';
+import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { Component, Fragment } from 'react';
-import { apiFetchOrganisationUnitGroups, apiFetchOrganisationUnitLevels, apiFetchOrganisationUnits } from '../../api/organisationUnits';
-import { ouIdHelper } from '../../modules/ouIdHelper';
+import React, { useEffect, useState } from 'react';
+import { apiFetchOrganisationUnitGroups, apiFetchOrganisationUnitLevels } from '../../api/organisationUnits';
+import i18n from '../../locales/index.js';
+import { ouIdHelper, USER_ORG_UNIT, USER_ORG_UNIT_CHILDREN, USER_ORG_UNIT_GRANDCHILDREN } from '../../modules/ouIdHelper';
 import { DIMENSION_ID_ORGUNIT } from '../../modules/predefinedDimensions';
 import styles from './styles/OrgUnitDimension.style';
-export 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
-};
-
-class OrgUnitDimension extends Component {
-  constructor(props) {
-    super(props);
-
-    _defineProperty(this, "showOrgUnitsTree", () => {
-      this.setState({
-        showOrgUnitsTree: true
-      });
-    });
-
-    _defineProperty(this, "hideOrgUnitsTree", () => {
-      this.setState({
-        showOrgUnitsTree: false
-      });
-    });
-
-    _defineProperty(this, "getUserOrgUnitsFromIds", ids => {
-      return userOrgUnits.filter(ou => ids.includes(ou.id));
-    });
-
-    _defineProperty(this, "onLevelChange", event => {
-      const levelIds = event.target.value.filter(id => !!id);
-      this.props.onSelect({
-        dimensionId: DIMENSION_ID_ORGUNIT,
-        items: [...this.props.ouItems.filter(ou => !ouIdHelper.hasLevelPrefix(ou.id)), ...levelIds.map(id => {
-          const levelOu = this.state.ouLevels.find(ou => ou.id === id);
-          return { ...levelOu,
-            id: ouIdHelper.addLevelPrefix(levelOu.id)
-          };
-        })]
-      });
-    });
-
-    _defineProperty(this, "onGroupChange", event => {
-      const groupIds = event.target.value.filter(id => !!id);
-      this.props.onSelect({
-        dimensionId: DIMENSION_ID_ORGUNIT,
-        items: [...this.props.ouItems.filter(ou => !ouIdHelper.hasGroupPrefix(ou.id)), ...groupIds.map(id => {
-          const groupOu = this.state.ouGroups.find(ou => ou.id === id);
-          return { ...groupOu,
-            id: ouIdHelper.addGroupPrefix(id)
-          };
-        })]
+const DYNAMIC_ORG_UNITS = [USER_ORG_UNIT, USER_ORG_UNIT_CHILDREN, USER_ORG_UNIT_GRANDCHILDREN];
+
+const OrgUnitDimension = ({
+  root,
+  selected,
+  onSelect
+}) => {
+  const [ouLevels, setOuLevels] = useState([]);
+  const [ouGroups, setOuGroups] = useState([]);
+  const dataEngine = useDataEngine();
+
+  const onSelectItems = selectedItem => {
+    const {
+      id,
+      checked,
+      displayName,
+      path
+    } = selectedItem;
+    let result = [...selected];
+
+    if (checked && DYNAMIC_ORG_UNITS.includes(id)) {
+      result = [...result.filter(item => DYNAMIC_ORG_UNITS.includes(item.id)), {
+        id,
+        displayName
+      }];
+    } else if (checked) {
+      result.push({
+        id,
+        path,
+        name: displayName
       });
-    });
+    } else {
+      result = [...result.filter(item => item.id !== id)];
+    }
 
-    _defineProperty(this, "onDeselectAllClick", () => this.props.onDeselect({
+    return onSelect({
       dimensionId: DIMENSION_ID_ORGUNIT,
-      itemIdsToRemove: this.props.ouItems.map(ou => ou.id)
-    }));
-
-    _defineProperty(this, "loadOrgUnitTree", (d2, displayNameProperty) => {
-      apiFetchOrganisationUnits(d2, displayNameProperty).then(rootLevel => rootLevel.toArray()).then(roots => {
-        this.setState({
-          roots,
-          root: roots[0]
-        });
-      });
-    });
-
-    _defineProperty(this, "loadOrgUnitGroups", (d2, displayNameProperty) => {
-      apiFetchOrganisationUnitGroups(d2, displayNameProperty).then(organisationUnitGroups => this.setState({
-        ouGroups: organisationUnitGroups
-      }));
-    });
-
-    _defineProperty(this, "loadOrgUnitLevels", d2 => {
-      apiFetchOrganisationUnitLevels(d2).then(organisationUnitLevels => this.setState({
-        ouLevels: sortBy(organisationUnitLevels, ['level'])
-      }));
-    });
-
-    _defineProperty(this, "handleOrgUnitClick", (event, orgUnit) => {
-      const selected = this.props.ouItems;
-
-      if (selected.some(ou => ou.path === orgUnit.path)) {
-        this.props.onDeselect({
-          dimensionId: DIMENSION_ID_ORGUNIT,
-          itemIdsToRemove: [orgUnit.id]
-        });
-      } else {
-        this.props.onSelect({
-          dimensionId: DIMENSION_ID_ORGUNIT,
-          items: [...selected, { ...orgUnit,
-            name: orgUnit.name || orgUnit.displayName
-          }]
-        });
-      }
+      items: result
     });
-
-    _defineProperty(this, "handleUserOrgUnitClick", (event, checked) => {
-      if (checked) {
-        if (!this.state.selected.length) {
-          this.setState({
-            selected: this.props.ouItems.slice()
-          });
-        }
-
-        this.props.onSelect({
-          dimensionId: DIMENSION_ID_ORGUNIT,
-          items: [...this.props.ouItems.filter(ou => this.userOrgUnitIds.includes(ou.id)), userOrgUnits.find(ou => ou.id === event.target.name)]
-        });
-      } else {
-        if (this.props.ouItems.length === 1 && this.state.selected.length > 0) {
-          this.props.onSelect({
-            dimensionId: DIMENSION_ID_ORGUNIT,
-            items: this.state.selected
-          });
-        } else {
-          this.props.onDeselect({
-            dimensionId: DIMENSION_ID_ORGUNIT,
-            itemIdsToRemove: [event.target.name]
-          });
-        }
-      }
-    });
-
-    _defineProperty(this, "handleMultipleOrgUnitsSelect", orgUnits => {
-      const selected = this.props.ouItems;
-      this.props.onSelect({
-        dimensionId: 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;
-        }, [])]
-      });
+  };
+
+  useEffect(() => {
+    const doFetchOuLevels = async () => {
+      const result = await apiFetchOrganisationUnitLevels(dataEngine);
+      result.sort((a, b) => a.level > b.level ? 1 : -1);
+      setOuLevels(result);
+    };
+
+    const doFetchOuGroups = async () => {
+      const result = await apiFetchOrganisationUnitGroups(dataEngine);
+      setOuGroups(result);
+    };
+
+    doFetchOuLevels();
+    doFetchOuGroups();
+  }, [dataEngine]);
+
+  const onLevelChange = ids => {
+    const items = ids.map(id => ({
+      id: ouIdHelper.addLevelPrefix(id),
+      name: ouLevels.find(level => level.id === id).displayName
+    }));
+    onSelect({
+      dimensionId: DIMENSION_ID_ORGUNIT,
+      items: [...selected.filter(ou => !ouIdHelper.hasLevelPrefix(ou.id)), ...items]
     });
+  };
 
-    _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.hasLevelPrefix(ou.id) && !ouIdHelper.hasGroupPrefix(ou.id));
-      const userOrgUnits = this.getUserOrgUnitsFromIds(ids);
-      const level = ids.filter(ouIdHelper.hasLevelPrefix).map(ouIdHelper.removePrefix);
-      const group = ids.filter(ouIdHelper.hasGroupPrefix).map(ouIdHelper.removePrefix);
-      return /*#__PURE__*/React.createElement(Fragment, null, this.state.root && this.state.showOrgUnitsTree && /*#__PURE__*/React.createElement(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: colors.grey900,
-        deselectAllTooltipBackgroundColor: colors.grey300,
-        displayNameProperty: this.props.displayNameProperty,
-        isUserDataViewFallback: true
-      }), !this.state.root && /*#__PURE__*/React.createElement("div", {
-        className: "jsx-".concat(styles.__hash) + " " + "loader"
-      }, /*#__PURE__*/React.createElement(CircularLoader, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
-        id: styles.__hash
-      }, styles));
+  const onGroupChange = ids => {
+    const items = ids.map(id => ({
+      id: ouIdHelper.addGroupPrefix(id),
+      name: ouGroups.find(group => group.id === id).displayName
+    }));
+    onSelect({
+      dimensionId: DIMENSION_ID_ORGUNIT,
+      items: [...selected.filter(ou => !ouIdHelper.hasGroupPrefix(ou.id)), ...items]
     });
-
-    this.state = defaultState;
-    this.userOrgUnitIds = 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);
-    }
-  }
-
-}
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: `jsx-${styles.__hash}` + " " + "container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `jsx-${styles.__hash}` + " " + "userOrgUnitsWrapper"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    label: i18n.t('User organisation unit'),
+    checked: selected.some(item => item.id === USER_ORG_UNIT),
+    onChange: ({
+      checked
+    }) => onSelectItems({
+      id: USER_ORG_UNIT,
+      checked,
+      displayName: i18n.t('User organisation unit')
+    }),
+    dense: true
+  }), /*#__PURE__*/React.createElement(Checkbox, {
+    label: i18n.t('User sub-units'),
+    checked: selected.some(item => item.id === USER_ORG_UNIT_CHILDREN),
+    onChange: ({
+      checked
+    }) => onSelectItems({
+      id: USER_ORG_UNIT_CHILDREN,
+      checked,
+      displayName: i18n.t('User sub-units')
+    }),
+    dense: true
+  }), /*#__PURE__*/React.createElement(Checkbox, {
+    label: i18n.t('User sub-x2-units'),
+    checked: selected.some(item => item.id === USER_ORG_UNIT_GRANDCHILDREN),
+    onChange: ({
+      checked
+    }) => onSelectItems({
+      id: USER_ORG_UNIT_GRANDCHILDREN,
+      checked,
+      displayName: i18n.t('User sub-x2-units')
+    }),
+    dense: true
+  })), /*#__PURE__*/React.createElement("div", {
+    className: `jsx-${styles.__hash}` + " " + (cx('orgUnitTreeWrapper', {
+      disabled: selected.some(item => DYNAMIC_ORG_UNITS.includes(item.id))
+    }) || "")
+  }, /*#__PURE__*/React.createElement(OrganisationUnitTree, {
+    roots: root,
+    initiallyExpanded: [root, ...selected.filter(item => !DYNAMIC_ORG_UNITS.includes(item.id) && !ouIdHelper.hasLevelPrefix(item.id) && !ouIdHelper.hasGroupPrefix(item.id)).map(item => item.path)],
+    selected: selected.filter(item => !DYNAMIC_ORG_UNITS.includes(item.id) && !ouIdHelper.hasLevelPrefix(item.id) && !ouIdHelper.hasGroupPrefix(item.id)).map(item => item.path),
+    onChange: onSelectItems
+  })), /*#__PURE__*/React.createElement("div", {
+    className: `jsx-${styles.__hash}` + " " + (cx('selectsWrapper', {
+      disabled: selected.some(item => DYNAMIC_ORG_UNITS.includes(item.id))
+    }) || "")
+  }, /*#__PURE__*/React.createElement(MultiSelect, {
+    selected: ouLevels.length ? selected.filter(item => ouIdHelper.hasLevelPrefix(item.id)).map(item => ouIdHelper.removePrefix(item.id)) : [],
+    onChange: ({
+      selected
+    }) => onLevelChange(selected),
+    placeholder: i18n.t('Select a level'),
+    loading: !ouLevels.length,
+    dense: true
+  }, ouLevels.map(level => /*#__PURE__*/React.createElement(MultiSelectOption, {
+    key: level.id,
+    value: level.id,
+    label: level.displayName
+  }))), /*#__PURE__*/React.createElement(MultiSelect, {
+    selected: ouGroups.length ? selected.filter(item => ouIdHelper.hasGroupPrefix(item.id)).map(item => ouIdHelper.removePrefix(item.id)) : [],
+    onChange: ({
+      selected
+    }) => onGroupChange(selected),
+    placeholder: i18n.t('Select a group'),
+    loading: !ouGroups.length,
+    dense: true
+  }, ouGroups.map(group => /*#__PURE__*/React.createElement(MultiSelectOption, {
+    key: group.id,
+    value: group.id,
+    label: group.displayName
+  })))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: styles.__hash
+  }, styles));
+};
 
 OrgUnitDimension.propTypes = {
-  current: PropTypes.object,
-  d2: PropTypes.object,
-  displayNameProperty: PropTypes.string,
-  ouItems: PropTypes.array,
-  onDeselect: PropTypes.func,
+  root: PropTypes.string,
+  selected: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    path: PropTypes.string
+  })),
   onSelect: PropTypes.func
 };
 export default OrgUnitDimension;