@sis-cc/dotstatsuite-visions 7.7.0 → 7.8.2

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/CollapsibleTree/CollapsibleTree.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, _styles.makeStyles)(function (theme) {
   return {
     title: _extends({
@@ -109,6 +111,21 @@ var CollapsibleTree = function CollapsibleTree(_ref) {
     return setDepthLevel(defaultDepthLevel);
   };
 
+  var getValue = function getValue(_ref2) {
+    var value = _ref2.value,
+        _ref2$children = _ref2.children,
+        children = _ref2$children === undefined ? [] : _ref2$children,
+        handlerProps = _objectWithoutProperties(_ref2, ['value', 'children']);
+
+    if ((R.isNil(value) || R.isEmpty(value)) && R.isEmpty(children)) {
+      return R.prop('noValue', labels);
+    }
+    if (R.is(Function, valueHandler)) {
+      return valueHandler(_extends({ value: value }, handlerProps));
+    }
+    return value;
+  };
+
   var isAllOpen = depthLevel >= defaultDepthLevel;
   var buttonAllOpenLabel = isAllOpen ? R.prop('collapseAll', labels) : R.prop('expandAll', labels);
 
@@ -132,11 +149,11 @@ var CollapsibleTree = function CollapsibleTree(_ref) {
       ),
       children
     ),
-    R.map(function (_ref2) {
-      var id = _ref2.id,
-          label = _ref2.label,
-          _ref2$children = _ref2.children,
-          children = _ref2$children === undefined ? [] : _ref2$children;
+    R.map(function (_ref3) {
+      var id = _ref3.id,
+          label = _ref3.label,
+          _ref3$children = _ref3.children,
+          children = _ref3$children === undefined ? [] : _ref3$children;
 
       return _react2.default.createElement(
         _react.Fragment,
@@ -147,28 +164,28 @@ var CollapsibleTree = function CollapsibleTree(_ref) {
           { variant: 'h5', className: classes.title },
           label
         ),
-        R.map(function (_ref3) {
-          var id = _ref3.id,
-              label = _ref3.label,
-              children = _ref3.children,
-              value = _ref3.value,
-              _ref3$handlerProps = _ref3.handlerProps,
-              handlerProps = _ref3$handlerProps === undefined ? {} : _ref3$handlerProps;
+        R.map(function (_ref4) {
+          var id = _ref4.id,
+              label = _ref4.label,
+              children = _ref4.children,
+              value = _ref4.value,
+              _ref4$handlerProps = _ref4.handlerProps,
+              handlerProps = _ref4$handlerProps === undefined ? {} : _ref4$handlerProps;
 
           return _react2.default.createElement(
             _Collapse2.default,
             { key: id, level: 0, label: label, isOpen: depthLevel >= 0 },
-            value && _react2.default.createElement(
+            _react2.default.createElement(
               _Typography2.default,
               { className: classes.spacingValue, variant: 'body2' },
-              R.is(Function, valueHandler) ? valueHandler(_extends({ value: value }, handlerProps)) : value
+              getValue(_extends({ value: value, children: children }, handlerProps))
             ),
-            children && R.map(function (_ref4) {
-              var id = _ref4.id,
-                  label = _ref4.label,
-                  value = _ref4.value,
-                  _ref4$handlerProps = _ref4.handlerProps,
-                  handlerProps = _ref4$handlerProps === undefined ? {} : _ref4$handlerProps;
+            children && R.map(function (_ref5) {
+              var id = _ref5.id,
+                  label = _ref5.label,
+                  value = _ref5.value,
+                  _ref5$handlerProps = _ref5.handlerProps,
+                  handlerProps = _ref5$handlerProps === undefined ? {} : _ref5$handlerProps;
 
               return _react2.default.createElement(
                 _Collapse2.default,
@@ -182,7 +199,7 @@ var CollapsibleTree = function CollapsibleTree(_ref) {
                 _react2.default.createElement(
                   _Typography2.default,
                   { variant: 'body2' },
-                  R.is(Function, valueHandler) ? valueHandler(_extends({ value: value }, handlerProps)) : value
+                  getValue(_extends({ value: value }, handlerProps))
                 )
               );
             }, children)
@@ -212,7 +229,8 @@ CollapsibleTree.propTypes = process.env.NODE_ENV !== "production" ? {
   children: _propTypes2.default.node,
   labels: _propTypes2.default.shape({
     collapseAll: _propTypes2.default.string,
-    expandAll: _propTypes2.default.string
+    expandAll: _propTypes2.default.string,
+    noValue: _propTypes2.default.string
   }),
   testId: _propTypes2.default.string,
   valueHandler: _propTypes2.default.func

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/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/Select/Select.js

@@ -26,8 +26,6 @@ var _MenuItem = require('@material-ui/core/MenuItem');
 
 var _MenuItem2 = _interopRequireDefault(_MenuItem);
 
-var _ = require('../');
-
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -79,7 +77,7 @@ var Select = function Select(_ref) {
     if (ref.current && open) {
       setWidth(ref.current.clientWidth);
     }
-  }, [ref.current, open]);
+  }, [open]);
 
   var getter = function getter(key) {
     return function (accessor) {

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;