@dynatrace/strato-components 3.0.1 → 3.1.0

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

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { useBehavioralTrackingProps } from "../../../../core/hooks/useBehavioralTrackingProps.js";
 import { devLog } from "../../../../core/utils/logging.js";
 import { Flex } from "../../../../layouts/flex/Flex.js";
 import { useDataTable } from "../../contexts/DataTableContext.js";
@@ -16,6 +17,7 @@ const DataTableSelectedRowsActions = forwardRef(
       style: consumerStyle,
       ...remainingProps
     } = props;
+    const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
     if (typeof children !== "function") {
       devLog("The SelectedRowsActions sub-component child must be a function!");
       return null;
@@ -34,7 +36,8 @@ const DataTableSelectedRowsActions = forwardRef(
         "data-testid": dataTestId,
         className: consumerClassName,
         style: consumerStyle,
-        ...remainingProps,
+        ...behavioralTrackingProps,
+        ...restProps,
         children: /* @__PURE__ */ jsx(Flex, { alignItems: "center", flexWrap: "wrap", gap: 4, children: children(currentSelectableRows) })
       }
     );

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/components/TableActions/DataTableSelectedRowsActions.tsx"],
-  "sourcesContent": ["import { type ReactNode, type ReactElement, forwardRef, type Ref } from 'react';\n\nimport type { DataTestId } from '../../../../core/types/data-props.js';\nimport type { StylingProps } from '../../../../core/types/styling-props.js';\nimport { devLog } from '../../../../core/utils/logging.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport type { DataTableRowData } from '../../public.api.js';\n\n/**\n * @public\n */\nexport interface DataTableSelectedRowsActionsProps<\n  TData extends DataTableRowData,\n> extends StylingProps,\n    DataTestId {\n  children: (\n    rows: {\n      rowId: string;\n      originalRow: TData;\n    }[],\n  ) => ReactNode;\n}\n\n// A helper function to check whether the child component is the SelectedRowsActions component\n/**\n * @internal\n */\nexport function _isDataTableSelectedRowsActions<TData extends DataTableRowData>(\n  child: ReactElement | null,\n): child is ReactElement<DataTableSelectedRowsActionsProps<TData>> {\n  return child?.type === DataTableSelectedRowsActions;\n}\n\n/**\n * Selected rows actions component used for configuring actions\n * that can be applied on one or multiple rows in the DataTable simultaneously.\n * Also, it gets called by DataTable as rows get selected/unselected.\n *\n * @param props - contains children or self\n *\n * @returns DataTableSelectedRowsActions containing children.\n * @public\n */\nexport const DataTableSelectedRowsActions = forwardRef(\n  <TData extends DataTableRowData>(\n    props: DataTableSelectedRowsActionsProps<TData>,\n    forwardedRef: Ref<HTMLDivElement>,\n  ): ReactElement | null => {\n    const table = useDataTable();\n\n    const {\n      children,\n      'data-testid': dataTestId,\n      className: consumerClassName,\n      style: consumerStyle,\n      ...remainingProps\n    } = props;\n\n    if (typeof children !== 'function') {\n      devLog('The SelectedRowsActions sub-component child must be a function!');\n      return null;\n    }\n\n    const currentSelectableRows = table\n      .getSelectedRowModel()\n      .flatRows.map((row) => ({\n        rowId: row.id,\n        originalRow: row.original as TData,\n      }));\n\n    return (\n      <Flex\n        ref={forwardedRef}\n        justifyContent=\"flex-start\"\n        alignItems=\"flex-end\"\n        flexWrap=\"wrap\"\n        data-testid={dataTestId}\n        className={consumerClassName}\n        style={consumerStyle}\n        {...remainingProps}\n      >\n        <Flex alignItems=\"center\" flexWrap=\"wrap\" gap={4}>\n          {children(currentSelectableRows)}\n        </Flex>\n      </Flex>\n    );\n  },\n);\n\n(\n  DataTableSelectedRowsActions as typeof DataTableSelectedRowsActions & {\n    displayName: string;\n  }\n).displayName = 'DataTable.SelectedRowsActions';\n"],
-  "mappings": "AAkFQ;AAlFR,SAA4C,kBAA4B;AAIxE,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAsBtB,SAAS,gCACd,OACiE;AACjE,SAAO,OAAO,SAAS;AACzB;AAYO,MAAM,+BAA+B;AAAA,EAC1C,CACE,OACA,iBACwB;AACxB,UAAM,QAAQ,aAAa;AAE3B,UAAM;AAAA,MACJ;AAAA,MACA,eAAe;AAAA,MACf,WAAW;AAAA,MACX,OAAO;AAAA,MACP,GAAG;AAAA,IACL,IAAI;AAEJ,QAAI,OAAO,aAAa,YAAY;AAClC,aAAO,iEAAiE;AACxE,aAAO;AAAA,IACT;AAEA,UAAM,wBAAwB,MAC3B,oBAAoB,EACpB,SAAS,IAAI,CAAC,SAAS;AAAA,MACtB,OAAO,IAAI;AAAA,MACX,aAAa,IAAI;AAAA,IACnB,EAAE;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,gBAAe;AAAA,QACf,YAAW;AAAA,QACX,UAAS;AAAA,QACT,eAAa;AAAA,QACb,WAAW;AAAA,QACX,OAAO;AAAA,QACN,GAAG;AAAA,QAEJ,8BAAC,QAAK,YAAW,UAAS,UAAS,QAAO,KAAK,GAC5C,mBAAS,qBAAqB,GACjC;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAGE,6BAGA,cAAc;",
+  "sourcesContent": ["import { type ReactNode, type ReactElement, forwardRef, type Ref } from 'react';\n\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../../../core/types/data-props.js';\nimport type { StylingProps } from '../../../../core/types/styling-props.js';\nimport { devLog } from '../../../../core/utils/logging.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport type { DataTableRowData } from '../../public.api.js';\n\n/**\n * @public\n */\nexport interface DataTableSelectedRowsActionsProps<\n  TData extends DataTableRowData,\n> extends StylingProps,\n    DataTestId,\n    BehaviorTrackingProps {\n  children: (\n    rows: {\n      rowId: string;\n      originalRow: TData;\n    }[],\n  ) => ReactNode;\n}\n\n// A helper function to check whether the child component is the SelectedRowsActions component\n/**\n * @internal\n */\nexport function _isDataTableSelectedRowsActions<TData extends DataTableRowData>(\n  child: ReactElement | null,\n): child is ReactElement<DataTableSelectedRowsActionsProps<TData>> {\n  return child?.type === DataTableSelectedRowsActions;\n}\n\n/**\n * Selected rows actions component used for configuring actions\n * that can be applied on one or multiple rows in the DataTable simultaneously.\n * Also, it gets called by DataTable as rows get selected/unselected.\n *\n * @param props - contains children or self\n *\n * @returns DataTableSelectedRowsActions containing children.\n * @public\n */\nexport const DataTableSelectedRowsActions = forwardRef(\n  <TData extends DataTableRowData>(\n    props: DataTableSelectedRowsActionsProps<TData>,\n    forwardedRef: Ref<HTMLDivElement>,\n  ): ReactElement | null => {\n    const table = useDataTable();\n\n    const {\n      children,\n      'data-testid': dataTestId,\n      className: consumerClassName,\n      style: consumerStyle,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    if (typeof children !== 'function') {\n      devLog('The SelectedRowsActions sub-component child must be a function!');\n      return null;\n    }\n\n    const currentSelectableRows = table\n      .getSelectedRowModel()\n      .flatRows.map((row) => ({\n        rowId: row.id,\n        originalRow: row.original as TData,\n      }));\n\n    return (\n      <Flex\n        ref={forwardedRef}\n        justifyContent=\"flex-start\"\n        alignItems=\"flex-end\"\n        flexWrap=\"wrap\"\n        data-testid={dataTestId}\n        className={consumerClassName}\n        style={consumerStyle}\n        {...behavioralTrackingProps}\n        {...restProps}\n      >\n        <Flex alignItems=\"center\" flexWrap=\"wrap\" gap={4}>\n          {children(currentSelectableRows)}\n        </Flex>\n      </Flex>\n    );\n  },\n);\n\n(\n  DataTableSelectedRowsActions as typeof DataTableSelectedRowsActions & {\n    displayName: string;\n  }\n).displayName = 'DataTable.SelectedRowsActions';\n"],
+  "mappings": "AAyFQ;AAzFR,SAA4C,kBAA4B;AAExE,SAAS,kCAAkC;AAI3C,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAuBtB,SAAS,gCACd,OACiE;AACjE,SAAO,OAAO,SAAS;AACzB;AAYO,MAAM,+BAA+B;AAAA,EAC1C,CACE,OACA,iBACwB;AACxB,UAAM,QAAQ,aAAa;AAE3B,UAAM;AAAA,MACJ;AAAA,MACA,eAAe;AAAA,MACf,WAAW;AAAA,MACX,OAAO;AAAA,MACP,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,QAAI,OAAO,aAAa,YAAY;AAClC,aAAO,iEAAiE;AACxE,aAAO;AAAA,IACT;AAEA,UAAM,wBAAwB,MAC3B,oBAAoB,EACpB,SAAS,IAAI,CAAC,SAAS;AAAA,MACtB,OAAO,IAAI;AAAA,MACX,aAAa,IAAI;AAAA,IACnB,EAAE;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,gBAAe;AAAA,QACf,YAAW;AAAA,QACX,UAAS;AAAA,QACT,eAAa;AAAA,QACb,WAAW;AAAA,QACX,OAAO;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QAEJ,8BAAC,QAAK,YAAW,UAAS,UAAS,QAAO,KAAK,GAC5C,mBAAS,qBAAqB,GACjC;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAGE,6BAGA,cAAc;",
   "names": []
 }

