@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
@@ -25,9 +25,12 @@ describe('Transfer- useHighlightedOptions - toggleRange', () => {
25
25
  });
26
26
  describe('maxSelections=1', () => {
27
27
  const maxSelections = 1;
28
- const highlightedOptions = options.slice(0, 1).map(({
29
- value
30
- }) => value);
28
+ const highlightedOptions = options.slice(0, 1).map(_ref => {
29
+ let {
30
+ value
31
+ } = _ref;
32
+ return value;
33
+ });
31
34
  const lastClicked = options[0].value;
32
35
  it('should replace the current highlighted option', () => {
33
36
  const option = options[1];
@@ -58,9 +61,12 @@ describe('Transfer- useHighlightedOptions - toggleRange', () => {
58
61
  });
59
62
  describe('maxSelections=Infinity', () => {
60
63
  const maxSelections = Infinity;
61
- const highlightedOptions = options.slice(0, 1).map(({
62
- value
63
- }) => value);
64
+ const highlightedOptions = options.slice(0, 1).map(_ref2 => {
65
+ let {
66
+ value
67
+ } = _ref2;
68
+ return value;
69
+ });
64
70
  const lastClicked = options[0].value;
65
71
  it('should not change the highlighted options', () => {
66
72
  const option = options[0];
@@ -76,9 +82,12 @@ describe('Transfer- useHighlightedOptions - toggleRange', () => {
76
82
  expect(setHighlightedOptions).toHaveBeenCalledWith(expected);
77
83
  });
78
84
  it('should highlight all option from the highlighted one to the clicked one', () => {
79
- const expected = options.slice(0, 4).map(({
80
- value
81
- }) => value);
85
+ const expected = options.slice(0, 4).map(_ref3 => {
86
+ let {
87
+ value
88
+ } = _ref3;
89
+ return value;
90
+ });
82
91
  toggleRange({
83
92
  option: options[3],
84
93
  lastClicked,
@@ -90,9 +99,12 @@ describe('Transfer- useHighlightedOptions - toggleRange', () => {
90
99
  expect(setHighlightedOptions).toHaveBeenCalledWith(expected);
91
100
  });
92
101
  it('should highlight from the lastClicked to the most recently clicked one', () => {
93
- const expected = options.slice(1, 4).map(({
94
- value
95
- }) => value);
102
+ const expected = options.slice(1, 4).map(_ref4 => {
103
+ let {
104
+ value
105
+ } = _ref4;
106
+ return value;
107
+ });
96
108
  toggleRange({
97
109
  option: options[3],
98
110
  lastClicked: options[1].value,
@@ -108,16 +120,22 @@ describe('Transfer- useHighlightedOptions - toggleRange', () => {
108
120
  */
109
121
 
110
122
  it('should highlight from the highest in list to the clicked when last clicked not visible anymore', () => {
111
- const expected = options.slice(1, 6).map(({
112
- value
113
- }) => value);
123
+ const expected = options.slice(1, 6).map(_ref5 => {
124
+ let {
125
+ value
126
+ } = _ref5;
127
+ return value;
128
+ });
114
129
  toggleRange({
115
130
  option: options[5],
116
131
  lastClicked: 'not visible anymore',
117
132
  maxSelections,
118
- highlightedOptions: [...options.slice(1, 2), ...options.slice(3, 5)].map(({
119
- value
120
- }) => value),
133
+ highlightedOptions: [...options.slice(1, 2), ...options.slice(3, 5)].map(_ref6 => {
134
+ let {
135
+ value
136
+ } = _ref6;
137
+ return value;
138
+ }),
121
139
  setHighlightedOptions,
122
140
  options
123
141
  });
@@ -129,16 +147,22 @@ describe('Transfer- useHighlightedOptions - toggleRange', () => {
129
147
  */
130
148
 
131
149
  it('should highlight from the highest in list to the clicked when last clicked null', () => {
132
- const expected = options.slice(1, 6).map(({
133
- value
134
- }) => value);
150
+ const expected = options.slice(1, 6).map(_ref7 => {
151
+ let {
152
+ value
153
+ } = _ref7;
154
+ return value;
155
+ });
135
156
  toggleRange({
136
157
  option: options[5],
137
158
  lastClicked: null,
138
159
  maxSelections,
139
- highlightedOptions: [...options.slice(1, 2), ...options.slice(3, 5)].map(({
140
- value
141
- }) => value),
160
+ highlightedOptions: [...options.slice(1, 2), ...options.slice(3, 5)].map(_ref8 => {
161
+ let {
162
+ value
163
+ } = _ref8;
164
+ return value;
165
+ }),
142
166
  setHighlightedOptions,
143
167
  options
144
168
  });
@@ -78,29 +78,37 @@ describe('Pass selected state to renderOptions function', () => {
78
78
  options: options
79
79
  }));
80
80
  expect(renderOption).toHaveBeenCalledTimes(options.length);
81
- renderOption.mock.calls.forEach(([{
82
- selected
83
- }]) => {
81
+ renderOption.mock.calls.forEach(_ref => {
82
+ let [{
83
+ selected
84
+ }] = _ref;
84
85
  expect(selected).toBe(false);
85
86
  });
86
87
  });
87
88
  it('should pass selected=true to picked options', () => {
88
89
  const renderOption = jest.fn();
89
90
  const picked = options.slice(0, 3);
90
- const pickedValues = picked.map(({
91
- value
92
- }) => value);
91
+ const pickedValues = picked.map(_ref2 => {
92
+ let {
93
+ value
94
+ } = _ref2;
95
+ return value;
96
+ });
93
97
  mount( /*#__PURE__*/React.createElement(Transfer, {
94
98
  renderOption: renderOption,
95
99
  onChange: jest.fn(),
96
100
  selected: pickedValues,
97
101
  options: options
98
102
  }));
99
- const withSelectedTrue = renderOption.mock.calls.filter(([{
100
- selected
101
- }]) => selected);
103
+ const withSelectedTrue = renderOption.mock.calls.filter(_ref3 => {
104
+ let [{
105
+ selected
106
+ }] = _ref3;
107
+ return selected;
108
+ });
102
109
  expect(withSelectedTrue).toHaveLength(picked.length);
103
- withSelectedTrue.forEach(([selected], index) => {
110
+ withSelectedTrue.forEach((_ref4, index) => {
111
+ let [selected] = _ref4;
104
112
  expect(selected).toEqual(expect.objectContaining(picked[index]));
105
113
  });
106
114
  });
@@ -2,16 +2,19 @@ import _JSXStyle from "styled-jsx/style";
2
2
  import { spacers } from '@dhis2/ui-constants';
3
3
  import PropTypes from 'prop-types';
4
4
  import React from 'react';
5
- export const Actions = ({
6
- children,
7
- dataTest
8
- }) => /*#__PURE__*/React.createElement("div", {
9
- "data-test": dataTest,
10
- className: _JSXStyle.dynamic([["1457814848", [spacers.dp8]]])
11
- }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
12
- id: "1457814848",
13
- dynamic: [spacers.dp8]
14
- }, [`div.__jsx-style-dynamic-selector{-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:0 ${spacers.dp8};}`, "div.__jsx-style-dynamic-selector>button{margin-top:8px;}", "div.__jsx-style-dynamic-selector>button:first-child{margin-top:0;}"]));
5
+ export const Actions = _ref => {
6
+ let {
7
+ children,
8
+ dataTest
9
+ } = _ref;
10
+ return /*#__PURE__*/React.createElement("div", {
11
+ "data-test": dataTest,
12
+ className: _JSXStyle.dynamic([["1457814848", [spacers.dp8]]])
13
+ }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
14
+ id: "1457814848",
15
+ dynamic: [spacers.dp8]
16
+ }, ["div.__jsx-style-dynamic-selector{-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:0 ".concat(spacers.dp8, ";}"), "div.__jsx-style-dynamic-selector>button{margin-top:8px;}", "div.__jsx-style-dynamic-selector>button:first-child{margin-top:0;}"]));
17
+ };
15
18
  Actions.propTypes = {
16
19
  dataTest: PropTypes.string.isRequired,
17
20
  children: PropTypes.node
@@ -2,20 +2,23 @@ import { Button } from '@dhis2-ui/button';
2
2
  import PropTypes from 'prop-types';
3
3
  import React from 'react';
4
4
  import { IconAddAll } from './icons.js';
5
- export const AddAll = ({
6
- label,
7
- dataTest,
8
- disabled,
9
- onClick
10
- }) => /*#__PURE__*/React.createElement(Button, {
11
- dataTest: dataTest,
12
- disabled: disabled,
13
- onClick: onClick,
14
- icon: /*#__PURE__*/React.createElement(IconAddAll, {
15
- dataTest: `${dataTest}-iconaddall`,
16
- disabled: disabled
17
- })
18
- }, label);
5
+ export const AddAll = _ref => {
6
+ let {
7
+ label,
8
+ dataTest,
9
+ disabled,
10
+ onClick
11
+ } = _ref;
12
+ return /*#__PURE__*/React.createElement(Button, {
13
+ dataTest: dataTest,
14
+ disabled: disabled,
15
+ onClick: onClick,
16
+ icon: /*#__PURE__*/React.createElement(IconAddAll, {
17
+ dataTest: "".concat(dataTest, "-iconaddall"),
18
+ disabled: disabled
19
+ })
20
+ }, label);
21
+ };
19
22
  AddAll.propTypes = {
20
23
  dataTest: PropTypes.string.isRequired,
21
24
  onClick: PropTypes.func.isRequired,
@@ -2,20 +2,23 @@ import { Button } from '@dhis2-ui/button';
2
2
  import PropTypes from 'prop-types';
3
3
  import React from 'react';
4
4
  import { IconAddIndividual } from './icons.js';
5
- export const AddIndividual = ({
6
- label,
7
- dataTest,
8
- disabled,
9
- onClick
10
- }) => /*#__PURE__*/React.createElement(Button, {
11
- dataTest: dataTest,
12
- disabled: disabled,
13
- onClick: onClick,
14
- icon: /*#__PURE__*/React.createElement(IconAddIndividual, {
5
+ export const AddIndividual = _ref => {
6
+ let {
7
+ label,
8
+ dataTest,
9
+ disabled,
10
+ onClick
11
+ } = _ref;
12
+ return /*#__PURE__*/React.createElement(Button, {
13
+ dataTest: dataTest,
15
14
  disabled: disabled,
16
- dataTest: `${dataTest}-iconaddindividual`
17
- })
18
- }, label);
15
+ onClick: onClick,
16
+ icon: /*#__PURE__*/React.createElement(IconAddIndividual, {
17
+ disabled: disabled,
18
+ dataTest: "".concat(dataTest, "-iconaddindividual")
19
+ })
20
+ }, label);
21
+ };
19
22
  AddIndividual.propTypes = {
20
23
  dataTest: PropTypes.string.isRequired,
21
24
  onClick: PropTypes.func.isRequired,
@@ -8,12 +8,13 @@ import { ADD_MODE, RANGE_MODE, REPLACE_MODE } from './modes.js';
8
8
  * @return {string}
9
9
  */
10
10
 
11
- export const getModeByModifierKey = ({
12
- altKey,
13
- shiftKey,
14
- ctrlKey,
15
- metaKey
16
- }) => {
11
+ export const getModeByModifierKey = _ref => {
12
+ let {
13
+ altKey,
14
+ shiftKey,
15
+ ctrlKey,
16
+ metaKey
17
+ } = _ref;
17
18
  const keys = [altKey, shiftKey, ctrlKey, metaKey];
18
19
  const amountKeyPressed = keys.filter(v => v);
19
20
  const moreThanOneKeyPressed = amountKeyPressed.length;
@@ -1,18 +1,21 @@
1
1
  import _JSXStyle from "styled-jsx/style";
2
2
  import PropTypes from 'prop-types';
3
3
  import React from 'react';
4
- export const Container = ({
5
- children,
6
- dataTest,
7
- className,
8
- height
9
- }) => /*#__PURE__*/React.createElement("div", {
10
- "data-test": dataTest,
11
- className: _JSXStyle.dynamic([["3332822660", [height]]]) + " " + (className || "")
12
- }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
13
- id: "3332822660",
14
- dynamic: [height]
15
- }, [`div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:${height};}`]));
4
+ export const Container = _ref => {
5
+ let {
6
+ children,
7
+ dataTest,
8
+ className,
9
+ height
10
+ } = _ref;
11
+ return /*#__PURE__*/React.createElement("div", {
12
+ "data-test": dataTest,
13
+ className: _JSXStyle.dynamic([["3332822660", [height]]]) + " " + (className || "")
14
+ }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
15
+ id: "3332822660",
16
+ dynamic: [height]
17
+ }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:".concat(height, ";}")]));
18
+ };
16
19
  Container.propTypes = {
17
20
  height: PropTypes.string.isRequired,
18
21
  children: PropTypes.node,
@@ -2,21 +2,27 @@ import _JSXStyle from "styled-jsx/style";
2
2
  import { IntersectionDetector } from '@dhis2-ui/intersection-detector';
3
3
  import PropTypes from 'prop-types';
4
4
  import React from 'react';
5
- export const EndIntersectionDetector = ({
6
- rootRef,
7
- onEndReached,
8
- dataTest
9
- }) => /*#__PURE__*/React.createElement("div", {
10
- "data-test": dataTest,
11
- className: "jsx-4200578429"
12
- }, /*#__PURE__*/React.createElement(IntersectionDetector, {
13
- rootRef: rootRef,
14
- onChange: ({
15
- isIntersecting
16
- }) => isIntersecting && onEndReached()
17
- }), /*#__PURE__*/React.createElement(_JSXStyle, {
18
- id: "4200578429"
19
- }, ["div.jsx-4200578429{width:100%;height:50px;position:absolute;z-index:-1;bottom:0;left:0;}"]));
5
+ export const EndIntersectionDetector = _ref => {
6
+ let {
7
+ rootRef,
8
+ onEndReached,
9
+ dataTest
10
+ } = _ref;
11
+ return /*#__PURE__*/React.createElement("div", {
12
+ "data-test": dataTest,
13
+ className: "jsx-4200578429"
14
+ }, /*#__PURE__*/React.createElement(IntersectionDetector, {
15
+ rootRef: rootRef,
16
+ onChange: _ref2 => {
17
+ let {
18
+ isIntersecting
19
+ } = _ref2;
20
+ return isIntersecting && onEndReached();
21
+ }
22
+ }), /*#__PURE__*/React.createElement(_JSXStyle, {
23
+ id: "4200578429"
24
+ }, ["div.jsx-4200578429{width:100%;height:50px;position:absolute;z-index:-1;bottom:0;left:0;}"]));
25
+ };
20
26
  EndIntersectionDetector.propTypes = {
21
27
  rootRef: PropTypes.shape({
22
28
  current: PropTypes.instanceOf(HTMLElement)
@@ -68,7 +68,8 @@ Then('the previously highlighted items are still highlighted', () => {
68
68
  });
69
69
  Then('only the previously highlighted items are highlighted', () => {
70
70
  cy.get('@enabledHighlightedSourceOptions').should('have.class', 'highlighted');
71
- cy.all(() => cy.get('{transfer-sourceoptions} {transferoption}'), () => cy.get('@enabledHighlightedSourceOptions')).should(([$sourceOptions, $previouslyHighlightedOptions]) => {
71
+ cy.all(() => cy.get('{transfer-sourceoptions} {transferoption}'), () => cy.get('@enabledHighlightedSourceOptions')).should(_ref => {
72
+ let [$sourceOptions, $previouslyHighlightedOptions] = _ref;
72
73
  const previouslyHighlightedOptions = $previouslyHighlightedOptions.toArray().map(extractOptionFromElement);
73
74
  const $notHighlightedSourceOptions = $sourceOptions.filter((_index, sourceOptionEl) => {
74
75
  const label = sourceOptionEl.innerText;
@@ -81,7 +82,8 @@ Then('only the previously highlighted items are highlighted', () => {
81
82
  });
82
83
  });
83
84
  Then('the enabled options in the range are highlighted', () => {
84
- cy.all(() => cy.get('{transfer-sourceoptions} {transferoption}'), () => cy.get('@clickedEnabledOption'), () => cy.get('@clickedWithShiftEnabledOption')).should(([$all, $clickedEnabledOption, $clickedWithShiftEnabledOption]) => {
85
+ cy.all(() => cy.get('{transfer-sourceoptions} {transferoption}'), () => cy.get('@clickedEnabledOption'), () => cy.get('@clickedWithShiftEnabledOption')).should(_ref2 => {
86
+ let [$all, $clickedEnabledOption, $clickedWithShiftEnabledOption] = _ref2;
85
87
  const from = $clickedEnabledOption.index();
86
88
  const to = $clickedWithShiftEnabledOption.index();
87
89
  const $allInRange = $all.slice(from, to + 1);
@@ -38,7 +38,8 @@ When('the user selects multiple options', () => {
38
38
  cy.get('{transfer-actions-addindividual}').click();
39
39
  });
40
40
  Then('the order of the selectable options should match the order of the supplied options', () => {
41
- cy.all(() => cy.window(), () => cy.get('{transfer-sourceoptions} {transferoption}')).should(([win, $options]) => {
41
+ cy.all(() => cy.window(), () => cy.get('{transfer-sourceoptions} {transferoption}')).should(_ref => {
42
+ let [win, $options] = _ref;
42
43
  const {
43
44
  options
44
45
  } = win;
@@ -47,60 +48,80 @@ Then('the order of the selectable options should match the order of the supplied
47
48
  });
48
49
  });
49
50
  Then('the order of the remaining selectable options should match the order of the supplied options', () => {
50
- cy.all(() => cy.window(), () => cy.get('{transfer-sourceoptions} {transferoption}')).should(([win, $options]) => {
51
+ cy.all(() => cy.window(), () => cy.get('{transfer-sourceoptions} {transferoption}')).should(_ref2 => {
52
+ let [win, $options] = _ref2;
51
53
  const selectableSourceOptions = $options.toArray().map(extractOptionFromElement);
52
- const options = win.options.filter(option => selectableSourceOptions.find(({
53
- label,
54
- value
55
- }) => label === option.label && value === option.value));
54
+ const options = win.options.filter(option => selectableSourceOptions.find(_ref3 => {
55
+ let {
56
+ label,
57
+ value
58
+ } = _ref3;
59
+ return label === option.label && value === option.value;
60
+ }));
56
61
  expect(selectableSourceOptions).to.eql(options);
57
62
  });
58
63
  });
59
64
  Then('it should be positioned according to the order of the supplied options', () => {
60
- cy.all(() => cy.window(), () => cy.get('{transfer-sourceoptions} {transferoption}'), () => cy.get('@deselectedOptions')).should(([win, $selectableSourceOptions, deselectedOptions]) => {
65
+ cy.all(() => cy.window(), () => cy.get('{transfer-sourceoptions} {transferoption}'), () => cy.get('@deselectedOptions')).should(_ref4 => {
66
+ let [win, $selectableSourceOptions, deselectedOptions] = _ref4;
61
67
  // filter out non-selectable options and compare with selectable options
62
68
  // this confirms that the order is correct
63
69
  const selectableSourceOptions = $selectableSourceOptions.toArray().map(extractOptionFromElement);
64
- const originalOptions = win.options.filter(option => selectableSourceOptions.find(({
65
- label,
66
- value
67
- }) => label === option.label && value === option.value));
70
+ const originalOptions = win.options.filter(option => selectableSourceOptions.find(_ref5 => {
71
+ let {
72
+ label,
73
+ value
74
+ } = _ref5;
75
+ return label === option.label && value === option.value;
76
+ }));
68
77
  expect(selectableSourceOptions).to.eql(originalOptions); // and confirm that the deselected option is in the selectable options list
69
78
 
70
79
  const [deselectedOption] = deselectedOptions;
71
- const hasOption = !!selectableSourceOptions.find(({
72
- label,
73
- value
74
- }) => label === deselectedOption.label && value === deselectedOption.value);
80
+ const hasOption = !!selectableSourceOptions.find(_ref6 => {
81
+ let {
82
+ label,
83
+ value
84
+ } = _ref6;
85
+ return label === deselectedOption.label && value === deselectedOption.value;
86
+ });
75
87
  expect(hasOption).to.equal(true);
76
88
  });
77
89
  });
78
90
  Then('all should take the position according to the order of the supplied options', () => {
79
- cy.all(() => cy.window(), () => cy.get('{transfer-sourceoptions} {transferoption}'), () => cy.get('@deselectedOptions')).should(([win, $selectableSourceOptions, deselectedOptions]) => {
91
+ cy.all(() => cy.window(), () => cy.get('{transfer-sourceoptions} {transferoption}'), () => cy.get('@deselectedOptions')).should(_ref7 => {
92
+ let [win, $selectableSourceOptions, deselectedOptions] = _ref7;
80
93
  const selectableSourceOptions = $selectableSourceOptions.toArray().map(extractOptionFromElement);
81
- const options = win.options.filter(option => selectableSourceOptions.find(({
82
- label,
83
- value
84
- }) => label === option.label && value === option.value));
85
- expect(selectableSourceOptions).to.eql(options);
86
- const hasAllOptions = deselectedOptions.every(deselectedOption => {
87
- const result = !!selectableSourceOptions.find(({
94
+ const options = win.options.filter(option => selectableSourceOptions.find(_ref8 => {
95
+ let {
88
96
  label,
89
97
  value
90
- }) => label === deselectedOption.label && value === deselectedOption.value);
98
+ } = _ref8;
99
+ return label === option.label && value === option.value;
100
+ }));
101
+ expect(selectableSourceOptions).to.eql(options);
102
+ const hasAllOptions = deselectedOptions.every(deselectedOption => {
103
+ const result = !!selectableSourceOptions.find(_ref9 => {
104
+ let {
105
+ label,
106
+ value
107
+ } = _ref9;
108
+ return label === deselectedOption.label && value === deselectedOption.value;
109
+ });
91
110
  return result;
92
111
  });
93
112
  expect(hasAllOptions).to.equal(true);
94
113
  });
95
114
  });
96
115
  Then('it should be added to the end of the selected options list', () => {
97
- cy.all(() => cy.get('@selectedOptions'), () => cy.get('{transfer-pickedoptions} {transferoption}')).should(([transferredOptions, $selectedOptions]) => {
116
+ cy.all(() => cy.get('@selectedOptions'), () => cy.get('{transfer-pickedoptions} {transferoption}')).should(_ref10 => {
117
+ let [transferredOptions, $selectedOptions] = _ref10;
98
118
  const lastSelectedOptions = $selectedOptions.toArray().slice(transferredOptions.length * -1).map(extractOptionFromElement);
99
119
  expect(transferredOptions).to.eql(lastSelectedOptions);
100
120
  });
101
121
  });
102
122
  Then('they should be added to the end of the selected options list in the order they have been highlighted', () => {
103
- cy.all(() => cy.get('@selectedOptions'), () => cy.get('{transfer-pickedoptions} {transferoption}')).should(([transferredOptions, $selectedOptions]) => {
123
+ cy.all(() => cy.get('@selectedOptions'), () => cy.get('{transfer-pickedoptions} {transferoption}')).should(_ref11 => {
124
+ let [transferredOptions, $selectedOptions] = _ref11;
104
125
  const lastSelectedOptions = $selectedOptions.toArray().slice(transferredOptions.length * -1).map(extractOptionFromElement);
105
126
  expect(transferredOptions).to.eql(lastSelectedOptions);
106
127
  });
@@ -31,7 +31,8 @@ Given("the filter value is controlled by the component's consumer", () => {
31
31
  cy.visitStory('Transfer filtering', 'Controlled Filter');
32
32
  });
33
33
  When('the user uses the same search term but {string}', secondCase => {
34
- cy.all(() => cy.get('@firstCaseTerm'), () => cy.get('{transfer-filter} input')).then(([firstCaseTerm, $filterInput]) => {
34
+ cy.all(() => cy.get('@firstCaseTerm'), () => cy.get('{transfer-filter} input')).then(_ref => {
35
+ let [firstCaseTerm, $filterInput] = _ref;
35
36
  let secondCaseTerm;
36
37
 
37
38
  if (secondCase === 'uppercase') {
@@ -50,7 +51,8 @@ When('the filter value changes', () => {
50
51
  cy.get('{transfer-filter} input').then($input => console.log('$input', $input) || $input).type('ANC');
51
52
  });
52
53
  Then('all the matching items should be shown in the options list', () => {
53
- cy.all(() => cy.get('{transfer-filter}'), () => cy.get('{transferoption}')).should(([$filter, $options]) => {
54
+ cy.all(() => cy.get('{transfer-filter}'), () => cy.get('{transferoption}')).should(_ref2 => {
55
+ let [$filter, $options] = _ref2;
54
56
  const searchTerm = $filter.val();
55
57
  expect($options).to.have.length.of.at.least(1);
56
58
  $options.each((index, option) => {
@@ -68,7 +70,8 @@ Then('information should be displayed that no items matched the filter', () => {
68
70
  }).should('exist');
69
71
  });
70
72
  Then('the same options should be shown', () => {
71
- cy.all(() => cy.get('@firstCaseOptions'), () => cy.get('{transfer-sourceoptions} {transferoption}')).should(([$firstCaseOptions, $secondCaseOptions]) => {
73
+ cy.all(() => cy.get('@firstCaseOptions'), () => cy.get('{transfer-sourceoptions} {transferoption}')).should(_ref3 => {
74
+ let [$firstCaseOptions, $secondCaseOptions] = _ref3;
72
75
  const firstCaseOptions = $firstCaseOptions.toArray().map(extractOptionFromElement);
73
76
  const secondCaseOptions = $secondCaseOptions.toArray().map(extractOptionFromElement);
74
77
  expect(firstCaseOptions).to.eql(secondCaseOptions);
@@ -75,7 +75,8 @@ Then('the clicked option should be highlighted', () => {
75
75
  cy.get('@initiallyHighlighted').should('have.class', 'highlighted');
76
76
  });
77
77
  Then('the option is not highlighted', () => {
78
- cy.all(() => cy.get('@hiddenHighlighted'), () => cy.get('{transfer-sourceoptions} {transferoption}')).should(([hiddenHighlighted, $options]) => {
78
+ cy.all(() => cy.get('@hiddenHighlighted'), () => cy.get('{transfer-sourceoptions} {transferoption}')).should(_ref => {
79
+ let [hiddenHighlighted, $options] = _ref;
79
80
  const $hiddenHighlighted = $options.filter((index, optionEl) => {
80
81
  const option = extractOptionFromElement(optionEl);
81
82
  return option.label === hiddenHighlighted.label && option.value === hiddenHighlighted.value;
@@ -86,7 +87,8 @@ Then('the option is not highlighted', () => {
86
87
  });
87
88
  });
88
89
  Then('the clicked options should be highlighted', () => {
89
- cy.all(() => cy.get('@initiallyHighlighted'), () => cy.get('@secondBelowInitiallyHighlighted')).should(([$initiallyHighlighted, $secondBelowInitiallyHighlighted]) => {
90
+ cy.all(() => cy.get('@initiallyHighlighted'), () => cy.get('@secondBelowInitiallyHighlighted')).should(_ref2 => {
91
+ let [$initiallyHighlighted, $secondBelowInitiallyHighlighted] = _ref2;
90
92
  expect($initiallyHighlighted).to.have.class('highlighted');
91
93
  expect($secondBelowInitiallyHighlighted).to.have.class('highlighted');
92
94
  });
@@ -104,7 +106,8 @@ Then('all options between the option highlighted most recently without SHIFT and
104
106
  cy.get('@firstBelowInitiallyHighlighted').should('have.class', 'highlighted');
105
107
  });
106
108
  Then('all other previously highlighted options are not highlighted anymore', () => {
107
- cy.all(() => cy.get('@initiallyHighlightedMultiple').last().invoke('index'), () => cy.get('@initiallyHighlightedMultiple')).should(([lastInitiallyHighlightedIndex, $initiallyHighlightedMultiple]) => {
109
+ cy.all(() => cy.get('@initiallyHighlightedMultiple').last().invoke('index'), () => cy.get('@initiallyHighlightedMultiple')).should(_ref3 => {
110
+ let [lastInitiallyHighlightedIndex, $initiallyHighlightedMultiple] = _ref3;
108
111
  $initiallyHighlightedMultiple.filter((_, el) => {
109
112
  const $el = Cypress.$(el);
110
113
  return $el.index() !== lastInitiallyHighlightedIndex;
@@ -115,7 +118,8 @@ Then('all other previously highlighted options are not highlighted anymore', ()
115
118
  });
116
119
  });
117
120
  Then('the range from the visually first highlighted option to the SHIFT-clicked option is highlighted', () => {
118
- cy.all(() => cy.get('@initiallyHighlightedMultiple'), () => cy.get('@firstShiftClicked'), () => cy.get('@list').find('{transferoption}')).should(([$initiallyHighlightedMultiple, $firstShiftClicked, $all]) => {
121
+ cy.all(() => cy.get('@initiallyHighlightedMultiple'), () => cy.get('@firstShiftClicked'), () => cy.get('@list').find('{transferoption}')).should(_ref4 => {
122
+ let [$initiallyHighlightedMultiple, $firstShiftClicked, $all] = _ref4;
119
123
  const firstVisibleHighlightedIndex = $initiallyHighlightedMultiple.filter(':visible').eq(0).index();
120
124
  const shiftIndex = $firstShiftClicked.index();
121
125
  const from = Math.min(firstVisibleHighlightedIndex, shiftIndex);
@@ -129,7 +133,8 @@ Then('the range from the visually first highlighted option to the SHIFT-clicked
129
133
  });
130
134
  });
131
135
  Then('the range from the first clicked option to the second clicked option is highlighted', () => {
132
- cy.all(() => cy.get('@firstClickedIndexWithShift'), () => cy.get('@secondClickedIndexWithShift'), () => cy.get('@list').find('{transferoption}')).should(([firstClickedIndexWithShift, secondClickedIndexWithShift, $all]) => {
136
+ cy.all(() => cy.get('@firstClickedIndexWithShift'), () => cy.get('@secondClickedIndexWithShift'), () => cy.get('@list').find('{transferoption}')).should(_ref5 => {
137
+ let [firstClickedIndexWithShift, secondClickedIndexWithShift, $all] = _ref5;
133
138
  const from = Math.min(firstClickedIndexWithShift, secondClickedIndexWithShift);
134
139
  const to = Math.max(firstClickedIndexWithShift, secondClickedIndexWithShift);
135
140
  const $insideRange = $all.slice(from, to + 1);
@@ -18,12 +18,12 @@ Given('the picked list is not loading', () => {
18
18
  Then('the loading indicator should be shown', () => {
19
19
  cy.get('@listType').then(listType => {
20
20
  const listSelector = listType === 'source' ? '{transfer-leftside}' : '{transfer-rightside}';
21
- cy.get(`${listSelector} .loading`).should('exist');
21
+ cy.get("".concat(listSelector, " .loading")).should('exist');
22
22
  });
23
23
  });
24
24
  Then('the loading indicator should not be shown', () => {
25
25
  cy.get('@listType').then(listType => {
26
26
  const listSelector = listType === 'source' ? '{transfer-leftside}' : '{transfer-rightside}';
27
- cy.get(`${listSelector} .loading`).should('not.exist');
27
+ cy.get("".concat(listSelector, " .loading")).should('not.exist');
28
28
  });
29
29
  });
@@ -29,17 +29,19 @@ Given('the Transfer does not have enough items to fill the picked list completel
29
29
  When('the user scroll to the end of the list', () => {
30
30
  cy.get('@listType').then(listType => {
31
31
  const listSelector = listType === 'source' ? 'transfer-sourceoptions' : 'transfer-pickedoptions';
32
- cy.get(`{${listSelector}-endintersectiondetector}`).scrollIntoView();
32
+ cy.get("{".concat(listSelector, "-endintersectiondetector}")).scrollIntoView();
33
33
  });
34
34
  });
35
35
  Then('the callback for reaching the end should not be called', () => {
36
- cy.all(() => cy.window(), () => cy.get('@listType')).should(([win, listType]) => {
36
+ cy.all(() => cy.window(), () => cy.get('@listType')).should(_ref => {
37
+ let [win, listType] = _ref;
37
38
  const callback = listType === 'source' ? win.onEndReached : win.onEndReachedPicked;
38
39
  expect(callback).to.not.be.called;
39
40
  });
40
41
  });
41
42
  Then('the callback for reaching the end should be called', () => {
42
- cy.all(() => cy.window(), () => cy.get('@listType')).should(([win, listType]) => {
43
+ cy.all(() => cy.window(), () => cy.get('@listType')).should(_ref2 => {
44
+ let [win, listType] = _ref2;
43
45
  const callback = listType === 'source' ? win.onEndReached : win.onEndReachedPicked;
44
46
  expect(callback).to.be.calledOnce;
45
47
  });