@dhis2-ui/transfer 8.1.11 → 8.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (125) hide show
  1. package/build/cjs/__e2e__/add_remove-highlighted-options.stories.e2e.js +30 -21
  2. package/build/cjs/__e2e__/common/stateful-decorator.js +26 -19
  3. package/build/cjs/__e2e__/disabled-transfer-buttons.stories.e2e.js +70 -49
  4. package/build/cjs/__e2e__/disabled-transfer-options.stories.e2e.js +14 -11
  5. package/build/cjs/__e2e__/display-order.stories.e2e.js +29 -20
  6. package/build/cjs/__e2e__/filter-options-list.stories.e2e.js +97 -73
  7. package/build/cjs/__e2e__/highlight-range-of-options.stories.e2e.js +49 -34
  8. package/build/cjs/__e2e__/loading_lists.stories.e2e.js +1 -1
  9. package/build/cjs/__e2e__/notify_at_end_of_list.stories.e2e.js +61 -43
  10. package/build/cjs/__e2e__/reorder-with-buttons.stories.e2e.js +19 -13
  11. package/build/cjs/__e2e__/set_unset-highlighted-option.stories.e2e.js +30 -21
  12. package/build/cjs/__e2e__/transferring-items.stories.e2e.js +29 -20
  13. package/build/cjs/__tests__/helper/use-highlighted-option/toggle-add.test.js +6 -3
  14. package/build/cjs/__tests__/helper/use-highlighted-option/toggle-range.test.js +48 -24
  15. package/build/cjs/__tests__/transfer.test.js +18 -10
  16. package/build/cjs/actions.js +13 -10
  17. package/build/cjs/add-all.js +17 -14
  18. package/build/cjs/add-individual.js +16 -13
  19. package/build/cjs/common/get-mode-by-modifier-key.js +7 -6
  20. package/build/cjs/common/modes.js +1 -1
  21. package/build/cjs/container.js +15 -12
  22. package/build/cjs/end-intersection-detector.js +21 -15
  23. package/build/cjs/features/disabled-transfer-options/index.js +4 -2
  24. package/build/cjs/features/display-order/index.js +47 -26
  25. package/build/cjs/features/filter-options-list/index.js +6 -3
  26. package/build/cjs/features/highlight-range-of-options/index.js +10 -5
  27. package/build/cjs/features/loading_lists/index.js +2 -2
  28. package/build/cjs/features/notify_at_end_of_list/index.js +5 -3
  29. package/build/cjs/features/set_unset-highlighted-option/index.js +6 -3
  30. package/build/cjs/features/transferring-items/index.js +77 -42
  31. package/build/cjs/filter.js +26 -23
  32. package/build/cjs/icons.js +134 -116
  33. package/build/cjs/left-footer.js +13 -10
  34. package/build/cjs/left-header.js +13 -10
  35. package/build/cjs/left-side.js +19 -16
  36. package/build/cjs/options-container.js +17 -16
  37. package/build/cjs/picked-options.js +22 -19
  38. package/build/cjs/remove-all.js +16 -13
  39. package/build/cjs/remove-individual.js +16 -13
  40. package/build/cjs/reordering-actions.js +34 -31
  41. package/build/cjs/right-footer.js +13 -10
  42. package/build/cjs/right-header.js +13 -10
  43. package/build/cjs/right-side.js +19 -16
  44. package/build/cjs/source-options.js +22 -19
  45. package/build/cjs/transfer/add-all-selectable-source-options.js +13 -9
  46. package/build/cjs/transfer/add-individual-source-options.js +11 -9
  47. package/build/cjs/transfer/create-double-click-handlers.js +17 -13
  48. package/build/cjs/transfer/default-filter-callback.js +6 -3
  49. package/build/cjs/transfer/is-reorder-down-disabled.js +10 -6
  50. package/build/cjs/transfer/is-reorder-up-disabled.js +10 -6
  51. package/build/cjs/transfer/move-highlighted-picked-option-down.js +6 -5
  52. package/build/cjs/transfer/move-highlighted-picked-option-up.js +6 -5
  53. package/build/cjs/transfer/remove-all-picked-options.js +5 -4
  54. package/build/cjs/transfer/remove-individual-picked-options.js +10 -8
  55. package/build/cjs/transfer/use-filter.js +8 -7
  56. package/build/cjs/transfer/use-highlighted-options/create-toggle-highlighted-option.js +45 -40
  57. package/build/cjs/transfer/use-highlighted-options/toggle-add.js +7 -6
  58. package/build/cjs/transfer/use-highlighted-options/toggle-range.js +16 -11
  59. package/build/cjs/transfer/use-highlighted-options/toggle-replace.js +7 -5
  60. package/build/cjs/transfer/use-highlighted-options.js +7 -5
  61. package/build/cjs/transfer-option.js +12 -11
  62. package/build/cjs/transfer.js +86 -72
  63. package/build/cjs/transfer.stories.js +127 -131
  64. package/build/es/__e2e__/add_remove-highlighted-options.stories.e2e.js +29 -20
  65. package/build/es/__e2e__/common/stateful-decorator.js +26 -19
  66. package/build/es/__e2e__/disabled-transfer-buttons.stories.e2e.js +69 -48
  67. package/build/es/__e2e__/disabled-transfer-options.stories.e2e.js +13 -10
  68. package/build/es/__e2e__/display-order.stories.e2e.js +28 -19
  69. package/build/es/__e2e__/filter-options-list.stories.e2e.js +96 -72
  70. package/build/es/__e2e__/highlight-range-of-options.stories.e2e.js +48 -33
  71. package/build/es/__e2e__/notify_at_end_of_list.stories.e2e.js +60 -42
  72. package/build/es/__e2e__/reorder-with-buttons.stories.e2e.js +18 -12
  73. package/build/es/__e2e__/set_unset-highlighted-option.stories.e2e.js +29 -20
  74. package/build/es/__e2e__/transferring-items.stories.e2e.js +28 -19
  75. package/build/es/__tests__/helper/use-highlighted-option/toggle-add.test.js +6 -3
  76. package/build/es/__tests__/helper/use-highlighted-option/toggle-range.test.js +48 -24
  77. package/build/es/__tests__/transfer.test.js +18 -10
  78. package/build/es/actions.js +13 -10
  79. package/build/es/add-all.js +17 -14
  80. package/build/es/add-individual.js +16 -13
  81. package/build/es/common/get-mode-by-modifier-key.js +7 -6
  82. package/build/es/container.js +15 -12
  83. package/build/es/end-intersection-detector.js +21 -15
  84. package/build/es/features/disabled-transfer-options/index.js +4 -2
  85. package/build/es/features/display-order/index.js +47 -26
  86. package/build/es/features/filter-options-list/index.js +6 -3
  87. package/build/es/features/highlight-range-of-options/index.js +10 -5
  88. package/build/es/features/loading_lists/index.js +2 -2
  89. package/build/es/features/notify_at_end_of_list/index.js +5 -3
  90. package/build/es/features/set_unset-highlighted-option/index.js +6 -3
  91. package/build/es/features/transferring-items/index.js +77 -42
  92. package/build/es/filter.js +26 -23
  93. package/build/es/icons.js +133 -115
  94. package/build/es/left-footer.js +13 -10
  95. package/build/es/left-header.js +13 -10
  96. package/build/es/left-side.js +19 -16
  97. package/build/es/options-container.js +17 -16
  98. package/build/es/picked-options.js +22 -19
  99. package/build/es/remove-all.js +16 -13
  100. package/build/es/remove-individual.js +16 -13
  101. package/build/es/reordering-actions.js +34 -31
  102. package/build/es/right-footer.js +13 -10
  103. package/build/es/right-header.js +13 -10
  104. package/build/es/right-side.js +19 -16
  105. package/build/es/source-options.js +22 -19
  106. package/build/es/transfer/add-all-selectable-source-options.js +13 -9
  107. package/build/es/transfer/add-individual-source-options.js +11 -9
  108. package/build/es/transfer/create-double-click-handlers.js +17 -13
  109. package/build/es/transfer/default-filter-callback.js +6 -3
  110. package/build/es/transfer/is-reorder-down-disabled.js +10 -6
  111. package/build/es/transfer/is-reorder-up-disabled.js +10 -6
  112. package/build/es/transfer/move-highlighted-picked-option-down.js +6 -5
  113. package/build/es/transfer/move-highlighted-picked-option-up.js +6 -5
  114. package/build/es/transfer/remove-all-picked-options.js +5 -4
  115. package/build/es/transfer/remove-individual-picked-options.js +10 -8
  116. package/build/es/transfer/use-filter.js +8 -7
  117. package/build/es/transfer/use-highlighted-options/create-toggle-highlighted-option.js +45 -40
  118. package/build/es/transfer/use-highlighted-options/toggle-add.js +7 -6
  119. package/build/es/transfer/use-highlighted-options/toggle-range.js +16 -11
  120. package/build/es/transfer/use-highlighted-options/toggle-replace.js +7 -5
  121. package/build/es/transfer/use-highlighted-options.js +7 -5
  122. package/build/es/transfer-option.js +12 -11
  123. package/build/es/transfer.js +86 -72
  124. package/build/es/transfer.stories.js +126 -130
  125. package/package.json +7 -7
