@dhis2-ui/transfer 9.11.0 → 9.11.1-beta.1

package/build/es/common/get-mode-by-modifier-key.js

@@ -1,4 +1,5 @@
 import { ADD_MODE, RANGE_MODE, REPLACE_MODE } from './modes.js';
+
 /**
  * @param {Object} args
  * @param {bool} args.altKey
@@ -7,7 +8,6 @@ import { ADD_MODE, RANGE_MODE, REPLACE_MODE } from './modes.js';
  * @param {bool} args.metaKey
  * @return {string}
  */
-
 export const getModeByModifierKey = _ref => {
   let {
     altKey,
@@ -18,19 +18,16 @@ export const getModeByModifierKey = _ref => {
   const keys = [altKey, shiftKey, ctrlKey, metaKey];
   const amountKeyPressed = keys.filter(v => v);
   const moreThanOneKeyPressed = amountKeyPressed.length;
-
   if (moreThanOneKeyPressed !== 1) {
     return REPLACE_MODE;
   }
-
   if (altKey || ctrlKey || metaKey) {
     return ADD_MODE;
   }
-
   if (shiftKey) {
     return RANGE_MODE;
-  } // default to replace mode
-
+  }
 
+  // default to replace mode
   return REPLACE_MODE;
 };

package/build/es/common/modes.js

@@ -2,9 +2,10 @@
  * Click modes when clicking on an option with/without
  * a modifier key (ctrl, alt, cmd, shift)
  */
-// no or multiple modifier keys
-export const REPLACE_MODE = 'REPLACE_MODE'; // add/remove options from selection
-
-export const ADD_MODE = 'ADD_MODE'; // create selection range
 
+// no or multiple modifier keys
+export const REPLACE_MODE = 'REPLACE_MODE';
+// add/remove options from selection
+export const ADD_MODE = 'ADD_MODE';
+// create selection range
 export const RANGE_MODE = 'RANGE_MODE';

package/build/es/common/remove-option.js

@@ -1,20 +1,17 @@
 import { findOptionIndex } from './find-option-index.js';
+
 /**
  * @param {Object[]} options
  * @param {Object} option
  * @returns {Object}
  */
-
 export const removeOption = (options, option) => {
   const index = findOptionIndex(options, option);
-
   if (index === -1) {
     return options;
   }
-
   if (index === 0) {
     return options.slice(1);
   }
-
   return [...options.slice(0, index), ...options.slice(index + 1)];
 };

package/build/es/common/toggle-value.js

@@ -5,13 +5,11 @@
  */
 export const toggleValue = (values, value) => {
   const index = values.indexOf(value);
-
   if (index === -1) {
     return [...values, value];
   } else if (index === 0) {
     values.slice(1);
   }
-
   const prevSlice = values.slice(0, index);
   const nextSlice = values.slice(index + 1);
   return [...prevSlice, ...nextSlice];

package/build/es/container.js

@@ -14,7 +14,7 @@ export const Container = _ref => {
   }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3332822660",
     dynamic: [height]
-  }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:".concat(height, ";}")]));
+  }, [`div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:${height};}`]));
 };
 Container.propTypes = {
   height: PropTypes.string.isRequired,

package/build/es/features/display-order/index.js

@@ -15,7 +15,8 @@ When('the user deselects one selected option', () => {
   cy.get('{transfer-actions-removeindividual}').click();
 });
 When('the user deselects multiple selected options', () => {
-  cy.get('{transfer-pickedoptions} {transferoption}') // should take third, then first item
+  cy.get('{transfer-pickedoptions} {transferoption}')
+  // should take third, then first item
   .then($options => {
     const $arr = $options.toArray();
     return [$arr[2], $arr[0]];
@@ -28,7 +29,8 @@ When('the user selects one option', () => {
   cy.get('{transfer-actions-addindividual}').click();
 });
 When('the user selects multiple options', () => {
-  cy.get('{transfer-sourceoptions} {transferoption}') // should take fifth, then first item
+  cy.get('{transfer-sourceoptions} {transferoption}')
+  // should take fifth, then first item
   .then($options => {
     const $arr = $options.toArray();
     return [$arr[4], $arr[0]];
@@ -74,8 +76,9 @@ Then('it should be positioned according to the order of the supplied options', (
       } = _ref5;
       return label === option.label && value === option.value;
     }));
-    expect(selectableSourceOptions).to.eql(originalOptions); // and confirm that the deselected option is in the selectable options list
+    expect(selectableSourceOptions).to.eql(originalOptions);
 
+    // and confirm that the deselected option is in the selectable options list
     const [deselectedOption] = deselectedOptions;
     const hasOption = !!selectableSourceOptions.find(_ref6 => {
       let {

package/build/es/features/filter-options-list/index.js

@@ -1,8 +1,10 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 import { extractOptionFromElement } from '../common/index.js';
-Given('filtering is enabled', () => {// no op
+Given('filtering is enabled', () => {
+  // no op
 });
-Given('the options list is being filtered', () => {// no op
+Given('the options list is being filtered', () => {
+  // no op
 });
 Given('the result is not empty', () => {
   cy.visitStory('Transfer filtering', 'Some Results');
@@ -10,7 +12,8 @@ Given('the result is not empty', () => {
 Given('the result is empty', () => {
   cy.visitStory('Transfer filtering', 'Empty Result');
 });
-Given('a no-result message has been provided', () => {// no op
+Given('a no-result message has been provided', () => {
+  // no op
 });
 Given('the options are being search with a {string} search term', firstCase => {
   if (firstCase === 'uppercase') {
@@ -18,7 +21,6 @@ Given('the options are being search with a {string} search term', firstCase => {
   } else if (firstCase === 'lowercase') {
     cy.visitStory('Transfer filtering', 'Lowercase Search');
   }
-
   cy.get('{transfer-filter} input').then($input => $input.val()).as('firstCaseTerm');
 });
 Given('some options are listed', () => {
@@ -34,13 +36,11 @@ When('the user uses the same search term but {string}', secondCase => {
   cy.all(() => cy.get('@firstCaseTerm'), () => cy.get('{transfer-filter} input')).then(_ref => {
     let [firstCaseTerm, $filterInput] = _ref;
     let secondCaseTerm;
-
     if (secondCase === 'uppercase') {
       secondCaseTerm = firstCaseTerm.toUpperCase();
     } else if (secondCase === 'lowercase') {
       secondCaseTerm = firstCaseTerm.toLowerCase();
     }
-
     cy.wrap($filterInput).clear().type(secondCaseTerm);
   });
 });

package/build/es/features/highlight-range-of-options/index.js

@@ -49,9 +49,14 @@ When('the user highlightes the second options following the highlighted option w
   cy.get('@secondBelowInitiallyHighlighted').clickWith('shift');
 });
 When('the user highlightes the second options following the last highlighted option', () => {
-  cy.get('@initiallyHighlightedMultiple') // last highlighted option
-  .last() // next sibling
-  .next().as('firstBelowLastHighlighted') // second next sibling
+  cy.get('@initiallyHighlightedMultiple')
+  // last highlighted option
+  .last()
+
+  // next sibling
+  .next().as('firstBelowLastHighlighted')
+
+  // second next sibling
   .next().as('secondBelowLastHighlighted').clickWith('shift');
 });
 When('the user {string} clicks a highlighted option', modifierKey => {

package/build/es/features/loading_lists/index.js

@@ -18,12 +18,12 @@ Given('the picked list is not loading', () => {
 Then('the loading indicator should be shown', () => {
   cy.get('@listType').then(listType => {
     const listSelector = listType === 'source' ? '{transfer-leftside}' : '{transfer-rightside}';
-    cy.get("".concat(listSelector, " .loading")).should('exist');
+    cy.get(`${listSelector} .loading`).should('exist');
   });
 });
 Then('the loading indicator should not be shown', () => {
   cy.get('@listType').then(listType => {
     const listSelector = listType === 'source' ? '{transfer-leftside}' : '{transfer-rightside}';
-    cy.get("".concat(listSelector, " .loading")).should('not.exist');
+    cy.get(`${listSelector} .loading`).should('not.exist');
   });
 });

package/build/es/features/notify_at_end_of_list/index.js

@@ -18,7 +18,7 @@ Given('the Transfer does not have enough items to fill the picked list completel
 When('the user scroll to the end of the list', () => {
   cy.get('@listType').then(listType => {
     const listSelector = listType === 'source' ? 'transfer-sourceoptions' : 'transfer-pickedoptions';
-    cy.get("{".concat(listSelector, "-endintersectiondetector}")).scrollIntoView();
+    cy.get(`{${listSelector}-endintersectiondetector}`).scrollIntoView();
   });
 });
 Then('the callback for reaching the end should not be called', () => {

package/build/es/features/reorder-with-buttons/index.js

@@ -1,5 +1,6 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
-Given('reordering of items is enabled', () => {// no op
+Given('reordering of items is enabled', () => {
+  // no op
 });
 Given('the selected list has three items', () => {
   cy.visitStory('Transfer Reorder Buttons', 'Has Some Selected');
@@ -35,7 +36,7 @@ When("the user clicks the 'move down' button", () => {
 });
 Then('the highlighted item should be moved to the {int}. place', next => {
   const index = next - 1;
-  cy.get('@previousValue').then(previousValue => cy.get("[data-value=\"".concat(previousValue, "\"]"))).invoke('index').should('equal', index);
+  cy.get('@previousValue').then(previousValue => cy.get(`[data-value="${previousValue}"]`)).invoke('index').should('equal', index);
 });
 Then("the 'move up' and 'move down' buttons should be disabled", () => {
   cy.get('{transfer-reorderingactions-buttonmoveup}').should('have.attr', 'disabled');

package/build/es/features/transferring-items/index.js

@@ -8,15 +8,18 @@ Given('some options are selected', () => {
   cy.visitStory('Transfer Transferring Items', 'Some Selected');
 });
 Given('one or more items in the options list are highlighted', () => {
-  cy.get('{transfer-sourceoptions} {transferoption}').filter(index => index < 3) // shuffle order so we can check they're added in the right order
+  cy.get('{transfer-sourceoptions} {transferoption}').filter(index => index < 3)
+  // shuffle order so we can check they're added in the right order
   .then($options => cy.wrap([$options[2], $options[0], $options[1]])).each($option => cy.wrap($option).clickWith('ctrl')).then($options => $options.toArray().map(extractOptionFromElement)).as('itemsToBeSelected');
 });
 Given('some items in the options list are highlighted', () => {
-  cy.get('{transfer-sourceoptions} {transferoption}').filter(index => index < 3) // shuffle order so we can check they're added in the right order
+  cy.get('{transfer-sourceoptions} {transferoption}').filter(index => index < 3)
+  // shuffle order so we can check they're added in the right order
   .then($options => cy.wrap([$options[2], $options[0], $options[1]])).each($option => cy.wrap($option).clickWith('ctrl')).then($options => $options.toArray().map(extractOptionFromElement)).as('itemsToBeSelected');
 });
 Given('some items in the selected list are highlighted', () => {
-  cy.get('{transfer-pickedoptions} {transferoption}').filter(index => index < 3) // shuffle order so we can check they're added in the right order
+  cy.get('{transfer-pickedoptions} {transferoption}').filter(index => index < 3)
+  // shuffle order so we can check they're added in the right order
   .then($options => cy.wrap([$options[2], $options[0], $options[1]])).each($option => cy.wrap($option).clickWith('ctrl')).then($options => $options.toArray().map(extractOptionFromElement)).as('itemsToBeDeselected');
 });
 When("the user clicks the 'move to selected list' button", () => {

package/build/es/filter.js

@@ -1,7 +1,7 @@
 import _JSXStyle from "styled-jsx/style";
+import { spacers } from '@dhis2/ui-constants';
 import { Field } from '@dhis2-ui/field';
 import { Input } from '@dhis2-ui/input';
-import { spacers } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
 export const Filter = _ref => {
@@ -18,9 +18,9 @@ export const Filter = _ref => {
   }, /*#__PURE__*/React.createElement(Field, {
     label: label,
     name: dataTest,
-    dataTest: "".concat(dataTest, "-field")
+    dataTest: `${dataTest}-field`
   }, /*#__PURE__*/React.createElement(Input, {
-    dataTest: "".concat(dataTest, "-input"),
+    dataTest: `${dataTest}-input`,
     type: "search",
     placeholder: placeholder,
     value: filter,
@@ -28,7 +28,7 @@ export const Filter = _ref => {
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3679907342",
     dynamic: [spacers.dp8, spacers.dp8]
-  }, ["div.__jsx-style-dynamic-selector{padding-bottom:".concat(spacers.dp8, ";}"), "div.__jsx-style-dynamic-selector:first-child{padding-top:".concat(spacers.dp8, ";}")]));
+  }, [`div.__jsx-style-dynamic-selector{padding-bottom:${spacers.dp8};}`, `div.__jsx-style-dynamic-selector:first-child{padding-top:${spacers.dp8};}`]));
 };
 Filter.propTypes = {
   dataTest: PropTypes.string.isRequired,

package/build/es/icons.js

@@ -10,7 +10,7 @@ export const IconAddAll = _ref => {
     disabled
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
-    className: "jsx-".concat(centerButtonStyles.__hash) + " " + "centerButton"
+    className: `jsx-${centerButtonStyles.__hash}` + " " + "centerButton"
   }, /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
@@ -18,18 +18,18 @@ export const IconAddAll = _ref => {
     viewBox: "0 0 16 16",
     "data-test": dataTest,
     fill: disabled ? theme.disabled : '#404B5A',
-    className: "jsx-".concat(centerButtonStyles.__hash)
+    className: `jsx-${centerButtonStyles.__hash}`
   }, /*#__PURE__*/React.createElement("g", {
     fillRule: "evenodd",
-    className: "jsx-".concat(centerButtonStyles.__hash)
+    className: `jsx-${centerButtonStyles.__hash}`
   }, /*#__PURE__*/React.createElement("polygon", {
     fillRule: "nonzero",
     points: "6 2 4.94 3.06 9.13 7.25 0 7.25 0 8.75 9.13 8.75 4.94 12.94 6 14 12 8",
-    className: "jsx-".concat(centerButtonStyles.__hash)
+    className: `jsx-${centerButtonStyles.__hash}`
   }), /*#__PURE__*/React.createElement("polygon", {
     fillRule: "nonzero",
     points: "10 2 8.94 3.06 13.13 7.25 13.9 8 13.13 8.75 8.94 12.94 10 14 16 8",
-    className: "jsx-".concat(centerButtonStyles.__hash)
+    className: `jsx-${centerButtonStyles.__hash}`
   }))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: centerButtonStyles.__hash
   }, centerButtonStyles));
@@ -44,7 +44,7 @@ export const IconAddIndividual = _ref2 => {
     disabled
   } = _ref2;
   return /*#__PURE__*/React.createElement("div", {
-    className: "jsx-".concat(centerButtonStyles.__hash) + " " + "centerButton"
+    className: `jsx-${centerButtonStyles.__hash}` + " " + "centerButton"
   }, /*#__PURE__*/React.createElement("svg", {
     fill: disabled ? theme.disabled : '#404B5A',
     xmlns: "http://www.w3.org/2000/svg",
@@ -52,10 +52,10 @@ export const IconAddIndividual = _ref2 => {
     height: "16",
     viewBox: "0 0 16 16",
     "data-test": dataTest,
-    className: "jsx-".concat(centerButtonStyles.__hash)
+    className: `jsx-${centerButtonStyles.__hash}`
   }, /*#__PURE__*/React.createElement("polygon", {
     points: "8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8",
-    className: "jsx-".concat(centerButtonStyles.__hash)
+    className: `jsx-${centerButtonStyles.__hash}`
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: centerButtonStyles.__hash
   }, centerButtonStyles));
@@ -70,7 +70,7 @@ export const IconRemoveAll = _ref3 => {
     disabled
   } = _ref3;
   return /*#__PURE__*/React.createElement("div", {
-    className: "jsx-".concat(centerButtonStyles.__hash) + " " + "centerButton"
+    className: `jsx-${centerButtonStyles.__hash}` + " " + "centerButton"
   }, /*#__PURE__*/React.createElement("svg", {
     fill: disabled ? theme.disabled : '#404B5A',
     width: "16px",
@@ -78,20 +78,20 @@ export const IconRemoveAll = _ref3 => {
     viewBox: "0 0 16 16",
     "data-test": dataTest,
     xmlns: "http://www.w3.org/2000/svg",
-    className: "jsx-".concat(centerButtonStyles.__hash)
+    className: `jsx-${centerButtonStyles.__hash}`
   }, /*#__PURE__*/React.createElement("g", {
     fillRule: "evenodd",
-    className: "jsx-".concat(centerButtonStyles.__hash)
+    className: `jsx-${centerButtonStyles.__hash}`
   }, /*#__PURE__*/React.createElement("polygon", {
     fillRule: "nonzero",
     points: "10 2 8.94 3.06 13.13 7.25 4 7.25 4 8.75 13.13 8.75 8.94 12.94 10 14 16 8",
     transform: "matrix(-1 0 0 1 20 0)",
-    className: "jsx-".concat(centerButtonStyles.__hash)
+    className: `jsx-${centerButtonStyles.__hash}`
   }), /*#__PURE__*/React.createElement("polygon", {
     fillRule: "nonzero",
     points: "1.06 2 0 3.06 4.19 7.25 4.96 8 4.19 8.75 0 12.94 1.06 14 7.06 8",
     transform: "matrix(-1 0 0 1 7.06 0)",
-    className: "jsx-".concat(centerButtonStyles.__hash)
+    className: `jsx-${centerButtonStyles.__hash}`
   }))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: centerButtonStyles.__hash
   }, centerButtonStyles));
@@ -106,7 +106,7 @@ export const IconRemoveIndividual = _ref4 => {
     disabled
   } = _ref4;
   return /*#__PURE__*/React.createElement("div", {
-    className: "jsx-".concat(centerButtonStyles.__hash) + " " + "centerButton"
+    className: `jsx-${centerButtonStyles.__hash}` + " " + "centerButton"
   }, /*#__PURE__*/React.createElement("svg", {
     fill: disabled ? theme.disabled : '#404B5A',
     xmlns: "http://www.w3.org/2000/svg",
@@ -114,11 +114,11 @@ export const IconRemoveIndividual = _ref4 => {
     height: "16",
     viewBox: "0 0 16 16",
     "data-test": dataTest,
-    className: "jsx-".concat(centerButtonStyles.__hash)
+    className: `jsx-${centerButtonStyles.__hash}`
   }, /*#__PURE__*/React.createElement("polygon", {
     points: "8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8",
     transform: "matrix(-1 0 0 1 16 0)",
-    className: "jsx-".concat(centerButtonStyles.__hash)
+    className: `jsx-${centerButtonStyles.__hash}`
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: centerButtonStyles.__hash
   }, centerButtonStyles));

package/build/es/left-footer.js

@@ -14,7 +14,7 @@ export const LeftFooter = _ref => {
   }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3629116366",
     dynamic: [borderColor, spacers.dp8]
-  }, ["div.__jsx-style-dynamic-selector{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;border-top:1px solid ".concat(borderColor, ";padding:0 ").concat(spacers.dp8, ";}")]));
+  }, [`div.__jsx-style-dynamic-selector{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;border-top:1px solid ${borderColor};padding:0 ${spacers.dp8};}`]));
 };
 LeftFooter.propTypes = {
   children: PropTypes.node,

package/build/es/left-header.js

@@ -14,7 +14,7 @@ export const LeftHeader = _ref => {
   }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2175954399",
     dynamic: [borderColor, spacers.dp8]
-  }, ["div.__jsx-style-dynamic-selector{border-bottom:1px solid ".concat(borderColor, ";-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;padding:0 ").concat(spacers.dp8, ";}")]));
+  }, [`div.__jsx-style-dynamic-selector{border-bottom:1px solid ${borderColor};-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;padding:0 ${spacers.dp8};}`]));
 };
 LeftHeader.propTypes = {
   children: PropTypes.node,

package/build/es/left-side.js

@@ -19,7 +19,7 @@ export const LeftSide = _ref => {
   '', /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "4143353612",
     dynamic: [backgroundColor, borderRadius, borderColor, width]
-  }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background-color:".concat(backgroundColor, ";border-radius:").concat(borderRadius, ";border:1px solid ").concat(borderColor, ";min-height:240px;max-width:100%;width:").concat(width, ";}")]));
+  }, [`div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background-color:${backgroundColor};border-radius:${borderRadius};border:1px solid ${borderColor};min-height:240px;max-width:100%;width:${width};}`]));
 };
 LeftSide.propTypes = {
   width: PropTypes.string.isRequired,

package/build/es/options-container.js

@@ -1,6 +1,6 @@
 import _JSXStyle from "styled-jsx/style";
-import { CircularLoader } from '@dhis2-ui/loader';
 import { spacers } from '@dhis2/ui-constants';
+import { CircularLoader } from '@dhis2-ui/loader';
 import PropTypes from 'prop-types';
 import React, { Fragment, useRef } from 'react';
 import { EndIntersectionDetector } from './end-intersection-detector.js';
@@ -37,20 +37,21 @@ export const OptionsContainer = _ref => {
     const highlighted = !!highlightedOptions.find(highlightedSourceOption => highlightedSourceOption === option.value);
     return /*#__PURE__*/React.createElement(Fragment, {
       key: option.value
-    }, renderOption({ ...option,
+    }, renderOption({
+      ...option,
       ...getOptionClickHandlers(option, selectionHandler, toggleHighlightedOption),
       highlighted,
       selected
     }));
   }), onEndReached && /*#__PURE__*/React.createElement(EndIntersectionDetector, {
-    dataTest: "".concat(dataTest, "-endintersectiondetector"),
-    key: "key-".concat(resizeCounter),
+    dataTest: `${dataTest}-endintersectiondetector`,
+    key: `key-${resizeCounter}`,
     rootRef: optionsRef,
     onEndReached: onEndReached
   }))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3254058061",
     dynamic: [spacers.dp4]
-  }, [".optionsContainer.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:".concat(spacers.dp4, " 0;position:relative;overflow:hidden;}"), ".container.__jsx-style-dynamic-selector{overflow-y:auto;height:100%;}", ".loading.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;width:100%;-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;position:absolute;z-index:2;top:0;inset-inline-start:0;}", ".content-container.__jsx-style-dynamic-selector{z-index:1;position:relative;}", ".loading.__jsx-style-dynamic-selector+.container.__jsx-style-dynamic-selector .content-container.__jsx-style-dynamic-selector{-webkit-filter:blur(2px);filter:blur(2px);}"]));
+  }, [`.optionsContainer.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:${spacers.dp4} 0;position:relative;overflow:hidden;}`, ".container.__jsx-style-dynamic-selector{overflow-y:auto;height:100%;}", ".loading.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;width:100%;-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;position:absolute;z-index:2;top:0;inset-inline-start:0;}", ".content-container.__jsx-style-dynamic-selector{z-index:1;position:relative;}", ".loading.__jsx-style-dynamic-selector+.container.__jsx-style-dynamic-selector .content-container.__jsx-style-dynamic-selector{-webkit-filter:blur(2px);filter:blur(2px);}"]));
 };
 OptionsContainer.defaultProps = {
   selected: false

package/build/es/picked-options.js

@@ -23,7 +23,7 @@ export const PickedOptions = _ref => {
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "392419471",
     dynamic: [spacers.dp4]
-  }, [".container.__jsx-style-dynamic-selector{padding:".concat(spacers.dp4, " 0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow-y:auto;}"), ".content-container.__jsx-style-dynamic-selector{position:relative;}"]));
+  }, [`.container.__jsx-style-dynamic-selector{padding:${spacers.dp4} 0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow-y:auto;}`, ".content-container.__jsx-style-dynamic-selector{position:relative;}"]));
 };
 PickedOptions.propTypes = {
   children: PropTypes.node.isRequired,

package/build/es/remove-all.js

@@ -15,7 +15,7 @@ export const RemoveAll = _ref => {
     onClick: onClick,
     icon: /*#__PURE__*/React.createElement(IconRemoveAll, {
       disabled: disabled,
-      dataTest: "".concat(dataTest, "-iconremoveall")
+      dataTest: `${dataTest}-iconremoveall`
     })
   }, label);
 };

package/build/es/remove-individual.js

@@ -15,7 +15,7 @@ export const RemoveIndividual = _ref => {
     onClick: onClick,
     icon: /*#__PURE__*/React.createElement(IconRemoveIndividual, {
       disabled: disabled,
-      dataTest: "".concat(dataTest, "-iconremoveindividual")
+      dataTest: `${dataTest}-iconremoveindividual`
     })
   }, label);
 };

package/build/es/reordering-actions.js

@@ -1,6 +1,6 @@
 import _JSXStyle from "styled-jsx/style";
-import { Button } from '@dhis2-ui/button';
 import { spacers } from '@dhis2/ui-constants';
+import { Button } from '@dhis2-ui/button';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { IconMoveDown, IconMoveUp } from './icons.js';
@@ -19,24 +19,24 @@ export const ReorderingActions = _ref => {
     small: true,
     disabled: disabledDown,
     onClick: () => !disabledDown && onChangeDown(event),
-    dataTest: "".concat(dataTest, "-buttonmovedown"),
+    dataTest: `${dataTest}-buttonmovedown`,
     icon: /*#__PURE__*/React.createElement(IconMoveDown, {
-      dataTest: "".concat(dataTest, "-iconmovedown"),
+      dataTest: `${dataTest}-iconmovedown`,
       disabled: disabledDown
     })
   }), /*#__PURE__*/React.createElement(Button, {
     small: true,
     disabled: disabledUp,
     onClick: () => !disabledUp && onChangeUp(event),
-    dataTest: "".concat(dataTest, "-buttonmoveup"),
+    dataTest: `${dataTest}-buttonmoveup`,
     icon: /*#__PURE__*/React.createElement(IconMoveUp, {
-      dataTest: "".concat(dataTest, "-iconmoveup"),
+      dataTest: `${dataTest}-iconmoveup`,
       disabled: disabledUp
     })
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "874845231",
     dynamic: [spacers.dp8, spacers.dp8, spacers.dp8]
-  }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;padding-top:".concat(spacers.dp8, ";}"), "div.__jsx-style-dynamic-selector:last-child{padding-bottom:".concat(spacers.dp8, ";}"), "div.__jsx-style-dynamic-selector>button:first-child{margin-inline-start:".concat(spacers.dp8, ";}")]));
+  }, [`div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;padding-top:${spacers.dp8};}`, `div.__jsx-style-dynamic-selector:last-child{padding-bottom:${spacers.dp8};}`, `div.__jsx-style-dynamic-selector>button:first-child{margin-inline-start:${spacers.dp8};}`]));
 };
 ReorderingActions.propTypes = {
   dataTest: PropTypes.string.isRequired,

package/build/es/right-footer.js

@@ -14,7 +14,7 @@ export const RightFooter = _ref => {
   }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3629116366",
     dynamic: [borderColor, spacers.dp8]
-  }, ["div.__jsx-style-dynamic-selector{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;border-top:1px solid ".concat(borderColor, ";padding:0 ").concat(spacers.dp8, ";}")]));
+  }, [`div.__jsx-style-dynamic-selector{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;border-top:1px solid ${borderColor};padding:0 ${spacers.dp8};}`]));
 };
 RightFooter.propTypes = {
   children: PropTypes.node,

package/build/es/right-header.js

@@ -14,7 +14,7 @@ export const RightHeader = _ref => {
   }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2175954399",
     dynamic: [borderColor, spacers.dp8]
-  }, ["div.__jsx-style-dynamic-selector{border-bottom:1px solid ".concat(borderColor, ";-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;padding:0 ").concat(spacers.dp8, ";}")]));
+  }, [`div.__jsx-style-dynamic-selector{border-bottom:1px solid ${borderColor};-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;padding:0 ${spacers.dp8};}`]));
 };
 RightHeader.propTypes = {
   children: PropTypes.node,

package/build/es/right-side.js

@@ -19,7 +19,7 @@ export const RightSide = _ref => {
   '', /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1391448013",
     dynamic: [backgroundColor, borderColor, borderRadius, width]
-  }, ["div.__jsx-style-dynamic-selector{background-color:".concat(backgroundColor, ";border:1px solid ").concat(borderColor, ";border-radius:").concat(borderRadius, ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;max-width:100%;width:").concat(width, ";}")]));
+  }, [`div.__jsx-style-dynamic-selector{background-color:${backgroundColor};border:1px solid ${borderColor};border-radius:${borderRadius};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;max-width:100%;width:${width};}`]));
 };
 RightSide.propTypes = {
   width: PropTypes.string.isRequired,

package/build/es/source-options.js

@@ -23,7 +23,7 @@ export const SourceOptions = _ref => {
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "392419471",
     dynamic: [spacers.dp4]
-  }, [".container.__jsx-style-dynamic-selector{padding:".concat(spacers.dp4, " 0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow-y:auto;}"), ".content-container.__jsx-style-dynamic-selector{position:relative;}"]));
+  }, [`.container.__jsx-style-dynamic-selector{padding:${spacers.dp4} 0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow-y:auto;}`, ".content-container.__jsx-style-dynamic-selector{position:relative;}"]));
 };
 SourceOptions.propTypes = {
   dataTest: PropTypes.string.isRequired,

package/build/es/transfer/add-all-selectable-source-options.js

@@ -20,14 +20,15 @@ export const addAllSelectableSourceOptions = _ref => {
     return !disabled;
   });
   const newSelected = enabledSourceOptions.reduce((accumulatedSelected, enabledSourceOption) => [...accumulatedSelected, enabledSourceOption.value], selected);
