@dhis2-ui/organisation-unit-tree 10.16.3 → 10.16.5

package/build/cjs/organisation-unit-node/use-org-children.test.js

@@ -7,10 +7,9 @@ var _useOrgChildren = require("./use-org-children.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 describe('OrganisationUnitTree - useOrgChildren', () => {
   const dataProviderData = {
-    organisationUnits: jest.fn((type, _ref) => {
-      let {
-        id
-      } = _ref;
+    organisationUnits: jest.fn((type, {
+      id
+    }) => {
       if (id === 'A0000000000') {
         return {
           children: [{
@@ -24,14 +23,11 @@ describe('OrganisationUnitTree - useOrgChildren', () => {
       return Promise.reject(`No org unit with id "${id}"`);
     })
   };
-  const wrapper = _ref2 => {
-    let {
-      children
-    } = _ref2;
-    return /*#__PURE__*/_react2.default.createElement(_appRuntime.CustomDataProvider, {
-      data: dataProviderData
-    }, children);
-  };
+  const wrapper = ({
+    children
+  }) => /*#__PURE__*/_react2.default.createElement(_appRuntime.CustomDataProvider, {
+    data: dataProviderData
+  }, children);
   const node = {
     id: 'A0000000000',
     path: '/A0000000000',
@@ -81,18 +77,15 @@ describe('OrganisationUnitTree - useOrgChildren', () => {
     });
   });
   it('should provide the error', async () => {
-    const errorWrapper = _ref3 => {
-      let {
-        children
-      } = _ref3;
-      return /*#__PURE__*/_react2.default.createElement(_appRuntime.CustomDataProvider, {
-        data: {
-          organisationUnits: async () => {
-            throw new Error('Error message');
-          }
+    const errorWrapper = ({
+      children
+    }) => /*#__PURE__*/_react2.default.createElement(_appRuntime.CustomDataProvider, {
+      data: {
+        organisationUnits: async () => {
+          throw new Error('Error message');
         }
-      }, children);
-    };
+      }
+    }, children);
     const {
       result
     } = (0, _react.renderHook)(() => (0, _useOrgChildren.useOrgChildren)({
@@ -134,10 +127,9 @@ describe('OrganisationUnitTree - useOrgChildren', () => {
   });
   it("should sort the node's children alphabetically by default", async () => {
     const dataProviderDataWithUnsortedChildren = {
-      organisationUnits: jest.fn((type, _ref4) => {
-        let {
-          id
-        } = _ref4;
+      organisationUnits: jest.fn((type, {
+        id
+      }) => {
         if (id === 'A0000000000') {
           return {
             children: [{
@@ -156,14 +148,11 @@ describe('OrganisationUnitTree - useOrgChildren', () => {
         return Promise.reject(`No org unit with id "${id}"`);
       })
     };
-    const wrapperWithUnsortedChildren = _ref5 => {
-      let {
-        children
-      } = _ref5;
-      return /*#__PURE__*/_react2.default.createElement(_appRuntime.CustomDataProvider, {
-        data: dataProviderDataWithUnsortedChildren
-      }, children);
-    };
+    const wrapperWithUnsortedChildren = ({
+      children
+    }) => /*#__PURE__*/_react2.default.createElement(_appRuntime.CustomDataProvider, {
+      data: dataProviderDataWithUnsortedChildren
+    }, children);
     const {
       result
     } = (0, _react.renderHook)(() => (0, _useOrgChildren.useOrgChildren)({
@@ -195,10 +184,9 @@ describe('OrganisationUnitTree - useOrgChildren', () => {
   });
   it(`should not sort the node's children alphabetically when "suppressAlphabeticalSorting" is true`, async () => {
     const dataProviderDataWithUnsortedChildren = {
-      organisationUnits: jest.fn((type, _ref6) => {
-        let {
-          id
-        } = _ref6;
+      organisationUnits: jest.fn((type, {
+        id
+      }) => {
         if (id === 'A0000000000') {
           return {
             children: [{
@@ -217,14 +205,11 @@ describe('OrganisationUnitTree - useOrgChildren', () => {
         return Promise.reject(`No org unit with id "${id}"`);
       })
     };
-    const wrapperWithUnsortedChildren = _ref7 => {
-      let {
-        children
-      } = _ref7;
-      return /*#__PURE__*/_react2.default.createElement(_appRuntime.CustomDataProvider, {
-        data: dataProviderDataWithUnsortedChildren
-      }, children);
-    };
+    const wrapperWithUnsortedChildren = ({
+      children
+    }) => /*#__PURE__*/_react2.default.createElement(_appRuntime.CustomDataProvider, {
+      data: dataProviderDataWithUnsortedChildren
+    }, children);
     const options = {
       node: {
         ...node,
@@ -258,10 +243,9 @@ describe('OrganisationUnitTree - useOrgChildren', () => {
   });
   it(`should not sort the node's children alphabetically when "suppressAlphabeticalSorting" is true`, async () => {
     const dataProviderDataWithUnsortedChildren = {
-      organisationUnits: jest.fn((type, _ref8) => {
-        let {
-          id
-        } = _ref8;
+      organisationUnits: jest.fn((type, {
+        id
+      }) => {
         if (id === 'A0000000000') {
           return {
             children: [{
@@ -280,14 +264,11 @@ describe('OrganisationUnitTree - useOrgChildren', () => {
         return Promise.reject(`No org unit with id "${id}"`);
       })
     };
-    const wrapperWithUnsortedChildren = _ref9 => {
-      let {
-        children
-      } = _ref9;
-      return /*#__PURE__*/_react2.default.createElement(_appRuntime.CustomDataProvider, {
-        data: dataProviderDataWithUnsortedChildren
-      }, children);
-    };
+    const wrapperWithUnsortedChildren = ({
+      children
+    }) => /*#__PURE__*/_react2.default.createElement(_appRuntime.CustomDataProvider, {
+      data: dataProviderDataWithUnsortedChildren
+    }, children);
     const options = {
       node: {
         ...node,

package/build/cjs/organisation-unit-node/use-org-data/use-org-data.js

@@ -8,21 +8,15 @@ var _appRuntime = require("@dhis2/app-runtime");
 const ORG_DATA_QUERY = {
   orgUnit: {
     resource: `organisationUnits`,
-    id: _ref => {
-      let {
-        id
-      } = _ref;
-      return id;
-    },
-    params: _ref2 => {
-      let {
-        isUserDataViewFallback
-      } = _ref2;
-      return {
-        isUserDataViewFallback,
-        fields: ['path', 'children::size']
-      };
-    }
+    id: ({
+      id
+    }) => id,
+    params: ({
+      isUserDataViewFallback
+    }) => ({
+      isUserDataViewFallback,
+      fields: ['path', 'children::size']
+    })
   }
 };
 
@@ -33,11 +27,10 @@ const ORG_DATA_QUERY = {
  * @param {bool} options.isUserDataViewFallback
  * @returns {Object}
  */
-const useOrgData = (id, _ref3) => {
-  let {
-    displayName,
-    isUserDataViewFallback
-  } = _ref3;
+const useOrgData = (id, {
+  displayName,
+  isUserDataViewFallback
+}) => {
   if (!displayName) {
     throw new Error('"displayName" is required');
   }

package/build/cjs/organisation-unit-node/use-org-data/use-org-data.test.js

@@ -8,10 +8,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 describe('OrganisationUnitTree - useOrgData', () => {
   // @TODO: Figure out why this is necessary at all...
   const origError = console.error;
-  jest.spyOn(console, 'error').mockImplementation(function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  jest.spyOn(console, 'error').mockImplementation((...args) => {
     const [err] = args;
     if (!err.toString().match(/^Warning: An update to/)) {
       origError(...args);
@@ -21,10 +18,9 @@ describe('OrganisationUnitTree - useOrgData', () => {
     console.error.mockRestore();
   });
   const dataProviderData = {
-    organisationUnits: jest.fn((type, _ref) => {
-      let {
-        id
-      } = _ref;
+    organisationUnits: jest.fn((type, {
+      id
+    }) => {
       if (id === 'A0000000000') {
         return {
           id: 'A0000000000',
@@ -35,14 +31,11 @@ describe('OrganisationUnitTree - useOrgData', () => {
       return Promise.reject(`No org unit with id "${id}"`);
     })
   };
-  const wrapper = _ref2 => {
-    let {
-      children
-    } = _ref2;
-    return /*#__PURE__*/_react2.default.createElement(_appRuntime.CustomDataProvider, {
-      data: dataProviderData
-    }, children);
-  };
+  const wrapper = ({
+    children
+  }) => /*#__PURE__*/_react2.default.createElement(_appRuntime.CustomDataProvider, {
+    data: dataProviderData
+  }, children);
   it('should respond with `loading: true`, `error: null` and `data: { displayName, id }` initially', () => {
     const {
       result
@@ -81,18 +74,15 @@ describe('OrganisationUnitTree - useOrgData', () => {
     });
   });
   it('should provide the error', async () => {
-    const errorWrapper = _ref3 => {
-      let {
-        children
-      } = _ref3;
-      return /*#__PURE__*/_react2.default.createElement(_appRuntime.CustomDataProvider, {
-        data: {
-          organisationUnits: async () => {
-            throw new Error('Error message');
-          }
+    const errorWrapper = ({
+      children
+    }) => /*#__PURE__*/_react2.default.createElement(_appRuntime.CustomDataProvider, {
+      data: {
+        organisationUnits: async () => {
+          throw new Error('Error message');
         }
-      }, children);
-    };
+      }
+    }, children);
     const {
       result
     } = (0, _react.renderHook)(() => (0, _useOrgData.useOrgData)('A0000000000', {

package/build/cjs/organisation-unit-tree/default-render-node-label/default-render-node-label.js

@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultRenderNodeLabel = void 0;
-const defaultRenderNodeLabel = _ref => {
-  let {
-    label
-  } = _ref;
-  return label;
-};
+const defaultRenderNodeLabel = ({
+  label
+}) => label;
 exports.defaultRenderNodeLabel = defaultRenderNodeLabel;

package/build/cjs/organisation-unit-tree/organisation-unit-tree-root-error.js

@@ -8,18 +8,15 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _index = _interopRequireDefault(require("../locales/index.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const OrganisationUnitTreeRootError = _ref => {
-  let {
-    dataTest = 'dhis2-uiwidgets-orgunittree-error',
-    error
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    "data-test": dataTest
-  }, _index.default.t('Error: {{ ERRORMESSAGE }}', {
-    ERRORMESSAGE: error,
-    nsSeparator: '>'
-  }));
-};
+const OrganisationUnitTreeRootError = ({
+  dataTest = 'dhis2-uiwidgets-orgunittree-error',
+  error
+}) => /*#__PURE__*/_react.default.createElement("div", {
+  "data-test": dataTest
+}, _index.default.t('Error: {{ ERRORMESSAGE }}', {
+  ERRORMESSAGE: error,
+  nsSeparator: '>'
+}));
 exports.OrganisationUnitTreeRootError = OrganisationUnitTreeRootError;
 OrganisationUnitTreeRootError.propTypes = {
   error: _propTypes.default.string.isRequired,

package/build/cjs/organisation-unit-tree/organisation-unit-tree-root-loading.js

@@ -9,19 +9,16 @@ var _loader = require("@dhis2-ui/loader");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const OrganisationUnitTreeRootLoading = _ref => {
-  let {
-    dataTest = 'dhis2-uiwidgets-orgunittree-loading'
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    "data-test": dataTest,
-    className: "jsx-814846266"
-  }, /*#__PURE__*/_react.default.createElement(_loader.CircularLoader, {
-    small: true
-  }), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "814846266"
-  }, ["div.jsx-814846266{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}"]));
-};
+const OrganisationUnitTreeRootLoading = ({
+  dataTest = 'dhis2-uiwidgets-orgunittree-loading'
+}) => /*#__PURE__*/_react.default.createElement("div", {
+  "data-test": dataTest,
+  className: "jsx-814846266"
+}, /*#__PURE__*/_react.default.createElement(_loader.CircularLoader, {
+  small: true
+}), /*#__PURE__*/_react.default.createElement(_style.default, {
+  id: "814846266"
+}, ["div.jsx-814846266{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}"]));
 exports.OrganisationUnitTreeRootLoading = OrganisationUnitTreeRootLoading;
 OrganisationUnitTreeRootLoading.propTypes = {
   dataTest: _propTypes.default.string

package/build/cjs/organisation-unit-tree/organisation-unit-tree.js

@@ -7,44 +7,43 @@ exports.OrganisationUnitTree = void 0;
 var _propTypes = require("@dhis2/prop-types");
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
-var _index = require("../organisation-unit-node/index.js");
+var _index = require("../helpers/index.js");
+var _index2 = require("../organisation-unit-node/index.js");
 var _propTypes3 = require("../prop-types.js");
-var _index2 = require("./default-render-node-label/index.js");
+var _index3 = require("./default-render-node-label/index.js");
 var _filterRootIds = require("./filter-root-ids.js");
 var _organisationUnitTreeRootError = require("./organisation-unit-tree-root-error.js");
 var _organisationUnitTreeRootLoading = require("./organisation-unit-tree-root-loading.js");
-var _index3 = require("./use-expanded/index.js");
+var _index4 = require("./use-expanded/index.js");
 var _useForceReload = require("./use-force-reload.js");
-var _index4 = require("./use-root-org-data/index.js");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _index5 = require("./use-root-org-data/index.js");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // A stable object to reference
 const staticArray = [];
-const OrganisationUnitTree = _ref => {
-  let {
-    onChange,
-    roots,
-    autoExpandLoadingError,
-    dataTest = 'dhis2-uiwidgets-orgunittree',
-    disableSelection,
-    displayProperty = 'displayName',
-    forceReload,
-    highlighted = staticArray,
-    isUserDataViewFallback,
-    initiallyExpanded = staticArray,
-    filter = staticArray,
-    renderNodeLabel = _index2.defaultRenderNodeLabel,
-    selected = staticArray,
-    singleSelection,
-    suppressAlphabeticalSorting,
-    expanded: expandedControlled,
-    handleExpand: handleExpandControlled,
-    handleCollapse: handleCollapseControlled,
-    onExpand,
-    onCollapse,
-    onChildrenLoaded
-  } = _ref;
+const OrganisationUnitTree = ({
+  onChange,
+  roots,
+  autoExpandLoadingError,
+  dataTest = 'dhis2-uiwidgets-orgunittree',
+  disableSelection,
+  displayProperty = 'displayName',
+  forceReload,
+  highlighted = staticArray,
+  isUserDataViewFallback,
+  initiallyExpanded = staticArray,
+  filter = staticArray,
+  renderNodeLabel = _index3.defaultRenderNodeLabel,
+  selected = staticArray,
+  singleSelection,
+  suppressAlphabeticalSorting,
+  expanded: expandedControlled,
+  handleExpand: handleExpandControlled,
+  handleCollapse: handleCollapseControlled,
+  onExpand,
+  onCollapse,
+  onChildrenLoaded
+}) => {
   const rootIds = (0, _filterRootIds.filterRootIds)(filter, Array.isArray(roots) ? roots : [roots]);
   const reloadId = (0, _useForceReload.useForceReload)(forceReload);
   const [prevReloadId, setPrevReloadId] = (0, _react.useState)(reloadId);
@@ -54,7 +53,7 @@ const OrganisationUnitTree = _ref => {
     error,
     data,
     refetch
-  } = (0, _index4.useRootOrgData)(rootIds, {
+  } = (0, _index5.useRootOrgData)(rootIds, {
     isUserDataViewFallback,
     suppressAlphabeticalSorting,
     displayProperty
@@ -63,7 +62,7 @@ const OrganisationUnitTree = _ref => {
     expanded,
     handleExpand,
     handleCollapse
-  } = (0, _index3.useExpanded)({
+  } = (0, _index4.useExpanded)({
     initiallyExpanded,
     onExpand,
     onCollapse,
@@ -80,13 +79,20 @@ const OrganisationUnitTree = _ref => {
     return () => console.warn('@TODO: Why does this component unmount after a force reload?');
   }, [reloadId, prevReloadId, refetch]);
   const isLoading = !called || loading;
+  const sortedRoots = (0, _react.useMemo)(() => {
+    if (!data) {
+      return staticArray;
+    }
+    const rootNodes = rootIds.map(rootId => data[rootId]);
+    return suppressAlphabeticalSorting ? rootNodes : (0, _index.sortNodeChildrenAlphabetically)(rootNodes);
+  }, [data, rootIds, suppressAlphabeticalSorting]);
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": dataTest
   }, isLoading && /*#__PURE__*/_react.default.createElement(_organisationUnitTreeRootLoading.OrganisationUnitTreeRootLoading, null), error && /*#__PURE__*/_react.default.createElement(_organisationUnitTreeRootError.OrganisationUnitTreeRootError, {
     error: error
-  }), !error && !isLoading && rootIds.map(rootId => {
-    const rootNode = data[rootId];
-    return /*#__PURE__*/_react.default.createElement(_index.OrganisationUnitNode, {
+  }), !error && !isLoading && sortedRoots.map(rootNode => {
+    const rootId = rootNode.id;
+    return /*#__PURE__*/_react.default.createElement(_index2.OrganisationUnitNode, {
       key: rootNode.path,
       rootId: rootId,
       autoExpandLoadingError: autoExpandLoadingError,

package/build/cjs/organisation-unit-tree/organisation-unit-tree.test.js

@@ -1,8 +1,9 @@
 "use strict";
 
 var _appRuntime = require("@dhis2/app-runtime");
+var _react = require("@testing-library/react");
 var _enzyme = require("enzyme");
-var _react = _interopRequireDefault(require("react"));
+var _react2 = _interopRequireDefault(require("react"));
 var _organisationUnitTree = require("./organisation-unit-tree.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 describe('OrganisationUnitTree', () => {
@@ -18,9 +19,9 @@ describe('OrganisationUnitTree', () => {
   describe('Controlled expanded props', () => {
     describe('Missing props', () => {
       it('should throw a prop-types error when "handleCollapse" is missing', () => {
-        (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
+        (0, _enzyme.shallow)(/*#__PURE__*/_react2.default.createElement(_appRuntime.CustomDataProvider, {
           data: {}
-        }, /*#__PURE__*/_react.default.createElement(_organisationUnitTree.OrganisationUnitTree, {
+        }, /*#__PURE__*/_react2.default.createElement(_organisationUnitTree.OrganisationUnitTree, {
           roots: "/A001",
           expanded: [],
           onChange: () => {},
@@ -30,9 +31,9 @@ describe('OrganisationUnitTree', () => {
         expect(errorMock.mock.calls[0][2]).toMatch(/Invalid prop `handleCollapse` supplied to `OrganisationUnitTree`/, {});
       });
       it('should throw a prop-types error when "handleExpand" is missing', () => {
-        (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
+        (0, _enzyme.shallow)(/*#__PURE__*/_react2.default.createElement(_appRuntime.CustomDataProvider, {
           data: {}
-        }, /*#__PURE__*/_react.default.createElement(_organisationUnitTree.OrganisationUnitTree, {
+        }, /*#__PURE__*/_react2.default.createElement(_organisationUnitTree.OrganisationUnitTree, {
           roots: "/A001",
           expanded: [],
           onChange: () => {},
@@ -42,9 +43,9 @@ describe('OrganisationUnitTree', () => {
         expect(errorMock.mock.calls[0][2]).toMatch(/Invalid prop `handleExpand` supplied to `OrganisationUnitTree`/);
       });
       it('should throw a prop-types error when "expanded" is missing', () => {
-        (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
+        (0, _enzyme.shallow)(/*#__PURE__*/_react2.default.createElement(_appRuntime.CustomDataProvider, {
           data: {}
-        }, /*#__PURE__*/_react.default.createElement(_organisationUnitTree.OrganisationUnitTree, {
+        }, /*#__PURE__*/_react2.default.createElement(_organisationUnitTree.OrganisationUnitTree, {
           roots: "/A001",
           onChange: () => {},
           handleCollapse: () => {},
@@ -55,4 +56,74 @@ describe('OrganisationUnitTree', () => {
       });
     });
   });
+  describe('Root node sorting', () => {
+    // displayNames intentionally out of alphabetical order relative to ids
+    const rootNodes = {
+      A001: {
+        id: 'A001',
+        path: '/A001',
+        displayName: 'Bravo'
+      },
+      A002: {
+        id: 'A002',
+        path: '/A002',
+        displayName: 'Alpha'
+      },
+      A003: {
+        id: 'A003',
+        path: '/A003',
+        displayName: 'Charlie'
+      }
+    };
+    const dataProvider = {
+      organisationUnits: (type, {
+        id
+      }) => {
+        const node = rootNodes[id];
+        if (node) {
+          // children: 0 so nodes don't try to load descendants
+          return {
+            ...node,
+            children: 0
+          };
+        }
+        return Promise.reject(`No org unit with id "${id}"`);
+      }
+    };
+    it('sorts root nodes alphabetically by displayName by default', async () => {
+      const {
+        container,
+        findByText
+      } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_appRuntime.CustomDataProvider, {
+        data: dataProvider
+      }, /*#__PURE__*/_react2.default.createElement(_organisationUnitTree.OrganisationUnitTree, {
+        roots: ['A001', 'A002', 'A003'],
+        onChange: () => {}
+      })));
+      await findByText('Alpha');
+      const {
+        textContent
+      } = container;
+      expect(textContent.indexOf('Alpha')).toBeLessThan(textContent.indexOf('Bravo'));
+      expect(textContent.indexOf('Bravo')).toBeLessThan(textContent.indexOf('Charlie'));
+    });
+    it('keeps the provided roots order when suppressAlphabeticalSorting is true', async () => {
+      const {
+        container,
+        findByText
+      } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_appRuntime.CustomDataProvider, {
+        data: dataProvider
+      }, /*#__PURE__*/_react2.default.createElement(_organisationUnitTree.OrganisationUnitTree, {
+        roots: ['A003', 'A001', 'A002'],
+        suppressAlphabeticalSorting: true,
+        onChange: () => {}
+      })));
+      await findByText('Charlie');
+      const {
+        textContent
+      } = container;
+      expect(textContent.indexOf('Charlie')).toBeLessThan(textContent.indexOf('Bravo'));
+      expect(textContent.indexOf('Bravo')).toBeLessThan(textContent.indexOf('Alpha'));
+    });
+  });
 });

package/build/cjs/organisation-unit-tree/use-expanded/create-expand-handlers.js

@@ -12,18 +12,16 @@ exports.createExpandHandlers = void 0;
  * @param {Function} [args.onCollapse]
  * @returns {{ handleExpand: Function, handleCollapse: Function }}
  */
-const createExpandHandlers = _ref => {
-  let {
-    expanded,
-    setExpanded,
-    onExpand,
-    onCollapse
-  } = _ref;
-  const handleExpand = _ref2 => {
-    let {
-      path,
-      ...rest
-    } = _ref2;
+const createExpandHandlers = ({
+  expanded,
+  setExpanded,
+  onExpand,
+  onCollapse
+}) => {
+  const handleExpand = ({
+    path,
+    ...rest
+  }) => {
     if (!expanded.includes(path)) {
       setExpanded([...expanded, path]);
       if (onExpand) {
@@ -34,11 +32,10 @@ const createExpandHandlers = _ref => {
       }
     }
   };
-  const handleCollapse = _ref3 => {
-    let {
-      path,
-      ...rest
-    } = _ref3;
+  const handleCollapse = ({
+    path,
+    ...rest
+  }) => {
     const pathIndex = expanded.indexOf(path);
     if (pathIndex !== -1) {
       const updatedExpanded = pathIndex === 0 ? expanded.slice(1) : [...expanded.slice(0, pathIndex), ...expanded.slice(pathIndex + 1)];

package/build/cjs/organisation-unit-tree/use-expanded/use-expanded.js

@@ -13,15 +13,14 @@ var _createExpandHandlers = require("./create-expand-handlers.js");
  * @param {Function} [onCollapse]
  * @returns {{ expanded: string[], handleExpand: Function, handleCollapse: Function }}
  */
-const useExpanded = _ref => {
-  let {
-    initiallyExpanded,
-    onExpand,
-    onCollapse,
-    expandedControlled,
-    handleExpandControlled,
-    handleCollapseControlled
-  } = _ref;
+const useExpanded = ({
+  initiallyExpanded,
+  onExpand,
+  onCollapse,
+  expandedControlled,
+  handleExpandControlled,
+  handleCollapseControlled
+}) => {
   const isControlled = !!expandedControlled;
   const allInitiallyExpandedPaths = isControlled ? [] : (0, _index.getAllExpandedPaths)(initiallyExpanded);
   const [expanded, setExpanded] = (0, _react.useState)(allInitiallyExpandedPaths);