@dhis2-ui/selector-bar 8.6.4 → 8.7.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.
Files changed (11) hide show
  1. package/build/cjs/selector-bar/__stories__/keep-org-unit-expanded.js +4 -1
  2. package/build/cjs/selector-bar/__stories__/with-right-hand-side-content.js +8 -2
  3. package/build/cjs/selector-bar/__stories__/with-some-inputs.js +16 -3
  4. package/build/cjs/selector-bar/selector-bar.test.js +22 -0
  5. package/build/cjs/selector-bar-item/selector-bar-item.js +39 -18
  6. package/build/es/selector-bar/__stories__/keep-org-unit-expanded.js +4 -1
  7. package/build/es/selector-bar/__stories__/with-right-hand-side-content.js +8 -2
  8. package/build/es/selector-bar/__stories__/with-some-inputs.js +16 -3
  9. package/build/es/selector-bar/selector-bar.test.js +18 -0
  10. package/build/es/selector-bar-item/selector-bar-item.js +39 -18
  11. package/package.json +11 -11
package/build/cjs/selector-bar/__stories__/keep-org-unit-expanded.js CHANGED
@@ -48,7 +48,10 @@ const KeepOrgUnitExpanded = (_, _ref) => {
48
48
  value: orgUnit === null || orgUnit === void 0 ? void 0 : orgUnit.displayName,
49
49
  noValueMessage: "Choose an organisation unit",
50
50
  open: orgUnitOpen,
51
- setOpen: setOrgUnitOpen
51
+ setOpen: setOrgUnitOpen,
52
+ onClearSelectionClick: () => {
53
+ setOrgUnit(null);
54
+ }
52
55
  }, /*#__PURE__*/_react.default.createElement("div", {
53
56
  style: {
54
57
  width: 400,
package/build/cjs/selector-bar/__stories__/with-right-hand-side-content.js CHANGED
@@ -49,7 +49,10 @@ const WithAdditionalContent = (_, _ref) => {
49
49
  value: workflow === null || workflow === void 0 ? void 0 : workflow.label,
50
50
  noValueMessage: "Choose a workflow",
51
51
  open: workflowOpen,
52
- setOpen: setWorkflowOpen
52
+ setOpen: setWorkflowOpen,
53
+ onClearSelectionClick: () => {
54
+ setWorkflow(null);
55
+ }
53
56
  }, /*#__PURE__*/_react.default.createElement(_common.MenuSelect, {
54
57
  values: _common.workflows,
55
58
  selected: workflow === null || workflow === void 0 ? void 0 : workflow.value,
@@ -66,7 +69,10 @@ const WithAdditionalContent = (_, _ref) => {
66
69
  value: orgUnit === null || orgUnit === void 0 ? void 0 : orgUnit.displayName,
67
70
  noValueMessage: "Choose an organisation unit",
68
71
  open: orgUnitOpen,
69
- setOpen: setOrgUnitOpen
72
+ setOpen: setOrgUnitOpen,
73
+ onClearSelectionClick: () => {
74
+ setOrgUnit(null);
75
+ }
70
76
  }, /*#__PURE__*/_react.default.createElement(_common.OrgUnitSelect, {
71
77
  selected: orgUnit ? [orgUnit.path] : [],
72
78
  onChange: (nextOrgUnit, evt) => {
package/build/cjs/selector-bar/__stories__/with-some-inputs.js CHANGED
@@ -36,7 +36,10 @@ const WithSomeInputs = (_, _ref) => {
36
36
  value: workflow === null || workflow === void 0 ? void 0 : workflow.label,
37
37
  noValueMessage: "Choose a workflow",
38
38
  open: workflowOpen,
39
- setOpen: setWorkflowOpen
39
+ setOpen: setWorkflowOpen,
40
+ onClearSelectionClick: () => {
41
+ setWorkflow(null);
42
+ }
40
43
  }, /*#__PURE__*/_react.default.createElement(_common.MenuSelect, {
41
44
  values: _common.workflows,
42
45
  selected: workflow === null || workflow === void 0 ? void 0 : workflow.value,
@@ -53,7 +56,10 @@ const WithSomeInputs = (_, _ref) => {
53
56
  value: orgUnit === null || orgUnit === void 0 ? void 0 : orgUnit.displayName,
54
57
  noValueMessage: "Choose an organisation unit",
55
58
  open: orgUnitOpen,
56
- setOpen: setOrgUnitOpen
59
+ setOpen: setOrgUnitOpen,
60
+ onClearSelectionClick: () => {
61
+ setOrgUnit(null);
62
+ }
57
63
  }, /*#__PURE__*/_react.default.createElement(_common.OrgUnitSelect, {
58
64
  selected: orgUnit ? [orgUnit.path] : [],
59
65
  onChange: (nextOrgUnit, evt) => {
@@ -61,7 +67,14 @@ const WithSomeInputs = (_, _ref) => {
61
67
  setOrgUnit(nextOrgUnit);
62
68
  setOrgUnitOpen(false);
63
69
  }
64
- })));
70
+ })), /*#__PURE__*/_react.default.createElement(_index.SelectorBarItem, {
71
+ displayOnly: true,
72
+ label: "Person",
73
+ value: "John doe",
74
+ onClearSelectionClick: () => {
75
+ alert('This selection would be cleared');
76
+ }
77
+ }));
65
78
  };
66
79
 
67
80
  exports.WithSomeInputs = WithSomeInputs;
package/build/cjs/selector-bar/selector-bar.test.js CHANGED
@@ -75,4 +75,26 @@ describe('SelectorBar', () => {
75
75
 
76
76
  expect(extraContent).not.toBeNull();
77
77
  });
78
+ it('should render the displayOnly value', () => {
79
+ (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_selectorBar.SelectorBar, null, /*#__PURE__*/_react2.default.createElement(_index.SelectorBarItem, {
80
+ displayOnly: true,
81
+ label: "Person",
82
+ value: "John doe"
83
+ })));
84
+
85
+ const value = _react.screen.getByText('John doe');
86
+
87
+ expect(value).not.toBeNull();
88
+ });
89
+ it('should render the cross icon', () => {
90
+ (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_selectorBar.SelectorBar, null, /*#__PURE__*/_react2.default.createElement(_index.SelectorBarItem, {
91
+ label: "label",
92
+ value: "selected value",
93
+ onClearSelectionClick: noop
94
+ })));
95
+
96
+ const clearIcon = _react.screen.getByTestId('dhis2-ui-selectorbaritem-clear-icon');
97
+
98
+ expect(clearIcon).not.toBeNull();
99
+ });
78
100
  });
