@dhis2/analytics 26.12.2 → 26.13.0

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

@@ -59,7 +59,7 @@ export const DataElementOperandInfo = _ref2 => {
       dataElementOperand
     });
     setLoading(false);
-  }, [displayNameProp, engine, id]);
+  }, [apiVersion, baseUrl, displayNameProp, engine, id]);
   useEffect(() => {
     fetchData();
   }, [fetchData]);
@@ -122,7 +122,7 @@ export const DataElementOperandInfo = _ref2 => {
     }, displayName);
   }))))), (data === null || data === void 0 ? void 0 : data.dataElementOperand.dataElement.optionSet) && /*#__PURE__*/React.createElement("tr", {
     className: `jsx-${styles.__hash}`
-  }, /*#__PURE__*/React.createElement("td", {
+  }, /*#__PURE__*/React.createElement("th", {
     className: `jsx-${styles.__hash}`
   }, i18n.t('Option set')), /*#__PURE__*/React.createElement("td", {
     className: `jsx-${styles.__hash}`
@@ -172,7 +172,7 @@ export const DataElementOperandInfo = _ref2 => {
   }, styles));
 };
 DataElementOperandInfo.propTypes = {
-  displayNameProp: PropTypes.string,
-  id: PropTypes.string,
-  type: PropTypes.string
+  displayNameProp: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired
 };

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

@@ -101,7 +101,7 @@ export const DataSetInfo = _ref3 => {
   }, styles));
 };
 DataSetInfo.propTypes = {
-  displayNameProp: PropTypes.string,
-  id: PropTypes.string,
-  type: PropTypes.string
+  displayNameProp: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired
 };

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

@@ -21,7 +21,7 @@ const programDataElementQuery = {
         displayNameProp
       } = _ref2;
       return {
-        fields: `${getCommonFields(displayNameProp)},aggregationType,dimensionItemType,legendSets[id,displayName],optionsSet[displayName],valueType,zeroIsSignificant`
+        fields: `${getCommonFields(displayNameProp)},aggregationType,dimensionItemType,legendSets[id,displayName],optionSet[displayName],valueType,zeroIsSignificant`
       };
     }
   }
@@ -40,7 +40,7 @@ const programAttributeQuery = {
         displayNameProp
       } = _ref4;
       return {
-        fields: `${getCommonFields(displayNameProp)},aggregationType,dimensionItemType,legendSets[id,displayName],optionsSet[displayName],valueType,zeroIsSignificant`
+        fields: `${getCommonFields(displayNameProp)},aggregationType,dimensionItemType,legendSets[id,displayName],optionSet[displayName],valueType,zeroIsSignificant`
       };
     }
   }