@@ -12,11 +12,12 @@ exports.moveHighlightedPickedOptionUp = void 0;
12
12
  * @param {Function} args.onChange
13
13
  * @returns {void}
14
14
  */
15
- const moveHighlightedPickedOptionUp = ({
16
- selected,
17
- highlightedPickedOptions,
18
- onChange
19
- }) => {
15
+ const moveHighlightedPickedOptionUp = _ref => {
16
+ let {
17
+ selected,
18
+ highlightedPickedOptions,
19
+ onChange
20
+ } = _ref;
20
21
  const optionIndex = selected.findIndex(selectedOption => selectedOption === highlightedPickedOptions[0]); // Can't move up option at index 0 or non-existing option
21
22
 
22
23
  if (optionIndex < 1) {
@@ -11,10 +11,11 @@ exports.removeAllPickedOptions = void 0;
11
11
  * @param {Function} args.onChange
12
12
  * @returns {void}
13
13
  */
14
- const removeAllPickedOptions = ({
15
- setHighlightedPickedOptions,
16
- onChange
17
- }) => {
14
+ const removeAllPickedOptions = _ref => {
15
+ let {
16
+ setHighlightedPickedOptions,
17
+ onChange
18
+ } = _ref;
18
19
  setHighlightedPickedOptions([]);
19
20
  onChange({
20
21
  selected: []
@@ -13,14 +13,16 @@ exports.removeIndividualPickedOptions = void 0;
13
13
  * @param {Function} args.onChange
14
14
  * @returns {void}
15
15
  */
16
- const removeIndividualPickedOptions = ({
17
- filterablePicked,
18
- pickedOptions,
19
- highlightedPickedOptions,
20
- onChange,
21
- selected,
22
- setHighlightedPickedOptions
23
- }) => {
16
+ const removeIndividualPickedOptions = _ref => {
17
+ let {
18
+ filterablePicked,
19
+ pickedOptions,
20
+ highlightedPickedOptions,
21
+ onChange,
22
+ selected,
23
+ setHighlightedPickedOptions
24
+ } = _ref;
25
+
24
26
  /**
25
27
  * Creates a subset of the highlighted options to reflect a changed
26
28
  * filter value in case previously highlighted options are now
@@ -9,13 +9,14 @@ var _react = require("react");
9
9
 
10
10
  const identity = value => value;
11
11
 
12
- const useFilter = ({
13
- initialSearchTerm,
14
- onFilterChange,
15
- externalSearchTerm,
16
- filterable,
17
- filterCallback
18
- }) => {
12
+ const useFilter = _ref => {
13
+ let {
14
+ initialSearchTerm,
15
+ onFilterChange,
16
+ externalSearchTerm,
17
+ filterable,
18
+ filterCallback
19
+ } = _ref;
19
20
  const [internalFilter, setInternalFilter] = (0, _react.useState)(initialSearchTerm);
20
21
  const filterValue = onFilterChange ? externalSearchTerm : internalFilter;
21
22
  const filter = filterable ? filterCallback : identity;
@@ -24,52 +24,57 @@ var _toggleReplace = require("./toggle-replace.js");
24
24
  * @param {string} args.lastClicked
25
25
  * @returns {void}
26
26
  */
27
- const createToggleHighlightedOption = ({
28
- disabled,
29
- highlightedOptions,
30
- setHighlightedOptions,
31
- maxSelections,
32
- setLastClicked,
33
- options,
34
- lastClicked
35
- }) => ({
36
- option,
37
- mode
38
- }) => {
39
- if (disabled) {
40
- return;
41
- }
27
+ const createToggleHighlightedOption = _ref => {
28
+ let {
29
+ disabled,
30
+ highlightedOptions,
31
+ setHighlightedOptions,
32
+ maxSelections,
33
+ setLastClicked,
34
+ options,
35
+ lastClicked
36
+ } = _ref;
37
+ return _ref2 => {
38
+ let {
39
+ option,
40
+ mode
41
+ } = _ref2;
42
+
43
+ if (disabled) {
44
+ return;
45
+ }
46
+
47
+ setHighlightedOptions([]);
48
+
49
+ if (mode === _index.ADD_MODE) {
50
+ setLastClicked(option.value);
51
+ return (0, _toggleAdd.toggleAdd)({
52
+ highlightedOptions,
53
+ maxSelections,
54
+ option,
55
+ setHighlightedOptions
56
+ });
57
+ }
58
+
59
+ if (mode === _index.RANGE_MODE) {
60
+ return (0, _toggleRange.toggleRange)({
61
+ highlightedOptions,
62
+ options,
63
+ option,
64
+ setHighlightedOptions,
65
+ lastClicked,
66
+ maxSelections
67
+ });
68
+ } // REPLACE_MODE
42
69
 
43
- setHighlightedOptions([]);
44
70
 
45
- if (mode === _index.ADD_MODE) {
46
71
  setLastClicked(option.value);
47
- return (0, _toggleAdd.toggleAdd)({
48
- highlightedOptions,
49
- maxSelections,
72
+ return (0, _toggleReplace.toggleReplace)({
50
73
  option,
51
- setHighlightedOptions
52
- });
53
- }
54
-
55
- if (mode === _index.RANGE_MODE) {
56
- return (0, _toggleRange.toggleRange)({
57
74
  highlightedOptions,
58
- options,
59
- option,
60
- setHighlightedOptions,
61
- lastClicked,
62
- maxSelections
75
+ setHighlightedOptions
63
76
  });
64
- } // REPLACE_MODE
65
-
66
-
67
- setLastClicked(option.value);
68
- return (0, _toggleReplace.toggleReplace)({
69
- option,
70
- highlightedOptions,
71
- setHighlightedOptions
72
- });
77
+ };
73
78
  };
74
79
 
75
80
  exports.createToggleHighlightedOption = createToggleHighlightedOption;
@@ -15,12 +15,13 @@ var _index = require("../../common/index.js");
15
15
  * @param {Function} args.setHighlightedOption
16
16
  * @returns {void}
17
17
  */
18
- const toggleAdd = ({
19
- highlightedOptions,
20
- maxSelections,
21
- option,
22
- setHighlightedOptions
23
- }) => {
18
+ const toggleAdd = _ref => {
19
+ let {
20
+ highlightedOptions,
21
+ maxSelections,
22
+ option,
23
+ setHighlightedOptions
24
+ } = _ref;
24
25
  const afterToggled = (0, _index.toggleValue)(highlightedOptions, option.value);
25
26
  const capped = afterToggled.slice(-1 * maxSelections);
26
27
  setHighlightedOptions(capped);
@@ -17,14 +17,16 @@ var _index = require("../../common/index.js");
17
17
  * @param {Function} args.setHighlightedOption
18
18
  * @returns {void}
19
19
  */
20
- const toggleRange = ({
21
- highlightedOptions,
22
- options,
23
- option,
24
- setHighlightedOptions,
25
- lastClicked,
26
- maxSelections
27
- }) => {
20
+ const toggleRange = _ref => {
21
+ let {
22
+ highlightedOptions,
23
+ options,
24
+ option,
25
+ setHighlightedOptions,
26
+ lastClicked,
27
+ maxSelections
28
+ } = _ref;
29
+
28
30
  if (highlightedOptions.length === 0) {
29
31
  setHighlightedOptions([option.value]);
30
32
  } else {
@@ -49,9 +51,12 @@ const toggleRange = ({
49
51
 
50
52
  const lower = Math.min(from, to);
51
53
  const higher = Math.max(from, to);
52
- const newHighlightedSourceOptions = options.slice(lower, higher + 1).filter(option => !option.disabled).slice(maxSelections * -1).map(({
53
- value
54
- }) => value);
54
+ const newHighlightedSourceOptions = options.slice(lower, higher + 1).filter(option => !option.disabled).slice(maxSelections * -1).map(_ref2 => {
55
+ let {
56
+ value
57
+ } = _ref2;
58
+ return value;
59
+ });
55
60
  setHighlightedOptions(newHighlightedSourceOptions);
56
61
  }
57
62
  };
@@ -12,11 +12,13 @@ exports.toggleReplace = void 0;
12
12
  * @param {Function} args.setHighlightedOption
13
13
  * @returns {void}
14
14
  */
15
- const toggleReplace = ({
16
- option,
17
- highlightedOptions,
18
- setHighlightedOptions
19
- }) => {
15
+ const toggleReplace = _ref => {
16
+ let {
17
+ option,
18
+ highlightedOptions,
19
+ setHighlightedOptions
20
+ } = _ref;
21
+
20
22
  if (highlightedOptions.length > 1) {
21
23
  setHighlightedOptions([option.value]);
22
24
  } else {
@@ -16,11 +16,13 @@ var _createToggleHighlightedOption = require("./use-highlighted-options/create-t
16
16
  * @param {Object[]} args.options
17
17
  * @returns {Object} highlighted options & helpers
18
18
  */
19
- const useHighlightedOptions = ({
20
- disabled,
21
- maxSelections,
22
- options
23
- }) => {
19
+ const useHighlightedOptions = _ref => {
20
+ let {
21
+ disabled,
22
+ maxSelections,
23
+ options
24
+ } = _ref;
25
+
24
26
  /**
25
27
  * These are important so the stored element can be used
26
28
  * as range-start when using shift multiple times consecutively
@@ -23,16 +23,17 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
23
23
 
24
24
  const DOUBLE_CLICK_MAX_DELAY = 500;
25
25
 
26
- const TransferOption = ({
27
- className,
28
- disabled,
29
- dataTest,
30
- highlighted,
31
- onClick,
32
- onDoubleClick,
33
- label,
34
- value
35
- }) => {
26
+ const TransferOption = _ref => {
27
+ let {
28
+ className,
29
+ disabled,
30
+ dataTest,
31
+ highlighted,
32
+ onClick,
33
+ onDoubleClick,
34
+ label,
35
+ value
36
+ } = _ref;
36
37
  const doubleClickTimeout = (0, _react.useRef)(null);
37
38
  return /*#__PURE__*/_react.default.createElement("div", {
38
39
  "data-test": dataTest,
@@ -65,7 +66,7 @@ const TransferOption = ({
65
66
  }, label, /*#__PURE__*/_react.default.createElement(_style.default, {
66
67
  id: "4216903932",
67
68
  dynamic: [_uiConstants.colors.grey900, _uiConstants.colors.grey200, _uiConstants.colors.teal700, _uiConstants.colors.white, _uiConstants.colors.grey600]
68
- }, [`div.__jsx-style-dynamic-selector{font-size:14px;line-height:16px;padding:4px 8px;color:${_uiConstants.colors.grey900};-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}`, `div.__jsx-style-dynamic-selector:hover{background:${_uiConstants.colors.grey200};}`, `div.highlighted.__jsx-style-dynamic-selector{background:${_uiConstants.colors.teal700};color:${_uiConstants.colors.white};}`, `div.disabled.__jsx-style-dynamic-selector{color:${_uiConstants.colors.grey600};cursor:not-allowed;}`]));
69
+ }, ["div.__jsx-style-dynamic-selector{font-size:14px;line-height:16px;padding:4px 8px;color:".concat(_uiConstants.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(_uiConstants.colors.grey200, ";}"), "div.highlighted.__jsx-style-dynamic-selector{background:".concat(_uiConstants.colors.teal700, ";color:").concat(_uiConstants.colors.white, ";}"), "div.disabled.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey600, ";cursor:not-allowed;}")]));
69
70
  };
70
71
 
71
72
  exports.TransferOption = TransferOption;
@@ -47,50 +47,52 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
47
47
 
48
48
  const identity = value => value;
49
49
 
50
- const Transfer = ({
51
- options,
52
- onChange,
53
- addAllText,
54
- addIndividualText,
55
- className,
56
- dataTest,
57
- disabled,
58
- enableOrderChange,
59
- filterCallback,
60
- filterCallbackPicked,
61
- filterLabel,
62
- filterLabelPicked,
63
- filterPlaceholder,
64
- filterPlaceholderPicked,
65
- filterable,
66
- filterablePicked,
67
- height,
68
- hideFilterInput,
69
- hideFilterInputPicked,
70
- initialSearchTerm,
71
- initialSearchTermPicked,
72
- leftFooter,
73
- leftHeader,
74
- loadingPicked,
75
- loading,
76
- maxSelections,
77
- optionsWidth,
78
- removeAllText,
79
- removeIndividualText,
80
- renderOption,
81
- rightFooter,
82
- rightHeader,
83
- searchTerm,
84
- searchTermPicked,
85
- selected,
86
- selectedEmptyComponent,
87
- selectedWidth,
88
- sourceEmptyPlaceholder,
89
- onFilterChange,
90
- onFilterChangePicked,
91
- onEndReached,
92
- onEndReachedPicked
93
- }) => {
50
+ const Transfer = _ref => {
51
+ let {
52
+ options,
53
+ onChange,
54
+ addAllText,
55
+ addIndividualText,
56
+ className,
57
+ dataTest,
58
+ disabled,
59
+ enableOrderChange,
60
+ filterCallback,
61
+ filterCallbackPicked,
62
+ filterLabel,
63
+ filterLabelPicked,
64
+ filterPlaceholder,
65
+ filterPlaceholderPicked,
66
+ filterable,
67
+ filterablePicked,
68
+ height,
69
+ hideFilterInput,
70
+ hideFilterInputPicked,
71
+ initialSearchTerm,
72
+ initialSearchTermPicked,
73
+ leftFooter,
74
+ leftHeader,
75
+ loadingPicked,
76
+ loading,
77
+ maxSelections,
78
+ optionsWidth,
79
+ removeAllText,
80
+ removeIndividualText,
81
+ renderOption,
82
+ rightFooter,
83
+ rightHeader,
84
+ searchTerm,
85
+ searchTermPicked,
86
+ selected,
87
+ selectedEmptyComponent,
88
+ selectedWidth,
89
+ sourceEmptyPlaceholder,
90
+ onFilterChange,
91
+ onFilterChangePicked,
92
+ onEndReached,
93
+ onEndReachedPicked
94
+ } = _ref;
95
+
94
96
  /* Source options search value:
95
97
  * Depending on whether the onFilterChange callback has been provided
96
98
  * either the internal or external search value is used */
@@ -111,9 +113,12 @@ const Transfer = ({
111
113
  * Filters options if filterable is true.
112
114
  */
113
115
 
114
- const sourceOptions = actualFilterCallback(options.filter(({
115
- value
116
- }) => !selected.includes(value)), actualFilter);
116
+ const sourceOptions = actualFilterCallback(options.filter(_ref2 => {
117
+ let {
118
+ value
119
+ } = _ref2;
120
+ return !selected.includes(value);
121
+ }), actualFilter);
117
122
  /*
118
123
  * Picked options highlighting:
119
124
  * These are all the highlighted options on the options side.
@@ -185,9 +190,12 @@ const Transfer = ({
185
190
  * Disabled button states
186
191
  */
187
192
 
188
- const isAddAllDisabled = disabled || sourceOptions.filter(({
189
- disabled
190
- }) => !disabled).length === 0;
193
+ const isAddAllDisabled = disabled || sourceOptions.filter(_ref3 => {
194
+ let {
195
+ disabled
196
+ } = _ref3;
197
+ return !disabled;
198
+ }).length === 0;
191
199
  const isAddIndividualDisabled = disabled || !highlightedSourceOptions.length;
192
200
  const isRemoveAllDisabled = disabled || !selected.length;
193
201
  const isRemoveIndividualDisabled = disabled || !highlightedPickedOptions.length;
@@ -196,20 +204,23 @@ const Transfer = ({
196
204
  className: className,
197
205
  height: height
198
206
  }, /*#__PURE__*/_react.default.createElement(_leftSide.LeftSide, {
199
- dataTest: `${dataTest}-leftside`,
207
+ dataTest: "".concat(dataTest, "-leftside"),
200
208
  width: optionsWidth
201
209
  }, (leftHeader || filterable) && /*#__PURE__*/_react.default.createElement(_leftHeader.LeftHeader, {
202
- dataTest: `${dataTest}-leftheader`
210
+ dataTest: "".concat(dataTest, "-leftheader")
203
211
  }, leftHeader, filterable && !hideFilterInput && /*#__PURE__*/_react.default.createElement(_filter.Filter, {
204
212
  label: filterLabel,
205
213
  placeholder: filterPlaceholder,
206
- dataTest: `${dataTest}-filter`,
214
+ dataTest: "".concat(dataTest, "-filter"),
207
215
  filter: actualFilter,
208
- onChange: onFilterChange ? onFilterChange : ({
209
- value
210
- }) => setInternalFilter(value)
216
+ onChange: onFilterChange ? onFilterChange : _ref4 => {
217
+ let {
218
+ value
219
+ } = _ref4;
220
+ return setInternalFilter(value);
221
+ }
211
222
  })), /*#__PURE__*/_react.default.createElement(_optionsContainer.OptionsContainer, {
212
- dataTest: `${dataTest}-sourceoptions`,
223
+ dataTest: "".concat(dataTest, "-sourceoptions"),
213
224
  emptyComponent: sourceEmptyPlaceholder,
214
225
  getOptionClickHandlers: _index.getOptionClickHandlers,
215
226
  highlightedOptions: highlightedSourceOptions,
@@ -220,12 +231,12 @@ const Transfer = ({
220
231
  toggleHighlightedOption: toggleHighlightedSourceOption,
221
232
  onEndReached: onEndReached
222
233
  }), leftFooter && /*#__PURE__*/_react.default.createElement(_leftFooter.LeftFooter, {
223
- dataTest: `${dataTest}-leftfooter`
234
+ dataTest: "".concat(dataTest, "-leftfooter")
224
235
  }, leftFooter)), /*#__PURE__*/_react.default.createElement(_actions.Actions, {
225
- dataTest: `${dataTest}-actions`
236
+ dataTest: "".concat(dataTest, "-actions")
226
237
  }, maxSelections === Infinity && /*#__PURE__*/_react.default.createElement(_addAll.AddAll, {
227
238
  label: addAllText,
228
- dataTest: `${dataTest}-actions-addall`,
239
+ dataTest: "".concat(dataTest, "-actions-addall"),
229
240
  disabled: isAddAllDisabled,
230
241
  onClick: () => (0, _index.addAllSelectableSourceOptions)({
231
242
  sourceOptions,
@@ -235,7 +246,7 @@ const Transfer = ({
235
246
  })
236
247
  }), /*#__PURE__*/_react.default.createElement(_addIndividual.AddIndividual, {
237
248
  label: addIndividualText,
238
- dataTest: `${dataTest}-actions-addindividual`,
249
+ dataTest: "".concat(dataTest, "-actions-addindividual"),
239
250
  disabled: isAddIndividualDisabled,
240
251
  onClick: () => (0, _index.addIndividualSourceOptions)({
241
252
  filterable,
@@ -248,7 +259,7 @@ const Transfer = ({
248
259
  })
249
260
  }), maxSelections === Infinity && /*#__PURE__*/_react.default.createElement(_removeAll.RemoveAll, {
250
261
  label: removeAllText,
251
- dataTest: `${dataTest}-actions-removeall`,
262
+ dataTest: "".concat(dataTest, "-actions-removeall"),
252
263
  disabled: isRemoveAllDisabled,
253
264
  onClick: () => (0, _index.removeAllPickedOptions)({
254
265
  setHighlightedPickedOptions,
@@ -256,7 +267,7 @@ const Transfer = ({
256
267
  })
257
268
  }), /*#__PURE__*/_react.default.createElement(_removeIndividual.RemoveIndividual, {
258
269
  label: removeIndividualText,
259
- dataTest: `${dataTest}-actions-removeindividual`,
270
+ dataTest: "".concat(dataTest, "-actions-removeindividual"),
260
271
  disabled: isRemoveIndividualDisabled,
261
272
  onClick: () => (0, _index.removeIndividualPickedOptions)({
262
273
  filterablePicked,
@@ -267,21 +278,24 @@ const Transfer = ({
267
278
  setHighlightedPickedOptions
268
279
  })
269
280
  })), /*#__PURE__*/_react.default.createElement(_rightSide.RightSide, {
270
- dataTest: `${dataTest}-rightside`,
281
+ dataTest: "".concat(dataTest, "-rightside"),
271
282
  width: selectedWidth
272
283
  }, (rightHeader || filterablePicked) && /*#__PURE__*/_react.default.createElement(_rightHeader.RightHeader, {
273
- dataTest: `${dataTest}-rightheader`
284
+ dataTest: "".concat(dataTest, "-rightheader")
274
285
  }, rightHeader, filterablePicked && !hideFilterInputPicked && /*#__PURE__*/_react.default.createElement(_filter.Filter, {
275
286
  label: filterLabelPicked,
276
287
  placeholder: filterPlaceholderPicked,
277
- dataTest: `${dataTest}-filter`,
288
+ dataTest: "".concat(dataTest, "-filter"),
278
289
  filter: actualFilterPicked,
279
- onChange: onFilterChangePicked ? onFilterChangePicked : ({
280
- value
281
- }) => setInternalFilterPicked(value)
290
+ onChange: onFilterChangePicked ? onFilterChangePicked : _ref5 => {
291
+ let {
292
+ value
293
+ } = _ref5;
294
+ return setInternalFilterPicked(value);
295
+ }
282
296
  })), /*#__PURE__*/_react.default.createElement(_optionsContainer.OptionsContainer, {
283
297
  selected: true,
284
- dataTest: `${dataTest}-pickedoptions`,
298
+ dataTest: "".concat(dataTest, "-pickedoptions"),
285
299
  emptyComponent: selectedEmptyComponent,
286
300
  getOptionClickHandlers: _index.getOptionClickHandlers,
287
301
  highlightedOptions: highlightedPickedOptions,
@@ -292,9 +306,9 @@ const Transfer = ({
292
306
  toggleHighlightedOption: toggleHighlightedPickedOption,
293
307
  onEndReached: onEndReachedPicked
294
308
  }), (rightFooter || enableOrderChange) && /*#__PURE__*/_react.default.createElement(_rightFooter.RightFooter, {
295
- dataTest: `${dataTest}-rightfooter`
309
+ dataTest: "".concat(dataTest, "-rightfooter")
296
310
  }, enableOrderChange && /*#__PURE__*/_react.default.createElement(_reorderingActions.ReorderingActions, {
297
- dataTest: `${dataTest}-reorderingactions`,
311
+ dataTest: "".concat(dataTest, "-reorderingactions"),
298
312
  disabledDown: (0, _index.isReorderDownDisabled)({
299
313
  highlightedPickedOptions,
300
314
  selected