@dynatrace/strato-components 3.0.1 → 3.1.0

package/tables/DataTable/components/DataTableVirtualizationContainer.css

@@ -1,4 +1,4 @@
-._ytdpsw0-3-0-1 {
+._ytdpsw0-3-1-0 {
   position: relative;
   width: 100%;
   max-width: 100%;
@@ -6,50 +6,50 @@
   overflow: auto;
   box-sizing: border-box;
 }
-._ytdpsw1-3-0-1 {
+._ytdpsw1-3-1-0 {
   display: grid;
   grid-template-rows: auto 1fr;
   grid-template-areas: 'header' 'body';
 }
-._ytdpsw2-3-0-1 {
+._ytdpsw2-3-1-0 {
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
-._ytdpsw3-3-0-1 {
+._ytdpsw3-3-1-0 {
   overflow: hidden;
 }
-._ytdpsw4-3-0-1 {
+._ytdpsw4-3-1-0 {
   background-color: var(--dt-colors-background-surface-default, #fff);
   border-color: var(--dt-colors-border-neutral-default, #dadbe4);
   border-style: var(--dt-borders-style-default, solid);
   border-width: var(--dt-borders-width-emphasized, 2px);
   border-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._ytdpsw4-3-0-1::-webkit-scrollbar-track {
+._ytdpsw4-3-1-0::-webkit-scrollbar-track {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
   border-bottom-right-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-emphasized, 2px));
 }
-._ytdpsw4-3-0-1::-webkit-scrollbar-track:horizontal {
+._ytdpsw4-3-1-0::-webkit-scrollbar-track:horizontal {
   border-top: solid var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-default, #dadbe4);
   border-bottom-left-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-emphasized, 2px));
 }
-._ytdpsw4-3-0-1::-webkit-scrollbar-track:vertical {
+._ytdpsw4-3-1-0::-webkit-scrollbar-track:vertical {
   border-left: solid var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-default, #dadbe4);
   border-top-right-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-emphasized, 2px));
 }
-._ytdpsw5-3-0-1::-webkit-scrollbar-track:horizontal {
+._ytdpsw5-3-1-0::-webkit-scrollbar-track:horizontal {
   border-top: solid var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._ytdpswf-3-0-1::-webkit-scrollbar-track:horizontal {
+._ytdpswf-3-1-0::-webkit-scrollbar-track:horizontal {
   border-top: solid var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-default, #dadbe4);
   border-bottom-right-radius: 0;
 }
-._ytdpswf-3-0-1::-webkit-scrollbar-track:vertical {
+._ytdpswf-3-1-0::-webkit-scrollbar-track:vertical {
   border-left: solid var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-default, #dadbe4);
   border-bottom-right-radius: 0;
 }
-._ytdpswf-3-0-1::-webkit-scrollbar-corner {
+._ytdpswf-3-1-0::-webkit-scrollbar-corner {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
   border-bottom-right-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-emphasized, 2px));
 }

package/tables/DataTable/components/DataTableVirtualizationContainer.js

@@ -64,10 +64,10 @@ function DataTableVirtualizationContainer(props) {
     // be a possibility to make this dependent on the row density.
     overscan: import_constants.DATA_TABLE_VIRTUALIZER_ROW_OVERSCAN,
     indexAttribute: "data-row",
+    // reserves space for the sticky header in the scrollable area, so the first rows are not hidden behind the header when scrolled to the top
     paddingStart: totalHeaderHeight,
-    // use double the header height to avoid a row being partially hidden, when navigating via page up and page down
-    scrollPaddingStart: totalHeaderHeight * 2,
-    scrollMargin: totalHeaderHeight,
+    // ensures that scrollToIndex scrolls the item to the correct position, taking into account the reserved space for the header
+    scrollPaddingStart: totalHeaderHeight,
     estimateSize: (index) => table.estimateRowHeight({ index }),
     measureElement: (element) => element.getBoundingClientRect().height,
     // Default wait until the scrollEnd is triggered and it starts updating.

package/tables/DataTable/components/DataTableVirtualizationContainer.sty.js

@@ -23,4 +23,4 @@ __export(DataTableVirtualizationContainer_css_exports, {
 module.exports = __toCommonJS(DataTableVirtualizationContainer_css_exports);
 var import_DataTableVirtualizationContainer_css_ts_vanilla = require("./DataTableVirtualizationContainer.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var virtualizationContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_ytdpsw0-3-0-1", variantClassNames: { hasVisibleColumns: { true: "_ytdpsw1-3-0-1", false: "_ytdpsw2-3-0-1" }, loading: { true: "_ytdpsw3-3-0-1" }, contained: { true: "_ytdpsw4-3-0-1", false: "_ytdpsw5-3-0-1" }, rowSeparation: { horizontalDividers: "_ytdpsw6-3-0-1", zebraStripes: "_ytdpsw7-3-0-1", none: "_ytdpsw8-3-0-1" }, headers: { hidden: "_ytdpsw9-3-0-1", "default": "_ytdpswa-3-0-1" }, scrollDirection: { false: "_ytdpswb-3-0-1", x: "_ytdpswc-3-0-1", y: "_ytdpswd-3-0-1", xy: "_ytdpswe-3-0-1" } }, defaultVariants: { contained: true, rowSeparation: "horizontalDividers", headers: "default" }, compoundVariants: [[{ contained: true, scrollDirection: "xy" }, "_ytdpswf-3-0-1"]] });
+var virtualizationContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_ytdpsw0-3-1-0", variantClassNames: { hasVisibleColumns: { true: "_ytdpsw1-3-1-0", false: "_ytdpsw2-3-1-0" }, loading: { true: "_ytdpsw3-3-1-0" }, contained: { true: "_ytdpsw4-3-1-0", false: "_ytdpsw5-3-1-0" }, rowSeparation: { horizontalDividers: "_ytdpsw6-3-1-0", zebraStripes: "_ytdpsw7-3-1-0", none: "_ytdpsw8-3-1-0" }, headers: { hidden: "_ytdpsw9-3-1-0", "default": "_ytdpswa-3-1-0" }, scrollDirection: { false: "_ytdpswb-3-1-0", x: "_ytdpswc-3-1-0", y: "_ytdpswd-3-1-0", xy: "_ytdpswe-3-1-0" } }, defaultVariants: { contained: true, rowSeparation: "horizontalDividers", headers: "default" }, compoundVariants: [[{ contained: true, scrollDirection: "xy" }, "_ytdpswf-3-1-0"]] });

package/tables/DataTable/components/TableActions/DataTableSelectedRowsActions.d.ts

@@ -1,11 +1,12 @@
 import { type ReactNode, type ReactElement } from 'react';
+import type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';
 import type { DataTestId } from '../../../../core/types/data-props.js';
 import type { StylingProps } from '../../../../core/types/styling-props.js';
 import type { DataTableRowData } from '../../public.api.js';
 /**
  * @public
  */
-export interface DataTableSelectedRowsActionsProps<TData extends DataTableRowData> extends StylingProps, DataTestId {
+export interface DataTableSelectedRowsActionsProps<TData extends DataTableRowData> extends StylingProps, DataTestId, BehaviorTrackingProps {
     children: (rows: {
         rowId: string;
         originalRow: TData;

package/tables/DataTable/components/TableActions/DataTableSelectedRowsActions.js

@@ -24,6 +24,7 @@ __export(DataTableSelectedRowsActions_exports, {
 module.exports = __toCommonJS(DataTableSelectedRowsActions_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
+var import_useBehavioralTrackingProps = require("../../../../core/hooks/useBehavioralTrackingProps.js");
 var import_logging = require("../../../../core/utils/logging.js");
 var import_Flex = require("../../../../layouts/flex/Flex.js");
 var import_DataTableContext = require("../../contexts/DataTableContext.js");
@@ -40,6 +41,7 @@ const DataTableSelectedRowsActions = (0, import_react.forwardRef)(
       style: consumerStyle,
       ...remainingProps
     } = props;
+    const [behavioralTrackingProps, restProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
     if (typeof children !== "function") {
       (0, import_logging.devLog)("The SelectedRowsActions sub-component child must be a function!");
       return null;
@@ -58,7 +60,8 @@ const DataTableSelectedRowsActions = (0, import_react.forwardRef)(
         "data-testid": dataTestId,
         className: consumerClassName,
         style: consumerStyle,
-        ...remainingProps,
+        ...behavioralTrackingProps,
+        ...restProps,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Flex.Flex, { alignItems: "center", flexWrap: "wrap", gap: 4, children: children(currentSelectableRows) })
       }
     );

package/tables/DataTable/components/TableActions/DataTableSelectionChip.css

@@ -1,15 +1,15 @@
-._1rlvxpp0-3-0-1 {
+._1rlvxpp0-3-1-0 {
   padding: 0 var(--dt-spacings-size-8, 8px);
   align-items: flex-end;
   justify-content: flex-end;
 }
-._1rlvxpp1-3-0-1 {
+._1rlvxpp1-3-1-0 {
   padding: 0 var(--dt-spacings-size-2, 2px);
 }
-._1rlvxpp3-3-0-1 {
+._1rlvxpp3-3-1-0 {
   margin-left: var(--dt-spacings-size-6, 6px);
 }
-._1rlvxpp4-3-0-1 {
+._1rlvxpp4-3-1-0 {
   height: var(--dt-spacings-size-20, 20px);
   min-width: var(--dt-spacings-size-12, 12px);
   padding: var(--dt-spacings-size-0, 0) var(--dt-spacings-size-4, 4px);

package/tables/DataTable/components/TableActions/DataTableSelectionChip.sty.js

@@ -23,5 +23,5 @@ __export(DataTableSelectionChip_css_exports, {
 });
 module.exports = __toCommonJS(DataTableSelectionChip_css_exports);
 var import_DataTableSelectionChip_css_ts_vanilla = require("./DataTableSelectionChip.css");
-var selectionChip = "_1rlvxpp4-3-0-1";
-var selectionChipWrapper = { condensed: "_1rlvxpp1-3-0-1 _1rlvxpp0-3-0-1", "default": "_1rlvxpp0-3-0-1", comfortable: "_1rlvxpp3-3-0-1 _1rlvxpp0-3-0-1" };
+var selectionChip = "_1rlvxpp4-3-1-0";
+var selectionChipWrapper = { condensed: "_1rlvxpp1-3-1-0 _1rlvxpp0-3-1-0", "default": "_1rlvxpp0-3-1-0", comfortable: "_1rlvxpp3-3-1-0 _1rlvxpp0-3-1-0" };

package/tables/DataTable/components/TableActions/DataTableTableActions.d.ts

@@ -1,11 +1,12 @@
 import { type ReactElement } from 'react';
+import type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';
 import { DataTestId } from '../../../../core/types/data-props.js';
 import { StylingProps } from '../../../../core/types/styling-props.js';
 import { WithChildren } from '../../../../core/types/with-children.js';
 /**
  * @public
  */
-export type DataTableTableActionsProps = WithChildren & StylingProps & DataTestId;
+export type DataTableTableActionsProps = WithChildren & StylingProps & DataTestId & BehaviorTrackingProps;
 /**
  * A helper function to check whether the child component is the TableActions component
  * @internal
@@ -15,4 +16,4 @@ export declare function _isTableActions(child: ReactElement | null): child is Re
  * TableActions slot component for general actions that affect the entire table. Positoned above the header.
  * @public
  */
-export declare const DataTableTableActions: (props: WithChildren & StylingProps & DataTestId & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const DataTableTableActions: (props: WithChildren & StylingProps & DataTestId & BehaviorTrackingProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/tables/DataTable/components/TableActions/DataTableTableActions.js

@@ -24,6 +24,7 @@ __export(DataTableTableActions_exports, {
 module.exports = __toCommonJS(DataTableTableActions_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
+var import_useBehavioralTrackingProps = require("../../../../core/hooks/useBehavioralTrackingProps.js");
 var import_Flex = require("../../../../layouts/flex/Flex.js");
 function _isTableActions(child) {
   return child?.type === DataTableTableActions;
@@ -37,6 +38,7 @@ const DataTableTableActions = (0, import_react.forwardRef)(
       style: consumerStyle,
       ...remainingProps
     } = props;
+    const [behavioralTrackingProps, restProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Flex.Flex,
       {
@@ -48,7 +50,8 @@ const DataTableTableActions = (0, import_react.forwardRef)(
         "data-testid": dataTestId,
         className: consumerClassName,
         style: consumerStyle,
-        ...remainingProps,
+        ...behavioralTrackingProps,
+        ...restProps,
         children
       }
     );

package/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/ColumnOrderDragHandle.js

@@ -66,6 +66,7 @@ const ColumnOrderDragHandle = ({
         styles.columnDndHandle,
         isKeyboardDragging && (0, import_focusRing_css.focusRingCSS)({ minimal: false, color: "neutral" })
       ),
+      "data-dt-name": "ColumnSettingsDragAndDropHandle",
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.DragAllDirectionIcon, {}) })
     }
   );

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

@@ -1,29 +1,29 @@
-._11d1m5j0-3-0-1 {
+._11d1m5j0-3-1-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-surface-default, #fff);
   z-index: 4;
   overflow: hidden;
 }
-._11d1m5j0-3-0-1:last-child {
+._11d1m5j0-3-1-0:last-child {
   border-bottom: 0px;
 }
-._11d1m5j1-3-0-1 {
+._11d1m5j1-3-1-0 {
   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-0-1:active {
+._11d1m5j1-3-1-0:active {
   background: transparent;
 }
-._11d1m5j1-3-0-1:hover {
+._11d1m5j1-3-1-0:hover {
   background: transparent;
   cursor: grab;
 }
-._11d1m5j0-3-0-1 ._11d1m5j1-3-0-1 {
+._11d1m5j0-3-1-0 ._11d1m5j1-3-1-0 {
   cursor: grabbing;
 }
-._11d1m5j2-3-0-1 {
+._11d1m5j2-3-1-0 {
   opacity: 0.2;
 }

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

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

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

@@ -74,9 +74,30 @@ const ColumnPinningMenu = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.Tooltip, { text: pinningLabel, placement: "right", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { size: "condensed", "aria-label": pinningLabel, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.PinIcon, {}) }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu.Content, { children: [
-      pinnedPosition !== "left" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Item, { onSelect: () => pin("left"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intl.FormattedMessage, { ...import_messages.dataTableMessages.pinColumnLeftLabel }) }),
-      pinnedPosition !== "right" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Item, { onSelect: () => pin("right"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intl.FormattedMessage, { ...import_messages.dataTableMessages.pinColumnRightLabel }) }),
-      pinnedPosition !== false && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Item, { onSelect: () => pin(false), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intl.FormattedMessage, { ...import_messages.dataTableMessages.unpinColumnLabel }) })
+      pinnedPosition !== "left" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Menu.Menu.Item,
+        {
+          onSelect: () => pin("left"),
+          "data-dt-name": "ColumnSettingsPinLeft",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intl.FormattedMessage, { ...import_messages.dataTableMessages.pinColumnLeftLabel })
+        }
+      ),
+      pinnedPosition !== "right" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Menu.Menu.Item,
+        {
+          onSelect: () => pin("right"),
+          "data-dt-name": "ColumnSettingsPinRight",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intl.FormattedMessage, { ...import_messages.dataTableMessages.pinColumnRightLabel })
+        }
+      ),
+      pinnedPosition !== false && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Menu.Menu.Item,
+        {
+          onSelect: () => pin(false),
+          "data-dt-name": "ColumnSettingsUnpin",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intl.FormattedMessage, { ...import_messages.dataTableMessages.unpinColumnLabel })
+        }
+      )
     ] })
   ] }) });
 };

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

@@ -37,6 +37,12 @@ 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;
+  let dataDtName = "ColumnVisibilityShowColumn";
+  if (currentState === true) {
+    dataDtName = "ColumnVisibilityHideColumn";
+  } else if (currentState === "indeterminate") {
+    dataDtName = "ColumnVisibilityShowColumns";
+  }
   const columnName = (0, import_get_column_label.getColumnLabel)(column);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Checkbox.Checkbox,
@@ -49,6 +55,7 @@ const ColumnVisibilityCheckbox = (props) => {
         }
       },
       className: styles.columnName,
+      "data-dt-name": dataDtName,
       children: columnName
     }
   );

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

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

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

@@ -25,6 +25,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-0-1";
-var virtualizationInnerContainer = "_14dz1ui4-3-0-1";
-var virtualizationScrollContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14dz1ui1-3-0-1", variantClassNames: { hasFilter: { true: "_14dz1ui2-3-0-1", false: "_14dz1ui3-3-0-1" } }, defaultVariants: { hasFilter: false }, compoundVariants: [] });
+var noItemsFound = "_14dz1ui0-3-1-0";
+var virtualizationInnerContainer = "_14dz1ui4-3-1-0";
+var virtualizationScrollContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14dz1ui1-3-1-0", variantClassNames: { hasFilter: { true: "_14dz1ui2-3-1-0", false: "_14dz1ui3-3-1-0" } }, defaultVariants: { hasFilter: false }, compoundVariants: [] });

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

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

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

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

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

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

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

@@ -72,6 +72,7 @@ const DataTableVisibilityFilterControls = (props) => {
   if (!showFilterControl && !showVisibilityControl) {
     return null;
   }
+  const dataDtName = showHideAllState === true ? "ColumnSettingsHideAll" : "ColumnSettingsShowAll";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_Flex.Flex,
     {
@@ -85,6 +86,7 @@ const DataTableVisibilityFilterControls = (props) => {
             value: showHideAllState,
             onChange: onShowHideAllChange,
             className: styles.showHideAll,
+            "data-dt-name": dataDtName,
             children: intl.formatMessage(import_messages.dataTableMessages.showHideAll)
           }
         ),
@@ -96,7 +98,8 @@ const DataTableVisibilityFilterControls = (props) => {
             ),
             className: styles.searchInput,
             onChange,
-            value: filterValue
+            value: filterValue,
+            "data-dt-name": "ColumnSettingsFilter"
           }
         )
       ]

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

@@ -25,6 +25,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-0-1";
-var searchInput = "_1rh6hs01-3-0-1";
-var showHideAll = "_1rh6hs00-3-0-1";
+var filterControls = "_1rh6hs02-3-1-0";
+var searchInput = "_1rh6hs01-3-1-0";
+var showHideAll = "_1rh6hs00-3-1-0";

package/tables/DataTable/components/Toolbar/DataTableToolbar.d.ts

@@ -1,6 +1,7 @@
 import { type ReactElement, type ReactNode } from 'react';
 import type { DataTableColumnSettingsTriggerProps } from './ColumnSettings/column-settings-types.js';
 import { type IntentProps } from '../../../../core/slots/Intent/Intent.js';
+import type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';
 import type { DataTestId } from '../../../../core/types/data-props.js';
 import type { StylingProps } from '../../../../core/types/styling-props.js';
 import type { WithChildren } from '../../../../core/types/with-children.js';
@@ -9,9 +10,9 @@ import type { DataTableColumnVisibilityState } from '../../features/ColumnVisibi
 /**
  * @public
  */
-export type DataTableToolbarProps = WithChildren & StylingProps & DataTestId;
+export type DataTableToolbarProps = WithChildren & StylingProps & DataTestId & BehaviorTrackingProps;
 /**
- * A helper function to check whether the child component is the TableActions component.
+ * A helper function to check whether the child component is the DataTableToolbar component.
  * @internal
  */
 export declare function _isDataTableToolbar(child: ReactElement | null): child is ReactElement<DataTableToolbarProps>;
@@ -51,6 +52,10 @@ export type DataTableToolbarItemProps = {
      * Array of column IDs that can optionally be excluded from the download.
      */
     downloadExcludedColumns?: string[];
+    /**
+     * Callback, that fires once data has been downloaded and indicates which subset of data was downloaded (all, page or selected) and which columns were excluded.
+     */
+    onDownloadData?: (subset: 'all' | 'page' | 'selected', excludedColumns?: string[]) => void;
     /**
      * Array of intent props for the `Intent` slot, to render the intent actions in the menu.
      */
@@ -67,4 +72,4 @@ export declare function getToolbarConfig(children: ReactNode): {
  * Toolbar slot component for general actions that affect the entire table. Positioned above the header.
  * @public
  */
-export declare const DataTableToolbar: (props: WithChildren & StylingProps & DataTestId & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const DataTableToolbar: (props: WithChildren & StylingProps & DataTestId & BehaviorTrackingProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/tables/DataTable/components/Toolbar/DataTableToolbar.js

@@ -31,6 +31,7 @@ var import_DataTableColumnSettings = require("./ColumnSettings/DataTableColumnSe
 var import_DataTableColumnSettingsTrigger = require("./ColumnSettings/DataTableColumnSettingsTrigger.js");
 var import_DataTableColumnVisibilitySettings = require("./ColumnSettings/DataTableColumnVisibilitySettings.js");
 var import_DataTableToolbarMenu = require("./DataTableToolbarMenu.js");
+var import_useBehavioralTrackingProps = require("../../../../core/hooks/useBehavioralTrackingProps.js");
 var import_Intent = require("../../../../core/slots/Intent/Intent.js");
 var import_is_slot = require("../../../../core/utils/is-slot.js");
 var import_logging = require("../../../../core/utils/logging.js");
@@ -64,6 +65,7 @@ function getToolbarConfig(children) {
     } else if ((0, import_is_slot.isSlot)(child, import_Download.DataTableDownload)) {
       slots.downloadData = true;
       toolbarItemProps.downloadExcludedColumns = child.props?.excludeColumns;
+      toolbarItemProps.onDownloadData = child.props?.onDownloadData;
     } else if ((0, import_is_slot.isSlot)(child, import_LineWrap.DataTableGlobalLineWrapAction)) {
       slots.globalLineWrap = true;
     } else if ((0, import_is_slot.isSlot)(child, import_Intent.Intent)) {
@@ -83,6 +85,7 @@ const DataTableToolbar = (0, import_react.forwardRef)(
       style: consumerStyle,
       ...remainingProps
     } = props;
+    const [behavioralTrackingProps, restProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
     const { slots, toolbarItemProps } = getToolbarConfig(children);
     if (import_react.Children.count(children) === 0) {
       return null;
@@ -100,7 +103,8 @@ const DataTableToolbar = (0, import_react.forwardRef)(
           gridArea: "1 / 2 / 2 / 2",
           ...consumerStyle
         },
-        ...remainingProps,
+        ...behavioralTrackingProps,
+        ...restProps,
         children: [
           (slots.visibilitySettings || slots.columnOrderSettings || slots.columnPinningSettings) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_DataTableColumnSettings.DataTableColumnSettings,

package/tables/DataTable/constants.d.ts

@@ -1,4 +1,3 @@
-import type { ScrollToOptions } from '@tanstack/react-virtual';
 import { DataTableAlignmentColumnDef } from './features/ColumnAlignment.js';
 import type { DataTableConfig } from './public.api.js';
 type RowDensity = 'default' | 'condensed' | 'comfortable';
@@ -93,7 +92,7 @@ export declare const DATA_TABLE_DETAILS_ROW_PARITY: unique symbol;
 /** Symbol used to indicate that an action applies to all columns. */
 export declare const DATA_TABLE_ACTION_FOR_ALL_COLUMNS: unique symbol;
 /** Default name of the downloaded CSV file. */
-export declare const DATA_TABLE__DOWNLOAD_CSV_FILE_NAME = "table-data.csv";
+export declare const DATA_TABLE_DOWNLOAD_CSV_FILE_NAME = "table-data.csv";
 /** Column header prepended to CSV file if table has sub-rows. */
 export declare const DATA_TABLE_INDEX_COLUMN_HEADER = "index";
 /** CSS variable for left position during column resizing. */
@@ -111,7 +110,10 @@ export declare const DATA_TABLE_VIRTUALIZER_ROW_OVERSCAN = 20;
 /** Overscan column count for virtualizer. */
 export declare const DATA_TABLE_VIRTUALIZER_COLUMN_OVERSCAN = 5;
 /** Default scrollTo options for virtualizer. */
-export declare const DATA_TABLE_DEFAULT_SCROLL_OPTIONS: ScrollToOptions;
+export declare const DATA_TABLE_DEFAULT_SCROLL_OPTIONS: {
+    align: 'start' | 'center' | 'end';
+    behavior: 'auto' | 'smooth';
+};
 /** Default icon size (px). */
 export declare const DATA_TABLE_DEFAULT_ICON_SIZE = 20;
 /** Default icon padding (px). */

package/tables/DataTable/constants.js

@@ -40,6 +40,7 @@ __export(constants_exports, {
   DATA_TABLE_DETAILS_ROW_PARITY: () => DATA_TABLE_DETAILS_ROW_PARITY,
   DATA_TABLE_DND_NON_TARGET_OPACITY: () => DATA_TABLE_DND_NON_TARGET_OPACITY,
   DATA_TABLE_DND_PLACEHOLDER_DIVIDER_CSS_VAR: () => DATA_TABLE_DND_PLACEHOLDER_DIVIDER_CSS_VAR,
+  DATA_TABLE_DOWNLOAD_CSV_FILE_NAME: () => DATA_TABLE_DOWNLOAD_CSV_FILE_NAME,
   DATA_TABLE_EMPTY_MIN_WIDTH: () => DATA_TABLE_EMPTY_MIN_WIDTH,
   DATA_TABLE_HEADER_ACTION_HOVERED_MARGIN: () => DATA_TABLE_HEADER_ACTION_HOVERED_MARGIN,
   DATA_TABLE_HEADER_SORTED_ACTION_HOVERED_MARGIN: () => DATA_TABLE_HEADER_SORTED_ACTION_HOVERED_MARGIN,
@@ -70,7 +71,6 @@ __export(constants_exports, {
   DATA_TABLE_VIRTUALIZER_ROW_OVERSCAN: () => DATA_TABLE_VIRTUALIZER_ROW_OVERSCAN,
   DATA_TABLE_VISUAL_VARIANT_CONFIG_DEFAULT: () => DATA_TABLE_VISUAL_VARIANT_CONFIG_DEFAULT,
   DATA_TABLE_ZINDEX_CONFIG: () => DATA_TABLE_ZINDEX_CONFIG,
-  DATA_TABLE__DOWNLOAD_CSV_FILE_NAME: () => DATA_TABLE__DOWNLOAD_CSV_FILE_NAME,
   DEFAULT_DATATABLE_CONFIG: () => DEFAULT_DATATABLE_CONFIG
 });
 module.exports = __toCommonJS(constants_exports);
@@ -174,16 +174,16 @@ const DATA_TABLE_BUILT_IN_COLUMN_IDS = /* @__PURE__ */ new Set([
   DATA_TABLE_ROW_ACTIONS_COLUMN_ID,
   DATA_TABLE_SPACER_COLUMN_ID
 ]);
-const DATA_TABLE_DETAILS_ROW_IDENTIFIER = Symbol(
+const DATA_TABLE_DETAILS_ROW_IDENTIFIER = /* @__PURE__ */ Symbol(
   "DETAILS_ROW_IDENTIFIER"
 );
 const DATA_TABLE_ROW_EXPANDED_ID_SUFFIX = "-expanded";
 const DATA_TABLE_PINNING_SHADOW_CELL_ROW_ID_SUFFIX = "-shadow-cell";
-const DATA_TABLE_DETAILS_ROW_PARITY = Symbol("DETAILS_ROW_PARITY");
-const DATA_TABLE_ACTION_FOR_ALL_COLUMNS = Symbol(
+const DATA_TABLE_DETAILS_ROW_PARITY = /* @__PURE__ */ Symbol("DETAILS_ROW_PARITY");
+const DATA_TABLE_ACTION_FOR_ALL_COLUMNS = /* @__PURE__ */ Symbol(
   "Action applies to all columns"
 );
-const DATA_TABLE__DOWNLOAD_CSV_FILE_NAME = "table-data.csv";
+const DATA_TABLE_DOWNLOAD_CSV_FILE_NAME = "table-data.csv";
 const DATA_TABLE_INDEX_COLUMN_HEADER = "index";
 const DATA_TABLE_RESIZING_LEFT_POSITION_CSS_VAR = "--resizing-leftPosition";
 const DATA_TABLE_RESIZING_RIGHT_POSITION_CSS_VAR = "--resizing-rightPosition";