@dhis2-ui/organisation-unit-tree 8.16.0 → 9.0.0-alpha.2

package/build/cjs/index.js

@@ -12,13 +12,13 @@ Object.defineProperty(exports, "OrganisationUnitTree", {
 Object.defineProperty(exports, "OrganisationUnitTreeRootError", {
   enumerable: true,
   get: function () {
-    return _index.RootError;
+    return _index.OrganisationUnitTreeRootError;
   }
 });
 Object.defineProperty(exports, "OrganisationUnitTreeRootLoading", {
   enumerable: true,
   get: function () {
-    return _index.RootLoading;
+    return _index.OrganisationUnitTreeRootLoading;
   }
 });
 Object.defineProperty(exports, "getAllExpandedOrgUnitPaths", {

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

@@ -9,21 +9,21 @@ Object.defineProperty(exports, "OrganisationUnitTree", {
     return _organisationUnitTree.OrganisationUnitTree;
   }
 });
-Object.defineProperty(exports, "RootError", {
+Object.defineProperty(exports, "OrganisationUnitTreeRootError", {
   enumerable: true,
   get: function () {
-    return _rootError.RootError;
+    return _organisationUnitTreeRootError.OrganisationUnitTreeRootError;
   }
 });
-Object.defineProperty(exports, "RootLoading", {
+Object.defineProperty(exports, "OrganisationUnitTreeRootLoading", {
   enumerable: true,
   get: function () {
-    return _rootLoading.RootLoading;
+    return _organisationUnitTreeRootLoading.OrganisationUnitTreeRootLoading;
   }
 });
 
 var _organisationUnitTree = require("./organisation-unit-tree.js");
 
-var _rootError = require("./root-error.js");
+var _organisationUnitTreeRootError = require("./organisation-unit-tree-root-error.js");
 
-var _rootLoading = require("./root-loading.js");
+var _organisationUnitTreeRootLoading = require("./organisation-unit-tree-root-loading.js");

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RootError = void 0;
+exports.OrganisationUnitTreeRootError = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -13,7 +13,7 @@ var _index = _interopRequireDefault(require("../locales/index.js"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const RootError = _ref => {
+const OrganisationUnitTreeRootError = _ref => {
   let {
     dataTest,
     error
@@ -26,11 +26,11 @@ const RootError = _ref => {
   }));
 };
 
-exports.RootError = RootError;
-RootError.defaultProps = {
+exports.OrganisationUnitTreeRootError = OrganisationUnitTreeRootError;
+OrganisationUnitTreeRootError.defaultProps = {
   dataTest: 'dhis2-uiwidgets-orgunittree-error'
 };
-RootError.propTypes = {
+OrganisationUnitTreeRootError.propTypes = {
   error: _propTypes.default.string.isRequired,
   dataTest: _propTypes.default.string
 };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RootLoading = void 0;
+exports.OrganisationUnitTreeRootLoading = void 0;
 
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 
@@ -15,7 +15,7 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const RootLoading = _ref => {
+const OrganisationUnitTreeRootLoading = _ref => {
   let {
     dataTest
   } = _ref;
@@ -29,10 +29,10 @@ const RootLoading = _ref => {
   }, ["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.RootLoading = RootLoading;
-RootLoading.defaultProps = {
+exports.OrganisationUnitTreeRootLoading = OrganisationUnitTreeRootLoading;
+OrganisationUnitTreeRootLoading.defaultProps = {
   dataTest: 'dhis2-uiwidgets-orgunittree-loading'
 };
-RootLoading.propTypes = {
+OrganisationUnitTreeRootLoading.propTypes = {
   dataTest: _propTypes.default.string
 };

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

@@ -19,9 +19,9 @@ var _index2 = require("./default-render-node-label/index.js");
 
 var _filterRootIds = require("./filter-root-ids.js");
 
-var _rootError = require("./root-error.js");
+var _organisationUnitTreeRootError = require("./organisation-unit-tree-root-error.js");
 
-var _rootLoading = require("./root-loading.js");
+var _organisationUnitTreeRootLoading = require("./organisation-unit-tree-root-loading.js");
 
 var _index3 = require("./use-expanded/index.js");
 
@@ -95,7 +95,7 @@ const OrganisationUnitTree = _ref => {
   const isLoading = !called || loading;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": dataTest
-  }, isLoading && /*#__PURE__*/_react.default.createElement(_rootLoading.RootLoading, null), error && /*#__PURE__*/_react.default.createElement(_rootError.RootError, {
+  }, 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];

package/build/es/index.js

@@ -1,2 +1,2 @@
-export { OrganisationUnitTree, RootError as OrganisationUnitTreeRootError, RootLoading as OrganisationUnitTreeRootLoading } from './organisation-unit-tree/index.js';
+export { OrganisationUnitTree, OrganisationUnitTreeRootError, OrganisationUnitTreeRootLoading } from './organisation-unit-tree/index.js';
 export { getAllExpandedPaths as getAllExpandedOrgUnitPaths } from './get-all-expanded-paths/index.js';

package/build/es/organisation-unit-tree/index.js

@@ -1,3 +1,3 @@
 export { OrganisationUnitTree } from './organisation-unit-tree.js';
-export { RootError } from './root-error.js';
-export { RootLoading } from './root-loading.js';
+export { OrganisationUnitTreeRootError } from './organisation-unit-tree-root-error.js';
+export { OrganisationUnitTreeRootLoading } from './organisation-unit-tree-root-loading.js';

package/build/es/organisation-unit-tree/{root-error.js → organisation-unit-tree-root-error.js}

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import i18n from '../locales/index.js';
-export const RootError = _ref => {
+export const OrganisationUnitTreeRootError = _ref => {
   let {
     dataTest,
     error
@@ -13,10 +13,10 @@ export const RootError = _ref => {
     nsSeparator: '>'
   }));
 };
-RootError.defaultProps = {
+OrganisationUnitTreeRootError.defaultProps = {
   dataTest: 'dhis2-uiwidgets-orgunittree-error'
 };
-RootError.propTypes = {
+OrganisationUnitTreeRootError.propTypes = {
   error: PropTypes.string.isRequired,
   dataTest: PropTypes.string
 };

package/build/es/organisation-unit-tree/{root-loading.js → organisation-unit-tree-root-loading.js}

@@ -2,7 +2,7 @@ import _JSXStyle from "styled-jsx/style";
 import { CircularLoader } from '@dhis2-ui/loader';
 import PropTypes from 'prop-types';
 import React from 'react';
-export const RootLoading = _ref => {
+export const OrganisationUnitTreeRootLoading = _ref => {
   let {
     dataTest
   } = _ref;
@@ -15,9 +15,9 @@ export const RootLoading = _ref => {
     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;}"]));
 };
-RootLoading.defaultProps = {
+OrganisationUnitTreeRootLoading.defaultProps = {
   dataTest: 'dhis2-uiwidgets-orgunittree-loading'
 };
-RootLoading.propTypes = {
+OrganisationUnitTreeRootLoading.propTypes = {
   dataTest: PropTypes.string
 };

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

@@ -5,8 +5,8 @@ import { OrganisationUnitNode } from '../organisation-unit-node/index.js';
 import { orgUnitPathPropType } from '../prop-types.js';
 import { defaultRenderNodeLabel } from './default-render-node-label/index.js';
 import { filterRootIds } from './filter-root-ids.js';
-import { RootError } from './root-error.js';
-import { RootLoading } from './root-loading.js';
+import { OrganisationUnitTreeRootError } from './organisation-unit-tree-root-error.js';
+import { OrganisationUnitTreeRootLoading } from './organisation-unit-tree-root-loading.js';
 import { useExpanded } from './use-expanded/index.js';
 import { useForceReload } from './use-force-reload.js';
 import { useRootOrgData } from './use-root-org-data/index.js';
@@ -71,7 +71,7 @@ const OrganisationUnitTree = _ref => {
   const isLoading = !called || loading;
   return /*#__PURE__*/React.createElement("div", {
     "data-test": dataTest
-  }, isLoading && /*#__PURE__*/React.createElement(RootLoading, null), error && /*#__PURE__*/React.createElement(RootError, {
+  }, isLoading && /*#__PURE__*/React.createElement(OrganisationUnitTreeRootLoading, null), error && /*#__PURE__*/React.createElement(OrganisationUnitTreeRootError, {
     error: error
   }), !error && !isLoading && rootIds.map(rootId => {
     const rootNode = data[rootId];

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/organisation-unit-tree",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI OrganisationUnitTree",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -34,15 +35,16 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/checkbox": "8.16.0",
-        "@dhis2-ui/loader": "8.16.0",
-        "@dhis2-ui/node": "8.16.0",
-        "@dhis2/ui-constants": "8.16.0",
+        "@dhis2-ui/checkbox": "9.0.0-alpha.2",
+        "@dhis2-ui/loader": "9.0.0-alpha.2",
+        "@dhis2-ui/node": "9.0.0-alpha.2",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "@dhis2/app-runtime": "^3.9.0",
@@ -50,5 +52,6 @@
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }

package/types/index.d.ts

@@ -0,0 +1,165 @@
+import * as React from 'react'
+
+export type OrganisationUnitTreeRoots = string | string[]
+
+export interface OrganisationUnitNode {
+    id: string
+    displayName: string
+    children?: number
+    path: string
+}
+
+export interface OrganisationUnitEventPayload extends OrganisationUnitNode {
+    checked: boolean
+    selected: string[]
+}
+
+export interface NodeLabelProps {
+    disableSelection: boolean
+    hasChildren: boolean
+    hasSelectedDescendants: boolean
+    loading: boolean
+    selected: string[]
+    open: boolean
+    path: string[]
+    singleSelection: boolean
+    node: OrganisationUnitNode
+    label: string
+    checked: boolean
+    highlighted: boolean
+    error?: Error
+}
+
+export interface OrganisationUnitTreeProps {
+    /**
+     * Root org unit ID(s)
+     */
+    roots: OrganisationUnitTreeRoots
+    /**
+     * Will be called with the following object:
+     * `{ id: string, displayName: string, path: string, checked: boolean, selected: string[] }`
+     */
+    onChange: (
+        payload: OrganisationUnitEventPayload,
+        event: React.MouseEvent<HTMLSpanElement | HTMLInputElement>
+    ) => void
+    /**
+     * When set, the error when loading children fails will be shown automatically
+     */
+    autoExpandLoadingError?: boolean
+    dataTest?: string
+    /**
+     * When set to true, no unit can be selected
+     */
+    disableSelection?: boolean
+    expanded?: boolean
+    /**
+     * All organisation units with a path that includes the provided paths will be shown.
+     * All others will not be rendered. When not provided, all org units will be shown.
+     */
+    filter?: string[]
+    /**
+     * When true, everything will be reloaded. In order to load it again after reloading, `forceReload` has to be set to `false` and then to `true` again
+     */
+    forceReload?: boolean
+    handleCollapse?: ({ path: string }) => void
+    handleExpand?: ({ path: string }) => void
+    /**
+     * All units provided to "highlighted" as path will be visually
+     * highlighted.
+     * Note:
+     * The d2-ui component used two props for this:
+     * * searchResults
+     * * highlightSearchResults
+     */
+    highlighted?: string[]
+    /**
+     * An array of OU paths that will be expanded automatically
+     * as soon as they are encountered.
+     * The path of an OU is the UIDs of the OU
+     * and all its parent OUs separated by slashes (/)
+     * Note: This replaces "openFirstLevel" as that's redundant
+     */
+    initiallyExpanded?: string[]
+    /**
+     * When provided, the 'isUserDataViewFallback' option will be sent when requesting the org units
+     */
+    isUserDataViewFallback?: boolean
+    /**
+     * Renders the actual node component for each leaf, can be used to
+     * customize the node. The default function just returns the node's
+     * displayName
+     * Shape of the object passed to the callback:
+     * ```
+     * {
+     * label: string,
+     * node: {
+     * displayName: string,
+     * id: string,
+     * // Only provided once `loading` is false
+     * path?: string,
+     * // Only provided once `loading` is false
+     * children?: Array.<{
+     * id: string,
+     * path: string,
+     * displayName: string
+     * }>
+     * },
+     * loading: boolean,
+     * error: string,
+     * open: boolean,
+     * selected: string[],
+     * singleSelection: boolean,
+     * disableSelection: boolean,
+     * }
+     * ```
+     */
+    renderNodeLabel?: (props: NodeLabelProps) => React.ReactNode
+    /**
+     * An array of paths of selected OUs. The path of an OU is the UIDs of the OU and all its parent OUs separated by slashes (`/`)
+     */
+    selected?: string[]
+    /**
+     * When set, no checkboxes will be displayed and only the first selected path in `selected` will be highlighted
+     */
+    singleSelection?: boolean
+    /**
+     * Turns off alphabetical sorting of units
+     */
+    suppressAlphabeticalSorting?: boolean
+    /**
+     * Called with the children's data that was loaded
+     */
+    onChildrenLoaded?: (
+        data: OrganisationUnitNode & {
+            children: Array<Omit<OrganisationUnitNode, 'children'>>
+        }
+    ) => void
+    /**
+     * Called with `{ path: string }` with the path of the parent of the level closed
+     */
+    onCollapse?: ({ path: string }) => void
+    /**
+     * Called with `{ path: string }` with the path of the parent of the level opened
+     */
+    onExpand?: ({ path: string }) => void
+}
+
+export const OrganisationUnitTree: React.FC<OrganisationUnitTreeProps>
+
+export interface OrganisationUnitTreeRootErrorProps {
+    error: string
+    dataTest?: string
+}
+
+export const OrganisationUnitTreeRootError: React.FC<OrganisationUnitTreeRootErrorProps>
+
+export interface OrganisationUnitTreeRootLoadingProps {
+    dataTest?: string
+}
+
+export const OrganisationUnitTreeRootLoading: React.FC<OrganisationUnitTreeRootLoadingProps>
+
+export const getAllExpandedOrgUnitPaths: (
+    initiallyExpanded: string[]
+) => string[]