@sis-cc/dotstatsuite-visions 10.15.2 → 10.16.0

package/es/Chips/CustomChip.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import cx from 'classnames';
@@ -10,6 +10,7 @@ import { getIsRtl } from '../utils';
 import Tooltip from '../Tooltip';
 import makeStylesFn from './styles';
 import { myTooltipRenderer, myTooltipRendererSrOnly, showMultiLinedTooltip, shownTooltip } from './utils';
+import useKeyboardEscapeHandler from '../hooks/useKeybordEscapeHandler';
 
 var useStyles = makeStyles(makeStylesFn);
 
@@ -59,22 +60,10 @@ var CustomChip = function CustomChip(_ref) {
     return R.join(',')(R.map(myTooltipRendererSrOnly({ isRtl: isRtl, labelRenderer: labelRenderer, ariaLabelTooltip: ariaLabelTooltip }), R.propOr([], 'parents')(R.head(items))));
   };
 
-  var _useState = useState(false),
-      open = _useState[0],
-      setOpen = _useState[1];
+  var _useKeyboardEscapeHan = useKeyboardEscapeHandler(),
+      open = _useKeyboardEscapeHan.open,
+      setOpen = _useKeyboardEscapeHan.setOpen;
 
-  var handler = useCallback(function (e) {
-    if (e.key === 'Escape') {
-      setOpen(false);
-    }
-  }, []);
-
-  useEffect(function () {
-    document.addEventListener('keydown', handler);
-    return function () {
-      document.removeEventListener('keydown', handler);
-    };
-  }, []);
   return React.createElement(Chip, {
     'data-testid': testId,
     size: 'small',

package/es/Dataflow/Dataflow.js

@@ -110,12 +110,8 @@ var useStyles = makeStyles(function (theme) {
       minWidth: '200px',
       margin: theme.spacing(0, 0.5)
     },
-    mutedText: {
-      color: theme.palette.grey[700]
-    },
-    unmutedText: {
-      color: theme.palette.grey[800]
-    },
+    mutedText: _extends({}, R.pathOr({}, ['mixins', 'dataflow', 'desc', 'mutedText'], theme)),
+    unmutedText: _extends({}, R.pathOr({}, ['mixins', 'dataflow', 'desc', 'unmutedText'], theme)),
     categories: {
       maxWidth: '100%',
       whiteSpace: 'noWrap',

package/es/TableHtml5/flags.js

@@ -1,6 +1,6 @@
 var _extends = Object.assign || 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; };
 
-import React, { Fragment, useState, useCallback, useEffect } from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import cx from 'classnames';
@@ -9,6 +9,7 @@ import Typography from '@material-ui/core/Typography';
 import Tooltip from '@material-ui/core/Tooltip';
 import { Asterisk } from '../';
 import { getValue } from './utils';
+import useKeyboardEscapeHandler from '../hooks/useKeybordEscapeHandler';
 
 var useStyles = makeStyles(function (theme) {
   return {
@@ -52,22 +53,10 @@ var Flags = function Flags(_ref) {
   var classes = useStyles();
   var noFlags = R.isNil(flags) || R.isEmpty(flags);
 
-  var _useState = useState(false),
-      open = _useState[0],
-      setOpen = _useState[1];
+  var _useKeyboardEscapeHan = useKeyboardEscapeHandler(),
+      open = _useKeyboardEscapeHan.open,
+      setOpen = _useKeyboardEscapeHan.setOpen;
 
-  var handler = useCallback(function (e) {
-    if (e.key === 'Escape') {
-      setOpen(false);
-    }
-  }, []);
-
-  useEffect(function () {
-    document.addEventListener('keydown', handler);
-    return function () {
-      document.removeEventListener('keydown', handler);
-    };
-  }, []);
   if (noFlags) return null;
 
   var hasUncoded = R.any(R.complement(R.has('code')), flags);

package/es/VirtualizedTree/Item.js

@@ -1,6 +1,6 @@
 var _extends = Object.assign || 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; };
 
-import React, { useCallback, useEffect } from 'react';
+import React from 'react';
 import * as R from 'ramda';
 import PropTypes from 'prop-types';
 import ListItem from '@material-ui/core/ListItem';
@@ -13,6 +13,7 @@ import CheckBoxIcon from '@material-ui/icons/CheckBoxOutlineBlankOutlined';
 import CheckedBoxIcon from '@material-ui/icons/CheckBoxOutlined';
 import cx from 'classnames';
 import { Tooltip } from '../';
+import useKeyboardEscapeHandler from '../hooks/useKeybordEscapeHandler';
 
 var Item = function Item(_ref) {
   var _extends2, _cx, _cx2, _cx3, _cx4, _cx5;
@@ -43,25 +44,12 @@ var Item = function Item(_ref) {
       eventsListeners = _ref.eventsListeners,
       expanded = _ref.expanded;
 
-  var _React$useState = React.useState(false),
-      isTooltipShown = _React$useState[0],
-      setIsTooltipShown = _React$useState[1];
+  var _useKeyboardEscapeHan = useKeyboardEscapeHandler(),
+      open = _useKeyboardEscapeHan.open,
+      setOpen = _useKeyboardEscapeHan.setOpen;
 
   var padding = depth * 30 + (depth > 0 && !hasChildrenOnLevel ? 30 : 0) + (!hasChild && hasChildrenOnLevel ? 30 : 0);
 
-  var handler = useCallback(function (e) {
-    if (e.key === 'Escape') {
-      setIsTooltipShown(false);
-    }
-  }, []);
-
-  useEffect(function () {
-    document.addEventListener('keydown', handler);
-    return function () {
-      document.removeEventListener('keydown', handler);
-    };
-  }, []);
-
   return React.createElement(
     ListItem,
     {
@@ -105,8 +93,8 @@ var Item = function Item(_ref) {
       className: cx((_cx = {}, _cx[classes.accessibilityItemHover] = accessibility, _cx[classes.listItemSelected] = isSelected, _cx[classes.listItemHover] = !isDisabled, _cx)),
       onKeyDown: isDisabled ? null : eventsListeners.onKeyDown,
       onClick: isDisabled ? null : eventsListeners.onClick,
-      onMouseDown: isDisabled || isTooltipShown ? null : eventsListeners.onMouseDown,
-      onMouseEnter: isDisabled || isTooltipShown ? null : eventsListeners.onMouseEnter,
+      onMouseDown: isDisabled || open ? null : eventsListeners.onMouseDown,
+      onMouseEnter: isDisabled || open ? null : eventsListeners.onMouseEnter,
       title: isGreyed ? R.propOr('', 'disableItemLabel')(labels) + ' ' + label : label,
       style: { opacity: isDisabled && isGreyed ? '0.5' : '1' },
       primary: React.createElement(
@@ -145,13 +133,13 @@ var Item = function Item(_ref) {
             placement: 'top',
             interactive: Boolean(HTMLRenderer),
             onOpen: function onOpen() {
-              return setIsTooltipShown(true);
+              return setOpen(true);
             },
             onClose: function onClose() {
-              return setIsTooltipShown(false);
+              return setOpen(false);
             },
             disableHoverListener: R.isEmpty(description),
-            open: isTooltipShown
+            open: open
           },
           React.createElement(
             Typography,

package/es/hooks/useKeybordEscapeHandler.js

@@ -0,0 +1,22 @@
+import { useEffect, useState, useCallback } from 'react';
+
+export default (function () {
+  var _useState = useState(false),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  var handler = useCallback(function (e) {
+    if (e.key === 'Escape') {
+      setOpen(false);
+    }
+  }, []);
+
+  useEffect(function () {
+    document.addEventListener('keydown', handler);
+    return function () {
+      document.removeEventListener('keydown', handler);
+    };
+  }, []);
+
+  return { open: open, setOpen: setOpen };
+});

package/es/theme.js

@@ -239,6 +239,14 @@ export var sisccTheme = function sisccTheme(_ref) {
           fontWeight: 400,
           fontFamily: "'Roboto Slab', serif",
           fontSize: 17
+        },
+        desc: {
+          mutedText: {
+            color: '#666666'
+          },
+          unmutedText: {
+            color: outerPalette.textLight || innerPalette.textLight
+          }
         }
       },
       dataHeader: {

package/lib/Chips/CustomChip.js

@@ -44,6 +44,10 @@ var _styles3 = _interopRequireDefault(_styles2);
 
 var _utils2 = require('./utils');
 
+var _useKeybordEscapeHandler = require('../hooks/useKeybordEscapeHandler');
+
+var _useKeybordEscapeHandler2 = _interopRequireDefault(_useKeybordEscapeHandler);
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -96,22 +100,10 @@ var CustomChip = function CustomChip(_ref) {
     return R.join(',')(R.map((0, _utils2.myTooltipRendererSrOnly)({ isRtl: isRtl, labelRenderer: labelRenderer, ariaLabelTooltip: ariaLabelTooltip }), R.propOr([], 'parents')(R.head(items))));
   };
 
-  var _useState = (0, _react.useState)(false),
-      open = _useState[0],
-      setOpen = _useState[1];
-
-  var handler = (0, _react.useCallback)(function (e) {
-    if (e.key === 'Escape') {
-      setOpen(false);
-    }
-  }, []);
-
-  (0, _react.useEffect)(function () {
-    document.addEventListener('keydown', handler);
-    return function () {
-      document.removeEventListener('keydown', handler);
-    };
-  }, []);
+  var _useKeyboardEscapeHan = (0, _useKeybordEscapeHandler2.default)(),
+      open = _useKeyboardEscapeHan.open,
+      setOpen = _useKeyboardEscapeHan.setOpen;
+
   return _react2.default.createElement(_Chip2.default, {
     'data-testid': testId,
     size: 'small',

package/lib/Dataflow/Dataflow.js

@@ -171,12 +171,8 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       minWidth: '200px',
       margin: theme.spacing(0, 0.5)
     },
-    mutedText: {
-      color: theme.palette.grey[700]
-    },
-    unmutedText: {
-      color: theme.palette.grey[800]
-    },
+    mutedText: _extends({}, R.pathOr({}, ['mixins', 'dataflow', 'desc', 'mutedText'], theme)),
+    unmutedText: _extends({}, R.pathOr({}, ['mixins', 'dataflow', 'desc', 'unmutedText'], theme)),
     categories: {
       maxWidth: '100%',
       whiteSpace: 'noWrap',

package/lib/TableHtml5/flags.js

@@ -34,6 +34,10 @@ var _ = require('../');
 
 var _utils = require('./utils');
 
+var _useKeybordEscapeHandler = require('../hooks/useKeybordEscapeHandler');
+
+var _useKeybordEscapeHandler2 = _interopRequireDefault(_useKeybordEscapeHandler);
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -80,22 +84,10 @@ var Flags = function Flags(_ref) {
   var classes = useStyles();
   var noFlags = R.isNil(flags) || R.isEmpty(flags);
 
-  var _useState = (0, _react.useState)(false),
-      open = _useState[0],
-      setOpen = _useState[1];
+  var _useKeyboardEscapeHan = (0, _useKeybordEscapeHandler2.default)(),
+      open = _useKeyboardEscapeHan.open,
+      setOpen = _useKeyboardEscapeHan.setOpen;
 
-  var handler = (0, _react.useCallback)(function (e) {
-    if (e.key === 'Escape') {
-      setOpen(false);
-    }
-  }, []);
-
-  (0, _react.useEffect)(function () {
-    document.addEventListener('keydown', handler);
-    return function () {
-      document.removeEventListener('keydown', handler);
-    };
-  }, []);
   if (noFlags) return null;
 
   var hasUncoded = R.any(R.complement(R.has('code')), flags);

package/lib/VirtualizedTree/Item.js

@@ -50,6 +50,10 @@ var _classnames2 = _interopRequireDefault(_classnames);
 
 var _ = require('../');
 
+var _useKeybordEscapeHandler = require('../hooks/useKeybordEscapeHandler');
+
+var _useKeybordEscapeHandler2 = _interopRequireDefault(_useKeybordEscapeHandler);
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -83,25 +87,12 @@ var Item = function Item(_ref) {
       eventsListeners = _ref.eventsListeners,
       expanded = _ref.expanded;
 
-  var _React$useState = _react2.default.useState(false),
-      isTooltipShown = _React$useState[0],
-      setIsTooltipShown = _React$useState[1];
+  var _useKeyboardEscapeHan = (0, _useKeybordEscapeHandler2.default)(),
+      open = _useKeyboardEscapeHan.open,
+      setOpen = _useKeyboardEscapeHan.setOpen;
 
   var padding = depth * 30 + (depth > 0 && !hasChildrenOnLevel ? 30 : 0) + (!hasChild && hasChildrenOnLevel ? 30 : 0);
 
-  var handler = (0, _react.useCallback)(function (e) {
-    if (e.key === 'Escape') {
-      setIsTooltipShown(false);
-    }
-  }, []);
-
-  (0, _react.useEffect)(function () {
-    document.addEventListener('keydown', handler);
-    return function () {
-      document.removeEventListener('keydown', handler);
-    };
-  }, []);
-
   return _react2.default.createElement(
     _ListItem2.default,
     {
@@ -145,8 +136,8 @@ var Item = function Item(_ref) {
       className: (0, _classnames2.default)((_cx = {}, _cx[classes.accessibilityItemHover] = accessibility, _cx[classes.listItemSelected] = isSelected, _cx[classes.listItemHover] = !isDisabled, _cx)),
       onKeyDown: isDisabled ? null : eventsListeners.onKeyDown,
       onClick: isDisabled ? null : eventsListeners.onClick,
-      onMouseDown: isDisabled || isTooltipShown ? null : eventsListeners.onMouseDown,
-      onMouseEnter: isDisabled || isTooltipShown ? null : eventsListeners.onMouseEnter,
+      onMouseDown: isDisabled || open ? null : eventsListeners.onMouseDown,
+      onMouseEnter: isDisabled || open ? null : eventsListeners.onMouseEnter,
       title: isGreyed ? R.propOr('', 'disableItemLabel')(labels) + ' ' + label : label,
       style: { opacity: isDisabled && isGreyed ? '0.5' : '1' },
       primary: _react2.default.createElement(
@@ -185,13 +176,13 @@ var Item = function Item(_ref) {
             placement: 'top',
             interactive: Boolean(HTMLRenderer),
             onOpen: function onOpen() {
-              return setIsTooltipShown(true);
+              return setOpen(true);
             },
             onClose: function onClose() {
-              return setIsTooltipShown(false);
+              return setOpen(false);
             },
             disableHoverListener: R.isEmpty(description),
-            open: isTooltipShown
+            open: open
           },
           _react2.default.createElement(
             _Typography2.default,

package/lib/hooks/useKeybordEscapeHandler.js

@@ -0,0 +1,28 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _react = require('react');
+
+exports.default = function () {
+  var _useState = (0, _react.useState)(false),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  var handler = (0, _react.useCallback)(function (e) {
+    if (e.key === 'Escape') {
+      setOpen(false);
+    }
+  }, []);
+
+  (0, _react.useEffect)(function () {
+    document.addEventListener('keydown', handler);
+    return function () {
+      document.removeEventListener('keydown', handler);
+    };
+  }, []);
+
+  return { open: open, setOpen: setOpen };
+};
+
+module.exports = exports['default'];

package/lib/theme.js

@@ -242,6 +242,14 @@ var sisccTheme = exports.sisccTheme = function sisccTheme(_ref) {
           fontWeight: 400,
           fontFamily: "'Roboto Slab', serif",
           fontSize: 17
+        },
+        desc: {
+          mutedText: {
+            color: '#666666'
+          },
+          unmutedText: {
+            color: outerPalette.textLight || innerPalette.textLight
+          }
         }
       },
       dataHeader: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sis-cc/dotstatsuite-visions",
-  "version": "10.15.2",
+  "version": "10.16.0",
   "description": "Library of visual components",
   "author": "OECD",
   "homepage": "https://visions-qa.siscc.org/#o",

package/umd/@sis-cc/dotstatsuite-visions.js

@@ -1,5 +1,5 @@
 /*!
- * @sis-cc/dotstatsuite-visions v10.15.2 - https://visions-qa.siscc.org/#o
+ * @sis-cc/dotstatsuite-visions v10.16.0 - https://visions-qa.siscc.org/#o
  * MIT Licensed
  */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -6699,7 +6699,7 @@ function removeClassName(el
 /* 121 */
 /***/ (function(module) {
 
-module.exports = {"name":"@sis-cc/dotstatsuite-visions","version":"10.15.2","description":"Library of visual components","author":"OECD","homepage":"https://visions-qa.siscc.org/#o","license":"MIT","repository":"https://gitlab.com/sis-cc/.stat-suite/dotstatsuite-visions","main":"lib/index.js","module":"es/index.js","engines":{"node":">=14"},"files":["css","es","lib","umd"],"scripts":{"build":"nwb build-react-component --copy-files --no-demo && node scripts/doc && nwb build-demo","build:dev":"nwb build-react-component --copy-files --no-demo","clean":"nwb clean-module && nwb clean-demo","prepublishOnly":"npm run build","start":"nwb serve-react-demo","test":"jest","test:watch":"jest --watch --no-cache","lint":"eslint src/ --color","precommit":"lint-staged"},"dependencies":{"@react-hook/size":"^2.1.1","classnames":"^2.2.6","date-fns":"^1.30.1","isemail":"^3.2.0","numeral":"^2.0.6","prop-types":"^15.7.2","ramda":"^0.27.0","react-beautiful-dnd":"^13.0.0","react-draggable":"^4.4.5","react-error-boundary":"^4.0.10","react-virtualized":"^9.21.2"},"peerDependencies":{"@material-ui/core":"^4","@material-ui/icons":"^4","@sis-cc/dotstatsuite-sdmxjs":"^8.x","react":"^18","react-dom":"^18"},"devDependencies":{"@babel/eslint-parser":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@cfaester/enzyme-adapter-react-18":"^0.7.0","@material-ui/core":"^4","@material-ui/icons":"^4","@sis-cc/dotstatsuite-sdmxjs":"*","@testing-library/jest-dom":"^5.16.5","@testing-library/react":"^14.0.0","babel-jest":"^24.8.0","babel-preset-react-app":"^9.0.0","dox":"^0.9.0","eslint":"^8.39.0","eslint-plugin-import":"^2.27.5","eslint-plugin-jsx-a11y":"^6.7.1","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.32.2","eslint-plugin-react-hooks":"^4.6.0","husky":"^2.7.0","identity-obj-proxy":"^3.0.0","jest":"^24.8.0","jss":"^10.10.0","jss-rtl":"^0.2.3","lint-staged":"^8.2.1","mutationobserver-shim":"^0.3.7","nwb":"0.23.0","prettier":"^2.8.8","pretty-quick":"^3.1.3","react":"^18","react-a11y":"^1.1.0","react-dom":"^18","react-helmet":"^5.2.1","react-scrollable-anchor":"^0.6.1","react-syntax-highlighter":"^10.2.1","sanitize-html":"2.7.0","webpack":"^5.68.0","webpack-cli":"^4.9.2","webpack-dev-server":"^4.7.4"},"jest":{"verbose":true,"coverageDirectory":"coverage","collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}","!src/ScopeList/*.{js,jsx,ts,tsx}","!src/**/*.d.ts"],"setupFilesAfterEnv":["<rootDir>/tests/setup.js"],"testMatch":["**/tests/**/*.{spec,test}.{js,jsx,ts,tsx}","!**/tests/ScopeList.test.js"],"testEnvironment":"jsdom","transform":{"^.+\\.(js|jsx|ts|tsx)$":"<rootDir>/node_modules/babel-jest"},"transformIgnorePatterns":["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$","^.+\\.module\\.(css|sass|scss)$"],"modulePaths":[],"moduleNameMapper":{"^react-native$":"react-native-web","^.+\\.module\\.(css|sass|scss)$":"identity-obj-proxy","\\.(jpg|jpeg|png)$":"identity-obj-proxy"},"moduleFileExtensions":["web.js","js","web.ts","ts","web.tsx","tsx","json","web.jsx","jsx","node"]},"babel":{"presets":["react-app"],"plugins":["@babel/plugin-syntax-dynamic-import"]},"eslintConfig":{"env":{"browser":true,"jest":true,"node":true,"es6":true},"extends":["eslint:recommended","plugin:react/recommended","plugin:jsx-a11y/recommended"],"parser":"@babel/eslint-parser","parserOptions":{"babelOptions":{"presets":[["babel-preset-react-app",false],"babel-preset-react-app/test"]},"ecmaFeatures":{"experimentalObjectRestSpread":true,"jsx":true},"sourceType":"module"},"plugins":["prettier","react","import","react-hooks","jsx-a11y"],"rules":{"no-console":"warn","no-unused-vars":"error","react/display-name":"off","react-hooks/rules-of-hooks":"error","react-hooks/exhaustive-deps":"warn","no-use-before-define":"error"}},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{js,css}":["prettier --write","git add","yarn lint"]},"prettier":{"endOfLine":"lf","useTabs":false,"printWidth":100,"tabWidth":2,"singleQuote":true,"trailingComma":"all","bracketSameLine":false,"bracketSpacing":true,"parser":"babel","semi":true,"arrowParens":"avoid"}};
+module.exports = {"name":"@sis-cc/dotstatsuite-visions","version":"10.16.0","description":"Library of visual components","author":"OECD","homepage":"https://visions-qa.siscc.org/#o","license":"MIT","repository":"https://gitlab.com/sis-cc/.stat-suite/dotstatsuite-visions","main":"lib/index.js","module":"es/index.js","engines":{"node":">=14"},"files":["css","es","lib","umd"],"scripts":{"build":"nwb build-react-component --copy-files --no-demo && node scripts/doc && nwb build-demo","build:dev":"nwb build-react-component --copy-files --no-demo","clean":"nwb clean-module && nwb clean-demo","prepublishOnly":"npm run build","start":"nwb serve-react-demo","test":"jest","test:watch":"jest --watch --no-cache","lint":"eslint src/ --color","precommit":"lint-staged"},"dependencies":{"@react-hook/size":"^2.1.1","classnames":"^2.2.6","date-fns":"^1.30.1","isemail":"^3.2.0","numeral":"^2.0.6","prop-types":"^15.7.2","ramda":"^0.27.0","react-beautiful-dnd":"^13.0.0","react-draggable":"^4.4.5","react-error-boundary":"^4.0.10","react-virtualized":"^9.21.2"},"peerDependencies":{"@material-ui/core":"^4","@material-ui/icons":"^4","@sis-cc/dotstatsuite-sdmxjs":"^8.x","react":"^18","react-dom":"^18"},"devDependencies":{"@babel/eslint-parser":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@cfaester/enzyme-adapter-react-18":"^0.7.0","@material-ui/core":"^4","@material-ui/icons":"^4","@sis-cc/dotstatsuite-sdmxjs":"*","@testing-library/jest-dom":"^5.16.5","@testing-library/react":"^14.0.0","babel-jest":"^24.8.0","babel-preset-react-app":"^9.0.0","dox":"^0.9.0","eslint":"^8.39.0","eslint-plugin-import":"^2.27.5","eslint-plugin-jsx-a11y":"^6.7.1","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.32.2","eslint-plugin-react-hooks":"^4.6.0","husky":"^2.7.0","identity-obj-proxy":"^3.0.0","jest":"^24.8.0","jss":"^10.10.0","jss-rtl":"^0.2.3","lint-staged":"^8.2.1","mutationobserver-shim":"^0.3.7","nwb":"0.23.0","prettier":"^2.8.8","pretty-quick":"^3.1.3","react":"^18","react-a11y":"^1.1.0","react-dom":"^18","react-helmet":"^5.2.1","react-scrollable-anchor":"^0.6.1","react-syntax-highlighter":"^10.2.1","sanitize-html":"2.7.0","webpack":"^5.68.0","webpack-cli":"^4.9.2","webpack-dev-server":"^4.7.4"},"jest":{"verbose":true,"coverageDirectory":"coverage","collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}","!src/ScopeList/*.{js,jsx,ts,tsx}","!src/**/*.d.ts"],"setupFilesAfterEnv":["<rootDir>/tests/setup.js"],"testMatch":["**/tests/**/*.{spec,test}.{js,jsx,ts,tsx}","!**/tests/ScopeList.test.js"],"testEnvironment":"jsdom","transform":{"^.+\\.(js|jsx|ts|tsx)$":"<rootDir>/node_modules/babel-jest"},"transformIgnorePatterns":["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$","^.+\\.module\\.(css|sass|scss)$"],"modulePaths":[],"moduleNameMapper":{"^react-native$":"react-native-web","^.+\\.module\\.(css|sass|scss)$":"identity-obj-proxy","\\.(jpg|jpeg|png)$":"identity-obj-proxy"},"moduleFileExtensions":["web.js","js","web.ts","ts","web.tsx","tsx","json","web.jsx","jsx","node"]},"babel":{"presets":["react-app"],"plugins":["@babel/plugin-syntax-dynamic-import"]},"eslintConfig":{"env":{"browser":true,"jest":true,"node":true,"es6":true},"extends":["eslint:recommended","plugin:react/recommended","plugin:jsx-a11y/recommended"],"parser":"@babel/eslint-parser","parserOptions":{"babelOptions":{"presets":[["babel-preset-react-app",false],"babel-preset-react-app/test"]},"ecmaFeatures":{"experimentalObjectRestSpread":true,"jsx":true},"sourceType":"module"},"plugins":["prettier","react","import","react-hooks","jsx-a11y"],"rules":{"no-console":"warn","no-unused-vars":"error","react/display-name":"off","react-hooks/rules-of-hooks":"error","react-hooks/exhaustive-deps":"warn","no-use-before-define":"error"}},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{js,css}":["prettier --write","git add","yarn lint"]},"prettier":{"endOfLine":"lf","useTabs":false,"printWidth":100,"tabWidth":2,"singleQuote":true,"trailingComma":"all","bracketSameLine":false,"bracketSpacing":true,"parser":"babel","semi":true,"arrowParens":"avoid"}};
 
 /***/ }),
 /* 122 */
@@ -42157,6 +42157,29 @@ var utils_isLast = function isLast(index, list) {
 
 var shownTooltip = pipe(es_dropLast(1), es_either(es_isEmpty, es_isNil), es_not);
 var showMultiLinedTooltip = pipe(es_head, es_propOr([], 'parents'), es_isEmpty, es_not);
+// CONCATENATED MODULE: ./src/hooks/useKeybordEscapeHandler.js
+
+
+/* harmony default export */ var useKeybordEscapeHandler = (function () {
+  var _useState = Object(react["useState"])(false),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  var handler = Object(react["useCallback"])(function (e) {
+    if (e.key === 'Escape') {
+      setOpen(false);
+    }
+  }, []);
+
+  Object(react["useEffect"])(function () {
+    document.addEventListener('keydown', handler);
+    return function () {
+      document.removeEventListener('keydown', handler);
+    };
+  }, []);
+
+  return { open: open, setOpen: setOpen };
+});
 // CONCATENATED MODULE: ./src/Chips/CustomChip.js
 
 
@@ -42171,6 +42194,7 @@ var showMultiLinedTooltip = pipe(es_head, es_propOr([], 'parents'), es_isEmpty,
 
 
 
+
 var CustomChip_useStyles = styles_makeStyles(Chips_styles);
 
 var CustomChip_CustomChip = function CustomChip(_ref) {
@@ -42219,22 +42243,10 @@ var CustomChip_CustomChip = function CustomChip(_ref) {
     return es_join(',')(es_map(utils_myTooltipRendererSrOnly({ isRtl: isRtl, labelRenderer: labelRenderer, ariaLabelTooltip: ariaLabelTooltip }), es_propOr([], 'parents')(es_head(items))));
   };
 
-  var _useState = Object(react["useState"])(false),
-      open = _useState[0],
-      setOpen = _useState[1];
-
-  var handler = Object(react["useCallback"])(function (e) {
-    if (e.key === 'Escape') {
-      setOpen(false);
-    }
-  }, []);
+  var _useKeyboardEscapeHan = useKeybordEscapeHandler(),
+      open = _useKeyboardEscapeHan.open,
+      setOpen = _useKeyboardEscapeHan.setOpen;
 
-  Object(react["useEffect"])(function () {
-    document.addEventListener('keydown', handler);
-    return function () {
-      document.removeEventListener('keydown', handler);
-    };
-  }, []);
   return react_default.a.createElement(esm_Chip_Chip, {
     'data-testid': testId,
     size: 'small',
@@ -46227,12 +46239,8 @@ var Dataflow_useStyles = styles_makeStyles(function (theme) {
       minWidth: '200px',
       margin: theme.spacing(0, 0.5)
     },
-    mutedText: {
-      color: theme.palette.grey[700]
-    },
-    unmutedText: {
-      color: theme.palette.grey[800]
-    },
+    mutedText: Dataflow_extends({}, es_pathOr({}, ['mixins', 'dataflow', 'desc', 'mutedText'], theme)),
+    unmutedText: Dataflow_extends({}, es_pathOr({}, ['mixins', 'dataflow', 'desc', 'unmutedText'], theme)),
     categories: {
       maxWidth: '100%',
       whiteSpace: 'noWrap',
@@ -46975,6 +46983,14 @@ var sisccTheme = function sisccTheme(_ref) {
           fontWeight: 400,
           fontFamily: "'Roboto Slab', serif",
           fontSize: 17
+        },
+        desc: {
+          mutedText: {
+            color: '#666666'
+          },
+          unmutedText: {
+            color: outerPalette.textLight || innerPalette.textLight
+          }
         }
       },
       dataHeader: {
@@ -53572,6 +53588,7 @@ var flags_extends = Object.assign || function (target) { for (var i = 1; i < arg
 
 
 
+
 var flags_useStyles = styles_makeStyles(function (theme) {
   return {
     content: flags_extends({
@@ -53614,22 +53631,10 @@ var flags_Flags = function Flags(_ref) {
   var classes = flags_useStyles();
   var noFlags = es_isNil(flags) || es_isEmpty(flags);
 
-  var _useState = Object(react["useState"])(false),
-      open = _useState[0],
-      setOpen = _useState[1];
-
-  var handler = Object(react["useCallback"])(function (e) {
-    if (e.key === 'Escape') {
-      setOpen(false);
-    }
-  }, []);
+  var _useKeyboardEscapeHan = useKeybordEscapeHandler(),
+      open = _useKeyboardEscapeHan.open,
+      setOpen = _useKeyboardEscapeHan.setOpen;
 
-  Object(react["useEffect"])(function () {
-    document.addEventListener('keydown', handler);
-    return function () {
-      document.removeEventListener('keydown', handler);
-    };
-  }, []);
   if (noFlags) return null;
 
   var hasUncoded = es_any(es_complement(es_has('code')), flags);
@@ -70655,6 +70660,7 @@ var VirtualizedTree_Item_extends = Object.assign || function (target) { for (var
 
 
 
+
 var VirtualizedTree_Item_Item = function Item(_ref) {
   var _extends2, _cx, _cx2, _cx3, _cx4, _cx5;
 
@@ -70684,25 +70690,12 @@ var VirtualizedTree_Item_Item = function Item(_ref) {
       eventsListeners = _ref.eventsListeners,
       expanded = _ref.expanded;
 
-  var _React$useState = react_default.a.useState(false),
-      isTooltipShown = _React$useState[0],
-      setIsTooltipShown = _React$useState[1];
+  var _useKeyboardEscapeHan = useKeybordEscapeHandler(),
+      open = _useKeyboardEscapeHan.open,
+      setOpen = _useKeyboardEscapeHan.setOpen;
 
   var padding = depth * 30 + (depth > 0 && !hasChildrenOnLevel ? 30 : 0) + (!hasChild && hasChildrenOnLevel ? 30 : 0);
 
-  var handler = Object(react["useCallback"])(function (e) {
-    if (e.key === 'Escape') {
-      setIsTooltipShown(false);
-    }
-  }, []);
-
-  Object(react["useEffect"])(function () {
-    document.addEventListener('keydown', handler);
-    return function () {
-      document.removeEventListener('keydown', handler);
-    };
-  }, []);
-
   return react_default.a.createElement(
     esm_ListItem_ListItem,
     {
@@ -70746,8 +70739,8 @@ var VirtualizedTree_Item_Item = function Item(_ref) {
       className: classnames_default()((_cx = {}, _cx[classes.accessibilityItemHover] = accessibility, _cx[classes.listItemSelected] = isSelected, _cx[classes.listItemHover] = !isDisabled, _cx)),
       onKeyDown: isDisabled ? null : eventsListeners.onKeyDown,
       onClick: isDisabled ? null : eventsListeners.onClick,
-      onMouseDown: isDisabled || isTooltipShown ? null : eventsListeners.onMouseDown,
-      onMouseEnter: isDisabled || isTooltipShown ? null : eventsListeners.onMouseEnter,
+      onMouseDown: isDisabled || open ? null : eventsListeners.onMouseDown,
+      onMouseEnter: isDisabled || open ? null : eventsListeners.onMouseEnter,
       title: isGreyed ? es_propOr('', 'disableItemLabel')(labels) + ' ' + label : label,
       style: { opacity: isDisabled && isGreyed ? '0.5' : '1' },
       primary: react_default.a.createElement(
@@ -70786,13 +70779,13 @@ var VirtualizedTree_Item_Item = function Item(_ref) {
             placement: 'top',
             interactive: Boolean(HTMLRenderer),
             onOpen: function onOpen() {
-              return setIsTooltipShown(true);
+              return setOpen(true);
             },
             onClose: function onClose() {
-              return setIsTooltipShown(false);
+              return setOpen(false);
             },
             disableHoverListener: es_isEmpty(description),
-            open: isTooltipShown
+            open: open
           },
           react_default.a.createElement(
             esm_Typography_Typography,