@dhis2/analytics 20.6.4 → 21.0.0-alpha.3

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

@@ -1,220 +1,248 @@
 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, Button } 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)
-          };
-        })]
+const DYNAMIC_ORG_UNITS = [USER_ORG_UNIT, USER_ORG_UNIT_CHILDREN, USER_ORG_UNIT_GRANDCHILDREN];
+
+const OrgUnitDimension = ({
+  roots,
+  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) || ouIdHelper.hasLevelPrefix(item.id) || ouIdHelper.hasGroupPrefix(item.id)), {
+        id,
+        displayName
+      }];
+    } else if (checked) {
+      result.push({
+        id,
+        path,
+        name: displayName
       });
-    });
-
-    _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)
-          };
-        })]
-      });
-    });
+    } else {
+      result = [...result.filter(item => item.id !== id)];
+    }
 
-    _defineProperty(this, "onDeselectAllClick", () => this.props.onDeselect({
+    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]
-        });
-      });
+      items: result
     });
-
-    _defineProperty(this, "loadOrgUnitGroups", (d2, displayNameProperty) => {
-      apiFetchOrganisationUnitGroups(d2, displayNameProperty).then(organisationUnitGroups => this.setState({
-        ouGroups: organisationUnitGroups
-      }));
+  };
+
+  const clearSelection = () => onSelect({
+    dimensionId: DIMENSION_ID_ORGUNIT,
+    items: []
+  });
+
+  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, "loadOrgUnitLevels", d2 => {
-      apiFetchOrganisationUnitLevels(d2).then(organisationUnitLevels => this.setState({
-        ouLevels: sortBy(organisationUnitLevels, ['level'])
-      }));
+  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]
     });
-
-    _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
-          }]
-        });
+  };
+
+  const getSummary = () => {
+    let summary;
+
+    if (selected.length) {
+      const numberOfOrgUnits = selected.filter(item => !DYNAMIC_ORG_UNITS.includes(item.id) && !ouIdHelper.hasLevelPrefix(item.id) && !ouIdHelper.hasGroupPrefix(item.id)).length;
+      const numberOfLevels = selected.filter(item => ouIdHelper.hasLevelPrefix(item.id)).length;
+      const numberOfGroups = selected.filter(item => ouIdHelper.hasGroupPrefix(item.id)).length;
+      const numberOfUserOrgUnits = selected.filter(item => DYNAMIC_ORG_UNITS.includes(item.id)).length;
+      const parts = [];
+
+      if (numberOfOrgUnits) {
+        parts.push(i18n.t('{{count}} org units', {
+          count: numberOfOrgUnits,
+          defaultValue: '{{count}} org unit',
+          defaultValue_plural: '{{count}} org units'
+        }));
       }
-    });
 
-    _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]
-          });
-        }
+      if (numberOfLevels) {
+        parts.push(i18n.t('{{count}} levels', {
+          count: numberOfLevels,
+          defaultValue: '{{count}} level',
+          defaultValue_plural: '{{count}} levels'
+        }));
       }
-    });
 
-    _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;
-        }, [])]
-      });
-    });
+      if (numberOfGroups) {
+        parts.push(i18n.t('{{count}} groups', {
+          count: numberOfGroups,
+          defaultValue: '{{count}} group',
+          defaultValue_plural: '{{count}} groups'
+        }));
+      }
 
-    _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));
-    });
+      if (numberOfUserOrgUnits) {
+        parts.push(i18n.t('{{count}} user org units', {
+          count: numberOfUserOrgUnits,
+          defaultValue: '{{count}} user org unit',
+          defaultValue_plural: '{{count}} user org units'
+        }));
+      }
 
-    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);
+      summary = i18n.t('Selected: ') + parts.join(', ');
+    } else {
+      summary = i18n.t('Nothing selected');
     }
-  }
 
