@dynatrace/strato-components 3.12.2 → 3.13.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/CellFormatter/CellFormatter.tsx"],
-  "sourcesContent": ["import type {\n  ColumnDefTemplate,\n  CellContext,\n  CellData,\n  RowData,\n  TableFeatures,\n} from '@tanstack/react-table';\nimport { memo } from 'react';\n\nimport {\n  adjustFractionDigits,\n  type ConvertibleUnit,\n  format,\n  formatCurrency,\n  formatDate as formatDatetime,\n  type FormatDateOptions,\n  formatLong,\n  type FormatOptions,\n  type Unit,\n  units,\n} from '@dynatrace-sdk/units';\n\nimport type {\n  DataTableDatetimeDisplayMode,\n  FormatterCurrencyOptions,\n} from './cell-formatter-types.js';\nimport {\n  DATETIME_DEFAULT_FORMAT_OPTIONS,\n  formatCurrencyDefault,\n  formatDatetimeDefault,\n} from '../../../../core/utils/default-formatters.js';\nimport { devLog } from '../../../../core/utils/logging.js';\nimport { convertToNumberIfPureNumber } from '../../../../core/utils/string-utils.js';\nimport type {\n  DataTableDisplayColumnDef,\n  DataTableRowData,\n} from '../../public.api.js';\n\n/**\n * Format options for each `DataTableDatetimeDisplayMode` shorthand.\n * @internal\n */\nconst DATETIME_FORMAT_OPTIONS: Record<\n  DataTableDatetimeDisplayMode,\n  FormatDateOptions\n> = {\n  // e.g. \"12/21/2024\" for US English locale\n  date: {\n    year: 'numeric',\n    month: 'numeric',\n    day: 'numeric',\n  },\n  // e.g. \"5:45:30 PM\" for US English locale\n  time: {\n    hour: 'numeric',\n    minute: 'numeric',\n    second: 'numeric',\n  },\n  // e.g. \"12/21/2024, 5:45:30 PM\" for US English locale\n  datetime: DATETIME_DEFAULT_FORMAT_OPTIONS,\n};\n\n/**\n * Typeguard to check if a formatter value is a `DataTableDatetimeDisplayMode` shorthand string.\n * @internal\n */\nfunction isDatetimeShorthand(\n  formatter: unknown,\n): formatter is DataTableDatetimeDisplayMode {\n  return (\n    formatter === 'date' || formatter === 'time' || formatter === 'datetime'\n  );\n}\n\n/**\n * Resolves the effective `FormatDateOptions` for a datetime column.\n * Accepts either a `FormatDateOptions` object, a `DataTableDatetimeDisplayMode`\n * shorthand string, or `undefined`.\n * @internal\n */\nfunction resolveDatetimeFormatter(\n  formatter: FormatDateOptions | DataTableDatetimeDisplayMode | undefined,\n): FormatDateOptions | undefined {\n  if (!formatter) {\n    return undefined;\n  }\n  if (isDatetimeShorthand(formatter)) {\n    return DATETIME_FORMAT_OPTIONS[formatter];\n  }\n  return formatter;\n}\n\n/** Memoized renderer for datetime formats */\nconst ColumnCellDatetimeFormatMemo = memo(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  (props: { value: any; formatter?: FormatDateOptions }) => {\n    return props.value\n      ? formatDatetime(Number(props.value), props.formatter)\n      : '';\n  },\n);\n\n/** Memoized renderer for currency formats */\nconst ColumnCellCurrencyFormatMemo = memo(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  (props: { value: any; formatter?: FormatterCurrencyOptions }) => {\n    if (\n      props.value === null ||\n      props.value === undefined ||\n      isNaN(props.value)\n    ) {\n      // value is not a valid number\n      return '';\n    }\n\n    const { currency, ...options } = props.formatter ?? {};\n    if (!currency) {\n      // no currency (e.g. 'EUR', 'USD') provided \u2192 default format without currency symbol\n      return formatCurrencyDefault(Number(props.value), options);\n    }\n\n    return formatCurrency(Number(props.value), currency, options);\n  },\n);\n\n/** Memoized renderer for fallback formats */\nconst ColumnCellFormatMemo = memo(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  (props: { value: any; formatter?: FormatDateOptions }) => {\n    return format(Number(props.value), props.formatter);\n  },\n);\n\nconst ColumnCellFormatLongMemo = memo(\n  (props: {\n    value: string | number | bigint;\n    formatter?: Pick<\n      FormatOptions<Unit, ConvertibleUnit>,\n      | 'locale'\n      | 'maximumFractionDigits'\n      | 'maximumSignificantDigits'\n      | 'minimumFractionDigits'\n      | 'minimumSignificantDigits'\n      | 'useGrouping'\n    >;\n  }) => {\n    return formatLong(props.value, props.formatter);\n  },\n);\n\n/**\n * Function that formats the cell value based on the formatter specified in the column definition\n * @param columnDef - the table column definition\n *\n * @returns the formatted cell value\n */\nfunction formatColumnCell<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(\n  columnDef: DataTableDisplayColumnDef<TData, TValue>,\n): ColumnDefTemplate<CellContext<TFeatures, TData, TValue>> | undefined {\n  if (\n    columnDef.columnType === 'sparkline' ||\n    columnDef.columnType === 'meterbar' ||\n    columnDef.columnType === 'gantt' ||\n    columnDef.columnType === 'log-content' ||\n    columnDef.columnType === 'markdown'\n  ) {\n    return;\n  }\n\n  // DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType.\n  if (columnDef.columnType === 'date' || columnDef.columnType === 'datetime') {\n    const resolvedFormatter = resolveDatetimeFormatter(columnDef.formatter);\n    return ({ getValue }) => (\n      <ColumnCellDatetimeFormatMemo\n        value={getValue()}\n        formatter={resolvedFormatter}\n      />\n    );\n  }\n\n  if (columnDef.columnType === 'currency') {\n    return ({ getValue }) => (\n      <ColumnCellCurrencyFormatMemo\n        value={getValue()}\n        formatter={columnDef.formatter}\n      />\n    );\n  }\n\n  if (columnDef.columnType === 'long') {\n    return ({ getValue }) => {\n      const value = getValue();\n      if (\n        typeof value === 'string' ||\n        typeof value === 'bigint' ||\n        typeof value === 'number'\n      ) {\n        return (\n          <ColumnCellFormatLongMemo\n            value={value}\n            formatter={columnDef.formatter}\n          />\n        );\n      }\n      return String(value);\n    };\n  }\n\n  return ({ getValue }) => (\n    <ColumnCellFormatMemo value={getValue()} formatter={columnDef.formatter} />\n  );\n}\n\n/**\n * Updates the cell renderer with the formatter from the column definition\n * @param columnDef - column definition prop\n *\n * @returns the column definition with the formatter applied\n * @internal\n */\nexport function applyColumnFormatters<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(\n  columnDef: DataTableDisplayColumnDef<TData, TValue>,\n): { cell?: ColumnDefTemplate<CellContext<TFeatures, TData, TValue>> } {\n  if (\n    columnDef.columnType === 'sparkline' ||\n    columnDef.columnType === 'meterbar' ||\n    columnDef.columnType === 'gantt' ||\n    columnDef.columnType === 'log-content' ||\n    columnDef.columnType === 'markdown'\n  ) {\n    return {};\n  }\n\n  if (columnDef.formatter) {\n    return {\n      cell: formatColumnCell(columnDef),\n    };\n  }\n\n  return {};\n}\n\n/**\n * Formats the given value based on formatter options from the column definition.\n * For 'sparkline', 'meterbar', 'gantt', and 'log-content', returns an empty string.\n * If there is no other formatter possible then returns a stringified value.\n * @param value - the cell value to format.\n * @param column - column definition prop where `columnType` and `formatter` are relevant.\n *\n * @returns the formatted cell value\n * @internal\n */\nexport function formatCellValue<TData extends DataTableRowData, TValue>(\n  value: TValue,\n  column: DataTableDisplayColumnDef<TData, TValue>,\n): string {\n  if (\n    column.columnType === 'sparkline' ||\n    column.columnType === 'meterbar' ||\n    column.columnType === 'gantt' ||\n    column.columnType === 'log-content' ||\n    column.columnType === 'markdown'\n  ) {\n    return '';\n  }\n\n  if (value === null || value === undefined) {\n    devLog(`The value '${value}' can not be formatted!`);\n    return '';\n  }\n\n  const cleanedValue =\n    typeof value === 'number' || value instanceof Date\n      ? value\n      : Number.isNaN(+value)\n      ? null\n      : convertToNumberIfPureNumber(value as string);\n\n  if (\n    column.formatter &&\n    // DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType.\n    column.columnType !== 'date' &&\n    column.columnType !== 'datetime' &&\n    column.columnType !== 'currency' &&\n    typeof cleanedValue === 'number'\n  ) {\n    const formatOptions = column.formatter;\n    return format(cleanedValue, formatOptions);\n  }\n\n  if (column.columnType === 'bit' && typeof cleanedValue === 'number') {\n    const formatOptions = { input: units.data.bit };\n    return format(cleanedValue, formatOptions);\n  }\n\n  if (column.columnType === 'number' && typeof cleanedValue === 'number') {\n    const formatOptions = column.formatter;\n    if (formatOptions) {\n      return format(cleanedValue, formatOptions);\n    }\n    return adjustFractionDigits(cleanedValue);\n  }\n\n  if (\n    column.columnType === 'long' &&\n    (typeof value === 'string' ||\n      typeof value === 'bigint' ||\n      typeof value === 'number')\n  ) {\n    return formatLong(value, column.formatter);\n  }\n\n  if (\n    // DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType\n    (column.columnType === 'date' || column.columnType === 'datetime') &&\n    (typeof cleanedValue === 'number' || cleanedValue instanceof Date)\n  ) {\n    const resolvedFormatter = resolveDatetimeFormatter(column.formatter);\n    if (resolvedFormatter) {\n      return formatDatetime(cleanedValue, resolvedFormatter);\n    } else {\n      return formatDatetimeDefault(cleanedValue);\n    }\n  }\n\n  if (column.columnType === 'currency' && typeof cleanedValue === 'number') {\n    const formatOptions = column.formatter;\n    const { currency, ...remainingOptions } = formatOptions ?? {};\n    if (!currency) {\n      // no currency (e.g. 'EUR', 'USD') provided \u2192 default format without currency symbol\n      return formatCurrencyDefault(cleanedValue, remainingOptions);\n    }\n\n    return formatCurrency(cleanedValue, currency, remainingOptions);\n  }\n\n  devLog(`The value '${value}' can not be formatted!`);\n  return String(value);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type {\n  ColumnDefTemplate,\n  CellContext,\n  CellData,\n  RowData,\n} from '@tanstack/react-table';\nimport { memo } from 'react';\n\nimport {\n  adjustFractionDigits,\n  type ConvertibleUnit,\n  format,\n  formatCurrency,\n  formatDate as formatDatetime,\n  type FormatDateOptions,\n  formatLong,\n  type FormatOptions,\n  type Unit,\n  units,\n} from '@dynatrace-sdk/units';\n\nimport type {\n  DataTableDatetimeDisplayMode,\n  FormatterCurrencyOptions,\n} from './cell-formatter-types.js';\nimport {\n  DATETIME_DEFAULT_FORMAT_OPTIONS,\n  formatCurrencyDefault,\n  formatDatetimeDefault,\n} from '../../../../core/utils/default-formatters.js';\nimport { devLog } from '../../../../core/utils/logging.js';\nimport { convertToNumberIfPureNumber } from '../../../../core/utils/string-utils.js';\nimport type {\n  DataTableDisplayColumnDef,\n  DataTableRowData,\n} from '../../public.api.js';\nimport type { TDataTableFeatures } from '../types/features.types.js';\n\n/**\n * Format options for each `DataTableDatetimeDisplayMode` shorthand.\n * @internal\n */\nconst DATETIME_FORMAT_OPTIONS: Record<\n  DataTableDatetimeDisplayMode,\n  FormatDateOptions\n> = {\n  // e.g. \"12/21/2024\" for US English locale\n  date: {\n    year: 'numeric',\n    month: 'numeric',\n    day: 'numeric',\n  },\n  // e.g. \"5:45:30 PM\" for US English locale\n  time: {\n    hour: 'numeric',\n    minute: 'numeric',\n    second: 'numeric',\n  },\n  // e.g. \"12/21/2024, 5:45:30 PM\" for US English locale\n  datetime: DATETIME_DEFAULT_FORMAT_OPTIONS,\n};\n\n/**\n * Typeguard to check if a formatter value is a `DataTableDatetimeDisplayMode` shorthand string.\n * @internal\n */\nfunction isDatetimeShorthand(\n  formatter: unknown,\n): formatter is DataTableDatetimeDisplayMode {\n  return (\n    formatter === 'date' || formatter === 'time' || formatter === 'datetime'\n  );\n}\n\n/**\n * Resolves the effective `FormatDateOptions` for a datetime column.\n * Accepts either a `FormatDateOptions` object, a `DataTableDatetimeDisplayMode`\n * shorthand string, or `undefined`.\n * @internal\n */\nfunction resolveDatetimeFormatter(\n  formatter: FormatDateOptions | DataTableDatetimeDisplayMode | undefined,\n): FormatDateOptions | undefined {\n  if (!formatter) {\n    return undefined;\n  }\n  if (isDatetimeShorthand(formatter)) {\n    return DATETIME_FORMAT_OPTIONS[formatter];\n  }\n  return formatter;\n}\n\n/** Memoized renderer for datetime formats */\nconst ColumnCellDatetimeFormatMemo = memo(\n  // oxlint-disable-next-line typescript/no-explicit-any\n  (props: { value: any; formatter?: FormatDateOptions }) => {\n    if (!props.value) {\n      return '';\n    }\n\n    const date =\n      props.value instanceof Date\n        ? props.value\n        : new Date(convertToNumberIfPureNumber(String(props.value)));\n\n    return Number.isNaN(date.getTime())\n      ? ''\n      : formatDatetime(date, props.formatter);\n  },\n);\n\n/** Memoized renderer for currency formats */\nconst ColumnCellCurrencyFormatMemo = memo(\n  // oxlint-disable-next-line typescript/no-explicit-any\n  (props: { value: any; formatter?: FormatterCurrencyOptions }) => {\n    if (\n      props.value === null ||\n      props.value === undefined ||\n      isNaN(props.value)\n    ) {\n      // value is not a valid number\n      return '';\n    }\n\n    const { currency, ...options } = props.formatter ?? {};\n    if (!currency) {\n      // no currency (e.g. 'EUR', 'USD') provided \u2192 default format without currency symbol\n      return formatCurrencyDefault(Number(props.value), options);\n    }\n\n    return formatCurrency(Number(props.value), currency, options);\n  },\n);\n\n/** Memoized renderer for fallback formats */\nconst ColumnCellFormatMemo = memo(\n  // oxlint-disable-next-line typescript/no-explicit-any\n  (props: { value: any; formatter?: FormatDateOptions }) => {\n    return format(Number(props.value), props.formatter);\n  },\n);\n\nconst ColumnCellFormatLongMemo = memo(\n  (props: {\n    value: string | number | bigint;\n    formatter?: Pick<\n      FormatOptions<Unit, ConvertibleUnit>,\n      | 'locale'\n      | 'maximumFractionDigits'\n      | 'maximumSignificantDigits'\n      | 'minimumFractionDigits'\n      | 'minimumSignificantDigits'\n      | 'useGrouping'\n    >;\n  }) => {\n    return formatLong(props.value, props.formatter);\n  },\n);\n\n/**\n * Function that formats the cell value based on the formatter specified in the column definition\n * @param columnDef - the table column definition\n *\n * @returns the formatted cell value\n */\nfunction formatColumnCell<\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(\n  columnDef: DataTableDisplayColumnDef<TData, TValue>,\n):\n  | ColumnDefTemplate<CellContext<TDataTableFeatures, TData, TValue>>\n  | undefined {\n  if (\n    columnDef.columnType === 'sparkline' ||\n    columnDef.columnType === 'meterbar' ||\n    columnDef.columnType === 'gantt' ||\n    columnDef.columnType === 'log-content' ||\n    columnDef.columnType === 'markdown'\n  ) {\n    return;\n  }\n\n  // DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType.\n  if (columnDef.columnType === 'date' || columnDef.columnType === 'datetime') {\n    const resolvedFormatter = resolveDatetimeFormatter(columnDef.formatter);\n    return ({ getValue }) => (\n      <ColumnCellDatetimeFormatMemo\n        value={getValue()}\n        formatter={resolvedFormatter}\n      />\n    );\n  }\n\n  if (columnDef.columnType === 'currency') {\n    return ({ getValue }) => (\n      <ColumnCellCurrencyFormatMemo\n        value={getValue()}\n        formatter={columnDef.formatter}\n      />\n    );\n  }\n\n  if (columnDef.columnType === 'long') {\n    return ({ getValue }) => {\n      const value = getValue();\n      if (\n        typeof value === 'string' ||\n        typeof value === 'bigint' ||\n        typeof value === 'number'\n      ) {\n        return (\n          <ColumnCellFormatLongMemo\n            value={value}\n            formatter={columnDef.formatter}\n          />\n        );\n      }\n      return String(value);\n    };\n  }\n\n  return ({ getValue }) => (\n    <ColumnCellFormatMemo value={getValue()} formatter={columnDef.formatter} />\n  );\n}\n\n/**\n * Updates the cell renderer with the formatter from the column definition\n * @param columnDef - column definition prop\n *\n * @returns the column definition with the formatter applied\n * @internal\n */\nexport function applyColumnFormatters<\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(\n  columnDef: DataTableDisplayColumnDef<TData, TValue>,\n): {\n  cell?: ColumnDefTemplate<CellContext<TDataTableFeatures, TData, TValue>>;\n} {\n  if (\n    columnDef.columnType === 'sparkline' ||\n    columnDef.columnType === 'meterbar' ||\n    columnDef.columnType === 'gantt' ||\n    columnDef.columnType === 'log-content' ||\n    columnDef.columnType === 'markdown'\n  ) {\n    return {};\n  }\n\n  if (columnDef.formatter) {\n    return {\n      cell: formatColumnCell(columnDef),\n    };\n  }\n\n  return {};\n}\n\n/**\n * Formats the given value based on formatter options from the column definition.\n * For 'sparkline', 'meterbar', 'gantt', and 'log-content', returns an empty string.\n * If there is no other formatter possible then returns a stringified value.\n * @param value - the cell value to format.\n * @param column - column definition prop where `columnType` and `formatter` are relevant.\n *\n * @returns the formatted cell value\n * @internal\n */\nexport function formatCellValue<TData extends DataTableRowData, TValue>(\n  value: TValue,\n  column: DataTableDisplayColumnDef<TData, TValue>,\n): string {\n  if (\n    column.columnType === 'sparkline' ||\n    column.columnType === 'meterbar' ||\n    column.columnType === 'gantt' ||\n    column.columnType === 'log-content' ||\n    column.columnType === 'markdown'\n  ) {\n    return '';\n  }\n\n  if (value === null || value === undefined) {\n    devLog(`The value '${value}' can not be formatted!`);\n    return '';\n  }\n\n  const cleanedValue =\n    typeof value === 'number' || value instanceof Date\n      ? value\n      : Number.isNaN(+value)\n        ? null\n        : convertToNumberIfPureNumber(String(value));\n\n  if (\n    column.formatter &&\n    // DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType.\n    column.columnType !== 'date' &&\n    column.columnType !== 'datetime' &&\n    column.columnType !== 'currency' &&\n    typeof cleanedValue === 'number'\n  ) {\n    const formatOptions = column.formatter;\n    return format(cleanedValue, formatOptions);\n  }\n\n  if (column.columnType === 'bit' && typeof cleanedValue === 'number') {\n    const formatOptions = { input: units.data.bit };\n    return format(cleanedValue, formatOptions);\n  }\n\n  if (column.columnType === 'number' && typeof cleanedValue === 'number') {\n    const formatOptions = column.formatter;\n    if (formatOptions) {\n      return format(cleanedValue, formatOptions);\n    }\n    return adjustFractionDigits(cleanedValue);\n  }\n\n  if (\n    column.columnType === 'long' &&\n    (typeof value === 'string' ||\n      typeof value === 'bigint' ||\n      typeof value === 'number')\n  ) {\n    return formatLong(value, column.formatter);\n  }\n\n  // DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType\n  if (column.columnType === 'date' || column.columnType === 'datetime') {\n    let dateValue: number | Date | null = null;\n\n    if (typeof cleanedValue === 'number' || cleanedValue instanceof Date) {\n      dateValue = cleanedValue;\n    } else if (typeof value === 'string') {\n      const date = new Date(value);\n      if (!Number.isNaN(date.getTime())) {\n        dateValue = date;\n      }\n    }\n\n    if (dateValue !== null) {\n      const resolvedFormatter = resolveDatetimeFormatter(column.formatter);\n      if (resolvedFormatter) {\n        return formatDatetime(dateValue, resolvedFormatter);\n      } else {\n        return formatDatetimeDefault(dateValue);\n      }\n    }\n  }\n\n  if (column.columnType === 'currency' && typeof cleanedValue === 'number') {\n    const formatOptions = column.formatter;\n    const { currency, ...remainingOptions } = formatOptions ?? {};\n    if (!currency) {\n      // no currency (e.g. 'EUR', 'USD') provided \u2192 default format without currency symbol\n      return formatCurrencyDefault(cleanedValue, remainingOptions);\n    }\n\n    return formatCurrency(cleanedValue, currency, remainingOptions);\n  }\n\n  devLog(`The value '${value}' can not be formatted!`);\n  return String(value);\n}\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -5,6 +5,10 @@ import {
 } from "@tanstack/react-table";
 import { useControllableState } from "../../../../core/hooks/useControllableState.js";
 import { useDataTableConfigElement } from "../../../hooks/useDataTableConfig.js";