@@ -81,7 +81,7 @@ export const EventDataItemInfo = _ref5 => {
     className: `jsx-${styles.__hash}`
   }, valueTypeDisplayNames[data === null || data === void 0 ? void 0 : data.valueType])), (data === null || data === void 0 ? void 0 : data.optionSet) && /*#__PURE__*/React.createElement("tr", {
     className: `jsx-${styles.__hash}`
-  }, /*#__PURE__*/React.createElement("td", {
+  }, /*#__PURE__*/React.createElement("th", {
     className: `jsx-${styles.__hash}`
   }, i18n.t('Option set')), /*#__PURE__*/React.createElement("td", {
     className: `jsx-${styles.__hash}`
@@ -97,7 +97,7 @@ export const EventDataItemInfo = _ref5 => {
   return type === DIMENSION_TYPE_PROGRAM_DATA_ELEMENT ? renderInfoTable(data === null || data === void 0 ? void 0 : data.programDataElement) : renderInfoTable(data === null || data === void 0 ? void 0 : data.programAttribute);
 };
 EventDataItemInfo.propTypes = {
-  displayNameProp: PropTypes.string,
-  id: PropTypes.string,
-  type: PropTypes.string
+  displayNameProp: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired
 };

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

@@ -163,7 +163,7 @@ export const IndicatorInfo = _ref3 => {
   }, styles));
 };
 IndicatorInfo.propTypes = {
-  displayNameProp: PropTypes.string,
-  id: PropTypes.string,
-  type: PropTypes.string
+  displayNameProp: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired
 };

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

@@ -7,15 +7,16 @@ import { DIMENSION_TYPE_DATA_ELEMENT, DIMENSION_TYPE_DATA_ELEMENT_OPERAND, DIMEN
 // calculation
 DIMENSION_TYPE_INDICATOR, DIMENSION_TYPE_PROGRAM_ATTRIBUTE,
 // event data items
-DIMENSION_TYPE_PROGRAM_DATA_ELEMENT,
+DIMENSION_TYPE_PROGRAM_ATTRIBUTE_OPTION, DIMENSION_TYPE_PROGRAM_DATA_ELEMENT,
 // event data items
-DIMENSION_TYPE_PROGRAM_INDICATOR } from '../../../modules/dataTypes.js';
+DIMENSION_TYPE_PROGRAM_DATA_ELEMENT_OPTION, DIMENSION_TYPE_PROGRAM_INDICATOR } from '../../../modules/dataTypes.js';
 import { CalculationInfo } from './CalculationInfo.js';
 import { DataElementInfo } from './DataElementInfo.js';
 import { DataElementOperandInfo } from './DataElementOperandInfo.js';
 import { DataSetInfo } from './DataSetInfo.js';
 import { EventDataItemInfo } from './EventDataItemInfo.js';
 import { IndicatorInfo } from './IndicatorInfo.js';
+import { OptionInfo } from './OptionInfo.js';
 import { ProgramIndicatorInfo } from './ProgramIndicatorInfo.js';
 import styles from './styles/InfoPopover.style.js';
 export const InfoPopover = _ref => {
@@ -41,14 +42,17 @@ export const InfoPopover = _ref => {
   }, /*#__PURE__*/React.createElement("div", {
     "data-test": `${dataTest}-table`,
     className: `jsx-${styles.__hash}` + " " + "popover"
-  }, type === DIMENSION_TYPE_DATA_ELEMENT && /*#__PURE__*/React.createElement(DataElementInfo, infoProps), type === DIMENSION_TYPE_DATA_ELEMENT_OPERAND && /*#__PURE__*/React.createElement(DataElementOperandInfo, infoProps), type === DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM && /*#__PURE__*/React.createElement(CalculationInfo, infoProps), type === REPORTING_RATE /* TODO: verify this! */ && /*#__PURE__*/React.createElement(DataSetInfo, infoProps), type === DIMENSION_TYPE_INDICATOR && /*#__PURE__*/React.createElement(IndicatorInfo, infoProps), [DIMENSION_TYPE_PROGRAM_ATTRIBUTE, DIMENSION_TYPE_PROGRAM_DATA_ELEMENT].includes(type) && /*#__PURE__*/React.createElement(EventDataItemInfo, infoProps), type === DIMENSION_TYPE_PROGRAM_INDICATOR && /*#__PURE__*/React.createElement(ProgramIndicatorInfo, infoProps))), /*#__PURE__*/React.createElement(_JSXStyle, {
+  }, type === DIMENSION_TYPE_DATA_ELEMENT && /*#__PURE__*/React.createElement(DataElementInfo, infoProps), type === DIMENSION_TYPE_DATA_ELEMENT_OPERAND && /*#__PURE__*/React.createElement(DataElementOperandInfo, infoProps), type === DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM && /*#__PURE__*/React.createElement(CalculationInfo, infoProps), type === REPORTING_RATE /* TODO: verify this! */ && /*#__PURE__*/React.createElement(DataSetInfo, infoProps), type === DIMENSION_TYPE_INDICATOR && /*#__PURE__*/React.createElement(IndicatorInfo, infoProps), [DIMENSION_TYPE_PROGRAM_ATTRIBUTE, DIMENSION_TYPE_PROGRAM_DATA_ELEMENT].includes(type) && /*#__PURE__*/React.createElement(EventDataItemInfo, infoProps), type === DIMENSION_TYPE_PROGRAM_INDICATOR && /*#__PURE__*/React.createElement(ProgramIndicatorInfo, infoProps), [DIMENSION_TYPE_PROGRAM_DATA_ELEMENT_OPTION, DIMENSION_TYPE_PROGRAM_ATTRIBUTE_OPTION].includes(type) && /*#__PURE__*/React.createElement(OptionInfo, infoProps))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: styles.__hash
   }, styles));
 };
 InfoPopover.propTypes = {
+  displayNameProp: PropTypes.string.isRequired,
+  item: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired
+  }).isRequired,
   dataTest: PropTypes.string,
