@dynatrace/strato-components 3.12.2 → 3.13.0

package/tables/DataTable/components/Toolbar/ColumnSettings/column-settings-utils.d.ts

@@ -1,7 +1,8 @@
-import type { ColumnPinningState, RowData, TableFeatures, Column_Internal } from '@tanstack/react-table';
+import type { ColumnPinningState, RowData, Column } from '@tanstack/react-table';
 import { type JSX } from 'react';
 import { type IntlShape } from 'react-intl';
 import type { DataTableColumnVisibilityState, DataTableVisibleColumnLimits } from '../../../features/ColumnVisibility/column-visibility-types.js';
+import type { TDataTableFeatures } from '../../../features/types/features.types.js';
 /**
  * Generates a map of column IDs to their lowercase labels for efficient filtering.
  *
@@ -9,7 +10,7 @@ import type { DataTableColumnVisibilityState, DataTableVisibleColumnLimits } fro
  * @returns A map of column IDs to lowercase labels.
  * @internal
  */
-export declare function generateColumnLabelsMap<TFeatures extends TableFeatures, TData extends RowData>(columns: Column_Internal<TFeatures, TData>[]): Map<string, string>;
+export declare function generateColumnLabelsMap<TData extends RowData>(columns: Column<TDataTableFeatures, TData>[]): Map<string, string>;
 /**
  * Processes a filter string into an array of lowercase words.
  * @param filterValue - The filter string to process.
@@ -69,11 +70,11 @@ export declare function getVisibilityLimitMessage(showMinError: boolean, errorLi
  * @param columns - the leaf column ids.
  * @remarks The same parent column may appear multiple times in the pinned areas.
  */
-export declare function groupColumns<TFeatures extends TableFeatures, TData extends RowData>(columns: Column_Internal<TFeatures, TData>[]): Column_Internal<TFeatures, TData>[];
+export declare function groupColumns<TData extends RowData>(columns: Column<TDataTableFeatures, TData>[]): Column<TDataTableFeatures, TData>[];
 /**
  * @returns true if *at least one* of the child columns can be hidden, false otherwise.
  */
-export declare function isParentColumnHideable<TFeatures extends TableFeatures, TData extends RowData>(childColumns: Column_Internal<TFeatures, TData>[]): boolean;
+export declare function isParentColumnHideable<TData extends RowData>(childColumns: Column<TDataTableFeatures, TData>[]): boolean;
 /**
  * Generates an object with the visibility of each column.
  * @param columns - The columns in the table.
@@ -81,7 +82,7 @@ export declare function isParentColumnHideable<TFeatures extends TableFeatures,
  * @returns an object that contains the column ids as keys with their visibility as values.
  * @internal
  */
-export declare function generateColumnVisibilityObject<TFeatures extends TableFeatures, TData extends RowData>(columns: Column_Internal<TFeatures, TData>[], columnVisibility?: Record<string, boolean>): Record<string, boolean>;
+export declare function generateColumnVisibilityObject<TData extends RowData>(columns: Column<TDataTableFeatures, TData>[], columnVisibility?: Record<string, boolean>): Record<string, boolean>;
 /**
  * Returns the local column visibility of multiple columns used when clicking show/hide all or parent column toggles.
  * @param columns - The columns in the table.
@@ -89,13 +90,13 @@ export declare function generateColumnVisibilityObject<TFeatures extends TableFe
  * @param localColumnsVisibilityState - The current column visibility state in the settings.
  * @internal
  */
-export declare function getMultipleLocalColumnVisibility<TFeatures extends TableFeatures, TData extends RowData>(columns: Column_Internal<TFeatures, TData>[], currentVisibility: boolean | 'indeterminate', localColumnsVisibilityState?: Record<string, boolean>): Record<string, boolean>;
+export declare function getMultipleLocalColumnVisibility<TData extends RowData>(columns: Column<TDataTableFeatures, TData>[], currentVisibility: boolean | 'indeterminate', localColumnsVisibilityState?: Record<string, boolean>): Record<string, boolean>;
 /**
  * Returns the current visibility toggle state based on the column visibility state.
  * @param columnVisibilityState - the current column visibility state.
  * @param column - the column to get the visibility state for.
  */
