@sis-cc/dotstatsuite-visions 12.27.0 → 12.28.0

package/es/DataHeader/DataHeader.js

@@ -1,5 +1,7 @@
 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; };
 
+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; }
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
@@ -89,20 +91,31 @@ var useStyles = makeStyles(function (theme) {
     }
   };
 });
+var BasicHTMLRenderer = function BasicHTMLRenderer(_ref) {
+  var html = _ref.html,
+      rest = _objectWithoutProperties(_ref, ['html']);
+
+  return React.createElement('span', _extends({ dangerouslySetInnerHTML: { __html: html } }, rest));
+};
 
-var DataHeader = function DataHeader(_ref) {
+BasicHTMLRenderer.propTypes = process.env.NODE_ENV !== "production" ? {
+  html: PropTypes.string
+} : {};
+var DataHeader = function DataHeader(_ref2) {
   var _cx;
 
-  var children = _ref.children,
-      title = _ref.title,
-      _ref$subtitle = _ref.subtitle,
-      subtitle = _ref$subtitle === undefined ? [] : _ref$subtitle,
-      combinations = _ref.combinations,
-      disclaimer = _ref.disclaimer,
-      sideProps = _ref.sideProps,
-      SideIcon = _ref.SideIcon,
-      _ref$isSticky = _ref.isSticky,
-      isSticky = _ref$isSticky === undefined ? false : _ref$isSticky;
+  var children = _ref2.children,
+      title = _ref2.title,
+      _ref2$subtitle = _ref2.subtitle,
+      subtitle = _ref2$subtitle === undefined ? [] : _ref2$subtitle,
+      combinations = _ref2.combinations,
+      disclaimer = _ref2.disclaimer,
+      sideProps = _ref2.sideProps,
+      SideIcon = _ref2.SideIcon,
+      _ref2$isSticky = _ref2.isSticky,
+      isSticky = _ref2$isSticky === undefined ? false : _ref2$isSticky,
+      _ref2$HTMLRenderer = _ref2.HTMLRenderer,
+      HTMLRenderer = _ref2$HTMLRenderer === undefined ? BasicHTMLRenderer : _ref2$HTMLRenderer;
 
   var target = React.useRef(null);
 
@@ -157,7 +170,11 @@ var DataHeader = function DataHeader(_ref) {
           { className: classes.sideIconContainer },
           React.createElement(SideIcon, { sideProps: sideProps })
         ),
-        React.createElement(Flags, { classes: classes, content: R.propOr([], 'flags', title) })
+        React.createElement(Flags, {
+          classes: classes,
+          HTMLRenderer: HTMLRenderer,
+          content: R.propOr([], 'flags', title)
+        })
       ),
       isWidthUp(T4_BREAKPOINTS.xs3) && subtitle && R.not(R.isEmpty(subtitle)) && React.createElement(
         'div',
@@ -178,7 +195,11 @@ var DataHeader = function DataHeader(_ref) {
               { variant: 'inherit' },
               sub.label
             ),
-            R.not(R.isEmpty(R.propOr([], 'flags', sub))) && React.createElement(Flags, { classes: classes, content: R.prop('flags', sub) }),
+            R.not(R.isEmpty(R.propOr([], 'flags', sub))) && React.createElement(Flags, {
+              classes: classes,
+              HTMLRenderer: HTMLRenderer,
+              content: R.prop('flags', sub)
+            }),
             R.lt(index + 1, subtitleLength) && React.createElement(
               'svg',
               { width: '24', height: '8' },
@@ -205,7 +226,11 @@ var DataHeader = function DataHeader(_ref) {
               { variant: 'inherit' },
               comb.label
             ),
-            R.not(R.isEmpty(R.propOr([], 'flags', comb))) && React.createElement(Flags, { classes: classes, content: R.prop('flags', comb) }),
+            R.not(R.isEmpty(R.propOr([], 'flags', comb))) && React.createElement(Flags, {
+              classes: classes,
+              HTMLRenderer: HTMLRenderer,
+              content: R.prop('flags', comb)
+            }),
             R.lt(index + 1, combinationsLength) && React.createElement(
               'svg',
               { width: '24', height: '8' },
@@ -229,7 +254,7 @@ var DataHeader = function DataHeader(_ref) {
       { className: classes.children },
       R.not(R.isEmpty(reducedContent)) && React.createElement(
         TooltipHeader,
-        { classes: classes, content: reducedContent },
+        { classes: classes, content: reducedContent, HTMLRenderer: HTMLRenderer },
         React.createElement(Info, { className: classes.infoIcon })
       ),
       children
@@ -267,7 +292,8 @@ DataHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   SideIcon: PropTypes.func,
   disclaimer: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   children: PropTypes.node,
-  isSticky: PropTypes.bool
+  isSticky: PropTypes.bool,
+  HTMLRenderer: PropTypes.func
 } : {};
 
 export default DataHeader;

package/es/DataHeader/Flags.js

@@ -6,7 +6,8 @@ import { TooltipHeader } from './TooltipHeader';
 
 var Flags = function Flags(_ref) {
   var classes = _ref.classes,
-      content = _ref.content;
+      content = _ref.content,
+      HTMLRenderer = _ref.HTMLRenderer;
 
   var codes = R.pipe(R.pluck('code'), R.filter(R.identity))(content);
   var hasCodes = !R.isEmpty(codes);
@@ -16,7 +17,7 @@ var Flags = function Flags(_ref) {
   })(codes);
   return React.createElement(
     TooltipHeader,
-    { classes: classes, content: content },
+    { classes: classes, content: content, HTMLRenderer: HTMLRenderer },
     React.createElement(
       'sup',
       { className: classes.svgWrapper },
@@ -28,6 +29,7 @@ var Flags = function Flags(_ref) {
 
 Flags.propTypes = process.env.NODE_ENV !== "production" ? {
   classes: PropTypes.object,
+  HTMLRenderer: PropTypes.func,
   content: PropTypes.arrayOf(PropTypes.shape({
     header: PropTypes.string,
     label: PropTypes.string,

package/es/DataHeader/TooltipHeader.js

@@ -7,6 +7,7 @@ import Title from './Title';
 export var TooltipHeader = function TooltipHeader(_ref) {
   var children = _ref.children,
       classes = _ref.classes,
+      HTMLRenderer = _ref.HTMLRenderer,
       _ref$content = _ref.content,
       content = _ref$content === undefined ? [] : _ref$content;
 
@@ -24,7 +25,7 @@ export var TooltipHeader = function TooltipHeader(_ref) {
         'li',
         { key: label + '-' + index },
         React.createElement(Title, { header: header }),
-        label,
+        R.is(Function, HTMLRenderer) ? React.createElement(HTMLRenderer, { html: label }) : label,
         R.not(R.isEmpty(sub)) && React.createElement(
           'ul',
           { className: classes.subContent },
@@ -33,7 +34,7 @@ export var TooltipHeader = function TooltipHeader(_ref) {
             return React.createElement(
               'li',
               { key: label + '-' + index },
-              label
+              R.is(Function, HTMLRenderer) ? React.createElement(HTMLRenderer, { html: label }) : label
             );
           }, sub)
         )
@@ -70,7 +71,8 @@ TooltipHeader.propTypes = process.env.NODE_ENV !== "production" ? {
     sub: PropTypes.arrayOf(PropTypes.shape({
       label: PropTypes.string
     }))
-  }))
+  })),
+  HTMLRenderer: PropTypes.func
 } : {};
 
 export default TooltipHeader;

package/es/DynamicDrawer/DynamicDrawer.js

@@ -2,7 +2,7 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 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; }
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import cx from 'classnames';
@@ -187,9 +187,9 @@ var DynamicDrawer = function DynamicDrawer(props) {
       open = _useState[0],
       setOpen = _useState[1];
 
-  var _useState2 = useState({}),
-      filter = _useState2[0],
-      setFilter = _useState2[1];
+  var _useState2 = useState(null),
+      selectedId = _useState2[0],
+      setSelectedId = _useState2[1];
 
   var _useState3 = useState({}),
       selection = _useState3[0],
@@ -242,9 +242,12 @@ var DynamicDrawer = function DynamicDrawer(props) {
       rest = _objectWithoutProperties(props, ['list', 'labelRenderer', 'onClick', 'handleChangePanel', 'onClosePanel', 'isNarrow', 'labels', 'disableAccessor', 'isApplyHiddenNarrow', 'expandAll', 'collapseAll', 'expandedIds', 'allItems', 'periodPanel', 'classes', 'testId', 'tagAccessor', 'tagAriaLabel', 'children', 'styles']);
 
   var handleChange = function handleChange(e, item) {
-    setSelection(_extends({}, allSelection[item.id]));
+    var filterSelection = R.pipe(R.propOr([], item.id), function (arr) {
+      return R.zipObj(arr, arr);
+    })(allSelection);
+    setSelection(_extends({}, filterSelection));
     handleChangePanel(item.id, selection, allSelection);
-    setFilter(item);
+    setSelectedId(item.id);
     setOpen(true);
   };
   var handleSubmit = function handleSubmit() {
@@ -252,17 +255,24 @@ var DynamicDrawer = function DynamicDrawer(props) {
     setAllSelection({});
     setSelection({});
     setOpen(false);
-    setFilter({});
+    setSelectedId(null);
     onClosePanel();
   };
   var handleClose = function handleClose() {
     setOpen(false);
     setAllSelection({});
     setSelection({});
-    setFilter({});
+    setSelectedId(null);
     onClosePanel();
   };
 
+  var filter = useMemo(function () {
+    if (!selectedId) return {};
+    return R.find(function (item) {
+      return item.id === selectedId;
+    })(list);
+  }, [selectedId, list]);
+
   var isHidden = open && isNarrow;
   var isNotHiddenButton = (!R.isEmpty(allSelection) || !isApplyHiddenNarrow) && isNarrow;
   useEffect(function () {
@@ -327,7 +337,7 @@ var DynamicDrawer = function DynamicDrawer(props) {
           component: function component(props) {
             return PaperComponent(_extends({
               label: labelRenderer(item),
-              selected: filter.id === item.id,
+              selected: selectedId === item.id,
               tag: R.isNil(item.tag) ? React.createElement(
                 Chip,
                 { items: item.values, tagValueLabel: tagValueLabel },
@@ -387,8 +397,8 @@ var DynamicDrawer = function DynamicDrawer(props) {
         styles: styles
       },
       R.equals(filter.id, periodPanel) ? children : React.createElement(AdvancedSelection, _extends({
-        id: filter.id,
-        items: filter.values,
+        id: selectedId,
+        items: filter.values || [],
         isOpen: open,
         labelRenderer: labelRenderer,
         disableAccessor: disableAccessor ? R.pipe(R.prop('isEnabled'), R.not) : undefined,

package/lib/DataHeader/DataHeader.js

@@ -58,6 +58,8 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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 useStyles = (0, _makeStyles2.default)(function (theme) {
   return {
     header: {
@@ -132,20 +134,31 @@ var useStyles = (0, _makeStyles2.default)(function (theme) {
     }
   };
 });
+var BasicHTMLRenderer = function BasicHTMLRenderer(_ref) {
+  var html = _ref.html,
+      rest = _objectWithoutProperties(_ref, ['html']);
+
+  return _react2.default.createElement('span', _extends({ dangerouslySetInnerHTML: { __html: html } }, rest));
+};
 
-var DataHeader = function DataHeader(_ref) {
+BasicHTMLRenderer.propTypes = process.env.NODE_ENV !== "production" ? {
+  html: _propTypes2.default.string
+} : {};
+var DataHeader = function DataHeader(_ref2) {
   var _cx;
 
-  var children = _ref.children,
-      title = _ref.title,
-      _ref$subtitle = _ref.subtitle,
-      subtitle = _ref$subtitle === undefined ? [] : _ref$subtitle,
-      combinations = _ref.combinations,
-      disclaimer = _ref.disclaimer,
-      sideProps = _ref.sideProps,
-      SideIcon = _ref.SideIcon,
-      _ref$isSticky = _ref.isSticky,
-      isSticky = _ref$isSticky === undefined ? false : _ref$isSticky;
+  var children = _ref2.children,
+      title = _ref2.title,
+      _ref2$subtitle = _ref2.subtitle,
+      subtitle = _ref2$subtitle === undefined ? [] : _ref2$subtitle,
+      combinations = _ref2.combinations,
+      disclaimer = _ref2.disclaimer,
+      sideProps = _ref2.sideProps,
+      SideIcon = _ref2.SideIcon,
+      _ref2$isSticky = _ref2.isSticky,
+      isSticky = _ref2$isSticky === undefined ? false : _ref2$isSticky,
+      _ref2$HTMLRenderer = _ref2.HTMLRenderer,
+      HTMLRenderer = _ref2$HTMLRenderer === undefined ? BasicHTMLRenderer : _ref2$HTMLRenderer;
 
   var target = _react2.default.useRef(null);
 
@@ -200,7 +213,11 @@ var DataHeader = function DataHeader(_ref) {
           { className: classes.sideIconContainer },
           _react2.default.createElement(SideIcon, { sideProps: sideProps })
         ),
-        _react2.default.createElement(_Flags2.default, { classes: classes, content: R.propOr([], 'flags', title) })
+        _react2.default.createElement(_Flags2.default, {
+          classes: classes,
+          HTMLRenderer: HTMLRenderer,
+          content: R.propOr([], 'flags', title)
+        })
       ),
       isWidthUp(_theme.T4_BREAKPOINTS.xs3) && subtitle && R.not(R.isEmpty(subtitle)) && _react2.default.createElement(
         'div',
@@ -221,7 +238,11 @@ var DataHeader = function DataHeader(_ref) {
               { variant: 'inherit' },
               sub.label
             ),
-            R.not(R.isEmpty(R.propOr([], 'flags', sub))) && _react2.default.createElement(_Flags2.default, { classes: classes, content: R.prop('flags', sub) }),
+            R.not(R.isEmpty(R.propOr([], 'flags', sub))) && _react2.default.createElement(_Flags2.default, {
+              classes: classes,
+              HTMLRenderer: HTMLRenderer,
+              content: R.prop('flags', sub)
+            }),
             R.lt(index + 1, subtitleLength) && _react2.default.createElement(
               'svg',
               { width: '24', height: '8' },
@@ -248,7 +269,11 @@ var DataHeader = function DataHeader(_ref) {
               { variant: 'inherit' },
               comb.label
             ),
-            R.not(R.isEmpty(R.propOr([], 'flags', comb))) && _react2.default.createElement(_Flags2.default, { classes: classes, content: R.prop('flags', comb) }),
+            R.not(R.isEmpty(R.propOr([], 'flags', comb))) && _react2.default.createElement(_Flags2.default, {
+              classes: classes,
+              HTMLRenderer: HTMLRenderer,
+              content: R.prop('flags', comb)
+            }),
             R.lt(index + 1, combinationsLength) && _react2.default.createElement(
               'svg',
               { width: '24', height: '8' },
@@ -272,7 +297,7 @@ var DataHeader = function DataHeader(_ref) {
       { className: classes.children },
       R.not(R.isEmpty(reducedContent)) && _react2.default.createElement(
         _TooltipHeader2.default,
-        { classes: classes, content: reducedContent },
+        { classes: classes, content: reducedContent, HTMLRenderer: HTMLRenderer },
         _react2.default.createElement(_Info2.default, { className: classes.infoIcon })
       ),
       children
@@ -310,7 +335,8 @@ DataHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   SideIcon: _propTypes2.default.func,
   disclaimer: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
   children: _propTypes2.default.node,
-  isSticky: _propTypes2.default.bool
+  isSticky: _propTypes2.default.bool,
+  HTMLRenderer: _propTypes2.default.func
 } : {};
 
 exports.default = DataHeader;

package/lib/DataHeader/Flags.js

@@ -24,7 +24,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var Flags = function Flags(_ref) {
   var classes = _ref.classes,
-      content = _ref.content;
+      content = _ref.content,
+      HTMLRenderer = _ref.HTMLRenderer;
 
   var codes = R.pipe(R.pluck('code'), R.filter(R.identity))(content);
   var hasCodes = !R.isEmpty(codes);
@@ -34,7 +35,7 @@ var Flags = function Flags(_ref) {
   })(codes);
   return _react2.default.createElement(
     _TooltipHeader.TooltipHeader,
-    { classes: classes, content: content },
+    { classes: classes, content: content, HTMLRenderer: HTMLRenderer },
     _react2.default.createElement(
       'sup',
       { className: classes.svgWrapper },
@@ -46,6 +47,7 @@ var Flags = function Flags(_ref) {
 
 Flags.propTypes = process.env.NODE_ENV !== "production" ? {
   classes: _propTypes2.default.object,
+  HTMLRenderer: _propTypes2.default.func,
   content: _propTypes2.default.arrayOf(_propTypes2.default.shape({
     header: _propTypes2.default.string,
     label: _propTypes2.default.string,

package/lib/DataHeader/TooltipHeader.js

@@ -28,6 +28,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var TooltipHeader = exports.TooltipHeader = function TooltipHeader(_ref) {
   var children = _ref.children,
       classes = _ref.classes,
+      HTMLRenderer = _ref.HTMLRenderer,
       _ref$content = _ref.content,
       content = _ref$content === undefined ? [] : _ref$content;
 
@@ -45,7 +46,7 @@ var TooltipHeader = exports.TooltipHeader = function TooltipHeader(_ref) {
         'li',
         { key: label + '-' + index },
         _react2.default.createElement(_Title2.default, { header: header }),
-        label,
+        R.is(Function, HTMLRenderer) ? _react2.default.createElement(HTMLRenderer, { html: label }) : label,
         R.not(R.isEmpty(sub)) && _react2.default.createElement(
           'ul',
           { className: classes.subContent },
@@ -54,7 +55,7 @@ var TooltipHeader = exports.TooltipHeader = function TooltipHeader(_ref) {
             return _react2.default.createElement(
               'li',
               { key: label + '-' + index },
-              label
+              R.is(Function, HTMLRenderer) ? _react2.default.createElement(HTMLRenderer, { html: label }) : label
             );
           }, sub)
         )
@@ -91,7 +92,8 @@ TooltipHeader.propTypes = process.env.NODE_ENV !== "production" ? {
     sub: _propTypes2.default.arrayOf(_propTypes2.default.shape({
       label: _propTypes2.default.string
     }))
-  }))
+  })),
+  HTMLRenderer: _propTypes2.default.func
 } : {};
 
 exports.default = TooltipHeader;

package/lib/DynamicDrawer/DynamicDrawer.js

@@ -226,9 +226,9 @@ var DynamicDrawer = function DynamicDrawer(props) {
       open = _useState[0],
       setOpen = _useState[1];
 
-  var _useState2 = (0, _react.useState)({}),
-      filter = _useState2[0],
-      setFilter = _useState2[1];
+  var _useState2 = (0, _react.useState)(null),
+      selectedId = _useState2[0],
+      setSelectedId = _useState2[1];
 
   var _useState3 = (0, _react.useState)({}),
       selection = _useState3[0],
@@ -281,9 +281,12 @@ var DynamicDrawer = function DynamicDrawer(props) {
       rest = _objectWithoutProperties(props, ['list', 'labelRenderer', 'onClick', 'handleChangePanel', 'onClosePanel', 'isNarrow', 'labels', 'disableAccessor', 'isApplyHiddenNarrow', 'expandAll', 'collapseAll', 'expandedIds', 'allItems', 'periodPanel', 'classes', 'testId', 'tagAccessor', 'tagAriaLabel', 'children', 'styles']);
 
   var handleChange = function handleChange(e, item) {
-    setSelection(_extends({}, allSelection[item.id]));
+    var filterSelection = R.pipe(R.propOr([], item.id), function (arr) {
+      return R.zipObj(arr, arr);
+    })(allSelection);
+    setSelection(_extends({}, filterSelection));
     handleChangePanel(item.id, selection, allSelection);
-    setFilter(item);
+    setSelectedId(item.id);
     setOpen(true);
   };
   var handleSubmit = function handleSubmit() {
@@ -291,17 +294,24 @@ var DynamicDrawer = function DynamicDrawer(props) {
     setAllSelection({});
     setSelection({});
     setOpen(false);
-    setFilter({});
+    setSelectedId(null);
     onClosePanel();
   };
   var handleClose = function handleClose() {
     setOpen(false);
     setAllSelection({});
     setSelection({});
-    setFilter({});
+    setSelectedId(null);
     onClosePanel();
   };
 
+  var filter = (0, _react.useMemo)(function () {
+    if (!selectedId) return {};
+    return R.find(function (item) {
+      return item.id === selectedId;
+    })(list);
+  }, [selectedId, list]);
+
   var isHidden = open && isNarrow;
   var isNotHiddenButton = (!R.isEmpty(allSelection) || !isApplyHiddenNarrow) && isNarrow;
   (0, _react.useEffect)(function () {
@@ -366,7 +376,7 @@ var DynamicDrawer = function DynamicDrawer(props) {
           component: function component(props) {
             return PaperComponent(_extends({
               label: labelRenderer(item),
-              selected: filter.id === item.id,
+              selected: selectedId === item.id,
               tag: R.isNil(item.tag) ? _react2.default.createElement(
                 Chip,
                 { items: item.values, tagValueLabel: tagValueLabel },
@@ -426,8 +436,8 @@ var DynamicDrawer = function DynamicDrawer(props) {
         styles: styles
       },
       R.equals(filter.id, periodPanel) ? children : _react2.default.createElement(_AdvancedSelection2.default, _extends({
-        id: filter.id,
-        items: filter.values,
+        id: selectedId,
+        items: filter.values || [],
         isOpen: open,
         labelRenderer: labelRenderer,
         disableAccessor: disableAccessor ? R.pipe(R.prop('isEnabled'), R.not) : undefined,

package/package.json

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