@dhis2-ui/selector-bar 9.3.0 → 9.4.0-alpha.2

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 (9) hide show
  1. package/build/cjs/selector-bar/__stories__/rtl.js +89 -0
  2. package/build/cjs/selector-bar/selector-bar.js +5 -5
  3. package/build/cjs/selector-bar/selector-bar.stories.js +8 -0
  4. package/build/cjs/selector-bar-item/selector-bar-item.js +10 -10
  5. package/build/es/selector-bar/__stories__/rtl.js +74 -0
  6. package/build/es/selector-bar/selector-bar.js +5 -5
  7. package/build/es/selector-bar/selector-bar.stories.js +2 -1
  8. package/build/es/selector-bar-item/selector-bar-item.js +10 -10
  9. package/package.json +11 -11
package/build/cjs/selector-bar/__stories__/rtl.js ADDED
@@ -0,0 +1,89 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.RTL = void 0;
7
+
8
+ var _style = _interopRequireDefault(require("styled-jsx/style"));
9
+
10
+ var _button = require("@dhis2-ui/button");
11
+
12
+ var _react = _interopRequireDefault(require("react"));
13
+
14
+ var _index = require("../../index.js");
15
+
16
+ var _common = require("./common.js");
17
+
18
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
+
20
+ const RHSContent = () => /*#__PURE__*/_react.default.createElement("div", {
21
+ className: "jsx-876392447" + " " + "rhs-content"
22
+ }, /*#__PURE__*/_react.default.createElement(_button.Button, {
23
+ small: true
24
+ }, "Options"), /*#__PURE__*/_react.default.createElement(_style.default, {
25
+ id: "876392447"
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
+
28
+ const RTL = (_, _ref) => {
29
+ let {
30
+ workflow,
31
+ setWorkflow,
32
+ workflowOpen,
33
+ setWorkflowOpen,
34
+ orgUnit,
35
+ setOrgUnit,
36
+ orgUnitOpen,
37
+ setOrgUnitOpen
38
+ } = _ref;
39
+ return /*#__PURE__*/_react.default.createElement("div", {
40
+ dir: "rtl"
41
+ }, /*#__PURE__*/_react.default.createElement(_index.SelectorBar, {
42
+ disableClearSelections: !workflow || !orgUnit,
43
+ onClearSelectionClick: () => {
44
+ setWorkflow(null);
45
+ setOrgUnit(null);
46
+ },
47
+ additionalContent: /*#__PURE__*/_react.default.createElement(RHSContent, null)
48
+ }, /*#__PURE__*/_react.default.createElement(_index.SelectorBarItem, {
49
+ disabled: false,
50
+ label: "Workflow",
51
+ value: workflow === null || workflow === void 0 ? void 0 : workflow.label,
52
+ noValueMessage: "Choose a workflow",
53
+ open: workflowOpen,
54
+ setOpen: setWorkflowOpen,
55
+ onClearSelectionClick: () => {
56
+ setWorkflow(null);
57
+ }
58
+ }, /*#__PURE__*/_react.default.createElement(_common.MenuSelect, {
59
+ values: _common.workflows,
60
+ selected: workflow === null || workflow === void 0 ? void 0 : workflow.value,
61
+ onChange: _ref2 => {
62
+ let {
63
+ selected
64
+ } = _ref2;
65
+ setWorkflow(_common.workflows.find(currentWorkflow => selected === currentWorkflow.value));
66
+ setWorkflowOpen(false);
67
+ }
68
+ })), /*#__PURE__*/_react.default.createElement(_index.SelectorBarItem, {
69
+ disabled: !workflow,
70
+ label: "Org unit",
71
+ value: orgUnit === null || orgUnit === void 0 ? void 0 : orgUnit.displayName,
72
+ noValueMessage: "Choose an organisation unit",
73
+ open: orgUnitOpen,
74
+ setOpen: setOrgUnitOpen,
75
+ onClearSelectionClick: () => {
76
+ setOrgUnit(null);
77
+ }
78
+ }, /*#__PURE__*/_react.default.createElement(_common.OrgUnitSelect, {
79
+ selected: orgUnit ? [orgUnit.path] : [],
80
+ onChange: (nextOrgUnit, evt) => {
81
+ evt.stopPropagation();
82
+ setOrgUnit(nextOrgUnit);
83
+ setOrgUnitOpen(false);
84
+ }
85
+ }))));
86
+ };
87
+
88
+ exports.RTL = RTL;
89
+ RTL.decorators = [_common.decoratorCommonStyles, (0, _common.createStatefulDecorator)(), (0, _common.createDecoratorCustomDataProvider)()];
package/build/cjs/selector-bar/selector-bar.js CHANGED
@@ -55,7 +55,7 @@ const SelectorBar = _ref2 => {
55
55
  } = _ref2;
56
56
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
57
57
  "data-test": dataTest,
58
- className: _style.default.dynamic([["720742913", [_uiConstants.colors.white, _uiConstants.colors.grey400,
58
+ className: _style.default.dynamic([["4283810916", [_uiConstants.colors.white, _uiConstants.colors.grey400,
59
59
  /*
60
60
  * Specs define the space to be 12px.
61
61
  * 8px already come from the clear selection component
@@ -64,16 +64,16 @@ const SelectorBar = _ref2 => {
64
64
  withRHSContents: additionalContent
65
65
  }, className) || "")
66
66
  }, /*#__PURE__*/_react.default.createElement("div", {
67
- className: _style.default.dynamic([["720742913", [_uiConstants.colors.white, _uiConstants.colors.grey400, '']]]) + " " + "controls"
67
+ className: _style.default.dynamic([["4283810916", [_uiConstants.colors.white, _uiConstants.colors.grey400, '']]]) + " " + "controls"
68
68
  }, children, onClearSelectionClick && /*#__PURE__*/_react.default.createElement(ClearSelection, {
69
69
  disabled: disableClearSelections,
70
70
  onClick: onClearSelectionClick
71
71
  })), additionalContent && /*#__PURE__*/_react.default.createElement("div", {
72
- className: _style.default.dynamic([["720742913", [_uiConstants.colors.white, _uiConstants.colors.grey400, '']]]) + " " + "additional-contents"
72
+ className: _style.default.dynamic([["4283810916", [_uiConstants.colors.white, _uiConstants.colors.grey400, '']]]) + " " + "additional-contents"
73
73
  }, additionalContent), /*#__PURE__*/_react.default.createElement(_style.default, {
74
- id: "720742913",
74
+ id: "4283810916",
75
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;}")])));
76
+ }, [".container.__jsx-style-dynamic-selector{background:".concat(_uiConstants.colors.white, ";box-shadow:inset 0 -1px 0 0 ").concat(_uiConstants.colors.grey400, ";padding-bottom:1px;}"), ".withRHSContents.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".controls.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;gap:1px;}", ".additional-contents.__jsx-style-dynamic-selector{".concat(" padding-inline-start:4px;}")])));
77
77
  };
78
78
 
79
79
  exports.SelectorBar = SelectorBar;
package/build/cjs/selector-bar/selector-bar.stories.js CHANGED
@@ -9,6 +9,12 @@ Object.defineProperty(exports, "KeepOrgUnitExpanded", {
9
9
  return _keepOrgUnitExpanded.KeepOrgUnitExpanded;
10
10
  }
11
11
  });
12
+ Object.defineProperty(exports, "RTL", {
13
+ enumerable: true,
14
+ get: function () {
15
+ return _rtl.RTL;
16
+ }
17
+ });
12
18
  Object.defineProperty(exports, "WithAdditionalContent", {
13
19
  enumerable: true,
14
20
  get: function () {
@@ -37,6 +43,8 @@ var _keepOrgUnitExpanded = require("./__stories__/keep-org-unit-expanded.js");
37
43
 
38
44
  var _withMultipleRows = require("./__stories__/with-multiple-rows.js");
39
45
 
46
+ var _rtl = require("./__stories__/rtl.js");
47
+
40
48
  var _default = {
41
49
  title: 'SelectionBar'
42
50
  };
package/build/cjs/selector-bar-item/selector-bar-item.js CHANGED
@@ -67,37 +67,37 @@ const SelectorBarItem = _ref => {
67
67
  disabled: disabled,
68
68
  onClick: () => setOpen && setOpen(true),
69
69
  "data-test": dataTest,
70
- className: _style.default.dynamic([["1019748909", [
70
+ className: _style.default.dynamic([["4226485334", [
71
71
  /*
72
72
  * The arrow icon has ~4px empty space on the sides,
73
73
  * that's why the padding on the right is only 8px.
74
74
  */
75
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' : '') || "")
76
76
  }, /*#__PURE__*/_react.default.createElement("span", {
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"
77
+ className: _style.default.dynamic([["4226485334", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]]]) + " " + "label"
78
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"
79
+ className: _style.default.dynamic([["4226485334", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]]]) + " " + "value"
80
80
  }, value || noValueMessage), value && onClearSelectionClick && /*#__PURE__*/_react.default.createElement("span", {
81
81
  onClick: evt => {
82
82
  evt.stopPropagation();
83
83
  onClearSelectionClick();
84
84
  },
85
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"
86
+ className: _style.default.dynamic([["4226485334", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]]]) + " " + "clear-icon"
87
87
  }, /*#__PURE__*/_react.default.createElement("svg", {
88
88
  width: "14",
89
89
  height: "14",
90
90
  viewBox: "0 0 14 14",
91
91
  fill: "none",
92
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]]])
93
+ className: _style.default.dynamic([["4226485334", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]]])
94
94
  }, /*#__PURE__*/_react.default.createElement("path", {
95
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]]])
96
+ className: _style.default.dynamic([["4226485334", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]]])
97
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"
98
+ className: _style.default.dynamic([["4226485334", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]]]) + " " + "toggle-icon"
99
99
  }, /*#__PURE__*/_react.default.createElement(Icon, {
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]]])
100
+ className: _style.default.dynamic([["4226485334", ['', _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp4, _uiConstants.colors.grey500, _uiConstants.colors.grey700, _uiConstants.spacers.dp4]]])
101
101
  })), open && /*#__PURE__*/_react.default.createElement(_layer.Layer, {
102
102
  onBackdropClick: (_, evt) => {
103
103
  evt.stopPropagation();
@@ -108,9 +108,9 @@ const SelectorBarItem = _ref => {
108
108
  placement: "bottom-start",
109
109
  modifiers: [offsetModifier]
110
110
  }, /*#__PURE__*/_react.default.createElement(_card.Card, null, children))), /*#__PURE__*/_react.default.createElement(_style.default, {
111
- id: "1019748909",
111
+ id: "4226485334",
112
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;}")]));
113
+ }, [".selector-bar-item.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:none;height:40px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;".concat(" padding-block:0;padding-inline-start:", _uiConstants.spacers.dp8, ";padding-inline-end:").concat(_uiConstants.spacers.dp12, ";font-size:14px;line-height:16px;border:none;box-shadow:0px 0px 0px 1px ").concat(_uiConstants.colors.grey400, ";}"), ".selector-bar-item.openable.__jsx-style-dynamic-selector{cursor:pointer;}", ".selector-bar-item.__jsx-style-dynamic-selector:disabled{cursor:not-allowed;}", ".label.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey600, ";}"), ".value.__jsx-style-dynamic-selector{padding-inline-start:".concat(_uiConstants.spacers.dp8, ";}"), ".clear-icon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-inline-start:".concat(_uiConstants.spacers.dp4, ";padding:").concat(_uiConstants.spacers.dp4, ";cursor:pointer;}"), ".clear-icon.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector path.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.grey500, ";}"), ".clear-icon.__jsx-style-dynamic-selector:hover svg.__jsx-style-dynamic-selector path.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.grey700, ";}"), ".toggle-icon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-inline-start:".concat(_uiConstants.spacers.dp4, ";height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}")]));
114
114
  };
