@splunk/visualizations 25.13.0 → 26.0.0

package/Table.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 475);
+/******/ 	return __webpack_require__(__webpack_require__.s = 479);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -120,7 +120,7 @@ module.exports = require("@splunk/themes/variables");
 
 /***/ }),
 
-/***/ 111:
+/***/ 112:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Table");
@@ -134,7 +134,7 @@ module.exports = require("@splunk/visualizations-shared/colorUtils");
 
 /***/ }),
 
-/***/ 123:
+/***/ 124:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Message");
@@ -159,14 +159,14 @@ var Item = styled_components_1.default.div.attrs(function (_ref) {
   var width = _ref.width;
   return {
     style: {
-      width: style_1.toPx(width)
+      width: (0, style_1.toPx)(width)
     }
   };
 }).withConfig({
   displayName: "FixedSizeContainer__Item",
   componentId: "sc-1yhgpod-0"
 })(["position:relative;background-color:", "};"], function (props) {
-  return colorUtils_1.isColor(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
+  return (0, colorUtils_1.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
 });
 // Use `.attrs()` for highly dynamic styles. Ref: https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
 var FixSizeItem = styled_components_1.default.div.attrs(function (_ref2) {
@@ -174,16 +174,16 @@ var FixSizeItem = styled_components_1.default.div.attrs(function (_ref2) {
     height = _ref2.height;
   return {
     style: Object.assign(Object.assign({}, width && {
-      width: style_1.toPx(width)
+      width: (0, style_1.toPx)(width)
     }), height && {
-      height: style_1.toPx(height)
+      height: (0, style_1.toPx)(height)
     })
   };
 }).withConfig({
   displayName: "FixedSizeContainer__FixSizeItem",
   componentId: "sc-1yhgpod-1"
 })(["position:relative;flex-direction:column;flex:1;display:flex;background-color:", "};"], function (props) {
-  return colorUtils_1.isColor(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
+  return (0, colorUtils_1.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
 });
 var ItemContent = styled_components_1.default.div.withConfig({
   displayName: "FixedSizeContainer__ItemContent",
@@ -207,7 +207,7 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
     }
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "25.13.0 - 572f25c03",
+      "data-splunk-visualization-version": "26.0.0 - 2f7458907",
       width: width,
       height: height,
       backgroundColor: backgroundColor
@@ -227,7 +227,7 @@ exports.default = withFixedSizeContainer;
 
 /***/ }),
 
-/***/ 135:
+/***/ 137:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -291,7 +291,7 @@ module.exports = require("@splunk/visualizations-shared/schemaUtils");
 
 /***/ }),
 
-/***/ 165:
+/***/ 168:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -314,10 +314,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.config = exports.PureTable = exports.themes = exports.computeVizProps = void 0;
 var lodash_1 = __webpack_require__(3);
 var colorUtils_1 = __webpack_require__(12);
-var config_1 = __webpack_require__(476);
+var config_1 = __webpack_require__(480);
 exports.config = config_1.default;
 var withDashboardViz_1 = __webpack_require__(36);
-var PureTable_1 = __webpack_require__(477);
+var PureTable_1 = __webpack_require__(481);
 exports.PureTable = PureTable_1.default;
 var computeVizProps = function computeVizProps(_a) {
   var props = __rest(_a, []);
@@ -337,7 +337,7 @@ var computeVizProps = function computeVizProps(_a) {
       // If columns have `rowBackgroundColors` or `rowColors` arrays defined, sanitize them. If there are undefined values after sanitization, these
       //  elements are populated with the default values provided by the theme.
       if (columnProperties.rowBackgroundColors) {
-        rowBackgroundColors = colorUtils_1.sanitizeArrayOfColors(columnProperties.rowBackgroundColors).map(function (color, i) {
+        rowBackgroundColors = (0, colorUtils_1.sanitizeArrayOfColors)(columnProperties.rowBackgroundColors).map(function (color, i) {
           return (
             // using (i + 1) % 2 because 'odd' refers to row number, so index 0 -> row 1 -> odd colored
             color || ((i + 1) % 2 === 0 ? themeRowBackgroundColorEven : themeRowBackgroundColorOdd)
@@ -345,7 +345,7 @@ var computeVizProps = function computeVizProps(_a) {
         });
       }
       if (columnProperties.rowColors) {
-        rowColors = colorUtils_1.sanitizeArrayOfColors(columnProperties.rowColors).map(function (color) {
+        rowColors = (0, colorUtils_1.sanitizeArrayOfColors)(columnProperties.rowColors).map(function (color) {
           return color || themeTextColor;
         });
       }
@@ -366,7 +366,7 @@ var computeVizProps = function computeVizProps(_a) {
         if (!cloneOfExistingColumnFormat[key]) {
           cloneOfExistingColumnFormat[key] = {};
         }
-        var newWidth = lodash_1.get(values[index], 'width');
+        var newWidth = (0, lodash_1.get)(values[index], 'width');
         cloneOfExistingColumnFormat[key] = Object.assign(Object.assign({}, cloneOfExistingColumnFormat[key]), {
           width: newWidth
         });
@@ -380,7 +380,7 @@ var computeVizProps = function computeVizProps(_a) {
   return vizProps;
 };
 exports.computeVizProps = computeVizProps;
-var Table = withDashboardViz_1.default({
+var Table = (0, withDashboardViz_1.default)({
   ReactViz: PureTable_1.default,
   vizConfig: config_1.default,
   disableEditModeCover: true,
@@ -580,8 +580,8 @@ function hasCompatibleOptions(vizOptions, presetOptions) {
  */
 function getInitialPreset(vizContext, vizOptions, presets) {
   return presets.find(function (preset) {
-    var presetContext = lodash_1.get(preset, ['value', 'context'], {});
-    var presetOptions = lodash_1.get(preset, ['value', 'options'], {});
+    var presetContext = (0, lodash_1.get)(preset, ['value', 'context'], {});
+    var presetOptions = (0, lodash_1.get)(preset, ['value', 'options'], {});
     var presetContextKeys = Object.keys(presetContext);
     var presetOptionKeys = Object.keys(presetOptions);
     // all presets have to explicitly specify which options to reset (i.e. need explicitly undefined keys)
@@ -598,7 +598,7 @@ exports.getInitialPreset = getInitialPreset;
  * @returns {{ label: string; value; string  }[]} array of { label, value } tuples
  */
 function generatePrecisionValues(numPrecisionValues) {
-  return lodash_1.range(0, numPrecisionValues + 1).map(function (i) {
+  return (0, lodash_1.range)(0, numPrecisionValues + 1).map(function (i) {
     return {
       label: "".concat(i, " (0").concat(i > 0 ? '.' : '').concat('0'.repeat(i), ")"),
       value: i
@@ -641,28 +641,28 @@ module.exports = require("@splunk/themes/pick");
 /***/ 25:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-context/TimezoneContext");
+module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
 /***/ 26:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/hocUtils");
+module.exports = require("@splunk/visualization-context/TimezoneContext");
 
 /***/ }),
 
 /***/ 27:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
+module.exports = require("@splunk/visualizations-shared/hocUtils");
 
 /***/ }),
 
-/***/ 29:
+/***/ 28:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-encoding/Options");
+module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
 
 /***/ }),
 
@@ -673,7 +673,14 @@ module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 31:
+/***/ 30:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-encoding/Options");
+
+/***/ }),
+
+/***/ 32:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -697,9 +704,9 @@ var FixedSizeContainer_1 = __webpack_require__(13);
  */
 var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources) {
   var loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var data = lodash_1.get(dataSources, 'primary.data.columns[0]', undefined);
+  var data = (0, lodash_1.get)(dataSources, 'primary.data.columns[0]', undefined);
   var noData = data === undefined;
-  var fields = lodash_1.get(dataSources, 'primary.data.fields[0]', undefined);
+  var fields = (0, lodash_1.get)(dataSources, 'primary.data.fields[0]', undefined);
   var noFields = fields === undefined;
   return loading || noData || noFields;
 };
@@ -740,7 +747,7 @@ var IconPlaceholder = function IconPlaceholder(props) {
     width: width,
     height: height,
     level: "warning",
-    message: i18n_1._('No DataSource Connected')
+    message: (0, i18n_1._)('No DataSource Connected')
   });
 };
 IconPlaceholder.propTypes = propTypes;
@@ -748,14 +755,7 @@ IconPlaceholder.defaultProps = {
   width: '100%',
   height: 250
 };
-exports.default = FixedSizeContainer_1.default(IconPlaceholder);
-
-/***/ }),
-
-/***/ 32:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/id");
+exports.default = (0, FixedSizeContainer_1.default)(IconPlaceholder);
 
 /***/ }),
 
@@ -790,7 +790,7 @@ var getSortingParams = function getSortingParams(_ref) {
   };
   var onSort;
   if (typeof onRequestParamsChange === 'function') {
-    if (requestParams && lodash_1.has(requestParams, 'sort')) {
+    if (requestParams && (0, lodash_1.has)(requestParams, 'sort')) {
       currentSortKey = Object.keys(requestParams.sort).shift();
       currentSortDir = requestParams.sort[currentSortKey];
     }
@@ -799,7 +799,7 @@ var getSortingParams = function getSortingParams(_ref) {
       var sortKey = _ref2.sortKey,
         sortDir = _ref2.sortDir;
       if (typeof sortKey === 'string') {
-        var nextSortDir = lodash_1.has(nextSortDirMap, sortDir) ? nextSortDirMap[sortDir] : 'none';
+        var nextSortDir = (0, lodash_1.has)(nextSortDirMap, sortDir) ? nextSortDirMap[sortDir] : 'none';
         onRequestParamsChange(Object.assign(Object.assign({}, requestParams), {
           offset: 0,
           sort: _defineProperty({}, sortKey, nextSortDir)
@@ -850,7 +850,7 @@ var getPaginationParams = function getPaginationParams(_ref) {
   var onChangeHandler = function onChangeHandler(e, _ref2) {
     var page = _ref2.page,
       countArg = _ref2.count;
-    var newParams = lodash_1.cloneDeep(requestParams);
+    var newParams = (0, lodash_1.cloneDeep)(requestParams);
     if (typeof countArg === 'number') {
       newParams.count = countArg;
       newParams.offset = 0;
@@ -914,16 +914,16 @@ Object.defineProperty(exports, "__esModule", {
 var React = __webpack_require__(1);
 var lodash_1 = __webpack_require__(3);
 var getSettingsFromThemedProps_1 = __webpack_require__(37);
-var Options_1 = __webpack_require__(29);
+var Options_1 = __webpack_require__(30);
 var SanitizeProps_1 = __webpack_require__(38);
-var TimezoneContext_1 = __webpack_require__(25);
+var TimezoneContext_1 = __webpack_require__(26);
 var moment_1 = __webpack_require__(39);
 var FeatureFlagContext_1 = __webpack_require__(21);
 var styled_components_1 = __webpack_require__(4);
-var hocUtils_1 = __webpack_require__(26);
-var JSONSchemaUtils_1 = __webpack_require__(27);
+var hocUtils_1 = __webpack_require__(27);
+var JSONSchemaUtils_1 = __webpack_require__(28);
 var async_dynamic_options_evaluator_1 = __webpack_require__(40);
-var id_1 = __webpack_require__(32);
+var id_1 = __webpack_require__(25);
 var SplunkVisualization_1 = __webpack_require__(41);
 var VizBehavior_1 = __webpack_require__(6);
 var getSorting_1 = __webpack_require__(33);
@@ -944,8 +944,8 @@ var withDashboardViz = function withDashboardViz(opts) {
     computeVizProps = _opts$computeVizProps === void 0 ? function () {} : _opts$computeVizProps,
     disableEditModeCover = opts.disableEditModeCover,
     useIconPlaceholder = opts.useIconPlaceholder; // sanitizing props before sending them to reactviz.
-  var SanitizedReactViz = SanitizeProps_1.withSanitizedProps(ReactViz);
-  var defaultOptions = JSONSchemaUtils_1.pickFieldFromJSONSchema(vizConfig.optionsSchema, 'default');
+  var SanitizedReactViz = (0, SanitizeProps_1.withSanitizedProps)(ReactViz);
+  var defaultOptions = (0, JSONSchemaUtils_1.pickFieldFromJSONSchema)(vizConfig.optionsSchema, 'default');
   var DashboardViz = function DashboardViz(props) {
     var _a;
     var mode = props.mode,
@@ -980,19 +980,19 @@ var withDashboardViz = function withDashboardViz(opts) {
       return (_b = (_a = vizConfig.themes)[themeVar]) === null || _b === void 0 ? void 0 : _b.call(_a, props);
     };
     var bgColorFromTheme = themeFunc('defaultBackgroundColor');
-    var _getSettingsFromTheme = getSettingsFromThemedProps_1.default({
+    var _ref = (0, getSettingsFromThemedProps_1.default)({
         theme: theme
       }),
-      currentThemeFamily = _getSettingsFromTheme.family,
-      currentThemeColorScheme = _getSettingsFromTheme.colorScheme,
-      currentThemeDensity = _getSettingsFromTheme.density;
+      currentThemeFamily = _ref.family,
+      currentThemeColorScheme = _ref.colorScheme,
+      currentThemeDensity = _ref.density;
     var evaluatedOptions = {}; // evaluatedOptions need to be initialized as an empty object
     var _React$useState = React.useState({}),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       evaluatedOptionsAsync = _React$useState2[0],
       setEvaluatedOptionsAsync = _React$useState2[1]; // evaluatedOptions need to be initialized as an empty object
     var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
-    var _React$useState3 = React.useState("".concat(vizConfig.name, " - ").concat(id_1.createGUID())),
+    var _React$useState3 = React.useState("".concat(vizConfig.name, " - ").concat((0, id_1.createGUID)())),
       _React$useState4 = _slicedToArray(_React$useState3, 1),
       visualizationID = _React$useState4[0];
     var _React$useState5 = React.useState({}),
@@ -1003,16 +1003,17 @@ var withDashboardViz = function withDashboardViz(opts) {
       _React$useState8 = _slicedToArray(_React$useState7, 2),
       dataFramesInState = _React$useState8[0],
       setDataFramesInState = _React$useState8[1];
-    var _React$useState9 = React.useState(Boolean(featureFlagContext && featureFlagContext.visualizations_useWebWorkersForDSL && typeof Worker !== 'undefined')),
+    var _React$useState9 = React.useState(Boolean(featureFlagContext === null || featureFlagContext === void 0 ? void 0 : featureFlagContext.visualizations_useWebWorkersForDSL)),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
       useAsyncEvaluatedOptions = _React$useState10[0],
       setUseAsyncEvaluatedOptions = _React$useState10[1];
-    evaluatedOptions = useDeepMemo_1.useDeepMemo(function () {
+    var isMounted = React.useRef(true);
+    evaluatedOptions = (0, useDeepMemo_1.useDeepMemo)(function () {
       try {
         if (useAsyncEvaluatedOptions) {
           var optionsToEvaluate = {
-            context: lodash_1.defaultsDeep({}, context, vizConfig.defaultContext),
-            options: hocUtils_1.deepMergeWithArrayPrimitiveOverrides({}, options, defaultOptions)
+            context: (0, lodash_1.defaultsDeep)({}, context, vizConfig.defaultContext),
+            options: (0, hocUtils_1.deepMergeWithArrayPrimitiveOverrides)({}, options, defaultOptions)
           };
           var asyncDynamicOptionsEvaluatorParams = {
             visualizationID: visualizationID,
@@ -1023,10 +1024,10 @@ var withDashboardViz = function withDashboardViz(opts) {
           };
           async_dynamic_options_evaluator_1.default.evaluate(asyncDynamicOptionsEvaluatorParams).then(function (results) {
             setEvaluatedOptionsAsync(results.results);
-          }).catch(function (e) {
-            // eslint-disable-next-line no-console
-            console.error("unexpected error evaluating options - async: ".concat(e.message));
-            setUseAsyncEvaluatedOptions(false);
+          }).catch(function () {
+            if (isMounted.current) {
+              setUseAsyncEvaluatedOptions(false);
+            }
           });
         } else {
           var dataFrames = dataFramesInState;
@@ -1036,8 +1037,8 @@ var withDashboardViz = function withDashboardViz(opts) {
             setDataFramesInState(dataFrames);
           }
           return Options_1.Options.evaluate({
-            context: lodash_1.defaultsDeep({}, context, vizConfig.defaultContext),
-            options: hocUtils_1.deepMergeWithArrayPrimitiveOverrides({}, options, defaultOptions)
+            context: (0, lodash_1.defaultsDeep)({}, context, vizConfig.defaultContext),
+            options: (0, hocUtils_1.deepMergeWithArrayPrimitiveOverrides)({}, options, defaultOptions)
           }, dataSources, themeFunc, dataFrames);
         }
       } catch (e) {
@@ -1066,6 +1067,7 @@ var withDashboardViz = function withDashboardViz(opts) {
     React.useEffect(function () {
       return function () {
         if (useAsyncEvaluatedOptions) {
+          isMounted.current = false;
           async_dynamic_options_evaluator_1.default.reset(visualizationID);
         }
       };
@@ -1075,7 +1077,7 @@ var withDashboardViz = function withDashboardViz(opts) {
     var _vizConfig$requiredPr = vizConfig.requiredProps,
       requiredProps = _vizConfig$requiredPr === void 0 ? [] : _vizConfig$requiredPr,
       supports = vizConfig.supports;
-    var missing = MissingPropsMessage_1.missingKeys(requiredProps, evaluatedOptionsToUse);
+    var missing = (0, MissingPropsMessage_1.missingKeys)(requiredProps, evaluatedOptionsToUse);
     if (missing.length > 0 && supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER) && vizConfig.key !== 'splunk.singlevalue' // For SV missing props msg is not displayed if required props majorValue is missing, instead this will be handled from the component, instead handled within component
     ) {
       return React.createElement(MissingPropsMessage_1.default, {
@@ -1091,7 +1093,7 @@ var withDashboardViz = function withDashboardViz(opts) {
     if (hasEventHandlers && mode === 'view' && vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.EVENTS) > -1) {
       var supportedEvents = vizConfig.events;
       Object.keys(supportedEvents).forEach(function (eventName) {
-        var eventCallbackPropName = lodash_1.camelCase("on.".concat(eventName));
+        var eventCallbackPropName = (0, lodash_1.camelCase)("on.".concat(eventName));
         eventCallbackProps[eventCallbackPropName] = null;
         // todo: refactor single value and single value icon to send payload from viz
         // then remove these lines
@@ -1134,19 +1136,19 @@ var withDashboardViz = function withDashboardViz(opts) {
      */
     var dataSourceMetadata = {};
     var OptionKey = 'paginateDataSourceKey';
-    var paginateDataSourceKey = lodash_1.has(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey] || 'primary';
-    if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.PAGE_AND_SORT) > -1 && lodash_1.has(dataSources, paginateDataSourceKey)) {
-      var requestParams = lodash_1.get(dataSources, [paginateDataSourceKey, 'requestParams'], {});
-      var meta = lodash_1.get(dataSources, [paginateDataSourceKey, 'meta'], {});
+    var paginateDataSourceKey = (0, lodash_1.has)(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey] || 'primary';
+    if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.PAGE_AND_SORT) > -1 && (0, lodash_1.has)(dataSources, paginateDataSourceKey)) {
+      var requestParams = (0, lodash_1.get)(dataSources, [paginateDataSourceKey, 'requestParams'], {});
+      var meta = (0, lodash_1.get)(dataSources, [paginateDataSourceKey, 'meta'], {});
       var handleRequestParamsChange = function handleRequestParamsChange(payload) {
         return onRequestParamsChange(paginateDataSourceKey, payload);
       };
-      var sortParams = getSorting_1.getSortingParams({
+      var sortParams = (0, getSorting_1.getSortingParams)({
         requestParams: requestParams,
         meta: meta,
         onRequestParamsChange: handleRequestParamsChange
       });
-      var paginatorParams = getPagination_1.getPaginationParams({
+      var paginatorParams = (0, getPagination_1.getPaginationParams)({
         requestParams: requestParams,
         meta: meta,
         onRequestParamsChange: handleRequestParamsChange
@@ -1174,7 +1176,7 @@ var withDashboardViz = function withDashboardViz(opts) {
   // attach viz config
   DashboardViz.config = vizConfig;
   // @ts-ignore: TODO fix sc upgrade TS issues
-  return styled_components_1.withTheme(withPlaceholder_1.default(withEditModeCover_1.default(DashboardViz, disableEditModeCover), useIconPlaceholder));
+  return (0, styled_components_1.withTheme)((0, withPlaceholder_1.default)((0, withEditModeCover_1.default)(DashboardViz, disableEditModeCover), useIconPlaceholder));
 };
 exports.default = withDashboardViz;
 
@@ -1418,8 +1420,8 @@ var lodash_1 = __webpack_require__(3);
  * @param dependencies an array of dependencies
  */
 var useDeepMemo = function useDeepMemo(fn, dependencies) {
-  var ref = react_1.useRef();
-  if (!ref.current || !lodash_1.isEqual(dependencies, ref.current.dependencies)) {
+  var ref = (0, react_1.useRef)();
+  if (!ref.current || !(0, lodash_1.isEqual)(dependencies, ref.current.dependencies)) {
     ref.current = {
       dependencies: dependencies,
       value: fn()
@@ -1463,7 +1465,7 @@ exports.isMissing = isMissing;
  */
 var missingKeys = function missingKeys(keys, target) {
   return keys.filter(function (k) {
-    return exports.isMissing(target[k]);
+    return (0, exports.isMissing)(target[k]);
   });
 };
 exports.missingKeys = missingKeys;
@@ -1487,7 +1489,7 @@ var MissingPropsMessage = function MissingPropsMessage(props) {
     "data-test": "message",
     width: width,
     height: height,
-    message: i18n_1._("Missing property: ".concat(missingProps.join(', ')))
+    message: (0, i18n_1._)("Missing property: ".concat(missingProps.join(', ')))
   });
 };
 exports.MissingPropsMessage = MissingPropsMessage;
@@ -1496,7 +1498,7 @@ exports.MissingPropsMessage.defaultProps = {
   width: '100%',
   height: 250
 };
-exports.default = FixedSizeContainer_1.default(exports.MissingPropsMessage);
+exports.default = (0, FixedSizeContainer_1.default)(exports.MissingPropsMessage);
 
 /***/ }),
 
@@ -1517,7 +1519,7 @@ var Cover = styled_components_1.default.div.withConfig({
   componentId: "sc-1gsbnxb-0"
 })(["position:absolute;left:0;right:0;top:0;bottom:0;"]);
 var Blocker = styled_components_1.default.div.attrs({
-  'data-splunk-visualization-version': "25.13.0 - 572f25c03"
+  'data-splunk-visualization-version': "26.0.0 - 2f7458907"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -1536,7 +1538,7 @@ var withEditModeCover = function withEditModeCover(Visualization, disableEditMod
       "data-test": "edit-mode-cover"
     }));
   };
-  hocUtils_1.extendStaticWrapperProps({
+  (0, hocUtils_1.extendStaticWrapperProps)({
     Wrapper: Wrapper,
     Visualization: Visualization
   });
@@ -1558,7 +1560,7 @@ Object.defineProperty(exports, "__esModule", {
 var React = __webpack_require__(1);
 var colorUtils_1 = __webpack_require__(12);
 var variables_1 = __webpack_require__(11);
-var IconPlaceholder_1 = __webpack_require__(31);
+var IconPlaceholder_1 = __webpack_require__(32);
 var VizBehavior_1 = __webpack_require__(6);
 var hocUtils_1 = __webpack_require__(15);
 var withPlaceholder = function withPlaceholder(Visualization) {
@@ -1573,7 +1575,7 @@ var withPlaceholder = function withPlaceholder(Visualization) {
       height = props.height,
       width = props.width;
     var showPlaceholder = useIconPlaceholder(dataSources, loading, options);
-    var bgColorFromTheme = colorUtils_1.isColor(options === null || options === void 0 ? void 0 : options.backgroundColor) ? options === null || options === void 0 ? void 0 : options.backgroundColor : (_a = themes === null || themes === void 0 ? void 0 : themes.defaultBackgroundColor) === null || _a === void 0 ? void 0 : _a.call(themes, props);
+    var bgColorFromTheme = (0, colorUtils_1.isColor)(options === null || options === void 0 ? void 0 : options.backgroundColor) ? options === null || options === void 0 ? void 0 : options.backgroundColor : (_a = themes === null || themes === void 0 ? void 0 : themes.defaultBackgroundColor) === null || _a === void 0 ? void 0 : _a.call(themes, props);
     var icon = (_b = config.placeholderIcon) !== null && _b !== void 0 ? _b : config.icon;
     var iconColor = variables_1.default.contentColorActive(props);
     if (config.supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER) && showPlaceholder) {
@@ -1588,7 +1590,7 @@ var withPlaceholder = function withPlaceholder(Visualization) {
     }
     return React.createElement(Visualization, Object.assign({}, props));
   };
-  hocUtils_1.extendStaticWrapperProps({
+  (0, hocUtils_1.extendStaticWrapperProps)({
     Wrapper: Wrapper,
     Visualization: Visualization
   });
@@ -1598,7 +1600,7 @@ exports.default = withPlaceholder;
 
 /***/ }),
 
-/***/ 475:
+/***/ 479:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1606,12 +1608,16 @@ exports.default = withPlaceholder;
 
 var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
   if (k2 === undefined) k2 = k;
-  Object.defineProperty(o, k2, {
-    enumerable: true,
-    get: function get() {
-      return m[k];
-    }
-  });
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function get() {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
 } : function (o, m, k, k2) {
   if (k2 === undefined) k2 = k;
   o[k2] = m[k];
@@ -1628,8 +1634,8 @@ exports.default = void 0;
 // NOTE: wildcard syntax only works for named exports
 // for some reason, omitting the default export worked before TS v4
 // see: https://stackoverflow.com/a/34445175
-__exportStar(__webpack_require__(165), exports);
-var Table_1 = __webpack_require__(165);
+__exportStar(__webpack_require__(168), exports);
+var Table_1 = __webpack_require__(168);
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
@@ -1639,7 +1645,14 @@ Object.defineProperty(exports, "default", {
 
 /***/ }),
 
-/***/ 476:
+/***/ 48:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/extends");
+
+/***/ }),
+
+/***/ 480:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1652,14 +1665,14 @@ Object.defineProperty(exports, "__esModule", {
 var i18n_1 = __webpack_require__(2);
 var lodash_1 = __webpack_require__(3);
 var schemaUtils_1 = __webpack_require__(16);
-var colorConstants_1 = __webpack_require__(50);
+var colorConstants_1 = __webpack_require__(49);
 var visualization_icons_1 = __webpack_require__(52);
-var placeholders_1 = __webpack_require__(49);
+var placeholders_1 = __webpack_require__(50);
 var variables_1 = __webpack_require__(11);
 var pick_1 = __webpack_require__(23);
 var configUtils_1 = __webpack_require__(20);
 var VizBehavior_1 = __webpack_require__(6);
-var consts_1 = __webpack_require__(135);
+var consts_1 = __webpack_require__(137);
 var VizCategory_1 = __webpack_require__(35);
 var dataContract = {
   requiredDataSources: [{
@@ -1754,30 +1767,30 @@ var defaultContext = {
   tableAltRowBackgroundColorsByBackgroundColor: ['> backgroundColor', '> backgroundColor | setColorChannel(tableRowBackgroundColorEvenConfig)']
 };
 var unitPositionConfig = {
-  label: i18n_1._('Units position'),
+  label: (0, i18n_1._)('Units position'),
   editor: 'editor.select',
   option: 'unitPosition',
   editorProps: {
     values: [{
-      label: i18n_1._('Before'),
+      label: (0, i18n_1._)('Before'),
       value: 'before'
     }, {
-      label: i18n_1._('After'),
+      label: (0, i18n_1._)('After'),
       value: 'after'
     }]
   }
 };
 var unitLabelConfig = {
-  label: i18n_1._('Unit label'),
+  label: (0, i18n_1._)('Unit label'),
   option: 'unit',
   editor: 'editor.text'
 };
 var timeFormattingConfig = {
-  label: i18n_1._('Date & Time formatting'),
+  label: (0, i18n_1._)('Date & Time formatting'),
   option: 'format',
   editor: 'editor.text',
   editorProps: {
-    tooltip: i18n_1._('For example: DD-MM-YYYY')
+    tooltip: (0, i18n_1._)('For example: DD-MM-YYYY')
   }
 };
 var sequentialColorConfig = [{
@@ -1893,7 +1906,7 @@ var optionsSchema = {
           textOverflow: {
             description: 'Controls how the text should be truncated within a particular column. Valid types include "anywhere", "break-word", "ellipsis".  Columns are "break-word" styled by default when "textOverflow" is not configured.',
             type: 'string',
-            pattern: schemaUtils_1.getPattern(consts_1.validTextOverflows),
+            pattern: (0, schemaUtils_1.getPattern)(consts_1.validTextOverflows),
             enum: consts_1.validTextOverflows.concat()
           },
           width: {
@@ -1914,13 +1927,13 @@ var optionsSchema = {
     default: 'proportional',
     description: 'Specify the font style to use for table content.',
     type: 'string',
-    pattern: schemaUtils_1.getPattern(['proportional', 'monospace'])
+    pattern: (0, schemaUtils_1.getPattern)(['proportional', 'monospace'])
   },
   fontSize: {
     default: 'default',
     description: 'Specify the font size to use for table content. Font sizes range from extra small (10px) to large (16px) with the default being 14px.',
     type: 'string',
-    pattern: schemaUtils_1.getPattern(consts_1.validFontSizes)
+    pattern: (0, schemaUtils_1.getPattern)(consts_1.validFontSizes)
   },
   headers: {
     default: '> table | getField()',
@@ -1933,7 +1946,7 @@ var optionsSchema = {
   headerVisibility: {
     default: 'inline',
     description: 'Specify how to display the table header row.',
-    pattern: schemaUtils_1.getPattern(consts_1.validHeaderVisibilities),
+    pattern: (0, schemaUtils_1.getPattern)(consts_1.validHeaderVisibilities),
     enum: consts_1.validHeaderVisibilities.concat(),
     type: 'string'
   },
@@ -2091,7 +2104,7 @@ var optionsSchema = {
 };
 var themes = {
   defaultBackgroundColor: function defaultBackgroundColor(props) {
-    return pick_1.default({
+    return (0, pick_1.default)({
       enterprise: {
         dark: variables_1.default.black(props),
         light: variables_1.default.backgroundColor(props)
@@ -2100,7 +2113,7 @@ var themes = {
     })(props);
   },
   defaultHeaderBackgroundColor: function defaultHeaderBackgroundColor(props) {
-    return pick_1.default({
+    return (0, pick_1.default)({
       enterprise: {
         dark: variables_1.default.gray20(props),
         light: variables_1.default.gray92(props)
@@ -2109,7 +2122,7 @@ var themes = {
     })(props);
   },
   rowBackgroundColorEven: function rowBackgroundColorEven(props) {
-    return pick_1.default({
+    return (0, pick_1.default)({
       enterprise: {
         dark: variables_1.default.black(props),
         light: variables_1.default.gray96(props)
@@ -2118,7 +2131,7 @@ var themes = {
     })(props);
   },
   rowBackgroundColorOdd: function rowBackgroundColorOdd(props) {
-    return pick_1.default({
+    return (0, pick_1.default)({
       enterprise: {
         dark: '#0D1012',
         light: variables_1.default.backgroundColor(props)
@@ -2127,13 +2140,13 @@ var themes = {
     })(props);
   },
   textColor: function textColor(props) {
-    return pick_1.default({
+    return (0, pick_1.default)({
       enterprise: variables_1.default.textColor(props),
       prisma: variables_1.default.contentColorDefault(props)
     })(props);
   },
   inverseTextColor: function inverseTextColor(props) {
-    return pick_1.default({
+    return (0, pick_1.default)({
       enterprise: {
         dark: variables_1.default.contentColorInverted(props),
         light: variables_1.default.white(props) // equal to textColor in enterpriseDark
@@ -2143,14 +2156,14 @@ var themes = {
     })(props);
   }
 };
-var backgroundColorPaletteSet = new Set([].concat(_toConsumableArray(colorConstants_1.COLOR_EDITOR_PALETTE), _toConsumableArray(lodash_1.map(themes, function (t) {
-  return lodash_1.get(t, 'defaultBackgroundColor');
+var backgroundColorPaletteSet = new Set([].concat(_toConsumableArray(colorConstants_1.COLOR_EDITOR_PALETTE), _toConsumableArray((0, lodash_1.map)(themes, function (t) {
+  return (0, lodash_1.get)(t, 'defaultBackgroundColor');
 }))));
 var EDITOR_LABEL_WIDTH = 100;
 var editorConfig = [{
-  label: i18n_1._('Data display'),
+  label: (0, i18n_1._)('Data display'),
   layout: [[{
-    label: i18n_1._('Rows displayed'),
+    label: (0, i18n_1._)('Rows displayed'),
     option: 'count',
     editor: 'editor.number',
     editorProps: {
@@ -2158,39 +2171,39 @@ var editorConfig = [{
       labelWidth: EDITOR_LABEL_WIDTH
     }
   }], [{
-    label: i18n_1._('Row numbers'),
+    label: (0, i18n_1._)('Row numbers'),
     option: 'showRowNumbers',
     editor: 'editor.checkbox',
     editorProps: {
       labelWidth: EDITOR_LABEL_WIDTH
     }
   }], [{
-    label: i18n_1._('Internal fields'),
+    label: (0, i18n_1._)('Internal fields'),
     option: 'showInternalFields',
     editor: 'editor.checkbox',
     editorProps: {
       labelWidth: EDITOR_LABEL_WIDTH
     }
   }], [{
-    label: i18n_1._('Header row'),
+    label: (0, i18n_1._)('Header row'),
     option: 'headerVisibility',
     editor: 'editor.select',
     editorProps: {
       values: [{
-        label: i18n_1._('Inline'),
+        label: (0, i18n_1._)('Inline'),
         value: 'inline'
       }, {
-        label: i18n_1._('Fixed'),
+        label: (0, i18n_1._)('Fixed'),
         value: 'fixed'
       }, {
-        label: i18n_1._('Hidden'),
+        label: (0, i18n_1._)('Hidden'),
         value: 'none'
       }],
       labelWidth: EDITOR_LABEL_WIDTH
     }
   }]]
 }, {
-  label: i18n_1._('Color and style'),
+  label: (0, i18n_1._)('Color and style'),
   layout: [[{
     key: 'backgroundColor',
     editor: 'editor.tableBackgroundColor',
@@ -2202,14 +2215,14 @@ var editorConfig = [{
     }
   }], [{
     option: 'font',
-    label: i18n_1._('Font'),
+    label: (0, i18n_1._)('Font'),
     editor: 'editor.select',
     editorProps: {
       values: [{
-        label: i18n_1._('Proportional (Default)'),
+        label: (0, i18n_1._)('Proportional (Default)'),
         value: 'proportional'
       }, {
-        label: i18n_1._('Monospace'),
+        label: (0, i18n_1._)('Monospace'),
         value: 'monospace'
       }],
       labelPosition: 'top',
@@ -2217,48 +2230,48 @@ var editorConfig = [{
     }
   }], [{
     option: 'fontSize',
-    label: i18n_1._('Font size'),
+    label: (0, i18n_1._)('Font size'),
     editor: 'editor.select',
     editorProps: {
       values: [{
-        label: i18n_1._('Extra Small (font 10px, row 24px)'),
+        label: (0, i18n_1._)('Extra Small (font 10px, row 24px)'),
         value: 'extraSmall'
       }, {
-        label: i18n_1._('Small (font 12px, row 24px)'),
+        label: (0, i18n_1._)('Small (font 12px, row 24px)'),
         value: 'small'
       }, {
-        label: i18n_1._('Default (font 14px, row 32px)'),
+        label: (0, i18n_1._)('Default (font 14px, row 32px)'),
         value: 'default'
       }, {
-        label: i18n_1._('Large (font 16px, row 36px)'),
+        label: (0, i18n_1._)('Large (font 16px, row 36px)'),
         value: 'large'
       }],
       labelPosition: 'top',
       labelWidth: EDITOR_LABEL_WIDTH
     }
   }], [{
-    label: i18n_1._('Column-specific formatting'),
+    label: (0, i18n_1._)('Column-specific formatting'),
     editor: 'editor.tableColumnFormatter',
     editorProps: {
       // Table column coloring does not adhere to same DSL structure as other dynamically colored options
       // we use the FormatterEditor directly and not the DynamicColorEditor's provided DSL builders
       columnColoringConfig: {
         coloringTypes: [{
-          label: i18n_1._('Text'),
+          label: (0, i18n_1._)('Text'),
           value: 'rowColors'
         }, {
-          label: i18n_1._('Background'),
+          label: (0, i18n_1._)('Background'),
           value: 'rowBackgroundColors'
         }],
         formatters: [{
-          label: i18n_1._('Ranges'),
+          label: (0, i18n_1._)('Ranges'),
           value: 'rangeValue',
           defaults: {
             rowBackgroundColors: sequentialColorConfig,
             rowColors: sequentialColorConfig
           }
         }, {
-          label: i18n_1._('Matches'),
+          label: (0, i18n_1._)('Matches'),
           value: 'matchValue',
           defaults: {
             rowBackgroundColors: matchColorConfig,
@@ -2278,22 +2291,22 @@ var editorConfig = [{
       },
       flyoutConfig: {
         number: [[Object.assign({}, unitPositionConfig), Object.assign({}, unitLabelConfig)], [{
-          label: i18n_1._('Precision'),
+          label: (0, i18n_1._)('Precision'),
           option: 'precision',
           editor: 'editor.select',
           editorProps: {
-            values: configUtils_1.generatePrecisionValues(20)
+            values: (0, configUtils_1.generatePrecisionValues)(20)
           }
         }, {
-          label: i18n_1._('Thousand separators'),
+          label: (0, i18n_1._)('Thousand separators'),
           option: 'thousandSeparated',
           editor: 'editor.radioBar',
           editorProps: {
             values: [{
-              label: i18n_1._('Off'),
+              label: (0, i18n_1._)('Off'),
               value: false
             }, {
-              label: i18n_1._('On'),
+              label: (0, i18n_1._)('On'),
               value: true
             }]
           }
@@ -2327,7 +2340,7 @@ var config = {
   /**
    * viz name
    */
-  name: i18n_1._('Table'),
+  name: (0, i18n_1._)('Table'),
   category: VizCategory_1.VizCategory.TABLE,
   /**
    * viz icon
@@ -2347,19 +2360,19 @@ var config = {
   supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.EVENTS, VizBehavior_1.VizBehavior.PAGE_AND_SORT, VizBehavior_1.VizBehavior.PLACEHOLDER],
   themes: themes
 };
-exports.default = configUtils_1.enhanceConfig(config);
+exports.default = (0, configUtils_1.enhanceConfig)(config);
 
 /***/ }),
 
-/***/ 477:
+/***/ 481:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
 var _slicedToArray = __webpack_require__(17);
-var _taggedTemplateLiteral = __webpack_require__(98);
-var _templateObject, _templateObject2, _templateObject3;
+var _taggedTemplateLiteral = __webpack_require__(59);
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
   for (var p in s) {
@@ -2379,47 +2392,38 @@ var T = __webpack_require__(0);
 var lodash_1 = __webpack_require__(3);
 var styled_components_1 = __webpack_require__(4);
 var i18n_1 = __webpack_require__(2);
-var Table_1 = __webpack_require__(111);
-var Paginator_1 = __webpack_require__(92);
-var Message_1 = __webpack_require__(123);
+var Table_1 = __webpack_require__(112);
+var Paginator_1 = __webpack_require__(93);
+var Message_1 = __webpack_require__(124);
 var colorUtils_1 = __webpack_require__(12);
 var style_1 = __webpack_require__(14);
 var pick_1 = __webpack_require__(23);
 var variables_1 = __webpack_require__(11);
-var hooks_1 = __webpack_require__(478);
-var consts_1 = __webpack_require__(135);
-var cells_1 = __webpack_require__(479);
+var hooks_1 = __webpack_require__(482);
+var consts_1 = __webpack_require__(137);
+var cells_1 = __webpack_require__(483);
 var getPagination_1 = __webpack_require__(34);
 var getSorting_1 = __webpack_require__(33);
 var FixedSizeContainer_1 = __webpack_require__(13);
 // debounce was imported this way due to typing
 // eslint-disable-next-line import/order
-var debounce = __webpack_require__(484);
+var debounce = __webpack_require__(488);
 exports.MINIMUM_COLUMN_SIZE = 30;
 exports.INITIAL_UNSET_COLUMN_WIDTH = 90;
-var NonVisibleTableHead = styled_components_1.default(Table_1.default.Head).withConfig({
-  displayName: "PureTable__NonVisibleTableHead",
-  componentId: "tovzjg-0"
-})(["display:none;"]);
-var FixedTableHead = styled_components_1.default(Table_1.default.Head).withConfig({
-  displayName: "PureTable__FixedTableHead",
-  componentId: "tovzjg-1"
-})(["position:sticky;top:0;"]);
-var TableHeadCell = styled_components_1.default(Table_1.default.HeadCell).withConfig({
-  displayName: "PureTable__TableHeadCell",
-  componentId: "tovzjg-2"
-})(["div > span{word-break:inherit;word-wrap:inherit;white-space:", ";display:inline;}"], function (_ref) {
+var NonVisibleTableHead = (0, styled_components_1.default)(Table_1.default.Head)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    pointer-events: none;\n    & [data-test='head-cell'] > div {\n        height: 0;\n        padding: 0;\n        margin: 0;\n    }\n"])));
+var FixedTableHead = (0, styled_components_1.default)(Table_1.default.Head)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: sticky;\n    top: 0;\n"])));
+var TableHeadCell = (0, styled_components_1.default)(Table_1.default.HeadCell)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    div > span {\n        word-break: inherit;\n        word-wrap: inherit;\n        white-space: ", ";\n        display: inline;\n    }\n"])), function (_ref) {
   var textOverflowType = _ref.textOverflowType;
   return textOverflowType === 'ellipsis' ? 'nowrap' : 'inherit';
 });
 var VizTableContainer = styled_components_1.default.div.withConfig({
   displayName: "PureTable__VizTableContainer",
-  componentId: "tovzjg-3"
-})(["box-sizing:border-box;padding:", ";background-color:", ";display:flex;flex-flow:column nowrap;overflow:hidden;td,* > td:hover{color:", ";}"], pick_1.default({
+  componentId: "tovzjg-0"
+})(["box-sizing:border-box;padding:", ";background-color:", ";display:flex;flex-flow:column nowrap;overflow:hidden;td,* > td:hover{color:", ";}"], (0, pick_1.default)({
   enterprise: variables_1.default.spacingHalf,
   prisma: variables_1.default.spacingSmall
 }), function (props) {
-  return colorUtils_1.isColor(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
+  return (0, colorUtils_1.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
 }, function (_ref2) {
   var isCellClickable = _ref2.isCellClickable;
   return isCellClickable ? variables_1.default.linkColor : variables_1.default.textColor;
@@ -2429,8 +2433,8 @@ var PAGINATOR_CONTAINER_HEIGHT = 38;
 var PAGINATOR_SPACING = 5;
 var SUITableContainer = styled_components_1.default.div.withConfig({
   displayName: "PureTable__SUITableContainer",
-  componentId: "tovzjg-4"
-})(["& *{font-family:", ";font-size:", ";line-height:", ";}box-sizing:border-box;flex-grow:1;overflow:hidden;", ";", ";", " ", " [data-test=\"main-table\"]{", " td{white-space:pre-line;}}"], function (props) {
+  componentId: "tovzjg-1"
+})(["& *{font-family:", ";font-size:", ";line-height:", ";}box-sizing:border-box;flex-grow:1;overflow:hidden;", ";", ";", " ", " [data-test=\"main-table\"]{", " td{white-space:pre-wrap;}}"], function (props) {
   return props.font;
 }, function (props) {
   return props.fontSize;
@@ -2441,7 +2445,7 @@ var SUITableContainer = styled_components_1.default.div.withConfig({
     height = _ref3.height,
     isPaging = _ref3.isPaging,
     theme = _ref3.theme;
-  var padding = pick_1.default({
+  var padding = (0, pick_1.default)({
     enterprise: variables_1.default.spacingHalf({
       theme: theme
     }),
@@ -2452,7 +2456,7 @@ var SUITableContainer = styled_components_1.default.div.withConfig({
     theme: theme
   });
   var paddingOffset = parseInt(padding, 10) * 2;
-  return style_1.toDimension({
+  return (0, style_1.toDimension)({
     width: width - paddingOffset,
     height: isPaging ? height - PAGINATOR_CONTAINER_HEIGHT - PAGINATOR_SPACING - paddingOffset : height - paddingOffset
   });
@@ -2461,18 +2465,18 @@ var SUITableContainer = styled_components_1.default.div.withConfig({
   return isPaging && "\n        margin-bottom: ".concat(PAGINATOR_SPACING, "px;\n    ");
 }, function (_ref5) {
   var headerStyle = _ref5.headerStyle;
-  return headerStyle && headerStyle.backgroundColor && styled_components_1.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n            & [data-test='head-cell'] {\n                background-color: ", ";\n            }\n        "])), headerStyle.backgroundColor);
+  return headerStyle && headerStyle.backgroundColor && (0, styled_components_1.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            & [data-test='head-cell'] {\n                background-color: ", ";\n            }\n        "])), headerStyle.backgroundColor);
 }, function (_ref6) {
   var headerStyle = _ref6.headerStyle;
-  return headerStyle && headerStyle.color && styled_components_1.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            & [data-test='head-cell'] > div > span {\n                color: ", ";\n            }\n        "])), headerStyle.color);
+  return headerStyle && headerStyle.color && (0, styled_components_1.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            & [data-test='head-cell'] > div > span {\n                color: ", ";\n            }\n        "])), headerStyle.color);
 }, function (_ref7) {
   var isFullyFixed = _ref7.isFullyFixed;
-  return isFullyFixed && styled_components_1.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n                width: fit-content;\n                min-width: unset;\n            "])));
+  return isFullyFixed && (0, styled_components_1.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n                width: fit-content;\n                min-width: unset;\n            "])));
 });
 SUITableContainer.displayName = 'SUITableContainer';
 var PaginatorContainer = styled_components_1.default.div.withConfig({
   displayName: "PureTable__PaginatorContainer",
-  componentId: "tovzjg-5"
+  componentId: "tovzjg-2"
 })(["position:relative;text-align:right;height:", "px;"], PAGINATOR_CONTAINER_HEIGHT);
 PaginatorContainer.displayName = 'PaginatorContainer';
 // allow for early return in case of empty tableBody while still following hook rules
@@ -2488,29 +2492,29 @@ var withEmptyTableMessage = function withEmptyTableMessage(Viz) {
       columnFormat = props.columnFormat,
       paginatorParams = props.paginatorParams,
       count = props.count;
-    var _hooks_1$useTable = hooks_1.useTable({
+    var _ref8 = (0, hooks_1.useTable)({
         headers: headers,
         table: table,
         headerVisibility: headerVisibility,
         showRowNumbers: showRowNumbers,
         showInternalFields: showInternalFields,
         tableFormat: Object.assign(Object.assign(Object.assign(Object.assign({}, tableFormat), (tableFormat === null || tableFormat === void 0 ? void 0 : tableFormat.align) && {
-          align: lodash_1.cloneDeep(tableFormat.align)
+          align: (0, lodash_1.cloneDeep)(tableFormat.align)
         }), (tableFormat === null || tableFormat === void 0 ? void 0 : tableFormat.cellTypes) && {
-          cellTypes: lodash_1.cloneDeep(tableFormat.cellTypes)
+          cellTypes: (0, lodash_1.cloneDeep)(tableFormat.cellTypes)
         }), (tableFormat === null || tableFormat === void 0 ? void 0 : tableFormat.data) && {
-          data: lodash_1.cloneDeep(tableFormat.data)
+          data: (0, lodash_1.cloneDeep)(tableFormat.data)
         }),
         columnFormat: columnFormat,
         paginationOffset: paginatorParams === null || paginatorParams === void 0 ? void 0 : paginatorParams.current,
         count: count
       }),
-      tableHeader = _hooks_1$useTable.tableHeader,
-      tableBody = _hooks_1$useTable.tableBody;
+      tableHeader = _ref8.tableHeader,
+      tableBody = _ref8.tableBody;
     if (tableBody.rows.length === 0) {
       return React.createElement(Message_1.default, {
         type: "warning"
-      }, i18n_1._('No data!'));
+      }, (0, i18n_1._)('No data!'));
     }
     return React.createElement(Viz, Object.assign({}, props, {
       tableHeader: tableHeader,
@@ -2701,17 +2705,16 @@ var PureTable = function PureTable(props) {
       cursor: onCellClick ? 'pointer' : 'unset'
     };
   }, [onCellClick]);
-  var numberOfHeaders = tableHeader.cells.filter(function (c) {
-    return c.showCell;
-  }).length;
-  var numberOfFixedHeaders = tableHeader.cells.filter(function (c) {
+  var visibleHeaderCells = tableHeader.cells.filter(function (c) {
     return c.showCell;
-  }).filter(function (_ref8) {
-    var value = _ref8.value;
+  });
+  var numberOfFixedHeaders = visibleHeaderCells.filter(function (_ref9) {
+    var value = _ref9.value;
     var _a, _b;
     return ((_a = columns[value]) === null || _a === void 0 ? void 0 : _a.width) && ((_b = columns[value]) === null || _b === void 0 ? void 0 : _b.width) !== 'auto';
   }).length;
-  var isFullyFixed = numberOfHeaders === numberOfFixedHeaders;
+  var isFullyFixed = visibleHeaderCells.length === numberOfFixedHeaders;
+  var isHeaderHidden = headerVisibility === 'none';
   return React.createElement(VizTableContainer, {
     isCellClickable: Boolean(onCellClick),
     backgroundColor: backgroundColor,
@@ -2728,15 +2731,13 @@ var PureTable = function PureTable(props) {
     isFullyFixed: isFullyFixed
   }, React.createElement(Table_1.default, {
     resizableFillLayout: true,
-    headType: headerVisibility !== 'none' ? 'inline' : undefined,
+    headType: isHeaderHidden ? undefined : 'inline',
     innerStyle: tableInnerStyle,
     outerStyle: tableOuterStyle,
     onClick: tableCellClickHandler,
     onKeyDown: onCellClick ? handleKeyDown : lodash_1.noop,
     onRequestResizeColumn: handleResizeColumn
-  }, React.createElement(TableHead, null, tableHeader.cells.filter(function (c) {
-    return c.showCell;
-  }).map(function (_a) {
+  }, React.createElement(TableHead, null, visibleHeaderCells.map(function (_a) {
     var _b, _c;
     var key = _a.key,
       value = _a.value,
@@ -2750,7 +2751,8 @@ var PureTable = function PureTable(props) {
       width: (_c = (_b = columns[value]) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : exports.INITIAL_UNSET_COLUMN_WIDTH,
       onMouseDown: handleEventClick,
       value: value,
-      onSort: isResizing || showRowNumbers && value === '#' ? null : onSort,
+      onSort: isResizing || showRowNumbers && value === '#' || isHeaderHidden ? null : onSort,
+      resizable: !isHeaderHidden,
       style: showRowNumbers && value === '#' ? Object.assign(Object.assign({}, style), {
         cursor: 'auto'
       }) : style,
@@ -2849,25 +2851,25 @@ PureTable.defaultProps = {
   fontSize: fontSizeMap.default
 };
 PureTable.displayName = 'VizTable';
-exports.default = withEmptyTableMessage(FixedSizeContainer_1.default(PureTable));
+exports.default = withEmptyTableMessage((0, FixedSizeContainer_1.default)(PureTable));
 
 /***/ }),
 
-/***/ 478:
+/***/ 482:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
 var _toConsumableArray = __webpack_require__(8);
-var _typeof = __webpack_require__(93);
+var _typeof = __webpack_require__(82);
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTable = exports.getTextOverflowType = exports.getOverflowStyles = void 0;
 var lodash_1 = __webpack_require__(3);
 var colorUtils_1 = __webpack_require__(12);
-var consts_1 = __webpack_require__(135);
+var consts_1 = __webpack_require__(137);
 var isArray = function isArray(v) {
   return Array.isArray(v);
 };
@@ -2898,7 +2900,7 @@ var generateKey = function generateKey() {
   return "".concat(i, "-").concat(value);
 };
 var getTextOverflowType = function getTextOverflowType(columnFormat, currentColumn) {
-  return lodash_1.get(columnFormat, ["".concat(currentColumn), 'textOverflow']);
+  return (0, lodash_1.get)(columnFormat, ["".concat(currentColumn), 'textOverflow']);
 };
 exports.getTextOverflowType = getTextOverflowType;
 var generateHeader = function generateHeader(value, i, columnFormat, showInternalFields) {
@@ -2911,8 +2913,8 @@ var generateHeader = function generateHeader(value, i, columnFormat, showInterna
   if (!showInternalFields && value.charAt(0) === '_' && value !== '_time') {
     ret.showCell = false;
   }
-  var textOverflowType = exports.getTextOverflowType(columnFormat, value);
-  var textOverflowStyle = exports.getOverflowStyles({
+  var textOverflowType = (0, exports.getTextOverflowType)(columnFormat, value);
+  var textOverflowStyle = (0, exports.getOverflowStyles)({
     textOverflow: textOverflowType
   });
   ret.truncate = true;
@@ -2921,9 +2923,9 @@ var generateHeader = function generateHeader(value, i, columnFormat, showInterna
   return ret;
 };
 var getColumnFormatAlign = function getColumnFormatAlign(columnFormat, currentColumn, currentRow) {
-  var alignOption = lodash_1.get(columnFormat, [currentColumn.value, 'align']);
+  var alignOption = (0, lodash_1.get)(columnFormat, [currentColumn.value, 'align']);
   var align;
-  if (isArray(alignOption) && lodash_1.includes(consts_1.validAlignments, alignOption[currentRow])) {
+  if (isArray(alignOption) && (0, lodash_1.includes)(consts_1.validAlignments, alignOption[currentRow])) {
     align = alignOption[currentRow];
   } else if (typeof alignOption !== 'undefined') {
     console.warn("columnFormat.".concat(currentColumn.value, ".align should be an array containing (").concat(consts_1.validAlignments.join(' | '), "). ").concat(JSON.stringify(alignOption), " provided"));
@@ -2931,9 +2933,9 @@ var getColumnFormatAlign = function getColumnFormatAlign(columnFormat, currentCo
   return align;
 };
 var getColumnFormatCellType = function getColumnFormatCellType(columnFormat, currentColumn, currentRow) {
-  var cellTypes = lodash_1.get(columnFormat, [currentColumn.value, 'cellTypes']);
+  var cellTypes = (0, lodash_1.get)(columnFormat, [currentColumn.value, 'cellTypes']);
   var cellType;
-  if (isArray(cellTypes) && lodash_1.includes(consts_1.validCellRenderers, cellTypes[currentRow])) {
+  if (isArray(cellTypes) && (0, lodash_1.includes)(consts_1.validCellRenderers, cellTypes[currentRow])) {
     cellType = cellTypes[currentRow];
   } else if (typeof cellTypes !== 'undefined') {
     console.warn("columnFormat.".concat(currentColumn.value, ".cellType should be an array containing (").concat(consts_1.validCellRenderers.join(' | '), "). ").concat(JSON.stringify(cellTypes), " provided"));
@@ -2941,9 +2943,9 @@ var getColumnFormatCellType = function getColumnFormatCellType(columnFormat, cur
   return cellType;
 };
 var getColumnFormatSparklineType = function getColumnFormatSparklineType(columnFormat, currentColumn, currentRow) {
-  var types = lodash_1.get(columnFormat, [currentColumn.value, 'sparklineTypes']);
+  var types = (0, lodash_1.get)(columnFormat, [currentColumn.value, 'sparklineTypes']);
   var sparklineType;
-  if (isArray(types) && lodash_1.includes(consts_1.validSparklineTypes, types[currentRow])) {
+  if (isArray(types) && (0, lodash_1.includes)(consts_1.validSparklineTypes, types[currentRow])) {
     sparklineType = types[currentRow];
   } else if (typeof types !== 'undefined') {
     console.warn("columnFormat.".concat(currentColumn.value, ".sparklineTypes should be one of (").concat(consts_1.validSparklineTypes.join(' | '), "). ").concat(JSON.stringify(types), " provided"));
@@ -2951,7 +2953,7 @@ var getColumnFormatSparklineType = function getColumnFormatSparklineType(columnF
   return sparklineType;
 };
 var getColumnFormatData = function getColumnFormatData(columnFormat, currentColumn, currentRow) {
-  var data = lodash_1.get(columnFormat, [currentColumn.value, 'data']);
+  var data = (0, lodash_1.get)(columnFormat, [currentColumn.value, 'data']);
   var datum;
   if (isArray(data)) {
     datum = data[currentRow];
@@ -2961,9 +2963,9 @@ var getColumnFormatData = function getColumnFormatData(columnFormat, currentColu
   return datum;
 };
 var getColumnFormatColor = function getColumnFormatColor(columnFormat, currentColumn, currentRow, field) {
-  var colors = lodash_1.get(columnFormat, [currentColumn.value, field]);
+  var colors = (0, lodash_1.get)(columnFormat, [currentColumn.value, field]);
   var color;
-  if (isArray(colors) && colorUtils_1.isColor(colors[currentRow])) {
+  if (isArray(colors) && (0, colorUtils_1.isColor)(colors[currentRow])) {
     color = colors[currentRow];
   } else if (typeof colors !== 'undefined') {
     console.warn("columnFormat.".concat(currentColumn.value, ".").concat(field, " should be an array containing valid colors. ").concat(JSON.stringify(colors), " provided"));
@@ -2983,9 +2985,9 @@ var getColumnFormatSparklineAreaColor = function getColumnFormatSparklineAreaCol
   return getColumnFormatColor(columnFormat, currentColumn, currentRow, 'sparklineAreaColors');
 };
 var getTableFormatAlign = function getTableFormatAlign(tableFormat, currentColumn, currentRow) {
-  var alignOption = lodash_1.get(tableFormat, 'align');
+  var alignOption = (0, lodash_1.get)(tableFormat, 'align');
   var align;
-  if (isArray(alignOption) && isArray(alignOption[currentColumn]) && lodash_1.includes(consts_1.validAlignments, alignOption[currentColumn][currentRow])) {
+  if (isArray(alignOption) && isArray(alignOption[currentColumn]) && (0, lodash_1.includes)(consts_1.validAlignments, alignOption[currentColumn][currentRow])) {
     align = alignOption[currentColumn][currentRow];
   } else if (typeof alignOption !== 'undefined') {
     console.warn("tableFormat.align should be a 2 dimensional array containing (".concat(consts_1.validAlignments.join(' | '), "). ").concat(JSON.stringify(alignOption), " provided"));
@@ -2993,9 +2995,9 @@ var getTableFormatAlign = function getTableFormatAlign(tableFormat, currentColum
   return align;
 };
 var getTableFormatCellType = function getTableFormatCellType(tableFormat, currentColumn, currentRow) {
-  var cellTypes = lodash_1.get(tableFormat, 'cellTypes');
+  var cellTypes = (0, lodash_1.get)(tableFormat, 'cellTypes');
   var cellType;
-  if (isArray(cellTypes) && isArray(cellTypes[currentColumn]) && lodash_1.includes(consts_1.validCellRenderers, cellTypes[currentColumn][currentRow])) {
+  if (isArray(cellTypes) && isArray(cellTypes[currentColumn]) && (0, lodash_1.includes)(consts_1.validCellRenderers, cellTypes[currentColumn][currentRow])) {
     cellType = cellTypes[currentColumn][currentRow];
   } else if (typeof cellTypes !== 'undefined') {
     console.warn("tableFormat.cellType should be a 2 dimensional array containing (".concat(consts_1.validCellRenderers.join(' | '), "). ").concat(JSON.stringify(cellTypes), " provided"));
@@ -3003,9 +3005,9 @@ var getTableFormatCellType = function getTableFormatCellType(tableFormat, curren
   return cellType;
 };
 var getTableFormatSparklineType = function getTableFormatSparklineType(tableFormat, currentColumn, currentRow) {
-  var types = lodash_1.get(tableFormat, 'sparklineTypes');
+  var types = (0, lodash_1.get)(tableFormat, 'sparklineTypes');
   var sparklineType;
-  if (isArray(types) && isArray(types[currentColumn]) && lodash_1.includes(consts_1.validSparklineTypes, types[currentColumn][currentRow])) {
+  if (isArray(types) && isArray(types[currentColumn]) && (0, lodash_1.includes)(consts_1.validSparklineTypes, types[currentColumn][currentRow])) {
     sparklineType = types[currentColumn][currentRow];
   } else if (typeof types !== 'undefined') {
     console.warn("tableFormat.sparklineTypes should be a 2 dimensional array containing one of (".concat(consts_1.validSparklineTypes.join(' | '), "). ").concat(JSON.stringify(types), " provided"));
@@ -3013,11 +3015,11 @@ var getTableFormatSparklineType = function getTableFormatSparklineType(tableForm
   return sparklineType;
 };
 var getTableFormatColor = function getTableFormatColor(tableFormat, currentColumn, currentRow, field) {
-  var colors = lodash_1.get(tableFormat, field);
+  var colors = (0, lodash_1.get)(tableFormat, field);
   var color;
-  if (isArray(colors) && isArray(colors[currentColumn]) && colorUtils_1.isColor(colors[currentColumn][currentRow])) {
+  if (isArray(colors) && isArray(colors[currentColumn]) && (0, colorUtils_1.isColor)(colors[currentColumn][currentRow])) {
     color = colors[currentColumn][currentRow];
-  } else if (isArray(colors) && colorUtils_1.isColor(colors[currentRow])) {
+  } else if (isArray(colors) && (0, colorUtils_1.isColor)(colors[currentRow])) {
     color = colors[currentRow];
   } else if (typeof colors !== 'undefined' && isArray(colors) && isArray(colors[currentColumn]) && colors[currentColumn][currentRow] !== undefined) {
     console.warn("tableFormat.".concat(field, " needs to be an array of colors, provided ").concat(JSON.stringify(colors), ". Current value at [").concat(currentColumn, "][").concat(currentRow, "] is ").concat(JSON.stringify(colors[currentRow])));
@@ -3037,7 +3039,7 @@ var getTableFormatSparklineAreaColor = function getTableFormatSparklineAreaColor
   return getTableFormatColor(tableFormat, currentCol, currentRow, 'sparklineAreaColors');
 };
 var getTableFormatData = function getTableFormatData(tableFormat, currentCol, currentRow) {
-  var data = lodash_1.get(tableFormat, 'data');
+  var data = (0, lodash_1.get)(tableFormat, 'data');
   var datum;
   if (isArray(data) && isArray(data[currentCol])) {
     datum = data[currentCol][currentRow];
@@ -3132,8 +3134,8 @@ var useTable = function useTable() {
       return generateHeader('', i, columnFormat, showInternalFields);
     }),
     style: {
-      backgroundColor: lodash_1.has(tableFormat, 'headerBackgroundColor') && colorUtils_1.isColor(tableFormat.headerBackgroundColor) && tableFormat.headerBackgroundColor || undefined,
-      color: lodash_1.has(tableFormat, 'headerColor') && colorUtils_1.isColor(tableFormat.headerColor) && tableFormat.headerColor || undefined
+      backgroundColor: (0, lodash_1.has)(tableFormat, 'headerBackgroundColor') && (0, colorUtils_1.isColor)(tableFormat.headerBackgroundColor) && tableFormat.headerBackgroundColor || undefined,
+      color: (0, lodash_1.has)(tableFormat, 'headerColor') && (0, colorUtils_1.isColor)(tableFormat.headerColor) && tableFormat.headerColor || undefined
     }
   };
   var tableBody = {
@@ -3158,8 +3160,8 @@ var useTable = function useTable() {
       var sparklineType = getColumnFormatSparklineType(columnFormat, currentHeader, currentRow) || getTableFormatSparklineType(tableFormat, i, currentRow) || 'area';
       var key = generateKey(value, "".concat(currentRow, "-").concat(i));
       var additionalStyles = {};
-      var textOverflowType = exports.getTextOverflowType(columnFormat, currentHeader.value);
-      var textOverflowStyle = exports.getOverflowStyles({
+      var textOverflowType = (0, exports.getTextOverflowType)(columnFormat, currentHeader.value);
+      var textOverflowStyle = (0, exports.getOverflowStyles)({
         textOverflow: textOverflowType
       });
       additionalStyles = Object.assign(Object.assign({}, additionalStyles), textOverflowStyle);
@@ -3200,7 +3202,7 @@ exports.useTable = useTable;
 
 /***/ }),
 
-/***/ 479:
+/***/ 483:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3208,12 +3210,16 @@ exports.useTable = useTable;
 
 var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
   if (k2 === undefined) k2 = k;
-  Object.defineProperty(o, k2, {
-    enumerable: true,
-    get: function get() {
-      return m[k];
-    }
-  });
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function get() {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
 } : function (o, m, k, k2) {
   if (k2 === undefined) k2 = k;
   o[k2] = m[k];
@@ -3226,21 +3232,14 @@ var __exportStar = this && this.__exportStar || function (m, exports) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-__exportStar(__webpack_require__(480), exports);
-__exportStar(__webpack_require__(481), exports);
-__exportStar(__webpack_require__(482), exports);
-__exportStar(__webpack_require__(483), exports);
+__exportStar(__webpack_require__(484), exports);
+__exportStar(__webpack_require__(485), exports);
+__exportStar(__webpack_require__(486), exports);
+__exportStar(__webpack_require__(487), exports);
 
 /***/ }),
 
-/***/ 48:
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/extends");
-
-/***/ }),
-
-/***/ 480:
+/***/ 484:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3261,7 +3260,7 @@ exports.SwitchTableCell = SwitchTableCell;
 
 /***/ }),
 
-/***/ 481:
+/***/ 485:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3272,7 +3271,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TextCell = void 0;
 var React = __webpack_require__(1);
-var Table_1 = __webpack_require__(111);
+var Table_1 = __webpack_require__(112);
 var noop = function noop() {
   return undefined;
 };
@@ -3296,7 +3295,7 @@ exports.TextCell.displayName = 'TextCell';
 
 /***/ }),
 
-/***/ 482:
+/***/ 486:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3307,7 +3306,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ArrayCell = void 0;
 var React = __webpack_require__(1);
-var Table_1 = __webpack_require__(111);
+var Table_1 = __webpack_require__(112);
 var noop = function noop() {
   return undefined;
 };
@@ -3339,7 +3338,7 @@ exports.ArrayCell.displayName = 'ArrayCell';
 
 /***/ }),
 
-/***/ 483:
+/***/ 487:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3351,8 +3350,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SparklineCell = exports.validSparklineTypes = void 0;
 var React = __webpack_require__(1);
-var i18n_1 = __webpack_require__(2);
-var Table_1 = __webpack_require__(111);
+var Table_1 = __webpack_require__(112);
 var SparkLine_1 = __webpack_require__(95);
 var paddingLeftRight = 5;
 var paddingTopBottom = 3;
@@ -3388,6 +3386,9 @@ var SparklineCell = function SparklineCell(_ref) {
   var data = React.useMemo(function () {
     return parseSparklineData(cell.value);
   }, [cell.value]);
+  if (cell.value[0] === '##__SPARKLINE__##') {
+    data = data.slice(1);
+  }
   React.useLayoutEffect(function () {
     setHeight(cellEl === null || cellEl === void 0 ? void 0 : cellEl.offsetHeight);
   }, [cellEl]);
@@ -3412,7 +3413,6 @@ var SparklineCell = function SparklineCell(_ref) {
     align: cell.align,
     elementRef: setEl,
     "data-test-cell-type": "SparklineCell",
-    "aria-label": i18n_1._('Source count over time sparkline trend'),
     "data-row-index": cell.rowIndex,
     "data-col-index": cell.columnIndex,
     onClick: useMouseOverEffect ? noop : undefined
@@ -3432,7 +3432,7 @@ exports.SparklineCell.displayName = 'SparklineCell';
 
 /***/ }),
 
-/***/ 484:
+/***/ 488:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/debounce");
@@ -3442,14 +3442,14 @@ module.exports = require("lodash/debounce");
 /***/ 49:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-icons/placeholders");
+module.exports = require("@splunk/visualizations-shared/colorConstants");
 
 /***/ }),
 
 /***/ 50:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/colorConstants");
+module.exports = require("@splunk/visualization-icons/placeholders");
 
 /***/ }),
 
@@ -3460,6 +3460,13 @@ module.exports = require("@splunk/visualization-icons");
 
 /***/ }),
 
+/***/ 59:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/taggedTemplateLiteral");
+
+/***/ }),
+
 /***/ 6:
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -3497,14 +3504,14 @@ var VizBehavior;
 
 /***/ }),
 
-/***/ 61:
+/***/ 62:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Popover");
 
 /***/ }),
 
-/***/ 62:
+/***/ 63:
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/getPrototypeOf");
@@ -3518,14 +3525,14 @@ module.exports = require("@babel/runtime/helpers/defineProperty");
 
 /***/ }),
 
-/***/ 70:
+/***/ 71:
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/inherits");
 
 /***/ }),
 
-/***/ 71:
+/***/ 72:
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/possibleConstructorReturn");
@@ -3539,31 +3546,31 @@ module.exports = require("@babel/runtime/helpers/toConsumableArray");
 
 /***/ }),
 
-/***/ 86:
+/***/ 82:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/assertThisInitialized");
+module.exports = require("@babel/runtime/helpers/typeof");
 
 /***/ }),
 
-/***/ 9:
+/***/ 87:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/classCallCheck");
+module.exports = require("@babel/runtime/helpers/assertThisInitialized");
 
 /***/ }),
 
-/***/ 92:
+/***/ 9:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/Paginator");
+module.exports = require("@babel/runtime/helpers/classCallCheck");
 
 /***/ }),
 
 /***/ 93:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/typeof");
+module.exports = require("@splunk/react-ui/Paginator");
 
 /***/ }),
 
@@ -3578,13 +3585,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(18);
 /* harmony import */ var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(86);
+/* harmony import */ var _babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(87);
 /* harmony import */ var _babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(70);
+/* harmony import */ var _babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(71);
 /* harmony import */ var _babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(71);
+/* harmony import */ var _babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(72);
 /* harmony import */ var _babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(62);
+/* harmony import */ var _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(63);
 /* harmony import */ var _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_6__);
 /* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(7);
 /* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_7__);
@@ -3594,10 +3601,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_9__);
 /* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(3);
 /* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_10__);
-/* harmony import */ var _splunk_react_ui_Popover__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(61);
-/* harmony import */ var _splunk_react_ui_Popover__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_ui_Popover__WEBPACK_IMPORTED_MODULE_11__);
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(4);
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_12__);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(4);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_11__);
+/* harmony import */ var _splunk_react_ui_Popover__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(62);
+/* harmony import */ var _splunk_react_ui_Popover__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_ui_Popover__WEBPACK_IMPORTED_MODULE_12__);
+/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(2);
+/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_13___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_13__);
+/* harmony import */ var _splunk_ui_utils_id__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(25);
+/* harmony import */ var _splunk_ui_utils_id__WEBPACK_IMPORTED_MODULE_14___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_id__WEBPACK_IMPORTED_MODULE_14__);
 
 
 
@@ -3636,11 +3647,13 @@ function _isNativeReflectConstruct() {
 
 
 
-var StyledSvg = styled_components__WEBPACK_IMPORTED_MODULE_12___default.a.svg.withConfig({
+
+
+var StyledSvg = styled_components__WEBPACK_IMPORTED_MODULE_11___default.a.svg.withConfig({
   displayName: "SparkLine__StyledSvg",
   componentId: "sc-5oplra-0"
 })(["overflow:hidden;"]);
-var StyledTooltip = styled_components__WEBPACK_IMPORTED_MODULE_12___default.a.div.withConfig({
+var StyledTooltip = styled_components__WEBPACK_IMPORTED_MODULE_11___default.a.div.withConfig({
   displayName: "SparkLine__StyledTooltip",
   componentId: "sc-5oplra-1"
 })(["padding:3px 8px;font-size:12px;"]);
@@ -3666,6 +3679,7 @@ var SparkLine = /*#__PURE__*/function (_Component) {
       rectArea: null,
       tooltip: null
     };
+    _this.titleId = Object(_splunk_ui_utils_id__WEBPACK_IMPORTED_MODULE_14__["createDOMID"])();
     return _this;
   }
   _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_2___default()(SparkLine, [{
@@ -3913,7 +3927,7 @@ var SparkLine = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderTooltip",
     value: function renderTooltip() {
-      return this.state.anchor !== null && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement(_splunk_react_ui_Popover__WEBPACK_IMPORTED_MODULE_11___default.a, {
+      return this.state.anchor !== null && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement(_splunk_react_ui_Popover__WEBPACK_IMPORTED_MODULE_12___default.a, {
         "data-test": "tooltip",
         open: this.state.open,
         anchor: this.state.anchor,
@@ -4005,7 +4019,8 @@ var SparkLine = /*#__PURE__*/function (_Component) {
         height = _this$props9.height,
         isArea = _this$props9.isArea,
         lineStrokeWidth = _this$props9.lineStrokeWidth,
-        width = _this$props9.width;
+        width = _this$props9.width,
+        title = _this$props9.title;
       if (data.length === 0) {
         return null;
       }
@@ -4030,8 +4045,14 @@ var SparkLine = /*#__PURE__*/function (_Component) {
         ref: elementRef
       }, Object(lodash__WEBPACK_IMPORTED_MODULE_10__["omit"])(this.props, Object(lodash__WEBPACK_IMPORTED_MODULE_10__["keys"])(SparkLine.propTypes))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement(StyledSvg, {
         height: height,
-        width: width
-      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement("g", null, this.renderCursor(), this.renderPolyline(points), this.renderArea(points), dotsToShow ? this.renderEndDots(points, dotsToShow, xMargin) : null, showTooltip ? this.renderRect(points, xMargin) : null, showTooltip ? this.renderTooltip() : null)));
+        width: width,
+        role: "img",
+        "aria-labelledby": this.titleId,
+        "data-test": "sparkline-svg"
+      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement("title", {
+        id: this.titleId,
+        "data-test": "sparkline-title"
+      }, title || Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_13__["_"])('Source count over time sparkline trend')), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement("g", null, this.renderCursor(), this.renderPolyline(points), this.renderArea(points), dotsToShow ? this.renderEndDots(points, dotsToShow, xMargin) : null, showTooltip ? this.renderRect(points, xMargin) : null, showTooltip ? this.renderTooltip() : null)));
     }
   }]);
   return SparkLine;
@@ -4108,7 +4129,9 @@ _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_7___default()(Spa
   /**
    * The width of the container.
    */
-  width: prop_types__WEBPACK_IMPORTED_MODULE_8___default.a.number.isRequired
+  width: prop_types__WEBPACK_IMPORTED_MODULE_8___default.a.number.isRequired,
+  /** Sets the a11y title text on sparkline. */
+  title: prop_types__WEBPACK_IMPORTED_MODULE_8___default.a.string
 });
 _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_7___default()(SparkLine, "defaultProps", {
   acceptNull: false,
@@ -4132,13 +4155,6 @@ _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_7___default()(Spa
 });
 /* harmony default export */ __webpack_exports__["default"] = (SparkLine);
 
-/***/ }),
-
-/***/ 98:
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/taggedTemplateLiteral");
-
 /***/ })
 
 /******/ });