-  setHighlightedSourceOptions([]); // If we ever allow maxSelection to be any value
+  setHighlightedSourceOptions([]);
+
+  // If we ever allow maxSelection to be any value
   // other than 1 and Infinity, we need to think
   // about how this should behave:
   //
   // Either we hide this button when it's not "Infinity",
   // or we have to decide whether we want to take the first
   // nth options or the last
-
   onChange({
     selected: newSelected
   });

package/build/es/transfer/add-individual-source-options.js

@@ -18,7 +18,6 @@ export const addIndividualSourceOptions = _ref => {
     selected,
     setHighlightedSourceOptions
   } = _ref;
-
   /**
    * Creates a subset of the highlighted options to reflect a changed
    * filter value in case previously highlighted options are now
@@ -33,13 +32,13 @@ export const addIndividualSourceOptions = _ref => {
   const filteredHighlightedSourceOptions = filterable ? highlightedSourceOptions.filter(value => sourceOptions.find(filteredOption => filteredOption.value === value)) : highlightedSourceOptions;
   const newSelected = filteredHighlightedSourceOptions.reduce((accumulatedSelected, value) => [...accumulatedSelected, filteredHighlightedSourceOptions.find(filteredHighlightedSourceOption => filteredHighlightedSourceOption === value)], selected);
   setHighlightedSourceOptions([]);
+
   /**
    * This will extract from the end, hence the "-1 *"
    * As the "newest" additions are always at the end of the array,
    * it's safe to just take the last nth (depending on maxSelection)
    * to always get the right ones
    */
-
   onChange({
     selected: newSelected.slice(-1 * maxSelections)
   });