-  displayNameProp: PropTypes.string,
-  item: PropTypes.object,
   reference: PropTypes.object,
   onClose: PropTypes.func
 };

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

@@ -173,7 +173,7 @@ export const InfoTable = _ref4 => {
     className: `jsx-${styles.__hash}`
   }, i18n.t('Created date')), /*#__PURE__*/React.createElement("td", {
     className: `jsx-${styles.__hash}`
-  }, `${moment(fromServerDate(data.created)).fromNow()} (${moment(fromServerDate(data.created)).format('YYYY-MM-DD')})`)), /*#__PURE__*/React.createElement("tr", {
+  }, `${moment(fromServerDate(data.created)).fromNow()} (${moment(fromServerDate(data.created)).format('YYYY-MM-DD')})`)), data.createdBy && /*#__PURE__*/React.createElement("tr", {
     className: `jsx-${styles.__hash}`
   }, /*#__PURE__*/React.createElement("th", {
     className: `jsx-${styles.__hash}`

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

@@ -0,0 +1,62 @@
+import _JSXStyle from "styled-jsx/style";
+import { useDataQuery } from '@dhis2/app-runtime';
+import PropTypes from 'prop-types';
+import React from 'react';
+import i18n from '../../../locales/index.js';
+import { getCommonFields, InfoTable } from './InfoTable.js';
+import styles from './styles/InfoPopover.style.js';
+const optionQuery = {
+  option: {
+    resource: 'options',
+    id: _ref => {
+      let {
+        id
+      } = _ref;
+      return id;
+    },
+    params: _ref2 => {
+      let {
+        displayNameProp
+      } = _ref2;
+      return {
+        fields: `${getCommonFields(displayNameProp)},optionSet[displayName]`
+      };
+    }
+  }
+};
+export const OptionInfo = _ref3 => {
+  let {
+    type,
+    id,
+    displayNameProp
+  } = _ref3;
+  const {
+    loading,
+    error,
+    data
+  } = useDataQuery(optionQuery, {
+    variables: {
+      id: id.split('.').reverse()[0],
+      displayNameProp
+    }
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(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.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Option set')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, data.option.optionSet.displayName))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: styles.__hash
+  }, styles));
+};
+OptionInfo.propTypes = {
+  displayNameProp: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired
+};

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

@@ -2,7 +2,7 @@ import _JSXStyle from "styled-jsx/style";
 import { useDataMutation, useDataEngine } from '@dhis2/app-runtime';
 import PropTypes from 'prop-types';
 import React, { useCallback, useEffect, useState } from 'react';
-import { validateProgramIndicatorExpressionMutation } from '../../../api/expression.js';
+import { validateProgramIndicatorExpressionMutation, validateProgramIndicatorFilterMutation } from '../../../api/expression.js';
 import i18n from '../../../locales/index.js';
 import { getCommonFields, renderHumanReadableExpression, renderLegendSets, sentenceCaseText, InfoTable } from './InfoTable.js';
 import styles from './styles/InfoPopover.style.js';
@@ -38,6 +38,9 @@ export const ProgramIndicatorInfo = _ref3 => {
   const [getHumanReadableExpression] = useDataMutation(validateProgramIndicatorExpressionMutation, {
     onError: setError
   });
+  const [getHumanReadableFilter] = useDataMutation(validateProgramIndicatorFilterMutation, {
+    onError: setError
+  });
   const fetchData = useCallback(async () => {
     const {
       programIndicator
@@ -57,8 +60,8 @@ export 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;
@@ -74,7 +77,7 @@ export const ProgramIndicatorInfo = _ref3 => {
       programIndicator
     });
     setLoading(false);
-  }, [displayNameProp, engine, id, getHumanReadableExpression]);
+  }, [displayNameProp, engine, id, getHumanReadableExpression, getHumanReadableFilter]);
   useEffect(() => {
     fetchData();
   }, [fetchData]);
@@ -175,7 +178,7 @@ export const ProgramIndicatorInfo = _ref3 => {
   }, styles));
 };
 ProgramIndicatorInfo.propTypes = {
-  displayNameProp: PropTypes.string,
-  id: PropTypes.string,
-  type: PropTypes.string
+  displayNameProp: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired
 };

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

