@sis-cc/dotstatsuite-visions 12.26.0 → 12.26.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 (6) hide show
  1. package/es/DynamicDrawer/DynamicDrawer.js +29 -20
  2. package/lib/DynamicDrawer/DynamicDrawer.js +28 -19
  3. package/package.json +16 -19
  4. package/umd/@sis-cc/dotstatsuite-visions.js +5090 -4412
  5. package/umd/@sis-cc/dotstatsuite-visions.min.js +33 -24
  6. package/umd/@sis-cc/dotstatsuite-visions.min.js.map +1 -1
package/es/DynamicDrawer/DynamicDrawer.js CHANGED
@@ -2,7 +2,7 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
2
2
 
3
3
  function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
4
4
 
5
- import React, { useState, useEffect } from 'react';
5
+ import React, { useState, useEffect, useMemo } from 'react';
6
6
  import PropTypes from 'prop-types';
7
7
  import * as R from 'ramda';
8
8
  import cx from 'classnames';
@@ -69,7 +69,7 @@ var TabPanel = function TabPanel(props) {
69
69
  id: 'vertical-tabpanel-' + item.index,
70
70
  'aria-labelledby': 'vertical-tab-' + item.index,
71
71
  className: isNarrow ? classes.tabPanelNarrow : classes.tabPanel,
72
- style: styles
72
+ style: { width: R.prop('width', styles) }
73
73
  }, other),
