@dhis2-ui/selector-bar 8.1.10 → 8.2.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.
Files changed (19) hide show
  1. package/build/cjs/selector-bar/__stories__/common.js +31 -25
  2. package/build/cjs/selector-bar/__stories__/keep-org-unit-expanded.js +19 -12
  3. package/build/cjs/selector-bar/__stories__/with-multiple-rows.js +23 -20
  4. package/build/cjs/selector-bar/__stories__/with-right-hand-side-content.js +15 -13
  5. package/build/cjs/selector-bar/__stories__/with-some-inputs.js +15 -13
  6. package/build/cjs/selector-bar/selector-bar.js +37 -33
  7. package/build/cjs/selector-bar/selector-bar.stories.js +7 -7
  8. package/build/cjs/selector-bar-item/selector-bar-item.js +13 -12
  9. package/build/cjs/selector-bar-item/selector-bar-item.stories.e2e.js +29 -21
  10. package/build/es/selector-bar/__stories__/common.js +30 -24
  11. package/build/es/selector-bar/__stories__/keep-org-unit-expanded.js +19 -12
  12. package/build/es/selector-bar/__stories__/with-multiple-rows.js +23 -20
  13. package/build/es/selector-bar/__stories__/with-right-hand-side-content.js +15 -13
  14. package/build/es/selector-bar/__stories__/with-some-inputs.js +15 -13
  15. package/build/es/selector-bar/selector-bar.js +37 -33
  16. package/build/es/selector-bar/selector-bar.stories.js +1 -1
  17. package/build/es/selector-bar-item/selector-bar-item.js +13 -12
  18. package/build/es/selector-bar-item/selector-bar-item.stories.e2e.js +28 -20
  19. package/package.json +11 -11
package/build/cjs/selector-bar/__stories__/common.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.OrgUnitSelect = exports.MenuSelect = exports.dataSets = exports.workflows = exports.createStatefulDecorator = exports.createDecoratorCustomDataProvider = exports.dataProviderData = exports.getOrganisationUnitData = exports.decoratorCommonStyles = void 0;
6
+ exports.workflows = exports.getOrganisationUnitData = exports.decoratorCommonStyles = exports.dataSets = exports.dataProviderData = exports.createStatefulDecorator = exports.createDecoratorCustomDataProvider = exports.OrgUnitSelect = exports.MenuSelect = void 0;
7
7
 
8
8
  var _style = _interopRequireDefault(require("styled-jsx/style"));
9
9
 
@@ -26,7 +26,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
26
26
  const decoratorCommonStyles = fn => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, fn(), /*#__PURE__*/_react.default.createElement(_style.default, {
27
27
  id: "3746816729",
28
28
  dynamic: [_uiConstants.colors.grey100]
29
- }, [`body{background:${_uiConstants.colors.grey100};padding:0 !important;}`, "div#root{padding:0;}"]));
29
+ }, ["body{background:".concat(_uiConstants.colors.grey100, ";padding:0 !important;}"), "div#root{padding:0;}"]));
30
30
 
31
31
  exports.decoratorCommonStyles = decoratorCommonStyles;
32
32
 
@@ -135,9 +135,10 @@ const getOrganisationUnitData = id => {
135
135
 
136
136
  exports.getOrganisationUnitData = getOrganisationUnitData;
137
137
  const dataProviderData = {
138
- organisationUnits: (_, {
139
- id
140
- }) => {
138
+ organisationUnits: (_, _ref) => {
139
+ let {
140
+ id
141
+ } = _ref;
141
142
  const data = getOrganisationUnitData(id);
142
143
 
143
144
  if (!data) {
@@ -207,34 +208,39 @@ const dataSets = [{
207
208
  }];
208
209
  exports.dataSets = dataSets;
209
210
 
210
- const MenuSelect = ({
211
- values,
212
- selected,
213
- onChange
214
- }) => {
211
+ const MenuSelect = _ref2 => {
212
+ let {
213
+ values,
214
+ selected,
215
+ onChange
216
+ } = _ref2;
215
217
  return /*#__PURE__*/_react.default.createElement("div", {
216
218
  style: {
217
219
  width: 400
218
220
  }
219
- }, /*#__PURE__*/_react.default.createElement(_menu.Menu, null, values.map(({
220
- value,
221
- label
222
- }) => /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
223
- key: value,
224
- label: label,
225
- active: selected === value,
226
- onClick: () => onChange({
227
- selected: value
228
- })
229
- }))));
221
+ }, /*#__PURE__*/_react.default.createElement(_menu.Menu, null, values.map(_ref3 => {
222
+ let {
223
+ value,
224
+ label
225
+ } = _ref3;
226
+ return /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
227
+ key: value,
228
+ label: label,
229
+ active: selected === value,
230
+ onClick: () => onChange({
231
+ selected: value
232
+ })
233
+ });
234
+ })));
230
235
  };
231
236
 
232
237
  exports.MenuSelect = MenuSelect;
233
238
 
