@splunk/visualizations 28.2.0 → 28.2.2

package/Table.js

@@ -1189,7 +1189,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "28.2.0 - 7eea200d8"
+  "data-splunk-visualization-version": "28.2.2 - b595a32f1"
 })`
     position: relative;
     width: 100%;
@@ -1228,14 +1228,18 @@ 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) })
-  })
+  }) => {
+    const validHeight = typeof height === "number" ? Math.max(height, 1) : height;
+    return {
+      style: __spreadValues(__spreadValues({}, width && { width: (0, style_exports.toPx)(width) }), validHeight && { height: (0, style_exports.toPx)(validHeight) })
+    };
+  }
 )`
     position: relative;
     flex-direction: column;
     flex: 1;
     display: flex;
+    overflow: hidden !important;
     background-color: ${(props) => (0, colorUtils_exports.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor}};
 `;
 var ItemContent = styled_components_default.div`
@@ -1248,6 +1252,7 @@ var FixSizeItemContent = styled_components_default.div`
     flex: 1;
     position: relative;
     box-sizing: border-box;
+    overflow: hidden !important;
 `;
 var withFixedSizeContainer = (Viz) => {
   const FixedSizeContainer = (props) => {
@@ -1265,7 +1270,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.2.0 - 7eea200d8",
+        "data-splunk-visualization-version": "28.2.2 - b595a32f1",
         width,
         height,
         backgroundColor
@@ -1294,12 +1299,6 @@ var IconPlaceholder = (props) => {
     iconColor,
     backgroundColor
   } = props;
-  const cachedHandleResize = react_exports.useCallback((w, h) => {
-    setContainerWidth(w);
-    setContainerHeight(h);
-  }, []);
-  const [containerWidth, setContainerWidth] = react_exports.useState(Number(width));
-  const [containerHeight, setContainerHeight] = react_exports.useState(Number(height));
   let content = /* @__PURE__ */ react_exports.createElement(Message_default, { width, height, level: "warning", message: (0, i18n_exports._)("No DataSource Connected") });
   if (icon) {
     content = react_exports.createElement(icon, {
@@ -1316,7 +1315,7 @@ var IconPlaceholder = (props) => {
       "data-test": "icon-placeholder"
     });
   }
-  return /* @__PURE__ */ react_exports.createElement("div", { style: { width: containerWidth, height: containerHeight, background: backgroundColor } }, /* @__PURE__ */ react_exports.createElement(SizeAwareWrapper_default, { width, height, onResize: cachedHandleResize }), content);
+  return /* @__PURE__ */ react_exports.createElement("div", { style: { width, height, background: backgroundColor } }, content);
 };
 var IconPlaceholder_default = FixedSizeContainer_default(IconPlaceholder);
 
@@ -2473,12 +2472,14 @@ var Message_default2 = "default" in defaultImport39 ? defaultImport39.default :
 var isArray2 = (v) => Array.isArray(v);
 var textOverflowStyles = {
   anywhere: {
-    wordBreak: "break-all"
+    wordBreak: "break-all",
+    whiteSpace: "pre-wrap"
   },
   "break-word": {
     wordBreak: "break-word",
     wordWrap: "break-word",
-    overflowWrap: "break-word"
+    overflowWrap: "break-word",
+    whiteSpace: "pre-wrap"
   },
   ellipsis: {
     whiteSpace: "nowrap",
@@ -2486,12 +2487,34 @@ var textOverflowStyles = {
     textOverflow: "ellipsis"
   }
 };
-var empty = {};
 var getOverflowStyles = ({ textOverflow }) => {
-  return textOverflowStyles[textOverflow] || empty;
+  return textOverflowStyles[textOverflow] || textOverflowStyles["break-word"];
 };
 var generateKey = (i = "", value = "") => `${value}-${i}`;
-var getTextOverflowType = (columnFormat, columnId, currentColumn) => getAttributeFromColumnFormat("textOverflow", columnFormat, columnId, currentColumn);
+var getTextOverflowType = (columnFormat, columnId, tableFormat, currentColumn, defaultValue = "break-word") => {
+  const columnTextOverflow = getAttributeFromColumnFormat(
+    "textOverflow",
+    columnFormat,
+    columnId,
+    currentColumn
+  );
+  if (columnTextOverflow) {
+    return columnTextOverflow;
+  }
+  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)),
@@ -2505,14 +2528,12 @@ var generateHeader = (value, columnId, i, columnFormat, tableFormat, showInterna
     ret.showCell = false;
   }
   const headerAlign = getColumnFormatHeaderAlign(columnFormat, columnId, value) || getTableFormatHeaderAlign(tableFormat) || "left";
-  const textOverflowType = getTextOverflowType(columnFormat, columnId, value);
-  const textOverflowStyle = getOverflowStyles({
-    textOverflow: textOverflowType
-  });
   ret.align = headerAlign;
   ret.truncate = true;
-  ret.textOverflowType = textOverflowType;
-  ret.style = textOverflowStyle;
+  const textOverflow = getTextOverflow(columnFormat, columnId, tableFormat, value);
+  if (textOverflow) {
+    ret.textOverflowType = textOverflow;
+  }
   return ret;
 };
 var getColumnFormatAlign = (columnFormat, currentColumn, currentRow) => {
@@ -2878,6 +2899,7 @@ var useTable = (tableArgs = {}) => {
         const textOverflowType = getTextOverflowType(
           cfmt,
           cids[i],
+          tfmt,
           currentHeader.value
         );
         const textOverflowStyle = getOverflowStyles({
@@ -2990,7 +3012,14 @@ var SwitchTableCell = ({ type, children }) => children.filter((child) => child.t
 // src/Table/cells/TextCell.tsx
 var noop4 = () => void 0;
 var TextCell = ({ cell, useMouseOverEffect }) => {
-  const cellStyle = react_exports.useMemo(() => __spreadValues({}, cell.style), [cell.style]);
+  const { cellStyle, textStyle } = react_exports.useMemo(() => {
+    const style = cell.style || {};
+    const _a = style, { whiteSpace, overflow, textOverflow, wordBreak, wordWrap, overflowWrap } = _a, rest = __objRest(_a, ["whiteSpace", "overflow", "textOverflow", "wordBreak", "wordWrap", "overflowWrap"]);
+    return {
+      cellStyle: rest,
+      textStyle: { whiteSpace, overflow, textOverflow, wordBreak, wordWrap, overflowWrap }
+    };
+  }, [cell.style]);
   return /* @__PURE__ */ react_exports.createElement(
     Table_default.Cell,
     {
@@ -3002,21 +3031,31 @@ var TextCell = ({ cell, useMouseOverEffect }) => {
       "data-col-index": cell.columnIndex,
       onClick: useMouseOverEffect ? noop4 : void 0
     },
-    cell.value.toString()
+    /* @__PURE__ */ react_exports.createElement("span", { style: textStyle }, cell.value.toString())
   );
 };
 TextCell.displayName = "TextCell";
 
 // src/Table/cells/ArrayCell.tsx
 var StyledTableCell = styled_components_default(Table_default.Cell)`
-    div {
+    & > div {
         flex-direction: column;
     }
 `;
-var noop5 = () => void 0;
+var ArrayItemDiv = styled_components_default.div`
+    min-width: 0;
+    max-width: 100%;
+`;
 var ArrayCell = ({ cell, useMouseOverEffect }) => {
   const value = react_exports.useMemo(() => Array.isArray(cell.value) ? cell.value : [cell.value], [cell.value]);
-  const cellStyle = react_exports.useMemo(() => __spreadValues({}, cell.style), [cell.style]);
+  const { cellStyle, itemStyle } = react_exports.useMemo(() => {
+    const style = cell.style || {};
+    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 }
+    };
+  }, [cell.style]);
   return /* @__PURE__ */ react_exports.createElement(
     StyledTableCell,
     {
@@ -3024,16 +3063,17 @@ var ArrayCell = ({ cell, useMouseOverEffect }) => {
       align: cell.align,
       "data-test-align-value": cell.align,
       "data-test-cell-type": "ArrayCell",
-      onClick: useMouseOverEffect ? noop5 : void 0
+      onClick: useMouseOverEffect ? lodash_exports.noop : void 0
     },
-    value.map(
+    value.filter((v) => v !== null).map(
       (v, i) => /* @__PURE__ */ react_exports.createElement(
-        "div",
+        ArrayItemDiv,
         {
-          key: v.toString(),
+          key: (0, id_exports.createDOMID)(),
           "data-row-index": cell.rowIndex,
           "data-col-index": cell.columnIndex,
-          "data-array-index": i
+          "data-array-index": i,
+          style: itemStyle
         },
         v.toString()
       )
@@ -3655,12 +3695,30 @@ var FixedTableHead = styled_components_default(Table_default.Head)`
     position: sticky;
     top: 0;
 `;
-var TableHeadCell = styled_components_default(Table_default.HeadCell)`
-    button > span {
+var headerTextOverflowStyles = {
+  ellipsis: `
         word-break: inherit;
         word-wrap: inherit;
-        white-space: ${(props) => props.textOverflowType === "ellipsis" ? "nowrap" : "inherit"};
+        white-space: nowrap;
+        display: inline;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    `,
+  anywhere: `
+        word-break: break-all;
+        white-space: inherit;
         display: inline;
+    `,
+  default: `
+        word-break: inherit;
+        word-wrap: inherit;
+        white-space: inherit;
+        display: inline;
+    `
+};
+var TableHeadCell = styled_components_default(Table_default.HeadCell)`
+    button > span {
+        ${(props) => headerTextOverflowStyles[props.textOverflowType] || headerTextOverflowStyles.default}
     }
 `;
 var VizTableContainer = styled_components_default.div`
@@ -3669,7 +3727,8 @@ var VizTableContainer = styled_components_default.div`
     background-color: ${(props) => (0, colorUtils_exports.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor};
     display: flex;
     flex-flow: column nowrap;
-    overflow: hidden;
+    overflow: hidden !important;
+    height: 100%;
 
     td,
     * > td:hover {
@@ -3700,14 +3759,16 @@ var SUITableContainer = styled_components_default.div`
     }
     box-sizing: border-box;
     flex-grow: 1;
-    overflow: hidden;
+    overflow: auto;
 
     ${({ width, height, isPaging, theme }) => {
   const padding = variables_default.spacingSmall({ theme });
   const paddingOffset = parseInt(padding, 10) * 2;
+  const calculatedHeight = isPaging ? height - PAGINATOR_CONTAINER_HEIGHT - PAGINATOR_SPACING - paddingOffset : height - paddingOffset;
+  const finalHeight = Math.max(calculatedHeight, 1);
   return (0, style_exports.toDimension)({
     width: width - paddingOffset,
-    height: isPaging ? height - PAGINATOR_CONTAINER_HEIGHT - PAGINATOR_SPACING - paddingOffset : height - paddingOffset
+    height: finalHeight
   });
 }};
 
@@ -3814,9 +3875,9 @@ var useTableHead = (visibility) => {
   return Table_default.Head;
 };
 var HeadCell = (_a) => {
-  var _b = _a, { value } = _b, props = __objRest(_b, ["value"]);
+  var _b = _a, { value, textOverflowType } = _b, props = __objRest(_b, ["value", "textOverflowType"]);
   const cellRef = react_exports.useRef(null);
-  return /* @__PURE__ */ react_exports.createElement(TableHeadCell, __spreadValues({ elementRef: cellRef }, props), value);
+  return /* @__PURE__ */ react_exports.createElement(TableHeadCell, __spreadValues({ elementRef: cellRef, textOverflowType }, props), value);
 };
 var fontMap = {
   proportional: "Splunk Platform Sans",
@@ -3868,7 +3929,7 @@ var PureTable = (props) => {
       firstRenderCount.current = count;
       paginatorOnChange(null, { count });
     }
-  }, [count, paginatorProps]);
+  }, [count, paginatorOnChange, paginatorProps]);
   const stringifiedColumnFormat = JSON.stringify(columnFormat);
   const columnFormatRef = react_exports.useRef(stringifiedColumnFormat);
   const modeRef = react_exports.useRef(mode);
@@ -3878,7 +3939,7 @@ var PureTable = (props) => {
       modeRef.current = mode;
       setColumns(columnFormat);
     }
-  }, [mode, stringifiedColumnFormat]);
+  }, [columnFormat, mode, stringifiedColumnFormat]);
   const TableHead = useTableHead(headerVisibility);
   const debouncedDrilldown = react_exports.useMemo(
     () => debounce_default((e, payload) => {
@@ -4084,6 +4145,7 @@ var PureTable = (props) => {
                 onSort: showRowNumbers && value === "#" || isHeaderHidden ? null : onSortToUse,
                 resizable: !isHeaderHidden,
                 style: showRowNumbers && value === "#" ? __spreadProps(__spreadValues({}, style), { cursor: "auto" }) : style,
+                textOverflowType,
                 headerVisibility
               })
             );