@dhis2-ui/organisation-unit-tree 7.7.2 → 7.7.6

package/build/cjs/__e2e__/common.js

@@ -167,20 +167,26 @@ StatefulMultiSelectionWrapper.propTypes = {
 };
 
 const createDecoratorStatefulMultiSelection = args => {
-  return fn => /*#__PURE__*/_react.default.createElement(StatefulMultiSelectionWrapper, {
+  return Story => /*#__PURE__*/_react.default.createElement(StatefulMultiSelectionWrapper, {
     onSelectionChange: args === null || args === void 0 ? void 0 : args.onSelectionChange
-  }, fn);
+  }, ({
+    selected,
+    onChange
+  }) => /*#__PURE__*/_react.default.createElement(Story, {
+    selected: selected,
+    onChange: onChange
+  }));
 };
 
 exports.createDecoratorStatefulMultiSelection = createDecoratorStatefulMultiSelection;
 
 const createDecoratorCustomDataProvider = args => {
   const data = (args === null || args === void 0 ? void 0 : args.data) || dataProviderData;
-  return fn => {
+  return Story => {
     window.dataProviderData = data;
     return /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
       data: data
-    }, fn());
+    }, /*#__PURE__*/_react.default.createElement(Story, null));
   };
 };
 

package/build/cjs/__e2e__/expanded.stories.e2e.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithRootMainAndRootSubOrgUnit = exports.InitiallyExpandedPaths = exports.NoInitiallyExpandedPaths = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = require("../index.js");
+
+var _common = require("./common.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'OrganisationUnitTree/expanded',
+  decorators: [(0, _common.createDecoratorStatefulMultiSelection)(), (0, _common.createDecoratorCustomDataProvider)()]
+};
+exports.default = _default;
+
+const NoInitiallyExpandedPaths = (_, {
+  onChange,
+  selected
+}) => /*#__PURE__*/_react.default.createElement(_index.OrganisationUnitTree, {
+  roots: "A0000000000",
+  selected: selected,
+  onChange: onChange
+});
+
+exports.NoInitiallyExpandedPaths = NoInitiallyExpandedPaths;
+
+const InitiallyExpandedPaths = (_, {
+  onChange,
+  selected
+}) => /*#__PURE__*/_react.default.createElement(_index.OrganisationUnitTree, {
+  roots: "A0000000000",
+  selected: selected,
+  onChange: onChange,
+  initiallyExpanded: ['/A0000000000']
+});
+
+exports.InitiallyExpandedPaths = InitiallyExpandedPaths;
+
+const WithRootMainAndRootSubOrgUnit = (_, {
+  onChange,
+  selected
+}) => /*#__PURE__*/_react.default.createElement(_index.OrganisationUnitTree, {
+  roots: ['A0000000000', 'A0000000001'],
+  selected: selected,
+  onChange: onChange
+});
+
+exports.WithRootMainAndRootSubOrgUnit = WithRootMainAndRootSubOrgUnit;

package/build/cjs/__e2e__/sub_unit_as_root.stories.e2e.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MultipleRootSubAndOneMainOrgUnit = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _index = require("../index.js");
+
+var _common = require("./common.js");
+
+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; }
+
+var _default = {
+  title: 'OrganisationUnitTree',
+  decorators: [(0, _common.createDecoratorStatefulMultiSelection)(), (0, _common.createDecoratorCustomDataProvider)()]
+};
+exports.default = _default;
+
+const MultipleRootSubAndOneMainOrgUnit = (_, {
+  selected,
+  onChange
+}) => {
+  const [filter, setFilter] = (0, _react.useState)('');
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", {
+    type: "input",
+    onChange: e => setFilter(e.target.value)
+  }), /*#__PURE__*/_react.default.createElement(_index.OrganisationUnitTree, {
+    filter: filter ? filter.split(',') : [],
+    onChange: onChange,
+    selected: selected,
+    roots: ['A0000000000', 'A0000000001', 'A0000000002']
+  }));
+};
+
+exports.MultipleRootSubAndOneMainOrgUnit = MultipleRootSubAndOneMainOrgUnit;

package/build/cjs/__stories__/development-stories.js

@@ -28,12 +28,16 @@ const DX_onChange = (selected, setSelected, singleSelection) => ({
     checked
   });
   const pathIndex = selected.indexOf(path);
