@dhis2-ui/selector-bar 9.8.3 → 9.9.0-alpha.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/locales/index.js +10 -14
- package/build/cjs/selector-bar/selector-bar.js +7 -53
- package/build/cjs/selector-bar-item/selector-bar-item.js +12 -19
- package/build/es/locales/index.js +0 -2
- package/build/es/selector-bar/selector-bar.js +7 -49
- package/build/es/selector-bar-item/selector-bar-item.js +12 -19
- package/package.json +11 -11
- package/types/index.d.ts +0 -1
- package/build/cjs/locales/ru/translations.json +0 -3
- package/build/es/locales/ru/translations.json +0 -3
|
@@ -23,17 +23,15 @@ var _translations7 = _interopRequireDefault(require("./lo/translations.json"));
|
|
|
23
23
|
|
|
24
24
|
var _translations8 = _interopRequireDefault(require("./nb/translations.json"));
|
|
25
25
|
|
|
26
|
-
var _translations9 = _interopRequireDefault(require("./
|
|
26
|
+
var _translations9 = _interopRequireDefault(require("./uz_UZ_Cyrl/translations.json"));
|
|
27
27
|
|
|
28
|
-
var _translations10 = _interopRequireDefault(require("./
|
|
28
|
+
var _translations10 = _interopRequireDefault(require("./uz_UZ_Latn/translations.json"));
|
|
29
29
|
|
|
30
|
-
var _translations11 = _interopRequireDefault(require("./
|
|
30
|
+
var _translations11 = _interopRequireDefault(require("./vi/translations.json"));
|
|
31
31
|
|
|
32
|
-
var _translations12 = _interopRequireDefault(require("./
|
|
32
|
+
var _translations12 = _interopRequireDefault(require("./zh/translations.json"));
|
|
33
33
|
|
|
34
|
-
var _translations13 = _interopRequireDefault(require("./
|
|
35
|
-
|
|
36
|
-
var _translations14 = _interopRequireDefault(require("./zh_CN/translations.json"));
|
|
34
|
+
var _translations13 = _interopRequireDefault(require("./zh_CN/translations.json"));
|
|
37
35
|
|
|
38
36
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
39
37
|
|
|
@@ -63,17 +61,15 @@ _d2I18n.default.addResources('lo', namespace, _translations7.default);
|
|
|
63
61
|
|
|
64
62
|
_d2I18n.default.addResources('nb', namespace, _translations8.default);
|
|
65
63
|
|
|
66
|
-
_d2I18n.default.addResources('
|
|
67
|
-
|
|
68
|
-
_d2I18n.default.addResources('uz_UZ_Cyrl', namespace, _translations10.default);
|
|
64
|
+
_d2I18n.default.addResources('uz_UZ_Cyrl', namespace, _translations9.default);
|
|
69
65
|
|
|
70
|
-
_d2I18n.default.addResources('uz_UZ_Latn', namespace,
|
|
66
|
+
_d2I18n.default.addResources('uz_UZ_Latn', namespace, _translations10.default);
|
|
71
67
|
|
|
72
|
-
_d2I18n.default.addResources('vi', namespace,
|
|
68
|
+
_d2I18n.default.addResources('vi', namespace, _translations11.default);
|
|
73
69
|
|
|
74
|
-
_d2I18n.default.addResources('zh', namespace,
|
|
70
|
+
_d2I18n.default.addResources('zh', namespace, _translations12.default);
|
|
75
71
|
|
|
76
|
-
_d2I18n.default.addResources('zh_CN', namespace,
|
|
72
|
+
_d2I18n.default.addResources('zh_CN', namespace, _translations13.default);
|
|
77
73
|
|
|
78
74
|
var _default = _d2I18n.default;
|
|
79
75
|
exports.default = _default;
|
|
@@ -15,14 +15,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
15
15
|
|
|
16
16
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
17
17
|
|
|
18
|
-
var _react =
|
|
18
|
+
var _react = _interopRequireDefault(require("react"));
|
|
19
19
|
|
|
20
20
|
var _index = _interopRequireDefault(require("../locales/index.js"));
|
|
21
21
|
|
|
22
|
-
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); }
|
|
23
|
-
|
|
24
|
-
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; }
|
|
25
|
-
|
|
26
22
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
27
23
|
|
|
28
24
|
const ClearSelection = _ref => {
|
|
@@ -55,50 +51,11 @@ const SelectorBar = _ref2 => {
|
|
|
55
51
|
onClearSelectionClick,
|
|
56
52
|
dataTest,
|
|
57
53
|
disableClearSelections,
|
|
58
|
-
additionalContent
|
|
59
|
-
ariaLabel
|
|
54
|
+
additionalContent
|
|
60
55
|
} = _ref2;
|
|
61
|
-
const chipContainer = (0, _react.useRef)(null);
|
|
62
|
-
const childrenRefs = (0, _react.useMemo)(() => _react.default.Children.map(children, () => /*#__PURE__*/_react.default.createRef()), [children]);
|
|
63
|
-
|
|
64
|
-
const handleKeyDown = event => {
|
|
65
|
-
const currentFocus = document.activeElement;
|
|
66
|
-
|
|
67
|
-
if (chipContainer.current && chipContainer.current === currentFocus) {
|
|
68
|
-
if (childrenRefs.length > 0 && childrenRefs[0].current) {
|
|
69
|
-
childrenRefs[0].current.focus();
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
return;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
const currentIndex = childrenRefs.findIndex(ref => ref.current === currentFocus);
|
|
76
|
-
|
|
77
|
-
if (currentIndex === -1) {
|
|
78
|
-
return;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
if (event.key === 'ArrowRight') {
|
|
82
|
-
event.preventDefault();
|
|
83
|
-
const nextIndex = (currentIndex + 1) % childrenRefs.length;
|
|
84
|
-
childrenRefs[nextIndex].current.focus();
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
if (event.key === 'ArrowLeft') {
|
|
88
|
-
event.preventDefault();
|
|
89
|
-
const prevIndex = (currentIndex - 1 + childrenRefs.length) % childrenRefs.length;
|
|
90
|
-
childrenRefs[prevIndex].current.focus();
|
|
91
|
-
}
|
|
92
|
-
};
|
|
93
|
-
|
|
94
56
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
95
57
|
"data-test": dataTest,
|
|
96
|
-
|
|
97
|
-
tabIndex: 0,
|
|
98
|
-
ref: chipContainer,
|
|
99
|
-
role: "toolbar",
|
|
100
|
-
"aria-label": ariaLabel,
|
|
101
|
-
className: _style.default.dynamic([["2030607490", [_uiConstants.colors.white, _uiConstants.colors.grey400,
|
|
58
|
+
className: _style.default.dynamic([["4283810916", [_uiConstants.colors.white, _uiConstants.colors.grey400,
|
|
102
59
|
/*
|
|
103
60
|
* Specs define the space to be 12px.
|
|
104
61
|
* 8px already come from the clear selection component
|
|
@@ -107,16 +64,14 @@ const SelectorBar = _ref2 => {
|
|
|
107
64
|
withRHSContents: additionalContent
|
|
108
65
|
}, className) || "")
|
|
109
66
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
110
|
-
className: _style.default.dynamic([["
|
|
111
|
-
},
|
|
112
|
-
ref: childrenRefs[index]
|
|
113
|
-
})), onClearSelectionClick && /*#__PURE__*/_react.default.createElement(ClearSelection, {
|
|
67
|
+
className: _style.default.dynamic([["4283810916", [_uiConstants.colors.white, _uiConstants.colors.grey400, '']]]) + " " + "controls"
|
|
68
|
+
}, children, onClearSelectionClick && /*#__PURE__*/_react.default.createElement(ClearSelection, {
|
|
114
69
|
disabled: disableClearSelections,
|
|
115
70
|
onClick: onClearSelectionClick
|
|
116
71
|
})), additionalContent && /*#__PURE__*/_react.default.createElement("div", {
|
|
117
|
-
className: _style.default.dynamic([["
|
|
72
|
+
className: _style.default.dynamic([["4283810916", [_uiConstants.colors.white, _uiConstants.colors.grey400, '']]]) + " " + "additional-contents"
|
|
118
73
|
}, additionalContent), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
119
|
-
id: "
|
|
74
|
+
id: "4283810916",
|
|
120
75
|
dynamic: [_uiConstants.colors.white, _uiConstants.colors.grey400, '']
|
|
121
76
|
}, [".container.__jsx-style-dynamic-selector{background:".concat(_uiConstants.colors.white, ";box-shadow:inset 0 -1px 0 0 ").concat(_uiConstants.colors.grey400, ";padding-bottom:1px;}"), ".withRHSContents.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".controls.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;gap:1px;}", ".additional-contents.__jsx-style-dynamic-selector{".concat(" padding-inline-start:4px;}")])));
|
|
122
77
|
};
|
|
@@ -128,7 +83,6 @@ SelectorBar.defaultProps = {
|
|
|
128
83
|
SelectorBar.propTypes = {
|
|
129
84
|
children: _propTypes.default.any.isRequired,
|
|
130
85
|
additionalContent: _propTypes.default.any,
|
|
131
|
-
ariaLabel: _propTypes.default.string,
|
|
132
86
|
className: _propTypes.default.string,
|
|
133
87
|
dataTest: _propTypes.default.string,
|
|
134
88
|
disableClearSelections: _propTypes.default.bool,
|
|
@@ -46,7 +46,7 @@ const offsetModifier = {
|
|
|
46
46
|
* inside this component
|
|
47
47
|
*/
|
|
48
48
|
|
|
49
|
-
const SelectorBarItem =
|
|
49
|
+
const SelectorBarItem = _ref => {
|
|
50
50
|
let {
|
|
51
51
|
children,
|
|
52
52
|
className,
|
|
@@ -60,50 +60,44 @@ const SelectorBarItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
|
60
60
|
value,
|
|
61
61
|
onClearSelectionClick
|
|
62
62
|
} = _ref;
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
if (ref) {
|
|
66
|
-
buttonRef = ref;
|
|
67
|
-
}
|
|
68
|
-
|
|
63
|
+
const buttonRef = (0, _react.useRef)();
|
|
69
64
|
const Icon = open ? _uiIcons.IconChevronUp24 : _uiIcons.IconChevronDown24;
|
|
70
65
|
return /*#__PURE__*/_react.default.createElement("button", {
|
|
71
66
|
ref: buttonRef,
|
|
72
67
|
disabled: disabled,
|
|
73
68
|
onClick: () => setOpen && setOpen(true),
|
|
74
69
|
"data-test": dataTest,
|
|
75
|
-
|
|
76
|
-
className: _style.default.dynamic([["2616571335", [
|
|
70
|
+
className: _style.default.dynamic([["4226485334", [
|
|
77
71
|
/*
|
|
78
72
|
* The arrow icon has ~4px empty space on the sides,
|
|
79
73
|
* that's why the padding on the right is only 8px.
|
|
80
74
|
*/
|
|
81
75
|
'', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]]]) + " " + ((0, _classnames.default)('selector-bar-item', className, !displayOnly ? 'openable' : '') || "")
|
|
82
76
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
83
|
-
className: _style.default.dynamic([["
|
|
77
|
+
className: _style.default.dynamic([["4226485334", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]]]) + " " + "label"
|
|
84
78
|
}, label), !disabled && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
|
|
85
|
-
className: _style.default.dynamic([["
|
|
79
|
+
className: _style.default.dynamic([["4226485334", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]]]) + " " + "value"
|
|
86
80
|
}, value || noValueMessage), value && onClearSelectionClick && /*#__PURE__*/_react.default.createElement("span", {
|
|
87
81
|
onClick: evt => {
|
|
88
82
|
evt.stopPropagation();
|
|
89
83
|
onClearSelectionClick();
|
|
90
84
|
},
|
|
91
85
|
"data-test": "".concat(dataTest, "-clear-icon"),
|
|
92
|
-
className: _style.default.dynamic([["
|
|
86
|
+
className: _style.default.dynamic([["4226485334", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]]]) + " " + "clear-icon"
|
|
93
87
|
}, /*#__PURE__*/_react.default.createElement("svg", {
|
|
94
88
|
width: "14",
|
|
95
89
|
height: "14",
|
|
96
90
|
viewBox: "0 0 14 14",
|
|
97
91
|
fill: "none",
|
|
98
92
|
xmlns: "http://www.w3.org/2000/svg",
|
|
99
|
-
className: _style.default.dynamic([["
|
|
93
|
+
className: _style.default.dynamic([["4226485334", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]]])
|
|
100
94
|
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
101
95
|
d: "M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14ZM4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L7 5.58579L8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289C10.0976 4.68342 10.0976 5.31658 9.70711 5.70711L8.41421 7L9.70711 8.29289C10.0976 8.68342 10.0976 9.31658 9.70711 9.70711C9.31658 10.0976 8.68342 10.0976 8.29289 9.70711L7 8.41421L5.70711 9.70711C5.31658 10.0976 4.68342 10.0976 4.29289 9.70711C3.90237 9.31658 3.90237 8.68342 4.29289 8.29289L5.58579 7L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z",
|
|
102
|
-
className: _style.default.dynamic([["
|
|
96
|
+
className: _style.default.dynamic([["4226485334", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]]])
|
|
103
97
|
})))), !displayOnly && /*#__PURE__*/_react.default.createElement("span", {
|
|
104
|
-
className: _style.default.dynamic([["
|
|
98
|
+
className: _style.default.dynamic([["4226485334", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]]]) + " " + "toggle-icon"
|
|
105
99
|
}, /*#__PURE__*/_react.default.createElement(Icon, {
|
|
106
|
-
className: _style.default.dynamic([["
|
|
100
|
+
className: _style.default.dynamic([["4226485334", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]]])
|
|
107
101
|
})), open && /*#__PURE__*/_react.default.createElement(_layer.Layer, {
|
|
108
102
|
onBackdropClick: (_, evt) => {
|
|
109
103
|
evt.stopPropagation();
|
|
@@ -114,13 +108,12 @@ const SelectorBarItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
|
114
108
|
placement: "bottom-start",
|
|
115
109
|
modifiers: [offsetModifier]
|
|
116
110
|
}, /*#__PURE__*/_react.default.createElement(_card.Card, null, children))), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
117
|
-
id: "
|
|
111
|
+
id: "4226485334",
|
|
118
112
|
dynamic: ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]
|
|
119
113
|
}, [".selector-bar-item.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:none;height:40px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;".concat(" padding-block:0;padding-inline-start:", _uiConstants.spacers.dp8, ";padding-inline-end:").concat(_uiConstants.spacers.dp12, ";font-size:14px;line-height:16px;border:none;box-shadow:0px 0px 0px 1px ").concat(_uiConstants.colors.grey400, ";}"), ".selector-bar-item.openable.__jsx-style-dynamic-selector{cursor:pointer;}", ".selector-bar-item.__jsx-style-dynamic-selector:disabled{cursor:not-allowed;}", ".label.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey600, ";}"), ".value.__jsx-style-dynamic-selector{padding-inline-start:".concat(_uiConstants.spacers.dp8, ";}"), ".clear-icon.__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;margin-inline-start:".concat(_uiConstants.spacers.dp4, ";padding:").concat(_uiConstants.spacers.dp4, ";cursor:pointer;}"), ".clear-icon.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector path.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.grey500, ";}"), ".clear-icon.__jsx-style-dynamic-selector:hover svg.__jsx-style-dynamic-selector path.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.grey700, ";}"), ".toggle-icon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-inline-start:".concat(_uiConstants.spacers.dp4, ";height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}")]));
|
|
120
|
-
}
|
|
114
|
+
};
|
|
121
115
|
|
|
122
116
|
exports.SelectorBarItem = SelectorBarItem;
|
|
123
|
-
SelectorBarItem.displayName = 'SelectorBarItem';
|
|
124
117
|
SelectorBarItem.defaultProps = {
|
|
125
118
|
dataTest: 'dhis2-ui-selectorbaritem'
|
|
126
119
|
};
|
|
@@ -15,7 +15,6 @@ import frTranslations from './fr/translations.json';
|
|
|
15
15
|
import idTranslations from './id/translations.json';
|
|
16
16
|
import loTranslations from './lo/translations.json';
|
|
17
17
|
import nbTranslations from './nb/translations.json';
|
|
18
|
-
import ruTranslations from './ru/translations.json';
|
|
19
18
|
import uz_UZ_CyrlTranslations from './uz_UZ_Cyrl/translations.json';
|
|
20
19
|
import uz_UZ_LatnTranslations from './uz_UZ_Latn/translations.json';
|
|
21
20
|
import viTranslations from './vi/translations.json';
|
|
@@ -30,7 +29,6 @@ i18n.addResources('fr', namespace, frTranslations);
|
|
|
30
29
|
i18n.addResources('id', namespace, idTranslations);
|
|
31
30
|
i18n.addResources('lo', namespace, loTranslations);
|
|
32
31
|
i18n.addResources('nb', namespace, nbTranslations);
|
|
33
|
-
i18n.addResources('ru', namespace, ruTranslations);
|
|
34
32
|
i18n.addResources('uz_UZ_Cyrl', namespace, uz_UZ_CyrlTranslations);
|
|
35
33
|
i18n.addResources('uz_UZ_Latn', namespace, uz_UZ_LatnTranslations);
|
|
36
34
|
i18n.addResources('vi', namespace, viTranslations);
|
|
@@ -3,7 +3,7 @@ import { Button } from '@dhis2-ui/button';
|
|
|
3
3
|
import { colors, spacers } from '@dhis2/ui-constants';
|
|
4
4
|
import cx from 'classnames';
|
|
5
5
|
import PropTypes from 'prop-types';
|
|
6
|
-
import React
|
|
6
|
+
import React from 'react';
|
|
7
7
|
import i18n from '../locales/index.js';
|
|
8
8
|
|
|
9
9
|
const ClearSelection = _ref => {
|
|
@@ -35,50 +35,11 @@ export const SelectorBar = _ref2 => {
|
|
|
35
35
|
onClearSelectionClick,
|
|
36
36
|
dataTest,
|
|
37
37
|
disableClearSelections,
|
|
38
|
-
additionalContent
|
|
39
|
-
ariaLabel
|
|
38
|
+
additionalContent
|
|
40
39
|
} = _ref2;
|
|
41
|
-
const chipContainer = useRef(null);
|
|
42
|
-
const childrenRefs = useMemo(() => React.Children.map(children, () => /*#__PURE__*/React.createRef()), [children]);
|
|
43
|
-
|
|
44
|
-
const handleKeyDown = event => {
|
|
45
|
-
const currentFocus = document.activeElement;
|
|
46
|
-
|
|
47
|
-
if (chipContainer.current && chipContainer.current === currentFocus) {
|
|
48
|
-
if (childrenRefs.length > 0 && childrenRefs[0].current) {
|
|
49
|
-
childrenRefs[0].current.focus();
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
return;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
const currentIndex = childrenRefs.findIndex(ref => ref.current === currentFocus);
|
|
56
|
-
|
|
57
|
-
if (currentIndex === -1) {
|
|
58
|
-
return;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
if (event.key === 'ArrowRight') {
|
|
62
|
-
event.preventDefault();
|
|
63
|
-
const nextIndex = (currentIndex + 1) % childrenRefs.length;
|
|
64
|
-
childrenRefs[nextIndex].current.focus();
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
if (event.key === 'ArrowLeft') {
|
|
68
|
-
event.preventDefault();
|
|
69
|
-
const prevIndex = (currentIndex - 1 + childrenRefs.length) % childrenRefs.length;
|
|
70
|
-
childrenRefs[prevIndex].current.focus();
|
|
71
|
-
}
|
|
72
|
-
};
|
|
73
|
-
|
|
74
40
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
75
41
|
"data-test": dataTest,
|
|
76
|
-
|
|
77
|
-
tabIndex: 0,
|
|
78
|
-
ref: chipContainer,
|
|
79
|
-
role: "toolbar",
|
|
80
|
-
"aria-label": ariaLabel,
|
|
81
|
-
className: _JSXStyle.dynamic([["2030607490", [colors.white, colors.grey400,
|
|
42
|
+
className: _JSXStyle.dynamic([["4283810916", [colors.white, colors.grey400,
|
|
82
43
|
/*
|
|
83
44
|
* Specs define the space to be 12px.
|
|
84
45
|
* 8px already come from the clear selection component
|
|
@@ -87,16 +48,14 @@ export const SelectorBar = _ref2 => {
|
|
|
87
48
|
withRHSContents: additionalContent
|
|
88
49
|
}, className) || "")
|
|
89
50
|
}, /*#__PURE__*/React.createElement("div", {
|
|
90
|
-
className: _JSXStyle.dynamic([["
|
|
91
|
-
},
|
|
92
|
-
ref: childrenRefs[index]
|
|
93
|
-
})), onClearSelectionClick && /*#__PURE__*/React.createElement(ClearSelection, {
|
|
51
|
+
className: _JSXStyle.dynamic([["4283810916", [colors.white, colors.grey400, '']]]) + " " + "controls"
|
|
52
|
+
}, children, onClearSelectionClick && /*#__PURE__*/React.createElement(ClearSelection, {
|
|
94
53
|
disabled: disableClearSelections,
|
|
95
54
|
onClick: onClearSelectionClick
|
|
96
55
|
})), additionalContent && /*#__PURE__*/React.createElement("div", {
|
|
97
|
-
className: _JSXStyle.dynamic([["
|
|
56
|
+
className: _JSXStyle.dynamic([["4283810916", [colors.white, colors.grey400, '']]]) + " " + "additional-contents"
|
|
98
57
|
}, additionalContent), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
99
|
-
id: "
|
|
58
|
+
id: "4283810916",
|
|
100
59
|
dynamic: [colors.white, colors.grey400, '']
|
|
101
60
|
}, [".container.__jsx-style-dynamic-selector{background:".concat(colors.white, ";box-shadow:inset 0 -1px 0 0 ").concat(colors.grey400, ";padding-bottom:1px;}"), ".withRHSContents.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".controls.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;gap:1px;}", ".additional-contents.__jsx-style-dynamic-selector{".concat(" padding-inline-start:4px;}")])));
|
|
102
61
|
};
|
|
@@ -106,7 +65,6 @@ SelectorBar.defaultProps = {
|
|
|
106
65
|
SelectorBar.propTypes = {
|
|
107
66
|
children: PropTypes.any.isRequired,
|
|
108
67
|
additionalContent: PropTypes.any,
|
|
109
|
-
ariaLabel: PropTypes.string,
|
|
110
68
|
className: PropTypes.string,
|
|
111
69
|
dataTest: PropTypes.string,
|
|
112
70
|
disableClearSelections: PropTypes.bool,
|
|
@@ -24,7 +24,7 @@ const offsetModifier = {
|
|
|
24
24
|
* inside this component
|
|
25
25
|
*/
|
|
26
26
|
|
|
27
|
-
export const SelectorBarItem =
|
|
27
|
+
export const SelectorBarItem = _ref => {
|
|
28
28
|
let {
|
|
29
29
|
children,
|
|
30
30
|
className,
|
|
@@ -38,50 +38,44 @@ export const SelectorBarItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
38
38
|
value,
|
|
39
39
|
onClearSelectionClick
|
|
40
40
|
} = _ref;
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
if (ref) {
|
|
44
|
-
buttonRef = ref;
|
|
45
|
-
}
|
|
46
|
-
|
|
41
|
+
const buttonRef = useRef();
|
|
47
42
|
const Icon = open ? IconChevronUp24 : IconChevronDown24;
|
|
48
43
|
return /*#__PURE__*/React.createElement("button", {
|
|
49
44
|
ref: buttonRef,
|
|
50
45
|
disabled: disabled,
|
|
51
46
|
onClick: () => setOpen && setOpen(true),
|
|
52
47
|
"data-test": dataTest,
|
|
53
|
-
|
|
54
|
-
className: _JSXStyle.dynamic([["2616571335", [
|
|
48
|
+
className: _JSXStyle.dynamic([["4226485334", [
|
|
55
49
|
/*
|
|
56
50
|
* The arrow icon has ~4px empty space on the sides,
|
|
57
51
|
* that's why the padding on the right is only 8px.
|
|
58
52
|
*/
|
|
59
53
|
'', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]]) + " " + (cx('selector-bar-item', className, !displayOnly ? 'openable' : '') || "")
|
|
60
54
|
}, /*#__PURE__*/React.createElement("span", {
|
|
61
|
-
className: _JSXStyle.dynamic([["
|
|
55
|
+
className: _JSXStyle.dynamic([["4226485334", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]]) + " " + "label"
|
|
62
56
|
}, label), !disabled && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
|
|
63
|
-
className: _JSXStyle.dynamic([["
|
|
57
|
+
className: _JSXStyle.dynamic([["4226485334", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]]) + " " + "value"
|
|
64
58
|
}, value || noValueMessage), value && onClearSelectionClick && /*#__PURE__*/React.createElement("span", {
|
|
65
59
|
onClick: evt => {
|
|
66
60
|
evt.stopPropagation();
|
|
67
61
|
onClearSelectionClick();
|
|
68
62
|
},
|
|
69
63
|
"data-test": "".concat(dataTest, "-clear-icon"),
|
|
70
|
-
className: _JSXStyle.dynamic([["
|
|
64
|
+
className: _JSXStyle.dynamic([["4226485334", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]]) + " " + "clear-icon"
|
|
71
65
|
}, /*#__PURE__*/React.createElement("svg", {
|
|
72
66
|
width: "14",
|
|
73
67
|
height: "14",
|
|
74
68
|
viewBox: "0 0 14 14",
|
|
75
69
|
fill: "none",
|
|
76
70
|
xmlns: "http://www.w3.org/2000/svg",
|
|
77
|
-
className: _JSXStyle.dynamic([["
|
|
71
|
+
className: _JSXStyle.dynamic([["4226485334", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]])
|
|
78
72
|
}, /*#__PURE__*/React.createElement("path", {
|
|
79
73
|
d: "M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14ZM4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L7 5.58579L8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289C10.0976 4.68342 10.0976 5.31658 9.70711 5.70711L8.41421 7L9.70711 8.29289C10.0976 8.68342 10.0976 9.31658 9.70711 9.70711C9.31658 10.0976 8.68342 10.0976 8.29289 9.70711L7 8.41421L5.70711 9.70711C5.31658 10.0976 4.68342 10.0976 4.29289 9.70711C3.90237 9.31658 3.90237 8.68342 4.29289 8.29289L5.58579 7L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z",
|
|
80
|
-
className: _JSXStyle.dynamic([["
|
|
74
|
+
className: _JSXStyle.dynamic([["4226485334", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]])
|
|
81
75
|
})))), !displayOnly && /*#__PURE__*/React.createElement("span", {
|
|
82
|
-
className: _JSXStyle.dynamic([["
|
|
76
|
+
className: _JSXStyle.dynamic([["4226485334", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]]) + " " + "toggle-icon"
|
|
83
77
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
84
|
-
className: _JSXStyle.dynamic([["
|
|
78
|
+
className: _JSXStyle.dynamic([["4226485334", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]])
|
|
85
79
|
})), open && /*#__PURE__*/React.createElement(Layer, {
|
|
86
80
|
onBackdropClick: (_, evt) => {
|
|
87
81
|
evt.stopPropagation();
|
|
@@ -92,11 +86,10 @@ export const SelectorBarItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
92
86
|
placement: "bottom-start",
|
|
93
87
|
modifiers: [offsetModifier]
|
|
94
88
|
}, /*#__PURE__*/React.createElement(Card, null, children))), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
95
|
-
id: "
|
|
89
|
+
id: "4226485334",
|
|
96
90
|
dynamic: ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]
|
|
97
91
|
}, [".selector-bar-item.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:none;height:40px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;".concat(" padding-block:0;padding-inline-start:", spacers.dp8, ";padding-inline-end:").concat(spacers.dp12, ";font-size:14px;line-height:16px;border:none;box-shadow:0px 0px 0px 1px ").concat(colors.grey400, ";}"), ".selector-bar-item.openable.__jsx-style-dynamic-selector{cursor:pointer;}", ".selector-bar-item.__jsx-style-dynamic-selector:disabled{cursor:not-allowed;}", ".label.__jsx-style-dynamic-selector{color:".concat(colors.grey600, ";}"), ".value.__jsx-style-dynamic-selector{padding-inline-start:".concat(spacers.dp8, ";}"), ".clear-icon.__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;margin-inline-start:".concat(spacers.dp4, ";padding:").concat(spacers.dp4, ";cursor:pointer;}"), ".clear-icon.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector path.__jsx-style-dynamic-selector{fill:".concat(colors.grey500, ";}"), ".clear-icon.__jsx-style-dynamic-selector:hover svg.__jsx-style-dynamic-selector path.__jsx-style-dynamic-selector{fill:".concat(colors.grey700, ";}"), ".toggle-icon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-inline-start:".concat(spacers.dp4, ";height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}")]));
|
|
98
|
-
}
|
|
99
|
-
SelectorBarItem.displayName = 'SelectorBarItem';
|
|
92
|
+
};
|
|
100
93
|
SelectorBarItem.defaultProps = {
|
|
101
94
|
dataTest: 'dhis2-ui-selectorbaritem'
|
|
102
95
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/selector-bar",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.9.0-alpha.1",
|
|
4
4
|
"description": "UI Select",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -33,21 +33,21 @@
|
|
|
33
33
|
"styled-jsx": "^4"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@dhis2-ui/button": "9.
|
|
37
|
-
"@dhis2-ui/card": "9.
|
|
38
|
-
"@dhis2-ui/popper": "9.
|
|
39
|
-
"@dhis2-ui/layer": "9.
|
|
40
|
-
"@dhis2/ui-constants": "9.
|
|
41
|
-
"@dhis2/ui-icons": "9.
|
|
36
|
+
"@dhis2-ui/button": "9.9.0-alpha.1",
|
|
37
|
+
"@dhis2-ui/card": "9.9.0-alpha.1",
|
|
38
|
+
"@dhis2-ui/popper": "9.9.0-alpha.1",
|
|
39
|
+
"@dhis2-ui/layer": "9.9.0-alpha.1",
|
|
40
|
+
"@dhis2/ui-constants": "9.9.0-alpha.1",
|
|
41
|
+
"@dhis2/ui-icons": "9.9.0-alpha.1",
|
|
42
42
|
"@testing-library/react": "^12.1.2",
|
|
43
43
|
"classnames": "^2.3.1",
|
|
44
44
|
"prop-types": "^15.7.2"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@dhis2-ui/css": "9.
|
|
48
|
-
"@dhis2-ui/menu": "9.
|
|
49
|
-
"@dhis2-ui/organisation-unit-tree": "9.
|
|
50
|
-
"@dhis2-ui/select": "9.
|
|
47
|
+
"@dhis2-ui/css": "9.9.0-alpha.1",
|
|
48
|
+
"@dhis2-ui/menu": "9.9.0-alpha.1",
|
|
49
|
+
"@dhis2-ui/organisation-unit-tree": "9.9.0-alpha.1",
|
|
50
|
+
"@dhis2-ui/select": "9.9.0-alpha.1",
|
|
51
51
|
"@dhis2/d2-i18n": "^1.1.0",
|
|
52
52
|
"@testing-library/jest-dom": "^5.16.1",
|
|
53
53
|
"react": "16.13",
|
package/types/index.d.ts
CHANGED