@dynatrace/strato-components 1.17.0 → 3.0.1

package/tables/DataTable/components/DataTableCell.js

@@ -0,0 +1,232 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DataTableCell_exports = {};
+__export(DataTableCell_exports, {
+  DataTableCell: () => DataTableCell
+});
+module.exports = __toCommonJS(DataTableCell_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react_table = require("@tanstack/react-table");
+var import_dynamic = require("@vanilla-extract/dynamic");
+var import_clsx = __toESM(require("clsx"));
+var import_react = require("react");
+var import_constants = require("../constants.js");
+var alignmentStyles = __toESM(require("./Alignment.sty.js"));
+var cellStyles = __toESM(require("./DataTableCell.sty.js"));
+var import_useMergeRefs = require("../../../core/hooks/useMergeRefs.js");
+var import_DataTableContext = require("../contexts/DataTableContext.js");
+var tableStyles = __toESM(require("../DataTable.sty.js"));
+var import_Layout = require("../features/Layout/Layout.js");
+var import_RowDetails = require("../features/RowDetails/RowDetails.js");
+var import_row_order_column_utils = require("../features/RowOrder/row-order-column-utils.js");
+var import_RowSelection = require("../features/RowSelection/RowSelection.js");
+var import_SubRowCellContext = require("../features/SubRows/SubRowCellContext.js");
+var import_SubRowExpanders = require("../features/SubRows/SubRowExpanders.js");
+var thresholdStyles = __toESM(require("../features/Thresholds/Thresholds.sty.js"));
+var import_InlineUserActionsMenu = require("../features/UserActions/InlineUserActionsMenu.js");
+var import_RowActions = require("../features/UserActions/RowActions.js");
+function InternalMemoizedCell(props) {
+  const {
+    rowId,
+    virtualRowIndex,
+    columnId,
+    virtualColumnIndex,
+    className,
+    columnMeasure,
+    dragAndDropRef,
+    pillColor,
+    enableExpanding,
+    hasCustomCellRenderer,
+    isSubRowIndicatorColumn,
+    columnType,
+    isLineWrapped,
+    children,
+    canCellAction,
+    subRowDepth,
+    leftPosition,
+    rightPosition,
+    cellActionAriaLabel,
+    thresholdColor,
+    thresholdBackgroundColor
+  } = props;
+  const [hovered, setHovered] = (0, import_react.useState)(false);
+  const mergedRef = (0, import_useMergeRefs.useMergeRefs)([
+    dragAndDropRef,
+    columnMeasure
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      role: columnId === import_Layout.SPACER_COLUMN.id ? "presentation" : "cell",
+      ref: mergedRef,
+      "data-index": `row-${virtualRowIndex}-column-${virtualColumnIndex}`,
+      "data-columnid": columnId,
+      "data-column": virtualColumnIndex,
+      "data-columntype": columnType,
+      "data-subrow-depth": subRowDepth,
+      className,
+      onMouseEnter: () => canCellAction && setHovered(true),
+      onMouseLeave: () => canCellAction && setHovered(false),
+      style: {
+        ...(0, import_dynamic.assignInlineVars)({
+          [thresholdStyles.thresholdPillColor]: pillColor,
+          [cellStyles.leftPositionVar]: leftPosition,
+          [cellStyles.rightPositionVar]: rightPosition
+        }),
+        gridColumnStart: (virtualColumnIndex ?? 0) + 1,
+        gridColumnEnd: "span 1",
+        gridRowStart: 1,
+        gridRowEnd: "span 1",
+        color: thresholdColor,
+        backgroundColor: thresholdBackgroundColor,
+        minWidth: columnId === import_RowActions.ROW_ACTIONS_COLUMN.id ? "max-content" : void 0
+      },
+      children: [
+        enableExpanding === true && !hasCustomCellRenderer && isSubRowIndicatorColumn === true ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SubRowExpanders.SubRowsCellExpander, { columnType }) : null,
+        !hasCustomCellRenderer && columnType !== "sparkline" && columnType !== "meterbar" && columnType !== "log-content" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: (0, import_clsx.default)(
+              cellStyles.innerCell({
+                lineWrap: isLineWrapped
+              })
+            ),
+            children
+          }
+        ) : children,
+        canCellAction && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_InlineUserActionsMenu.InlineUserActionsMenu,
+          {
+            headerGroupOrRowId: rowId,
+            columnId,
+            type: "cell",
+            "aria-label": cellActionAriaLabel,
+            "data-column": virtualColumnIndex,
+            hovered
+          }
+        )
+      ]
+    }
+  );
+}
+function arePropsEqual(prevProps, nextProps) {
+  if (nextProps.hasCustomCellRenderer && nextProps.cellDeps === void 0) {
+    return false;
+  }
+  const { children: _prevChildren, ...prevRest } = prevProps;
+  const { children: _nextChildren, ...nextRest } = nextProps;
+  const keys = Object.keys(nextRest);
+  return keys.every((key) => prevRest[key] === nextRest[key]);
+}
+const DataTableCellMemo = (0, import_react.memo)(InternalMemoizedCell, arePropsEqual);
+function DataTableCell(props) {
+  const {
+    cell,
+    virtualColumnIndex,
+    virtualRowIndex,
+    isInDragOverlay,
+    dragAndDropRef,
+    columnMeasure,
+    hasActiveFloatingMenu,
+    subRowDepth,
+    thresholdPill,
+    rowData,
+    cellDeps
+  } = props;
+  const table = (0, import_DataTableContext.useDataTable)();
+  const { cellActionAriaLabel } = (0, import_DataTableContext.useDataTableContent)();
+  const subrowContext = (0, import_react.useContext)(import_SubRowCellContext.SubrowCellContext);
+  const { row, column, getThresholdColors, getContext } = cell;
+  const visualVariantOptions = table.getVisualVariantOptions();
+  const isLineWrapped = column.getIsLineWrapped();
+  const pillColor = virtualColumnIndex === 0 ? thresholdPill : null;
+  const thresholdCellColors = getThresholdColors();
+  const columnId = column.id;
+  const columnDef = column.columnDef;
+  const hasCustomCellRenderer = columnDef.meta?.hasCustomCellRenderer;
+  const isFirstColumn = virtualColumnIndex === 0;
+  const isPrefixColumn = (0, import_RowSelection.isRowSelectionColumnDef)(columnDef) || (0, import_RowDetails.isRowDetailsColumnDef)(columnDef) || (0, import_row_order_column_utils.isRowDragColumnDef)(columnDef);
+  const pinningState = column.getIsPinned();
+  const leftPinnedPosition = pinningState === "left" ? column.getLeftPinnedPosition() : void 0;
+  const rightPinnedPosition = pinningState === "right" ? column.getRightPinnedPosition() : void 0;
+  const pinnedColumnBg = pinningState && visualVariantOptions.rowSeparation !== "zebraStripes" && (visualVariantOptions.contained ? "contained" : "uncontained");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    DataTableCellMemo,
+    {
+      rowId: row.id,
+      virtualRowIndex: isInDragOverlay ? void 0 : virtualRowIndex,
+      virtualColumnIndex,
+      columnId,
+      subRowDepth,
+      canCellAction: column.getCanCellActions(),
+      columnMeasure,
+      dragAndDropRef: !isInDragOverlay && isFirstColumn ? dragAndDropRef : void 0,
+      pillColor,
+      thresholdColor: thresholdCellColors.color,
+      thresholdBackgroundColor: thresholdCellColors.backgroundColor,
+      enableExpanding: table.options.enableExpanding,
+      leftPosition: leftPinnedPosition !== void 0 ? `${leftPinnedPosition}px` : void 0,
+      rightPosition: rightPinnedPosition !== void 0 ? `${rightPinnedPosition}px` : void 0,
+      hasCustomCellRenderer,
+      isSubRowIndicatorColumn: subrowContext.isSubRowIndicatorColumn,
+      columnType: columnDef.columnType,
+      isLineWrapped,
+      cellActionAriaLabel,
+      className: (0, import_clsx.default)(
+        cellStyles.outerCell({
+          lineWrap: isLineWrapped,
+          fontStyle: column.getFontStyle(),
+          rowDensity: hasCustomCellRenderer ? "customCellRenderer" : visualVariantOptions.rowDensity,
+          interactiveRows: table.options.enableRowInteractivity,
+          verticalDividers: visualVariantOptions.verticalDividers,
+          pinnedColumn: pinningState,
+          background: pinnedColumnBg
+        }),
+        alignmentStyles.horizontalAlignment[columnDef.alignment ?? import_constants.DATA_TABLE_DEFAULT_HORIZONTAL_ALIGNMENT],
+        alignmentStyles.verticalAlignment[table.getBodyVerticalAlignment()],
+        {
+          [thresholdStyles.thresholdPill]: pillColor !== void 0 && pillColor !== null,
+          [tableStyles.prefixColumn]: isPrefixColumn,
+          [tableStyles.pinnedCellInDragOverlay]: pinningState && isInDragOverlay,
+          [cellStyles.activeInteraction]: hasActiveFloatingMenu
+        }
+      ),
+      rowData,
+      tableColumns: table.options.columns,
+      cellDeps,
+      children: hasCustomCellRenderer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_DataTableContext.DataTableColumnContextProvider,
+        {
+          value: column,
+          children: (0, import_react_table.flexRender)(column.columnDef.cell, getContext())
+        }
+      ) : (0, import_react_table.flexRender)(column.columnDef.cell, getContext())
+    }
+  );
+}