+  let nextSelected;
 
   if (checked) {
-    setSelected(singleSelection ? [path] : [...selected, path]);
+    nextSelected = singleSelection ? [path] : [...selected, path];
   } else {
-    setSelected(singleSelection ? [] : [...selected.slice(0, pathIndex), ...selected.slice(pathIndex + 1)]);
+    nextSelected = singleSelection ? [] : [...selected.slice(0, pathIndex), ...selected.slice(pathIndex + 1)];
   }
+
+  console.log('> nextSelected', nextSelected);
+  setSelected(nextSelected);
 };
 
 const Wrapper = props => {
@@ -89,7 +93,7 @@ const DxWithRealBackend = () => /*#__PURE__*/_react.default.createElement("div",
 }, /*#__PURE__*/_react.default.createElement(Wrapper //initiallyExpanded={['/ImspTQPwCqd/eIQbndfxQMb']}
 , {
   suppressAlphabeticalSorting: true,
-  roots: "ImspTQPwCqd"
+  roots: ['ImspTQPwCqd', 'O6uvpzGd5pu', 'fdc6uOvgoji']
 })));
 
 exports.DxWithRealBackend = DxWithRealBackend;

package/build/cjs/__stories__/multiple-roots.js

@@ -13,12 +13,15 @@ var _shared = require("./shared.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const MultipleRoots = () => /*#__PURE__*/_react.default.createElement(_index.OrganisationUnitTree, {
-  onChange: _shared.onChange,
-  name: "Root org unit",
+const MultipleRoots = (_, {
+  onChange,
+  selected
+}) => /*#__PURE__*/_react.default.createElement(_index.OrganisationUnitTree, {
+  selected: selected,
+  onChange: onChange,
   roots: ['A0000000000', 'A0000000001'],
   initiallyExpanded: ['/A0000000000/A0000000001']
 });
 
 exports.MultipleRoots = MultipleRoots;
-MultipleRoots.storyName = 'Multiple roots';
+MultipleRoots.decorators = [(0, _shared.createDecoratorStatefulMultiSelection)(), (0, _shared.createDecoratorCustomDataProvider)()];

package/build/cjs/__stories__/shared.js

@@ -3,7 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.customData = exports.onChildrenLoaded = exports.onCollapse = exports.onExpand = exports.onChange = exports.log = void 0;
+exports.createDecoratorCustomDataProvider = exports.createDecoratorStatefulMultiSelection = exports.StatefulMultiSelectionWrapper = exports.customData = exports.getOrganisationUnitData = exports.onChildrenLoaded = exports.onCollapse = exports.onExpand = exports.onChange = exports.log = void 0;
+
+var _appRuntime = require("@dhis2/app-runtime");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+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 }; }
+
+/* eslint-disable react/display-name */
 const log = true;
 exports.log = log;
 
@@ -22,119 +36,171 @@ exports.onCollapse = onCollapse;
 const onChildrenLoaded = (...args) => log && console.log('onChildrenLoaded', ...args);
 
 exports.onChildrenLoaded = onChildrenLoaded;