package/esm/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/esm/tables/DataTable/components/TableActions/DataTableSelectionChip.sty.js

@@ -1,6 +1,6 @@
 import "./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" };
 export {
   selectionChip,
   selectionChipWrapper

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/components/TableActions/DataTableSelectionChip.css.ts"],
-  "sourcesContent": ["import './DataTableSelectionChip.css';\nexport var selectionChip = '_1rlvxpp4-3-0-1';\nexport 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'};"],
+  "sourcesContent": ["import './DataTableSelectionChip.css';\nexport var selectionChip = '_1rlvxpp4-3-1-0';\nexport 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'};"],
   "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;AACpB,IAAI,uBAAuB,EAAC,WAAU,mCAAkC,WAAU,mBAAkB,aAAY,kCAAiC;",
   "names": []
 }

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

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { useBehavioralTrackingProps } from "../../../../core/hooks/useBehavioralTrackingProps.js";
 import { Flex } from "../../../../layouts/flex/Flex.js";
 function _isTableActions(child) {
   return child?.type === DataTableTableActions;
@@ -13,6 +14,7 @@ const DataTableTableActions = forwardRef(
       style: consumerStyle,
       ...remainingProps
     } = props;
+    const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
     return /* @__PURE__ */ jsx(
       Flex,
       {
@@ -24,7 +26,8 @@ const DataTableTableActions = forwardRef(
         "data-testid": dataTestId,
         className: consumerClassName,
         style: consumerStyle,
-        ...remainingProps,
+        ...behavioralTrackingProps,
+        ...restProps,
         children
       }
     );

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/components/TableActions/DataTableTableActions.tsx"],
-  "sourcesContent": ["import { forwardRef, type ReactElement, type Ref } from 'react';\n\nimport { DataTestId } from '../../../../core/types/data-props.js';\nimport { StylingProps } from '../../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../../core/types/with-children.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\n\n/**\n * @public\n */\nexport type DataTableTableActionsProps = WithChildren &\n  StylingProps &\n  DataTestId;\n\n/**\n * A helper function to check whether the child component is the TableActions component\n * @internal\n */\nexport function _isTableActions(\n  child: ReactElement | null,\n): child is ReactElement<DataTableTableActionsProps> {\n  return child?.type === DataTableTableActions;\n}\n\n/**\n * TableActions slot component for general actions that affect the entire table. Positoned above the header.\n * @public\n */\nexport const DataTableTableActions = forwardRef(\n  (\n    props: DataTableTableActionsProps,\n    forwardedRef: Ref<HTMLDivElement>,\n  ): ReactElement | null => {\n    const {\n      children,\n      'data-testid': dataTestId,\n      className: consumerClassName,\n      style: consumerStyle,\n      ...remainingProps\n    } = props;\n\n    return (\n      <Flex\n        ref={forwardedRef}\n        justifyContent=\"flex-start\"\n        alignItems=\"flex-end\"\n        flexWrap=\"wrap\"\n        gap={4}\n        data-testid={dataTestId}\n        className={consumerClassName}\n        style={consumerStyle}\n        {...remainingProps}\n      >\n        {children}\n      </Flex>\n    );\n  },\n);\n\n(\n  DataTableTableActions as typeof DataTableTableActions & {\n    displayName: string;\n  }\n).displayName = 'DataTable.TableActions';\n"],
-  "mappings": "AA0CM;AA1CN,SAAS,kBAA+C;AAKxD,SAAS,YAAY;AAad,SAAS,gBACd,OACmD;AACnD,SAAO,OAAO,SAAS;AACzB;AAMO,MAAM,wBAAwB;AAAA,EACnC,CACE,OACA,iBACwB;AACxB,UAAM;AAAA,MACJ;AAAA,MACA,eAAe;AAAA,MACf,WAAW;AAAA,MACX,OAAO;AAAA,MACP,GAAG;AAAA,IACL,IAAI;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,gBAAe;AAAA,QACf,YAAW;AAAA,QACX,UAAS;AAAA,QACT,KAAK;AAAA,QACL,eAAa;AAAA,QACb,WAAW;AAAA,QACX,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAGE,sBAGA,cAAc;",
+  "sourcesContent": ["import { forwardRef, type ReactElement, type Ref } from 'react';\n\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../../../core/types/data-props.js';\nimport { StylingProps } from '../../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../../core/types/with-children.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\n\n/**\n * @public\n */\nexport type DataTableTableActionsProps = WithChildren &\n  StylingProps &\n  DataTestId &\n  BehaviorTrackingProps;\n\n/**\n * A helper function to check whether the child component is the TableActions component\n * @internal\n */\nexport function _isTableActions(\n  child: ReactElement | null,\n): child is ReactElement<DataTableTableActionsProps> {\n  return child?.type === DataTableTableActions;\n}\n\n/**\n * TableActions slot component for general actions that affect the entire table. Positoned above the header.\n * @public\n */\nexport const DataTableTableActions = forwardRef(\n  (\n    props: DataTableTableActionsProps,\n    forwardedRef: Ref<HTMLDivElement>,\n  ): ReactElement | null => {\n    const {\n      children,\n      'data-testid': dataTestId,\n      className: consumerClassName,\n      style: consumerStyle,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    return (\n      <Flex\n        ref={forwardedRef}\n        justifyContent=\"flex-start\"\n        alignItems=\"flex-end\"\n        flexWrap=\"wrap\"\n        gap={4}\n        data-testid={dataTestId}\n        className={consumerClassName}\n        style={consumerStyle}\n        {...behavioralTrackingProps}\n        {...restProps}\n      >\n        {children}\n      </Flex>\n    );\n  },\n);\n\n(\n  DataTableTableActions as typeof DataTableTableActions & {\n    displayName: string;\n  }\n).displayName = 'DataTable.TableActions';\n"],
+  "mappings": "AAgDM;AAhDN,SAAS,kBAA+C;AAExD,SAAS,kCAAkC;AAK3C,SAAS,YAAY;AAcd,SAAS,gBACd,OACmD;AACnD,SAAO,OAAO,SAAS;AACzB;AAMO,MAAM,wBAAwB;AAAA,EACnC,CACE,OACA,iBACwB;AACxB,UAAM;AAAA,MACJ;AAAA,MACA,eAAe;AAAA,MACf,WAAW;AAAA,MACX,OAAO;AAAA,MACP,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,gBAAe;AAAA,QACf,YAAW;AAAA,QACX,UAAS;AAAA,QACT,KAAK;AAAA,QACL,eAAa;AAAA,QACb,WAAW;AAAA,QACX,OAAO;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAGE,sBAGA,cAAc;",
   "names": []
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/ColumnOrderDragHandle.tsx"],
-  "sourcesContent": ["import { useSortable } from '@dnd-kit/sortable';\nimport clsx from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { DragAllDirectionIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './ColumnOrderSettingsDragAndDrop.sty.js';\nimport { Button } from '../../../../../../buttons/button/Button.js';\nimport { useFocusContext as _useFocusContext } from '../../../../../../core/hooks/useFocusContext.js';\nimport { focusRingCSS } from '../../../../../../core/styles/focusRing.sty.js';\nimport { dataTableMessages } from '../../../../messages.js';\n\n/**\n * A drag handle for columns in the column settings.\n * @internal\n */\nexport const ColumnOrderDragHandle = ({\n  columnKey,\n  columnId,\n  isDraggingActive,\n}: {\n  /**\n   * The unique key of the column.\n   */\n  columnKey: string;\n  /**\n   * The id of the column.\n   */\n  columnId: string;\n  /**\n   * Whether dragging is currently active.\n   */\n  isDraggingActive: boolean;\n}) => {\n  const intl = useIntl();\n  const { modality } = _useFocusContext();\n  const { attributes, listeners } = useSortable({ id: columnKey });\n\n  const isKeyboardDragging = isDraggingActive && modality === 'keyboard';\n  const localColumnDragHandleLabel = intl.formatMessage(\n    dataTableMessages.columnSettingsDragAndDropLabel,\n    { columnId: columnId },\n  );\n\n  return (\n    <Button\n      size=\"condensed\"\n      variant=\"default\"\n      {...attributes}\n      {...listeners}\n      aria-label={localColumnDragHandleLabel}\n      className={clsx(\n        styles.columnDndHandle,\n        isKeyboardDragging &&\n          focusRingCSS({ minimal: false, color: 'neutral' }),\n      )}\n    >\n      <Button.Prefix>\n        <DragAllDirectionIcon />\n      </Button.Prefix>\n    </Button>\n  );\n};\n"],
-  "mappings": "AA0DQ;AA1DR,SAAS,mBAAmB;AAC5B,OAAO,UAAU;AACjB,SAAS,eAAe;AAExB,SAAS,4BAA4B;AAErC,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,mBAAmB,wBAAwB;AACpD,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAM3B,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AACF,MAaM;AACJ,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,SAAS,IAAI,iBAAiB;AACtC,QAAM,EAAE,YAAY,UAAU,IAAI,YAAY,EAAE,IAAI,UAAU,CAAC;AAE/D,QAAM,qBAAqB,oBAAoB,aAAa;AAC5D,QAAM,6BAA6B,KAAK;AAAA,IACtC,kBAAkB;AAAA,IAClB,EAAE,SAAmB;AAAA,EACvB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAQ;AAAA,MACP,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,cAAY;AAAA,MACZ,WAAW;AAAA,QACT,OAAO;AAAA,QACP,sBACE,aAAa,EAAE,SAAS,OAAO,OAAO,UAAU,CAAC;AAAA,MACrD;AAAA,MAEA,8BAAC,OAAO,QAAP,EACC,8BAAC,wBAAqB,GACxB;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { useSortable } from '@dnd-kit/sortable';\nimport clsx from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { DragAllDirectionIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './ColumnOrderSettingsDragAndDrop.sty.js';\nimport { Button } from '../../../../../../buttons/button/Button.js';\nimport { useFocusContext as _useFocusContext } from '../../../../../../core/hooks/useFocusContext.js';\nimport { focusRingCSS } from '../../../../../../core/styles/focusRing.sty.js';\nimport { dataTableMessages } from '../../../../messages.js';\n\n/**\n * A drag handle for columns in the column settings.\n * @internal\n */\nexport const ColumnOrderDragHandle = ({\n  columnKey,\n  columnId,\n  isDraggingActive,\n}: {\n  /**\n   * The unique key of the column.\n   */\n  columnKey: string;\n  /**\n   * The id of the column.\n   */\n  columnId: string;\n  /**\n   * Whether dragging is currently active.\n   */\n  isDraggingActive: boolean;\n}) => {\n  const intl = useIntl();\n  const { modality } = _useFocusContext();\n  const { attributes, listeners } = useSortable({ id: columnKey });\n\n  const isKeyboardDragging = isDraggingActive && modality === 'keyboard';\n  const localColumnDragHandleLabel = intl.formatMessage(\n    dataTableMessages.columnSettingsDragAndDropLabel,\n    { columnId: columnId },\n  );\n\n  return (\n    <Button\n      size=\"condensed\"\n      variant=\"default\"\n      {...attributes}\n      {...listeners}\n      aria-label={localColumnDragHandleLabel}\n      className={clsx(\n        styles.columnDndHandle,\n        isKeyboardDragging &&\n          focusRingCSS({ minimal: false, color: 'neutral' }),\n      )}\n      data-dt-name=\"ColumnSettingsDragAndDropHandle\"\n    >\n      <Button.Prefix>\n        <DragAllDirectionIcon />\n      </Button.Prefix>\n    </Button>\n  );\n};\n"],
+  "mappings": "AA2DQ;AA3DR,SAAS,mBAAmB;AAC5B,OAAO,UAAU;AACjB,SAAS,eAAe;AAExB,SAAS,4BAA4B;AAErC,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,mBAAmB,wBAAwB;AACpD,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAM3B,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AACF,MAaM;AACJ,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,SAAS,IAAI,iBAAiB;AACtC,QAAM,EAAE,YAAY,UAAU,IAAI,YAAY,EAAE,IAAI,UAAU,CAAC;AAE/D,QAAM,qBAAqB,oBAAoB,aAAa;AAC5D,QAAM,6BAA6B,KAAK;AAAA,IACtC,kBAAkB;AAAA,IAClB,EAAE,SAAmB;AAAA,EACvB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAQ;AAAA,MACP,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,cAAY;AAAA,MACZ,WAAW;AAAA,QACT,OAAO;AAAA,QACP,sBACE,aAAa,EAAE,SAAS,OAAO,OAAO,UAAU,CAAC;AAAA,MACrD;AAAA,MACA,gBAAa;AAAA,MAEb,8BAAC,OAAO,QAAP,EACC,8BAAC,wBAAqB,GACxB;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/esm/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/esm/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/ColumnOrderSettingsDragAndDrop.sty.js

@@ -1,7 +1,7 @@
 import "./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";
 export {
   columnDndHandle,
   columnDndOverlay,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/ColumnOrderSettingsDragAndDrop.css.ts"],
-  "sourcesContent": ["import './ColumnOrderSettingsDragAndDrop.css';\nexport var columnDndHandle = '_11d1m5j1-3-0-1';\nexport var columnDndOverlay = '_11d1m5j0-3-0-1';\nexport var disabledNonTargetLocalColumn = '_11d1m5j2-3-0-1';"],
+  "sourcesContent": ["import './ColumnOrderSettingsDragAndDrop.css';\nexport var columnDndHandle = '_11d1m5j1-3-1-0';\nexport var columnDndOverlay = '_11d1m5j0-3-1-0';\nexport var disabledNonTargetLocalColumn = '_11d1m5j2-3-1-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,mBAAmB;AACvB,IAAI,+BAA+B;",
   "names": []
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/ColumnPinningMenu.tsx"],
-  "sourcesContent": ["import { JSX } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { PinIcon } from '@dynatrace/strato-icons';\n\nimport type { ColumnListItem } from './column-settings-types.js';\nimport { Button } from '../../../../../buttons/button/Button.js';\nimport { Menu } from '../../../../../navigation/menu/Menu.js';\nimport { Tooltip } from '../../../../../overlays/tooltip/Tooltip.js';\nimport { pinColumns } from '../../../features/ColumnPinning/column-pinning-utils.js';\nimport { dataTableMessages } from '../../../messages.js';\nimport type {\n  ColumnPinningPosition,\n  ColumnPinningState,\n} from '../../../tanstack-table-core-override/src/index.js';\n\ninterface ColumnPinningMenuProps {\n  /**\n   * The column to render the pinning menu for.\n   */\n  column: ColumnListItem;\n  /**\n   * The ordered flat columns, grouped by pinning position.\n   */\n  orderedFlatColumns: {\n    left: ColumnListItem[];\n    center: ColumnListItem[];\n    right: ColumnListItem[];\n  };\n  /**\n   * The column pinning state in the settings modal.\n   */\n  localColumnPinning: ColumnPinningState;\n  /**\n   * Callback to update the pinning state in the settings modal.\n   */\n  updateLocalColumnPinning: (newState: ColumnPinningState) => void;\n}\n\n/**\n * Menu component for pinning/unpinning columns in the DataTable column settings.\n * @internal\n */\nexport const ColumnPinningMenu = (\n  props: ColumnPinningMenuProps,\n): JSX.Element => {\n  const {\n    column,\n    orderedFlatColumns,\n    localColumnPinning,\n    updateLocalColumnPinning,\n  } = props;\n\n  const intl = useIntl();\n  const columnId = column.id;\n  const pinnedPosition = column.pinned;\n  const pinningLabel = intl.formatMessage(dataTableMessages.pinColumnLabel, {\n    isUnpinned: pinnedPosition === false,\n  });\n\n  /**\n   * Returns all columns that belong to the same pinning region as the current column.\n   * If the current column is not pinned, the function returns the unpinned (\"center\") columns.\n   *\n   * @returns An array of columns from the same pinning region (left, right, or unpinned).\n   */\n  function getColumnsInSamePinningRegion(): ColumnListItem[] {\n    const position = pinnedPosition === false ? 'center' : pinnedPosition;\n    return orderedFlatColumns[position];\n  }\n\n  /**\n   * Returns the ID of the current column or, if it has nested columns,\n   * the IDs of its nested child columns in the same pinning region (left, right, or unpinned).\n   *\n   * @returns An array of column IDs that should be pinned or unpinned together.\n   */\n  function getIdsToPin(): string[] {\n    const hasNestedColumns = column.columns.length;\n    if (!hasNestedColumns) {\n      return [columnId];\n    }\n\n    const idsToPin: string[] = [];\n    const columns = getColumnsInSamePinningRegion();\n\n    // find parent column\n    // use key instead of ID, as the same parent (with same ID) can appear multiple times,\n    // even within the same pinned area\n    const startIndex = columns.findIndex((col) => col.key === column.key);\n    if (startIndex < 0) {\n      return [];\n    }\n    // get first nested child\n    let index = startIndex + 1;\n    let current = columns.at(index);\n    // collect all adjacent children\n    while (current?.parent?.id === columnId) {\n      idsToPin.push(current.id);\n      index++;\n      current = columns.at(index);\n    }\n    return idsToPin;\n  }\n\n  const pin = (position: ColumnPinningPosition): void => {\n    const idsToPin = getIdsToPin();\n    const newState = pinColumns(idsToPin, localColumnPinning, position);\n    updateLocalColumnPinning(newState);\n  };\n\n  return (\n    <Tooltip text={pinningLabel} placement=\"right\">\n      <Menu>\n        <Menu.Trigger>\n          <Button size=\"condensed\" aria-label={pinningLabel}>\n            <Button.Prefix>\n              <PinIcon />\n            </Button.Prefix>\n          </Button>\n        </Menu.Trigger>\n        <Menu.Content>\n          {pinnedPosition !== 'left' && (\n            <Menu.Item onSelect={() => pin('left')}>\n              <FormattedMessage {...dataTableMessages.pinColumnLeftLabel} />\n            </Menu.Item>\n          )}\n          {pinnedPosition !== 'right' && (\n            <Menu.Item onSelect={() => pin('right')}>\n              <FormattedMessage {...dataTableMessages.pinColumnRightLabel} />\n            </Menu.Item>\n          )}\n          {pinnedPosition !== false && (\n            <Menu.Item onSelect={() => pin(false)}>\n              <FormattedMessage {...dataTableMessages.unpinColumnLabel} />\n            </Menu.Item>\n          )}\n        </Menu.Content>\n      </Menu>\n    </Tooltip>\n  );\n};\n"],
-  "mappings": "AAqHc,cAIN,YAJM;AApHd,SAAS,kBAAkB,eAAe;AAE1C,SAAS,eAAe;AAGxB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAiC3B,MAAM,oBAAoB,CAC/B,UACgB;AAChB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,OAAO,QAAQ;AACrB,QAAM,WAAW,OAAO;AACxB,QAAM,iBAAiB,OAAO;AAC9B,QAAM,eAAe,KAAK,cAAc,kBAAkB,gBAAgB;AAAA,IACxE,YAAY,mBAAmB;AAAA,EACjC,CAAC;AAQD,WAAS,gCAAkD;AACzD,UAAM,WAAW,mBAAmB,QAAQ,WAAW;AACvD,WAAO,mBAAmB,QAAQ;AAAA,EACpC;AAQA,WAAS,cAAwB;AAC/B,UAAM,mBAAmB,OAAO,QAAQ;AACxC,QAAI,CAAC,kBAAkB;AACrB,aAAO,CAAC,QAAQ;AAAA,IAClB;AAEA,UAAM,WAAqB,CAAC;AAC5B,UAAM,UAAU,8BAA8B;AAK9C,UAAM,aAAa,QAAQ,UAAU,CAAC,QAAQ,IAAI,QAAQ,OAAO,GAAG;AACpE,QAAI,aAAa,GAAG;AAClB,aAAO,CAAC;AAAA,IACV;AAEA,QAAI,QAAQ,aAAa;AACzB,QAAI,UAAU,QAAQ,GAAG,KAAK;AAE9B,WAAO,SAAS,QAAQ,OAAO,UAAU;AACvC,eAAS,KAAK,QAAQ,EAAE;AACxB;AACA,gBAAU,QAAQ,GAAG,KAAK;AAAA,IAC5B;AACA,WAAO;AAAA,EACT;AAEA,QAAM,MAAM,CAAC,aAA0C;AACrD,UAAM,WAAW,YAAY;AAC7B,UAAM,WAAW,WAAW,UAAU,oBAAoB,QAAQ;AAClE,6BAAyB,QAAQ;AAAA,EACnC;AAEA,SACE,oBAAC,WAAQ,MAAM,cAAc,WAAU,SACrC,+BAAC,QACC;AAAA,wBAAC,KAAK,SAAL,EACC,8BAAC,UAAO,MAAK,aAAY,cAAY,cACnC,8BAAC,OAAO,QAAP,EACC,8BAAC,WAAQ,GACX,GACF,GACF;AAAA,IACA,qBAAC,KAAK,SAAL,EACE;AAAA,yBAAmB,UAClB,oBAAC,KAAK,MAAL,EAAU,UAAU,MAAM,IAAI,MAAM,GACnC,8BAAC,oBAAkB,GAAG,kBAAkB,oBAAoB,GAC9D;AAAA,MAED,mBAAmB,WAClB,oBAAC,KAAK,MAAL,EAAU,UAAU,MAAM,IAAI,OAAO,GACpC,8BAAC,oBAAkB,GAAG,kBAAkB,qBAAqB,GAC/D;AAAA,MAED,mBAAmB,SAClB,oBAAC,KAAK,MAAL,EAAU,UAAU,MAAM,IAAI,KAAK,GAClC,8BAAC,oBAAkB,GAAG,kBAAkB,kBAAkB,GAC5D;AAAA,OAEJ;AAAA,KACF,GACF;AAEJ;",
+  "sourcesContent": ["import { JSX } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { PinIcon } from '@dynatrace/strato-icons';\n\nimport type { ColumnListItem } from './column-settings-types.js';\nimport { Button } from '../../../../../buttons/button/Button.js';\nimport { Menu } from '../../../../../navigation/menu/Menu.js';\nimport { Tooltip } from '../../../../../overlays/tooltip/Tooltip.js';\nimport { pinColumns } from '../../../features/ColumnPinning/column-pinning-utils.js';\nimport { dataTableMessages } from '../../../messages.js';\nimport type {\n  ColumnPinningPosition,\n  ColumnPinningState,\n} from '../../../tanstack-table-core-override/src/index.js';\n\ninterface ColumnPinningMenuProps {\n  /**\n   * The column to render the pinning menu for.\n   */\n  column: ColumnListItem;\n  /**\n   * The ordered flat columns, grouped by pinning position.\n   */\n  orderedFlatColumns: {\n    left: ColumnListItem[];\n    center: ColumnListItem[];\n    right: ColumnListItem[];\n  };\n  /**\n   * The column pinning state in the settings modal.\n   */\n  localColumnPinning: ColumnPinningState;\n  /**\n   * Callback to update the pinning state in the settings modal.\n   */\n  updateLocalColumnPinning: (newState: ColumnPinningState) => void;\n}\n\n/**\n * Menu component for pinning/unpinning columns in the DataTable column settings.\n * @internal\n */\nexport const ColumnPinningMenu = (\n  props: ColumnPinningMenuProps,\n): JSX.Element => {\n  const {\n    column,\n    orderedFlatColumns,\n    localColumnPinning,\n    updateLocalColumnPinning,\n  } = props;\n\n  const intl = useIntl();\n  const columnId = column.id;\n  const pinnedPosition = column.pinned;\n  const pinningLabel = intl.formatMessage(dataTableMessages.pinColumnLabel, {\n    isUnpinned: pinnedPosition === false,\n  });\n\n  /**\n   * Returns all columns that belong to the same pinning region as the current column.\n   * If the current column is not pinned, the function returns the unpinned (\"center\") columns.\n   *\n   * @returns An array of columns from the same pinning region (left, right, or unpinned).\n   */\n  function getColumnsInSamePinningRegion(): ColumnListItem[] {\n    const position = pinnedPosition === false ? 'center' : pinnedPosition;\n    return orderedFlatColumns[position];\n  }\n\n  /**\n   * Returns the ID of the current column or, if it has nested columns,\n   * the IDs of its nested child columns in the same pinning region (left, right, or unpinned).\n   *\n   * @returns An array of column IDs that should be pinned or unpinned together.\n   */\n  function getIdsToPin(): string[] {\n    const hasNestedColumns = column.columns.length;\n    if (!hasNestedColumns) {\n      return [columnId];\n    }\n\n    const idsToPin: string[] = [];\n    const columns = getColumnsInSamePinningRegion();\n\n    // find parent column\n    // use key instead of ID, as the same parent (with same ID) can appear multiple times,\n    // even within the same pinned area\n    const startIndex = columns.findIndex((col) => col.key === column.key);\n    if (startIndex < 0) {\n      return [];\n    }\n    // get first nested child\n    let index = startIndex + 1;\n    let current = columns.at(index);\n    // collect all adjacent children\n    while (current?.parent?.id === columnId) {\n      idsToPin.push(current.id);\n      index++;\n      current = columns.at(index);\n    }\n    return idsToPin;\n  }\n\n  const pin = (position: ColumnPinningPosition): void => {\n    const idsToPin = getIdsToPin();\n    const newState = pinColumns(idsToPin, localColumnPinning, position);\n    updateLocalColumnPinning(newState);\n  };\n\n  return (\n    <Tooltip text={pinningLabel} placement=\"right\">\n      <Menu>\n        <Menu.Trigger>\n          <Button size=\"condensed\" aria-label={pinningLabel}>\n            <Button.Prefix>\n              <PinIcon />\n            </Button.Prefix>\n          </Button>\n        </Menu.Trigger>\n        <Menu.Content>\n          {pinnedPosition !== 'left' && (\n            <Menu.Item\n              onSelect={() => pin('left')}\n              data-dt-name=\"ColumnSettingsPinLeft\"\n            >\n              <FormattedMessage {...dataTableMessages.pinColumnLeftLabel} />\n            </Menu.Item>\n          )}\n          {pinnedPosition !== 'right' && (\n            <Menu.Item\n              onSelect={() => pin('right')}\n              data-dt-name=\"ColumnSettingsPinRight\"\n            >\n              <FormattedMessage {...dataTableMessages.pinColumnRightLabel} />\n            </Menu.Item>\n          )}\n          {pinnedPosition !== false && (\n            <Menu.Item\n              onSelect={() => pin(false)}\n              data-dt-name=\"ColumnSettingsUnpin\"\n            >\n              <FormattedMessage {...dataTableMessages.unpinColumnLabel} />\n            </Menu.Item>\n          )}\n        </Menu.Content>\n      </Menu>\n    </Tooltip>\n  );\n};\n"],
+  "mappings": "AAqHc,cAIN,YAJM;AApHd,SAAS,kBAAkB,eAAe;AAE1C,SAAS,eAAe;AAGxB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAiC3B,MAAM,oBAAoB,CAC/B,UACgB;AAChB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,OAAO,QAAQ;AACrB,QAAM,WAAW,OAAO;AACxB,QAAM,iBAAiB,OAAO;AAC9B,QAAM,eAAe,KAAK,cAAc,kBAAkB,gBAAgB;AAAA,IACxE,YAAY,mBAAmB;AAAA,EACjC,CAAC;AAQD,WAAS,gCAAkD;AACzD,UAAM,WAAW,mBAAmB,QAAQ,WAAW;AACvD,WAAO,mBAAmB,QAAQ;AAAA,EACpC;AAQA,WAAS,cAAwB;AAC/B,UAAM,mBAAmB,OAAO,QAAQ;AACxC,QAAI,CAAC,kBAAkB;AACrB,aAAO,CAAC,QAAQ;AAAA,IAClB;AAEA,UAAM,WAAqB,CAAC;AAC5B,UAAM,UAAU,8BAA8B;AAK9C,UAAM,aAAa,QAAQ,UAAU,CAAC,QAAQ,IAAI,QAAQ,OAAO,GAAG;AACpE,QAAI,aAAa,GAAG;AAClB,aAAO,CAAC;AAAA,IACV;AAEA,QAAI,QAAQ,aAAa;AACzB,QAAI,UAAU,QAAQ,GAAG,KAAK;AAE9B,WAAO,SAAS,QAAQ,OAAO,UAAU;AACvC,eAAS,KAAK,QAAQ,EAAE;AACxB;AACA,gBAAU,QAAQ,GAAG,KAAK;AAAA,IAC5B;AACA,WAAO;AAAA,EACT;AAEA,QAAM,MAAM,CAAC,aAA0C;AACrD,UAAM,WAAW,YAAY;AAC7B,UAAM,WAAW,WAAW,UAAU,oBAAoB,QAAQ;AAClE,6BAAyB,QAAQ;AAAA,EACnC;AAEA,SACE,oBAAC,WAAQ,MAAM,cAAc,WAAU,SACrC,+BAAC,QACC;AAAA,wBAAC,KAAK,SAAL,EACC,8BAAC,UAAO,MAAK,aAAY,cAAY,cACnC,8BAAC,OAAO,QAAP,EACC,8BAAC,WAAQ,GACX,GACF,GACF;AAAA,IACA,qBAAC,KAAK,SAAL,EACE;AAAA,yBAAmB,UAClB;AAAA,QAAC,KAAK;AAAA,QAAL;AAAA,UACC,UAAU,MAAM,IAAI,MAAM;AAAA,UAC1B,gBAAa;AAAA,UAEb,8BAAC,oBAAkB,GAAG,kBAAkB,oBAAoB;AAAA;AAAA,MAC9D;AAAA,MAED,mBAAmB,WAClB;AAAA,QAAC,KAAK;AAAA,QAAL;AAAA,UACC,UAAU,MAAM,IAAI,OAAO;AAAA,UAC3B,gBAAa;AAAA,UAEb,8BAAC,oBAAkB,GAAG,kBAAkB,qBAAqB;AAAA;AAAA,MAC/D;AAAA,MAED,mBAAmB,SAClB;AAAA,QAAC,KAAK;AAAA,QAAL;AAAA,UACC,UAAU,MAAM,IAAI,KAAK;AAAA,UACzB,gBAAa;AAAA,UAEb,8BAAC,oBAAkB,GAAG,kBAAkB,kBAAkB;AAAA;AAAA,MAC5D;AAAA,OAEJ;AAAA,KACF,GACF;AAEJ;",
   "names": []
 }

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

@@ -4,6 +4,12 @@ import { Checkbox } from "../../../../../forms/checkbox/Checkbox.js";
 import { getColumnLabel } from "../../../../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 = getColumnLabel(column);
   return /* @__PURE__ */ jsx(
     Checkbox,
@@ -16,6 +22,7 @@ const ColumnVisibilityCheckbox = (props) => {
         }
       },
       className: styles.columnName,
+      "data-dt-name": dataDtName,
       children: columnName
     }
   );

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/ColumnVisibilityCheckbox.tsx"],
-  "sourcesContent": ["import { JSX } from 'react';\n\nimport * as styles from './DataTableColumnsListItem.sty.js';\nimport { Checkbox } from '../../../../../forms/checkbox/Checkbox.js';\nimport { getColumnLabel } from '../../../../utils/get-column-label.js';\nimport type { Column } from '../../../hooks/useTable/types.js';\n\ninterface ColumnVisibilityCheckboxProps {\n  /**\n   * The column to render the checkbox for.\n   */\n  column: Column<unknown, unknown>;\n  /**\n   * Whether visibility can be changed for this column.\n   */\n  enableCheckbox: boolean;\n  /**\n   * The current visibility state of the column.\n   */\n  currentState: boolean | 'indeterminate';\n  /**\n   * Callback when the checkbox is clicked and visibility of the column changes.\n   */\n  onVisibilityChange: (\n    column: Column<unknown, unknown>,\n    currentVisibility: boolean | 'indeterminate',\n  ) => void;\n}\n\n/**\n * Checkbox component for toggling column visibility in the DataTable column settings.\n * @internal\n */\nexport const ColumnVisibilityCheckbox = (\n  props: ColumnVisibilityCheckboxProps,\n): JSX.Element => {\n  const { column, enableCheckbox, currentState, onVisibilityChange } = props;\n\n  const columnName = getColumnLabel(column);\n  return (\n    <Checkbox\n      value={currentState}\n      aria-disabled={!enableCheckbox}\n      onChange={() => {\n        if (enableCheckbox) {\n          onVisibilityChange(column, currentState);\n        }\n      }}\n      className={styles.columnName}\n    >\n      {columnName}\n    </Checkbox>\n  );\n};\n"],
-  "mappings": "AAwCI;AAtCJ,YAAY,YAAY;AACxB,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AA6BxB,MAAM,2BAA2B,CACtC,UACgB;AAChB,QAAM,EAAE,QAAQ,gBAAgB,cAAc,mBAAmB,IAAI;AAErE,QAAM,aAAa,eAAe,MAAM;AACxC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,iBAAe,CAAC;AAAA,MAChB,UAAU,MAAM;AACd,YAAI,gBAAgB;AAClB,6BAAmB,QAAQ,YAAY;AAAA,QACzC;AAAA,MACF;AAAA,MACA,WAAW,OAAO;AAAA,MAEjB;AAAA;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["import { JSX } from 'react';\n\nimport * as styles from './DataTableColumnsListItem.sty.js';\nimport { Checkbox } from '../../../../../forms/checkbox/Checkbox.js';\nimport { getColumnLabel } from '../../../../utils/get-column-label.js';\nimport type { Column } from '../../../hooks/useTable/types.js';\n\ninterface ColumnVisibilityCheckboxProps {\n  /**\n   * The column to render the checkbox for.\n   */\n  column: Column<unknown, unknown>;\n  /**\n   * Whether visibility can be changed for this column.\n   */\n  enableCheckbox: boolean;\n  /**\n   * The current visibility state of the column.\n   */\n  currentState: boolean | 'indeterminate';\n  /**\n   * Callback when the checkbox is clicked and visibility of the column changes.\n   */\n  onVisibilityChange: (\n    column: Column<unknown, unknown>,\n    currentVisibility: boolean | 'indeterminate',\n  ) => void;\n}\n\n/**\n * Checkbox component for toggling column visibility in the DataTable column settings.\n * @internal\n */\nexport const ColumnVisibilityCheckbox = (\n  props: ColumnVisibilityCheckboxProps,\n): JSX.Element => {\n  const { column, enableCheckbox, currentState, onVisibilityChange } = props;\n\n  let dataDtName = 'ColumnVisibilityShowColumn';\n  if (currentState === true) {\n    dataDtName = 'ColumnVisibilityHideColumn';\n  } else if (currentState === 'indeterminate') {\n    dataDtName = 'ColumnVisibilityShowColumns';\n  }\n\n  const columnName = getColumnLabel(column);\n  return (\n    <Checkbox\n      value={currentState}\n      aria-disabled={!enableCheckbox}\n      onChange={() => {\n        if (enableCheckbox) {\n          onVisibilityChange(column, currentState);\n        }\n      }}\n      className={styles.columnName}\n      data-dt-name={dataDtName}\n    >\n      {columnName}\n    </Checkbox>\n  );\n};\n"],
+  "mappings": "AA+CI;AA7CJ,YAAY,YAAY;AACxB,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AA6BxB,MAAM,2BAA2B,CACtC,UACgB;AAChB,QAAM,EAAE,QAAQ,gBAAgB,cAAc,mBAAmB,IAAI;AAErE,MAAI,aAAa;AACjB,MAAI,iBAAiB,MAAM;AACzB,iBAAa;AAAA,EACf,WAAW,iBAAiB,iBAAiB;AAC3C,iBAAa;AAAA,EACf;AAEA,QAAM,aAAa,eAAe,MAAM;AACxC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,iBAAe,CAAC;AAAA,MAChB,UAAU,MAAM;AACd,YAAI,gBAAgB;AAClB,6BAAmB,QAAQ,YAAY;AAAA,QACzC;AAAA,MACF;AAAA,MACA,WAAW,OAAO;AAAA,MAClB,gBAAc;AAAA,MAEb;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