74
74
  open && React.createElement(
75
75
  Box,
@@ -187,9 +187,9 @@ var DynamicDrawer = function DynamicDrawer(props) {
187
187
  open = _useState[0],
188
188
  setOpen = _useState[1];
189
189
 
190
- var _useState2 = useState({}),
191
- filter = _useState2[0],
192
- setFilter = _useState2[1];
190
+ var _useState2 = useState(null),
191
+ selectedId = _useState2[0],
192
+ setSelectedId = _useState2[1];
193
193
 
194
194
  var _useState3 = useState({}),
195
195
  selection = _useState3[0],
@@ -242,9 +242,12 @@ var DynamicDrawer = function DynamicDrawer(props) {
242
242
  rest = _objectWithoutProperties(props, ['list', 'labelRenderer', 'onClick', 'handleChangePanel', 'onClosePanel', 'isNarrow', 'labels', 'disableAccessor', 'isApplyHiddenNarrow', 'expandAll', 'collapseAll', 'expandedIds', 'allItems', 'periodPanel', 'classes', 'testId', 'tagAccessor', 'tagAriaLabel', 'children', 'styles']);
243
243
 
244
244
  var handleChange = function handleChange(e, item) {
245
- setSelection(_extends({}, allSelection[item.id]));
245
+ var filterSelection = R.pipe(R.propOr([], item.id), function (arr) {
246
+ return R.zipObj(arr, arr);
247
+ })(allSelection);
248
+ setSelection(_extends({}, filterSelection));
246
249
  handleChangePanel(item.id, selection, allSelection);
247
- setFilter(item);
250
+ setSelectedId(item.id);
248
251
  setOpen(true);
249
252
  };
250
253
  var handleSubmit = function handleSubmit() {
@@ -252,21 +255,29 @@ var DynamicDrawer = function DynamicDrawer(props) {
252
255
  setAllSelection({});
253
256
  setSelection({});
254
257
  setOpen(false);
255
- setFilter({});
258
+ setSelectedId(null);
256
259
  onClosePanel();
257
260
  };
258
261
  var handleClose = function handleClose() {
259
262
  setOpen(false);
260
263
  setAllSelection({});
261
264
  setSelection({});
262
- setFilter({});
265
+ setSelectedId(null);
263
266
  onClosePanel();
264
267
  };
265
268
 
269
+ var filter = useMemo(function () {
270
+ if (!selectedId) return {};
271
+ return R.find(function (item) {
272
+ return item.id === selectedId;
273
+ })(list);
274
+ }, [selectedId, list]);
275
+
266
276
  var isHidden = open && isNarrow;
267
277
  var isNotHiddenButton = (!R.isEmpty(allSelection) || !isApplyHiddenNarrow) && isNarrow;
278
+ var isApplyButtonShown = open && !isNarrow;
268
279
  useEffect(function () {
269
- if (open && !isNarrow) {
280
+ if (isApplyButtonShown) {
270
281
  document.body.style.overflow = 'hidden';
271
282
  } else {
272
283
  document.body.style.overflow = '';
@@ -279,7 +290,7 @@ var DynamicDrawer = function DynamicDrawer(props) {
279
290
  return React.createElement(
280
291
  'div',
281
292
  { style: { display: 'flex', flexDirection: 'row' } },
282
- open && !isNarrow && React.createElement(Box, {
293
+ isApplyButtonShown && React.createElement(Box, {
283
294
  onClick: function onClick() {
284
295
  return handleClose();
285
296
  },
@@ -298,8 +309,7 @@ var DynamicDrawer = function DynamicDrawer(props) {
298
309
  orientation: 'vertical',
299
310
  variant: 'scrollable',
300
311
  TabIndicatorProps: { style: { transition: 'none' } },
301
- scrollButtons: false,
302
- disableScrollButtons: true,
312
+ scrollButtons: isApplyButtonShown,
303
313
  value: false,
304
314
  onChange: handleChange,
305
315
  'aria-label': 'filters',
@@ -307,11 +317,10 @@ var DynamicDrawer = function DynamicDrawer(props) {
307
317
  sx: {
308
318
  display: isHidden ? 'none' : 'flex',
309
319
  width: '100%',
310
- height: '100%',
320
+ height: isApplyButtonShown ? R.prop('height', styles) : '100%',
311
321
  borderRight: 1,
312
322
  borderColor: 'divider',
313
- zIndex: 1000,
314
- overflow: 'auto'
323
+ zIndex: 1000
315
324
  }
316
325
  },
317
326
  R.map(function (item) {
@@ -327,7 +336,7 @@ var DynamicDrawer = function DynamicDrawer(props) {
327
336
  component: function component(props) {
328
337
  return PaperComponent(_extends({
329
338
  label: labelRenderer(item),
330
- selected: filter.id === item.id,
339
+ selected: selectedId === item.id,
331
340
  tag: R.isNil(item.tag) ? React.createElement(
332
341
  Chip,
333
342
  { items: item.values, tagValueLabel: tagValueLabel },
@@ -349,7 +358,7 @@ var DynamicDrawer = function DynamicDrawer(props) {
349
358
  disableFocusRipple: true
350
359
  });
351
360
  })(list),
352
- open && !isNarrow && React.createElement(
361
+ isApplyButtonShown && React.createElement(
353
362
  Button,
354
363
  {
355
364
  sx: { float: 'bottom', margin: '10px' },
@@ -387,8 +396,8 @@ var DynamicDrawer = function DynamicDrawer(props) {
387
396
  styles: styles
388
397
  },
389
398
  R.equals(filter.id, periodPanel) ? children : React.createElement(AdvancedSelection, _extends({
390
- id: filter.id,
391
- items: filter.values,
399
+ id: selectedId,
400
+ items: filter.values || [],
392
401
  isOpen: open,
393
402
  labelRenderer: labelRenderer,
394
403
  disableAccessor: disableAccessor ? R.pipe(R.prop('isEnabled'), R.not) : undefined,
package/lib/DynamicDrawer/DynamicDrawer.js CHANGED
@@ -108,7 +108,7 @@ var TabPanel = function TabPanel(props) {
108
108
  id: 'vertical-tabpanel-' + item.index,
109
109
  'aria-labelledby': 'vertical-tab-' + item.index,
110
110
  className: isNarrow ? classes.tabPanelNarrow : classes.tabPanel,
111
- style: styles
111
+ style: { width: R.prop('width', styles) }
112
112
  }, other),
113
113
  open && _react2.default.createElement(
114
114
  _Box2.default,
@@ -226,9 +226,9 @@ var DynamicDrawer = function DynamicDrawer(props) {
226
226
  open = _useState[0],
227
227
  setOpen = _useState[1];
228
228
 
229
- var _useState2 = (0, _react.useState)({}),
230
- filter = _useState2[0],
231
- setFilter = _useState2[1];
229
+ var _useState2 = (0, _react.useState)(null),
230
+ selectedId = _useState2[0],
231
+ setSelectedId = _useState2[1];
232
232
 
233
233
  var _useState3 = (0, _react.useState)({}),
234
234
  selection = _useState3[0],
@@ -281,9 +281,12 @@ var DynamicDrawer = function DynamicDrawer(props) {
281
281
  rest = _objectWithoutProperties(props, ['list', 'labelRenderer', 'onClick', 'handleChangePanel', 'onClosePanel', 'isNarrow', 'labels', 'disableAccessor', 'isApplyHiddenNarrow', 'expandAll', 'collapseAll', 'expandedIds', 'allItems', 'periodPanel', 'classes', 'testId', 'tagAccessor', 'tagAriaLabel', 'children', 'styles']);
282
282
 
283
283
  var handleChange = function handleChange(e, item) {
284
- setSelection(_extends({}, allSelection[item.id]));
284
+ var filterSelection = R.pipe(R.propOr([], item.id), function (arr) {
285
+ return R.zipObj(arr, arr);
286
+ })(allSelection);
287
+ setSelection(_extends({}, filterSelection));
285
288
  handleChangePanel(item.id, selection, allSelection);
286
- setFilter(item);
289
+ setSelectedId(item.id);
287
290
  setOpen(true);
288
291
  };
289
292
  var handleSubmit = function handleSubmit() {
@@ -291,21 +294,29 @@ var DynamicDrawer = function DynamicDrawer(props) {
291
294
  setAllSelection({});
292
295
  setSelection({});
293
296
  setOpen(false);
294
- setFilter({});
297
+ setSelectedId(null);
295
298
  onClosePanel();
296
299
  };
297
300
  var handleClose = function handleClose() {
298
301
  setOpen(false);
299
302
  setAllSelection({});
300
303
  setSelection({});
301
- setFilter({});
304
+ setSelectedId(null);
302
305
  onClosePanel();
303
306
  };
304
307
 
308
+ var filter = (0, _react.useMemo)(function () {
309
+ if (!selectedId) return {};
310
+ return R.find(function (item) {
311
+ return item.id === selectedId;
312
+ })(list);
313
+ }, [selectedId, list]);
314
+
305
315
  var isHidden = open && isNarrow;
306
316
  var isNotHiddenButton = (!R.isEmpty(allSelection) || !isApplyHiddenNarrow) && isNarrow;
317
+ var isApplyButtonShown = open && !isNarrow;
307
318
  (0, _react.useEffect)(function () {
308
- if (open && !isNarrow) {
319
+ if (isApplyButtonShown) {
309
320
  document.body.style.overflow = 'hidden';
310
321
  } else {
311
322
  document.body.style.overflow = '';
@@ -318,7 +329,7 @@ var DynamicDrawer = function DynamicDrawer(props) {
318
329
  return _react2.default.createElement(
319
330
  'div',
320
331
  { style: { display: 'flex', flexDirection: 'row' } },
321
- open && !isNarrow && _react2.default.createElement(_Box2.default, {
332
+ isApplyButtonShown && _react2.default.createElement(_Box2.default, {
322
333
  onClick: function onClick() {
323
334
  return handleClose();
324
335
  },
@@ -337,8 +348,7 @@ var DynamicDrawer = function DynamicDrawer(props) {
337
348
  orientation: 'vertical',
338
349
  variant: 'scrollable',
339
350
  TabIndicatorProps: { style: { transition: 'none' } },
340
- scrollButtons: false,
341
- disableScrollButtons: true,
351
+ scrollButtons: isApplyButtonShown,
342
352
  value: false,
343
353
  onChange: handleChange,
344
354
  'aria-label': 'filters',
@@ -346,11 +356,10 @@ var DynamicDrawer = function DynamicDrawer(props) {
346
356
  sx: {
347
357
  display: isHidden ? 'none' : 'flex',
348
358
  width: '100%',
349
- height: '100%',
359
+ height: isApplyButtonShown ? R.prop('height', styles) : '100%',
350
360
  borderRight: 1,
351
361
  borderColor: 'divider',
352
- zIndex: 1000,
353
- overflow: 'auto'
362
+ zIndex: 1000
354
363
  }
355
364
  },
356
365
  R.map(function (item) {
@@ -366,7 +375,7 @@ var DynamicDrawer = function DynamicDrawer(props) {
366
375
  component: function component(props) {
367
376
  return PaperComponent(_extends({
368
377
  label: labelRenderer(item),
369
- selected: filter.id === item.id,
378
+ selected: selectedId === item.id,
370
379
  tag: R.isNil(item.tag) ? _react2.default.createElement(
371
380
  Chip,
372
381
  { items: item.values, tagValueLabel: tagValueLabel },
@@ -388,7 +397,7 @@ var DynamicDrawer = function DynamicDrawer(props) {
388
397
  disableFocusRipple: true
389
398
  });
390
399
  })(list),
391
- open && !isNarrow && _react2.default.createElement(
400
+ isApplyButtonShown && _react2.default.createElement(
392
401
  _.Button,
393
402
  {
394
403
  sx: { float: 'bottom', margin: '10px' },
@@ -426,8 +435,8 @@ var DynamicDrawer = function DynamicDrawer(props) {
426
435
  styles: styles
427
436
  },
428
437
  R.equals(filter.id, periodPanel) ? children : _react2.default.createElement(_AdvancedSelection2.default, _extends({
429
- id: filter.id,
430
- items: filter.values,
438
+ id: selectedId,
439
+ items: filter.values || [],
431
440
  isOpen: open,
432
441
  labelRenderer: labelRenderer,
433
442
  disableAccessor: disableAccessor ? R.pipe(R.prop('isEnabled'), R.not) : undefined,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sis-cc/dotstatsuite-visions",
3
- "version": "12.26.0",
3
+ "version": "12.26.2",
4
4
  "description": "Library of visual components",
5
5
  "author": "OECD",
6
6
  "homepage": "https://visions-qa.siscc.org/#o",
@@ -9,7 +9,7 @@
9
9
  "main": "lib/index.js",
10
10
  "module": "es/index.js",
11
11
  "engines": {
12
- "node": ">=14"
12
+ "node": ">=18"
13
13
  },
14
14
  "files": [
15
15
  "css",
@@ -18,37 +18,36 @@
18
18
  "umd"
19
19
  ],
20
20
  "scripts": {
21
- "build": "nwb build-react-component --copy-files --no-demo && node scripts/doc && nwb build-demo",
22
- "build:dev": "nwb build-react-component --copy-files --no-demo",
21
+ "peers": "install-peers --force-run",
22
+ "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider nwb build-react-component --copy-files --no-demo && node scripts/doc && cross-env NODE_OPTIONS=--openssl-legacy-provider nwb build-demo",
23
+ "build:dev": "cross-env NODE_OPTIONS=--openssl-legacy-provider nwb build-react-component --copy-files --no-demo",
23
24
  "clean": "nwb clean-module && nwb clean-demo",
24
25
  "prepublishOnly": "npm run build",
25
- "start": "nwb serve-react-demo",
26
+ "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider nwb serve-react-demo",
26
27
  "test": "jest",
27
28
  "test:watch": "jest --watch --no-cache",
28
29
  "lint": "eslint src/ --color",
29
30
  "precommit": "lint-staged"
30
31
  },
31
32
  "dependencies": {
32
- "@emotion/react": "^11.13.0",
33
- "@emotion/styled": "^11.13.0",
34
33
  "@hello-pangea/dnd": "^16.6.0",
35
- "@mui/icons-material": "^5.16.5",
36
- "@mui/material": "^5.16.5",
37
- "@mui/styles": "^5.16.5",
38
34
  "@react-hook/size": "^2.1.1",
39
35
  "classnames": "^2.2.6",
40
- "date-fns": "^1.30.1",
41
36
  "isemail": "^3.2.0",
42
- "numeral": "^2.0.6",
43
37
  "prop-types": "^15.7.2",
44
38
  "ramda": "^0.27.0",
45
- "react-draggable": "^4.4.5",
39
+ "react-draggable": "4.4.5",
46
40
  "react-error-boundary": "^4.0.10",
47
41
  "react-virtualized": "^9.21.2"
48
42
  },
49
43
  "peerDependencies": {
50
- "@mui/icons-material": "^5.16.5",
51
- "@mui/material": "^5.16.5",
44
+ "@emotion/react": "^11",
45
+ "@emotion/styled": "^11",
46
+ "@mui/icons-material": "^5",
47
+ "@mui/material": "^5",
48
+ "@mui/styles": "^5",
49
+ "date-fns": "^1.30.1",
50
+ "numeral": "^2.0.6",
52
51
  "react": "^18",
53
52
  "react-dom": "^18"
54
53
  },
@@ -56,12 +55,11 @@
56
55
  "@babel/eslint-parser": "^7.5.4",
57
56
  "@babel/plugin-syntax-dynamic-import": "^7.2.0",
58
57
  "@cfaester/enzyme-adapter-react-18": "^0.7.0",
59
- "@mui/icons-material": "^5.16.5",
60
- "@mui/material": "^5.16.5",
61
58
  "@testing-library/jest-dom": "^5.16.5",
62
59
  "@testing-library/react": "^14.0.0",
63
60
  "babel-jest": "^24.8.0",
64
61
  "babel-preset-react-app": "^9.0.0",
62
+ "cross-env": "^7.0.3",
65
63
  "dox": "^0.9.0",
66
64
  "eslint": "^8.39.0",
67
65
  "eslint-plugin-import": "^2.27.5",
@@ -71,6 +69,7 @@
71
69
  "eslint-plugin-react-hooks": "^4.6.0",
72
70
  "husky": "^2.7.0",
73
71
  "identity-obj-proxy": "^3.0.0",
72
+ "install-peers-cli": "^2.2.0",
74
73
  "jest": "^24.8.0",
75
74
  "jss": "^10.10.0",
76
75
  "jss-rtl": "^0.2.3",
@@ -79,9 +78,7 @@
79
78
  "nwb": "0.23.0",
80
79
  "prettier": "^2.8.8",
81
80
  "pretty-quick": "^3.1.3",
82
- "react": "^18",
83
81
  "react-a11y": "^1.1.0",
84
- "react-dom": "^18",
85
82
  "react-helmet": "^5.2.1",
86
83
  "react-scrollable-anchor": "^0.6.1",
87
84
  "react-syntax-highlighter": "^10.2.1",