@splunk/visualizations 27.4.0 → 28.0.0

package/Table.js

@@ -1,6 +1,7 @@
 /* Copyright © 2020 Splunk Inc.
 SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
 in part without a valid written license from Splunk Inc. is PROHIBITED. */
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -191,11 +192,9 @@ var configUtils_default = "default" in defaultImport13 ? defaultImport13.default
 // src/common/utils/configUtils.ts
 function enhanceConfig(vizConfig) {
   const enhancedConfig = __spreadValues({}, vizConfig);
-  enhancedConfig.editorConfig = vizConfig.editorConfig.map(
-    (config2) => {
-      return __spreadProps(__spreadValues({}, config2), { open: config2.open || false });
-    }
-  );
+  enhancedConfig.editorConfig = vizConfig.editorConfig.map((config2) => {
+    return __spreadProps(__spreadValues({}, config2), { open: config2.open || false });
+  });
   return enhancedConfig;
 }
 function generatePrecisionValues(numPrecisionValues) {
@@ -208,6 +207,15 @@ function generatePrecisionValues(numPrecisionValues) {
   );
 }
 
+// src/common/ThemedDefaults.tsx
+var defaultBackgroundColor = (props) => pick_default({
+  enterprise: {
+    dark: variables_default.black(props),
+    light: variables_default.white(props)
+  },
+  prisma: variables_default.backgroundColorSection(props)
+})(props);
+
 // src/Table/config.ts
 var dataContract = {
   requiredDataSources: [
@@ -314,7 +322,10 @@ var textAlignConfigTable = {
   option: "tableFormat.align",
   editorProps: {
     values: [
-      { label: (0, i18n_exports._)("Auto"), value: "> table | type() | matchValue(tableAlignByType)" },
+      {
+        label: (0, i18n_exports._)("Auto"),
+        value: "> table | type() | matchValue(tableAlignByType)"
+      },
       { label: (0, i18n_exports._)("Left"), value: "left", icon: TextAlignLeft_default },
       { label: (0, i18n_exports._)("Center"), value: "center", icon: TextAlignCenter_default },
       { label: (0, i18n_exports._)("Right"), value: "right", icon: TextAlignRight_default }
@@ -365,13 +376,7 @@ var sequentialColorConfig = [
 ];
 var matchColorConfig = [{ match: "", value: "#5C33FF" }];
 var themes = {
-  defaultBackgroundColor: (props) => pick_default({
-    enterprise: {
-      dark: variables_default.black(props),
-      light: variables_default.backgroundColor(props)
-    },
-    prisma: variables_default.backgroundColorSidebar(props)
-  })(props),
+  defaultBackgroundColor,
   defaultHeaderBackgroundColor: (props) => pick_default({
     enterprise: {
       dark: variables_default.gray20(props),
@@ -391,7 +396,7 @@ var themes = {
       dark: "#0D1012",
       light: variables_default.backgroundColor(props)
     },
-    prisma: variables_default.backgroundColorSidebar(props)
+    prisma: { dark: variables_default.backgroundColorSidebar(props), light: variables_default.white(props) }
   })(props),
   textColor: (props) => pick_default({
     enterprise: variables_default.textColor(props),
@@ -407,10 +412,7 @@ var themes = {
     prisma: variables_default.contentColorInverted(props)
   })(props)
 };
-var backgroundColorPaletteSet = /* @__PURE__ */ new Set([
-  ...colorConstants_exports.COLOR_EDITOR_PALETTE,
-  ...(0, lodash_exports.map)(themes, (t) => (0, lodash_exports.get)(t, "defaultBackgroundColor"))
-]);
+var backgroundColorPaletteSet = /* @__PURE__ */ new Set([...colorConstants_exports.COLOR_EDITOR_PALETTE]);
 var EDITOR_LABEL_WIDTH = 100;
 var editorConfig = [
   {
@@ -486,7 +488,10 @@ var editorConfig = [
           editor: "editor.select",
           editorProps: {
             values: [
-              { label: (0, i18n_exports._)("Proportional (Default)"), value: "proportional" },
+              {
+                label: (0, i18n_exports._)("Proportional (Default)"),
+                value: "proportional"
+              },
               { label: (0, i18n_exports._)("Monospace"), value: "monospace" }
             ],
             labelPosition: "top",
@@ -501,10 +506,22 @@ var editorConfig = [
           editor: "editor.select",
           editorProps: {
             values: [
-              { label: (0, i18n_exports._)("Extra Small (font 10px, row 24px)"), value: "extraSmall" },
-              { label: (0, i18n_exports._)("Small (font 12px, row 24px)"), value: "small" },
-              { label: (0, i18n_exports._)("Default (font 14px, row 32px)"), value: "default" },
-              { label: (0, i18n_exports._)("Large (font 16px, row 36px)"), value: "large" }
+              {
+                label: (0, i18n_exports._)("Extra Small (font 10px, row 24px)"),
+                value: "extraSmall"
+              },
+              {
+                label: (0, i18n_exports._)("Small (font 12px, row 24px)"),
+                value: "small"
+              },
+              {
+                label: (0, i18n_exports._)("Default (font 14px, row 32px)"),
+                value: "default"
+              },
+              {
+                label: (0, i18n_exports._)("Large (font 16px, row 36px)"),
+                value: "large"
+              }
             ],
             labelPosition: "top",
             labelWidth: EDITOR_LABEL_WIDTH
@@ -602,7 +619,10 @@ var editorConfig = [
                     editor: "editor.radioBar",
                     editorProps: {
                       values: [
-                        { label: (0, i18n_exports._)("Off"), value: false },
+                        {
+                          label: (0, i18n_exports._)("Off"),
+                          value: false
+                        },
                         { label: (0, i18n_exports._)("On"), value: true }
                       ]
                     }
@@ -1026,9 +1046,14 @@ var Item = styled_components_default.div.attrs(({ width }) => ({
     position: relative;
     background-color: ${(props) => (0, colorUtils_exports.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor}};
 `;
-var FixSizeItem = styled_components_default.div.attrs(({ width, height }) => ({
-  style: __spreadValues(__spreadValues({}, width && { width: (0, style_exports.toPx)(width) }), height && { height: (0, style_exports.toPx)(height) })
-}))`
+var FixSizeItem = styled_components_default.div.attrs(
+  ({
+    width,
+    height
+  }) => ({
+    style: __spreadValues(__spreadValues({}, width && { width: (0, style_exports.toPx)(width) }), height && { height: (0, style_exports.toPx)(height) })
+  })
+)`
     position: relative;
     flex-direction: column;
     flex: 1;
@@ -1062,7 +1087,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "27.4.0 - 92ef39d5c",
+        "data-splunk-visualization-version": "28.0.0 - 0c5f07712",
         width,
         height,
         backgroundColor
@@ -1128,7 +1153,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "27.4.0 - 92ef39d5c"
+  "data-splunk-visualization-version": "28.0.0 - 0c5f07712"
 })`
     position: relative;
     width: 100%;
@@ -1497,7 +1522,12 @@ var useGetXAndYFields = ({
         y2Fields: options.y2 ? "> y2 | getField()" : void 0,
         fieldTypes: "> primary | getType()"
       };
-      const { xField = "", yFields = [], y2Fields = [], fieldTypes } = Options_exports.Options.evaluate(
+      const {
+        xField = "",
+        yFields = [],
+        y2Fields = [],
+        fieldTypes
+      } = Options_exports.Options.evaluate(
         { options: optionsToEvaluate, context },
         dataSourcesWithOnlyOnePoint,
         () => {
@@ -1778,7 +1808,9 @@ var withDashboardViz = (opts) => {
           return result;
         }
       } catch (e) {
-        console.error(`unexpected error evaluating options: ${e.message}`);
+        if (e instanceof Error) {
+          console.error(`unexpected error evaluating options: ${e.message}`);
+        }
         return {};
       }
       return {};
@@ -1837,7 +1869,11 @@ var withDashboardViz = (opts) => {
           if (ev && ev.payload) {
             payload = ev.payload;
           }
-          return onEventTrigger({ originalEvent: ev, payload, type: eventName });
+          return onEventTrigger({
+            originalEvent: ev,
+            payload,
+            type: eventName
+          });
         };
         if (parentKeys) {
           for (let i = parentKeys.length - 1; i >= 0; i -= 1) {
@@ -1955,11 +1991,11 @@ var empty = {};
 var getOverflowStyles = ({ textOverflow }) => {
   return textOverflowStyles[textOverflow] || empty;
 };
-var generateKey = (value = "", i) => `${i}-${value}`;
+var generateKey = (i = "", value = "") => `${value}-${i}`;
 var getTextOverflowType = (columnFormat, columnId, currentColumn) => getAttributeFromColumnFormat("textOverflow", columnFormat, columnId, currentColumn);
 var generateHeader = (value, columnId, i, columnFormat, tableFormat, showInternalFields) => {
   const ret = {
-    key: generateKey(value, i),
+    key: generateKey(value, String(i)),
     value,
     align: "left",
     columnId,
@@ -2288,21 +2324,19 @@ var useTable = (tableArgs = {}) => {
   }
   const tableHeader = {
     visibility: visualization_schemas_exports.validHeaderVisibilities.indexOf(headerVisibility) >= 0 ? headerVisibility : "inline",
-    cells: table.map(
-      (f, i) => {
-        if (i < headers.length) {
-          return generateHeader(
-            headers[i],
-            columnIds[i],
-            i,
-            columnFormat,
-            tableFormat,
-            showInternalFields
-          );
-        }
-        return generateHeader("", "", i, columnFormat, tableFormat, showInternalFields);
+    cells: table.map((f, i) => {
+      if (i < headers.length) {
+        return generateHeader(
+          headers[i],
+          columnIds[i],
+          i,
+          columnFormat,
+          tableFormat,
+          showInternalFields
+        );
       }
-    ),
+      return generateHeader("", "", i, columnFormat, tableFormat, showInternalFields);
+    }),
     style: {
       backgroundColor: (0, lodash_exports.has)(tableFormat, "headerBackgroundColor") && (0, colorUtils_exports.isColor)(tableFormat.headerBackgroundColor) && tableFormat.headerBackgroundColor || void 0,
       color: (0, lodash_exports.has)(tableFormat, "headerColor") && (0, colorUtils_exports.isColor)(tableFormat.headerColor) && tableFormat.headerColor || void 0
@@ -2442,6 +2476,7 @@ var StyledTooltip = styled_components_default.div`
     padding: 3px 8px;
     font-size: 12px;
 `;
+var preventDefault = (e) => e.preventDefault();
 var _SparkLine = class _SparkLine extends react_exports.Component {
   constructor(props, ...rest) {
     super(props, ...rest);
@@ -2452,21 +2487,99 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
     });
     this.state = {
       anchor: null,
-      currentPointX: null,
-      open: false,
-      rectArea: null,
-      tooltip: null
+      activeIndex: 0,
+      hoveredIndex: null,
+      componentIsFocused: false
     };
-    this.titleId = (0, id_exports.createDOMID)();
+    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 = parseInt(pointIndexStr, 10);
+      if (activeIndex !== pointIndex || !componentIsFocused || hoveredIndex !== null) {
+        this.setState({
+          activeIndex: pointIndex,
+          hoveredIndex: null,
+          componentIsFocused: true
+        });
+      }
+    } 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;
+    }
+    let newIndex = activeIndex;
+    switch (event.key) {
+      case "Home":
+        newIndex = 0;
+        break;
+      case "End":
+        newIndex = numPoints - 1;
+        break;
+      case "ArrowLeft":
+        newIndex = Math.max(0, activeIndex - 1);
+        break;
+      case "ArrowRight":
+        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 = parseInt(pointIndexStr, 10);
+      if (this.state.hoveredIndex !== pointIndex) {
+        this.setState({ hoveredIndex: pointIndex });
+      }
+    }
+  }
+  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(data)) : (0, lodash_exports.max)(data);
+    const dataMax = () => acceptNull ? (0, lodash_exports.max)(this.fillNull()) : (0, lodash_exports.max)(data);
     return yMax !== void 0 ? yMax : dataMax();
   }
   getMin() {
     const { data, acceptNull, yMin } = this.props;
-    const dataMin = () => acceptNull ? (0, lodash_exports.min)(this.fillNull(data)) : (0, lodash_exports.min)(data);
+    const dataMin = () => acceptNull ? (0, lodash_exports.min)(this.fillNull()) : (0, lodash_exports.min)(data);
     return yMin !== void 0 ? yMin : dataMin();
   }
   /**
@@ -2546,15 +2659,14 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
     })).map((p) => [p.x, p.y]);
   }
   /**
-   * Renders rect area for helping figure out which is the nearest point so that
-   * render related cursor and tooltip.
+   * 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 } = this.props;
+    const { data, height, showTooltip } = this.props;
     const xUnit = this.getXUnit(xMargin);
     return points.map((p, i) => (
       /* eslint-disable react/no-array-index-key */
@@ -2562,20 +2674,20 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
         "rect",
         {
           key: `${i}_${p[0]}`,
+          role: "img",
+          "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: p[0] - xUnit / 2 <= 0 ? 0 : p[0] - xUnit / 2,
           y: 0,
           width: i === 0 && data.length !== 1 ? xUnit / 2 : xUnit,
           height,
           style: { fillOpacity: 0 },
-          onMouseOver: (e) => {
-            this.setState({
-              open: data[i] !== null,
-              rectArea: data[i] === null ? null : e.target,
-              tooltip: data[i],
-              currentPointX: p[0]
-            });
-          }
+          onMouseDown: preventDefault
         }
       )
     ));
@@ -2611,22 +2723,16 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
       }
     )));
   }
-  renderCursor() {
-    const {
-      cursorStroke,
-      cursorStrokeWidth,
-      cursorStrokeLinecap,
-      cursorStrokeDasharray,
-      height
-    } = this.props;
-    return this.state.rectArea !== null && /* @__PURE__ */ react_default.createElement(
+  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: this.state.currentPointX,
+        x1: currentPointX,
         y1: 0,
-        x2: this.state.currentPointX,
+        x2: currentPointX,
         y2: height,
         style: {
           stroke: cursorStroke,
@@ -2637,19 +2743,20 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
       }
     );
   }
-  renderTooltip() {
-    return this.state.anchor !== null && /* @__PURE__ */ react_default.createElement(
+  renderTooltip(tooltipValue, isOpen) {
+    const { anchor } = this.state;
+    return /* @__PURE__ */ react_default.createElement(
       Popover_default,
       {
         "data-test": "tooltip",
-        open: this.state.open,
-        anchor: this.state.anchor,
-        "data-test-value": this.state.tooltip,
+        open: isOpen,
+        anchor,
+        "data-test-value": tooltipValue,
         appearance: "inverted",
         defaultPlacement: "above",
         animation: false
       },
-      /* @__PURE__ */ react_default.createElement(StyledTooltip, null, this.state.anchor !== null ? this.state.tooltip : void 0)
+      /* @__PURE__ */ react_default.createElement(StyledTooltip, null, tooltipValue)
     );
   }
   /**
@@ -2720,39 +2827,69 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
       width,
       title
     } = this.props;
+    const { activeIndex, hoveredIndex, componentIsFocused } = this.state;
     if (data.length === 0) {
       return null;
     }
+    if (this.pointRefs.length !== data.length) {
+      this.pointRefs.length = data.length;
+    }
     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);
+    let currentPointX = null;
+    let tooltipValue = null;
+    let showCursorAndTooltip = false;
+    let interactiveProps = {};
+    if (showTooltip) {
+      const isHovered = hoveredIndex !== null;
+      const shouldDisplayInteractiveElements = (isHovered || componentIsFocused) && data.length > 0;
+      if (shouldDisplayInteractiveElements) {
+        const displayIndex = isHovered ? hoveredIndex : activeIndex;
+        if (displayIndex !== null && displayIndex >= 0 && data.length > displayIndex && points.length > displayIndex) {
+          const displayPointCoords = points[displayIndex];
+          if (displayPointCoords) {
+            [currentPointX] = displayPointCoords;
+          }
+          tooltipValue = data[displayIndex];
+          showCursorAndTooltip = currentPointX !== null;
+        }
+      }
+      interactiveProps = {
+        onKeyDown: this.handleKeyDown,
+        onMouseOver: this.handleMouseOver,
+        onMouseLeave: this.handleMouseLeave,
+        onFocus: this.handleFocus,
+        onBlur: this.handleBlur
+      };
+    }
+    const ariaLabel = title || (0, i18n_exports._)("Source count over time sparkline trend");
     return /* @__PURE__ */ react_default.createElement(
       "div",
-      __spreadValues({
+      __spreadValues(__spreadValues({
         "data-test": "line",
         "data-test-type": isArea ? "area" : "line",
-        onMouseOut: () => {
-          this.setState({
-            open: false,
-            anchor: null,
-            rectArea: null,
-            currentPointX: null
-          });
-        },
-        ref: elementRef
-      }, (0, lodash_exports.omit)(this.props, (0, lodash_exports.keys)(_SparkLine.propTypes))),
+        role: "group",
+        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,
-          role: "img",
           "aria-labelledby": this.titleId,
           "data-test": "sparkline-svg"
         },
-        /* @__PURE__ */ react_default.createElement("title", { id: this.titleId, "data-test": "sparkline-title" }, title || (0, i18n_exports._)("Source count over time sparkline trend")),
-        /* @__PURE__ */ react_default.createElement("g", null, this.renderCursor(), this.renderPolyline(points), this.renderArea(points), dotsToShow ? this.renderEndDots(points, dotsToShow, xMargin) : null, showTooltip ? this.renderRect(points, xMargin) : null, showTooltip ? this.renderTooltip() : null)
+        /* @__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)
       )
     );
   }
@@ -2871,7 +3008,7 @@ var SparklineCell = ({
     data = data.slice(1);
   }
   react_exports.useLayoutEffect(() => {
-    setHeight(cellEl == null ? void 0 : cellEl.offsetHeight);
+    setHeight((cellEl == null ? void 0 : cellEl.offsetHeight) || 20);
   }, [cellEl]);
   const cellStyle = react_exports.useMemo(
     () => __spreadProps(__spreadValues({}, cell.style), {
@@ -2886,6 +3023,7 @@ var SparklineCell = ({
     () => ({
       paddingLeft: `${paddingLeftRight}px`,
       paddingTop: `${paddingTopBottom}px`,
+      // eslint-disable-next-line no-unsafe-optional-chaining
       width: width === "auto" ? `${(cellEl == null ? void 0 : cellEl.offsetWidth) - paddingLeftRight * 2}px` : `${width}px`,
       height: `${height - paddingTopBottom * 2}px`
     }),
@@ -2921,14 +3059,12 @@ var SparklineCell = ({
 SparklineCell.displayName = "SparklineCell";
 
 // src/Table/PureTable.tsx
-var MINIMUM_COLUMN_SIZE = 30;
+var MINIMUM_COLUMN_SIZE = 60;
 var INITIAL_UNSET_COLUMN_WIDTH = 90;
 var NonVisibleTableHead = styled_components_default(Table_default.Head)`
     pointer-events: none;
     & [data-test='head-cell'] > div {
-        height: 0;
-        padding: 0;
-        margin: 0;
+        display: none;
     }
 `;
 var FixedTableHead = styled_components_default(Table_default.Head)`
@@ -2945,10 +3081,7 @@ var TableHeadCell = styled_components_default(Table_default.HeadCell)`
 `;
 var VizTableContainer = styled_components_default.div`
     box-sizing: border-box;
-    padding: ${pick_default({
-  enterprise: variables_default.spacingHalf,
-  prisma: variables_default.spacingSmall
-})};
+    padding: ${variables_default.spacingSmall};
     background-color: ${(props) => (0, colorUtils_exports.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor};
     display: flex;
     flex-flow: column nowrap;
@@ -2971,11 +3104,9 @@ var SUITableContainer = styled_components_default.div`
     box-sizing: border-box;
     flex-grow: 1;
     overflow: hidden;
+
     ${({ width, height, isPaging, theme }) => {
-  const padding = pick_default({
-    enterprise: variables_default.spacingHalf({ theme }),
-    prisma: variables_default.spacingSmall({ theme })
-  })({ theme });
+  const padding = variables_default.spacingSmall({ theme });
   const paddingOffset = parseInt(padding, 10) * 2;
   return (0, style_exports.toDimension)({
     width: width - paddingOffset,
@@ -2995,7 +3126,7 @@ var SUITableContainer = styled_components_default.div`
         `}
 
     ${({ headerStyle }) => headerStyle && headerStyle.color && styled_components_exports.css`
-            & [data-test='head-cell'] > button > span {
+            & [data-test='head-cell'] > div > button > span {
                 color: ${headerStyle.color};
             }
         `}
@@ -3039,7 +3170,13 @@ var withEmptyTableMessage = (Viz) => {
       headerVisibility,
       showRowNumbers,
       showInternalFields,
-      tableFormat: __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, tableFormat), (tableFormat == null ? void 0 : tableFormat.headerAlign) && { headerAlign: (0, lodash_exports.cloneDeep)(tableFormat.headerAlign) }), (tableFormat == null ? void 0 : tableFormat.align) && { align: (0, lodash_exports.cloneDeep)(tableFormat.align) }), (tableFormat == null ? void 0 : tableFormat.cellTypes) && { cellTypes: (0, lodash_exports.cloneDeep)(tableFormat.cellTypes) }), (tableFormat == null ? void 0 : tableFormat.data) && { data: (0, lodash_exports.cloneDeep)(tableFormat.data) }),
+      tableFormat: __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, tableFormat), (tableFormat == null ? void 0 : tableFormat.headerAlign) && {
+        headerAlign: (0, lodash_exports.cloneDeep)(tableFormat.headerAlign)
+      }), (tableFormat == null ? void 0 : tableFormat.align) && {
+        align: (0, lodash_exports.cloneDeep)(tableFormat.align)
+      }), (tableFormat == null ? void 0 : tableFormat.cellTypes) && {
+        cellTypes: (0, lodash_exports.cloneDeep)(tableFormat.cellTypes)
+      }), (tableFormat == null ? void 0 : tableFormat.data) && { data: (0, lodash_exports.cloneDeep)(tableFormat.data) }),
       columnFormat,
       paginationOffset: paginatorParams == null ? void 0 : paginatorParams.current,
       count
@@ -3137,7 +3274,11 @@ var PureTable = (props) => {
   );
   const drilldownHandler = react_exports.useCallback(
     (e) => {
-      const element = e.target;
+      var _a2;
+      const element = (_a2 = e.target) == null ? void 0 : _a2.closest("[data-row-index]");
+      if (!element) {
+        return;
+      }
       const row = element.getAttribute("data-row-index");
       const col = element.getAttribute("data-col-index");
       const arrayIndex = element.getAttribute("data-array-index") || -1;
@@ -3191,9 +3332,6 @@ var PureTable = (props) => {
       e.stopPropagation();
     }
   }, []);
-  const handleEventHeadCellMouseUp = react_exports.useCallback(() => {
-    setResizing(false);
-  }, [setResizing]);
   const handleKeyDown = (e) => {
     if (e.keyCode !== 13) {
       return;
@@ -3219,7 +3357,6 @@ var PureTable = (props) => {
     if (mode === "edit") {
       debouncedOnColumnFormatChange(updatedCF);
     }
-    setResizing(false);
   };
   const fontMapped = fontMap[font] || fontMap.proportional;
   const fontSizeMapped = fontSizeMap[fontSize] || fontSizeMap.default;
@@ -3235,6 +3372,7 @@ var PureTable = (props) => {
   }).length;
   const isFullyFixed = visibleHeaderCells.length === numberOfFixedHeaders;
   const isHeaderHidden = headerVisibility === "none";
+  const onSortToUse = isResizing ? lodash_exports.noop : onSort;
   return /* @__PURE__ */ react_exports.createElement(
     VizTableContainer,
     {
@@ -3297,9 +3435,8 @@ var PureTable = (props) => {
                 sortDir: sortKey === currentSortKey ? currentSortDir : "none",
                 width: (_b2 = (_a2 = columns[value]) == null ? void 0 : _a2.width) != null ? _b2 : INITIAL_UNSET_COLUMN_WIDTH,
                 onMouseDown: handleEventHeadCellMouseDown,
-                onMouseUp: handleEventHeadCellMouseUp,
                 value,
-                onSort: isResizing || showRowNumbers && value === "#" || isHeaderHidden ? null : onSort,
+                onSort: showRowNumbers && value === "#" || isHeaderHidden ? null : onSortToUse,
                 resizable: !isHeaderHidden,
                 style: showRowNumbers && value === "#" ? __spreadProps(__spreadValues({}, style), { cursor: "auto" }) : style,
                 headerVisibility
@@ -3308,31 +3445,29 @@ 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: !!onCellClick
-                }
-              ), /* @__PURE__ */ react_exports.createElement(
-                SparklineCell,
-                {
-                  cell,
-                  useMouseOverEffect: !!onCellClick,
-                  width: (_b2 = (_a2 = columns[cell.header]) == null ? void 0 : _a2.width) != null ? _b2 : "auto"
-                }
-              ), /* @__PURE__ */ react_exports.createElement(
-                ArrayCell,
-                {
-                  cell,
-                  useMouseOverEffect: !!onCellClick
-                }
-              ));
-            }
-          ))
+          (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: !!onCellClick
+              }
+            ), /* @__PURE__ */ react_exports.createElement(
+              SparklineCell,
+              {
+                cell,
+                useMouseOverEffect: !!onCellClick,
+                width: (_b2 = (_a2 = columns[cell.header]) == null ? void 0 : _a2.width) != null ? _b2 : "auto"
+              }
+            ), /* @__PURE__ */ react_exports.createElement(
+              ArrayCell,
+              {
+                cell,
+                useMouseOverEffect: !!onCellClick
+              }
+            ));
+          }))
         ))
       )
     ),
@@ -3436,7 +3571,9 @@ var computeVizProps = (_a) => {
           (color) => color || themeTextColor
         );
       }
-      vizProps.columnFormat[columnKey] = __spreadValues(__spreadValues(__spreadValues({}, vizProps.columnFormat[columnKey]), columnProperties.rowBackgroundColors && { rowBackgroundColors }), columnProperties.rowColors && { rowColors });
+      vizProps.columnFormat[columnKey] = __spreadValues(__spreadValues(__spreadValues({}, vizProps.columnFormat[columnKey]), columnProperties.rowBackgroundColors && {
+        rowBackgroundColors
+      }), columnProperties.rowColors && { rowColors });
     });
     vizProps.columnIds = (_d = (_c = (_b = (_a2 = vizProps.dataSources) == null ? void 0 : _a2.primary) == null ? void 0 : _b.data) == null ? void 0 : _c.fields.map((field) => {
       var _a3;