@dhis2/analytics 26.12.2 → 26.13.0

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

@@ -15,10 +15,10 @@ const OptionsButton = _ref => {
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
     onClick: onClick,
-    className: "jsx-2728765288"
+    className: "jsx-2074438274"
   }, /*#__PURE__*/_react.default.createElement(_ui.IconMore16, null)), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "2728765288"
-  }, ["button.jsx-2728765288{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:20px;width:20px;padding:0;border:none;background:none;outline:none;cursor:pointer;border-top-right-radius:2px;border-bottom-left-radius:2px;}", "button.jsx-2728765288:hover{background-color:rgba(0,0,0,0.09);}"]));
+    id: "2074438274"
+  }, ["button.jsx-2074438274{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:100%;width:20px;padding:0;border:none;background:none;outline:none;cursor:pointer;border-top-right-radius:2px;border-bottom-left-radius:2px;}", "button.jsx-2074438274:hover{background-color:rgba(33,41,52,0.08);}", "button.jsx-2074438274:active{background-color:rgba(33,41,52,0.13);}"]));
 };
 OptionsButton.propTypes = {
   onClick: _propTypes.default.func

package/build/cjs/components/DimensionsPanel/List/styles/DimensionItem.style.js

@@ -5,6 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _ui = require("@dhis2/ui");
-const _defaultExport = [`.item.jsx-1684920521{color:${_ui.colors.grey900};background-color:transparent;fill:${_ui.colors.grey800};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;outline:none;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding:0 0 0 4px;margin:0;border-radius:2px;cursor:pointer;min-height:22px;border:1px solid transparent;}`, `.item.jsx-1684920521:not(.deactivated):not(.dragging):hover{background-color:${_ui.colors.grey100};border-color:${_ui.colors.grey400};}`, ".label.jsx-1684920521{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".labelWrapper.jsx-1684920521{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".labelText.jsx-1684920521{font-size:13px;line-height:15px;margin-top:1px;}", ".iconWrapper.jsx-1684920521{width:16px;height:16px;margin:2px 4px 0 0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;}", ".item.deactivated.jsx-1684920521{opacity:0.5;cursor:not-allowed;}", `.item.selected.jsx-1684920521{background-color:${_ui.colors.teal100};border:1px solid ${_ui.colors.teal200};color:${_ui.colors.teal900};fill:${_ui.colors.teal800};font-weight:400;}`, ".item.selected.jsx-1684920521:not(.deactivated):hover{background:#cdeae8;border-color:#93c4bf;box-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);}", ".optionsWrapper.jsx-1684920521{width:20px;height:20px;}", `.lockWrapper.jsx-1684920521 svg.jsx-1684920521 path.jsx-1684920521{fill:${_ui.colors.grey800};}`, `.lockWrapper.jsx-1684920521{background:${_ui.colors.grey300};height:20px;padding:0 2px 0 3px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}`, ".item.selected.jsx-1684920521 .lockWrapper.jsx-1684920521{background:#cbe7e5;}", `.item.selected.jsx-1684920521 .lockWrapper.jsx-1684920521 svg.jsx-1684920521 path.jsx-1684920521{fill:${_ui.colors.teal900};}`];
-_defaultExport.__hash = "1684920521";
+const _defaultExport = [`.item.jsx-3350116288{color:${_ui.colors.grey900};background-color:transparent;fill:${_ui.colors.grey800};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:4px;outline:none;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding:0 0 0 4px;margin:0;border-radius:2px;cursor:pointer;min-height:22px;border:1px solid transparent;}`, `.item.jsx-3350116288:not(.deactivated):not(.dragging):hover{background-color:${_ui.colors.grey100};border-color:${_ui.colors.grey400};}`, ".label.jsx-3350116288{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".labelWrapper.jsx-3350116288{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:2px 0;}", ".labelText.jsx-3350116288{font-size:13px;line-height:15px;margin-top:1px;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".iconWrapper.jsx-3350116288{width:16px;height:16px;margin:2px 4px 0 0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;}", ".item.deactivated.jsx-3350116288{opacity:0.5;cursor:not-allowed;}", `.item.selected.jsx-3350116288{background-color:${_ui.colors.teal100};border:1px solid ${_ui.colors.teal200};color:${_ui.colors.teal900};fill:${_ui.colors.teal800};font-weight:400;}`, ".item.selected.jsx-3350116288:not(.deactivated):hover{background:#cdeae8;border-color:#93c4bf;box-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);}", ".optionsWrapper.jsx-3350116288{width:20px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;}", `.lockWrapper.jsx-3350116288 svg.jsx-3350116288 path.jsx-3350116288{fill:${_ui.colors.grey800};}`, `.lockWrapper.jsx-3350116288{background:${_ui.colors.grey300};-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding:0 2px 0 3px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}`, ".item.selected.jsx-3350116288 .lockWrapper.jsx-3350116288{background:#cbe7e5;}", `.item.selected.jsx-3350116288 .lockWrapper.jsx-3350116288 svg.jsx-3350116288 path.jsx-3350116288{fill:${_ui.colors.teal900};}`];
+_defaultExport.__hash = "3350116288";
 var _default = exports.default = _defaultExport;

package/build/cjs/components/DynamicDimension/DynamicDimension.js

@@ -77,7 +77,7 @@ const DynamicDimension = _ref => {
     checked: !allIsSelected,
     dataTest: 'dynamic-dimension-selection-type-manual'
   }))), !allIsSelected && /*#__PURE__*/_react.default.createElement(_ItemSelector.default, {
-    initialSelected: selectedItems.map(item => ({
+    selectedItems: selectedItems.map(item => ({
       value: item.id,
       label: item.name
     })),

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

@@ -12,116 +12,48 @@ var _GenericIcon = _interopRequireDefault(require("../../assets/DimensionItemIco
 var _index = _interopRequireDefault(require("../../locales/index.js"));
 var _dimensionSelectorHelper = require("../../modules/dimensionSelectorHelper.js");
 var _utils = require("../../modules/utils.js");
+var _SelectedEmptyPlaceholder = require("../DataDimension/SelectedEmptyPlaceholder.js");
+var _SourceEmptyPlaceholder = require("../DataDimension/SourceEmptyPlaceholder.js");
 var _DimensionSelectorStyle = _interopRequireDefault(require("../styles/DimensionSelector.style.js"));
 var _TransferOption = require("../TransferOption.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 LeftHeader = _ref => {
+const ItemSelector = _ref => {
   let {
-    filter,
-    setFilter
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: `jsx-${_DimensionSelectorStyle.default.__hash}` + " " + "leftHeader"
-  }, /*#__PURE__*/_react.default.createElement(_ui.InputField, {
-    value: filter,
-    onChange: _ref2 => {
-      let {
-        value
-      } = _ref2;
-      return setFilter(value);
-    },
-    placeholder: _index.default.t('Search'),
-    initialFocus: true,
-    type: 'search'
-  })), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: _DimensionSelectorStyle.default.__hash
-  }, _DimensionSelectorStyle.default));
-};
-LeftHeader.propTypes = {
-  filter: _propTypes.default.string,
-  setFilter: _propTypes.default.func
-};
-const EmptySelection = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
-  className: `jsx-${_DimensionSelectorStyle.default.__hash}` + " " + "emptyList"
-}, _index.default.t('No items selected')), /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: _DimensionSelectorStyle.default.__hash
-}, _DimensionSelectorStyle.default));
-const RightHeader = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
-  className: `jsx-${_DimensionSelectorStyle.default.__hash}` + " " + "rightHeader"
-}, _index.default.t('Selected Items')), /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: _DimensionSelectorStyle.default.__hash
-}, _DimensionSelectorStyle.default));
-const SourceEmptyPlaceholder = _ref3 => {
-  let {
-    loading,
-    filter,
-    options,
-    noItemsMessage
-  } = _ref3;
-  let message = '';
-  if (!loading && !options.length && !filter) {
-    message = noItemsMessage || _index.default.t('No data');
-  } else if (!loading && !options.length && filter) {
-    message = _index.default.t('Nothing found for {{- searchTerm}}', {
-      searchTerm: filter
-    });
-  }
-  return message && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
-    className: `jsx-${_DimensionSelectorStyle.default.__hash}` + " " + "emptyList"
-  }, message), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: _DimensionSelectorStyle.default.__hash
-  }, _DimensionSelectorStyle.default));
-};
-SourceEmptyPlaceholder.propTypes = {
-  filter: _propTypes.default.string,
-  loading: _propTypes.default.bool,
-  noItemsMessage: _propTypes.default.string,
-  options: _propTypes.default.array
-};
-const ItemSelector = _ref4 => {
-  let {
-    initialSelected,
+    selectedItems,
     noItemsMessage,
     onFetch,
     onSelect,
     rightFooter,
     dataTest
-  } = _ref4;
+  } = _ref;
   const [state, setState] = (0, _react.useState)({
-    filter: '',
-    selected: initialSelected,
-    // FIXME: keeping selected in state is redundant, use the initialSelected prop directly instead
-    // The useCallback from onChange should be removed in favor of a regular fn as well
+    searchTerm: '',
     options: [],
     loading: true,
-    nextPage: null // FIXME: Selecting all 50 items from a page prevents the loading of more items.
-    // Implement the solution found in the DataDimension/ItemSelector.js
+    nextPage: 1
   });