+import {
+  createPrototypeConstructor,
+  createTableConstructor
+} from "../types/table.types.js";
 function useColumnFontStyle(props, options) {
   const configFontStyle = useDataTableConfigElement("fontStyle");
   const [columnFontStyle, onColumnFontStyleChange] = useControllableState({
@@ -32,7 +36,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 {
@@ -56,23 +60,32 @@ function constructColumnFontStyleFeature() {
         ...initialState
       };
     },
-    assignColumnPrototype: (prototype, table) => {
-      assignPrototypeAPIs("DataTableColumnFontStyleFeature", prototype, table, {
-        column_getFontStyle: {
-          fn: (column) => column_getFontStyle(column)
-        },
-        column_toggleFontStyle: {
-          fn: (column, value) => column_toggleFontStyle(column, value)
-        }
-      });
-    },
-    constructTableAPIs: (table) => {
-      assignTableAPIs("DataTableColumnFontStyleFeature", table, {
-        table_setColumnFontStyle: {
-          fn: (updater) => table_setColumnFontStyle(table, updater)
-        }
-      });
-    }
+    assignColumnPrototype: createPrototypeConstructor(
+      (prototype, table) => {
+        assignPrototypeAPIs(
+          "DataTableColumnFontStyleFeature",
+          prototype,
+          table,
+          {
+            column_getFontStyle: {
+              fn: (column) => column_getFontStyle(column)
+            },
+            column_toggleFontStyle: {
+              fn: (column, value) => column_toggleFontStyle(column, value)
+            }
+          }
+        );
+      }
+    ),
+    constructTableAPIs: createTableConstructor(
+      (table) => {
+        assignTableAPIs("DataTableColumnFontStyleFeature", table, {
+          table_setColumnFontStyle: {
+            fn: (updater) => table_setColumnFontStyle(table, updater)
+          }
+        });
+      }
+    )
   };
 }
 const DataTableColumnFontStyleFeature = constructColumnFontStyleFeature();

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/ColumnFontStyle/ColumnFontStyle.tsx"],
-  "sourcesContent": ["import {\n  type CellData,\n  type Column_Internal,\n  type RowData,\n  type TableFeature,\n  type TableFeatures,\n  type TableOptions,\n  type Table_Internal,\n  type Updater,\n  assignPrototypeAPIs,\n  assignTableAPIs,\n  functionalUpdate,\n} from '@tanstack/react-table';\n\nimport type {\n  ColumnFontStyleFeatureConstructors,\n  DataTableColumnFontStyleProps,\n  DataTableColumnFontStyleState,\n} from './column-font-style-types.js';\nimport { useControllableState } from '../../../../core/hooks/useControllableState.js';\nimport { useDataTableConfigElement } from '../../../hooks/useDataTableConfig.js';\nimport type { DataTableRowData } from '../../row-data-types.js';\nimport type { TDataTableFeatures } from '../types/features.types.js';\n\n/**\n * Configuration hook for the DataTable FontStyle feature.\n * @internal\n */\nexport function useColumnFontStyle<TData extends DataTableRowData>(\n  props: DataTableColumnFontStyleProps,\n  options: TableOptions<TDataTableFeatures, Exclude<TData, unknown>>,\n): void {\n  const configFontStyle = useDataTableConfigElement('fontStyle');\n\n  const [columnFontStyle, onColumnFontStyleChange] = useControllableState({\n    value: props.fontStyle ?? configFontStyle,\n    defaultValue: props.defaultFontStyle,\n    onChange: props.onFontStyleChange,\n  });\n\n  // eslint-disable-next-line react-hooks/immutability\n  options.state = {\n    ...options.state,\n    columnFontStyle,\n  };\n  // eslint-disable-next-line react-hooks/immutability\n  options.onColumnFontStyleChange = onColumnFontStyleChange;\n}\n\n/**\n * Helper function that will allow access to the columnFontStyle state of an individual column.\n */\nfunction table_setColumnFontStyle<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  table: Table_Internal<TFeatures, TData>,\n  updater: Updater<DataTableColumnFontStyleState>,\n): void {\n  const newValue = functionalUpdate(\n    updater,\n    table.atoms.columnFontStyle?.get() ?? {},\n  );\n  table.options.onColumnFontStyleChange?.(newValue);\n}\n\n// Add a toggleFontStyle function onto the column so that it can be accessed\n// during rendering.\nfunction column_toggleFontStyle<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(\n  column: Column_Internal<TFeatures, TData, TValue>,\n  value?: 'code' | 'text',\n): void {\n  table_setColumnFontStyle(column.table, (old) => {\n    let newValue = value;\n    // If there is no passed value, apply the toggle logic\n    if (newValue === undefined) {\n      if (old[column.id] !== undefined) {\n        newValue = old[column.id] === 'code' ? 'text' : 'code';\n      } else {\n        newValue =\n          column.table.store.state.visualVariantConfig.fontStyle === 'code'\n            ? 'text'\n            : 'code';\n      }\n    }\n    return {\n      ...old,\n      [column.id]: newValue,\n    };\n  });\n}\n\n/**\n * Helper function that will allow access to the columnFontStyle state of an individual column.\n * @returns\n */\nfunction column_getFontStyle<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(\n  column: Column_Internal<TFeatures, TData, TValue>,\n): 'code' | 'text' | undefined {\n  const fontStyleState = column.table.atoms.columnFontStyle?.get();\n\n  // Check if a font style is defined in the state\n  if (fontStyleState?.[column.id]) {\n    return fontStyleState?.[column.id];\n  }\n  // Check if some font style is defined in the columnDef meta based on column types\n  return (\n    column.columnDef.meta?.fontStyle ??\n    column.table.atoms.visualVariantConfig.get().fontStyle\n  );\n}\n\nexport function constructColumnFontStyleFeature(): TableFeature<ColumnFontStyleFeatureConstructors> {\n  return {\n    getInitialState: (initialState) => {\n      return {\n        columnFontStyle: structuredClone({}),\n        ...initialState,\n      };\n    },\n    assignColumnPrototype: (prototype, table) => {\n      assignPrototypeAPIs('DataTableColumnFontStyleFeature', prototype, table, {\n        column_getFontStyle: {\n          fn: (column) => column_getFontStyle(column),\n        },\n        column_toggleFontStyle: {\n          fn: (column, value) => column_toggleFontStyle(column, value),\n        },\n      });\n    },\n    constructTableAPIs: (table) => {\n      assignTableAPIs('DataTableColumnFontStyleFeature', table, {\n        table_setColumnFontStyle: {\n          fn: (updater) => table_setColumnFontStyle(table, updater),\n        },\n      });\n    },\n  };\n}\n\n/**\n * Feature implementation for FontStyle. This contains the logic that will be given\n * to the tanstack table. The implementing interface is important as these are\n * the function that will be called by the tanstack table core during render.\n * @internal\n */\nexport const DataTableColumnFontStyleFeature =\n  constructColumnFontStyleFeature();\n"],
-  "mappings": "AAAA;AAAA,EASE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAOP,SAAS,4BAA4B;AACrC,SAAS,iCAAiC;AAQnC,SAAS,mBACd,OACA,SACM;AACN,QAAM,kBAAkB,0BAA0B,WAAW;AAE7D,QAAM,CAAC,iBAAiB,uBAAuB,IAAI,qBAAqB;AAAA,IACtE,OAAO,MAAM,aAAa;AAAA,IAC1B,cAAc,MAAM;AAAA,IACpB,UAAU,MAAM;AAAA,EAClB,CAAC;AAGD,UAAQ,QAAQ;AAAA,IACd,GAAG,QAAQ;AAAA,IACX;AAAA,EACF;AAEA,UAAQ,0BAA0B;AACpC;AAKA,SAAS,yBAIP,OACA,SACM;AACN,QAAM,WAAW;AAAA,IACf;AAAA,IACA,MAAM,MAAM,iBAAiB,IAAI,KAAK,CAAC;AAAA,EACzC;AACA,QAAM,QAAQ,0BAA0B,QAAQ;AAClD;AAIA,SAAS,uBAKP,QACA,OACM;AACN,2BAAyB,OAAO,OAAO,CAAC,QAAQ;AAC9C,QAAI,WAAW;AAEf,QAAI,aAAa,QAAW;AAC1B,UAAI,IAAI,OAAO,EAAE,MAAM,QAAW;AAChC,mBAAW,IAAI,OAAO,EAAE,MAAM,SAAS,SAAS;AAAA,MAClD,OAAO;AACL,mBACE,OAAO,MAAM,MAAM,MAAM,oBAAoB,cAAc,SACvD,SACA;AAAA,MACR;AAAA,IACF;AACA,WAAO;AAAA,MACL,GAAG;AAAA,MACH,CAAC,OAAO,EAAE,GAAG;AAAA,IACf;AAAA,EACF,CAAC;AACH;AAMA,SAAS,oBAKP,QAC6B;AAC7B,QAAM,iBAAiB,OAAO,MAAM,MAAM,iBAAiB,IAAI;AAG/D,MAAI,iBAAiB,OAAO,EAAE,GAAG;AAC/B,WAAO,iBAAiB,OAAO,EAAE;AAAA,EACnC;AAEA,SACE,OAAO,UAAU,MAAM,aACvB,OAAO,MAAM,MAAM,oBAAoB,IAAI,EAAE;AAEjD;AAEO,SAAS,kCAAoF;AAClG,SAAO;AAAA,IACL,iBAAiB,CAAC,iBAAiB;AACjC,aAAO;AAAA,QACL,iBAAiB,gBAAgB,CAAC,CAAC;AAAA,QACnC,GAAG;AAAA,MACL;AAAA,IACF;AAAA,IACA,uBAAuB,CAAC,WAAW,UAAU;AAC3C,0BAAoB,mCAAmC,WAAW,OAAO;AAAA,QACvE,qBAAqB;AAAA,UACnB,IAAI,CAAC,WAAW,oBAAoB,MAAM;AAAA,QAC5C;AAAA,QACA,wBAAwB;AAAA,UACtB,IAAI,CAAC,QAAQ,UAAU,uBAAuB,QAAQ,KAAK;AAAA,QAC7D;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,oBAAoB,CAAC,UAAU;AAC7B,sBAAgB,mCAAmC,OAAO;AAAA,QACxD,0BAA0B;AAAA,UACxB,IAAI,CAAC,YAAY,yBAAyB,OAAO,OAAO;AAAA,QAC1D;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AACF;AAQO,MAAM,kCACX,gCAAgC;",
+  "sourcesContent": ["import {\n  type CellData,\n  type Column,\n  type RowData,\n  type Table,\n  type TableFeature,\n  type Updater,\n  assignPrototypeAPIs,\n  assignTableAPIs,\n  functionalUpdate,\n} from '@tanstack/react-table';\n\nimport type {\n  DataTableColumnFontStyleProps,\n  DataTableColumnFontStyleState,\n} from './column-font-style-types.js';\nimport { useControllableState } from '../../../../core/hooks/useControllableState.js';\nimport { useDataTableConfigElement } from '../../../hooks/useDataTableConfig.js';\nimport type { DataTableRowData } from '../../row-data-types.js';\nimport type { TDataTableFeatures } from '../types/features.types.js';\nimport {\n  createPrototypeConstructor,\n  createTableConstructor,\n} from '../types/table.types.js';\nimport type { DataTableOptions } from '../types/table.types.js';\n\n/**\n * Configuration hook for the DataTable FontStyle feature.\n * @internal\n */\nexport function useColumnFontStyle<TData extends DataTableRowData>(\n  props: DataTableColumnFontStyleProps,\n  options: DataTableOptions<Exclude<TData, unknown>>,\n): void {\n  const configFontStyle = useDataTableConfigElement('fontStyle');\n\n  const [columnFontStyle, onColumnFontStyleChange] = useControllableState({\n    value: props.fontStyle ?? configFontStyle,\n    defaultValue: props.defaultFontStyle,\n    onChange: props.onFontStyleChange,\n  });\n\n  // eslint-disable-next-line react-hooks/immutability\n  options.state = {\n    ...options.state,\n    columnFontStyle,\n  };\n  // eslint-disable-next-line react-hooks/immutability\n  options.onColumnFontStyleChange = onColumnFontStyleChange;\n}\n\n/**\n * Helper function that will allow access to the columnFontStyle state of an individual column.\n */\nfunction table_setColumnFontStyle<TData extends RowData>(\n  table: Table<TDataTableFeatures, TData>,\n  updater: Updater<DataTableColumnFontStyleState>,\n): void {\n  const newValue = functionalUpdate(\n    updater,\n    table.atoms.columnFontStyle?.get() ?? {},\n  );\n  table.options.onColumnFontStyleChange?.(newValue);\n}\n\n// Add a toggleFontStyle function onto the column so that it can be accessed\n// during rendering.\nfunction column_toggleFontStyle<\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(\n  column: Column<TDataTableFeatures, TData, TValue>,\n  value?: 'code' | 'text',\n): void {\n  table_setColumnFontStyle(column.table, (old) => {\n    let newValue = value;\n    // If there is no passed value, apply the toggle logic\n    if (newValue === undefined) {\n      if (old[column.id] !== undefined) {\n        newValue = old[column.id] === 'code' ? 'text' : 'code';\n      } else {\n        newValue =\n          column.table.atoms.visualVariantConfig?.get().fontStyle === 'code'\n            ? 'text'\n            : 'code';\n      }\n    }\n    return {\n      ...old,\n      [column.id]: newValue,\n    };\n  });\n}\n\n/**\n * Helper function that will allow access to the columnFontStyle state of an individual column.\n * @returns\n */\nfunction column_getFontStyle<\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(\n  column: Column<TDataTableFeatures, TData, TValue>,\n): 'code' | 'text' | undefined {\n  const fontStyleState = column.table.atoms.columnFontStyle?.get();\n\n  // Check if a font style is defined in the state\n  if (fontStyleState?.[column.id]) {\n    return fontStyleState?.[column.id];\n  }\n  // Check if some font style is defined in the columnDef meta based on column types\n  return (\n    column.columnDef.meta?.fontStyle ??\n    column.table.atoms.visualVariantConfig.get().fontStyle\n  );\n}\n\nexport function constructColumnFontStyleFeature(): TableFeature {\n  return {\n    getInitialState: (initialState) => {\n      return {\n        columnFontStyle: structuredClone({}),\n        ...initialState,\n      };\n    },\n    assignColumnPrototype: createPrototypeConstructor(\n      (\n        prototype: Record<string, unknown>,\n        table: Table<TDataTableFeatures, RowData>,\n      ) => {\n        assignPrototypeAPIs(\n          'DataTableColumnFontStyleFeature',\n          prototype,\n          table,\n          {\n            column_getFontStyle: {\n              fn: (column) => column_getFontStyle(column),\n            },\n            column_toggleFontStyle: {\n              fn: (column, value) => column_toggleFontStyle(column, value),\n            },\n          },\n        );\n      },\n    ),\n    constructTableAPIs: createTableConstructor(\n      (table: Table<TDataTableFeatures, RowData>) => {\n        assignTableAPIs('DataTableColumnFontStyleFeature', table, {\n          table_setColumnFontStyle: {\n            fn: (updater) => table_setColumnFontStyle(table, updater),\n          },\n        });\n      },\n    ),\n  };\n}\n\n/**\n * Feature implementation for FontStyle. This contains the logic that will be given\n * to the tanstack table. The implementing interface is important as these are\n * the function that will be called by the tanstack table core during render.\n * @internal\n */\nexport const DataTableColumnFontStyleFeature =\n  constructColumnFontStyleFeature();\n"],
+  "mappings": "AAAA;AAAA,EAOE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAMP,SAAS,4BAA4B;AACrC,SAAS,iCAAiC;AAG1C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAOA,SAAS,mBACd,OACA,SACM;AACN,QAAM,kBAAkB,0BAA0B,WAAW;AAE7D,QAAM,CAAC,iBAAiB,uBAAuB,IAAI,qBAAqB;AAAA,IACtE,OAAO,MAAM,aAAa;AAAA,IAC1B,cAAc,MAAM;AAAA,IACpB,UAAU,MAAM;AAAA,EAClB,CAAC;AAGD,UAAQ,QAAQ;AAAA,IACd,GAAG,QAAQ;AAAA,IACX;AAAA,EACF;AAEA,UAAQ,0BAA0B;AACpC;AAKA,SAAS,yBACP,OACA,SACM;AACN,QAAM,WAAW;AAAA,IACf;AAAA,IACA,MAAM,MAAM,iBAAiB,IAAI,KAAK,CAAC;AAAA,EACzC;AACA,QAAM,QAAQ,0BAA0B,QAAQ;AAClD;AAIA,SAAS,uBAIP,QACA,OACM;AACN,2BAAyB,OAAO,OAAO,CAAC,QAAQ;AAC9C,QAAI,WAAW;AAEf,QAAI,aAAa,QAAW;AAC1B,UAAI,IAAI,OAAO,EAAE,MAAM,QAAW;AAChC,mBAAW,IAAI,OAAO,EAAE,MAAM,SAAS,SAAS;AAAA,MAClD,OAAO;AACL,mBACE,OAAO,MAAM,MAAM,qBAAqB,IAAI,EAAE,cAAc,SACxD,SACA;AAAA,MACR;AAAA,IACF;AACA,WAAO;AAAA,MACL,GAAG;AAAA,MACH,CAAC,OAAO,EAAE,GAAG;AAAA,IACf;AAAA,EACF,CAAC;AACH;AAMA,SAAS,oBAIP,QAC6B;AAC7B,QAAM,iBAAiB,OAAO,MAAM,MAAM,iBAAiB,IAAI;AAG/D,MAAI,iBAAiB,OAAO,EAAE,GAAG;AAC/B,WAAO,iBAAiB,OAAO,EAAE;AAAA,EACnC;AAEA,SACE,OAAO,UAAU,MAAM,aACvB,OAAO,MAAM,MAAM,oBAAoB,IAAI,EAAE;AAEjD;AAEO,SAAS,kCAAgD;AAC9D,SAAO;AAAA,IACL,iBAAiB,CAAC,iBAAiB;AACjC,aAAO;AAAA,QACL,iBAAiB,gBAAgB,CAAC,CAAC;AAAA,QACnC,GAAG;AAAA,MACL;AAAA,IACF;AAAA,IACA,uBAAuB;AAAA,MACrB,CACE,WACA,UACG;AACH;AAAA,UACE;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,YACE,qBAAqB;AAAA,cACnB,IAAI,CAAC,WAAW,oBAAoB,MAAM;AAAA,YAC5C;AAAA,YACA,wBAAwB;AAAA,cACtB,IAAI,CAAC,QAAQ,UAAU,uBAAuB,QAAQ,KAAK;AAAA,YAC7D;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,oBAAoB;AAAA,MAClB,CAAC,UAA8C;AAC7C,wBAAgB,mCAAmC,OAAO;AAAA,UACxD,0BAA0B;AAAA,YACxB,IAAI,CAAC,YAAY,yBAAyB,OAAO,OAAO;AAAA,UAC1D;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AACF;AAQO,MAAM,kCACX,gCAAgC;",
   "names": []
 }

