@dhis2/analytics 26.12.2 → 26.13.0

package/build/cjs/components/DataDimension/Info/DataElementInfo.js

@@ -107,7 +107,7 @@ const DataElementInfo = _ref3 => {
     }, displayName);
   }))))), (data === null || data === void 0 ? void 0 : data.dataElement.optionSet) && /*#__PURE__*/_react.default.createElement("tr", {
     className: `jsx-${_InfoPopoverStyle.default.__hash}`
-  }, /*#__PURE__*/_react.default.createElement("td", {
+  }, /*#__PURE__*/_react.default.createElement("th", {
     className: `jsx-${_InfoPopoverStyle.default.__hash}`
   }, _index.default.t('Option set')), /*#__PURE__*/_react.default.createElement("td", {
     className: `jsx-${_InfoPopoverStyle.default.__hash}`
@@ -129,7 +129,7 @@ const DataElementInfo = _ref3 => {
 };
 exports.DataElementInfo = DataElementInfo;
 DataElementInfo.propTypes = {
-  displayNameProp: _propTypes.default.string,
-  id: _propTypes.default.string,
-  type: _propTypes.default.string
+  displayNameProp: _propTypes.default.string.isRequired,
+  id: _propTypes.default.string.isRequired,
+  type: _propTypes.default.string.isRequired
 };

package/build/cjs/components/DataDimension/Info/DataElementOperandInfo.js

@@ -68,7 +68,7 @@ const DataElementOperandInfo = _ref2 => {
       dataElementOperand
     });
     setLoading(false);
-  }, [displayNameProp, engine, id]);
+  }, [apiVersion, baseUrl, displayNameProp, engine, id]);
   (0, _react.useEffect)(() => {
     fetchData();
   }, [fetchData]);
@@ -131,7 +131,7 @@ const DataElementOperandInfo = _ref2 => {
     }, displayName);
   }))))), (data === null || data === void 0 ? void 0 : data.dataElementOperand.dataElement.optionSet) && /*#__PURE__*/_react.default.createElement("tr", {
     className: `jsx-${_InfoPopoverStyle.default.__hash}`
-  }, /*#__PURE__*/_react.default.createElement("td", {
+  }, /*#__PURE__*/_react.default.createElement("th", {
     className: `jsx-${_InfoPopoverStyle.default.__hash}`
   }, _index.default.t('Option set')), /*#__PURE__*/_react.default.createElement("td", {
     className: `jsx-${_InfoPopoverStyle.default.__hash}`
@@ -182,7 +182,7 @@ const DataElementOperandInfo = _ref2 => {
 };
 exports.DataElementOperandInfo = DataElementOperandInfo;
 DataElementOperandInfo.propTypes = {
-  displayNameProp: _propTypes.default.string,
-  id: _propTypes.default.string,
-  type: _propTypes.default.string
+  displayNameProp: _propTypes.default.string.isRequired,
+  id: _propTypes.default.string.isRequired,
+  type: _propTypes.default.string.isRequired
 };

package/build/cjs/components/DataDimension/Info/DataSetInfo.js

@@ -109,7 +109,7 @@ const DataSetInfo = _ref3 => {
 };
 exports.DataSetInfo = DataSetInfo;
 DataSetInfo.propTypes = {
-  displayNameProp: _propTypes.default.string,
-  id: _propTypes.default.string,
-  type: _propTypes.default.string
+  displayNameProp: _propTypes.default.string.isRequired,
+  id: _propTypes.default.string.isRequired,
+  type: _propTypes.default.string.isRequired
 };

package/build/cjs/components/DataDimension/Info/EventDataItemInfo.js

@@ -28,7 +28,7 @@ const programDataElementQuery = {
         displayNameProp
       } = _ref2;
       return {
-        fields: `${(0, _InfoTable.getCommonFields)(displayNameProp)},aggregationType,dimensionItemType,legendSets[id,displayName],optionsSet[displayName],valueType,zeroIsSignificant`
+        fields: `${(0, _InfoTable.getCommonFields)(displayNameProp)},aggregationType,dimensionItemType,legendSets[id,displayName],optionSet[displayName],valueType,zeroIsSignificant`
       };
     }
   }
@@ -47,7 +47,7 @@ const programAttributeQuery = {
         displayNameProp
       } = _ref4;
       return {
-        fields: `${(0, _InfoTable.getCommonFields)(displayNameProp)},aggregationType,dimensionItemType,legendSets[id,displayName],optionsSet[displayName],valueType,zeroIsSignificant`
+        fields: `${(0, _InfoTable.getCommonFields)(displayNameProp)},aggregationType,dimensionItemType,legendSets[id,displayName],optionSet[displayName],valueType,zeroIsSignificant`
       };
     }
   }