-  const setFilter = filter => setState(state => ({
-    ...state,
-    filter
-  }));
-  const setSelected = selected => setState(state => ({
+  const debouncedSearchTerm = (0, _utils.useDebounce)(state.searchTerm, 500);
+  const setSearchTerm = searchTerm => setState(state => ({
     ...state,
-    selected
+    searchTerm
   }));
-  const debouncedFilter = (0, _utils.useDebounce)(state.filter, 200);
   const fetchItems = async page => {
     var _result$dimensionItem;
     setState(state => ({
       ...state,
+      nextPage: page === 1 ? 1 : state.nextPage,
       loading: true
     }));
-    const result = await onFetch(page, state.filter);
-    const newOptions = (_result$dimensionItem = result.dimensionItems) === null || _result$dimensionItem === void 0 ? void 0 : _result$dimensionItem.map(_ref5 => {
+    const result = await onFetch(page, state.searchTerm);
+    const newOptions = (_result$dimensionItem = result.dimensionItems) === null || _result$dimensionItem === void 0 ? void 0 : _result$dimensionItem.map(_ref2 => {
       let {
         id,
         name,
         disabled
-      } = _ref5;
+      } = _ref2;
       return {
         label: name,
         value: id,
@@ -134,71 +66,92 @@ const ItemSelector = _ref4 => {
       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)(() => {
+  (0, _utils.useDidUpdateEffect)(() => {
     fetchItems(1);
-  }, [debouncedFilter]);
-  const onChange = (0, _react.useCallback)(newSelected => {
-    const newSelectedWithLabel = newSelected.map(value => ({
-      value,
-      label: [...state.options, ...state.selected].find(item => item.value === value).label
+  }, [debouncedSearchTerm]);
+  const onChange = selectedIds => {
+    const newSelectedWithLabel = selectedIds.map(id => ({
+      value: id,
+      label: [...state.options, ...selectedItems].find(item => item.value === id).label
     }));
-    setSelected(newSelectedWithLabel);
     onSelect(newSelectedWithLabel);
-  }, [state.options, state.selected]);
-  const onEndReached = (0, _react.useCallback)(() => {
+  };
+  const onEndReached = () => {
     if (state.nextPage) {
       fetchItems(state.nextPage);
     }
-  }, [state.nextPage]);
-  return /*#__PURE__*/_react.default.createElement(_ui.Transfer, {
-    onChange: _ref6 => {
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ui.Transfer, {
+    onChange: _ref3 => {
       let {
         selected
-      } = _ref6;
+      } = _ref3;
       return onChange(selected);
     },
-    selected: state.selected.map(item => item.value),
-    options: [...state.options, ...state.selected],
+    selected: selectedItems.map(item => item.value),
+    options: [...state.options, ...selectedItems],
     loading: state.loading,
     loadingPicked: state.loading,
-    sourceEmptyPlaceholder: /*#__PURE__*/_react.default.createElement(SourceEmptyPlaceholder, {
+    sourceEmptyPlaceholder: /*#__PURE__*/_react.default.createElement(_SourceEmptyPlaceholder.SourceEmptyPlaceholder, {
       loading: state.loading,
-      filter: debouncedFilter,
+      searchTerm: debouncedSearchTerm,
       options: state.options,
       noItemsMessage: noItemsMessage
     }),
     onEndReached: onEndReached,
-    leftHeader: /*#__PURE__*/_react.default.createElement(LeftHeader, {
-      filter: state.filter,
-      setFilter: setFilter
-    }),
+    filterable: true,
+    filterPlaceholder: _index.default.t('Search'),
+    filterablePicked: false,
+    searchTerm: state.searchTerm,
+    onFilterChange: _ref4 => {
+      let {
+        value
+      } = _ref4;
+      return setSearchTerm(value);
+    },
     enableOrderChange: true,
     height: _dimensionSelectorHelper.TRANSFER_HEIGHT,
     optionsWidth: _dimensionSelectorHelper.TRANSFER_OPTIONS_WIDTH,
     selectedWidth: _dimensionSelectorHelper.TRANSFER_SELECTED_WIDTH,
-    selectedEmptyComponent: /*#__PURE__*/_react.default.createElement(EmptySelection, null),
-    rightHeader: /*#__PURE__*/_react.default.createElement(RightHeader, null),
+    selectedEmptyComponent: /*#__PURE__*/_react.default.createElement(_SelectedEmptyPlaceholder.SelectedEmptyPlaceholder, null),
+    rightHeader: /*#__PURE__*/_react.default.createElement("p", {
+      className: `jsx-${_DimensionSelectorStyle.default.__hash}` + " " + "rightHeader"
+    }, _index.default.t('Selected Items')),
     rightFooter: rightFooter,
     renderOption: props => /*#__PURE__*/_react.default.createElement(_TransferOption.TransferOption, _extends({}, props, {
       icon: _GenericIcon.default,
       dataTest: `${dataTest}-transfer-option`
     })),
     dataTest: `${dataTest}-transfer`
-  });
+  }), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: _DimensionSelectorStyle.default.__hash
+  }, _DimensionSelectorStyle.default));
 };
 ItemSelector.propTypes = {
   onFetch: _propTypes.default.func.isRequired,
   onSelect: _propTypes.default.func.isRequired,
   dataTest: _propTypes.default.string,
-  initialSelected: _propTypes.default.arrayOf(_propTypes.default.exact({
+  noItemsMessage: _propTypes.default.string,
+  rightFooter: _propTypes.default.node,
+  selectedItems: _propTypes.default.arrayOf(_propTypes.default.exact({
     label: _propTypes.default.string.isRequired,
     value: _propTypes.default.string.isRequired
-  })),
-  noItemsMessage: _propTypes.default.string,
-  rightFooter: _propTypes.default.node
+  }))
 };
 ItemSelector.defaultProps = {
-  initialSelected: []
+  selectedItems: []
 };
 var _default = exports.default = ItemSelector;

package/build/cjs/components/styles/DimensionSelector.style.js

@@ -5,6 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _ui = require("@dhis2/ui");
-const _defaultExport = [".transfer-container.jsx-1438110436{min-width:800px;}", `.filterContainer.jsx-1438110436{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-bottom:${_ui.spacers.dp12};margin-top:${_ui.spacers.dp8};}`, `.emptyList.jsx-1438110436{text-align:center;font-size:14px;line-height:16px;margin:${_ui.spacers.dp24} 0 0;color:${_ui.colors.grey700};}`, ".rightHeader.jsx-1438110436{font-size:14px;font-weight:400;}", `.leftHeader.jsx-1438110436{padding:${_ui.spacers.dp12} ${_ui.spacers.dp4};}`, `.info-container.jsx-1438110436{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-bottom:${_ui.spacers.dp8};padding:${_ui.spacers.dp8};background-color:${_ui.colors.grey200};border-radius:3px;}`, `.info-text.jsx-1438110436{padding-left:${_ui.spacers.dp8};color:${_ui.colors.grey900};font-size:12px;line-height:16px;}`, `.calculation-button.jsx-1438110436{margin:${_ui.spacers.dp8} 0;}`];
-_defaultExport.__hash = "1438110436";
+const _defaultExport = [".transfer-container.jsx-1883578365{min-width:800px;}", ".transfer-container.hidden.jsx-1883578365{position:absolute;visibility:hidden;pointer-events:none;}", `.filterContainer.jsx-1883578365{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-bottom:${_ui.spacers.dp12};margin-top:${_ui.spacers.dp8};}`, `.emptyList.jsx-1883578365{text-align:center;font-size:14px;line-height:16px;margin:${_ui.spacers.dp24} 0 0;color:${_ui.colors.grey700};}`, ".rightHeader.jsx-1883578365{font-size:14px;font-weight:500;}", `.leftHeader.jsx-1883578365{padding:${_ui.spacers.dp8} 0;}`, `.info-container.jsx-1883578365{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-bottom:${_ui.spacers.dp8};padding:${_ui.spacers.dp8};background-color:${_ui.colors.grey200};border-radius:3px;}`, `.info-text.jsx-1883578365{padding-left:${_ui.spacers.dp8};color:${_ui.colors.grey900};font-size:12px;line-height:16px;}`, `.calculation-button.jsx-1883578365{margin:${_ui.spacers.dp8} 0;}`];
+_defaultExport.__hash = "1883578365";
 var _default = exports.default = _defaultExport;

package/build/cjs/locales/en/translations.json

@@ -45,11 +45,6 @@
     "No data elements found": "No data elements found",
     "Drag items here, or double click in the list, to start building a calculation formula": "Drag items here, or double click in the list, to start building a calculation formula",
     "Math operators": "Math operators",
-    "Data Type": "Data Type",
-    "Only {{dataType}} can be used in {{visType}}": "Only {{dataType}} can be used in {{visType}}",
-    "All types": "All types",
-    "Disaggregation": "Disaggregation",
-    "No data": "No data",
     "Expression description": "Expression description",
     "Error loading value": "Error loading value",
     "None": "None",
@@ -98,9 +93,24 @@
     "{{ offsetPeriodType }} × {{ offsetPeriods }}": "{{ offsetPeriodType }} × {{ offsetPeriods }}",
     "Expression": "Expression",
     "Filter": "Filter",
+    "All available options are already selected": "All available options are already selected",
+    "No available options for this item": "No available options for this item",
+    "Search by option name": "Search by option name",
+    "Back to all items": "Back to all items",
+    "Options": "Options",
+    "Selected items": "Selected items",
+    "Data Type": "Data Type",
+    "Only {{dataType}} can be used in {{visType}}": "Only {{dataType}} can be used in {{visType}}",
+    "All types": "All types",
+    "Disaggregation": "Disaggregation",
+    "No data": "No data",
     "Search by data item name": "Search by data item name",
-    "No items selected": "No items selected",
     "Selected Items": "Selected Items",
+    "All available items are already selected": "All available items are already selected",
+    "Calculation": "Calculation",
+    "Metric type": "Metric type",
+    "All metrics": "All metrics",
+    "No items selected": "No items selected",
     "No indicators found": "No indicators found",
     "No data sets found": "No data sets found",
     "No event data items found": "No event data items found",
@@ -112,9 +122,7 @@
     "No program indicators found for \"{{- searchTerm}}\"": "No program indicators found for \"{{- searchTerm}}\"",
     "No calculations found for \"{{- searchTerm}}\"": "No calculations found for \"{{- searchTerm}}\"",
     "Nothing found for \"{{- searchTerm}}\"": "Nothing found for \"{{- searchTerm}}\"",
-    "Calculation": "Calculation",
-    "Metric type": "Metric type",
-    "All metrics": "All metrics",
+    "Click to choose from available options": "Click to choose from available options",
     "Move to {{axisName}}": "Move to {{axisName}}",
     "Add to {{axisName}}": "Add to {{axisName}}",
     "Not available for {{visualizationType}}": "Not available for {{visualizationType}}",
@@ -131,7 +139,6 @@
     "Manually select items...": "Manually select items...",
     "Nothing found in {{- dimensionTitle}}": "Nothing found in {{- dimensionTitle}}",
     "Search": "Search",
-    "Nothing found for {{- searchTerm}}": "Nothing found for {{- searchTerm}}",
     "Delete {{fileType}}": "Delete {{fileType}}",
     "This {{fileType}} and related interpretations will be deleted. Continue?": "This {{fileType}} and related interpretations will be deleted. Continue?",
     "Delete": "Delete",
@@ -219,7 +226,6 @@
     "No line lists found. Click New line list to get started.": "No line lists found. Click New line list to get started.",
     "No line lists found. Try adjusting your search or filter options to find what you're looking for.": "No line lists found. Try adjusting your search or filter options to find what you're looking for.",
     "New line list": "New line list",
-    "Options": "Options",
     "Hide": "Hide",
     "{{count}} org units": "{{count}} org unit",
     "{{count}} org units_plural": "{{count}} org units",
@@ -363,6 +369,7 @@
     "Program indicators": "Program indicators",
     "Program indicator": "Program indicator",
     "Calculations": "Calculations",
+    "Option": "Option",
     "Number": "Number",
     "Formula is empty. Add items to the formula from the lists on the left.": "Formula is empty. Add items to the formula from the lists on the left.",
     "Consecutive math operators": "Consecutive math operators",

package/build/cjs/modules/dataTypes.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.dataTypeMap = exports.TOTALS = exports.SUB_GROUP_METRIC = exports.SUB_GROUP_DETAIL = exports.DIMENSION_TYPE_PROGRAM_INDICATOR = exports.DIMENSION_TYPE_PROGRAM_DATA_ELEMENT = exports.DIMENSION_TYPE_PROGRAM_ATTRIBUTE = exports.DIMENSION_TYPE_PERIOD = exports.DIMENSION_TYPE_ORGANISATION_UNIT_GROUP_SET = exports.DIMENSION_TYPE_ORGANISATION_UNIT = exports.DIMENSION_TYPE_INDICATOR = exports.DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM = exports.DIMENSION_TYPE_EVENT_DATA_ITEM = exports.DIMENSION_TYPE_DATA_SET = exports.DIMENSION_TYPE_DATA_ELEMENT_OPERAND = exports.DIMENSION_TYPE_DATA_ELEMENT_GROUP_SET = exports.DIMENSION_TYPE_DATA_ELEMENT = exports.DIMENSION_TYPE_DATA = exports.DIMENSION_TYPE_CATEGORY_OPTION_GROUP_SET = exports.DIMENSION_TYPE_CATEGORY = exports.DIMENSION_TYPE_ALL = exports.DETAIL = exports.DEFAULT_DATATYPE_ID = void 0;
+exports.dataTypeMap = exports.TOTALS = exports.SUB_GROUP_METRIC = exports.SUB_GROUP_DETAIL = exports.DIMENSION_TYPE_PROGRAM_INDICATOR = exports.DIMENSION_TYPE_PROGRAM_DATA_ELEMENT_OPTION = exports.DIMENSION_TYPE_PROGRAM_DATA_ELEMENT = exports.DIMENSION_TYPE_PROGRAM_ATTRIBUTE_OPTION = exports.DIMENSION_TYPE_PROGRAM_ATTRIBUTE = exports.DIMENSION_TYPE_PERIOD = exports.DIMENSION_TYPE_ORGANISATION_UNIT_GROUP_SET = exports.DIMENSION_TYPE_ORGANISATION_UNIT = exports.DIMENSION_TYPE_INDICATOR = exports.DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM = exports.DIMENSION_TYPE_EVENT_DATA_ITEM = exports.DIMENSION_TYPE_DATA_SET = exports.DIMENSION_TYPE_DATA_ELEMENT_OPERAND = exports.DIMENSION_TYPE_DATA_ELEMENT_GROUP_SET = exports.DIMENSION_TYPE_DATA_ELEMENT = exports.DIMENSION_TYPE_DATA = exports.DIMENSION_TYPE_CATEGORY_OPTION_GROUP_SET = exports.DIMENSION_TYPE_CATEGORY = exports.DIMENSION_TYPE_ALL = exports.DETAIL = exports.DEFAULT_DATATYPE_ID = void 0;
 exports.defaultGroupDetail = defaultGroupDetail;
 exports.defaultGroupId = defaultGroupId;
 var _index = _interopRequireDefault(require("../locales/index.js"));
@@ -15,7 +15,9 @@ const DIMENSION_TYPE_DATA_SET = exports.DIMENSION_TYPE_DATA_SET = 'DATA_SET';
 const DIMENSION_TYPE_EVENT_DATA_ITEM = exports.DIMENSION_TYPE_EVENT_DATA_ITEM = 'EVENT_DATA_ITEM';
 const DIMENSION_TYPE_PROGRAM_INDICATOR = exports.DIMENSION_TYPE_PROGRAM_INDICATOR = 'PROGRAM_INDICATOR';
 const DIMENSION_TYPE_PROGRAM_DATA_ELEMENT = exports.DIMENSION_TYPE_PROGRAM_DATA_ELEMENT = 'PROGRAM_DATA_ELEMENT';
+const DIMENSION_TYPE_PROGRAM_DATA_ELEMENT_OPTION = exports.DIMENSION_TYPE_PROGRAM_DATA_ELEMENT_OPTION = 'PROGRAM_DATA_ELEMENT_OPTION';
 const DIMENSION_TYPE_PROGRAM_ATTRIBUTE = exports.DIMENSION_TYPE_PROGRAM_ATTRIBUTE = 'PROGRAM_ATTRIBUTE';
+const DIMENSION_TYPE_PROGRAM_ATTRIBUTE_OPTION = exports.DIMENSION_TYPE_PROGRAM_ATTRIBUTE_OPTION = 'PROGRAM_ATTRIBUTE_OPTION';
 const DIMENSION_TYPE_DATA_ELEMENT_OPERAND = exports.DIMENSION_TYPE_DATA_ELEMENT_OPERAND = 'DATA_ELEMENT_OPERAND';
 const DIMENSION_TYPE_CATEGORY = exports.DIMENSION_TYPE_CATEGORY = 'CATEGORY';
 const DIMENSION_TYPE_CATEGORY_OPTION_GROUP_SET = exports.DIMENSION_TYPE_CATEGORY_OPTION_GROUP_SET = 'CATEGORY_OPTION_GROUP_SET';

package/build/cjs/modules/dimensionListItem.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getIcon = exports.getDimensionType = void 0;
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
 var _ui = require("@dhis2/ui");
 var _react = _interopRequireDefault(require("react"));
 var _DataElementIcon = _interopRequireDefault(require("../assets/DimensionItemIcons/DataElementIcon.js"));
@@ -29,6 +30,9 @@ const getDimensionType = _ref => {
     case _dataTypes.DIMENSION_TYPE_PROGRAM_DATA_ELEMENT:
     case _dataTypes.DIMENSION_TYPE_PROGRAM_ATTRIBUTE:
       return _dataTypes.dataTypeMap[_dataTypes.DIMENSION_TYPE_EVENT_DATA_ITEM].getItemName();
+    case _dataTypes.DIMENSION_TYPE_PROGRAM_ATTRIBUTE_OPTION:
+    case _dataTypes.DIMENSION_TYPE_PROGRAM_DATA_ELEMENT_OPTION:
+      return _d2I18n.default.t('Option');
     default:
       return (_dataTypes$type = _dataTypes.dataTypeMap[type]) === null || _dataTypes$type === void 0 ? void 0 : _dataTypes$type.getItemName();
   }

package/build/es/__demo__/DimensionsPanel.stories.js

@@ -13,13 +13,16 @@ const fixedDimensions = [{
 }];
 const dynamicDimensions = [{
   id: '0000001',
-  name: 'One'
+  name: 'Dietary diversity score based on variety of consumed food groups over a weekly period'
 }, {
   id: '0000002',
-  name: 'Two'
+  name: 'Healthcare services access and utilization frequency including preventive check-ups and specialist care'
 }, {
   id: '0000003',
-  name: 'Three'
+  name: 'Sleep quality index incorporating duration, time to sleep, frequency of awakenings, and restfulness'
+}, {
+  id: '0000004',
+  name: 'Malaria incidence rate'
 }];
 const onDimensionClick = () => alert('click');
 export default {
@@ -105,4 +108,25 @@ export const WithMenu = () => {
 };
 WithMenu.story = {
   name: 'with menu'
+};
+export const TextWrapping = () => {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '260px',
+      height: '400px',
+      borderInlineEnd: '1px dotted #CCC',
+      resize: 'both',
+      overflow: 'auto'
+    }
+  }, /*#__PURE__*/React.createElement(DimensionsPanel, {
+    dimensions: [...fixedDimensions, ...dynamicDimensions],
+    onDimensionClick: onDimensionClick,
+    onDimensionOptionsClick: () => alert('options click'),
+    recommendedDimension: dimension => dimension === '0000002',
+    lockedDimension: dimension => dimension === '0000003',
+    selectedIds: ['0000003', '0000002']
+  }));
+};
+TextWrapping.story = {
+  name: 'text wrapping'
 };

package/build/es/__demo__/FileMenu.stories.js

@@ -17,11 +17,9 @@ const visObject = {
   id: 'a8LrqsBQlHP',
   created: '2012-11-05T09:17:23.388',
   name: 'ANC: 1-3 dropout rate Yearly',
-  publicAccess: '--------',
   displayDescription: 'some _italic (10%)_ and some *bold (10%)*',
   displayName: 'ANC: 1-3 dropout rate Yearly',
   description: 'some _italic (10%)_ and some *bold (10%)*',
-  externalAccess: false,
   access: {
     read: true,
     update: true,
@@ -32,13 +30,7 @@ const visObject = {
   },
   lastUpdatedBy: user,
   user,
-  translations: [],
-  userAccesses: [{
-    access: 'rw------',
-    displayName: 'John Barnes',
-    id: 'DXyJmlo9rge',
-    userUid: 'DXyJmlo9rge'
-  }]
+  translations: []
 };
 const visReadonlyObject = {
   ...visObject,