package/build/cjs/selector-bar-item/selector-bar-item.js CHANGED
@@ -52,33 +52,52 @@ const SelectorBarItem = _ref => {
52
52
  className,
53
53
  dataTest,
54
54
  disabled,
55
+ displayOnly,
55
56
  label,
56
57
  noValueMessage,
57
58
  open,
58
59
  setOpen,
59
- value
60
+ value,
61
+ onClearSelectionClick
60
62
  } = _ref;
61
63
  const buttonRef = (0, _react.useRef)();
62
64
  const Icon = open ? _uiIcons.IconChevronUp24 : _uiIcons.IconChevronDown24;
63
65
  return /*#__PURE__*/_react.default.createElement("button", {
64
66
  ref: buttonRef,
65
67
  disabled: disabled,
66
- onClick: () => setOpen(true),
68
+ onClick: () => setOpen && setOpen(true),
67
69
  "data-test": dataTest,
68
- className: _style.default.dynamic([["3065814091", [
70
+ className: _style.default.dynamic([["1019748909", [
69
71
  /*
70
72
  * The arrow icon has ~4px empty space on the sides,
71
73
  * that's why the padding on the right is only 8px.
72
74
  */
73
- '', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4]]]) + " " + ((0, _classnames.default)('selector-bar-item', className) || "")
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' : '') || "")
74
76
  }, /*#__PURE__*/_react.default.createElement("span", {
75
- className: _style.default.dynamic([["3065814091", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4]]]) + " " + "label"
76
- }, label), !disabled && /*#__PURE__*/_react.default.createElement("span", {
77
- className: _style.default.dynamic([["3065814091", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4]]]) + " " + "value"
78
- }, value || noValueMessage), /*#__PURE__*/_react.default.createElement("span", {
79
- className: _style.default.dynamic([["3065814091", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4]]]) + " " + "toggle-icon"
77
+ className: _style.default.dynamic([["1019748909", ['', _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
+ }, label), !disabled && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
79
+ className: _style.default.dynamic([["1019748909", ['', _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
+ }, value || noValueMessage), value && onClearSelectionClick && /*#__PURE__*/_react.default.createElement("span", {
81
+ onClick: evt => {
82
+ evt.stopPropagation();
83
+ onClearSelectionClick();
84
+ },
85
+ "data-test": "".concat(dataTest, "-clear-icon"),
86
+ className: _style.default.dynamic([["1019748909", ['', _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
+ }, /*#__PURE__*/_react.default.createElement("svg", {
88
+ width: "14",
89
+ height: "14",
90
+ viewBox: "0 0 14 14",
91
+ fill: "none",
92
+ xmlns: "http://www.w3.org/2000/svg",
93
+ className: _style.default.dynamic([["1019748909", ['', _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
+ }, /*#__PURE__*/_react.default.createElement("path", {
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",
96
+ className: _style.default.dynamic([["1019748909", ['', _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
+ })))), !displayOnly && /*#__PURE__*/_react.default.createElement("span", {
98
+ className: _style.default.dynamic([["1019748909", ['', _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"
80
99
  }, /*#__PURE__*/_react.default.createElement(Icon, {
81
- className: _style.default.dynamic([["3065814091", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4]]])
100
+ className: _style.default.dynamic([["1019748909", ['', _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]]])
82
101
  })), open && /*#__PURE__*/_react.default.createElement(_layer.Layer, {
83
102
  onBackdropClick: (_, evt) => {
84
103
  evt.stopPropagation();
@@ -89,9 +108,9 @@ const SelectorBarItem = _ref => {
89
108
  placement: "bottom-start",
90
109
  modifiers: [offsetModifier]
91
110
  }, /*#__PURE__*/_react.default.createElement(_card.Card, null, children))), /*#__PURE__*/_react.default.createElement(_style.default, {
92
- id: "3065814091",
93
- dynamic: ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4]
94
- }, [".selector-bar-item.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;background:none;height:40px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;".concat(" padding:0 ", _uiConstants.spacers.dp8, " 0 ").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.__jsx-style-dynamic-selector:disabled{cursor:not-allowed;}", ".label.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey600, ";}"), ".value.__jsx-style-dynamic-selector{padding-left:".concat(_uiConstants.spacers.dp8, ";}"), ".toggle-icon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:".concat(_uiConstants.spacers.dp4, ";height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}")]));
111
+ id: "1019748909",
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]
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:0 ", _uiConstants.spacers.dp8, " 0 ").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-left:".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-left:".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-left:".concat(_uiConstants.spacers.dp4, ";height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}")]));
95
114
  };
96
115
 
97
116
  exports.SelectorBarItem = SelectorBarItem;
@@ -99,13 +118,15 @@ SelectorBarItem.defaultProps = {
99
118
  dataTest: 'dhis2-ui-selectorbaritem'
100
119
  };
101
120
  SelectorBarItem.propTypes = {
102
- children: _propTypes.default.any.isRequired,
103
121
  label: _propTypes.default.string.isRequired,
104
- noValueMessage: _propTypes.default.string.isRequired,
105
- open: _propTypes.default.bool.isRequired,
106
- setOpen: _propTypes.default.func.isRequired,
122
+ children: _propTypes.default.any,
107
123
  className: _propTypes.default.string,
108
124
  dataTest: _propTypes.default.string,
109
125
  disabled: _propTypes.default.bool,
110
- value: _propTypes.default.string
126
+ displayOnly: _propTypes.default.bool,
127
+ noValueMessage: _propTypes.default.string,
128
+ open: _propTypes.default.bool,
129
+ setOpen: _propTypes.default.func,
130
+ value: _propTypes.default.string,
131
+ onClearSelectionClick: _propTypes.default.func
111
132
  };
package/build/es/selector-bar/__stories__/keep-org-unit-expanded.js CHANGED
@@ -33,7 +33,10 @@ export const KeepOrgUnitExpanded = (_, _ref) => {
33
33
  value: orgUnit === null || orgUnit === void 0 ? void 0 : orgUnit.displayName,
34
34
  noValueMessage: "Choose an organisation unit",
35
35
  open: orgUnitOpen,
36
- setOpen: setOrgUnitOpen
36
+ setOpen: setOrgUnitOpen,
37
+ onClearSelectionClick: () => {
38
+ setOrgUnit(null);
39
+ }
37
40
  }, /*#__PURE__*/React.createElement("div", {
38
41
  style: {
39
42
  width: 400,
package/build/es/selector-bar/__stories__/with-right-hand-side-content.js CHANGED
@@ -36,7 +36,10 @@ export const WithAdditionalContent = (_, _ref) => {
36
36
  value: workflow === null || workflow === void 0 ? void 0 : workflow.label,
37
37
  noValueMessage: "Choose a workflow",
38
38
  open: workflowOpen,
39
- setOpen: setWorkflowOpen
39
+ setOpen: setWorkflowOpen,
40
+ onClearSelectionClick: () => {
41
+ setWorkflow(null);
42
+ }
40
43
  }, /*#__PURE__*/React.createElement(MenuSelect, {
41
44
  values: workflows,
42
45
  selected: workflow === null || workflow === void 0 ? void 0 : workflow.value,
@@ -53,7 +56,10 @@ export const WithAdditionalContent = (_, _ref) => {
53
56
  value: orgUnit === null || orgUnit === void 0 ? void 0 : orgUnit.displayName,
54
57
  noValueMessage: "Choose an organisation unit",
55
58
  open: orgUnitOpen,
56
- setOpen: setOrgUnitOpen
59
+ setOpen: setOrgUnitOpen,
60
+ onClearSelectionClick: () => {
61
+ setOrgUnit(null);
62
+ }
57
63
  }, /*#__PURE__*/React.createElement(OrgUnitSelect, {
58
64
  selected: orgUnit ? [orgUnit.path] : [],
59
65
  onChange: (nextOrgUnit, evt) => {
package/build/es/selector-bar/__stories__/with-some-inputs.js CHANGED
@@ -24,7 +24,10 @@ export const WithSomeInputs = (_, _ref) => {
24
24
  value: workflow === null || workflow === void 0 ? void 0 : workflow.label,
25
25
  noValueMessage: "Choose a workflow",
26
26
  open: workflowOpen,
27
- setOpen: setWorkflowOpen
27
+ setOpen: setWorkflowOpen,
28
+ onClearSelectionClick: () => {
29
+ setWorkflow(null);
30
+ }
28
31
  }, /*#__PURE__*/React.createElement(MenuSelect, {
29
32
  values: workflows,
30
33
  selected: workflow === null || workflow === void 0 ? void 0 : workflow.value,
@@ -41,7 +44,10 @@ export const WithSomeInputs = (_, _ref) => {
41
44
  value: orgUnit === null || orgUnit === void 0 ? void 0 : orgUnit.displayName,
42
45
  noValueMessage: "Choose an organisation unit",
43
46
  open: orgUnitOpen,
44
- setOpen: setOrgUnitOpen
47
+ setOpen: setOrgUnitOpen,
48
+ onClearSelectionClick: () => {
49
+ setOrgUnit(null);
50
+ }
45
51
  }, /*#__PURE__*/React.createElement(OrgUnitSelect, {
46
52
  selected: orgUnit ? [orgUnit.path] : [],
47
53
  onChange: (nextOrgUnit, evt) => {
@@ -49,7 +55,14 @@ export const WithSomeInputs = (_, _ref) => {
49
55
  setOrgUnit(nextOrgUnit);
50
56
  setOrgUnitOpen(false);
51
57
  }
52
- })));
58
+ })), /*#__PURE__*/React.createElement(SelectorBarItem, {
59
+ displayOnly: true,
60
+ label: "Person",
61
+ value: "John doe",
62
+ onClearSelectionClick: () => {
63
+ alert('This selection would be cleared');
64
+ }
65
+ }));
53
66
  };
54
67
  WithSomeInputs.decorators = [decoratorCommonStyles, createStatefulDecorator({
55
68
  workflow: workflows[0]
package/build/es/selector-bar/selector-bar.test.js CHANGED
@@ -61,4 +61,22 @@ describe('SelectorBar', () => {
61
61
  const extraContent = screen.getByText('Foobar');
62
62
  expect(extraContent).not.toBeNull();
63
63
  });
64
+ it('should render the displayOnly value', () => {
65
+ render( /*#__PURE__*/React.createElement(SelectorBar, null, /*#__PURE__*/React.createElement(SelectorBarItem, {
66
+ displayOnly: true,
67
+ label: "Person",
68
+ value: "John doe"
69
+ })));
70
+ const value = screen.getByText('John doe');
71
+ expect(value).not.toBeNull();
72
+ });
73
+ it('should render the cross icon', () => {
74
+ render( /*#__PURE__*/React.createElement(SelectorBar, null, /*#__PURE__*/React.createElement(SelectorBarItem, {
75
+ label: "label",
76
+ value: "selected value",
77
+ onClearSelectionClick: noop
78
+ })));
79
+ const clearIcon = screen.getByTestId('dhis2-ui-selectorbaritem-clear-icon');
80
+ expect(clearIcon).not.toBeNull();
81
+ });
64
82
  });
package/build/es/selector-bar-item/selector-bar-item.js CHANGED
@@ -30,33 +30,52 @@ export const SelectorBarItem = _ref => {
30
30
  className,
31
31
  dataTest,
32
32
  disabled,
33
+ displayOnly,
33
34
  label,
34
35
  noValueMessage,
35
36
  open,
36
37
  setOpen,
37
- value
38
+ value,
39
+ onClearSelectionClick
38
40
  } = _ref;
39
41
  const buttonRef = useRef();
40
42
  const Icon = open ? IconChevronUp24 : IconChevronDown24;
41
43
  return /*#__PURE__*/React.createElement("button", {
42
44
  ref: buttonRef,
43
45
  disabled: disabled,
44
- onClick: () => setOpen(true),
46
+ onClick: () => setOpen && setOpen(true),
45
47
  "data-test": dataTest,
46
- className: _JSXStyle.dynamic([["3065814091", [
48
+ className: _JSXStyle.dynamic([["1019748909", [
47
49
  /*
48
50
  * The arrow icon has ~4px empty space on the sides,
49
51
  * that's why the padding on the right is only 8px.
50
52
  */
51
- '', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4]]]) + " " + (cx('selector-bar-item', className) || "")
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' : '') || "")
52
54
  }, /*#__PURE__*/React.createElement("span", {
53
- className: _JSXStyle.dynamic([["3065814091", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4]]]) + " " + "label"
54
- }, label), !disabled && /*#__PURE__*/React.createElement("span", {
55
- className: _JSXStyle.dynamic([["3065814091", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4]]]) + " " + "value"
56
- }, value || noValueMessage), /*#__PURE__*/React.createElement("span", {
57
- className: _JSXStyle.dynamic([["3065814091", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4]]]) + " " + "toggle-icon"
55
+ className: _JSXStyle.dynamic([["1019748909", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]]) + " " + "label"
56
+ }, label), !disabled && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
57
+ className: _JSXStyle.dynamic([["1019748909", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]]) + " " + "value"
58
+ }, value || noValueMessage), value && onClearSelectionClick && /*#__PURE__*/React.createElement("span", {
59
+ onClick: evt => {
60
+ evt.stopPropagation();
61
+ onClearSelectionClick();
62
+ },
63
+ "data-test": "".concat(dataTest, "-clear-icon"),
64
+ className: _JSXStyle.dynamic([["1019748909", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]]) + " " + "clear-icon"
65
+ }, /*#__PURE__*/React.createElement("svg", {
66
+ width: "14",
67
+ height: "14",
68
+ viewBox: "0 0 14 14",
69
+ fill: "none",
70
+ xmlns: "http://www.w3.org/2000/svg",
71
+ className: _JSXStyle.dynamic([["1019748909", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]])
72
+ }, /*#__PURE__*/React.createElement("path", {
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",
74
+ className: _JSXStyle.dynamic([["1019748909", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]])
75
+ })))), !displayOnly && /*#__PURE__*/React.createElement("span", {
76
+ className: _JSXStyle.dynamic([["1019748909", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]]) + " " + "toggle-icon"
58
77
  }, /*#__PURE__*/React.createElement(Icon, {
59
- className: _JSXStyle.dynamic([["3065814091", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4]]])
78
+ className: _JSXStyle.dynamic([["1019748909", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]])
60
79
  })), open && /*#__PURE__*/React.createElement(Layer, {
61
80
  onBackdropClick: (_, evt) => {
62
81
  evt.stopPropagation();
@@ -67,21 +86,23 @@ export const SelectorBarItem = _ref => {
67
86
  placement: "bottom-start",
68
87
  modifiers: [offsetModifier]
69
88
  }, /*#__PURE__*/React.createElement(Card, null, children))), /*#__PURE__*/React.createElement(_JSXStyle, {
70
- id: "3065814091",
71
- dynamic: ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4]
72
- }, [".selector-bar-item.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;background:none;height:40px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;".concat(" padding:0 ", spacers.dp8, " 0 ").concat(spacers.dp12, ";font-size:14px;line-height:16px;border:none;box-shadow:0px 0px 0px 1px ").concat(colors.grey400, ";}"), ".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-left:".concat(spacers.dp8, ";}"), ".toggle-icon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:".concat(spacers.dp4, ";height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}")]));
89
+ id: "1019748909",
90
+ dynamic: ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]
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:0 ", spacers.dp8, " 0 ").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-left:".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-left:".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-left:".concat(spacers.dp4, ";height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}")]));
73
92
  };
74
93
  SelectorBarItem.defaultProps = {
75
94
  dataTest: 'dhis2-ui-selectorbaritem'
76
95
  };
77
96
  SelectorBarItem.propTypes = {
78
- children: PropTypes.any.isRequired,
79
97
  label: PropTypes.string.isRequired,
80
- noValueMessage: PropTypes.string.isRequired,
81
- open: PropTypes.bool.isRequired,
82
- setOpen: PropTypes.func.isRequired,
98
+ children: PropTypes.any,
83
99
  className: PropTypes.string,
84
100
  dataTest: PropTypes.string,
85
101
  disabled: PropTypes.bool,
86
- value: PropTypes.string
102
+ displayOnly: PropTypes.bool,
103
+ noValueMessage: PropTypes.string,
104
+ open: PropTypes.bool,
105
+ setOpen: PropTypes.func,
106
+ value: PropTypes.string,
107
+ onClearSelectionClick: PropTypes.func
87
108
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/selector-bar",
3
- "version": "8.6.4",
3
+ "version": "8.7.0",
4
4
  "description": "UI Select",
5
5
  "repository": {
6
6
  "type": "git",
@@ -32,21 +32,21 @@
32
32
  "styled-jsx": "^4"
33
33
  },
34
34
  "dependencies": {
35
- "@dhis2-ui/button": "8.6.4",
36
- "@dhis2-ui/card": "8.6.4",
37
- "@dhis2-ui/popper": "8.6.4",
38
- "@dhis2-ui/layer": "8.6.4",
39
- "@dhis2/ui-constants": "8.6.4",
40
- "@dhis2/ui-icons": "8.6.4",
35
+ "@dhis2-ui/button": "8.7.0",
36
+ "@dhis2-ui/card": "8.7.0",
37
+ "@dhis2-ui/popper": "8.7.0",
38
+ "@dhis2-ui/layer": "8.7.0",
39
+ "@dhis2/ui-constants": "8.7.0",
40
+ "@dhis2/ui-icons": "8.7.0",
41
41
  "@testing-library/react": "^12.1.2",
42
42
  "classnames": "^2.3.1",
43
43
  "prop-types": "^15.7.2"
44
44
  },
45
45
  "devDependencies": {
46
- "@dhis2-ui/css": "8.6.4",
47
- "@dhis2-ui/menu": "8.6.4",
48
- "@dhis2-ui/organisation-unit-tree": "8.6.4",
49
- "@dhis2-ui/select": "8.6.4",
46
+ "@dhis2-ui/css": "8.7.0",
47
+ "@dhis2-ui/menu": "8.7.0",
48
+ "@dhis2-ui/organisation-unit-tree": "8.7.0",
49
+ "@dhis2-ui/select": "8.7.0",
50
50
  "@dhis2/d2-i18n": "^1.1.0",
51
51
  "@testing-library/jest-dom": "^5.16.1",
52
52
  "react": "16.13",