-}
+    return summary;
+  };
+
+  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: roots,
+    initiallyExpanded: [...(roots.length === 1 ? [`/${roots[0]}`] : []), ...selected.filter(item => !DYNAMIC_ORG_UNITS.includes(item.id) && !ouIdHelper.hasLevelPrefix(item.id) && !ouIdHelper.hasGroupPrefix(item.id)).map(item => item.path.substring(0, item.path.lastIndexOf('/'))).filter(path => 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,
+    dataTest: 'org-unit-tree'
+  })), /*#__PURE__*/React.createElement("div", {
+    className: `jsx-${styles.__hash}` + " " + "selectsWrapper"
+  }, /*#__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,
+    dataTest: 'org-unit-level-select'
+  }, ouLevels.map(level => /*#__PURE__*/React.createElement(MultiSelectOption, {
+    key: level.id,
+    value: level.id,
+    label: level.displayName,
+    dataTest: `org-unit-level-select-option-${level.id}`
+  }))), /*#__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,
+    dataTest: 'org-unit-group-select'
+  }, ouGroups.map(group => /*#__PURE__*/React.createElement(MultiSelectOption, {
+    key: group.id,
+    value: group.id,
+    label: group.displayName,
+    dataTest: `org-unit-group-select-option-${group.id}`
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: `jsx-${styles.__hash}` + " " + "summaryWrapper"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: `jsx-${styles.__hash}` + " " + "summaryText"
+  }, getSummary()), /*#__PURE__*/React.createElement("div", {
+    className: `jsx-${styles.__hash}` + " " + "deselectButton"
+  }, /*#__PURE__*/React.createElement(Button, {
+    secondary: true,
+    small: true,
+    onClick: clearSelection,
+    disabled: !selected.length
+  }, i18n.t('Deselect all')))), /*#__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,
+  roots: PropTypes.arrayOf(PropTypes.string),
+  selected: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    path: PropTypes.string
+  })),
   onSelect: PropTypes.func
 };
 export default OrgUnitDimension;

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

@@ -0,0 +1,220 @@
+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 PropTypes from 'prop-types';
+import React, { Component, Fragment } from 'react';
+import { apiFetchOrganisationUnitGroups, apiFetchOrganisationUnitLevels, apiFetchOrganisationUnits } from '../../api/organisationUnits';
+import { ouIdHelper } 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)
+          };
+        })]
+      });
+    });
+
+    _defineProperty(this, "onDeselectAllClick", () => this.props.onDeselect({
+      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
+          }]
+        });
+      }
+    });
+
+    _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;
+        }, [])]
+      });
+    });
+
+    _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-${styles.__hash}` + " " + "loader"
+      }, /*#__PURE__*/React.createElement(CircularLoader, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
+        id: styles.__hash
+      }, styles));
+    });
+
+    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);
+    }
+  }
+
+}
+
+OrgUnitDimension.propTypes = {
+  current: PropTypes.object,
+  d2: PropTypes.object,
+  displayNameProperty: PropTypes.string,
+  ouItems: PropTypes.array,
+  onDeselect: PropTypes.func,
+  onSelect: PropTypes.func
+};
+export default OrgUnitDimension;

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

@@ -1,3 +1,4 @@
-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";
+import { colors, spacers } from '@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:${colors.grey200};padding:${spacers.dp8} ${spacers.dp8} ${spacers.dp8} ${spacers.dp24};margin-bottom:${spacers.dp12};}`, `.userOrgUnitsWrapper.jsx-2759088229>*{margin-right:${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:${spacers.dp8};margin-top:${spacers.dp12};}`, ".selectsWrapper.jsx-2759088229>*{width:50%;}", `.summaryWrapper.jsx-2759088229{margin-top:${spacers.dp8};}`, `.summaryText.jsx-2759088229{font-size:14px;line-height:18px;color:${colors.grey700};}`, `.deselectButton.jsx-2759088229{display:inline-block;margin-left:${spacers.dp8};}`];
+_defaultExport.__hash = "2759088229";
 export default _defaultExport;