@@ -88,7 +88,7 @@ const EventDataItemInfo = _ref5 => {
     className: `jsx-${_InfoPopoverStyle.default.__hash}`
   }, _valueTypes.valueTypeDisplayNames[data === null || data === void 0 ? void 0 : data.valueType])), (data === null || data === void 0 ? void 0 : data.optionSet) && /*#__PURE__*/_react.default.createElement("tr", {
     className: `jsx-${_InfoPopoverStyle.default.__hash}`
-  }, /*#__PURE__*/_react.default.createElement("td", {
+  }, /*#__PURE__*/_react.default.createElement("th", {
     className: `jsx-${_InfoPopoverStyle.default.__hash}`
   }, _index.default.t('Option set')), /*#__PURE__*/_react.default.createElement("td", {
     className: `jsx-${_InfoPopoverStyle.default.__hash}`
@@ -105,7 +105,7 @@ const EventDataItemInfo = _ref5 => {
 };
 exports.EventDataItemInfo = EventDataItemInfo;
 EventDataItemInfo.propTypes = {
-  displayNameProp: _propTypes.default.string,
-  id: _propTypes.default.string,
-  type: _propTypes.default.string
+  displayNameProp: _propTypes.default.string.isRequired,
+  id: _propTypes.default.string.isRequired,
+  type: _propTypes.default.string.isRequired
 };

package/build/cjs/components/DataDimension/Info/IndicatorInfo.js

@@ -173,7 +173,7 @@ const IndicatorInfo = _ref3 => {
 };
 exports.IndicatorInfo = IndicatorInfo;
 IndicatorInfo.propTypes = {
-  displayNameProp: _propTypes.default.string,
-  id: _propTypes.default.string,
-  type: _propTypes.default.string
+  displayNameProp: _propTypes.default.string.isRequired,
+  id: _propTypes.default.string.isRequired,
+  type: _propTypes.default.string.isRequired
 };

package/build/cjs/components/DataDimension/Info/InfoPopover.js

@@ -16,6 +16,7 @@ var _DataElementOperandInfo = require("./DataElementOperandInfo.js");
 var _DataSetInfo = require("./DataSetInfo.js");
 var _EventDataItemInfo = require("./EventDataItemInfo.js");
 var _IndicatorInfo = require("./IndicatorInfo.js");
+var _OptionInfo = require("./OptionInfo.js");
 var _ProgramIndicatorInfo = require("./ProgramIndicatorInfo.js");
 var _InfoPopoverStyle = _interopRequireDefault(require("./styles/InfoPopover.style.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -44,15 +45,18 @@ const InfoPopover = _ref => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     "data-test": `${dataTest}-table`,
     className: `jsx-${_InfoPopoverStyle.default.__hash}` + " " + "popover"
-  }, type === _dataTypes.DIMENSION_TYPE_DATA_ELEMENT && /*#__PURE__*/_react.default.createElement(_DataElementInfo.DataElementInfo, infoProps), type === _dataTypes.DIMENSION_TYPE_DATA_ELEMENT_OPERAND && /*#__PURE__*/_react.default.createElement(_DataElementOperandInfo.DataElementOperandInfo, infoProps), type === _dataTypes.DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM && /*#__PURE__*/_react.default.createElement(_CalculationInfo.CalculationInfo, infoProps), type === _dataSets.REPORTING_RATE /* TODO: verify this! */ && /*#__PURE__*/_react.default.createElement(_DataSetInfo.DataSetInfo, infoProps), type === _dataTypes.DIMENSION_TYPE_INDICATOR && /*#__PURE__*/_react.default.createElement(_IndicatorInfo.IndicatorInfo, infoProps), [_dataTypes.DIMENSION_TYPE_PROGRAM_ATTRIBUTE, _dataTypes.DIMENSION_TYPE_PROGRAM_DATA_ELEMENT].includes(type) && /*#__PURE__*/_react.default.createElement(_EventDataItemInfo.EventDataItemInfo, infoProps), type === _dataTypes.DIMENSION_TYPE_PROGRAM_INDICATOR && /*#__PURE__*/_react.default.createElement(_ProgramIndicatorInfo.ProgramIndicatorInfo, infoProps))), /*#__PURE__*/_react.default.createElement(_style.default, {
+  }, type === _dataTypes.DIMENSION_TYPE_DATA_ELEMENT && /*#__PURE__*/_react.default.createElement(_DataElementInfo.DataElementInfo, infoProps), type === _dataTypes.DIMENSION_TYPE_DATA_ELEMENT_OPERAND && /*#__PURE__*/_react.default.createElement(_DataElementOperandInfo.DataElementOperandInfo, infoProps), type === _dataTypes.DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM && /*#__PURE__*/_react.default.createElement(_CalculationInfo.CalculationInfo, infoProps), type === _dataSets.REPORTING_RATE /* TODO: verify this! */ && /*#__PURE__*/_react.default.createElement(_DataSetInfo.DataSetInfo, infoProps), type === _dataTypes.DIMENSION_TYPE_INDICATOR && /*#__PURE__*/_react.default.createElement(_IndicatorInfo.IndicatorInfo, infoProps), [_dataTypes.DIMENSION_TYPE_PROGRAM_ATTRIBUTE, _dataTypes.DIMENSION_TYPE_PROGRAM_DATA_ELEMENT].includes(type) && /*#__PURE__*/_react.default.createElement(_EventDataItemInfo.EventDataItemInfo, infoProps), type === _dataTypes.DIMENSION_TYPE_PROGRAM_INDICATOR && /*#__PURE__*/_react.default.createElement(_ProgramIndicatorInfo.ProgramIndicatorInfo, infoProps), [_dataTypes.DIMENSION_TYPE_PROGRAM_DATA_ELEMENT_OPTION, _dataTypes.DIMENSION_TYPE_PROGRAM_ATTRIBUTE_OPTION].includes(type) && /*#__PURE__*/_react.default.createElement(_OptionInfo.OptionInfo, infoProps))), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: _InfoPopoverStyle.default.__hash
   }, _InfoPopoverStyle.default));
 };
 exports.InfoPopover = InfoPopover;
 InfoPopover.propTypes = {
+  displayNameProp: _propTypes.default.string.isRequired,
+  item: _propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    type: _propTypes.default.string.isRequired
+  }).isRequired,
   dataTest: _propTypes.default.string,