package/esm/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/esm/tables/DataTable/features/ColumnOrder/ColumnOrder.js

@@ -14,6 +14,10 @@ import {
   moveColumnLeft,
   moveColumnRight
 } from "./column-order-utils.js";
+import {
+  createPrototypeConstructor,
+  createTableConstructor
+} from "../types/table.types.js";
 function table_getOrderColumnsFn(table) {
   const columnOrder = table.atoms.columnOrder?.get() ?? [];
   return (columns) => {
@@ -120,52 +124,57 @@ function constructColumnOrderFeature() {
         ...initialState
       };
     },
-    assignColumnPrototype: (prototype, 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) => {
-      assignPrototypeAPIs("DataTableColumnOrderFeature", prototype, table, {
-        header_getColumnDragAndDropMode: {
-          fn: (header) => header_getColumnDragAndDropMode(header)
-        },
-        header_getIsDragAndDropDisabled: {
-          fn: (header) => header_getIsDragAndDropDisabled(header)
-        }
-      });
-    },
-    constructTableAPIs: (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: createPrototypeConstructor(
+      (prototype, 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: createPrototypeConstructor(
+      (prototype, table) => {
+        assignPrototypeAPIs("DataTableColumnOrderFeature", prototype, table, {
+          header_getColumnDragAndDropMode: {
+            fn: (header) => header_getColumnDragAndDropMode(header)
+          },
+          header_getIsDragAndDropDisabled: {
+            fn: (header) => header_getIsDragAndDropDisabled(header)
+          }
+        });
+      }
+    ),
+    constructTableAPIs: createTableConstructor(
+      (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/esm/tables/DataTable/features/ColumnOrder/ColumnOrder.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/ColumnOrder/ColumnOrder.tsx"],
-  "sourcesContent": ["import {\n  type Column,\n  type TableFeatures,\n  type RowData,\n  type TableFeature,\n  assignPrototypeAPIs,\n  assignTableAPIs,\n  type Table_Internal,\n  type Column_Internal,\n  type CellData,\n  type Header,\n  type StockFeatures,\n} from '@tanstack/react-table';\nimport {\n  orderColumns,\n  table_getAllLeafColumns,\n  table_setColumnOrder,\n} from '@tanstack/react-table/static-functions';\n\nimport type { ColumnOrderFeatureConstructors } from './column-order-types.js';\nimport {\n  canMoveColumnLeft,\n  canMoveColumnRight,\n  getColumnsToCompareForMove,\n  moveColumnLeft,\n  moveColumnRight,\n} from './column-order-utils.js';\n\n/**\n * Overwrite the order columns fn from react table so that builtin columns are placed correctly\n * @internal\n */\nexport function table_getOrderColumnsFn<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  table: Table_Internal<TFeatures, TData>,\n): (\n  columns: Array<Column_Internal<TFeatures, TData, unknown>>,\n) => Column_Internal<TFeatures, TData, unknown>[] {\n  const columnOrder = table.atoms.columnOrder?.get() ?? [];\n\n  return (columns: Array<Column_Internal<TFeatures, TData, unknown>>) => {\n    const prefixColumns: Array<Column_Internal<TFeatures, TData, unknown>> = [];\n    const suffixColumns: Array<Column_Internal<TFeatures, TData, unknown>> = [];\n    let orderedColumns: Array<Column_Internal<TFeatures, TData, unknown>> =\n      columns;\n\n    // If there is no order, return the normal columns\n    if (columnOrder.length) {\n      const columnsMap = new Map();\n\n      columns.forEach((column) => {\n        const builtinPlacement = column.columnDef.meta?.builtinPlacement;\n        if (builtinPlacement === 'prefix') {\n          prefixColumns.push(column);\n        } else if (builtinPlacement === 'suffix') {\n          suffixColumns.push(column);\n        } else {\n          columnsMap.set(column.id, column);\n        }\n      });\n\n      orderedColumns = [\n        ...prefixColumns,\n        ...columnOrder.flatMap((id) => columnsMap.get(id) ?? []),\n        ...suffixColumns,\n      ];\n    }\n\n    return orderColumns(table, orderedColumns);\n  };\n}\n\n/**\n * Helper function that provides an array of all leaf-node columns, excluding builtin columns.\n * @internal\n */\nexport function table_getLeafColumnsWithoutBuiltin<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  table: Table_Internal<TFeatures, TData>,\n): Column<TFeatures, TData, unknown>[] {\n  return table_getAllLeafColumns(table).filter(\n    (leafColumn) => !leafColumn.columnDef.meta?.builtin,\n  );\n}\n\n/**\n * Helper function to update the currently dragged header in the state.\n * @internal\n */\nexport function table_setDraggedHeaderColumn<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  table: Table_Internal<TFeatures, TData>,\n  column: Column_Internal<TFeatures, TData>,\n): void {\n  table.baseAtoms.draggedHeaderColumn.set(\n    column as Column_Internal<TableFeatures, RowData>,\n  );\n}\n\n/**\n * Helper function to create the restrict drag and drop modifier based on the\n * current table state.\n * @internal\n */\nexport function header_getColumnDragAndDropMode<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(header: Header<TFeatures, TData, TValue>): 'none' | 'only' | 'enabled' {\n  const isDragAndDropDisabled =\n    header.table.options.enableColumnOrdering !== true ||\n    header.column.columnDef.enableUserActions === false ||\n    header.getIsPinned() ||\n    (!column_getCanMoveColumnLeft(header.column) &&\n      !column_getCanMoveColumnRight(header.column));\n\n  if (isDragAndDropDisabled) {\n    return 'none';\n  }\n\n  if (\n    !header.column.getCanColumnActions() &&\n    !header.getCanSortByHeaderClick()\n  ) {\n    return 'only';\n  }\n\n  return 'enabled';\n}\n\n/**\n * Helper function that determines whether drag and drop is disabled on the header (if a child column is dragged).\n * @internal\n */\nexport function header_getIsDragAndDropDisabled<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(header: Header<TFeatures, TData, TValue>): boolean {\n  const draggedHeaderColumn = header.table.atoms.draggedHeaderColumn?.get();\n  const draggedHeaderParentId = draggedHeaderColumn?.parent?.id;\n  const draggedHeaderId = draggedHeaderColumn?.id;\n  const isPinnedHeader = !!(\n    header.column as unknown as Column<StockFeatures, TData>\n  ).getIsPinned();\n\n  if (draggedHeaderId && isPinnedHeader) {\n    return true;\n  }\n\n  if (\n    draggedHeaderParentId === undefined ||\n    draggedHeaderParentId === header.column.id ||\n    draggedHeaderParentId === header.column.parent?.id\n  ) {\n    return false;\n  }\n  return true;\n}\n\n/**\n * Helper function to update the column order state with a new column order object or a functional update.\n * @internal\n */\nexport function column_getCanMoveColumnLeft<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(column: Column_Internal<TFeatures, TData, TValue>): boolean {\n  const columnsToCompare = getColumnsToCompareForMove(column.table, column);\n  return canMoveColumnLeft(column, columnsToCompare);\n}\n\n/**\n * Helper function to update the column order state with a new column order object or a functional update.\n * @internal\n */\nexport function column_getCanMoveColumnRight<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(column: Column_Internal<TFeatures, TData, TValue>): boolean {\n  const columnsToCompare = getColumnsToCompareForMove(column.table, column);\n  return canMoveColumnRight(column, columnsToCompare);\n}\n\n/**\n * Moves the current column one position to the left and updates the table state.\n *\n * Depending on whether the column is a nested column or a standalone column,\n * whether its neighboring columns are pinned, hidden, or nested,\n * we need to consider different scenarios to calculate the new column order correctly.\n *\n * CASE1: Column itself is a nested child column.\n *  - Constraint1: Can only move within the parent group.\n *  - Constraint2: Skip pinned siblings.\n *  - Constraint3: Skip hidden siblings.\n *\n * CASE2: Column is a standalone column or a parent column.\n *  - Constraint1: Skip entire nested columns as a whole.\n *  - Constraint2: Skip pinned columns.\n *  - Constraint3: Skip hidden columns.\n * @internal\n */\nexport function column_moveColumnLeft<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(column: Column_Internal<TFeatures, TData, TValue>): void {\n  // Get the current table state needed for column reordering\n  const leafColumns =\n    column.table.getLeafColumnsWithoutBuiltin() as Column_Internal<\n      TFeatures,\n      TData,\n      TValue\n    >[];\n  const currentColumnOrder = column.table.atoms.columnOrder?.get() ?? [];\n  const columnsPinned = column.table.atoms.columnPinning?.get() ?? {\n    left: [],\n    right: [],\n  };\n\n  const newColumnOrder = moveColumnLeft<TFeatures, TData, TValue>(\n    column,\n    currentColumnOrder,\n    columnsPinned,\n    leafColumns,\n  );\n  table_setColumnOrder(column.table, newColumnOrder);\n}\n\n/**\n * Moves the current column one position to the right and updates the table state.\n *\n * Depending on whether the column is a nested column or a standalone column,\n * whether its neighboring columns are pinned, hidden, or nested,\n * we need to consider different scenarios to calculate the new column order correctly.\n *\n * CASE1: Column itself is a nested child column.\n *  - Constraint1: Can only move within the parent group.\n *  - Constraint2: Skip pinned siblings.\n *  - Constraint3: Skip hidden siblings.\n *\n * CASE2: Column is a standalone column or a parent column.\n *  - Constraint1: Skip entire nested columns as a whole.\n *  - Constraint2: Skip pinned columns.\n *  - Constraint3: Skip hidden columns.\n * @internal\n */\nexport function column_moveColumnRight<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(column: Column_Internal<TFeatures, TData, TValue>): void {\n  // Get the current table state needed for column reordering\n  const leafColumns =\n    column.table.getLeafColumnsWithoutBuiltin() as Column_Internal<\n      TFeatures,\n      TData,\n      TValue\n    >[];\n  const currentColumnOrder = column.table.atoms.columnOrder?.get() ?? [];\n  const columnsPinned = column.table.atoms.columnPinning?.get() ?? {\n    left: [],\n    right: [],\n  };\n  const newColumnOrder = moveColumnRight<TFeatures, TData, TValue>(\n    column,\n    currentColumnOrder,\n    columnsPinned,\n    leafColumns,\n  );\n  table_setColumnOrder(column.table, newColumnOrder);\n}\n\n/**\n * Constructs the column order feature for the table,\n * including API implementations and prototype assignments.\n * @internal\n */\nexport function constructColumnOrderFeature<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(): TableFeature<ColumnOrderFeatureConstructors<TFeatures, TData>> {\n  return {\n    getInitialState: (initialState) => {\n      return {\n        draggedHeaderColumn: null,\n        ...initialState,\n      };\n    },\n    assignColumnPrototype: (prototype, table) => {\n      assignPrototypeAPIs('DataTableColumnOrderFeature', prototype, table, {\n        column_getCanMoveColumnLeft: {\n          fn: (column) => column_getCanMoveColumnLeft(column),\n        },\n        column_getCanMoveColumnRight: {\n          fn: (column) => column_getCanMoveColumnRight(column),\n        },\n        column_moveColumnLeft: {\n          fn: (column) => column_moveColumnLeft(column),\n        },\n        column_moveColumnRight: {\n          fn: (column) => column_moveColumnRight(column),\n        },\n      });\n    },\n    assignHeaderPrototype: (prototype, table) => {\n      assignPrototypeAPIs('DataTableColumnOrderFeature', prototype, table, {\n        header_getColumnDragAndDropMode: {\n          fn: (header) => header_getColumnDragAndDropMode(header),\n        },\n        header_getIsDragAndDropDisabled: {\n          fn: (header) => header_getIsDragAndDropDisabled(header),\n        },\n      });\n    },\n    constructTableAPIs: (table) => {\n      assignTableAPIs('DataTableColumnOrderFeature', table, {\n        table_getLeafColumnsWithoutBuiltin: {\n          fn: () => table_getLeafColumnsWithoutBuiltin(table),\n        },\n        table_getOrderColumnsFn: {\n          fn: () => table_getOrderColumnsFn(table),\n          memoDeps: () => [\n            table.atoms.columnOrder?.get(),\n            table.atoms.grouping?.get(),\n            table.options.groupedColumnMode,\n          ],\n        },\n        table_setDraggedHeaderColumn: {\n          fn: (column: Column_Internal<TFeatures, TData>) => {\n            table_setDraggedHeaderColumn<TableFeatures, TData>(table, column);\n          },\n        },\n      });\n    },\n  };\n}\n\n/**\n * Additional feature implementation for column order.\n * @internal\n */\nexport const DataTableColumnOrderFeature = constructColumnOrderFeature();\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  type Column,\n  type TableFeature,\n  type RowData,\n  assignPrototypeAPIs,\n  assignTableAPIs,\n  type Table,\n  type CellData,\n  type Header,\n} from '@tanstack/react-table';\nimport {\n  orderColumns,\n  table_getAllLeafColumns,\n  table_setColumnOrder,\n} from '@tanstack/react-table/static-functions';\n\nimport {\n  canMoveColumnLeft,\n  canMoveColumnRight,\n  getColumnsToCompareForMove,\n  moveColumnLeft,\n  moveColumnRight,\n} from './column-order-utils.js';\nimport { type TDataTableFeatures } from '../types/features.types.js';\nimport {\n  createPrototypeConstructor,\n  createTableConstructor,\n} from '../types/table.types.js';\n\n/**\n * Overwrite the order columns fn from react table so that builtin columns are placed correctly\n * @internal\n */\nexport function table_getOrderColumnsFn<TData extends RowData>(\n  table: Table<TDataTableFeatures, TData>,\n): (\n  columns: Array<Column<TDataTableFeatures, TData, unknown>>,\n) => Column<TDataTableFeatures, TData, unknown>[] {\n  const columnOrder = table.atoms.columnOrder?.get() ?? [];\n\n  return (columns: Array<Column<TDataTableFeatures, TData, unknown>>) => {\n    const prefixColumns: Array<Column<TDataTableFeatures, TData, unknown>> = [];\n    const suffixColumns: Array<Column<TDataTableFeatures, TData, unknown>> = [];\n    let orderedColumns: Array<Column<TDataTableFeatures, TData, unknown>> =\n      columns;\n\n    // If there is no order, return the normal columns\n    if (columnOrder.length) {\n      const columnsMap = new Map();\n\n      columns.forEach((column) => {\n        const builtinPlacement = column.columnDef.meta?.builtinPlacement;\n        if (builtinPlacement === 'prefix') {\n          prefixColumns.push(column);\n        } else if (builtinPlacement === 'suffix') {\n          suffixColumns.push(column);\n        } else {\n          columnsMap.set(column.id, column);\n        }\n      });\n\n      orderedColumns = [\n        ...prefixColumns,\n        ...columnOrder.flatMap((id) => columnsMap.get(id) ?? []),\n        ...suffixColumns,\n      ];\n    }\n\n    return orderColumns(table, orderedColumns);\n  };\n}\n\n/**\n * Helper function that provides an array of all leaf-node columns, excluding builtin columns.\n * @internal\n */\nexport function table_getLeafColumnsWithoutBuiltin<TData extends RowData>(\n  table: Table<TDataTableFeatures, TData>,\n): Column<TDataTableFeatures, TData, unknown>[] {\n  return table_getAllLeafColumns(table).filter(\n    (leafColumn) => !leafColumn.columnDef.meta?.builtin,\n  );\n}\n\n/**\n * Helper function to update the currently dragged header in the state.\n * @internal\n */\nexport function table_setDraggedHeaderColumn<TData extends RowData>(\n  table: Table<TDataTableFeatures, TData>,\n  column: Column<TDataTableFeatures, TData>,\n): void {\n  table.baseAtoms.draggedHeaderColumn.set(\n    column as Column<TDataTableFeatures, RowData>,\n  );\n}\n\n/**\n * Helper function to create the restrict drag and drop modifier based on the\n * current table state.\n * @internal\n */\nexport function header_getColumnDragAndDropMode<\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(\n  header: Header<TDataTableFeatures, TData, TValue>,\n): 'none' | 'only' | 'enabled' {\n  const isDragAndDropDisabled =\n    header.table.options.enableColumnOrdering !== true ||\n    header.column.columnDef.enableUserActions === false ||\n    header.getIsPinned() ||\n    (!column_getCanMoveColumnLeft(header.column) &&\n      !column_getCanMoveColumnRight(header.column));\n\n  if (isDragAndDropDisabled) {\n    return 'none';\n  }\n\n  if (\n    !header.column.getCanColumnActions() &&\n    !header.getCanSortByHeaderClick()\n  ) {\n    return 'only';\n  }\n\n  return 'enabled';\n}\n\n/**\n * Helper function that determines whether drag and drop is disabled on the header (if a child column is dragged).\n * @internal\n */\nexport function header_getIsDragAndDropDisabled<\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(header: Header<TDataTableFeatures, TData, TValue>): boolean {\n  const draggedHeaderColumn = header.table.atoms.draggedHeaderColumn?.get();\n  const draggedHeaderParentId = draggedHeaderColumn?.parent?.id;\n  const draggedHeaderId = draggedHeaderColumn?.id;\n  const isPinnedHeader = !!header.column.getIsPinned();\n\n  if (draggedHeaderId && isPinnedHeader) {\n    return true;\n  }\n\n  if (\n    draggedHeaderParentId === undefined ||\n    draggedHeaderParentId === header.column.id ||\n    draggedHeaderParentId === header.column.parent?.id\n  ) {\n    return false;\n  }\n  return true;\n}\n\n/**\n * Helper function to update the column order state with a new column order object or a functional update.\n * @internal\n */\nexport function column_getCanMoveColumnLeft<\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(column: Column<TDataTableFeatures, TData, TValue>): boolean {\n  const columnsToCompare = getColumnsToCompareForMove(column.table, column);\n  return canMoveColumnLeft(column, columnsToCompare);\n}\n\n/**\n * Helper function to update the column order state with a new column order object or a functional update.\n * @internal\n */\nexport function column_getCanMoveColumnRight<\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(column: Column<TDataTableFeatures, TData, TValue>): boolean {\n  const columnsToCompare = getColumnsToCompareForMove(column.table, column);\n  return canMoveColumnRight(column, columnsToCompare);\n}\n\n/**\n * Moves the current column one position to the left and updates the table state.\n *\n * Depending on whether the column is a nested column or a standalone column,\n * whether its neighboring columns are pinned, hidden, or nested,\n * we need to consider different scenarios to calculate the new column order correctly.\n *\n * CASE1: Column itself is a nested child column.\n *  - Constraint1: Can only move within the parent group.\n *  - Constraint2: Skip pinned siblings.\n *  - Constraint3: Skip hidden siblings.\n *\n * CASE2: Column is a standalone column or a parent column.\n *  - Constraint1: Skip entire nested columns as a whole.\n *  - Constraint2: Skip pinned columns.\n *  - Constraint3: Skip hidden columns.\n * @internal\n */\nexport function column_moveColumnLeft<\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(column: Column<TDataTableFeatures, TData, TValue>): void {\n  // Get the current table state needed for column reordering\n  const leafColumns = column.table.getLeafColumnsWithoutBuiltin() as Column<\n    TDataTableFeatures,\n    TData,\n    TValue\n  >[];\n  const currentColumnOrder = column.table.atoms.columnOrder?.get() ?? [];\n  const columnsPinned = column.table.atoms.columnPinning?.get() ?? {\n    left: [],\n    right: [],\n  };\n\n  const newColumnOrder = moveColumnLeft<TData, TValue>(\n    column,\n    currentColumnOrder,\n    columnsPinned,\n    leafColumns,\n  );\n  table_setColumnOrder(column.table, newColumnOrder);\n}\n\n/**\n * Moves the current column one position to the right and updates the table state.\n *\n * Depending on whether the column is a nested column or a standalone column,\n * whether its neighboring columns are pinned, hidden, or nested,\n * we need to consider different scenarios to calculate the new column order correctly.\n *\n * CASE1: Column itself is a nested child column.\n *  - Constraint1: Can only move within the parent group.\n *  - Constraint2: Skip pinned siblings.\n *  - Constraint3: Skip hidden siblings.\n *\n * CASE2: Column is a standalone column or a parent column.\n *  - Constraint1: Skip entire nested columns as a whole.\n *  - Constraint2: Skip pinned columns.\n *  - Constraint3: Skip hidden columns.\n * @internal\n */\nexport function column_moveColumnRight<\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(column: Column<TDataTableFeatures, TData, TValue>): void {\n  // Get the current table state needed for column reordering\n  const leafColumns = column.table.getLeafColumnsWithoutBuiltin() as Column<\n    TDataTableFeatures,\n    TData,\n    TValue\n  >[];\n  const currentColumnOrder = column.table.atoms.columnOrder?.get() ?? [];\n  const columnsPinned = column.table.atoms.columnPinning?.get() ?? {\n    left: [],\n    right: [],\n  };\n  const newColumnOrder = moveColumnRight<TData, TValue>(\n    column,\n    currentColumnOrder,\n    columnsPinned,\n    leafColumns,\n  );\n  table_setColumnOrder(column.table, newColumnOrder);\n}\n\n/**\n * Constructs the column order feature for the table,\n * including API implementations and prototype assignments.\n * @internal\n */\nexport function constructColumnOrderFeature(): TableFeature {\n  return {\n    getInitialState: (initialState) => {\n      return {\n        draggedHeaderColumn: null,\n        ...initialState,\n      };\n    },\n    assignColumnPrototype: createPrototypeConstructor(\n      (\n        prototype: Record<string, unknown>,\n        table: Table<TDataTableFeatures, RowData>,\n      ) => {\n        assignPrototypeAPIs('DataTableColumnOrderFeature', prototype, table, {\n          column_getCanMoveColumnLeft: {\n            fn: (column) => column_getCanMoveColumnLeft(column),\n          },\n          column_getCanMoveColumnRight: {\n            fn: (column) => column_getCanMoveColumnRight(column),\n          },\n          column_moveColumnLeft: {\n            fn: (column) => column_moveColumnLeft(column),\n          },\n          column_moveColumnRight: {\n            fn: (column) => column_moveColumnRight(column),\n          },\n        });\n      },\n    ),\n    assignHeaderPrototype: createPrototypeConstructor(\n      (\n        prototype: Record<string, unknown>,\n        table: Table<TDataTableFeatures, RowData>,\n      ) => {\n        assignPrototypeAPIs('DataTableColumnOrderFeature', prototype, table, {\n          header_getColumnDragAndDropMode: {\n            fn: (header) => header_getColumnDragAndDropMode(header),\n          },\n          header_getIsDragAndDropDisabled: {\n            fn: (header) => header_getIsDragAndDropDisabled(header),\n          },\n        });\n      },\n    ),\n    constructTableAPIs: createTableConstructor(\n      (table: Table<TDataTableFeatures, RowData>) => {\n        assignTableAPIs('DataTableColumnOrderFeature', table, {\n          table_getLeafColumnsWithoutBuiltin: {\n            fn: () => table_getLeafColumnsWithoutBuiltin(table),\n          },\n          table_getOrderColumnsFn: {\n            fn: () => table_getOrderColumnsFn(table),\n            // Upstream also keys this on the grouping state. The DataTable does\n            // not register `columnGroupingFeature`, and the ordering function\n            // above reads nothing but the column order.\n            memoDeps: () => [table.atoms.columnOrder?.get()],\n          },\n          table_setDraggedHeaderColumn: {\n            fn: (column: Column<TDataTableFeatures, RowData>) => {\n              table_setDraggedHeaderColumn<RowData>(table, column);\n            },\n          },\n        });\n      },\n    ),\n  };\n}\n\n/**\n * Additional feature implementation for column order.\n * @internal\n */\nexport const DataTableColumnOrderFeature = constructColumnOrderFeature();\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,9 +1,9 @@
 import "./ColumnOrder.css";
 import { createRuntimeFn as _7a468 } from "@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 = _7a468({ 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 = _7a468({ 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";
 export {
   columnDndOverlay,
   headerDragAndDrop,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/ColumnOrder/ColumnOrder.css.ts"],
-  "sourcesContent": ["import './ColumnOrder.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var columnDndOverlay = '_1ku1w3z0-3-12-2';\nexport var headerDragAndDrop = {dragging:'_1ku1w3z5-3-12-2',enabled:'_1ku1w3z6-3-12-2',inactive:'_1ku1w3z7-3-12-2'};\nexport var insertPositionIndicator = _7a468({defaultClassName:'_1ku1w3z1-3-12-2',variantClassNames:{left:{true:'_1ku1w3z2-3-12-2',false:'_1ku1w3z3-3-12-2'}},defaultVariants:{},compoundVariants:[]});\nexport var verticalDividers = '_1ku1w3z4-3-12-2';"],
+  "sourcesContent": ["import './ColumnOrder.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var columnDndOverlay = '_1ku1w3z0-3-13-0';\nexport var headerDragAndDrop = {dragging:'_1ku1w3z5-3-13-0',enabled:'_1ku1w3z6-3-13-0',inactive:'_1ku1w3z7-3-13-0'};\nexport var insertPositionIndicator = _7a468({defaultClassName:'_1ku1w3z1-3-13-0',variantClassNames:{left:{true:'_1ku1w3z2-3-13-0',false:'_1ku1w3z3-3-13-0'}},defaultVariants:{},compoundVariants:[]});\nexport var verticalDividers = '_1ku1w3z4-3-13-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,mBAAmB;AACvB,IAAI,oBAAoB,EAAC,UAAS,oBAAmB,SAAQ,oBAAmB,UAAS,mBAAkB;AAC3G,IAAI,0BAA0B,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,MAAK,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC7L,IAAI,mBAAmB;",
   "names": []
 }

package/esm/tables/DataTable/features/ColumnOrder/ColumnOrderDragAndDropContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/ColumnOrder/ColumnOrderDragAndDropContext.tsx"],
-  "sourcesContent": ["import {\n  type Active,\n  DndContext as DragAndDropContext,\n  type DragOverEvent,\n  DragOverlay,\n  MouseSensor,\n  type Over,\n  TouchSensor,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core';\nimport type { RowData, Column } from '@tanstack/react-table';\nimport clsx from 'clsx';\nimport {\n  type JSX,\n  type ReactNode,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport {\n  createHeaderPlaceholder,\n  createRestrictColumnDragAndDrop,\n  customCollisionDetection,\n  getCustomScrollSpeed,\n  getDraggableAreaBounds,\n  getDraggedHeaderElement,\n  indicateInsertPosition,\n  SCROLL_PROXIMITY_ZONE,\n  unpinnedHeaderFilter,\n  updateColumnOrderOnDragEnd,\n} from './column-order-dnd-utils.js';\nimport * as styles from './ColumnOrder.sty.js';\nimport { getDataTableBorderWidth } from '../../../utils/data-table-border-width.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport type { TDataTableFeatures } from '../types/features.types.js';\n\nconst DRAGGED_HEADER_DEFAULT_WIDTH = 100;\nconst DRAGGED_HEADER_DEFAULT_HEIGHT = 37;\n\nexport function ColumnOrderDragAndDropContext<TData extends RowData>({\n  children,\n}: Readonly<{\n  children: ReactNode;\n}>): JSX.Element {\n  const table = useDataTable();\n  const totalHeaderHeight = table.getTotalHeaderHeight();\n  const visualVariantConfig = table.atoms.visualVariantConfig?.get();\n  const containedVariant = visualVariantConfig.contained;\n  const hasSubHeaders = table.getHeaderGroups().length > 1;\n  const verticalDividers =\n    visualVariantConfig.verticalDividers || hasSubHeaders;\n  const pinnedColumns = table.atoms.columnPinning?.get();\n\n  const virtualizationContainer = table.getRowVirtualizationContainer();\n  const [dragOverlayContent, setDragOverlayContent] =\n    useState<RefObject<HTMLDivElement> | null>(null);\n  const pinnedDraggableAreaBoundsRef = useRef<\n    ReturnType<typeof getDraggableAreaBounds>\n  >({ left: undefined, right: undefined });\n  const [draggedHeaderSize, setDraggedHeaderSize] = useState<{\n    width: number;\n    height: number;\n  }>({\n    width: DRAGGED_HEADER_DEFAULT_WIDTH,\n    height: DRAGGED_HEADER_DEFAULT_HEIGHT,\n  });\n\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n  );\n\n  const restrictColumnDragAndDrop = useMemo(\n    () =>\n      createRestrictColumnDragAndDrop(\n        totalHeaderHeight,\n        containedVariant,\n        pinnedColumns ?? { left: [], right: [] },\n        hasSubHeaders,\n        virtualizationContainer,\n      ),\n    [\n      totalHeaderHeight,\n      virtualizationContainer,\n      containedVariant,\n      pinnedColumns,\n      hasSubHeaders,\n    ],\n  );\n\n  const placeholderElement = useRef<HTMLElement | null>(null);\n\n  // We drive scrolling from a continuous RAF (requestAnimationFrame) loop instead of\n  // dnd-kit's built-in autoScroll. Using a ref prevents scroll updates from causing re-renders.\n  const scrollFrameRef = useRef<number | null>(null);\n\n  // Track raw pointer position to determine scroll direction.\n  // Using a pointermove listener (rather than dnd-kit's `delta`) is necessary\n  // because dnd-kit adds scroll compensation to `delta.x` as the container\n  // scrolls, which would cause the right-scroll zone to never exit.\n  const pointerXRef = useRef<number>(0);\n  const trackPointerXRef = useRef<((e: PointerEvent) => void) | null>(null);\n  // hold the parent header DOM element when dragging a child column so the scroll loop\n  // can check whether the parent is already fully visible and there's no need for scrolling\n  const parentHeaderComponentRef = useRef<HTMLElement | null>(null);\n\n  const stopScrollLoop = useCallback(() => {\n    if (scrollFrameRef.current !== null) {\n      cancelAnimationFrame(scrollFrameRef.current);\n      scrollFrameRef.current = null;\n    }\n  }, []);\n\n  const startScrollLoop = useCallback(() => {\n    if (scrollFrameRef.current !== null) {\n      return;\n    }\n\n    const loop = () => {\n      if (!virtualizationContainer) {\n        scrollFrameRef.current = null;\n        return;\n      }\n\n      // Read pointer position fresh every frame. RAF callbacks always run after\n      // all pending input events (including pointermove) have been processed,\n      // so pointerXRef.current is guaranteed to hold the latest position here.\n      const mouseX = pointerXRef.current;\n      const containerRect = virtualizationContainer.getBoundingClientRect();\n      const rightBound =\n        pinnedDraggableAreaBoundsRef.current.right ?? containerRect.right;\n      const leftBound =\n        pinnedDraggableAreaBoundsRef.current.left ?? containerRect.left;\n\n      // Positive penetration means the cursor has entered the proximity zone.\n      // Zero or negative means it is safely away from that boundary.\n      const rightPenetration = mouseX - (rightBound - SCROLL_PROXIMITY_ZONE);\n      const leftPenetration = leftBound + SCROLL_PROXIMITY_ZONE - mouseX;\n\n      const { scrollLeft, scrollWidth, clientWidth } = virtualizationContainer;\n\n      // When a child column is being dragged, scrolling should be capped only until the parent header becomes fully visible.\n      // if the parent is already fully visible, skip scrolling entirely.\n      let maxScrollRight = Infinity;\n      let maxScrollLeft = Infinity;\n\n      const parentEl = parentHeaderComponentRef.current;\n      if (parentEl) {\n        const parentRect = parentEl.getBoundingClientRect();\n\n        // many pixels the parent overflows past the right / left bound.\n        maxScrollRight = Math.max(0, parentRect.right - rightBound);\n        maxScrollLeft = Math.max(0, leftBound - parentRect.left);\n      }\n\n      if (rightPenetration > 0 && leftPenetration <= 0) {\n        // Scale speed linearly from MIN at zone entry to MAX at the boundary.\n        const scrollSpeed = getCustomScrollSpeed(rightPenetration);\n\n        const canScrollRight = scrollLeft < scrollWidth - clientWidth;\n        if (canScrollRight && maxScrollRight > 0) {\n          // the RAF loop keeps scheduling the next frame as long as maxScrollRight > speed. Same for right scroll.\n          virtualizationContainer.scrollLeft += Math.min(\n            scrollSpeed,\n            Math.ceil(maxScrollRight),\n          );\n        }\n      } else if (leftPenetration > 0 && rightPenetration <= 0) {\n        const scrollSpeed = getCustomScrollSpeed(leftPenetration);\n\n        const canScrollLeft = scrollLeft > 0;\n        if (canScrollLeft && maxScrollLeft > 0) {\n          virtualizationContainer.scrollLeft -= Math.min(\n            scrollSpeed,\n            Math.ceil(maxScrollLeft),\n          );\n        }\n      }\n\n      scrollFrameRef.current = requestAnimationFrame(loop);\n    };\n\n    scrollFrameRef.current = requestAnimationFrame(loop);\n  }, [virtualizationContainer]);\n\n  const cleanupDragState = useCallback(() => {\n    stopScrollLoop();\n    parentHeaderComponentRef.current = null;\n    if (trackPointerXRef.current) {\n      window.removeEventListener('pointermove', trackPointerXRef.current);\n      trackPointerXRef.current = null;\n    }\n  }, [stopScrollLoop]);\n\n  const handleDragStart = ({ active }: { active: Active }) => {\n    const draggedColumn = active.data.current?.column as Column<\n      TDataTableFeatures,\n      TData\n    >;\n\n    // Browsers can scroll the page when initiating a native drag. Capture the current\n    // scroll position and restore it in the next frame to cancel any unintended jump.\n    const pageScrollY = window.scrollY;\n    requestAnimationFrame(() => {\n      if (window.scrollY !== pageScrollY) {\n        window.scrollTo(window.scrollX, pageScrollY);\n      }\n    });\n\n    // Read bounds fresh from the DOM on every drag start event so they always reflect\n    // the current scroll position and are never stale from an earlier render.\n    pinnedDraggableAreaBoundsRef.current = getDraggableAreaBounds(\n      pinnedColumns,\n      virtualizationContainer,\n      hasSubHeaders ? 1 : 0,\n    );\n\n    // Start tracking raw pointer position for scroll zone detection.\n    trackPointerXRef.current = (e: PointerEvent) => {\n      pointerXRef.current = e.clientX;\n    };\n    window.addEventListener('pointermove', trackPointerXRef.current, {\n      passive: true,\n    });\n    // If the dragged column is a child, store its parent header element so\n    // the scroll loop can cap scrolling to keep the parent fully visible.\n    if (draggedColumn.parent) {\n      const parentId = draggedColumn.parent.id;\n      parentHeaderComponentRef.current =\n        virtualizationContainer?.querySelector<HTMLElement>(\n          `[role=\"columnheader\"][data-header-row=\"0\"][data-columnid=${CSS.escape(\n            parentId,\n          )}]${unpinnedHeaderFilter}`,\n        ) ?? null;\n    }\n\n    // Start the RAF loop immediately so proximity-zone entry is detected on\n    // every frame regardless of when onDragMove fires relative to pointermove.\n    startScrollLoop();\n\n    table.setDraggedHeaderColumn(draggedColumn);\n    setDraggedHeaderSize(table.getHeaderSize(active.id as string));\n    setDragOverlayContent(active.data.current?.portalRef);\n\n    // In order to make sure the header size does not change when the header\n    // is portalled out, we create a placeholder element in the header in order\n    // to preserve the grid layout\n    const { headerGroupElement, draggedHeaderElement } =\n      getDraggedHeaderElement(String(active.id), virtualizationContainer);\n\n    if (\n      headerGroupElement === null ||\n      !(headerGroupElement instanceof HTMLElement)\n    ) {\n      return;\n    }\n\n    if (\n      draggedHeaderElement === null ||\n      !(draggedHeaderElement instanceof HTMLElement)\n    ) {\n      return;\n    }\n\n    // Extract the position of the dragged element and its size in order\n    // to position the placeholder.\n    const { gridArea } = draggedHeaderElement.style;\n    const { width, height } = draggedHeaderElement.getBoundingClientRect();\n    if (!gridArea) {\n      return;\n    }\n\n    const verticalDividerOptions =\n      verticalDividers && !draggedColumn.getIsFirstVisibleUnpinnedColumn()\n        ? {\n            isParentColumn:\n              draggedHeaderElement.getAttribute('data-header-row') === '0',\n            heightOffset:\n              headerGroupElement.offsetHeight -\n              draggedHeaderElement.offsetHeight,\n          }\n        : undefined;\n\n    placeholderElement.current = createHeaderPlaceholder(\n      gridArea,\n      width,\n      height,\n      verticalDividerOptions,\n    );\n    headerGroupElement.appendChild(placeholderElement.current);\n  };\n\n  const handleDragOver = (event: DragOverEvent) => {\n    indicateInsertPosition(event, virtualizationContainer);\n  };\n\n  const handleDragEnd = ({\n    active,\n    over,\n  }: {\n    active: Active;\n    over: Over | null;\n  }) => {\n    setDragOverlayContent(null);\n    cleanupDragState();\n    updateColumnOrderOnDragEnd({\n      active,\n      over,\n      table,\n      virtualizationContainer,\n    });\n    // with nested headers, removing the placeholder element too early could lead to wrong header measurements\n    // therefore, the placeholder is removed just before the next repaint\n    requestAnimationFrame(() => {\n      placeholderElement.current?.remove();\n    });\n  };\n\n  // Clean up the RAF scroll loop and the global pointermove listener if\n  // the component unmounts during an active drag (e.g. the table is removed\n  // from the DOM), since handleDragEnd would never fire in that case.\n  useEffect(() => {\n    return () => {\n      cleanupDragState();\n      placeholderElement.current?.remove();\n    };\n  }, [stopScrollLoop, cleanupDragState]);\n\n  return (\n    <DragAndDropContext\n      sensors={sensors}\n      collisionDetection={customCollisionDetection}\n      modifiers={[restrictColumnDragAndDrop]}\n      autoScroll={false}\n      accessibility={{\n        container: virtualizationContainer,\n        // Suppress dnd-kit's default draggable instructions until full keyboard control is implemented in APPDEV-19270\n        screenReaderInstructions: { draggable: '' },\n      }}\n      onDragStart={handleDragStart}\n      onDragOver={handleDragOver}\n      onDragEnd={handleDragEnd}\n    >\n      {\n        // We need to portal the drag and drop overlay to escape CSS transforms on ancestor elements.\n        // This ensures transforms on parent containers don't affect the position of the drag overlay.\n        createPortal(\n          <DragOverlay\n            data-drag-overlay\n            dropAnimation={null}\n            className={clsx(styles.columnDndOverlay)}\n            style={{\n              // the observed header size includes a border which we don't want in the overlay\n              height: draggedHeaderSize.height - getDataTableBorderWidth(),\n              width: draggedHeaderSize.width,\n            }}\n          >\n            <div ref={dragOverlayContent} />\n          </DragOverlay>,\n          document.body,\n        )\n      }\n      {children}\n    </DragAndDropContext>\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  type Active,\n  DndContext as DragAndDropContext,\n  type DragOverEvent,\n  DragOverlay,\n  MouseSensor,\n  type Over,\n  TouchSensor,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core';\nimport type { RowData, Column } from '@tanstack/react-table';\nimport clsx from 'clsx';\nimport {\n  type JSX,\n  type ReactNode,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport {\n  createHeaderPlaceholder,\n  createRestrictColumnDragAndDrop,\n  customCollisionDetection,\n  getCustomScrollSpeed,\n  getDraggableAreaBounds,\n  getDraggedHeaderElement,\n  indicateInsertPosition,\n  SCROLL_PROXIMITY_ZONE,\n  unpinnedHeaderFilter,\n  updateColumnOrderOnDragEnd,\n} from './column-order-dnd-utils.js';\nimport * as styles from './ColumnOrder.sty.js';\nimport { getDataTableBorderWidth } from '../../../utils/data-table-border-width.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport type { TDataTableFeatures } from '../types/features.types.js';\n\nconst DRAGGED_HEADER_DEFAULT_WIDTH = 100;\nconst DRAGGED_HEADER_DEFAULT_HEIGHT = 37;\n\nexport function ColumnOrderDragAndDropContext({\n  children,\n}: Readonly<{\n  children: ReactNode;\n}>): JSX.Element {\n  const table = useDataTable();\n  const totalHeaderHeight = table.getTotalHeaderHeight();\n  const visualVariantConfig = table.atoms.visualVariantConfig?.get();\n  const containedVariant = visualVariantConfig.contained;\n  const hasSubHeaders = table.getHeaderGroups().length > 1;\n  const verticalDividers =\n    visualVariantConfig.verticalDividers || hasSubHeaders;\n  const pinnedColumns = table.atoms.columnPinning?.get();\n\n  const virtualizationContainer = table.getRowVirtualizationContainer();\n  const [dragOverlayContent, setDragOverlayContent] =\n    useState<RefObject<HTMLDivElement> | null>(null);\n  const pinnedDraggableAreaBoundsRef = useRef<\n    ReturnType<typeof getDraggableAreaBounds>\n  >({ left: undefined, right: undefined });\n  const [draggedHeaderSize, setDraggedHeaderSize] = useState<{\n    width: number;\n    height: number;\n  }>({\n    width: DRAGGED_HEADER_DEFAULT_WIDTH,\n    height: DRAGGED_HEADER_DEFAULT_HEIGHT,\n  });\n\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n  );\n\n  const restrictColumnDragAndDrop = useMemo(\n    () =>\n      createRestrictColumnDragAndDrop(\n        totalHeaderHeight,\n        containedVariant,\n        pinnedColumns ?? { left: [], right: [] },\n        hasSubHeaders,\n        virtualizationContainer,\n      ),\n    [\n      totalHeaderHeight,\n      virtualizationContainer,\n      containedVariant,\n      pinnedColumns,\n      hasSubHeaders,\n    ],\n  );\n\n  const placeholderElement = useRef<HTMLElement | null>(null);\n\n  // We drive scrolling from a continuous RAF (requestAnimationFrame) loop instead of\n  // dnd-kit's built-in autoScroll. Using a ref prevents scroll updates from causing re-renders.\n  const scrollFrameRef = useRef<number | null>(null);\n\n  // Track raw pointer position to determine scroll direction.\n  // Using a pointermove listener (rather than dnd-kit's `delta`) is necessary\n  // because dnd-kit adds scroll compensation to `delta.x` as the container\n  // scrolls, which would cause the right-scroll zone to never exit.\n  const pointerXRef = useRef<number>(0);\n  const trackPointerXRef = useRef<((e: PointerEvent) => void) | null>(null);\n  // hold the parent header DOM element when dragging a child column so the scroll loop\n  // can check whether the parent is already fully visible and there's no need for scrolling\n  const parentHeaderComponentRef = useRef<HTMLElement | null>(null);\n\n  const stopScrollLoop = useCallback(() => {\n    if (scrollFrameRef.current !== null) {\n      cancelAnimationFrame(scrollFrameRef.current);\n      scrollFrameRef.current = null;\n    }\n  }, []);\n\n  const startScrollLoop = useCallback(() => {\n    if (scrollFrameRef.current !== null) {\n      return;\n    }\n\n    const loop = () => {\n      if (!virtualizationContainer) {\n        scrollFrameRef.current = null;\n        return;\n      }\n\n      // Read pointer position fresh every frame. RAF callbacks always run after\n      // all pending input events (including pointermove) have been processed,\n      // so pointerXRef.current is guaranteed to hold the latest position here.\n      const mouseX = pointerXRef.current;\n      const containerRect = virtualizationContainer.getBoundingClientRect();\n      const rightBound =\n        pinnedDraggableAreaBoundsRef.current.right ?? containerRect.right;\n      const leftBound =\n        pinnedDraggableAreaBoundsRef.current.left ?? containerRect.left;\n\n      // Positive penetration means the cursor has entered the proximity zone.\n      // Zero or negative means it is safely away from that boundary.\n      const rightPenetration = mouseX - (rightBound - SCROLL_PROXIMITY_ZONE);\n      const leftPenetration = leftBound + SCROLL_PROXIMITY_ZONE - mouseX;\n\n      const { scrollLeft, scrollWidth, clientWidth } = virtualizationContainer;\n\n      // When a child column is being dragged, scrolling should be capped only until the parent header becomes fully visible.\n      // if the parent is already fully visible, skip scrolling entirely.\n      let maxScrollRight = Infinity;\n      let maxScrollLeft = Infinity;\n\n      const parentEl = parentHeaderComponentRef.current;\n      if (parentEl) {\n        const parentRect = parentEl.getBoundingClientRect();\n\n        // many pixels the parent overflows past the right / left bound.\n        maxScrollRight = Math.max(0, parentRect.right - rightBound);\n        maxScrollLeft = Math.max(0, leftBound - parentRect.left);\n      }\n\n      if (rightPenetration > 0 && leftPenetration <= 0) {\n        // Scale speed linearly from MIN at zone entry to MAX at the boundary.\n        const scrollSpeed = getCustomScrollSpeed(rightPenetration);\n\n        const canScrollRight = scrollLeft < scrollWidth - clientWidth;\n        if (canScrollRight && maxScrollRight > 0) {\n          // the RAF loop keeps scheduling the next frame as long as maxScrollRight > speed. Same for right scroll.\n          virtualizationContainer.scrollLeft += Math.min(\n            scrollSpeed,\n            Math.ceil(maxScrollRight),\n          );\n        }\n      } else if (leftPenetration > 0 && rightPenetration <= 0) {\n        const scrollSpeed = getCustomScrollSpeed(leftPenetration);\n\n        const canScrollLeft = scrollLeft > 0;\n        if (canScrollLeft && maxScrollLeft > 0) {\n          virtualizationContainer.scrollLeft -= Math.min(\n            scrollSpeed,\n            Math.ceil(maxScrollLeft),\n          );\n        }\n      }\n\n      scrollFrameRef.current = requestAnimationFrame(loop);\n    };\n\n    scrollFrameRef.current = requestAnimationFrame(loop);\n  }, [virtualizationContainer]);\n\n  const cleanupDragState = useCallback(() => {\n    stopScrollLoop();\n    parentHeaderComponentRef.current = null;\n    if (trackPointerXRef.current) {\n      window.removeEventListener('pointermove', trackPointerXRef.current);\n      trackPointerXRef.current = null;\n    }\n  }, [stopScrollLoop]);\n\n  const handleDragStart = ({ active }: { active: Active }) => {\n    const draggedColumn = active.data.current?.column as Column<\n      TDataTableFeatures,\n      RowData\n    >;\n\n    // Browsers can scroll the page when initiating a native drag. Capture the current\n    // scroll position and restore it in the next frame to cancel any unintended jump.\n    const pageScrollY = window.scrollY;\n    requestAnimationFrame(() => {\n      if (window.scrollY !== pageScrollY) {\n        window.scrollTo(window.scrollX, pageScrollY);\n      }\n    });\n\n    // Read bounds fresh from the DOM on every drag start event so they always reflect\n    // the current scroll position and are never stale from an earlier render.\n    pinnedDraggableAreaBoundsRef.current = getDraggableAreaBounds(\n      pinnedColumns,\n      virtualizationContainer,\n      hasSubHeaders ? 1 : 0,\n    );\n\n    // Start tracking raw pointer position for scroll zone detection.\n    trackPointerXRef.current = (e: PointerEvent) => {\n      pointerXRef.current = e.clientX;\n    };\n    window.addEventListener('pointermove', trackPointerXRef.current, {\n      passive: true,\n    });\n    // If the dragged column is a child, store its parent header element so\n    // the scroll loop can cap scrolling to keep the parent fully visible.\n    if (draggedColumn.parent) {\n      const parentId = draggedColumn.parent.id;\n      parentHeaderComponentRef.current =\n        virtualizationContainer?.querySelector<HTMLElement>(\n          `[role=\"columnheader\"][data-header-row=\"0\"][data-columnid=${CSS.escape(\n            parentId,\n          )}]${unpinnedHeaderFilter}`,\n        ) ?? null;\n    }\n\n    // Start the RAF loop immediately so proximity-zone entry is detected on\n    // every frame regardless of when onDragMove fires relative to pointermove.\n    startScrollLoop();\n\n    table.setDraggedHeaderColumn(draggedColumn);\n    setDraggedHeaderSize(table.getHeaderSize(active.id as string));\n    setDragOverlayContent(active.data.current?.portalRef);\n\n    // In order to make sure the header size does not change when the header\n    // is portalled out, we create a placeholder element in the header in order\n    // to preserve the grid layout\n    const { headerGroupElement, draggedHeaderElement } =\n      getDraggedHeaderElement(String(active.id), virtualizationContainer);\n\n    if (\n      headerGroupElement === null ||\n      !(headerGroupElement instanceof HTMLElement)\n    ) {\n      return;\n    }\n\n    if (\n      draggedHeaderElement === null ||\n      !(draggedHeaderElement instanceof HTMLElement)\n    ) {\n      return;\n    }\n\n    // Extract the position of the dragged element and its size in order\n    // to position the placeholder.\n    const { gridArea } = draggedHeaderElement.style;\n    const { width, height } = draggedHeaderElement.getBoundingClientRect();\n    if (!gridArea) {\n      return;\n    }\n\n    const verticalDividerOptions =\n      verticalDividers && !draggedColumn.getIsFirstVisibleUnpinnedColumn()\n        ? {\n            isParentColumn:\n              draggedHeaderElement.getAttribute('data-header-row') === '0',\n            heightOffset:\n              headerGroupElement.offsetHeight -\n              draggedHeaderElement.offsetHeight,\n          }\n        : undefined;\n\n    placeholderElement.current = createHeaderPlaceholder(\n      gridArea,\n      width,\n      height,\n      verticalDividerOptions,\n    );\n    headerGroupElement.appendChild(placeholderElement.current);\n  };\n\n  const handleDragOver = (event: DragOverEvent) => {\n    indicateInsertPosition(event, virtualizationContainer);\n  };\n\n  const handleDragEnd = ({\n    active,\n    over,\n  }: {\n    active: Active;\n    over: Over | null;\n  }) => {\n    setDragOverlayContent(null);\n    cleanupDragState();\n    updateColumnOrderOnDragEnd({\n      active,\n      over,\n      table,\n      virtualizationContainer,\n    });\n    // with nested headers, removing the placeholder element too early could lead to wrong header measurements\n    // therefore, the placeholder is removed just before the next repaint\n    requestAnimationFrame(() => {\n      placeholderElement.current?.remove();\n    });\n  };\n\n  // Clean up the RAF scroll loop and the global pointermove listener if\n  // the component unmounts during an active drag (e.g. the table is removed\n  // from the DOM), since handleDragEnd would never fire in that case.\n  useEffect(() => {\n    return () => {\n      cleanupDragState();\n      placeholderElement.current?.remove();\n    };\n  }, [stopScrollLoop, cleanupDragState]);\n\n  return (\n    <DragAndDropContext\n      sensors={sensors}\n      collisionDetection={customCollisionDetection}\n      modifiers={[restrictColumnDragAndDrop]}\n      autoScroll={false}\n      accessibility={{\n        container: virtualizationContainer,\n        // Suppress dnd-kit's default draggable instructions until full keyboard control is implemented in APPDEV-19270\n        screenReaderInstructions: { draggable: '' },\n      }}\n      onDragStart={handleDragStart}\n      onDragOver={handleDragOver}\n      onDragEnd={handleDragEnd}\n    >\n      {\n        // We need to portal the drag and drop overlay to escape CSS transforms on ancestor elements.\n        // This ensures transforms on parent containers don't affect the position of the drag overlay.\n        createPortal(\n          <DragOverlay\n            data-drag-overlay\n            dropAnimation={null}\n            className={clsx(styles.columnDndOverlay)}\n            style={{\n              // the observed header size includes a border which we don't want in the overlay\n              height: draggedHeaderSize.height - getDataTableBorderWidth(),\n              width: draggedHeaderSize.width,\n            }}\n          >\n            <div ref={dragOverlayContent} />\n          </DragOverlay>,\n          document.body,\n        )\n      }\n      {children}\n    </DragAndDropContext>\n  );\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/tables/DataTable/features/ColumnOrder/column-order-dnd-utils.js

@@ -6,7 +6,7 @@ import {
   DATA_TABLE_DND_PLACEHOLDER_DIVIDER_CSS_VAR,
   DATA_TABLE_HORIZONTAL_DIVIDER_HEIGHT
 } from "../../constants.js";
-const unpinnedHeaderFilter = ':not([data-headerid*="left"]):not([data-headerid*="right"])';
+const unpinnedHeaderFilter = ':not([data-headerid^="start_"]):not([data-headerid^="end_"])';
 const SCROLL_PROXIMITY_ZONE = 10;
 const COLUMN_DND_COLLISION_OFFSET = DATA_TABLE_DEFAULT_MIN_COLUMN_WIDTH / 2 - 1;
 const TOUCH_DRAG_MOTION_THRESHOLD = 5;
@@ -87,9 +87,9 @@ function indicateInsertPosition(event, virtualizationContainer) {
   const activeColumnIndex = event.active.data.current?.columnIndex;
   const overColumnId = event.over.id;
   const overColumnIndex = event.over.data.current?.columnIndex;
-  const overColumnChildren = (event.over.data.current?.column).getVisibleLeafColumns().filter(
+  const overColumnChildren = event.over.data.current?.column?.getVisibleLeafColumns().filter(
     (child) => !child.getIsPinned()
-  );
+  ) ?? [];
   const overFirstChildId = overColumnChildren.at(0)?.id;
   const overLastChildId = overColumnChildren.at(-1)?.id;
   if (activeColumnIndex < overColumnIndex) {
@@ -283,8 +283,8 @@ const getTableBounds = (containedVariant, virtualizationContainer, totalHeaderHe
 function getDraggableAreaBounds(pinnedColumns, virtualizationContainer, rowIndex = 0) {
   let left;
   let right;
-  const leftPinnedColumns = pinnedColumns.left;
-  const rightPinnedColumns = pinnedColumns.right;
+  const leftPinnedColumns = pinnedColumns.start;
+  const rightPinnedColumns = pinnedColumns.end;
   if (virtualizationContainer) {
     if (leftPinnedColumns?.length) {
       const lastLeftPinnedColumn = leftPinnedColumns[leftPinnedColumns.length - 1];
@@ -348,7 +348,7 @@ const createRestrictColumnDragAndDrop = (totalHeaderHeight, containedVariant, pi
     const activeColumnParentId = active?.data.current?.column?.parent?.id;
     const hasChildColumns = activeColumnParentId === void 0 && active?.data.current?.column?.columns.length > 0;
     const isChildColumn = activeColumnParentId !== void 0;
-    const hasPinnedColumns = !!(pinnedColumns.left?.length ?? pinnedColumns.right?.length);
+    const hasPinnedColumns = !!(pinnedColumns.start?.length ?? pinnedColumns.end?.length);
     const headerRowIndex = hasSubHeaders ? 1 : 0;
     const tableBounds = getTableBounds(
       containedVariant,