@dhis2/analytics 26.4.1 → 26.5.0

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

@@ -25,15 +25,15 @@ const GroupSelector = _ref => {
   const [isLoading, setIsLoading] = useState(true);
   const defaultGroup = (_dataTypes$dataType = dataTypes[dataType]) === null || _dataTypes$dataType === void 0 ? void 0 : _dataTypes$dataType.defaultGroup;
   const subGroupType = (_dataTypes$dataType2 = dataTypes[dataType]) === null || _dataTypes$dataType2 === void 0 ? void 0 : _dataTypes$dataType2.subGroup;
-  const fetchGroups = async () => {
-    setIsLoading(true);
-    const result = await apiFetchGroups(dataEngine, dataType, displayNameProp);
-    setGroups(result);
-    setIsLoading(false);
-  };
   useEffect(() => {
+    const fetchGroups = async () => {
+      setIsLoading(true);
+      const result = await apiFetchGroups(dataEngine, dataType, displayNameProp);
+      setGroups(result);
+      setIsLoading(false);
+    };
     fetchGroups();
-  }, [dataType]);
+  }, [dataEngine, dataType, displayNameProp]);
   return /*#__PURE__*/React.createElement("div", {
     className: `jsx-${styles.__hash}` + " " + "container"
   }, /*#__PURE__*/React.createElement(_JSXStyle, {

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

@@ -7,7 +7,7 @@ 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 { dataTypeMap as dataTypes, 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 { 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, getTooltipText } from '../../modules/dimensionListItem.js';
 import { TRANSFER_HEIGHT, TRANSFER_OPTIONS_WIDTH, TRANSFER_SELECTED_WIDTH } from '../../modules/dimensionSelectorHelper.js';
 import { useDebounce, useDidUpdateEffect } from '../../modules/utils.js';
@@ -21,14 +21,14 @@ const LeftHeader = _ref => {
     searchTerm,
     setSearchTerm,
     dataType,
+    dataTypes,
     setDataType,
     group,
     setGroup,
     subGroup,
     setSubGroup,
     displayNameProp,
-    dataTest,
-    supportsEDI
+    dataTest
   } = _ref;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: `jsx-${styles.__hash}` + " " + "leftHeader"
@@ -49,8 +49,8 @@ const LeftHeader = _ref => {
     currentDataType: dataType,
     onChange: setDataType,
     dataTest: `${dataTest}-data-types-select-field`,
-    includeCalculations: supportsEDI
-  }), dataTypes[dataType] && dataType !== DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM && /*#__PURE__*/React.createElement(GroupSelector, {
+    dataTypes: dataTypes
+  }), ![DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM, DIMENSION_TYPE_ALL].includes(dataType) && /*#__PURE__*/React.createElement(GroupSelector, {
     dataType: dataType,
     displayNameProp: displayNameProp,
     currentGroup: group,
@@ -65,6 +65,7 @@ const LeftHeader = _ref => {
 LeftHeader.propTypes = {
   dataTest: PropTypes.string,
   dataType: PropTypes.string,
+  dataTypes: PropTypes.array,
   displayNameProp: PropTypes.string,
   group: PropTypes.string,
   searchTerm: PropTypes.string,
@@ -72,8 +73,7 @@ LeftHeader.propTypes = {
   setGroup: PropTypes.func,
   setSearchTerm: PropTypes.func,
   setSubGroup: PropTypes.func,
-  subGroup: PropTypes.string,
-  supportsEDI: PropTypes.bool
+  subGroup: PropTypes.string
 };
 const EmptySelection = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
   className: `jsx-${styles.__hash}` + " " + "emptyList"
@@ -82,22 +82,22 @@ const EmptySelection = () => /*#__PURE__*/React.createElement(React.Fragment, nu
 }, styles));
 const RightHeader = _ref3 => {
   let {
-    infoText
+    infoBoxMessage
   } = _ref3;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
     className: `jsx-${styles.__hash}` + " " + "rightHeader"
-  }, i18n.t('Selected Items')), infoText && /*#__PURE__*/React.createElement("div", {
+  }, i18n.t('Selected Items')), infoBoxMessage && /*#__PURE__*/React.createElement("div", {
     className: `jsx-${styles.__hash}` + " " + "info-container"
   }, /*#__PURE__*/React.createElement("div", {
     className: `jsx-${styles.__hash}`
   }, /*#__PURE__*/React.createElement(IconInfo16, null)), /*#__PURE__*/React.createElement("span", {
     className: `jsx-${styles.__hash}` + " " + "info-text"
-  }, infoText)), /*#__PURE__*/React.createElement(_JSXStyle, {
+  }, infoBoxMessage)), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: styles.__hash
   }, styles));
 };
 RightHeader.propTypes = {
-  infoText: PropTypes.string
+  infoBoxMessage: PropTypes.string
 };
 const SourceEmptyPlaceholder = _ref4 => {
   let {
@@ -129,6 +129,9 @@ const SourceEmptyPlaceholder = _ref4 => {
         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;
@@ -138,32 +141,37 @@ const SourceEmptyPlaceholder = _ref4 => {
     switch (dataType) {
       case DIMENSION_TYPE_INDICATOR:
         message = i18n.t('No indicators found for "{{- searchTerm}}"', {
-          searchTerm: searchTerm
+          searchTerm
         });
         break;
       case DIMENSION_TYPE_DATA_ELEMENT:
         message = i18n.t('No data elements found for "{{- searchTerm}}"', {
-          searchTerm: searchTerm
+          searchTerm
         });
         break;
       case DIMENSION_TYPE_DATA_SET:
         message = i18n.t('No data sets found for "{{- searchTerm}}"', {
-          searchTerm: searchTerm
+          searchTerm
         });
         break;
       case DIMENSION_TYPE_EVENT_DATA_ITEM:
         message = i18n.t('No event data items found for "{{- searchTerm}}"', {
-          searchTerm: searchTerm
+          searchTerm
         });
         break;
       case DIMENSION_TYPE_PROGRAM_INDICATOR:
         message = i18n.t('No program indicators found for "{{- searchTerm}}"', {
-          searchTerm: 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: searchTerm
+          searchTerm
         });
         break;
     }
@@ -191,18 +199,27 @@ const ItemSelector = _ref5 => {
     rightFooter,
     displayNameProp,
     infoBoxMessage,
+    dataTypes,
     dataTest,
-    supportsEDI,
     onEDISave
   } = _ref5;
   const [state, setState] = useState({
     searchTerm: '',
+    dataTypes,
     filter: {
-      dataType: DIMENSION_TYPE_ALL
+      dataType: dataTypes.length === 1 ? dataTypes[0].id : DIMENSION_TYPE_ALL,
+      group: null,
+      subGroup: dataTypes.length === 1 && dataTypes[0].id === DIMENSION_TYPE_DATA_ELEMENT ? TOTALS : null
     },
     options: [],
     loading: true,
-    nextPage: 1
+    nextPage: 1,
+    supportsEDI: dataTypes.map(_ref6 => {
+      let {
+        id
+      } = _ref6;
+      return id;
+    }).includes(DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM)
   });
   const [currentCalculation, setCurrentCalculation] = useState();
   const dataEngine = useDataEngine();
@@ -210,15 +227,12 @@ const ItemSelector = _ref5 => {
     ...state,
     searchTerm
   }));
-  const setFilter = filter => setState(state => ({
-    ...state,
-    filter
-  }));
   const debouncedSearchTerm = useDebounce(state.searchTerm, 500);
   const fetchItems = async page => {
     var _result$dimensionItem;
     setState(state => ({
       ...state,
+      nextPage: page === 1 ? 1 : state.nextPage,
       loading: true
     }));
     const result = await apiFetchOptions({
@@ -281,11 +295,6 @@ const ItemSelector = _ref5 => {
     }
   };
   useDidUpdateEffect(() => {
-    setState(state => ({
-      ...state,
-      loading: true,
-      nextPage: 1
-    }));
     fetchItems(1);
   }, [debouncedSearchTerm, state.filter]);
   const onChange = newSelected => {
@@ -314,13 +323,13 @@ const ItemSelector = _ref5 => {
     var _find;
     return (_find = [...state.options, ...selectedItems].find(item => item.value === value)) === null || _find === void 0 ? void 0 : _find.type;
   };
-  const onSaveCalculation = async _ref6 => {
+  const onSaveCalculation = async _ref7 => {
     let {
       id,
       name,
       expression,
       isNew
-    } = _ref6;
+    } = _ref7;
     onEDISave({
       id,
       name,
@@ -343,10 +352,10 @@ const ItemSelector = _ref5 => {
       }]);
     }
   };
-  const onDeleteCalculation = _ref7 => {
+  const onDeleteCalculation = _ref8 => {
     let {
       id
-    } = _ref7;
+    } = _ref8;
     // close the modal
     setCurrentCalculation();
 
@@ -356,11 +365,37 @@ const ItemSelector = _ref5 => {
     // unselect the deleted calculation
     onSelect([...selectedItems.filter(item => item.value !== id)]);
   };
+  const onSetGroup = group => setState(state => ({
+    ...state,
+    nextPage: 1,
+    filter: {
+      ...state.filter,
+      group
+    }
+  }));
+  const onSetSubGroup = subGroup => setState(state => ({
+    ...state,
+    nextPage: 1,
+    filter: {
+      ...state.filter,
+      subGroup
+    }
+  }));
+  const onSetDataType = dataType => setState(state => ({
+    ...state,
+    nextPage: 1,
+    filter: {
+      ...state.filter,
+      dataType,
+      group: null,
+      subGroup: dataType === DIMENSION_TYPE_DATA_ELEMENT ? TOTALS : null
+    }
+  }));
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Transfer, {
-    onChange: _ref8 => {
+    onChange: _ref9 => {
       let {
         selected
-      } = _ref8;
+      } = _ref9;
       return onChange(selected);
     },
     selected: selectedItems.map(item => item.value),
@@ -377,36 +412,19 @@ const ItemSelector = _ref5 => {
     }),
     onEndReached: onEndReached,
     leftHeader: /*#__PURE__*/React.createElement(LeftHeader, {
+      dataTypes: state.dataTypes,
       dataType: state.filter.dataType,
-      setDataType: dataType => {
-        setFilter({
-          ...state.filter,
-          dataType,
-          group: null,
-          subGroup: dataType === DIMENSION_TYPE_DATA_ELEMENT ? TOTALS : null
-        });
-      },
+      setDataType: onSetDataType,
       group: state.filter.group,
-      setGroup: group => {
-        setFilter({
-          ...state.filter,
-          group
-        });
-      },
+      setGroup: onSetGroup,
       subGroup: state.filter.subGroup,
-      setSubGroup: subGroup => {
-        setFilter({
-          ...state.filter,
-          subGroup
-        });
-      },
+      setSubGroup: onSetSubGroup,
       searchTerm: state.searchTerm,
       setSearchTerm: setSearchTerm,
       displayNameProp: displayNameProp,
-      dataTest: `${dataTest}-left-header`,
-      supportsEDI: supportsEDI
+      dataTest: `${dataTest}-left-header`
     }),
-    leftFooter: supportsEDI ? /*#__PURE__*/React.createElement("div", {
+    leftFooter: state.supportsEDI ? /*#__PURE__*/React.createElement("div", {
       className: `jsx-${styles.__hash}` + " " + "calculation-button"
     }, /*#__PURE__*/React.createElement(Button, {
       icon: /*#__PURE__*/React.createElement(IconAdd24, null),
@@ -419,7 +437,7 @@ const ItemSelector = _ref5 => {
     selectedWidth: TRANSFER_SELECTED_WIDTH,
     selectedEmptyComponent: /*#__PURE__*/React.createElement(EmptySelection, null),
     rightHeader: /*#__PURE__*/React.createElement(RightHeader, {
-      infoText: infoBoxMessage
+      infoBoxMessage: infoBoxMessage
     }),
     rightFooter: rightFooter,
     renderOption: props => {
@@ -433,7 +451,7 @@ const ItemSelector = _ref5 => {
           expression: props.expression
         }),
         dataTest: `${dataTest}-transfer-option`,
-        onEditClick: getItemType(props.value) === DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM && !(((_props$access = props.access) === null || _props$access === void 0 ? void 0 : _props$access.write) === false) && supportsEDI ? () => setCurrentCalculation({
+        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
@@ -443,7 +461,7 @@ const ItemSelector = _ref5 => {
     },
 
     dataTest: `${dataTest}-transfer`
-  }), currentCalculation && supportsEDI && /*#__PURE__*/React.createElement(CalculationModal, {
+  }), currentCalculation && state.supportsEDI && /*#__PURE__*/React.createElement(CalculationModal, {
     calculation: currentCalculation,
     onSave: onSaveCalculation,
     onClose: () => setCurrentCalculation(),
@@ -457,6 +475,7 @@ ItemSelector.propTypes = {
   displayNameProp: PropTypes.string.isRequired,
   onSelect: PropTypes.func.isRequired,
   dataTest: PropTypes.string,
+  dataTypes: PropTypes.array,
   infoBoxMessage: PropTypes.string,
   noItemsMessage: PropTypes.string,
   rightFooter: PropTypes.node,
@@ -467,7 +486,6 @@ ItemSelector.propTypes = {
     type: PropTypes.string,
     expression: PropTypes.string
   })),
-  supportsEDI: PropTypes.bool,
   onEDISave: PropTypes.func
 };
 ItemSelector.defaultProps = {

package/build/es/components/PeriodDimension/PeriodDimension.js

@@ -16,7 +16,8 @@ const PeriodDimension = _ref => {
     onSelect,
     selectedPeriods,
     rightFooter,
-    excludedPeriodTypes
+    excludedPeriodTypes,
+    infoBoxMessage
   } = _ref;
   const {
     systemInfo
@@ -44,7 +45,8 @@ const PeriodDimension = _ref => {
   };
   return /*#__PURE__*/React.createElement(PeriodTransfer, {
     onSelect: selectPeriods,
-    initialSelectedPeriods: selectedPeriods,
+    selectedItems: selectedPeriods,
+    infoBoxMessage: infoBoxMessage,
     rightFooter: rightFooter,
     dataTest: 'period-dimension',
     excludedPeriodTypes: excludedPeriodTypes,
@@ -54,6 +56,7 @@ const PeriodDimension = _ref => {
 PeriodDimension.propTypes = {
   onSelect: PropTypes.func.isRequired,
   excludedPeriodTypes: PropTypes.arrayOf(PropTypes.string),
+  infoBoxMessage: PropTypes.string,
   rightFooter: PropTypes.node,
   selectedPeriods: PropTypes.array
 };

package/build/es/components/PeriodDimension/PeriodTransfer.js

@@ -1,7 +1,7 @@
 import _JSXStyle from "styled-jsx/style";
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import { getNowInCalendar } from '@dhis2/multi-calendar-dates';
-import { TabBar, Tab, Transfer } from '@dhis2/ui';
+import { IconInfo16, TabBar, Tab, Transfer } from '@dhis2/ui';
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import PeriodIcon from '../../assets/DimensionItemIcons/PeriodIcon.js'; //TODO: Reimplement the icon.js
@@ -14,15 +14,35 @@ import RelativePeriodFilter from './RelativePeriodFilter.js';
 import { getFixedPeriodsOptionsById } from './utils/fixedPeriods.js';
 import { MONTHLY, QUARTERLY } from './utils/index.js';
 import { getRelativePeriodsOptionsById } from './utils/relativePeriods.js';
-const PeriodTransfer = _ref => {
+const RightHeader = _ref => {
+  let {
+    infoBoxMessage
+  } = _ref;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
+    className: `jsx-${styles.__hash}` + " " + "rightHeader"
+  }, i18n.t('Selected Periods')), infoBoxMessage && /*#__PURE__*/React.createElement("div", {
+    className: `jsx-${styles.__hash}` + " " + "info-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement(IconInfo16, null)), /*#__PURE__*/React.createElement("span", {
+    className: `jsx-${styles.__hash}` + " " + "info-text"
+  }, infoBoxMessage)), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: styles.__hash
+  }, styles));
+};
+RightHeader.propTypes = {
+  infoBoxMessage: PropTypes.string
+};
+const PeriodTransfer = _ref2 => {
   let {
     onSelect,
     dataTest,
-    initialSelectedPeriods,
+    selectedItems,
     rightFooter,
     excludedPeriodTypes,
-    periodsSettings
-  } = _ref;
+    periodsSettings,
+    infoBoxMessage
+  } = _ref2;
   const defaultRelativePeriodType = excludedPeriodTypes.includes(MONTHLY) ? getRelativePeriodsOptionsById(QUARTERLY) : getRelativePeriodsOptionsById(MONTHLY);
   const defaultFixedPeriodType = excludedPeriodTypes.includes(MONTHLY) ? getFixedPeriodsOptionsById(QUARTERLY, periodsSettings) : getFixedPeriodsOptionsById(MONTHLY, periodsSettings);
   const now = getNowInCalendar(periodsSettings.calendar);
@@ -35,7 +55,6 @@ const PeriodTransfer = _ref => {
     reversePeriods: false
   });
   const [allPeriods, setAllPeriods] = useState(defaultRelativePeriodType.getPeriods());
-  const [selectedPeriods, setSelectedPeriods] = useState(initialSelectedPeriods);
   const [isRelative, setIsRelative] = useState(true);
   const [relativeFilter, setRelativeFilter] = useState({
     periodType: defaultRelativePeriodType.id
@@ -44,6 +63,10 @@ const PeriodTransfer = _ref => {
     periodType: defaultFixedPeriodType.id,
     year: defaultFixedPeriodYear.toString()
   });
+  const isActive = value => {
+    const item = selectedItems.find(item => item.id === value);
+    return !item || item.isActive;
+  };
   const onIsRelativeClick = state => {
     if (state !== isRelative) {
       setIsRelative(state);
@@ -90,11 +113,6 @@ const PeriodTransfer = _ref => {
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: styles.__hash
   }, styles));
-  const renderRightHeader = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
-    className: `jsx-${styles.__hash}` + " " + "rightHeader"
-  }, i18n.t('Selected Periods')), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: styles.__hash
-  }, styles));
   const onSelectFixedPeriods = filter => {
     setFixedFilter(filter);
     setAllPeriods(getFixedPeriodsOptionsById(filter.periodType, periodsSettings).getPeriods(fixedPeriodConfig(Number(filter.year)), periodsSettings));
@@ -105,45 +123,58 @@ const PeriodTransfer = _ref => {
     id: styles.__hash
   }, styles));
   return /*#__PURE__*/React.createElement(Transfer, {
-    onChange: _ref2 => {
+    onChange: _ref3 => {
       let {
         selected
-      } = _ref2;
-      const formattedItems = selected.map(id => ({
-        id,
-        name: [...allPeriods, ...selectedPeriods].find(item => item.id === id).name
-      }));
-      setSelectedPeriods(formattedItems);
+      } = _ref3;
+      const formattedItems = selected.map(id => {
+        const matchingItem = [...allPeriods, ...selectedItems].find(item => item.id === id);
+        return {
+          id,
+          name: matchingItem.name,
+          isActive: matchingItem.isActive
+        };
+      });
       onSelect(formattedItems);
     },
-    selected: selectedPeriods.map(period => period.id),
+    selected: selectedItems.map(period => period.id),
     leftHeader: renderLeftHeader(),
     enableOrderChange: true,
     height: TRANSFER_HEIGHT,
     optionsWidth: TRANSFER_OPTIONS_WIDTH,
     selectedWidth: TRANSFER_SELECTED_WIDTH,
     selectedEmptyComponent: renderEmptySelection(),
-    rightHeader: renderRightHeader(),
+    rightHeader: /*#__PURE__*/React.createElement(RightHeader, {
+      infoBoxMessage: infoBoxMessage
+    }),
     rightFooter: rightFooter,
-    options: [...allPeriods, ...selectedPeriods].map(_ref3 => {
+    options: [...allPeriods, ...selectedItems].map(_ref4 => {
       let {
         id,
         name
-      } = _ref3;
+      } = _ref4;
       return {
         label: name,
         value: id
       };
     }),
-    renderOption: props => /*#__PURE__*/React.createElement(TransferOption, _extends({}, props, {
-      icon: PeriodIcon,
-      dataTest: `${dataTest}-transfer-option`
-    })),
+    renderOption: _ref5 => {
+      let {
+        value,
+        ...props
+      } = _ref5;
+      return /*#__PURE__*/React.createElement(TransferOption, _extends({}, props, {
+        value: value,
+        active: isActive(value),
+        icon: PeriodIcon,
+        dataTest: `${dataTest}-transfer-option`
+      }));
+    },
     dataTest: `${dataTest}-transfer`
   });
 };
 PeriodTransfer.defaultProps = {
-  initialSelectedPeriods: [],
+  selectedItems: [],
   excludedPeriodTypes: [],
   periodsSettings: {
     calendar: 'gregory',
@@ -154,14 +185,16 @@ PeriodTransfer.propTypes = {
   onSelect: PropTypes.func.isRequired,
   dataTest: PropTypes.string,
   excludedPeriodTypes: PropTypes.arrayOf(PropTypes.string),
-  initialSelectedPeriods: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    name: PropTypes.string
-  })),
+  infoBoxMessage: PropTypes.string,
   periodsSettings: PropTypes.shape({
     calendar: PropTypes.string,
     locale: PropTypes.string
   }),
-  rightFooter: PropTypes.node
+  rightFooter: PropTypes.node,
+  selectedItems: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    isActive: PropTypes.bool,
+    name: PropTypes.string
+  }))
 };
 export default PeriodTransfer;

package/build/es/components/PeriodDimension/__tests__/__snapshots__/PeriodDimension.spec.js.snap

@@ -4,7 +4,6 @@ exports[`The Period Dimension component matches the snapshot 1`] = `
 <PeriodTransfer
   dataTest="period-dimension"
   excludedPeriodTypes={Array []}
-  initialSelectedPeriods={Array []}
   onSelect={[Function]}
   periodsSettings={
     Object {
@@ -13,5 +12,6 @@ exports[`The Period Dimension component matches the snapshot 1`] = `
     }
   }
   rightFooter={<React.Fragment />}