-  displayNameProp: _propTypes.default.string,
-  item: _propTypes.default.object,
   reference: _propTypes.default.object,
   onClose: _propTypes.default.func
 };

package/build/cjs/components/DataDimension/Info/InfoTable.js

@@ -186,7 +186,7 @@ const InfoTable = _ref4 => {
     className: `jsx-${_InfoPopoverStyle.default.__hash}`
   }, _index.default.t('Created date')), /*#__PURE__*/_react.default.createElement("td", {
     className: `jsx-${_InfoPopoverStyle.default.__hash}`
-  }, `${(0, _moment.default)(fromServerDate(data.created)).fromNow()} (${(0, _moment.default)(fromServerDate(data.created)).format('YYYY-MM-DD')})`)), /*#__PURE__*/_react.default.createElement("tr", {
+  }, `${(0, _moment.default)(fromServerDate(data.created)).fromNow()} (${(0, _moment.default)(fromServerDate(data.created)).format('YYYY-MM-DD')})`)), data.createdBy && /*#__PURE__*/_react.default.createElement("tr", {
     className: `jsx-${_InfoPopoverStyle.default.__hash}`
   }, /*#__PURE__*/_react.default.createElement("th", {
     className: `jsx-${_InfoPopoverStyle.default.__hash}`

package/build/cjs/components/DataDimension/Info/OptionInfo.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OptionInfo = void 0;
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+var _appRuntime = require("@dhis2/app-runtime");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _index = _interopRequireDefault(require("../../../locales/index.js"));
+var _InfoTable = require("./InfoTable.js");
+var _InfoPopoverStyle = _interopRequireDefault(require("./styles/InfoPopover.style.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const optionQuery = {
+  option: {
+    resource: 'options',
+    id: _ref => {
+      let {
+        id
+      } = _ref;
+      return id;
+    },
+    params: _ref2 => {
+      let {
+        displayNameProp
+      } = _ref2;
+      return {
+        fields: `${(0, _InfoTable.getCommonFields)(displayNameProp)},optionSet[displayName]`
+      };
+    }
+  }
+};
+const OptionInfo = _ref3 => {
+  let {
+    type,
+    id,
+    displayNameProp
+  } = _ref3;
+  const {
+    loading,
+    error,
+    data
+  } = (0, _appRuntime.useDataQuery)(optionQuery, {
+    variables: {
+      id: id.split('.').reverse()[0],
+      displayNameProp
+    }
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_InfoTable.InfoTable, {
+    dataType: type,
+    data: data === null || data === void 0 ? void 0 : data.option,
+    loading: loading,
+    error: error
+  }, (data === null || data === void 0 ? void 0 : data.option.optionSet) && /*#__PURE__*/_react.default.createElement("tr", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("th", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, _index.default.t('Option set')), /*#__PURE__*/_react.default.createElement("td", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, data.option.optionSet.displayName))), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: _InfoPopoverStyle.default.__hash
+  }, _InfoPopoverStyle.default));
+};
+exports.OptionInfo = OptionInfo;
+OptionInfo.propTypes = {
+  displayNameProp: _propTypes.default.string.isRequired,
+  id: _propTypes.default.string.isRequired,
+  type: _propTypes.default.string.isRequired
+};

package/build/cjs/components/DataDimension/Info/ProgramIndicatorInfo.js

@@ -47,6 +47,9 @@ const ProgramIndicatorInfo = _ref3 => {
   const [getHumanReadableExpression] = (0, _appRuntime.useDataMutation)(_expression.validateProgramIndicatorExpressionMutation, {
     onError: setError
   });
+  const [getHumanReadableFilter] = (0, _appRuntime.useDataMutation)(_expression.validateProgramIndicatorFilterMutation, {
+    onError: setError
+  });
   const fetchData = (0, _react.useCallback)(async () => {
     const {
       programIndicator
@@ -66,8 +69,8 @@ const ProgramIndicatorInfo = _ref3 => {
       }
     }
     if (programIndicator.filter) {
-      const result = await getHumanReadableExpression({
-        expression: programIndicator.filter
+      const result = await getHumanReadableFilter({
+        filter: programIndicator.filter
       });
       if (result) {
         programIndicator.humanReadableFilter = result;
@@ -83,7 +86,7 @@ const ProgramIndicatorInfo = _ref3 => {
       programIndicator
     });
     setLoading(false);
-  }, [displayNameProp, engine, id, getHumanReadableExpression]);
+  }, [displayNameProp, engine, id, getHumanReadableExpression, getHumanReadableFilter]);
   (0, _react.useEffect)(() => {
     fetchData();
   }, [fetchData]);
@@ -185,7 +188,7 @@ const ProgramIndicatorInfo = _ref3 => {
 };
 exports.ProgramIndicatorInfo = ProgramIndicatorInfo;
 ProgramIndicatorInfo.propTypes = {
-  displayNameProp: _propTypes.default.string,
-  id: _propTypes.default.string,
-  type: _propTypes.default.string
+  displayNameProp: _propTypes.default.string.isRequired,
+  id: _propTypes.default.string.isRequired,
+  type: _propTypes.default.string.isRequired
 };

package/build/cjs/components/DataDimension/ItemOptionsSelector/ItemOptionsSelector.js

@@ -0,0 +1,257 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ItemOptionsSelector = void 0;
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+var _appRuntime = require("@dhis2/app-runtime");
+var _ui = require("@dhis2/ui");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _dimensions = require("../../../api/dimensions.js");
+var _index = _interopRequireDefault(require("../../../locales/index.js"));
+var _dataTypes = require("../../../modules/dataTypes.js");
+var _dimensionListItem = require("../../../modules/dimensionListItem.js");
+var _dimensionSelectorHelper = require("../../../modules/dimensionSelectorHelper.js");
+var _utils = require("../../../modules/utils.js");
+var _DimensionSelectorStyle = _interopRequireDefault(require("../../styles/DimensionSelector.style.js"));
+var _SelectedEmptyPlaceholder = require("../SelectedEmptyPlaceholder.js");
+var _SourceEmptyPlaceholder = require("../SourceEmptyPlaceholder.js");
+var _TransferOption = require("../TransferOption.js");
+var _ItemOptionSelectorStyle = _interopRequireDefault(require("./styles/ItemOptionSelector.style.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; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+const formatOptionsFilters = (dataItemType, dataItemId) => {
+  const optionsFilters = {
+    dataItemId
+  };
+  if (dataItemType === _dataTypes.DIMENSION_TYPE_PROGRAM_DATA_ELEMENT) {
+    optionsFilters.dataType = _dataTypes.DIMENSION_TYPE_PROGRAM_DATA_ELEMENT_OPTION;
+  } else if (dataItemType === _dataTypes.DIMENSION_TYPE_PROGRAM_ATTRIBUTE) {
+    optionsFilters.dataType = _dataTypes.DIMENSION_TYPE_PROGRAM_ATTRIBUTE_OPTION;
+  }
+  return optionsFilters;
+};
+const ItemOptionsSelector = _ref => {
+  var _state$filter;
+  let {
+    id: dataItemId,
+    name: dataItemName,
+    type: dataItemType,
+    selectedItems,
+    infoDataItem,
+    setInfoDataItem,
+    displayNameProp,
+    itemsRef,
+    onEditClick,
+    onSelect,
+    onClose,
+    dataTest
+  } = _ref;
+  const [state, setState] = (0, _react.useState)({
+    searchTerm: '',
+    filter: formatOptionsFilters(dataItemType, dataItemId),
+    options: [],
+    loading: true,
+    nextPage: 1
+  });
+  const debouncedSearchTerm = (0, _utils.useDebounce)(state.searchTerm, 500);
+  const dataEngine = (0, _appRuntime.useDataEngine)();
+  const setSearchTerm = searchTerm => setState(state => ({
+    ...state,
+    searchTerm
+  }));
+  const fetchItems = async page => {
+    var _result$dimensionItem;
+    setState(state => ({
+      ...state,
+      nextPage: page === 1 ? 1 : state.nextPage,
+      loading: true
+    }));
+    const result = await (0, _dimensions.apiFetchOptions)({
+      dataEngine,
+      nameProp: displayNameProp,
+      page,
+      filter: state.filter,
+      searchTerm: state.searchTerm
+    });
+    const newOptions = [];
+    (_result$dimensionItem = result.dimensionItems) === null || _result$dimensionItem === void 0 ? void 0 : _result$dimensionItem.forEach(item => {
+      newOptions.push({
+        label: item.name,
+        value: item.id,
+        disabled: item.disabled,
+        // XXX is this returned by the api?!
+        type: item.dimensionItemType,
+        expression: item.expression,
+        optionSetId: item.optionSetId
+      });
+    });
+    setState(state => ({
+      ...state,
+      loading: false,
+      options: page > 1 ? [...state.options, ...newOptions] : newOptions,
+      nextPage: result.nextPage
+    }));
+    /*  The following handles a very specific edge-case where the user can select all items from a
+        page and then reopen the modal. Usually Transfer triggers the onEndReached when the end of
+        the page is reached (scrolling down) or if too few items are on the left side (e.g. selecting
+        49 items from page 1, leaving only 1 item on the left side). However, due to the way Transfer
+        works, if 0 items are available, more items are fetched, but all items are already selected
+        (leaving 0 items on the left side still), the onReachedEnd won't trigger. Hence the code below:
+        IF there is a next page AND some options were just fetched AND you have the same or more
+        selected items than fetched items AND all fetched items are already selected -> fetch more!
+    */
+    if (result.nextPage && newOptions.length && selectedItems.length >= newOptions.length && newOptions.every(newOption => selectedItems.find(selectedItem => selectedItem.value === newOption.value))) {
+      fetchItems(result.nextPage);
+    }
+  };
+  (0, _react.useEffect)(() => {
+    setState(state => ({
+      ...state,
+      filter: {
+        ...state.filter,
+        ...formatOptionsFilters(dataItemType, dataItemId)
+      }
+    }));
+  }, [dataItemId, dataItemType]);
+  (0, _utils.useDidUpdateEffect)(() => {
+    fetchItems(1);
+  }, [debouncedSearchTerm, (_state$filter = state.filter) === null || _state$filter === void 0 ? void 0 : _state$filter.dataItemId]);
+  const onChange = selectedIds => {
+    const newSelectedItems = selectedIds.map(id => {
+      const matchingItem = [...state.options, ...selectedItems].find(item => item.value === id);
+      return {
+        value: id,
+        label: matchingItem.label,
+        type: matchingItem.type,
+        optionSetId: matchingItem.optionSetId,
+        ...(matchingItem.expression ? {
+          expression: matchingItem.expression
+        } : {})
+      };
+    });
+    onSelect(newSelectedItems);
+  };
+  const onEndReached = () => {
+    if (state.nextPage) {
+      fetchItems(state.nextPage);
+    }
+  };
+  const isActive = value => {
+    const item = selectedItems.find(item => item.value === value);
+    return !item || item.isActive;
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: `jsx-${_DimensionSelectorStyle.default.__hash} jsx-${_ItemOptionSelectorStyle.default.__hash}` + " " + "transfer-container"
+  }, /*#__PURE__*/_react.default.createElement(_ui.Transfer, {
+    onChange: _ref2 => {
+      let {
+        selected
+      } = _ref2;
+      return onChange(selected);
+    },
+    selected: selectedItems.map(item => item.value),
+    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.default.createElement(_SourceEmptyPlaceholder.SourceEmptyPlaceholder, {
+      loading: state.loading,
+      searchTerm: debouncedSearchTerm,
+      options: state.options,
+      allItemsSelectedMessage: state.options.every(sourceItem => Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.find(selectedItem => sourceItem.value === selectedItem.value))) && !state.nextPage ? _index.default.t('All available options are already selected') : '',
+      noItemsMessage: _index.default.t('No available options for this item'),
+      dataType: state.filter.dataType,
+      dataTest: `${dataTest}-empty-source`
+    }),
+    onEndReached: onEndReached,
+    filterable: true,
+    filterPlaceholder: _index.default.t('Search by option name'),
+    filterablePicked: false,
+    searchTerm: state.searchTerm,
+    onFilterChange: _ref3 => {
+      let {
+        value
+      } = _ref3;
+      return setSearchTerm(value);
+    },
+    leftHeader: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: `jsx-${_DimensionSelectorStyle.default.__hash} jsx-${_ItemOptionSelectorStyle.default.__hash}` + " " + "option-set-back-button"
+    }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+      onClick: onClose,
+      icon: /*#__PURE__*/_react.default.createElement(_ui.IconArrowLeft16, null),
+      small: true,
+      dataTest: `${dataTest}-option-set-back-button`
+    }, _index.default.t('Back to all items'))), /*#__PURE__*/_react.default.createElement("div", {
+      className: `jsx-${_DimensionSelectorStyle.default.__hash} jsx-${_ItemOptionSelectorStyle.default.__hash}` + " " + "option-set-name"
+    }, dataItemName, ": ", _index.default.t('Options'))),
+    rightHeader: /*#__PURE__*/_react.default.createElement("p", {
+      className: `jsx-${_DimensionSelectorStyle.default.__hash} jsx-${_ItemOptionSelectorStyle.default.__hash}` + " " + "rightHeader"
+    }, _index.default.t('Selected items')),
+    enableOrderChange: true,
+    height: _dimensionSelectorHelper.TRANSFER_HEIGHT,
+    optionsWidth: _dimensionSelectorHelper.TRANSFER_OPTIONS_WIDTH,
+    selectedWidth: _dimensionSelectorHelper.TRANSFER_SELECTED_WIDTH,
+    selectedEmptyComponent: /*#__PURE__*/_react.default.createElement(_SelectedEmptyPlaceholder.SelectedEmptyPlaceholder, null),
+    renderOption: props => {
+      return /*#__PURE__*/_react.default.createElement(_TransferOption.TransferOption
+      /* eslint-disable react/prop-types */, _extends({}, props, {
+        active: isActive(props.value),
+        showingInfo: (infoDataItem === null || infoDataItem === void 0 ? void 0 : infoDataItem.id) === props.value,
+        icon: (0, _dimensionListItem.getIcon)(props.type),
+        dataItemType: props.type,
+        dimensionType: (0, _dimensionListItem.getDimensionType)({
+          type: props.type,
+          expression: props.expression
+        }),
+        dataTest: `${dataTest}-transfer-option`,
+        itemsRef: itemsRef,
+        onEditClick: () => onEditClick(props),
+        onInfoClick: () => setInfoDataItem({
+          id: props.value,
+          type: props.type
+        })
+        /* eslint-enable react/prop-types */
+      }));
+    },
+    dataTest: `${dataTest}-option-view-mode-transfer`
+  }), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: _DimensionSelectorStyle.default.__hash
+  }, _DimensionSelectorStyle.default), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: _ItemOptionSelectorStyle.default.__hash
+  }, _ItemOptionSelectorStyle.default));
+};
+exports.ItemOptionsSelector = ItemOptionsSelector;
+ItemOptionsSelector.propTypes = {
+  displayNameProp: _propTypes.default.string.isRequired,
+  id: _propTypes.default.string.isRequired,
+  name: _propTypes.default.string.isRequired,
+  type: _propTypes.default.string.isRequired,
+  onClose: _propTypes.default.func.isRequired,
+  onSelect: _propTypes.default.func.isRequired,
+  dataTest: _propTypes.default.string,
+  infoDataItem: _propTypes.default.object,
+  itemsRef: _propTypes.default.object,
+  selectedItems: _propTypes.default.arrayOf(_propTypes.default.exact({
+    label: _propTypes.default.string.isRequired,
+    value: _propTypes.default.string.isRequired,
+    access: _propTypes.default.object,
+    isActive: _propTypes.default.bool,
+    type: _propTypes.default.string,
+    expression: _propTypes.default.string,
+    optionSetId: _propTypes.default.string
+  })),
+  setInfoDataItem: _propTypes.default.func,
+  onEditClick: _propTypes.default.func
+};
+ItemOptionsSelector.defaultProps = {
+  selectedItems: []
+};