package/tables/DataTable/components/DataTableCell.sty.d.ts

@@ -0,0 +1,308 @@
+export declare const leftPositionVar: `var(--${string})`;
+export declare const rightPositionVar: `var(--${string})`;
+export declare const outerCell: import("@vanilla-extract/recipes").RuntimeFn<{
+    prefixColumn: {
+        true: {
+            width: "fit-content";
+        };
+    };
+    lineWrap: {
+        true: {
+            whiteSpace: "normal";
+            textOverflow: "initial";
+            wordBreak: "normal";
+            overflowWrap: "anywhere";
+        };
+        false: {
+            overflow: "hidden";
+            whiteSpace: "nowrap";
+            textOverflow: "ellipsis";
+            maxWidth: "100%";
+        };
+    };
+    fontStyle: {
+        text: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            textDecoration: string;
+            textTransform: any;
+        };
+        code: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            textDecoration: string;
+            textTransform: any;
+        };
+        inherit: {};
+    };
+    rowDensity: {
+        customCellRenderer: {
+            paddingTop: string;
+            paddingRight: string;
+            paddingBottom: string;
+            paddingLeft: string;
+        };
+        default: {
+            paddingTop: string;
+            paddingRight: string;
+            paddingBottom: string;
+            paddingLeft: string;
+            selectors: {
+                [x: string]: {
+                    paddingLeft: string;
+                    paddingTop?: undefined;
+                    paddingBottom?: undefined;
+                } | {
+                    paddingTop: string;
+                    paddingBottom: string;
+                    paddingLeft?: undefined;
+                };
+                "&[data-columntype='sparkline']": {
+                    paddingTop: string;
+                    paddingBottom: string;
+                };
+            };
+        };
+        condensed: {
+            paddingTop: string;
+            paddingRight: string;
+            paddingBottom: string;
+            paddingLeft: string;
+            selectors: {
+                [x: string]: {
+                    paddingLeft: `calc(${string} + ${string})`;
+                    paddingTop?: undefined;
+                    paddingBottom?: undefined;
+                } | {
+                    paddingTop: string;
+                    paddingBottom: string;
+                    paddingLeft?: undefined;
+                };
+                "&[data-columntype='sparkline']": {
+                    paddingTop: string;
+                    paddingBottom: string;
+                };
+            };
+        };
+        comfortable: {
+            paddingTop: string;
+            paddingRight: string;
+            paddingBottom: string;
+            paddingLeft: string;
+            selectors: {
+                [x: string]: {
+                    paddingLeft: string;
+                    paddingTop?: undefined;
+                    paddingBottom?: undefined;
+                } | {
+                    paddingTop: string;
+                    paddingBottom: string;
+                    paddingLeft?: undefined;
+                };
+                "&[data-columntype='sparkline']": {
+                    paddingTop: string;
+                    paddingBottom: string;
+                };
+            };
+        };
+    };
+    verticalDividers: {
+        true: {
+            selectors: {
+                [x: string]: {
+                    content: "\"\"";
+                    display: "block";
+                    position: "absolute";
+                    width: string;
+                    left: number;
+                    top: string;
+                    bottom: string;
+                    backgroundColor: string;
+                    maxWidth: "100%";
+                };
+            };
+        };
+        false: {};
+    };
+    interactiveRows: {
+        false: {};
+    };
+    pinnedColumn: {
+        false: {
+            selectors: {
+                [x: string]: {
+                    content: "unset";
+                };
+            };
+        };
+        left: {
+            position: "sticky";
+            zIndex: 2;
+            left: `var(--resizing-leftPosition, var(--${string}))`;
+            selectors: {
+                [x: string]: {
+                    boxShadow: string;
+                    backgroundColor: string;
+                } | {
+                    boxShadow: string;
+                    backgroundColor?: undefined;
+                } | {
+                    content: "\"\"";
+                    display: "block";
+                    position: "absolute";
+                    width: string;
+                    right: number;
+                    top: number;
+                    bottom: number;
+                    backgroundColor: string;
+                    maxWidth: "100%";
+                    borderBottomLeftRadius?: undefined;
+                } | {
+                    backgroundColor: string;
+                    content?: undefined;
+                    display?: undefined;
+                    position?: undefined;
+                    width?: undefined;
+                    right?: undefined;
+                    top?: undefined;
+                    bottom?: undefined;
+                    maxWidth?: undefined;
+                    borderBottomLeftRadius?: undefined;
+                } | {
+                    top: string;
+                    bottom: string;
+                    content?: undefined;
+                    display?: undefined;
+                    position?: undefined;
+                    width?: undefined;
+                    right?: undefined;
+                    backgroundColor?: undefined;
+                    maxWidth?: undefined;
+                    borderBottomLeftRadius?: undefined;
+                } | {
+                    borderBottomLeftRadius: `calc(${string} - ${string})`;
+                    content?: undefined;
+                    display?: undefined;
+                    position?: undefined;
+                    width?: undefined;
+                    right?: undefined;
+                    top?: undefined;
+                    bottom?: undefined;
+                    backgroundColor?: undefined;
+                    maxWidth?: undefined;
+                };
+                '&:where(:not(:has(~ &)))::after': {
+                    content: "\"\"";
+                    display: "block";
+                    position: "absolute";
+                    width: string;
+                    right: number;
+                    top: number;
+                    bottom: number;
+                    backgroundColor: string;
+                    maxWidth: "100%";
+                };
+            };
+        };
+        right: {
+            position: "sticky";
+            zIndex: 3;
+            right: `var(--resizing-rightPosition, var(--${string}))`;
+            selectors: {
+                [x: string]: {
+                    boxShadow: string;
+                    backgroundColor: string;
+                } | {
+                    boxShadow: string;
+                    backgroundColor?: undefined;
+                } | {
+                    content: "\"\"";
+                    display: "block";
+                    position: "absolute";
+                    width: string;
+                    left: number;
+                    top: number;
+                    bottom: number;
+                    backgroundColor: string;
+                    maxWidth: "100%";
+                    borderBottomRightRadius?: undefined;
+                } | {
+                    backgroundColor: string;
+                    content?: undefined;
+                    display?: undefined;
+                    position?: undefined;
+                    width?: undefined;
+                    left?: undefined;
+                    top?: undefined;
+                    bottom?: undefined;
+                    maxWidth?: undefined;
+                    borderBottomRightRadius?: undefined;
+                } | {
+                    top: string;
+                    bottom: string;
+                    content?: undefined;
+                    display?: undefined;
+                    position?: undefined;
+                    width?: undefined;
+                    left?: undefined;
+                    backgroundColor?: undefined;
+                    maxWidth?: undefined;
+                    borderBottomRightRadius?: undefined;
+                } | {
+                    borderBottomRightRadius: `calc(${string} - ${string})`;
+                    content?: undefined;
+                    display?: undefined;
+                    position?: undefined;
+                    width?: undefined;
+                    left?: undefined;
+                    top?: undefined;
+                    bottom?: undefined;
+                    backgroundColor?: undefined;
+                    maxWidth?: undefined;
+                };
+                '&:where(:not(& + &))::before': {
+                    content: "\"\"";
+                    display: "block";
+                    position: "absolute";
+                    width: string;
+                    left: number;
+                    top: number;
+                    bottom: number;
+                    backgroundColor: string;
+                    maxWidth: "100%";
+                };
+            };
+        };
+    };
+    background: {
+        false: {};
+        contained: {
+            backgroundColor: string;
+        };
+        uncontained: {
+            backgroundColor: string;
+        };
+    };
+}>;
+export declare const innerCell: import("@vanilla-extract/recipes").RuntimeFn<{
+    lineWrap: {
+        true: {
+            whiteSpace: "normal";
+            textOverflow: "initial";
+            wordBreak: "normal";
+            overflowWrap: "anywhere";
+        };
+        false: {
+            overflow: "hidden";
+            whiteSpace: "nowrap";
+            textOverflow: "ellipsis";
+            maxWidth: "100%";
+            minWidth: number;
+        };
+    };
+}>;
+export declare const activeInteraction: string;