-const customData = {
-  organisationUnits: (type, {
-    id
-  }) => {
-    let data;
-    let delay = 0;
-
-    if (id === 'A0000000000') {
-      delay = 1000;
-      data = {
-        id: 'A0000000000',
-        path: '/A0000000000',
-        displayName: 'Org Unit 1',
-        children: [{
-          id: 'A0000000001',
-          path: '/A0000000000/A0000000001',
-          children: [{
-            id: 'A0000000003'
-          }, {
-            id: 'A0000000004'
-          }],
-          displayName: 'Org Unit 2'
-        }, {
-          id: 'A0000000002',
-          path: '/A0000000000/A0000000002',
-          children: [],
-          displayName: 'Org Unit 3'
-        }, {
-          id: 'A0000000006',
-          path: '/A0000000000/A0000000006',
-          children: [],
-          displayName: 'Org Unit 7'
-        }]
-      };
-    }
 
-    if (id === 'A0000000001') {
-      data = {
+const getOrganisationUnitData = id => {
+  let data;
+
+  if (id === 'A0000000000') {
+    data = {
+      id: 'A0000000000',
+      path: '/A0000000000',
+      displayName: 'Org Unit 1',
+      children: [{
         id: 'A0000000001',
         path: '/A0000000000/A0000000001',
-        displayName: 'Org Unit 2',
         children: [{
-          id: 'A0000000003',
-          path: '/A0000000000/A0000000001/A0000000003',
-          children: [],
-          displayName: 'Org Unit 4'
+          id: 'A0000000003'
         }, {
-          id: 'A0000000004',
-          path: '/A0000000000/A0000000001/A0000000004',
-          children: [],
-          displayName: 'Org Unit 5'
-        }]
-      };
-    }
-
-    if (id === 'A0000000002') {
-      delay = 1000;
-      data = {
-        displayName: 'Org Unit 3',
+          id: 'A0000000004'
+        }],
+        displayName: 'Org Unit 2'
+      }, {
         id: 'A0000000002',
         path: '/A0000000000/A0000000002',
-        children: []
-      };
-    }
+        children: [],
+        displayName: 'Org Unit 3'
+      }, {
+        id: 'A0000000006',
+        path: '/A0000000000/A0000000006',
+        children: [],
+        displayName: 'Org Unit 7'
+      }]
+    };
+  }
 
-    if (id === 'A0000000003') {
-      data = {
-        displayName: 'Org Unit 4',
+  if (id === 'A0000000001') {
+    data = {
+      id: 'A0000000001',
+      path: '/A0000000000/A0000000001',
+      displayName: 'Org Unit 2',
+      children: [{
         id: 'A0000000003',
         path: '/A0000000000/A0000000001/A0000000003',
-        children: [{
-          id: 'A0000000007',
-          path: '/A0000000000/A0000000001/A0000000003/A0000000007',
-          children: [],
-          displayName: 'Org Unit 8'
-        }]
-      };
-    }
-
-    if (id === 'A0000000004') {
-      data = {
-        displayName: 'Org Unit 5',
+        children: [],
+        displayName: 'Org Unit 4'
+      }, {
         id: 'A0000000004',
         path: '/A0000000000/A0000000001/A0000000004',
-        children: []
-      };
-    }
+        children: [],
+        displayName: 'Org Unit 5'
+      }]
+    };
+  }
 
-    if (id === 'A0000000006') {
-      data = {
-        displayName: 'Org Unit 7',
-        id: 'A0000000006',
-        path: '/A0000000000/A0000000006',
-        children: []
-      };
-    }
+  if (id === 'A0000000002') {
+    data = {
+      displayName: 'Org Unit 3',
+      id: 'A0000000002',
+      path: '/A0000000000/A0000000002',
+      children: []
+    };
+  }
 
-    if (id === 'A0000000007') {
-      data = {
-        displayName: 'Org Unit 8',
+  if (id === 'A0000000003') {
+    data = {
+      displayName: 'Org Unit 4',
+      id: 'A0000000003',
+      path: '/A0000000000/A0000000001/A0000000003',
+      children: [{
         id: 'A0000000007',
         path: '/A0000000000/A0000000001/A0000000003/A0000000007',
-        children: []
-      };
-    }
+        children: [],
+        displayName: 'Org Unit 8'
+      }]
+    };
+  }
+
+  if (id === 'A0000000004') {
+    data = {
+      displayName: 'Org Unit 5',
+      id: 'A0000000004',
+      path: '/A0000000000/A0000000001/A0000000004',
+      children: []
+    };
+  }
+
+  if (id === 'A0000000006') {
+    data = {
+      displayName: 'Org Unit 7',
+      id: 'A0000000006',
+      path: '/A0000000000/A0000000006',
+      children: []
+    };
+  }
+
+  if (id === 'A0000000007') {
+    data = {
+      displayName: 'Org Unit 8',
+      id: 'A0000000007',
+      path: '/A0000000000/A0000000001/A0000000003/A0000000007',
+      children: []
+    };
+  }
+
+  return data;
+};
+
+exports.getOrganisationUnitData = getOrganisationUnitData;
+const customData = {
+  organisationUnits: (_, {
+    id
+  }) => {
+    const data = getOrganisationUnitData(id);
 
     if (!data) {
       return Promise.reject(new Error('404 - Org unit not found'));
     }
 
-    return new Promise(resolve => {
-      setTimeout(() => resolve(data), delay);
-    });
+    return Promise.resolve(data);
   }
 };
