@sis-cc/dotstatsuite-visions 7.6.1 → 7.8.0

package/es/DataHeader/DataHeader.js

@@ -158,6 +158,7 @@ var DataHeader = function DataHeader(_ref4) {
             className: cx(classes.title, classes.disclaimer),
             title: disclaimer,
             tabIndex: 0,
+            'data-testid': 'data-header-disclaimer',
             variant: 'warning',
             'aria-hidden': false,
             placement: 'bottom',

package/es/Dataflow/Dataflow.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, { useState } from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
@@ -119,21 +121,34 @@ var useStyles = makeStyles(function (theme) {
   };
 });
 
-var Dataflow = function Dataflow(_ref) {
+var BasicHTMLRenderer = function BasicHTMLRenderer(_ref) {
+  var html = _ref.html,
+      rest = _objectWithoutProperties(_ref, ['html']);
+
+  return React.createElement('span', _extends({ dangerouslySetInnerHTML: { __html: html } }, rest));
+};
+
+BasicHTMLRenderer.propTypes = process.env.NODE_ENV !== "production" ? {
+  html: PropTypes.string
+} : {};
+
+var Dataflow = function Dataflow(_ref2) {
   var _cx, _cx2, _cx3;
 
-  var testId = _ref.testId,
-      title = _ref.title,
-      body = _ref.body,
-      url = _ref.url,
-      handleUrl = _ref.handleUrl,
-      label = _ref.label,
-      labels = _ref.labels,
-      _ref$highlights = _ref.highlights,
-      highlights = _ref$highlights === undefined ? [] : _ref$highlights,
-      _ref$categories = _ref.categories,
-      categories = _ref$categories === undefined ? [] : _ref$categories,
-      children = _ref.children;
+  var testId = _ref2.testId,
+      title = _ref2.title,
+      body = _ref2.body,
+      url = _ref2.url,
+      handleUrl = _ref2.handleUrl,
+      label = _ref2.label,
+      labels = _ref2.labels,
+      _ref2$highlights = _ref2.highlights,
+      highlights = _ref2$highlights === undefined ? [] : _ref2$highlights,
+      _ref2$categories = _ref2.categories,
+      categories = _ref2$categories === undefined ? [] : _ref2$categories,
+      children = _ref2.children,
+      _ref2$HTMLRenderer = _ref2.HTMLRenderer,
+      HTMLRenderer = _ref2$HTMLRenderer === undefined ? BasicHTMLRenderer : _ref2$HTMLRenderer;
 
   var classes = useStyles();
 
@@ -174,7 +189,7 @@ var Dataflow = function Dataflow(_ref) {
                   color: 'primary',
                   underline: 'none'
                 },
-                React.createElement('span', { dangerouslySetInnerHTML: { __html: title } })
+                React.createElement(HTMLRenderer, { html: title })
               )
             )
           )
@@ -198,7 +213,7 @@ var Dataflow = function Dataflow(_ref) {
                 align: 'justify',
                 className: cx(classes.container, classes.mutedText, (_cx2 = {}, _cx2[classes.unmutedText] = isExpanded, _cx2))
               },
-              React.createElement('span', { dangerouslySetInnerHTML: { __html: description } })
+              React.createElement(HTMLRenderer, { html: description })
             ),
             !isExpanded && React.createElement('div', { className: classes.fading })
           )
