@dhis2-ui/transfer 10.16.3 → 10.16.5

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