-exports.customData = customData;
+exports.customData = customData;
+
+const StatefulMultiSelectionWrapper = ({
+  children,
+  onSelectionChange = () => null
+}) => {
+  const [selected, setSelected] = (0, _react.useState)([]);
+  return children({
+    selected,
+    onChange: (...args) => {
+      onChange(...args);
+      const [{
+        selected: newSelected
+      }] = args;
+      setSelected(newSelected);
+      onSelectionChange(newSelected);
+    }
+  });
+};
+
+exports.StatefulMultiSelectionWrapper = StatefulMultiSelectionWrapper;
+StatefulMultiSelectionWrapper.propTypes = {
+  children: _propTypes.default.func.isRequired,
+  onSelectionChange: _propTypes.default.func
+};
+
+const createDecoratorStatefulMultiSelection = args => {
+  return Story => /*#__PURE__*/_react.default.createElement(StatefulMultiSelectionWrapper, {
+    onSelectionChange: args === null || args === void 0 ? void 0 : args.onSelectionChange
+  }, ({
+    selected,
+    onChange
+  }) => /*#__PURE__*/_react.default.createElement(Story, {
+    selected: selected,
+    onChange: onChange
+  }));
+};
+
+exports.createDecoratorStatefulMultiSelection = createDecoratorStatefulMultiSelection;
+
+const createDecoratorCustomDataProvider = args => {
+  const data = (args === null || args === void 0 ? void 0 : args.data) || customData;
+  return Story => {
+    return /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
+      data: data
+    }, /*#__PURE__*/_react.default.createElement(Story, null));
+  };
+};
+
+exports.createDecoratorCustomDataProvider = createDecoratorCustomDataProvider;

package/build/cjs/features/expanded/index.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _steps = require("cypress-cucumber-preprocessor/steps");
+
+const getRootOrgUnitByLabel = label => {
+  const rootOrgUnitLabelSelector = `
+        [data-test="dhis2-uiwidgets-orgunittree"]
+        > [data-test="dhis2-uiwidgets-orgunittree-node"]
+        > [data-test="dhis2-uiwidgets-orgunittree-node-content"]
+        > [data-test="dhis2-uiwidgets-orgunittree-node-label"]
+        label
+    `;
+  return cy.contains(rootOrgUnitLabelSelector, label).parents('[data-test="dhis2-uiwidgets-orgunittree-node"]');
+};
+
+(0, _steps.Given)('a OrganisationUnitTree with children and no paths in the initiallyExpanded prop is rendered', () => {
+  cy.visitStory('OrganisationUnitTree/expanded', 'No initially expanded paths');
+});
+(0, _steps.Given)('a OrganisationUnitTree with children and the path of the first unit on the second level in the initiallyExpanded prop is rendered', () => {
+  cy.visitStory('OrganisationUnitTree/expanded', 'Initially expanded paths');
+});
+(0, _steps.Given)('both a sub org unit with children and a main org unit are root org units', () => {
+  cy.visitStory('OrganisationUnitTree/expanded', 'with root main and root sub org unit');
+});
+(0, _steps.Given)('the root main org unit is expanded', () => {
+  getRootOrgUnitByLabel('Org Unit 1').find('> [data-test="dhis2-uiwidgets-orgunittree-node-toggle"]').click();
+});
+(0, _steps.When)('the user expands the sub org unit within the main org unit tree', () => {
+  getRootOrgUnitByLabel('Org Unit 1').contains('[data-test="dhis2-uiwidgets-orgunittree-node"]', 'Org Unit 2').find('> [data-test="dhis2-uiwidgets-orgunittree-node-toggle"]').click().should('have.class', 'open');
+});
+(0, _steps.When)('the user expands the root sub org unit', () => {
+  getRootOrgUnitByLabel('Org Unit 2').find('> [data-test="dhis2-uiwidgets-orgunittree-node-toggle"]').click().should('have.class', 'open');
+});
+(0, _steps.Then)('the root unit is closed', () => {
+  cy.getOrgUnitByLabel('Org Unit 1').shouldBeAClosedNode();
+});
+(0, _steps.Then)('the root unit is opened', () => {
+  cy.getOrgUnitByLabel('Org Unit 1').shouldBeAnOrgUnitNode();
+});
+(0, _steps.Then)('the root sub org unit should not expand', () => {
+  getRootOrgUnitByLabel('Org Unit 2').find('> [data-test="dhis2-uiwidgets-orgunittree-node-toggle"]').should('not.have.class', 'open');
+});
+(0, _steps.Then)('the sub org unit within the main org unit tree should not expand', () => {
+  getRootOrgUnitByLabel('Org Unit 1').contains('[data-test="dhis2-uiwidgets-orgunittree-node"]', 'Org Unit 2').find('> [data-test="dhis2-uiwidgets-orgunittree-node-toggle"]').should('not.have.class', 'open');
+});