@@ -209,8 +224,8 @@ var Dataflow = function Dataflow(_ref) {
           React.createElement(
             Typography,
             { variant: 'body2', align: 'justify', className: classes.container },
-            React.createElement('span', {
-              dangerouslySetInnerHTML: { __html: R.prop('highlightDescription')(body) },
+            React.createElement(HTMLRenderer, {
+              html: R.propOr('', 'highlightDescription')(body),
               className: cx((_cx3 = {}, _cx3[classes.noDisplay] = isExpanded, _cx3))
             })
           )
@@ -218,9 +233,9 @@ var Dataflow = function Dataflow(_ref) {
         React.createElement(
           CardContent,
           { className: classes.cardContent },
-          R.map(function (_ref2) {
-            var field = _ref2[0],
-                highlight = _ref2[1];
+          R.map(function (_ref3) {
+            var field = _ref3[0],
+                highlight = _ref3[1];
             return React.createElement(
               Typography,
               {
@@ -237,16 +252,16 @@ var Dataflow = function Dataflow(_ref) {
                 ':\xA0'
               ),
               ' ',
-              React.createElement('span', { dangerouslySetInnerHTML: { __html: highlight } })
+              React.createElement(HTMLRenderer, { html: highlight })
             );
           })(highlights),
           React.createElement(
             Collapse,
             { 'in': isExpanded },
             React.createElement(Divider, { className: classes.divider }),
-            R.map(function (_ref3) {
-              var field = _ref3[0],
-                  categorie = _ref3[1];
+            R.map(function (_ref4) {
+              var field = _ref4[0],
+                  categorie = _ref4[1];
               return React.createElement(
                 Typography,
                 {
@@ -357,13 +372,14 @@ Dataflow.propTypes = process.env.NODE_ENV !== "production" ? {
   }),
   highlights: PropTypes.array,
   categories: PropTypes.array,
-  children: PropTypes.node
+  children: PropTypes.node,
+  HTMLRenderer: PropTypes.func
 } : {};
 
-export default withBlank(function (_ref4) {
-  var isBlank = _ref4.isBlank,
-      _ref4$title = _ref4.title,
-      title = _ref4$title === undefined ? '' : _ref4$title;
+export default withBlank(function (_ref5) {
+  var isBlank = _ref5.isBlank,
+      _ref5$title = _ref5.title,
+      title = _ref5$title === undefined ? '' : _ref5$title;
   return {
     isBlank: R.or(isBlank, R.isEmpty(title))
   };

package/es/Dataflow/index.js

@@ -28,6 +28,7 @@
  *   }),
  *   highlights: PropTypes.array,
  *   categories: PropTypes.array,
+ *   HTMLRenderer: PropTypes.func,
  * };
  *
  * @theme

package/es/Loading/Loading.js

@@ -15,15 +15,21 @@ var useStyles = makeStyles(function (theme) {
       alignItems: 'center'
     },
     progress: {
-      margin: theme.spacing(2)
+      margin: theme.spacing(2),
+      color: function color(_ref) {
+        var isWarning = _ref.isWarning;
+        return isWarning ? theme.palette.warning.main : theme.palette.primary.main;
+      }
     }
   };
 });
 
-var Loading = function Loading(_ref) {
-  var message = _ref.message;
+var Loading = function Loading(_ref2) {
+  var message = _ref2.message,
+      _ref2$isWarning = _ref2.isWarning,
+      isWarning = _ref2$isWarning === undefined ? false : _ref2$isWarning;
 
-  var classes = useStyles();
+  var classes = useStyles({ isWarning: isWarning });
 
   return React.createElement(
     'div',
@@ -38,7 +44,8 @@ var Loading = function Loading(_ref) {
 };
 
 Loading.propTypes = process.env.NODE_ENV !== "production" ? {
-  message: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
+  message: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  isWarning: PropTypes.bool
 } : {};
 
 export default Loading;

package/es/ScopeList/Item.js

@@ -33,7 +33,8 @@ var Item = function Item(_ref) {
   var classes = _ref.classes,
       id = _ref.id,
       label = _ref.label,
-      description = _ref.description,
+      _ref$description = _ref.description,
+      description = _ref$description === undefined ? '' : _ref$description,
       _ref$nodePath = _ref.nodePath,
       nodePath = _ref$nodePath === undefined ? [] : _ref$nodePath,
       isSelected = _ref.isSelected,
@@ -52,7 +53,13 @@ var Item = function Item(_ref) {
       isRtl = _ref.isRtl,
       accessibility = _ref.accessibility,
       index = _ref.index,
-      labelRenderer = _ref.labelRenderer;
+      labelRenderer = _ref.labelRenderer,
+      HTMLRenderer = _ref.HTMLRenderer;
+
+  var _React$useState = React.useState(false),
+      isTooltipShown = _React$useState[0],
+      setIsTooltipShown = _React$useState[1];
+
   return React.createElement(
     ListItem,
     {
@@ -61,9 +68,9 @@ var Item = function Item(_ref) {
       className: cx(classes.listItemContainer, (_cx = {}, _cx[classes.disableSecondaryAction] = R.not(hasChild), _cx)),
       disabled: isDisabled,
       onClick: isDisabled ? null : changeSelection(id, index),
-      onMouseDown: R.is(Function, changeMouseSelection) && R.not(isDisabled) ? changeMouseSelection(index, { isDown: true }) : null,
-      onMouseUp: R.is(Function, changeMouseSelection) && R.not(isDisabled) ? changeMouseSelection(null, { isUp: true }) : null,
-      onMouseOver: R.is(Function, changeMouseSelection) && R.not(isDisabled) ? changeMouseSelection(index, { isOver: true }) : null,
+      onMouseDown: R.is(Function, changeMouseSelection) && R.not(isDisabled) && !isTooltipShown ? changeMouseSelection(index, { isDown: true }) : null,
+      onMouseUp: R.is(Function, changeMouseSelection) && R.not(isDisabled) && !isTooltipShown ? changeMouseSelection(null, { isUp: true }) : null,
+      onMouseOver: R.is(Function, changeMouseSelection) && R.not(isDisabled) && !isTooltipShown ? changeMouseSelection(index, { isOver: true }) : null,
       onKeyPress: function onKeyPress(e) {
         if (e.key === 'Enter' && R.not(isDisabled)) {
           changeSelection(id, index)(e);
@@ -106,11 +113,23 @@ var Item = function Item(_ref) {
         React.createElement(
           Tooltip,
           {
-            title: R.isNil(description) ? '' : description,
+            title: R.or(R.isNil(HTMLRenderer), R.isEmpty(description)) ? description : React.createElement(HTMLRenderer, { html: description, onClick: function onClick(e) {
+                return e.stopPropagation();
+              } }),
+            PopperProps: {
+              onMouseEnter: function onMouseEnter() {
+                return setIsTooltipShown(true);
+              },
+              onMouseLeave: function onMouseLeave() {
+                return setIsTooltipShown(false);
+              }
+            },
+            enterDelay: 400,
             tabIndex: 0,
             'aria-label': description,
             'aria-hidden': false,
-            placement: 'top'
+            placement: 'top',
+            interactive: Boolean(HTMLRenderer)
           },
           React.createElement(
             Typography,
@@ -118,7 +137,7 @@ var Item = function Item(_ref) {
               'data-testid': testId + '_value_' + id,
               color: 'inherit',
               variant: 'body2',
-              className: cx(classes.label, (_cx6 = {}, _cx6[classes.disabledLabel] = isDisabled, _cx6[classes.tooltipNotice] = !R.isNil(description), _cx6))
+              className: cx(classes.label, (_cx6 = {}, _cx6[classes.disabledLabel] = isDisabled, _cx6[classes.tooltipNotice] = !R.isEmpty(description), _cx6))
             },
             label
           )
@@ -212,7 +231,8 @@ Item.propTypes = process.env.NODE_ENV !== "production" ? {
   testId: PropTypes.string,
   accessibility: PropTypes.bool,
   index: PropTypes.number,
-  labelRenderer: PropTypes.func
+  labelRenderer: PropTypes.func,
+  HTMLRenderer: PropTypes.func
 } : {};
 
 export default Item;

package/es/ScopeList/ScopeList.js

@@ -52,7 +52,8 @@ var ScopeList = function ScopeList(props) {
       changeMouseSelection = props.changeMouseSelection,
       _props$labelRenderer = props.labelRenderer,
       labelRenderer = _props$labelRenderer === undefined ? R.prop('label') : _props$labelRenderer,
-      disableAccessor = props.disableAccessor;
+      disableAccessor = props.disableAccessor,
+      HTMLRenderer = props.HTMLRenderer;
 
   var _useState = useState(false),
       isMenuOpen = _useState[0],
@@ -236,6 +237,7 @@ var ScopeList = function ScopeList(props) {
               //if (isScrolling) return <div style={style}>...</div>
               var item = R.nth(index, list);
               return React.createElement(Item, _extends({
+                HTMLRenderer: HTMLRenderer,
                 labelRenderer: labelRenderer,
                 index: index,
                 style: style,
@@ -298,7 +300,8 @@ ScopeList.propTypes = process.env.NODE_ENV !== "production" ? {
   labelRenderer: PropTypes.func,
   disableAccessor: PropTypes.func,
   items: PropTypes.array,
-  itemsById: PropTypes.object
+  itemsById: PropTypes.object,
+  HTMLRenderer: PropTypes.func
 } : {};
 
 export default R.compose(withBlank(function (_ref3) {

package/es/TableHtml5/TableHtml5.js

@@ -71,7 +71,8 @@ var TableHtml5 = function TableHtml5(_ref) {
       activeCellHandler = _ref.activeCellHandler,
       SideIcon = _ref.SideIcon,
       _ref$testId = _ref.testId,
-      testId = _ref$testId === undefined ? 'vis-table' : _ref$testId;
+      testId = _ref$testId === undefined ? 'vis-table' : _ref$testId,
+      HTMLRenderer = _ref.HTMLRenderer;
 
   var classes = useStyles();
 
@@ -107,7 +108,12 @@ var TableHtml5 = function TableHtml5(_ref) {
   }, []);
 
   var isSingleObs = R.hasPath(['', '', '', 0], cells);
-  if (isSingleObs) return React.createElement(Cell, _extends({}, R.pathOr({}, ['', '', '', 0], cells), { cellHandler: cellHandler, isOne: true }));
+  if (isSingleObs) return React.createElement(Cell, _extends({
+    HTMLRenderer: HTMLRenderer
+  }, R.pathOr({}, ['', '', '', 0], cells), {
+    cellHandler: cellHandler,
+    isOne: true
+  }));
 
   var xLayoutData = R.pathOr([], [0, 1, 0, 'data'], sectionsData);
   var xLayoutDataLength = R.length(xLayoutData);
@@ -129,7 +135,8 @@ var TableHtml5 = function TableHtml5(_ref) {
         headerData: headerData,
         valuesHeaderData: valuesHeaderData,
         xLayoutDataLength: xLayoutDataLength,
-        subHeadCellsWidth: subHeadCellsWidth
+        subHeadCellsWidth: subHeadCellsWidth,
+        HTMLRenderer: HTMLRenderer
       }),
       React.createElement(SubHeader, {
         headerData: headerData,
@@ -137,7 +144,8 @@ var TableHtml5 = function TableHtml5(_ref) {
         activeCellIds: activeCellIds,
         SideIcon: SideIcon,
         ref: subHeadCellsRef,
-        subHeadCellsWidth: subHeadCellsWidth
+        subHeadCellsWidth: subHeadCellsWidth,
+        HTMLRenderer: HTMLRenderer
       })
     ),
     mapIndexed(function (section, index) {
@@ -154,7 +162,8 @@ var TableHtml5 = function TableHtml5(_ref) {
         activeCellIds: activeCellIds,
         activeCellHandler: activeCellHandler,
         SideIcon: SideIcon,
-        subHeadCellsWidth: subHeadCellsWidth
+        subHeadCellsWidth: subHeadCellsWidth,
+        HTMLRenderer: HTMLRenderer
       });
     }, sectionsData)
   );
@@ -168,7 +177,8 @@ TableHtml5.propTypes = process.env.NODE_ENV !== "production" ? {
   activeCellHandler: PropTypes.func,
   activeCellIds: PropTypes.object,
   SideIcon: PropTypes.func,
-  testId: PropTypes.string
+  testId: PropTypes.string,
+  HTMLRenderer: PropTypes.func
 } : {};
 
 export default TableHtml5;

package/es/TableHtml5/cell.js

@@ -56,7 +56,8 @@ var Cell = function Cell(_ref) {
       isActive = _ref.isActive,
       isHighlight = _ref.isHighlight,
       sideProps = _ref.sideProps,
-      SideIcon = _ref.SideIcon;
+      SideIcon = _ref.SideIcon,
+      HTMLRenderer = _ref.HTMLRenderer;
 
   var classes = useStyles();
   var hasFlag = R.not(R.isEmpty(flags));
@@ -72,8 +73,8 @@ var Cell = function Cell(_ref) {
       },
       className: classes.link
     },
-    value
-  ) : value;
+    R.is(Function, HTMLRenderer) ? React.createElement(HTMLRenderer, { html: value }) : value
+  ) : R.is(Function, HTMLRenderer) ? React.createElement(HTMLRenderer, { html: value }) : value;
 
   return React.createElement(
     TableCell,
@@ -90,7 +91,7 @@ var Cell = function Cell(_ref) {
         Typography,
         { variant: 'body1', tabIndex: 0, noWrap: hasFlag },
         !R.isNil(SideIcon) && React.createElement(SideIcon, { sideProps: sideProps, className: classes.value }),
-        hasFlag && React.createElement(Flags, { flags: flags }),
+        hasFlag && React.createElement(Flags, { HTMLRenderer: HTMLRenderer, flags: flags }),
         uiValue
       )
     )
@@ -108,7 +109,8 @@ Cell.propTypes = process.env.NODE_ENV !== "production" ? {
   isHighlight: PropTypes.bool,
   activeCellHandler: PropTypes.func,
   sideProps: PropTypes.object,
-  SideIcon: PropTypes.func
+  SideIcon: PropTypes.func,
+  HTMLRenderer: PropTypes.func
 } : {};
 
 export default Cell;

package/es/TableHtml5/flags.js

@@ -45,7 +45,8 @@ var Flags = function Flags(_ref) {
 
   var _ref$flags = _ref.flags,
       flags = _ref$flags === undefined ? [] : _ref$flags,
-      isHeader = _ref.isHeader;
+      isHeader = _ref.isHeader,
+      HTMLRenderer = _ref.HTMLRenderer;
 
   var classes = useStyles();
   var noFlags = R.isNil(flags) || R.isEmpty(flags);
@@ -55,7 +56,6 @@ var Flags = function Flags(_ref) {
   var codedIcons = R.pipe(R.reduce(function (acc, flag) {
     return R.when(R.always(R.has('code', flag)), R.append(flag.code))(acc);
   }, []), R.join(','))(flags);
-
   var content = React.createElement(
     'ul',
     { className: classes.content },
@@ -64,7 +64,7 @@ var Flags = function Flags(_ref) {
       return React.createElement(
         'li',
         { key: index },
-        label
+        R.is(Function, HTMLRenderer) ? React.createElement(HTMLRenderer, { html: label }) : label
       );
     }, flags)
   );
@@ -106,7 +106,8 @@ var Flags = function Flags(_ref) {
 
 Flags.propTypes = process.env.NODE_ENV !== "production" ? {
   flags: PropTypes.array,
-  isHeader: PropTypes.bool
+  isHeader: PropTypes.bool,
+  HTMLRenderer: PropTypes.func
 } : {};
 
 export default Flags;

package/es/TableHtml5/header.js

@@ -50,7 +50,8 @@ var Header = function Header(_ref) {
   var headerData = _ref.headerData,
       valuesHeaderData = _ref.valuesHeaderData,
       xLayoutDataLength = _ref.xLayoutDataLength,
-      subHeadCellsWidth = _ref.subHeadCellsWidth;
+      subHeadCellsWidth = _ref.subHeadCellsWidth,
+      HTMLRenderer = _ref.HTMLRenderer;
 
   var classes = useStyles();
   var theme = useTheme();
@@ -84,7 +85,7 @@ var Header = function Header(_ref) {
             Typography,
             { variant: 'body1', className: classes.cellLabelHeader },
             R.path([0, 'data', index, 'dimension', 'label'], headerData),
-            React.createElement(Flags, { flags: flags, isHeader: true })
+            React.createElement(Flags, { HTMLRenderer: HTMLRenderer, flags: flags, isHeader: true })
           )
         )
       ),
@@ -117,7 +118,7 @@ var Header = function Header(_ref) {
                 variant: 'body1'
               },
               R.prop('label', headerItem),
-              React.createElement(Flags, { flags: flags, isHeader: true })
+              React.createElement(Flags, { HTMLRenderer: HTMLRenderer, flags: flags, isHeader: true })
             )
           )
         );
@@ -130,7 +131,8 @@ Header.propTypes = process.env.NODE_ENV !== "production" ? {
   headerData: PropTypes.array,
   valuesHeaderData: PropTypes.array,
   xLayoutDataLength: PropTypes.number,
-  subHeadCellsWidth: PropTypes.array
+  subHeadCellsWidth: PropTypes.array,
+  HTMLRenderer: PropTypes.func
 } : {};
 
 export default Header;

package/es/TableHtml5/section.js

@@ -72,7 +72,8 @@ var Section = function Section(_ref) {
       sectionIndex = _ref.sectionIndex,
       nbColumnsByRows = _ref.nbColumnsByRows,
       SideIcon = _ref.SideIcon,
-      subHeadCellsWidth = _ref.subHeadCellsWidth;
+      subHeadCellsWidth = _ref.subHeadCellsWidth,
+      HTMLRenderer = _ref.HTMLRenderer;
 
   var classes = useStyles();
   var currentSection = R.path([0, 'key'], section);
@@ -90,7 +91,8 @@ var Section = function Section(_ref) {
       currentSection: currentSection,
       xLayoutDataLength: xLayoutDataLength,
       headerHeight: headerHeight,
-      SideIcon: SideIcon
+      SideIcon: SideIcon,
+      HTMLRenderer: HTMLRenderer
     }),
     R.map(function (sectionbody) {
       var _cx2;
@@ -137,7 +139,7 @@ var Section = function Section(_ref) {
                 Typography,
                 { variant: 'body1', tabIndex: 0 },
                 R.path(['value', 'label'], cell),
-                React.createElement(Flags, { flags: flags })
+                React.createElement(Flags, { HTMLRenderer: HTMLRenderer, flags: flags })
               )
             )
           );
@@ -152,7 +154,7 @@ var Section = function Section(_ref) {
             'div',
             { className: classes.flagContainer },
             !R.isNil(SideIcon) && React.createElement(SideIcon, { sideProps: R.prop('sideProps', sectionbody) }),
-            React.createElement(Flags, { flags: R.prop('flags', sectionbody) })
+            React.createElement(Flags, { HTMLRenderer: HTMLRenderer, flags: R.prop('flags', sectionbody) })
           )
         ),
         mapIndexed(function (item, columnIndex) {
@@ -168,6 +170,7 @@ var Section = function Section(_ref) {
           }, R.pathOr({ value: '..' }, [item.key, currentSection, sectionbody.key, 0], cells), {
             headers: rowIds + ' ' + columnIds + ' ' + currentSection,
             cellHandler: cellHandler,
+            HTMLRenderer: HTMLRenderer,
             SideIcon: SideIcon,
             isActive: isActive,
             isHighlight: R.any(R.identity)([R.prop(rowId)(activeCellIds), R.prop(columnIndex)(activeCellIds)]),
@@ -197,7 +200,8 @@ Section.propTypes = process.env.NODE_ENV !== "production" ? {
   nbColumnsByRows: PropTypes.array,
   maxColumns: PropTypes.number,
   SideIcon: PropTypes.func,
-  subHeadCellsWidth: PropTypes.arrayOf(PropTypes.number)
+  subHeadCellsWidth: PropTypes.arrayOf(PropTypes.number),
+  HTMLRenderer: PropTypes.func
 } : {};
 
 export default Section;

package/es/TableHtml5/sectionHeader.js

@@ -65,7 +65,8 @@ var SectionHeader = function SectionHeader(_ref) {
       currentSection = _ref.currentSection,
       xLayoutDataLength = _ref.xLayoutDataLength,
       headerHeight = _ref.headerHeight,
-      SideIcon = _ref.SideIcon;
+      SideIcon = _ref.SideIcon,
+      HTMLRenderer = _ref.HTMLRenderer;
 
   var classes = useStyles();
   if (R.compose(R.anyPass([R.isNil, R.isEmpty]), R.path([0, 'data']))(section)) return null;
@@ -125,7 +126,7 @@ var SectionHeader = function SectionHeader(_ref) {
             className: cx(classes.flag, classes.stickyHeaderSection, classes.rightLabelPosition, classes.sectionLabelsContainer)
           },
           !R.isNil(SideIcon) && React.createElement(SideIcon, { sideProps: R.path([0, 'sideProps'], section) }),
-          React.createElement(Flags, { flags: R.path([0, 'flags'], section) })
+          React.createElement(Flags, { HTMLRenderer: HTMLRenderer, flags: R.path([0, 'flags'], section) })
         )
       )
     )
@@ -138,7 +139,8 @@ SectionHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   currentSection: PropTypes.string,
   xLayoutDataLength: PropTypes.number,
   headerHeight: PropTypes.number,
-  SideIcon: PropTypes.func
+  SideIcon: PropTypes.func,
+  HTMLRenderer: PropTypes.func
 } : {};
 
 export default SectionHeader;

package/es/TableHtml5/subHeader.js

@@ -51,7 +51,8 @@ var SubHeader = React.forwardRef(function (_ref, refs) {
       xLayoutData = _ref.xLayoutData,
       activeCellIds = _ref.activeCellIds,
       subHeadCellsWidth = _ref.subHeadCellsWidth,
-      SideIcon = _ref.SideIcon;
+      SideIcon = _ref.SideIcon,
+      HTMLRenderer = _ref.HTMLRenderer;
 
   var classes = useStyles();
   var theme = useTheme();
@@ -79,7 +80,10 @@ var SubHeader = React.forwardRef(function (_ref, refs) {
             Typography,
             { variant: 'body1', tabIndex: 0, className: classes.label },
             R.path(['dimension', 'label'], rowItem),
-            React.createElement(Flags, { flags: R.path(['dimension', 'flags'], rowItem) })
+            React.createElement(Flags, {
+              HTMLRenderer: HTMLRenderer,
+              flags: R.path(['dimension', 'flags'], rowItem)
+            })
           )
         )
       );
@@ -109,7 +113,8 @@ SubHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   headerData: PropTypes.array,
   xLayoutData: PropTypes.array,
   SideIcon: PropTypes.func,
-  subHeadCellsWidth: PropTypes.arrayOf(PropTypes.number)
+  subHeadCellsWidth: PropTypes.arrayOf(PropTypes.number),
+  HTMLRenderer: PropTypes.func
 } : {};
 
 export default SubHeader;

package/lib/DataHeader/DataHeader.js

@@ -198,6 +198,7 @@ var DataHeader = function DataHeader(_ref4) {
             className: (0, _classnames2.default)(classes.title, classes.disclaimer),
             title: disclaimer,
             tabIndex: 0,
+            'data-testid': 'data-header-disclaimer',
             variant: 'warning',
             'aria-hidden': false,
             placement: 'bottom',

package/lib/Dataflow/Dataflow.js

@@ -72,6 +72,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, _styles.makeStyles)(function (theme) {
   return {
     card: {
@@ -173,21 +175,34 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
   };
 });
 
-var Dataflow = function Dataflow(_ref) {
+var BasicHTMLRenderer = function BasicHTMLRenderer(_ref) {
+  var html = _ref.html,
+      rest = _objectWithoutProperties(_ref, ['html']);
+
+  return _react2.default.createElement('span', _extends({ dangerouslySetInnerHTML: { __html: html } }, rest));
+};
+
+BasicHTMLRenderer.propTypes = process.env.NODE_ENV !== "production" ? {
+  html: _propTypes2.default.string
+} : {};
+
+var Dataflow = function Dataflow(_ref2) {
   var _cx, _cx2, _cx3;
 
-  var testId = _ref.testId,
-      title = _ref.title,
-      body = _ref.body,
-      url = _ref.url,
-      handleUrl = _ref.handleUrl,
-      label = _ref.label,
-      labels = _ref.labels,
-      _ref$highlights = _ref.highlights,
-      highlights = _ref$highlights === undefined ? [] : _ref$highlights,
-      _ref$categories = _ref.categories,
-      categories = _ref$categories === undefined ? [] : _ref$categories,
-      children = _ref.children;
+  var testId = _ref2.testId,
+      title = _ref2.title,
+      body = _ref2.body,
+      url = _ref2.url,
+      handleUrl = _ref2.handleUrl,
+      label = _ref2.label,
+      labels = _ref2.labels,
+      _ref2$highlights = _ref2.highlights,
+      highlights = _ref2$highlights === undefined ? [] : _ref2$highlights,
+      _ref2$categories = _ref2.categories,
+      categories = _ref2$categories === undefined ? [] : _ref2$categories,
+      children = _ref2.children,
+      _ref2$HTMLRenderer = _ref2.HTMLRenderer,
+      HTMLRenderer = _ref2$HTMLRenderer === undefined ? BasicHTMLRenderer : _ref2$HTMLRenderer;
 
   var classes = useStyles();
 
@@ -228,7 +243,7 @@ var Dataflow = function Dataflow(_ref) {
                   color: 'primary',
                   underline: 'none'
                 },
-                _react2.default.createElement('span', { dangerouslySetInnerHTML: { __html: title } })
+                _react2.default.createElement(HTMLRenderer, { html: title })
               )
             )
           )
@@ -252,7 +267,7 @@ var Dataflow = function Dataflow(_ref) {
                 align: 'justify',
                 className: (0, _classnames2.default)(classes.container, classes.mutedText, (_cx2 = {}, _cx2[classes.unmutedText] = isExpanded, _cx2))
               },
-              _react2.default.createElement('span', { dangerouslySetInnerHTML: { __html: description } })
+              _react2.default.createElement(HTMLRenderer, { html: description })
             ),
             !isExpanded && _react2.default.createElement('div', { className: classes.fading })
           )
@@ -263,8 +278,8 @@ var Dataflow = function Dataflow(_ref) {
           _react2.default.createElement(
             _Typography2.default,
             { variant: 'body2', align: 'justify', className: classes.container },
-            _react2.default.createElement('span', {
-              dangerouslySetInnerHTML: { __html: R.prop('highlightDescription')(body) },
+            _react2.default.createElement(HTMLRenderer, {
+              html: R.propOr('', 'highlightDescription')(body),
               className: (0, _classnames2.default)((_cx3 = {}, _cx3[classes.noDisplay] = isExpanded, _cx3))
             })
           )
@@ -272,9 +287,9 @@ var Dataflow = function Dataflow(_ref) {
         _react2.default.createElement(
           _CardContent2.default,
           { className: classes.cardContent },
-          R.map(function (_ref2) {
-            var field = _ref2[0],
-                highlight = _ref2[1];
+          R.map(function (_ref3) {
+            var field = _ref3[0],
+                highlight = _ref3[1];
             return _react2.default.createElement(
               _Typography2.default,
               {
@@ -291,16 +306,16 @@ var Dataflow = function Dataflow(_ref) {
                 ':\xA0'
               ),
               ' ',
-              _react2.default.createElement('span', { dangerouslySetInnerHTML: { __html: highlight } })
+              _react2.default.createElement(HTMLRenderer, { html: highlight })
             );
           })(highlights),
           _react2.default.createElement(
             _Collapse2.default,
             { 'in': isExpanded },
             _react2.default.createElement(_Divider2.default, { className: classes.divider }),
-            R.map(function (_ref3) {
-              var field = _ref3[0],
-                  categorie = _ref3[1];
+            R.map(function (_ref4) {
+              var field = _ref4[0],
+                  categorie = _ref4[1];
               return _react2.default.createElement(
                 _Typography2.default,
                 {
@@ -411,13 +426,14 @@ Dataflow.propTypes = process.env.NODE_ENV !== "production" ? {
   }),
   highlights: _propTypes2.default.array,
   categories: _propTypes2.default.array,
-  children: _propTypes2.default.node
+  children: _propTypes2.default.node,
+  HTMLRenderer: _propTypes2.default.func
 } : {};
 
-exports.default = (0, _utils.withBlank)(function (_ref4) {
-  var isBlank = _ref4.isBlank,
-      _ref4$title = _ref4.title,
-      title = _ref4$title === undefined ? '' : _ref4$title;
+exports.default = (0, _utils.withBlank)(function (_ref5) {
+  var isBlank = _ref5.isBlank,
+      _ref5$title = _ref5.title,
+      title = _ref5$title === undefined ? '' : _ref5$title;
   return {
     isBlank: R.or(isBlank, R.isEmpty(title))
   };

package/lib/Loading/Loading.js

@@ -33,15 +33,21 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       alignItems: 'center'
     },
     progress: {
-      margin: theme.spacing(2)
+      margin: theme.spacing(2),
+      color: function color(_ref) {
+        var isWarning = _ref.isWarning;
+        return isWarning ? theme.palette.warning.main : theme.palette.primary.main;
+      }
     }
   };
 });
 
-var Loading = function Loading(_ref) {
-  var message = _ref.message;
+var Loading = function Loading(_ref2) {
+  var message = _ref2.message,
+      _ref2$isWarning = _ref2.isWarning,
+      isWarning = _ref2$isWarning === undefined ? false : _ref2$isWarning;
 
-  var classes = useStyles();
+  var classes = useStyles({ isWarning: isWarning });
 
   return _react2.default.createElement(
     'div',
@@ -56,7 +62,8 @@ var Loading = function Loading(_ref) {
 };
 
 Loading.propTypes = process.env.NODE_ENV !== "production" ? {
-  message: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element])
+  message: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
+  isWarning: _propTypes2.default.bool
 } : {};
 
 exports.default = Loading;

package/lib/ScopeList/Item.js

@@ -71,7 +71,8 @@ var Item = function Item(_ref) {
   var classes = _ref.classes,
       id = _ref.id,
       label = _ref.label,
-      description = _ref.description,
+      _ref$description = _ref.description,
+      description = _ref$description === undefined ? '' : _ref$description,
       _ref$nodePath = _ref.nodePath,
       nodePath = _ref$nodePath === undefined ? [] : _ref$nodePath,
       isSelected = _ref.isSelected,
@@ -90,7 +91,13 @@ var Item = function Item(_ref) {
       isRtl = _ref.isRtl,
       accessibility = _ref.accessibility,
       index = _ref.index,
-      labelRenderer = _ref.labelRenderer;
+      labelRenderer = _ref.labelRenderer,
+      HTMLRenderer = _ref.HTMLRenderer;
+
+  var _React$useState = _react2.default.useState(false),
+      isTooltipShown = _React$useState[0],
+      setIsTooltipShown = _React$useState[1];
+
   return _react2.default.createElement(
     _ListItem2.default,
     {
@@ -99,9 +106,9 @@ var Item = function Item(_ref) {
       className: (0, _classnames2.default)(classes.listItemContainer, (_cx = {}, _cx[classes.disableSecondaryAction] = R.not(hasChild), _cx)),
       disabled: isDisabled,
       onClick: isDisabled ? null : changeSelection(id, index),
-      onMouseDown: R.is(Function, changeMouseSelection) && R.not(isDisabled) ? changeMouseSelection(index, { isDown: true }) : null,
-      onMouseUp: R.is(Function, changeMouseSelection) && R.not(isDisabled) ? changeMouseSelection(null, { isUp: true }) : null,
-      onMouseOver: R.is(Function, changeMouseSelection) && R.not(isDisabled) ? changeMouseSelection(index, { isOver: true }) : null,
+      onMouseDown: R.is(Function, changeMouseSelection) && R.not(isDisabled) && !isTooltipShown ? changeMouseSelection(index, { isDown: true }) : null,
+      onMouseUp: R.is(Function, changeMouseSelection) && R.not(isDisabled) && !isTooltipShown ? changeMouseSelection(null, { isUp: true }) : null,
+      onMouseOver: R.is(Function, changeMouseSelection) && R.not(isDisabled) && !isTooltipShown ? changeMouseSelection(index, { isOver: true }) : null,
       onKeyPress: function onKeyPress(e) {
         if (e.key === 'Enter' && R.not(isDisabled)) {
           changeSelection(id, index)(e);
@@ -144,11 +151,23 @@ var Item = function Item(_ref) {
         _react2.default.createElement(
           _.Tooltip,
           {
-            title: R.isNil(description) ? '' : description,
+            title: R.or(R.isNil(HTMLRenderer), R.isEmpty(description)) ? description : _react2.default.createElement(HTMLRenderer, { html: description, onClick: function onClick(e) {
+                return e.stopPropagation();
+              } }),
+            PopperProps: {
+              onMouseEnter: function onMouseEnter() {
+                return setIsTooltipShown(true);
+              },
+              onMouseLeave: function onMouseLeave() {
+                return setIsTooltipShown(false);
+              }
+            },
+            enterDelay: 400,
             tabIndex: 0,
             'aria-label': description,
             'aria-hidden': false,
-            placement: 'top'
+            placement: 'top',
+            interactive: Boolean(HTMLRenderer)
           },
           _react2.default.createElement(
             _Typography2.default,
@@ -156,7 +175,7 @@ var Item = function Item(_ref) {
               'data-testid': testId + '_value_' + id,
               color: 'inherit',
               variant: 'body2',
-              className: (0, _classnames2.default)(classes.label, (_cx6 = {}, _cx6[classes.disabledLabel] = isDisabled, _cx6[classes.tooltipNotice] = !R.isNil(description), _cx6))
+              className: (0, _classnames2.default)(classes.label, (_cx6 = {}, _cx6[classes.disabledLabel] = isDisabled, _cx6[classes.tooltipNotice] = !R.isEmpty(description), _cx6))
             },
             label
           )
@@ -250,7 +269,8 @@ Item.propTypes = process.env.NODE_ENV !== "production" ? {
   testId: _propTypes2.default.string,
   accessibility: _propTypes2.default.bool,
   index: _propTypes2.default.number,
-  labelRenderer: _propTypes2.default.func
+  labelRenderer: _propTypes2.default.func,
+  HTMLRenderer: _propTypes2.default.func
 } : {};
 
 exports.default = Item;

package/lib/ScopeList/ScopeList.js

@@ -105,7 +105,8 @@ var ScopeList = function ScopeList(props) {
       changeMouseSelection = props.changeMouseSelection,
       _props$labelRenderer = props.labelRenderer,
       labelRenderer = _props$labelRenderer === undefined ? R.prop('label') : _props$labelRenderer,
-      disableAccessor = props.disableAccessor;
+      disableAccessor = props.disableAccessor,
+      HTMLRenderer = props.HTMLRenderer;
 
   var _useState = (0, _react.useState)(false),
       isMenuOpen = _useState[0],
@@ -289,6 +290,7 @@ var ScopeList = function ScopeList(props) {
               //if (isScrolling) return <div style={style}>...</div>
               var item = R.nth(index, list);
               return _react2.default.createElement(_Item2.default, _extends({
+                HTMLRenderer: HTMLRenderer,
                 labelRenderer: labelRenderer,
                 index: index,
                 style: style,
@@ -351,7 +353,8 @@ ScopeList.propTypes = process.env.NODE_ENV !== "production" ? {
   labelRenderer: _propTypes2.default.func,
   disableAccessor: _propTypes2.default.func,
   items: _propTypes2.default.array,
-  itemsById: _propTypes2.default.object
+  itemsById: _propTypes2.default.object,
+  HTMLRenderer: _propTypes2.default.func
 } : {};
 
 exports.default = R.compose((0, _utils.withBlank)(function (_ref3) {

package/lib/TableHtml5/TableHtml5.js

@@ -104,7 +104,8 @@ var TableHtml5 = function TableHtml5(_ref) {
       activeCellHandler = _ref.activeCellHandler,
       SideIcon = _ref.SideIcon,
       _ref$testId = _ref.testId,
-      testId = _ref$testId === undefined ? 'vis-table' : _ref$testId;
+      testId = _ref$testId === undefined ? 'vis-table' : _ref$testId,
+      HTMLRenderer = _ref.HTMLRenderer;
 
   var classes = useStyles();
 
@@ -140,7 +141,12 @@ var TableHtml5 = function TableHtml5(_ref) {
   }, []);
 
   var isSingleObs = R.hasPath(['', '', '', 0], cells);
-  if (isSingleObs) return _react2.default.createElement(_cell2.default, _extends({}, R.pathOr({}, ['', '', '', 0], cells), { cellHandler: cellHandler, isOne: true }));
+  if (isSingleObs) return _react2.default.createElement(_cell2.default, _extends({
+    HTMLRenderer: HTMLRenderer
+  }, R.pathOr({}, ['', '', '', 0], cells), {
+    cellHandler: cellHandler,
+    isOne: true
+  }));
 
   var xLayoutData = R.pathOr([], [0, 1, 0, 'data'], sectionsData);
   var xLayoutDataLength = R.length(xLayoutData);
@@ -162,7 +168,8 @@ var TableHtml5 = function TableHtml5(_ref) {
         headerData: headerData,
         valuesHeaderData: valuesHeaderData,
         xLayoutDataLength: xLayoutDataLength,
-        subHeadCellsWidth: subHeadCellsWidth
+        subHeadCellsWidth: subHeadCellsWidth,
+        HTMLRenderer: HTMLRenderer
       }),
       _react2.default.createElement(_subHeader2.default, {
         headerData: headerData,
@@ -170,7 +177,8 @@ var TableHtml5 = function TableHtml5(_ref) {
         activeCellIds: activeCellIds,
         SideIcon: SideIcon,
         ref: subHeadCellsRef,
-        subHeadCellsWidth: subHeadCellsWidth
+        subHeadCellsWidth: subHeadCellsWidth,
+        HTMLRenderer: HTMLRenderer
       })
     ),
     mapIndexed(function (section, index) {
@@ -187,7 +195,8 @@ var TableHtml5 = function TableHtml5(_ref) {
         activeCellIds: activeCellIds,
         activeCellHandler: activeCellHandler,
         SideIcon: SideIcon,
-        subHeadCellsWidth: subHeadCellsWidth
+        subHeadCellsWidth: subHeadCellsWidth,
+        HTMLRenderer: HTMLRenderer
       });
     }, sectionsData)
   );
@@ -201,7 +210,8 @@ TableHtml5.propTypes = process.env.NODE_ENV !== "production" ? {
   activeCellHandler: _propTypes2.default.func,
   activeCellIds: _propTypes2.default.object,
   SideIcon: _propTypes2.default.func,
-  testId: _propTypes2.default.string
+  testId: _propTypes2.default.string,
+  HTMLRenderer: _propTypes2.default.func
 } : {};
 
 exports.default = TableHtml5;

package/lib/TableHtml5/cell.js

@@ -88,7 +88,8 @@ var Cell = function Cell(_ref) {
       isActive = _ref.isActive,
       isHighlight = _ref.isHighlight,
       sideProps = _ref.sideProps,
-      SideIcon = _ref.SideIcon;
+      SideIcon = _ref.SideIcon,
+      HTMLRenderer = _ref.HTMLRenderer;
 
   var classes = useStyles();
   var hasFlag = R.not(R.isEmpty(flags));
@@ -104,8 +105,8 @@ var Cell = function Cell(_ref) {
       },
       className: classes.link
     },
-    value
-  ) : value;
+    R.is(Function, HTMLRenderer) ? _react2.default.createElement(HTMLRenderer, { html: value }) : value
+  ) : R.is(Function, HTMLRenderer) ? _react2.default.createElement(HTMLRenderer, { html: value }) : value;
 
   return _react2.default.createElement(
     _TableCell2.default,
@@ -122,7 +123,7 @@ var Cell = function Cell(_ref) {
         _Typography2.default,
         { variant: 'body1', tabIndex: 0, noWrap: hasFlag },
         !R.isNil(SideIcon) && _react2.default.createElement(SideIcon, { sideProps: sideProps, className: classes.value }),
-        hasFlag && _react2.default.createElement(_flags2.default, { flags: flags }),
+        hasFlag && _react2.default.createElement(_flags2.default, { HTMLRenderer: HTMLRenderer, flags: flags }),
         uiValue
       )
     )
@@ -140,7 +141,8 @@ Cell.propTypes = process.env.NODE_ENV !== "production" ? {
   isHighlight: _propTypes2.default.bool,
   activeCellHandler: _propTypes2.default.func,
   sideProps: _propTypes2.default.object,
-  SideIcon: _propTypes2.default.func
+  SideIcon: _propTypes2.default.func,
+  HTMLRenderer: _propTypes2.default.func
 } : {};
 
 exports.default = Cell;

package/lib/TableHtml5/flags.js

@@ -72,7 +72,8 @@ var Flags = function Flags(_ref) {
 
   var _ref$flags = _ref.flags,
       flags = _ref$flags === undefined ? [] : _ref$flags,
-      isHeader = _ref.isHeader;
+      isHeader = _ref.isHeader,
+      HTMLRenderer = _ref.HTMLRenderer;
 
   var classes = useStyles();
   var noFlags = R.isNil(flags) || R.isEmpty(flags);
@@ -82,7 +83,6 @@ var Flags = function Flags(_ref) {
   var codedIcons = R.pipe(R.reduce(function (acc, flag) {
     return R.when(R.always(R.has('code', flag)), R.append(flag.code))(acc);
   }, []), R.join(','))(flags);
-
   var content = _react2.default.createElement(
     'ul',
     { className: classes.content },
@@ -91,7 +91,7 @@ var Flags = function Flags(_ref) {
       return _react2.default.createElement(
         'li',
         { key: index },
-        label
+        R.is(Function, HTMLRenderer) ? _react2.default.createElement(HTMLRenderer, { html: label }) : label
       );
     }, flags)
   );
@@ -133,7 +133,8 @@ var Flags = function Flags(_ref) {
 
 Flags.propTypes = process.env.NODE_ENV !== "production" ? {
   flags: _propTypes2.default.array,
-  isHeader: _propTypes2.default.bool
+  isHeader: _propTypes2.default.bool,
+  HTMLRenderer: _propTypes2.default.func
 } : {};
 
 exports.default = Flags;

package/lib/TableHtml5/header.js

@@ -83,7 +83,8 @@ var Header = function Header(_ref) {
   var headerData = _ref.headerData,
       valuesHeaderData = _ref.valuesHeaderData,
       xLayoutDataLength = _ref.xLayoutDataLength,
-      subHeadCellsWidth = _ref.subHeadCellsWidth;
+      subHeadCellsWidth = _ref.subHeadCellsWidth,
+      HTMLRenderer = _ref.HTMLRenderer;
 
   var classes = useStyles();
   var theme = (0, _styles.useTheme)();
@@ -117,7 +118,7 @@ var Header = function Header(_ref) {
             _Typography2.default,
             { variant: 'body1', className: classes.cellLabelHeader },
             R.path([0, 'data', index, 'dimension', 'label'], headerData),
-            _react2.default.createElement(_flags2.default, { flags: flags, isHeader: true })
+            _react2.default.createElement(_flags2.default, { HTMLRenderer: HTMLRenderer, flags: flags, isHeader: true })
           )
         )
       ),
@@ -150,7 +151,7 @@ var Header = function Header(_ref) {
                 variant: 'body1'
               },
               R.prop('label', headerItem),
-              _react2.default.createElement(_flags2.default, { flags: flags, isHeader: true })
+              _react2.default.createElement(_flags2.default, { HTMLRenderer: HTMLRenderer, flags: flags, isHeader: true })
             )
           )
         );
@@ -163,7 +164,8 @@ Header.propTypes = process.env.NODE_ENV !== "production" ? {
   headerData: _propTypes2.default.array,
   valuesHeaderData: _propTypes2.default.array,
   xLayoutDataLength: _propTypes2.default.number,
-  subHeadCellsWidth: _propTypes2.default.array
+  subHeadCellsWidth: _propTypes2.default.array,
+  HTMLRenderer: _propTypes2.default.func
 } : {};
 
 exports.default = Header;

package/lib/TableHtml5/section.js

@@ -114,7 +114,8 @@ var Section = function Section(_ref) {
       sectionIndex = _ref.sectionIndex,
       nbColumnsByRows = _ref.nbColumnsByRows,
       SideIcon = _ref.SideIcon,
-      subHeadCellsWidth = _ref.subHeadCellsWidth;
+      subHeadCellsWidth = _ref.subHeadCellsWidth,
+      HTMLRenderer = _ref.HTMLRenderer;
 
   var classes = useStyles();
   var currentSection = R.path([0, 'key'], section);
@@ -132,7 +133,8 @@ var Section = function Section(_ref) {
       currentSection: currentSection,
       xLayoutDataLength: xLayoutDataLength,
       headerHeight: headerHeight,
-      SideIcon: SideIcon
+      SideIcon: SideIcon,
+      HTMLRenderer: HTMLRenderer
     }),
     R.map(function (sectionbody) {
       var _cx2;
@@ -179,7 +181,7 @@ var Section = function Section(_ref) {
                 _Typography2.default,
                 { variant: 'body1', tabIndex: 0 },
                 R.path(['value', 'label'], cell),
-                _react2.default.createElement(_flags2.default, { flags: flags })
+                _react2.default.createElement(_flags2.default, { HTMLRenderer: HTMLRenderer, flags: flags })
               )
             )
           );
@@ -194,7 +196,7 @@ var Section = function Section(_ref) {
             'div',
             { className: classes.flagContainer },
             !R.isNil(SideIcon) && _react2.default.createElement(SideIcon, { sideProps: R.prop('sideProps', sectionbody) }),
-            _react2.default.createElement(_flags2.default, { flags: R.prop('flags', sectionbody) })
+            _react2.default.createElement(_flags2.default, { HTMLRenderer: HTMLRenderer, flags: R.prop('flags', sectionbody) })
           )
         ),
         mapIndexed(function (item, columnIndex) {
@@ -210,6 +212,7 @@ var Section = function Section(_ref) {
           }, R.pathOr({ value: '..' }, [item.key, currentSection, sectionbody.key, 0], cells), {
             headers: rowIds + ' ' + columnIds + ' ' + currentSection,
             cellHandler: cellHandler,
+            HTMLRenderer: HTMLRenderer,
             SideIcon: SideIcon,
             isActive: isActive,
             isHighlight: R.any(R.identity)([R.prop(rowId)(activeCellIds), R.prop(columnIndex)(activeCellIds)]),
@@ -239,7 +242,8 @@ Section.propTypes = process.env.NODE_ENV !== "production" ? {
   nbColumnsByRows: _propTypes2.default.array,
   maxColumns: _propTypes2.default.number,
   SideIcon: _propTypes2.default.func,
-  subHeadCellsWidth: _propTypes2.default.arrayOf(_propTypes2.default.number)
+  subHeadCellsWidth: _propTypes2.default.arrayOf(_propTypes2.default.number),
+  HTMLRenderer: _propTypes2.default.func
 } : {};
 
 exports.default = Section;

package/lib/TableHtml5/sectionHeader.js

@@ -101,7 +101,8 @@ var SectionHeader = function SectionHeader(_ref) {
       currentSection = _ref.currentSection,
       xLayoutDataLength = _ref.xLayoutDataLength,
       headerHeight = _ref.headerHeight,
-      SideIcon = _ref.SideIcon;
+      SideIcon = _ref.SideIcon,
+      HTMLRenderer = _ref.HTMLRenderer;
 
   var classes = useStyles();
   if (R.compose(R.anyPass([R.isNil, R.isEmpty]), R.path([0, 'data']))(section)) return null;
@@ -161,7 +162,7 @@ var SectionHeader = function SectionHeader(_ref) {
             className: (0, _classnames2.default)(classes.flag, classes.stickyHeaderSection, classes.rightLabelPosition, classes.sectionLabelsContainer)
           },
           !R.isNil(SideIcon) && _react2.default.createElement(SideIcon, { sideProps: R.path([0, 'sideProps'], section) }),
-          _react2.default.createElement(_flags2.default, { flags: R.path([0, 'flags'], section) })
+          _react2.default.createElement(_flags2.default, { HTMLRenderer: HTMLRenderer, flags: R.path([0, 'flags'], section) })
         )
       )
     )
@@ -174,7 +175,8 @@ SectionHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   currentSection: _propTypes2.default.string,
   xLayoutDataLength: _propTypes2.default.number,
   headerHeight: _propTypes2.default.number,
-  SideIcon: _propTypes2.default.func
+  SideIcon: _propTypes2.default.func,
+  HTMLRenderer: _propTypes2.default.func
 } : {};
 
 exports.default = SectionHeader;

package/lib/TableHtml5/subHeader.js

@@ -84,7 +84,8 @@ var SubHeader = _react2.default.forwardRef(function (_ref, refs) {
       xLayoutData = _ref.xLayoutData,
       activeCellIds = _ref.activeCellIds,
       subHeadCellsWidth = _ref.subHeadCellsWidth,
-      SideIcon = _ref.SideIcon;
+      SideIcon = _ref.SideIcon,
+      HTMLRenderer = _ref.HTMLRenderer;
 
   var classes = useStyles();
   var theme = (0, _styles.useTheme)();
@@ -112,7 +113,10 @@ var SubHeader = _react2.default.forwardRef(function (_ref, refs) {
             _Typography2.default,
             { variant: 'body1', tabIndex: 0, className: classes.label },
             R.path(['dimension', 'label'], rowItem),
-            _react2.default.createElement(_flags2.default, { flags: R.path(['dimension', 'flags'], rowItem) })
+            _react2.default.createElement(_flags2.default, {
+              HTMLRenderer: HTMLRenderer,
+              flags: R.path(['dimension', 'flags'], rowItem)
+            })
           )
         )
       );
@@ -142,7 +146,8 @@ SubHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   headerData: _propTypes2.default.array,
   xLayoutData: _propTypes2.default.array,
   SideIcon: _propTypes2.default.func,
-  subHeadCellsWidth: _propTypes2.default.arrayOf(_propTypes2.default.number)
+  subHeadCellsWidth: _propTypes2.default.arrayOf(_propTypes2.default.number),
+  HTMLRenderer: _propTypes2.default.func
 } : {};
 
 exports.default = SubHeader;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sis-cc/dotstatsuite-visions",
-  "version": "7.6.1",
+  "version": "7.8.0",
   "description": "Library of visual components",
   "author": "OECD",
   "homepage": "https://visions-qa.siscc.org/#o",
@@ -80,6 +80,7 @@
     "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"