@dhis2/analytics 26.4.1 → 26.6.0

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

@@ -30,14 +30,14 @@ const LeftHeader = _ref => {
     searchTerm,
     setSearchTerm,
     dataType,
+    dataTypes,
     setDataType,
     group,
     setGroup,
     subGroup,
     setSubGroup,
     displayNameProp,
-    dataTest,
-    supportsEDI
+    dataTest
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: `jsx-${_DimensionSelectorStyle.default.__hash}` + " " + "leftHeader"
@@ -58,8 +58,8 @@ const LeftHeader = _ref => {
     currentDataType: dataType,
     onChange: setDataType,
     dataTest: `${dataTest}-data-types-select-field`,
-    includeCalculations: supportsEDI
-  }), _dataTypes.dataTypeMap[dataType] && dataType !== _dataTypes.DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM && /*#__PURE__*/_react.default.createElement(_GroupSelector.default, {
+    dataTypes: dataTypes
+  }), ![_dataTypes.DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM, _dataTypes.DIMENSION_TYPE_ALL].includes(dataType) && /*#__PURE__*/_react.default.createElement(_GroupSelector.default, {
     dataType: dataType,
     displayNameProp: displayNameProp,
     currentGroup: group,
@@ -74,6 +74,7 @@ const LeftHeader = _ref => {
 LeftHeader.propTypes = {
   dataTest: _propTypes.default.string,
   dataType: _propTypes.default.string,
+  dataTypes: _propTypes.default.array,
   displayNameProp: _propTypes.default.string,
   group: _propTypes.default.string,
   searchTerm: _propTypes.default.string,
@@ -81,8 +82,7 @@ LeftHeader.propTypes = {
   setGroup: _propTypes.default.func,
   setSearchTerm: _propTypes.default.func,
   setSubGroup: _propTypes.default.func,
-  subGroup: _propTypes.default.string,
-  supportsEDI: _propTypes.default.bool
+  subGroup: _propTypes.default.string
 };
 const EmptySelection = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
   className: `jsx-${_DimensionSelectorStyle.default.__hash}` + " " + "emptyList"
@@ -91,22 +91,22 @@ const EmptySelection = () => /*#__PURE__*/_react.default.createElement(_react.de
 }, _DimensionSelectorStyle.default));
 const RightHeader = _ref3 => {
   let {
-    infoText
+    infoBoxMessage
   } = _ref3;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
     className: `jsx-${_DimensionSelectorStyle.default.__hash}` + " " + "rightHeader"
-  }, _index.default.t('Selected Items')), infoText && /*#__PURE__*/_react.default.createElement("div", {
+  }, _index.default.t('Selected Items')), infoBoxMessage && /*#__PURE__*/_react.default.createElement("div", {
     className: `jsx-${_DimensionSelectorStyle.default.__hash}` + " " + "info-container"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: `jsx-${_DimensionSelectorStyle.default.__hash}`
   }, /*#__PURE__*/_react.default.createElement(_ui.IconInfo16, null)), /*#__PURE__*/_react.default.createElement("span", {
     className: `jsx-${_DimensionSelectorStyle.default.__hash}` + " " + "info-text"
-  }, infoText)), /*#__PURE__*/_react.default.createElement(_style.default, {
+  }, infoBoxMessage)), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: _DimensionSelectorStyle.default.__hash
   }, _DimensionSelectorStyle.default));
 };
 RightHeader.propTypes = {
-  infoText: _propTypes.default.string
+  infoBoxMessage: _propTypes.default.string
 };
 const SourceEmptyPlaceholder = _ref4 => {
   let {
@@ -138,6 +138,9 @@ const SourceEmptyPlaceholder = _ref4 => {
         case _dataTypes.DIMENSION_TYPE_PROGRAM_INDICATOR:
           message = _index.default.t('No program indicators found');
           break;
+        case _dataTypes.DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM:
+          message = _index.default.t('No calculations found');
+          break;
         default:
           message = _index.default.t('No data');
           break;
@@ -147,32 +150,37 @@ const SourceEmptyPlaceholder = _ref4 => {
     switch (dataType) {
       case _dataTypes.DIMENSION_TYPE_INDICATOR:
         message = _index.default.t('No indicators found for "{{- searchTerm}}"', {
-          searchTerm: searchTerm
+          searchTerm
         });
         break;
       case _dataTypes.DIMENSION_TYPE_DATA_ELEMENT:
         message = _index.default.t('No data elements found for "{{- searchTerm}}"', {
-          searchTerm: searchTerm
+          searchTerm
         });
         break;
       case _dataTypes.DIMENSION_TYPE_DATA_SET:
         message = _index.default.t('No data sets found for "{{- searchTerm}}"', {
-          searchTerm: searchTerm
+          searchTerm
         });
         break;
       case _dataTypes.DIMENSION_TYPE_EVENT_DATA_ITEM:
         message = _index.default.t('No event data items found for "{{- searchTerm}}"', {
-          searchTerm: searchTerm
+          searchTerm
         });
         break;
       case _dataTypes.DIMENSION_TYPE_PROGRAM_INDICATOR:
         message = _index.default.t('No program indicators found for "{{- searchTerm}}"', {
-          searchTerm: searchTerm
+          searchTerm
+        });
+        break;
+      case _dataTypes.DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM:
+        message = _index.default.t('No calculations found for "{{- searchTerm}}"', {
+          searchTerm
         });
         break;
       default:
         message = _index.default.t('Nothing found for "{{- searchTerm}}"', {
-          searchTerm: searchTerm
+          searchTerm
         });
         break;
     }
@@ -200,18 +208,27 @@ const ItemSelector = _ref5 => {
     rightFooter,
     displayNameProp,
     infoBoxMessage,
+    dataTypes,
     dataTest,
-    supportsEDI,
     onEDISave
   } = _ref5;
   const [state, setState] = (0, _react.useState)({
     searchTerm: '',
+    dataTypes,
     filter: {
-      dataType: _dataTypes.DIMENSION_TYPE_ALL
+      dataType: dataTypes.length === 1 ? dataTypes[0].id : _dataTypes.DIMENSION_TYPE_ALL,
+      group: null,
+      subGroup: dataTypes.length === 1 && dataTypes[0].id === _dataTypes.DIMENSION_TYPE_DATA_ELEMENT ? _dataTypes.TOTALS : null
     },
     options: [],
     loading: true,
-    nextPage: 1
+    nextPage: 1,
+    supportsEDI: dataTypes.map(_ref6 => {
+      let {
+        id
+      } = _ref6;
+      return id;
+    }).includes(_dataTypes.DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM)
   });
   const [currentCalculation, setCurrentCalculation] = (0, _react.useState)();
   const dataEngine = (0, _appRuntime.useDataEngine)();
@@ -219,15 +236,12 @@ const ItemSelector = _ref5 => {
     ...state,
     searchTerm
   }));
-  const setFilter = filter => setState(state => ({
-    ...state,
-    filter
-  }));
   const debouncedSearchTerm = (0, _utils.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 (0, _dimensions.apiFetchOptions)({
@@ -290,11 +304,6 @@ const ItemSelector = _ref5 => {
     }
   };
   (0, _utils.useDidUpdateEffect)(() => {
-    setState(state => ({
-      ...state,
-      loading: true,
-      nextPage: 1
-    }));
     fetchItems(1);
   }, [debouncedSearchTerm, state.filter]);
   const onChange = newSelected => {
@@ -323,13 +332,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,
@@ -352,10 +361,10 @@ const ItemSelector = _ref5 => {
       }]);
     }
   };
-  const onDeleteCalculation = _ref7 => {
+  const onDeleteCalculation = _ref8 => {
     let {
       id
-    } = _ref7;
+    } = _ref8;
     // close the modal
     setCurrentCalculation();
 
@@ -365,11 +374,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 === _dataTypes.DIMENSION_TYPE_DATA_ELEMENT ? _dataTypes.TOTALS : null
+    }
+  }));
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ui.Transfer, {
-    onChange: _ref8 => {
+    onChange: _ref9 => {
       let {
         selected
-      } = _ref8;
+      } = _ref9;
       return onChange(selected);
     },
     selected: selectedItems.map(item => item.value),
@@ -386,36 +421,19 @@ const ItemSelector = _ref5 => {
     }),
     onEndReached: onEndReached,
     leftHeader: /*#__PURE__*/_react.default.createElement(LeftHeader, {
+      dataTypes: state.dataTypes,
       dataType: state.filter.dataType,
-      setDataType: dataType => {
-        setFilter({
-          ...state.filter,
-          dataType,
-          group: null,
-          subGroup: dataType === _dataTypes.DIMENSION_TYPE_DATA_ELEMENT ? _dataTypes.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.default.createElement("div", {
+    leftFooter: state.supportsEDI ? /*#__PURE__*/_react.default.createElement("div", {
       className: `jsx-${_DimensionSelectorStyle.default.__hash}` + " " + "calculation-button"
     }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
       icon: /*#__PURE__*/_react.default.createElement(_ui.IconAdd24, null),
@@ -428,7 +446,7 @@ const ItemSelector = _ref5 => {
     selectedWidth: _dimensionSelectorHelper.TRANSFER_SELECTED_WIDTH,
     selectedEmptyComponent: /*#__PURE__*/_react.default.createElement(EmptySelection, null),
     rightHeader: /*#__PURE__*/_react.default.createElement(RightHeader, {
-      infoText: infoBoxMessage
+      infoBoxMessage: infoBoxMessage
     }),
     rightFooter: rightFooter,
     renderOption: props => {
@@ -442,7 +460,7 @@ const ItemSelector = _ref5 => {
           expression: props.expression
         }),
         dataTest: `${dataTest}-transfer-option`,
-        onEditClick: getItemType(props.value) === _dataTypes.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) === _dataTypes.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
@@ -452,7 +470,7 @@ const ItemSelector = _ref5 => {
     },
 
     dataTest: `${dataTest}-transfer`
-  }), currentCalculation && supportsEDI && /*#__PURE__*/_react.default.createElement(_CalculationModal.default, {
+  }), currentCalculation && state.supportsEDI && /*#__PURE__*/_react.default.createElement(_CalculationModal.default, {
     calculation: currentCalculation,
     onSave: onSaveCalculation,
     onClose: () => setCurrentCalculation(),
@@ -466,6 +484,7 @@ ItemSelector.propTypes = {
   displayNameProp: _propTypes.default.string.isRequired,
   onSelect: _propTypes.default.func.isRequired,
   dataTest: _propTypes.default.string,
+  dataTypes: _propTypes.default.array,
   infoBoxMessage: _propTypes.default.string,
   noItemsMessage: _propTypes.default.string,
   rightFooter: _propTypes.default.node,
@@ -476,7 +495,6 @@ ItemSelector.propTypes = {
     type: _propTypes.default.string,
     expression: _propTypes.default.string
   })),
-  supportsEDI: _propTypes.default.bool,
   onEDISave: _propTypes.default.func
 };
 ItemSelector.defaultProps = {

package/build/cjs/components/PeriodDimension/PeriodDimension.js

@@ -23,7 +23,8 @@ const PeriodDimension = _ref => {
     onSelect,
     selectedPeriods,
     rightFooter,
-    excludedPeriodTypes
+    excludedPeriodTypes,
+    infoBoxMessage
   } = _ref;
   const {
     systemInfo
@@ -51,7 +52,8 @@ const PeriodDimension = _ref => {
   };
   return /*#__PURE__*/_react.default.createElement(_PeriodTransfer.default, {
     onSelect: selectPeriods,
-    initialSelectedPeriods: selectedPeriods,
+    selectedItems: selectedPeriods,
+    infoBoxMessage: infoBoxMessage,
     rightFooter: rightFooter,
     dataTest: 'period-dimension',
     excludedPeriodTypes: excludedPeriodTypes,
@@ -61,6 +63,7 @@ const PeriodDimension = _ref => {
 PeriodDimension.propTypes = {
   onSelect: _propTypes.default.func.isRequired,
   excludedPeriodTypes: _propTypes.default.arrayOf(_propTypes.default.string),
+  infoBoxMessage: _propTypes.default.string,
   rightFooter: _propTypes.default.node,
   selectedPeriods: _propTypes.default.array
 };

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

@@ -23,15 +23,35 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); } //TODO: Reimplement the icon.js
-const PeriodTransfer = _ref => {
+const RightHeader = _ref => {
+  let {
+    infoBoxMessage
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
+    className: `jsx-${_DimensionSelectorStyle.default.__hash}` + " " + "rightHeader"
+  }, _index.default.t('Selected Periods')), infoBoxMessage && /*#__PURE__*/_react.default.createElement("div", {
+    className: `jsx-${_DimensionSelectorStyle.default.__hash}` + " " + "info-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: `jsx-${_DimensionSelectorStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement(_ui.IconInfo16, null)), /*#__PURE__*/_react.default.createElement("span", {
+    className: `jsx-${_DimensionSelectorStyle.default.__hash}` + " " + "info-text"
+  }, infoBoxMessage)), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: _DimensionSelectorStyle.default.__hash
+  }, _DimensionSelectorStyle.default));
+};
+RightHeader.propTypes = {
+  infoBoxMessage: _propTypes.default.string
+};
+const PeriodTransfer = _ref2 => {
   let {
     onSelect,
     dataTest,
-    initialSelectedPeriods,
+    selectedItems,
     rightFooter,
     excludedPeriodTypes,
-    periodsSettings
-  } = _ref;
+    periodsSettings,
+    infoBoxMessage
+  } = _ref2;
   const defaultRelativePeriodType = excludedPeriodTypes.includes(_index2.MONTHLY) ? (0, _relativePeriods.getRelativePeriodsOptionsById)(_index2.QUARTERLY) : (0, _relativePeriods.getRelativePeriodsOptionsById)(_index2.MONTHLY);
   const defaultFixedPeriodType = excludedPeriodTypes.includes(_index2.MONTHLY) ? (0, _fixedPeriods.getFixedPeriodsOptionsById)(_index2.QUARTERLY, periodsSettings) : (0, _fixedPeriods.getFixedPeriodsOptionsById)(_index2.MONTHLY, periodsSettings);
   const now = (0, _multiCalendarDates.getNowInCalendar)(periodsSettings.calendar);
@@ -44,7 +64,6 @@ const PeriodTransfer = _ref => {
     reversePeriods: false
   });
   const [allPeriods, setAllPeriods] = (0, _react.useState)(defaultRelativePeriodType.getPeriods());
-  const [selectedPeriods, setSelectedPeriods] = (0, _react.useState)(initialSelectedPeriods);
   const [isRelative, setIsRelative] = (0, _react.useState)(true);
   const [relativeFilter, setRelativeFilter] = (0, _react.useState)({
     periodType: defaultRelativePeriodType.id
@@ -53,6 +72,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);
@@ -99,11 +122,6 @@ const PeriodTransfer = _ref => {
   })), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: _DimensionSelectorStyle.default.__hash
   }, _DimensionSelectorStyle.default));