package/esm/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/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.sty.js

@@ -1,8 +1,8 @@
 import "./DataTableColumnsList.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var noItemsFound = "_14dz1ui0-3-0-1";
-var virtualizationInnerContainer = "_14dz1ui4-3-0-1";
-var virtualizationScrollContainer = _7a468({ 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 = _7a468({ defaultClassName: "_14dz1ui1-3-1-0", variantClassNames: { hasFilter: { true: "_14dz1ui2-3-1-0", false: "_14dz1ui3-3-1-0" } }, defaultVariants: { hasFilter: false }, compoundVariants: [] });
 export {
   noItemsFound,
   virtualizationInnerContainer,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.css.ts"],
-  "sourcesContent": ["import './DataTableColumnsList.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var noItemsFound = '_14dz1ui0-3-0-1';\nexport var virtualizationInnerContainer = '_14dz1ui4-3-0-1';\nexport var virtualizationScrollContainer = _7a468({defaultClassName:'_14dz1ui1-3-0-1',variantClassNames:{hasFilter:{true:'_14dz1ui2-3-0-1',false:'_14dz1ui3-3-0-1'}},defaultVariants:{hasFilter:false},compoundVariants:[]});"],
+  "sourcesContent": ["import './DataTableColumnsList.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var noItemsFound = '_14dz1ui0-3-1-0';\nexport var virtualizationInnerContainer = '_14dz1ui4-3-1-0';\nexport var virtualizationScrollContainer = _7a468({defaultClassName:'_14dz1ui1-3-1-0',variantClassNames:{hasFilter:{true:'_14dz1ui2-3-1-0',false:'_14dz1ui3-3-1-0'}},defaultVariants:{hasFilter:false},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe;AACnB,IAAI,+BAA+B;AACnC,IAAI,gCAAgC,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,WAAU,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,WAAU,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/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/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsListItem.sty.js

@@ -1,7 +1,7 @@
 import "./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";
 export {
   columnName,
   columnsListItem,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsListItem.css.ts"],
-  "sourcesContent": ["import './DataTableColumnsListItem.css';\nexport var columnName = '_13ypmcy2-3-0-1';\nexport var columnsListItem = '_13ypmcy0-3-0-1';\nexport var dragging = '_13ypmcy1-3-0-1';"],
+  "sourcesContent": ["import './DataTableColumnsListItem.css';\nexport var columnName = '_13ypmcy2-3-1-0';\nexport var columnsListItem = '_13ypmcy0-3-1-0';\nexport var dragging = '_13ypmcy1-3-1-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,aAAa;AACjB,IAAI,kBAAkB;AACtB,IAAI,WAAW;",
   "names": []
 }

package/esm/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/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableVisibilityFilterControls.js

@@ -44,6 +44,7 @@ const DataTableVisibilityFilterControls = (props) => {
   if (!showFilterControl && !showVisibilityControl) {
     return null;
   }
+  const dataDtName = showHideAllState === true ? "ColumnSettingsHideAll" : "ColumnSettingsShowAll";
   return /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -57,6 +58,7 @@ const DataTableVisibilityFilterControls = (props) => {
             value: showHideAllState,
             onChange: onShowHideAllChange,
             className: styles.showHideAll,
+            "data-dt-name": dataDtName,
             children: intl.formatMessage(dataTableMessages.showHideAll)
           }
         ),
@@ -68,7 +70,8 @@ const DataTableVisibilityFilterControls = (props) => {
             ),
             className: styles.searchInput,
             onChange,
-            value: filterValue
+            value: filterValue,
+            "data-dt-name": "ColumnSettingsFilter"
           }
         )
       ]

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/DataTableVisibilityFilterControls.tsx"],
-  "sourcesContent": ["import { debounce } from 'lodash-es';\nimport {\n  type Dispatch,\n  type SetStateAction,\n  type JSX,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\n\nimport * as styles from './DataTableVisibilityFilterControls.sty.js';\nimport { Checkbox } from '../../../../../forms/checkbox/Checkbox.js';\nimport { SearchInput } from '../../../../../forms/search-input/SearchInput.js';\nimport { Flex } from '../../../../../layouts/flex/Flex.js';\nimport { dataTableMessages } from '../../../messages.js';\n\n/** Debounce time (ms) for search input in column settings modal. */\nconst SEARCH_DEBOUNCE_TIME_MS = 300;\n\ninterface DataTableVisibilityFilterControlsProps {\n  /** Updates the current value of the filter. */\n  setActiveFilterValue: Dispatch<SetStateAction<string>>;\n  /** Determines whether all columns are currently visible. */\n  showHideAllState: boolean | 'indeterminate';\n  /** Callback that is called when the visibility of all columns changes. */\n  onShowHideAllChange: () => void;\n  /** Determines whether to show the show/hide all columns checkbox. */\n  showVisibilityControl: boolean;\n  /** Determines whether to show the search input for filtering columns. */\n  showFilterControl: boolean;\n}\n\n/**\n * Content of the area above the columns list in the ColumnSettingsModal.\n * - a checkbox indicating whether all columns are visible and\n * - a search input for filtering the listed columns in the column settings modal. Filtering is debounced with 300ms.\n * @internal\n */\nexport const DataTableVisibilityFilterControls = (\n  props: DataTableVisibilityFilterControlsProps,\n): JSX.Element | null => {\n  const {\n    setActiveFilterValue,\n    showHideAllState,\n    onShowHideAllChange,\n    showVisibilityControl,\n    showFilterControl,\n  } = props;\n\n  const intl = useIntl();\n  const [filterValue, setFilterValue] = useState('');\n\n  const debouncedUpdateRef = useRef(\n    debounce((value: string, setter: Dispatch<SetStateAction<string>>) => {\n      setter(value);\n    }, SEARCH_DEBOUNCE_TIME_MS),\n  );\n\n  const onChange = useCallback(\n    (value: string) => {\n      setFilterValue(value);\n      debouncedUpdateRef.current(value, setActiveFilterValue);\n    },\n    [setActiveFilterValue],\n  );\n\n  useEffect(() => {\n    const debouncedUpdate = debouncedUpdateRef.current;\n    return () => {\n      debouncedUpdate.cancel();\n    };\n  }, []);\n\n  if (!showFilterControl && !showVisibilityControl) {\n    return null;\n  }\n\n  return (\n    <Flex\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      className={styles.filterControls}\n    >\n      {showVisibilityControl && (\n        <Checkbox\n          value={showHideAllState}\n          onChange={onShowHideAllChange}\n          className={styles.showHideAll}\n        >\n          {intl.formatMessage(dataTableMessages.showHideAll)}\n        </Checkbox>\n      )}\n      {showFilterControl && (\n        <SearchInput\n          placeholder={intl.formatMessage(\n            dataTableMessages.searchBarPlaceholder,\n          )}\n          className={styles.searchInput}\n          onChange={onChange}\n          value={filterValue}\n        />\n      )}\n    </Flex>\n  );\n};\n"],
-  "mappings": "AAiFI,SAMI,KANJ;AAjFJ,SAAS,gBAAgB;AACzB;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,eAAe;AAGxB,YAAY,YAAY;AACxB,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,YAAY;AACrB,SAAS,yBAAyB;AAGlC,MAAM,0BAA0B;AAqBzB,MAAM,oCAAoC,CAC/C,UACuB;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,OAAO,QAAQ;AACrB,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AAEjD,QAAM,qBAAqB;AAAA,IACzB,SAAS,CAAC,OAAe,WAA6C;AACpE,aAAO,KAAK;AAAA,IACd,GAAG,uBAAuB;AAAA,EAC5B;AAEA,QAAM,WAAW;AAAA,IACf,CAAC,UAAkB;AACjB,qBAAe,KAAK;AACpB,yBAAmB,QAAQ,OAAO,oBAAoB;AAAA,IACxD;AAAA,IACA,CAAC,oBAAoB;AAAA,EACvB;AAEA,YAAU,MAAM;AACd,UAAM,kBAAkB,mBAAmB;AAC3C,WAAO,MAAM;AACX,sBAAgB,OAAO;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC,qBAAqB,CAAC,uBAAuB;AAChD,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAe;AAAA,MACf,YAAW;AAAA,MACX,WAAW,OAAO;AAAA,MAEjB;AAAA,iCACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU;AAAA,YACV,WAAW,OAAO;AAAA,YAEjB,eAAK,cAAc,kBAAkB,WAAW;AAAA;AAAA,QACnD;AAAA,QAED,qBACC;AAAA,UAAC;AAAA;AAAA,YACC,aAAa,KAAK;AAAA,cAChB,kBAAkB;AAAA,YACpB;AAAA,YACA,WAAW,OAAO;AAAA,YAClB;AAAA,YACA,OAAO;AAAA;AAAA,QACT;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
+  "sourcesContent": ["import { debounce } from 'lodash-es';\nimport {\n  type Dispatch,\n  type SetStateAction,\n  type JSX,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './DataTableVisibilityFilterControls.sty.js';\nimport { Checkbox } from '../../../../../forms/checkbox/Checkbox.js';\nimport { SearchInput } from '../../../../../forms/search-input/SearchInput.js';\nimport { Flex } from '../../../../../layouts/flex/Flex.js';\nimport { dataTableMessages } from '../../../messages.js';\n\n/** Debounce time (ms) for search input in column settings modal. */\nconst SEARCH_DEBOUNCE_TIME_MS = 300;\n\ninterface DataTableVisibilityFilterControlsProps {\n  /** Updates the current value of the filter. */\n  setActiveFilterValue: Dispatch<SetStateAction<string>>;\n  /** Determines whether all columns are currently visible. */\n  showHideAllState: boolean | 'indeterminate';\n  /** Callback that is called when the visibility of all columns changes. */\n  onShowHideAllChange: () => void;\n  /** Determines whether to show the show/hide all columns checkbox. */\n  showVisibilityControl: boolean;\n  /** Determines whether to show the search input for filtering columns. */\n  showFilterControl: boolean;\n}\n\n/**\n * Content of the area above the columns list in the ColumnSettingsModal.\n * - a checkbox indicating whether all columns are visible and\n * - a search input for filtering the listed columns in the column settings modal. Filtering is debounced with 300ms.\n * @internal\n */\nexport const DataTableVisibilityFilterControls = (\n  props: DataTableVisibilityFilterControlsProps,\n): JSX.Element | null => {\n  const {\n    setActiveFilterValue,\n    showHideAllState,\n    onShowHideAllChange,\n    showVisibilityControl,\n    showFilterControl,\n  } = props;\n\n  const intl = useIntl();\n  const [filterValue, setFilterValue] = useState('');\n\n  const debouncedUpdateRef = useRef(\n    debounce((value: string, setter: Dispatch<SetStateAction<string>>) => {\n      setter(value);\n    }, SEARCH_DEBOUNCE_TIME_MS),\n  );\n\n  const onChange = useCallback(\n    (value: string) => {\n      setFilterValue(value);\n      debouncedUpdateRef.current(value, setActiveFilterValue);\n    },\n    [setActiveFilterValue],\n  );\n\n  useEffect(() => {\n    const debouncedUpdate = debouncedUpdateRef.current;\n    return () => {\n      debouncedUpdate.cancel();\n    };\n  }, []);\n\n  if (!showFilterControl && !showVisibilityControl) {\n    return null;\n  }\n\n  const dataDtName =\n    showHideAllState === true\n      ? 'ColumnSettingsHideAll'\n      : 'ColumnSettingsShowAll';\n\n  return (\n    <Flex\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      className={styles.filterControls}\n    >\n      {showVisibilityControl && (\n        <Checkbox\n          value={showHideAllState}\n          onChange={onShowHideAllChange}\n          className={styles.showHideAll}\n          data-dt-name={dataDtName}\n        >\n          {intl.formatMessage(dataTableMessages.showHideAll)}\n        </Checkbox>\n      )}\n      {showFilterControl && (\n        <SearchInput\n          placeholder={intl.formatMessage(\n            dataTableMessages.searchBarPlaceholder,\n          )}\n          className={styles.searchInput}\n          onChange={onChange}\n          value={filterValue}\n          data-dt-name=\"ColumnSettingsFilter\"\n        />\n      )}\n    </Flex>\n  );\n};\n"],
+  "mappings": "AAqFI,SAMI,KANJ;AArFJ,SAAS,gBAAgB;AACzB;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,eAAe;AAExB,YAAY,YAAY;AACxB,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,YAAY;AACrB,SAAS,yBAAyB;AAGlC,MAAM,0BAA0B;AAqBzB,MAAM,oCAAoC,CAC/C,UACuB;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,OAAO,QAAQ;AACrB,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AAEjD,QAAM,qBAAqB;AAAA,IACzB,SAAS,CAAC,OAAe,WAA6C;AACpE,aAAO,KAAK;AAAA,IACd,GAAG,uBAAuB;AAAA,EAC5B;AAEA,QAAM,WAAW;AAAA,IACf,CAAC,UAAkB;AACjB,qBAAe,KAAK;AACpB,yBAAmB,QAAQ,OAAO,oBAAoB;AAAA,IACxD;AAAA,IACA,CAAC,oBAAoB;AAAA,EACvB;AAEA,YAAU,MAAM;AACd,UAAM,kBAAkB,mBAAmB;AAC3C,WAAO,MAAM;AACX,sBAAgB,OAAO;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC,qBAAqB,CAAC,uBAAuB;AAChD,WAAO;AAAA,EACT;AAEA,QAAM,aACJ,qBAAqB,OACjB,0BACA;AAEN,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAe;AAAA,MACf,YAAW;AAAA,MACX,WAAW,OAAO;AAAA,MAEjB;AAAA,iCACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU;AAAA,YACV,WAAW,OAAO;AAAA,YAClB,gBAAc;AAAA,YAEb,eAAK,cAAc,kBAAkB,WAAW;AAAA;AAAA,QACnD;AAAA,QAED,qBACC;AAAA,UAAC;AAAA;AAAA,YACC,aAAa,KAAK;AAAA,cAChB,kBAAkB;AAAA,YACpB;AAAA,YACA,WAAW,OAAO;AAAA,YAClB;AAAA,YACA,OAAO;AAAA,YACP,gBAAa;AAAA;AAAA,QACf;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
   "names": []
 }

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

@@ -1,8 +1,8 @@
 import "../../../../../overlays/modal/Modal.css";
 import "./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";
 export {
   filterControls,
   searchInput,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/DataTableVisibilityFilterControls.css.ts"],
-  "sourcesContent": ["import '../../../../../overlays/modal/Modal.css';\nimport './DataTableVisibilityFilterControls.css';\nexport var filterControls = '_1rh6hs02-3-0-1';\nexport var searchInput = '_1rh6hs01-3-0-1';\nexport var showHideAll = '_1rh6hs00-3-0-1';"],
+  "sourcesContent": ["import '../../../../../overlays/modal/Modal.css';\nimport './DataTableVisibilityFilterControls.css';\nexport var filterControls = '_1rh6hs02-3-1-0';\nexport var searchInput = '_1rh6hs01-3-1-0';\nexport var showHideAll = '_1rh6hs00-3-1-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,iBAAiB;AACrB,IAAI,cAAc;AAClB,IAAI,cAAc;",
   "names": []
 }

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

@@ -9,6 +9,7 @@ import { DataTableColumnSettings } from "./ColumnSettings/DataTableColumnSetting
 import { DataTableColumnSettingsTrigger } from "./ColumnSettings/DataTableColumnSettingsTrigger.js";
 import { DataTableColumnVisibilitySettings } from "./ColumnSettings/DataTableColumnVisibilitySettings.js";
 import { DataTableToolbarMenu } from "./DataTableToolbarMenu.js";
+import { useBehavioralTrackingProps } from "../../../../core/hooks/useBehavioralTrackingProps.js";
 import {
   Intent
 } from "../../../../core/slots/Intent/Intent.js";
@@ -47,6 +48,7 @@ function getToolbarConfig(children) {
     } else if (isSlot(child, DataTableDownload)) {
       slots.downloadData = true;
       toolbarItemProps.downloadExcludedColumns = child.props?.excludeColumns;
+      toolbarItemProps.onDownloadData = child.props?.onDownloadData;
     } else if (isSlot(child, DataTableGlobalLineWrapAction)) {
       slots.globalLineWrap = true;
     } else if (isSlot(child, Intent)) {
@@ -66,6 +68,7 @@ const DataTableToolbar = forwardRef(
       style: consumerStyle,
       ...remainingProps
     } = props;
+    const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
     const { slots, toolbarItemProps } = getToolbarConfig(children);
     if (Children.count(children) === 0) {
       return null;
@@ -83,7 +86,8 @@ const DataTableToolbar = forwardRef(
           gridArea: "1 / 2 / 2 / 2",
           ...consumerStyle
         },
-        ...remainingProps,
+        ...behavioralTrackingProps,
+        ...restProps,
         children: [
           (slots.visibilitySettings || slots.columnOrderSettings || slots.columnPinningSettings) && /* @__PURE__ */ jsx(
             DataTableColumnSettings,