package/tables/DataTable/components/DataTableCell.sty.js

@@ -0,0 +1,41 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DataTableCell_css_exports = {};
+__export(DataTableCell_css_exports, {
+  activeInteraction: () => activeInteraction,
+  innerCell: () => innerCell,
+  leftPositionVar: () => leftPositionVar,
+  outerCell: () => outerCell,
+  rightPositionVar: () => rightPositionVar
+});
+module.exports = __toCommonJS(DataTableCell_css_exports);
+var import_DataTable_css_ts_vanilla = require("../DataTable.css");
+var import_DataTableVirtualizationContainer_css_ts_vanilla = require("./DataTableVirtualizationContainer.css");
+var import_RowOrder_css_ts_vanilla = require("../features/RowOrder/RowOrder.css");
+var import_RowDetails_css_ts_vanilla = require("../features/RowDetails/RowDetails.css");
+var import_RowInteractivity_css_ts_vanilla = require("../features/RowInteractivity/RowInteractivity.css");
+var import_DataTableRow_css_ts_vanilla = require("./DataTableRow.css");
+var import_Thresholds_css_ts_vanilla = require("../features/Thresholds/Thresholds.css");
+var import_DataTableCell_css_ts_vanilla = require("./DataTableCell.css");
+var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var activeInteraction = "_1ons7qup-3-0-1";
+var innerCell = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ons7qum-3-0-1", variantClassNames: { lineWrap: { true: "_1ons7qun-3-0-1", false: "_1ons7quo-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
+var leftPositionVar = "var(--_1ons7qu0-3-0-1)";
+var outerCell = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ons7qu2-3-0-1", variantClassNames: { prefixColumn: { true: "_1ons7qu3-3-0-1" }, lineWrap: { true: "_1ons7qu4-3-0-1", false: "_1ons7qu5-3-0-1" }, fontStyle: { text: "_1ons7qu6-3-0-1", code: "_1ons7qu7-3-0-1", inherit: "_1ons7qu8-3-0-1" }, rowDensity: { customCellRenderer: "_1ons7qu9-3-0-1", "default": "_1ons7qua-3-0-1", condensed: "_1ons7qub-3-0-1", comfortable: "_1ons7quc-3-0-1" }, verticalDividers: { true: "_1ons7qud-3-0-1", false: "_1ons7que-3-0-1" }, interactiveRows: { false: "_1ons7quf-3-0-1" }, pinnedColumn: { false: "_1ons7qug-3-0-1", left: "_1ons7quh-3-0-1", right: "_1ons7qui-3-0-1" }, background: { false: "_1ons7quj-3-0-1", contained: "_1ons7quk-3-0-1", uncontained: "_1ons7qul-3-0-1" } }, defaultVariants: { fontStyle: "text", rowDensity: "default", verticalDividers: false }, compoundVariants: [] });
+var rightPositionVar = "var(--_1ons7qu1-3-0-1)";

package/tables/DataTable/components/DataTableContent.d.ts

@@ -0,0 +1,12 @@
+import type { Virtualizer } from '@tanstack/react-virtual';
+import type { JSX } from 'react';
+/**
+ * Renders the content of the `DataTable`.
+ *
+ * This component is responsible for displaying the header and the main body of the datatable,
+ * including rows and columns.
+ */
+export declare const DataTableContent: (props: {
+    rowVirtualizer: Virtualizer<HTMLDivElement, Element>;
+    columnVirtualizer: Virtualizer<HTMLDivElement, Element>;
+}) => JSX.Element | null;