-  const renderRightHeader = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
-    className: `jsx-${_DimensionSelectorStyle.default.__hash}` + " " + "rightHeader"
-  }, _index.default.t('Selected Periods')), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: _DimensionSelectorStyle.default.__hash
-  }, _DimensionSelectorStyle.default));
   const onSelectFixedPeriods = filter => {
     setFixedFilter(filter);
     setAllPeriods((0, _fixedPeriods.getFixedPeriodsOptionsById)(filter.periodType, periodsSettings).getPeriods(fixedPeriodConfig(Number(filter.year)), periodsSettings));
@@ -114,45 +132,58 @@ const PeriodTransfer = _ref => {
     id: _DimensionSelectorStyle.default.__hash
   }, _DimensionSelectorStyle.default));
   return /*#__PURE__*/_react.default.createElement(_ui.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: _dimensionSelectorHelper.TRANSFER_HEIGHT,
     optionsWidth: _dimensionSelectorHelper.TRANSFER_OPTIONS_WIDTH,
     selectedWidth: _dimensionSelectorHelper.TRANSFER_SELECTED_WIDTH,
     selectedEmptyComponent: renderEmptySelection(),
-    rightHeader: renderRightHeader(),
+    rightHeader: /*#__PURE__*/_react.default.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.default.createElement(_TransferOption.TransferOption, _extends({}, props, {
-      icon: _PeriodIcon.default,
-      dataTest: `${dataTest}-transfer-option`
-    })),
+    renderOption: _ref5 => {
+      let {
+        value,
+        ...props
+      } = _ref5;
+      return /*#__PURE__*/_react.default.createElement(_TransferOption.TransferOption, _extends({}, props, {
+        value: value,
+        active: isActive(value),
+        icon: _PeriodIcon.default,
+        dataTest: `${dataTest}-transfer-option`
+      }));
+    },
     dataTest: `${dataTest}-transfer`
   });
 };
 PeriodTransfer.defaultProps = {
-  initialSelectedPeriods: [],
+  selectedItems: [],
   excludedPeriodTypes: [],
   periodsSettings: {
     calendar: 'gregory',
@@ -163,15 +194,17 @@ PeriodTransfer.propTypes = {
   onSelect: _propTypes.default.func.isRequired,
   dataTest: _propTypes.default.string,
   excludedPeriodTypes: _propTypes.default.arrayOf(_propTypes.default.string),
-  initialSelectedPeriods: _propTypes.default.arrayOf(_propTypes.default.shape({
-    id: _propTypes.default.string,
-    name: _propTypes.default.string
-  })),
+  infoBoxMessage: _propTypes.default.string,
   periodsSettings: _propTypes.default.shape({
     calendar: _propTypes.default.string,
     locale: _propTypes.default.string
   }),
-  rightFooter: _propTypes.default.node
+  rightFooter: _propTypes.default.node,
+  selectedItems: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string,
+    isActive: _propTypes.default.bool,
+    name: _propTypes.default.string
+  }))
 };
 var _default = PeriodTransfer;
 exports.default = _default;

package/build/cjs/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/cjs/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/cjs/components/VisTypeIcon.js

@@ -24,7 +24,7 @@ const VisTypeIcon = _ref => {
       }
     case _visTypes.VIS_TYPE_PIVOT_TABLE:
       {
-        VisIcon = useSmall ? _ui.IconTable16 : _ui.IconTable24;
+        VisIcon = useSmall ? _ui.IconVisualizationPivotTable16 : _ui.IconVisualizationPivotTable24;
         break;
       }
     case _visTypes.VIS_TYPE_BAR:
@@ -92,6 +92,11 @@ const VisTypeIcon = _ref => {
         VisIcon = useSmall ? _ui.IconVisualizationScatter16 : _ui.IconVisualizationScatter24;
         break;
       }
+    case _visTypes.VIS_TYPE_OUTLIER_TABLE:
+      {
+        VisIcon = useSmall ? _ui.IconVisualizationOutlierTable16 : _ui.IconVisualizationOutlierTable24;
+        break;
+      }
     case _visTypes.VIS_TYPE_COLUMN:
     default:
       {