@dhis2/analytics 26.3.0-alpha.2 → 26.3.0-alpha.3

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/components/DimensionsPanel/List/DimensionItem.js +20 -16
  2. package/build/cjs/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap +79 -26
  3. package/build/cjs/components/DimensionsPanel/List/styles/DimensionItem.style.js +11 -0
  4. package/build/es/components/DimensionsPanel/List/DimensionItem.js +20 -16
  5. package/build/es/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap +79 -26
  6. package/build/es/components/DimensionsPanel/List/styles/DimensionItem.style.js +4 -0
  7. package/package.json +1 -1
  8. package/build/cjs/components/DimensionsPanel/List/styles/DimensionItem.module.css +0 -83
  9. package/build/es/components/DimensionsPanel/List/styles/DimensionItem.module.css +0 -83
package/build/cjs/components/DimensionsPanel/List/DimensionItem.js CHANGED
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
+ var _style = _interopRequireDefault(require("styled-jsx/style"));
7
8
  var _ui = require("@dhis2/ui");
8
9
  var _classnames = _interopRequireDefault(require("classnames"));
9
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -12,7 +13,7 @@ var _DynamicDimensionIcon = _interopRequireDefault(require("../../../assets/Dyna
12
13
  var _predefinedDimensions = require("../../../modules/predefinedDimensions.js");
13
14
  var _OptionsButton = _interopRequireDefault(require("./OptionsButton.js"));
14
15
  var _RecommendedIcon = _interopRequireDefault(require("./RecommendedIcon.js"));
15
- var _DimensionItemModule = _interopRequireDefault(require("./styles/DimensionItem.module.css"));
16
+ var _DimensionItemStyle = _interopRequireDefault(require("./styles/DimensionItem.style.js"));
16
17
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
17
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; }
18
19
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -40,7 +41,7 @@ class DimensionItem extends _react.Component {
40
41
  _defineProperty(this, "getDimensionIcon", () => {
41
42
  const Icon = (0, _predefinedDimensions.getPredefinedDimensionProp)(this.props.id, 'icon');
42
43
  return Icon ? /*#__PURE__*/_react.default.createElement(Icon, {
43
- className: _DimensionItemModule.default.fixedDimensionIcon
44
+ className: "fixedDimensionIcon"
44
45
  }) : /*#__PURE__*/_react.default.createElement(_DynamicDimensionIcon.default, {
45
46
  className: "dynamic-dimension-icon"
46
47
  });
@@ -94,34 +95,37 @@ class DimensionItem extends _react.Component {
94
95
  onMouseOver: this.onMouseOver,
95
96
  onMouseLeave: this.onMouseExit,
96
97
  ref: innerRef,
97
- className: (0, _classnames.default)(_DimensionItemModule.default.item, {
98
- [_DimensionItemModule.default.deactivated]: isDeactivated,
99
- [_DimensionItemModule.default.selected]: isSelected && !isDeactivated
100
- }, className),
101
98
  "data-test": dataTest,
102
99
  onClick: onLabelClick
103
- }, rest), /*#__PURE__*/_react.default.createElement("div", {
104
- className: _DimensionItemModule.default.label,
100
+ }, rest, {
101
+ className: `jsx-${_DimensionItemStyle.default.__hash}` + " " + (rest && rest.className != null && rest.className || (0, _classnames.default)('item', {
102
+ deactivated: isDeactivated,
103
+ selected: isSelected && !isDeactivated
104
+ }, className) || "")
105
+ }), /*#__PURE__*/_react.default.createElement("div", {
105
106
  tabIndex: 0,
106
- "data-test": `${dataTest}-button-${id}`
107
+ "data-test": `${dataTest}-button-${id}`,
108
+ className: `jsx-${_DimensionItemStyle.default.__hash}` + " " + "label"
107
109
  }, /*#__PURE__*/_react.default.createElement("div", {
108
- className: _DimensionItemModule.default.iconWrapper
110
+ className: `jsx-${_DimensionItemStyle.default.__hash}` + " " + "iconWrapper"
109
111
  }, Icon), /*#__PURE__*/_react.default.createElement("div", {
110
- className: _DimensionItemModule.default.labelWrapper
112
+ className: `jsx-${_DimensionItemStyle.default.__hash}` + " " + "labelWrapper"
111
113
  }, /*#__PURE__*/_react.default.createElement("span", {
112
- className: _DimensionItemModule.default.labelText
114
+ className: `jsx-${_DimensionItemStyle.default.__hash}` + " " + "labelText"
113
115
  }, Label), /*#__PURE__*/_react.default.createElement(_RecommendedIcon.default, {
114
116
  isRecommended: isRecommended,
115
117
  dataTest: `${dataTest}-recommended-icon`
116
118
  }))), onOptionsClick ? /*#__PURE__*/_react.default.createElement("div", {
117
- className: _DimensionItemModule.default.optionsWrapper,
118
119
  ref: optionsRef,
119
- "data-test": `${dataTest}-menu-${id}`
120
+ "data-test": `${dataTest}-menu-${id}`,
121
+ className: `jsx-${_DimensionItemStyle.default.__hash}` + " " + "optionsWrapper"
120
122
  }, this.state.mouseOver && !isDeactivated && !isLocked ? /*#__PURE__*/_react.default.createElement(_OptionsButton.default, {
121
123
  onClick: this.onOptionsClick(id, optionsRef)
122
124
  }) : null) : null, isLocked && /*#__PURE__*/_react.default.createElement("div", {
123
- className: _DimensionItemModule.default.lockWrapper
124
- }, LockIcon)));
125
+ className: `jsx-${_DimensionItemStyle.default.__hash}` + " " + "lockWrapper"
126
+ }, LockIcon)), /*#__PURE__*/_react.default.createElement(_style.default, {
127
+ id: _DimensionItemStyle.default.__hash
128
+ }, _DimensionItemStyle.default));
125
129
  }