package/build/cjs/features/expanded.feature

@@ -0,0 +1,27 @@
+Feature: Nodes can be expanded
+
+    Scenario: No initially expanded paths are provided
+        Given a OrganisationUnitTree with children and no paths in the initiallyExpanded prop is rendered
+        Then the root unit is closed
+
+    # The given step is really long.. but I don't know how to split it while
+    # being able to test/prepare that with cypress
+    Scenario: The first unit on the second level is provided as initially expanded path
+        Given a OrganisationUnitTree with children and the path of the first unit on the second level in the initiallyExpanded prop is rendered
+        Then the root unit is opened
+
+    # For info what a "sub", "main" and "root" unit is, see
+    # "sub_unit_as_root.feature"
+    Scenario: A sub org unit gets expanded within the main org unit tree
+        Given both a sub org unit with children and a main org unit are root org units
+        And the root main org unit is expanded
+        When the user expands the sub org unit within the main org unit tree
+        Then the root sub org unit should not expand
+
+    # For info what a "sub", "main" and "root" unit is, see
+    # "sub_unit_as_root.feature"
+    Scenario: A root sub org unit gets expanded which is also in the main org unit tree
+        Given both a sub org unit with children and a main org unit are root org units
+        And the root main org unit is expanded
+        When the user expands the root sub org unit
+        Then the sub org unit within the main org unit tree should not expand

package/build/cjs/features/sub_unit_as_root/index.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _steps = require("cypress-cucumber-preprocessor/steps");
+
+const rootOrgUnitLabelSelector = `
+    [data-test="dhis2-uiwidgets-orgunittree"]
+    > [data-test="dhis2-uiwidgets-orgunittree-node"]
+    > [data-test="dhis2-uiwidgets-orgunittree-node-content"]
+    > [data-test="dhis2-uiwidgets-orgunittree-node-label"]
+    label
+`;
+(0, _steps.Given)('a sub org unit is a root org unit', () => {
+  cy.visitStory('OrganisationUnitTree', 'multiple root sub and one main org unit');
+});
+(0, _steps.Given)('both a sub org unit and a main org unit are root org units', () => {
+  cy.visitStory('OrganisationUnitTree', 'multiple root sub and one main org unit');
+});
+(0, _steps.Given)('both a sub org unit and a main org unit are root org units', () => {
+  cy.visitStory('OrganisationUnitTree', 'multiple root sub and one main org unit');
+});
+(0, _steps.Given)('multiple sub org units is a root org unit', () => {
+  cy.visitStory('OrganisationUnitTree', 'multiple root sub and one main org unit');
+});
+(0, _steps.Given)('the root sub org unit is a child of the root main org unit', () => {
+  cy.visitStory('OrganisationUnitTree', 'multiple root sub and one main org unit');
+});
+(0, _steps.Given)('the root sub org unit is a child of the root main org unit', () => {
+  cy.visitStory('OrganisationUnitTree', 'multiple root sub and one main org unit');
+});
+(0, _steps.Given)('the user provided one root sub org unit to the filter', () => {
+  cy.get('input[type="input"]').clear().type('/A0000000001');
+});
+(0, _steps.Given)('the user provided one non-root sub org unit to the filter', () => {
+  cy.get('input[type="input"]').clear().type('/A0000000000/A0000000006');
+});
+(0, _steps.When)('the user selects sub org unit in the main org unit tree', () => {
+  cy.contains('label', 'Org Unit 1').click();
+  cy.get('[data-test="dhis2-uiwidgets-orgunittree-node-content"]').contains('label', 'Org Unit 2').click();
+});
+(0, _steps.When)('the user selects the root sub org unit', () => {
+  cy.contains(rootOrgUnitLabelSelector, 'Org Unit 2').click();
+});
+(0, _steps.Then)('all root sub org units but the filtered sub org unit should be hidden', () => {
+  cy.contains(rootOrgUnitLabelSelector, 'Org Unit 2').should('exist');
+  cy.contains(rootOrgUnitLabelSelector, 'Org Unit 1').should('not.exist');
+  cy.contains(rootOrgUnitLabelSelector, 'Org Unit 3').should('not.exist');
+});
+(0, _steps.Then)('the root main org unit should be marked as indeterminate', () => {
+  cy.contains(rootOrgUnitLabelSelector, 'Org Unit 1').find('> .icon svg').should('have.class', 'indeterminate');
+});
+(0, _steps.Then)('the root sub org unit should be selected', () => {
+  cy.contains(rootOrgUnitLabelSelector, 'Org Unit 2').find('> .icon svg').should('have.class', 'checked');
+});
+(0, _steps.Then)('only the root main org units should be visible', () => {
+  cy.contains(rootOrgUnitLabelSelector, 'Org Unit 1').should('exist');
+  cy.contains(rootOrgUnitLabelSelector, 'Org Unit 2').should('not.exist');
+  cy.contains(rootOrgUnitLabelSelector, 'Org Unit 3').should('not.exist');
+});