@@ -0,0 +1,247 @@
+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 { Button, IconArrowLeft16, Transfer } from '@dhis2/ui';
+import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
+import { apiFetchOptions } from '../../../api/dimensions.js';
+import i18n from '../../../locales/index.js';
+import { DIMENSION_TYPE_PROGRAM_DATA_ELEMENT, DIMENSION_TYPE_PROGRAM_ATTRIBUTE_OPTION, DIMENSION_TYPE_PROGRAM_DATA_ELEMENT_OPTION, DIMENSION_TYPE_PROGRAM_ATTRIBUTE } 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 { SelectedEmptyPlaceholder } from '../SelectedEmptyPlaceholder.js';
+import { SourceEmptyPlaceholder } from '../SourceEmptyPlaceholder.js';
+import { TransferOption } from '../TransferOption.js';
+import itemOptionSelectorStyles from './styles/ItemOptionSelector.style.js';
+const formatOptionsFilters = (dataItemType, dataItemId) => {
+  const optionsFilters = {
+    dataItemId
+  };
+  if (dataItemType === DIMENSION_TYPE_PROGRAM_DATA_ELEMENT) {
+    optionsFilters.dataType = DIMENSION_TYPE_PROGRAM_DATA_ELEMENT_OPTION;
+  } else if (dataItemType === DIMENSION_TYPE_PROGRAM_ATTRIBUTE) {
+    optionsFilters.dataType = DIMENSION_TYPE_PROGRAM_ATTRIBUTE_OPTION;
+  }
+  return optionsFilters;
+};
+export 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] = useState({
+    searchTerm: '',
+    filter: formatOptionsFilters(dataItemType, dataItemId),
+    options: [],
+    loading: true,
+    nextPage: 1
+  });
+  const debouncedSearchTerm = useDebounce(state.searchTerm, 500);
+  const dataEngine = 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 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);
+    }
+  };
+  useEffect(() => {
+    setState(state => ({
+      ...state,
+      filter: {
+        ...state.filter,
+        ...formatOptionsFilters(dataItemType, dataItemId)
+      }
+    }));
+  }, [dataItemId, dataItemType]);
+  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.createElement("div", {
+    className: `jsx-${styles.__hash} jsx-${itemOptionSelectorStyles.__hash}` + " " + "transfer-container"
+  }, /*#__PURE__*/React.createElement(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.createElement(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 ? i18n.t('All available options are already selected') : '',
+      noItemsMessage: i18n.t('No available options for this item'),
+      dataType: state.filter.dataType,
+      dataTest: `${dataTest}-empty-source`
+    }),
+    onEndReached: onEndReached,
+    filterable: true,
+    filterPlaceholder: i18n.t('Search by option name'),
+    filterablePicked: false,
+    searchTerm: state.searchTerm,
+    onFilterChange: _ref3 => {
+      let {
+        value
+      } = _ref3;
+      return setSearchTerm(value);
+    },
+    leftHeader: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: `jsx-${styles.__hash} jsx-${itemOptionSelectorStyles.__hash}` + " " + "option-set-back-button"
+    }, /*#__PURE__*/React.createElement(Button, {
+      onClick: onClose,
+      icon: /*#__PURE__*/React.createElement(IconArrowLeft16, null),
+      small: true,
+      dataTest: `${dataTest}-option-set-back-button`
+    }, i18n.t('Back to all items'))), /*#__PURE__*/React.createElement("div", {
+      className: `jsx-${styles.__hash} jsx-${itemOptionSelectorStyles.__hash}` + " " + "option-set-name"
+    }, dataItemName, ": ", i18n.t('Options'))),
+    rightHeader: /*#__PURE__*/React.createElement("p", {
+      className: `jsx-${styles.__hash} jsx-${itemOptionSelectorStyles.__hash}` + " " + "rightHeader"
+    }, i18n.t('Selected items')),
+    enableOrderChange: true,
+    height: TRANSFER_HEIGHT,
+    optionsWidth: TRANSFER_OPTIONS_WIDTH,
+    selectedWidth: TRANSFER_SELECTED_WIDTH,
+    selectedEmptyComponent: /*#__PURE__*/React.createElement(SelectedEmptyPlaceholder, null),
+    renderOption: props => {
+      return /*#__PURE__*/React.createElement(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: getIcon(props.type),
+        dataItemType: props.type,
+        dimensionType: 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.createElement(_JSXStyle, {
+    id: styles.__hash
+  }, styles), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: itemOptionSelectorStyles.__hash
+  }, itemOptionSelectorStyles));
+};
+ItemOptionsSelector.propTypes = {
+  displayNameProp: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onSelect: PropTypes.func.isRequired,
+  dataTest: PropTypes.string,
+  infoDataItem: PropTypes.object,
+  itemsRef: PropTypes.object,
+  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,
+    optionSetId: PropTypes.string
+  })),
+  setInfoDataItem: PropTypes.func,
+  onEditClick: PropTypes.func
+};
+ItemOptionsSelector.defaultProps = {
+  selectedItems: []
+};

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