126
130
  }
127
131
  DimensionItem.propTypes = {
package/build/cjs/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap CHANGED
@@ -10,7 +10,7 @@ exports[`DimensionItem matches the snapshot 1`] = `
10
10
  theme={false}
11
11
  />
12
12
  <li
13
- className=""
13
+ className="item"
14
14
  name="Period"
15
15
  onClick={[Function]}
16
16
  onMouseLeave={[Function]}
@@ -18,14 +18,23 @@ exports[`DimensionItem matches the snapshot 1`] = `
18
18
  style={Object {}}
19
19
  >
20
20
  <div
21
+ className="label"
21
22
  data-test="undefined-button-pe"
22
23
  tabIndex={0}
23
24
  >
24
- <div>
25
- <SvgClock16 />
25
+ <div
26
+ className="iconWrapper"
27
+ >
28
+ <SvgClock16
29
+ className="fixedDimensionIcon"
30
+ />
26
31
  </div>
27
- <div>
28
- <span>
32
+ <div
33
+ className="labelWrapper"
34
+ >
35
+ <span
36
+ className="labelText"
37
+ >
29
38
  <span
30
39
  data-dimensionid="pe"
31
40
  >
@@ -39,6 +48,7 @@ exports[`DimensionItem matches the snapshot 1`] = `
39
48
  </div>
40
49
  </div>
41
50
  </li>
51
+ <style />
42
52
  </Fragment>
43
53
  `;
44
54
 
@@ -52,7 +62,7 @@ exports[`DimensionItem matches the snapshot with locked 1`] = `
52
62
  theme={false}
53
63
  />
54
64
  <li
55
- className=""
65
+ className="item"
56
66
  name="Period"
57
67
  onClick={[Function]}
58
68
  onMouseLeave={[Function]}
@@ -60,14 +70,23 @@ exports[`DimensionItem matches the snapshot with locked 1`] = `
60
70
  style={Object {}}
61
71
  >
62
72
  <div
73
+ className="label"
63
74
  data-test="undefined-button-pe"
64
75
  tabIndex={0}
65
76
  >
66
- <div>
67
- <SvgClock16 />
77
+ <div
78
+ className="iconWrapper"
79
+ >
80
+ <SvgClock16
81
+ className="fixedDimensionIcon"
82
+ />
68
83
  </div>
69
- <div>
70
- <span>
84
+ <div
85
+ className="labelWrapper"
86
+ >
87
+ <span
88
+ className="labelText"
89
+ >
71
90
  <span
72
91
  data-dimensionid="pe"
73
92
  >
@@ -80,7 +99,9 @@ exports[`DimensionItem matches the snapshot with locked 1`] = `
80
99
  />
81
100
  </div>
82
101
  </div>
83
- <div>
102
+ <div
103
+ className="lockWrapper"
104
+ >
84
105
  <svg
85
106
  fill="none"
86
107
  height="9"
@@ -96,6 +117,7 @@ exports[`DimensionItem matches the snapshot with locked 1`] = `
96
117
  </svg>
97
118
  </div>
98
119
  </li>
120
+ <style />
99
121
  </Fragment>
100
122
  `;
101
123
 
@@ -109,7 +131,7 @@ exports[`DimensionItem matches the snapshot with onOptionsClick 1`] = `
109
131
  theme={false}
110
132
  />
111
133
  <li
112
- className=""
134
+ className="item"
113
135
  name="Period"
114
136
  onClick={[Function]}
115
137
  onMouseLeave={[Function]}
@@ -117,14 +139,23 @@ exports[`DimensionItem matches the snapshot with onOptionsClick 1`] = `
117
139
  style={Object {}}
118
140
  >
119
141
  <div
142
+ className="label"
120
143
  data-test="undefined-button-pe"
121
144
  tabIndex={0}
122
145
  >
123
- <div>
124
- <SvgClock16 />
146
+ <div
147
+ className="iconWrapper"
148
+ >
149
+ <SvgClock16
150
+ className="fixedDimensionIcon"
151
+ />
125
152
  </div>
126
- <div>
127
- <span>
153
+ <div
154
+ className="labelWrapper"
155
+ >
156
+ <span
157
+ className="labelText"
158
+ >
128
159
  <span
129
160
  data-dimensionid="pe"
130
161
  >
@@ -138,9 +169,11 @@ exports[`DimensionItem matches the snapshot with onOptionsClick 1`] = `
138
169
  </div>
139
170
  </div>
140
171
  <div
172
+ className="optionsWrapper"
141
173
  data-test="undefined-menu-pe"
142
174
  />
143
175
  </li>
176
+ <style />
144
177
  </Fragment>
145
178
  `;
146
179
 
@@ -154,7 +187,7 @@ exports[`DimensionItem matches the snapshot with recommended 1`] = `
154
187
  theme={false}
155
188
  />
156
189
  <li
157
- className=""
190
+ className="item"
158
191
  name="Period"
159
192
  onClick={[Function]}
160
193
  onMouseLeave={[Function]}
@@ -162,14 +195,23 @@ exports[`DimensionItem matches the snapshot with recommended 1`] = `
162
195
  style={Object {}}
163
196
  >
164
197
  <div
198
+ className="label"
165
199
  data-test="undefined-button-pe"
166
200
  tabIndex={0}
167
201
  >
168
- <div>
169
- <SvgClock16 />
202
+ <div
203
+ className="iconWrapper"
204
+ >
205
+ <SvgClock16
206
+ className="fixedDimensionIcon"
207
+ />
170
208
  </div>
171
- <div>
172
- <span>
209
+ <div
210
+ className="labelWrapper"
211
+ >
212
+ <span
213
+ className="labelText"
214
+ >
173
215
  <span
174
216
  data-dimensionid="pe"
175
217
  >
@@ -183,6 +225,7 @@ exports[`DimensionItem matches the snapshot with recommended 1`] = `
183
225
  </div>
184
226
  </div>
185
227
  </li>
228
+ <style />
186
229
  </Fragment>
187
230
  `;
188
231
 
@@ -196,7 +239,7 @@ exports[`DimensionItem matches the snapshot with selected 1`] = `
196
239
  theme={false}
197
240
  />
198
241
  <li
199
- className="undefined"
242
+ className="item selected"
200
243
  name="Period"
201
244
  onClick={[Function]}
202
245
  onMouseLeave={[Function]}
@@ -204,14 +247,23 @@ exports[`DimensionItem matches the snapshot with selected 1`] = `
204
247
  style={Object {}}
205
248
  >
206
249
  <div
250
+ className="label"
207
251
  data-test="undefined-button-pe"
208
252
  tabIndex={0}
209
253
  >
210
- <div>
211
- <SvgClock16 />
254
+ <div
255
+ className="iconWrapper"
256
+ >
257
+ <SvgClock16
258
+ className="fixedDimensionIcon"
259
+ />
212
260
  </div>
213
- <div>
214
- <span>
261
+ <div
262
+ className="labelWrapper"
263
+ >
264
+ <span
265
+ className="labelText"
266
+ >
215
267
  <span
216
268
  data-dimensionid="pe"
217
269
  >
@@ -225,5 +277,6 @@ exports[`DimensionItem matches the snapshot with selected 1`] = `
225
277
  </div>
226
278
  </div>
227
279
  </li>
280
+ <style />
228
281
  </Fragment>
229
282
  `;
package/build/cjs/components/DimensionsPanel/List/styles/DimensionItem.style.js ADDED
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _ui = require("@dhis2/ui");
8
+ const _defaultExport = [`.item.jsx-3528757313{color:${_ui.colors.grey900};background-color:transparent;fill:${_ui.colors.grey800};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;outline:none;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding:0 0 0 4px;margin:0;border-radius:2px;cursor:pointer;min-height:22px;border:1px solid transparent;}`, `.item.jsx-3528757313:not(.deactivated):not(.dragging):hover{background-color:${_ui.colors.grey100};border-color:${_ui.colors.grey400};}`, ".label.jsx-3528757313{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;}", ".labelWrapper.jsx-3528757313{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;}", ".labelText.jsx-3528757313{font-size:13px;line-height:15px;margin-top:1px;}", ".iconWrapper.jsx-3528757313{width:16px;height:16px;margin:2px 4px 0 0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;}", ".item.deactivated.jsx-3528757313{opacity:0.5;cursor:not-allowed;}", `.item.selected.jsx-3528757313{background-color:${_ui.colors.teal100};border:1px solid ${_ui.colors.teal200};color:${_ui.colors.teal900};fill:${_ui.colors.teal800};font-weight:400;}`, ".item.selected.jsx-3528757313:not(.deactivated):hover{background:#cdeae8;border-color:#93c4bf;box-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);}", ".optionsWrapper.jsx-3528757313{width:20px;height:20px;}", `.lockWrapper.jsx-3528757313 svg.jsx-3528757313 path.jsx-3528757313{fill:${_ui.colors.grey800};}`, `.lockWrapper.jsx-3528757313{background:${_ui.colors.grey300};height:20px;padding:0 1px 0 2px;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;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}`, ".item.selected.jsx-3528757313 .lockWrapper.jsx-3528757313{background:#cbe7e5;}", `.item.selected.jsx-3528757313 .lockWrapper.jsx-3528757313 svg.jsx-3528757313 path.jsx-3528757313{fill:${_ui.colors.teal900};}`];
9
+ _defaultExport.__hash = "3528757313";
10
+ var _default = _defaultExport;
11
+ exports.default = _default;
package/build/es/components/DimensionsPanel/List/DimensionItem.js CHANGED
@@ -1,3 +1,4 @@
1
+ import _JSXStyle from "styled-jsx/style";
1
2
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
3
  function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
3
4
  function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
@@ -10,7 +11,7 @@ import DynamicDimensionIcon from '../../../assets/DynamicDimensionIcon.js';
10
11
  import { DIMENSION_PROP_NO_ITEMS, getPredefinedDimensionProp } from '../../../modules/predefinedDimensions.js';
11
12
  import OptionsButton from './OptionsButton.js';
12
13
  import RecommendedIcon from './RecommendedIcon.js';
13
- import style from './styles/DimensionItem.module.css';
14
+ import styles from './styles/DimensionItem.style.js';
14
15
  class DimensionItem extends Component {
15
16
  constructor() {
16
17
  super(...arguments);
@@ -31,7 +32,7 @@ class DimensionItem extends Component {
31
32
  _defineProperty(this, "getDimensionIcon", () => {
32
33
  const Icon = getPredefinedDimensionProp(this.props.id, 'icon');
33
34
  return Icon ? /*#__PURE__*/React.createElement(Icon, {
34
- className: style.fixedDimensionIcon
35
+ className: "fixedDimensionIcon"
35
36
  }) : /*#__PURE__*/React.createElement(DynamicDimensionIcon, {
36
37
  className: "dynamic-dimension-icon"
37
38
  });
@@ -85,34 +86,37 @@ class DimensionItem extends Component {
85
86
  onMouseOver: this.onMouseOver,
86
87
  onMouseLeave: this.onMouseExit,
87
88
  ref: innerRef,
88
- className: cx(style.item, {
89
- [style.deactivated]: isDeactivated,
90
- [style.selected]: isSelected && !isDeactivated
91
- }, className),
92
89
  "data-test": dataTest,
93
90
  onClick: onLabelClick
94
- }, rest), /*#__PURE__*/React.createElement("div", {
95
- className: style.label,
91
+ }, rest, {
92
+ className: `jsx-${styles.__hash}` + " " + (rest && rest.className != null && rest.className || cx('item', {
93
+ deactivated: isDeactivated,
94
+ selected: isSelected && !isDeactivated
95
+ }, className) || "")
96
+ }), /*#__PURE__*/React.createElement("div", {
96
97
  tabIndex: 0,
97
- "data-test": `${dataTest}-button-${id}`
98
+ "data-test": `${dataTest}-button-${id}`,
99
+ className: `jsx-${styles.__hash}` + " " + "label"
98
100
  }, /*#__PURE__*/React.createElement("div", {
99
- className: style.iconWrapper
101
+ className: `jsx-${styles.__hash}` + " " + "iconWrapper"
100
102
  }, Icon), /*#__PURE__*/React.createElement("div", {
101
- className: style.labelWrapper
103
+ className: `jsx-${styles.__hash}` + " " + "labelWrapper"
102
104
  }, /*#__PURE__*/React.createElement("span", {
103
- className: style.labelText
105
+ className: `jsx-${styles.__hash}` + " " + "labelText"
104
106
  }, Label), /*#__PURE__*/React.createElement(RecommendedIcon, {
105
107
  isRecommended: isRecommended,
106
108
  dataTest: `${dataTest}-recommended-icon`
107
109
  }))), onOptionsClick ? /*#__PURE__*/React.createElement("div", {
108
- className: style.optionsWrapper,
109
110
  ref: optionsRef,
110
- "data-test": `${dataTest}-menu-${id}`
111
+ "data-test": `${dataTest}-menu-${id}`,
112
+ className: `jsx-${styles.__hash}` + " " + "optionsWrapper"
111
113
  }, this.state.mouseOver && !isDeactivated && !isLocked ? /*#__PURE__*/React.createElement(OptionsButton, {
112
114
  onClick: this.onOptionsClick(id, optionsRef)
113
115
  }) : null) : null, isLocked && /*#__PURE__*/React.createElement("div", {
114
- className: style.lockWrapper
115
- }, LockIcon)));
116
+ className: `jsx-${styles.__hash}` + " " + "lockWrapper"
117
+ }, LockIcon)), /*#__PURE__*/React.createElement(_JSXStyle, {
118
+ id: styles.__hash
119
+ }, styles));
116
120
  }
117
121
  }
118
122
  DimensionItem.propTypes = {
package/build/es/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap CHANGED
@@ -10,7 +10,7 @@ exports[`DimensionItem matches the snapshot 1`] = `
10
10
  theme={false}
11
11
  />
12
12
  <li
13
- className=""
13
+ className="item"
14
14
  name="Period"
15
15
  onClick={[Function]}
16
16
  onMouseLeave={[Function]}
@@ -18,14 +18,23 @@ exports[`DimensionItem matches the snapshot 1`] = `
18
18
  style={Object {}}
19
19
  >
20
20
  <div
21
+ className="label"
21
22
  data-test="undefined-button-pe"
22
23
  tabIndex={0}
23
24
  >
24
- <div>
25
- <SvgClock16 />
25
+ <div
26
+ className="iconWrapper"
27
+ >
28
+ <SvgClock16
29
+ className="fixedDimensionIcon"
30
+ />
26
31
  </div>
27
- <div>
28
- <span>
32
+ <div
33
+ className="labelWrapper"
34
+ >
35
+ <span
36
+ className="labelText"
37
+ >
29
38
  <span
30
39
  data-dimensionid="pe"
31
40
  >
@@ -39,6 +48,7 @@ exports[`DimensionItem matches the snapshot 1`] = `
39
48
  </div>
40
49
  </div>
41
50
  </li>
51
+ <style />
42
52
  </Fragment>
43
53
  `;
44
54
 
@@ -52,7 +62,7 @@ exports[`DimensionItem matches the snapshot with locked 1`] = `
52
62
  theme={false}
53
63
  />
54
64
  <li
55
- className=""
65
+ className="item"
56
66
  name="Period"
57
67
  onClick={[Function]}
58
68
  onMouseLeave={[Function]}
@@ -60,14 +70,23 @@ exports[`DimensionItem matches the snapshot with locked 1`] = `
60
70
  style={Object {}}
61
71
  >
62
72
  <div
73
+ className="label"
63
74
  data-test="undefined-button-pe"
64
75
  tabIndex={0}
65
76
  >
66
- <div>
67
- <SvgClock16 />
77
+ <div
78
+ className="iconWrapper"
79
+ >
80
+ <SvgClock16
81
+ className="fixedDimensionIcon"
82
+ />
68
83
  </div>
69
- <div>
70
- <span>
84
+ <div
85
+ className="labelWrapper"
86
+ >
87
+ <span
88
+ className="labelText"
89
+ >
71
90
  <span
72
91
  data-dimensionid="pe"
73
92
  >
@@ -80,7 +99,9 @@ exports[`DimensionItem matches the snapshot with locked 1`] = `
80
99
  />
81
100
  </div>
82
101
  </div>
83
- <div>
102
+ <div
103
+ className="lockWrapper"
104
+ >
84
105
  <svg
85
106
  fill="none"
86
107
  height="9"
@@ -96,6 +117,7 @@ exports[`DimensionItem matches the snapshot with locked 1`] = `
96
117
  </svg>
97
118
  </div>
98
119
  </li>
120
+ <style />
99
121
  </Fragment>
100
122
  `;
101
123
 
@@ -109,7 +131,7 @@ exports[`DimensionItem matches the snapshot with onOptionsClick 1`] = `
109
131
  theme={false}
110
132
  />
111
133
  <li
112
- className=""
134
+ className="item"
113
135
  name="Period"
114
136
  onClick={[Function]}
115
137
  onMouseLeave={[Function]}
@@ -117,14 +139,23 @@ exports[`DimensionItem matches the snapshot with onOptionsClick 1`] = `
117
139
  style={Object {}}
118
140
  >
119
141
  <div
142
+ className="label"
120
143
  data-test="undefined-button-pe"
121
144
  tabIndex={0}
122
145
  >
123
- <div>
124
- <SvgClock16 />
146
+ <div
147
+ className="iconWrapper"
148
+ >
149
+ <SvgClock16
150
+ className="fixedDimensionIcon"
151
+ />
125
152
  </div>
126
- <div>
127
- <span>
153
+ <div
154
+ className="labelWrapper"
155
+ >
156
+ <span
157
+ className="labelText"
158
+ >
128
159
  <span
129
160
  data-dimensionid="pe"
130
161
  >
@@ -138,9 +169,11 @@ exports[`DimensionItem matches the snapshot with onOptionsClick 1`] = `
138
169
  </div>
139
170
  </div>
140
171
  <div
172
+ className="optionsWrapper"
141
173
  data-test="undefined-menu-pe"
142
174
  />
143
175
  </li>
176
+ <style />
144
177
  </Fragment>
145
178
  `;
146
179
 
@@ -154,7 +187,7 @@ exports[`DimensionItem matches the snapshot with recommended 1`] = `
154
187
  theme={false}
155
188
  />
156
189
  <li
157
- className=""
190
+ className="item"
158
191
  name="Period"
159
192
  onClick={[Function]}
160
193
  onMouseLeave={[Function]}
@@ -162,14 +195,23 @@ exports[`DimensionItem matches the snapshot with recommended 1`] = `
162
195
  style={Object {}}
163
196
  >
164
197
  <div
198
+ className="label"
165
199
  data-test="undefined-button-pe"
166
200
  tabIndex={0}
167
201
  >
168
- <div>
169
- <SvgClock16 />
202
+ <div
203
+ className="iconWrapper"
204
+ >
205
+ <SvgClock16
206
+ className="fixedDimensionIcon"
207
+ />
170
208
  </div>
171
- <div>
172
- <span>
209
+ <div
210
+ className="labelWrapper"
211
+ >
212
+ <span
213
+ className="labelText"
214
+ >
173
215
  <span
174
216
  data-dimensionid="pe"
175
217
  >
@@ -183,6 +225,7 @@ exports[`DimensionItem matches the snapshot with recommended 1`] = `
183
225
  </div>
184
226
  </div>
185
227
  </li>
228
+ <style />
186
229
  </Fragment>
187
230
  `;
188
231
 
@@ -196,7 +239,7 @@ exports[`DimensionItem matches the snapshot with selected 1`] = `
196
239
  theme={false}
197
240
  />
198
241
  <li
199
- className="undefined"
242
+ className="item selected"
200
243
  name="Period"
201
244
  onClick={[Function]}
202
245
  onMouseLeave={[Function]}
@@ -204,14 +247,23 @@ exports[`DimensionItem matches the snapshot with selected 1`] = `
204
247
  style={Object {}}
205
248
  >
206
249
  <div
250
+ className="label"
207
251
  data-test="undefined-button-pe"
208
252
  tabIndex={0}
209
253
  >
210
- <div>
211
- <SvgClock16 />
254
+ <div
255
+ className="iconWrapper"
256
+ >
257
+ <SvgClock16
258
+ className="fixedDimensionIcon"
259
+ />
212
260
  </div>
213
- <div>
214
- <span>
261
+ <div
262
+ className="labelWrapper"
263
+ >
264
+ <span
265
+ className="labelText"
266
+ >
215
267
  <span
216
268
  data-dimensionid="pe"
217
269
  >
@@ -225,5 +277,6 @@ exports[`DimensionItem matches the snapshot with selected 1`] = `
225
277
  </div>
226
278
  </div>
227
279
  </li>
280
+ <style />
228
281
  </Fragment>
229
282
  `;
package/build/es/components/DimensionsPanel/List/styles/DimensionItem.style.js ADDED
@@ -0,0 +1,4 @@
1
+ import { colors } from '@dhis2/ui';
2
+ const _defaultExport = [`.item.jsx-3528757313{color:${colors.grey900};background-color:transparent;fill:${colors.grey800};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;outline:none;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding:0 0 0 4px;margin:0;border-radius:2px;cursor:pointer;min-height:22px;border:1px solid transparent;}`, `.item.jsx-3528757313:not(.deactivated):not(.dragging):hover{background-color:${colors.grey100};border-color:${colors.grey400};}`, ".label.jsx-3528757313{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;}", ".labelWrapper.jsx-3528757313{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;}", ".labelText.jsx-3528757313{font-size:13px;line-height:15px;margin-top:1px;}", ".iconWrapper.jsx-3528757313{width:16px;height:16px;margin:2px 4px 0 0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;}", ".item.deactivated.jsx-3528757313{opacity:0.5;cursor:not-allowed;}", `.item.selected.jsx-3528757313{background-color:${colors.teal100};border:1px solid ${colors.teal200};color:${colors.teal900};fill:${colors.teal800};font-weight:400;}`, ".item.selected.jsx-3528757313:not(.deactivated):hover{background:#cdeae8;border-color:#93c4bf;box-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);}", ".optionsWrapper.jsx-3528757313{width:20px;height:20px;}", `.lockWrapper.jsx-3528757313 svg.jsx-3528757313 path.jsx-3528757313{fill:${colors.grey800};}`, `.lockWrapper.jsx-3528757313{background:${colors.grey300};height:20px;padding:0 1px 0 2px;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;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}`, ".item.selected.jsx-3528757313 .lockWrapper.jsx-3528757313{background:#cbe7e5;}", `.item.selected.jsx-3528757313 .lockWrapper.jsx-3528757313 svg.jsx-3528757313 path.jsx-3528757313{fill:${colors.teal900};}`];
3
+ _defaultExport.__hash = "3528757313";
4
+ export default _defaultExport;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2/analytics",
3
- "version": "26.3.0-alpha.2",
3
+ "version": "26.3.0-alpha.3",
4
4
  "main": "./build/cjs/index.js",
5
5
  "module": "./build/es/index.js",
6
6
  "exports": {
package/build/cjs/components/DimensionsPanel/List/styles/DimensionItem.module.css DELETED
@@ -1,83 +0,0 @@
1
- .item {
2
- color: var(--colors-grey900);
3
- background-color: transparent;
4
- fill: var(--colors-grey800);
5
- display: flex;
6
- outline: none;
7
- justify-content: space-between;
8
- padding: 0 0 0 4px;
9
- margin: 0;
10
- border-radius: 2px;
11
- cursor: pointer;
12
- min-height: 22px;
13
- border: 1px solid transparent;
14
- }
15
-
16
- .item:not(.deactivated):not(.dragging):hover {
17
- background-color: var(--colors-grey100);
18
- border-color: var(--colors-grey400);
19
- }
20
-
21
- .label {
22
- display: flex;
23
- align-items: center;
24
- }
25
- .labelWrapper {
26
- display: flex;
27
- align-items: center;
28
- }
29
- .labelText {
30
- font-size: 13px;
31
- line-height: 15px;
32
- margin-top: 1px;
33
- }
34
-
35
- .iconWrapper {
36
- width: 16px;
37
- height: 16px;
38
- margin: 2px 4px 0 0;
39
- flex: 0 0 auto;
40
- align-self: flex-start;
41
- }
42
-
43
- .item.deactivated {
44
- opacity: 0.5;
45
- cursor: not-allowed;
46
- }
47
- .item.selected {
48
- background-color: var(--colors-teal100);
49
- border: 1px solid var(--colors-teal200);
50
- color: var(--colors-teal900);
51
- fill: var(--colors-teal800);
52
- font-weight: 400;
53
- }
54
- .item.selected:not(.deactivated):hover {
55
- background: #cdeae8;
56
- border-color: #93c4bf;
57
- box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
58
- }
59
-
60
- .optionsWrapper {
61
- width: 20px;
62
- height: 20px;
63
- }
64
-
65
- .lockWrapper svg path {
66
- fill: var(--colors-grey800);
67
- }
68
-
69
- .lockWrapper {
70
- background: var(--colors-grey300);
71
- height: 20px;
72
- padding: 0 1px 0 2px;
73
- display: flex;
74
- align-items: center;
75
- justify-content: center;
76
- }
77
-
78
- .item.selected .lockWrapper {
79
- background: #cbe7e5;
80
- }
81
- .item.selected .lockWrapper svg path {
82
- fill: var(--colors-teal900);
83
- }
package/build/es/components/DimensionsPanel/List/styles/DimensionItem.module.css DELETED
@@ -1,83 +0,0 @@
1
- .item {
2
- color: var(--colors-grey900);
3
- background-color: transparent;
4
- fill: var(--colors-grey800);
5
- display: flex;
6
- outline: none;
7
- justify-content: space-between;
8
- padding: 0 0 0 4px;
9
- margin: 0;
10
- border-radius: 2px;
11
- cursor: pointer;
12
- min-height: 22px;
13
- border: 1px solid transparent;
14
- }
15
-
16
- .item:not(.deactivated):not(.dragging):hover {
17
- background-color: var(--colors-grey100);
18
- border-color: var(--colors-grey400);
19
- }
20
-
21
- .label {
22
- display: flex;
23
- align-items: center;
24
- }
25
- .labelWrapper {
26
- display: flex;
27
- align-items: center;
28
- }
29
- .labelText {
30
- font-size: 13px;
31
- line-height: 15px;
32
- margin-top: 1px;
33
- }
34
-
35
- .iconWrapper {
36
- width: 16px;
37
- height: 16px;
38
- margin: 2px 4px 0 0;
39
- flex: 0 0 auto;
40
- align-self: flex-start;
41
- }
42
-
43
- .item.deactivated {
44
- opacity: 0.5;
45
- cursor: not-allowed;
46
- }
47
- .item.selected {
48
- background-color: var(--colors-teal100);
49
- border: 1px solid var(--colors-teal200);
50
- color: var(--colors-teal900);
51
- fill: var(--colors-teal800);
52
- font-weight: 400;
53
- }
54
- .item.selected:not(.deactivated):hover {
55
- background: #cdeae8;
56
- border-color: #93c4bf;
57
- box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
58
- }
59
-
60
- .optionsWrapper {
61
- width: 20px;
62
- height: 20px;
63
- }
64
-
65
- .lockWrapper svg path {
66
- fill: var(--colors-grey800);
67
- }
68
-
69
- .lockWrapper {
70
- background: var(--colors-grey300);
71
- height: 20px;
72
- padding: 0 1px 0 2px;
73
- display: flex;
74
- align-items: center;
75
- justify-content: center;
76
- }
77
-
78
- .item.selected .lockWrapper {
79
- background: #cbe7e5;
80
- }
81
- .item.selected .lockWrapper svg path {
82
- fill: var(--colors-teal900);
83
- }