@dhis2/analytics 26.12.2 → 26.13.0

package/build/es/components/DataDimension/{ItemSelector.js → ItemSelector/ItemSelector.js}

@@ -2,21 +2,23 @@ import _JSXStyle from "styled-jsx/style";
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { useDataEngine } from '@dhis2/app-runtime';
 import { Transfer, InputField, IconInfo16, Button, IconAdd24 } from '@dhis2/ui';
+import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useRef, useState } from 'react';
-import { apiFetchOptions } from '../../api/dimensions.js';
-import i18n from '../../locales/index.js';
-import { DATA_SETS_CONSTANTS, REPORTING_RATE } from '../../modules/dataSets.js';
-import { DIMENSION_TYPE_ALL, DIMENSION_TYPE_DATA_ELEMENT, DIMENSION_TYPE_DATA_SET, DIMENSION_TYPE_EVENT_DATA_ITEM, DIMENSION_TYPE_PROGRAM_INDICATOR, DIMENSION_TYPE_INDICATOR, TOTALS, DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM } from '../../modules/dataTypes.js';
-import { getIcon, getDimensionType } from '../../modules/dimensionListItem.js';
-import { TRANSFER_HEIGHT, TRANSFER_OPTIONS_WIDTH, TRANSFER_SELECTED_WIDTH } from '../../modules/dimensionSelectorHelper.js';
-import { useDebounce, useDidUpdateEffect } from '../../modules/utils.js';
-import styles from '../styles/DimensionSelector.style.js';
-import CalculationModal from './Calculation/CalculationModal.js';
+import React, { useState } from 'react';
+import { apiFetchOptions } from '../../../api/dimensions.js';
+import i18n from '../../../locales/index.js';
+import { DATA_SETS_CONSTANTS, REPORTING_RATE } from '../../../modules/dataSets.js';
+import { DIMENSION_TYPE_ALL, DIMENSION_TYPE_DATA_ELEMENT, TOTALS, DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM } from '../../../modules/dataTypes.js';
+import { getIcon, getDimensionType } from '../../../modules/dimensionListItem.js';
+import { TRANSFER_HEIGHT, TRANSFER_OPTIONS_WIDTH, TRANSFER_SELECTED_WIDTH } from '../../../modules/dimensionSelectorHelper.js';
+import { useDebounce, useDidUpdateEffect } from '../../../modules/utils.js';
+import styles from '../../styles/DimensionSelector.style.js';
+import CalculationModal from '../Calculation/CalculationModal.js';
+import { SelectedEmptyPlaceholder } from '../SelectedEmptyPlaceholder.js';
+import { SourceEmptyPlaceholder } from '../SourceEmptyPlaceholder.js';
+import { TransferOption } from '../TransferOption.js';
 import DataTypeSelector from './DataTypeSelector.js';
 import GroupSelector from './GroupSelector.js';