234
- const OrgUnitSelect = ({
235
- onChange,
236
- selected
237
- }) => {
239
+ const OrgUnitSelect = _ref4 => {
240
+ let {
241
+ onChange,
242
+ selected
243
+ } = _ref4;
238
244
  return /*#__PURE__*/_react.default.createElement("div", {
239
245
  style: {
240
246
  width: 400,
package/build/cjs/selector-bar/__stories__/keep-org-unit-expanded.js CHANGED
@@ -17,21 +17,28 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
17
17
 
18
18
  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; }
19
19
 
20
- const KeepOrgUnitExpanded = (_, {
21
- orgUnit,
22
- setOrgUnit,
23
- orgUnitOpen,
24
- setOrgUnitOpen
25
- }) => {
20
+ const KeepOrgUnitExpanded = (_, _ref) => {
21
+ let {
22
+ orgUnit,
23
+ setOrgUnit,
24
+ orgUnitOpen,
25
+ setOrgUnitOpen
26
+ } = _ref;
26
27
  const [expanded, setExpanded] = (0, _react.useState)([]);
27
28
 
28
- const handleExpand = ({
29
- path
30
- }) => setExpanded([...expanded, path]);
29
+ const handleExpand = _ref2 => {
30
+ let {
31
+ path
32
+ } = _ref2;
33
+ return setExpanded([...expanded, path]);
34
+ };
31
35
 
32
- const handleCollapse = ({
33
- path
34
- }) => setExpanded(expanded.filter(p => p !== path));
36
+ const handleCollapse = _ref3 => {
37
+ let {
38
+ path
39
+ } = _ref3;
40
+ return setExpanded(expanded.filter(p => p !== path));
41
+ };
35
42
 
36
43
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.SelectorBar, {
37
44
  disableClearSelections: !orgUnit,
package/build/cjs/selector-bar/__stories__/with-multiple-rows.js CHANGED
@@ -17,20 +17,21 @@ var _common = require("./common.js");
17
17
 
18
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
19
 
20
- const WithMultipleRows = (_, {
21
- workflow,
22
- setWorkflow,
23
- workflowOpen,
24
- setWorkflowOpen,
25
- dataSet,
26
- setDataSet,
27
- dataSetOpen,
28
- setDataSetOpen,
29
- orgUnit,
30
- setOrgUnit,
31
- orgUnitOpen,
32
- setOrgUnitOpen
33
- }) => {
20
+ const WithMultipleRows = (_, _ref) => {
21
+ let {
22
+ workflow,
23
+ setWorkflow,
24
+ workflowOpen,
25
+ setWorkflowOpen,
26
+ dataSet,
27
+ setDataSet,
28
+ dataSetOpen,
29
+ setDataSetOpen,
30
+ orgUnit,
31
+ setOrgUnit,
32
+ orgUnitOpen,
33
+ setOrgUnitOpen
34
+ } = _ref;
34
35
  return /*#__PURE__*/_react.default.createElement("div", {
35
36
  className: "jsx-3203152640" + " " + "narrow-container"
36
37
  }, /*#__PURE__*/_react.default.createElement(_index.SelectorBar, {
@@ -46,9 +47,10 @@ const WithMultipleRows = (_, {
46
47
  }, /*#__PURE__*/_react.default.createElement(_common.MenuSelect, {
47
48
  values: _common.workflows,
48
49
  selected: workflow === null || workflow === void 0 ? void 0 : workflow.value,
49
- onChange: ({
50
- selected
51
- }) => {
50
+ onChange: _ref2 => {
51
+ let {
52
+ selected
53
+ } = _ref2;
52
54
  setWorkflow(_common.workflows.find(currentWorkflow => selected === currentWorkflow.value));
53
55
  setWorkflowOpen(false);
54
56
  }
@@ -62,9 +64,10 @@ const WithMultipleRows = (_, {
62
64
  }, /*#__PURE__*/_react.default.createElement(_common.MenuSelect, {
63
65
  values: _common.dataSets,
64
66
  selected: dataSet === null || dataSet === void 0 ? void 0 : dataSet.value,
65
- onChange: ({
66
- selected
67
- }) => {
67
+ onChange: _ref3 => {
68
+ let {
69
+ selected
70
+ } = _ref3;
68
71
  setDataSet(_common.dataSets.find(currentWorkflow => selected === currentWorkflow.value));
69
72
  setDataSetOpen(false);
70
73
  }
package/build/cjs/selector-bar/__stories__/with-right-hand-side-content.js CHANGED
@@ -25,16 +25,17 @@ const RHSContent = () => /*#__PURE__*/_react.default.createElement("div", {
25
25
  id: "876392447"
26
26
  }, [".rhs-content.jsx-876392447{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:40px;padding:0 16px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}"]));
27
27
 
28
- const WithAdditionalContent = (_, {
29
- workflow,
30
- setWorkflow,
31
- workflowOpen,
32
- setWorkflowOpen,
33
- orgUnit,
34
- setOrgUnit,
35
- orgUnitOpen,
36
- setOrgUnitOpen
37
- }) => {
28
+ const WithAdditionalContent = (_, _ref) => {
29
+ let {
30
+ workflow,
31
+ setWorkflow,
32
+ workflowOpen,
33
+ setWorkflowOpen,
34
+ orgUnit,
35
+ setOrgUnit,
36
+ orgUnitOpen,
37
+ setOrgUnitOpen
38
+ } = _ref;
38
39
  return /*#__PURE__*/_react.default.createElement(_index.SelectorBar, {
39
40
  disableClearSelections: !workflow || !orgUnit,
40
41
  onClearSelectionClick: () => {
@@ -52,9 +53,10 @@ const WithAdditionalContent = (_, {
52
53
  }, /*#__PURE__*/_react.default.createElement(_common.MenuSelect, {
53
54
  values: _common.workflows,
54
55
  selected: workflow === null || workflow === void 0 ? void 0 : workflow.value,
55
- onChange: ({
56
- selected
57
- }) => {
56
+ onChange: _ref2 => {
57
+ let {
58
+ selected
59
+ } = _ref2;
58
60
  setWorkflow(_common.workflows.find(currentWorkflow => selected === currentWorkflow.value));
59
61
  setWorkflowOpen(false);
60
62
  }
package/build/cjs/selector-bar/__stories__/with-some-inputs.js CHANGED
@@ -13,16 +13,17 @@ var _common = require("./common.js");
13
13
 
14
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
15
 
16
- const WithSomeInputs = (_, {
17
- workflow,
18
- setWorkflow,
19
- workflowOpen,
20
- setWorkflowOpen,
21
- orgUnit,
22
- setOrgUnit,
23
- orgUnitOpen,
24
- setOrgUnitOpen
25
- }) => {
16
+ const WithSomeInputs = (_, _ref) => {
17
+ let {
18
+ workflow,
19
+ setWorkflow,
20
+ workflowOpen,
21
+ setWorkflowOpen,
22
+ orgUnit,
23
+ setOrgUnit,
24
+ orgUnitOpen,
25
+ setOrgUnitOpen
26
+ } = _ref;
26
27
  return /*#__PURE__*/_react.default.createElement(_index.SelectorBar, {
27
28
  disableClearSelections: !workflow && !orgUnit,
28
29
  onClearSelectionClick: () => {
@@ -39,9 +40,10 @@ const WithSomeInputs = (_, {
39
40
  }, /*#__PURE__*/_react.default.createElement(_common.MenuSelect, {
40
41
  values: _common.workflows,
41
42
  selected: workflow === null || workflow === void 0 ? void 0 : workflow.value,
42
- onChange: ({
43
- selected
44
- }) => {
43
+ onChange: _ref2 => {
44
+ let {
45
+ selected
46
+ } = _ref2;
45
47
  setWorkflow(_common.workflows.find(currentWorkflow => selected === currentWorkflow.value));
46
48
  setWorkflowOpen(false);
47
49
  }
package/build/cjs/selector-bar/selector-bar.js CHANGED
@@ -21,10 +21,11 @@ var _react = _interopRequireDefault(require("react"));
21
21
 
22
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23
23
 
24
- const ClearSelection = ({
25
- disabled,
26
- onClick
27
- }) => {
24
+ const ClearSelection = _ref => {
25
+ let {
26
+ disabled,
27
+ onClick
28
+ } = _ref;
28
29
  return /*#__PURE__*/_react.default.createElement("div", {
29
30
  className: _style.default.dynamic([["3676026375", [_uiConstants.spacers.dp8]]]) + " " + "clear-selections"
30
31
  }, /*#__PURE__*/_react.default.createElement(_button.Button, {
@@ -35,7 +36,7 @@ const ClearSelection = ({
35
36
  }, _d2I18n.default.t('Clear selections')), /*#__PURE__*/_react.default.createElement(_style.default, {
36
37
  id: "3676026375",
37
38
  dynamic: [_uiConstants.spacers.dp8]
38
- }, [`.clear-selections.__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;height:40px;padding:0 ${_uiConstants.spacers.dp8};}`]));
39
+ }, [".clear-selections.__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;height:40px;padding:0 ".concat(_uiConstants.spacers.dp8, ";}")]));
39
40
  };
40
41
 
41
42
  ClearSelection.propTypes = {
@@ -43,34 +44,37 @@ ClearSelection.propTypes = {
43
44
  onClick: _propTypes.default.func
44
45
  };
45
46
 
46
- const SelectorBar = ({
47
- className,
48
- children,
49
- onClearSelectionClick,
50
- dataTest,
51
- disableClearSelections,
52
- additionalContent
53
- }) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
54
- "data-test": dataTest,
55
- className: _style.default.dynamic([["720742913", [_uiConstants.colors.white, _uiConstants.colors.grey400,
56
- /*
57
- * Specs define the space to be 12px.
58
- * 8px already come from the clear selection component
59
- */
60
- '']]]) + " " + ((0, _classnames.default)('container', {
61
- withRHSContents: additionalContent
62
- }, className) || "")
63
- }, /*#__PURE__*/_react.default.createElement("div", {
64
- className: _style.default.dynamic([["720742913", [_uiConstants.colors.white, _uiConstants.colors.grey400, '']]]) + " " + "controls"
65
- }, children, onClearSelectionClick && /*#__PURE__*/_react.default.createElement(ClearSelection, {
66
- disabled: disableClearSelections,
67
- onClick: onClearSelectionClick
68
- })), additionalContent && /*#__PURE__*/_react.default.createElement("div", {
69
- className: _style.default.dynamic([["720742913", [_uiConstants.colors.white, _uiConstants.colors.grey400, '']]]) + " " + "additional-contents"
70
- }, additionalContent), /*#__PURE__*/_react.default.createElement(_style.default, {
71
- id: "720742913",
72
- dynamic: [_uiConstants.colors.white, _uiConstants.colors.grey400, '']
73
- }, [`.container.__jsx-style-dynamic-selector{background:${_uiConstants.colors.white};box-shadow:inset 0 -1px 0 0 ${_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{${''} padding-left:4px;}`])));
47
+ const SelectorBar = _ref2 => {
48
+ let {
49
+ className,
50
+ children,
51
+ onClearSelectionClick,
52
+ dataTest,
53
+ disableClearSelections,
54
+ additionalContent
55
+ } = _ref2;
56
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
57
+ "data-test": dataTest,
58
+ className: _style.default.dynamic([["720742913", [_uiConstants.colors.white, _uiConstants.colors.grey400,
59
+ /*
60
+ * Specs define the space to be 12px.
61
+ * 8px already come from the clear selection component
62
+ */
63
+ '']]]) + " " + ((0, _classnames.default)('container', {
64
+ withRHSContents: additionalContent
65
+ }, className) || "")
66
+ }, /*#__PURE__*/_react.default.createElement("div", {
67
+ className: _style.default.dynamic([["720742913", [_uiConstants.colors.white, _uiConstants.colors.grey400, '']]]) + " " + "controls"
68
+ }, children, onClearSelectionClick && /*#__PURE__*/_react.default.createElement(ClearSelection, {
69
+ disabled: disableClearSelections,
70
+ onClick: onClearSelectionClick
71
+ })), additionalContent && /*#__PURE__*/_react.default.createElement("div", {
72
+ className: _style.default.dynamic([["720742913", [_uiConstants.colors.white, _uiConstants.colors.grey400, '']]]) + " " + "additional-contents"
73
+ }, additionalContent), /*#__PURE__*/_react.default.createElement(_style.default, {
74
+ id: "720742913",
75
+ dynamic: [_uiConstants.colors.white, _uiConstants.colors.grey400, '']
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-left:4px;}")])));
77
+ };
74
78
 
75
79
  exports.SelectorBar = SelectorBar;
76
80
  SelectorBar.defaultProps = {
package/build/cjs/selector-bar/selector-bar.stories.js CHANGED
@@ -3,10 +3,10 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- Object.defineProperty(exports, "WithSomeInputs", {
6
+ Object.defineProperty(exports, "KeepOrgUnitExpanded", {
7
7
  enumerable: true,
8
8
  get: function () {
9
- return _withSomeInputs.WithSomeInputs;
9
+ return _keepOrgUnitExpanded.KeepOrgUnitExpanded;
10
10
  }
11
11
  });
12
12
  Object.defineProperty(exports, "WithAdditionalContent", {
@@ -15,16 +15,16 @@ Object.defineProperty(exports, "WithAdditionalContent", {
15
15
  return _withRightHandSideContent.WithAdditionalContent;
16
16
  }
17
17
  });
18
- Object.defineProperty(exports, "KeepOrgUnitExpanded", {
18
+ Object.defineProperty(exports, "WithMultipleRows", {
19
19
  enumerable: true,
20
20
  get: function () {
21
- return _keepOrgUnitExpanded.KeepOrgUnitExpanded;
21
+ return _withMultipleRows.WithMultipleRows;
22
22
  }
23
23
  });
24
- Object.defineProperty(exports, "WithMultipleRows", {
24
+ Object.defineProperty(exports, "WithSomeInputs", {
25
25
  enumerable: true,
26
26
  get: function () {
27
- return _withMultipleRows.WithMultipleRows;
27
+ return _withSomeInputs.WithSomeInputs;
28
28
  }
29
29
  });
30
30
  exports.default = void 0;
@@ -38,6 +38,6 @@ var _keepOrgUnitExpanded = require("./__stories__/keep-org-unit-expanded.js");
38
38
  var _withMultipleRows = require("./__stories__/with-multiple-rows.js");
39
39
 
40
40
  var _default = {
41
- title: 'Actions/SelectionBar'
41
+ title: 'SelectionBar'
42
42
  };
43
43
  exports.default = _default;
package/build/cjs/selector-bar-item/selector-bar-item.js CHANGED
@@ -46,17 +46,18 @@ const offsetModifier = {
46
46
  * inside this component
47
47
  */
48
48
 
49
- const SelectorBarItem = ({
50
- children,
51
- className,
52
- dataTest,
53
- disabled,
54
- label,
55
- noValueMessage,
56
- open,
57
- setOpen,
58
- value
59
- }) => {
49
+ const SelectorBarItem = _ref => {
50
+ let {
51
+ children,
52
+ className,
53
+ dataTest,
54
+ disabled,
55
+ label,
56
+ noValueMessage,
57
+ open,
58
+ setOpen,
59
+ value
60
+ } = _ref;
60
61
  const buttonRef = (0, _react.useRef)();
61
62
  const Icon = open ? _uiIcons.IconChevronUp24 : _uiIcons.IconChevronDown24;
62
63
  return /*#__PURE__*/_react.default.createElement("button", {
@@ -90,7 +91,7 @@ const SelectorBarItem = ({
90
91
  }, /*#__PURE__*/_react.default.createElement(_card.Card, null, children))), /*#__PURE__*/_react.default.createElement(_style.default, {
91
92
  id: "3065814091",
92
93
  dynamic: ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4]
93
- }, [`.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;${''} padding:0 ${_uiConstants.spacers.dp8} 0 ${_uiConstants.spacers.dp12};font-size:14px;line-height:16px;border:none;box-shadow:0px 0px 0px 1px ${_uiConstants.colors.grey400};}`, ".selector-bar-item.__jsx-style-dynamic-selector:disabled{cursor:not-allowed;}", `.label.__jsx-style-dynamic-selector{color:${_uiConstants.colors.grey600};}`, `.value.__jsx-style-dynamic-selector{padding-left:${_uiConstants.spacers.dp8};}`, `.toggle-icon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:${_uiConstants.spacers.dp4};height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}`]));
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;}")]));
94
95
  };
95
96
 
96
97
  exports.SelectorBarItem = SelectorBarItem;
package/build/cjs/selector-bar-item/selector-bar-item.stories.e2e.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.OpenWithValue = exports.ClosedWithValue = exports.OpenNoValue = exports.ClosedNoValue = exports.default = void 0;
6
+ exports.default = exports.OpenWithValue = exports.OpenNoValue = exports.ClosedWithValue = exports.ClosedNoValue = void 0;
7
7
 
8
8
  var _select = require("@dhis2-ui/select");
9
9
 
@@ -39,38 +39,46 @@ const createStateDecorator = args => {
39
39
  };
40
40
  };
41
41
 
42
- const createStory = () => (_, {
43
- open,
44
- setOpen,
45
- selected,
46
- setSelected
47
- }) => {
42
+ const createStory = () => (_, _ref) => {
48
43
  var _options$find;
49
44
 
45
+ let {
46
+ open,
47
+ setOpen,
48
+ selected,
49
+ setSelected
50
+ } = _ref;
50
51
  return /*#__PURE__*/_react.default.createElement(_selectorBarItem.SelectorBarItem, {
51
52
  label: "Selection bar item",
52
53
  noValueMessage: "No value message",
53
54
  open: open,
54
55
  setOpen: setOpen,
55
- value: ((_options$find = options.find(({
56
- value
57
- }) => value === selected)) === null || _options$find === void 0 ? void 0 : _options$find.label) || ''
56
+ value: ((_options$find = options.find(_ref2 => {
57
+ let {
58
+ value
59
+ } = _ref2;
60
+ return value === selected;
61
+ })) === null || _options$find === void 0 ? void 0 : _options$find.label) || ''
58
62
  }, /*#__PURE__*/_react.default.createElement(_select.SingleSelectField, {
59
63
  selected: selected,
60
- onChange: ({
61
- selected: nextSelected
62
- }) => {
64
+ onChange: _ref3 => {
65
+ let {
66
+ selected: nextSelected
67
+ } = _ref3;
63
68
  setSelected(nextSelected);
64
69
  setOpen(false);
65
70
  }
66
- }, options.map(({
67
- value,
68
- label
69
- }) => /*#__PURE__*/_react.default.createElement(_select.SingleSelectOption, {
70
- key: value,
71
- value: value,
72
- label: label
73
- }))));
71
+ }, options.map(_ref4 => {
72
+ let {
73
+ value,
74
+ label
75
+ } = _ref4;
76
+ return /*#__PURE__*/_react.default.createElement(_select.SingleSelectOption, {
77
+ key: value,
78
+ value: value,
79
+ label: label
80
+ });
81
+ })));
74
82
  };
75
83
 
76
84
  var _default = {
package/build/es/selector-bar/__stories__/common.js CHANGED
@@ -7,7 +7,7 @@ import React, { useState } from 'react';
7
7
  export const decoratorCommonStyles = fn => /*#__PURE__*/React.createElement(React.Fragment, null, fn(), /*#__PURE__*/React.createElement(_JSXStyle, {
8
8
  id: "3746816729",
9
9
  dynamic: [colors.grey100]
10
- }, [`body{background:${colors.grey100};padding:0 !important;}`, "div#root{padding:0;}"]));
10
+ }, ["body{background:".concat(colors.grey100, ";padding:0 !important;}"), "div#root{padding:0;}"]));
11
11
  export const getOrganisationUnitData = id => {
12
12
  let data;
13
13
 
@@ -111,9 +111,10 @@ export const getOrganisationUnitData = id => {
111
111
  return data;
112
112
  };
113
113
  export const dataProviderData = {
114
- organisationUnits: (_, {
115
- id
116
- }) => {
114
+ organisationUnits: (_, _ref) => {
115
+ let {
116
+ id
117
+ } = _ref;
117
118
  const data = getOrganisationUnitData(id);
118
119
 
119
120
  if (!data) {
@@ -173,31 +174,36 @@ export const dataSets = [{
173
174
  value: 'data-set-3',
174
175
  label: 'Data set 3'
175
176
  }];
176
- export const MenuSelect = ({
177
- values,
178
- selected,
179
- onChange
180
- }) => {
177
+ export const MenuSelect = _ref2 => {
178
+ let {
179
+ values,
180
+ selected,
181
+ onChange
182
+ } = _ref2;
181
183
  return /*#__PURE__*/React.createElement("div", {
182
184
  style: {
183
185
  width: 400
184
186
  }
185
- }, /*#__PURE__*/React.createElement(Menu, null, values.map(({
186
- value,
187
- label
188
- }) => /*#__PURE__*/React.createElement(MenuItem, {
189
- key: value,
190
- label: label,
191
- active: selected === value,
192
- onClick: () => onChange({
193
- selected: value
194
- })
195
- }))));
187
+ }, /*#__PURE__*/React.createElement(Menu, null, values.map(_ref3 => {
188
+ let {
189
+ value,
190
+ label
191
+ } = _ref3;
192
+ return /*#__PURE__*/React.createElement(MenuItem, {
193
+ key: value,
194
+ label: label,
195
+ active: selected === value,
196
+ onClick: () => onChange({
197
+ selected: value
198
+ })
199
+ });
200
+ })));
196
201
  };
197
- export const OrgUnitSelect = ({
198
- onChange,
199
- selected
200
- }) => {
202
+ export const OrgUnitSelect = _ref4 => {
203
+ let {
204
+ onChange,
205
+ selected
206
+ } = _ref4;
201
207
  return /*#__PURE__*/React.createElement("div", {
202
208
  style: {
203
209
  width: 400,
package/build/es/selector-bar/__stories__/keep-org-unit-expanded.js CHANGED
@@ -2,21 +2,28 @@ import { OrganisationUnitTree } from '@dhis2-ui/organisation-unit-tree';
2
2
  import React, { useState } from 'react';
3
3
  import { SelectorBar, SelectorBarItem } from '../../index.js';
4
4
  import { createStatefulDecorator, decoratorCommonStyles, createDecoratorCustomDataProvider } from './common.js';
5
- export const KeepOrgUnitExpanded = (_, {
6
- orgUnit,
7
- setOrgUnit,
8
- orgUnitOpen,
9
- setOrgUnitOpen
10
- }) => {
5
+ export const KeepOrgUnitExpanded = (_, _ref) => {
6
+ let {
7
+ orgUnit,
8
+ setOrgUnit,
9
+ orgUnitOpen,
10
+ setOrgUnitOpen
11
+ } = _ref;
11
12
  const [expanded, setExpanded] = useState([]);
12
13
 
13
- const handleExpand = ({
14
- path
15
- }) => setExpanded([...expanded, path]);
14
+ const handleExpand = _ref2 => {
15
+ let {
16
+ path
17
+ } = _ref2;
18
+ return setExpanded([...expanded, path]);
19
+ };
16
20
 
17
- const handleCollapse = ({
18
- path
19
- }) => setExpanded(expanded.filter(p => p !== path));
21
+ const handleCollapse = _ref3 => {
22
+ let {
23
+ path
24
+ } = _ref3;
25
+ return setExpanded(expanded.filter(p => p !== path));
26
+ };
20
27
 
21
28
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectorBar, {
22
29
  disableClearSelections: !orgUnit,
package/build/es/selector-bar/__stories__/with-multiple-rows.js CHANGED
@@ -3,20 +3,21 @@ import { OrganisationUnitTree } from '@dhis2-ui/organisation-unit-tree';
3
3
  import React from 'react';
4
4
  import { SelectorBar, SelectorBarItem } from '../../index.js';
5
5
  import { MenuSelect, createDecoratorCustomDataProvider, createStatefulDecorator, dataSets, decoratorCommonStyles, workflows } from './common.js';
6
- export const WithMultipleRows = (_, {
7
- workflow,
8
- setWorkflow,
9
- workflowOpen,
10
- setWorkflowOpen,
11
- dataSet,
12
- setDataSet,
13
- dataSetOpen,
14
- setDataSetOpen,
15
- orgUnit,
16
- setOrgUnit,
17
- orgUnitOpen,
18
- setOrgUnitOpen
19
- }) => {
6
+ export const WithMultipleRows = (_, _ref) => {
7
+ let {
8
+ workflow,
9
+ setWorkflow,
10
+ workflowOpen,
11
+ setWorkflowOpen,
12
+ dataSet,
13
+ setDataSet,
14
+ dataSetOpen,
15
+ setDataSetOpen,
16
+ orgUnit,
17
+ setOrgUnit,
18
+ orgUnitOpen,
19
+ setOrgUnitOpen
20
+ } = _ref;
20
21
  return /*#__PURE__*/React.createElement("div", {
21
22
  className: "jsx-3203152640" + " " + "narrow-container"
22
23
  }, /*#__PURE__*/React.createElement(SelectorBar, {
@@ -32,9 +33,10 @@ export const WithMultipleRows = (_, {
32
33
  }, /*#__PURE__*/React.createElement(MenuSelect, {
33
34
  values: workflows,
34
35
  selected: workflow === null || workflow === void 0 ? void 0 : workflow.value,
35
- onChange: ({
36
- selected
37
- }) => {
36
+ onChange: _ref2 => {
37
+ let {
38
+ selected
39
+ } = _ref2;
38
40
  setWorkflow(workflows.find(currentWorkflow => selected === currentWorkflow.value));
39
41
  setWorkflowOpen(false);
40
42
  }
@@ -48,9 +50,10 @@ export const WithMultipleRows = (_, {
48
50
  }, /*#__PURE__*/React.createElement(MenuSelect, {
49
51
  values: dataSets,
50
52
  selected: dataSet === null || dataSet === void 0 ? void 0 : dataSet.value,
51
- onChange: ({
52
- selected
53
- }) => {
53
+ onChange: _ref3 => {
54
+ let {
55
+ selected
56
+ } = _ref3;
54
57
  setDataSet(dataSets.find(currentWorkflow => selected === currentWorkflow.value));
55
58
  setDataSetOpen(false);
56
59
  }
package/build/es/selector-bar/__stories__/with-right-hand-side-content.js CHANGED
@@ -12,16 +12,17 @@ const RHSContent = () => /*#__PURE__*/React.createElement("div", {
12
12
  id: "876392447"
13
13
  }, [".rhs-content.jsx-876392447{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:40px;padding:0 16px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}"]));
14
14
 
15
- export const WithAdditionalContent = (_, {
16
- workflow,
17
- setWorkflow,
18
- workflowOpen,
19
- setWorkflowOpen,
20
- orgUnit,
21
- setOrgUnit,
22
- orgUnitOpen,
23
- setOrgUnitOpen
24
- }) => {
15
+ export const WithAdditionalContent = (_, _ref) => {
16
+ let {
17
+ workflow,
18
+ setWorkflow,
19
+ workflowOpen,
20
+ setWorkflowOpen,
21
+ orgUnit,
22
+ setOrgUnit,
23
+ orgUnitOpen,
24
+ setOrgUnitOpen
25
+ } = _ref;
25
26
  return /*#__PURE__*/React.createElement(SelectorBar, {
26
27
  disableClearSelections: !workflow || !orgUnit,
27
28
  onClearSelectionClick: () => {
@@ -39,9 +40,10 @@ export const WithAdditionalContent = (_, {
39
40
  }, /*#__PURE__*/React.createElement(MenuSelect, {
40
41
  values: workflows,
41
42
  selected: workflow === null || workflow === void 0 ? void 0 : workflow.value,
42
- onChange: ({
43
- selected
44
- }) => {
43
+ onChange: _ref2 => {
44
+ let {
45
+ selected
46
+ } = _ref2;
45
47
  setWorkflow(workflows.find(currentWorkflow => selected === currentWorkflow.value));
46
48
  setWorkflowOpen(false);
47
49
  }
package/build/es/selector-bar/__stories__/with-some-inputs.js CHANGED
@@ -1,16 +1,17 @@
1
1
  import React from 'react';
2
2
  import { SelectorBar, SelectorBarItem } from '../../index.js';
3
3
  import { OrgUnitSelect, MenuSelect, createDecoratorCustomDataProvider, createStatefulDecorator, decoratorCommonStyles, workflows } from './common.js';
4
- export const WithSomeInputs = (_, {
5
- workflow,
6
- setWorkflow,
7
- workflowOpen,
8
- setWorkflowOpen,
9
- orgUnit,
10
- setOrgUnit,
11
- orgUnitOpen,
12
- setOrgUnitOpen
13
- }) => {
4
+ export const WithSomeInputs = (_, _ref) => {
5
+ let {
6
+ workflow,
7
+ setWorkflow,
8
+ workflowOpen,
9
+ setWorkflowOpen,
10
+ orgUnit,
11
+ setOrgUnit,
12
+ orgUnitOpen,
13
+ setOrgUnitOpen
14
+ } = _ref;
14
15
  return /*#__PURE__*/React.createElement(SelectorBar, {
15
16
  disableClearSelections: !workflow && !orgUnit,
16
17
  onClearSelectionClick: () => {
@@ -27,9 +28,10 @@ export const WithSomeInputs = (_, {
27
28
  }, /*#__PURE__*/React.createElement(MenuSelect, {
28
29
  values: workflows,
29
30
  selected: workflow === null || workflow === void 0 ? void 0 : workflow.value,
30
- onChange: ({
31
- selected
32
- }) => {
31
+ onChange: _ref2 => {
32
+ let {
33
+ selected
34
+ } = _ref2;
33
35
  setWorkflow(workflows.find(currentWorkflow => selected === currentWorkflow.value));
34
36
  setWorkflowOpen(false);
35
37
  }
package/build/es/selector-bar/selector-bar.js CHANGED
@@ -6,10 +6,11 @@ import cx from 'classnames';
6
6
  import PropTypes from 'prop-types';
7
7
  import React from 'react';
8
8
 
9
- const ClearSelection = ({
10
- disabled,
11
- onClick
12
- }) => {
9
+ const ClearSelection = _ref => {
10
+ let {
11
+ disabled,
12
+ onClick
13
+ } = _ref;
13
14
  return /*#__PURE__*/React.createElement("div", {
14
15
  className: _JSXStyle.dynamic([["3676026375", [spacers.dp8]]]) + " " + "clear-selections"
15
16
  }, /*#__PURE__*/React.createElement(Button, {
@@ -20,41 +21,44 @@ const ClearSelection = ({
20
21
  }, i18n.t('Clear selections')), /*#__PURE__*/React.createElement(_JSXStyle, {
21
22
  id: "3676026375",
22
23
  dynamic: [spacers.dp8]
23
- }, [`.clear-selections.__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;height:40px;padding:0 ${spacers.dp8};}`]));
24
+ }, [".clear-selections.__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;height:40px;padding:0 ".concat(spacers.dp8, ";}")]));
24
25
  };
25
26
 
26
27
  ClearSelection.propTypes = {
27
28
  disabled: PropTypes.bool,
28
29
  onClick: PropTypes.func
29
30
  };
30
- export const SelectorBar = ({
31
- className,
32
- children,
33
- onClearSelectionClick,
34
- dataTest,
35
- disableClearSelections,
36
- additionalContent
37
- }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
38
- "data-test": dataTest,
39
- className: _JSXStyle.dynamic([["720742913", [colors.white, colors.grey400,
40
- /*
41
- * Specs define the space to be 12px.
42
- * 8px already come from the clear selection component
43
- */
44
- '']]]) + " " + (cx('container', {
45
- withRHSContents: additionalContent
46
- }, className) || "")
47
- }, /*#__PURE__*/React.createElement("div", {
48
- className: _JSXStyle.dynamic([["720742913", [colors.white, colors.grey400, '']]]) + " " + "controls"
49
- }, children, onClearSelectionClick && /*#__PURE__*/React.createElement(ClearSelection, {
50
- disabled: disableClearSelections,
51
- onClick: onClearSelectionClick
52
- })), additionalContent && /*#__PURE__*/React.createElement("div", {
53
- className: _JSXStyle.dynamic([["720742913", [colors.white, colors.grey400, '']]]) + " " + "additional-contents"
54
- }, additionalContent), /*#__PURE__*/React.createElement(_JSXStyle, {
55
- id: "720742913",
56
- dynamic: [colors.white, colors.grey400, '']
57
- }, [`.container.__jsx-style-dynamic-selector{background:${colors.white};box-shadow:inset 0 -1px 0 0 ${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{${''} padding-left:4px;}`])));
31
+ export const SelectorBar = _ref2 => {
32
+ let {
33
+ className,
34
+ children,
35
+ onClearSelectionClick,
36
+ dataTest,
37
+ disableClearSelections,
38
+ additionalContent
39
+ } = _ref2;
40
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
41
+ "data-test": dataTest,
42
+ className: _JSXStyle.dynamic([["720742913", [colors.white, colors.grey400,
43
+ /*
44
+ * Specs define the space to be 12px.
45
+ * 8px already come from the clear selection component
46
+ */
47
+ '']]]) + " " + (cx('container', {
48
+ withRHSContents: additionalContent
49
+ }, className) || "")
50
+ }, /*#__PURE__*/React.createElement("div", {
51
+ className: _JSXStyle.dynamic([["720742913", [colors.white, colors.grey400, '']]]) + " " + "controls"
52
+ }, children, onClearSelectionClick && /*#__PURE__*/React.createElement(ClearSelection, {
53
+ disabled: disableClearSelections,
54
+ onClick: onClearSelectionClick
55
+ })), additionalContent && /*#__PURE__*/React.createElement("div", {
56
+ className: _JSXStyle.dynamic([["720742913", [colors.white, colors.grey400, '']]]) + " " + "additional-contents"
57
+ }, additionalContent), /*#__PURE__*/React.createElement(_JSXStyle, {
58
+ id: "720742913",
59
+ dynamic: [colors.white, colors.grey400, '']
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-left:4px;}")])));
61
+ };
58
62
  SelectorBar.defaultProps = {
59
63
  dataTest: 'dhis2-ui-selectorbar'
60
64
  };
package/build/es/selector-bar/selector-bar.stories.js CHANGED
@@ -1,5 +1,5 @@
1
1
  export default {
2
- title: 'Actions/SelectionBar'
2
+ title: 'SelectionBar'
3
3
  };
4
4
  export { WithSomeInputs } from './__stories__/with-some-inputs.js';
5
5
  export { WithAdditionalContent } from './__stories__/with-right-hand-side-content.js';
package/build/es/selector-bar-item/selector-bar-item.js CHANGED
@@ -24,17 +24,18 @@ const offsetModifier = {
24
24
  * inside this component
25
25
  */
26
26
 
27
- export const SelectorBarItem = ({
28
- children,
29
- className,
30
- dataTest,
31
- disabled,
32
- label,
33
- noValueMessage,
34
- open,
35
- setOpen,
36
- value
37
- }) => {
27
+ export const SelectorBarItem = _ref => {
28
+ let {
29
+ children,
30
+ className,
31
+ dataTest,
32
+ disabled,
33
+ label,
34
+ noValueMessage,
35
+ open,
36
+ setOpen,
37
+ value
38
+ } = _ref;
38
39
  const buttonRef = useRef();
39
40
  const Icon = open ? IconChevronUp24 : IconChevronDown24;
40
41
  return /*#__PURE__*/React.createElement("button", {
@@ -68,7 +69,7 @@ export const SelectorBarItem = ({
68
69
  }, /*#__PURE__*/React.createElement(Card, null, children))), /*#__PURE__*/React.createElement(_JSXStyle, {
69
70
  id: "3065814091",
70
71
  dynamic: ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4]
71
- }, [`.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;${''} padding:0 ${spacers.dp8} 0 ${spacers.dp12};font-size:14px;line-height:16px;border:none;box-shadow:0px 0px 0px 1px ${colors.grey400};}`, ".selector-bar-item.__jsx-style-dynamic-selector:disabled{cursor:not-allowed;}", `.label.__jsx-style-dynamic-selector{color:${colors.grey600};}`, `.value.__jsx-style-dynamic-selector{padding-left:${spacers.dp8};}`, `.toggle-icon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:${spacers.dp4};height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}`]));
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;}")]));
72
73
  };
73
74
  SelectorBarItem.defaultProps = {
74
75
  dataTest: 'dhis2-ui-selectorbaritem'
package/build/es/selector-bar-item/selector-bar-item.stories.e2e.js CHANGED
@@ -25,38 +25,46 @@ const createStateDecorator = args => {
25
25
  };
26
26
  };
27
27
 
28
- const createStory = () => (_, {
29
- open,
30
- setOpen,
31
- selected,
32
- setSelected
33
- }) => {
28
+ const createStory = () => (_, _ref) => {
34
29
  var _options$find;
35
30
 
31
+ let {
32
+ open,
33
+ setOpen,
34
+ selected,
35
+ setSelected
36
+ } = _ref;
36
37
  return /*#__PURE__*/React.createElement(SelectorBarItem, {
37
38
  label: "Selection bar item",
38
39
  noValueMessage: "No value message",
39
40
  open: open,
40
41
  setOpen: setOpen,
41
- value: ((_options$find = options.find(({
42
- value
43
- }) => value === selected)) === null || _options$find === void 0 ? void 0 : _options$find.label) || ''
42
+ value: ((_options$find = options.find(_ref2 => {
43
+ let {
44
+ value
45
+ } = _ref2;
46
+ return value === selected;
47
+ })) === null || _options$find === void 0 ? void 0 : _options$find.label) || ''
44
48
  }, /*#__PURE__*/React.createElement(SingleSelectField, {
45
49
  selected: selected,
46
- onChange: ({
47
- selected: nextSelected
48
- }) => {
50
+ onChange: _ref3 => {
51
+ let {
52
+ selected: nextSelected
53
+ } = _ref3;
49
54
  setSelected(nextSelected);
50
55
  setOpen(false);
51
56
  }
52
- }, options.map(({
53
- value,
54
- label
55
- }) => /*#__PURE__*/React.createElement(SingleSelectOption, {
56
- key: value,
57
- value: value,
58
- label: label
59
- }))));
57
+ }, options.map(_ref4 => {
58
+ let {
59
+ value,
60
+ label
61
+ } = _ref4;
62
+ return /*#__PURE__*/React.createElement(SingleSelectOption, {
63
+ key: value,
64
+ value: value,
65
+ label: label
66
+ });
67
+ })));
60
68
  };
61
69
 
62
70
  export default {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/selector-bar",
3
- "version": "8.1.10",
3
+ "version": "8.2.1",
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.1.10",
36
- "@dhis2-ui/card": "8.1.10",
37
- "@dhis2-ui/popper": "8.1.10",
38
- "@dhis2-ui/layer": "8.1.10",
39
- "@dhis2/ui-constants": "8.1.10",
40
- "@dhis2/ui-icons": "8.1.10",
35
+ "@dhis2-ui/button": "8.2.1",
36
+ "@dhis2-ui/card": "8.2.1",
37
+ "@dhis2-ui/popper": "8.2.1",
38
+ "@dhis2-ui/layer": "8.2.1",
39
+ "@dhis2/ui-constants": "8.2.1",
40
+ "@dhis2/ui-icons": "8.2.1",
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.1.10",
47
- "@dhis2-ui/menu": "8.1.10",
48
- "@dhis2-ui/organisation-unit-tree": "8.1.10",
49
- "@dhis2-ui/select": "8.1.10",
46
+ "@dhis2-ui/css": "8.2.1",
47
+ "@dhis2-ui/menu": "8.2.1",
48
+ "@dhis2-ui/organisation-unit-tree": "8.2.1",
49
+ "@dhis2-ui/select": "8.2.1",
50
50
  "@dhis2/d2-i18n": "^1.1.0",
51
51
  "@testing-library/jest-dom": "^5.16.1",
52
52
  "react": "16.13",