-export declare function getVisibilityState<TFeatures extends TableFeatures, TData extends RowData>(columnVisibilityState: Record<string, boolean>, column: Column_Internal<TFeatures, TData>): boolean | 'indeterminate';
+export declare function getVisibilityState<TData extends RowData>(columnVisibilityState: Record<string, boolean>, column: Column<TDataTableFeatures, TData>): boolean | 'indeterminate';
 /**
  * Gets the combined visibility toggle state for a parent column.
  * @param columnVisibilityState - The visibility of the table columns.
@@ -108,7 +109,7 @@ export declare function getVisibilityState<TFeatures extends TableFeatures, TDat
  *  - `indeterminate` otherwise.
  * @internal
  */
-export declare function getCombinedVisibilityState<TFeatures extends TableFeatures, TData extends RowData>(columnVisibilityState: Record<string, boolean>, columns: Column_Internal<TFeatures, TData>[], skipNonHideable?: boolean): boolean | 'indeterminate';
+export declare function getCombinedVisibilityState<TData extends RowData>(columnVisibilityState: Record<string, boolean>, columns: Column<TDataTableFeatures, TData>[], skipNonHideable?: boolean): boolean | 'indeterminate';
 /**
  * Determines whether the visibility of one or multiple columns has changed.
  * @param columnVisibilityToReset - The column visibility state that is used to reset.
@@ -123,7 +124,7 @@ export declare function getHasVisibilityChanged(columnVisibilityToReset: DataTab
  * @param columnOrder - the column order with leaf columns only.
  * @returns the column order including parent ids and a list of unique parent ids.
  */
