@dhis2-ui/select 8.13.14 → 8.14.0
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/select/empty.js +3 -3
- package/build/cjs/select/filter-input.js +3 -3
- package/build/cjs/select/input-prefix.js +3 -3
- package/build/cjs/select/input-wrapper.js +5 -5
- package/build/cjs/select/loading.js +4 -4
- package/build/cjs/select/no-match.js +3 -3
- package/build/cjs/single-select/input.js +5 -5
- package/build/cjs/single-select/selection.js +4 -4
- package/build/cjs/single-select/single-select.stories.js +35 -2
- package/build/cjs/single-select-option/single-select-option.js +3 -3
- package/build/es/select/empty.js +3 -3
- package/build/es/select/filter-input.js +3 -3
- package/build/es/select/input-prefix.js +3 -3
- package/build/es/select/input-wrapper.js +5 -5
- package/build/es/select/loading.js +4 -4
- package/build/es/select/no-match.js +3 -3
- package/build/es/single-select/input.js +5 -5
- package/build/es/single-select/selection.js +4 -4
- package/build/es/single-select/single-select.stories.js +27 -1
- package/build/es/single-select-option/single-select-option.js +3 -3
- package/package.json +14 -14
|
@@ -23,11 +23,11 @@ const Empty = _ref => {
|
|
|
23
23
|
} = _ref;
|
|
24
24
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
25
25
|
"data-test": dataTest,
|
|
26
|
-
className: _style.default.dynamic([["
|
|
26
|
+
className: _style.default.dynamic([["3788156646", [_uiConstants.colors.grey700, _uiConstants.theme.fonts, _uiConstants.spacers.dp8, _uiConstants.spacers.dp24]]]) + " " + (className || "")
|
|
27
27
|
}, message, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
28
|
-
id: "
|
|
28
|
+
id: "3788156646",
|
|
29
29
|
dynamic: [_uiConstants.colors.grey700, _uiConstants.theme.fonts, _uiConstants.spacers.dp8, _uiConstants.spacers.dp24]
|
|
30
|
-
}, ["div.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey700, ";font-family:").concat(_uiConstants.theme.fonts, ";font-size:13px;line-height:16px;padding:").concat(_uiConstants.spacers.dp8, "
|
|
30
|
+
}, ["div.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey700, ";font-family:").concat(_uiConstants.theme.fonts, ";font-size:13px;line-height:16px;padding-block:").concat(_uiConstants.spacers.dp8, ";padding-inline:").concat(_uiConstants.spacers.dp24, ";text-align:center;}")]));
|
|
31
31
|
};
|
|
32
32
|
|
|
33
33
|
exports.Empty = Empty;
|
|
@@ -26,7 +26,7 @@ const FilterInput = _ref => {
|
|
|
26
26
|
dataTest
|
|
27
27
|
} = _ref;
|
|
28
28
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
29
|
-
className: _style.default.dynamic([["
|
|
29
|
+
className: _style.default.dynamic([["730881408", [_uiConstants.colors.white, _uiConstants.spacers.dp8, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp8]]]) + " " + (className || "")
|
|
30
30
|
}, /*#__PURE__*/_react.default.createElement(_input.Input, {
|
|
31
31
|
dense: true,
|
|
32
32
|
dataTest: dataTest,
|
|
@@ -37,9 +37,9 @@ const FilterInput = _ref => {
|
|
|
37
37
|
placeholder: placeholder,
|
|
38
38
|
initialFocus: true
|
|
39
39
|
}), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
40
|
-
id: "
|
|
40
|
+
id: "730881408",
|
|
41
41
|
dynamic: [_uiConstants.colors.white, _uiConstants.spacers.dp8, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp8]
|
|
42
|
-
}, ["div.__jsx-style-dynamic-selector{position:-webkit-sticky;position:sticky;
|
|
42
|
+
}, ["div.__jsx-style-dynamic-selector{position:-webkit-sticky;position:sticky;-webkit-inset-block-start:0;-ms-intb-rlock-start:0;inset-block-start:0;background:".concat(_uiConstants.colors.white, ";padding-block-start:").concat(_uiConstants.spacers.dp8, ";padding-inline-end:").concat(_uiConstants.spacers.dp8, ";padding-block-end:").concat(_uiConstants.spacers.dp4, ";padding-inline-start:").concat(_uiConstants.spacers.dp8, ";z-index:1;}")]));
|
|
43
43
|
};
|
|
44
44
|
|
|
45
45
|
exports.FilterInput = FilterInput;
|
|
@@ -28,11 +28,11 @@ const InputPrefix = _ref => {
|
|
|
28
28
|
|
|
29
29
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
30
30
|
"data-test": dataTest,
|
|
31
|
-
className: _style.default.dynamic([["
|
|
31
|
+
className: _style.default.dynamic([["1343055987", [_uiConstants.colors.grey600, _uiConstants.spacers.dp12]]]) + " " + (className || "")
|
|
32
32
|
}, prefix, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
33
|
-
id: "
|
|
33
|
+
id: "1343055987",
|
|
34
34
|
dynamic: [_uiConstants.colors.grey600, _uiConstants.spacers.dp12]
|
|
35
|
-
}, ["div.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey600, ";padding-
|
|
35
|
+
}, ["div.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey600, ";padding-inline-end:").concat(_uiConstants.spacers.dp12, ";font-size:14px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")]));
|
|
36
36
|
};
|
|
37
37
|
|
|
38
38
|
exports.InputPrefix = InputPrefix;
|
|
@@ -45,15 +45,15 @@ const InputWrapper = _ref => {
|
|
|
45
45
|
tabIndex: tabIndex,
|
|
46
46
|
ref: inputRef,
|
|
47
47
|
"data-test": dataTest,
|
|
48
|
-
className: _style.default.dynamic([["
|
|
48
|
+
className: _style.default.dynamic([["1568723238", [_uiConstants.colors.grey500, _uiConstants.theme.focus, _uiConstants.theme.focus, _uiConstants.theme.valid, _uiConstants.theme.warning, _uiConstants.theme.error, _uiConstants.colors.grey100, _uiConstants.colors.grey500, _uiConstants.theme.disabled]]]) + " " + (classNames || "")
|
|
49
49
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
50
|
-
className: _style.default.dynamic([["
|
|
50
|
+
className: _style.default.dynamic([["1568723238", [_uiConstants.colors.grey500, _uiConstants.theme.focus, _uiConstants.theme.focus, _uiConstants.theme.valid, _uiConstants.theme.warning, _uiConstants.theme.error, _uiConstants.colors.grey100, _uiConstants.colors.grey500, _uiConstants.theme.disabled]]]) + " " + "root-children"
|
|
51
51
|
}, children), /*#__PURE__*/_react.default.createElement("div", {
|
|
52
|
-
className: _style.default.dynamic([["
|
|
52
|
+
className: _style.default.dynamic([["1568723238", [_uiConstants.colors.grey500, _uiConstants.theme.focus, _uiConstants.theme.focus, _uiConstants.theme.valid, _uiConstants.theme.warning, _uiConstants.theme.error, _uiConstants.colors.grey100, _uiConstants.colors.grey500, _uiConstants.theme.disabled]]]) + " " + "root-right"
|
|
53
53
|
}, /*#__PURE__*/_react.default.createElement(_uiIcons.IconChevronDown16, null)), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
54
|
-
id: "
|
|
54
|
+
id: "1568723238",
|
|
55
55
|
dynamic: [_uiConstants.colors.grey500, _uiConstants.theme.focus, _uiConstants.theme.focus, _uiConstants.theme.valid, _uiConstants.theme.warning, _uiConstants.theme.error, _uiConstants.colors.grey100, _uiConstants.colors.grey500, _uiConstants.theme.disabled]
|
|
56
|
-
}, [".root.__jsx-style-dynamic-selector{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:white;border-radius:3px;border:1px solid ".concat(_uiConstants.colors.grey500, ";box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-height:40px;padding:6px
|
|
56
|
+
}, [".root.__jsx-style-dynamic-selector{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:white;border-radius:3px;border:1px solid ".concat(_uiConstants.colors.grey500, ";box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-height:40px;padding-block:6px;padding-inline:12px;box-shadow:inset 0 0 1px 0 rgba(48,54,60,0.1);}"), ".root.__jsx-style-dynamic-selector:not(.disabled):focus,.root.__jsx-style-dynamic-selector:not(.disabled):active{outline:none;box-shadow:inset 0 0 0 2px ".concat(_uiConstants.theme.focus, ";border-color:").concat(_uiConstants.theme.focus, ";}"), ".root.valid.__jsx-style-dynamic-selector{border-color:".concat(_uiConstants.theme.valid, ";}"), ".root.warning.__jsx-style-dynamic-selector{border-color:".concat(_uiConstants.theme.warning, ";}"), ".root.error.__jsx-style-dynamic-selector{border-color:".concat(_uiConstants.theme.error, ";}"), ".root.disabled.__jsx-style-dynamic-selector{background-color:".concat(_uiConstants.colors.grey100, ";border-color:").concat(_uiConstants.colors.grey500, ";color:").concat(_uiConstants.theme.disabled, ";cursor:not-allowed;}"), ".root.dense.__jsx-style-dynamic-selector{padding-block:2px;padding-inline:8px;min-height:32px;}", ".root-children.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".root-right.__jsx-style-dynamic-selector{margin-block-start:4px;margin-inline-start:8px;}"]));
|
|
57
57
|
};
|
|
58
58
|
|
|
59
59
|
exports.InputWrapper = InputWrapper;
|
|
@@ -27,15 +27,15 @@ const Loading = _ref => {
|
|
|
27
27
|
} = _ref;
|
|
28
28
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
29
29
|
"data-test": dataTest,
|
|
30
|
-
className: _style.default.dynamic([["
|
|
30
|
+
className: _style.default.dynamic([["3603755746", [_uiConstants.spacers.dp16, _uiConstants.colors.grey700, _uiConstants.theme.fonts, _uiConstants.spacers.dp8, _uiConstants.spacers.dp24]]]) + " " + ((0, _classnames.default)(className, 'container') || "")
|
|
31
31
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
32
|
-
className: _style.default.dynamic([["
|
|
32
|
+
className: _style.default.dynamic([["3603755746", [_uiConstants.spacers.dp16, _uiConstants.colors.grey700, _uiConstants.theme.fonts, _uiConstants.spacers.dp8, _uiConstants.spacers.dp24]]])
|
|
33
33
|
}, /*#__PURE__*/_react.default.createElement(_loader.CircularLoader, {
|
|
34
34
|
small: true
|
|
35
35
|
})), message, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
36
|
-
id: "
|
|
36
|
+
id: "3603755746",
|
|
37
37
|
dynamic: [_uiConstants.spacers.dp16, _uiConstants.colors.grey700, _uiConstants.theme.fonts, _uiConstants.spacers.dp8, _uiConstants.spacers.dp24]
|
|
38
|
-
}, [".container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:".concat(_uiConstants.spacers.dp16, ";-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;color:").concat(_uiConstants.colors.grey700, ";font-family:").concat(_uiConstants.theme.fonts, ";font-size:13px;padding:").concat(_uiConstants.spacers.dp8, "
|
|
38
|
+
}, [".container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:".concat(_uiConstants.spacers.dp16, ";-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;color:").concat(_uiConstants.colors.grey700, ";font-family:").concat(_uiConstants.theme.fonts, ";font-size:13px;padding-block:").concat(_uiConstants.spacers.dp8, ";padding-inline:").concat(_uiConstants.spacers.dp24, ";}")]));
|
|
39
39
|
};
|
|
40
40
|
|
|
41
41
|
exports.Loading = Loading;
|
|
@@ -21,11 +21,11 @@ const NoMatch = _ref => {
|
|
|
21
21
|
className
|
|
22
22
|
} = _ref;
|
|
23
23
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
24
|
-
className: _style.default.dynamic([["
|
|
24
|
+
className: _style.default.dynamic([["3788156646", [_uiConstants.colors.grey700, _uiConstants.theme.fonts, _uiConstants.spacers.dp8, _uiConstants.spacers.dp24]]]) + " " + (className || "")
|
|
25
25
|
}, message, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
26
|
-
id: "
|
|
26
|
+
id: "3788156646",
|
|
27
27
|
dynamic: [_uiConstants.colors.grey700, _uiConstants.theme.fonts, _uiConstants.spacers.dp8, _uiConstants.spacers.dp24]
|
|
28
|
-
}, ["div.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey700, ";font-family:").concat(_uiConstants.theme.fonts, ";font-size:13px;line-height:16px;padding:").concat(_uiConstants.spacers.dp8, "
|
|
28
|
+
}, ["div.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey700, ";font-family:").concat(_uiConstants.theme.fonts, ";font-size:13px;line-height:16px;padding-block:").concat(_uiConstants.spacers.dp8, ";padding-inline:").concat(_uiConstants.spacers.dp24, ";text-align:center;}")]));
|
|
29
29
|
};
|
|
30
30
|
|
|
31
31
|
exports.NoMatch = NoMatch;
|
|
@@ -48,7 +48,7 @@ const Input = _ref => {
|
|
|
48
48
|
};
|
|
49
49
|
|
|
50
50
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
51
|
-
className: _style.default.dynamic([["
|
|
51
|
+
className: _style.default.dynamic([["3987817844", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + ((0, _classnames.default)('root', className) || "")
|
|
52
52
|
}, /*#__PURE__*/_react.default.createElement(_index.InputPrefix, {
|
|
53
53
|
prefix: prefix,
|
|
54
54
|
dataTest: "".concat(dataTest, "-prefix")
|
|
@@ -56,20 +56,20 @@ const Input = _ref => {
|
|
|
56
56
|
placeholder: placeholder,
|
|
57
57
|
dataTest: "".concat(dataTest, "-placeholder")
|
|
58
58
|
}), hasSelection && /*#__PURE__*/_react.default.createElement("div", {
|
|
59
|
-
className: _style.default.dynamic([["
|
|
59
|
+
className: _style.default.dynamic([["3987817844", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
|
|
60
60
|
}, /*#__PURE__*/_react.default.createElement(_selection.Selection, {
|
|
61
61
|
selected: selected,
|
|
62
62
|
options: options
|
|
63
63
|
})), hasSelection && clearable && !disabled && /*#__PURE__*/_react.default.createElement("div", {
|
|
64
|
-
className: _style.default.dynamic([["
|
|
64
|
+
className: _style.default.dynamic([["3987817844", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
|
|
65
65
|
}, /*#__PURE__*/_react.default.createElement(_index.InputClearButton, {
|
|
66
66
|
onClear: onClear,
|
|
67
67
|
clearText: clearText,
|
|
68
68
|
dataTest: "".concat(dataTest, "-clear")
|
|
69
69
|
})), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
70
|
-
id: "
|
|
70
|
+
id: "3987817844",
|
|
71
71
|
dynamic: [_uiConstants.colors.grey900]
|
|
72
|
-
}, [".root.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:".concat(_uiConstants.colors.grey900, ";font-size:14px;line-height:16px;}"), ".root-input.__jsx-style-dynamic-selector{overflow-y:auto;-webkit-flex:1;-ms-flex:1;flex:1;}", ".root-right.__jsx-style-dynamic-selector{margin-
|
|
72
|
+
}, [".root.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:".concat(_uiConstants.colors.grey900, ";font-size:14px;line-height:16px;}"), ".root-input.__jsx-style-dynamic-selector{overflow-y:auto;-webkit-flex:1;-ms-flex:1;flex:1;}", ".root-right.__jsx-style-dynamic-selector{margin-inline-start:auto;margin-inline-end:10px;}"]), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
73
73
|
id: "1331770409",
|
|
74
74
|
dynamic: [inputMaxHeight]
|
|
75
75
|
}, [".root-input.__jsx-style-dynamic-selector{max-height:".concat(inputMaxHeight, ";}")]));
|
|
@@ -44,13 +44,13 @@ const Selection = _ref => {
|
|
|
44
44
|
|
|
45
45
|
const label = selectedOption ? selectedOption.props.label : selected;
|
|
46
46
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
47
|
-
className: _style.default.dynamic([["
|
|
47
|
+
className: _style.default.dynamic([["1914911415", [_uiConstants.spacers.dp8, _uiConstants.spacers.dp16, _uiConstants.spacers.dp16]]]) + " " + ((0, _classnames.default)(className, 'root') || "")
|
|
48
48
|
}, icon && /*#__PURE__*/_react.default.createElement("div", {
|
|
49
|
-
className: _style.default.dynamic([["
|
|
49
|
+
className: _style.default.dynamic([["1914911415", [_uiConstants.spacers.dp8, _uiConstants.spacers.dp16, _uiConstants.spacers.dp16]]]) + " " + "root-icon"
|
|
50
50
|
}, icon), label, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
51
|
-
id: "
|
|
51
|
+
id: "1914911415",
|
|
52
52
|
dynamic: [_uiConstants.spacers.dp8, _uiConstants.spacers.dp16, _uiConstants.spacers.dp16]
|
|
53
|
-
}, [".root.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".root-icon.__jsx-style-dynamic-selector{margin-
|
|
53
|
+
}, [".root.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".root-icon.__jsx-style-dynamic-selector{margin-inline-end:".concat(_uiConstants.spacers.dp8, ";width:").concat(_uiConstants.spacers.dp16, ";height:").concat(_uiConstants.spacers.dp16, ";overflow:hidden;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}")]));
|
|
54
54
|
};
|
|
55
55
|
|
|
56
56
|
exports.Selection = Selection;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.WithPrefixAndSelection = exports.WithPrefix = exports.WithPlaceholderAndSelection = exports.WithPlaceholder = exports.WithOptionsLoadingAndLoadingText = exports.WithOptionsAndOnChange = exports.WithOptionsAndLoading = exports.WithOptionsAndDisabled = exports.WithOptionsAndASelection = exports.WithOptionsASelectionAndDisabled = exports.WithOnFocus = exports.WithOnBlur = exports.WithMoreThanThreeOptionsAndA100PxMaxHeight = exports.WithMoreThanTenOptions = exports.WithInvalidOptions = exports.WithInvalidFilterableOptions = exports.WithInitialFocus = exports.WithFilterField = exports.WithDisabledOptionAndOnChange = exports.WithCustomOptionsAndOnChange = exports.WithClearButtonSelectionAndOnChange = exports.ShiftedIntoView = exports.FlippedPosition = exports.EmptyWithEmptyText = exports.EmptyWithEmptyComponent = exports.Empty = exports.Dense = exports.DefaultPosition = void 0;
|
|
6
|
+
exports.default = exports.WithRTL = exports.WithPrefixAndSelection = exports.WithPrefix = exports.WithPlaceholderAndSelection = exports.WithPlaceholder = exports.WithOptionsLoadingAndLoadingText = exports.WithOptionsAndOnChange = exports.WithOptionsAndLoading = exports.WithOptionsAndDisabled = exports.WithOptionsAndASelection = exports.WithOptionsASelectionAndDisabled = exports.WithOnFocus = exports.WithOnBlur = exports.WithMoreThanThreeOptionsAndA100PxMaxHeight = exports.WithMoreThanTenOptions = exports.WithInvalidOptions = exports.WithInvalidFilterableOptions = exports.WithInitialFocus = exports.WithFilterField = exports.WithDisabledOptionAndOnChange = exports.WithCustomOptionsAndOnChange = exports.WithClearButtonSelectionAndOnChange = exports.ShiftedIntoView = exports.FlippedPosition = exports.EmptyWithEmptyText = exports.EmptyWithEmptyComponent = exports.Empty = exports.Dense = exports.DefaultPosition = void 0;
|
|
7
7
|
|
|
8
8
|
var _style = _interopRequireDefault(require("styled-jsx/style"));
|
|
9
9
|
|
|
@@ -11,12 +11,16 @@ var _uiConstants = require("@dhis2/ui-constants");
|
|
|
11
11
|
|
|
12
12
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
13
|
|
|
14
|
-
var _react =
|
|
14
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
15
15
|
|
|
16
16
|
var _index = require("../index.js");
|
|
17
17
|
|
|
18
18
|
var _index2 = require("./index.js");
|
|
19
19
|
|
|
20
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
21
|
+
|
|
22
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
23
|
+
|
|
20
24
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
25
|
|
|
22
26
|
const description = "\nUse a select component wherever the user needs to make a selection of one or more options from a list of 6 or more options. If there are less than 6 options to choose from and space permits, use checkboxes for multiple selection and radio buttons for single selection. If the user needs to make a complex selection with a specific ordering, use a transfer instead.\n\nLearn more about using Selects at [Design System: Select](https://github.com/dhis2/design-system/blob/master/molecules/select.md).\n\n```js\nimport { SingleSelect, SingleSelectOption } from '@dhis2/ui'\n```\n\n_**Note:** Due to demo limitations on this page, only one representative example is rendered here. For more (interactive) examples, see individual stories in the 'Canvas' tab._\n";
|
|
@@ -323,6 +327,35 @@ exports.WithPrefixAndSelection = WithPrefixAndSelection;
|
|
|
323
327
|
WithPrefixAndSelection.args = { ...WithPrefix.args,
|
|
324
328
|
...WithOptionsAndASelection.args
|
|
325
329
|
};
|
|
330
|
+
|
|
331
|
+
const WithRTL = args => {
|
|
332
|
+
// as options are rendered in Portal, the body dir (of the iframe) needs to be set to 'rtl'
|
|
333
|
+
(0, _react.useEffect)(() => {
|
|
334
|
+
document.body.dir = 'rtl';
|
|
335
|
+
return () => {
|
|
336
|
+
document.body.dir = 'ltr';
|
|
337
|
+
};
|
|
338
|
+
}, []);
|
|
339
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
340
|
+
dir: "rtl"
|
|
341
|
+
}, /*#__PURE__*/_react.default.createElement(_index2.SingleSelect, args, /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
|
|
342
|
+
value: "1",
|
|
343
|
+
label: "\u0627\u0644\u062E\u064A\u0627\u0631 1"
|
|
344
|
+
}), /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
|
|
345
|
+
value: "2",
|
|
346
|
+
label: "\u0627\u0644\u062E\u064A\u0627\u0631 2"
|
|
347
|
+
}), /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
|
|
348
|
+
value: "3",
|
|
349
|
+
label: "\u0627\u0644\u062E\u064A\u0627\u0631 3"
|
|
350
|
+
})));
|
|
351
|
+
};
|
|
352
|
+
|
|
353
|
+
exports.WithRTL = WithRTL;
|
|
354
|
+
WithRTL.args = {
|
|
355
|
+
prefix: 'نص البادئة',
|
|
356
|
+
...WithOptionsAndASelection.args
|
|
357
|
+
};
|
|
358
|
+
WithRTL.storyName = 'RTL Text';
|
|
326
359
|
const WithPlaceholder = WithOptionsTemplate.bind({});
|
|
327
360
|
exports.WithPlaceholder = WithPlaceholder;
|
|
328
361
|
WithPlaceholder.args = {
|
|
@@ -32,14 +32,14 @@ const SingleSelectOption = _ref => {
|
|
|
32
32
|
"data-test": dataTest,
|
|
33
33
|
"data-value": value,
|
|
34
34
|
"data-label": label,
|
|
35
|
-
className: _style.default.dynamic([["
|
|
35
|
+
className: _style.default.dynamic([["3808134379", [_uiConstants.colors.grey900, _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey200, _uiConstants.colors.teal700, _uiConstants.colors.white, _uiConstants.colors.grey500]]]) + " " + ((0, _classnames.default)(className, {
|
|
36
36
|
disabled,
|
|
37
37
|
active
|
|
38
38
|
}) || "")
|
|
39
39
|
}, label, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
40
|
-
id: "
|
|
40
|
+
id: "3808134379",
|
|
41
41
|
dynamic: [_uiConstants.colors.grey900, _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey200, _uiConstants.colors.teal700, _uiConstants.colors.white, _uiConstants.colors.grey500]
|
|
42
|
-
}, ["div.__jsx-style-dynamic-selector{cursor:pointer;font-size:14px;-webkit-text-decoration:none;text-decoration:none;color:".concat(_uiConstants.colors.grey900, ";padding:").concat(_uiConstants.spacers.dp8, "
|
|
42
|
+
}, ["div.__jsx-style-dynamic-selector{cursor:pointer;font-size:14px;-webkit-text-decoration:none;text-decoration:none;color:".concat(_uiConstants.colors.grey900, ";padding-block:").concat(_uiConstants.spacers.dp8, ";padding-inline:").concat(_uiConstants.spacers.dp12, ";}"), "div.__jsx-style-dynamic-selector:hover{background-color:".concat(_uiConstants.colors.grey200, ";}"), "div.__jsx-style-dynamic-selector:active,div.active.__jsx-style-dynamic-selector{background-color:".concat(_uiConstants.colors.teal700, ";color:").concat(_uiConstants.colors.white, ";cursor:auto;}"), "div.disabled.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey500, ";cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"), "div.disabled.__jsx-style-dynamic-selector:hover{background-color:initial;}"]));
|
|
43
43
|
};
|
|
44
44
|
|
|
45
45
|
exports.SingleSelectOption = SingleSelectOption;
|
package/build/es/select/empty.js
CHANGED
|
@@ -11,11 +11,11 @@ const Empty = _ref => {
|
|
|
11
11
|
} = _ref;
|
|
12
12
|
return /*#__PURE__*/React.createElement("div", {
|
|
13
13
|
"data-test": dataTest,
|
|
14
|
-
className: _JSXStyle.dynamic([["
|
|
14
|
+
className: _JSXStyle.dynamic([["3788156646", [colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]]]) + " " + (className || "")
|
|
15
15
|
}, message, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
16
|
-
id: "
|
|
16
|
+
id: "3788156646",
|
|
17
17
|
dynamic: [colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]
|
|
18
|
-
}, ["div.__jsx-style-dynamic-selector{color:".concat(colors.grey700, ";font-family:").concat(theme.fonts, ";font-size:13px;line-height:16px;padding:").concat(spacers.dp8, "
|
|
18
|
+
}, ["div.__jsx-style-dynamic-selector{color:".concat(colors.grey700, ";font-family:").concat(theme.fonts, ";font-size:13px;line-height:16px;padding-block:").concat(spacers.dp8, ";padding-inline:").concat(spacers.dp24, ";text-align:center;}")]));
|
|
19
19
|
};
|
|
20
20
|
|
|
21
21
|
Empty.propTypes = {
|
|
@@ -13,7 +13,7 @@ const FilterInput = _ref => {
|
|
|
13
13
|
dataTest
|
|
14
14
|
} = _ref;
|
|
15
15
|
return /*#__PURE__*/React.createElement("div", {
|
|
16
|
-
className: _JSXStyle.dynamic([["
|
|
16
|
+
className: _JSXStyle.dynamic([["730881408", [colors.white, spacers.dp8, spacers.dp8, spacers.dp4, spacers.dp8]]]) + " " + (className || "")
|
|
17
17
|
}, /*#__PURE__*/React.createElement(Input, {
|
|
18
18
|
dense: true,
|
|
19
19
|
dataTest: dataTest,
|
|
@@ -24,9 +24,9 @@ const FilterInput = _ref => {
|
|
|
24
24
|
placeholder: placeholder,
|
|
25
25
|
initialFocus: true
|
|
26
26
|
}), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
27
|
-
id: "
|
|
27
|
+
id: "730881408",
|
|
28
28
|
dynamic: [colors.white, spacers.dp8, spacers.dp8, spacers.dp4, spacers.dp8]
|
|
29
|
-
}, ["div.__jsx-style-dynamic-selector{position:-webkit-sticky;position:sticky;
|
|
29
|
+
}, ["div.__jsx-style-dynamic-selector{position:-webkit-sticky;position:sticky;-webkit-inset-block-start:0;-ms-intb-rlock-start:0;inset-block-start:0;background:".concat(colors.white, ";padding-block-start:").concat(spacers.dp8, ";padding-inline-end:").concat(spacers.dp8, ";padding-block-end:").concat(spacers.dp4, ";padding-inline-start:").concat(spacers.dp8, ";z-index:1;}")]));
|
|
30
30
|
};
|
|
31
31
|
|
|
32
32
|
FilterInput.propTypes = {
|
|
@@ -16,11 +16,11 @@ const InputPrefix = _ref => {
|
|
|
16
16
|
|
|
17
17
|
return /*#__PURE__*/React.createElement("div", {
|
|
18
18
|
"data-test": dataTest,
|
|
19
|
-
className: _JSXStyle.dynamic([["
|
|
19
|
+
className: _JSXStyle.dynamic([["1343055987", [colors.grey600, spacers.dp12]]]) + " " + (className || "")
|
|
20
20
|
}, prefix, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
21
|
-
id: "
|
|
21
|
+
id: "1343055987",
|
|
22
22
|
dynamic: [colors.grey600, spacers.dp12]
|
|
23
|
-
}, ["div.__jsx-style-dynamic-selector{color:".concat(colors.grey600, ";padding-
|
|
23
|
+
}, ["div.__jsx-style-dynamic-selector{color:".concat(colors.grey600, ";padding-inline-end:").concat(spacers.dp12, ";font-size:14px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")]));
|
|
24
24
|
};
|
|
25
25
|
|
|
26
26
|
InputPrefix.propTypes = {
|
|
@@ -31,15 +31,15 @@ const InputWrapper = _ref => {
|
|
|
31
31
|
tabIndex: tabIndex,
|
|
32
32
|
ref: inputRef,
|
|
33
33
|
"data-test": dataTest,
|
|
34
|
-
className: _JSXStyle.dynamic([["
|
|
34
|
+
className: _JSXStyle.dynamic([["1568723238", [colors.grey500, theme.focus, theme.focus, theme.valid, theme.warning, theme.error, colors.grey100, colors.grey500, theme.disabled]]]) + " " + (classNames || "")
|
|
35
35
|
}, /*#__PURE__*/React.createElement("div", {
|
|
36
|
-
className: _JSXStyle.dynamic([["
|
|
36
|
+
className: _JSXStyle.dynamic([["1568723238", [colors.grey500, theme.focus, theme.focus, theme.valid, theme.warning, theme.error, colors.grey100, colors.grey500, theme.disabled]]]) + " " + "root-children"
|
|
37
37
|
}, children), /*#__PURE__*/React.createElement("div", {
|
|
38
|
-
className: _JSXStyle.dynamic([["
|
|
38
|
+
className: _JSXStyle.dynamic([["1568723238", [colors.grey500, theme.focus, theme.focus, theme.valid, theme.warning, theme.error, colors.grey100, colors.grey500, theme.disabled]]]) + " " + "root-right"
|
|
39
39
|
}, /*#__PURE__*/React.createElement(IconChevronDown16, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
40
|
-
id: "
|
|
40
|
+
id: "1568723238",
|
|
41
41
|
dynamic: [colors.grey500, theme.focus, theme.focus, theme.valid, theme.warning, theme.error, colors.grey100, colors.grey500, theme.disabled]
|
|
42
|
-
}, [".root.__jsx-style-dynamic-selector{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:white;border-radius:3px;border:1px solid ".concat(colors.grey500, ";box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-height:40px;padding:6px
|
|
42
|
+
}, [".root.__jsx-style-dynamic-selector{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:white;border-radius:3px;border:1px solid ".concat(colors.grey500, ";box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-height:40px;padding-block:6px;padding-inline:12px;box-shadow:inset 0 0 1px 0 rgba(48,54,60,0.1);}"), ".root.__jsx-style-dynamic-selector:not(.disabled):focus,.root.__jsx-style-dynamic-selector:not(.disabled):active{outline:none;box-shadow:inset 0 0 0 2px ".concat(theme.focus, ";border-color:").concat(theme.focus, ";}"), ".root.valid.__jsx-style-dynamic-selector{border-color:".concat(theme.valid, ";}"), ".root.warning.__jsx-style-dynamic-selector{border-color:".concat(theme.warning, ";}"), ".root.error.__jsx-style-dynamic-selector{border-color:".concat(theme.error, ";}"), ".root.disabled.__jsx-style-dynamic-selector{background-color:".concat(colors.grey100, ";border-color:").concat(colors.grey500, ";color:").concat(theme.disabled, ";cursor:not-allowed;}"), ".root.dense.__jsx-style-dynamic-selector{padding-block:2px;padding-inline:8px;min-height:32px;}", ".root-children.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".root-right.__jsx-style-dynamic-selector{margin-block-start:4px;margin-inline-start:8px;}"]));
|
|
43
43
|
};
|
|
44
44
|
|
|
45
45
|
InputWrapper.defaultProps = {
|
|
@@ -12,15 +12,15 @@ export const Loading = _ref => {
|
|
|
12
12
|
} = _ref;
|
|
13
13
|
return /*#__PURE__*/React.createElement("div", {
|
|
14
14
|
"data-test": dataTest,
|
|
15
|
-
className: _JSXStyle.dynamic([["
|
|
15
|
+
className: _JSXStyle.dynamic([["3603755746", [spacers.dp16, colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]]]) + " " + (cx(className, 'container') || "")
|
|
16
16
|
}, /*#__PURE__*/React.createElement("div", {
|
|
17
|
-
className: _JSXStyle.dynamic([["
|
|
17
|
+
className: _JSXStyle.dynamic([["3603755746", [spacers.dp16, colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]]])
|
|
18
18
|
}, /*#__PURE__*/React.createElement(CircularLoader, {
|
|
19
19
|
small: true
|
|
20
20
|
})), message, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
21
|
-
id: "
|
|
21
|
+
id: "3603755746",
|
|
22
22
|
dynamic: [spacers.dp16, colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]
|
|
23
|
-
}, [".container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:".concat(spacers.dp16, ";-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;color:").concat(colors.grey700, ";font-family:").concat(theme.fonts, ";font-size:13px;padding:").concat(spacers.dp8, "
|
|
23
|
+
}, [".container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:".concat(spacers.dp16, ";-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;color:").concat(colors.grey700, ";font-family:").concat(theme.fonts, ";font-size:13px;padding-block:").concat(spacers.dp8, ";padding-inline:").concat(spacers.dp24, ";}")]));
|
|
24
24
|
};
|
|
25
25
|
Loading.propTypes = {
|
|
26
26
|
dataTest: PropTypes.string.isRequired,
|
|
@@ -9,11 +9,11 @@ const NoMatch = _ref => {
|
|
|
9
9
|
className
|
|
10
10
|
} = _ref;
|
|
11
11
|
return /*#__PURE__*/React.createElement("div", {
|
|
12
|
-
className: _JSXStyle.dynamic([["
|
|
12
|
+
className: _JSXStyle.dynamic([["3788156646", [colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]]]) + " " + (className || "")
|
|
13
13
|
}, message, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
14
|
-
id: "
|
|
14
|
+
id: "3788156646",
|
|
15
15
|
dynamic: [colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]
|
|
16
|
-
}, ["div.__jsx-style-dynamic-selector{color:".concat(colors.grey700, ";font-family:").concat(theme.fonts, ";font-size:13px;line-height:16px;padding:").concat(spacers.dp8, "
|
|
16
|
+
}, ["div.__jsx-style-dynamic-selector{color:".concat(colors.grey700, ";font-family:").concat(theme.fonts, ";font-size:13px;line-height:16px;padding-block:").concat(spacers.dp8, ";padding-inline:").concat(spacers.dp24, ";text-align:center;}")]));
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
NoMatch.propTypes = {
|
|
@@ -32,7 +32,7 @@ const Input = _ref => {
|
|
|
32
32
|
};
|
|
33
33
|
|
|
34
34
|
return /*#__PURE__*/React.createElement("div", {
|
|
35
|
-
className: _JSXStyle.dynamic([["
|
|
35
|
+
className: _JSXStyle.dynamic([["3987817844", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + (cx('root', className) || "")
|
|
36
36
|
}, /*#__PURE__*/React.createElement(InputPrefix, {
|
|
37
37
|
prefix: prefix,
|
|
38
38
|
dataTest: "".concat(dataTest, "-prefix")
|
|
@@ -40,20 +40,20 @@ const Input = _ref => {
|
|
|
40
40
|
placeholder: placeholder,
|
|
41
41
|
dataTest: "".concat(dataTest, "-placeholder")
|
|
42
42
|
}), hasSelection && /*#__PURE__*/React.createElement("div", {
|
|
43
|
-
className: _JSXStyle.dynamic([["
|
|
43
|
+
className: _JSXStyle.dynamic([["3987817844", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
|
|
44
44
|
}, /*#__PURE__*/React.createElement(Selection, {
|
|
45
45
|
selected: selected,
|
|
46
46
|
options: options
|
|
47
47
|
})), hasSelection && clearable && !disabled && /*#__PURE__*/React.createElement("div", {
|
|
48
|
-
className: _JSXStyle.dynamic([["
|
|
48
|
+
className: _JSXStyle.dynamic([["3987817844", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
|
|
49
49
|
}, /*#__PURE__*/React.createElement(InputClearButton, {
|
|
50
50
|
onClear: onClear,
|
|
51
51
|
clearText: clearText,
|
|
52
52
|
dataTest: "".concat(dataTest, "-clear")
|
|
53
53
|
})), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
54
|
-
id: "
|
|
54
|
+
id: "3987817844",
|
|
55
55
|
dynamic: [colors.grey900]
|
|
56
|
-
}, [".root.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:".concat(colors.grey900, ";font-size:14px;line-height:16px;}"), ".root-input.__jsx-style-dynamic-selector{overflow-y:auto;-webkit-flex:1;-ms-flex:1;flex:1;}", ".root-right.__jsx-style-dynamic-selector{margin-
|
|
56
|
+
}, [".root.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:".concat(colors.grey900, ";font-size:14px;line-height:16px;}"), ".root-input.__jsx-style-dynamic-selector{overflow-y:auto;-webkit-flex:1;-ms-flex:1;flex:1;}", ".root-right.__jsx-style-dynamic-selector{margin-inline-start:auto;margin-inline-end:10px;}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
57
57
|
id: "1331770409",
|
|
58
58
|
dynamic: [inputMaxHeight]
|
|
59
59
|
}, [".root-input.__jsx-style-dynamic-selector{max-height:".concat(inputMaxHeight, ";}")]));
|
|
@@ -30,13 +30,13 @@ const Selection = _ref => {
|
|
|
30
30
|
|
|
31
31
|
const label = selectedOption ? selectedOption.props.label : selected;
|
|
32
32
|
return /*#__PURE__*/React.createElement("div", {
|
|
33
|
-
className: _JSXStyle.dynamic([["
|
|
33
|
+
className: _JSXStyle.dynamic([["1914911415", [spacers.dp8, spacers.dp16, spacers.dp16]]]) + " " + (cx(className, 'root') || "")
|
|
34
34
|
}, icon && /*#__PURE__*/React.createElement("div", {
|
|
35
|
-
className: _JSXStyle.dynamic([["
|
|
35
|
+
className: _JSXStyle.dynamic([["1914911415", [spacers.dp8, spacers.dp16, spacers.dp16]]]) + " " + "root-icon"
|
|
36
36
|
}, icon), label, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
37
|
-
id: "
|
|
37
|
+
id: "1914911415",
|
|
38
38
|
dynamic: [spacers.dp8, spacers.dp16, spacers.dp16]
|
|
39
|
-
}, [".root.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".root-icon.__jsx-style-dynamic-selector{margin-
|
|
39
|
+
}, [".root.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".root-icon.__jsx-style-dynamic-selector{margin-inline-end:".concat(spacers.dp8, ";width:").concat(spacers.dp16, ";height:").concat(spacers.dp16, ";overflow:hidden;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}")]));
|
|
40
40
|
};
|
|
41
41
|
|
|
42
42
|
Selection.propTypes = {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _JSXStyle from "styled-jsx/style";
|
|
2
2
|
import { sharedPropTypes } from '@dhis2/ui-constants';
|
|
3
3
|
import PropTypes from 'prop-types';
|
|
4
|
-
import React from 'react';
|
|
4
|
+
import React, { useEffect } from 'react';
|
|
5
5
|
import { SingleSelectOption } from '../index.js';
|
|
6
6
|
import { SingleSelect } from './index.js';
|
|
7
7
|
const description = "\nUse a select component wherever the user needs to make a selection of one or more options from a list of 6 or more options. If there are less than 6 options to choose from and space permits, use checkboxes for multiple selection and radio buttons for single selection. If the user needs to make a complex selection with a specific ordering, use a transfer instead.\n\nLearn more about using Selects at [Design System: Select](https://github.com/dhis2/design-system/blob/master/molecules/select.md).\n\n```js\nimport { SingleSelect, SingleSelectOption } from '@dhis2/ui'\n```\n\n_**Note:** Due to demo limitations on this page, only one representative example is rendered here. For more (interactive) examples, see individual stories in the 'Canvas' tab._\n";
|
|
@@ -277,6 +277,32 @@ export const WithPrefixAndSelection = WithOptionsTemplate.bind({});
|
|
|
277
277
|
WithPrefixAndSelection.args = { ...WithPrefix.args,
|
|
278
278
|
...WithOptionsAndASelection.args
|
|
279
279
|
};
|
|
280
|
+
export const WithRTL = args => {
|
|
281
|
+
// as options are rendered in Portal, the body dir (of the iframe) needs to be set to 'rtl'
|
|
282
|
+
useEffect(() => {
|
|
283
|
+
document.body.dir = 'rtl';
|
|
284
|
+
return () => {
|
|
285
|
+
document.body.dir = 'ltr';
|
|
286
|
+
};
|
|
287
|
+
}, []);
|
|
288
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
289
|
+
dir: "rtl"
|
|
290
|
+
}, /*#__PURE__*/React.createElement(SingleSelect, args, /*#__PURE__*/React.createElement(SingleSelectOption, {
|
|
291
|
+
value: "1",
|
|
292
|
+
label: "\u0627\u0644\u062E\u064A\u0627\u0631 1"
|
|
293
|
+
}), /*#__PURE__*/React.createElement(SingleSelectOption, {
|
|
294
|
+
value: "2",
|
|
295
|
+
label: "\u0627\u0644\u062E\u064A\u0627\u0631 2"
|
|
296
|
+
}), /*#__PURE__*/React.createElement(SingleSelectOption, {
|
|
297
|
+
value: "3",
|
|
298
|
+
label: "\u0627\u0644\u062E\u064A\u0627\u0631 3"
|
|
299
|
+
})));
|
|
300
|
+
};
|
|
301
|
+
WithRTL.args = {
|
|
302
|
+
prefix: 'نص البادئة',
|
|
303
|
+
...WithOptionsAndASelection.args
|
|
304
|
+
};
|
|
305
|
+
WithRTL.storyName = 'RTL Text';
|
|
280
306
|
export const WithPlaceholder = WithOptionsTemplate.bind({});
|
|
281
307
|
WithPlaceholder.args = {
|
|
282
308
|
placeholder: 'Placeholder text'
|
|
@@ -19,14 +19,14 @@ const SingleSelectOption = _ref => {
|
|
|
19
19
|
"data-test": dataTest,
|
|
20
20
|
"data-value": value,
|
|
21
21
|
"data-label": label,
|
|
22
|
-
className: _JSXStyle.dynamic([["
|
|
22
|
+
className: _JSXStyle.dynamic([["3808134379", [colors.grey900, spacers.dp8, spacers.dp12, colors.grey200, colors.teal700, colors.white, colors.grey500]]]) + " " + (cx(className, {
|
|
23
23
|
disabled,
|
|
24
24
|
active
|
|
25
25
|
}) || "")
|
|
26
26
|
}, label, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
27
|
-
id: "
|
|
27
|
+
id: "3808134379",
|
|
28
28
|
dynamic: [colors.grey900, spacers.dp8, spacers.dp12, colors.grey200, colors.teal700, colors.white, colors.grey500]
|
|
29
|
-
}, ["div.__jsx-style-dynamic-selector{cursor:pointer;font-size:14px;-webkit-text-decoration:none;text-decoration:none;color:".concat(colors.grey900, ";padding:").concat(spacers.dp8, "
|
|
29
|
+
}, ["div.__jsx-style-dynamic-selector{cursor:pointer;font-size:14px;-webkit-text-decoration:none;text-decoration:none;color:".concat(colors.grey900, ";padding-block:").concat(spacers.dp8, ";padding-inline:").concat(spacers.dp12, ";}"), "div.__jsx-style-dynamic-selector:hover{background-color:".concat(colors.grey200, ";}"), "div.__jsx-style-dynamic-selector:active,div.active.__jsx-style-dynamic-selector{background-color:".concat(colors.teal700, ";color:").concat(colors.white, ";cursor:auto;}"), "div.disabled.__jsx-style-dynamic-selector{color:".concat(colors.grey500, ";cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"), "div.disabled.__jsx-style-dynamic-selector:hover{background-color:initial;}"]));
|
|
30
30
|
};
|
|
31
31
|
|
|
32
32
|
SingleSelectOption.defaultProps = {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/select",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.14.0",
|
|
4
4
|
"description": "UI Select",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -33,19 +33,19 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@dhis2/prop-types": "^3.1.2",
|
|
36
|
-
"@dhis2-ui/box": "8.
|
|
37
|
-
"@dhis2-ui/button": "8.
|
|
38
|
-
"@dhis2-ui/card": "8.
|
|
39
|
-
"@dhis2-ui/checkbox": "8.
|
|
40
|
-
"@dhis2-ui/chip": "8.
|
|
41
|
-
"@dhis2-ui/field": "8.
|
|
42
|
-
"@dhis2-ui/input": "8.
|
|
43
|
-
"@dhis2-ui/layer": "8.
|
|
44
|
-
"@dhis2-ui/loader": "8.
|
|
45
|
-
"@dhis2-ui/popper": "8.
|
|
46
|
-
"@dhis2-ui/status-icon": "8.
|
|
47
|
-
"@dhis2/ui-constants": "8.
|
|
48
|
-
"@dhis2/ui-icons": "8.
|
|
36
|
+
"@dhis2-ui/box": "8.14.0",
|
|
37
|
+
"@dhis2-ui/button": "8.14.0",
|
|
38
|
+
"@dhis2-ui/card": "8.14.0",
|
|
39
|
+
"@dhis2-ui/checkbox": "8.14.0",
|
|
40
|
+
"@dhis2-ui/chip": "8.14.0",
|
|
41
|
+
"@dhis2-ui/field": "8.14.0",
|
|
42
|
+
"@dhis2-ui/input": "8.14.0",
|
|
43
|
+
"@dhis2-ui/layer": "8.14.0",
|
|
44
|
+
"@dhis2-ui/loader": "8.14.0",
|
|
45
|
+
"@dhis2-ui/popper": "8.14.0",
|
|
46
|
+
"@dhis2-ui/status-icon": "8.14.0",
|
|
47
|
+
"@dhis2/ui-constants": "8.14.0",
|
|
48
|
+
"@dhis2/ui-icons": "8.14.0",
|
|
49
49
|
"classnames": "^2.3.1",
|
|
50
50
|
"prop-types": "^15.7.2"
|
|
51
51
|
},
|