@dynatrace/strato-components 3.12.1 → 3.13.0

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

@@ -1,10 +1,11 @@
-import type { TableFeatures, RowData, Column_Internal } from '@tanstack/react-table';
+import type { Column, RowData } from '@tanstack/react-table';
 import { JSX } from 'react';
-interface ColumnVisibilityToggleProps<TFeatures extends TableFeatures, TData extends RowData> {
+import type { TDataTableFeatures } from '../../../features/types/features.types.js';
+interface ColumnVisibilityToggleProps<TData extends RowData> {
     /**
      * The column to render the visibility toggle for.
      */
-    column: Column_Internal<TFeatures, TData>;
+    column: Column<TDataTableFeatures, TData>;
     /**
      * The display label of the column, included in the aria-label for screen readers.
      */
@@ -20,12 +21,12 @@ interface ColumnVisibilityToggleProps<TFeatures extends TableFeatures, TData ext
     /**
      * Callback when the toggle is clicked and visibility of the column changes.
      */
-    onVisibilityChange: (column: Column_Internal<TFeatures, TData>, currentVisibility: boolean | 'indeterminate') => void;
+    onVisibilityChange: (column: Column<TDataTableFeatures, TData>, currentVisibility: boolean | 'indeterminate') => void;
 }
 /**
  * Icon toggle for showing/hiding a column in the DataTable column settings.
  * @internal
  */
-export declare function ColumnVisibilityToggle<TFeatures extends TableFeatures, TData extends RowData>(props: Readonly<ColumnVisibilityToggleProps<TFeatures, TData>>): JSX.Element;
+export declare function ColumnVisibilityToggle<TData extends RowData>(props: Readonly<ColumnVisibilityToggleProps<TData>>): JSX.Element;
 export {};
 //# sourceMappingURL=ColumnVisibilityToggle.d.ts.map

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

@@ -1,3 +1,3 @@
-._srhgvd0-3-12-1 {
+._srhgvd0-3-13-0 {
   text-align: center;
 }

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

@@ -21,4 +21,4 @@ __export(DataTableAllColumnsHiddenEmptyState_css_exports, {
 });
 module.exports = __toCommonJS(DataTableAllColumnsHiddenEmptyState_css_exports);
 var import_DataTableAllColumnsHiddenEmptyState_css_ts_vanilla = require("./DataTableAllColumnsHiddenEmptyState.css");
-var emptyState = "_srhgvd0-3-12-1";
+var emptyState = "_srhgvd0-3-13-0";

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

@@ -21,7 +21,7 @@ __export(DataTableColumnSettings_exports, {
 });
 module.exports = __toCommonJS(DataTableColumnSettings_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
+var import_react_store = require("@tanstack/react-store");
 var import_react_intl = require("react-intl");
 var import_strato_icons = require("@dynatrace/strato-icons");
 var import_Button = require("../../../../../buttons/button/Button.js");
@@ -40,16 +40,13 @@ const DataTableColumnSettings = (props) => {
   const intl = (0, import_react_intl.useIntl)();
   const table = (0, import_DataTableContext.useDataTable)();
   const columnSettingsModal = (0, import_DataTableContext.useDataTableColumnSettings)();
-  const columnSettingsButton = (0, import_react.useMemo)(() => {
-    const hiddenColumnCount = table.getAllLeafColumnsWithoutBuiltin().filter((column) => !column.getIsVisible()).length;
-    const message = hiddenColumnCount === 0 ? intl.formatMessage(import_messages.dataTableMessages.columnSettingsButtonDefault) : intl.formatMessage(import_messages.dataTableMessages.columnSettingsButtonVisibility, {
-      hiddenColumnCount
-    });
-    return {
-      text: message,
-      hiddenColumnCount
-    };
-  }, [table.store.state.columnVisibility]);
+  const hiddenColumnCount = (0, import_react_store.useSelector)(
+    table.atoms.columnVisibility,
+    () => table.getAllLeafColumnsWithoutBuiltin().filter((column) => !column.getIsVisible()).length
+  );
+  const buttonText = hiddenColumnCount === 0 ? intl.formatMessage(import_messages.dataTableMessages.columnSettingsButtonDefault) : intl.formatMessage(import_messages.dataTableMessages.columnSettingsButtonVisibility, {
+    hiddenColumnCount
+  });
   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,
     {
@@ -62,10 +59,10 @@ const DataTableColumnSettings = (props) => {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.ColumnsIcon, {}) }),
         customTrigger ? customTrigger({
-          hiddenColumnCount: columnSettingsButton.hiddenColumnCount,
+          hiddenColumnCount,
           totalColumnCount: table.getAllColumns().length,
-          defaultLabel: columnSettingsButton.text
-        }) : columnSettingsButton.text
+          defaultLabel: buttonText
+        }) : buttonText
       ]
     }
   ) });

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

