@dynatrace/strato-components 3.0.1 → 3.1.1

package/tables/DataTable/features/CellFormatter/CellFormatter.js

@@ -28,7 +28,35 @@ var import_units = require("@dynatrace-sdk/units");
 var import_default_formatters = require("../../../../core/utils/default-formatters.js");
 var import_logging = require("../../../../core/utils/logging.js");
 var import_string_utils = require("../../../../core/utils/string-utils.js");
-const ColumnCellDateFormatMemo = (0, import_react.memo)(
+const DATETIME_FORMAT_OPTIONS = {
+  // e.g. "12/21/2024" for US English locale
+  date: {
+    year: "numeric",
+    month: "numeric",
+    day: "numeric"
+  },
+  // e.g. "5:45:30 PM" for US English locale
+  time: {
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric"
+  },
+  // e.g. "12/21/2024, 5:45:30 PM" for US English locale
+  datetime: import_default_formatters.DATETIME_DEFAULT_FORMAT_OPTIONS
+};
+function isDatetimeShorthand(formatter) {
+  return formatter === "date" || formatter === "time" || formatter === "datetime";
+}
+function resolveDatetimeFormatter(formatter) {
+  if (!formatter) {
+    return void 0;
+  }
+  if (isDatetimeShorthand(formatter)) {
+    return DATETIME_FORMAT_OPTIONS[formatter];
+  }
+  return formatter;
+}
+const ColumnCellDatetimeFormatMemo = (0, import_react.memo)(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   (props) => {
     return props.value ? (0, import_units.formatDate)(Number(props.value), props.formatter) : "";
@@ -62,12 +90,13 @@ function formatColumnCell(columnDef) {
   if (columnDef.columnType === "sparkline" || columnDef.columnType === "meterbar" || columnDef.columnType === "gantt" || columnDef.columnType === "log-content" || columnDef.columnType === "markdown") {
     return;
   }
-  if (columnDef.columnType === "date") {
+  if (columnDef.columnType === "date" || columnDef.columnType === "datetime") {
+    const resolvedFormatter = resolveDatetimeFormatter(columnDef.formatter);
     return ({ getValue }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      ColumnCellDateFormatMemo,
+      ColumnCellDatetimeFormatMemo,
       {
         value: getValue(),
-        formatter: columnDef.formatter
+        formatter: resolvedFormatter
       }
     );
   }
@@ -117,7 +146,8 @@ function formatCellValue(value, column) {
     return "";
   }
   const cleanedValue = typeof value === "number" || value instanceof Date ? value : Number.isNaN(+value) ? null : (0, import_string_utils.convertToNumberIfPureNumber)(value);
-  if (column.formatter && column.columnType !== "date" && column.columnType !== "currency" && typeof cleanedValue === "number") {
+  if (column.formatter && // DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType.
+  column.columnType !== "date" && column.columnType !== "datetime" && column.columnType !== "currency" && typeof cleanedValue === "number") {
     const formatOptions = column.formatter;
     return (0, import_units.format)(cleanedValue, formatOptions);
   }
@@ -135,12 +165,15 @@ function formatCellValue(value, column) {
   if (column.columnType === "long" && (typeof value === "string" || typeof value === "bigint" || typeof value === "number")) {
     return (0, import_units.formatLong)(value, column.formatter);
   }
-  if (column.columnType === "date" && (typeof cleanedValue === "number" || cleanedValue instanceof Date)) {
-    const formatOptions = column.formatter;
-    if (formatOptions) {
-      return (0, import_units.formatDate)(cleanedValue, formatOptions);
+  if (
+    // DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType
+    (column.columnType === "date" || column.columnType === "datetime") && (typeof cleanedValue === "number" || cleanedValue instanceof Date)
+  ) {
+    const resolvedFormatter = resolveDatetimeFormatter(column.formatter);
+    if (resolvedFormatter) {
+      return (0, import_units.formatDate)(cleanedValue, resolvedFormatter);
     } else {
-      return (0, import_default_formatters.formatDateDefault)(cleanedValue);
+      return (0, import_default_formatters.formatDatetimeDefault)(cleanedValue);
     }
   }
   if (column.columnType === "currency" && typeof cleanedValue === "number") {

package/tables/DataTable/features/CellFormatter/cell-formatter-types.d.ts

@@ -1,4 +1,17 @@
 import type { ConvertibleUnit, FormatDateOptions, FormatOptions, Unit } from '@dynatrace-sdk/units';
+/**
+ * Shorthands for common datetime display modes that can be used as a `formatter`
+ * value on datetime columns instead of full `FormatDateOptions`.
+ *
+ * - `'date'` — only the date portion (e.g. 3/2/2026).
+ * - `'time'` — only the time portion (e.g. 3:47:11 PM).
+ * - `'datetime'` — both date and time (e.g. 3/2/2026, 3:47:11 PM).
+ *
+ * Defaults to `datetime` if no `formatter` is provided on a datetime column.
+ *
+ * @public
+ */
+export type DataTableDatetimeDisplayMode = 'date' | 'time' | 'datetime';
 /**
  * Options to format a currency (incl. locale and properties accepted by Intl.NumberFormat).
  * @public
@@ -21,7 +34,7 @@ export interface FormatterCurrencyOptions extends Omit<Intl.NumberFormatOptions,
  * Definition type for the DataTable column definition formatter options
  * @public
  */
-export type DataTableCellFormatter = FormatOptions<Unit, ConvertibleUnit> | FormatDateOptions | FormatterCurrencyOptions;
+export type DataTableCellFormatter = FormatOptions<Unit, ConvertibleUnit> | FormatDateOptions | DataTableDatetimeDisplayMode | FormatterCurrencyOptions;
 /**
  * Defines the options passed to the format function.
  * @public

package/tables/DataTable/features/ColumnOrder/ColumnOrder.css

@@ -1,11 +1,11 @@
-._1ku1w3z0-3-0-1 {
+._1ku1w3z0-3-1-1 {
   cursor: grabbing;
   box-shadow: var(--dt-box-shadows-surface-flat-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
   z-index: 4;
   overflow: hidden;
 }
-._1ku1w3z1-3-0-1::after {
+._1ku1w3z1-3-1-1::after {
   content: "";
   position: absolute;
   top: 0;
@@ -14,13 +14,13 @@
   width: 3px;
   background: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._1ku1w3z2-3-0-1::after {
+._1ku1w3z2-3-1-1::after {
   left: 0;
 }
-._1ku1w3z3-3-0-1::after {
+._1ku1w3z3-3-1-1::after {
   right: 0;
 }
-._1ku1w3z4-3-0-1::before {
+._1ku1w3z4-3-1-1::before {
   content: "";
   display: block;
   position: absolute;
@@ -29,12 +29,12 @@
   bottom: var(--dt-spacings-size-6, 6px);
   background-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1ku1w3z5-3-0-1 {
+._1ku1w3z5-3-1-1 {
   display: none;
 }
-._1ku1w3z6-3-0-1 {
+._1ku1w3z6-3-1-1 {
   cursor: grab;
 }
-._1ku1w3z7-3-0-1 {
+._1ku1w3z7-3-1-1 {
   pointer-events: none;
 }

package/tables/DataTable/features/ColumnOrder/ColumnOrder.sty.js

@@ -26,7 +26,7 @@ __export(ColumnOrder_css_exports, {
 module.exports = __toCommonJS(ColumnOrder_css_exports);
 var import_ColumnOrder_css_ts_vanilla = require("./ColumnOrder.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var columnDndOverlay = "_1ku1w3z0-3-0-1";
-var headerDragAndDrop = { dragging: "_1ku1w3z5-3-0-1", enabled: "_1ku1w3z6-3-0-1", inactive: "_1ku1w3z7-3-0-1" };
-var insertPositionIndicator = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ku1w3z1-3-0-1", variantClassNames: { left: { true: "_1ku1w3z2-3-0-1", false: "_1ku1w3z3-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var verticalDividers = "_1ku1w3z4-3-0-1";
+var columnDndOverlay = "_1ku1w3z0-3-1-1";
+var headerDragAndDrop = { dragging: "_1ku1w3z5-3-1-1", enabled: "_1ku1w3z6-3-1-1", inactive: "_1ku1w3z7-3-1-1" };
+var insertPositionIndicator = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ku1w3z1-3-1-1", variantClassNames: { left: { true: "_1ku1w3z2-3-1-1", false: "_1ku1w3z3-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
+var verticalDividers = "_1ku1w3z4-3-1-1";

package/tables/DataTable/features/ColumnSizing/ColumnSizing.css

@@ -1,9 +1,9 @@
-._17437gx0-3-0-1 {
+._17437gx0-3-1-1 {
   cursor: col-resize;
 }
-._17437gx0-3-0-1 > * {
+._17437gx0-3-1-1 > * {
   pointer-events: none;
 }
-._17437gx0-3-0-1 ._14sp6az0-3-0-1 * {
+._17437gx0-3-1-1 ._14sp6az0-3-1-1 * {
   pointer-events: none !important;
 }

package/tables/DataTable/features/ColumnSizing/ColumnSizing.sty.js

@@ -23,4 +23,4 @@ __export(ColumnSizing_css_exports, {
 module.exports = __toCommonJS(ColumnSizing_css_exports);
 var import_DataTable_css_ts_vanilla = require("../../DataTable.css");
 var import_ColumnSizing_css_ts_vanilla = require("./ColumnSizing.css");
-var tableColumnResizing = "_17437gx0-3-0-1";
+var tableColumnResizing = "_17437gx0-3-1-1";

package/tables/DataTable/features/ColumnTypes/ColumnTypes.css

@@ -1,4 +1,4 @@
-._19nyr521-3-0-1 {
+._19nyr521-3-1-1 {
   overflow: hidden;
   text-overflow: ellipsis;
 }

package/tables/DataTable/features/ColumnTypes/ColumnTypes.js

@@ -42,6 +42,7 @@ var import_ColumnTypes_css = require("./ColumnTypes.sty.js");
 var import_Sparkline = require("../../../../charts/sparkline/Sparkline.js");
 var import_Markdown = require("../../../../content/markdown/Markdown.js");
 var import_default_formatters = require("../../../../core/utils/default-formatters.js");
+var import_logging = require("../../../../core/utils/logging.js");
 var import_string_utils = require("../../../../core/utils/string-utils.js");
 var import_log_content_highlighting = require("../../../utils/log-content-highlighting.js");
 var import_replace_urls_with_links = require("../../../utils/replace-urls-with-links.js");
@@ -57,6 +58,11 @@ function applyColumnTypes(columnDef, composedDef) {
   if (!columnType) {
     return {};
   }
+  if (columnType === "date") {
+    (0, import_logging.devLog)(
+      "DataTable: columnType 'date' is deprecated and will be removed in a future release. Use 'datetime' instead."
+    );
+  }
   let enableUserActions = true;
   if (columnType === "sparkline") {
     columnDef.disableSorting = true;
@@ -100,6 +106,8 @@ function getAlignmentBasedOnType(columnType) {
     case "currency":
     case "bit":
     case "date":
+    // DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType.
+    case "datetime":
       return "right";
     default:
       return import_constants.DATA_TABLE_DEFAULT_HORIZONTAL_ALIGNMENT;
@@ -109,7 +117,7 @@ function isDatatableGanttColumnConfig(config) {
   return config !== null && config !== void 0 && typeof config === "object" && "nameAccessor" in config;
 }
 function isDatatableSparklineColumnConfig(config) {
-  return config !== null && config !== void 0 && typeof config === "object" && ("color" in config || "variant" in config || "gapPolicy" in config || "curve" in config || "showContextValues" in config);
+  return config !== null && config !== void 0 && typeof config === "object" && ("color" in config || "variant" in config || "gapPolicy" in config || "curve" in config || "showContextValues" in config || "xAxis" in config);
 }
 function isDatatableMarkdownColumnConfig(config) {
   return config !== null && config !== void 0 && typeof config === "object" && "customComponentMappings" in config;
@@ -123,8 +131,8 @@ function isDatatableTextColumnConfig(config) {
 const SparklineMemo = (0, import_react.memo)(import_Sparkline.Sparkline);
 const MeterbarMemo = (0, import_react.memo)(import_MeterBarChart.MeterBarChartRenderer);
 const MarkdownMemo = (0, import_react.memo)(import_Markdown.Markdown);
-const DateMemo = (0, import_react.memo)((props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: (0, import_default_formatters.formatDateDefault)(
+const DatetimeMemo = (0, import_react.memo)((props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: (0, import_default_formatters.formatDatetimeDefault)(
     new Date((0, import_string_utils.convertToNumberIfPureNumber)(props.value))
   ) });
 });
@@ -162,12 +170,20 @@ const CELL_TYPE_RENDERERS = {
       return typeof valueAsNumber === "number" ? (0, import_units.format)(valueAsNumber, { input: import_units.units.data.bit }) : "";
     }
   },
+  // DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType.
   date: (props) => {
     const cellValue = props.getValue();
     if (cellValue === null) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DateMemo, { value: cellValue });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DatetimeMemo, { value: cellValue });
+  },
+  datetime: (props) => {
+    const cellValue = props.getValue();
+    if (cellValue === null) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DatetimeMemo, { value: cellValue });
   },
   text: (props) => {
     const cellValue = props.getValue();
@@ -196,7 +212,8 @@ const CELL_TYPE_RENDERERS = {
         curve: config.curve ?? "linear",
         showContextValues: !!config?.showContextValues,
         labelsAlignment: "right",
-        labelsFixedWidth: rowDensity === "condensed" ? 32 : 42
+        labelsFixedWidth: rowDensity === "condensed" ? 32 : 42,
+        children: config.xAxis && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Sparkline.Sparkline.XAxis, { ...config.xAxis })
       }
     );
   },

package/tables/DataTable/features/ColumnTypes/ColumnTypes.sty.js

@@ -23,4 +23,4 @@ __export(ColumnTypes_css_exports, {
 module.exports = __toCommonJS(ColumnTypes_css_exports);
 var import_ColumnTypes_css_ts_vanilla = require("./ColumnTypes.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var logContentWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_19nyr520-3-0-1", variantClassNames: { linewrap: { false: "_19nyr521-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
+var logContentWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_19nyr520-3-1-1", variantClassNames: { linewrap: { false: "_19nyr521-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });

package/tables/DataTable/features/ColumnTypes/column-types-types.d.ts

@@ -3,12 +3,28 @@ import type { ColorPalette, CustomColorPalette } from '../../../../charts/core/t
 import type { Formatter } from '../../../../charts/core/types/formatter.js';
 import type { GanttChartConfig } from '../../../../charts/gantt-chart/types/gantt-chart.js';
 import type { Components } from '../../../../core/types/markdown/react-markdown.js';
-import type { FormatterCurrencyOptions } from '../CellFormatter/cell-formatter-types.js';
+import type { DataTableDatetimeDisplayMode, FormatterCurrencyOptions } from '../CellFormatter/cell-formatter-types.js';
 /**
  * Available column types for the DataTable.
  * @public
  */
-export type DataTableColumnType = 'text' | 'date' | 'bit' | 'number' | 'long' | 'currency' | 'sparkline' | 'meterbar' | 'gantt' | 'markdown' | 'log-content';
+export type DataTableColumnType = 'text' | 'date' | 'datetime' | 'bit' | 'number' | 'long' | 'currency' | 'sparkline' | 'meterbar' | 'gantt' | 'markdown' | 'log-content';
+/**
+ * The x-axis boundaries props used in the sparkline column.
+ * @public
+ */
+export interface DataTableSparklineXAxisProps {
+    /**
+     * The min value configuration to display in the x-axis
+     * @defaultValue 'auto'
+     */
+    min?: 'auto' | 'data-min' | number | Date;
+    /**
+     * The max value configuration to display in the x-axis
+     * @defaultValue 'auto'
+     */
+    max?: 'auto' | 'data-max' | number | Date;
+}
 /**
  * Defined config options used in sparkline column.
  * @public
@@ -39,6 +55,15 @@ export type DataTableSparklineColumnConfig = {
      * @defaultValue false
      */
     showContextValues?: boolean;
+    /**
+     * Optional x-axis boundary configuration for the sparkline.
+     *
+     * Use this to override the default domain derived from the data.
+     * The `min` and `max` values can be set to `Date`, numeric timestamps,
+     * or automatic data-based boundaries (`'data-min'` / `'data-max'`).
+     * @defaultValue undefined
+     */
+    xAxis?: DataTableSparklineXAxisProps;
 };
 /**
  * Defined configuration options used in meterbar column.
@@ -152,6 +177,10 @@ export type DataTableColumnTypesColumnDef = {
 } | {
     columnType: Extract<DataTableColumnType, 'sparkline'>;
     config?: DataTableSparklineColumnConfig;
+} | {
+    columnType: Extract<DataTableColumnType, 'datetime'>;
+    formatter?: FormatDateOptions | DataTableDatetimeDisplayMode;
+    config?: never;
 } | {
     columnType: Extract<DataTableColumnType, 'date'>;
     formatter?: FormatDateOptions;

package/tables/DataTable/features/Download/Download.d.ts

@@ -1,4 +1,4 @@
-import type { DataTableDownloadProps, DataTableDownloadSlotProps } from './download-types.js';
+import type { DataTableDownloadSlotProps } from './download-types.js';
 import type { TableFeature, TableOptions } from '../../hooks/useTable/types.js';
 import type { DataTableRowData } from '../../public.api.js';
 /**
@@ -12,4 +12,6 @@ export declare const DataTableDownloadData: TableFeature;
  * Configuration hook for download of the DataTable.
  * @internal
  */
-export declare function useDownloadData<TData extends DataTableRowData>(props: DataTableDownloadProps, options: TableOptions<TData>): void;
+export declare function useDownloadData<TData extends DataTableRowData>(props: {
+    onDownloadData?: (subset: 'all' | 'page' | 'selected', excludedColumns?: string[]) => void;
+}, options: TableOptions<TData>): void;

package/tables/DataTable/features/Download/Download.js

@@ -102,7 +102,7 @@ async function getCsv(table, rowModel, excludeColumns) {
 function downloadData(table, rowModel, subset, excludeColumns) {
   getCsv(table, rowModel, excludeColumns).then((rows) => {
     const csvString = (0, import_download_utils.convertArrayToCsv)(rows);
-    (0, import_download.downloadCSV)(csvString, import_constants.DATA_TABLE__DOWNLOAD_CSV_FILE_NAME);
+    (0, import_download.downloadCSV)(csvString, import_constants.DATA_TABLE_DOWNLOAD_CSV_FILE_NAME);
     table.options.onDownloadData?.(
       subset,
       ...excludeColumns ? [excludeColumns] : []
@@ -135,7 +135,8 @@ const DataTableDownloadData = {
       if (cellValue instanceof Date) {
         return cellValue.toISOString();
       }
-      if (column.columnDef.columnType === "date" && (typeof cellValue === "string" || typeof cellValue === "number")) {
+      if ((column.columnDef.columnType === "datetime" || // DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType.
+      column.columnDef.columnType === "date") && (typeof cellValue === "string" || typeof cellValue === "number")) {
         const cellDate = new Date(cellValue);
         if (!isNaN(cellDate.getTime())) {
           return cellDate.toISOString();

package/tables/DataTable/features/Download/download-types.d.ts

@@ -1,17 +1,19 @@
 /**
- * DataTable props extensions for the download feature
+ * DataTable props extensions for the download feature.
  * @public
+ * @deprecated Will be removed. Please use the `onDownloadData` callback on the `DataTable.DownloadData` slot instead.
  */
 export interface DataTableDownloadProps {
     /**
      * Called when table data was downloaded (programmatically or via the toolbar).
-     * @param subset - indicates which data was downloaded (all data, current page, selected rows)
+     * @param subset - indicates which data was downloaded (all data, current page or selected rows).
      * @param excludedColumns - array of column IDs that were excluded from the download.
+     * @deprecated Will be removed. Please use the `onDownloadData` callback on the `DataTable.DownloadData` slot instead.
      */
     onDownloadData?: (subset: 'all' | 'page' | 'selected', excludedColumns?: string[]) => void;
 }
 /**
- * DataTable slot definition for the Download action
+ * DataTable slot definition for the Download action.
  * @public
  */
 export interface DataTableDownloadSlotProps {
@@ -19,6 +21,12 @@ export interface DataTableDownloadSlotProps {
      * Array of column IDs that can optionally be excluded from the download.
      */
     excludeColumns?: string[];
+    /**
+     * Called when table data was downloaded via the toolbar, or programmatically when the slot is configured.
+     * @param subset - indicates which data was downloaded (all data, current page or selected rows).
+     * @param excludedColumns - array of column IDs that were excluded from the download.
+     */
+    onDownloadData?: (subset: 'all' | 'page' | 'selected', excludedColumns?: string[]) => void;
 }
 /**
  * Extension interface for the TanStack table instance.
@@ -56,5 +64,5 @@ export interface DataTableDownloadDataCell {
     _getDownloadString: () => string;
 }
 export interface DataTableDownloadDataOptions {
-    onDownloadData?: DataTableDownloadProps['onDownloadData'];
+    onDownloadData?: (subset: 'all' | 'page' | 'selected', excludedColumns?: string[]) => void;
 }

package/tables/DataTable/features/GanttChart/DataTableGanttChartCell.css

@@ -1,11 +1,11 @@
-._5jn5tp0-3-0-1 {
+._5jn5tp0-3-1-1 {
   height: 100%;
   width: 100%;
 }
-._5jn5tp1-3-0-1 {
+._5jn5tp1-3-1-1 {
   padding-right: 0;
   pointer-events: auto;
 }
-._5jn5tp1-3-0-1:not(:has(._1udh2jz2-3-0-1)) {
+._5jn5tp1-3-1-1:not(:has(._1udh2jz2-3-1-1)) {
   padding-left: 0;
 }

package/tables/DataTable/features/GanttChart/DataTableGanttChartCell.sty.js

@@ -37,5 +37,5 @@ var import_DataTableHeaderCell_css_ts_vanilla = require("../../components/DataTa
 var import_DataTableDefaultCell_css_ts_vanilla = require("../../components/DataTableDefaultCell.css");
 var import_SubRows_css_ts_vanilla = require("../SubRows/SubRows.css");
 var import_DataTableGanttChartCell_css_ts_vanilla = require("./DataTableGanttChartCell.css");
-var ganttChartCell = "_5jn5tp0-3-0-1";
-var ganttChartDefaultCell = "_5jn5tp1-3-0-1";
+var ganttChartCell = "_5jn5tp0-3-1-1";
+var ganttChartDefaultCell = "_5jn5tp1-3-1-1";

package/tables/DataTable/features/GanttChart/DataTableGanttChartGrid.css

@@ -1,4 +1,4 @@
-._evozey0-3-0-1 {
+._evozey0-3-1-1 {
   position: absolute;
   inset: 0;
   margin-left: auto;

package/tables/DataTable/features/GanttChart/DataTableGanttChartGrid.sty.js

@@ -22,4 +22,4 @@ __export(DataTableGanttChartGrid_css_exports, {
 });
 module.exports = __toCommonJS(DataTableGanttChartGrid_css_exports);
 var import_DataTableGanttChartGrid_css_ts_vanilla = require("./DataTableGanttChartGrid.css");
-var ganttChartGrid = "_evozey0-3-0-1";
+var ganttChartGrid = "_evozey0-3-1-1";

package/tables/DataTable/features/GanttChart/DataTableGanttChartHeader.css

@@ -1,14 +1,14 @@
-._10y95u40-3-0-1 {
+._10y95u40-3-1-1 {
   padding-right: 0;
   align-items: center;
 }
-._11pvd3zj-3-0-1:not(._11pvd3z8-3-0-1) ._10y95u40-3-0-1 {
+._11pvd3zj-3-1-1:not(._11pvd3z8-3-1-1) ._10y95u40-3-1-1 {
   width: 100%;
   padding-left: 0;
 }
-._11pvd3z8-3-0-1 ._10y95u40-3-0-1 {
+._11pvd3z8-3-1-1 ._10y95u40-3-1-1 {
   width: 100%;
 }
-._10y95u40-3-0-1 span {
+._10y95u40-3-1-1 span {
   margin-top: 0 !important;
 }

package/tables/DataTable/features/GanttChart/DataTableGanttChartHeader.sty.js

@@ -27,4 +27,4 @@ var import_ColumnOrder_css_ts_vanilla = require("../ColumnOrder/ColumnOrder.css"
 var import_Thresholds_css_ts_vanilla = require("../Thresholds/Thresholds.css");
 var import_DataTableHeaderCell_css_ts_vanilla = require("../../components/DataTableHeaderCell.css");
 var import_DataTableGanttChartHeader_css_ts_vanilla = require("./DataTableGanttChartHeader.css");
-var ganttChartHeader = "_10y95u40-3-0-1";
+var ganttChartHeader = "_10y95u40-3-1-1";

package/tables/DataTable/features/Layout/Layout.js

@@ -226,7 +226,7 @@ const Layout = {
         const firstVirtualItem = virtualItems[0];
         let spacerRowHeight = 0;
         if (firstVirtualItem.index > 0) {
-          const scrollPaddingStart = table.getTotalHeaderHeight() * 2;
+          const scrollPaddingStart = table.getTotalHeaderHeight();
           spacerRowHeight = firstVirtualItem.start - scrollPaddingStart;
         }
         return `${headerRows} ${spacerRowHeight}px ${bodyRows} [body-end]`;

package/tables/DataTable/features/LoadingState/LoadingState.css

@@ -1,6 +1,6 @@
-._14flfjk1-3-0-1 {
+._14flfjk1-3-1-1 {
   z-index: 1;
   position: absolute;
   inset: 0;
-  top: var(--_14flfjk0-3-0-1);
+  top: var(--_14flfjk0-3-1-1);
 }

package/tables/DataTable/features/LoadingState/LoadingState.sty.js

@@ -23,5 +23,5 @@ __export(LoadingState_css_exports, {
 });
 module.exports = __toCommonJS(LoadingState_css_exports);
 var import_LoadingState_css_ts_vanilla = require("./LoadingState.css");
-var dataTableHeaderHeight = "var(--_14flfjk0-3-0-1)";
-var loadingState = "_14flfjk1-3-0-1";
+var dataTableHeaderHeight = "var(--_14flfjk0-3-1-1)";
+var loadingState = "_14flfjk1-3-1-1";

package/tables/DataTable/features/RowDetails/RowDetails.css

@@ -1,4 +1,4 @@
-._2twyod0-3-0-1::before {
+._2twyod0-3-1-1::before {
   content: "";
   display: block;
   top: 0;
@@ -8,10 +8,10 @@
   width: 100%;
   z-index: 4;
 }
-._or8s40-3-0-1 ._2twyod0-3-0-1::before, ._2twyod0-3-0-1:not(:first-child)::before {
+._or8s40-3-1-1 ._2twyod0-3-1-1::before, ._2twyod0-3-1-1:not(:first-child)::before {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._2twyod1-3-0-1 {
+._2twyod1-3-1-1 {
   position: relative;
   box-sizing: border-box;
   border-bottom-width: 1px;
@@ -19,40 +19,40 @@
   border-bottom-color: transparent;
   overflow: hidden;
 }
-._2twyod1-3-0-1:not(:has(+ ._2twyod0-3-0-1)) {
+._2twyod1-3-1-1:not(:has(+ ._2twyod0-3-1-1)) {
   border-bottom-color: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._2twyod4-3-0-1:not(._or8s40-3-0-1 ._2twyod4-3-0-1) {
+._2twyod4-3-1-1:not(._or8s40-3-1-1 ._2twyod4-3-1-1) {
   opacity: 0;
 }
-._2twyod6-3-0-1 {
+._2twyod6-3-1-1 {
   border-top: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._2twyod7-3-0-1 {
+._2twyod7-3-1-1 {
   border-top: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._2twyod8-3-0-1 {
+._2twyod8-3-1-1 {
   border-bottom-width: 0;
 }
-._2twyod9-3-0-1 {
+._2twyod9-3-1-1 {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._2twyoda-3-0-1 {
+._2twyoda-3-1-1 {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
 }
-._2twyodc-3-0-1 {
+._2twyodc-3-1-1 {
   padding-top: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-8, 8px);
   padding-left: var(--dt-spacings-size-12, 12px);
 }
-._2twyodd-3-0-1 {
+._2twyodd-3-1-1 {
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-right: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   padding-left: var(--dt-spacings-size-6, 6px);
 }
-._2twyode-3-0-1 {
+._2twyode-3-1-1 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-right: var(--dt-spacings-size-16, 16px);
   padding-bottom: var(--dt-spacings-size-12, 12px);

package/tables/DataTable/features/RowDetails/RowDetails.sty.js

@@ -26,6 +26,6 @@ module.exports = __toCommonJS(RowDetails_css_exports);
 var import_RowOrder_css_ts_vanilla = require("../RowOrder/RowOrder.css");
 var import_RowDetails_css_ts_vanilla = require("./RowDetails.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var rowDetailsExpandedRowCell = "_2twyod0-3-0-1";
-var rowDetailsRow = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_2twyod1-3-0-1", variantClassNames: { rowParity: { even: "_2twyod2-3-0-1", odd: "_2twyod3-3-0-1" }, isDraggedRow: { true: "_2twyod4-3-0-1" }, rowSeparation: { none: "_2twyod5-3-0-1", horizontalDividers: "_2twyod6-3-0-1", zebraStripes: "_2twyod7-3-0-1" }, isLastRow: { true: "_2twyod8-3-0-1" } }, defaultVariants: {}, compoundVariants: [[{ rowSeparation: "zebraStripes", rowParity: "even" }, "_2twyod9-3-0-1"], [{ rowSeparation: "zebraStripes", rowParity: "odd" }, "_2twyoda-3-0-1"]] });
-var rowDetailsWrapperCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_2twyodb-3-0-1", variantClassNames: { rowDensity: { "default": "_2twyodc-3-0-1", condensed: "_2twyodd-3-0-1", comfortable: "_2twyode-3-0-1" } }, defaultVariants: { rowDensity: "default" }, compoundVariants: [] });
+var rowDetailsExpandedRowCell = "_2twyod0-3-1-1";
+var rowDetailsRow = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_2twyod1-3-1-1", variantClassNames: { rowParity: { even: "_2twyod2-3-1-1", odd: "_2twyod3-3-1-1" }, isDraggedRow: { true: "_2twyod4-3-1-1" }, rowSeparation: { none: "_2twyod5-3-1-1", horizontalDividers: "_2twyod6-3-1-1", zebraStripes: "_2twyod7-3-1-1" }, isLastRow: { true: "_2twyod8-3-1-1" } }, defaultVariants: {}, compoundVariants: [[{ rowSeparation: "zebraStripes", rowParity: "even" }, "_2twyod9-3-1-1"], [{ rowSeparation: "zebraStripes", rowParity: "odd" }, "_2twyoda-3-1-1"]] });
+var rowDetailsWrapperCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_2twyodb-3-1-1", variantClassNames: { rowDensity: { "default": "_2twyodc-3-1-1", condensed: "_2twyodd-3-1-1", comfortable: "_2twyode-3-1-1" } }, defaultVariants: { rowDensity: "default" }, compoundVariants: [] });