+  selectedItems={Array []}
 />
 `;

package/build/es/components/PeriodDimension/__tests__/__snapshots__/PeriodSelector.spec.js.snap

@@ -77,18 +77,7 @@ exports[`The Period Selector component matches the snapshot 1`] = `
   optionsWidth="420px"
   renderOption={[Function]}
   rightFooter={<React.Fragment />}
-  rightHeader={
-    <React.Fragment>
-      <p
-        className="rightHeader"
-      >
-        Selected Periods
-      </p>
-      <style>
-        
-      </style>
-    </React.Fragment>
-  }
+  rightHeader={<RightHeader />}
   selected={Array []}
   selectedEmptyComponent={
     <React.Fragment>

package/build/es/components/VisTypeIcon.js

@@ -1,7 +1,7 @@
-import { IconTable16, IconVisualizationArea16, IconVisualizationAreaStacked16, IconVisualizationBar16, IconVisualizationBarStacked16, IconVisualizationColumn16, IconVisualizationColumnMulti16, IconVisualizationColumnStacked16, IconVisualizationGauge16, IconVisualizationLine16, IconVisualizationLinelist16, IconVisualizationLineMulti16, IconVisualizationPie16, IconVisualizationRadar16, IconVisualizationScatter16, IconVisualizationSingleValue16, IconTable24, IconVisualizationArea24, IconVisualizationAreaStacked24, IconVisualizationBar24, IconVisualizationBarStacked24, IconVisualizationColumn24, IconVisualizationLinelist24, IconVisualizationColumnMulti24, IconVisualizationColumnStacked24, IconVisualizationGauge24, IconVisualizationLine24, IconVisualizationLineMulti24, IconVisualizationPie24, IconVisualizationRadar24, IconVisualizationScatter24, IconVisualizationSingleValue24 } from '@dhis2/ui';
+import { IconVisualizationArea16, IconVisualizationAreaStacked16, IconVisualizationBar16, IconVisualizationBarStacked16, IconVisualizationColumn16, IconVisualizationColumnMulti16, IconVisualizationColumnStacked16, IconVisualizationGauge16, IconVisualizationLine16, IconVisualizationLinelist16, IconVisualizationLineMulti16, IconVisualizationOutlierTable16, IconVisualizationPie16, IconVisualizationPivotTable16, IconVisualizationRadar16, IconVisualizationScatter16, IconVisualizationSingleValue16, IconVisualizationArea24, IconVisualizationAreaStacked24, IconVisualizationBar24, IconVisualizationBarStacked24, IconVisualizationColumn24, IconVisualizationLinelist24, IconVisualizationColumnMulti24, IconVisualizationColumnStacked24, IconVisualizationGauge24, IconVisualizationLine24, IconVisualizationLineMulti24, IconVisualizationOutlierTable24, IconVisualizationPie24, IconVisualizationPivotTable24, IconVisualizationRadar24, IconVisualizationScatter24, IconVisualizationSingleValue24 } from '@dhis2/ui';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { VIS_TYPE_LINE_LIST, VIS_TYPE_PIVOT_TABLE, VIS_TYPE_COLUMN, VIS_TYPE_STACKED_COLUMN, VIS_TYPE_BAR, VIS_TYPE_STACKED_BAR, VIS_TYPE_LINE, VIS_TYPE_AREA, VIS_TYPE_STACKED_AREA, VIS_TYPE_PIE, VIS_TYPE_RADAR, VIS_TYPE_GAUGE, VIS_TYPE_YEAR_OVER_YEAR_LINE, VIS_TYPE_YEAR_OVER_YEAR_COLUMN, VIS_TYPE_SINGLE_VALUE, VIS_TYPE_SCATTER } from '../modules/visTypes.js';
+import { VIS_TYPE_LINE_LIST, VIS_TYPE_PIVOT_TABLE, VIS_TYPE_COLUMN, VIS_TYPE_STACKED_COLUMN, VIS_TYPE_BAR, VIS_TYPE_STACKED_BAR, VIS_TYPE_LINE, VIS_TYPE_AREA, VIS_TYPE_STACKED_AREA, VIS_TYPE_PIE, VIS_TYPE_RADAR, VIS_TYPE_GAUGE, VIS_TYPE_YEAR_OVER_YEAR_LINE, VIS_TYPE_YEAR_OVER_YEAR_COLUMN, VIS_TYPE_SINGLE_VALUE, VIS_TYPE_SCATTER, VIS_TYPE_OUTLIER_TABLE } from '../modules/visTypes.js';
 export const VisTypeIcon = _ref => {
   let {
     type,
@@ -17,7 +17,7 @@ export const VisTypeIcon = _ref => {
       }
     case VIS_TYPE_PIVOT_TABLE:
       {
-        VisIcon = useSmall ? IconTable16 : IconTable24;
+        VisIcon = useSmall ? IconVisualizationPivotTable16 : IconVisualizationPivotTable24;
         break;
       }
     case VIS_TYPE_BAR:
@@ -85,6 +85,11 @@ export const VisTypeIcon = _ref => {
         VisIcon = useSmall ? IconVisualizationScatter16 : IconVisualizationScatter24;
         break;
       }
+    case VIS_TYPE_OUTLIER_TABLE:
+      {
+        VisIcon = useSmall ? IconVisualizationOutlierTable16 : IconVisualizationOutlierTable24;
+        break;
+      }
     case VIS_TYPE_COLUMN:
     default:
       {

package/build/es/index.js

@@ -97,15 +97,15 @@ export { getLayoutTypeByVisType } from './modules/visTypeToLayoutType.js';
 
 // Modules: visTypes
 
-export { VIS_TYPE_GROUP_ALL, VIS_TYPE_GROUP_CHARTS, VIS_TYPE_COLUMN, VIS_TYPE_STACKED_COLUMN, VIS_TYPE_BAR, VIS_TYPE_STACKED_BAR, VIS_TYPE_LINE, VIS_TYPE_AREA, VIS_TYPE_STACKED_AREA, VIS_TYPE_PIE, VIS_TYPE_RADAR, VIS_TYPE_GAUGE, VIS_TYPE_BUBBLE, VIS_TYPE_YEAR_OVER_YEAR_LINE, VIS_TYPE_YEAR_OVER_YEAR_COLUMN, VIS_TYPE_SINGLE_VALUE, VIS_TYPE_PIVOT_TABLE, VIS_TYPE_SCATTER, VIS_TYPE_LINE_LIST, visTypeDisplayNames, visTypeIcons, getDisplayNameByVisType, defaultVisType, isStacked, isMultiType, isYearOverYear, isDualAxisType, isSingleValue, isTwoCategoryChartType, isLegendSetType, isColumnBasedType, isVerticalType } from './modules/visTypes.js';
+export { VIS_TYPE_GROUP_ALL, VIS_TYPE_GROUP_CHARTS, VIS_TYPE_COLUMN, VIS_TYPE_STACKED_COLUMN, VIS_TYPE_BAR, VIS_TYPE_STACKED_BAR, VIS_TYPE_LINE, VIS_TYPE_AREA, VIS_TYPE_STACKED_AREA, VIS_TYPE_PIE, VIS_TYPE_RADAR, VIS_TYPE_GAUGE, VIS_TYPE_BUBBLE, VIS_TYPE_YEAR_OVER_YEAR_LINE, VIS_TYPE_YEAR_OVER_YEAR_COLUMN, VIS_TYPE_SINGLE_VALUE, VIS_TYPE_PIVOT_TABLE, VIS_TYPE_SCATTER, VIS_TYPE_LINE_LIST, VIS_TYPE_OUTLIER_TABLE, visTypeDisplayNames, visTypeIcons, getDisplayNameByVisType, defaultVisType, isStacked, isMultiType, isYearOverYear, isDualAxisType, isSingleValue, isOutlierTable, isTwoCategoryChartType, isLegendSetType, isColumnBasedType, isVerticalType } from './modules/visTypes.js';
 
 // Modules: layoutTypes
 
-export { LAYOUT_TYPE_DEFAULT, LAYOUT_TYPE_PIE, LAYOUT_TYPE_SINGLE_VALUE, LAYOUT_TYPE_YEAR_OVER_YEAR, LAYOUT_TYPE_PIVOT_TABLE, LAYOUT_TYPE_SCATTER, LAYOUT_TYPE_LINE_LIST } from './modules/layoutTypes.js';
+export { LAYOUT_TYPE_DEFAULT, LAYOUT_TYPE_PIE, LAYOUT_TYPE_SINGLE_VALUE, LAYOUT_TYPE_YEAR_OVER_YEAR, LAYOUT_TYPE_PIVOT_TABLE, LAYOUT_TYPE_SCATTER, LAYOUT_TYPE_LINE_LIST, LAYOUT_TYPE_OUTLIER_TABLE } from './modules/layoutTypes.js';
 
 // Modules: layoutUiRules
 
-export { getAvailableAxes, getDisallowedDimensions, getAxisMaxNumberOfItems, getAxisMaxNumberOfDimensions, getAxisMinNumberOfDimensions, hasAxisTooManyItems, getAxisPerLockedDimension, getAllLockedDimensionIds, canDimensionBeAddedToAxis, isDimensionLocked, isAxisFull, getTransferableDimension } from './modules/layoutUiRules/index.js';
+export { getAvailableAxes, getDisallowedDimensions, getDimensionMaxNumberOfItems, getAxisMaxNumberOfItems, getAxisMaxNumberOfDimensions, getAxisMinNumberOfDimensions, hasAxisTooManyItems, hasDimensionTooManyItems, getAxisPerLockedDimension, getAllLockedDimensionIds, canDimensionBeAddedToAxis, isDimensionLocked, isAxisFull, getTransferableDimension } from './modules/layoutUiRules/index.js';
 
 // Visualizations
 
@@ -131,4 +131,4 @@ export { DAILY, WEEKLY, WEEKLYWED, WEEKLYTHU, WEEKLYSAT, WEEKLYSUN, WEEKS_THIS_Y
 export { getRelativePeriodsOptionsById } from './components/PeriodDimension/utils/relativePeriods.js';
 export { getFixedPeriodsOptionsById } from './components/PeriodDimension/utils/fixedPeriods.js';
 export { default as VisualizationOptions } from './components/Options/VisualizationOptions.js';
-export { DIMENSION_TYPE_INDICATOR, DIMENSION_TYPE_DATA_ELEMENT, DIMENSION_TYPE_DATA_SET, DIMENSION_TYPE_EVENT_DATA_ITEM, DIMENSION_TYPE_PROGRAM_INDICATOR, DIMENSION_TYPE_PROGRAM_DATA_ELEMENT, DIMENSION_TYPE_PROGRAM_ATTRIBUTE, DIMENSION_TYPE_DATA_ELEMENT_OPERAND, DIMENSION_TYPE_CATEGORY, DIMENSION_TYPE_CATEGORY_OPTION_GROUP_SET, DIMENSION_TYPE_ALL, DIMENSION_TYPE_DATA, DIMENSION_TYPE_DATA_ELEMENT_GROUP_SET, DIMENSION_TYPE_ORGANISATION_UNIT, DIMENSION_TYPE_PERIOD, DIMENSION_TYPE_ORGANISATION_UNIT_GROUP_SET, DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM } from './modules/dataTypes.js';
+export { DIMENSION_TYPE_INDICATOR, DIMENSION_TYPE_DATA_ELEMENT, DIMENSION_TYPE_DATA_SET, DIMENSION_TYPE_EVENT_DATA_ITEM, DIMENSION_TYPE_PROGRAM_INDICATOR, DIMENSION_TYPE_PROGRAM_DATA_ELEMENT, DIMENSION_TYPE_PROGRAM_ATTRIBUTE, DIMENSION_TYPE_DATA_ELEMENT_OPERAND, DIMENSION_TYPE_CATEGORY, DIMENSION_TYPE_CATEGORY_OPTION_GROUP_SET, DIMENSION_TYPE_ALL, DIMENSION_TYPE_DATA, DIMENSION_TYPE_DATA_ELEMENT_GROUP_SET, DIMENSION_TYPE_ORGANISATION_UNIT, DIMENSION_TYPE_PERIOD, DIMENSION_TYPE_ORGANISATION_UNIT_GROUP_SET, DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM, dataTypeMap } from './modules/dataTypes.js';