@dhis2-ui/select 9.11.0 → 9.11.1-beta.1
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.
- package/build/cjs/index.js +0 -6
- package/build/cjs/locales/index.js +3 -69
- package/build/cjs/multi-select/__tests__/multi-select.test.js +1 -7
- package/build/cjs/multi-select/__tests__/selection-list.test.js +7 -18
- package/build/cjs/multi-select/features/accepts_blur_cb/index.js +1 -2
- package/build/cjs/multi-select/features/accepts_focus_cb/index.js +1 -2
- package/build/cjs/multi-select/features/accepts_initial_focus/index.js +1 -2
- package/build/cjs/multi-select/features/accepts_loading/index.js +0 -1
- package/build/cjs/multi-select/features/accepts_max_height/index.js +1 -2
- package/build/cjs/multi-select/features/accepts_placeholder/index.js +0 -1
- package/build/cjs/multi-select/features/accepts_prefix/index.js +0 -1
- package/build/cjs/multi-select/features/allows_invalid_options/index.js +0 -1
- package/build/cjs/multi-select/features/allows_selecting/index.js +2 -3
- package/build/cjs/multi-select/features/can_be_cleared/index.js +1 -2
- package/build/cjs/multi-select/features/can_be_disabled/index.js +0 -1
- package/build/cjs/multi-select/features/can_be_empty/index.js +0 -1
- package/build/cjs/multi-select/features/can_be_filtered/index.js +0 -1
- package/build/cjs/multi-select/features/can_be_opened_and_closed/index.js +0 -1
- package/build/cjs/multi-select/features/common/index.js +2 -3
- package/build/cjs/multi-select/features/duplicate_option_values/index.js +0 -1
- package/build/cjs/multi-select/features/menu_width_matches_input/index.js +1 -2
- package/build/cjs/multi-select/features/position/index.js +4 -5
- package/build/cjs/multi-select/features/position.feature +0 -1
- package/build/cjs/multi-select/features/shows_selections/index.js +0 -1
- package/build/cjs/multi-select/filterable-menu.js +1 -8
- package/build/cjs/multi-select/index.js +0 -1
- package/build/cjs/multi-select/input.js +6 -19
- package/build/cjs/multi-select/menu.js +16 -23
- package/build/cjs/multi-select/multi-select.e2e.stories.js +675 -0
- package/build/cjs/multi-select/multi-select.js +4 -21
- package/build/cjs/multi-select/{multi-select.stories.js → multi-select.prod.stories.js} +62 -101
- package/build/cjs/multi-select/selection-list.js +10 -18
- package/build/cjs/multi-select-field/__tests__/multi-select-field.test.js +1 -7
- package/build/cjs/multi-select-field/features/accepts_help_text/index.js +0 -1
- package/build/cjs/multi-select-field/features/accepts_label/index.js +0 -1
- package/build/cjs/multi-select-field/features/accepts_validation_text/index.js +0 -1
- package/build/cjs/multi-select-field/features/can_be_required/index.js +0 -1
- package/build/cjs/multi-select-field/features/has_default_clear_text/index.js +0 -1
- package/build/cjs/multi-select-field/features/has_default_empty_text/index.js +0 -1
- package/build/cjs/multi-select-field/features/has_default_filter_nomatch_text/index.js +0 -1
- package/build/cjs/multi-select-field/features/has_default_filter_placeholder/index.js +0 -1
- package/build/cjs/multi-select-field/features/has_default_loading_text/index.js +0 -1
- package/build/cjs/multi-select-field/index.js +0 -1
- package/build/cjs/multi-select-field/multi-select-field.e2e.stories.js +89 -0
- package/build/cjs/multi-select-field/multi-select-field.js +10 -51
- package/build/cjs/multi-select-field/{multi-select-field.stories.js → multi-select-field.prod.stories.js} +31 -39
- package/build/cjs/multi-select-option/index.js +0 -1
- package/build/cjs/multi-select-option/multi-select-option.js +4 -14
- package/build/cjs/select/__tests__/select.test.js +1 -7
- package/build/cjs/select/debounce/debounce.js +1 -8
- package/build/cjs/select/debounce/debounce.spec.js +0 -1
- package/build/cjs/select/empty.js +2 -9
- package/build/cjs/select/filter-input.js +3 -11
- package/build/cjs/select/filterable-menu.js +15 -29
- package/build/cjs/select/index.js +0 -8
- package/build/cjs/select/input-clear-button.js +3 -11
- package/build/cjs/select/input-placeholder.js +2 -11
- package/build/cjs/select/input-prefix.js +2 -11
- package/build/cjs/select/input-wrapper.js +2 -11
- package/build/cjs/select/loading.js +3 -12
- package/build/cjs/select/menu-wrapper.js +4 -13
- package/build/cjs/select/no-match.js +2 -9
- package/build/cjs/select/option-helpers.js +9 -18
- package/build/cjs/select/select.js +23 -69
- package/build/cjs/single-select/__tests__/selection.test.js +7 -18
- package/build/cjs/single-select/__tests__/single-select.test.js +1 -7
- package/build/cjs/single-select/features/accepts_blur_cb/index.js +1 -2
- package/build/cjs/single-select/features/accepts_focus_cb/index.js +1 -2
- package/build/cjs/single-select/features/accepts_initial_focus/index.js +1 -2
- package/build/cjs/single-select/features/accepts_loading/index.js +0 -1
- package/build/cjs/single-select/features/accepts_max_height/index.js +1 -2
- package/build/cjs/single-select/features/accepts_placeholder/index.js +0 -1
- package/build/cjs/single-select/features/accepts_prefix/index.js +0 -1
- package/build/cjs/single-select/features/allows_invalid_options/index.js +0 -1
- package/build/cjs/single-select/features/allows_selecting/index.js +2 -3
- package/build/cjs/single-select/features/can_be_cleared/index.js +1 -2
- package/build/cjs/single-select/features/can_be_disabled/index.js +0 -1
- package/build/cjs/single-select/features/can_be_empty/index.js +0 -1
- package/build/cjs/single-select/features/can_be_filtered/index.js +0 -1
- package/build/cjs/single-select/features/can_be_opened_and_closed/index.js +0 -1
- package/build/cjs/single-select/features/common/index.js +2 -3
- package/build/cjs/single-select/features/duplicate_option_values/index.js +0 -1
- package/build/cjs/single-select/features/menu_width_matches_input/index.js +1 -2
- package/build/cjs/single-select/features/position/index.js +3 -4
- package/build/cjs/single-select/features/shows_selections/index.js +0 -1
- package/build/cjs/single-select/filterable-menu.js +1 -8
- package/build/cjs/single-select/index.js +0 -1
- package/build/cjs/single-select/input.js +6 -19
- package/build/cjs/single-select/menu.js +12 -21
- package/build/cjs/single-select/selection.js +5 -17
- package/build/cjs/single-select/single-select.e2e.stories.js +633 -0
- package/build/cjs/single-select/single-select.js +4 -25
- package/build/cjs/single-select/{single-select.stories.js → single-select.prod.stories.js} +58 -95
- package/build/cjs/single-select-field/__tests__/single-select-field.test.js +1 -7
- package/build/cjs/single-select-field/features/accepts_help_text/index.js +0 -1
- package/build/cjs/single-select-field/features/accepts_label/index.js +0 -1
- package/build/cjs/single-select-field/features/accepts_validation_text/index.js +0 -1
- package/build/cjs/single-select-field/features/can_be_required/index.js +0 -1
- package/build/cjs/single-select-field/features/has_default_clear_text/index.js +0 -1
- package/build/cjs/single-select-field/features/has_default_empty_text/index.js +0 -1
- package/build/cjs/single-select-field/features/has_default_filter_nomatch_text/index.js +0 -1
- package/build/cjs/single-select-field/features/has_default_filter_placeholder/index.js +0 -1
- package/build/cjs/single-select-field/features/has_default_loading_text/index.js +0 -1
- package/build/cjs/single-select-field/index.js +0 -1
- package/build/cjs/single-select-field/single-select-field.e2e.stories.js +89 -0
- package/build/cjs/single-select-field/single-select-field.js +10 -51
- package/build/cjs/single-select-field/{single-select-field.stories.js → single-select-field.prod.stories.js} +31 -39
- package/build/cjs/single-select-option/index.js +0 -1
- package/build/cjs/single-select-option/single-select-option.js +2 -10
- package/build/es/multi-select/__tests__/selection-list.test.js +6 -3
- package/build/es/multi-select/features/accepts_blur_cb/index.js +1 -1
- package/build/es/multi-select/features/accepts_focus_cb/index.js +1 -1
- package/build/es/multi-select/features/accepts_initial_focus/index.js +1 -1
- package/build/es/multi-select/features/accepts_max_height/index.js +1 -1
- package/build/es/multi-select/features/allows_selecting/index.js +2 -2
- package/build/es/multi-select/features/can_be_cleared/index.js +1 -1
- package/build/es/multi-select/features/common/index.js +2 -2
- package/build/es/multi-select/features/menu_width_matches_input/index.js +1 -1
- package/build/es/multi-select/features/position/index.js +4 -4
- package/build/es/multi-select/features/position.feature +0 -1
- package/build/es/multi-select/filterable-menu.js +0 -2
- package/build/es/multi-select/input.js +5 -9
- package/build/es/multi-select/menu.js +15 -17
- package/build/es/multi-select/{multi-select.stories.e2e.js → multi-select.e2e.stories.js} +74 -42
- package/build/es/multi-select/multi-select.js +3 -9
- package/build/es/multi-select/{multi-select.stories.js → multi-select.prod.stories.js} +40 -24
- package/build/es/multi-select/selection-list.js +9 -12
- package/build/es/multi-select-field/{multi-select-field.stories.e2e.js → multi-select-field.e2e.stories.js} +18 -9
- package/build/es/multi-select-field/multi-select-field.js +4 -35
- package/build/es/multi-select-field/{multi-select-field.stories.js → multi-select-field.prod.stories.js} +19 -9
- package/build/es/multi-select-option/multi-select-option.js +3 -5
- package/build/es/select/debounce/debounce.js +1 -6
- package/build/es/select/empty.js +1 -3
- package/build/es/select/filter-input.js +2 -4
- package/build/es/select/filterable-menu.js +12 -15
- package/build/es/select/input-clear-button.js +2 -4
- package/build/es/select/input-placeholder.js +1 -5
- package/build/es/select/input-prefix.js +1 -5
- package/build/es/select/input-wrapper.js +1 -3
- package/build/es/select/loading.js +2 -2
- package/build/es/select/menu-wrapper.js +3 -5
- package/build/es/select/no-match.js +1 -3
- package/build/es/select/option-helpers.js +10 -6
- package/build/es/select/select.js +22 -51
- package/build/es/single-select/__tests__/selection.test.js +6 -3
- package/build/es/single-select/features/accepts_blur_cb/index.js +1 -1
- package/build/es/single-select/features/accepts_focus_cb/index.js +1 -1
- package/build/es/single-select/features/accepts_initial_focus/index.js +1 -1
- package/build/es/single-select/features/accepts_max_height/index.js +1 -1
- package/build/es/single-select/features/allows_selecting/index.js +2 -2
- package/build/es/single-select/features/can_be_cleared/index.js +1 -1
- package/build/es/single-select/features/common/index.js +2 -2
- package/build/es/single-select/features/menu_width_matches_input/index.js +1 -1
- package/build/es/single-select/features/position/index.js +3 -3
- package/build/es/single-select/input.js +5 -9
- package/build/es/single-select/menu.js +11 -15
- package/build/es/single-select/selection.js +4 -9
- package/build/es/single-select/{single-select.stories.e2e.js → single-select.e2e.stories.js} +68 -38
- package/build/es/single-select/single-select.js +3 -13
- package/build/es/single-select/{single-select.stories.js → single-select.prod.stories.js} +37 -24
- package/build/es/single-select-field/{single-select-field.stories.e2e.js → single-select-field.e2e.stories.js} +18 -9
- package/build/es/single-select-field/single-select-field.js +4 -35
- package/build/es/single-select-field/{single-select-field.stories.js → single-select-field.prod.stories.js} +19 -9
- package/build/es/single-select-option/single-select-option.js +1 -3
- package/package.json +18 -18
- package/build/cjs/multi-select/multi-select.stories.e2e.js +0 -618
- package/build/cjs/multi-select-field/multi-select-field.stories.e2e.js +0 -73
- package/build/cjs/single-select/single-select.stories.e2e.js +0 -579
- package/build/cjs/single-select-field/single-select-field.stories.e2e.js +0 -73
|
@@ -4,139 +4,116 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.Select = void 0;
|
|
7
|
-
|
|
8
7
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
9
|
-
|
|
10
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
-
|
|
14
10
|
var _debounce = require("./debounce/debounce.js");
|
|
15
|
-
|
|
16
11
|
var _inputWrapper = require("./input-wrapper.js");
|
|
17
|
-
|
|
18
12
|
var _menuWrapper = require("./menu-wrapper.js");
|
|
19
|
-
|
|
20
|
-
function
|
|
21
|
-
|
|
22
|
-
function
|
|
23
|
-
|
|
24
|
-
function
|
|
25
|
-
|
|
26
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
27
|
-
|
|
13
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
14
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
15
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
16
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
17
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
18
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
28
19
|
// Keycodes for the keypress event handlers
|
|
29
20
|
const ESCAPE_KEY = 27;
|
|
30
21
|
const SPACE_KEY = 32;
|
|
31
22
|
const UP_KEY = 38;
|
|
32
23
|
const DOWN_KEY = 40;
|
|
33
|
-
|
|
34
24
|
class Select extends _react.Component {
|
|
35
25
|
constructor() {
|
|
36
26
|
super(...arguments);
|
|
37
|
-
|
|
38
27
|
_defineProperty(this, "state", {
|
|
39
28
|
open: false,
|
|
40
29
|
menuWidth: 'auto'
|
|
41
30
|
});
|
|
42
|
-
|
|
43
31
|
_defineProperty(this, "selectRef", /*#__PURE__*/_react.default.createRef());
|
|
44
|
-
|
|
45
32
|
_defineProperty(this, "inputRef", /*#__PURE__*/_react.default.createRef());
|
|
46
|
-
|
|
33
|
+
/**
|
|
34
|
+
* We're debouncing this so it doesn't fire continually during a resize.
|
|
35
|
+
*
|
|
36
|
+
* Additionally we should use requestPostAnimationFrame to not trigger a forced
|
|
37
|
+
* layout, but that's just a proposal, and the added complexity of solving this
|
|
38
|
+
* in another manner does not seem worth it, considering the minor perf penalty.
|
|
39
|
+
*
|
|
40
|
+
* See: https://nolanlawson.com/2018/09/25/accurately-measuring-layout-on-the-web
|
|
41
|
+
*/
|
|
47
42
|
_defineProperty(this, "onResize", (0, _debounce.debounce)(() => {
|
|
48
43
|
const menuWidth = this.getMenuWidth();
|
|
49
|
-
|
|
50
44
|
if (this.state.menuWidth !== menuWidth) {
|
|
51
45
|
this.setState({
|
|
52
46
|
menuWidth
|
|
53
47
|
});
|
|
54
48
|
}
|
|
55
49
|
}, 50));
|
|
56
|
-
|
|
57
50
|
_defineProperty(this, "handleFocusInput", () => {
|
|
58
51
|
this.inputRef.current.focus();
|
|
59
52
|
});
|
|
60
|
-
|
|
61
53
|
_defineProperty(this, "onFocus", e => {
|
|
62
54
|
const {
|
|
63
55
|
onFocus,
|
|
64
56
|
disabled,
|
|
65
57
|
selected
|
|
66
58
|
} = this.props;
|
|
67
|
-
|
|
68
59
|
if (disabled || !onFocus) {
|
|
69
60
|
return;
|
|
70
61
|
}
|
|
71
|
-
|
|
72
62
|
onFocus({
|
|
73
63
|
selected
|
|
74
64
|
}, e);
|
|
75
65
|
});
|
|
76
|
-
|
|
77
66
|
_defineProperty(this, "handleOpen", () => {
|
|
78
67
|
this.setState({
|
|
79
68
|
open: true,
|
|
80
69
|
menuWidth: this.getMenuWidth()
|
|
81
70
|
});
|
|
82
71
|
});
|
|
83
|
-
|
|
84
72
|
_defineProperty(this, "handleClose", () => {
|
|
85
73
|
this.setState({
|
|
86
74
|
open: false
|
|
87
75
|
});
|
|
88
76
|
});
|
|
89
|
-
|
|
90
77
|
_defineProperty(this, "onToggle", e => {
|
|
91
78
|
if (this.props.disabled) {
|
|
92
79
|
return;
|
|
93
80
|
}
|
|
94
|
-
|
|
95
81
|
e.stopPropagation();
|
|
96
82
|
this.state.open ? this.handleClose() : this.handleOpen();
|
|
97
83
|
});
|
|
98
|
-
|
|
99
84
|
_defineProperty(this, "onOutsideClick", e => {
|
|
100
85
|
const {
|
|
101
86
|
onBlur,
|
|
102
87
|
disabled,
|
|
103
88
|
selected
|
|
104
89
|
} = this.props;
|
|
105
|
-
|
|
106
90
|
if (disabled) {
|
|
107
91
|
return;
|
|
108
92
|
}
|
|
109
|
-
|
|
110
93
|
this.handleClose();
|
|
111
|
-
|
|
112
94
|
if (onBlur) {
|
|
113
95
|
onBlur({
|
|
114
96
|
selected
|
|
115
97
|
}, e);
|
|
116
98
|
}
|
|
117
99
|
});
|
|
118
|
-
|
|
119
100
|
_defineProperty(this, "onKeyDown", e => {
|
|
120
101
|
const {
|
|
121
102
|
onKeyDown,
|
|
122
103
|
disabled,
|
|
123
104
|
selected
|
|
124
105
|
} = this.props;
|
|
125
|
-
|
|
126
106
|
if (disabled) {
|
|
127
107
|
return;
|
|
128
108
|
}
|
|
129
|
-
|
|
130
109
|
if (onKeyDown) {
|
|
131
110
|
onKeyDown({
|
|
132
111
|
selected
|
|
133
112
|
}, e);
|
|
134
113
|
}
|
|
135
|
-
|
|
136
114
|
if (e.defaultPrevented) {
|
|
137
115
|
return;
|
|
138
116
|
}
|
|
139
|
-
|
|
140
117
|
e.stopPropagation();
|
|
141
118
|
const {
|
|
142
119
|
open
|
|
@@ -146,42 +123,26 @@ class Select extends _react.Component {
|
|
|
146
123
|
} = e;
|
|
147
124
|
const shouldOpen = !open && (keyCode === SPACE_KEY || keyCode === UP_KEY || keyCode === DOWN_KEY);
|
|
148
125
|
const shouldClose = open && keyCode === ESCAPE_KEY;
|
|
149
|
-
|
|
150
126
|
if (shouldClose) {
|
|
151
127
|
return this.handleClose();
|
|
152
128
|
}
|
|
153
|
-
|
|
154
129
|
if (shouldOpen) {
|
|
155
130
|
return this.handleOpen();
|
|
156
131
|
}
|
|
157
132
|
});
|
|
158
133
|
}
|
|
159
|
-
|
|
160
134
|
componentDidMount() {
|
|
161
135
|
if (this.props.initialFocus) {
|
|
162
136
|
this.inputRef.current.focus();
|
|
163
137
|
}
|
|
164
|
-
|
|
165
138
|
this.setState({
|
|
166
139
|
menuWidth: this.getMenuWidth()
|
|
167
140
|
});
|
|
168
141
|
window.addEventListener('resize', this.onResize);
|
|
169
142
|
}
|
|
170
|
-
|
|
171
143
|
componentWillUnmount() {
|
|
172
144
|
window.removeEventListener('resize', this.onResize);
|
|
173
145
|
}
|
|
174
|
-
/**
|
|
175
|
-
* We're debouncing this so it doesn't fire continually during a resize.
|
|
176
|
-
*
|
|
177
|
-
* Additionally we should use requestPostAnimationFrame to not trigger a forced
|
|
178
|
-
* layout, but that's just a proposal, and the added complexity of solving this
|
|
179
|
-
* in another manner does not seem worth it, considering the minor perf penalty.
|
|
180
|
-
*
|
|
181
|
-
* See: https://nolanlawson.com/2018/09/25/accurately-measuring-layout-on-the-web
|
|
182
|
-
*/
|
|
183
|
-
|
|
184
|
-
|
|
185
146
|
getMenuWidth() {
|
|
186
147
|
const {
|
|
187
148
|
offsetWidth
|
|
@@ -189,14 +150,11 @@ class Select extends _react.Component {
|
|
|
189
150
|
const {
|
|
190
151
|
menuWidth
|
|
191
152
|
} = this.state;
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
return "".concat(offsetWidth, "px");
|
|
153
|
+
if (offsetWidth && `${offsetWidth}px` !== menuWidth) {
|
|
154
|
+
return `${offsetWidth}px`;
|
|
195
155
|
}
|
|
196
|
-
|
|
197
156
|
return menuWidth;
|
|
198
157
|
}
|
|
199
|
-
|
|
200
158
|
render() {
|
|
201
159
|
const {
|
|
202
160
|
open,
|
|
@@ -215,18 +173,18 @@ class Select extends _react.Component {
|
|
|
215
173
|
disabled,
|
|
216
174
|
dense,
|
|
217
175
|
dataTest
|
|
218
|
-
} = this.props;
|
|
176
|
+
} = this.props;
|
|
219
177
|
|
|
178
|
+
// Create the input
|
|
220
179
|
const inputProps = {
|
|
221
180
|
selected,
|
|
222
181
|
onChange,
|
|
223
182
|
options: children,
|
|
224
183
|
disabled
|
|
225
184
|
};
|
|
185
|
+
const input = /*#__PURE__*/_react.default.cloneElement(this.props.input, inputProps);
|
|
226
186
|
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
187
|
+
// Create the menu
|
|
230
188
|
const menuProps = {
|
|
231
189
|
selected,
|
|
232
190
|
onChange,
|
|
@@ -234,9 +192,7 @@ class Select extends _react.Component {
|
|
|
234
192
|
handleClose: this.handleClose,
|
|
235
193
|
handleFocusInput: this.handleFocusInput
|
|
236
194
|
};
|
|
237
|
-
|
|
238
195
|
const menu = /*#__PURE__*/_react.default.cloneElement(this.props.menu, menuProps);
|
|
239
|
-
|
|
240
196
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
241
197
|
className: className,
|
|
242
198
|
ref: this.selectRef,
|
|
@@ -252,18 +208,16 @@ class Select extends _react.Component {
|
|
|
252
208
|
valid: valid,
|
|
253
209
|
disabled: disabled,
|
|
254
210
|
dense: dense,
|
|
255
|
-
dataTest:
|
|
211
|
+
dataTest: `${dataTest}-input`
|
|
256
212
|
}, input), open && /*#__PURE__*/_react.default.createElement(_menuWrapper.MenuWrapper, {
|
|
257
213
|
onClick: this.onOutsideClick,
|
|
258
214
|
maxHeight: maxHeight,
|
|
259
215
|
selectRef: this.selectRef,
|
|
260
216
|
menuWidth: menuWidth,
|
|
261
|
-
dataTest:
|
|
217
|
+
dataTest: `${dataTest}-menu`
|
|
262
218
|
}, menu));
|
|
263
219
|
}
|
|
264
|
-
|
|
265
220
|
}
|
|
266
|
-
|
|
267
221
|
exports.Select = Select;
|
|
268
222
|
Select.defaultProps = {
|
|
269
223
|
dataTest: 'dhis2-uicore-select'
|
|
@@ -1,43 +1,38 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _react = require("@testing-library/react");
|
|
4
|
-
|
|
5
4
|
var _react2 = _interopRequireDefault(require("react"));
|
|
6
|
-
|
|
7
5
|
var _index = require("../../single-select-option/index.js");
|
|
8
|
-
|
|
9
6
|
var _selection = require("../selection.js");
|
|
10
|
-
|
|
11
7
|
require("@testing-library/jest-dom");
|
|
12
|
-
|
|
13
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
|
-
|
|
8
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
9
|
describe('<Selection />', () => {
|
|
16
10
|
const env = process.env;
|
|
17
11
|
beforeEach(() => {
|
|
18
12
|
// Ensure process.env is also reset for cached modules
|
|
19
13
|
jest.resetModules();
|
|
20
|
-
process.env = {
|
|
21
|
-
|
|
14
|
+
process.env = {
|
|
15
|
+
...env
|
|
16
|
+
};
|
|
22
17
|
|
|
18
|
+
// Allow spying on console.error and silence rendering errors
|
|
23
19
|
jest.spyOn(console, 'error').mockImplementation(() => {});
|
|
24
20
|
});
|
|
25
21
|
afterEach(() => {
|
|
26
22
|
// Restore process.env to original state
|
|
27
|
-
process.env = env;
|
|
23
|
+
process.env = env;
|
|
28
24
|
|
|
25
|
+
// Restore all mocks back to original values
|
|
29
26
|
jest.restoreAllMocks();
|
|
30
27
|
});
|
|
31
28
|
describe('production', () => {
|
|
32
29
|
it('should not throw an error for a selection that is not in the options', () => {
|
|
33
30
|
process.env.NODE_ENV = 'production';
|
|
34
|
-
|
|
35
31
|
const options = /*#__PURE__*/_react2.default.createElement(_index.SingleSelectOption, {
|
|
36
32
|
key: "1",
|
|
37
33
|
label: "one",
|
|
38
34
|
value: "1"
|
|
39
35
|
});
|
|
40
|
-
|
|
41
36
|
const selected = 'value';
|
|
42
37
|
expect(() => {
|
|
43
38
|
(0, _react.render)( /*#__PURE__*/_react2.default.createElement(_selection.Selection, {
|
|
@@ -50,13 +45,11 @@ describe('<Selection />', () => {
|
|
|
50
45
|
});
|
|
51
46
|
it('should show the selection for a selection that is not in the options', () => {
|
|
52
47
|
process.env.NODE_ENV = 'production';
|
|
53
|
-
|
|
54
48
|
const options = /*#__PURE__*/_react2.default.createElement(_index.SingleSelectOption, {
|
|
55
49
|
key: "1",
|
|
56
50
|
label: "one",
|
|
57
51
|
value: "1"
|
|
58
52
|
});
|
|
59
|
-
|
|
60
53
|
const selected = 'value';
|
|
61
54
|
const {
|
|
62
55
|
getByText
|
|
@@ -70,13 +63,11 @@ describe('<Selection />', () => {
|
|
|
70
63
|
});
|
|
71
64
|
it('log an error for a selection that is not in the options', () => {
|
|
72
65
|
process.env.NODE_ENV = 'production';
|
|
73
|
-
|
|
74
66
|
const options = /*#__PURE__*/_react2.default.createElement(_index.SingleSelectOption, {
|
|
75
67
|
key: "1",
|
|
76
68
|
label: "one",
|
|
77
69
|
value: "1"
|
|
78
70
|
});
|
|
79
|
-
|
|
80
71
|
const selected = 'value';
|
|
81
72
|
(0, _react.render)( /*#__PURE__*/_react2.default.createElement(_selection.Selection, {
|
|
82
73
|
selected: selected,
|
|
@@ -90,13 +81,11 @@ describe('<Selection />', () => {
|
|
|
90
81
|
describe('not production', () => {
|
|
91
82
|
it('should throw an error for a selection that is not in the options', () => {
|
|
92
83
|
process.env.NODE_ENV = 'development';
|
|
93
|
-
|
|
94
84
|
const options = /*#__PURE__*/_react2.default.createElement(_index.SingleSelectOption, {
|
|
95
85
|
key: "1",
|
|
96
86
|
label: "one",
|
|
97
87
|
value: "1"
|
|
98
88
|
});
|
|
99
|
-
|
|
100
89
|
const selected = 'value';
|
|
101
90
|
expect(() => {
|
|
102
91
|
(0, _react.render)( /*#__PURE__*/_react2.default.createElement(_selection.Selection, {
|
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _react = require("@testing-library/react");
|
|
4
|
-
|
|
5
4
|
var _react2 = _interopRequireDefault(require("react"));
|
|
6
|
-
|
|
7
5
|
var _singleSelect = require("../single-select.js");
|
|
8
|
-
|
|
9
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
|
-
|
|
6
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
7
|
describe('<SingleSelect />', () => {
|
|
12
8
|
it('should call the onKeyDown callback when provided', () => {
|
|
13
9
|
const onKeyDown = jest.fn();
|
|
@@ -15,13 +11,11 @@ describe('<SingleSelect />', () => {
|
|
|
15
11
|
placeholder: "placeholder",
|
|
16
12
|
onKeyDown: onKeyDown
|
|
17
13
|
}));
|
|
18
|
-
|
|
19
14
|
_react.fireEvent.keyDown(_react.screen.getByTestId('dhis2-uicore-singleselect-placeholder'), {
|
|
20
15
|
key: 'Enter',
|
|
21
16
|
code: 'Enter',
|
|
22
17
|
charCode: 13
|
|
23
18
|
});
|
|
24
|
-
|
|
25
19
|
expect(onKeyDown).toHaveBeenCalledWith({
|
|
26
20
|
selected: ''
|
|
27
21
|
}, expect.objectContaining({}));
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a SingleSelect with onBlur handler is rendered', () => {
|
|
6
|
-
cy.visitStory('SingleSelect', 'With
|
|
5
|
+
cy.visitStory('SingleSelect', 'With on blur');
|
|
7
6
|
});
|
|
8
7
|
(0, _cypressCucumberPreprocessor.Then)('the onBlur handler is called', () => {
|
|
9
8
|
cy.window().should(win => {
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a SingleSelect with onFocus handler is rendered', () => {
|
|
6
|
-
cy.visitStory('SingleSelect', 'With
|
|
5
|
+
cy.visitStory('SingleSelect', 'With on focus');
|
|
7
6
|
});
|
|
8
7
|
(0, _cypressCucumberPreprocessor.Then)('the onFocus handler is called', () => {
|
|
9
8
|
cy.window().should(win => {
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a SingleSelect with initial focus is rendered', () => {
|
|
6
|
-
cy.visitStory('SingleSelect', 'With
|
|
5
|
+
cy.visitStory('SingleSelect', 'With initial focus');
|
|
7
6
|
});
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a SingleSelect with options and a loading flag is rendered', () => {
|
|
6
5
|
cy.visitStory('SingleSelect', 'With options and loading');
|
|
7
6
|
});
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a SingleSelect with more than ten options is rendered', () => {
|
|
6
5
|
cy.visitStory('SingleSelect', 'With more than ten options');
|
|
7
6
|
});
|
|
8
7
|
(0, _cypressCucumberPreprocessor.Given)('a SingleSelect with more than three options and a 100px max-height is rendered', () => {
|
|
9
|
-
cy.visitStory('SingleSelect', 'With more than three options and a
|
|
8
|
+
cy.visitStory('SingleSelect', 'With more than three options and a 100 px max-height');
|
|
10
9
|
});
|
|
11
10
|
(0, _cypressCucumberPreprocessor.Then)('has the default max-height', () => {
|
|
12
11
|
cy.get('[data-test="dhis2-uicore-select-menu-menuwrapper"]').should('have.css', 'max-height', '280px');
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a SingleSelect with a placeholder and no selection is rendered', () => {
|
|
6
5
|
cy.visitStory('SingleSelect', 'With placeholder');
|
|
7
6
|
});
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a SingleSelect with a prefix and no selection is rendered', () => {
|
|
6
5
|
cy.visitStory('SingleSelect', 'With prefix');
|
|
7
6
|
});
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a SingleSelect with invalid options is rendered', () => {
|
|
6
5
|
cy.visitStory('SingleSelect', 'With invalid options');
|
|
7
6
|
});
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a SingleSelect with a disabled option and onChange handler is rendered', () => {
|
|
6
|
-
cy.visitStory('SingleSelect', 'With disabled option and
|
|
5
|
+
cy.visitStory('SingleSelect', 'With disabled option and on change');
|
|
7
6
|
});
|
|
8
7
|
(0, _cypressCucumberPreprocessor.Given)('a SingleSelect with custom options and onChange handler is rendered', () => {
|
|
9
|
-
cy.visitStory('SingleSelect', 'With custom options and
|
|
8
|
+
cy.visitStory('SingleSelect', 'With custom options and on change');
|
|
10
9
|
});
|
|
11
10
|
(0, _cypressCucumberPreprocessor.When)('an option is clicked', () => {
|
|
12
11
|
cy.contains('option one').click();
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a clearable SingleSelect with a selection and onchange handler is rendered', () => {
|
|
6
|
-
cy.visitStory('SingleSelect', 'With clear button, selection and
|
|
5
|
+
cy.visitStory('SingleSelect', 'With clear button, selection and on change');
|
|
7
6
|
});
|
|
8
7
|
(0, _cypressCucumberPreprocessor.When)('the clear button is clicked', () => {
|
|
9
8
|
cy.get('[data-test="dhis2-uicore-singleselect-clear"]').click();
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a disabled SingleSelect with options is rendered', () => {
|
|
6
5
|
cy.visitStory('SingleSelect', 'With options and disabled');
|
|
7
6
|
});
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a filterable SingleSelect with options is rendered', () => {
|
|
6
5
|
cy.visitStory('SingleSelect', 'With filter field');
|
|
7
6
|
});
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a SingleSelect with options and onChange handler is rendered', () => {
|
|
6
|
-
cy.visitStory('SingleSelect', 'With options and
|
|
5
|
+
cy.visitStory('SingleSelect', 'With options and on change');
|
|
7
6
|
});
|
|
8
7
|
(0, _cypressCucumberPreprocessor.Given)('a SingleSelect with options, a selection and onChange handler is rendered', () => {
|
|
9
|
-
cy.visitStory('SingleSelect', 'With options, a selection and
|
|
8
|
+
cy.visitStory('SingleSelect', 'With options, a selection and on change');
|
|
10
9
|
});
|
|
11
10
|
(0, _cypressCucumberPreprocessor.Given)('the SingleSelect is open', () => {
|
|
12
11
|
cy.get('[data-test="dhis2-uicore-select-input"]').click();
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a SingleSelect with options with a duplicate value and this value is selected', () => {
|
|
6
5
|
cy.visitStory('SingleSelect', 'With duplicate selected option values');
|
|
7
6
|
});
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a SingleSelect with hidden sibling elements', () => {
|
|
6
5
|
cy.visitStory('SingleSelect', 'Menu width changing');
|
|
7
6
|
cy.get('[data-test="dhis2-uicore-singleselect"]').then($el => {
|
|
@@ -9,7 +8,7 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
|
|
|
9
8
|
});
|
|
10
9
|
});
|
|
11
10
|
(0, _cypressCucumberPreprocessor.When)('the button is clicked', () => {
|
|
12
|
-
cy.get('button').click();
|
|
11
|
+
cy.get('button:contains("Toggle")').click();
|
|
13
12
|
});
|
|
14
13
|
(0, _cypressCucumberPreprocessor.Then)('the siblings are displayed', () => {
|
|
15
14
|
cy.get('.toggler').should('exist').and('have.length', 2);
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('there is enough space below the anchor to fit the SingleSelect menu', () => {
|
|
6
5
|
cy.visitStory('SingleSelect', 'Default position');
|
|
7
6
|
});
|
|
@@ -32,7 +31,7 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
|
|
|
32
31
|
const $menu = menus[0];
|
|
33
32
|
const selectRect = $select.getBoundingClientRect();
|
|
34
33
|
const menuRect = $menu.getBoundingClientRect();
|
|
35
|
-
expect(menuRect.top).to.
|
|
34
|
+
expect(menuRect.top).to.be.closeTo(selectRect.bottom, 1);
|
|
36
35
|
});
|
|
37
36
|
});
|
|
38
37
|
(0, _cypressCucumberPreprocessor.Then)('the bottom of the menu is aligned with the top of the input', () => {
|
|
@@ -46,7 +45,7 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
|
|
|
46
45
|
const $menu = menus[0];
|
|
47
46
|
const selectRect = $select.getBoundingClientRect();
|
|
48
47
|
const menuRect = $menu.getBoundingClientRect();
|
|
49
|
-
expect(selectRect.top).to.
|
|
48
|
+
expect(selectRect.top).to.be.closeTo(menuRect.bottom, 1);
|
|
50
49
|
});
|
|
51
50
|
});
|
|
52
51
|
(0, _cypressCucumberPreprocessor.Then)('it is rendered on top of the SingleSelect', () => {
|
|
@@ -75,6 +74,6 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
|
|
|
75
74
|
const $menu = menus[0];
|
|
76
75
|
const selectRect = $select.getBoundingClientRect();
|
|
77
76
|
const menuRect = $menu.getBoundingClientRect();
|
|
78
|
-
expect(selectRect.left).to.
|
|
77
|
+
expect(selectRect.left).to.be.closeTo(menuRect.left, 1);
|
|
79
78
|
});
|
|
80
79
|
});
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a SingleSelect with options and a selection is rendered', () => {
|
|
6
5
|
cy.visitStory('SingleSelect', 'With options and a selection');
|
|
7
6
|
});
|
|
@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.FilterableMenu = void 0;
|
|
7
|
-
|
|
8
7
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
|
|
10
8
|
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
9
|
var _index = require("../select/index.js");
|
|
13
|
-
|
|
14
10
|
var _menu = require("./menu.js");
|
|
15
|
-
|
|
16
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
-
|
|
11
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
18
12
|
const FilterableMenu = _ref => {
|
|
19
13
|
let {
|
|
20
14
|
dataTest,
|
|
@@ -40,7 +34,6 @@ const FilterableMenu = _ref => {
|
|
|
40
34
|
Menu: _menu.Menu
|
|
41
35
|
});
|
|
42
36
|
};
|
|
43
|
-
|
|
44
37
|
exports.FilterableMenu = FilterableMenu;
|
|
45
38
|
FilterableMenu.propTypes = {
|
|
46
39
|
dataTest: _propTypes.default.string.isRequired,
|