@dhis2-ui/organisation-unit-tree 10.15.0 → 10.16.0

package/build/cjs/organisation-unit-node/organisation-unit-node-children.js

@@ -31,6 +31,7 @@ const OrganisationUnitNodeChildren = _ref2 => {
     autoExpandLoadingError,
     dataTest,
     disableSelection,
+    displayProperty,
     expanded,
     filter,
     highlighted,
@@ -51,7 +52,8 @@ const OrganisationUnitNodeChildren = _ref2 => {
     node,
     isUserDataViewFallback,
     suppressAlphabeticalSorting,
-    onComplete: onChildrenLoaded
+    onComplete: onChildrenLoaded,
+    displayProperty
   });
   const displayChildren = orgChildren.called && !orgChildren.loading && !orgChildren.error;
   const filteredChildren = displayChildren ? getFilteredChildren({
@@ -66,6 +68,7 @@ const OrganisationUnitNodeChildren = _ref2 => {
       dataTest: dataTest,
       disableSelection: disableSelection,
       displayName: child.displayName,
+      displayProperty: displayProperty,
       expanded: expanded,
       filter: filter,
       highlighted: highlighted,
@@ -97,6 +100,7 @@ OrganisationUnitNodeChildren.propTypes = {
   onChange: _propTypes.default.func.isRequired,
   autoExpandLoadingError: _propTypes.default.bool,
   disableSelection: _propTypes.default.bool,
+  displayProperty: _propTypes.default.oneOf(['displayName', 'displayShortName']),
   expanded: _propTypes.default.arrayOf(_propTypes2.orgUnitPathPropType),
   filter: _propTypes.default.arrayOf(_propTypes2.orgUnitPathPropType),
   highlighted: _propTypes.default.arrayOf(_propTypes2.orgUnitPathPropType),

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

@@ -24,6 +24,7 @@ const OrganisationUnitNode = _ref => {
     dataTest,
     disableSelection,
     displayName,
+    displayProperty,
     expanded,
     highlighted,
     id,
@@ -132,6 +133,7 @@ const OrganisationUnitNode = _ref => {
     autoExpandLoadingError: autoExpandLoadingError,
     dataTest: dataTest,
     disableSelection: disableSelection,
+    displayProperty: displayProperty,
     expanded: expanded,
     filter: filter,
     highlighted: highlighted,
@@ -158,6 +160,7 @@ OrganisationUnitNode.propTypes = {
   autoExpandLoadingError: _propTypes.default.bool,
   disableSelection: _propTypes.default.bool,
   displayName: _propTypes.default.string,
+  displayProperty: _propTypes.default.oneOf(['displayName', 'displayShortName']),
   expanded: _propTypes.default.arrayOf(_propTypes2.orgUnitPathPropType),
   filter: _propTypes.default.arrayOf(_propTypes2.orgUnitPathPropType),
   highlighted: _propTypes.default.arrayOf(_propTypes2.orgUnitPathPropType),

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

@@ -16,8 +16,13 @@ const ORG_DATA_QUERY = {
       } = _ref;
       return id;
     },
-    params: {
-      fields: 'children[id,path,displayName]'
+    params: _ref2 => {
+      let {
+        displayProperty
+      } = _ref2;
+      return {
+        fields: displayProperty === 'displayName' ? 'children[id,path,displayName]' : `children[id,path,${displayProperty}~rename(displayName)]`
+      };
     }
   }
 };
@@ -27,14 +32,16 @@ const ORG_DATA_QUERY = {
  * @param {Object} options
  * @param {string} options.displayName
  * @param {boolean} [options.withChildren]
+ * @param {'displayName'|'displayShortName'} [options.displayProperty]
  * @returns {Object}
  */
-const useOrgChildren = _ref2 => {
+const useOrgChildren = _ref3 => {
   let {
     node,
     suppressAlphabeticalSorting,
-    onComplete
-  } = _ref2;
+    onComplete,
+    displayProperty = 'displayName'
+  } = _ref3;
   const onCompleteCalledRef = (0, _react.useRef)(false);
   const {
     called,
@@ -43,7 +50,8 @@ const useOrgChildren = _ref2 => {
     data
   } = (0, _appRuntime.useDataQuery)(ORG_DATA_QUERY, {
     variables: {
-      id: node.id
+      id: node.id,
+      displayProperty
     }
   });
   const orgChildren = (0, _react.useMemo)(() => {
@@ -59,7 +67,7 @@ const useOrgChildren = _ref2 => {
       orgUnit
     } = data;
     return suppressAlphabeticalSorting ? orgUnit.children : (0, _index.sortNodeChildrenAlphabetically)(orgUnit.children);
-  }, [data, suppressAlphabeticalSorting]);
+  }, [data, node.children, suppressAlphabeticalSorting]);
   (0, _react.useEffect)(() => {
     if (onComplete && orgChildren && !onCompleteCalledRef.current) {
       // For backwards compatibility: Pass entire node incl. children
@@ -69,7 +77,7 @@ const useOrgChildren = _ref2 => {
       });
       onCompleteCalledRef.current = true;
     }
-  }, [onComplete, orgChildren, onCompleteCalledRef]);
+  }, [node, onComplete, orgChildren, onCompleteCalledRef]);
   return {
     called,
     loading,

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

@@ -28,6 +28,7 @@ const OrganisationUnitTree = _ref => {
     autoExpandLoadingError,
     dataTest = 'dhis2-uiwidgets-orgunittree',
     disableSelection,
+    displayProperty = 'displayName',
     forceReload,
     highlighted = staticArray,
     isUserDataViewFallback,
@@ -55,7 +56,8 @@ const OrganisationUnitTree = _ref => {
     refetch
   } = (0, _index4.useRootOrgData)(rootIds, {
     isUserDataViewFallback,
-    suppressAlphabeticalSorting
+    suppressAlphabeticalSorting,
+    displayProperty
   });
   const {
     expanded,
@@ -91,6 +93,7 @@ const OrganisationUnitTree = _ref => {
       dataTest: dataTest,
       disableSelection: disableSelection,
       displayName: rootNode.displayName,
+      displayProperty: displayProperty,
       expanded: expanded,
       highlighted: highlighted,
       id: rootId,
@@ -120,6 +123,13 @@ OrganisationUnitTree.propTypes = {
   dataTest: _propTypes2.default.string,
   /** When set to true, no unit can be selected */
   disableSelection: _propTypes2.default.bool,
+  /**
+   * Which field to render as the org unit label. Defaults to `'displayName'`.
+   * Set to `'displayShortName'` to honour the `keyAnalysisDisplayProperty`
+   * system/user setting. The query renames the chosen field back to
+   * `displayName` internally, so consumer-facing data shape is unchanged.
+   */
+  displayProperty: _propTypes2.default.oneOf(['displayName', 'displayShortName']),
   expanded: (0, _propTypes.requiredIf)(props => !!props.handleExpand || !!props.handleCollapse, _propTypes2.default.arrayOf(_propTypes2.default.string)),
   /**
    * All organisation units with a path that includes the provided paths will be shown.

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

@@ -7,7 +7,7 @@ exports.useRootOrgData = exports.createRootQuery = void 0;
 var _appRuntime = require("@dhis2/app-runtime");
 var _react = require("react");
 var _patchMissingDisplayName = require("./patch-missing-display-name.js");
-const createRootQuery = ids => ids.reduce((query, id) => ({
+const createRootQuery = (ids, displayProperty) => ids.reduce((query, id) => ({
   ...query,
   [id]: {
     id,
@@ -18,7 +18,7 @@ const createRootQuery = ids => ids.reduce((query, id) => ({
       } = _ref;
       return {
         isUserDataViewFallback,
-        fields: ['displayName', 'path', 'id']
+        fields: [displayProperty === 'displayName' ? 'displayName' : `${displayProperty}~rename(displayName)`, 'path', 'id']
       };
     }
   }
@@ -29,14 +29,16 @@ const createRootQuery = ids => ids.reduce((query, id) => ({
  * @param {Object} [options]
  * @param {boolean} [options.withChildren]
  * @param {boolean} [options.isUserDataViewFallback]
+ * @param {'displayName'|'displayShortName'} [options.displayProperty]
  * @returns {Object}
  */
 exports.createRootQuery = createRootQuery;
 const useRootOrgData = function (ids) {
   let {
-    isUserDataViewFallback
+    isUserDataViewFallback,
+    displayProperty = 'displayName'
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const query = (0, _react.useMemo)(() => createRootQuery(ids), [ids]);
+  const query = (0, _react.useMemo)(() => createRootQuery(ids, displayProperty), [ids, displayProperty]);
   const variables = {
     isUserDataViewFallback
   };

package/build/es/organisation-unit-node/organisation-unit-node-children.js

@@ -24,6 +24,7 @@ export const OrganisationUnitNodeChildren = _ref2 => {
     autoExpandLoadingError,
     dataTest,
     disableSelection,
+    displayProperty,
     expanded,
     filter,
     highlighted,
@@ -44,7 +45,8 @@ export const OrganisationUnitNodeChildren = _ref2 => {
     node,
     isUserDataViewFallback,
     suppressAlphabeticalSorting,
-    onComplete: onChildrenLoaded
+    onComplete: onChildrenLoaded,
+    displayProperty
   });
   const displayChildren = orgChildren.called && !orgChildren.loading && !orgChildren.error;
   const filteredChildren = displayChildren ? getFilteredChildren({
@@ -59,6 +61,7 @@ export const OrganisationUnitNodeChildren = _ref2 => {
       dataTest: dataTest,
       disableSelection: disableSelection,
       displayName: child.displayName,
+      displayProperty: displayProperty,
       expanded: expanded,
       filter: filter,
       highlighted: highlighted,
@@ -89,6 +92,7 @@ OrganisationUnitNodeChildren.propTypes = {
   onChange: PropTypes.func.isRequired,
   autoExpandLoadingError: PropTypes.bool,
   disableSelection: PropTypes.bool,
+  displayProperty: PropTypes.oneOf(['displayName', 'displayShortName']),
   expanded: PropTypes.arrayOf(orgUnitPathPropType),
   filter: PropTypes.arrayOf(orgUnitPathPropType),
   highlighted: PropTypes.arrayOf(orgUnitPathPropType),

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

@@ -17,6 +17,7 @@ export const OrganisationUnitNode = _ref => {
     dataTest,
     disableSelection,
     displayName,
+    displayProperty,
     expanded,
     highlighted,
     id,
@@ -125,6 +126,7 @@ export const OrganisationUnitNode = _ref => {
     autoExpandLoadingError: autoExpandLoadingError,
     dataTest: dataTest,
     disableSelection: disableSelection,
+    displayProperty: displayProperty,
     expanded: expanded,
     filter: filter,
     highlighted: highlighted,
@@ -150,6 +152,7 @@ OrganisationUnitNode.propTypes = {
   autoExpandLoadingError: PropTypes.bool,
   disableSelection: PropTypes.bool,
   displayName: PropTypes.string,
+  displayProperty: PropTypes.oneOf(['displayName', 'displayShortName']),
   expanded: PropTypes.arrayOf(orgUnitPathPropType),
   filter: PropTypes.arrayOf(orgUnitPathPropType),
   highlighted: PropTypes.arrayOf(orgUnitPathPropType),

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

@@ -10,8 +10,13 @@ const ORG_DATA_QUERY = {
       } = _ref;
       return id;
     },
-    params: {
-      fields: 'children[id,path,displayName]'
+    params: _ref2 => {
+      let {
+        displayProperty
+      } = _ref2;
+      return {
+        fields: displayProperty === 'displayName' ? 'children[id,path,displayName]' : `children[id,path,${displayProperty}~rename(displayName)]`
+      };
     }
   }
 };
@@ -21,14 +26,16 @@ const ORG_DATA_QUERY = {
  * @param {Object} options
  * @param {string} options.displayName
  * @param {boolean} [options.withChildren]
+ * @param {'displayName'|'displayShortName'} [options.displayProperty]
  * @returns {Object}
  */
-export const useOrgChildren = _ref2 => {
+export const useOrgChildren = _ref3 => {
   let {
     node,
     suppressAlphabeticalSorting,
-    onComplete
-  } = _ref2;
+    onComplete,
+    displayProperty = 'displayName'
+  } = _ref3;
   const onCompleteCalledRef = useRef(false);
   const {
     called,
@@ -37,7 +44,8 @@ export const useOrgChildren = _ref2 => {
     data
   } = useDataQuery(ORG_DATA_QUERY, {
     variables: {
-      id: node.id
+      id: node.id,
+      displayProperty
     }
   });
   const orgChildren = useMemo(() => {
@@ -53,7 +61,7 @@ export const useOrgChildren = _ref2 => {
       orgUnit
     } = data;
     return suppressAlphabeticalSorting ? orgUnit.children : sortNodeChildrenAlphabetically(orgUnit.children);
-  }, [data, suppressAlphabeticalSorting]);
+  }, [data, node.children, suppressAlphabeticalSorting]);
   useEffect(() => {
     if (onComplete && orgChildren && !onCompleteCalledRef.current) {
       // For backwards compatibility: Pass entire node incl. children
@@ -63,7 +71,7 @@ export const useOrgChildren = _ref2 => {
       });
       onCompleteCalledRef.current = true;
     }
-  }, [onComplete, orgChildren, onCompleteCalledRef]);
+  }, [node, onComplete, orgChildren, onCompleteCalledRef]);
   return {
     called,
     loading,

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

@@ -20,6 +20,7 @@ const OrganisationUnitTree = _ref => {
     autoExpandLoadingError,
     dataTest = 'dhis2-uiwidgets-orgunittree',
     disableSelection,
+    displayProperty = 'displayName',
     forceReload,
     highlighted = staticArray,
     isUserDataViewFallback,
@@ -47,7 +48,8 @@ const OrganisationUnitTree = _ref => {
     refetch
   } = useRootOrgData(rootIds, {
     isUserDataViewFallback,
-    suppressAlphabeticalSorting
+    suppressAlphabeticalSorting,
+    displayProperty
   });
   const {
     expanded,
@@ -83,6 +85,7 @@ const OrganisationUnitTree = _ref => {
       dataTest: dataTest,
       disableSelection: disableSelection,
       displayName: rootNode.displayName,
+      displayProperty: displayProperty,
       expanded: expanded,
       highlighted: highlighted,
       id: rootId,
@@ -111,6 +114,13 @@ OrganisationUnitTree.propTypes = {
   dataTest: PropTypes.string,
   /** When set to true, no unit can be selected */
   disableSelection: PropTypes.bool,
+  /**
+   * Which field to render as the org unit label. Defaults to `'displayName'`.
+   * Set to `'displayShortName'` to honour the `keyAnalysisDisplayProperty`
+   * system/user setting. The query renames the chosen field back to
+   * `displayName` internally, so consumer-facing data shape is unchanged.
+   */
+  displayProperty: PropTypes.oneOf(['displayName', 'displayShortName']),
   expanded: requiredIf(props => !!props.handleExpand || !!props.handleCollapse, PropTypes.arrayOf(PropTypes.string)),
   /**
    * All organisation units with a path that includes the provided paths will be shown.

package/build/es/organisation-unit-tree/use-root-org-data/use-root-org-data.js

@@ -1,7 +1,7 @@
 import { useDataQuery } from '@dhis2/app-runtime';
 import { useMemo } from 'react';
 import { patchMissingDisplayName } from './patch-missing-display-name.js';
-export const createRootQuery = ids => ids.reduce((query, id) => ({
+export const createRootQuery = (ids, displayProperty) => ids.reduce((query, id) => ({
   ...query,
   [id]: {
     id,
@@ -12,7 +12,7 @@ export const createRootQuery = ids => ids.reduce((query, id) => ({
       } = _ref;
       return {
         isUserDataViewFallback,
-        fields: ['displayName', 'path', 'id']
+        fields: [displayProperty === 'displayName' ? 'displayName' : `${displayProperty}~rename(displayName)`, 'path', 'id']
       };
     }
   }
@@ -23,13 +23,15 @@ export const createRootQuery = ids => ids.reduce((query, id) => ({
  * @param {Object} [options]
  * @param {boolean} [options.withChildren]
  * @param {boolean} [options.isUserDataViewFallback]
+ * @param {'displayName'|'displayShortName'} [options.displayProperty]
  * @returns {Object}
  */
 export const useRootOrgData = function (ids) {
   let {
-    isUserDataViewFallback
+    isUserDataViewFallback,
+    displayProperty = 'displayName'
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const query = useMemo(() => createRootQuery(ids), [ids]);
+  const query = useMemo(() => createRootQuery(ids, displayProperty), [ids, displayProperty]);
   const variables = {
     isUserDataViewFallback
   };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/organisation-unit-tree",
-    "version": "10.15.0",
+    "version": "10.16.0",
     "description": "UI OrganisationUnitTree",
     "repository": {
         "type": "git",
@@ -35,11 +35,11 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/button": "10.15.0",
-        "@dhis2-ui/checkbox": "10.15.0",
-        "@dhis2-ui/loader": "10.15.0",
-        "@dhis2-ui/node": "10.15.0",
-        "@dhis2/ui-constants": "10.15.0",
+        "@dhis2-ui/button": "10.16.0",
+        "@dhis2-ui/checkbox": "10.16.0",
+        "@dhis2-ui/loader": "10.16.0",
+        "@dhis2-ui/node": "10.16.0",
+        "@dhis2/ui-constants": "10.16.0",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

package/types/index.d.ts

@@ -52,6 +52,13 @@ export interface OrganisationUnitTreeProps {
      * When set to true, no unit can be selected
      */
     disableSelection?: boolean
+    /**
+     * Which field to render as the org unit label. Defaults to 'displayName'.
+     * Set to 'displayShortName' to honour the keyAnalysisDisplayProperty
+     * system/user setting. The query renames the chosen field back to
+     * `displayName` internally, so the consumer-facing data shape is unchanged.
+     */
+    displayProperty?: 'displayName' | 'displayShortName'
     expanded?: boolean
     /**
      * All organisation units with a path that includes the provided paths will be shown.