@@ -0,0 +1,4 @@
+import { colors, spacers } from '@dhis2/ui';
+const _defaultExport = [`.option-set-back-button.jsx-3422805239{margin:0 -${spacers.dp8};padding:${spacers.dp8};background:${colors.grey200};border-bottom:1px solid ${colors.grey400};}`, `.option-set-name.jsx-3422805239{font-size:14px;font-weight:500;padding:${spacers.dp12} 0;}`];
+_defaultExport.__hash = "3422805239";
+export default _defaultExport;

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

@@ -2,10 +2,10 @@ 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 { DIMENSION_TYPE_ALL, dataTypeMap } from '../../modules/dataTypes.js';
-import { getDisplayNameByVisType } from '../../modules/visTypes.js';
-import { useDataDimensionContext } from './DataDimension.js';
+import i18n from '../../../locales/index.js';
+import { DIMENSION_TYPE_ALL, dataTypeMap } from '../../../modules/dataTypes.js';
+import { getDisplayNameByVisType } from '../../../modules/visTypes.js';
+import { useDataDimensionContext } from '../DataDimension.js';
 import styles from './styles/DataTypeSelector.style.js';
 const DataTypeSelector = _ref => {
   let {

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

@@ -2,8 +2,8 @@ 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 { TOTALS, DETAIL } from '../../modules/dataTypes.js';
+import i18n from '../../../locales/index.js';
+import { TOTALS, DETAIL } from '../../../modules/dataTypes.js';
 import styles from './styles/DetailSelector.style.js';
 const getOptions = () => ({
   [TOTALS]: i18n.t('Totals only'),

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

@@ -3,9 +3,9 @@ import { useDataEngine } from '@dhis2/app-runtime';
 import { SingleSelectField, SingleSelectOption } from '@dhis2/ui';
 import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
-import { apiFetchGroups } from '../../api/dimensions.js';
-import i18n from '../../locales/index.js';
-import { dataTypeMap as dataTypes, SUB_GROUP_DETAIL, SUB_GROUP_METRIC } from '../../modules/dataTypes.js';
+import { apiFetchGroups } from '../../../api/dimensions.js';
+import i18n from '../../../locales/index.js';
+import { dataTypeMap as dataTypes, SUB_GROUP_DETAIL, SUB_GROUP_METRIC } from '../../../modules/dataTypes.js';
 import { DetailSelector } from './DetailSelector.js';
 import { MetricSelector } from './MetricSelector.js';
 import styles from './styles/GroupSelector.style.js';