@dynatrace/strato-components 3.8.0 → 3.9.0

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-8-0';\nexport var virtualizationInnerContainer = '_14dz1uib-3-8-0';\nexport var virtualizationScrollContainer = _7a468({defaultClassName:'_14dz1ui2-3-8-0',variantClassNames:{hasFilter:{true:'_14dz1ui3-3-8-0',false:'_14dz1ui4-3-8-0'},hasMessage:{true:'_14dz1ui5-3-8-0',false:'_14dz1ui6-3-8-0'}},defaultVariants:{hasFilter:false,hasMessage:false},compoundVariants:[[{hasFilter:false,hasMessage:false},'_14dz1ui7-3-8-0'],[{hasFilter:true,hasMessage:false},'_14dz1ui8-3-8-0'],[{hasFilter:false,hasMessage:true},'_14dz1ui9-3-8-0'],[{hasFilter:true,hasMessage:true},'_14dz1uia-3-8-0']]});"],
-  "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,GAAE,YAAW,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,WAAU,OAAM,YAAW,MAAK,GAAE,kBAAiB,CAAC,CAAC,EAAC,WAAU,OAAM,YAAW,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,WAAU,MAAK,YAAW,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,WAAU,OAAM,YAAW,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,WAAU,MAAK,YAAW,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;",
+  "sourcesContent": ["import './DataTableColumnsList.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var noItemsFound = '_14dz1ui0-3-9-0';\nexport var virtualizationInnerContainer = '_14dz1uid-3-9-0';\nexport var virtualizationScrollContainer = _7a468({defaultClassName:'_14dz1ui2-3-9-0',variantClassNames:{hasFilter:{true:'_14dz1ui3-3-9-0',false:'_14dz1ui4-3-9-0'},hasMessage:{true:'_14dz1ui5-3-9-0',false:'_14dz1ui6-3-9-0'},hasPinnedColumns:{true:'_14dz1ui7-3-9-0',false:'_14dz1ui8-3-9-0'}},defaultVariants:{hasFilter:false,hasMessage:false,hasPinnedColumns:false},compoundVariants:[[{hasFilter:false,hasMessage:false},'_14dz1ui9-3-9-0'],[{hasFilter:true,hasMessage:false},'_14dz1uia-3-9-0'],[{hasFilter:false,hasMessage:true},'_14dz1uib-3-9-0'],[{hasFilter:true,hasMessage:true},'_14dz1uic-3-9-0']]});"],
+  "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,GAAE,YAAW,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,kBAAiB,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,WAAU,OAAM,YAAW,OAAM,kBAAiB,MAAK,GAAE,kBAAiB,CAAC,CAAC,EAAC,WAAU,OAAM,YAAW,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,WAAU,MAAK,YAAW,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,WAAU,OAAM,YAAW,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,WAAU,MAAK,YAAW,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

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

@@ -1,27 +1,45 @@
-._13ypmcy0-3-8-0 {
+._13ypmcy0-3-9-0 {
+  position: relative;
   flex: 0 1 auto;
   word-break: break-all;
   padding-top: var(--dt-spacings-size-4, 4px);
   padding-bottom: var(--dt-spacings-size-4, 4px);
-  padding-right: var(--dt-spacings-size-4, 4px);
-  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);
+  border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) transparent;
+}
+._13ypmcy0-3-9-0[data-parentcolumnid] {
+  padding-left: var(--dt-spacings-size-28, 28px);
 }
