@splunk/visualizations 28.5.3 → 28.7.0

package/Table.js

@@ -12,6 +12,7 @@ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __pow = Math.pow;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues = (a, b) => {
   for (var prop in b || (b = {}))
@@ -415,18 +416,12 @@ var themes = {
     prisma: variables_default.backgroundColor(props)
   })(props),
   rowBackgroundColorEven: (props) => pick_default({
-    enterprise: {
-      dark: variables_default.black(props),
-      light: variables_default.gray96(props)
-    },
-    prisma: variables_default.backgroundColorPage(props)
+    enterprise: { dark: "rgba(35,36,41,0.4)", light: "rgba(240,240,240,0.6)" },
+    prisma: { dark: "rgba(35,36,41,0.4)", light: "rgba(240,240,240,0.6)" }
   })(props),
   rowBackgroundColorOdd: (props) => pick_default({
-    enterprise: {
-      dark: "#0D1012",
-      light: variables_default.backgroundColor(props)
-    },
-    prisma: { dark: variables_default.backgroundColorSidebar(props), light: variables_default.white(props) }
+    enterprise: { dark: "rgba(0,0,0,0.4)", light: "rgba(255,255,255,0.6)" },
+    prisma: { dark: "rgba(0,0,0,0.4)", light: "rgba(255,255,255,0.6)" }
   })(props),
   textColor: (props) => pick_default({
     enterprise: variables_default.textColor(props),
@@ -942,7 +937,7 @@ var DefaultVizActionHandler = class {
 var INITIAL_HEIGHT = 250;
 var SplunkVisualization = class {
 };
-SplunkVisualization.propTypes = {
+__publicField(SplunkVisualization, "propTypes", {
   /**
    * display mode
    */
@@ -1018,11 +1013,11 @@ SplunkVisualization.propTypes = {
    * A callback to request new data with updated request params
    */
   onRequestParamsChange: prop_types_exports.func
-};
+});
 /**
  *
  */
-SplunkVisualization.defaults = {
+__publicField(SplunkVisualization, "defaults", {
   // BaseVisualization in dashboard-visualizations uses 100% for width but 250 for height
   width: "100%",
   height: INITIAL_HEIGHT,
@@ -1037,7 +1032,7 @@ SplunkVisualization.defaults = {
   onComputedProps: () => ({}),
   loading: false,
   onRequestParamsChange: lodash_exports.noop
-};
+});
 var SplunkVisualization_default = SplunkVisualization;
 
 // src/common/interfaces/DataSource.ts
@@ -1091,9 +1086,9 @@ var usePaginationParams = ({
   meta,
   onRequestParamsChange
 }) => {
-  const totalCount = meta && meta.totalCount || 0;
-  const offset = requestParams && requestParams.offset || 0;
-  const count = requestParams && requestParams.count;
+  const totalCount = (meta == null ? void 0 : meta.totalCount) || 0;
+  const offset = (requestParams == null ? void 0 : requestParams.offset) || 0;
+  const count = requestParams == null ? void 0 : requestParams.count;
   const totalPages = typeof count === "number" && count > 0 ? Math.ceil(totalCount / count) : 0;
   const current = typeof count === "number" && count > 0 ? Math.floor(offset / count) + 1 : 0;
   const isPaging = totalPages > 1 && typeof onRequestParamsChange === "function";
@@ -1152,7 +1147,7 @@ var SizeAwareWrapper_default = "default" in defaultImport29 ? defaultImport29.de
 var isMissing = (v) => {
   return v === null || v === void 0;
 };
-var missingKeys = (keys2, target) => keys2.filter((k) => isMissing(target[k]));
+var missingKeys = (keys, target) => keys.filter((k) => isMissing(target[k]));
 var MissingPropsMessage = (props) => {
   const {
     width = SplunkVisualization_default.defaults.width,
@@ -1201,7 +1196,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "28.5.3 - 657435b86"
+  "data-splunk-visualization-version": "28.7.0 - d7b18cab6"
 })`
     position: relative;
     width: 100%;
@@ -1282,7 +1277,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.5.3 - 657435b86",
+        "data-splunk-visualization-version": "28.7.0 - d7b18cab6",
         width,
         height,
         backgroundColor
@@ -1823,6 +1818,24 @@ var defaultImport35 = __toESM(require("@splunk/react-icons/Triangle"));
 __reExport(Triangle_exports, require("@splunk/react-icons/Triangle"));
 var Triangle_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
 
+// esm-externals:@splunk/visualizations-shared/propUtils
+var propUtils_exports = {};
+__export(propUtils_exports, {
+  default: () => propUtils_default
+});
+var defaultImport36 = __toESM(require("@splunk/visualizations-shared/propUtils"));
+__reExport(propUtils_exports, require("@splunk/visualizations-shared/propUtils"));
+var propUtils_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
+
+// esm-externals:@splunk/visualizations-shared/simpleXMLOptions
+var simpleXMLOptions_exports = {};
+__export(simpleXMLOptions_exports, {
+  default: () => simpleXMLOptions_default
+});
+var defaultImport37 = __toESM(require("@splunk/visualizations-shared/simpleXMLOptions"));
+__reExport(simpleXMLOptions_exports, require("@splunk/visualizations-shared/simpleXMLOptions"));
+var simpleXMLOptions_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
+
 // src/common/chartingUtils.ts
 var DEFAULT_LINE_WIDTH = 2;
 var getAnnotationsForCanvas = ({
@@ -1860,9 +1873,9 @@ var shouldEnableSearchZoom = (eventHandlers = [], xField = "") => {
   const xAxisIsTime = xField === "_time";
   return !!rangeSelectEventHandler && xAxisIsTime;
 };
-var canvasSupportedTimeSeriesCharts = ["splunk.line"];
+var canvasSupportedTimeSeriesCharts = ["splunk.line", "splunk.area"];
 var isTimeSeriesCanvasRenderSupported = (vizConfigKey) => {
-  return canvasSupportedTimeSeriesCharts.indexOf(vizConfigKey) > -1;
+  return canvasSupportedTimeSeriesCharts.includes(vizConfigKey);
 };
 var filterChartDataFromInternalFields = (chartData) => {
   const { fields, columns } = chartData;
@@ -2017,46 +2030,66 @@ var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInt
   }
   return y2Config;
 };
-var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled, nullValueMode, markerDisplay, lineDashStyle, lineDashStylesByField, stepPosition, stepPositionsByField) => {
+var getSeriesType = (isOverlay, isAreaChart, isStacked) => {
+  if (isOverlay) return "line";
+  if (!isAreaChart) return void 0;
+  return isStacked ? "stacked-area" : "area";
+};
+var getY2Scale = (field, y2fields, overlayFields) => {
+  const assignToY2 = (y2fields == null ? void 0 : y2fields.length) > 0 && y2fields.includes(field) || !(y2fields == null ? void 0 : y2fields.length) && (overlayFields == null ? void 0 : overlayFields.includes(field));
+  return assignToY2 ? "y2" : "y";
+};
+var getSeriesOverrides = (opts) => {
+  var _a;
+  const {
+    yfields,
+    y2fields,
+    lineWidth,
+    overlayFields,
+    y2Enabled,
+    nullValueMode,
+    markerDisplay,
+    lineDashStyle,
+    lineDashStylesByField,
+    stepPosition,
+    stepPositionsByField,
+    type,
+    stackMode,
+    showLines
+  } = opts;
   const seriesConfig = {};
   let spanGaps;
-  let replaceNullsWithZero;
   if (nullValueMode === "gaps") {
     spanGaps = false;
-  } else if (nullValueMode === "connect" || nullValueMode === "zero") {
+  } else if (nullValueMode != null) {
     spanGaps = true;
-    if (nullValueMode === "zero") {
-      replaceNullsWithZero = true;
-    }
+  } else {
+    spanGaps = void 0;
   }
-  yfields.forEach((field) => {
+  const replaceNullsWithZero = nullValueMode === "zero" ? true : void 0;
+  const isAreaChart = type === "area";
+  const isStacked = isAreaChart && (stackMode === "stacked" || stackMode === "stacked100");
+  const areaFields = isAreaChart ? yfields.filter((f) => !(overlayFields == null ? void 0 : overlayFields.includes(f))) : yfields;
+  const overlayFieldsInOrder = (_a = overlayFields == null ? void 0 : overlayFields.filter((f) => yfields.includes(f))) != null ? _a : [];
+  const orderedFields = isAreaChart ? [...areaFields, ...overlayFieldsInOrder] : yfields;
+  orderedFields.forEach((field) => {
+    var _a2;
+    const isOverlay = (_a2 = overlayFields == null ? void 0 : overlayFields.includes(field)) != null ? _a2 : false;
+    const isPercent = isAreaChart && stackMode === "stacked100" && !isOverlay;
+    const shouldHideAreaOutline = isAreaChart && showLines === false && !isOverlay;
     seriesConfig[field] = {
-      overrides: { width: lineWidth != null ? lineWidth : DEFAULT_LINE_WIDTH }
+      overrides: __spreadValues({
+        width: shouldHideAreaOutline ? 0 : lineWidth != null ? lineWidth : DEFAULT_LINE_WIDTH
+      }, isPercent ? { stacking: { mode: "percent", group: "A" } } : {})
     };
-    if (spanGaps !== void 0) {
-      seriesConfig[field].overrides.spanGaps = spanGaps;
-    }
-    if (y2Enabled) {
-      const shouldAssignToY2 = (
-        // If y2Fields are present, assign all y2Fields to y2 scale
-        (y2fields == null ? void 0 : y2fields.length) > 0 && y2fields.includes(field) || // Else, assign all overlayFields to y2 scale
-        (!y2fields || y2fields.length === 0) && (overlayFields == null ? void 0 : overlayFields.includes(field))
-      );
-      if (shouldAssignToY2) {
-        seriesConfig[field].overrides.scale = "y2";
-      } else {
-        seriesConfig[field].overrides.scale = "y";
-      }
-    }
-    if (overlayFields == null ? void 0 : overlayFields.includes(field)) {
-      seriesConfig[field].type = "line";
-    }
-    if (markerDisplay !== void 0) {
-      seriesConfig[field].markerDisplay = markerDisplay;
-    }
-    const fieldDashStyle = (lineDashStylesByField == null ? void 0 : lineDashStylesByField[field]) || lineDashStyle;
-    if (fieldDashStyle) {
-      seriesConfig[field].lineDashStyle = fieldDashStyle;
+    const seriesType = getSeriesType(isOverlay, isAreaChart, isStacked);
+    if (seriesType !== void 0) seriesConfig[field].type = seriesType;
+    if (spanGaps !== void 0) seriesConfig[field].overrides.spanGaps = spanGaps;
+    if (y2Enabled) seriesConfig[field].overrides.scale = getY2Scale(field, y2fields, overlayFields);
+    if (markerDisplay !== void 0) seriesConfig[field].markerDisplay = markerDisplay;
+    if (!isAreaChart || isOverlay) {
+      const fieldDashStyle = (lineDashStylesByField == null ? void 0 : lineDashStylesByField[field]) || lineDashStyle;
+      if (fieldDashStyle) seriesConfig[field].lineDashStyle = fieldDashStyle;
     }
     const hasFieldStepPosition = Object.hasOwn(stepPositionsByField || {}, field);
     const fieldStepPosition = hasFieldStepPosition ? stepPositionsByField == null ? void 0 : stepPositionsByField[field] : stepPosition;
@@ -2127,8 +2160,27 @@ var TrellisTitleDiv = styled_components_default.div`
     background-color: ${(props) => props.backgroundColor};
     box-shadow: 0 1px ${(props) => props.backgroundColor}; // this is added to avoid a 1px gap between title and viz divs that showed up intermittently because of pixel rounding error in chrome.
 `;
+var formatTrellisKey = (value) => {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  if (typeof value === "number" || typeof value === "boolean") {
+    return value.toString();
+  }
+  if (typeof value === "symbol") {
+    return value.toString();
+  }
+  try {
+    return JSON.stringify(value);
+  } catch (e) {
+    return typeof value === "bigint" ? value.toString() : "";
+  }
+};
 var TrellisTitle = (props) => {
-  const titleText = String(props.trellisKey).toString();
+  const titleText = formatTrellisKey(props.trellisKey);
   return /* @__PURE__ */ react_exports.createElement(
     TrellisTitleDiv,
     {
@@ -2264,6 +2316,38 @@ var parseArrayOption = (value) => {
   }
   return void 0;
 };
+var getAreaOpacityForCanvas = (areaOpacity) => (
+  // Preserve legacy visualizations behavior where area opacity is squared to match charting output.
+  areaOpacity !== void 0 && areaOpacity !== null ? __pow(areaOpacity, 2) : areaOpacity
+);
+var parseTickIntervalOption = (simpleXMLValue, canvasValue) => {
+  if (simpleXMLValue) return Number(simpleXMLValue);
+  if (canvasValue) return Number(canvasValue);
+  return void 0;
+};
+var getYAxisTitles = ({
+  y2Enabled,
+  yFields,
+  y2Fields,
+  overlayFields,
+  yAxisTitleText,
+  yAxisTitleVisibility,
+  y2AxisTitleText,
+  y2AxisTitleVisibility,
+  containerHeight
+}) => {
+  const yFieldsForTitle = y2Enabled ? yFields.filter((field) => !y2Fields.includes(field)) : yFields;
+  const fieldsForY2Axis = y2Fields.length > 0 ? y2Fields : overlayFields;
+  const yAxisTitle = ellipsisAxisTitle(
+    getComputedAxisTitles(yAxisTitleText, yFieldsForTitle, yAxisTitleVisibility),
+    containerHeight
+  );
+  const y2AxisTitle = ellipsisAxisTitle(
+    getComputedAxisTitles(y2AxisTitleText, fieldsForY2Axis, y2AxisTitleVisibility),
+    containerHeight
+  );
+  return { yAxisTitle, y2AxisTitle };
+};
 var TimeSeriesChartWrapper = (props) => {
   var _b, _c, _d;
   const _a = props, {
@@ -2353,6 +2437,8 @@ var TimeSeriesChartWrapper = (props) => {
     "chart.overlayFields": overlayFieldsStr,
     "chart.nullValueMode": nullValueMode,
     "chart.showDataLabels": showDataLabels,
+    "chart.showLines": showLines,
+    "chart.stackMode": stackMode,
     lineWidth,
     lineDashStyle,
     fieldDashStyles: lineDashStylesByFieldStr,
@@ -2381,7 +2467,10 @@ var TimeSeriesChartWrapper = (props) => {
     yAxisMinorTickSize,
     y2AxisMinorTickSize,
     showYAxisWithZero: showYAxisWithZeroFromOptions,
-    showY2AxisWithZero: showY2AxisWithZeroFromOptions
+    showY2AxisWithZero: showY2AxisWithZeroFromOptions,
+    // area only props
+    areaFillOpacity: areaOpacity,
+    chart: chartType
   } = options;
   const dataValuesDisplay = showDataLabels === "none" ? "off" : showDataLabels;
   const showYAxisWithZero = showYAxisWithZeroFromProps != null ? showYAxisWithZeroFromProps : showYAxisWithZeroFromOptions;
@@ -2398,13 +2487,11 @@ var TimeSeriesChartWrapper = (props) => {
   const yAxisMax = parseAxisValue(yAxisMaxRaw);
   const y2AxisMin = parseAxisValue(y2AxisMinRaw);
   const y2AxisMax = parseAxisValue(y2AxisMaxRaw);
-  const parseTickInterval = (simpleXMLValue, canvasValue) => {
-    if (simpleXMLValue) return Number(simpleXMLValue);
-    if (canvasValue) return Number(canvasValue);
-    return void 0;
-  };
-  const yAxisMajorTickIntervalNum = parseTickInterval(yAxisMajorUnitFromSimpleXML, yAxisMajorTickInterval);
-  const y2AxisMajorTickIntervalNum = parseTickInterval(
+  const yAxisMajorTickIntervalNum = parseTickIntervalOption(
+    yAxisMajorUnitFromSimpleXML,
+    yAxisMajorTickInterval
+  );
+  const y2AxisMajorTickIntervalNum = parseTickIntervalOption(
     y2AxisMajorUnitFromSimpleXML,
     y2AxisMajorTickInterval
   );
@@ -2413,6 +2500,7 @@ var TimeSeriesChartWrapper = (props) => {
   const y2AxisMajorTickSizeNum = y2AxisMajorTickSize != null ? Number(y2AxisMajorTickSize) : void 0;
   const yAxisMinorTickSizeNum = yAxisMinorTickSize != null ? Number(yAxisMinorTickSize) : void 0;
   const y2AxisMinorTickSizeNum = y2AxisMinorTickSize != null ? Number(y2AxisMinorTickSize) : void 0;
+  const areaOpacityForCanvas = getAreaOpacityForCanvas(areaOpacity);
   const seriesColors = seriesColorsStr ? JSON.parse(seriesColorsStr) : void 0;
   const seriesColorsByField = fieldColors ? JSON.parse(fieldColors) : void 0;
   const lineDashStylesByField = lineDashStylesByFieldStr ? JSON.parse(lineDashStylesByFieldStr) : void 0;
@@ -2443,26 +2531,40 @@ var TimeSeriesChartWrapper = (props) => {
   );
   let xAxisTitle = getComputedAxisTitles(xAxisTitleText, [xField], xAxisTitleVisibility);
   xAxisTitle = ellipsisAxisTitle(xAxisTitle, containerWidth);
-  const yFieldsForTitle = y2Enabled ? yFields.filter((field) => !y2Fields.includes(field)) : yFields;
-  let yAxisTitle = getComputedAxisTitles(yAxisTitleText, yFieldsForTitle, yAxisTitleVisibility);
-  yAxisTitle = ellipsisAxisTitle(yAxisTitle, containerHeight);
-  const fieldsForY2Axis = y2Fields.length > 0 ? y2Fields : overlayFields;
-  let y2AxisTitle = getComputedAxisTitles(y2AxisTitleText, fieldsForY2Axis, y2AxisTitleVisibility);
-  y2AxisTitle = ellipsisAxisTitle(y2AxisTitle, containerHeight);
+  const { yAxisTitle, y2AxisTitle } = getYAxisTitles({
+    y2Enabled,
+    yFields,
+    y2Fields,
+    overlayFields,
+    yAxisTitleText,
+    yAxisTitleVisibility,
+    y2AxisTitleText,
+    y2AxisTitleVisibility,
+    containerHeight
+  });
   const xScaleConfig = (0, react_exports.useMemo)(
     () => getXScaleConfig(xAxisTitle, xAxisLabelVisibility, xAxisLabelRotation),
     [xAxisTitle, xAxisLabelVisibility, xAxisLabelRotation]
   );
+  const isStacked100 = stackMode === "stacked100";
   const yScaleConfig = (0, react_exports.useMemo)(
-    () => getYScaleConfig(
-      yAxisTitle,
-      yAxisAbbreviation,
-      yAxisScale,
-      yAxisLabelVisibility,
-      yAxisMin,
-      yAxisMax
-    ),
-    [yAxisTitle, yAxisAbbreviation, yAxisScale, yAxisLabelVisibility, yAxisMin, yAxisMax]
+    () => {
+      const config2 = getYScaleConfig(
+        yAxisTitle,
+        yAxisAbbreviation,
+        yAxisScale,
+        yAxisLabelVisibility,
+        yAxisMin,
+        yAxisMax
+      );
+      if (isStacked100) {
+        config2.y.tickFmt = (v) => `${Math.round(v * 100)}%`;
+        config2.y.range = () => [0, 1];
+      }
+      return config2;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [yAxisTitle, yAxisAbbreviation, yAxisScale, yAxisLabelVisibility, yAxisMin, yAxisMax, isStacked100]
   );
   const y2ScaleConfig = (0, react_exports.useMemo)(() => {
     if (y2Enabled) {
@@ -2494,10 +2596,11 @@ var TimeSeriesChartWrapper = (props) => {
   ];
   chartData.fields = filteredChartData.fields;
   chartData.columns = seriesDataFormatted;
+  const normalizedStackMode = stackMode === "stacked" || stackMode === "stacked100" ? stackMode : "auto";
   const seriesOverrides = (0, react_exports.useMemo)(
-    () => getSeriesOverrides(
-      yFields,
-      y2Fields,
+    () => getSeriesOverrides({
+      yfields: yFields,
+      y2fields: y2Fields,
       lineWidth,
       overlayFields,
       y2Enabled,
@@ -2506,8 +2609,11 @@ var TimeSeriesChartWrapper = (props) => {
       lineDashStyle,
       lineDashStylesByField,
       stepPosition,
-      stepPositionsByField
-    ),
+      stepPositionsByField,
+      type: chartType,
+      stackMode: normalizedStackMode,
+      showLines
+    }),
     [
       yFields,
       y2Fields,
@@ -2519,7 +2625,10 @@ var TimeSeriesChartWrapper = (props) => {
       lineDashStyle,
       lineDashStylesByField,
       stepPosition,
-      stepPositionsByField
+      stepPositionsByField,
+      chartType,
+      normalizedStackMode,
+      showLines
     ]
   );
   const chartingEventAnnotations = (0, react_exports.useMemo)(
@@ -2587,50 +2696,54 @@ var TimeSeriesChartWrapper = (props) => {
   react_exports.useEffect(() => {
     additionalTooltipValuesRef.current = additionalTooltipValues;
   }, [additionalTooltipValues]);
+  const handleCrosshairMouseout = react_exports.useCallback(() => {
+    if (onPointMouseOut && lastPayloadRef.current) {
+      onPointMouseOut({
+        type: "point.mouseout",
+        originalEvent: lastOriginalEventRef.current,
+        payload: lastPayloadRef.current
+      });
+    }
+    previousMouseoverPayloadRef.current = null;
+  }, [onPointMouseOut]);
   const handleChartCrosshairChange = react_exports.useCallback(
     (event) => {
-      if (onPointMouseOver || onPointMouseOut) {
-        if (!event) {
-          if (onPointMouseOut && lastPayloadRef.current) {
-            onPointMouseOut({
-              type: "point.mouseout",
-              originalEvent: lastOriginalEventRef.current,
-              payload: lastPayloadRef.current
-            });
-          }
-          previousMouseoverPayloadRef.current = null;
-          return;
-        }
-        const payload = __spreadProps(__spreadValues({}, (0, lodash_exports.pick)(event, "value", "seriesKey", "time", "index", "seriesIndex")), {
-          name: event.seriesKey
+      if (!onPointMouseOver && !onPointMouseOut) {
+        return;
+      }
+      if (!event) {
+        handleCrosshairMouseout();
+        return;
+      }
+      const payload = __spreadProps(__spreadValues({}, (0, lodash_exports.pick)(event, "value", "seriesKey", "time", "index", "seriesIndex")), {
+        name: event.seriesKey
+      });
+      delete payload.seriesKey;
+      if (event.rowContext) {
+        Object.assign(
+          payload,
+          Object.keys(event.rowContext).reduce((acc, fieldName) => {
+            acc[`row.${fieldName}.value`] = event.rowContext[fieldName];
+            return acc;
+          }, {})
+        );
+      }
+      const updatedPayload = appendTrellisToPayload(payload, trellisKey, trellisSplitBy);
+      if (!hasMouseoverPayloadChanged(updatedPayload, previousMouseoverPayloadRef.current)) {
+        return;
+      }
+      lastPayloadRef.current = updatedPayload;
+      lastOriginalEventRef.current = event;
+      previousMouseoverPayloadRef.current = __spreadValues({}, updatedPayload);
+      if (onPointMouseOver) {
+        onPointMouseOver({
+          type: "point.mouseover",
+          originalEvent: event,
+          payload: updatedPayload
         });
-        delete payload.seriesKey;
-        if (event.rowContext) {
-          Object.assign(
-            payload,
-            Object.keys(event.rowContext).reduce((acc, fieldName) => {
-              acc[`row.${fieldName}.value`] = event.rowContext[fieldName];
-              return acc;
-            }, {})
-          );
-        }
-        const updatedPayload = appendTrellisToPayload(payload, trellisKey, trellisSplitBy);
-        if (!hasMouseoverPayloadChanged(updatedPayload, previousMouseoverPayloadRef.current)) {
-          return;
-        }
-        lastPayloadRef.current = updatedPayload;
-        lastOriginalEventRef.current = event;
-        previousMouseoverPayloadRef.current = __spreadValues({}, updatedPayload);
-        if (onPointMouseOver) {
-          onPointMouseOver({
-            type: "point.mouseover",
-            originalEvent: event,
-            payload: updatedPayload
-          });
-        }
       }
     },
-    [onPointMouseOver, onPointMouseOut, trellisKey, trellisSplitBy]
+    [onPointMouseOver, onPointMouseOut, trellisKey, trellisSplitBy, handleCrosshairMouseout]
   );
   const dataKey = `${(_b = chartData.columns[0]) == null ? void 0 : _b[0]}-${(_c = chartData.columns[0]) == null ? void 0 : _c[chartData.columns[0].length - 1]}-${(_d = chartData.columns[0]) == null ? void 0 : _d.length}`;
   const memoizedChart = (0, react_exports.useMemo)(() => {
@@ -2685,7 +2798,8 @@ var TimeSeriesChartWrapper = (props) => {
         showXAxisLine,
         showYAxisLine,
         showY2AxisLine,
-        xAxisMaxLabelParts
+        xAxisMaxLabelParts,
+        areaOpacity: areaOpacityForCanvas
       }
     ));
   }, [
@@ -2737,7 +2851,8 @@ var TimeSeriesChartWrapper = (props) => {
     showYAxisLine,
     showY2AxisLine,
     legendMode,
-    xAxisMaxLabelParts
+    xAxisMaxLabelParts,
+    areaOpacityForCanvas
   ]);
   const memoizedVisualization = (0, react_exports.useMemo)(() => {
     return /* @__PURE__ */ react_exports.createElement(VizStyleWrapper_default, { backgroundColor: bgColor }, memoizedChart);
@@ -2765,6 +2880,37 @@ var TimeSeriesChartWrapper_default = TimeSeriesChartWrapper;
 
 // src/common/withDashboardViz.tsx
 var SanitizedTimeSeriesChartWrapper = (0, SanitizeProps_exports.withSanitizedProps)(TimeSeriesChartWrapper_default);
+var buildEventCallbackProps = (supportedEvents, evaluatedOptionsToUse, onEventTrigger) => {
+  const result = {};
+  Object.keys(supportedEvents).forEach((eventName) => {
+    const { parentKeys, payloadKeys } = supportedEvents[eventName];
+    const eventCallbackPropName = (0, lodash_exports.camelCase)(`on.${eventName}`);
+    let payload = {};
+    if (Array.isArray(payloadKeys) && payloadKeys.length) {
+      payloadKeys.forEach((p) => {
+        payload[p] = evaluatedOptionsToUse[p];
+      });
+    }
+    result[eventCallbackPropName] = (ev) => {
+      if (ev == null ? void 0 : ev.payload) {
+        payload = __spreadValues({}, ev.payload);
+      }
+      return onEventTrigger({
+        originalEvent: ev,
+        payload,
+        type: eventName
+      });
+    };
+    if (parentKeys) {
+      for (let i = parentKeys.length - 1; i >= 0; i -= 1) {
+        const newObject = {};
+        newObject[parentKeys[i]] = result[eventCallbackPropName];
+        result[eventCallbackPropName] = newObject;
+      }
+    }
+  });
+  return result;
+};
 var withDashboardViz = (opts) => {
   const {
     ReactViz,
@@ -2822,9 +2968,7 @@ var withDashboardViz = (opts) => {
     const isDownsamplingEnabledByFeatureFlag = Boolean(
       featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableDownsampling
     );
-    const isTrellisFeatureFlagOn = Boolean(
-      featureFlagContext && featureFlagContext.visualizations_enableTrellis
-    );
+    const isTrellisFeatureFlagOn = Boolean(featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableTrellis);
     const isTrellisOn = isTrellisFeatureFlagOn && ((_a = vizConfig == null ? void 0 : vizConfig.supports) == null ? void 0 : _a.includes("trellis" /* TRELLIS */)) && (options == null ? void 0 : options.splitByLayout) === "trellis" /* TRELLIS */;
     const isAcceleratedRenderFeatureFlagOn = Boolean(
       featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableAcceleratedRender
@@ -2989,38 +3133,12 @@ var withDashboardViz = (opts) => {
         }
       );
     }
-    const eventCallbackProps = {};
-    if (hasEventHandlers && mode === "view" && vizConfig.supports.indexOf("events" /* EVENTS */) > -1) {
-      const supportedEvents = vizConfig.events;
-      Object.keys(supportedEvents).forEach((eventName) => {
-        const { parentKeys, payloadKeys } = supportedEvents[eventName];
-        const eventCallbackPropName = (0, lodash_exports.camelCase)(`on.${eventName}`);
-        let payload = {};
-        if (Array.isArray(payloadKeys) && payloadKeys.length) {
-          payloadKeys.forEach((p) => {
-            payload[p] = evaluatedOptionsToUse[p];
-          });
-        }
-        eventCallbackProps[eventCallbackPropName] = (ev) => {
-          if (ev == null ? void 0 : ev.payload) {
-            payload = __spreadValues({}, ev.payload);
-          }
-          return onEventTrigger({
-            originalEvent: ev,
-            payload,
-            type: eventName
-          });
-        };
-        if (parentKeys) {
-          for (let i = parentKeys.length - 1; i >= 0; i -= 1) {
-            const newObject = {};
-            newObject[parentKeys[i]] = eventCallbackProps[eventCallbackPropName];
-            eventCallbackProps[eventCallbackPropName] = newObject;
-          }
-        }
-      });
-    }
-    const computedVizProps = computeVizProps2(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, props), evaluatedOptionsToUse), eventCallbackProps), {
+    const eventCallbackProps = hasEventHandlers && mode === "view" && vizConfig.supports.includes("events" /* EVENTS */) ? buildEventCallbackProps(vizConfig.events, evaluatedOptionsToUse, onEventTrigger) : {};
+    const computedVizProps = computeVizProps2(__spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues({}, props), evaluatedOptionsToUse), {
+      // Align option transformation with the actual renderer selected below.
+      // This prevents canvas-only option preservation from leaking into Highcharts mode.
+      isAcceleratedRenderOn
+    }), eventCallbackProps), {
       themeFunc
     }));
     if (useAsyncEvaluatedOptions && Object.keys(evaluatedOptionsToUse).length === 0) {
@@ -3054,36 +3172,45 @@ var debounce_exports = {};
 __export(debounce_exports, {
   default: () => debounce_default
 });
-var defaultImport36 = __toESM(require("lodash/debounce"));
+var defaultImport38 = __toESM(require("lodash/debounce"));
 __reExport(debounce_exports, require("lodash/debounce"));
-var debounce_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
+var debounce_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
 
 // esm-externals:@splunk/react-ui/Table
 var Table_exports = {};
 __export(Table_exports, {
   default: () => Table_default
 });
-var defaultImport37 = __toESM(require("@splunk/react-ui/Table"));
+var defaultImport39 = __toESM(require("@splunk/react-ui/Table"));
 __reExport(Table_exports, require("@splunk/react-ui/Table"));
-var Table_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
+var Table_default = "default" in defaultImport39 ? defaultImport39.default : defaultImport39;
 
 // esm-externals:@splunk/react-ui/Paginator
 var Paginator_exports = {};
 __export(Paginator_exports, {
   default: () => Paginator_default
 });
-var defaultImport38 = __toESM(require("@splunk/react-ui/Paginator"));
+var defaultImport40 = __toESM(require("@splunk/react-ui/Paginator"));
 __reExport(Paginator_exports, require("@splunk/react-ui/Paginator"));
-var Paginator_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
+var Paginator_default = "default" in defaultImport40 ? defaultImport40.default : defaultImport40;
 
 // esm-externals:@splunk/react-ui/Message
 var Message_exports2 = {};
 __export(Message_exports2, {
   default: () => Message_default2
 });
-var defaultImport39 = __toESM(require("@splunk/react-ui/Message"));
+var defaultImport41 = __toESM(require("@splunk/react-ui/Message"));
 __reExport(Message_exports2, require("@splunk/react-ui/Message"));
-var Message_default2 = "default" in defaultImport39 ? defaultImport39.default : defaultImport39;
+var Message_default2 = "default" in defaultImport41 ? defaultImport41.default : defaultImport41;
+
+// esm-externals:@splunk/react-ui/JSONTree
+var JSONTree_exports = {};
+__export(JSONTree_exports, {
+  default: () => JSONTree_default
+});
+var defaultImport42 = __toESM(require("@splunk/react-ui/JSONTree"));
+__reExport(JSONTree_exports, require("@splunk/react-ui/JSONTree"));
+var JSONTree_default = "default" in defaultImport42 ? defaultImport42.default : defaultImport42;
 
 // src/Table/hooks.tsx
 var isArray2 = (v) => Array.isArray(v);
@@ -3120,18 +3247,6 @@ var getTextOverflowType = (columnFormat, columnId, tableFormat, currentColumn, d
   }
   return (tableFormat == null ? void 0 : tableFormat.textOverflow) || defaultValue;
 };
-var getTextOverflow = (columnFormat, columnId, tableFormat, currentColumn) => {
-  const columnTextOverflow = getAttributeFromColumnFormat(
-    "textOverflow",
-    columnFormat,
-    columnId,
-    currentColumn
-  );
-  if (columnTextOverflow) {
-    return columnTextOverflow;
-  }
-  return tableFormat == null ? void 0 : tableFormat.textOverflow;
-};
 var generateHeader = (value, columnId, i, columnFormat, tableFormat, showInternalFields) => {
   const ret = {
     key: generateKey(value, String(i)),
@@ -3147,10 +3262,8 @@ var generateHeader = (value, columnId, i, columnFormat, tableFormat, showInterna
   const headerAlign = getColumnFormatHeaderAlign(columnFormat, columnId, value) || getTableFormatHeaderAlign(tableFormat) || "left";
   ret.align = headerAlign;
   ret.truncate = true;
-  const textOverflow = getTextOverflow(columnFormat, columnId, tableFormat, value);
-  if (textOverflow) {
-    ret.textOverflowType = textOverflow;
-  }
+  const explicitTextOverflow = getAttributeFromColumnFormat("textOverflow", columnFormat, columnId, value) || (tableFormat == null ? void 0 : tableFormat.textOverflow);
+  ret.textOverflowType = explicitTextOverflow || (/\s/.test(value) ? "break-word" : "ellipsis");
   return ret;
 };
 var getColumnFormatAlign = (columnFormat, currentColumn, currentRow) => {
@@ -3414,13 +3527,134 @@ var validValueSelector = (v1, v2, v3, defaultValue) => {
   }
   return defaultValue;
 };
+var computeBodyRows = (args) => {
+  const rows = [];
+  const {
+    table: t,
+    tableHeader: hdr,
+    columnFormat: cfmt,
+    tableFormat: tfmt,
+    columnIds: cids,
+    showInternalFields: showInternal,
+    longestColumnLength: len,
+    themeFunc: themeFn
+  } = args;
+  for (let r = 0; r < len; r += 1) {
+    const row = { key: `row-${r}`, index: r, cells: [] };
+    t.forEach((column, i) => {
+      const currentHeader = hdr.cells[i];
+      const value = validValueSelector(
+        getColumnFormatData(cfmt, currentHeader, r),
+        getTableFormatData(tfmt, i, r),
+        column[r],
+        ""
+      );
+      const rawValue = column[r];
+      const rowBackgroundColor = getColumnFormatRowBgColor(cfmt, currentHeader, r) || getTableFormatRowBgColor(tfmt, i, r) || getThemeRowBgColor(themeFn, r);
+      const rowColor = getColumnFormatRowColor(cfmt, currentHeader, r) || getTableFormatRowColor(tfmt, i, r) || getThemeRowColor(themeFn);
+      const align = getColumnFormatAlign(cfmt, currentHeader, r) || getTableFormatAlign(tfmt, i, r) || "left";
+      const cellType = getColumnFormatCellType(cfmt, currentHeader, r) || getTableFormatCellType(tfmt, i, r) || "TextCell";
+      const sparklineColor = getColumnFormatSparklineColor(cfmt, currentHeader, r) || getTableFormatSparklineColor(tfmt, i, r) || void 0;
+      const sparklineAreaColor = getColumnFormatSparklineAreaColor(cfmt, currentHeader, r) || getTableFormatSparklineAreaColor(tfmt, i, r) || void 0;
+      const sparklineType = getColumnFormatSparklineType(cfmt, currentHeader, r) || getTableFormatSparklineType(tfmt, i, r) || "area";
+      const sparklineNullValueDisplay = getColumnFormatSparklineNullValueDisplay(cfmt, currentHeader) || getTableFormatSparklineNullValueDisplay(tfmt) || "gaps";
+      const key = generateKey(value, `${r}-${i}`);
+      const textOverflowType = getTextOverflowType(cfmt, cids[i], tfmt, currentHeader.value);
+      const textOverflowStyle = getOverflowStyles({
+        textOverflow: textOverflowType
+      });
+      const showCell = !(!showInternal && currentHeader.value.startsWith("_") && currentHeader.value !== "_time");
+      row.cells.push({
+        key,
+        value,
+        rawValue,
+        align,
+        cellType,
+        rowIndex: r,
+        columnIndex: i,
+        sparklineColor,
+        sparklineAreaColor,
+        sparklineType,
+        sparklineNullValueDisplay,
+        header: currentHeader.value,
+        style: __spreadValues({
+          backgroundColor: rowBackgroundColor,
+          color: rowColor
+        }, textOverflowStyle),
+        showCell
+      });
+    });
+    rows.push(row);
+  }
+  return rows;
+};
+var prependRowNumberColumn = (table, headers, columnIds, tableFormat, longestColumnLength, paginationOffset, count) => {
+  const correctedPaginationOffset = Math.max(0, (paginationOffset - 1) * count);
+  const newHeaders = ["#", ...headers];
+  const newColumnIds = ["#", ...columnIds];
+  const newTable = [
+    Array.from({ length: longestColumnLength }, (v, i) => correctedPaginationOffset + i + 1),
+    ...table
+  ];
+  const newTableFormat = __spreadValues({}, tableFormat);
+  if (isArray2(newTableFormat.align)) {
+    newTableFormat.align = [
+      new Array(longestColumnLength).fill("left"),
+      ...newTableFormat.align
+    ];
+  }
+  if (isArray2(newTableFormat.cellTypes)) {
+    newTableFormat.cellTypes = [
+      new Array(longestColumnLength).fill("TextCell"),
+      ...newTableFormat.cellTypes
+    ];
+  }
+  if (isArray2(newTableFormat.data)) {
+    newTableFormat.data = [
+      Array.from({ length: longestColumnLength }, (v, i) => `${i + 1}`),
+      ...newTableFormat.data
+    ];
+  }
+  if (isArray2(newTableFormat.rowBackgroundColors)) {
+    if (newTableFormat.rowBackgroundColors.length > 0 && isArray2(newTableFormat.rowBackgroundColors[0])) {
+      newTableFormat.rowBackgroundColors = [
+        new Array(longestColumnLength),
+        ...newTableFormat.rowBackgroundColors
+      ];
+    }
+  }
+  if (isArray2(newTableFormat.rowColors)) {
+    if (newTableFormat.rowColors.length > 0 && isArray2(newTableFormat.rowColors[0])) {
+      newTableFormat.rowColors = [
+        new Array(longestColumnLength),
+        ...newTableFormat.rowColors
+      ];
+    }
+  }
+  if (isArray2(newTableFormat.sparklineColors)) {
+    newTableFormat.sparklineColors = [new Array(longestColumnLength), ...newTableFormat.sparklineColors];
+  }
+  if (isArray2(newTableFormat.sparklineAreaColors)) {
+    newTableFormat.sparklineAreaColors = [
+      new Array(longestColumnLength),
+      ...newTableFormat.sparklineAreaColors
+    ];
+  }
+  if (isArray2(newTableFormat.sparklineTypes)) {
+    newTableFormat.sparklineTypes = [
+      new Array(longestColumnLength).fill("area"),
+      ...newTableFormat.sparklineTypes
+    ];
+  }
+  return { table: newTable, headers: newHeaders, columnIds: newColumnIds, tableFormat: newTableFormat };
+};
 var useTable = (tableArgs = {}) => {
   let { table = [], headers = [], columnIds = [] } = tableArgs;
   const {
     headerVisibility = "inline",
     showRowNumbers = false,
     showInternalFields = true,
-    tableFormat = {},
+    tableFormat: tableFormatIn = {},
     columnFormat = {},
     paginationOffset = 0,
     count = 0,
@@ -3428,64 +3662,18 @@ var useTable = (tableArgs = {}) => {
     showFooterPercentages = false,
     themeFunc
   } = tableArgs;
+  let tableFormat = tableFormatIn;
   const longestColumnLength = Math.max(...table.map((column) => column.length));
   if (showRowNumbers) {
-    const correctedPaginationOffset = Math.max(0, (paginationOffset - 1) * count);
-    headers = ["#", ...headers];
-    columnIds = ["#", ...columnIds];
-    table = [
-      Array.from({ length: longestColumnLength }, (v, i) => correctedPaginationOffset + i + 1),
-      ...table
-    ];
-    if (isArray2(tableFormat.align)) {
-      tableFormat.align = [
-        new Array(longestColumnLength).fill("left"),
-        ...tableFormat.align
-      ];
-    }
-    if (isArray2(tableFormat.cellTypes)) {
-      tableFormat.cellTypes = [
-        new Array(longestColumnLength).fill("TextCell"),
-        ...tableFormat.cellTypes
-      ];
-    }
-    if (isArray2(tableFormat.data)) {
-      tableFormat.data = [
-        Array.from({ length: longestColumnLength }, (v, i) => `${i + 1}`),
-        ...tableFormat.data
-      ];
-    }
-    if (isArray2(tableFormat.rowBackgroundColors)) {
-      if (tableFormat.rowBackgroundColors.length > 0 && isArray2(tableFormat.rowBackgroundColors[0])) {
-        tableFormat.rowBackgroundColors = [
-          new Array(longestColumnLength),
-          ...tableFormat.rowBackgroundColors
-        ];
-      }
-    }
-    if (isArray2(tableFormat.rowColors)) {
-      if (tableFormat.rowColors.length > 0 && isArray2(tableFormat.rowColors[0])) {
-        tableFormat.rowColors = [
-          new Array(longestColumnLength),
-          ...tableFormat.rowColors
-        ];
-      }
-    }
-    if (isArray2(tableFormat.sparklineColors)) {
-      tableFormat.sparklineColors = [new Array(longestColumnLength), ...tableFormat.sparklineColors];
-    }
-    if (isArray2(tableFormat.sparklineAreaColors)) {
-      tableFormat.sparklineAreaColors = [
-        new Array(longestColumnLength),
-        ...tableFormat.sparklineAreaColors
-      ];
-    }
-    if (isArray2(tableFormat.sparklineTypes)) {
-      tableFormat.sparklineTypes = [
-        new Array(longestColumnLength).fill("area"),
-        ...tableFormat.sparklineTypes
-      ];
-    }
+    ({ table, headers, columnIds, tableFormat } = prependRowNumberColumn(
+      table,
+      headers,
+      columnIds,
+      tableFormat,
+      longestColumnLength,
+      paginationOffset,
+      count
+    ));
   }
   const tableHeader = {
     visibility: visualization_schemas_exports.validHeaderVisibilities.indexOf(headerVisibility) >= 0 ? headerVisibility : "inline",
@@ -3511,67 +3699,6 @@ var useTable = (tableArgs = {}) => {
   const tableFooter = {
     rows: []
   };
-  const computeBodyRows = (args) => {
-    const rows = [];
-    const {
-      table: t,
-      tableHeader: hdr,
-      columnFormat: cfmt,
-      tableFormat: tfmt,
-      columnIds: cids,
-      showInternalFields: showInternal,
-      longestColumnLength: len,
-      themeFunc: themeFn
-    } = args;
-    for (let r = 0; r < len; r += 1) {
-      const row = { key: `row-${r}`, index: r, cells: [] };
-      t.forEach((column, i) => {
-        const currentHeader = hdr.cells[i];
-        const value = validValueSelector(
-          getColumnFormatData(cfmt, currentHeader, r),
-          getTableFormatData(tfmt, i, r),
-          column[r],
-          ""
-        );
-        const rawValue = column[r];
-        const rowBackgroundColor = getColumnFormatRowBgColor(cfmt, currentHeader, r) || getTableFormatRowBgColor(tfmt, i, r) || getThemeRowBgColor(themeFn, r);
-        const rowColor = getColumnFormatRowColor(cfmt, currentHeader, r) || getTableFormatRowColor(tfmt, i, r) || getThemeRowColor(themeFn);
-        const align = getColumnFormatAlign(cfmt, currentHeader, r) || getTableFormatAlign(tfmt, i, r) || "left";
-        const cellType = getColumnFormatCellType(cfmt, currentHeader, r) || getTableFormatCellType(tfmt, i, r) || "TextCell";
-        const sparklineColor = getColumnFormatSparklineColor(cfmt, currentHeader, r) || getTableFormatSparklineColor(tfmt, i, r) || void 0;
-        const sparklineAreaColor = getColumnFormatSparklineAreaColor(cfmt, currentHeader, r) || getTableFormatSparklineAreaColor(tfmt, i, r) || void 0;
-        const sparklineType = getColumnFormatSparklineType(cfmt, currentHeader, r) || getTableFormatSparklineType(tfmt, i, r) || "area";
-        const sparklineNullValueDisplay = getColumnFormatSparklineNullValueDisplay(cfmt, currentHeader) || getTableFormatSparklineNullValueDisplay(tfmt) || "gaps";
-        const key = generateKey(value, `${r}-${i}`);
-        const textOverflowType = getTextOverflowType(cfmt, cids[i], tfmt, currentHeader.value);
-        const textOverflowStyle = getOverflowStyles({
-          textOverflow: textOverflowType
-        });
-        const showCell = !(!showInternal && currentHeader.value.charAt(0) === "_" && currentHeader.value !== "_time");
-        row.cells.push({
-          key,
-          value,
-          rawValue,
-          align,
-          cellType,
-          rowIndex: r,
-          columnIndex: i,
-          sparklineColor,
-          sparklineAreaColor,
-          sparklineType,
-          sparklineNullValueDisplay,
-          header: currentHeader.value,
-          style: __spreadValues({
-            backgroundColor: rowBackgroundColor,
-            color: rowColor
-          }, textOverflowStyle),
-          showCell
-        });
-      });
-      rows.push(row);
-    }
-    return rows;
-  };
   tableBody.rows = computeBodyRows({
     table,
     tableHeader,
@@ -3615,6 +3742,7 @@ var useTable = (tableArgs = {}) => {
         key: `${key}-${colIdx}`,
         value: displayValue,
         align: derivedAlign,
+        showCell: colMeta.showCell,
         style: __spreadValues(__spreadValues({
           backgroundColor: ((_f = tableHeader.style) == null ? void 0 : _f.backgroundColor) || ((_g = tableHeader.style) == null ? void 0 : _g.color),
           color: (_h = tableHeader.style) == null ? void 0 : _h.color
@@ -3638,6 +3766,38 @@ var useTable = (tableArgs = {}) => {
   };
 };
 
+// esm-externals:@splunk/react-ui/Link
+var Link_exports = {};
+__export(Link_exports, {
+  default: () => Link_default
+});
+var defaultImport43 = __toESM(require("@splunk/react-ui/Link"));
+__reExport(Link_exports, require("@splunk/react-ui/Link"));
+var Link_default = "default" in defaultImport43 ? defaultImport43.default : defaultImport43;
+
+// esm-externals:@splunk/themes
+var themes_exports = {};
+__export(themes_exports, {
+  default: () => themes_default
+});
+var defaultImport44 = __toESM(require("@splunk/themes"));
+__reExport(themes_exports, require("@splunk/themes"));
+var themes_default = "default" in defaultImport44 ? defaultImport44.default : defaultImport44;
+
+// src/common/StyledSkipLink.tsx
+var StyledSkipLink = styled_components_default(Link_default)`
+    ${themes_exports.mixins.skipLink()};
+    &:not([disabled], [aria-disabled='true']) {
+        background-color: ${themes_exports.variables.backgroundColorSection};
+    }
+    &&& {
+        text-decoration: none;
+    }
+    &:focus {
+        z-index: ${themes_exports.variables.zindexLayer};
+    }
+`;
+
 // src/Table/cells/SwitchTableCell.tsx
 var SwitchTableCell = ({ type, children }) => children.filter((child) => child.type.displayName === type);
 
@@ -3685,9 +3845,20 @@ var ArrayCell = ({ cell, useMouseOverEffect }) => {
     const _a = style, { whiteSpace, overflow, textOverflow, wordBreak, wordWrap, overflowWrap } = _a, rest = __objRest(_a, ["whiteSpace", "overflow", "textOverflow", "wordBreak", "wordWrap", "overflowWrap"]);
     return {
       cellStyle: rest,
-      itemStyle: { whiteSpace, overflow, textOverflow, wordBreak, wordWrap, overflowWrap }
+      // flex-direction:column (set on StyledTableCell) makes justify-content control the
+      // vertical axis, so the Cell's `align` prop no longer drives horizontal alignment.
+      // Explicitly mirror cell.align as textAlign on each item to restore the behaviour.
+      itemStyle: {
+        whiteSpace,
+        overflow,
+        textOverflow,
+        wordBreak,
+        wordWrap,
+        overflowWrap,
+        textAlign: cell.align
+      }
     };
-  }, [cell.style]);
+  }, [cell.style, cell.align]);
   return /* @__PURE__ */ react_exports.createElement(
     StyledTableCell,
     {
@@ -3719,11 +3890,11 @@ var Popover_exports = {};
 __export(Popover_exports, {
   default: () => Popover_default
 });
-var defaultImport40 = __toESM(require("@splunk/react-ui/Popover"));
+var defaultImport45 = __toESM(require("@splunk/react-ui/Popover"));
 __reExport(Popover_exports, require("@splunk/react-ui/Popover"));
-var Popover_default = "default" in defaultImport40 ? defaultImport40.default : defaultImport40;
+var Popover_default = "default" in defaultImport45 ? defaultImport45.default : defaultImport45;
 
-// src/SparkLine/SparkLine.jsx
+// src/SparkLine/SparkLine.tsx
 var StyledSvg = styled_components_default.svg`
     /* For fixing IE11 shows overflow part line issue */
     overflow: hidden;
@@ -3735,233 +3906,262 @@ var StyledTooltip = styled_components_default.div`
     min-width: 20px;
 `;
 var preventDefault = (e) => e.preventDefault();
-var _SparkLine = class _SparkLine extends react_exports.Component {
-  constructor(props, ...rest) {
-    super(props, ...rest);
-    __publicField(this, "handleCursorMount", (el) => {
-      this.setState({
-        anchor: el
-      });
-    });
-    this.state = {
-      anchor: null,
-      activeIndex: 0,
-      hoveredIndex: null,
-      componentIsFocused: false
-    };
-    this.titleId = (0, id_exports.createDOMID)("sparkline-title");
-    this.pointRefs = [];
-    this.containerRef = react_default.createRef();
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleMouseOver = this.handleMouseOver.bind(this);
-    this.handleMouseLeave = this.handleMouseLeave.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-  }
-  handleFocus(event) {
-    const { target } = event;
-    const { pointIndex: pointIndexStr } = target.dataset || {};
-    const { activeIndex, componentIsFocused, hoveredIndex } = this.state;
-    if (pointIndexStr !== void 0) {
-      const pointIndex = Number.parseInt(pointIndexStr, 10);
-      if (activeIndex !== pointIndex || !componentIsFocused || hoveredIndex !== null) {
-        this.setState({
-          activeIndex: pointIndex,
-          hoveredIndex: null,
-          componentIsFocused: true
-        });
+var PROP_KEYS = [
+  "acceptNull",
+  "data",
+  "elementRef",
+  "endDotCount",
+  "endDotFillColor",
+  "endDotRadius",
+  "endDotStroke",
+  "endDotStrokeWidth",
+  "fillColor",
+  "fillOpacity",
+  "cursorStroke",
+  "cursorStrokeWidth",
+  "cursorStrokeLinecap",
+  "cursorStrokeDasharray",
+  "height",
+  "isArea",
+  "lineColor",
+  "lineLength",
+  "lineStrokeWidth",
+  "showEndDot",
+  "showTooltip",
+  "yMax",
+  "yMin",
+  "width",
+  "title"
+];
+var SparkLineInner = (_a) => {
+  var _b = _a, {
+    acceptNull = false,
+    data = [],
+    elementRef,
+    endDotCount = 0,
+    endDotFillColor = "white",
+    endDotRadius = 0,
+    endDotStroke = "black",
+    endDotStrokeWidth = 0,
+    fillColor = "#65a637",
+    fillOpacity = ".1",
+    cursorStroke = "#5184AF",
+    cursorStrokeWidth = 3,
+    cursorStrokeLinecap = "square",
+    cursorStrokeDasharray = "1, 5",
+    height,
+    isArea = false,
+    lineColor = "#65a637",
+    lineLength,
+    lineStrokeWidth = 1,
+    showEndDot = false,
+    showTooltip = true,
+    yMax,
+    yMin,
+    width,
+    title
+  } = _b, restProps = __objRest(_b, [
+    "acceptNull",
+    "data",
+    "elementRef",
+    "endDotCount",
+    "endDotFillColor",
+    "endDotRadius",
+    "endDotStroke",
+    "endDotStrokeWidth",
+    "fillColor",
+    "fillOpacity",
+    "cursorStroke",
+    "cursorStrokeWidth",
+    "cursorStrokeLinecap",
+    "cursorStrokeDasharray",
+    "height",
+    "isArea",
+    "lineColor",
+    "lineLength",
+    "lineStrokeWidth",
+    "showEndDot",
+    "showTooltip",
+    "yMax",
+    "yMin",
+    "width",
+    "title"
+  ]);
+  const [anchor, setAnchor] = (0, react_exports.useState)(null);
+  const [activeIndex, setActiveIndex] = (0, react_exports.useState)(0);
+  const [hoveredIndex, setHoveredIndex] = (0, react_exports.useState)(null);
+  const [componentIsFocused, setComponentIsFocused] = (0, react_exports.useState)(false);
+  const titleId = (0, react_exports.useMemo)(() => (0, id_exports.createDOMID)("sparkline-title"), []);
+  const pointRefs = (0, react_exports.useRef)([]);
+  const containerRef = (0, react_exports.useRef)(null);
+  const fillNull = (0, react_exports.useCallback)(() => data.map((value) => value != null ? value : 0), [data]);
+  const getMax = (0, react_exports.useCallback)(() => {
+    const dataMax = () => acceptNull ? (0, lodash_exports.max)(fillNull()) : (0, lodash_exports.max)(data);
+    return yMax != null ? yMax : dataMax();
+  }, [acceptNull, data, fillNull, yMax]);
+  const getMin = (0, react_exports.useCallback)(() => {
+    const dataMin = () => acceptNull ? (0, lodash_exports.min)(fillNull()) : (0, lodash_exports.min)(data);
+    return yMin != null ? yMin : dataMin();
+  }, [acceptNull, data, fillNull, yMin]);
+  const getXUnit = (0, react_exports.useCallback)(
+    (xMargin2) => {
+      const xUnit = (width - xMargin2 * 2) / (data.length > 1 ? data.length - 1 : 1);
+      return Math.max(0, xUnit);
+    },
+    [data.length, width]
+  );
+  const getYUnit = (0, react_exports.useCallback)(
+    (yMargin2) => {
+      const maxValue = getMax();
+      const minValue = getMin();
+      const yUnit = (height - yMargin2 * 2) / (maxValue - minValue || 2);
+      return Math.max(0, yUnit);
+    },
+    [getMax, getMin, height]
+  );
+  const getSegmentSets = (0, react_exports.useCallback)(
+    (segmentData, points2) => {
+      const lines = [];
+      const isolatedPoints = [];
+      let currentLine = [];
+      for (const [idx, p] of segmentData.entries()) {
+        if (!acceptNull && (0, lodash_exports.isNull)(p)) {
+          if (currentLine.length > 1) {
+            lines.push(currentLine);
+          } else if (currentLine.length === 1) {
+            isolatedPoints.push(currentLine[0]);
+          }
+          currentLine = [];
+        } else {
+          currentLine.push(points2[idx]);
+        }
       }
-    } else if (this.pointRefs.length > 0) {
-      const indexToFocus = activeIndex ? Math.min(this.pointRefs.length - 1, activeIndex) : 0;
-      this.pointRefs[indexToFocus].focus();
-    }
-  }
-  handleBlur(event) {
-    if (this.containerRef.current && !this.containerRef.current.contains(event.relatedTarget)) {
-      this.setState({ componentIsFocused: false });
-    }
-  }
-  handleKeyDown(event) {
-    const { data } = this.props;
-    const { activeIndex } = this.state;
-    const numPoints = data.length;
-    if (numPoints === 0) {
-      return;
-    }
-    const allowedKeys = ["ArrowLeft", "ArrowRight", "Home", "End"];
-    if (!allowedKeys.includes(event.key)) {
-      return;
+      if (currentLine.length > 1) {
+        lines.push(currentLine);
+      } else if (currentLine.length === 1) {
+        isolatedPoints.push(currentLine[0]);
+      }
+      return { lines, isolatedPoints };
+    },
+    [acceptNull]
+  );
+  const dataToPoints = (0, react_exports.useCallback)(
+    (xMargin2, yMargin2) => {
+      const xUnit = getXUnit(xMargin2);
+      const yUnit = getYUnit(yMargin2);
+      const maxValue = getMax();
+      const minValue = getMin();
+      return data.map((val, idx) => ({
+        x: idx * xUnit + xMargin2,
+        y: maxValue === minValue ? yUnit + yMargin2 : (maxValue - val) * yUnit + yMargin2
+      })).map((p) => [p.x, p.y]);
+    },
+    [data, getMax, getMin, getXUnit, getYUnit]
+  );
+  const handleFocus = (0, react_exports.useCallback)(
+    (event) => {
+      const { target } = event;
+      const { pointIndex: pointIndexStr } = target.dataset || {};
+      if (pointIndexStr !== void 0) {
+        const pointIndex = Number.parseInt(pointIndexStr, 10);
+        if (activeIndex !== pointIndex || !componentIsFocused || hoveredIndex !== null) {
+          setActiveIndex(pointIndex);
+          setHoveredIndex(null);
+          setComponentIsFocused(true);
+        }
+      } else if (pointRefs.current.length > 0) {
+        const indexToFocus = activeIndex ? Math.min(pointRefs.current.length - 1, activeIndex) : 0;
+        pointRefs.current[indexToFocus].focus();
+      }
+    },
+    [activeIndex, componentIsFocused, hoveredIndex]
+  );
+  const handleBlur = (0, react_exports.useCallback)((event) => {
+    if (containerRef.current && !containerRef.current.contains(event.relatedTarget)) {
+      setComponentIsFocused(false);
     }
-    let newIndex;
-    switch (event.key) {
-      case "Home":
+  }, []);
+  const handleKeyDown = (0, react_exports.useCallback)(
+    (event) => {
+      const numPoints = data.length;
+      const allowedKeys = ["ArrowLeft", "ArrowRight", "Home", "End"];
+      if (!allowedKeys.includes(event.key)) {
+        return;
+      }
+      let newIndex;
+      if (event.key === "Home") {
         newIndex = 0;
-        break;
-      case "End":
+      } else if (event.key === "End") {
         newIndex = numPoints - 1;
-        break;
-      case "ArrowLeft":
+      } else if (event.key === "ArrowLeft") {
         newIndex = Math.max(0, activeIndex - 1);
-        break;
-      case "ArrowRight":
+      } else {
         newIndex = Math.min(numPoints - 1, activeIndex + 1);
-        break;
-      default:
-        return;
-    }
-    if (newIndex !== activeIndex) {
-      event.preventDefault();
-      if (this.pointRefs[newIndex]) {
-        this.pointRefs[newIndex].focus();
       }
-    }
-  }
-  handleMouseOver(event) {
-    const pointIndexStr = event.target.dataset && event.target.dataset.pointIndex;
-    if (pointIndexStr !== void 0) {
-      const pointIndex = Number.parseInt(pointIndexStr, 10);
-      if (this.state.hoveredIndex !== pointIndex) {
-        this.setState({ hoveredIndex: pointIndex });
+      if (newIndex !== activeIndex) {
+        event.preventDefault();
+        if (pointRefs.current[newIndex]) {
+          pointRefs.current[newIndex].focus();
+        }
       }
-    }
-  }
-  handleMouseLeave() {
-    if (this.state.hoveredIndex !== null) {
-      this.setState({ hoveredIndex: null });
-    }
-  }
-  getMax() {
-    const { data, acceptNull, yMax } = this.props;
-    const dataMax = () => acceptNull ? (0, lodash_exports.max)(this.fillNull()) : (0, lodash_exports.max)(data);
-    return yMax === void 0 ? dataMax() : yMax;
-  }
-  getMin() {
-    const { data, acceptNull, yMin } = this.props;
-    const dataMin = () => acceptNull ? (0, lodash_exports.min)(this.fillNull()) : (0, lodash_exports.min)(data);
-    return yMin === void 0 ? dataMin() : yMin;
-  }
-  /**
-   * Gets unit value of x axis.
-   * @param {Number} xMargin - margin of x axis.
-   * @return {Number} unit value of x axis.
-   * @private
-   */
-  getXUnit(xMargin) {
-    const { data, width } = this.props;
-    const xUnit = (width - xMargin * 2) / (data.length > 1 ? data.length - 1 : 1);
-    return Math.max(0, xUnit);
-  }
-  /**
-   * Gets unit value of y axis.
-   * @param {String} yMargin - margin of y axis.
-   * @return {Number} unit value of y axis.
-   * @private
-   */
-  getYUnit(yMargin) {
-    const { height } = this.props;
-    const maxValue = this.getMax();
-    const minValue = this.getMin();
-    const yUnit = (height - yMargin * 2) / (maxValue - minValue || 2);
-    return Math.max(0, yUnit);
-  }
-  /**
-   * Get a list of arrays of points for drawing lines, based on acceptNull property
-   * @method getSegmentSets
-   * @param {Array} data
-   * @param {Array} points
-   * @returns {Object} Object containing lines (arrays of points for polylines) and isolatedPoints (single points surrounded by nulls)
-   */
-  getSegmentSets(data, points) {
-    const { acceptNull } = this.props;
-    const lines = [];
-    const isolatedPoints = [];
-    let currentLine = [];
-    for (const [idx, p] of data.entries()) {
-      if (!acceptNull && (0, lodash_exports.isNull)(p)) {
-        if (currentLine.length > 1) {
-          lines.push(currentLine);
-        } else if (currentLine.length === 1) {
-          isolatedPoints.push(currentLine[0]);
+    },
+    [activeIndex, data.length]
+  );
+  const handleMouseOver = (0, react_exports.useCallback)(
+    (event) => {
+      var _a2;
+      const pointIndexStr = (_a2 = event.target.dataset) == null ? void 0 : _a2.pointIndex;
+      if (pointIndexStr !== void 0) {
+        const pointIndex = Number.parseInt(pointIndexStr, 10);
+        if (hoveredIndex !== pointIndex) {
+          setHoveredIndex(pointIndex);
         }
-        currentLine = [];
-      } else {
-        currentLine.push(points[idx]);
       }
+    },
+    [hoveredIndex]
+  );
+  const handleMouseLeave = (0, react_exports.useCallback)(() => {
+    if (hoveredIndex !== null) {
+      setHoveredIndex(null);
     }
-    if (currentLine.length > 1) {
-      lines.push(currentLine);
-    } else if (currentLine.length === 1) {
-      isolatedPoints.push(currentLine[0]);
-    }
-    return { lines, isolatedPoints };
-  }
-  /**
-   * Utility for fill null value with number 0.
-   * @private
-   */
-  fillNull() {
-    const { data } = this.props;
-    return data.map((value) => value === null ? 0 : value);
-  }
-  /**
-   * Converts data to points in svg
-   * @param {Number} xMargin - margin of x axis.
-   * @param {Number} yMargin - margin of x axis.
-   * @return {Array} points coordination.
-   * @private
-   */
-  dataToPoints(xMargin, yMargin) {
-    const { data } = this.props;
-    const xUnit = this.getXUnit(xMargin);
-    const yUnit = this.getYUnit(yMargin);
-    const maxValue = this.getMax();
-    const minValue = this.getMin();
-    return data.map((val, idx) => ({
-      x: idx * xUnit + xMargin,
-      y: maxValue === minValue ? yUnit + yMargin : (maxValue - val) * yUnit + yMargin
-    })).map((p) => [p.x, p.y]);
-  }
-  /**
-   * Renders rect area for each datapoint for interactions and screen reader support
-   * @param {Array} points - array of points coordination.
-   * @param {Number} xMargin - margin of x axis.
-   * @return {Array} array of svg rect objects
-   * @private
-   */
-  renderRect(points, xMargin) {
-    const { data, height, showTooltip } = this.props;
-    const xUnit = this.getXUnit(xMargin);
-    return points.map((p, i) => (
-      /* eslint-disable react/no-array-index-key */
-      /* @__PURE__ */ react_default.createElement(
-        "rect",
-        {
-          key: `${i}_${p[0]}`,
-          role: "graphics-symbol",
-          "aria-label": `Value: ${data[i] === null ? "N/A" : data[i]}, point ${i + 1} of ${data.length}`,
-          "data-test": `rect-${i}`,
-          "data-point-index": i,
-          tabIndex: showTooltip && this.state.activeIndex === i ? 0 : -1,
-          ref: (el) => {
-            this.pointRefs[i] = el;
-          },
-          x: Math.max(0, p[0] - xUnit / 2),
-          y: 0,
-          width: i === 0 && data.length !== 1 ? xUnit / 2 : xUnit,
-          height,
-          style: { fillOpacity: 0 },
-          onMouseDown: preventDefault
-        }
-      )
-    ));
-  }
-  // Renders area chart
-  renderArea(points) {
-    const { data, fillColor, fillOpacity, height, isArea } = this.props;
-    if (!isArea || points.length === 0) {
+  }, [hoveredIndex]);
+  const handleCursorMount = (0, react_exports.useCallback)((el) => {
+    setAnchor(el);
+  }, []);
+  const renderRect = (points2, xMargin2) => {
+    const xUnit = getXUnit(xMargin2);
+    return points2.map((p, i) => {
+      var _a2;
+      return (
+        /* eslint-disable react/no-array-index-key */
+        /* @__PURE__ */ react_default.createElement(
+          "rect",
+          {
+            key: `${i}_${p[0]}`,
+            role: "graphics-symbol",
+            "aria-label": `Value: ${(_a2 = data[i]) != null ? _a2 : "N/A"}, point ${i + 1} of ${data.length}`,
+            "data-test": `rect-${i}`,
+            "data-point-index": i,
+            tabIndex: showTooltip && activeIndex === i ? 0 : -1,
+            ref: (el) => {
+              pointRefs.current[i] = el;
+            },
+            x: Math.max(0, p[0] - xUnit / 2),
+            y: 0,
+            width: i === 0 && data.length !== 1 ? xUnit / 2 : xUnit,
+            height,
+            style: { fillOpacity: 0 },
+            onMouseDown: preventDefault
+          }
+        )
+      );
+    });
+  };
+  const renderArea = (points2) => {
+    if (!isArea || points2.length === 0) {
       return null;
     }
-    const { lines } = this.getSegmentSets(data, points);
+    const { lines } = getSegmentSets(data, points2);
     const segments = lines.map(
       (s) => s.concat([
         [s.at(-1)[0], height],
@@ -3985,80 +4185,56 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
         }
       }
     )));
-  }
-  renderCursor(currentPointX, shouldRender) {
-    const { cursorStroke, cursorStrokeWidth, cursorStrokeLinecap, cursorStrokeDasharray, height } = this.props;
-    return shouldRender && /* @__PURE__ */ react_default.createElement(
-      "line",
-      {
-        "data-test": "cursor",
-        ref: this.handleCursorMount,
-        x1: currentPointX,
-        y1: 0,
-        x2: currentPointX,
-        y2: height,
-        style: {
-          stroke: cursorStroke,
-          strokeWidth: cursorStrokeWidth,
-          strokeLinecap: cursorStrokeLinecap,
-          strokeDasharray: cursorStrokeDasharray
-        }
+  };
+  const renderCursor = (currentPointX2, shouldRender) => shouldRender && /* @__PURE__ */ react_default.createElement(
+    "line",
+    {
+      "data-test": "cursor",
+      ref: handleCursorMount,
+      x1: currentPointX2,
+      y1: 0,
+      x2: currentPointX2,
+      y2: height,
+      style: {
+        stroke: cursorStroke,
+        strokeWidth: cursorStrokeWidth,
+        strokeLinecap: cursorStrokeLinecap,
+        strokeDasharray: cursorStrokeDasharray
       }
-    );
-  }
-  renderTooltip(tooltipValue, isOpen) {
-    const { anchor } = this.state;
-    const displayValue = tooltipValue === null ? "-" : tooltipValue;
+    }
+  );
+  const renderTooltip = (tooltipValue2, isOpen) => {
+    const displayValue = tooltipValue2 === null ? "-" : tooltipValue2;
     return /* @__PURE__ */ react_default.createElement(
       Popover_default,
       {
         "data-test": "tooltip",
         open: isOpen,
         anchor,
-        "data-test-value": tooltipValue,
+        "data-test-value": tooltipValue2,
         appearance: "inverted",
         defaultPlacement: "above",
         animation: false
       },
       /* @__PURE__ */ react_default.createElement(StyledTooltip, null, displayValue)
     );
-  }
-  /**
-   * Renders one or more svg circles to highlight values on the sparkline
-   * @method renderEndDots
-   * @param {Array[Array[Number]]} points // x,y coordinates of values
-   * @param {Number} dotsToShow           // number of end dots to display
-   * @param {Number} xMargin              // used when calculating the dot radius
-   * @returns {Object} React representation of SVG group
-   * @private
-   */
-  renderEndDots(points, dotsToShow, xMargin) {
-    const { endDotFillColor, endDotRadius, endDotStroke, endDotStrokeWidth } = this.props;
-    return /* @__PURE__ */ react_default.createElement("g", null, points.slice(-dotsToShow).map((point) => /* @__PURE__ */ react_default.createElement(
-      "circle",
-      {
-        key: `end-dot${point[0]}${point[1]}`,
-        "data-test": "end-dot",
-        cx: point[0],
-        cy: point[1],
-        r: endDotRadius === 0 ? xMargin : endDotRadius,
-        style: {
-          fill: endDotFillColor,
-          stroke: endDotStroke,
-          strokeWidth: endDotStrokeWidth
-        }
+  };
+  const renderEndDots = (points2, dotsToShow2, xMargin2) => /* @__PURE__ */ react_default.createElement("g", null, points2.slice(-dotsToShow2).map((point) => /* @__PURE__ */ react_default.createElement(
+    "circle",
+    {
+      key: `end-dot${point[0]}${point[1]}`,
+      "data-test": "end-dot",
+      cx: point[0],
+      cy: point[1],
+      r: endDotRadius === 0 ? xMargin2 : endDotRadius,
+      style: {
+        fill: endDotFillColor,
+        stroke: endDotStroke,
+        strokeWidth: endDotStrokeWidth
       }
-    )));
-  }
-  /**
-   * Renders circles for isolated points (single data points surrounded by nulls)
-   * These would otherwise be invisible since a line requires at least 2 points
-   * @method renderIsolatedPoints
-   * @param {Array} isolatedPoints - Array of [x, y] coordinates for isolated points
-   * @returns {Object} SVG Group of circles
-   */
-  renderIsolatedPoints(isolatedPoints) {
-    const { lineColor, lineStrokeWidth } = this.props;
+    }
+  )));
+  const renderIsolatedPoints = (isolatedPoints) => {
     if (!isolatedPoints || isolatedPoints.length === 0) {
       return null;
     }
@@ -4076,20 +4252,10 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
         }
       }
     )));
-  }
-  /**
-   * Renders the line(s) above the area graph
-   * @method renderPolyline
-   * @param {Array} points
-   * @returns {Object} SVG Group of polylines and isolated points
-   */
-  renderPolyline(points) {
-    const { data, lineColor, lineLength, lineStrokeWidth } = this.props;
-    const linePoints = (0, lodash_exports.isFinite)(lineLength) && lineLength > 0 ? lineLength : points.length;
-    const { lines, isolatedPoints } = this.getSegmentSets(
-      data.slice(-linePoints),
-      points.slice(-linePoints)
-    );
+  };
+  const renderPolyline = (points2) => {
+    const linePoints = (0, lodash_exports.isFinite)(lineLength) && lineLength > 0 ? lineLength : points2.length;
+    const { lines, isolatedPoints } = getSegmentSets(data.slice(-linePoints), points2.slice(-linePoints));
     return /* @__PURE__ */ react_default.createElement("g", { "data-test": "sparkline" }, lines.map((lineData) => /* @__PURE__ */ react_default.createElement(
       "polyline",
       {
@@ -4104,10 +4270,18 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
         },
         points: lineData.join(" ")
       }
-    )), this.renderIsolatedPoints(isolatedPoints));
-  }
-  getInteractionState({ data, points, showTooltip, activeIndex, hoveredIndex, componentIsFocused }) {
-    if (!showTooltip) {
+    )), renderIsolatedPoints(isolatedPoints));
+  };
+  const getInteractionState = ({
+    interactionData,
+    points: interactionPoints,
+    interactionShowTooltip,
+    interactionActiveIndex,
+    interactionHoveredIndex,
+    interactionComponentIsFocused
+  }) => {
+    var _a2;
+    if (!interactionShowTooltip) {
       return {
         currentPointX: null,
         tooltipValue: null,
@@ -4115,200 +4289,94 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
         interactiveProps: {}
       };
     }
-    const interactiveProps = {
-      onKeyDown: this.handleKeyDown,
-      onMouseOver: this.handleMouseOver,
-      onMouseLeave: this.handleMouseLeave,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur
+    const interactiveProps2 = {
+      onKeyDown: handleKeyDown,
+      onMouseOver: handleMouseOver,
+      onMouseLeave: handleMouseLeave,
+      onFocus: handleFocus,
+      onBlur: handleBlur
     };
-    const isHovered = hoveredIndex !== null;
-    const shouldDisplayInteractiveElements = (isHovered || componentIsFocused) && data.length > 0;
+    const isHovered = interactionHoveredIndex !== null;
+    const shouldDisplayInteractiveElements = (isHovered || interactionComponentIsFocused) && interactionData.length > 0;
     if (!shouldDisplayInteractiveElements) {
       return {
         currentPointX: null,
         tooltipValue: null,
         showCursorAndTooltip: false,
-        interactiveProps
+        interactiveProps: interactiveProps2
       };
     }
-    const displayIndex = isHovered ? hoveredIndex : activeIndex;
+    const displayIndex = isHovered ? interactionHoveredIndex : interactionActiveIndex;
     const isValidIndex = displayIndex !== null && displayIndex >= 0;
-    const withinBounds = isValidIndex && displayIndex < data.length && displayIndex < points.length;
+    const withinBounds = isValidIndex && displayIndex < interactionData.length && displayIndex < interactionPoints.length;
     if (!withinBounds) {
       return {
         currentPointX: null,
         tooltipValue: null,
         showCursorAndTooltip: false,
-        interactiveProps
+        interactiveProps: interactiveProps2
       };
     }
-    const displayPointCoords = points[displayIndex];
-    const currentPointX = displayPointCoords ? displayPointCoords[0] : null;
-    const tooltipValue = data[displayIndex];
+    const displayPointCoords = interactionPoints[displayIndex];
+    const currentPointX2 = (_a2 = displayPointCoords == null ? void 0 : displayPointCoords[0]) != null ? _a2 : null;
+    const tooltipValue2 = interactionData[displayIndex];
     return {
-      currentPointX,
-      tooltipValue,
-      showCursorAndTooltip: currentPointX !== null,
-      interactiveProps
+      currentPointX: currentPointX2,
+      tooltipValue: tooltipValue2,
+      showCursorAndTooltip: currentPointX2 !== null,
+      interactiveProps: interactiveProps2
     };
+  };
+  if (data.length === 0) {
+    return null;
   }
-  render() {
-    const {
-      data,
-      elementRef,
-      showTooltip,
-      showEndDot,
-      endDotRadius,
-      endDotStrokeWidth,
-      endDotCount,
-      height,
-      isArea,
-      lineStrokeWidth,
-      width,
-      title
-    } = this.props;
-    const { activeIndex, hoveredIndex, componentIsFocused } = this.state;
-    if (data.length === 0) {
+  if (pointRefs.current.length !== data.length) {
+    pointRefs.current.length = data.length;
+  }
+  const xMargin = endDotRadius + endDotStrokeWidth / 2;
+  const yMargin = Math.max(lineStrokeWidth / 2, endDotRadius + endDotStrokeWidth / 2);
+  const points = dataToPoints(xMargin, yMargin);
+  const dotsToShow = Math.max(showEndDot && 1, (0, lodash_exports.isFinite)(endDotCount) && endDotCount > 0 && endDotCount);
+  const { currentPointX, tooltipValue, showCursorAndTooltip, interactiveProps } = getInteractionState({
+    interactionData: data,
+    points,
+    interactionShowTooltip: showTooltip,
+    interactionActiveIndex: activeIndex,
+    interactionHoveredIndex: hoveredIndex,
+    interactionComponentIsFocused: componentIsFocused
+  });
+  const ariaLabel = title || (0, i18n_exports._)("Source count over time sparkline trend");
+  return /* @__PURE__ */ react_default.createElement(
+    "div",
+    __spreadValues(__spreadValues({
+      "data-test": "line",
+      "data-test-type": isArea ? "area" : "line",
+      ref: (el) => {
+        containerRef.current = el;
+        if (typeof elementRef === "function") {
+          elementRef(el);
+        } else if (elementRef && typeof elementRef === "object") {
+          elementRef.current = el;
+        }
+      }
+    }, interactiveProps), (0, lodash_exports.omit)(restProps, PROP_KEYS)),
+    /* @__PURE__ */ react_default.createElement(StyledSvg, { height, width, "aria-labelledby": titleId, "data-test": "sparkline-svg" }, /* @__PURE__ */ react_default.createElement("title", { id: titleId, "data-test": "sparkline-title" }, ariaLabel), /* @__PURE__ */ react_default.createElement("g", null, showTooltip ? renderCursor(currentPointX, showCursorAndTooltip) : null, renderPolyline(points), renderArea(points), dotsToShow ? renderEndDots(points, dotsToShow, xMargin) : null, renderRect(points, xMargin), showTooltip ? renderTooltip(tooltipValue, showCursorAndTooltip) : null))
+  );
+};
+var SparkLine = (_a) => {
+  var _b = _a, { data = [] } = _b, props = __objRest(_b, ["data"]);
+  if (true) {
+    if (!Array.isArray(data)) {
+      console.error("Data provided to SparkLine must be an array.");
       return null;
     }
-    if (this.pointRefs.length !== data.length) {
-      this.pointRefs.length = data.length;
+    if (!data.every((value) => value === null || (0, lodash_exports.isFinite)(value))) {
+      console.error("Data provided to SparkLine must contain finite numbers or null.");
+      return null;
     }
-    const xMargin = endDotRadius + endDotStrokeWidth / 2;
-    const yMargin = Math.max(lineStrokeWidth / 2, endDotRadius + endDotStrokeWidth / 2);
-    const points = this.dataToPoints(xMargin, yMargin);
-    const dotsToShow = Math.max(showEndDot && 1, (0, lodash_exports.isFinite)(endDotCount) && endDotCount > 0 && endDotCount);
-    const { currentPointX, tooltipValue, showCursorAndTooltip, interactiveProps } = this.getInteractionState({
-      data,
-      points,
-      showTooltip,
-      activeIndex,
-      hoveredIndex,
-      componentIsFocused
-    });
-    const ariaLabel = title || (0, i18n_exports._)("Source count over time sparkline trend");
-    return /* @__PURE__ */ react_default.createElement(
-      "div",
-      __spreadValues(__spreadValues({
-        "data-test": "line",
-        "data-test-type": isArea ? "area" : "line",
-        ref: (el) => {
-          this.containerRef.current = el;
-          if (typeof elementRef === "function") {
-            elementRef(el);
-          } else if (elementRef && typeof elementRef === "object") {
-            elementRef.current = el;
-          }
-        }
-      }, interactiveProps), (0, lodash_exports.omit)(this.props, (0, lodash_exports.keys)(_SparkLine.propTypes))),
-      /* @__PURE__ */ react_default.createElement(
-        StyledSvg,
-        {
-          height,
-          width,
-          "aria-labelledby": this.titleId,
-          "data-test": "sparkline-svg"
-        },
-        /* @__PURE__ */ react_default.createElement("title", { id: this.titleId, "data-test": "sparkline-title" }, ariaLabel),
-        /* @__PURE__ */ react_default.createElement("g", null, showTooltip ? this.renderCursor(currentPointX, showCursorAndTooltip) : null, this.renderPolyline(points), this.renderArea(points), dotsToShow ? this.renderEndDots(points, dotsToShow, xMargin) : null, this.renderRect(points, xMargin), showTooltip ? this.renderTooltip(tooltipValue, showCursorAndTooltip) : null)
-      )
-    );
   }
+  return /* @__PURE__ */ react_default.createElement(SparkLineInner, __spreadValues({ data }, props));
 };
-__publicField(_SparkLine, "propTypes", {
-  /**
-   * If true, data can contain `null` as a value and is treated as `0`. If false, this throws error when data contains `null`.
-   */
-  acceptNull: prop_types_default.bool,
-  /** Array of numbers. These data numbers are converted to points and show on sparkline. */
-  data: (props) => {
-    if (!(0, lodash_exports.isArray)(props.data)) {
-      return new Error("Data provided to Sparkline must be an array.");
-    }
-    if (props.acceptNull && !props.data.every((value) => (0, lodash_exports.isNull)(value) || (0, lodash_exports.isFinite)(value))) {
-      return new Error("Data provided to Sparkline must be finite numbers or null.");
-    }
-    if (!props.acceptNull && !props.data.every((value) => (0, lodash_exports.isFinite)(value))) {
-      return new Error("Data provided to Sparkline must be finite numbers.");
-    }
-    return null;
-  },
-  /** A React ref which is set to the DOM element when the component mounts and `null` when it unmounts. */
-  elementRef: prop_types_default.oneOfType([prop_types_default.func, prop_types_default.object]),
-  /** Sets the number of end dots to display. When showEndDot is set to `true`, endDotCount is at least 1. If set to a positive value, this overrides showEndDot. */
-  endDotCount: prop_types_default.number,
-  /** Fills color to the end dot. */
-  endDotFillColor: prop_types_default.string,
-  /**
-   * Sets end dot radius. End dot radius must be less than or equal to the margin. By default, its value equals the margin.
-   */
-  endDotRadius: prop_types_default.number,
-  /** Sets end dot circle stroke color. */
-  endDotStroke: prop_types_default.string,
-  /** Sets end dot circle stroke width in pixels. */
-  endDotStrokeWidth: prop_types_default.number,
-  /** Fills color to area. */
-  fillColor: prop_types_default.string,
-  /** Fills opacity to area. Value must be in 0 ~ 1. */
-  fillOpacity: prop_types_default.string,
-  /** Sets cursor stroke color. */
-  cursorStroke: prop_types_default.string,
-  /** Sets cursor stroke width in pixels. */
-  cursorStrokeWidth: prop_types_default.number,
-  /** Sets cursor line cap style. */
-  cursorStrokeLinecap: prop_types_default.oneOf(["butt", "round", "square"]),
-  /** Sets cursor dash array style. */
-  cursorStrokeDasharray: prop_types_default.string,
-  /**
-   * Container height. If this value is specified, sparkline calculates the size using this height. If height isn't specified,
-   * sparkline figures out the container height by itself.
-   */
-  height: prop_types_default.number.isRequired,
-  /** When set to `true`, sparkline shows as area. */
-  isArea: prop_types_default.bool,
-  /** The sparkline line color. */
-  lineColor: prop_types_default.string,
-  /** Allows user to draw only the last data points for the line. */
-  lineLength: prop_types_default.number,
-  /** The sparkline line stroke width in pixels. */
-  lineStrokeWidth: prop_types_default.number,
-  /** Enable to show end dot. */
-  showEndDot: prop_types_default.bool,
-  /** Enable to show tooltip. */
-  showTooltip: prop_types_default.bool,
-  /** Sets the data value range and maximum value shown on sparkline. */
-  yMax: prop_types_default.number,
-  /** Sets the data value range and minimum value shown on sparkline. */
-  yMin: prop_types_default.number,
-  /**
-   * The width of the container.
-   */
-  width: prop_types_default.number.isRequired,
-  /** Sets the a11y title text on sparkline. */
-  title: prop_types_default.string
-});
-__publicField(_SparkLine, "defaultProps", {
-  acceptNull: false,
-  data: [],
-  showTooltip: true,
-  endDotCount: 0,
-  showEndDot: false,
-  endDotRadius: 0,
-  endDotFillColor: "white",
-  endDotStroke: "black",
-  endDotStrokeWidth: 0,
-  fillColor: "#65a637",
-  fillOpacity: ".1",
-  cursorStroke: "#5184AF",
-  cursorStrokeWidth: 3,
-  cursorStrokeLinecap: "square",
-  cursorStrokeDasharray: "1, 5",
-  isArea: false,
-  lineColor: "#65a637",
-  lineStrokeWidth: 1
-});
-var SparkLine = _SparkLine;
 var SparkLine_default = SparkLine;
 
 // src/Table/cells/SparklineCell.tsx
@@ -4405,6 +4473,128 @@ SparklineCell.displayName = "SparklineCell";
 // src/common/utils/textUtils.ts
 var VIZ_FONT_FAMILY = "'Splunk Platform Sans', 'Splunk Data Sans', Roboto, Droid, 'Helvetica Neue', Helvetica, Arial, sans-serif";
 
+// src/common/utils/focusUtils.ts
+var DEFAULT_FOCUSABLE_SELECTORS = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([disabled]):not([hidden])",
+  "area[href]",
+  "iframe",
+  "object",
+  "embed",
+  '[contenteditable]:not([contenteditable="false"])',
+  "summary",
+  "audio[controls]",
+  "video[controls]"
+].join(",");
+var getFocusableElements = () => {
+  return Array.from(document.querySelectorAll(DEFAULT_FOCUSABLE_SELECTORS));
+};
+var isElementHidden = (element) => {
+  const computedStyle = window.getComputedStyle(element);
+  return element.hasAttribute("hidden") || element.getAttribute("aria-hidden") === "true" || computedStyle.display === "none" || computedStyle.visibility === "hidden";
+};
+var isVisibleFocusableElement = (element) => {
+  let currentElement = element;
+  while (currentElement) {
+    if (isElementHidden(currentElement)) {
+      return false;
+    }
+    currentElement = currentElement.parentElement;
+  }
+  return true;
+};
+var resolveTargetElement = (container, selector) => {
+  if (container instanceof Element && container.matches(selector)) {
+    return container;
+  }
+  return container.querySelector(selector);
+};
+var findFirstFocusableElementAfter = (container, selector) => {
+  const targetElement = resolveTargetElement(container, selector);
+  if (!targetElement) {
+    return null;
+  }
+  return getFocusableElements().find((element) => {
+    if (targetElement.contains(element)) {
+      return false;
+    }
+    const relativePosition = targetElement.compareDocumentPosition(element);
+    return relativePosition === Node.DOCUMENT_POSITION_FOLLOWING && isVisibleFocusableElement(element);
+  }) || null;
+};
+var findFirstFocusableElementInside = (container, selector) => {
+  const targetElement = resolveTargetElement(container, selector);
+  if (!targetElement) {
+    return null;
+  }
+  return getFocusableElements().find((element) => {
+    return element !== targetElement && targetElement.contains(element) && isVisibleFocusableElement(element);
+  }) || null;
+};
+var moveFocusOutside = (container, selector, event) => {
+  var _a;
+  event.preventDefault();
+  (_a = findFirstFocusableElementAfter(container, selector)) == null ? void 0 : _a.focus();
+};
+var moveFocusInto = (container, selector, event) => {
+  var _a;
+  event.preventDefault();
+  (_a = findFirstFocusableElementInside(container, selector)) == null ? void 0 : _a.focus();
+};
+
+// src/Table/tableUtils.ts
+var isJSONObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value) && Object.values(value).every(isJSONElement);
+var isJSONTreeContent = (value) => Array.isArray(value) && value.every(isJSONElement) || isJSONObject(value);
+var isJSONElement = (value) => {
+  if (value === void 0 || value === null || typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+    return true;
+  }
+  if (Array.isArray(value)) {
+    return value.every(isJSONElement);
+  }
+  if (typeof value === "object") {
+    return Object.values(value).every(isJSONElement);
+  }
+  return false;
+};
+var parseExpandedJson = (value) => {
+  if (value === void 0 || value === null || value === "") {
+    return { isExpandable: true, json: null };
+  }
+  if (typeof value !== "string") {
+    return { isExpandable: true, json: null };
+  }
+  try {
+    const parsedValue = JSON.parse(value);
+    return {
+      isExpandable: true,
+      json: isJSONTreeContent(parsedValue) ? parsedValue : null
+    };
+  } catch (e) {
+    return { isExpandable: true, json: null };
+  }
+};
+var getExpandedRowColors = (row) => {
+  var _a, _b, _c, _d;
+  const visibleCells = row.cells.filter((cell) => cell.showCell);
+  const backgroundColor = (_b = (_a = visibleCells.find((cell) => {
+    var _a2;
+    return (_a2 = cell.style) == null ? void 0 : _a2.backgroundColor;
+  })) == null ? void 0 : _a.style) == null ? void 0 : _b.backgroundColor;
+  const color = (_d = (_c = visibleCells.find((cell) => {
+    var _a2;
+    return (_a2 = cell.style) == null ? void 0 : _a2.color;
+  })) == null ? void 0 : _c.style) == null ? void 0 : _d.color;
+  return {
+    backgroundColor,
+    color
+  };
+};
+
 // src/Table/PureTable.tsx
 var MINIMUM_COLUMN_SIZE = 60;
 var INITIAL_UNSET_COLUMN_WIDTH = 90;
@@ -4430,20 +4620,35 @@ var headerTextOverflowStyles = {
     `,
   anywhere: `
         word-break: break-all;
-        white-space: inherit;
+        white-space: pre-wrap;
+        text-overflow: clip;
         display: inline;
     `,
-  default: `
-        word-break: inherit;
-        word-wrap: inherit;
-        white-space: inherit;
-        display: inline;
+  "break-word": `
+        word-break: normal;
+        overflow-wrap: normal;
+        white-space: normal;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: block;
     `
 };
 var TableHeadCell = styled_components_default(Table_default.HeadCell)`
-    button > span {
-        ${(props) => headerTextOverflowStyles[props.textOverflowType] || headerTextOverflowStyles.default}
-    }
+    ${(props) => {
+  const type = props.textOverflowType;
+  const styles = type && headerTextOverflowStyles[type];
+  if (!styles) return "";
+  const expandsHeader = type === "break-word" || type === "anywhere";
+  return styled_components_exports.css`
+            && :is(button, div) {
+                min-height: 100%;
+                ${expandsHeader ? "grid-template-rows: auto 1fr; height: auto;" : ""}
+            }
+            && :is(button, div) > span {
+                ${styles}
+            }
+        `;
+}}
 `;
 var VizTableContainer = styled_components_default.div`
     box-sizing: border-box;
@@ -4495,28 +4700,32 @@ var SUITableContainer = styled_components_default.div`
         margin-bottom: ${PAGINATOR_SPACING}px;
     `};
 
-    ${({ headerStyle }) => headerStyle && headerStyle.backgroundColor && styled_components_exports.css`
-            & [data-test='head-cell'] {
+    ${({ headerStyle }) => (headerStyle == null ? void 0 : headerStyle.backgroundColor) && styled_components_exports.css`
+            & th {
                 background-color: ${headerStyle.backgroundColor};
             }
         `}
 
-    ${({ headerStyle }) => headerStyle && headerStyle.color && styled_components_exports.css`
+    ${({ headerStyle }) => (headerStyle == null ? void 0 : headerStyle.color) && styled_components_exports.css`
             & [data-test='head-cell'] > div > button > span {
                 color: ${headerStyle.color};
             }
         `}
 
     /* Footer cells should match header background for both totals and percentages */
-    ${({ headerStyle }) => headerStyle && (headerStyle.backgroundColor || headerStyle.color) && styled_components_exports.css`
+    ${({ headerStyle }) => ((headerStyle == null ? void 0 : headerStyle.backgroundColor) || (headerStyle == null ? void 0 : headerStyle.color)) && styled_components_exports.css`
             tr[data-test='footer-row-totals'] td[data-test='cell'],
             tr[data-test='footer-row-percentages'] td[data-test='cell'] {
                 background-color: ${headerStyle.backgroundColor || headerStyle.color} !important;
             }
         `}
 
-        /* To accomodate custom logic that diverges from default resizableFillLayout behavior - allows the columns to shrink beneath Table width when columns are fixed */
-        [data-test="main-table"] {
+    tbody tr td[data-test='expand'] button {
+        background-color: transparent !important;
+    }
+
+    /* To accomodate custom logic that diverges from default resizableFillLayout behavior - allows the columns to shrink beneath Table width when columns are fixed */
+    [data-test='main-table'] {
         ${({ isFullyFixed }) => isFullyFixed && styled_components_exports.css`
                 width: fit-content;
                 min-width: unset;
@@ -4533,6 +4742,33 @@ var PaginatorContainer = styled_components_default.div`
     height: ${PAGINATOR_CONTAINER_HEIGHT}px;
 `;
 PaginatorContainer.displayName = "PaginatorContainer";
+var ExpandedJsonTreeContainer = styled_components_default.div`
+    & * {
+        font-family: ${variables_default.monoFontFamily};
+    }
+`;
+ExpandedJsonTreeContainer.displayName = "ExpandedJsonTreeContainer";
+var ExpandableTableRow = styled_components_default(Table_default.Row)`
+    ${({ backgroundColor }) => backgroundColor && styled_components_exports.css`
+            td[data-test='expand'] {
+                background-color: ${backgroundColor} !important;
+            }
+        `}
+
+    td[data-test='expand'] button {
+        background-color: transparent !important;
+    }
+`;
+ExpandableTableRow.displayName = "ExpandableTableRow";
+var ExpandedContentRow = styled_components_default(Table_default.Row)`
+    ${({ backgroundColor, color }) => (backgroundColor || color) && styled_components_exports.css`
+            td {
+                ${backgroundColor ? `background-color: ${backgroundColor};` : ""}
+                ${color ? `color: ${color};` : ""}
+            }
+        `}
+`;
+ExpandedContentRow.displayName = "ExpandedContentRow";
 var withEmptyTableMessage = (Viz) => {
   const Wrapper = (props) => {
     const {
@@ -4649,7 +4885,8 @@ var PureTable = (props) => {
     mode,
     headerVisibility,
     font,
-    fontSize
+    fontSize,
+    showColumnAsExpandedJson
   } = _a;
   const [columns, setColumns] = react_exports.useState(columnFormat);
   const containerRef = react_exports.useRef(null);
@@ -4672,6 +4909,14 @@ var PureTable = (props) => {
       setColumns(columnFormat);
     }
   }, [columnFormat, mode, stringifiedColumnFormat]);
+  const expandedRowJson = react_exports.useMemo(() => {
+    const rowJsonValues = Array.isArray(showColumnAsExpandedJson) ? showColumnAsExpandedJson : [showColumnAsExpandedJson];
+    return rowJsonValues.map(parseExpandedJson);
+  }, [showColumnAsExpandedJson]);
+  const hasExpandableRows = react_exports.useMemo(
+    () => expandedRowJson.some((rowJson) => rowJson.isExpandable),
+    [expandedRowJson]
+  );
   const TableHead = useTableHead(headerVisibility);
   const debouncedDrilldown = react_exports.useMemo(
     () => debounce_default((e, payload) => {
@@ -4759,7 +5004,7 @@ var PureTable = (props) => {
   );
   const handleResizeColumn = (_event, payload) => {
     setResizing(true);
-    const updatedCF = columns;
+    const updatedCF = __spreadValues({}, columns);
     const field = payload.columnId;
     updatedCF[field] = __spreadProps(__spreadValues({}, updatedCF[field]), {
       width: Math.max(payload.width, MINIMUM_COLUMN_SIZE)
@@ -4782,6 +5027,15 @@ var PureTable = (props) => {
   const isFullyFixed = visibleHeaderCells.length === numberOfFixedHeaders;
   const isHeaderHidden = headerVisibility === "none";
   const onSortToUse = isResizing ? lodash_exports.noop : onSort;
+  const handlePaginationSkipLink = (event) => {
+    event.preventDefault();
+    moveFocusInto(containerRef.current, '[data-test="table-pagination"]', event);
+  };
+  const handleTableSkipLink = (event) => {
+    event.preventDefault();
+    moveFocusOutside(containerRef.current, '[data-test="table-container"]', event);
+  };
+  const footerVisibleHeaderCells = tableHeader.cells.filter((c) => c.showCell !== false);
   const renderFooterRow = (key, dataAttr) => {
     const rows = ((tableFooter == null ? void 0 : tableFooter.rows) || []).filter((r) => r && r.key === key);
     if (rows.length === 0) return null;
@@ -4792,24 +5046,35 @@ var PureTable = (props) => {
         "data-test": dataAttr,
         "data-row-index": key === "footer-totals" ? "0" : "1"
       },
-      (row.cells || []).map((c, idx) => {
-        var _a2, _b2, _c2;
+      (row.cells || []).filter((c) => c.showCell !== false).map((c, idx) => {
+        var _a2, _b2, _c2, _d;
+        const headerCell = footerVisibleHeaderCells[idx];
+        const explicitWidth = headerCell && ((_a2 = columns[headerCell.value]) == null ? void 0 : _a2.width);
+        const colWidth = explicitWidth && explicitWidth !== "auto" ? explicitWidth : void 0;
         return /* @__PURE__ */ react_exports.createElement(
           Table_default.Cell,
           {
             key: `${key}-cell-${c.key || idx}`,
             "data-test": "cell",
-            style: __spreadProps(__spreadValues({}, c.style), {
-              backgroundColor: ((_a2 = tableHeader.style) == null ? void 0 : _a2.backgroundColor) || ((_b2 = tableHeader.style) == null ? void 0 : _b2.color)
-            }),
+            style: __spreadValues(__spreadProps(__spreadValues({}, c.style), {
+              backgroundColor: ((_b2 = tableHeader.style) == null ? void 0 : _b2.backgroundColor) || ((_c2 = tableHeader.style) == null ? void 0 : _c2.color)
+            }), colWidth !== void 0 && { width: colWidth }),
             align: c.align || "right"
           },
-          (_c2 = c.value) != null ? _c2 : ""
+          (_d = c.value) != null ? _d : ""
         );
       })
     ));
   };
-  return /* @__PURE__ */ react_exports.createElement(VizTableContainer, { backgroundColor, ref: containerRef, "data-test": "table-container" }, /* @__PURE__ */ react_exports.createElement(
+  return /* @__PURE__ */ react_exports.createElement(VizTableContainer, { backgroundColor, ref: containerRef, "data-test": "table-container" }, /* @__PURE__ */ react_exports.createElement("div", { "data-test": "skip-links-container" }, isPaging ? /* @__PURE__ */ react_exports.createElement(
+    StyledSkipLink,
+    {
+      "data-test": "skip-link-pagination",
+      to: "#pagination",
+      onClick: handlePaginationSkipLink
+    },
+    (0, i18n_exports._)("Skip to table pagination")
+  ) : null, /* @__PURE__ */ react_exports.createElement(StyledSkipLink, { "data-test": "skip-link-table", to: "#next", onClick: handleTableSkipLink }, (0, i18n_exports._)("Skip entire table"))), /* @__PURE__ */ react_exports.createElement(
     SUITableContainer,
     {
       ref: containerRefInner,
@@ -4827,6 +5092,7 @@ var PureTable = (props) => {
       {
         resizableFillLayout: true,
         headType: isHeaderHidden ? void 0 : "inline",
+        rowExpansion: hasExpandableRows ? "multi" : "none",
         innerStyle: tableInnerStyle,
         outerStyle: tableOuterStyle,
         onClick: tableCellClickHandler,
@@ -4873,42 +5139,68 @@ var PureTable = (props) => {
           );
         }
       )),
-      /* @__PURE__ */ react_exports.createElement(Table_default.Body, null, tableBody.rows.map(
-        (row) => /* @__PURE__ */ react_exports.createElement(Table_default.Row, { key: row.key }, row.cells.filter((c) => c.showCell).map((cell) => {
-          var _a2, _b2;
-          return /* @__PURE__ */ react_exports.createElement(SwitchTableCell, { key: cell.key, type: cell.cellType }, /* @__PURE__ */ react_exports.createElement(
-            TextCell,
-            {
-              cell,
-              useMouseOverEffect: getUseMouseOverEffect(
-                props,
-                cell.header
-              )
-            }
-          ), /* @__PURE__ */ react_exports.createElement(
-            SparklineCell,
-            {
-              cell,
-              useMouseOverEffect: getUseMouseOverEffect(
-                props,
-                cell.header
-              ),
-              width: (_b2 = (_a2 = columns[cell.header]) == null ? void 0 : _a2.width) != null ? _b2 : "auto"
-            }
-          ), /* @__PURE__ */ react_exports.createElement(
-            ArrayCell,
+      /* @__PURE__ */ react_exports.createElement(Table_default.Body, null, tableBody.rows.map((row) => {
+        var _a2;
+        const expandedRowData = expandedRowJson[row.index];
+        const expandedJson = (_a2 = expandedRowData == null ? void 0 : expandedRowData.json) != null ? _a2 : null;
+        const expandedRowColors = getExpandedRowColors(row);
+        const expansionRow = (expandedRowData == null ? void 0 : expandedRowData.isExpandable) ? /* @__PURE__ */ react_exports.createElement(
+          ExpandedContentRow,
+          __spreadValues({
+            key: `${row.key}-expanded`,
+            "data-test": "expanded-json-row"
+          }, expandedRowColors),
+          /* @__PURE__ */ react_exports.createElement(Table_default.Cell, { colSpan: visibleHeaderCells.length }, /* @__PURE__ */ react_exports.createElement(ExpandedJsonTreeContainer, null, expandedJson === null ? null : /* @__PURE__ */ react_exports.createElement(
+            JSONTree_default,
             {
-              cell,
-              useMouseOverEffect: getUseMouseOverEffect(
-                props,
-                cell.header
-              )
+              json: expandedJson,
+              defaultExpanded: true,
+              overflow: "wrap"
             }
-          ));
-        }))
-      ), tableFooter && showFooterTotals && renderFooterRow("footer-totals", "footer-row-totals"), tableFooter && showFooterPercentages && renderFooterRow("footer-percentages", "footer-row-percentages"))
+          )))
+        ) : void 0;
+        return /* @__PURE__ */ react_exports.createElement(
+          ExpandableTableRow,
+          __spreadValues({
+            key: row.key,
+            expansionRow
+          }, expandedRowColors),
+          row.cells.filter((c) => c.showCell).map((cell) => {
+            var _a3, _b2;
+            return /* @__PURE__ */ react_exports.createElement(SwitchTableCell, { key: cell.key, type: cell.cellType }, /* @__PURE__ */ react_exports.createElement(
+              TextCell,
+              {
+                cell,
+                useMouseOverEffect: getUseMouseOverEffect(
+                  props,
+                  cell.header
+                )
+              }
+            ), /* @__PURE__ */ react_exports.createElement(
+              SparklineCell,
+              {
+                cell,
+                useMouseOverEffect: getUseMouseOverEffect(
+                  props,
+                  cell.header
+                ),
+                width: (_b2 = (_a3 = columns[cell.header]) == null ? void 0 : _a3.width) != null ? _b2 : "auto"
+              }
+            ), /* @__PURE__ */ react_exports.createElement(
+              ArrayCell,
+              {
+                cell,
+                useMouseOverEffect: getUseMouseOverEffect(
+                  props,
+                  cell.header
+                )
+              }
+            ));
+          })
+        );
+      }), tableFooter && showFooterTotals && renderFooterRow("footer-totals", "footer-row-totals"), tableFooter && showFooterPercentages && renderFooterRow("footer-percentages", "footer-row-percentages"))
     )
-  ), isPaging ? /* @__PURE__ */ react_exports.createElement(PaginatorContainer, null, width < COMPACT_PAGINATOR_WIDTH_THRESHOLD ? /* @__PURE__ */ react_exports.createElement(
+  ), isPaging ? /* @__PURE__ */ react_exports.createElement(PaginatorContainer, { "data-test": "table-pagination" }, width < COMPACT_PAGINATOR_WIDTH_THRESHOLD ? /* @__PURE__ */ react_exports.createElement(
     Paginator_default.Compact,
     {
       current: paginatorProps.current,
@@ -4952,6 +5244,7 @@ PureTable.propTypes = {
   mode: prop_types_exports.string,
   onCellClick: prop_types_exports.func,
   paginatorParams: PaginatorParamsPropTypes,
+  showColumnAsExpandedJson: prop_types_exports.arrayOf(prop_types_exports.string),
   showRowNumbers: prop_types_exports.bool,
   showFooterTotals: prop_types_exports.bool,
   sortParams: SortParamsPropTypes,
@@ -4986,6 +5279,7 @@ PureTable.defaultProps = {
     isPaging: false,
     onChange: lodash_exports.noop
   },
+  showColumnAsExpandedJson: [],
   showRowNumbers: false,
   showFooterTotals: false,
   showFooterPercentages: false,
@@ -5036,9 +5330,9 @@ var computeVizProps = (_a) => {
     const handleColumnFormatChange = (updatedColumnFormat) => {
       var _a3;
       const cloneOfExistingColumnFormat = __spreadValues({}, ((_a3 = vizProps == null ? void 0 : vizProps.options) == null ? void 0 : _a3.columnFormat) || {});
-      const keys2 = Object.keys(updatedColumnFormat);
+      const keys = Object.keys(updatedColumnFormat);
       const values = Object.values(updatedColumnFormat);
-      keys2.forEach((key, index) => {
+      keys.forEach((key, index) => {
         if (!cloneOfExistingColumnFormat[key]) {
           cloneOfExistingColumnFormat[key] = {};
         }
@@ -5064,31 +5358,46 @@ var withTableFooter = (Viz) => {
       "dataSources",
       "options"
     ]);
-    var _a2;
-    if (!((_a2 = dataSources == null ? void 0 : dataSources.primary) == null ? void 0 : _a2.data)) {
-      return /* @__PURE__ */ react_exports.createElement(Viz, __spreadValues({ dataSources, options }, otherProps));
-    }
-    const fieldsMeta = dataSources.primary.data.fields || [];
-    const footerData = buildFooterDataFrames(fieldsMeta);
-    let footerKey = `footer${(0, id_exports.createDOMID)().replace(/-/g, "")}`;
-    while (dataSources[footerKey]) {
-      footerKey = `footer${(0, id_exports.createDOMID)().replace(/-/g, "")}`;
+    var _a2, _b2, _c;
+    const footerKeyRef = react_exports.useRef(null);
+    if (footerKeyRef.current === null) {
+      let key = `footer${(0, id_exports.createDOMID)().replaceAll("-", "")}`;
+      while (dataSources == null ? void 0 : dataSources[key]) {
+        key = `footer${(0, id_exports.createDOMID)().replaceAll("-", "")}`;
+      }
+      footerKeyRef.current = key;
     }
-    const newDataSources = __spreadProps(__spreadValues({}, dataSources), {
-      [footerKey]: { data: footerData.footer }
-    });
+    const footerKey = footerKeyRef.current;
+    const fieldsMeta = react_exports.useMemo(
+      () => {
+        var _a3, _b3;
+        return ((_b3 = (_a3 = dataSources == null ? void 0 : dataSources.primary) == null ? void 0 : _a3.data) == null ? void 0 : _b3.fields) || [];
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [JSON.stringify((_b2 = (_a2 = dataSources == null ? void 0 : dataSources.primary) == null ? void 0 : _a2.data) == null ? void 0 : _b2.fields)]
+    );
+    const footerData = react_exports.useMemo(() => buildFooterDataFrames(fieldsMeta), [fieldsMeta]);
+    const newDataSources = react_exports.useMemo(() => {
+      var _a3;
+      if (!((_a3 = dataSources == null ? void 0 : dataSources.primary) == null ? void 0 : _a3.data)) return dataSources;
+      return __spreadProps(__spreadValues({}, dataSources), {
+        [footerKey]: { data: footerData.footer }
+      });
+    }, [dataSources, footerKey, footerData]);
     const showFooterTotals = Boolean(options == null ? void 0 : options.showFooterTotals);
     const showFooterPercentages = Boolean(options == null ? void 0 : options.showFooterPercentages);
-    let newOptions = options;
-    if (showFooterTotals || showFooterPercentages) {
+    const newOptions = react_exports.useMemo(() => {
+      if (!showFooterTotals && !showFooterPercentages) {
+        return options;
+      }
       const columnFormat = __spreadValues({}, (options == null ? void 0 : options.columnFormat) || {});
       const fieldNames = (fieldsMeta || []).map((f) => f && (f.name || f)).filter(Boolean);
       fieldNames.forEach((fieldName) => {
-        var _a3, _b2;
+        var _a3, _b3;
         if (!fieldName || fieldName === "#") return;
         const existingFooter = (_a3 = columnFormat == null ? void 0 : columnFormat[fieldName]) == null ? void 0 : _a3.footer;
         if (typeof existingFooter === "undefined") {
-          const dataDsl = (_b2 = columnFormat == null ? void 0 : columnFormat[fieldName]) == null ? void 0 : _b2.data;
+          const dataDsl = (_b3 = columnFormat == null ? void 0 : columnFormat[fieldName]) == null ? void 0 : _b3.data;
           let configToken = null;
           if (typeof dataDsl === "string") {
             const m = /formatByType\(([^)]+)\)/.exec(dataDsl);
@@ -5100,7 +5409,7 @@ var withTableFooter = (Viz) => {
             footer: footerDsl
           });
         } else if (typeof existingFooter === "string") {
-          const updatedFooterDsl = existingFooter.replace(/>\s*footer\b/g, `> ${footerKey}`);
+          const updatedFooterDsl = existingFooter.replaceAll(/>\s*footer\w*/g, `> ${footerKey}`);
           if (updatedFooterDsl !== existingFooter) {
             columnFormat[fieldName] = __spreadProps(__spreadValues({}, columnFormat[fieldName] || {}), {
               footer: updatedFooterDsl
@@ -5108,7 +5417,10 @@ var withTableFooter = (Viz) => {
           }
         }
       });
-      newOptions = __spreadProps(__spreadValues({}, options || {}), { columnFormat });
+      return __spreadProps(__spreadValues({}, options), { columnFormat });
+    }, [options, fieldsMeta, showFooterTotals, showFooterPercentages, footerKey]);
+    if (!((_c = dataSources == null ? void 0 : dataSources.primary) == null ? void 0 : _c.data)) {
+      return /* @__PURE__ */ react_exports.createElement(Viz, __spreadValues({ dataSources, options }, otherProps));
     }
     return /* @__PURE__ */ react_exports.createElement(Viz, __spreadValues({ dataSources: newDataSources, options: newOptions }, otherProps));
   };