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

package/build/es/transfer/create-double-click-handlers.js

@@ -15,7 +15,6 @@ export const createDoubleClickHandlers = _ref => {
     setHighlightedPickedOptions,
     setHighlightedSourceOptions
   } = _ref;
-
   const selectSingleOption = _ref2 => {
     let {
       value
@@ -26,7 +25,6 @@ export const createDoubleClickHandlers = _ref => {
       selected: newSelected.slice(-1 * maxSelections)
     });
   };
-
   const deselectSingleOption = _ref3 => {
     let {
       value
@@ -37,7 +35,6 @@ export const createDoubleClickHandlers = _ref => {
       selected: newSelected
     });
   };
-
   return {
     selectSingleOption,
     deselectSingleOption

package/build/es/transfer/get-option-click-handlers.js

@@ -1,11 +1,11 @@
 import { getModeByModifierKey } from '../common/index.js';
+
 /**
  * @param {Object} option
  * @param {Function} selectionHandler
  * @param {Function} toggleHighlightedOption
  * @returns {Object}
  */
-
 export const getOptionClickHandlers = (option, selectionHandler, toggleHighlightedOption) => ({
   onClick: (_, event) => {
     const mode = getModeByModifierKey(event);

package/build/es/transfer/is-reorder-down-disabled.js

@@ -9,8 +9,10 @@ export const isReorderDownDisabled = _ref => {
     highlightedPickedOptions,
     selected
   } = _ref;
-  return (// only one item can be moved with the buttons
-    highlightedPickedOptions.length !== 1 || // can't move an item down if it's the last one
+  return (
+    // only one item can be moved with the buttons
+    highlightedPickedOptions.length !== 1 ||
+    // can't move an item down if it's the last one
     selected.indexOf(highlightedPickedOptions[0]) === selected.length - 1
   );
 };

package/build/es/transfer/is-reorder-up-disabled.js

@@ -9,8 +9,10 @@ export const isReorderUpDisabled = _ref => {
     highlightedPickedOptions,
     selected
   } = _ref;
-  return (// only one item can be moved with the buttons
-    highlightedPickedOptions.length !== 1 || // can't move an item up if it's the first one
+  return (
+    // only one item can be moved with the buttons
+    highlightedPickedOptions.length !== 1 ||
+    // can't move an item up if it's the first one
     selected.indexOf(highlightedPickedOptions[0]) === 0
   );
 };

package/build/es/transfer/move-highlighted-picked-option-down.js

@@ -11,13 +11,14 @@ export const moveHighlightedPickedOptionDown = _ref => {
     highlightedPickedOptions,
     onChange
   } = _ref;
-  const optionIndex = selected.findIndex(selectedOption => selectedOption === highlightedPickedOptions[0]); // Can't move down last or non-existing option
+  const optionIndex = selected.findIndex(selectedOption => selectedOption === highlightedPickedOptions[0]);
 
+  // Can't move down last or non-existing option
   if (optionIndex === -1 || optionIndex > selected.length - 2) {
     return;
-  } // swap with next item
-
+  }
 
+  // swap with next item
   const reordered = [...selected.slice(0, optionIndex), selected[optionIndex + 1], selected[optionIndex], ...selected.slice(optionIndex + 2)];
   onChange({
     selected: reordered

package/build/es/transfer/move-highlighted-picked-option-up.js

@@ -11,13 +11,14 @@ export const moveHighlightedPickedOptionUp = _ref => {
     highlightedPickedOptions,
     onChange
   } = _ref;
-  const optionIndex = selected.findIndex(selectedOption => selectedOption === highlightedPickedOptions[0]); // Can't move up option at index 0 or non-existing option
+  const optionIndex = selected.findIndex(selectedOption => selectedOption === highlightedPickedOptions[0]);
 
+  // Can't move up option at index 0 or non-existing option
   if (optionIndex < 1) {
     return;
-  } // swap with previous item
-
+  }
 
+  // swap with previous item
   const reordered = [...selected.slice(0, optionIndex - 1), selected[optionIndex], selected[optionIndex - 1], ...selected.slice(optionIndex + 1)];
   onChange({
     selected: reordered

package/build/es/transfer/remove-individual-picked-options.js

@@ -15,7 +15,6 @@ export const removeIndividualPickedOptions = _ref => {
     selected,
     setHighlightedPickedOptions
   } = _ref;
-
   /**
    * Creates a subset of the highlighted options to reflect a changed
    * filter value in case previously highlighted options are now
@@ -30,12 +29,12 @@ export const removeIndividualPickedOptions = _ref => {
   const filteredHighlightedPickedOptions = filterablePicked ? highlightedPickedOptions.filter(value => pickedOptions.find(filteredOption => filteredOption.value === value)) : highlightedPickedOptions;
   const newSelected = selected.filter(selectedOption => !filteredHighlightedPickedOptions.includes(selectedOption));
   setHighlightedPickedOptions([]);
+
   /**
    * as the maximum amount of selected items
    * is already restricted through the selection mechanism,
    * there's no need to handle `maxSelection` here
    */
-
   onChange({
     selected: newSelected
   });

package/build/es/transfer/use-filter.js

@@ -1,7 +1,5 @@
 import { useState } from 'react';
-
 const identity = value => value;
-
 export const useFilter = _ref => {
   let {
     initialSearchTerm,

package/build/es/transfer/use-highlighted-options/create-toggle-highlighted-option.js

@@ -2,6 +2,7 @@ import { ADD_MODE, RANGE_MODE } from '../../common/index.js';
 import { toggleAdd } from './toggle-add.js';
 import { toggleRange } from './toggle-range.js';
 import { toggleReplace } from './toggle-replace.js';
+
 /**
  * @param {Object} args
  * @param {bool} args.disabled
@@ -13,7 +14,6 @@ import { toggleReplace } from './toggle-replace.js';
  * @param {string} args.lastClicked
  * @returns {void}
  */
-
 export const createToggleHighlightedOption = _ref => {
   let {
     disabled,
@@ -29,13 +29,10 @@ export const createToggleHighlightedOption = _ref => {
       option,
       mode
     } = _ref2;
-
     if (disabled) {
       return;
     }
-
     setHighlightedOptions([]);
-
     if (mode === ADD_MODE) {
       setLastClicked(option.value);
       return toggleAdd({
@@ -45,7 +42,6 @@ export const createToggleHighlightedOption = _ref => {
         setHighlightedOptions
       });
     }
-
     if (mode === RANGE_MODE) {
       return toggleRange({
         highlightedOptions,
@@ -55,9 +51,9 @@ export const createToggleHighlightedOption = _ref => {
         lastClicked,
         maxSelections
       });
-    } // REPLACE_MODE
-
+    }
 
+    // REPLACE_MODE
     setLastClicked(option.value);
     return toggleReplace({
       option,

package/build/es/transfer/use-highlighted-options/toggle-add.js

@@ -1,4 +1,5 @@
 import { toggleValue } from '../../common/index.js';
+
 /**
  * @param {Object} args
  * @param {number} args.maxSelections
@@ -7,7 +8,6 @@ import { toggleValue } from '../../common/index.js';
  * @param {Function} args.setHighlightedOption
  * @returns {void}
  */
-
 export const toggleAdd = _ref => {
   let {
     highlightedOptions,

package/build/es/transfer/use-highlighted-options/toggle-range.js

@@ -1,4 +1,5 @@
 import { findOptionIndex } from '../../common/index.js';
+
 /**
  * @param {Object} args
  * @param {number} args.maxSelections
@@ -9,7 +10,6 @@ import { findOptionIndex } from '../../common/index.js';
  * @param {Function} args.setHighlightedOption
  * @returns {void}
  */
-
 export const toggleRange = _ref => {
   let {
     highlightedOptions,
@@ -19,14 +19,12 @@ export const toggleRange = _ref => {
     lastClicked,
     maxSelections
   } = _ref;
-
   if (highlightedOptions.length === 0) {
     setHighlightedOptions([option.value]);
   } else {
     let from, to;
     const clickedOptionIndex = findOptionIndex(options, option);
     const lastClickedSourceOptionWithoutRangeModeIndex = lastClicked ? options.findIndex(curOption => curOption.value === lastClicked) : -1;
-
     if (lastClickedSourceOptionWithoutRangeModeIndex !== -1) {
       from = lastClickedSourceOptionWithoutRangeModeIndex;
       to = clickedOptionIndex;
@@ -37,11 +35,11 @@ export const toggleRange = _ref => {
       const firstHighlightedInList = options.findIndex(option => highlightedOptions.find(highlightedOption => highlightedOption === option.value));
       from = firstHighlightedInList;
       to = clickedOptionIndex;
-    } // this is so we can also selected
+    }
+
+    // this is so we can also selected
     // a range of options above "from" option.
     // -> Just how slice works ;)
-
-
     const lower = Math.min(from, to);
     const higher = Math.max(from, to);
     const newHighlightedSourceOptions = options.slice(lower, higher + 1).filter(option => !option.disabled).slice(maxSelections * -1).map(_ref2 => {

package/build/es/transfer/use-highlighted-options/toggle-replace.js

@@ -11,12 +11,10 @@ export const toggleReplace = _ref => {
     highlightedOptions,
     setHighlightedOptions
   } = _ref;
-
   if (highlightedOptions.length > 1) {
     setHighlightedOptions([option.value]);
   } else {
     const optionIndex = highlightedOptions.findIndex(highlightedOption => highlightedOption === option.value);
-
     if (optionIndex === -1) {
       setHighlightedOptions([option.value]);
     } else {

package/build/es/transfer/use-highlighted-options.js

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { createToggleHighlightedOption } from './use-highlighted-options/create-toggle-highlighted-option.js';
+
 /**
  * @param {Object} args
  * @param {bool} args.disabled
@@ -7,14 +8,12 @@ import { createToggleHighlightedOption } from './use-highlighted-options/create-
  * @param {Object[]} args.options
  * @returns {Object} highlighted options & helpers
  */
-
 export const useHighlightedOptions = _ref => {
   let {
     disabled,
     maxSelections,
     options
   } = _ref;
-
   /**
    * These are important so the stored element can be used
    * as range-start when using shift multiple times consecutively

package/build/es/transfer-option.js

@@ -22,7 +22,6 @@ export const TransferOption = _ref => {
       if (disabled) {
         return;
       }
-
       if (doubleClickTimeout.current) {
         clearTimeout(doubleClickTimeout.current);
         doubleClickTimeout.current = null;
@@ -47,7 +46,7 @@ export const TransferOption = _ref => {
   }, label, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "4216903932",
     dynamic: [colors.grey900, colors.grey200, colors.teal700, colors.white, colors.grey600]
-  }, ["div.__jsx-style-dynamic-selector{font-size:14px;line-height:16px;padding:4px 8px;color:".concat(colors.grey900, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"), "div.__jsx-style-dynamic-selector:hover{background:".concat(colors.grey200, ";}"), "div.highlighted.__jsx-style-dynamic-selector{background:".concat(colors.teal700, ";color:").concat(colors.white, ";}"), "div.disabled.__jsx-style-dynamic-selector{color:".concat(colors.grey600, ";cursor:not-allowed;}")]));
+  }, [`div.__jsx-style-dynamic-selector{font-size:14px;line-height:16px;padding:4px 8px;color:${colors.grey900};-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}`, `div.__jsx-style-dynamic-selector:hover{background:${colors.grey200};}`, `div.highlighted.__jsx-style-dynamic-selector{background:${colors.teal700};color:${colors.white};}`, `div.disabled.__jsx-style-dynamic-selector{color:${colors.grey600};cursor:not-allowed;}`]));
 };
 TransferOption.defaultProps = {
   dataTest: 'dhis2-uicore-transferoption'

package/build/es/transfer.js

@@ -15,11 +15,9 @@ import { ReorderingActions } from './reordering-actions.js';
 import { RightFooter } from './right-footer.js';
 import { RightHeader } from './right-header.js';
 import { RightSide } from './right-side.js';
-import { TransferOption } from './transfer-option.js';
 import { addAllSelectableSourceOptions, addIndividualSourceOptions, createDoubleClickHandlers, defaultFilterCallback, getOptionClickHandlers, isReorderDownDisabled, isReorderUpDisabled, moveHighlightedPickedOptionDown, moveHighlightedPickedOptionUp, removeAllPickedOptions, removeIndividualPickedOptions, useFilter, useHighlightedOptions } from './transfer/index.js';
-
+import { TransferOption } from './transfer-option.js';
 const identity = value => value;
-
 export const Transfer = _ref => {
   let {
     options,
@@ -65,7 +63,6 @@ export const Transfer = _ref => {
     onEndReached,
     onEndReachedPicked
   } = _ref;
-
   /* Source options search value:
    * Depending on whether the onFilterChange callback has been provided
    * either the internal or external search value is used */
@@ -80,23 +77,23 @@ export const Transfer = _ref => {
     filterable,
     filterCallback
   });
+
   /*
    * Actual source options:
    * Extract the not-selected options.
    * Filters options if filterable is true.
    */
-
   const sourceOptions = actualFilterCallback(options.filter(_ref2 => {
     let {
       value
     } = _ref2;
     return !selected.includes(value);
   }), actualFilter);
+
   /*
    * Picked options highlighting:
    * These are all the highlighted options on the options side.
    */
-
   const {
     highlightedOptions: highlightedSourceOptions,
     setHighlightedOptions: setHighlightedSourceOptions,
@@ -106,10 +103,10 @@ export const Transfer = _ref => {
     disabled,
     maxSelections
   });
+
   /* Picked options search value:
    * Depending on whether the onFilterChangePicked callback has been provided
    * either the internal or external search value is used */
-
   const {
     filterValue: actualFilterPicked,
     filter: actualFilterPickedCallback,
@@ -121,25 +118,26 @@ export const Transfer = _ref => {
     externalSearchTerm: searchTermPicked,
     filterCallback: filterCallbackPicked
   });
+
   /*
    * Actual picked options:
    * Extract the selected options. Can't use `options.filter`
    * because we need to keep the order of `selected`
    */
+  let pickedOptions = [];
 
-  let pickedOptions = []; // Only map if selected is an array
-
+  // Only map if selected is an array
   if (Array.isArray(selected)) {
-    pickedOptions = actualFilterPickedCallback(selected.map(value => options.find(option => value === option.value)) // filter -> in case a selected value has been provided
+    pickedOptions = actualFilterPickedCallback(selected.map(value => options.find(option => value === option.value))
+    // filter -> in case a selected value has been provided
     // that does not exist as option
     .filter(identity), actualFilterPicked);
   }
+
   /*
    * Source options highlighting:
    * These are all the highlighted options on the selected side.
    */
-
-
   const {
     highlightedOptions: highlightedPickedOptions,
     setHighlightedOptions: setHighlightedPickedOptions,
@@ -149,11 +147,11 @@ export const Transfer = _ref => {
     disabled,
     maxSelections
   });
+
   /*
    * Source & Picked options:
    * These are the double click handlers for (de-)selection
    */
-
   const {
     selectSingleOption,
     deselectSingleOption
@@ -164,10 +162,10 @@ export const Transfer = _ref => {
     onChange,
     maxSelections
   });
+
   /**
    * Disabled button states
    */
-
   const isAddAllDisabled = disabled || sourceOptions.filter(_ref3 => {
     let {
       disabled
@@ -182,14 +180,14 @@ export const Transfer = _ref => {
     className: className,
     height: height
   }, /*#__PURE__*/React.createElement(LeftSide, {
-    dataTest: "".concat(dataTest, "-leftside"),
+    dataTest: `${dataTest}-leftside`,
     width: optionsWidth
   }, (leftHeader || filterable) && /*#__PURE__*/React.createElement(LeftHeader, {
-    dataTest: "".concat(dataTest, "-leftheader")
+    dataTest: `${dataTest}-leftheader`
   }, leftHeader, filterable && !hideFilterInput && /*#__PURE__*/React.createElement(Filter, {
     label: filterLabel,
     placeholder: filterPlaceholder,
-    dataTest: "".concat(dataTest, "-filter"),
+    dataTest: `${dataTest}-filter`,
     filter: actualFilter,
     onChange: onFilterChange ? onFilterChange : _ref4 => {
       let {
@@ -198,7 +196,7 @@ export const Transfer = _ref => {
       return setInternalFilter(value);
     }
   })), /*#__PURE__*/React.createElement(OptionsContainer, {
-    dataTest: "".concat(dataTest, "-sourceoptions"),
+    dataTest: `${dataTest}-sourceoptions`,
     emptyComponent: sourceEmptyPlaceholder,
     getOptionClickHandlers: getOptionClickHandlers,
     highlightedOptions: highlightedSourceOptions,
@@ -209,12 +207,12 @@ export const Transfer = _ref => {
     toggleHighlightedOption: toggleHighlightedSourceOption,
     onEndReached: onEndReached
   }), leftFooter && /*#__PURE__*/React.createElement(LeftFooter, {
-    dataTest: "".concat(dataTest, "-leftfooter")
+    dataTest: `${dataTest}-leftfooter`
   }, leftFooter)), /*#__PURE__*/React.createElement(Actions, {
-    dataTest: "".concat(dataTest, "-actions")
+    dataTest: `${dataTest}-actions`
   }, maxSelections === Infinity && /*#__PURE__*/React.createElement(AddAll, {
     label: addAllText,
-    dataTest: "".concat(dataTest, "-actions-addall"),
+    dataTest: `${dataTest}-actions-addall`,
     disabled: isAddAllDisabled,
     onClick: () => addAllSelectableSourceOptions({
       sourceOptions,
@@ -224,7 +222,7 @@ export const Transfer = _ref => {
     })
   }), /*#__PURE__*/React.createElement(AddIndividual, {
     label: addIndividualText,
-    dataTest: "".concat(dataTest, "-actions-addindividual"),
+    dataTest: `${dataTest}-actions-addindividual`,
     disabled: isAddIndividualDisabled,
     onClick: () => addIndividualSourceOptions({
       filterable,
@@ -237,7 +235,7 @@ export const Transfer = _ref => {
     })
   }), maxSelections === Infinity && /*#__PURE__*/React.createElement(RemoveAll, {
     label: removeAllText,
-    dataTest: "".concat(dataTest, "-actions-removeall"),
+    dataTest: `${dataTest}-actions-removeall`,
     disabled: isRemoveAllDisabled,
     onClick: () => removeAllPickedOptions({
       setHighlightedPickedOptions,
@@ -245,7 +243,7 @@ export const Transfer = _ref => {
     })
   }), /*#__PURE__*/React.createElement(RemoveIndividual, {
     label: removeIndividualText,
-    dataTest: "".concat(dataTest, "-actions-removeindividual"),
+    dataTest: `${dataTest}-actions-removeindividual`,
     disabled: isRemoveIndividualDisabled,
     onClick: () => removeIndividualPickedOptions({
       filterablePicked,
@@ -256,14 +254,14 @@ export const Transfer = _ref => {
       setHighlightedPickedOptions
     })
   })), /*#__PURE__*/React.createElement(RightSide, {
-    dataTest: "".concat(dataTest, "-rightside"),
+    dataTest: `${dataTest}-rightside`,
     width: selectedWidth
   }, (rightHeader || filterablePicked) && /*#__PURE__*/React.createElement(RightHeader, {
-    dataTest: "".concat(dataTest, "-rightheader")
+    dataTest: `${dataTest}-rightheader`
   }, rightHeader, filterablePicked && !hideFilterInputPicked && /*#__PURE__*/React.createElement(Filter, {
     label: filterLabelPicked,
     placeholder: filterPlaceholderPicked,
-    dataTest: "".concat(dataTest, "-filter"),
+    dataTest: `${dataTest}-filter`,
     filter: actualFilterPicked,
     onChange: onFilterChangePicked ? onFilterChangePicked : _ref5 => {
       let {
@@ -273,7 +271,7 @@ export const Transfer = _ref => {
     }
   })), /*#__PURE__*/React.createElement(OptionsContainer, {
     selected: true,
-    dataTest: "".concat(dataTest, "-pickedoptions"),
+    dataTest: `${dataTest}-pickedoptions`,
     emptyComponent: selectedEmptyComponent,
     getOptionClickHandlers: getOptionClickHandlers,
     highlightedOptions: highlightedPickedOptions,
@@ -284,9 +282,9 @@ export const Transfer = _ref => {
     toggleHighlightedOption: toggleHighlightedPickedOption,
     onEndReached: onEndReachedPicked
   }), (rightFooter || enableOrderChange) && /*#__PURE__*/React.createElement(RightFooter, {
-    dataTest: "".concat(dataTest, "-rightfooter")
+    dataTest: `${dataTest}-rightfooter`
   }, enableOrderChange && /*#__PURE__*/React.createElement(ReorderingActions, {
-    dataTest: "".concat(dataTest, "-reorderingactions"),
+    dataTest: `${dataTest}-reorderingactions`,
     disabledDown: isReorderDownDisabled({
       highlightedPickedOptions,
       selected
@@ -309,9 +307,7 @@ export const Transfer = _ref => {
     }
   }), rightFooter)));
 };
-
 const defaultRenderOption = option => /*#__PURE__*/React.createElement(TransferOption, option);
-
 Transfer.defaultProps = {
   dataTest: 'dhis2-uicore-transfer',
   height: '240px',