-._13ypmcy0-3-8-0[data-parentcolumnid] {
-  padding-left: var(--dt-spacings-size-20, 20px);
+._13ypmcy0-3-9-0[data-pinned-position]:not([data-parentcolumnid]) {
+  padding-left: var(--dt-spacings-size-8, 8px);
 }
-._13ypmcy0-3-8-0:last-child, ._13ypmcy0-3-8-0:not([data-pinned-position="right"]):has(+ [data-pinned-position="right"]) {
-  border-bottom: none;
+._13ypmcy0-3-9-0::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: calc(-1 * var(--dt-borders-width-default, 1px));
+  height: var(--dt-borders-width-default, 1px);
+  background-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._13ypmcy0-3-8-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-9-0:has(+ [data-parentcolumnid])::after {
+  left: var(--dt-spacings-size-28, 28px);
 }
-._13ypmcy0-3-8-0[data-pinned-position="right"]:not([data-pinned-position="right"] + ._13ypmcy0-3-8-0, [data-pinned-position="left"] + ._13ypmcy0-3-8-0) {
-  border-top: var(--dt-borders-width-emphasized, 2px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
+._13ypmcy1-3-9-0::after {
+  display: none;
 }
-._13ypmcy1-3-8-0 {
+._13ypmcy2-3-9-0 {
   visibility: hidden;
 }
-._13ypmcy2-3-8-0 {
+._13ypmcy3-3-9-0 {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+._13ypmcy4-3-9-0 {
   padding: var(--dt-spacings-size-2, 2px) 0;
+}
+._13ypmcy5-3-9-0 {
+  padding-left: var(--dt-spacings-size-8, 8px);
+}
+._13ypmcy6-3-9-0 {
+  color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }

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

@@ -2,29 +2,35 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useSortable } from "@dnd-kit/sortable";
 import clsx from "clsx";
 import { memo, useRef } from "react";
+import { useIntl } from "react-intl";
 import { ColumnOrderDragHandle } from "./ColumnOrderSettings/ColumnOrderDragHandle.js";
 import { ColumnPinningMenu } from "./ColumnPinningMenu.js";
-import { ColumnVisibilityCheckbox } from "./ColumnVisibilityCheckbox.js";
+import { ColumnVisibilityToggle } from "./ColumnVisibilityToggle.js";
 import * as styles from "./DataTableColumnsListItem.sty.js";
+import { Chip } from "../../../../../content/chip/Chip.js";
 import { useMergeRefs } from "../../../../../core/hooks/useMergeRefs.js";
 import { Flex } from "../../../../../layouts/flex/Flex.js";
 import { getColumnLabel } from "../../../../utils/get-column-label.js";
+import { dataTableMessages } from "../../../messages.js";
 function InternalDataTableColumnsListItem(props) {
   const {
     columnIndex,
     orderedFlatColumns,
-    showVisibilityCheckbox,
-    enableVisibilityCheckbox,
+    showVisibilityToggle,
+    enableVisibilityToggle,
     currentVisibilityState,
     onVisibilityChange,
     showColumnOrderDragHandle,
     showColumnPinningMenu,
     localColumnPinning,
     updateLocalColumnPinning,
+    isLastInSection,
     virtualIndex,
     measureElement
   } = props;
+  const intl = useIntl();
   const columnName = getColumnLabel(props.column);
+  const isHidden = currentVisibilityState === false;
   const localColumnRef = useRef(null);
   const { setNodeRef, isDragging } = useSortable({
     id: props.column.key,
@@ -47,22 +53,14 @@ function InternalDataTableColumnsListItem(props) {
       justifyContent: "space-between",
       alignItems: "center",
       className: clsx("strato-table-settings-item", styles.columnsListItem, {
-        [styles.dragging]: isDragging
+        [styles.dragging]: isDragging,
+        [styles.lastInSection]: isLastInSection
       }),
       style: {
         gridRowStart: virtualIndex + 1
       },
       children: [
-        showVisibilityCheckbox ? /* @__PURE__ */ jsx(
-          ColumnVisibilityCheckbox,
-          {
-            column: props.column,
-            enableCheckbox: enableVisibilityCheckbox,
-            currentState: currentVisibilityState,
-            onVisibilityChange
-          }
-        ) : /* @__PURE__ */ jsx("div", { className: styles.columnName, children: columnName }),
-        /* @__PURE__ */ jsxs(Flex, { gap: 4, children: [
+        /* @__PURE__ */ jsxs(Flex, { gap: 4, alignItems: "center", className: styles.columnNameContainer, children: [
           showColumnOrderDragHandle && /* @__PURE__ */ jsx(
             ColumnOrderDragHandle,
             {
@@ -71,6 +69,32 @@ function InternalDataTableColumnsListItem(props) {
               isDraggingActive: isDragging
             }
           ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx(styles.columnName, {
+                [styles.columnNameSubdued]: (
+                  // subdue the label when the column is hidden or its visibility toggle is disabled
+                  isHidden || showVisibilityToggle && !enableVisibilityToggle
+                ),
+                [styles.columnNameIndented]: !showColumnOrderDragHandle && props.column.parent !== void 0
+              }),
+              children: columnName
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Flex, { gap: 4, alignItems: "center", children: [
+          isHidden && /* @__PURE__ */ jsx(Chip, { children: intl.formatMessage(dataTableMessages.columnHiddenChipLabel) }),
+          showVisibilityToggle && /* @__PURE__ */ jsx(
+            ColumnVisibilityToggle,
+            {
+              column: props.column,
+              columnLabel: columnName,
+              enableToggle: enableVisibilityToggle,
+              currentState: currentVisibilityState,
+              onVisibilityChange
+            }
+          ),
           showColumnPinningMenu && /* @__PURE__ */ jsx(
             ColumnPinningMenu,
             {
@@ -88,7 +112,7 @@ function InternalDataTableColumnsListItem(props) {
 const DataTableColumnsListItem = memo(
   InternalDataTableColumnsListItem,
   (prevProps, nextProps) => {
-    return prevProps.column.key === nextProps.column.key && prevProps.columnIndex === nextProps.columnIndex && prevProps.showVisibilityCheckbox === nextProps.showVisibilityCheckbox && prevProps.enableVisibilityCheckbox === nextProps.enableVisibilityCheckbox && prevProps.currentVisibilityState === nextProps.currentVisibilityState && prevProps.showColumnOrderDragHandle === nextProps.showColumnOrderDragHandle && prevProps.showColumnPinningMenu === nextProps.showColumnPinningMenu && prevProps.localColumnPinning === nextProps.localColumnPinning && prevProps.virtualIndex === nextProps.virtualIndex;
+    return prevProps.column.key === nextProps.column.key && prevProps.columnIndex === nextProps.columnIndex && prevProps.showVisibilityToggle === nextProps.showVisibilityToggle && prevProps.enableVisibilityToggle === nextProps.enableVisibilityToggle && prevProps.currentVisibilityState === nextProps.currentVisibilityState && prevProps.showColumnOrderDragHandle === nextProps.showColumnOrderDragHandle && prevProps.showColumnPinningMenu === nextProps.showColumnPinningMenu && prevProps.localColumnPinning === nextProps.localColumnPinning && prevProps.isLastInSection === nextProps.isLastInSection && prevProps.virtualIndex === nextProps.virtualIndex;
   }
 );
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsListItem.tsx"],
-  "sourcesContent": ["import { useSortable } from '@dnd-kit/sortable';\nimport type {\n  ColumnPinningState,\n  Column,\n  TableFeatures,\n  RowData,\n} from '@tanstack/react-table';\nimport clsx from 'clsx';\nimport { memo, useRef } from 'react';\n\nimport type { ColumnListItem } from './column-settings-types.js';\nimport { ColumnOrderDragHandle } from './ColumnOrderSettings/ColumnOrderDragHandle.js';\nimport { ColumnPinningMenu } from './ColumnPinningMenu.js';\nimport { ColumnVisibilityCheckbox } from './ColumnVisibilityCheckbox.js';\nimport * as styles from './DataTableColumnsListItem.sty.js';\nimport { useMergeRefs } from '../../../../../core/hooks/useMergeRefs.js';\nimport { Flex } from '../../../../../layouts/flex/Flex.js';\nimport { getColumnLabel } from '../../../../utils/get-column-label.js';\n\ninterface DataTableColumnsListItemProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> {\n  /**\n   * The column to render in the list.\n   */\n  column: ColumnListItem<TFeatures, TData>;\n  /**\n   * The index of the column in the list.\n   */\n  columnIndex: number;\n  /**\n   * The ordered flat columns, grouped by pinning position.\n   */\n  orderedFlatColumns: {\n    left: ColumnListItem<TFeatures, TData>[];\n    center: ColumnListItem<TFeatures, TData>[];\n    right: ColumnListItem<TFeatures, TData>[];\n  };\n  /**\n   * Whether the visibility settings are enabled and a checkbox should be shown.\n   */\n  showVisibilityCheckbox: boolean;\n  /**\n   * Whether visibility can be changed for this column.\n   */\n  enableVisibilityCheckbox: boolean;\n  /**\n   * The current visibility state of the column.\n   */\n  currentVisibilityState: boolean | 'indeterminate';\n  /**\n   * Callback when the checkbox is clicked and visibility of the column changes.\n   */\n  onVisibilityChange: (\n    column: Column<TFeatures, TData>,\n    currentVisibility: boolean | 'indeterminate',\n  ) => void;\n  /**\n   * Whether the column order settings are enabled and a drag handle should be shown.\n   */\n  showColumnOrderDragHandle: boolean;\n  /**\n   * Whether buttons to pin/unpin the column should be shown.\n   */\n  showColumnPinningMenu: boolean;\n  /**\n   * The local column pinning state.\n   */\n  localColumnPinning: ColumnPinningState;\n  /**\n   * Callback to update the local column pinning state.\n   */\n  updateLocalColumnPinning: (newState: ColumnPinningState) => void;\n  /**\n   * The virtual index for grid row positioning.\n   */\n  virtualIndex: number;\n  /**\n   * Callback to measure the element for virtualization.\n   */\n  measureElement: (element: Element | null) => void;\n}\n\n/**\n * A single column item in the column settings list.\n */\nfunction InternalDataTableColumnsListItem<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(props: Readonly<DataTableColumnsListItemProps<TFeatures, TData>>) {\n  const {\n    columnIndex,\n    orderedFlatColumns,\n    showVisibilityCheckbox,\n    enableVisibilityCheckbox,\n    currentVisibilityState,\n    onVisibilityChange,\n    showColumnOrderDragHandle,\n    showColumnPinningMenu,\n    localColumnPinning,\n    updateLocalColumnPinning,\n    virtualIndex,\n    measureElement,\n  } = props;\n\n  const columnName = getColumnLabel(props.column);\n\n  //#region ordering\n  const localColumnRef = useRef<HTMLDivElement>(null);\n  const { setNodeRef, isDragging } = useSortable({\n    id: props.column.key,\n    data: {\n      column: props.column,\n      columnId: props.column.id,\n      columnIndex,\n      localColumnRef,\n    },\n  });\n\n  const mergedRefs = useMergeRefs([localColumnRef, setNodeRef, measureElement]);\n  //#endregion\n\n  return (\n    <Flex\n      data-index={virtualIndex}\n      data-columnid={props.column.id}\n      data-parentcolumnid={props.column.parent?.id}\n      data-pinned-position={\n        props.column.pinned === false ? undefined : props.column.pinned\n      }\n      ref={mergedRefs}\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      className={clsx('strato-table-settings-item', styles.columnsListItem, {\n        [styles.dragging]: isDragging,\n      })}\n      style={{\n        gridRowStart: virtualIndex + 1,\n      }}\n    >\n      {showVisibilityCheckbox ? (\n        <ColumnVisibilityCheckbox\n          column={props.column}\n          enableCheckbox={enableVisibilityCheckbox}\n          currentState={currentVisibilityState}\n          onVisibilityChange={onVisibilityChange}\n        />\n      ) : (\n        <div className={styles.columnName}>{columnName}</div>\n      )}\n      <Flex gap={4}>\n        {showColumnOrderDragHandle && (\n          <ColumnOrderDragHandle\n            columnId={props.column.id}\n            columnKey={props.column.key}\n            isDraggingActive={isDragging}\n          />\n        )}\n        {showColumnPinningMenu && (\n          <ColumnPinningMenu\n            column={props.column}\n            orderedFlatColumns={orderedFlatColumns}\n            localColumnPinning={localColumnPinning}\n            updateLocalColumnPinning={updateLocalColumnPinning}\n          />\n        )}\n      </Flex>\n    </Flex>\n  );\n}\n\nexport const DataTableColumnsListItem = memo(\n  InternalDataTableColumnsListItem,\n  (prevProps, nextProps) => {\n    // Custom props comparison to only re-render when relevant props change.\n    // Avoids unnecessary re-renders of all items, e.g. when the orderedFlatColumns prop changes.\n    return (\n      prevProps.column.key === nextProps.column.key &&\n      prevProps.columnIndex === nextProps.columnIndex &&\n      prevProps.showVisibilityCheckbox === nextProps.showVisibilityCheckbox &&\n      prevProps.enableVisibilityCheckbox ===\n        nextProps.enableVisibilityCheckbox &&\n      prevProps.currentVisibilityState === nextProps.currentVisibilityState &&\n      prevProps.showColumnOrderDragHandle ===\n        nextProps.showColumnOrderDragHandle &&\n      prevProps.showColumnPinningMenu === nextProps.showColumnPinningMenu &&\n      prevProps.localColumnPinning === nextProps.localColumnPinning &&\n      prevProps.virtualIndex === nextProps.virtualIndex\n    );\n  },\n);\n"],
-  "mappings": "AA8IQ,cASF,YATE;AA9IR,SAAS,mBAAmB;AAO5B,OAAO,UAAU;AACjB,SAAS,MAAM,cAAc;AAG7B,SAAS,6BAA6B;AACtC,SAAS,yBAAyB;AAClC,SAAS,gCAAgC;AACzC,YAAY,YAAY;AACxB,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,sBAAsB;AAsE/B,SAAS,iCAGP,OAAkE;AAClE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,aAAa,eAAe,MAAM,MAAM;AAG9C,QAAM,iBAAiB,OAAuB,IAAI;AAClD,QAAM,EAAE,YAAY,WAAW,IAAI,YAAY;AAAA,IAC7C,IAAI,MAAM,OAAO;AAAA,IACjB,MAAM;AAAA,MACJ,QAAQ,MAAM;AAAA,MACd,UAAU,MAAM,OAAO;AAAA,MACvB;AAAA,MACA;AAAA,IACF;AAAA,EACF,CAAC;AAED,QAAM,aAAa,aAAa,CAAC,gBAAgB,YAAY,cAAc,CAAC;AAG5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ,iBAAe,MAAM,OAAO;AAAA,MAC5B,uBAAqB,MAAM,OAAO,QAAQ;AAAA,MAC1C,wBACE,MAAM,OAAO,WAAW,QAAQ,SAAY,MAAM,OAAO;AAAA,MAE3D,KAAK;AAAA,MACL,gBAAe;AAAA,MACf,YAAW;AAAA,MACX,WAAW,KAAK,8BAA8B,OAAO,iBAAiB;AAAA,QACpE,CAAC,OAAO,QAAQ,GAAG;AAAA,MACrB,CAAC;AAAA,MACD,OAAO;AAAA,QACL,cAAc,eAAe;AAAA,MAC/B;AAAA,MAEC;AAAA,iCACC;AAAA,UAAC;AAAA;AAAA,YACC,QAAQ,MAAM;AAAA,YACd,gBAAgB;AAAA,YAChB,cAAc;AAAA,YACd;AAAA;AAAA,QACF,IAEA,oBAAC,SAAI,WAAW,OAAO,YAAa,sBAAW;AAAA,QAEjD,qBAAC,QAAK,KAAK,GACR;AAAA,uCACC;AAAA,YAAC;AAAA;AAAA,cACC,UAAU,MAAM,OAAO;AAAA,cACvB,WAAW,MAAM,OAAO;AAAA,cACxB,kBAAkB;AAAA;AAAA,UACpB;AAAA,UAED,yBACC;AAAA,YAAC;AAAA;AAAA,cACC,QAAQ,MAAM;AAAA,cACd;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;AAEO,MAAM,2BAA2B;AAAA,EACtC;AAAA,EACA,CAAC,WAAW,cAAc;AAGxB,WACE,UAAU,OAAO,QAAQ,UAAU,OAAO,OAC1C,UAAU,gBAAgB,UAAU,eACpC,UAAU,2BAA2B,UAAU,0BAC/C,UAAU,6BACR,UAAU,4BACZ,UAAU,2BAA2B,UAAU,0BAC/C,UAAU,8BACR,UAAU,6BACZ,UAAU,0BAA0B,UAAU,yBAC9C,UAAU,uBAAuB,UAAU,sBAC3C,UAAU,iBAAiB,UAAU;AAAA,EAEzC;AACF;",
+  "sourcesContent": ["import { useSortable } from '@dnd-kit/sortable';\nimport type {\n  ColumnPinningState,\n  Column,\n  TableFeatures,\n  RowData,\n} from '@tanstack/react-table';\nimport clsx from 'clsx';\nimport { memo, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport type { ColumnListItem } from './column-settings-types.js';\nimport { ColumnOrderDragHandle } from './ColumnOrderSettings/ColumnOrderDragHandle.js';\nimport { ColumnPinningMenu } from './ColumnPinningMenu.js';\nimport { ColumnVisibilityToggle } from './ColumnVisibilityToggle.js';\nimport * as styles from './DataTableColumnsListItem.sty.js';\nimport { Chip } from '../../../../../content/chip/Chip.js';\nimport { useMergeRefs } from '../../../../../core/hooks/useMergeRefs.js';\nimport { Flex } from '../../../../../layouts/flex/Flex.js';\nimport { getColumnLabel } from '../../../../utils/get-column-label.js';\nimport { dataTableMessages } from '../../../messages.js';\n\ninterface DataTableColumnsListItemProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> {\n  /**\n   * The column to render in the list.\n   */\n  column: ColumnListItem<TFeatures, TData>;\n  /**\n   * The index of the column in the list.\n   */\n  columnIndex: number;\n  /**\n   * The ordered flat columns, grouped by pinning position.\n   */\n  orderedFlatColumns: {\n    left: ColumnListItem<TFeatures, TData>[];\n    center: ColumnListItem<TFeatures, TData>[];\n    right: ColumnListItem<TFeatures, TData>[];\n  };\n  /**\n   * Whether the visibility settings are enabled and a visibility toggle should be shown.\n   */\n  showVisibilityToggle: boolean;\n  /**\n   * Whether visibility can be changed for this column.\n   */\n  enableVisibilityToggle: boolean;\n  /**\n   * The current visibility state of the column.\n   */\n  currentVisibilityState: boolean | 'indeterminate';\n  /**\n   * Callback when the checkbox is clicked and visibility of the column changes.\n   */\n  onVisibilityChange: (\n    column: Column<TFeatures, TData>,\n    currentVisibility: boolean | 'indeterminate',\n  ) => void;\n  /**\n   * Whether the column order settings are enabled and a drag handle should be shown.\n   */\n  showColumnOrderDragHandle: boolean;\n  /**\n   * Whether buttons to pin/unpin the column should be shown.\n   */\n  showColumnPinningMenu: boolean;\n  /**\n   * The local column pinning state.\n   */\n  localColumnPinning: ColumnPinningState;\n  /**\n   * Callback to update the local column pinning state.\n   */\n  updateLocalColumnPinning: (newState: ColumnPinningState) => void;\n  /**\n   * Whether this is the last item of its (pinned/unpinned) section. Used to\n   * omit the separator line at section boundaries.\n   */\n  isLastInSection: boolean;\n  /**\n   * The virtual index for grid row positioning.\n   */\n  virtualIndex: number;\n  /**\n   * Callback to measure the element for virtualization.\n   */\n  measureElement: (element: Element | null) => void;\n}\n\n/**\n * A single column item in the column settings list.\n */\nfunction InternalDataTableColumnsListItem<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(props: Readonly<DataTableColumnsListItemProps<TFeatures, TData>>) {\n  const {\n    columnIndex,\n    orderedFlatColumns,\n    showVisibilityToggle,\n    enableVisibilityToggle,\n    currentVisibilityState,\n    onVisibilityChange,\n    showColumnOrderDragHandle,\n    showColumnPinningMenu,\n    localColumnPinning,\n    updateLocalColumnPinning,\n    isLastInSection,\n    virtualIndex,\n    measureElement,\n  } = props;\n\n  const intl = useIntl();\n  const columnName = getColumnLabel(props.column);\n  const isHidden = currentVisibilityState === false;\n\n  //#region ordering\n  const localColumnRef = useRef<HTMLDivElement>(null);\n  const { setNodeRef, isDragging } = useSortable({\n    id: props.column.key,\n    data: {\n      column: props.column,\n      columnId: props.column.id,\n      columnIndex,\n      localColumnRef,\n    },\n  });\n\n  const mergedRefs = useMergeRefs([localColumnRef, setNodeRef, measureElement]);\n  //#endregion\n\n  return (\n    <Flex\n      data-index={virtualIndex}\n      data-columnid={props.column.id}\n      data-parentcolumnid={props.column.parent?.id}\n      data-pinned-position={\n        props.column.pinned === false ? undefined : props.column.pinned\n      }\n      ref={mergedRefs}\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      className={clsx('strato-table-settings-item', styles.columnsListItem, {\n        [styles.dragging]: isDragging,\n        [styles.lastInSection]: isLastInSection,\n      })}\n      style={{\n        gridRowStart: virtualIndex + 1,\n      }}\n    >\n      <Flex gap={4} alignItems=\"center\" className={styles.columnNameContainer}>\n        {showColumnOrderDragHandle && (\n          <ColumnOrderDragHandle\n            columnId={props.column.id}\n            columnKey={props.column.key}\n            isDraggingActive={isDragging}\n          />\n        )}\n        <div\n          className={clsx(styles.columnName, {\n            [styles.columnNameSubdued]:\n              // subdue the label when the column is hidden or its visibility toggle is disabled\n              isHidden || (showVisibilityToggle && !enableVisibilityToggle),\n            [styles.columnNameIndented]:\n              !showColumnOrderDragHandle && props.column.parent !== undefined,\n          })}\n        >\n          {columnName}\n        </div>\n      </Flex>\n      <Flex gap={4} alignItems=\"center\">\n        {isHidden && (\n          <Chip>\n            {intl.formatMessage(dataTableMessages.columnHiddenChipLabel)}\n          </Chip>\n        )}\n        {showVisibilityToggle && (\n          <ColumnVisibilityToggle\n            column={props.column}\n            columnLabel={columnName}\n            enableToggle={enableVisibilityToggle}\n            currentState={currentVisibilityState}\n            onVisibilityChange={onVisibilityChange}\n          />\n        )}\n        {showColumnPinningMenu && (\n          <ColumnPinningMenu\n            column={props.column}\n            orderedFlatColumns={orderedFlatColumns}\n            localColumnPinning={localColumnPinning}\n            updateLocalColumnPinning={updateLocalColumnPinning}\n          />\n        )}\n      </Flex>\n    </Flex>\n  );\n}\n\nexport const DataTableColumnsListItem = memo(\n  InternalDataTableColumnsListItem,\n  (prevProps, nextProps) => {\n    // Custom props comparison to only re-render when relevant props change.\n    // Avoids unnecessary re-renders of all items, e.g. when the orderedFlatColumns prop changes.\n    return (\n      prevProps.column.key === nextProps.column.key &&\n      prevProps.columnIndex === nextProps.columnIndex &&\n      prevProps.showVisibilityToggle === nextProps.showVisibilityToggle &&\n      prevProps.enableVisibilityToggle === nextProps.enableVisibilityToggle &&\n      prevProps.currentVisibilityState === nextProps.currentVisibilityState &&\n      prevProps.showColumnOrderDragHandle ===\n        nextProps.showColumnOrderDragHandle &&\n      prevProps.showColumnPinningMenu === nextProps.showColumnPinningMenu &&\n      prevProps.localColumnPinning === nextProps.localColumnPinning &&\n      prevProps.isLastInSection === nextProps.isLastInSection &&\n      prevProps.virtualIndex === nextProps.virtualIndex\n    );\n  },\n);\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,10 +1,18 @@
 import "./DataTableColumnsListItem.css";
-var columnName = "_13ypmcy2-3-8-0";
-var columnsListItem = "_13ypmcy0-3-8-0";
-var dragging = "_13ypmcy1-3-8-0";
+var columnName = "_13ypmcy4-3-9-0";
+var columnNameContainer = "_13ypmcy3-3-9-0";
+var columnNameIndented = "_13ypmcy5-3-9-0";
+var columnNameSubdued = "_13ypmcy6-3-9-0";
+var columnsListItem = "_13ypmcy0-3-9-0";
+var dragging = "_13ypmcy2-3-9-0";
+var lastInSection = "_13ypmcy1-3-9-0";
 export {
   columnName,
+  columnNameContainer,
+  columnNameIndented,
+  columnNameSubdued,
   columnsListItem,
-  dragging
+  dragging,
+  lastInSection
 };
 //# sourceMappingURL=DataTableColumnsListItem.sty.js.map

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-8-0';\nexport var columnsListItem = '_13ypmcy0-3-8-0';\nexport var dragging = '_13ypmcy1-3-8-0';"],
-  "mappings": "AAAA,OAAO;AACA,IAAI,aAAa;AACjB,IAAI,kBAAkB;AACtB,IAAI,WAAW;",
+  "sourcesContent": ["import './DataTableColumnsListItem.css';\nexport var columnName = '_13ypmcy4-3-9-0';\nexport var columnNameContainer = '_13ypmcy3-3-9-0';\nexport var columnNameIndented = '_13ypmcy5-3-9-0';\nexport var columnNameSubdued = '_13ypmcy6-3-9-0';\nexport var columnsListItem = '_13ypmcy0-3-9-0';\nexport var dragging = '_13ypmcy2-3-9-0';\nexport var lastInSection = '_13ypmcy1-3-9-0';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,aAAa;AACjB,IAAI,sBAAsB;AAC1B,IAAI,qBAAqB;AACzB,IAAI,oBAAoB;AACxB,IAAI,kBAAkB;AACtB,IAAI,WAAW;AACf,IAAI,gBAAgB;",
   "names": []
 }

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

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

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

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { useIntl } from "react-intl";
+import * as styles from "./DataTableColumnsSectionHeader.sty.js";
+import { Text } from "../../../../../typography/text/Text.js";
+import { dataTableMessages } from "../../../messages.js";
+const sectionMessages = {
+  left: dataTableMessages.columnSettingsSectionPinnedLeft,
+  right: dataTableMessages.columnSettingsSectionPinnedRight,
+  false: dataTableMessages.columnSettingsSectionUnpinned
+};
+function DataTableColumnsSectionHeader(props) {
+  const { position, virtualIndex, measureElement } = props;
+  const intl = useIntl();
+  const label = sectionMessages[`${position}`];
+  return /* @__PURE__ */ jsx(
+    "h3",
+    {
+      ref: measureElement,
+      "data-index": virtualIndex,
+      className: styles.sectionHeader,
+      style: { gridRowStart: virtualIndex + 1 },
+      children: /* @__PURE__ */ jsx(Text, { textStyle: "small-emphasized", className: styles.sectionHeaderLabel, children: intl.formatMessage(label) })
+    }
+  );
+}
+export {
+  DataTableColumnsSectionHeader
+};
+//# sourceMappingURL=DataTableColumnsSectionHeader.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsSectionHeader.tsx"],
+  "sourcesContent": ["import type { ColumnPinningPosition } from '@tanstack/react-table';\nimport { type JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './DataTableColumnsSectionHeader.sty.js';\nimport { Text } from '../../../../../typography/text/Text.js';\nimport { dataTableMessages } from '../../../messages.js';\n\nconst sectionMessages = {\n  left: dataTableMessages.columnSettingsSectionPinnedLeft,\n  right: dataTableMessages.columnSettingsSectionPinnedRight,\n  false: dataTableMessages.columnSettingsSectionUnpinned,\n} as const;\n\ninterface DataTableColumnsSectionHeaderProps {\n  /**\n   * The section the header labels.\n   */\n  position: ColumnPinningPosition;\n  /**\n   * The virtual index for grid row positioning.\n   */\n  virtualIndex: number;\n  /**\n   * Callback to measure the element for virtualization.\n   */\n  measureElement: (element: Element | null) => void;\n}\n\n/**\n * Section header row in the column settings list, labeling the pinned/unpinned\n * groups of columns.\n * @internal\n */\nexport function DataTableColumnsSectionHeader(\n  props: Readonly<DataTableColumnsSectionHeaderProps>,\n): JSX.Element {\n  const { position, virtualIndex, measureElement } = props;\n  const intl = useIntl();\n  const label = sectionMessages[`${position}`];\n\n  return (\n    <h3\n      ref={measureElement}\n      data-index={virtualIndex}\n      className={styles.sectionHeader}\n      style={{ gridRowStart: virtualIndex + 1 }}\n    >\n      <Text textStyle=\"small-emphasized\" className={styles.sectionHeaderLabel}>\n        {intl.formatMessage(label)}\n      </Text>\n    </h3>\n  );\n}\n"],
+  "mappings": "AAgDM;AA9CN,SAAS,eAAe;AAExB,YAAY,YAAY;AACxB,SAAS,YAAY;AACrB,SAAS,yBAAyB;AAElC,MAAM,kBAAkB;AAAA,EACtB,MAAM,kBAAkB;AAAA,EACxB,OAAO,kBAAkB;AAAA,EACzB,OAAO,kBAAkB;AAC3B;AAsBO,SAAS,8BACd,OACa;AACb,QAAM,EAAE,UAAU,cAAc,eAAe,IAAI;AACnD,QAAM,OAAO,QAAQ;AACrB,QAAM,QAAQ,gBAAgB,GAAG,QAAQ,EAAE;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,cAAY;AAAA,MACZ,WAAW,OAAO;AAAA,MAClB,OAAO,EAAE,cAAc,eAAe,EAAE;AAAA,MAExC,8BAAC,QAAK,WAAU,oBAAmB,WAAW,OAAO,oBAClD,eAAK,cAAc,KAAK,GAC3B;AAAA;AAAA,EACF;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,8 @@
+import "./DataTableColumnsSectionHeader.css";
+var sectionHeader = "_1o0bw490-3-9-0";
+var sectionHeaderLabel = "_1o0bw491-3-9-0";
+export {
+  sectionHeader,
+  sectionHeaderLabel
+};
+//# sourceMappingURL=DataTableColumnsSectionHeader.sty.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsSectionHeader.css.ts"],
+  "sourcesContent": ["import './DataTableColumnsSectionHeader.css';\nexport var sectionHeader = '_1o0bw490-3-9-0';\nexport var sectionHeaderLabel = '_1o0bw491-3-9-0';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;AACpB,IAAI,qBAAqB;",
+  "names": []
+}

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

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

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-8-0";
-var searchInput = "_1rh6hs01-3-8-0";
-var showHideAll = "_1rh6hs00-3-8-0";
+var filterControls = "_1rh6hs02-3-9-0";
+var searchInput = "_1rh6hs01-3-9-0";
+var showHideAll = "_1rh6hs00-3-9-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-8-0';\nexport var searchInput = '_1rh6hs01-3-8-0';\nexport var showHideAll = '_1rh6hs00-3-8-0';"],
+  "sourcesContent": ["import '../../../../../overlays/modal/Modal.css';\nimport './DataTableVisibilityFilterControls.css';\nexport var filterControls = '_1rh6hs02-3-9-0';\nexport var searchInput = '_1rh6hs01-3-9-0';\nexport var showHideAll = '_1rh6hs00-3-9-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,iBAAiB;AACrB,IAAI,cAAc;AAClB,IAAI,cAAc;",
   "names": []
 }

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/column-settings-test-utils.js

@@ -0,0 +1,34 @@
+import { fireEvent } from "@testing-library/react";
+function getColumnRow(scope, columnId) {
+  const row = scope.querySelector(`[data-columnid="${columnId}"]`);
+  if (!row) {
+    throw new Error(`No column row found for column "${columnId}"`);
+  }
+  return row;
+}
+function getColumnVisibilityToggle(scope, columnId) {
+  const toggle = getColumnRow(scope, columnId).querySelector(
+    '[data-dt-children-name="ColumnSettingsShowHideColumn"]'
+  );
+  if (!toggle) {
+    throw new Error(`No visibility toggle found for column "${columnId}"`);
+  }
+  return toggle;
+}
+function getAllVisibilityToggles(scope) {
+  return Array.from(
+    scope.querySelectorAll(
+      '[data-dt-children-name="ColumnSettingsShowHideColumn"]'
+    )
+  );
+}
+function clickVisibilityToggle(scope, columnId) {
+  fireEvent.click(getColumnVisibilityToggle(scope, columnId));
+}
+export {
+  clickVisibilityToggle,
+  getAllVisibilityToggles,
+  getColumnRow,
+  getColumnVisibilityToggle
+};
+//# sourceMappingURL=column-settings-test-utils.js.map

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/column-settings-test-utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/column-settings-test-utils.ts"],
+  "sourcesContent": ["import { fireEvent } from '@testing-library/react';\n\n/** Returns the column row element (by column id) within the given scope. */\nexport function getColumnRow(\n  scope: HTMLElement,\n  columnId: string,\n): HTMLElement {\n  const row = scope.querySelector<HTMLElement>(`[data-columnid=\"${columnId}\"]`);\n  if (!row) {\n    throw new Error(`No column row found for column \"${columnId}\"`);\n  }\n  return row;\n}\n\n/** Returns the per-column visibility toggle button (by column id) within the scope. */\nexport function getColumnVisibilityToggle(\n  scope: HTMLElement,\n  columnId: string,\n): HTMLElement {\n  const toggle = getColumnRow(scope, columnId).querySelector<HTMLElement>(\n    '[data-dt-children-name=\"ColumnSettingsShowHideColumn\"]',\n  );\n  if (!toggle) {\n    throw new Error(`No visibility toggle found for column \"${columnId}\"`);\n  }\n  return toggle;\n}\n\n/** Returns all per-column visibility toggle buttons within the scope, in list order. */\nexport function getAllVisibilityToggles(scope: HTMLElement): HTMLElement[] {\n  return Array.from(\n    scope.querySelectorAll<HTMLElement>(\n      '[data-dt-children-name=\"ColumnSettingsShowHideColumn\"]',\n    ),\n  );\n}\n\n/** Clicks the visibility toggle of the column with the given id within `scope`. */\nexport function clickVisibilityToggle(\n  scope: HTMLElement,\n  columnId: string,\n): void {\n  fireEvent.click(getColumnVisibilityToggle(scope, columnId));\n}\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;AAGnB,SAAS,aACd,OACA,UACa;AACb,QAAM,MAAM,MAAM,cAA2B,mBAAmB,QAAQ,IAAI;AAC5E,MAAI,CAAC,KAAK;AACR,UAAM,IAAI,MAAM,mCAAmC,QAAQ,GAAG;AAAA,EAChE;AACA,SAAO;AACT;AAGO,SAAS,0BACd,OACA,UACa;AACb,QAAM,SAAS,aAAa,OAAO,QAAQ,EAAE;AAAA,IAC3C;AAAA,EACF;AACA,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI,MAAM,0CAA0C,QAAQ,GAAG;AAAA,EACvE;AACA,SAAO;AACT;AAGO,SAAS,wBAAwB,OAAmC;AACzE,SAAO,MAAM;AAAA,IACX,MAAM;AAAA,MACJ;AAAA,IACF;AAAA,EACF;AACF;AAGO,SAAS,sBACd,OACA,UACM;AACN,YAAU,MAAM,0BAA0B,OAAO,QAAQ,CAAC;AAC5D;",
+  "names": []
+}

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

@@ -48,6 +48,8 @@ function getToolbarConfig(children) {
       slots.downloadData = true;
       toolbarItemProps.downloadExcludedColumns = child.props?.excludeColumns;
       toolbarItemProps.onDownloadData = child.props?.onDownloadData;
+      toolbarItemProps.formatDownloadHeader = child.props?.formatDownloadHeader;
+      toolbarItemProps.fileName = child.props?.fileName;
     } else if (isSlot(child, DataTableGlobalLineWrapAction)) {
       slots.globalLineWrap = true;
     } else if (isSlot(child, Intent)) {
@@ -100,6 +102,7 @@ const DataTableToolbar = forwardRef(
             {
               hasDownloadData: slots.downloadData,
               downloadExcludedColumns: toolbarItemProps?.downloadExcludedColumns,
+              fileName: toolbarItemProps?.fileName,
               intents: toolbarItemProps.intents
             }
           )

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/components/Toolbar/DataTableToolbar.tsx"],
-  "sourcesContent": ["import {\n  Children,\n  forwardRef,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react';\n\nimport type { DataTableColumnSettingsTriggerProps } from './ColumnSettings/column-settings-types.js';\nimport { DataTableColumnOrderSettings } from './ColumnSettings/DataTableColumnOrderSettings.js';\nimport { DataTableColumnPinningSettings } from './ColumnSettings/DataTableColumnPinningSettings.js';\nimport { DataTableColumnSettings } from './ColumnSettings/DataTableColumnSettings.js';\nimport { DataTableColumnSettingsTrigger } from './ColumnSettings/DataTableColumnSettingsTrigger.js';\nimport { DataTableColumnVisibilitySettings } from './ColumnSettings/DataTableColumnVisibilitySettings.js';\nimport { DataTableToolbarMenu } from './DataTableToolbarMenu.js';\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport {\n  Intent,\n  type IntentProps,\n} from '../../../../core/slots/Intent/Intent.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 type { WithChildren } from '../../../../core/types/with-children.js';\nimport { isSlot } from '../../../../core/utils/is-slot.js';\nimport { devLog } from '../../../../core/utils/logging.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport type { DataTablePinnedColumnState } from '../../features/ColumnPinning/column-pinning-types.js';\nimport type {\n  DataTableColumnVisibilityState,\n  DataTableVisibleColumnLimits,\n} from '../../features/ColumnVisibility/column-visibility-types.js';\nimport { DataTableDownload } from '../../features/Download/Download.js';\nimport { DataTableGlobalLineWrapAction } from '../../features/LineWrap/LineWrap.js';\nimport { DataTableGlobalLineWrapToolbarAction } from '../../features/LineWrap/LineWrapToolbarAction.js';\n\n/**\n * @public\n */\nexport type DataTableToolbarProps = WithChildren &\n  StylingProps &\n  DataTestId &\n  BehaviorTrackingProps;\n\n/**\n * A helper function to check whether the child component is the DataTableToolbar component.\n * @internal\n */\nexport function _isDataTableToolbar(\n  child: ReactElement | null,\n): child is ReactElement<DataTableToolbarProps> {\n  return child?.type === DataTableToolbar;\n}\n\n/**\n * Allowed slots for the DataTableToolbar.\n * @internal\n */\nexport type DataTableToolbarSlots = {\n  visibilitySettings: boolean;\n  columnOrderSettings: boolean;\n  columnPinningSettings: boolean;\n  downloadData: boolean;\n  globalLineWrap: boolean;\n};\n\n/**\n * Props for the DataTableToolbar items.\n * @internal\n */\nexport type DataTableToolbarItemProps = {\n  /**\n   * Column visibility reset state that will be used to reset and also to enable/disable 'Reset to default' in column settings modal.\n   */\n  resetColumnVisibility?: DataTableColumnVisibilityState;\n  /**\n   * Upper limits for the number of visible columns in the column settings modal.\n   */\n  visibleColumnLimits?: DataTableVisibleColumnLimits;\n  /**\n   * Column order reset state that will be used to reset and also to enable/disable 'Reset to default' in column settings modal.\n   */\n  resetColumnOrder?: string[];\n  /**\n   * Column pinning reset state that will be used to reset and also to enable/disable 'Reset to default' in column settings modal.\n   */\n  resetColumnPinning?: DataTablePinnedColumnState;\n  /**\n   * The remaining props for the ColumnSettingsTrigger.\n   */\n  customTriggerProps?: DataTableColumnSettingsTriggerProps;\n  /**\n   * Array of column IDs that can optionally be excluded from the download.\n   */\n  downloadExcludedColumns?: string[];\n  /**\n   * 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.\n   */\n  onDownloadData?: (\n    subset: 'all' | 'page' | 'selected',\n    excludedColumns?: string[],\n  ) => void;\n  /**\n   * Array of intent props for the `Intent` slot, to render the intent actions in the menu.\n   */\n  intents: Array<IntentProps>;\n};\n\n/**\n * @internal\n */\nexport function getToolbarConfig(children: ReactNode) {\n  const slots: DataTableToolbarSlots = {\n    visibilitySettings: false,\n    columnOrderSettings: false,\n    columnPinningSettings: false,\n    downloadData: false,\n    globalLineWrap: false,\n  };\n  const toolbarItemProps: DataTableToolbarItemProps = { intents: [] };\n\n  Children.forEach(children, (child) => {\n    if (isSlot(child, DataTableColumnVisibilitySettings)) {\n      slots.visibilitySettings = true;\n      toolbarItemProps.resetColumnVisibility =\n        child.props?.resetColumnVisibility;\n      toolbarItemProps.visibleColumnLimits = child.props?.visibleColumnLimits;\n    } else if (isSlot(child, DataTableColumnOrderSettings)) {\n      slots.columnOrderSettings = true;\n      toolbarItemProps.resetColumnOrder = child.props?.resetColumnOrder;\n    } else if (isSlot(child, DataTableColumnPinningSettings)) {\n      slots.columnPinningSettings = true;\n      toolbarItemProps.resetColumnPinning = child.props?.resetColumnPinning;\n    } else if (isSlot(child, DataTableColumnSettingsTrigger)) {\n      toolbarItemProps.customTriggerProps = child.props;\n    } else if (isSlot(child, DataTableDownload)) {\n      slots.downloadData = true;\n      toolbarItemProps.downloadExcludedColumns = child.props?.excludeColumns;\n      toolbarItemProps.onDownloadData = child.props?.onDownloadData;\n    } else if (isSlot(child, DataTableGlobalLineWrapAction)) {\n      slots.globalLineWrap = true;\n    } else if (isSlot(child, Intent)) {\n      toolbarItemProps.intents.push(child.props);\n    } else {\n      devLog('Invalid child of DataTableToolbar');\n    }\n  });\n\n  return { slots, toolbarItemProps };\n}\n\n/**\n * Toolbar slot component for general actions that affect the entire table. Positioned above the header.\n * @public\n */\nexport const DataTableToolbar = forwardRef(\n  (\n    props: DataTableToolbarProps,\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    const { slots, toolbarItemProps } = getToolbarConfig(children);\n\n    if (Children.count(children) === 0) {\n      return null;\n    }\n\n    return (\n      <Flex\n        ref={forwardedRef}\n        justifyContent=\"flex-end\"\n        alignItems=\"flex-end\"\n        gap={4}\n        data-testid={dataTestId}\n        className={consumerClassName}\n        style={{\n          gridArea: '1 / 2 / 2 / 2',\n          ...consumerStyle,\n        }}\n        {...behavioralTrackingProps}\n        {...restProps}\n      >\n        {(slots.visibilitySettings ||\n          slots.columnOrderSettings ||\n          slots.columnPinningSettings) && (\n          <DataTableColumnSettings\n            customTriggerProps={toolbarItemProps?.customTriggerProps}\n          />\n        )}\n        {slots.globalLineWrap && <DataTableGlobalLineWrapToolbarAction />}\n        {(slots.downloadData || toolbarItemProps.intents.length > 0) && (\n          <DataTableToolbarMenu\n            hasDownloadData={slots.downloadData}\n            downloadExcludedColumns={toolbarItemProps?.downloadExcludedColumns}\n            intents={toolbarItemProps.intents}\n          />\n        )}\n      </Flex>\n    );\n  },\n);\n\n(\n  DataTableToolbar as typeof DataTableToolbar & {\n    displayName: string;\n  }\n).displayName = 'DataTable.Toolbar';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  Children,\n  forwardRef,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react';\n\nimport type { DataTableColumnSettingsTriggerProps } from './ColumnSettings/column-settings-types.js';\nimport { DataTableColumnOrderSettings } from './ColumnSettings/DataTableColumnOrderSettings.js';\nimport { DataTableColumnPinningSettings } from './ColumnSettings/DataTableColumnPinningSettings.js';\nimport { DataTableColumnSettings } from './ColumnSettings/DataTableColumnSettings.js';\nimport { DataTableColumnSettingsTrigger } from './ColumnSettings/DataTableColumnSettingsTrigger.js';\nimport { DataTableColumnVisibilitySettings } from './ColumnSettings/DataTableColumnVisibilitySettings.js';\nimport { DataTableToolbarMenu } from './DataTableToolbarMenu.js';\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport {\n  Intent,\n  type IntentProps,\n} from '../../../../core/slots/Intent/Intent.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 type { WithChildren } from '../../../../core/types/with-children.js';\nimport { isSlot } from '../../../../core/utils/is-slot.js';\nimport { devLog } from '../../../../core/utils/logging.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport type { DataTablePinnedColumnState } from '../../features/ColumnPinning/column-pinning-types.js';\nimport type {\n  DataTableColumnVisibilityState,\n  DataTableVisibleColumnLimits,\n} from '../../features/ColumnVisibility/column-visibility-types.js';\nimport type { DataTableDownloadHeaderContext } from '../../features/Download/download-types.js';\nimport { DataTableDownload } from '../../features/Download/Download.js';\nimport { DataTableGlobalLineWrapAction } from '../../features/LineWrap/LineWrap.js';\nimport { DataTableGlobalLineWrapToolbarAction } from '../../features/LineWrap/LineWrapToolbarAction.js';\n\n/**\n * @public\n */\nexport type DataTableToolbarProps = WithChildren &\n  StylingProps &\n  DataTestId &\n  BehaviorTrackingProps;\n\n/**\n * A helper function to check whether the child component is the DataTableToolbar component.\n * @internal\n */\nexport function _isDataTableToolbar(\n  child: ReactElement | null,\n): child is ReactElement<DataTableToolbarProps> {\n  return child?.type === DataTableToolbar;\n}\n\n/**\n * Allowed slots for the DataTableToolbar.\n * @internal\n */\nexport type DataTableToolbarSlots = {\n  visibilitySettings: boolean;\n  columnOrderSettings: boolean;\n  columnPinningSettings: boolean;\n  downloadData: boolean;\n  globalLineWrap: boolean;\n};\n\n/**\n * Props for the DataTableToolbar items.\n * @internal\n */\nexport type DataTableToolbarItemProps = {\n  /**\n   * Column visibility reset state that will be used to reset and also to enable/disable 'Reset to default' in column settings modal.\n   */\n  resetColumnVisibility?: DataTableColumnVisibilityState;\n  /**\n   * Upper limits for the number of visible columns in the column settings modal.\n   */\n  visibleColumnLimits?: DataTableVisibleColumnLimits;\n  /**\n   * Column order reset state that will be used to reset and also to enable/disable 'Reset to default' in column settings modal.\n   */\n  resetColumnOrder?: string[];\n  /**\n   * Column pinning reset state that will be used to reset and also to enable/disable 'Reset to default' in column settings modal.\n   */\n  resetColumnPinning?: DataTablePinnedColumnState;\n  /**\n   * The remaining props for the ColumnSettingsTrigger.\n   */\n  customTriggerProps?: DataTableColumnSettingsTriggerProps;\n  /**\n   * Array of column IDs that can optionally be excluded from the download.\n   */\n  downloadExcludedColumns?: string[];\n  /**\n   * 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.\n   */\n  onDownloadData?: (\n    subset: 'all' | 'page' | 'selected',\n    excludedColumns?: string[],\n  ) => void;\n  /**\n   * Callback to override the header name of each included leaf column in the downloaded file.\n   */\n  formatDownloadHeader?: (\n    context: DataTableDownloadHeaderContext,\n  ) => string | undefined;\n  /**\n   * Name of the downloaded CSV file.\n   */\n  fileName?: string | ((subset: 'all' | 'page' | 'selected') => string);\n  /**\n   * Array of intent props for the `Intent` slot, to render the intent actions in the menu.\n   */\n  intents: Array<IntentProps>;\n};\n\n/**\n * @internal\n */\nexport function getToolbarConfig(children: ReactNode) {\n  const slots: DataTableToolbarSlots = {\n    visibilitySettings: false,\n    columnOrderSettings: false,\n    columnPinningSettings: false,\n    downloadData: false,\n    globalLineWrap: false,\n  };\n  const toolbarItemProps: DataTableToolbarItemProps = { intents: [] };\n\n  Children.forEach(children, (child) => {\n    if (isSlot(child, DataTableColumnVisibilitySettings)) {\n      slots.visibilitySettings = true;\n      toolbarItemProps.resetColumnVisibility =\n        child.props?.resetColumnVisibility;\n      toolbarItemProps.visibleColumnLimits = child.props?.visibleColumnLimits;\n    } else if (isSlot(child, DataTableColumnOrderSettings)) {\n      slots.columnOrderSettings = true;\n      toolbarItemProps.resetColumnOrder = child.props?.resetColumnOrder;\n    } else if (isSlot(child, DataTableColumnPinningSettings)) {\n      slots.columnPinningSettings = true;\n      toolbarItemProps.resetColumnPinning = child.props?.resetColumnPinning;\n    } else if (isSlot(child, DataTableColumnSettingsTrigger)) {\n      toolbarItemProps.customTriggerProps = child.props;\n    } else if (isSlot(child, DataTableDownload)) {\n      slots.downloadData = true;\n      toolbarItemProps.downloadExcludedColumns = child.props?.excludeColumns;\n      toolbarItemProps.onDownloadData = child.props?.onDownloadData;\n      toolbarItemProps.formatDownloadHeader = child.props?.formatDownloadHeader;\n      toolbarItemProps.fileName = child.props?.fileName;\n    } else if (isSlot(child, DataTableGlobalLineWrapAction)) {\n      slots.globalLineWrap = true;\n    } else if (isSlot(child, Intent)) {\n      toolbarItemProps.intents.push(child.props);\n    } else {\n      devLog('Invalid child of DataTableToolbar');\n    }\n  });\n\n  return { slots, toolbarItemProps };\n}\n\n/**\n * Toolbar slot component for general actions that affect the entire table. Positioned above the header.\n * @public\n */\nexport const DataTableToolbar = forwardRef(\n  (\n    props: DataTableToolbarProps,\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    const { slots, toolbarItemProps } = getToolbarConfig(children);\n\n    if (Children.count(children) === 0) {\n      return null;\n    }\n\n    return (\n      <Flex\n        ref={forwardedRef}\n        justifyContent=\"flex-end\"\n        alignItems=\"flex-end\"\n        gap={4}\n        data-testid={dataTestId}\n        className={consumerClassName}\n        style={{\n          gridArea: '1 / 2 / 2 / 2',\n          ...consumerStyle,\n        }}\n        {...behavioralTrackingProps}\n        {...restProps}\n      >\n        {(slots.visibilitySettings ||\n          slots.columnOrderSettings ||\n          slots.columnPinningSettings) && (\n          <DataTableColumnSettings\n            customTriggerProps={toolbarItemProps?.customTriggerProps}\n          />\n        )}\n        {slots.globalLineWrap && <DataTableGlobalLineWrapToolbarAction />}\n        {(slots.downloadData || toolbarItemProps.intents.length > 0) && (\n          <DataTableToolbarMenu\n            hasDownloadData={slots.downloadData}\n            downloadExcludedColumns={toolbarItemProps?.downloadExcludedColumns}\n            fileName={toolbarItemProps?.fileName}\n            intents={toolbarItemProps.intents}\n          />\n        )}\n      </Flex>\n    );\n  },\n);\n\n(\n  DataTableToolbar as typeof DataTableToolbar & {\n    displayName: string;\n  }\n).displayName = 'DataTable.Toolbar';\n"],
+  "mappings": "AA+LM,SAiBI,KAjBJ;AA/LN;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AAGP,SAAS,oCAAoC;AAC7C,SAAS,sCAAsC;AAC/C,SAAS,+BAA+B;AACxC,SAAS,sCAAsC;AAC/C,SAAS,yCAAyC;AAClD,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C;AAAA,EACE;AAAA,OAEK;AAKP,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,YAAY;AAOrB,SAAS,yBAAyB;AAClC,SAAS,qCAAqC;AAC9C,SAAS,4CAA4C;AAc9C,SAAS,oBACd,OAC8C;AAC9C,SAAO,OAAO,SAAS;AACzB;AAqEO,SAAS,iBAAiB,UAAqB;AACpD,QAAM,QAA+B;AAAA,IACnC,oBAAoB;AAAA,IACpB,qBAAqB;AAAA,IACrB,uBAAuB;AAAA,IACvB,cAAc;AAAA,IACd,gBAAgB;AAAA,EAClB;AACA,QAAM,mBAA8C,EAAE,SAAS,CAAC,EAAE;AAElE,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,OAAO,OAAO,iCAAiC,GAAG;AACpD,YAAM,qBAAqB;AAC3B,uBAAiB,wBACf,MAAM,OAAO;AACf,uBAAiB,sBAAsB,MAAM,OAAO;AAAA,IACtD,WAAW,OAAO,OAAO,4BAA4B,GAAG;AACtD,YAAM,sBAAsB;AAC5B,uBAAiB,mBAAmB,MAAM,OAAO;AAAA,IACnD,WAAW,OAAO,OAAO,8BAA8B,GAAG;AACxD,YAAM,wBAAwB;AAC9B,uBAAiB,qBAAqB,MAAM,OAAO;AAAA,IACrD,WAAW,OAAO,OAAO,8BAA8B,GAAG;AACxD,uBAAiB,qBAAqB,MAAM;AAAA,IAC9C,WAAW,OAAO,OAAO,iBAAiB,GAAG;AAC3C,YAAM,eAAe;AACrB,uBAAiB,0BAA0B,MAAM,OAAO;AACxD,uBAAiB,iBAAiB,MAAM,OAAO;AAC/C,uBAAiB,uBAAuB,MAAM,OAAO;AACrD,uBAAiB,WAAW,MAAM,OAAO;AAAA,IAC3C,WAAW,OAAO,OAAO,6BAA6B,GAAG;AACvD,YAAM,iBAAiB;AAAA,IACzB,WAAW,OAAO,OAAO,MAAM,GAAG;AAChC,uBAAiB,QAAQ,KAAK,MAAM,KAAK;AAAA,IAC3C,OAAO;AACL,aAAO,mCAAmC;AAAA,IAC5C;AAAA,EACF,CAAC;AAED,SAAO,EAAE,OAAO,iBAAiB;AACnC;AAMO,MAAM,mBAAmB;AAAA,EAC9B,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,UAAM,EAAE,OAAO,iBAAiB,IAAI,iBAAiB,QAAQ;AAE7D,QAAI,SAAS,MAAM,QAAQ,MAAM,GAAG;AAClC,aAAO;AAAA,IACT;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,gBAAe;AAAA,QACf,YAAW;AAAA,QACX,KAAK;AAAA,QACL,eAAa;AAAA,QACb,WAAW;AAAA,QACX,OAAO;AAAA,UACL,UAAU;AAAA,UACV,GAAG;AAAA,QACL;AAAA,QACC,GAAG;AAAA,QACH,GAAG;AAAA,QAEF;AAAA,iBAAM,sBACN,MAAM,uBACN,MAAM,0BACN;AAAA,YAAC;AAAA;AAAA,cACC,oBAAoB,kBAAkB;AAAA;AAAA,UACxC;AAAA,UAED,MAAM,kBAAkB,oBAAC,wCAAqC;AAAA,WAC7D,MAAM,gBAAgB,iBAAiB,QAAQ,SAAS,MACxD;AAAA,YAAC;AAAA;AAAA,cACC,iBAAiB,MAAM;AAAA,cACvB,yBAAyB,kBAAkB;AAAA,cAC3C,UAAU,kBAAkB;AAAA,cAC5B,SAAS,iBAAiB;AAAA;AAAA,UAC5B;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAGE,iBAGA,cAAc;",
   "names": []
 }

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

@@ -8,7 +8,7 @@ import { Menu } from "../../../../navigation/menu/Menu.js";
 import { Tooltip } from "../../../../overlays/tooltip/Tooltip.js";
 import { dataTableMessages } from "../../messages.js";
 const DataTableToolbarMenu = (props) => {
-  const { hasDownloadData, downloadExcludedColumns, intents } = props;
+  const { hasDownloadData, downloadExcludedColumns, fileName, intents } = props;
   const [menuOpen, setMenuOpen] = useState(false);
   const [isDownloading, setIsDownloading] = useState(false);
   const hasIntents = intents.length > 0;
@@ -74,6 +74,7 @@ const DataTableToolbarMenu = (props) => {
             DataTableDownloadData,
             {
               excludeColumns: downloadExcludedColumns,
+              fileName,
               hasIntents,
               isDownloading,
               onDownloadStart: () => setIsDownloading(true),

package/esm/tables/DataTable/components/Toolbar/DataTableToolbarMenu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/components/Toolbar/DataTableToolbarMenu.tsx"],
-  "sourcesContent": ["import { Fragment, useRef, useState, type ReactElement, type JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DotMenuIcon, DownloadIcon } from '@dynatrace/strato-icons';\n\nimport { DataTableDownloadData } from './Download/DataTableDownloadData.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { type IntentProps } from '../../../../core/slots/Intent/Intent.js';\nimport { Menu } from '../../../../navigation/menu/Menu.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport { dataTableMessages } from '../../messages.js';\n\ninterface ToolbarMenuProps {\n  /**\n   * Indicates whether the `DownloadData` slot is used, to determine if the download action should be rendered in the menu.\n   */\n  hasDownloadData: boolean;\n  /**\n   * Array of column IDs that can optionally be excluded from the download, passed down to the `DownloadData` slot.\n   */\n  downloadExcludedColumns?: string[];\n  /**\n   * Array of intent props for the `Intent` slot, to render the intent actions in the menu.\n   */\n  intents: Array<IntentProps>;\n}\n\n/**\n * The menu component for the `DownloadData` and `Intent` slots.\n * @internal\n */\nexport const DataTableToolbarMenu = (\n  props: ToolbarMenuProps,\n): JSX.Element | undefined => {\n  const { hasDownloadData, downloadExcludedColumns, intents } = props;\n\n  const [menuOpen, setMenuOpen] = useState(false);\n  const [isDownloading, setIsDownloading] = useState(false);\n  const hasIntents = intents.length > 0;\n\n  const triggerIcon = hasIntents ? <DotMenuIcon /> : <DownloadIcon />;\n\n  const Group = hasIntents ? Menu.Group : Fragment;\n\n  const intl = useIntl();\n  let toolbarMenuMessage = dataTableMessages.downloadButtonLabel;\n\n  if (isDownloading) {\n    toolbarMenuMessage = dataTableMessages.downloadingButtonLabel;\n  } else if (hasIntents) {\n    toolbarMenuMessage = dataTableMessages.toolbarButtonLabel;\n  }\n\n  const toolbarMenuLabel = intl.formatMessage(toolbarMenuMessage);\n  const simpleButtonRef = useRef<HTMLButtonElement>(null);\n\n  // do not render anything if neither the `DownloadData` nor the `Intent` slot is used\n  if (!hasDownloadData && !hasIntents) {\n    return;\n  }\n\n  // Avoid spawning the menu while it is closed to avoid react render\n  // performance issues.\n  if (menuOpen === false) {\n    return (\n      <Tooltip text={toolbarMenuLabel}>\n        <Button\n          ref={simpleButtonRef}\n          variant=\"default\"\n          aria-label={toolbarMenuLabel}\n          onClick={() => setMenuOpen(true)}\n          loading={isDownloading}\n        >\n          <Button.Prefix>{triggerIcon}</Button.Prefix>\n        </Button>\n      </Tooltip>\n    );\n  }\n\n  // according to the GUIDEline intent items with app ids are grouped\n  // intent items that don't have an app id are positioned below that group\n  const {\n    intentsWithAppOrIntentId: intentsWithAppId,\n    intentsWithoutAppOrIntentId: intentsWithoutAppId,\n  } = intents.reduce<{\n    intentsWithAppOrIntentId: ReactElement[];\n    intentsWithoutAppOrIntentId: ReactElement[];\n  }>(\n    (acc, intentProps, idx) => {\n      const hasAppOrIntentId =\n        intentProps.options.recommendedAppId !== undefined ||\n        intentProps.options.recommendedIntentId !== undefined;\n\n      const intent = (\n        <Menu.Intent key={`intent-${idx}`} {...intentProps}>\n          {intentProps.icon && <Menu.Prefix>{intentProps.icon}</Menu.Prefix>}\n          {intentProps.children}\n        </Menu.Intent>\n      );\n\n      hasAppOrIntentId\n        ? acc.intentsWithAppOrIntentId.push(intent)\n        : acc.intentsWithoutAppOrIntentId.push(intent);\n      return acc;\n    },\n    { intentsWithAppOrIntentId: [], intentsWithoutAppOrIntentId: [] },\n  );\n\n  return (\n    <Menu\n      open={menuOpen}\n      onOpenChange={(open) => {\n        // Since the elements are actually swapped when the menu is open / closed\n        // the focus needs to move back to the button only render.\n        if (open === false) {\n          requestAnimationFrame(() => {\n            simpleButtonRef.current?.focus();\n          });\n        }\n        setMenuOpen(open);\n      }}\n      modal={false}\n    >\n      <Tooltip text={toolbarMenuLabel}>\n        <Menu.Trigger>\n          <Button variant=\"default\" aria-label={toolbarMenuLabel}>\n            <Button.Prefix>{triggerIcon}</Button.Prefix>\n          </Button>\n        </Menu.Trigger>\n      </Tooltip>\n\n      <Menu.Content alignment=\"end\">\n        {hasDownloadData && (\n          <Group>\n            <DataTableDownloadData\n              excludeColumns={downloadExcludedColumns}\n              hasIntents={hasIntents}\n              isDownloading={isDownloading}\n              onDownloadStart={() => setIsDownloading(true)}\n              onDownloadEnd={() => setIsDownloading(false)}\n            />\n          </Group>\n        )}\n        {intentsWithAppId.length > 0 && <Group>{intentsWithAppId}</Group>}\n        {intentsWithoutAppId.length > 0 && <Group>{intentsWithoutAppId}</Group>}\n      </Menu.Content>\n    </Menu>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Fragment, useRef, useState, type ReactElement, type JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DotMenuIcon, DownloadIcon } from '@dynatrace/strato-icons';\n\nimport { DataTableDownloadData } from './Download/DataTableDownloadData.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { type IntentProps } from '../../../../core/slots/Intent/Intent.js';\nimport { Menu } from '../../../../navigation/menu/Menu.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport { dataTableMessages } from '../../messages.js';\n\ninterface ToolbarMenuProps {\n  /**\n   * Indicates whether the `DownloadData` slot is used, to determine if the download action should be rendered in the menu.\n   */\n  hasDownloadData: boolean;\n  /**\n   * Array of column IDs that can optionally be excluded from the download, passed down to the `DownloadData` slot.\n   */\n  downloadExcludedColumns?: string[];\n  /**\n   * Name of the downloaded CSV file, passed down to the `DownloadData` slot.\n   */\n  fileName?: string | ((subset: 'all' | 'page' | 'selected') => string);\n  /**\n   * Array of intent props for the `Intent` slot, to render the intent actions in the menu.\n   */\n  intents: Array<IntentProps>;\n}\n\n/**\n * The menu component for the `DownloadData` and `Intent` slots.\n * @internal\n */\nexport const DataTableToolbarMenu = (\n  props: ToolbarMenuProps,\n): JSX.Element | undefined => {\n  const { hasDownloadData, downloadExcludedColumns, fileName, intents } = props;\n\n  const [menuOpen, setMenuOpen] = useState(false);\n  const [isDownloading, setIsDownloading] = useState(false);\n  const hasIntents = intents.length > 0;\n\n  const triggerIcon = hasIntents ? <DotMenuIcon /> : <DownloadIcon />;\n\n  const Group = hasIntents ? Menu.Group : Fragment;\n\n  const intl = useIntl();\n  let toolbarMenuMessage = dataTableMessages.downloadButtonLabel;\n\n  if (isDownloading) {\n    toolbarMenuMessage = dataTableMessages.downloadingButtonLabel;\n  } else if (hasIntents) {\n    toolbarMenuMessage = dataTableMessages.toolbarButtonLabel;\n  }\n\n  const toolbarMenuLabel = intl.formatMessage(toolbarMenuMessage);\n  const simpleButtonRef = useRef<HTMLButtonElement>(null);\n\n  // do not render anything if neither the `DownloadData` nor the `Intent` slot is used\n  if (!hasDownloadData && !hasIntents) {\n    return;\n  }\n\n  // Avoid spawning the menu while it is closed to avoid react render\n  // performance issues.\n  if (menuOpen === false) {\n    return (\n      <Tooltip text={toolbarMenuLabel}>\n        <Button\n          ref={simpleButtonRef}\n          variant=\"default\"\n          aria-label={toolbarMenuLabel}\n          onClick={() => setMenuOpen(true)}\n          loading={isDownloading}\n        >\n          <Button.Prefix>{triggerIcon}</Button.Prefix>\n        </Button>\n      </Tooltip>\n    );\n  }\n\n  // according to the GUIDEline intent items with app ids are grouped\n  // intent items that don't have an app id are positioned below that group\n  const {\n    intentsWithAppOrIntentId: intentsWithAppId,\n    intentsWithoutAppOrIntentId: intentsWithoutAppId,\n  } = intents.reduce<{\n    intentsWithAppOrIntentId: ReactElement[];\n    intentsWithoutAppOrIntentId: ReactElement[];\n  }>(\n    (acc, intentProps, idx) => {\n      const hasAppOrIntentId =\n        intentProps.options.recommendedAppId !== undefined ||\n        intentProps.options.recommendedIntentId !== undefined;\n\n      const intent = (\n        <Menu.Intent key={`intent-${idx}`} {...intentProps}>\n          {intentProps.icon && <Menu.Prefix>{intentProps.icon}</Menu.Prefix>}\n          {intentProps.children}\n        </Menu.Intent>\n      );\n\n      hasAppOrIntentId\n        ? acc.intentsWithAppOrIntentId.push(intent)\n        : acc.intentsWithoutAppOrIntentId.push(intent);\n      return acc;\n    },\n    { intentsWithAppOrIntentId: [], intentsWithoutAppOrIntentId: [] },\n  );\n\n  return (\n    <Menu\n      open={menuOpen}\n      onOpenChange={(open) => {\n        // Since the elements are actually swapped when the menu is open / closed\n        // the focus needs to move back to the button only render.\n        if (open === false) {\n          requestAnimationFrame(() => {\n            simpleButtonRef.current?.focus();\n          });\n        }\n        setMenuOpen(open);\n      }}\n      modal={false}\n    >\n      <Tooltip text={toolbarMenuLabel}>\n        <Menu.Trigger>\n          <Button variant=\"default\" aria-label={toolbarMenuLabel}>\n            <Button.Prefix>{triggerIcon}</Button.Prefix>\n          </Button>\n        </Menu.Trigger>\n      </Tooltip>\n\n      <Menu.Content alignment=\"end\">\n        {hasDownloadData && (\n          <Group>\n            <DataTableDownloadData\n              excludeColumns={downloadExcludedColumns}\n              fileName={fileName}\n              hasIntents={hasIntents}\n              isDownloading={isDownloading}\n              onDownloadStart={() => setIsDownloading(true)}\n              onDownloadEnd={() => setIsDownloading(false)}\n            />\n          </Group>\n        )}\n        {intentsWithAppId.length > 0 && <Group>{intentsWithAppId}</Group>}\n        {intentsWithoutAppId.length > 0 && <Group>{intentsWithoutAppId}</Group>}\n      </Menu.Content>\n    </Menu>\n  );\n};\n"],
+  "mappings": "AA4CmC,cAsD3B,YAtD2B;AA5CnC,SAAS,UAAU,QAAQ,gBAA6C;AACxE,SAAS,eAAe;AAExB,SAAS,aAAa,oBAAoB;AAE1C,SAAS,6BAA6B;AACtC,SAAS,cAAc;AAEvB,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,yBAAyB;AAyB3B,MAAM,uBAAuB,CAClC,UAC4B;AAC5B,QAAM,EAAE,iBAAiB,yBAAyB,UAAU,QAAQ,IAAI;AAExE,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AACxD,QAAM,aAAa,QAAQ,SAAS;AAEpC,QAAM,cAAc,aAAa,oBAAC,eAAY,IAAK,oBAAC,gBAAa;AAEjE,QAAM,QAAQ,aAAa,KAAK,QAAQ;AAExC,QAAM,OAAO,QAAQ;AACrB,MAAI,qBAAqB,kBAAkB;AAE3C,MAAI,eAAe;AACjB,yBAAqB,kBAAkB;AAAA,EACzC,WAAW,YAAY;AACrB,yBAAqB,kBAAkB;AAAA,EACzC;AAEA,QAAM,mBAAmB,KAAK,cAAc,kBAAkB;AAC9D,QAAM,kBAAkB,OAA0B,IAAI;AAGtD,MAAI,CAAC,mBAAmB,CAAC,YAAY;AACnC;AAAA,EACF;AAIA,MAAI,aAAa,OAAO;AACtB,WACE,oBAAC,WAAQ,MAAM,kBACb;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,SAAQ;AAAA,QACR,cAAY;AAAA,QACZ,SAAS,MAAM,YAAY,IAAI;AAAA,QAC/B,SAAS;AAAA,QAET,8BAAC,OAAO,QAAP,EAAe,uBAAY;AAAA;AAAA,IAC9B,GACF;AAAA,EAEJ;AAIA,QAAM;AAAA,IACJ,0BAA0B;AAAA,IAC1B,6BAA6B;AAAA,EAC/B,IAAI,QAAQ;AAAA,IAIV,CAAC,KAAK,aAAa,QAAQ;AACzB,YAAM,mBACJ,YAAY,QAAQ,qBAAqB,UACzC,YAAY,QAAQ,wBAAwB;AAE9C,YAAM,SACJ,qBAAC,KAAK,QAAL,EAAmC,GAAG,aACpC;AAAA,oBAAY,QAAQ,oBAAC,KAAK,QAAL,EAAa,sBAAY,MAAK;AAAA,QACnD,YAAY;AAAA,WAFG,UAAU,GAAG,EAG/B;AAGF,yBACI,IAAI,yBAAyB,KAAK,MAAM,IACxC,IAAI,4BAA4B,KAAK,MAAM;AAC/C,aAAO;AAAA,IACT;AAAA,IACA,EAAE,0BAA0B,CAAC,GAAG,6BAA6B,CAAC,EAAE;AAAA,EAClE;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,cAAc,CAAC,SAAS;AAGtB,YAAI,SAAS,OAAO;AAClB,gCAAsB,MAAM;AAC1B,4BAAgB,SAAS,MAAM;AAAA,UACjC,CAAC;AAAA,QACH;AACA,oBAAY,IAAI;AAAA,MAClB;AAAA,MACA,OAAO;AAAA,MAEP;AAAA,4BAAC,WAAQ,MAAM,kBACb,8BAAC,KAAK,SAAL,EACC,8BAAC,UAAO,SAAQ,WAAU,cAAY,kBACpC,8BAAC,OAAO,QAAP,EAAe,uBAAY,GAC9B,GACF,GACF;AAAA,QAEA,qBAAC,KAAK,SAAL,EAAa,WAAU,OACrB;AAAA,6BACC,oBAAC,SACC;AAAA,YAAC;AAAA;AAAA,cACC,gBAAgB;AAAA,cAChB;AAAA,cACA;AAAA,cACA;AAAA,cACA,iBAAiB,MAAM,iBAAiB,IAAI;AAAA,cAC5C,eAAe,MAAM,iBAAiB,KAAK;AAAA;AAAA,UAC7C,GACF;AAAA,UAED,iBAAiB,SAAS,KAAK,oBAAC,SAAO,4BAAiB;AAAA,UACxD,oBAAoB,SAAS,KAAK,oBAAC,SAAO,+BAAoB;AAAA,WACjE;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/esm/tables/DataTable/components/Toolbar/Download/DataTableDownloadData.css

@@ -1,9 +1,9 @@
-._1gjma320-3-8-0 {
+._1gjma320-3-9-0 {
   gap: var(--dt-spacings-size-24, 24px);
 }
-._1gjma321-3-8-0 {
+._1gjma321-3-9-0 {
   white-space: nowrap;
 }
-._1m01arl8-3-8-0 ._1gjma321-3-8-0 {
+._1m01arl8-3-9-0 ._1gjma321-3-9-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }