@sis-cc/dotstatsuite-visions 12.4.0 → 12.6.0

package/es/PeriodPicker/PeriodPicker.js

@@ -2,7 +2,7 @@ import React from 'react';
 import * as R from 'ramda';
 import PropTypes from 'prop-types';
 import dateFns from 'date-fns';
-import Grid from '@mui/material/Grid';
+import { Grid, Typography } from '@mui/material';
 import { numeralFormat } from './lib';
 import { Select } from '../';
 import useStyles from './styles';
@@ -133,8 +133,9 @@ var Period = function Period(_ref) {
             Grid,
             { item: true, xs: 12, className: classes.sideLabel },
             React.createElement(
-              'span',
+              Typography,
               {
+                variant: 'body2',
                 tabIndex: 0 // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
                 , 'aria-label': label
               },

package/es/VirtualizedTree/Item.js

@@ -42,7 +42,8 @@ var Item = function Item(_ref) {
       _ref$depth = _ref.depth,
       depth = _ref$depth === undefined ? 0 : _ref$depth,
       eventsListeners = _ref.eventsListeners,
-      expanded = _ref.expanded;
+      expanded = _ref.expanded,
+      highlightedLabel = _ref.highlightedLabel;
 
   var _useKeyboardEscapeHan = useKeyboardEscapeHandler(),
       open = _useKeyboardEscapeHan.open,
@@ -50,6 +51,7 @@ var Item = function Item(_ref) {
 
   var padding = depth * 30 + (depth > 0 && !hasChildrenOnLevel ? 30 : 0) + (!hasChild && hasChildrenOnLevel ? 30 : 0);
 
+  var formattedLabel = highlightedLabel ? React.createElement('div', { dangerouslySetInnerHTML: { __html: highlightedLabel } }) : label;
   return React.createElement(
     ListItem,
     {
@@ -151,7 +153,7 @@ var Item = function Item(_ref) {
               variant: 'body2',
               className: cx(classes.label, (_cx5 = {}, _cx5[classes.disabledLabel] = isGreyed, _cx5[classes.tooltipNotice] = !R.isEmpty(description), _cx5))
             },
-            label
+            formattedLabel
           )
         ),
         R.not(R.isNil(count)) && React.createElement(
@@ -193,7 +195,8 @@ Item.propTypes = process.env.NODE_ENV !== "production" ? {
   depth: PropTypes.number,
   eventsListeners: PropTypes.object,
   isGreyed: PropTypes.bool,
-  expanded: PropTypes.bool
+  expanded: PropTypes.bool,
+  highlightedLabel: PropTypes.string
 } : {};
 
 export default Item;

package/es/VirtualizedTree/withSpotlight.js

@@ -29,31 +29,47 @@ export var spotlightFilter = function spotlightFilter(term) {
       }
       return acc;
     };
+    var matchRegExp = function matchRegExp(str) {
+      return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    };
+
+    // Highlight matching terms in the label
+    var highlightLabel = function highlightLabel(label) {
+      var regex = new RegExp('(' + matchRegExp(term) + ')', 'gi');
+      return label.replace(regex, function (match) {
+        return '<span style=background-color:yellow;border-bottom:2px solid #8CC841>' + match + '</span>';
+      });
+    };
 
     var recurse = function recurse(item) {
-      var isValidItem = R.includes(R.toLower(term), R.toLower(labelRenderer(item)));
+      var label = labelRenderer(item);
+      var isValidItem = R.includes(R.toLower(term), R.toLower(label));
 
       var result = [];
 
       if (isValidItem) {
+        var highlightedLabel = highlightLabel(label);
+        console.log(highlightedLabel);
         var parents = findParents(item);
-        result = [].concat(parents, [item]);
+        result = [].concat(parents, [_extends({}, item, { highlightedLabel: highlightedLabel })]);
+
         if (displayChildren) {
           var children = getDescendants(R.prop('id', item), groupedItemsByParentId);
-          return [].concat(parents, [item], children);
+          return [].concat(parents, [_extends({}, item, { highlightedLabel: highlightedLabel })], children);
         }
       }
+
       if (R.has(getHierarchicalId(item), groupedItemsByParentId)) {
         var childItems = groupedItemsByParentId[getHierarchicalId(item)] || [];
         var matchingChildren = R.chain(recurse, childItems);
 
         // res with any matching children
-        return R.uniq([].concat(result, matchingChildren));
+        return R.uniqBy(R.prop('id'), [].concat(result, matchingChildren));
       }
       return result;
     };
 
-    return R.uniq(R.chain(recurse, groupedItemsByParentId['#ROOT'] || []));
+    return R.uniqBy(R.prop('id'))(R.chain(recurse, groupedItemsByParentId['#ROOT'] || []));
   };
 };
 

package/es/theme.js

@@ -7,8 +7,8 @@ export var innerPalette = {
   primaryMain: '#0549ab',
   primaryLight: '#007bc7',
   primaryDark: '#0549ab',
-  hover: 'rgba(14, 144, 224, 0.13)',
-  selected: 'rgba(14, 144, 224, 0.25)',
+  hover: 'rgba(14, 144, 224, 0.13) !important',
+  selected: 'rgba(14, 144, 224, 0.25) !important',
   textLight: '#444444',
   textDark: '#182026'
 };
@@ -42,6 +42,13 @@ export var sisccTheme = function sisccTheme(_ref) {
   return {
     direction: rtl,
     components: {
+      MuiCssBaseline: {
+        styleOverrides: {
+          body: {
+            fontSize: '0.875rem'
+          }
+        }
+      },
       MuiButtonBase: {
         defaultProps: {
           disableRipple: true
@@ -111,11 +118,14 @@ export var sisccTheme = function sisccTheme(_ref) {
         styleOverrides: {
           root: {
             color: outerPalette.primaryMain || innerPalette.primaryMain,
-            '&$selected': {
-              backgroundColor: outerPalette.hover || innerPalette.hover,
-              '&:hover': {
-                backgroundColor: outerPalette.selected || innerPalette.selected
-              }
+            '&.Mui-selected': {
+              backgroundColor: outerPalette.hover || innerPalette.hover
+            },
+            '&:hover': {
+              backgroundColor: outerPalette.hover || innerPalette.hover
+            },
+            '&.Mui-selected:hover': {
+              backgroundColor: outerPalette.selected || innerPalette.selected
             }
           }
         }
@@ -142,7 +152,8 @@ export var sisccTheme = function sisccTheme(_ref) {
           root: {
             color: outerPalette.primaryMain || innerPalette.primaryMain,
             '&:hover': {
-              color: outerPalette.primaryLight || innerPalette.primaryLight
+              color: outerPalette.primaryLight || innerPalette.primaryLight,
+              textDecoration: 'underline'
             },
             '&.Mui-focused': isA11y && focus
           },
@@ -362,7 +373,7 @@ export var sisccTheme = function sisccTheme(_ref) {
     typography: {
       fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
       h6: {
-        fontSize: ' 1.0625rem'
+        fontSize: '1.0625rem'
       },
       body1: {
         fontSize: '0.750rem',

package/lib/PeriodPicker/PeriodPicker.js

@@ -18,9 +18,7 @@ var _dateFns = require('date-fns');
 
 var _dateFns2 = _interopRequireDefault(_dateFns);
 
-var _Grid = require('@mui/material/Grid');
-
-var _Grid2 = _interopRequireDefault(_Grid);
+var _material = require('@mui/material');
 
 var _lib = require('./lib');
 
@@ -118,10 +116,10 @@ var Period = function Period(_ref) {
     };
   };
   return _react2.default.createElement(
-    _Grid2.default,
+    _material.Grid,
     { 'data-testid': 'period-picker-test-id', container: true, direction: 'row' },
     showFrequency && _react2.default.createElement(
-      _Grid2.default,
+      _material.Grid,
       {
         item: true,
         xs: 12,
@@ -129,10 +127,10 @@ var Period = function Period(_ref) {
         'data-testid': 'period-picker-frequency-test-id'
       },
       _react2.default.createElement(
-        _Grid2.default,
+        _material.Grid,
         { container: true, direction: 'row' },
         _react2.default.createElement(
-          _Grid2.default,
+          _material.Grid,
           { item: true, xs: 12 },
           _react2.default.createElement(_.Select, {
             id: labels.frequency,
@@ -152,17 +150,18 @@ var Period = function Period(_ref) {
           testId = _ref3.testId,
           getIsDisabled = _ref3.getIsDisabled;
       return _react2.default.createElement(
-        _Grid2.default,
+        _material.Grid,
         { key: getter, item: true, xs: 12, 'data-testid': testId },
         _react2.default.createElement(
-          _Grid2.default,
+          _material.Grid,
           { container: true, direction: 'row' },
           _react2.default.createElement(
-            _Grid2.default,
+            _material.Grid,
             { item: true, xs: 12, className: classes.sideLabel },
             _react2.default.createElement(
-              'span',
+              _material.Typography,
               {
+                variant: 'body2',
                 tabIndex: 0 // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
                 , 'aria-label': label
               },
@@ -171,13 +170,13 @@ var Period = function Period(_ref) {
           )
         ),
         _react2.default.createElement(
-          _Grid2.default,
+          _material.Grid,
           { container: true, direction: 'row' },
           _react2.default.createElement(
-            _Grid2.default,
+            _material.Grid,
             { item: true, xs: 12 },
             _react2.default.createElement(
-              _Grid2.default,
+              _material.Grid,
               { container: true, className: classes.headerContainer, spacing: 1 },
               R.map(function (row) {
                 return R.map(function (_ref4) {
@@ -186,7 +185,7 @@ var Period = function Period(_ref) {
 
                   var selectedValue = R.isNil(R.prop(id)(value)) ? R.head(values) : R.prop(id)(value);
                   return _react2.default.createElement(
-                    _Grid2.default,
+                    _material.Grid,
                     {
                       key: id,
                       item: true,

package/lib/VirtualizedTree/Item.js

@@ -85,7 +85,8 @@ var Item = function Item(_ref) {
       _ref$depth = _ref.depth,
       depth = _ref$depth === undefined ? 0 : _ref$depth,
       eventsListeners = _ref.eventsListeners,
-      expanded = _ref.expanded;
+      expanded = _ref.expanded,
+      highlightedLabel = _ref.highlightedLabel;
 
   var _useKeyboardEscapeHan = (0, _useKeybordEscapeHandler2.default)(),
       open = _useKeyboardEscapeHan.open,
@@ -93,6 +94,7 @@ var Item = function Item(_ref) {
 
   var padding = depth * 30 + (depth > 0 && !hasChildrenOnLevel ? 30 : 0) + (!hasChild && hasChildrenOnLevel ? 30 : 0);
 
+  var formattedLabel = highlightedLabel ? _react2.default.createElement('div', { dangerouslySetInnerHTML: { __html: highlightedLabel } }) : label;
   return _react2.default.createElement(
     _ListItem2.default,
     {
@@ -194,7 +196,7 @@ var Item = function Item(_ref) {
               variant: 'body2',
               className: (0, _classnames2.default)(classes.label, (_cx5 = {}, _cx5[classes.disabledLabel] = isGreyed, _cx5[classes.tooltipNotice] = !R.isEmpty(description), _cx5))
             },
-            label
+            formattedLabel
           )
         ),
         R.not(R.isNil(count)) && _react2.default.createElement(
@@ -236,7 +238,8 @@ Item.propTypes = process.env.NODE_ENV !== "production" ? {
   depth: _propTypes2.default.number,
   eventsListeners: _propTypes2.default.object,
   isGreyed: _propTypes2.default.bool,
-  expanded: _propTypes2.default.bool
+  expanded: _propTypes2.default.bool,
+  highlightedLabel: _propTypes2.default.string
 } : {};
 
 exports.default = Item;

package/lib/VirtualizedTree/withSpotlight.js

@@ -3,7 +3,8 @@
 exports.__esModule = true;
 exports.withSpotlight = exports.spotlightFilter = undefined;
 
-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; };
+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; }; /* eslint react/prop-types: 0 */
+
 
 var _ramda = require('ramda');
 
@@ -19,8 +20,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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 _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; } /* eslint react/prop-types: 0 */
-
+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; }
 
 var spotlightFilter = exports.spotlightFilter = function spotlightFilter(term) {
   var labelRenderer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : R.prop('label');
@@ -44,31 +44,47 @@ var spotlightFilter = exports.spotlightFilter = function spotlightFilter(term) {
       }
       return acc;
     };
+    var matchRegExp = function matchRegExp(str) {
+      return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    };
+
+    // Highlight matching terms in the label
+    var highlightLabel = function highlightLabel(label) {
+      var regex = new RegExp('(' + matchRegExp(term) + ')', 'gi');
+      return label.replace(regex, function (match) {
+        return '<span style=background-color:yellow;border-bottom:2px solid #8CC841>' + match + '</span>';
+      });
+    };
 
     var recurse = function recurse(item) {
-      var isValidItem = R.includes(R.toLower(term), R.toLower(labelRenderer(item)));
+      var label = labelRenderer(item);
+      var isValidItem = R.includes(R.toLower(term), R.toLower(label));
 
       var result = [];
 
       if (isValidItem) {
+        var highlightedLabel = highlightLabel(label);
+        console.log(highlightedLabel);
         var parents = findParents(item);
-        result = [].concat(parents, [item]);
+        result = [].concat(parents, [_extends({}, item, { highlightedLabel: highlightedLabel })]);
+
         if (displayChildren) {
           var children = (0, _utils.getDescendants)(R.prop('id', item), groupedItemsByParentId);
-          return [].concat(parents, [item], children);
+          return [].concat(parents, [_extends({}, item, { highlightedLabel: highlightedLabel })], children);
         }
       }
+
       if (R.has((0, _utils.getHierarchicalId)(item), groupedItemsByParentId)) {
         var childItems = groupedItemsByParentId[(0, _utils.getHierarchicalId)(item)] || [];
         var matchingChildren = R.chain(recurse, childItems);
 
         // res with any matching children
-        return R.uniq([].concat(result, matchingChildren));
+        return R.uniqBy(R.prop('id'), [].concat(result, matchingChildren));
       }
       return result;
     };
 
-    return R.uniq(R.chain(recurse, groupedItemsByParentId['#ROOT'] || []));
+    return R.uniqBy(R.prop('id'))(R.chain(recurse, groupedItemsByParentId['#ROOT'] || []));
   };
 };
 

package/lib/theme.js

@@ -11,8 +11,8 @@ var innerPalette = exports.innerPalette = {
   primaryMain: '#0549ab',
   primaryLight: '#007bc7',
   primaryDark: '#0549ab',
-  hover: 'rgba(14, 144, 224, 0.13)',
-  selected: 'rgba(14, 144, 224, 0.25)',
+  hover: 'rgba(14, 144, 224, 0.13) !important',
+  selected: 'rgba(14, 144, 224, 0.25) !important',
   textLight: '#444444',
   textDark: '#182026'
 };
@@ -46,6 +46,13 @@ var sisccTheme = exports.sisccTheme = function sisccTheme(_ref) {
   return {
     direction: rtl,
     components: {
+      MuiCssBaseline: {
+        styleOverrides: {
+          body: {
+            fontSize: '0.875rem'
+          }
+        }
+      },
       MuiButtonBase: {
         defaultProps: {
           disableRipple: true
@@ -115,11 +122,14 @@ var sisccTheme = exports.sisccTheme = function sisccTheme(_ref) {
         styleOverrides: {
           root: {
             color: outerPalette.primaryMain || innerPalette.primaryMain,
-            '&$selected': {
-              backgroundColor: outerPalette.hover || innerPalette.hover,
-              '&:hover': {
-                backgroundColor: outerPalette.selected || innerPalette.selected
-              }
+            '&.Mui-selected': {
+              backgroundColor: outerPalette.hover || innerPalette.hover
+            },
+            '&:hover': {
+              backgroundColor: outerPalette.hover || innerPalette.hover
+            },
+            '&.Mui-selected:hover': {
+              backgroundColor: outerPalette.selected || innerPalette.selected
             }
           }
         }
@@ -146,7 +156,8 @@ var sisccTheme = exports.sisccTheme = function sisccTheme(_ref) {
           root: {
             color: outerPalette.primaryMain || innerPalette.primaryMain,
             '&:hover': {
-              color: outerPalette.primaryLight || innerPalette.primaryLight
+              color: outerPalette.primaryLight || innerPalette.primaryLight,
+              textDecoration: 'underline'
             },
             '&.Mui-focused': isA11y && focus
           },
@@ -366,7 +377,7 @@ var sisccTheme = exports.sisccTheme = function sisccTheme(_ref) {
     typography: {
       fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
       h6: {
-        fontSize: ' 1.0625rem'
+        fontSize: '1.0625rem'
       },
       body1: {
         fontSize: '0.750rem',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sis-cc/dotstatsuite-visions",
-  "version": "12.4.0",
+  "version": "12.6.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 v12.4.0 - https://visions-qa.siscc.org/#o
+ * @sis-cc/dotstatsuite-visions v12.6.0 - https://visions-qa.siscc.org/#o
  * MIT Licensed
  */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -9187,7 +9187,7 @@ if (true) {
 /* 166 */
 /***/ (function(module) {
 
-module.exports = {"name":"@sis-cc/dotstatsuite-visions","version":"12.4.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":{"@emotion/react":"^11.13.0","@emotion/styled":"^11.13.0","@hello-pangea/dnd":"^16.6.0","@mui/icons-material":"^5.16.5","@mui/material":"^5.16.5","@mui/styles":"^5.16.5","@react-hook/size":"^2.1.1","classnames":"^2.2.6","cross-env":"^7.0.3","date-fns":"^1.30.1","isemail":"^3.2.0","numeral":"^2.0.6","prop-types":"^15.7.2","ramda":"^0.27.0","react-draggable":"^4.4.5","react-error-boundary":"^4.0.10","react-virtualized":"^9.21.2"},"peerDependencies":{"@mui/icons-material":"^5.16.5","@mui/material":"^5.16.5","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","@mui/icons-material":"^5.16.5","@mui/material":"^5.16.5","@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":"12.6.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":{"@emotion/react":"^11.13.0","@emotion/styled":"^11.13.0","@hello-pangea/dnd":"^16.6.0","@mui/icons-material":"^5.16.5","@mui/material":"^5.16.5","@mui/styles":"^5.16.5","@react-hook/size":"^2.1.1","classnames":"^2.2.6","cross-env":"^7.0.3","date-fns":"^1.30.1","isemail":"^3.2.0","numeral":"^2.0.6","prop-types":"^15.7.2","ramda":"^0.27.0","react-draggable":"^4.4.5","react-error-boundary":"^4.0.10","react-virtualized":"^9.21.2"},"peerDependencies":{"@mui/icons-material":"^5.16.5","@mui/material":"^5.16.5","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","@mui/icons-material":"^5.16.5","@mui/material":"^5.16.5","@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"}};
 
 /***/ }),
 /* 167 */
@@ -56138,8 +56138,8 @@ var innerPalette = {
   primaryMain: '#0549ab',
   primaryLight: '#007bc7',
   primaryDark: '#0549ab',
-  hover: 'rgba(14, 144, 224, 0.13)',
-  selected: 'rgba(14, 144, 224, 0.25)',
+  hover: 'rgba(14, 144, 224, 0.13) !important',
+  selected: 'rgba(14, 144, 224, 0.25) !important',
   textLight: '#444444',
   textDark: '#182026'
 };
@@ -56173,6 +56173,13 @@ var sisccTheme = function sisccTheme(_ref) {
   return {
     direction: rtl,
     components: {
+      MuiCssBaseline: {
+        styleOverrides: {
+          body: {
+            fontSize: '0.875rem'
+          }
+        }
+      },
       MuiButtonBase: {
         defaultProps: {
           disableRipple: true
@@ -56242,11 +56249,14 @@ var sisccTheme = function sisccTheme(_ref) {
         styleOverrides: {
           root: {
             color: outerPalette.primaryMain || innerPalette.primaryMain,
-            '&$selected': {
-              backgroundColor: outerPalette.hover || innerPalette.hover,
-              '&:hover': {
-                backgroundColor: outerPalette.selected || innerPalette.selected
-              }
+            '&.Mui-selected': {
+              backgroundColor: outerPalette.hover || innerPalette.hover
+            },
+            '&:hover': {
+              backgroundColor: outerPalette.hover || innerPalette.hover
+            },
+            '&.Mui-selected:hover': {
+              backgroundColor: outerPalette.selected || innerPalette.selected
             }
           }
         }
@@ -56273,7 +56283,8 @@ var sisccTheme = function sisccTheme(_ref) {
           root: {
             color: outerPalette.primaryMain || innerPalette.primaryMain,
             '&:hover': {
-              color: outerPalette.primaryLight || innerPalette.primaryLight
+              color: outerPalette.primaryLight || innerPalette.primaryLight,
+              textDecoration: 'underline'
             },
             '&.Mui-focused': isA11y && focus
           },
@@ -56493,7 +56504,7 @@ var sisccTheme = function sisccTheme(_ref) {
     typography: {
       fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
       h6: {
-        fontSize: ' 1.0625rem'
+        fontSize: '1.0625rem'
       },
       body1: {
         fontSize: '0.750rem',
@@ -61237,8 +61248,9 @@ var PeriodPicker_Period = function Period(_ref) {
             material_Grid_Grid,
             { item: true, xs: 12, className: classes.sideLabel },
             react_default.a.createElement(
-              'span',
+              material_Typography_Typography,
               {
+                variant: 'body2',
                 tabIndex: 0 // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
                 , 'aria-label': label
               },
@@ -79530,7 +79542,8 @@ var VirtualizedTree_Item_Item = function Item(_ref) {
       _ref$depth = _ref.depth,
       depth = _ref$depth === undefined ? 0 : _ref$depth,
       eventsListeners = _ref.eventsListeners,
-      expanded = _ref.expanded;
+      expanded = _ref.expanded,
+      highlightedLabel = _ref.highlightedLabel;
 
   var _useKeyboardEscapeHan = useKeybordEscapeHandler(),
       open = _useKeyboardEscapeHan.open,
@@ -79538,6 +79551,7 @@ var VirtualizedTree_Item_Item = function Item(_ref) {
 
   var padding = depth * 30 + (depth > 0 && !hasChildrenOnLevel ? 30 : 0) + (!hasChild && hasChildrenOnLevel ? 30 : 0);
 
+  var formattedLabel = highlightedLabel ? react_default.a.createElement('div', { dangerouslySetInnerHTML: { __html: highlightedLabel } }) : label;
   return react_default.a.createElement(
     material_ListItem_ListItem,
     {
@@ -79639,7 +79653,7 @@ var VirtualizedTree_Item_Item = function Item(_ref) {
               variant: 'body2',
               className: classnames_default()(classes.label, (_cx5 = {}, _cx5[classes.disabledLabel] = isGreyed, _cx5[classes.tooltipNotice] = !es_isEmpty(description), _cx5))
             },
-            label
+            formattedLabel
           )
         ),
         es_not(es_isNil(count)) && react_default.a.createElement(
@@ -79681,7 +79695,8 @@ VirtualizedTree_Item_Item.propTypes = {
   depth: prop_types_default.a.number,
   eventsListeners: prop_types_default.a.object,
   isGreyed: prop_types_default.a.bool,
-  expanded: prop_types_default.a.bool
+  expanded: prop_types_default.a.bool,
+  highlightedLabel: prop_types_default.a.string
 };
 
 /* harmony default export */ var VirtualizedTree_Item = (VirtualizedTree_Item_Item);
@@ -80757,31 +80772,47 @@ var withSpotlight_spotlightFilter = function spotlightFilter(term) {
       }
       return acc;
     };
+    var matchRegExp = function matchRegExp(str) {
+      return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    };
+
+    // Highlight matching terms in the label
+    var highlightLabel = function highlightLabel(label) {
+      var regex = new RegExp('(' + matchRegExp(term) + ')', 'gi');
+      return label.replace(regex, function (match) {
+        return '<span style=background-color:yellow;border-bottom:2px solid #8CC841>' + match + '</span>';
+      });
+    };
 
     var recurse = function recurse(item) {
-      var isValidItem = es_includes(es_toLower(term), es_toLower(labelRenderer(item)));
+      var label = labelRenderer(item);
+      var isValidItem = es_includes(es_toLower(term), es_toLower(label));
 
       var result = [];
 
       if (isValidItem) {
+        var highlightedLabel = highlightLabel(label);
+        console.log(highlightedLabel);
         var parents = findParents(item);
-        result = [].concat(parents, [item]);
+        result = [].concat(parents, [withSpotlight_extends({}, item, { highlightedLabel: highlightedLabel })]);
+
         if (displayChildren) {
           var children = utils_getDescendants(es_prop('id', item), groupedItemsByParentId);
-          return [].concat(parents, [item], children);
+          return [].concat(parents, [withSpotlight_extends({}, item, { highlightedLabel: highlightedLabel })], children);
         }
       }
+
       if (es_has(utils_getHierarchicalId(item), groupedItemsByParentId)) {
         var childItems = groupedItemsByParentId[utils_getHierarchicalId(item)] || [];
         var matchingChildren = es_chain(recurse, childItems);
 
         // res with any matching children
-        return es_uniq([].concat(result, matchingChildren));
+        return es_uniqBy(es_prop('id'), [].concat(result, matchingChildren));
       }
       return result;
     };
 
-    return es_uniq(es_chain(recurse, groupedItemsByParentId['#ROOT'] || []));
+    return es_uniqBy(es_prop('id'))(es_chain(recurse, groupedItemsByParentId['#ROOT'] || []));
   };
 };