From b5664bf82ec8a19fe7603cadb7d74b5aba33887c Mon Sep 17 00:00:00 2001
From: Bruno Raimbault <bruno@dhis2.org>
Date: Tue, 10 Mar 2026 10:00:19 +0100
Subject: [PATCH 1/5] feat: add height property to DataDimension

---
 src/components/DataDimension/DataDimension.js                 | 4 ++++
 .../DataDimension/ItemOptionsSelector/ItemOptionsSelector.js  | 4 +++-
 src/components/DataDimension/ItemSelector/ItemSelector.js     | 4 +++-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/DataDimension/DataDimension.js b/src/components/DataDimension/DataDimension.js
index 61b372a14..c69fe1c29 100644
--- a/src/components/DataDimension/DataDimension.js
+++ b/src/components/DataDimension/DataDimension.js
@@ -31,6 +31,7 @@ const DataDimension = ({
     infoBoxMessage,
     onCalculationSave,
     visType,
+    height,
 }) => {
     const { serverVersion } = useConfig()
 
@@ -130,6 +131,7 @@ const DataDimension = ({
                 infoDataItem={infoDataItem}
                 setInfoDataItem={setInfoDataItem}
                 onEditClick={onEditClick}
+                height={height}
             />
             {currentDataItem && (
                 <ItemOptionsSelector
@@ -143,6 +145,7 @@ const DataDimension = ({
                     setInfoDataItem={setInfoDataItem}
                     onClose={() => setCurrentDataItem()}
                     onEditClick={onEditClick}
+                    height={height}
                 />
             )}
             {infoDataItem && (
@@ -172,6 +175,7 @@ DataDimension.propTypes = {
     onSelect: PropTypes.func.isRequired,
     currentUser: PropTypes.object,
     enabledDataTypes: PropTypes.array,
+    height: PropTypes.string,
     infoBoxMessage: PropTypes.string,
     visType: PropTypes.string,
     onCalculationSave: PropTypes.func,
diff --git a/src/components/DataDimension/ItemOptionsSelector/ItemOptionsSelector.js b/src/components/DataDimension/ItemOptionsSelector/ItemOptionsSelector.js
index 6094025ce..783bbdda1 100644
--- a/src/components/DataDimension/ItemOptionsSelector/ItemOptionsSelector.js
+++ b/src/components/DataDimension/ItemOptionsSelector/ItemOptionsSelector.js
@@ -54,6 +54,7 @@ export const ItemOptionsSelector = ({
     onSelect,
     onClose,
     dataTest,
+    height = TRANSFER_HEIGHT,
 }) => {
     const [state, setState] = useState({
         searchTerm: '',
@@ -236,7 +237,7 @@ export const ItemOptionsSelector = ({
                     <p className="rightHeader">{i18n.t('Selected items')}</p>
                 }
                 enableOrderChange
-                height={TRANSFER_HEIGHT}
+                height={height}
                 optionsWidth={TRANSFER_OPTIONS_WIDTH}
                 selectedWidth={TRANSFER_SELECTED_WIDTH}
                 selectedEmptyComponent={<SelectedEmptyPlaceholder />}
@@ -282,6 +283,7 @@ ItemOptionsSelector.propTypes = {
     onClose: PropTypes.func.isRequired,
     onSelect: PropTypes.func.isRequired,
     dataTest: PropTypes.string,
+    height: PropTypes.string,
     infoDataItem: PropTypes.object,
     itemsRef: PropTypes.object,
     selectedItems: PropTypes.arrayOf(
diff --git a/src/components/DataDimension/ItemSelector/ItemSelector.js b/src/components/DataDimension/ItemSelector/ItemSelector.js
index bf450c92b..bf080b27f 100644
--- a/src/components/DataDimension/ItemSelector/ItemSelector.js
+++ b/src/components/DataDimension/ItemSelector/ItemSelector.js
@@ -136,6 +136,7 @@ const ItemSelector = ({
     onEditClick,
     isOptionViewMode,
     supportsEDI,
+    height = TRANSFER_HEIGHT,
 }) => {
     const [state, setState] = useState({
         searchTerm: '',
@@ -412,7 +413,7 @@ const ItemSelector = ({
                     ) : undefined
                 }
                 enableOrderChange
-                height={TRANSFER_HEIGHT}
+                height={height}
                 optionsWidth={TRANSFER_OPTIONS_WIDTH}
                 selectedWidth={TRANSFER_SELECTED_WIDTH}
                 selectedEmptyComponent={<SelectedEmptyPlaceholder />}
@@ -464,6 +465,7 @@ ItemSelector.propTypes = {
     currentCalculation: PropTypes.object,
     dataTest: PropTypes.string,
     dataTypes: PropTypes.array,
+    height: PropTypes.string,
     infoBoxMessage: PropTypes.string,
     infoDataItem: PropTypes.object,
     isOptionViewMode: PropTypes.bool,

From e5023b344876328234ba68c6819ffa843ca34874 Mon Sep 17 00:00:00 2001
From: Bruno Raimbault <bruno@dhis2.org>
Date: Tue, 10 Mar 2026 11:10:08 +0100
Subject: [PATCH 2/5] feat: add height property to CalculationModal

---
 .../DataDimension/Calculation/CalculationModal.js      |  3 +++
 .../DataDimension/Calculation/DataElementSelector.js   | 10 +++++++++-
 .../DataDimension/ItemSelector/ItemSelector.js         |  3 +++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/DataDimension/Calculation/CalculationModal.js b/src/components/DataDimension/Calculation/CalculationModal.js
index 2619bcd04..df326af24 100644
--- a/src/components/DataDimension/Calculation/CalculationModal.js
+++ b/src/components/DataDimension/Calculation/CalculationModal.js
@@ -48,6 +48,7 @@ const CalculationModal = ({
     onClose,
     onDelete,
     displayNameProp,
+    height,
 }) => {
     const { show: showError } = useAlert((error) => error, { critical: true })
     const mutationParams = { onError: (error) => showError(error) }
@@ -311,6 +312,7 @@ const CalculationModal = ({
                                 <DataElementSelector
                                     displayNameProp={displayNameProp}
                                     onDoubleClick={addItem}
+                                    height={height}
                                 />
                                 <MathOperatorSelector onDoubleClick={addItem} />
                             </div>
@@ -484,6 +486,7 @@ CalculationModal.propTypes = {
         id: PropTypes.string,
         name: PropTypes.string,
     }),
+    height: PropTypes.string,
 }
 
 export default CalculationModal
diff --git a/src/components/DataDimension/Calculation/DataElementSelector.js b/src/components/DataDimension/Calculation/DataElementSelector.js
index 123fe20fd..a18d7d65f 100644
--- a/src/components/DataDimension/Calculation/DataElementSelector.js
+++ b/src/components/DataDimension/Calculation/DataElementSelector.js
@@ -23,6 +23,8 @@ import {
 import DataElementOption from './DataElementOption.js'
 import styles from './styles/DataElementSelector.style.js'
 
+const SCROLLBOX_HEIGHT = 337
+
 const getOptions = () => ({
     [TOTALS]: i18n.t('Totals only'),
     [DETAIL]: i18n.t('Details only'),
@@ -123,7 +125,11 @@ DisaggregationSelector.propTypes = {
     onChange: PropTypes.func.isRequired,
 }
 
-const DataElementSelector = ({ displayNameProp, onDoubleClick }) => {
+const DataElementSelector = ({
+    displayNameProp,
+    onDoubleClick,
+    height = SCROLLBOX_HEIGHT,
+}) => {
     const dataEngine = useDataEngine()
 
     const [searchTerm, setSearchTerm] = useState('')
@@ -271,6 +277,7 @@ const DataElementSelector = ({ displayNameProp, onDoubleClick }) => {
                 <div
                     className="dimension-list-scrollbox"
                     ref={rootRef}
+                    style={{ height }}
                     onScroll={() => {
                         if (isSorting) {
                             rootRef.current.scrollTo({
@@ -319,6 +326,7 @@ const DataElementSelector = ({ displayNameProp, onDoubleClick }) => {
 DataElementSelector.propTypes = {
     displayNameProp: PropTypes.string.isRequired,
     onDoubleClick: PropTypes.func.isRequired,
+    height: PropTypes.string,
 }
 
 export default DataElementSelector
diff --git a/src/components/DataDimension/ItemSelector/ItemSelector.js b/src/components/DataDimension/ItemSelector/ItemSelector.js
index bf080b27f..f81961f35 100644
--- a/src/components/DataDimension/ItemSelector/ItemSelector.js
+++ b/src/components/DataDimension/ItemSelector/ItemSelector.js
@@ -137,6 +137,7 @@ const ItemSelector = ({
     isOptionViewMode,
     supportsEDI,
     height = TRANSFER_HEIGHT,
+    heightCalculation,
 }) => {
     const [state, setState] = useState({
         searchTerm: '',
@@ -452,6 +453,7 @@ const ItemSelector = ({
                     onClose={() => setCurrentCalculation()}
                     onDelete={onDeleteCalculation}
                     displayNameProp={displayNameProp}
+                    height={heightCalculation}
                 />
             )}
             <style jsx>{styles}</style>
@@ -466,6 +468,7 @@ ItemSelector.propTypes = {
     dataTest: PropTypes.string,
     dataTypes: PropTypes.array,
     height: PropTypes.string,
+    heightCalculation: PropTypes.string,
     infoBoxMessage: PropTypes.string,
     infoDataItem: PropTypes.object,
     isOptionViewMode: PropTypes.bool,

From efc37a293ffbe54bf689a7982a572d339bb0eb51 Mon Sep 17 00:00:00 2001
From: Bruno Raimbault <bruno@dhis2.org>
Date: Tue, 10 Mar 2026 11:20:31 +0100
Subject: [PATCH 3/5] feat: add heightCalculation to DataDimension

---
 .../Calculation/styles/DataElementSelector.style.js            | 1 -
 src/components/DataDimension/DataDimension.js                  | 3 +++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/DataDimension/Calculation/styles/DataElementSelector.style.js b/src/components/DataDimension/Calculation/styles/DataElementSelector.style.js
index f3f5211bd..55cc1f03b 100644
--- a/src/components/DataDimension/Calculation/styles/DataElementSelector.style.js
+++ b/src/components/DataDimension/Calculation/styles/DataElementSelector.style.js
@@ -9,7 +9,6 @@ export default css`
     .dimension-list-scrollbox {
         position: relative;
         width: 100%;
-        height: 337px;
         overflow: hidden;
         overflow-y: auto;
         border: 1px solid ${colors.grey400};
diff --git a/src/components/DataDimension/DataDimension.js b/src/components/DataDimension/DataDimension.js
index c69fe1c29..26841dda3 100644
--- a/src/components/DataDimension/DataDimension.js
+++ b/src/components/DataDimension/DataDimension.js
@@ -32,6 +32,7 @@ const DataDimension = ({
     onCalculationSave,
     visType,
     height,
+    heightCalculation,
 }) => {
     const { serverVersion } = useConfig()
 
@@ -132,6 +133,7 @@ const DataDimension = ({
                 setInfoDataItem={setInfoDataItem}
                 onEditClick={onEditClick}
                 height={height}
+                heightCalculation={heightCalculation}
             />
             {currentDataItem && (
                 <ItemOptionsSelector
@@ -176,6 +178,7 @@ DataDimension.propTypes = {
     currentUser: PropTypes.object,
     enabledDataTypes: PropTypes.array,
     height: PropTypes.string,
+    heightCalculation: PropTypes.string,
     infoBoxMessage: PropTypes.string,
     visType: PropTypes.string,
     onCalculationSave: PropTypes.func,

From c9ab0ff77a2da7ee056bcd9b91368dbf7a688676 Mon Sep 17 00:00:00 2001
From: Bruno Raimbault <bruno@dhis2.org>
Date: Tue, 10 Mar 2026 13:15:28 +0100
Subject: [PATCH 4/5] feat: add maxSelections to DataDimension

---
 src/components/DataDimension/DataDimension.js                | 4 ++++
 .../DataDimension/ItemOptionsSelector/ItemOptionsSelector.js | 5 ++++-
 src/components/DataDimension/ItemSelector/ItemSelector.js    | 5 ++++-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/DataDimension/DataDimension.js b/src/components/DataDimension/DataDimension.js
index 26841dda3..c7b38d011 100644
--- a/src/components/DataDimension/DataDimension.js
+++ b/src/components/DataDimension/DataDimension.js
@@ -33,6 +33,7 @@ const DataDimension = ({
     visType,
     height,
     heightCalculation,
+    maxSelections,
 }) => {
     const { serverVersion } = useConfig()
 
@@ -134,6 +135,7 @@ const DataDimension = ({
                 onEditClick={onEditClick}
                 height={height}
                 heightCalculation={heightCalculation}
+                maxSelections={maxSelections}
             />
             {currentDataItem && (
                 <ItemOptionsSelector
@@ -148,6 +150,7 @@ const DataDimension = ({
                     onClose={() => setCurrentDataItem()}
                     onEditClick={onEditClick}
                     height={height}
+                    maxSelections={maxSelections}
                 />
             )}
             {infoDataItem && (
@@ -180,6 +183,7 @@ DataDimension.propTypes = {
     height: PropTypes.string,
     heightCalculation: PropTypes.string,
     infoBoxMessage: PropTypes.string,
+    maxSelections: PropTypes.number,
     visType: PropTypes.string,
     onCalculationSave: PropTypes.func,
 }
diff --git a/src/components/DataDimension/ItemOptionsSelector/ItemOptionsSelector.js b/src/components/DataDimension/ItemOptionsSelector/ItemOptionsSelector.js
index 783bbdda1..87e57a193 100644
--- a/src/components/DataDimension/ItemOptionsSelector/ItemOptionsSelector.js
+++ b/src/components/DataDimension/ItemOptionsSelector/ItemOptionsSelector.js
@@ -55,6 +55,7 @@ export const ItemOptionsSelector = ({
     onClose,
     dataTest,
     height = TRANSFER_HEIGHT,
+    maxSelections,
 }) => {
     const [state, setState] = useState({
         searchTerm: '',
@@ -236,7 +237,7 @@ export const ItemOptionsSelector = ({
                 rightHeader={
                     <p className="rightHeader">{i18n.t('Selected items')}</p>
                 }
-                enableOrderChange
+                enableOrderChange={!maxSelections || maxSelections > 1}
                 height={height}
                 optionsWidth={TRANSFER_OPTIONS_WIDTH}
                 selectedWidth={TRANSFER_SELECTED_WIDTH}
@@ -267,6 +268,7 @@ export const ItemOptionsSelector = ({
                         />
                     )
                 }}
+                maxSelections={maxSelections}
                 dataTest={`${dataTest}-option-view-mode-transfer`}
             />
             <style jsx>{styles}</style>
@@ -286,6 +288,7 @@ ItemOptionsSelector.propTypes = {
     height: PropTypes.string,
     infoDataItem: PropTypes.object,
     itemsRef: PropTypes.object,
+    maxSelections: PropTypes.number,
     selectedItems: PropTypes.arrayOf(
         PropTypes.exact({
             label: PropTypes.string.isRequired,
diff --git a/src/components/DataDimension/ItemSelector/ItemSelector.js b/src/components/DataDimension/ItemSelector/ItemSelector.js
index f81961f35..a4bbb0c74 100644
--- a/src/components/DataDimension/ItemSelector/ItemSelector.js
+++ b/src/components/DataDimension/ItemSelector/ItemSelector.js
@@ -138,6 +138,7 @@ const ItemSelector = ({
     supportsEDI,
     height = TRANSFER_HEIGHT,
     heightCalculation,
+    maxSelections,
 }) => {
     const [state, setState] = useState({
         searchTerm: '',
@@ -413,7 +414,7 @@ const ItemSelector = ({
                         </div>
                     ) : undefined
                 }
-                enableOrderChange
+                enableOrderChange={!maxSelections || maxSelections > 1}
                 height={height}
                 optionsWidth={TRANSFER_OPTIONS_WIDTH}
                 selectedWidth={TRANSFER_SELECTED_WIDTH}
@@ -444,6 +445,7 @@ const ItemSelector = ({
                         /* eslint-enable react/prop-types */
                     />
                 )}
+                maxSelections={maxSelections}
                 dataTest={`${dataTest}-transfer`}
             />
             {currentCalculation && supportsEDI && (
@@ -473,6 +475,7 @@ ItemSelector.propTypes = {
     infoDataItem: PropTypes.object,
     isOptionViewMode: PropTypes.bool,
     itemsRef: PropTypes.object,
+    maxSelections: PropTypes.number,
     noItemsMessage: PropTypes.string,
     rightFooter: PropTypes.node,
     selectedItems: PropTypes.arrayOf(

From 51a283b7bff1ba974970775d16ce594250cf286d Mon Sep 17 00:00:00 2001
From: Bruno Raimbault <bruno@dhis2.org>
Date: Mon, 16 Mar 2026 10:02:41 +0100
Subject: [PATCH 5/5] chore:change SCROLLBOX_HEIGHT to use pixel units

---
 src/components/DataDimension/Calculation/DataElementSelector.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DataDimension/Calculation/DataElementSelector.js b/src/components/DataDimension/Calculation/DataElementSelector.js
index a18d7d65f..36a5b4539 100644
--- a/src/components/DataDimension/Calculation/DataElementSelector.js
+++ b/src/components/DataDimension/Calculation/DataElementSelector.js
@@ -23,7 +23,7 @@ import {
 import DataElementOption from './DataElementOption.js'
 import styles from './styles/DataElementSelector.style.js'
 
-const SCROLLBOX_HEIGHT = 337
+const SCROLLBOX_HEIGHT = '337px'
 
 const getOptions = () => ({
     [TOTALS]: i18n.t('Totals only'),