package/build/cjs/components/DataDimension/ItemOptionsSelector/styles/ItemOptionSelector.style.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ui = require("@dhis2/ui");
+const _defaultExport = [`.option-set-back-button.jsx-3422805239{margin:0 -${_ui.spacers.dp8};padding:${_ui.spacers.dp8};background:${_ui.colors.grey200};border-bottom:1px solid ${_ui.colors.grey400};}`, `.option-set-name.jsx-3422805239{font-size:14px;font-weight:500;padding:${_ui.spacers.dp12} 0;}`];
+_defaultExport.__hash = "3422805239";
+var _default = exports.default = _defaultExport;

package/build/cjs/components/DataDimension/{DataTypeSelector.js → ItemSelector/DataTypeSelector.js}

@@ -8,10 +8,10 @@ var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _ui = require("@dhis2/ui");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
-var _index = _interopRequireDefault(require("../../locales/index.js"));
-var _dataTypes = require("../../modules/dataTypes.js");
-var _visTypes = require("../../modules/visTypes.js");
-var _DataDimension = require("./DataDimension.js");
+var _index = _interopRequireDefault(require("../../../locales/index.js"));
+var _dataTypes = require("../../../modules/dataTypes.js");
+var _visTypes = require("../../../modules/visTypes.js");
+var _DataDimension = require("../DataDimension.js");
 var _DataTypeSelectorStyle = _interopRequireDefault(require("./styles/DataTypeSelector.style.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const DataTypeSelector = _ref => {

package/build/cjs/components/DataDimension/{DetailSelector.js → ItemSelector/DetailSelector.js}

@@ -8,8 +8,8 @@ var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _ui = require("@dhis2/ui");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
-var _index = _interopRequireDefault(require("../../locales/index.js"));
-var _dataTypes = require("../../modules/dataTypes.js");
+var _index = _interopRequireDefault(require("../../../locales/index.js"));
+var _dataTypes = require("../../../modules/dataTypes.js");
 var _DetailSelectorStyle = _interopRequireDefault(require("./styles/DetailSelector.style.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const getOptions = () => ({

package/build/cjs/components/DataDimension/{GroupSelector.js → ItemSelector/GroupSelector.js}

@@ -9,9 +9,9 @@ var _appRuntime = require("@dhis2/app-runtime");
 var _ui = require("@dhis2/ui");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
-var _dimensions = require("../../api/dimensions.js");
-var _index = _interopRequireDefault(require("../../locales/index.js"));
-var _dataTypes = require("../../modules/dataTypes.js");
+var _dimensions = require("../../../api/dimensions.js");
+var _index = _interopRequireDefault(require("../../../locales/index.js"));
+var _dataTypes = require("../../../modules/dataTypes.js");
 var _DetailSelector = require("./DetailSelector.js");
 var _MetricSelector = require("./MetricSelector.js");
 var _GroupSelectorStyle = _interopRequireDefault(require("./styles/GroupSelector.style.js"));