115
115
 
116
116
  exports.SelectorBarItem = SelectorBarItem;
package/build/es/selector-bar/__stories__/rtl.js ADDED
@@ -0,0 +1,74 @@
1
+ import _JSXStyle from "styled-jsx/style";
2
+ import { Button } from '@dhis2-ui/button';
3
+ import React from 'react';
4
+ import { SelectorBar, SelectorBarItem } from '../../index.js';
5
+ import { OrgUnitSelect, MenuSelect, createDecoratorCustomDataProvider, createStatefulDecorator, decoratorCommonStyles, workflows } from './common.js';
6
+
7
+ const RHSContent = () => /*#__PURE__*/React.createElement("div", {
8
+ className: "jsx-876392447" + " " + "rhs-content"
9
+ }, /*#__PURE__*/React.createElement(Button, {
10
+ small: true
11
+ }, "Options"), /*#__PURE__*/React.createElement(_JSXStyle, {
12
+ id: "876392447"
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
+
15
+ export const RTL = (_, _ref) => {
16
+ let {
17
+ workflow,
18
+ setWorkflow,
19
+ workflowOpen,
20
+ setWorkflowOpen,
21
+ orgUnit,
22
+ setOrgUnit,
23
+ orgUnitOpen,
24
+ setOrgUnitOpen
25
+ } = _ref;
26
+ return /*#__PURE__*/React.createElement("div", {
27
+ dir: "rtl"
28
+ }, /*#__PURE__*/React.createElement(SelectorBar, {
29
+ disableClearSelections: !workflow || !orgUnit,
30
+ onClearSelectionClick: () => {
31
+ setWorkflow(null);
32
+ setOrgUnit(null);
33
+ },
34
+ additionalContent: /*#__PURE__*/React.createElement(RHSContent, null)
35
+ }, /*#__PURE__*/React.createElement(SelectorBarItem, {
36
+ disabled: false,
37
+ label: "Workflow",
38
+ value: workflow === null || workflow === void 0 ? void 0 : workflow.label,
39
+ noValueMessage: "Choose a workflow",
40
+ open: workflowOpen,
41
+ setOpen: setWorkflowOpen,
42
+ onClearSelectionClick: () => {
43
+ setWorkflow(null);
44
+ }
45
+ }, /*#__PURE__*/React.createElement(MenuSelect, {
46
+ values: workflows,
47
+ selected: workflow === null || workflow === void 0 ? void 0 : workflow.value,
48
+ onChange: _ref2 => {
49
+ let {
50
+ selected
51
+ } = _ref2;
52
+ setWorkflow(workflows.find(currentWorkflow => selected === currentWorkflow.value));
53
+ setWorkflowOpen(false);
54
+ }
55
+ })), /*#__PURE__*/React.createElement(SelectorBarItem, {
56
+ disabled: !workflow,
57
+ label: "Org unit",
58
+ value: orgUnit === null || orgUnit === void 0 ? void 0 : orgUnit.displayName,
59
+ noValueMessage: "Choose an organisation unit",
60
+ open: orgUnitOpen,
61
+ setOpen: setOrgUnitOpen,
62
+ onClearSelectionClick: () => {
63
+ setOrgUnit(null);
64
+ }
65
+ }, /*#__PURE__*/React.createElement(OrgUnitSelect, {
66
+ selected: orgUnit ? [orgUnit.path] : [],
67
+ onChange: (nextOrgUnit, evt) => {
68
+ evt.stopPropagation();
69
+ setOrgUnit(nextOrgUnit);
70
+ setOrgUnitOpen(false);
71
+ }
72
+ }))));
73
+ };
74
+ RTL.decorators = [decoratorCommonStyles, createStatefulDecorator(), createDecoratorCustomDataProvider()];
package/build/es/selector-bar/selector-bar.js CHANGED
@@ -39,7 +39,7 @@ export const SelectorBar = _ref2 => {
39
39
  } = _ref2;
40
40
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
41
41
  "data-test": dataTest,
42
- className: _JSXStyle.dynamic([["720742913", [colors.white, colors.grey400,
42
+ className: _JSXStyle.dynamic([["4283810916", [colors.white, colors.grey400,
43
43
  /*
44
44
  * Specs define the space to be 12px.
45
45
  * 8px already come from the clear selection component
@@ -48,16 +48,16 @@ export const SelectorBar = _ref2 => {
48
48
  withRHSContents: additionalContent
49
49
  }, className) || "")
50
50
  }, /*#__PURE__*/React.createElement("div", {
51
- className: _JSXStyle.dynamic([["720742913", [colors.white, colors.grey400, '']]]) + " " + "controls"
51
+ className: _JSXStyle.dynamic([["4283810916", [colors.white, colors.grey400, '']]]) + " " + "controls"
52
52
  }, children, onClearSelectionClick && /*#__PURE__*/React.createElement(ClearSelection, {
53
53
  disabled: disableClearSelections,
54
54
  onClick: onClearSelectionClick
55
55
  })), additionalContent && /*#__PURE__*/React.createElement("div", {
56
- className: _JSXStyle.dynamic([["720742913", [colors.white, colors.grey400, '']]]) + " " + "additional-contents"
56
+ className: _JSXStyle.dynamic([["4283810916", [colors.white, colors.grey400, '']]]) + " " + "additional-contents"
57
57
  }, additionalContent), /*#__PURE__*/React.createElement(_JSXStyle, {
58
- id: "720742913",
58
+ id: "4283810916",
59
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;}")])));
60
+ }, [".container.__jsx-style-dynamic-selector{background:".concat(colors.white, ";box-shadow:inset 0 -1px 0 0 ").concat(colors.grey400, ";padding-bottom:1px;}"), ".withRHSContents.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".controls.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;gap:1px;}", ".additional-contents.__jsx-style-dynamic-selector{".concat(" padding-inline-start:4px;}")])));
61
61
  };
62
62
  SelectorBar.defaultProps = {
63
63
  dataTest: 'dhis2-ui-selectorbar'
package/build/es/selector-bar/selector-bar.stories.js CHANGED
@@ -4,4 +4,5 @@ export default {
4
4
  export { WithSomeInputs } from './__stories__/with-some-inputs.js';
5
5
  export { WithAdditionalContent } from './__stories__/with-right-hand-side-content.js';
6
6
  export { KeepOrgUnitExpanded } from './__stories__/keep-org-unit-expanded.js';
7
- export { WithMultipleRows } from './__stories__/with-multiple-rows.js';
7
+ export { WithMultipleRows } from './__stories__/with-multiple-rows.js';
8
+ export { RTL } from './__stories__/rtl.js';
package/build/es/selector-bar-item/selector-bar-item.js CHANGED
@@ -45,37 +45,37 @@ export const SelectorBarItem = _ref => {
45
45
  disabled: disabled,
46
46
  onClick: () => setOpen && setOpen(true),
47
47
  "data-test": dataTest,
48
- className: _JSXStyle.dynamic([["1019748909", [
48
+ className: _JSXStyle.dynamic([["4226485334", [
49
49
  /*
50
50
  * The arrow icon has ~4px empty space on the sides,
51
51
  * that's why the padding on the right is only 8px.
52
52
  */
53
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' : '') || "")
54
54
  }, /*#__PURE__*/React.createElement("span", {
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"
55
+ className: _JSXStyle.dynamic([["4226485334", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]]) + " " + "label"
56
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"
57
+ className: _JSXStyle.dynamic([["4226485334", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]]) + " " + "value"
58
58
  }, value || noValueMessage), value && onClearSelectionClick && /*#__PURE__*/React.createElement("span", {
59
59
  onClick: evt => {
60
60
  evt.stopPropagation();
61
61
  onClearSelectionClick();
62
62
  },
63
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"
64
+ className: _JSXStyle.dynamic([["4226485334", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]]) + " " + "clear-icon"
65
65
  }, /*#__PURE__*/React.createElement("svg", {
66
66
  width: "14",
67
67
  height: "14",
68
68
  viewBox: "0 0 14 14",
69
69
  fill: "none",
70
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]]])
71
+ className: _JSXStyle.dynamic([["4226485334", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]])
72
72
  }, /*#__PURE__*/React.createElement("path", {
73
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]]])
74
+ className: _JSXStyle.dynamic([["4226485334", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]])
75
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"
76
+ className: _JSXStyle.dynamic([["4226485334", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]]) + " " + "toggle-icon"
77
77
  }, /*#__PURE__*/React.createElement(Icon, {
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]]])
78
+ className: _JSXStyle.dynamic([["4226485334", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4, spacers.dp4, colors.grey500, colors.grey700, spacers.dp4]]])
79
79
  })), open && /*#__PURE__*/React.createElement(Layer, {
80
80
  onBackdropClick: (_, evt) => {
81
81
  evt.stopPropagation();
@@ -86,9 +86,9 @@ export const SelectorBarItem = _ref => {
86
86
  placement: "bottom-start",
87
87
  modifiers: [offsetModifier]
88
88
  }, /*#__PURE__*/React.createElement(Card, null, children))), /*#__PURE__*/React.createElement(_JSXStyle, {
89
- id: "1019748909",
89
+ id: "4226485334",
90
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;}")]));
91
+ }, [".selector-bar-item.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:none;height:40px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;".concat(" padding-block:0;padding-inline-start:", spacers.dp8, ";padding-inline-end:").concat(spacers.dp12, ";font-size:14px;line-height:16px;border:none;box-shadow:0px 0px 0px 1px ").concat(colors.grey400, ";}"), ".selector-bar-item.openable.__jsx-style-dynamic-selector{cursor:pointer;}", ".selector-bar-item.__jsx-style-dynamic-selector:disabled{cursor:not-allowed;}", ".label.__jsx-style-dynamic-selector{color:".concat(colors.grey600, ";}"), ".value.__jsx-style-dynamic-selector{padding-inline-start:".concat(spacers.dp8, ";}"), ".clear-icon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-inline-start:".concat(spacers.dp4, ";padding:").concat(spacers.dp4, ";cursor:pointer;}"), ".clear-icon.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector path.__jsx-style-dynamic-selector{fill:".concat(colors.grey500, ";}"), ".clear-icon.__jsx-style-dynamic-selector:hover svg.__jsx-style-dynamic-selector path.__jsx-style-dynamic-selector{fill:".concat(colors.grey700, ";}"), ".toggle-icon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-inline-start:".concat(spacers.dp4, ";height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}")]));
92
92
  };
93
93
  SelectorBarItem.defaultProps = {
94
94
  dataTest: 'dhis2-ui-selectorbaritem'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/selector-bar",
3
- "version": "9.3.0",
3
+ "version": "9.4.0-alpha.2",
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.3.0",
37
- "@dhis2-ui/card": "9.3.0",
38
- "@dhis2-ui/popper": "9.3.0",
39
- "@dhis2-ui/layer": "9.3.0",
40
- "@dhis2/ui-constants": "9.3.0",
41
- "@dhis2/ui-icons": "9.3.0",
36
+ "@dhis2-ui/button": "9.4.0-alpha.2",
37
+ "@dhis2-ui/card": "9.4.0-alpha.2",
38
+ "@dhis2-ui/popper": "9.4.0-alpha.2",
39
+ "@dhis2-ui/layer": "9.4.0-alpha.2",
40
+ "@dhis2/ui-constants": "9.4.0-alpha.2",
41
+ "@dhis2/ui-icons": "9.4.0-alpha.2",
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.3.0",
48
- "@dhis2-ui/menu": "9.3.0",
49
- "@dhis2-ui/organisation-unit-tree": "9.3.0",
50
- "@dhis2-ui/select": "9.3.0",
47
+ "@dhis2-ui/css": "9.4.0-alpha.2",
48
+ "@dhis2-ui/menu": "9.4.0-alpha.2",
49
+ "@dhis2-ui/organisation-unit-tree": "9.4.0-alpha.2",
50
+ "@dhis2-ui/select": "9.4.0-alpha.2",
51
51
  "@dhis2/d2-i18n": "^1.1.0",
52
52
  "@testing-library/jest-dom": "^5.16.1",
53
53
  "react": "16.13",