package/build/cjs/features/sub_unit_as_root.feature

@@ -0,0 +1,34 @@
+Feature: Sub-org units can be a root org unit
+
+    Main org unit : is an actual root org unit in the configured hierarchy
+    Sub org unit  : is an org unit which is inside the tree of a "main org unit"
+    Root org unit : refers to an org unit which is a root node in the component
+    ---
+    Org unit components can have multiple selections in all of the scenarios
+
+    Scenario: The user selects the root sub org unit
+        Given a sub org unit is a root org unit
+        When the user selects the root sub org unit
+        Then the root sub org unit should be selected
+
+    Scenario: The user selects the root sub org unit which is included in the tree of a root main org unit
+        Given both a sub org unit and a main org unit are root org units
+        And the root sub org unit is a child of the root main org unit
+        When the user selects the root sub org unit
+        Then the root main org unit should be marked as indeterminate
+
+    Scenario: The user selects the a child in the root main org unit which is also a root sub org unit
+        Given both a sub org unit and a main org unit are root org units
+        And the root sub org unit is a child of the root main org unit
+        When the user selects sub org unit in the main org unit tree
+        Then the root sub org unit should be selected
+
+    Scenario: The user filtered the tree by a root sub unit path
+        Given multiple sub org units is a root org unit
+        And the user provided one root sub org unit to the filter
+        Then all root sub org units but the filtered sub org unit should be hidden
+
+    Scenario: The user filtered the tree by a non-root sub unit path in the root main org unit
+        Given multiple sub org units is a root org unit
+        And the user provided one non-root sub org unit to the filter
+        Then only the root main org units should be visible

package/build/cjs/helpers/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "isPathIncluded", {
     return _isPathIncluded.isPathIncluded;
   }
 });
+Object.defineProperty(exports, "leftTrimToRootId", {
+  enumerable: true,
+  get: function () {
+    return _leftTrimToRootId.leftTrimToRootId;
+  }
+});
 Object.defineProperty(exports, "sortNodeChildrenAlphabetically", {
   enumerable: true,
   get: function () {
@@ -18,4 +24,6 @@ Object.defineProperty(exports, "sortNodeChildrenAlphabetically", {
 
 var _isPathIncluded = require("./is-path-included.js");
 
+var _leftTrimToRootId = require("./left-trim-to-root-id.js");
+
 var _sortNodeChildrenAlphabetically = require("./sort-node-children-alphabetically.js");

package/build/cjs/helpers/left-trim-to-root-id.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.leftTrimToRootId = void 0;
+
+const leftTrimToRootId = (path, rootId) => {
+  return path.replace(new RegExp(`^.*(/${rootId})`), '$1');
+};
+
+exports.leftTrimToRootId = leftTrimToRootId;