@dhis2-ui/selector-bar 9.5.0 → 9.6.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.
|
@@ -15,10 +15,14 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
15
15
|
|
|
16
16
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
17
17
|
|
|
18
|
-
var _react =
|
|
18
|
+
var _react = _interopRequireWildcard(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
|
+
|
|
22
26
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
27
|
|
|
24
28
|
const ClearSelection = _ref => {
|
|
@@ -51,11 +55,50 @@ const SelectorBar = _ref2 => {
|
|
|
51
55
|
onClearSelectionClick,
|
|
52
56
|
dataTest,
|
|
53
57
|
disableClearSelections,
|
|
54
|
-
additionalContent
|
|
58
|
+
additionalContent,
|
|
59
|
+
ariaLabel
|
|
55
60
|
} = _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
|
+
|
|
56
94
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
57
95
|
"data-test": dataTest,
|
|
58
|
-
|
|
96
|
+
onKeyDown: handleKeyDown,
|
|
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,
|
|
59
102
|
/*
|
|
60
103
|
* Specs define the space to be 12px.
|
|
61
104
|
* 8px already come from the clear selection component
|
|
@@ -64,14 +107,16 @@ const SelectorBar = _ref2 => {
|
|
|
64
107
|
withRHSContents: additionalContent
|
|
65
108
|
}, className) || "")
|
|
66
109
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
67
|
-
className: _style.default.dynamic([["
|
|
68
|
-
}, children,
|
|
110
|
+
className: _style.default.dynamic([["2030607490", [_uiConstants.colors.white, _uiConstants.colors.grey400, '']]]) + " " + "controls"
|
|
111
|
+
}, _react.default.Children.map(children, (child, index) => /*#__PURE__*/_react.default.cloneElement(child, {
|
|
112
|
+
ref: childrenRefs[index]
|
|
113
|
+
})), onClearSelectionClick && /*#__PURE__*/_react.default.createElement(ClearSelection, {
|
|
69
114
|
disabled: disableClearSelections,
|
|
70
115
|
onClick: onClearSelectionClick
|
|
71
116
|
})), additionalContent && /*#__PURE__*/_react.default.createElement("div", {
|
|
72
|
-
className: _style.default.dynamic([["
|
|
117
|
+
className: _style.default.dynamic([["2030607490", [_uiConstants.colors.white, _uiConstants.colors.grey400, '']]]) + " " + "additional-contents"
|
|
73
118
|
}, additionalContent), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
74
|
-
id: "
|
|
119
|
+
id: "2030607490",
|
|
75
120
|
dynamic: [_uiConstants.colors.white, _uiConstants.colors.grey400, '']
|
|
76
121
|
}, [".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;}")])));
|
|
77
122
|
};
|
|
@@ -83,6 +128,7 @@ SelectorBar.defaultProps = {
|
|
|
83
128
|
SelectorBar.propTypes = {
|
|
84
129
|
children: _propTypes.default.any.isRequired,
|
|
85
130
|
additionalContent: _propTypes.default.any,
|
|
131
|
+
ariaLabel: _propTypes.default.string,
|
|
86
132
|
className: _propTypes.default.string,
|
|
87
133
|
dataTest: _propTypes.default.string,
|
|
88
134
|
disableClearSelections: _propTypes.default.bool,
|
|
@@ -46,7 +46,7 @@ const offsetModifier = {
|
|
|
46
46
|
* inside this component
|
|
47
47
|
*/
|
|
48
48
|
|
|
49
|
-
const SelectorBarItem = _ref => {
|
|
49
|
+
const SelectorBarItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
50
50
|
let {
|
|
51
51
|
children,
|
|
52
52
|
className,
|
|
@@ -60,44 +60,50 @@ const SelectorBarItem = _ref => {
|
|
|
60
60
|
value,
|
|
61
61
|
onClearSelectionClick
|
|
62
62
|
} = _ref;
|
|
63
|
-
|
|
63
|
+
let buttonRef = (0, _react.useRef)();
|
|
64
|
+
|
|
65
|
+
if (ref) {
|
|
66
|
+
buttonRef = ref;
|
|
67
|
+
}
|
|
68
|
+
|
|
64
69
|
const Icon = open ? _uiIcons.IconChevronUp24 : _uiIcons.IconChevronDown24;
|
|
65
70
|
return /*#__PURE__*/_react.default.createElement("button", {
|
|
66
71
|
ref: buttonRef,
|
|
67
72
|
disabled: disabled,
|
|
68
73
|
onClick: () => setOpen && setOpen(true),
|
|
69
74
|
"data-test": dataTest,
|
|
70
|
-
|
|
75
|
+
tabIndex: -1,
|
|
76
|
+
className: _style.default.dynamic([["2616571335", [
|
|
71
77
|
/*
|
|
72
78
|
* The arrow icon has ~4px empty space on the sides,
|
|
73
79
|
* that's why the padding on the right is only 8px.
|
|
74
80
|
*/
|
|
75
81
|
'', _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' : '') || "")
|
|
76
82
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
77
|
-
className: _style.default.dynamic([["
|
|
83
|
+
className: _style.default.dynamic([["2616571335", ['', _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"
|
|
78
84
|
}, label), !disabled && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
|
|
79
|
-
className: _style.default.dynamic([["
|
|
85
|
+
className: _style.default.dynamic([["2616571335", ['', _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"
|
|
80
86
|
}, value || noValueMessage), value && onClearSelectionClick && /*#__PURE__*/_react.default.createElement("span", {
|
|
81
87
|
onClick: evt => {
|
|
82
88
|
evt.stopPropagation();
|
|
83
89
|
onClearSelectionClick();
|
|
84
90
|
},
|
|
85
91
|
"data-test": "".concat(dataTest, "-clear-icon"),
|
|
86
|
-
className: _style.default.dynamic([["
|
|
92
|
+
className: _style.default.dynamic([["2616571335", ['', _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"
|
|
87
93
|
}, /*#__PURE__*/_react.default.createElement("svg", {
|
|
88
94
|
width: "14",
|
|
89
95
|
height: "14",
|
|
90
96
|
viewBox: "0 0 14 14",
|
|
91
97
|
fill: "none",
|
|
92
98
|
xmlns: "http://www.w3.org/2000/svg",
|
|
93
|
-
className: _style.default.dynamic([["
|
|
99
|
+
className: _style.default.dynamic([["2616571335", ['', _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]]])
|
|
94
100
|
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
95
101
|
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",
|
|
96
|
-
className: _style.default.dynamic([["
|
|
102
|
+
className: _style.default.dynamic([["2616571335", ['', _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]]])
|
|
97
103
|
})))), !displayOnly && /*#__PURE__*/_react.default.createElement("span", {
|
|
98
|
-
className: _style.default.dynamic([["
|
|
104
|
+
className: _style.default.dynamic([["2616571335", ['', _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"
|
|
99
105
|
}, /*#__PURE__*/_react.default.createElement(Icon, {
|
|
100
|
-
className: _style.default.dynamic([["
|
|
106
|
+
className: _style.default.dynamic([["2616571335", ['', _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]]])
|
|
101
107
|
})), open && /*#__PURE__*/_react.default.createElement(_layer.Layer, {
|
|
102
108
|
onBackdropClick: (_, evt) => {
|
|
103
109
|
evt.stopPropagation();
|
|
@@ -108,12 +114,13 @@ const SelectorBarItem = _ref => {
|
|
|
108
114
|
placement: "bottom-start",
|
|
109
115
|
modifiers: [offsetModifier]
|
|
110
116
|
}, /*#__PURE__*/_react.default.createElement(_card.Card, null, children))), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
111
|
-
id: "
|
|
117
|
+
id: "2616571335",
|
|
112
118
|
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]
|
|
113
119
|
}, [".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;}")]));
|
|
114
|
-
};
|
|
120
|
+
});
|
|
115
121
|
|
|
116
122
|
exports.SelectorBarItem = SelectorBarItem;
|
|
123
|
+
SelectorBarItem.displayName = 'SelectorBarItem';
|
|
117
124
|
SelectorBarItem.defaultProps = {
|
|
118
125
|
dataTest: 'dhis2-ui-selectorbaritem'
|
|
119
126
|
};
|
|
@@ -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 from 'react';
|
|
6
|
+
import React, { useRef, useMemo } from 'react';
|
|
7
7
|
import i18n from '../locales/index.js';
|
|
8
8
|
|
|
9
9
|
const ClearSelection = _ref => {
|
|
@@ -35,11 +35,50 @@ export const SelectorBar = _ref2 => {
|
|
|
35
35
|
onClearSelectionClick,
|
|
36
36
|
dataTest,
|
|
37
37
|
disableClearSelections,
|
|
38
|
-
additionalContent
|
|
38
|
+
additionalContent,
|
|
39
|
+
ariaLabel
|
|
39
40
|
} = _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
|
+
|
|
40
74
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
41
75
|
"data-test": dataTest,
|
|
42
|
-
|
|
76
|
+
onKeyDown: handleKeyDown,
|
|
77
|
+
tabIndex: 0,
|
|
78
|
+
ref: chipContainer,
|
|
79
|
+
role: "toolbar",
|
|
80
|
+
"aria-label": ariaLabel,
|
|
81
|
+
className: _JSXStyle.dynamic([["2030607490", [colors.white, colors.grey400,
|
|
43
82
|
/*
|
|
44
83
|
* Specs define the space to be 12px.
|
|
45
84
|
* 8px already come from the clear selection component
|
|
@@ -48,14 +87,16 @@ export const SelectorBar = _ref2 => {
|
|
|
48
87
|
withRHSContents: additionalContent
|
|
49
88
|
}, className) || "")
|
|
50
89
|
}, /*#__PURE__*/React.createElement("div", {
|
|
51
|
-
className: _JSXStyle.dynamic([["
|
|
52
|
-
}, children,
|
|
90
|
+
className: _JSXStyle.dynamic([["2030607490", [colors.white, colors.grey400, '']]]) + " " + "controls"
|
|
91
|
+
}, React.Children.map(children, (child, index) => /*#__PURE__*/React.cloneElement(child, {
|
|
92
|
+
ref: childrenRefs[index]
|
|
93
|
+
})), onClearSelectionClick && /*#__PURE__*/React.createElement(ClearSelection, {
|
|
53
94
|
disabled: disableClearSelections,
|
|
54
95
|
onClick: onClearSelectionClick
|
|
55
96
|
})), additionalContent && /*#__PURE__*/React.createElement("div", {
|
|
56
|
-
className: _JSXStyle.dynamic([["
|
|
97
|
+
className: _JSXStyle.dynamic([["2030607490", [colors.white, colors.grey400, '']]]) + " " + "additional-contents"
|
|
57
98
|
}, additionalContent), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
58
|
-
id: "
|
|
99
|
+
id: "2030607490",
|
|
59
100
|
dynamic: [colors.white, colors.grey400, '']
|
|
60
101
|
}, [".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;}")])));
|
|
61
102
|
};
|
|
@@ -65,6 +106,7 @@ SelectorBar.defaultProps = {
|
|
|
65
106
|
SelectorBar.propTypes = {
|
|
66
107
|
children: PropTypes.any.isRequired,
|
|
67
108
|
additionalContent: PropTypes.any,
|
|
109
|
+
ariaLabel: PropTypes.string,
|
|
68
110
|
className: PropTypes.string,
|
|
69
111
|
dataTest: PropTypes.string,
|
|
70
112
|
disableClearSelections: PropTypes.bool,
|
|
@@ -24,7 +24,7 @@ const offsetModifier = {
|
|
|
24
24
|
* inside this component
|
|
25
25
|
*/
|
|
26
26
|
|
|
27
|
-
export const SelectorBarItem = _ref => {
|
|
27
|
+
export const SelectorBarItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
28
28
|
let {
|
|
29
29
|
children,
|
|
30
30
|
className,
|
|
@@ -38,44 +38,50 @@ export const SelectorBarItem = _ref => {
|
|
|
38
38
|
value,
|
|
39
39
|
onClearSelectionClick
|
|
40
40
|
} = _ref;
|
|
41
|
-
|
|
41
|
+
let buttonRef = useRef();
|
|
42
|
+
|
|
43
|
+
if (ref) {
|
|
44
|
+
buttonRef = ref;
|
|
45
|
+
}
|
|
46
|
+
|
|
42
47
|
const Icon = open ? IconChevronUp24 : IconChevronDown24;
|
|
43
48
|
return /*#__PURE__*/React.createElement("button", {
|
|
44
49
|
ref: buttonRef,
|
|
45
50
|
disabled: disabled,
|
|
46
51
|
onClick: () => setOpen && setOpen(true),
|
|
47
52
|
"data-test": dataTest,
|
|
48
|
-
|
|
53
|
+
tabIndex: -1,
|
|
54
|
+
className: _JSXStyle.dynamic([["2616571335", [
|
|
49
55
|
/*
|
|
50
56
|
* The arrow icon has ~4px empty space on the sides,
|
|
51
57
|
* that's why the padding on the right is only 8px.
|
|
52
58
|
*/
|
|
53
59
|
'', 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' : '') || "")
|
|
54
60
|
}, /*#__PURE__*/React.createElement("span", {
|
|
55
|
-
className: _JSXStyle.dynamic([["
|
|
61
|
+
className: _JSXStyle.dynamic([["2616571335", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]]) + " " + "label"
|
|
56
62
|
}, label), !disabled && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
|
|
57
|
-
className: _JSXStyle.dynamic([["
|
|
63
|
+
className: _JSXStyle.dynamic([["2616571335", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]]) + " " + "value"
|
|
58
64
|
}, value || noValueMessage), value && onClearSelectionClick && /*#__PURE__*/React.createElement("span", {
|
|
59
65
|
onClick: evt => {
|
|
60
66
|
evt.stopPropagation();
|
|
61
67
|
onClearSelectionClick();
|
|
62
68
|
},
|
|
63
69
|
"data-test": "".concat(dataTest, "-clear-icon"),
|
|
64
|
-
className: _JSXStyle.dynamic([["
|
|
70
|
+
className: _JSXStyle.dynamic([["2616571335", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]]) + " " + "clear-icon"
|
|
65
71
|
}, /*#__PURE__*/React.createElement("svg", {
|
|
66
72
|
width: "14",
|
|
67
73
|
height: "14",
|
|
68
74
|
viewBox: "0 0 14 14",
|
|
69
75
|
fill: "none",
|
|
70
76
|
xmlns: "http://www.w3.org/2000/svg",
|
|
71
|
-
className: _JSXStyle.dynamic([["
|
|
77
|
+
className: _JSXStyle.dynamic([["2616571335", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]])
|
|
72
78
|
}, /*#__PURE__*/React.createElement("path", {
|
|
73
79
|
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",
|
|
74
|
-
className: _JSXStyle.dynamic([["
|
|
80
|
+
className: _JSXStyle.dynamic([["2616571335", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]])
|
|
75
81
|
})))), !displayOnly && /*#__PURE__*/React.createElement("span", {
|
|
76
|
-
className: _JSXStyle.dynamic([["
|
|
82
|
+
className: _JSXStyle.dynamic([["2616571335", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]]) + " " + "toggle-icon"
|
|
77
83
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
78
|
-
className: _JSXStyle.dynamic([["
|
|
84
|
+
className: _JSXStyle.dynamic([["2616571335", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]])
|
|
79
85
|
})), open && /*#__PURE__*/React.createElement(Layer, {
|
|
80
86
|
onBackdropClick: (_, evt) => {
|
|
81
87
|
evt.stopPropagation();
|
|
@@ -86,10 +92,11 @@ export const SelectorBarItem = _ref => {
|
|
|
86
92
|
placement: "bottom-start",
|
|
87
93
|
modifiers: [offsetModifier]
|
|
88
94
|
}, /*#__PURE__*/React.createElement(Card, null, children))), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
89
|
-
id: "
|
|
95
|
+
id: "2616571335",
|
|
90
96
|
dynamic: ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]
|
|
91
97
|
}, [".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;}")]));
|
|
92
|
-
};
|
|
98
|
+
});
|
|
99
|
+
SelectorBarItem.displayName = 'SelectorBarItem';
|
|
93
100
|
SelectorBarItem.defaultProps = {
|
|
94
101
|
dataTest: 'dhis2-ui-selectorbaritem'
|
|
95
102
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/selector-bar",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.6.0",
|
|
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.6.0",
|
|
37
|
+
"@dhis2-ui/card": "9.6.0",
|
|
38
|
+
"@dhis2-ui/popper": "9.6.0",
|
|
39
|
+
"@dhis2-ui/layer": "9.6.0",
|
|
40
|
+
"@dhis2/ui-constants": "9.6.0",
|
|
41
|
+
"@dhis2/ui-icons": "9.6.0",
|
|
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.6.0",
|
|
48
|
+
"@dhis2-ui/menu": "9.6.0",
|
|
49
|
+
"@dhis2-ui/organisation-unit-tree": "9.6.0",
|
|
50
|
+
"@dhis2-ui/select": "9.6.0",
|
|
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