@sis-cc/dotstatsuite-visions 7.7.0 → 7.8.2

package/es/CollapsibleTree/CollapsibleTree.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, Fragment, useEffect } from 'react';
 import * as R from 'ramda';
 import PropTypes from 'prop-types';
@@ -65,6 +67,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);
 
@@ -88,11 +105,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 React.createElement(
         Fragment,
@@ -103,28 +120,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 React.createElement(
             Collapse,
             { key: id, level: 0, label: label, isOpen: depthLevel >= 0 },
-            value && React.createElement(
+            React.createElement(
               Typography,
               { 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 React.createElement(
                 Collapse,
@@ -138,7 +155,7 @@ var CollapsibleTree = function CollapsibleTree(_ref) {
                 React.createElement(
                   Typography,
                   { variant: 'body2' },
-                  R.is(Function, valueHandler) ? valueHandler(_extends({ value: value }, handlerProps)) : value
+                  getValue(_extends({ value: value }, handlerProps))
                 )
               );
             }, children)
@@ -168,7 +185,8 @@ CollapsibleTree.propTypes = process.env.NODE_ENV !== "production" ? {
   children: PropTypes.node,
   labels: PropTypes.shape({
     collapseAll: PropTypes.string,
-    expandAll: PropTypes.string
+    expandAll: PropTypes.string,
+    noValue: PropTypes.string
   }),
   testId: PropTypes.string,
   valueHandler: PropTypes.func

package/es/CollapsibleTree/index.js

@@ -23,6 +23,11 @@
  *  })),
  *  defaultDepthLevel: PropTypes.number,
  *  testId: PropTypes.string,
+ *  labels: PropTypes.shape({
+ *    collapseAll: PropTypes.string,
+ *    expandAll: PropTypes.string,
+ *    noValue: PropTypes.string,
+ *  }),
  *};
  * @theme
  * {

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

@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 import MenuItem from '@material-ui/core/MenuItem';
-import { Tooltip } from '../';
 
 var useStyles = makeStyles(function (theme) {
   return {
@@ -55,7 +54,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/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;