@dynatrace/strato-components 3.6.0 → 3.7.1

package/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/ColumnOrderSettingsDragAndDrop.css

@@ -1,29 +1,29 @@
-._11d1m5j0-3-6-0 {
+._11d1m5j0-3-7-1 {
   cursor: grabbing;
   box-shadow: var(--dt-box-shadows-surface-flat-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
   background-color: var(--dt-colors-background-surface-default, #fff);
   z-index: 4;
   overflow: hidden;
 }
-._11d1m5j0-3-6-0:last-child {
+._11d1m5j0-3-7-1:last-child {
   border-bottom: 0px;
 }
-._11d1m5j1-3-6-0 {
+._11d1m5j1-3-7-1 {
   align-self: center;
   border-radius: var(--dt-borders-radius-field-default, 6px);
   padding: var(--dt-spacings-size-2, 2px) var(--dt-spacings-size-4, 4px);
   transition: none;
 }
-._11d1m5j1-3-6-0:active {
+._11d1m5j1-3-7-1:active {
   background: transparent;
 }
-._11d1m5j1-3-6-0:hover {
+._11d1m5j1-3-7-1:hover {
   background: transparent;
   cursor: grab;
 }
-._11d1m5j0-3-6-0 ._11d1m5j1-3-6-0 {
+._11d1m5j0-3-7-1 ._11d1m5j1-3-7-1 {
   cursor: grabbing;
 }
-._11d1m5j2-3-6-0 {
+._11d1m5j2-3-7-1 {
   opacity: 0.2;
 }

package/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/ColumnOrderSettingsDragAndDrop.d.ts

@@ -1,11 +1,11 @@
+import type { ColumnPinningState, RowData, TableFeatures } from '@tanstack/react-table';
 import { type Virtualizer } from '@tanstack/react-virtual';
 import { type ReactNode } from 'react';
-import type { ColumnPinningState } from '../../../../tanstack-table-core-override/src/index.js';
 /**
  * Drag and drop context for ordering in the column settings modal.
  * @internal
  */
-export declare function ColumnOrderSettingsDragAndDropContext({ children, localColumnOrder, updateLocalColumnOrder, localColumnPinning, itemVirtualizer, }: Readonly<{
+export declare function ColumnOrderSettingsDragAndDropContext<TFeatures extends TableFeatures, TData extends RowData>({ children, localColumnOrder, updateLocalColumnOrder, localColumnPinning, itemVirtualizer, }: Readonly<{
     children: ReactNode;
     localColumnOrder: string[];
     updateLocalColumnOrder: (newColumnOrder: string[]) => void;

package/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/ColumnOrderSettingsDragAndDrop.sty.js

@@ -23,6 +23,6 @@ __export(ColumnOrderSettingsDragAndDrop_css_exports, {
 });
 module.exports = __toCommonJS(ColumnOrderSettingsDragAndDrop_css_exports);
 var import_ColumnOrderSettingsDragAndDrop_css_ts_vanilla = require("./ColumnOrderSettingsDragAndDrop.css");
-var columnDndHandle = "_11d1m5j1-3-6-0";
-var columnDndOverlay = "_11d1m5j0-3-6-0";
-var disabledNonTargetLocalColumn = "_11d1m5j2-3-6-0";
+var columnDndHandle = "_11d1m5j1-3-7-1";
+var columnDndOverlay = "_11d1m5j0-3-7-1";
+var disabledNonTargetLocalColumn = "_11d1m5j2-3-7-1";

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

@@ -1,6 +1,5 @@
 import { type CollisionDetection, type DragOverEvent, type Modifier } from '@dnd-kit/core';
-import type { Column } from '../../../../hooks/useTable/types.js';
-import type { ColumnPinningState } from '../../../../tanstack-table-core-override/src/index.js';
+import type { ColumnPinningState, Column, RowData, TableFeatures, CellData } from '@tanstack/react-table';
 export declare const DATA_TABLE_COLUMNS_LIST_ITEM_BOTTOM_BORDER = 1;
 export declare const DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT: number;
 /**
@@ -13,7 +12,7 @@ export declare const DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT: number;
  * @param activeColumn - the column which is currently being dragged.
  * @internal
  */
-export declare function transformColumnsOnDragOver(columnsList: HTMLElement | null, event: DragOverEvent, localColumnOrder: string[], transformValue: number, activeColumn: Column<unknown, unknown> | undefined): void;
+export declare function transformColumnsOnDragOver<TFeatures extends TableFeatures, TData extends RowData>(columnsList: HTMLElement | null, event: DragOverEvent, localColumnOrder: string[], transformValue: number, activeColumn: Column<TFeatures, TData> | undefined): void;
 /**
  * Gets the rendered element of an unpinned column in the settings modal with a given column id.
  *
@@ -85,15 +84,15 @@ export declare function getDragIndexes(localColumnOrder: string[], activeId: str
  * @returns an array of ordered leaf column ids for the given column, or an empty array if the column is already a leaf column.
  * @internal
  */
-export declare function getLeafColumnsForColumn<TData, TValue>(column: Column<TData, TValue>, localColumnOrder: string[]): string[];
+export declare function getLeafColumnsForColumn<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData>(column: Column<TFeatures, TData, TValue>, localColumnOrder: string[]): string[];
 /**
  * Information about the currently dragged column.
  * @internal
  */
-export type DraggingColumnInfo = {
+export type DraggingColumnInfo<TFeatures extends TableFeatures, TData extends RowData> = {
     id: string;
     index: number;
-    column: Column<unknown, unknown>;
+    column: Column<TFeatures, TData>;
 };
 /**
  * Custom collision detection for column ordering in the column settings modal.
@@ -106,7 +105,7 @@ export type DraggingColumnInfo = {
  * @returns dnd-kit CollisionDetection
  * @internal
  */
-export declare function createColumnOrderSettingsCollisionDetection(localColumnOrder: string[], localColumnPinning: ColumnPinningState, draggingColumnInfo: DraggingColumnInfo | null): CollisionDetection;
+export declare function createColumnOrderSettingsCollisionDetection<TFeatures extends TableFeatures, TData extends RowData>(localColumnOrder: string[], localColumnPinning: ColumnPinningState, draggingColumnInfo: DraggingColumnInfo<TFeatures, TData> | null): CollisionDetection;
 /**
  * Creates a modifier that restricts the drag overlay to the columns list area within the settings modal.
  *

package/tables/DataTable/components/Toolbar/ColumnSettings/ColumnPinningMenu.d.ts

@@ -1,18 +1,18 @@
+import type { ColumnPinningState, RowData, TableFeatures } from '@tanstack/react-table';
 import { JSX } from 'react';
 import type { ColumnListItem } from './column-settings-types.js';
-import type { ColumnPinningState } from '../../../tanstack-table-core-override/src/index.js';
-interface ColumnPinningMenuProps {
+interface ColumnPinningMenuProps<TFeatures extends TableFeatures, TData extends RowData> {
     /**
      * The column to render the pinning menu for.
      */
-    column: ColumnListItem;
+    column: ColumnListItem<TFeatures, TData>;
     /**
      * The ordered flat columns, grouped by pinning position.
      */
     orderedFlatColumns: {
-        left: ColumnListItem[];
-        center: ColumnListItem[];
-        right: ColumnListItem[];
+        left: ColumnListItem<TFeatures, TData>[];
+        center: ColumnListItem<TFeatures, TData>[];
+        right: ColumnListItem<TFeatures, TData>[];
     };
     /**
      * The column pinning state in the settings modal.
@@ -27,5 +27,5 @@ interface ColumnPinningMenuProps {
  * Menu component for pinning/unpinning columns in the DataTable column settings.
  * @internal
  */
-export declare const ColumnPinningMenu: (props: ColumnPinningMenuProps) => JSX.Element;
+export declare function ColumnPinningMenu<TFeatures extends TableFeatures, TData extends RowData>(props: Readonly<ColumnPinningMenuProps<TFeatures, TData>>): JSX.Element;
 export {};

package/tables/DataTable/components/Toolbar/ColumnSettings/ColumnPinningMenu.js

@@ -28,7 +28,7 @@ var import_Menu = require("../../../../../navigation/menu/Menu.js");
 var import_Tooltip = require("../../../../../overlays/tooltip/Tooltip.js");
 var import_column_pinning_utils = require("../../../features/ColumnPinning/column-pinning-utils.js");
 var import_messages = require("../../../messages.js");
-const ColumnPinningMenu = (props) => {
+function ColumnPinningMenu(props) {
   const {
     column,
     orderedFlatColumns,
@@ -99,4 +99,4 @@ const ColumnPinningMenu = (props) => {
       )
     ] })
   ] }) });
-};
+}

package/tables/DataTable/components/Toolbar/ColumnSettings/ColumnVisibilityCheckbox.d.ts

@@ -1,10 +1,10 @@
+import type { TableFeatures, RowData, Column_Internal } from '@tanstack/react-table';
 import { JSX } from 'react';
-import type { Column } from '../../../hooks/useTable/types.js';
-interface ColumnVisibilityCheckboxProps {
+interface ColumnVisibilityCheckboxProps<TFeatures extends TableFeatures, TData extends RowData> {
     /**
      * The column to render the checkbox for.
      */
-    column: Column<unknown, unknown>;
+    column: Column_Internal<TFeatures, TData>;
     /**
      * Whether visibility can be changed for this column.
      */
@@ -16,11 +16,11 @@ interface ColumnVisibilityCheckboxProps {
     /**
      * Callback when the checkbox is clicked and visibility of the column changes.
      */
-    onVisibilityChange: (column: Column<unknown, unknown>, currentVisibility: boolean | 'indeterminate') => void;
+    onVisibilityChange: (column: Column_Internal<TFeatures, TData>, currentVisibility: boolean | 'indeterminate') => void;
 }
 /**
  * Checkbox component for toggling column visibility in the DataTable column settings.
  * @internal
  */
-export declare const ColumnVisibilityCheckbox: (props: ColumnVisibilityCheckboxProps) => JSX.Element;
+export declare function ColumnVisibilityCheckbox<TFeatures extends TableFeatures, TData extends RowData>(props: Readonly<ColumnVisibilityCheckboxProps<TFeatures, TData>>): JSX.Element;
 export {};

package/tables/DataTable/components/Toolbar/ColumnSettings/ColumnVisibilityCheckbox.js

@@ -34,9 +34,9 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var styles = __toESM(require("./DataTableColumnsListItem.sty.js"));
 var import_Checkbox = require("../../../../../forms/checkbox/Checkbox.js");
 var import_get_column_label = require("../../../../utils/get-column-label.js");
-const ColumnVisibilityCheckbox = (props) => {
-  const { column, enableCheckbox, currentState, onVisibilityChange } = props;
-  const columnName = (0, import_get_column_label.getColumnLabel)(column);
+function ColumnVisibilityCheckbox(props) {
+  const { enableCheckbox, currentState, onVisibilityChange } = props;
+  const columnName = (0, import_get_column_label.getColumnLabel)(props.column);
   const dataDtProperties = `state:${currentState === true ? "hide" : "show"}`;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Checkbox.Checkbox,
@@ -45,7 +45,7 @@ const ColumnVisibilityCheckbox = (props) => {
       "aria-disabled": !enableCheckbox,
       onChange: () => {
         if (enableCheckbox) {
-          onVisibilityChange(column, currentState);
+          onVisibilityChange(props.column, currentState);
         }
       },
       className: styles.columnName,
@@ -54,4 +54,4 @@ const ColumnVisibilityCheckbox = (props) => {
       children: columnName
     }
   );
-};
+}

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnSettings.js

@@ -42,7 +42,7 @@ const DataTableColumnSettings = (props) => {
   const columnSettingsModal = (0, import_DataTableContext.useDataTableColumnSettings)();
   const columnSettingsButton = (0, import_react.useMemo)(() => {
     const hiddenColumnCount = Object.values(
-      table.getState().columnVisibility || {}
+      table.atoms.columnVisibility?.get() || {}
     ).filter((value) => !value).length;
     const message = hiddenColumnCount === 0 ? intl.formatMessage(import_messages.dataTableMessages.columnSettingsButtonDefault) : intl.formatMessage(import_messages.dataTableMessages.columnSettingsButtonVisibility, {
       hiddenColumnCount
@@ -51,7 +51,7 @@ const DataTableColumnSettings = (props) => {
       text: message,
       hiddenColumnCount
     };
-  }, [table.getState().columnVisibility]);
+  }, [table.store.state.columnVisibility]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.Tooltip, { text: intl.formatMessage(import_messages.dataTableMessages.columnSettingsTooltip), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_Button.Button,
     {

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnSettingsModal.js

@@ -29,7 +29,7 @@ var import_DataTableVisibilityFilterControls = require("./DataTableVisibilityFil
 var import_DataTableContext = require("../../../contexts/DataTableContext.js");
 var import_messages = require("../../../messages.js");
 var import_DataTableSettingsModal = require("../../SettingsModal/DataTableSettingsModal.js");
-const ColumnSettingsModal = (props) => {
+function ColumnSettingsModal(props) {
   const {
     visibilitySettings: toolbarVisibilitySettings,
     columnOrderSettings: toolbarColumnOrderSettings,
@@ -63,7 +63,7 @@ const ColumnSettingsModal = (props) => {
     uniqueParentIds: allLocalColumnsParentIds
   } = (0, import_column_settings_utils.generateColumnOrderWithParentIds)(
     table.getColumn,
-    table.getState().columnOrder
+    table.atoms.columnOrder?.get() ?? []
   );
   const [activeFilterValue, setActiveFilterValue] = (0, import_react.useState)("");
   const initialColumnVisibility = (0, import_react.useMemo)(
@@ -74,7 +74,7 @@ const ColumnSettingsModal = (props) => {
   const [localColumnOrder, setLocalColumnOrder] = (0, import_react.useState)(tableColumnOrder);
   const [localColumnPinning, setLocalColumnPinning] = (0, import_react.useState)(
     // original column pinning state
-    () => table.getState().columnPinning
+    () => table.store.state.columnPinning
   );
   const [showResetStatus, setShowResetStatus] = (0, import_react.useState)(false);
   const columnOrderToReset = (0, import_column_settings_utils.getResetOverride)(columnOrderOverride, "resetColumnOrder") ?? resetColumnOrder ?? table.options.originalColumnOrder;
@@ -91,7 +91,13 @@ const ColumnSettingsModal = (props) => {
     [visibilitySettingsEnabled, columnVisibilityToReset, localColumnVisibility]
   );
   const hasColumnOrderChanged = columnOrderSettingsEnabled && (0, import_column_settings_utils.getHasColumnOrderChanged)(columnOrderToReset, filteredLocalColumnOrder);
-  const hasColumnPinningChanged = columnPinningSettingsEnabled && (0, import_column_settings_utils.getHasColumnPinningChanged)(columnPinningToReset, localColumnPinning);
+  const hasColumnPinningChanged = columnPinningSettingsEnabled && (0, import_column_settings_utils.getHasColumnPinningChanged)(
+    {
+      left: columnPinningToReset?.left ?? [],
+      right: columnPinningToReset?.right ?? []
+    },
+    localColumnPinning
+  );
   const showHideAllState = (0, import_column_settings_utils.getCombinedVisibilityCheckboxState)(
     localColumnVisibility,
     leafColumnsWithoutBuiltin
@@ -154,7 +160,10 @@ const ColumnSettingsModal = (props) => {
       didReset = true;
     }
     if (columnPinningSettingsEnabled && columnPinningToReset) {
-      setLocalColumnPinning(columnPinningToReset);
+      setLocalColumnPinning({
+        left: columnPinningToReset?.left ?? [],
+        right: columnPinningToReset?.right ?? []
+      });
       didReset = true;
     }
     didReset && setShowResetStatus(true);
@@ -214,7 +223,7 @@ const ColumnSettingsModal = (props) => {
       ]
     }
   );
-};
+}
 function DataTableColumnSettingsModalFwd(props, forwardedRef) {
   const [modalOpen, setModalOpen] = (0, import_react.useState)(false);
   const [columnSettingsOverride, setColumnSettingsOverride] = (0, import_react.useState)();

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.css

@@ -1,19 +1,19 @@
-._14dz1ui0-3-6-0 {
+._14dz1ui0-3-7-1 {
   padding: var(--dt-spacings-size-4, 4px) 0;
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._14dz1ui1-3-6-0 {
+._14dz1ui1-3-7-1 {
   overflow: auto;
   position: relative;
   margin-top: var(--dt-spacings-size-12, 12px);
 }
-._14dz1ui2-3-6-0 {
+._14dz1ui2-3-7-1 {
   max-height: calc(96vh - 200px - 56px);
 }
-._14dz1ui3-3-6-0 {
+._14dz1ui3-3-7-1 {
   max-height: calc(96vh - 200px);
 }
-._14dz1ui4-3-6-0 {
+._14dz1ui4-3-7-1 {
   width: 100%;
   position: relative;
 }

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.d.ts

@@ -1,7 +1,7 @@
-import type { ColumnPinningState } from '@tanstack/react-table';
+import type { ColumnPinningState, Column, RowData, TableFeatures } from '@tanstack/react-table';
 import { type JSX } from 'react';
-import type { Column } from '../../../hooks/useTable/types.js';
-interface DataTableColumnsListProps {
+import type { TDataTableFeatures } from '../../../features/types/features.types.js';
+interface DataTableColumnsListProps<TFeatures extends TableFeatures, TData extends RowData> {
     /**
      * Whether the visibility settings (checkboxes) are enabled.
      */
@@ -27,7 +27,7 @@ interface DataTableColumnsListProps {
      * @param column - the column to update.
      * @param currentVisibility - the current visibility state of the column.
      */
-    updateLocalColumnVisibility: (column: Column<unknown, unknown>, currentVisibility: boolean | 'indeterminate') => void;
+    updateLocalColumnVisibility: (column: Column<TFeatures, TData>, currentVisibility: boolean | 'indeterminate') => void;
     /**
      * Current local column order in the column settings modal.
      */
@@ -55,5 +55,5 @@ interface DataTableColumnsListProps {
  * Renders the ordered, filtered list of columns for the column settings modal.
  * @internal
  */
-export declare const DataTableColumnsList: (props: DataTableColumnsListProps) => JSX.Element | JSX.Element[];
+export declare function DataTableColumnsList<TFeatures extends TDataTableFeatures, TData extends RowData>(props: Readonly<DataTableColumnsListProps<TFeatures, TData>>): JSX.Element | JSX.Element[];
 export {};

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.js

@@ -46,7 +46,7 @@ var import_Text = require("../../../../../typography/text/Text.js");
 var import_DataTableContext = require("../../../contexts/DataTableContext.js");
 var import_ColumnVisibility = require("../../../features/ColumnVisibility/ColumnVisibility.js");
 var import_messages = require("../../../messages.js");
-const DataTableColumnsList = (props) => {
+function DataTableColumnsList(props) {
   const {
     visibilitySettings: showVisibilityCheckbox,
     columnOrderSettings,
@@ -184,12 +184,18 @@ const DataTableColumnsList = (props) => {
   if (filteredColumns.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { className: styles.noItemsFound, children: intl.formatMessage(import_messages.dataTableMessages.noItemsFound) });
   }
-  const showColumnPinningButton = !!table.options.enableColumnPinning && columnPinningSettings;
-  const canOrder = !!table.options.enableColumnOrdering && columnOrderSettings && activeFilterValue.length === 0;
+  const showColumnPinningButton = !!table.optionsStore.state.enableColumnPinning && columnPinningSettings;
+  const canOrder = !!table.optionsStore.state.enableColumnOrdering && columnOrderSettings && activeFilterValue.length === 0;
   const columnListItems = virtualItems.map((virtualItem) => {
     const column = filteredColumns[virtualItem.index];
     const columnKey = column.key;
-    const canHide = (0, import_ColumnVisibility.getCanHide)(table, column, import_column_settings_utils.isParentColumnHideable);
+    const canHide = (0, import_ColumnVisibility.getCanHide)(
+      // Need to cast this one here in order to make sure that it allows
+      // instanciating with the same Subtype of RowData
+      table,
+      column,
+      import_column_settings_utils.isParentColumnHideable
+    );
     const visibilityCheckboxState = (0, import_column_settings_utils.getVisibilityCheckboxState)(
       localColumnVisibility,
       column
@@ -249,4 +255,4 @@ const DataTableColumnsList = (props) => {
       children: columnList
     }
   ) : columnList;
-};
+}

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.sty.js

@@ -24,6 +24,6 @@ __export(DataTableColumnsList_css_exports, {
 module.exports = __toCommonJS(DataTableColumnsList_css_exports);
 var import_DataTableColumnsList_css_ts_vanilla = require("./DataTableColumnsList.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var noItemsFound = "_14dz1ui0-3-6-0";
-var virtualizationInnerContainer = "_14dz1ui4-3-6-0";
-var virtualizationScrollContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14dz1ui1-3-6-0", variantClassNames: { hasFilter: { true: "_14dz1ui2-3-6-0", false: "_14dz1ui3-3-6-0" } }, defaultVariants: { hasFilter: false }, compoundVariants: [] });
+var noItemsFound = "_14dz1ui0-3-7-1";
+var virtualizationInnerContainer = "_14dz1ui4-3-7-1";
+var virtualizationScrollContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14dz1ui1-3-7-1", variantClassNames: { hasFilter: { true: "_14dz1ui2-3-7-1", false: "_14dz1ui3-3-7-1" } }, defaultVariants: { hasFilter: false }, compoundVariants: [] });

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsListItem.css

@@ -1,4 +1,4 @@
-._13ypmcy0-3-6-0 {
+._13ypmcy0-3-7-1 {
   flex: 0 1 auto;
   word-break: break-all;
   padding-top: var(--dt-spacings-size-4, 4px);
@@ -7,21 +7,21 @@
   padding-left: var(--dt-spacings-size-8, 8px);
   border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._13ypmcy0-3-6-0[data-parentcolumnid] {
+._13ypmcy0-3-7-1[data-parentcolumnid] {
   padding-left: var(--dt-spacings-size-20, 20px);
 }
-._13ypmcy0-3-6-0:last-child, ._13ypmcy0-3-6-0:not([data-pinned-position="right"]):has(+ [data-pinned-position="right"]) {
+._13ypmcy0-3-7-1:last-child, ._13ypmcy0-3-7-1:not([data-pinned-position="right"]):has(+ [data-pinned-position="right"]) {
   border-bottom: none;
 }
-._13ypmcy0-3-6-0[data-pinned-position="left"]:not(:has(+ [data-pinned-position="left"])) {
+._13ypmcy0-3-7-1[data-pinned-position="left"]:not(:has(+ [data-pinned-position="left"])) {
   border-bottom: var(--dt-borders-width-emphasized, 2px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._13ypmcy0-3-6-0[data-pinned-position="right"]:not([data-pinned-position="right"] + ._13ypmcy0-3-6-0, [data-pinned-position="left"] + ._13ypmcy0-3-6-0) {
+._13ypmcy0-3-7-1[data-pinned-position="right"]:not([data-pinned-position="right"] + ._13ypmcy0-3-7-1, [data-pinned-position="left"] + ._13ypmcy0-3-7-1) {
   border-top: var(--dt-borders-width-emphasized, 2px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._13ypmcy1-3-6-0 {
+._13ypmcy1-3-7-1 {
   visibility: hidden;
 }
-._13ypmcy2-3-6-0 {
+._13ypmcy2-3-7-1 {
   padding: var(--dt-spacings-size-2, 2px) 0;
 }

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsListItem.d.ts

@@ -1,11 +1,10 @@
+import type { ColumnPinningState, Column, TableFeatures, RowData } from '@tanstack/react-table';
 import type { ColumnListItem } from './column-settings-types.js';
-import type { Column } from '../../../hooks/useTable/types.js';
-import type { ColumnPinningState } from '../../../tanstack-table-core-override/src/index.js';
-interface DataTableColumnsListItemProps {
+interface DataTableColumnsListItemProps<TFeatures extends TableFeatures, TData extends RowData> {
     /**
      * The column to render in the list.
      */
-    column: ColumnListItem;
+    column: ColumnListItem<TFeatures, TData>;
     /**
      * The index of the column in the list.
      */
@@ -14,9 +13,9 @@ interface DataTableColumnsListItemProps {
      * The ordered flat columns, grouped by pinning position.
      */
     orderedFlatColumns: {
-        left: ColumnListItem[];
-        center: ColumnListItem[];
-        right: ColumnListItem[];
+        left: ColumnListItem<TFeatures, TData>[];
+        center: ColumnListItem<TFeatures, TData>[];
+        right: ColumnListItem<TFeatures, TData>[];
     };
     /**
      * Whether the visibility settings are enabled and a checkbox should be shown.
@@ -33,7 +32,7 @@ interface DataTableColumnsListItemProps {
     /**
      * Callback when the checkbox is clicked and visibility of the column changes.
      */
-    onVisibilityChange: (column: Column<unknown, unknown>, currentVisibility: boolean | 'indeterminate') => void;
+    onVisibilityChange: (column: Column<TFeatures, TData>, currentVisibility: boolean | 'indeterminate') => void;
     /**
      * Whether the column order settings are enabled and a drag handle should be shown.
      */
@@ -59,5 +58,9 @@ interface DataTableColumnsListItemProps {
      */
     measureElement: (element: Element | null) => void;
 }
-export declare const DataTableColumnsListItem: import("react").MemoExoticComponent<(props: DataTableColumnsListItemProps) => import("react/jsx-runtime").JSX.Element>;
+/**
+ * A single column item in the column settings list.
+ */
+declare function InternalDataTableColumnsListItem<TFeatures extends TableFeatures, TData extends RowData>(props: Readonly<DataTableColumnsListItemProps<TFeatures, TData>>): import("react/jsx-runtime").JSX.Element;
+export declare const DataTableColumnsListItem: import("react").MemoExoticComponent<typeof InternalDataTableColumnsListItem>;
 export {};

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsListItem.js

@@ -41,9 +41,8 @@ var styles = __toESM(require("./DataTableColumnsListItem.sty.js"));
 var import_useMergeRefs = require("../../../../../core/hooks/useMergeRefs.js");
 var import_Flex = require("../../../../../layouts/flex/Flex.js");
 var import_get_column_label = require("../../../../utils/get-column-label.js");
-const InternalDataTableColumnsListItem = (props) => {
+function InternalDataTableColumnsListItem(props) {
   const {
-    column,
     columnIndex,
     orderedFlatColumns,
     showVisibilityCheckbox,
@@ -57,13 +56,13 @@ const InternalDataTableColumnsListItem = (props) => {
     virtualIndex,
     measureElement
   } = props;
-  const columnName = (0, import_get_column_label.getColumnLabel)(column);
+  const columnName = (0, import_get_column_label.getColumnLabel)(props.column);
   const localColumnRef = (0, import_react.useRef)(null);
   const { setNodeRef, isDragging } = (0, import_sortable.useSortable)({
-    id: column.key,
+    id: props.column.key,
     data: {
-      column,
-      columnId: column.id,
+      column: props.column,
+      columnId: props.column.id,
       columnIndex,
       localColumnRef
     }
@@ -73,9 +72,9 @@ const InternalDataTableColumnsListItem = (props) => {
     import_Flex.Flex,
     {
       "data-index": virtualIndex,
-      "data-columnid": column.id,
-      "data-parentcolumnid": column.parent?.id,
-      "data-pinned-position": column.pinned === false ? void 0 : column.pinned,
+      "data-columnid": props.column.id,
+      "data-parentcolumnid": props.column.parent?.id,
+      "data-pinned-position": props.column.pinned === false ? void 0 : props.column.pinned,
       ref: mergedRefs,
       justifyContent: "space-between",
       alignItems: "center",
@@ -89,7 +88,7 @@ const InternalDataTableColumnsListItem = (props) => {
         showVisibilityCheckbox ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_ColumnVisibilityCheckbox.ColumnVisibilityCheckbox,
           {
-            column,
+            column: props.column,
             enableCheckbox: enableVisibilityCheckbox,
             currentState: currentVisibilityState,
             onVisibilityChange
@@ -99,15 +98,15 @@ const InternalDataTableColumnsListItem = (props) => {
           showColumnOrderDragHandle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_ColumnOrderDragHandle.ColumnOrderDragHandle,
             {
-              columnId: column.id,
-              columnKey: column.key,
+              columnId: props.column.id,
+              columnKey: props.column.key,
               isDraggingActive: isDragging
             }
           ),
           showColumnPinningMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_ColumnPinningMenu.ColumnPinningMenu,
             {
-              column,
+              column: props.column,
               orderedFlatColumns,
               localColumnPinning,
               updateLocalColumnPinning
@@ -117,7 +116,7 @@ const InternalDataTableColumnsListItem = (props) => {
       ]
     }
   );
-};
+}
 const DataTableColumnsListItem = (0, import_react.memo)(
   InternalDataTableColumnsListItem,
   (prevProps, nextProps) => {

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsListItem.sty.js

@@ -23,6 +23,6 @@ __export(DataTableColumnsListItem_css_exports, {
 });
 module.exports = __toCommonJS(DataTableColumnsListItem_css_exports);
 var import_DataTableColumnsListItem_css_ts_vanilla = require("./DataTableColumnsListItem.css");
-var columnName = "_13ypmcy2-3-6-0";
-var columnsListItem = "_13ypmcy0-3-6-0";
-var dragging = "_13ypmcy1-3-6-0";
+var columnName = "_13ypmcy2-3-7-1";
+var columnsListItem = "_13ypmcy0-3-7-1";
+var dragging = "_13ypmcy1-3-7-1";

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableVisibilityFilterControls.css

@@ -1,18 +1,18 @@
-._1rh6hs00-3-6-0 {
+._1rh6hs00-3-7-1 {
   flex: 0 1 auto;
   padding-left: var(--dt-spacings-size-8, 8px);
 }
-._1rh6hs01-3-6-0 {
+._1rh6hs01-3-7-1 {
   flex: 0 1 calc(50% - var(--dt-spacings-size-4, 4px));
   margin-left: auto;
 }
-._1rh6hs01-3-6-0._1rh6hs01-3-6-0 {
+._1rh6hs01-3-7-1._1rh6hs01-3-7-1 {
   min-width: unset;
 }
-._1rh6hs02-3-6-0 {
+._1rh6hs02-3-7-1 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-12, 12px);
 }
-._dmotjm0-3-6-0 div:has(> ._1rh6hs02-3-6-0) {
+._dmotjm0-3-7-1 div:has(> ._1rh6hs02-3-7-1) {
   padding-top: var(--dt-spacings-size-0, 0);
 }

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableVisibilityFilterControls.sty.js

@@ -24,6 +24,6 @@ __export(DataTableVisibilityFilterControls_css_exports, {
 module.exports = __toCommonJS(DataTableVisibilityFilterControls_css_exports);
 var import_Modal_css_ts_vanilla = require("../../../../../overlays/modal/Modal.css");
 var import_DataTableVisibilityFilterControls_css_ts_vanilla = require("./DataTableVisibilityFilterControls.css");
-var filterControls = "_1rh6hs02-3-6-0";
-var searchInput = "_1rh6hs01-3-6-0";
-var showHideAll = "_1rh6hs00-3-6-0";
+var filterControls = "_1rh6hs02-3-7-1";
+var searchInput = "_1rh6hs01-3-7-1";
+var showHideAll = "_1rh6hs00-3-7-1";

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

@@ -1,10 +1,9 @@
+import type { ColumnPinningPosition, RowData, TableFeatures, Column_Internal } from '@tanstack/react-table';
 import type { DataTestId } from '../../../../../core/types/data-props.js';
 import type { StylingProps } from '../../../../../core/types/styling-props.js';
 import type { DataTablePinnedColumnState } from '../../../features/ColumnPinning/column-pinning-types.js';
 import type { DataTableColumnVisibilityState } from '../../../features/ColumnVisibility/column-visibility-types.js';
-import type { Column } from '../../../hooks/useTable/types.js';
 import type { DataTableColumnSettingsConfig } from '../../../public.api.js';
-import type { ColumnPinningPosition } from '../../../tanstack-table-core-override/src/index.js';
 /**
  * Props for the DataTableColumnSettingsTrigger component.
  * @public
@@ -18,7 +17,7 @@ export interface DataTableColumnSettingsTriggerProps extends StylingProps, DataT
     }) => string;
 }
 /** @internal */
-export type ColumnListItem = Column<unknown, unknown> & {
+export type ColumnListItem<TFeatures extends TableFeatures, TData extends RowData> = Column_Internal<TFeatures, TData> & {
     key: string;
     pinned: ColumnPinningPosition;
 };