-export declare function generateColumnOrderWithParentIds<TFeatures extends TableFeatures, TData extends RowData>(getColumn: (columnId: string) => Column_Internal<TFeatures, TData> | undefined, columnOrder?: string[]): {
+export declare function generateColumnOrderWithParentIds<TData extends RowData>(getColumn: (columnId: string) => Column<TDataTableFeatures, TData> | undefined, columnOrder?: string[]): {
     columnOrderWithParents: string[];
     uniqueParentIds: string[];
 };

package/tables/DataTable/components/Toolbar/ColumnSettings/column-settings-utils.js

@@ -240,5 +240,5 @@ function getHasColumnPinningChanged(columnPinnedToReset, localColumnsPinned) {
   if (!columnPinnedToReset) {
     return false;
   }
-  return !(0, import_lodash_es.isEqual)(columnPinnedToReset.left, localColumnsPinned.left) || !(0, import_lodash_es.isEqual)(columnPinnedToReset.right, localColumnsPinned.right);
+  return !(0, import_lodash_es.isEqual)(columnPinnedToReset.start, localColumnsPinned.start) || !(0, import_lodash_es.isEqual)(columnPinnedToReset.end, localColumnsPinned.end);
 }

package/tables/DataTable/components/Toolbar/Download/DataTableDownloadData.css

@@ -1,9 +1,9 @@
-._1gjma320-3-12-2 {
+._1gjma320-3-13-0 {
   gap: var(--dt-spacings-size-24, 24px);
 }
-._1gjma321-3-12-2 {
+._1gjma321-3-13-0 {
   white-space: nowrap;
 }
-._1m01arl7-3-12-2 ._1gjma321-3-12-2 {
+._1m01arl7-3-13-0 ._1gjma321-3-13-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }

package/tables/DataTable/components/Toolbar/Download/DataTableDownloadData.sty.js

@@ -23,5 +23,5 @@ __export(DataTableDownloadData_css_exports, {
 module.exports = __toCommonJS(DataTableDownloadData_css_exports);
 var import_Menu_css_ts_vanilla = require("../../../../../navigation/menu/Menu.css");
 var import_DataTableDownloadData_css_ts_vanilla = require("./DataTableDownloadData.css");
-var downloadMenuItem = "_1gjma320-3-12-2";
-var downloadMenuSuffix = "_1gjma321-3-12-2";
+var downloadMenuItem = "_1gjma320-3-13-0";
+var downloadMenuSuffix = "_1gjma321-3-13-0";

package/tables/DataTable/contexts/DataTableContext.d.ts

@@ -1,19 +1,19 @@
-import type { ReactTable, Cell, CellData, Column, Header, Row, RowData } from '@tanstack/react-table';
+import type { Cell, CellData, Column, Header, Row, RowData } from '@tanstack/react-table';
 import { type PropsWithChildren, type JSX } from 'react';
 import type { TDataTableFeatures } from '../features/types/features.types.js';
+import type { DataTableInstance } from '../features/types/table.types.js';
 import type { DataTableColumnSettingsConfig } from '../public.api.js';
 /** @internal */
-export declare function DataTableContextProvider<TFeatures extends TDataTableFeatures, TData extends RowData>(props: PropsWithChildren<{
-    value: ReactTable<TFeatures, TData>;
+export declare function DataTableContextProvider<TData extends RowData>(props: PropsWithChildren<{
+    value: DataTableInstance<TData>;
 }>): JSX.Element;
 /** @internal */
-export declare function useDataTable(): ReactTable<TDataTableFeatures, RowData>;
+export declare function useDataTable(): DataTableInstance<RowData>;
 /** @internal */
 interface DataTableContentContextProps {
     hasOverflowLeft: boolean;
     hasOverflowRight: boolean;
     isHorizontallyScrollable: boolean;
-    cellActionAriaLabel: string;
 }
 export declare const DataTableContentContext: import("react").Context<DataTableContentContextProps>;
 /** @internal */
@@ -23,7 +23,7 @@ export declare function DataTableContentContextProvider(props: PropsWithChildren
 /** @internal */
 export declare function useDataTableContent(): DataTableContentContextProps;
 /** @internal */
-export declare const DataTableHeaderContext: import("react").Context<any>;
+export declare const DataTableHeaderContext: import("react").Context<Header<TDataTableFeatures, RowData, unknown> | null>;
 /** @internal */
 export declare function DataTableHeaderContextProvider(props: PropsWithChildren<{
     value?: Header<TDataTableFeatures, RowData, CellData>;

package/tables/DataTable/contexts/DataTableContext.js

@@ -41,12 +41,16 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 const DataTableContext = (0, import_react.createContext)(null);
 function DataTableContextProvider(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataTableContext.Provider, { value: props.value, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    DataTableContext.Provider,
+    {
+      value: props.value,
+      children: props.children
+    }
+  );
 }
 function useDataTable() {
-  const table = (0, import_react.useContext)(
-    DataTableContext
-  );
+  const table = (0, import_react.useContext)(DataTableContext);
   if (table === null) {
     throw new Error("Table instance is not defined in context.");
   }
@@ -55,8 +59,7 @@ function useDataTable() {
 const DEFAULT_CONTENT_CONTEXT = {
   hasOverflowLeft: false,
   hasOverflowRight: false,
-  isHorizontallyScrollable: false,
-  cellActionAriaLabel: ""
+  isHorizontallyScrollable: false
 };
 const DataTableContentContext = (0, import_react.createContext)(DEFAULT_CONTENT_CONTEXT);
 function DataTableContentContextProvider(props) {

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

@@ -1,5 +1,6 @@
-import type { ColumnDefTemplate, CellContext, CellData, RowData, TableFeatures } from '@tanstack/react-table';
+import type { ColumnDefTemplate, CellContext, CellData, RowData } from '@tanstack/react-table';
 import type { DataTableDisplayColumnDef, DataTableRowData } from '../../public.api.js';
+import type { TDataTableFeatures } from '../types/features.types.js';
 /**
  * Updates the cell renderer with the formatter from the column definition
  * @param columnDef - column definition prop
@@ -7,8 +8,8 @@ import type { DataTableDisplayColumnDef, DataTableRowData } from '../../public.a
  * @returns the column definition with the formatter applied
  * @internal
  */
-export declare function applyColumnFormatters<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData>(columnDef: DataTableDisplayColumnDef<TData, TValue>): {
-    cell?: ColumnDefTemplate<CellContext<TFeatures, TData, TValue>>;
+export declare function applyColumnFormatters<TData extends RowData, TValue extends CellData = CellData>(columnDef: DataTableDisplayColumnDef<TData, TValue>): {
+    cell?: ColumnDefTemplate<CellContext<TDataTableFeatures, TData, TValue>>;
 };
 /**
  * Formats the given value based on formatter options from the column definition.

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

@@ -56,13 +56,17 @@ function resolveDatetimeFormatter(formatter) {
   return formatter;
 }
 const ColumnCellDatetimeFormatMemo = (0, import_react.memo)(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // oxlint-disable-next-line typescript/no-explicit-any
   (props) => {
-    return props.value ? (0, import_units.formatDate)(Number(props.value), props.formatter) : "";
+    if (!props.value) {
+      return "";
+    }
+    const date = props.value instanceof Date ? props.value : new Date((0, import_string_utils.convertToNumberIfPureNumber)(String(props.value)));
+    return Number.isNaN(date.getTime()) ? "" : (0, import_units.formatDate)(date, props.formatter);
   }
 );
 const ColumnCellCurrencyFormatMemo = (0, import_react.memo)(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // oxlint-disable-next-line typescript/no-explicit-any
   (props) => {
     if (props.value === null || props.value === void 0 || isNaN(props.value)) {
       return "";
@@ -75,7 +79,7 @@ const ColumnCellCurrencyFormatMemo = (0, import_react.memo)(
   }
 );
 const ColumnCellFormatMemo = (0, import_react.memo)(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // oxlint-disable-next-line typescript/no-explicit-any
   (props) => {
     return (0, import_units.format)(Number(props.value), props.formatter);
   }
@@ -144,7 +148,7 @@ function formatCellValue(value, column) {
     (0, import_logging.devLog)(`The value '${value}' can not be formatted!`);
     return "";
   }
-  const cleanedValue = typeof value === "number" || value instanceof Date ? value : Number.isNaN(+value) ? null : (0, import_string_utils.convertToNumberIfPureNumber)(value);
+  const cleanedValue = typeof value === "number" || value instanceof Date ? value : Number.isNaN(+value) ? null : (0, import_string_utils.convertToNumberIfPureNumber)(String(value));
   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;
@@ -164,15 +168,23 @@ 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 (
-    // 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.formatDatetimeDefault)(cleanedValue);
+  if (column.columnType === "date" || column.columnType === "datetime") {
+    let dateValue = null;
+    if (typeof cleanedValue === "number" || cleanedValue instanceof Date) {
+      dateValue = cleanedValue;
+    } else if (typeof value === "string") {
+      const date = new Date(value);
+      if (!Number.isNaN(date.getTime())) {
+        dateValue = date;
+      }
+    }
+    if (dateValue !== null) {
+      const resolvedFormatter = resolveDatetimeFormatter(column.formatter);
+      if (resolvedFormatter) {
+        return (0, import_units.formatDate)(dateValue, resolvedFormatter);
+      } else {
+        return (0, import_default_formatters.formatDatetimeDefault)(dateValue);
+      }
     }
   }
   if (column.columnType === "currency" && typeof cleanedValue === "number") {

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

@@ -1,18 +1,18 @@
-import { type TableFeature, type TableOptions } from '@tanstack/react-table';
-import type { ColumnFontStyleFeatureConstructors, DataTableColumnFontStyleProps } from './column-font-style-types.js';
+import { type TableFeature } from '@tanstack/react-table';
+import type { DataTableColumnFontStyleProps } from './column-font-style-types.js';
 import type { DataTableRowData } from '../../row-data-types.js';
-import type { TDataTableFeatures } from '../types/features.types.js';
+import type { DataTableOptions } from '../types/table.types.js';
 /**
  * Configuration hook for the DataTable FontStyle feature.
  * @internal
  */
-export declare function useColumnFontStyle<TData extends DataTableRowData>(props: DataTableColumnFontStyleProps, options: TableOptions<TDataTableFeatures, Exclude<TData, unknown>>): void;
-export declare function constructColumnFontStyleFeature(): TableFeature<ColumnFontStyleFeatureConstructors>;
+export declare function useColumnFontStyle<TData extends DataTableRowData>(props: DataTableColumnFontStyleProps, options: DataTableOptions<Exclude<TData, unknown>>): void;
+export declare function constructColumnFontStyleFeature(): TableFeature;
 /**
  * Feature implementation for FontStyle. This contains the logic that will be given
  * to the tanstack table. The implementing interface is important as these are
  * the function that will be called by the tanstack table core during render.
  * @internal
  */
-export declare const DataTableColumnFontStyleFeature: TableFeature<ColumnFontStyleFeatureConstructors>;
+export declare const DataTableColumnFontStyleFeature: TableFeature;
 //# sourceMappingURL=ColumnFontStyle.d.ts.map

package/tables/DataTable/features/ColumnFontStyle/ColumnFontStyle.js

@@ -25,6 +25,7 @@ module.exports = __toCommonJS(ColumnFontStyle_exports);
 var import_react_table = require("@tanstack/react-table");
 var import_useControllableState = require("../../../../core/hooks/useControllableState.js");
 var import_useDataTableConfig = require("../../../hooks/useDataTableConfig.js");
+var import_table_types = require("../types/table.types.js");
 function useColumnFontStyle(props, options) {
   const configFontStyle = (0, import_useDataTableConfig.useDataTableConfigElement)("fontStyle");
   const [columnFontStyle, onColumnFontStyleChange] = (0, import_useControllableState.useControllableState)({
@@ -52,7 +53,7 @@ function column_toggleFontStyle(column, value) {
       if (old[column.id] !== void 0) {
         newValue = old[column.id] === "code" ? "text" : "code";
       } else {
-        newValue = column.table.store.state.visualVariantConfig.fontStyle === "code" ? "text" : "code";
+        newValue = column.table.atoms.visualVariantConfig?.get().fontStyle === "code" ? "text" : "code";
       }
     }
     return {
@@ -76,23 +77,32 @@ function constructColumnFontStyleFeature() {
         ...initialState
       };
     },
-    assignColumnPrototype: (prototype, table) => {
-      (0, import_react_table.assignPrototypeAPIs)("DataTableColumnFontStyleFeature", prototype, table, {
-        column_getFontStyle: {
-          fn: (column) => column_getFontStyle(column)
-        },
-        column_toggleFontStyle: {
-          fn: (column, value) => column_toggleFontStyle(column, value)
-        }
-      });
-    },
-    constructTableAPIs: (table) => {
-      (0, import_react_table.assignTableAPIs)("DataTableColumnFontStyleFeature", table, {
-        table_setColumnFontStyle: {
-          fn: (updater) => table_setColumnFontStyle(table, updater)
-        }
-      });
-    }
+    assignColumnPrototype: (0, import_table_types.createPrototypeConstructor)(
+      (prototype, table) => {
+        (0, import_react_table.assignPrototypeAPIs)(
+          "DataTableColumnFontStyleFeature",
+          prototype,
+          table,
+          {
+            column_getFontStyle: {
+              fn: (column) => column_getFontStyle(column)
+            },
+            column_toggleFontStyle: {
+              fn: (column, value) => column_toggleFontStyle(column, value)
+            }
+          }
+        );
+      }
+    ),
+    constructTableAPIs: (0, import_table_types.createTableConstructor)(
+      (table) => {
+        (0, import_react_table.assignTableAPIs)("DataTableColumnFontStyleFeature", table, {
+          table_setColumnFontStyle: {
+            fn: (updater) => table_setColumnFontStyle(table, updater)
+          }
+        });
+      }
+    )
   };
 }
 const DataTableColumnFontStyleFeature = constructColumnFontStyleFeature();

package/tables/DataTable/features/ColumnFontStyle/column-font-style-types.d.ts

@@ -117,13 +117,4 @@ export interface DataTableColumnFontStyleColumn {
      */
     toggleFontStyle: (value?: 'text' | 'code') => void;
 }
-/**
- * @internal Plugin constructor interface
- */
-export interface ColumnFontStyleFeatureConstructors {
-    Table: DataTableColumnFontStyleInstance;
-    TableState: DataTableColumnFontStyleTableState;
-    TableOptions: DataTableColumnFontStyleOptions;
-    Column: DataTableColumnFontStyleColumn;
-}
 //# sourceMappingURL=column-font-style-types.d.ts.map

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

@@ -1,11 +1,11 @@
-._1ku1w3z0-3-12-2 {
+._1ku1w3z0-3-13-0 {
   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-12-2::after {
+._1ku1w3z1-3-13-0::after {
   content: "";
   position: absolute;
   top: 0;
@@ -14,13 +14,13 @@
   width: 3px;
   background: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._1ku1w3z2-3-12-2::after {
+._1ku1w3z2-3-13-0::after {
   left: 0;
 }
-._1ku1w3z3-3-12-2::after {
+._1ku1w3z3-3-13-0::after {
   right: 0;
 }
-._1ku1w3z4-3-12-2::before {
+._1ku1w3z4-3-13-0::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-12-2 {
+._1ku1w3z5-3-13-0 {
   display: none;
 }
-._1ku1w3z6-3-12-2 {
+._1ku1w3z6-3-13-0 {
   cursor: grab;
 }
-._1ku1w3z7-3-12-2 {
+._1ku1w3z7-3-13-0 {
   pointer-events: none;
 }

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

@@ -1,41 +1,41 @@
-import { type Column, type TableFeatures, type RowData, type TableFeature, type Table_Internal, type Column_Internal, type CellData, type Header } from '@tanstack/react-table';
-import type { ColumnOrderFeatureConstructors } from './column-order-types.js';
+import { type Column, type TableFeature, type RowData, type Table, type CellData, type Header } from '@tanstack/react-table';
+import { type TDataTableFeatures } from '../types/features.types.js';
 /**
  * Overwrite the order columns fn from react table so that builtin columns are placed correctly
  * @internal
  */
-export declare function table_getOrderColumnsFn<TFeatures extends TableFeatures, TData extends RowData>(table: Table_Internal<TFeatures, TData>): (columns: Array<Column_Internal<TFeatures, TData, unknown>>) => Column_Internal<TFeatures, TData, unknown>[];
+export declare function table_getOrderColumnsFn<TData extends RowData>(table: Table<TDataTableFeatures, TData>): (columns: Array<Column<TDataTableFeatures, TData, unknown>>) => Column<TDataTableFeatures, TData, unknown>[];
 /**
  * Helper function that provides an array of all leaf-node columns, excluding builtin columns.
  * @internal
  */
-export declare function table_getLeafColumnsWithoutBuiltin<TFeatures extends TableFeatures, TData extends RowData>(table: Table_Internal<TFeatures, TData>): Column<TFeatures, TData, unknown>[];
+export declare function table_getLeafColumnsWithoutBuiltin<TData extends RowData>(table: Table<TDataTableFeatures, TData>): Column<TDataTableFeatures, TData, unknown>[];
 /**
  * Helper function to update the currently dragged header in the state.
  * @internal
  */
-export declare function table_setDraggedHeaderColumn<TFeatures extends TableFeatures, TData extends RowData>(table: Table_Internal<TFeatures, TData>, column: Column_Internal<TFeatures, TData>): void;
+export declare function table_setDraggedHeaderColumn<TData extends RowData>(table: Table<TDataTableFeatures, TData>, column: Column<TDataTableFeatures, TData>): void;
 /**
  * Helper function to create the restrict drag and drop modifier based on the
  * current table state.
  * @internal
  */
-export declare function header_getColumnDragAndDropMode<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData>(header: Header<TFeatures, TData, TValue>): 'none' | 'only' | 'enabled';
+export declare function header_getColumnDragAndDropMode<TData extends RowData, TValue extends CellData = CellData>(header: Header<TDataTableFeatures, TData, TValue>): 'none' | 'only' | 'enabled';
 /**
  * Helper function that determines whether drag and drop is disabled on the header (if a child column is dragged).
  * @internal
  */
-export declare function header_getIsDragAndDropDisabled<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData>(header: Header<TFeatures, TData, TValue>): boolean;
+export declare function header_getIsDragAndDropDisabled<TData extends RowData, TValue extends CellData = CellData>(header: Header<TDataTableFeatures, TData, TValue>): boolean;
 /**
  * Helper function to update the column order state with a new column order object or a functional update.
  * @internal
  */
-export declare function column_getCanMoveColumnLeft<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData>(column: Column_Internal<TFeatures, TData, TValue>): boolean;
+export declare function column_getCanMoveColumnLeft<TData extends RowData, TValue extends CellData = CellData>(column: Column<TDataTableFeatures, TData, TValue>): boolean;
 /**
  * Helper function to update the column order state with a new column order object or a functional update.
  * @internal
  */
-export declare function column_getCanMoveColumnRight<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData>(column: Column_Internal<TFeatures, TData, TValue>): boolean;
+export declare function column_getCanMoveColumnRight<TData extends RowData, TValue extends CellData = CellData>(column: Column<TDataTableFeatures, TData, TValue>): boolean;
 /**
  * Moves the current column one position to the left and updates the table state.
  *
@@ -54,7 +54,7 @@ export declare function column_getCanMoveColumnRight<TFeatures extends TableFeat
  *  - Constraint3: Skip hidden columns.
  * @internal
  */
-export declare function column_moveColumnLeft<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData>(column: Column_Internal<TFeatures, TData, TValue>): void;
+export declare function column_moveColumnLeft<TData extends RowData, TValue extends CellData = CellData>(column: Column<TDataTableFeatures, TData, TValue>): void;
 /**
  * Moves the current column one position to the right and updates the table state.
  *
@@ -73,16 +73,16 @@ export declare function column_moveColumnLeft<TFeatures extends TableFeatures, T
  *  - Constraint3: Skip hidden columns.
  * @internal
  */
-export declare function column_moveColumnRight<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData>(column: Column_Internal<TFeatures, TData, TValue>): void;
+export declare function column_moveColumnRight<TData extends RowData, TValue extends CellData = CellData>(column: Column<TDataTableFeatures, TData, TValue>): void;
 /**
  * Constructs the column order feature for the table,
  * including API implementations and prototype assignments.
  * @internal
  */
-export declare function constructColumnOrderFeature<TFeatures extends TableFeatures, TData extends RowData>(): TableFeature<ColumnOrderFeatureConstructors<TFeatures, TData>>;
+export declare function constructColumnOrderFeature(): TableFeature;
 /**
  * Additional feature implementation for column order.
  * @internal
  */
-export declare const DataTableColumnOrderFeature: TableFeature<ColumnOrderFeatureConstructors<TableFeatures, RowData>>;
+export declare const DataTableColumnOrderFeature: TableFeature;
 //# sourceMappingURL=ColumnOrder.d.ts.map

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

@@ -33,6 +33,7 @@ module.exports = __toCommonJS(ColumnOrder_exports);
 var import_react_table = require("@tanstack/react-table");
 var import_static_functions = require("@tanstack/react-table/static-functions");
 var import_column_order_utils = require("./column-order-utils.js");
+var import_table_types = require("../types/table.types.js");
 function table_getOrderColumnsFn(table) {
   const columnOrder = table.atoms.columnOrder?.get() ?? [];
   return (columns) => {
@@ -139,52 +140,57 @@ function constructColumnOrderFeature() {
         ...initialState
       };
     },
-    assignColumnPrototype: (prototype, table) => {
-      (0, import_react_table.assignPrototypeAPIs)("DataTableColumnOrderFeature", prototype, table, {
-        column_getCanMoveColumnLeft: {
-          fn: (column) => column_getCanMoveColumnLeft(column)
-        },
-        column_getCanMoveColumnRight: {
-          fn: (column) => column_getCanMoveColumnRight(column)
-        },
-        column_moveColumnLeft: {
-          fn: (column) => column_moveColumnLeft(column)
-        },
-        column_moveColumnRight: {
-          fn: (column) => column_moveColumnRight(column)
-        }
-      });
-    },
-    assignHeaderPrototype: (prototype, table) => {
-      (0, import_react_table.assignPrototypeAPIs)("DataTableColumnOrderFeature", prototype, table, {
-        header_getColumnDragAndDropMode: {
-          fn: (header) => header_getColumnDragAndDropMode(header)
-        },
-        header_getIsDragAndDropDisabled: {
-          fn: (header) => header_getIsDragAndDropDisabled(header)
-        }
-      });
-    },
-    constructTableAPIs: (table) => {
-      (0, import_react_table.assignTableAPIs)("DataTableColumnOrderFeature", table, {
-        table_getLeafColumnsWithoutBuiltin: {
-          fn: () => table_getLeafColumnsWithoutBuiltin(table)
-        },
-        table_getOrderColumnsFn: {
-          fn: () => table_getOrderColumnsFn(table),
-          memoDeps: () => [
-            table.atoms.columnOrder?.get(),
-            table.atoms.grouping?.get(),
-            table.options.groupedColumnMode
-          ]
-        },
-        table_setDraggedHeaderColumn: {
-          fn: (column) => {
-            table_setDraggedHeaderColumn(table, column);
+    assignColumnPrototype: (0, import_table_types.createPrototypeConstructor)(
+      (prototype, table) => {
+        (0, import_react_table.assignPrototypeAPIs)("DataTableColumnOrderFeature", prototype, table, {
+          column_getCanMoveColumnLeft: {
+            fn: (column) => column_getCanMoveColumnLeft(column)
+          },
+          column_getCanMoveColumnRight: {
+            fn: (column) => column_getCanMoveColumnRight(column)
+          },
+          column_moveColumnLeft: {
+            fn: (column) => column_moveColumnLeft(column)
+          },
+          column_moveColumnRight: {
+            fn: (column) => column_moveColumnRight(column)
           }
-        }
-      });
-    }
+        });
+      }
+    ),
+    assignHeaderPrototype: (0, import_table_types.createPrototypeConstructor)(
+      (prototype, table) => {
+        (0, import_react_table.assignPrototypeAPIs)("DataTableColumnOrderFeature", prototype, table, {
+          header_getColumnDragAndDropMode: {
+            fn: (header) => header_getColumnDragAndDropMode(header)
+          },
+          header_getIsDragAndDropDisabled: {
+            fn: (header) => header_getIsDragAndDropDisabled(header)
+          }
+        });
+      }
+    ),
+    constructTableAPIs: (0, import_table_types.createTableConstructor)(
+      (table) => {
+        (0, import_react_table.assignTableAPIs)("DataTableColumnOrderFeature", table, {
+          table_getLeafColumnsWithoutBuiltin: {
+            fn: () => table_getLeafColumnsWithoutBuiltin(table)
+          },
+          table_getOrderColumnsFn: {
+            fn: () => table_getOrderColumnsFn(table),
+            // Upstream also keys this on the grouping state. The DataTable does
+            // not register `columnGroupingFeature`, and the ordering function
+            // above reads nothing but the column order.
+            memoDeps: () => [table.atoms.columnOrder?.get()]
+          },
+          table_setDraggedHeaderColumn: {
+            fn: (column) => {
+              table_setDraggedHeaderColumn(table, column);
+            }
+          }
+        });
+      }
+    )
   };
 }
 const DataTableColumnOrderFeature = constructColumnOrderFeature();

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

@@ -25,7 +25,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-12-2";
-var headerDragAndDrop = { dragging: "_1ku1w3z5-3-12-2", enabled: "_1ku1w3z6-3-12-2", inactive: "_1ku1w3z7-3-12-2" };
-var insertPositionIndicator = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ku1w3z1-3-12-2", variantClassNames: { left: { true: "_1ku1w3z2-3-12-2", false: "_1ku1w3z3-3-12-2" } }, defaultVariants: {}, compoundVariants: [] });
-var verticalDividers = "_1ku1w3z4-3-12-2";
+var columnDndOverlay = "_1ku1w3z0-3-13-0";
+var headerDragAndDrop = { dragging: "_1ku1w3z5-3-13-0", enabled: "_1ku1w3z6-3-13-0", inactive: "_1ku1w3z7-3-13-0" };
+var insertPositionIndicator = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ku1w3z1-3-13-0", variantClassNames: { left: { true: "_1ku1w3z2-3-13-0", false: "_1ku1w3z3-3-13-0" } }, defaultVariants: {}, compoundVariants: [] });
+var verticalDividers = "_1ku1w3z4-3-13-0";

package/tables/DataTable/features/ColumnOrder/ColumnOrderDragAndDropContext.d.ts

@@ -1,6 +1,5 @@
-import type { RowData } from '@tanstack/react-table';
 import { type JSX, type ReactNode } from 'react';
-export declare function ColumnOrderDragAndDropContext<TData extends RowData>({ children, }: Readonly<{
+export declare function ColumnOrderDragAndDropContext({ children, }: Readonly<{
     children: ReactNode;
 }>): JSX.Element;
 //# sourceMappingURL=ColumnOrderDragAndDropContext.d.ts.map