-import { InfoPopover } from './Info/InfoPopover.js';
-import { TransferOption } from './TransferOption.js';
 const LeftHeader = _ref => {
   let {
     searchTerm,
@@ -76,11 +78,6 @@ LeftHeader.propTypes = {
   setSubGroup: PropTypes.func,
   subGroup: PropTypes.string
 };
-const EmptySelection = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
-  className: `jsx-${styles.__hash}` + " " + "emptyList"
-}, i18n.t('No items selected')), /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: styles.__hash
-}, styles));
 const RightHeader = _ref3 => {
   let {
     infoBoxMessage
@@ -100,99 +97,7 @@ const RightHeader = _ref3 => {
 RightHeader.propTypes = {
   infoBoxMessage: PropTypes.string
 };
-const SourceEmptyPlaceholder = _ref4 => {
-  let {
-    loading,
-    searchTerm,
-    options,
-    noItemsMessage,
-    dataType,
-    dataTest
-  } = _ref4;
-  let message = '';
-  if (!loading && !options.length && !searchTerm) {
-    if (noItemsMessage) {
-      message = noItemsMessage;
-    } else {
-      switch (dataType) {
-        case DIMENSION_TYPE_INDICATOR:
-          message = i18n.t('No indicators found');
-          break;
-        case DIMENSION_TYPE_DATA_ELEMENT:
-          message = i18n.t('No data elements found');
-          break;
-        case DIMENSION_TYPE_DATA_SET:
-          message = i18n.t('No data sets found');
-          break;
-        case DIMENSION_TYPE_EVENT_DATA_ITEM:
-          message = i18n.t('No event data items found');
-          break;
-        case DIMENSION_TYPE_PROGRAM_INDICATOR:
-          message = i18n.t('No program indicators found');
-          break;
-        case DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM:
-          message = i18n.t('No calculations found');
-          break;
-        default:
-          message = i18n.t('No data');
-          break;
-      }
-    }
-  } else if (!loading && !options.length && searchTerm) {
-    switch (dataType) {
-      case DIMENSION_TYPE_INDICATOR:
-        message = i18n.t('No indicators found for "{{- searchTerm}}"', {
-          searchTerm
-        });
-        break;
-      case DIMENSION_TYPE_DATA_ELEMENT:
-        message = i18n.t('No data elements found for "{{- searchTerm}}"', {
-          searchTerm
-        });
-        break;
-      case DIMENSION_TYPE_DATA_SET:
-        message = i18n.t('No data sets found for "{{- searchTerm}}"', {
-          searchTerm
-        });
-        break;
-      case DIMENSION_TYPE_EVENT_DATA_ITEM:
-        message = i18n.t('No event data items found for "{{- searchTerm}}"', {
-          searchTerm
-        });
-        break;
-      case DIMENSION_TYPE_PROGRAM_INDICATOR:
-        message = i18n.t('No program indicators found for "{{- searchTerm}}"', {
-          searchTerm
-        });
-        break;
-      case DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM:
-        message = i18n.t('No calculations found for "{{- searchTerm}}"', {
-          searchTerm
-        });
-        break;
-      default:
-        message = i18n.t('Nothing found for "{{- searchTerm}}"', {
-          searchTerm
-        });
-        break;
-    }
-  }
-  return message && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
-    "data-test": dataTest,
-    className: `jsx-${styles.__hash}` + " " + "emptyList"
-  }, message), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: styles.__hash
-  }, styles));
-};
-SourceEmptyPlaceholder.propTypes = {
-  dataTest: PropTypes.string,
-  dataType: PropTypes.string,
-  loading: PropTypes.bool,
-  noItemsMessage: PropTypes.string,
-  options: PropTypes.array,
-  searchTerm: PropTypes.string
-};
-const ItemSelector = _ref5 => {
+const ItemSelector = _ref4 => {
   let {
     selectedItems,
     noItemsMessage,
@@ -200,11 +105,18 @@ const ItemSelector = _ref5 => {
     rightFooter,
     displayNameProp,
     infoBoxMessage,
+    itemsRef,
+    currentCalculation,
+    setCurrentCalculation,
+    infoDataItem,
+    setInfoDataItem,
     dataTypes,
     dataTest,
-    onEDISave
-  } = _ref5;
-  const itemsRef = useRef(new Map());
+    onEDISave,
+    onEditClick,
+    isOptionViewMode,
+    supportsEDI
+  } = _ref4;
   const [state, setState] = useState({
     searchTerm: '',
     dataTypes,
@@ -215,16 +127,8 @@ const ItemSelector = _ref5 => {
     },
     options: [],
     loading: true,
-    nextPage: 1,
-    supportsEDI: dataTypes.map(_ref6 => {
-      let {
-        id
-      } = _ref6;
-      return id;
-    }).includes(DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM)
+    nextPage: 1
   });
-  const [currentCalculation, setCurrentCalculation] = useState();
-  const [currentDataItem, setCurrentDataItem] = useState();
   const debouncedSearchTerm = useDebounce(state.searchTerm, 500);
   const dataEngine = useDataEngine();
   const setSearchTerm = searchTerm => setState(state => ({
@@ -274,7 +178,8 @@ const ItemSelector = _ref5 => {
           value: item.id,
           disabled: item.disabled,
           type: item.dimensionItemType,
-          expression: item.expression
+          expression: item.expression,
+          optionSetId: item.optionSetId
         });
       }
     });
@@ -299,19 +204,22 @@ const ItemSelector = _ref5 => {
   };
   useDidUpdateEffect(() => {
     fetchItems(1);
-  }, [debouncedSearchTerm, state.filter]);
-  const onChange = newSelected => {
-    onSelect(newSelected.map(value => {
-      const matchingItem = [...state.options, ...selectedItems].find(item => item.value === value);
+  }, [debouncedSearchTerm, state.filter]); // does this effect dep work?
+
+  const onChange = selectedIds => {
+    const newSelectedItems = selectedIds.map(id => {
+      const matchingItem = [...state.options, ...selectedItems].find(item => item.value === id);
       return {
-        value,
+        value: id,
         label: matchingItem.label,
         type: matchingItem.type,
+        optionSetId: matchingItem.optionSetId,
         ...(matchingItem.expression ? {
           expression: matchingItem.expression
         } : {})
       };
-    }));
+    });
+    onSelect(newSelectedItems);
   };
   const onEndReached = () => {
     if (state.nextPage) {
@@ -322,17 +230,13 @@ const ItemSelector = _ref5 => {
     const item = selectedItems.find(item => item.value === value);
     return !item || item.isActive;
   };
-  const getItemType = value => {
-    var _find;
-    return (_find = [...state.options, ...selectedItems].find(item => item.value === value)) === null || _find === void 0 ? void 0 : _find.type;
-  };
-  const onSaveCalculation = async _ref7 => {
+  const onSaveCalculation = async _ref5 => {
     let {
       id,
       name,
       expression,
       isNew
-    } = _ref7;
+    } = _ref5;
     onEDISave({
       id,
       name,
@@ -355,10 +259,10 @@ const ItemSelector = _ref5 => {
       }]);
     }
   };
-  const onDeleteCalculation = _ref8 => {
+  const onDeleteCalculation = _ref6 => {
     let {
       id
-    } = _ref8;
+    } = _ref6;
     // close the modal
     setCurrentCalculation();
 
@@ -395,22 +299,30 @@ const ItemSelector = _ref5 => {
     }
   }));
   return /*#__PURE__*/React.createElement("div", {
-    className: `jsx-${styles.__hash}` + " " + "transfer-container"
+    className: `jsx-${styles.__hash}` + " " + (cx('transfer-container', {
+      hidden: isOptionViewMode
+    }) || "")
   }, /*#__PURE__*/React.createElement(Transfer, {
-    onChange: _ref9 => {
+    onChange: _ref7 => {
       let {
         selected
-      } = _ref9;
+      } = _ref7;
       return onChange(selected);
     },
     selected: selectedItems.map(item => item.value),
-    options: [...state.options, ...selectedItems],
+    options: [...state.options,
+    // remove items already in the options list
+    ...selectedItems.filter(selectedItem => {
+      var _state$options;
+      return !((_state$options = state.options) !== null && _state$options !== void 0 && _state$options.find(option => option.value === selectedItem.value));
+    })],
     loading: state.loading,
     loadingPicked: state.loading,
     sourceEmptyPlaceholder: /*#__PURE__*/React.createElement(SourceEmptyPlaceholder, {
       loading: state.loading,
       searchTerm: debouncedSearchTerm,
       options: state.options,
+      allItemsSelectedMessage: state.options.length === selectedItems.length && !state.nextPage ? i18n.t('All available items are already selected') : '',
       noItemsMessage: noItemsMessage,
       dataType: state.filter.dataType,
       dataTest: `${dataTest}-empty-source`
@@ -429,7 +341,7 @@ const ItemSelector = _ref5 => {
       displayNameProp: displayNameProp,
       dataTest: `${dataTest}-left-header`
     }),
-    leftFooter: state.supportsEDI ? /*#__PURE__*/React.createElement("div", {
+    leftFooter: supportsEDI ? /*#__PURE__*/React.createElement("div", {
       className: `jsx-${styles.__hash}` + " " + "calculation-button"
     }, /*#__PURE__*/React.createElement(Button, {
       icon: /*#__PURE__*/React.createElement(IconAdd24, null),
@@ -440,49 +352,40 @@ const ItemSelector = _ref5 => {
     height: TRANSFER_HEIGHT,
     optionsWidth: TRANSFER_OPTIONS_WIDTH,
     selectedWidth: TRANSFER_SELECTED_WIDTH,
-    selectedEmptyComponent: /*#__PURE__*/React.createElement(EmptySelection, null),
+    selectedEmptyComponent: /*#__PURE__*/React.createElement(SelectedEmptyPlaceholder, null),
     rightHeader: /*#__PURE__*/React.createElement(RightHeader, {
       infoBoxMessage: infoBoxMessage
     }),
     rightFooter: rightFooter,
     renderOption: props => {
-      var _props$access;
+      // console.log('renderOption', props)
       return /*#__PURE__*/React.createElement(TransferOption
       /* eslint-disable react/prop-types */, _extends({}, props, {
         active: isActive(props.value),
-        showingInfo: (currentDataItem === null || currentDataItem === void 0 ? void 0 : currentDataItem.id) === props.value,
-        icon: getIcon(getItemType(props.value)),
+        showingInfo: (infoDataItem === null || infoDataItem === void 0 ? void 0 : infoDataItem.id) === props.value,
+        icon: getIcon(props.type),
+        dataItemType: props.type,
         dimensionType: getDimensionType({
-          type: getItemType(props.value),
+          type: props.type,
           expression: props.expression
         }),
         dataTest: `${dataTest}-transfer-option`,
         itemsRef: itemsRef,
-        onEditClick: getItemType(props.value) === DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM && !(((_props$access = props.access) === null || _props$access === void 0 ? void 0 : _props$access.write) === false) && state.supportsEDI ? () => setCurrentCalculation({
-          id: props.value,
-          name: props.label,
-          expression: props.expression
-        }) : undefined,
-        onInfoClick: () => setCurrentDataItem({
+        onEditClick: () => onEditClick(props),
+        onInfoClick: () => setInfoDataItem({
           id: props.value,
-          type: getItemType(props.value)
+          type: props.type
         })
         /* eslint-enable react/prop-types */
       }));
     },
     dataTest: `${dataTest}-transfer`
-  }), currentCalculation && state.supportsEDI && /*#__PURE__*/React.createElement(CalculationModal, {
+  }), currentCalculation && supportsEDI && /*#__PURE__*/React.createElement(CalculationModal, {
     calculation: currentCalculation,
     onSave: onSaveCalculation,
     onClose: () => setCurrentCalculation(),
     onDelete: onDeleteCalculation,
     displayNameProp: displayNameProp
-  }), currentDataItem && /*#__PURE__*/React.createElement(InfoPopover, {
-    dataTest: `${dataTest}-info`,
-    item: currentDataItem,
-    reference: itemsRef.current.get(currentDataItem.id),
-    onClose: () => setCurrentDataItem(),
-    displayNameProp: displayNameProp
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: styles.__hash
   }, styles));
@@ -490,19 +393,29 @@ const ItemSelector = _ref5 => {
 ItemSelector.propTypes = {
   displayNameProp: PropTypes.string.isRequired,
   onSelect: PropTypes.func.isRequired,
+  currentCalculation: PropTypes.object,
   dataTest: PropTypes.string,
   dataTypes: PropTypes.array,
   infoBoxMessage: PropTypes.string,
+  infoDataItem: PropTypes.object,
+  isOptionViewMode: PropTypes.bool,
+  itemsRef: PropTypes.object,
   noItemsMessage: PropTypes.string,
   rightFooter: PropTypes.node,
   selectedItems: PropTypes.arrayOf(PropTypes.exact({
     label: PropTypes.string.isRequired,
     value: PropTypes.string.isRequired,
+    access: PropTypes.object,
     isActive: PropTypes.bool,
     type: PropTypes.string,
-    expression: PropTypes.string
+    expression: PropTypes.string,
+    optionSetId: PropTypes.string
   })),
-  onEDISave: PropTypes.func
+  setCurrentCalculation: PropTypes.func,
+  setInfoDataItem: PropTypes.func,
+  supportsEDI: PropTypes.bool,
+  onEDISave: PropTypes.func,
+  onEditClick: PropTypes.func
 };
 ItemSelector.defaultProps = {
   selectedItems: []

package/build/es/components/DataDimension/{MetricSelector.js → ItemSelector/MetricSelector.js}

@@ -2,9 +2,9 @@ import _JSXStyle from "styled-jsx/style";
 import { SingleSelectField, SingleSelectOption } from '@dhis2/ui';
 import PropTypes from 'prop-types';
 import React from 'react';
-import i18n from '../../locales/index.js';
-import { DATA_SETS_CONSTANTS } from '../../modules/dataSets.js';
-import { DIMENSION_TYPE_ALL } from '../../modules/dataTypes.js';
+import i18n from '../../../locales/index.js';
+import { DATA_SETS_CONSTANTS } from '../../../modules/dataSets.js';
+import { DIMENSION_TYPE_ALL } from '../../../modules/dataTypes.js';
 import styles from './styles/MetricSelector.style.js';
 export const MetricSelector = _ref => {
   let {

package/build/es/components/DataDimension/SelectedEmptyPlaceholder.js

@@ -0,0 +1,9 @@
+import _JSXStyle from "styled-jsx/style";
+import i18n from '@dhis2/d2-i18n';
+import React from 'react';
+import styles from './styles/EmptyPlaceholder.style.js';
+export const SelectedEmptyPlaceholder = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
+  className: `jsx-${styles.__hash}` + " " + "empty-list"
+}, i18n.t('No items selected')), /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: styles.__hash
+}, styles));

package/build/es/components/DataDimension/SourceEmptyPlaceholder.js

@@ -0,0 +1,105 @@
+import _JSXStyle from "styled-jsx/style";
+import i18n from '@dhis2/d2-i18n';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { DIMENSION_TYPE_DATA_ELEMENT, DIMENSION_TYPE_DATA_SET, DIMENSION_TYPE_EVENT_DATA_ITEM, DIMENSION_TYPE_PROGRAM_INDICATOR, DIMENSION_TYPE_INDICATOR, DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM } from '../../modules/dataTypes.js';
+import styles from './styles/EmptyPlaceholder.style.js';
+export const SourceEmptyPlaceholder = _ref => {
+  let {
+    loading,
+    searchTerm,
+    options,
+    allItemsSelectedMessage,
+    noItemsMessage,
+    dataType,
+    dataTest
+  } = _ref;
+  let message = '';
+  if (allItemsSelectedMessage && !loading && options.length && !searchTerm) {
+    message = allItemsSelectedMessage;
+  } else if (!loading && !options.length && !searchTerm) {
+    if (noItemsMessage) {
+      message = noItemsMessage;
+    } else {
+      switch (dataType) {
+        case DIMENSION_TYPE_INDICATOR:
+          message = i18n.t('No indicators found');
+          break;
+        case DIMENSION_TYPE_DATA_ELEMENT:
+          message = i18n.t('No data elements found');
+          break;
+        case DIMENSION_TYPE_DATA_SET:
+          message = i18n.t('No data sets found');
+          break;
+        case DIMENSION_TYPE_EVENT_DATA_ITEM:
+          message = i18n.t('No event data items found');
+          break;
+        case DIMENSION_TYPE_PROGRAM_INDICATOR:
+          message = i18n.t('No program indicators found');
+          break;
+        case DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM:
+          message = i18n.t('No calculations found');
+          break;
+        default:
+          message = i18n.t('No data');
+          break;
+      }
+    }
+  } else if (!loading && !options.length && searchTerm) {
+    switch (dataType) {
+      case DIMENSION_TYPE_INDICATOR:
+        message = i18n.t('No indicators found for "{{- searchTerm}}"', {
+          searchTerm
+        });
+        break;
+      case DIMENSION_TYPE_DATA_ELEMENT:
+        message = i18n.t('No data elements found for "{{- searchTerm}}"', {
+          searchTerm
+        });
+        break;
+      case DIMENSION_TYPE_DATA_SET:
+        message = i18n.t('No data sets found for "{{- searchTerm}}"', {
+          searchTerm
+        });
+        break;
+      case DIMENSION_TYPE_EVENT_DATA_ITEM:
+        message = i18n.t('No event data items found for "{{- searchTerm}}"', {
+          searchTerm
+        });
+        break;
+      case DIMENSION_TYPE_PROGRAM_INDICATOR:
+        message = i18n.t('No program indicators found for "{{- searchTerm}}"', {
+          searchTerm
+        });
+        break;
+      case DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM:
+        message = i18n.t('No calculations found for "{{- searchTerm}}"', {
+          searchTerm
+        });
+        break;
+      default:
+        message = i18n.t('Nothing found for "{{- searchTerm}}"', {
+          searchTerm
+        });
+        break;
+    }
+  }
+  return message && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
+    "data-test": dataTest,
+    className: `jsx-${styles.__hash}` + " " + "empty-list"
+  }, message), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: styles.__hash
+  }, styles));
+};
+SourceEmptyPlaceholder.defaultProps = {
+  options: []
+};
+SourceEmptyPlaceholder.propTypes = {
+  allItemsSelectedMessage: PropTypes.string,
+  dataTest: PropTypes.string,
+  dataType: PropTypes.string,
+  loading: PropTypes.bool,
+  noItemsMessage: PropTypes.string,
+  options: PropTypes.array,
+  searchTerm: PropTypes.string
+};

package/build/es/components/DataDimension/TransferOption.js

@@ -1,8 +1,10 @@
 import _JSXStyle from "styled-jsx/style";
-import { IconEdit16, IconInfo16 } from '@dhis2/ui';
+import i18n from '@dhis2/d2-i18n';
+import { IconEdit16, IconInfo16, IconList16, Tooltip } from '@dhis2/ui';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
+import { DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM, DIMENSION_TYPE_PROGRAM_ATTRIBUTE, DIMENSION_TYPE_PROGRAM_DATA_ELEMENT } from '../../modules/dataTypes.js';
 import styles from './styles/TransferOption.style.js';
 export const TransferOption = _ref => {
   let {
@@ -15,8 +17,10 @@ export const TransferOption = _ref => {
     value,
     icon,
     active,
+    dataItemType,
     dimensionType,
     dataTest,
+    optionSetId,
     itemsRef,
     showingInfo,
     onEditClick,
@@ -54,14 +58,39 @@ export const TransferOption = _ref => {
     className: `jsx-${styles.__hash}` + " " + "icon"
   }, icon), /*#__PURE__*/React.createElement("span", {
     className: `jsx-${styles.__hash}` + " " + "label"
-  }, label), onEditClick && /*#__PURE__*/React.createElement("span", {
+  }, label), dataItemType === DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM &&
+  // XXX check needed?!
+  onEditClick && /*#__PURE__*/React.createElement("span", {
     onClick: e => {
       e.stopPropagation();
       onEditClick();
     },
-    "data-test": `${dataTest}-edit-button`,
+    "data-test": `${dataTest}-edit-calculation-button`,
     className: `jsx-${styles.__hash}` + " " + "edit"
-  }, /*#__PURE__*/React.createElement(IconEdit16, null))), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(IconEdit16, null)), [DIMENSION_TYPE_PROGRAM_ATTRIBUTE, DIMENSION_TYPE_PROGRAM_DATA_ELEMENT].includes(dataItemType) && optionSetId && /*#__PURE__*/React.createElement(Tooltip, {
+    "aria-label": "disabled",
+    content: i18n.t('Click to choose from available options'),
+    openDelay: 500,
+    closeDelay: 0
+  }, _ref2 => {
+    let {
+      ref,
+      onMouseOver,
+      onMouseOut
+    } = _ref2;
+    return /*#__PURE__*/React.createElement("span", {
+      ref: ref,
+      onMouseOver: onMouseOver,
+      onMouseOut: onMouseOut,
+      onClick: e => {
+        e.stopPropagation();
+        onMouseOut();
+        onEditClick();
+      },
+      "data-test": `${dataTest}-option-set-button`,
+      className: `jsx-${styles.__hash}` + " " + "option-set-button"
+    }, /*#__PURE__*/React.createElement(IconList16, null));
+  })), /*#__PURE__*/React.createElement("div", {
     className: `jsx-${styles.__hash}` + " " + (cx('group', 'nowrap', 'typeGroup') || "")
   }, /*#__PURE__*/React.createElement("span", {
     className: `jsx-${styles.__hash}` + " " + "type"
@@ -94,12 +123,14 @@ TransferOption.propTypes = {
   label: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
   active: PropTypes.bool,
+  dataItemType: PropTypes.string,
   dataTest: PropTypes.string,
   dimensionType: PropTypes.string,
   disabled: PropTypes.bool,
   highlighted: PropTypes.bool,
   icon: PropTypes.node,
   itemsRef: PropTypes.object,
+  optionSetId: PropTypes.string,
   selected: PropTypes.bool,
   showingInfo: PropTypes.bool,
   onClick: PropTypes.func,

package/build/es/components/DataDimension/styles/EmptyPlaceholder.style.js

@@ -0,0 +1,4 @@
+import { spacers, colors } from '@dhis2/ui';
+const _defaultExport = [`.empty-list.jsx-3468764855{text-align:center;font-size:14px;line-height:16px;margin:${spacers.dp24} 0 0;color:${colors.grey700};}`];
+_defaultExport.__hash = "3468764855";
+export default _defaultExport;

package/build/es/components/DataDimension/styles/TransferOption.style.js

@@ -1,4 +1,4 @@
 import { colors, spacers, theme } from '@dhis2/ui';
-const _defaultExport = [`.wrapper.jsx-2953719875:last-child{margin-bottom:${spacers.dp4};}`, `.item.jsx-2953719875{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:${colors.white};font-size:14px;line-height:16px;border-bottom:1px solid ${colors.grey300};-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}`, `.item.jsx-2953719875:hover{background:${colors.grey100};}`, ".disabled.jsx-2953719875{opacity:0.3;cursor:not-allowed;}", ".inactive.jsx-2953719875{opacity:0.3;}", ".labelGroup.jsx-2953719875{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin:6px 4px;}", ".typeGroup.jsx-2953719875{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin:0;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".nowrap.jsx-2953719875{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".icon.jsx-2953719875,.label.jsx-2953719875{line-height:18px;}", `.icon.jsx-2953719875{margin-right:${spacers.dp4};display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:text-bottom;}`, `.label.jsx-2953719875{font-size:14px;color:${colors.grey900};}`, `.type.jsx-2953719875{font-size:10px;-webkit-letter-spacing:-0.2px;-moz-letter-spacing:-0.2px;-ms-letter-spacing:-0.2px;letter-spacing:-0.2px;color:${colors.grey600};font-family:ui-monospace,'Cascadia Code','Source Code Pro',Menlo, Consolas,'DejaVu Sans Mono',monospace;font-weight:normal;}`, `.edit.jsx-2953719875,.info.jsx-2953719875{height:16px;margin-top:1px;margin-left:${spacers.dp8};cursor:pointer;color:${colors.grey600};}`, `.info.jsx-2953719875{margin:0 0 0 ${spacers.dp4};height:100%;padding:0 6px;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;}`, `.info.active.jsx-2953719875{background-color:${colors.grey300};color:${colors.grey900};}`, `.highlighted.jsx-2953719875{background:${theme.secondary700};}`, `.highlighted.jsx-2953719875:hover{background:${theme.secondary800};}`, `.highlighted.jsx-2953719875 .label.jsx-2953719875{color:${colors.white};}`, `.highlighted.jsx-2953719875 .type.jsx-2953719875{color:${theme.secondary050};}`, `.highlighted.jsx-2953719875 .info.jsx-2953719875{color:${theme.secondary050};}`, `.highlighted.jsx-2953719875 .icon path{fill:${colors.teal050};}`, `.highlighted.jsx-2953719875 .type.jsx-2953719875{color:${colors.teal050};}`, `.edit.jsx-2953719875:hover,.info.jsx-2953719875:hover{background-color:${colors.grey200};border-radius:0px;}`, `.highlighted.jsx-2953719875 .info.active.jsx-2953719875{background-color:${theme.secondary900};}`, `.highlighted.jsx-2953719875 .edit.jsx-2953719875:hover,.highlighted.jsx-2953719875 .info.jsx-2953719875:hover{background-color:${theme.secondary900};}`];
-_defaultExport.__hash = "2953719875";
+const _defaultExport = [`.wrapper.jsx-1354743119:last-child{margin-bottom:${spacers.dp4};}`, `.item.jsx-1354743119{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;background:${colors.white};font-size:14px;line-height:16px;border-bottom:1px solid ${colors.grey300};-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}`, `.item.jsx-1354743119:hover{background:${colors.grey100};}`, ".disabled.jsx-1354743119{opacity:0.3;cursor:not-allowed;}", ".inactive.jsx-1354743119{opacity:0.3;}", ".labelGroup.jsx-1354743119{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin:5px 4px;}", ".typeGroup.jsx-1354743119{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin:0;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}", ".nowrap.jsx-1354743119{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".icon.jsx-1354743119,.label.jsx-1354743119{line-height:16px;margin:2px 0;}", `.icon.jsx-1354743119{margin-right:${spacers.dp4};display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:text-bottom;}`, `.label.jsx-1354743119{font-size:14px;color:${colors.grey900};}`, `.type.jsx-1354743119{font-size:10px;-webkit-letter-spacing:-0.2px;-moz-letter-spacing:-0.2px;-ms-letter-spacing:-0.2px;letter-spacing:-0.2px;color:${colors.grey600};font-family:ui-monospace,'Cascadia Code','Source Code Pro',Menlo, Consolas,'DejaVu Sans Mono',monospace;font-weight:normal;margin:9px 0 0 0;}`, `.edit.jsx-1354743119,.option-set-button.jsx-1354743119{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;margin-left:${spacers.dp8};cursor:pointer;color:${colors.grey600};background-color:${colors.white};border:1px solid ${colors.grey300};border-radius:3px;padding:0 2px;height:20px;}`, `.option-set-button.jsx-1354743119:hover,.edit.jsx-1354743119:hover{background-color:${colors.grey050};border-color:#c7cbd0;color:${colors.grey900};}`, `.info.jsx-1354743119{margin:0 0 0 2px;padding:${spacers.dp8} ${spacers.dp4} 0 ${spacers.dp4};-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;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;cursor:pointer;color:${colors.grey600};}`, `.info.active.jsx-1354743119{background-color:${colors.grey300};color:${colors.grey900};}`, `.highlighted.jsx-1354743119{background:${theme.secondary700};}`, `.highlighted.jsx-1354743119:hover{background:${theme.secondary800};}`, `.highlighted.jsx-1354743119 .edit.jsx-1354743119,.highlighted.jsx-1354743119 .label.jsx-1354743119{color:${colors.white};}`, `.highlighted.jsx-1354743119 .icon.jsx-1354743119,.highlighted.jsx-1354743119 .option-set-button.jsx-1354743119,.highlighted.jsx-1354743119 .type.jsx-1354743119,.highlighted.jsx-1354743119 .info.jsx-1354743119{color:${theme.secondary050};}`, `.info.jsx-1354743119:hover{background-color:${colors.grey200};border-radius:0px;}`, `.highlighted.jsx-1354743119 .option-set-button.jsx-1354743119,.highlighted.jsx-1354743119 .edit.jsx-1354743119{background-color:transparent;border-color:${theme.secondary900};}`, `.highlighted.jsx-1354743119 .edit.jsx-1354743119:hover,.highlighted.jsx-1354743119 .info.jsx-1354743119:hover,.highlighted.jsx-1354743119 .info.active.jsx-1354743119,.highlighted.jsx-1354743119 .option-set-button.jsx-1354743119:hover{background-color:${theme.secondary900};}`];
+_defaultExport.__hash = "1354743119";
 export default _defaultExport;

package/build/es/components/DimensionsPanel/List/OptionsButton.js

@@ -8,10 +8,10 @@ const OptionsButton = _ref => {
   } = _ref;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
     onClick: onClick,
-    className: "jsx-2728765288"
+    className: "jsx-2074438274"
   }, /*#__PURE__*/React.createElement(IconMore16, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2728765288"
-  }, ["button.jsx-2728765288{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;height:20px;width:20px;padding:0;border:none;background:none;outline:none;cursor:pointer;border-top-right-radius:2px;border-bottom-left-radius:2px;}", "button.jsx-2728765288:hover{background-color:rgba(0,0,0,0.09);}"]));
+    id: "2074438274"
+  }, ["button.jsx-2074438274{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;height:100%;width:20px;padding:0;border:none;background:none;outline:none;cursor:pointer;border-top-right-radius:2px;border-bottom-left-radius:2px;}", "button.jsx-2074438274:hover{background-color:rgba(33,41,52,0.08);}", "button.jsx-2074438274:active{background-color:rgba(33,41,52,0.13);}"]));
 };
 OptionsButton.propTypes = {
   onClick: PropTypes.func