@dhis2-ui/select 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.
- package/build/cjs/locales/index.js +94 -57
- package/build/cjs/multi-select/features/menu_width_matches_input/index.js +2 -4
- package/build/cjs/multi-select/features/position/index.js +6 -12
- package/build/cjs/multi-select/filterable-menu.js +22 -25
- package/build/cjs/multi-select/input.js +14 -15
- package/build/cjs/multi-select/menu.js +24 -28
- package/build/cjs/multi-select/multi-select.e2e.stories.js +21 -32
- package/build/cjs/multi-select/multi-select.js +30 -31
- package/build/cjs/multi-select/multi-select.prod.stories.js +13 -21
- package/build/cjs/multi-select/selection-list.js +51 -57
- package/build/cjs/multi-select-option/multi-select-option.js +27 -30
- package/build/cjs/select/debounce/debounce.js +2 -6
- package/build/cjs/select/empty.js +11 -14
- package/build/cjs/select/filter-input.js +21 -24
- package/build/cjs/select/filterable-menu.js +6 -8
- package/build/cjs/select/input-clear-button.js +28 -31
- package/build/cjs/select/input-placeholder.js +5 -6
- package/build/cjs/select/input-prefix.js +5 -6
- package/build/cjs/select/input-wrapper.js +13 -14
- package/build/cjs/select/loading.js +15 -18
- package/build/cjs/select/menu-wrapper.js +8 -9
- package/build/cjs/select/no-match.js +9 -12
- package/build/cjs/select/select.js +3 -4
- package/build/cjs/simple-single-select/__stories__/DefaultPosition.js +1 -2
- package/build/cjs/simple-single-select/__stories__/Dense.js +1 -2
- package/build/cjs/simple-single-select/__stories__/Empty.js +1 -2
- package/build/cjs/simple-single-select/__stories__/EmptyWithEmptyNode.js +1 -2
- package/build/cjs/simple-single-select/__stories__/EmptyWithEmptyText.js +1 -2
- package/build/cjs/simple-single-select/__stories__/FlippedPosition.js +1 -2
- package/build/cjs/simple-single-select/__stories__/InfiniteLoading.js +1 -2
- package/build/cjs/simple-single-select/__stories__/ShiftedIntoView.js +1 -2
- package/build/cjs/simple-single-select/__stories__/WithClearButton.js +1 -2
- package/build/cjs/simple-single-select/__stories__/WithCustomLowMaxHeight.js +1 -2
- package/build/cjs/simple-single-select/__stories__/WithCustomOptions.js +17 -21
- package/build/cjs/simple-single-select/__stories__/WithDisabledOption.js +1 -2
- package/build/cjs/simple-single-select/__stories__/WithFilterField.js +5 -9
- package/build/cjs/simple-single-select/__stories__/WithInitialFocus.js +1 -2
- package/build/cjs/simple-single-select/__stories__/WithManyOptions.js +1 -2
- package/build/cjs/simple-single-select/__stories__/WithMultipleSelectsAndScrollableParent.js +1 -2
- package/build/cjs/simple-single-select/__stories__/WithNoMatchText.js +1 -2
- package/build/cjs/simple-single-select/__stories__/WithOnBlur.js +1 -2
- package/build/cjs/simple-single-select/__stories__/WithOnFocus.js +1 -2
- package/build/cjs/simple-single-select/__stories__/WithOptionsAndDisabled.js +1 -2
- package/build/cjs/simple-single-select/__stories__/WithOptionsAndLoading.js +1 -2
- package/build/cjs/simple-single-select/__stories__/WithOptionsAndLoadingText.js +1 -2
- package/build/cjs/simple-single-select/__stories__/WithPlaceholder.js +1 -2
- package/build/cjs/simple-single-select/__stories__/WithPlaceholderAndSelection.js +1 -2
- package/build/cjs/simple-single-select/__stories__/WithPrefix.js +1 -2
- package/build/cjs/simple-single-select/__stories__/WithPrefixAndSelection.js +1 -2
- package/build/cjs/simple-single-select/__stories__/WithRTL.js +1 -2
- package/build/cjs/simple-single-select/__stories__/WithScrollingParent.js +1 -2
- package/build/cjs/simple-single-select/__stories__/WithSelection.js +1 -2
- package/build/cjs/simple-single-select/__stories__/WithSelectionAndDisabled.js +1 -2
- package/build/cjs/simple-single-select/__stories__/WithServerSideFilteringDemo.js +25 -36
- package/build/cjs/simple-single-select/__stories__/WithSimpleFilteringDemo.js +4 -6
- package/build/cjs/simple-single-select/__stories__/WithoutOptionsAndLoading.js +1 -2
- package/build/cjs/simple-single-select/__stories__/WithoutSelection.js +1 -2
- package/build/cjs/simple-single-select/__stories__/simple-single-select-server-side-filtering/CustomDataProvider.js +19 -26
- package/build/cjs/simple-single-select/features/keyboard-interactions.test.e2e.js +9 -18
- package/build/cjs/simple-single-select/features/menu-positioning.test.e2e.js +8 -16
- package/build/cjs/simple-single-select/menu/empty.js +8 -11
- package/build/cjs/simple-single-select/menu/filter.js +11 -12
- package/build/cjs/simple-single-select/menu/loading.js +3 -4
- package/build/cjs/simple-single-select/menu/menu.js +26 -28
- package/build/cjs/simple-single-select/menu/no-match.js +9 -12
- package/build/cjs/simple-single-select/menu/option.js +20 -23
- package/build/cjs/simple-single-select/menu/options-list.js +23 -26
- package/build/cjs/simple-single-select/selected-value/clear-button.js +5 -6
- package/build/cjs/simple-single-select/selected-value/container.js +23 -25
- package/build/cjs/simple-single-select/selected-value/placeholder.js +5 -6
- package/build/cjs/simple-single-select/selected-value/prefix.js +5 -6
- package/build/cjs/simple-single-select/selected-value/selected-value.js +34 -35
- package/build/cjs/simple-single-select/simple-single-select.e2e.stories.js +1 -2
- package/build/cjs/simple-single-select/simple-single-select.js +47 -50
- package/build/cjs/simple-single-select/simple-single-select.test.js +14 -24
- package/build/cjs/simple-single-select/use-handle-key-press/use-focus-option.js +5 -6
- package/build/cjs/simple-single-select/use-handle-key-press/use-handle-key-press-on-combobox.js +31 -34
- package/build/cjs/simple-single-select/use-handle-key-press/use-handle-key-press-on-filter-input.js +11 -12
- package/build/cjs/simple-single-select/use-handle-key-press/use-handle-typing.js +10 -14
- package/build/cjs/simple-single-select/use-handle-key-press/use-highlight-first-option-on-previous-page.js +6 -7
- package/build/cjs/simple-single-select/use-handle-key-press/use-highlight-first-visible-option.js +5 -6
- package/build/cjs/simple-single-select/use-handle-key-press/use-highlight-last-option-on-next-page.js +6 -7
- package/build/cjs/simple-single-select/use-handle-key-press/use-highlight-last-visible-option.js +5 -6
- package/build/cjs/simple-single-select/use-handle-key-press/use-page-down.js +6 -7
- package/build/cjs/simple-single-select/use-handle-key-press/use-page-up.js +6 -7
- package/build/cjs/simple-single-select/use-handle-key-press/utils.js +17 -22
- package/build/cjs/simple-single-select-field/simple-single-select-field.js +3 -6
- package/build/cjs/simple-single-select-field/simple-single-select-field.prod.stories.js +1 -2
- package/build/cjs/simple-single-select-field/simple-single-select-field.test.js +3 -6
- package/build/cjs/single-select/features/menu_width_matches_input/index.js +2 -4
- package/build/cjs/single-select/features/position/index.js +4 -8
- package/build/cjs/single-select/filterable-menu.js +22 -25
- package/build/cjs/single-select/input.js +13 -14
- package/build/cjs/single-select/menu.js +9 -10
- package/build/cjs/single-select/selection.js +5 -6
- package/build/cjs/single-select/single-select.e2e.stories.js +18 -28
- package/build/cjs/single-select/single-select.js +29 -30
- package/build/cjs/single-select/single-select.prod.stories.js +7 -11
- package/build/cjs/single-select-option/single-select-option.js +25 -28
- package/build/es/locales/index.js +70 -33
- package/build/es/multi-select/features/menu_width_matches_input/index.js +2 -4
- package/build/es/multi-select/features/position/index.js +6 -12
- package/build/es/multi-select/filterable-menu.js +22 -25
- package/build/es/multi-select/input.js +14 -15
- package/build/es/multi-select/menu.js +24 -28
- package/build/es/multi-select/multi-select.e2e.stories.js +20 -30
- package/build/es/multi-select/multi-select.js +30 -31
- package/build/es/multi-select/multi-select.prod.stories.js +12 -19
- package/build/es/multi-select/selection-list.js +51 -57
- package/build/es/multi-select-option/multi-select-option.js +27 -30
- package/build/es/select/debounce/debounce.js +2 -6
- package/build/es/select/empty.js +11 -14
- package/build/es/select/filter-input.js +21 -24
- package/build/es/select/filterable-menu.js +5 -6
- package/build/es/select/input-clear-button.js +28 -31
- package/build/es/select/input-placeholder.js +5 -6
- package/build/es/select/input-prefix.js +5 -6
- package/build/es/select/input-wrapper.js +13 -14
- package/build/es/select/loading.js +15 -18
- package/build/es/select/menu-wrapper.js +8 -9
- package/build/es/select/no-match.js +9 -12
- package/build/es/select/select.js +2 -2
- package/build/es/simple-single-select/__stories__/WithCustomOptions.js +16 -19
- package/build/es/simple-single-select/__stories__/WithFilterField.js +4 -7
- package/build/es/simple-single-select/__stories__/WithServerSideFilteringDemo.js +24 -34
- package/build/es/simple-single-select/__stories__/WithSimpleFilteringDemo.js +3 -4
- package/build/es/simple-single-select/__stories__/simple-single-select-server-side-filtering/CustomDataProvider.js +19 -26
- package/build/es/simple-single-select/features/keyboard-interactions.test.e2e.js +9 -18
- package/build/es/simple-single-select/features/menu-positioning.test.e2e.js +8 -16
- package/build/es/simple-single-select/menu/empty.js +8 -11
- package/build/es/simple-single-select/menu/filter.js +11 -12
- package/build/es/simple-single-select/menu/loading.js +3 -4
- package/build/es/simple-single-select/menu/menu.js +25 -26
- package/build/es/simple-single-select/menu/no-match.js +9 -12
- package/build/es/simple-single-select/menu/option.js +19 -21
- package/build/es/simple-single-select/menu/options-list.js +22 -24
- package/build/es/simple-single-select/selected-value/clear-button.js +5 -6
- package/build/es/simple-single-select/selected-value/container.js +22 -23
- package/build/es/simple-single-select/selected-value/placeholder.js +5 -6
- package/build/es/simple-single-select/selected-value/prefix.js +5 -6
- package/build/es/simple-single-select/selected-value/selected-value.js +34 -35
- package/build/es/simple-single-select/simple-single-select.js +46 -48
- package/build/es/simple-single-select/simple-single-select.test.js +13 -22
- package/build/es/simple-single-select/use-handle-key-press/use-focus-option.js +5 -6
- package/build/es/simple-single-select/use-handle-key-press/use-handle-key-press-on-combobox.js +31 -34
- package/build/es/simple-single-select/use-handle-key-press/use-handle-key-press-on-filter-input.js +11 -12
- package/build/es/simple-single-select/use-handle-key-press/use-handle-typing.js +10 -14
- package/build/es/simple-single-select/use-handle-key-press/use-highlight-first-option-on-previous-page.js +6 -7
- package/build/es/simple-single-select/use-handle-key-press/use-highlight-first-visible-option.js +5 -6
- package/build/es/simple-single-select/use-handle-key-press/use-highlight-last-option-on-next-page.js +6 -7
- package/build/es/simple-single-select/use-handle-key-press/use-highlight-last-visible-option.js +5 -6
- package/build/es/simple-single-select/use-handle-key-press/use-page-down.js +6 -7
- package/build/es/simple-single-select/use-handle-key-press/use-page-up.js +6 -7
- package/build/es/simple-single-select/use-handle-key-press/utils.js +17 -22
- package/build/es/simple-single-select-field/simple-single-select-field.js +3 -6
- package/build/es/simple-single-select-field/simple-single-select-field.test.js +3 -6
- package/build/es/single-select/features/menu_width_matches_input/index.js +2 -4
- package/build/es/single-select/features/position/index.js +4 -8
- package/build/es/single-select/filterable-menu.js +22 -25
- package/build/es/single-select/input.js +13 -14
- package/build/es/single-select/menu.js +9 -10
- package/build/es/single-select/selection.js +5 -6
- package/build/es/single-select/single-select.e2e.stories.js +17 -26
- package/build/es/single-select/single-select.js +29 -30
- package/build/es/single-select/single-select.prod.stories.js +6 -9
- package/build/es/single-select-option/single-select-option.js +25 -28
- package/package.json +15 -15
- package/src/locales/index.js +102 -33
|
@@ -9,30 +9,28 @@ var _uiConstants = require("@dhis2/ui-constants");
|
|
|
9
9
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
12
|
-
function
|
|
13
|
-
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; }
|
|
12
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
14
13
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
|
-
const Container = exports.Container = /*#__PURE__*/(0, _react.forwardRef)(function Container(
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
} = _ref;
|
|
14
|
+
const Container = exports.Container = /*#__PURE__*/(0, _react.forwardRef)(function Container({
|
|
15
|
+
children,
|
|
16
|
+
comboBoxId,
|
|
17
|
+
autoFocus,
|
|
18
|
+
dataTest,
|
|
19
|
+
dense,
|
|
20
|
+
disabled,
|
|
21
|
+
error,
|
|
22
|
+
expanded,
|
|
23
|
+
labelledBy,
|
|
24
|
+
name,
|
|
25
|
+
placeholder,
|
|
26
|
+
tabIndex,
|
|
27
|
+
valid,
|
|
28
|
+
warning,
|
|
29
|
+
onBlur,
|
|
30
|
+
onClick: _onClick,
|
|
31
|
+
onFocus,
|
|
32
|
+
onKeyDown
|
|
33
|
+
}, ref) {
|
|
36
34
|
// Using useEffect so we have access to the ref, which will be set before
|
|
37
35
|
// the first call to the useEffect's callback
|
|
38
36
|
(0, _react.useEffect)(() => {
|
|
@@ -43,9 +41,9 @@ const Container = exports.Container = /*#__PURE__*/(0, _react.forwardRef)(functi
|
|
|
43
41
|
// We want to run this only once:
|
|
44
42
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
45
43
|
[]);
|
|
46
|
-
const onClick = (0, _react.useCallback)(
|
|
44
|
+
const onClick = (0, _react.useCallback)((...args) => {
|
|
47
45
|
if (!disabled) {
|
|
48
|
-
_onClick(...
|
|
46
|
+
_onClick(...args);
|
|
49
47
|
}
|
|
50
48
|
}, [disabled, _onClick]);
|
|
51
49
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -9,12 +9,11 @@ var _uiConstants = require("@dhis2/ui-constants");
|
|
|
9
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
10
|
var _react = _interopRequireDefault(require("react"));
|
|
11
11
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
|
-
function Placeholder(
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
} = _ref;
|
|
12
|
+
function Placeholder({
|
|
13
|
+
placeholder,
|
|
14
|
+
className,
|
|
15
|
+
dataTest
|
|
16
|
+
}) {
|
|
18
17
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
19
18
|
"data-test": dataTest,
|
|
20
19
|
className: _style.default.dynamic([["1027033961", [_uiConstants.colors.grey600]]]) + " " + (className || "")
|
|
@@ -9,12 +9,11 @@ var _uiConstants = require("@dhis2/ui-constants");
|
|
|
9
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
10
|
var _react = _interopRequireDefault(require("react"));
|
|
11
11
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
|
-
function Prefix(
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
} = _ref;
|
|
12
|
+
function Prefix({
|
|
13
|
+
prefix,
|
|
14
|
+
className,
|
|
15
|
+
dataTest
|
|
16
|
+
}) {
|
|
18
17
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
19
18
|
"data-test": dataTest,
|
|
20
19
|
className: _style.default.dynamic([["1343055987", [_uiConstants.colors.grey600, _uiConstants.spacers.dp12]]]) + " " + (className || "")
|
|
@@ -14,41 +14,40 @@ var _container = require("./container.js");
|
|
|
14
14
|
var _placeholder = require("./placeholder.js");
|
|
15
15
|
var _prefix = require("./prefix.js");
|
|
16
16
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
17
|
-
function SelectedValue(
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
} = _ref;
|
|
17
|
+
function SelectedValue({
|
|
18
|
+
clearText,
|
|
19
|
+
comboBoxId,
|
|
20
|
+
name,
|
|
21
|
+
selectedLabel,
|
|
22
|
+
onKeyDown,
|
|
23
|
+
autoFocus,
|
|
24
|
+
clearable,
|
|
25
|
+
comboBoxRef,
|
|
26
|
+
dataTest,
|
|
27
|
+
dense,
|
|
28
|
+
disabled,
|
|
29
|
+
error,
|
|
30
|
+
expanded,
|
|
31
|
+
filterLabel,
|
|
32
|
+
filterPlaceholder,
|
|
33
|
+
filterRef,
|
|
34
|
+
filterable,
|
|
35
|
+
filterValue,
|
|
36
|
+
hasSelection,
|
|
37
|
+
inputMaxHeight,
|
|
38
|
+
labelledBy,
|
|
39
|
+
placeholder,
|
|
40
|
+
prefix,
|
|
41
|
+
tabIndex,
|
|
42
|
+
valid,
|
|
43
|
+
warning,
|
|
44
|
+
onBlur,
|
|
45
|
+
onClear,
|
|
46
|
+
onClick,
|
|
47
|
+
onFilterChange,
|
|
48
|
+
onFilterInputKeyDown,
|
|
49
|
+
onFocus
|
|
50
|
+
}) {
|
|
52
51
|
const dataTestPrefix = `${dataTest}-selectedvalue`;
|
|
53
52
|
const showFilter = filterable && expanded;
|
|
54
53
|
return /*#__PURE__*/_react.default.createElement(_container.Container, {
|
|
@@ -7,8 +7,7 @@ exports.default = exports.ShiftedIntoView = exports.HundretOptionsWithDisabled =
|
|
|
7
7
|
var _style = _interopRequireDefault(require("styled-jsx/style"));
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _simpleSingleSelect = require("./simple-single-select.js");
|
|
10
|
-
function
|
|
11
|
-
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; }
|
|
10
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
12
11
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
12
|
var _default = exports.default = {
|
|
14
13
|
title: 'Simple Single Select',
|
|
@@ -14,15 +14,13 @@ var _index2 = require("./menu/index.js");
|
|
|
14
14
|
var _index3 = require("./selected-value/index.js");
|
|
15
15
|
var _sharedPropTypes = require("./shared-prop-types.js");
|
|
16
16
|
var _index4 = require("./use-handle-key-press/index.js");
|
|
17
|
-
function
|
|
18
|
-
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; }
|
|
17
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
19
18
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
20
|
-
function useFocussedOptionIndex(
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
} = _ref;
|
|
19
|
+
function useFocussedOptionIndex({
|
|
20
|
+
filterable,
|
|
21
|
+
filterValue,
|
|
22
|
+
options
|
|
23
|
+
}) {
|
|
26
24
|
const [defaultFocussedOptionIndex, setDefaultFocussedOptionIndex] = (0, _react.useState)(0);
|
|
27
25
|
const [searchFocussedOptionIndex, setSearchFocussedOptionIndex] = (0, _react.useState)(0);
|
|
28
26
|
|
|
@@ -52,47 +50,46 @@ function useFocussedOptionIndex(_ref) {
|
|
|
52
50
|
}, [filterValue]);
|
|
53
51
|
return [focussedOptionIndex, setFocussedOptionIndex];
|
|
54
52
|
}
|
|
55
|
-
function SimpleSingleSelect(
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
} = _ref2;
|
|
53
|
+
function SimpleSingleSelect({
|
|
54
|
+
name,
|
|
55
|
+
options,
|
|
56
|
+
onChange,
|
|
57
|
+
autoFocus = false,
|
|
58
|
+
className = '',
|
|
59
|
+
clearText: _clearText = '',
|
|
60
|
+
clearable = false,
|
|
61
|
+
optionComponent = undefined,
|
|
62
|
+
dataTest = 'dhis2-simplesingleselect',
|
|
63
|
+
dense = false,
|
|
64
|
+
disabled = false,
|
|
65
|
+
empty: _empty = false,
|
|
66
|
+
error = false,
|
|
67
|
+
filterLabel = '',
|
|
68
|
+
filterPlaceholder: _filterPlaceholder = '',
|
|
69
|
+
filterValue = '',
|
|
70
|
+
filterable = false,
|
|
71
|
+
inputMaxHeight = '',
|
|
72
|
+
labelledBy = '',
|
|
73
|
+
loading = false,
|
|
74
|
+
menuLoadingText: _menuLoadingText = '',
|
|
75
|
+
menuMaxHeight = '288px',
|
|
76
|
+
noMatchText: _noMatchText = '',
|
|
77
|
+
optionUpdateStrategy = 'polite',
|
|
78
|
+
placeholder = '',
|
|
79
|
+
prefix = '',
|
|
80
|
+
selected = {
|
|
81
|
+
label: '',
|
|
82
|
+
value: ''
|
|
83
|
+
},
|
|
84
|
+
tabIndex = '0',
|
|
85
|
+
valid = false,
|
|
86
|
+
warning = false,
|
|
87
|
+
onBlur = () => undefined,
|
|
88
|
+
onClear = () => undefined,
|
|
89
|
+
onEndReached = () => undefined,
|
|
90
|
+
onFilterChange = () => undefined,
|
|
91
|
+
onFocus = () => undefined
|
|
92
|
+
}) {
|
|
96
93
|
// We can't translate with default props as the translation function would
|
|
97
94
|
// be called before we get any translations from the consuming app/lib
|
|
98
95
|
const clearText = _clearText || _index.default.t('Clear');
|
|
@@ -115,7 +112,7 @@ function SimpleSingleSelect(_ref2) {
|
|
|
115
112
|
if (expanded && filterable) {
|
|
116
113
|
requestAnimationFrame(() => {
|
|
117
114
|
var _filterInputRef$curre;
|
|
118
|
-
(_filterInputRef$curre = filterInputRef.current) === null || _filterInputRef$curre === void 0
|
|
115
|
+
(_filterInputRef$curre = filterInputRef.current) === null || _filterInputRef$curre === void 0 || _filterInputRef$curre.focus();
|
|
119
116
|
});
|
|
120
117
|
}
|
|
121
118
|
}, [expanded, filterable]);
|
|
@@ -4,15 +4,11 @@ require("@testing-library/jest-dom");
|
|
|
4
4
|
var _react = require("@testing-library/react");
|
|
5
5
|
var _react2 = _interopRequireWildcard(require("react"));
|
|
6
6
|
var _simpleSingleSelect = require("./simple-single-select.js");
|
|
7
|
-
function
|
|
8
|
-
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; }
|
|
7
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
9
8
|
describe('<SimpleSingleSelect />', () => {
|
|
10
9
|
beforeAll(() => {
|
|
11
10
|
const consoleError = console.error;
|
|
12
|
-
jest.spyOn(console, 'error').mockImplementation(
|
|
13
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
14
|
-
args[_key] = arguments[_key];
|
|
15
|
-
}
|
|
11
|
+
jest.spyOn(console, 'error').mockImplementation((...args) => {
|
|
16
12
|
const [message, dynamicContent] = args;
|
|
17
13
|
if (message.startsWith('Warning: An update to %s inside a test was not wrapped in act(...)') && dynamicContent === 'Popper') {
|
|
18
14
|
return;
|
|
@@ -213,15 +209,12 @@ describe('<SimpleSingleSelect />', () => {
|
|
|
213
209
|
const onChange = jest.fn();
|
|
214
210
|
|
|
215
211
|
// eslint-disable-next-line react/prop-types
|
|
216
|
-
const CustomOption =
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
"data-test": `custom-option-${value}`
|
|
223
|
-
}, label);
|
|
224
|
-
};
|
|
212
|
+
const CustomOption = ({
|
|
213
|
+
value,
|
|
214
|
+
label
|
|
215
|
+
}) => /*#__PURE__*/_react2.default.createElement("span", {
|
|
216
|
+
"data-test": `custom-option-${value}`
|
|
217
|
+
}, label);
|
|
225
218
|
(0, _react.render)(/*#__PURE__*/_react2.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
|
|
226
219
|
name: "simple",
|
|
227
220
|
selected: null,
|
|
@@ -251,15 +244,12 @@ describe('<SimpleSingleSelect />', () => {
|
|
|
251
244
|
const onChange = jest.fn();
|
|
252
245
|
|
|
253
246
|
// eslint-disable-next-line react/prop-types
|
|
254
|
-
const CustomOption =
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
}
|
|
259
|
-
|
|
260
|
-
"data-test": `custom-option-${value}`
|
|
261
|
-
}, label);
|
|
262
|
-
};
|
|
247
|
+
const CustomOption = ({
|
|
248
|
+
value,
|
|
249
|
+
label
|
|
250
|
+
}) => /*#__PURE__*/_react2.default.createElement("span", {
|
|
251
|
+
"data-test": `custom-option-${value}`
|
|
252
|
+
}, label);
|
|
263
253
|
(0, _react.render)(/*#__PURE__*/_react2.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
|
|
264
254
|
name: "simple",
|
|
265
255
|
selected: null,
|
|
@@ -5,12 +5,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.useFocusOption = useFocusOption;
|
|
7
7
|
var _react = require("react");
|
|
8
|
-
function useFocusOption(findIndexCallback,
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
} = _ref;
|
|
8
|
+
function useFocusOption(findIndexCallback, {
|
|
9
|
+
options,
|
|
10
|
+
focussedOptionIndex,
|
|
11
|
+
setFocussedOptionIndex
|
|
12
|
+
}) {
|
|
14
13
|
return (0, _react.useCallback)(() => {
|
|
15
14
|
const nextFocussedIndex = findIndexCallback({
|
|
16
15
|
options,
|
package/build/cjs/simple-single-select/use-handle-key-press/use-handle-key-press-on-combobox.js
CHANGED
|
@@ -10,21 +10,19 @@ var _useHandleTyping = require("./use-handle-typing.js");
|
|
|
10
10
|
var _usePageDown = require("./use-page-down.js");
|
|
11
11
|
var _usePageUp = require("./use-page-up.js");
|
|
12
12
|
var _utils = require("./utils.js");
|
|
13
|
-
function isUnmodifiedCharacterKey(
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
} = _ref;
|
|
13
|
+
function isUnmodifiedCharacterKey({
|
|
14
|
+
key,
|
|
15
|
+
altKey,
|
|
16
|
+
ctrlKey,
|
|
17
|
+
metaKey
|
|
18
|
+
}) {
|
|
20
19
|
return key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey;
|
|
21
20
|
}
|
|
22
|
-
function useSelectOption(findIndexCallback,
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
} = _ref2;
|
|
21
|
+
function useSelectOption(findIndexCallback, {
|
|
22
|
+
options,
|
|
23
|
+
onChange,
|
|
24
|
+
value
|
|
25
|
+
}) {
|
|
28
26
|
return (0, _react.useCallback)(() => {
|
|
29
27
|
const currentOptionIndex = options.findIndex(option => option.value === value);
|
|
30
28
|
const nextSelectedOptionIndex = findIndexCallback({
|
|
@@ -41,25 +39,24 @@ function useSelectOption(findIndexCallback, _ref2) {
|
|
|
41
39
|
});
|
|
42
40
|
}, [findIndexCallback, options, onChange, value]);
|
|
43
41
|
}
|
|
44
|
-
function useHandleKeyPressOnCombobox(
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
} = _ref3;
|
|
42
|
+
function useHandleKeyPressOnCombobox({
|
|
43
|
+
value,
|
|
44
|
+
disabled,
|
|
45
|
+
expanded,
|
|
46
|
+
loading,
|
|
47
|
+
options,
|
|
48
|
+
openMenu,
|
|
49
|
+
closeMenu,
|
|
50
|
+
listBoxRef,
|
|
51
|
+
focussedOptionIndex,
|
|
52
|
+
setFocussedOptionIndex,
|
|
53
|
+
selectFocussedOption,
|
|
54
|
+
onChange,
|
|
55
|
+
clearable,
|
|
56
|
+
onClear,
|
|
57
|
+
filterable,
|
|
58
|
+
onFilterChange
|
|
59
|
+
}) {
|
|
63
60
|
const {
|
|
64
61
|
onTyping,
|
|
65
62
|
typing
|
|
@@ -148,7 +145,7 @@ function useHandleKeyPressOnCombobox(_ref3) {
|
|
|
148
145
|
return;
|
|
149
146
|
}
|
|
150
147
|
if (!expanded && clearable && key === 'Escape') {
|
|
151
|
-
onClear === null || onClear === void 0
|
|
148
|
+
onClear === null || onClear === void 0 || onClear();
|
|
152
149
|
return;
|
|
153
150
|
}
|
|
154
151
|
if (!expanded && (key === ' ' && !typing || key === 'Enter' || key === 'ArrowUp' && altKey || key === 'ArrowDown' && altKey)) {
|
|
@@ -181,7 +178,7 @@ function useHandleKeyPressOnCombobox(_ref3) {
|
|
|
181
178
|
}
|
|
182
179
|
if (filterable && !expanded && isUnmodifiedCharacterKey(event)) {
|
|
183
180
|
openMenu();
|
|
184
|
-
onFilterChange === null || onFilterChange === void 0
|
|
181
|
+
onFilterChange === null || onFilterChange === void 0 || onFilterChange(key);
|
|
185
182
|
return;
|
|
186
183
|
}
|
|
187
184
|
if (key === 'Backspace' || key === 'Clear' || isUnmodifiedCharacterKey(event) || key === ' ' && typing) {
|
package/build/cjs/simple-single-select/use-handle-key-press/use-handle-key-press-on-filter-input.js
CHANGED
|
@@ -9,18 +9,17 @@ var _useFocusOption = require("./use-focus-option.js");
|
|
|
9
9
|
var _usePageDown = require("./use-page-down.js");
|
|
10
10
|
var _usePageUp = require("./use-page-up.js");
|
|
11
11
|
var _utils = require("./utils.js");
|
|
12
|
-
function useHandleKeyPressOnFilterInput(
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
} = _ref;
|
|
12
|
+
function useHandleKeyPressOnFilterInput({
|
|
13
|
+
value,
|
|
14
|
+
options,
|
|
15
|
+
loading,
|
|
16
|
+
closeMenu,
|
|
17
|
+
listBoxRef,
|
|
18
|
+
focusComboBox,
|
|
19
|
+
focussedOptionIndex,
|
|
20
|
+
setFocussedOptionIndex,
|
|
21
|
+
selectFocussedOption
|
|
22
|
+
}) {
|
|
24
23
|
const pageDown = (0, _usePageDown.usePageDown)({
|
|
25
24
|
options,
|
|
26
25
|
focussedOptionIndex,
|
|
@@ -7,13 +7,12 @@ exports.useHandleTyping = useHandleTyping;
|
|
|
7
7
|
var _react = require("react");
|
|
8
8
|
const TYPING_DEBOUNCE_TIME = 300; // ms
|
|
9
9
|
|
|
10
|
-
function useHandleTyping(
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
} = _ref;
|
|
10
|
+
function useHandleTyping({
|
|
11
|
+
expanded,
|
|
12
|
+
options,
|
|
13
|
+
setFocussedOptionIndex,
|
|
14
|
+
onChange
|
|
15
|
+
}) {
|
|
17
16
|
const [value, setValue] = (0, _react.useState)('');
|
|
18
17
|
const [typing, setTyping] = (0, _react.useState)(false);
|
|
19
18
|
|
|
@@ -42,13 +41,10 @@ function useHandleTyping(_ref) {
|
|
|
42
41
|
if (value && value !== prevValueRef.current) {
|
|
43
42
|
// We only want to do this when the value changed
|
|
44
43
|
prevValueRef.current = value;
|
|
45
|
-
const optionIndex = options.findIndex(
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
} = _ref2;
|
|
50
|
-
return !disabled && label.toLowerCase().startsWith(value.toLowerCase());
|
|
51
|
-
});
|
|
44
|
+
const optionIndex = options.findIndex(({
|
|
45
|
+
disabled,
|
|
46
|
+
label
|
|
47
|
+
}) => !disabled && label.toLowerCase().startsWith(value.toLowerCase()));
|
|
52
48
|
if (optionIndex !== -1) {
|
|
53
49
|
if (expanded) {
|
|
54
50
|
setFocussedOptionIndex(optionIndex);
|
|
@@ -5,13 +5,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.useHighlightFirstOptionOnPreviousPage = useHighlightFirstOptionOnPreviousPage;
|
|
7
7
|
var _react = require("react");
|
|
8
|
-
function useHighlightFirstOptionOnPreviousPage(
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
} = _ref;
|
|
8
|
+
function useHighlightFirstOptionOnPreviousPage({
|
|
9
|
+
options,
|
|
10
|
+
focussedOptionIndex,
|
|
11
|
+
setFocussedOptionIndex,
|
|
12
|
+
listBoxRef
|
|
13
|
+
}) {
|
|
15
14
|
return (0, _react.useCallback)(() => {
|
|
16
15
|
const listBoxParent = listBoxRef.current.parentNode;
|
|
17
16
|
const optionElements = Array.from(listBoxRef.current.childNodes);
|
package/build/cjs/simple-single-select/use-handle-key-press/use-highlight-first-visible-option.js
CHANGED
|
@@ -5,12 +5,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.useHighlightFirstVisibleOption = useHighlightFirstVisibleOption;
|
|
7
7
|
var _react = require("react");
|
|
8
|
-
function useHighlightFirstVisibleOption(
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
} = _ref;
|
|
8
|
+
function useHighlightFirstVisibleOption({
|
|
9
|
+
options,
|
|
10
|
+
focussedOptionIndex,
|
|
11
|
+
setFocussedOptionIndex
|
|
12
|
+
}) {
|
|
14
13
|
return (0, _react.useCallback)(lowestVisibleIndex => {
|
|
15
14
|
if (!options[lowestVisibleIndex].disabled) {
|
|
16
15
|
setFocussedOptionIndex(lowestVisibleIndex);
|
|
@@ -5,13 +5,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.useHighlightLastOptionOnNextPage = useHighlightLastOptionOnNextPage;
|
|
7
7
|
var _react = require("react");
|
|
8
|
-
function useHighlightLastOptionOnNextPage(
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
} = _ref;
|
|
8
|
+
function useHighlightLastOptionOnNextPage({
|
|
9
|
+
options,
|
|
10
|
+
focussedOptionIndex,
|
|
11
|
+
setFocussedOptionIndex,
|
|
12
|
+
listBoxRef
|
|
13
|
+
}) {
|
|
15
14
|
return (0, _react.useCallback)(() => {
|
|
16
15
|
const listBoxParent = listBoxRef.current.parentNode;
|
|
17
16
|
const optionElements = Array.from(listBoxRef.current.childNodes);
|
package/build/cjs/simple-single-select/use-handle-key-press/use-highlight-last-visible-option.js
CHANGED
|
@@ -5,12 +5,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.useHighlightLastVisibleOption = useHighlightLastVisibleOption;
|
|
7
7
|
var _react = require("react");
|
|
8
|
-
function useHighlightLastVisibleOption(
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
} = _ref;
|
|
8
|
+
function useHighlightLastVisibleOption({
|
|
9
|
+
options,
|
|
10
|
+
focussedOptionIndex,
|
|
11
|
+
setFocussedOptionIndex
|
|
12
|
+
}) {
|
|
14
13
|
return (0, _react.useCallback)(highestVisibleIndex => {
|
|
15
14
|
if (!options[highestVisibleIndex].disabled) {
|
|
16
15
|
setFocussedOptionIndex(highestVisibleIndex);
|