@@ -105,7 +105,7 @@ function ColumnSettingsModal(props) {
   const [localColumnOrder, setLocalColumnOrder] = (0, import_react.useState)(tableColumnOrder);
   const [localColumnPinning, setLocalColumnPinning] = (0, import_react.useState)(
     // original column pinning state
-    () => table.store.state.columnPinning
+    () => table.atoms.columnPinning?.get() ?? { start: [], end: [] }
   );
   const [showResetStatus, setShowResetStatus] = (0, import_react.useState)(false);
   const [showMinError, setShowMinError] = (0, import_react.useState)(false);
@@ -151,8 +151,8 @@ function ColumnSettingsModal(props) {
   const hasColumnOrderChanged = columnOrderSettingsEnabled && (0, import_column_settings_utils.getHasColumnOrderChanged)(columnOrderToReset, filteredLocalColumnOrder);
   const hasColumnPinningChanged = columnPinningSettingsEnabled && (0, import_column_settings_utils.getHasColumnPinningChanged)(
     {
-      left: columnPinningToReset?.left ?? [],
-      right: columnPinningToReset?.right ?? []
+      start: columnPinningToReset?.left ?? [],
+      end: columnPinningToReset?.right ?? []
     },
     localColumnPinning
   );
@@ -252,8 +252,8 @@ function ColumnSettingsModal(props) {
     }
     if (columnPinningSettingsEnabled && columnPinningToReset) {
       setLocalColumnPinning({
-        left: columnPinningToReset?.left ?? [],
-        right: columnPinningToReset?.right ?? []
+        start: columnPinningToReset?.left ?? [],
+        end: columnPinningToReset?.right ?? []
       });
       didReset = true;
     }

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

@@ -1,38 +1,38 @@
-._14dz1ui1-3-12-1 {
-  --_14dz1ui0-3-12-1: 96dvh;
+._14dz1ui1-3-13-0 {
+  --_14dz1ui0-3-13-0: 96dvh;
   overflow: auto;
   position: relative;
 }
-._14dz1ui8-3-12-1 {
+._14dz1ui8-3-13-0 {
   margin-top: 0;
 }
-._14dz1ui9-3-12-1 {
+._14dz1ui9-3-13-0 {
   margin-top: var(--dt-spacings-size-8, 8px);
 }
-._14dz1uia-3-12-1 {
-  max-height: calc(var(--_14dz1ui0-3-12-1) - 146px);
+._14dz1uia-3-13-0 {
+  max-height: calc(var(--_14dz1ui0-3-13-0) - 146px);
 }
-._14dz1uib-3-12-1 {
-  max-height: calc(var(--_14dz1ui0-3-12-1) - 146px - 56px);
+._14dz1uib-3-13-0 {
+  max-height: calc(var(--_14dz1ui0-3-13-0) - 146px - 56px);
 }
-._14dz1uic-3-12-1 {
-  max-height: calc(var(--_14dz1ui0-3-12-1) - 146px - 56px - 28px);
+._14dz1uic-3-13-0 {
+  max-height: calc(var(--_14dz1ui0-3-13-0) - 146px - 56px - 28px);
 }
-._14dz1uid-3-12-1 {
-  max-height: calc(var(--_14dz1ui0-3-12-1) - 146px - 46px);
+._14dz1uid-3-13-0 {
+  max-height: calc(var(--_14dz1ui0-3-13-0) - 146px - 46px);
 }
-._14dz1uie-3-12-1 {
-  max-height: calc(var(--_14dz1ui0-3-12-1) - 146px - 56px - 46px);
+._14dz1uie-3-13-0 {
+  max-height: calc(var(--_14dz1ui0-3-13-0) - 146px - 56px - 46px);
 }
-._14dz1uif-3-12-1 {
-  max-height: calc(var(--_14dz1ui0-3-12-1) - 146px - 56px - 28px - 46px);
+._14dz1uif-3-13-0 {
+  max-height: calc(var(--_14dz1ui0-3-13-0) - 146px - 56px - 28px - 46px);
 }
-._14dz1uig-3-12-1 {
+._14dz1uig-3-13-0 {
   width: 100%;
   position: relative;
 }
 @supports not (height: 1dvh) {
-  ._14dz1ui1-3-12-1 {
-    --_14dz1ui0-3-12-1: 96vh;
+  ._14dz1ui1-3-13-0 {
+    --_14dz1ui0-3-13-0: 96vh;
   }
 }

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

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

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

@@ -157,42 +157,42 @@ function DataTableColumnsList(props) {
     itemType: "column"
   });
   const orderedLeftFlatColumns = (0, import_react.useMemo)(() => {
-    const localColumnsPinned = localColumnPinning.left?.map((id) => columnsById.get(id)).filter((column) => !!column) ?? [];
+    const localColumnsPinned = localColumnPinning.start?.map((id) => columnsById.get(id)).filter((column) => !!column) ?? [];
     const groupedColumns = (0, import_column_settings_utils.groupColumns)(localColumnsPinned);
-    return groupedColumns.map((col, idx) => mapToListItem(col, idx, "left"));
-  }, [columnsById, localColumnPinning.left]);
+    return groupedColumns.map((col, idx) => mapToListItem(col, idx, "start"));
+  }, [columnsById, localColumnPinning.start]);
   const orderedCenterFlatColumns = (0, import_react.useMemo)(() => {
     const localColumnsUnpinned = allLeafColumnsWithoutBuiltin.filter(
-      (column) => !localColumnPinning.left?.includes(column.id) && !localColumnPinning.right?.includes(column.id)
+      (column) => !localColumnPinning.start?.includes(column.id) && !localColumnPinning.end?.includes(column.id)
     );
     const groupedColumns = (0, import_column_settings_utils.groupColumns)(localColumnsUnpinned);
     return groupedColumns.toSorted(compareColumns).map((col, idx) => mapToListItem(col, idx, false));
   }, [
     allLeafColumnsWithoutBuiltin,
     compareColumns,
-    localColumnPinning.left,
-    localColumnPinning.right
+    localColumnPinning.start,
+    localColumnPinning.end
   ]);
   const orderedRightFlatColumns = (0, import_react.useMemo)(() => {
-    const localColumnsPinned = localColumnPinning.right?.map((id) => columnsById.get(id)).filter((column) => !!column) ?? [];
+    const localColumnsPinned = localColumnPinning.end?.map((id) => columnsById.get(id)).filter((column) => !!column) ?? [];
     const groupedColumns = (0, import_column_settings_utils.groupColumns)(localColumnsPinned);
-    return groupedColumns.map((col, idx) => mapToListItem(col, idx, "right"));
-  }, [columnsById, localColumnPinning.right]);
+    return groupedColumns.map((col, idx) => mapToListItem(col, idx, "end"));
+  }, [columnsById, localColumnPinning.end]);
   const orderedFlatColumns = {
     left: orderedLeftFlatColumns,
     center: orderedCenterFlatColumns,
     right: orderedRightFlatColumns
   };
-  const showColumnPinningButton = !!table.optionsStore.state.enableColumnPinning && columnPinningSettings;
+  const showColumnPinningButton = !!table.options.enableColumnPinning && columnPinningSettings;
   const showSectionHeaders = showColumnPinningButton && (orderedLeftFlatColumns.length > 0 || orderedRightFlatColumns.length > 0);
   const listItems = (0, import_react.useMemo)(() => {
     const sections = [
       {
-        position: "left",
+        position: "start",
         columns: orderedLeftFlatColumns.filter(filterColumns)
       },
       {
-        position: "right",
+        position: "end",
         columns: orderedRightFlatColumns.filter(filterColumns)
       },
       {
@@ -274,7 +274,7 @@ function DataTableColumnsList(props) {
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DataTableNoFilterResultsEmptyState.DataTableNoFilterResultsEmptyState, { onClearSearch: onClearFilter })
     ] });
   }
-  const canOrder = !!table.optionsStore.state.enableColumnOrdering && columnOrderSettings && activeFilterValue.length === 0;
+  const canOrder = !!table.options.enableColumnOrdering && columnOrderSettings && activeFilterValue.length === 0;
   const columnListItems = virtualItems.map((virtualItem) => {
     const column = listItems[virtualItem.index];
     if (column.itemType === "sectionHeader") {
@@ -291,13 +291,7 @@ function DataTableColumnsList(props) {
     const columnKey = column.key;
     const nextItem = listItems[virtualItem.index + 1];
     const isLastInSection = nextItem === void 0 || nextItem.itemType === "sectionHeader";
-    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 canHide = (0, import_ColumnVisibility.getCanHide)(table, column, import_column_settings_utils.isParentColumnHideable);
     const visibilityState = (0, import_column_settings_utils.getVisibilityState)(localColumnVisibility, column);
     const showColumnOrderDragHandle = canOrder && column.pinned === false;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

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

@@ -23,5 +23,5 @@ __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 virtualizationInnerContainer = "_14dz1uig-3-12-1";
-var virtualizationScrollContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14dz1ui1-3-12-1", variantClassNames: { hasFilter: { true: "_14dz1ui2-3-12-1", false: "_14dz1ui3-3-12-1" }, hasVisibilityControl: { true: "_14dz1ui4-3-12-1", false: "_14dz1ui5-3-12-1" }, hasMessage: { true: "_14dz1ui6-3-12-1", false: "_14dz1ui7-3-12-1" }, hasPinnedColumns: { true: "_14dz1ui8-3-12-1", false: "_14dz1ui9-3-12-1" } }, defaultVariants: { hasFilter: false, hasVisibilityControl: false, hasMessage: false, hasPinnedColumns: false }, compoundVariants: [[{ hasFilter: false, hasMessage: false }, "_14dz1uia-3-12-1"], [{ hasFilter: true, hasVisibilityControl: false, hasMessage: false }, "_14dz1uib-3-12-1"], [{ hasFilter: true, hasVisibilityControl: true, hasMessage: false }, "_14dz1uic-3-12-1"], [{ hasFilter: false, hasMessage: true }, "_14dz1uid-3-12-1"], [{ hasFilter: true, hasVisibilityControl: false, hasMessage: true }, "_14dz1uie-3-12-1"], [{ hasFilter: true, hasVisibilityControl: true, hasMessage: true }, "_14dz1uif-3-12-1"]] });
+var virtualizationInnerContainer = "_14dz1uig-3-13-0";
+var virtualizationScrollContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14dz1ui1-3-13-0", variantClassNames: { hasFilter: { true: "_14dz1ui2-3-13-0", false: "_14dz1ui3-3-13-0" }, hasVisibilityControl: { true: "_14dz1ui4-3-13-0", false: "_14dz1ui5-3-13-0" }, hasMessage: { true: "_14dz1ui6-3-13-0", false: "_14dz1ui7-3-13-0" }, hasPinnedColumns: { true: "_14dz1ui8-3-13-0", false: "_14dz1ui9-3-13-0" } }, defaultVariants: { hasFilter: false, hasVisibilityControl: false, hasMessage: false, hasPinnedColumns: false }, compoundVariants: [[{ hasFilter: false, hasMessage: false }, "_14dz1uia-3-13-0"], [{ hasFilter: true, hasVisibilityControl: false, hasMessage: false }, "_14dz1uib-3-13-0"], [{ hasFilter: true, hasVisibilityControl: true, hasMessage: false }, "_14dz1uic-3-13-0"], [{ hasFilter: false, hasMessage: true }, "_14dz1uid-3-13-0"], [{ hasFilter: true, hasVisibilityControl: false, hasMessage: true }, "_14dz1uie-3-13-0"], [{ hasFilter: true, hasVisibilityControl: true, hasMessage: true }, "_14dz1uif-3-13-0"]] });

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

@@ -1,4 +1,4 @@
-._13ypmcy0-3-12-1 {
+._13ypmcy0-3-13-0 {
   position: relative;
   flex: 0 1 auto;
   word-break: break-all;
@@ -6,10 +6,10 @@
   padding-bottom: var(--dt-spacings-size-4, 4px);
   border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) transparent;
 }
-._13ypmcy0-3-12-1[data-parentcolumnid] {
+._13ypmcy0-3-13-0[data-parentcolumnid] {
   padding-left: var(--dt-spacings-size-28, 28px);
 }
-._13ypmcy0-3-12-1::after {
+._13ypmcy0-3-13-0::after {
   content: "";
   position: absolute;
   left: 0;
@@ -18,28 +18,28 @@
   height: var(--dt-borders-width-default, 1px);
   background-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._13ypmcy0-3-12-1:has(+ [data-parentcolumnid])::after {
+._13ypmcy0-3-13-0:has(+ [data-parentcolumnid])::after {
   left: var(--dt-spacings-size-28, 28px);
 }
-._13ypmcy1-3-12-1::after {
+._13ypmcy1-3-13-0::after {
   display: none;
 }
-._13ypmcy2-3-12-1 {
+._13ypmcy2-3-13-0 {
   padding-left: var(--dt-spacings-size-8, 8px);
 }
-._13ypmcy3-3-12-1 {
+._13ypmcy3-3-13-0 {
   visibility: hidden;
 }
-._13ypmcy4-3-12-1 {
+._13ypmcy4-3-13-0 {
   flex: 1 1 auto;
   min-width: 0;
 }
-._13ypmcy5-3-12-1 {
+._13ypmcy5-3-13-0 {
   padding: var(--dt-spacings-size-2, 2px) 0;
 }
-._13ypmcy6-3-12-1 {
+._13ypmcy6-3-13-0 {
   padding-left: var(--dt-spacings-size-8, 8px);
 }
-._13ypmcy7-3-12-1 {
+._13ypmcy7-3-13-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }

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

@@ -1,10 +1,11 @@
-import type { ColumnPinningState, Column, TableFeatures, RowData } from '@tanstack/react-table';
+import type { ColumnPinningState, Column, RowData } from '@tanstack/react-table';
 import type { ColumnListItem } from './column-settings-types.js';
-interface DataTableColumnsListItemProps<TFeatures extends TableFeatures, TData extends RowData> {
+import type { TDataTableFeatures } from '../../../features/types/features.types.js';
+interface DataTableColumnsListItemProps {
     /**
      * The column to render in the list.
      */
-    column: ColumnListItem<TFeatures, TData>;
+    column: ColumnListItem<TDataTableFeatures, RowData>;
     /**
      * The index of the column in the list.
      */
@@ -13,9 +14,9 @@ interface DataTableColumnsListItemProps<TFeatures extends TableFeatures, TData e
      * The ordered flat columns, grouped by pinning position.
      */
     orderedFlatColumns: {
-        left: ColumnListItem<TFeatures, TData>[];
-        center: ColumnListItem<TFeatures, TData>[];
-        right: ColumnListItem<TFeatures, TData>[];
+        left: ColumnListItem<TDataTableFeatures, RowData>[];
+        center: ColumnListItem<TDataTableFeatures, RowData>[];
+        right: ColumnListItem<TDataTableFeatures, RowData>[];
     };
     /**
      * Whether the visibility settings are enabled and a visibility toggle should be shown.
@@ -32,7 +33,7 @@ interface DataTableColumnsListItemProps<TFeatures extends TableFeatures, TData e
     /**
      * Callback when the toggle is clicked and visibility of the column changes.
      */
-    onVisibilityChange: (column: Column<TFeatures, TData>, currentVisibility: boolean | 'indeterminate') => void;
+    onVisibilityChange: (column: Column<TDataTableFeatures, RowData>, currentVisibility: boolean | 'indeterminate') => void;
     /**
      * Whether the column order settings are enabled and a drag handle should be shown.
      */
@@ -70,7 +71,7 @@ interface DataTableColumnsListItemProps<TFeatures extends TableFeatures, TData e
 /**
  * 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.Element;
+declare function InternalDataTableColumnsListItem(props: Readonly<DataTableColumnsListItemProps>): import("react").JSX.Element;
 export declare const DataTableColumnsListItem: import("react").MemoExoticComponent<typeof InternalDataTableColumnsListItem>;
 export {};
 //# sourceMappingURL=DataTableColumnsListItem.d.ts.map

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

@@ -44,6 +44,7 @@ var import_useMergeRefs = require("../../../../../core/hooks/useMergeRefs.js");
 var import_Flex = require("../../../../../layouts/flex/Flex.js");
 var import_Highlight = require("../../../../../typography/highlight/Highlight.js");
 var import_get_column_label = require("../../../../utils/get-column-label.js");
+var import_column_pinning_utils = require("../../../features/ColumnPinning/column-pinning-utils.js");
 var import_messages = require("../../../messages.js");
 function InternalDataTableColumnsListItem(props) {
   const {
@@ -65,6 +66,8 @@ function InternalDataTableColumnsListItem(props) {
   const intl = (0, import_react_intl.useIntl)();
   const columnName = (0, import_get_column_label.getColumnLabel)(props.column);
   const isHidden = currentVisibilityState === false;
+  const physicalPinnedPosition = (0, import_column_pinning_utils.toPhysicalPinnedPosition)(props.column.pinned);
+  const dataPinnedPosition = physicalPinnedPosition === false ? void 0 : physicalPinnedPosition;
   const localColumnRef = (0, import_react.useRef)(null);
   const { setNodeRef, isDragging } = (0, import_sortable.useSortable)({
     id: props.column.key,
@@ -82,7 +85,7 @@ function InternalDataTableColumnsListItem(props) {
       "data-index": virtualIndex,
       "data-columnid": props.column.id,
       "data-parentcolumnid": props.column.parent?.id,
-      "data-pinned-position": props.column.pinned === false ? void 0 : props.column.pinned,
+      "data-pinned-position": dataPinnedPosition,
       ref: mergedRefs,
       justifyContent: "space-between",
       alignItems: "center",

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

@@ -28,11 +28,11 @@ __export(DataTableColumnsListItem_css_exports, {
 });
 module.exports = __toCommonJS(DataTableColumnsListItem_css_exports);
 var import_DataTableColumnsListItem_css_ts_vanilla = require("./DataTableColumnsListItem.css");
-var columnName = "_13ypmcy5-3-12-1";
-var columnNameContainer = "_13ypmcy4-3-12-1";
-var columnNameIndented = "_13ypmcy6-3-12-1";
-var columnNameSubdued = "_13ypmcy7-3-12-1";
-var columnsListItem = "_13ypmcy0-3-12-1";
-var dragging = "_13ypmcy3-3-12-1";
-var lastInSection = "_13ypmcy1-3-12-1";
-var noDragHandle = "_13ypmcy2-3-12-1";
+var columnName = "_13ypmcy5-3-13-0";
+var columnNameContainer = "_13ypmcy4-3-13-0";
+var columnNameIndented = "_13ypmcy6-3-13-0";
+var columnNameSubdued = "_13ypmcy7-3-13-0";
+var columnsListItem = "_13ypmcy0-3-13-0";
+var dragging = "_13ypmcy3-3-13-0";
+var lastInSection = "_13ypmcy1-3-13-0";
+var noDragHandle = "_13ypmcy2-3-13-0";

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

@@ -1,4 +1,4 @@
-._1o0bw490-3-12-1 {
+._1o0bw490-3-13-0 {
   display: flex;
   align-items: center;
   margin: 0;
@@ -7,6 +7,6 @@
   padding-left: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-4, 4px);
 }
-._1o0bw491-3-12-1 {
+._1o0bw491-3-13-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }

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

@@ -36,8 +36,8 @@ var styles = __toESM(require("./DataTableColumnsSectionHeader.sty.js"));
 var import_Text = require("../../../../../typography/text/Text.js");
 var import_messages = require("../../../messages.js");
 const sectionMessages = {
-  left: import_messages.dataTableMessages.columnSettingsSectionPinnedLeft,
-  right: import_messages.dataTableMessages.columnSettingsSectionPinnedRight,
+  start: import_messages.dataTableMessages.columnSettingsSectionPinnedLeft,
+  end: import_messages.dataTableMessages.columnSettingsSectionPinnedRight,
   false: import_messages.dataTableMessages.columnSettingsSectionUnpinned
 };
 function DataTableColumnsSectionHeader(props) {

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

@@ -22,5 +22,5 @@ __export(DataTableColumnsSectionHeader_css_exports, {
 });
 module.exports = __toCommonJS(DataTableColumnsSectionHeader_css_exports);
 var import_DataTableColumnsSectionHeader_css_ts_vanilla = require("./DataTableColumnsSectionHeader.css");
-var sectionHeader = "_1o0bw490-3-12-1";
-var sectionHeaderLabel = "_1o0bw491-3-12-1";
+var sectionHeader = "_1o0bw490-3-13-0";
+var sectionHeaderLabel = "_1o0bw491-3-13-0";

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

@@ -1,3 +1,3 @@
-._cuj2fe0-3-12-1 {
+._cuj2fe0-3-13-0 {
   text-align: center;
 }

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

@@ -21,4 +21,4 @@ __export(DataTableNoFilterResultsEmptyState_css_exports, {
 });
 module.exports = __toCommonJS(DataTableNoFilterResultsEmptyState_css_exports);
 var import_DataTableNoFilterResultsEmptyState_css_ts_vanilla = require("./DataTableNoFilterResultsEmptyState.css");
-var container = "_cuj2fe0-3-12-1";
+var container = "_cuj2fe0-3-13-0";

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

@@ -1,14 +1,14 @@
-._1rh6hs00-3-12-1 {
+._1rh6hs00-3-13-0 {
   flex: 1 1 0;
 }
-._1rh6hs00-3-12-1._1rh6hs00-3-12-1 {
+._1rh6hs00-3-13-0._1rh6hs00-3-13-0 {
   min-width: unset;
 }
-._1rh6hs01-3-12-1 {
+._1rh6hs01-3-13-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   flex-shrink: 0;
   white-space: nowrap;
 }
-._dmotjm0-3-12-1 div:has(> ._1rh6hs02-3-12-1) {
+._dmotjm0-3-13-0 div:has(> ._1rh6hs02-3-13-0) {
   padding-top: var(--dt-spacings-size-0, 0);
 }

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

@@ -1,4 +1,9 @@
 import { type Dispatch, type JSX, type SetStateAction } from 'react';
+/**
+ * Debounce time (ms) for search input in column settings modal.
+ * @internal
+ */
+export declare const SEARCH_DEBOUNCE_TIME_MS = 300;
 /**
  * Props for the filter/visibility control bar rendered above the column list in the column settings modal.
  * @internal

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

@@ -27,7 +27,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var DataTableVisibilityFilterControls_exports = {};
 __export(DataTableVisibilityFilterControls_exports, {
-  DataTableVisibilityFilterControls: () => DataTableVisibilityFilterControls
+  DataTableVisibilityFilterControls: () => DataTableVisibilityFilterControls,
+  SEARCH_DEBOUNCE_TIME_MS: () => SEARCH_DEBOUNCE_TIME_MS
 });
 module.exports = __toCommonJS(DataTableVisibilityFilterControls_exports);
 var import_jsx_runtime = require("react/jsx-runtime");

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 columnCount = "_1rh6hs01-3-12-1";
-var filterControls = "_1rh6hs02-3-12-1";
-var searchInput = "_1rh6hs00-3-12-1";
+var columnCount = "_1rh6hs01-3-13-0";
+var filterControls = "_1rh6hs02-3-13-0";
+var searchInput = "_1rh6hs00-3-13-0";

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

@@ -1,4 +1,4 @@
-import type { ColumnPinningPosition, RowData, TableFeatures, Column_Internal } from '@tanstack/react-table';
+import type { ColumnPinningPosition, RowData, TableFeatures, Column } 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';
@@ -17,7 +17,7 @@ export interface DataTableColumnSettingsTriggerProps extends StylingProps, DataT
     }) => string;
 }
 /** @internal */
-export type ColumnListItem<TFeatures extends TableFeatures, TData extends RowData> = Column_Internal<TFeatures, TData> & {
+export type ColumnListItem<TFeatures extends TableFeatures, TData extends RowData> = Column<TFeatures, TData> & {
     key: string;
     pinned: ColumnPinningPosition;
 };