@dynatrace/strato-components 3.2.0 → 3.3.0

package/esm/tables/DataTable/features/Sorting/Sorting.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/Sorting/Sorting.tsx"],
-  "sourcesContent": ["import { isFunction } from '@tanstack/react-table';\n\nimport {\n  datelikeCompare,\n  numberlikeCompare,\n  stringlikeCompare,\n  stringlikeCompareCaseSensitive,\n} from './compare-functions.js';\nimport type {\n  DataTableColumnSort,\n  DataTableCustomSortingFn,\n  DataTableSortingProps,\n} from './sorting-types.js';\nimport { useControllableState } from '../../../../core/hooks/useControllableState.js';\nimport { devLog } from '../../../../core/utils/logging.js';\nimport { useDataTableConfigElement } from '../../../hooks/useDataTableConfig.js';\nimport { isGroupColumnDef } from '../../hooks/useTable/datatable-typeguards.js';\nimport type {\n  Column,\n  ColumnDef,\n  Header,\n  Row,\n  RowData,\n  Table,\n  TableFeature,\n  TableOptions,\n} from '../../hooks/useTable/types.js';\nimport { assignRowMethods } from '../../hooks/useTable/utils.js';\nimport type { DataTableRowData } from '../../public.api.js';\n\n/**\n * Typeguard function that checks whether the given column definition has a 'sortAccessor' defined.\n */\nfunction isColumnDefWithSortAccessor(\n  columnDef: unknown,\n): columnDef is ColumnDef<unknown> {\n  return (\n    columnDef !== undefined &&\n    columnDef !== null &&\n    typeof columnDef === 'object' &&\n    'sortAccessor' in columnDef &&\n    columnDef.sortAccessor !== undefined\n  );\n}\n\n/**\n * Configuration hook for the DataTable sorting feature.\n * @internal\n */\nexport function useSorting<TData extends DataTableRowData>(\n  props: DataTableSortingProps,\n  options: TableOptions<TData>,\n): void {\n  const configSortable = useDataTableConfigElement('sortable');\n\n  const [sorting, setSorting] = useControllableState<DataTableColumnSort[]>({\n    value: props.sortBy,\n    defaultValue: props.defaultSortBy,\n    onChange: props.onSortByChange,\n  });\n\n  if (sorting !== undefined && sorting.length > 1) {\n    devLog(\n      'As for now, DataTable does not offer support for sorting columns by more than one criterion.',\n    );\n  }\n\n  const { sortable: sortableProp } = props;\n  let sortable = false;\n\n  if (sortableProp !== undefined) {\n    if (typeof sortableProp === 'boolean') {\n      sortable = sortableProp;\n      options.manualSorting = false;\n    } else {\n      sortable = true;\n      // To do: should reconsider is there a better and simpler way (simpler API exposed) that we can check wheater the consumer wants to keep default sorting\n      // or they want to implement custom data pre sorting\n      if (sortableProp.manualSort === true) {\n        options.manualSorting = true;\n      } else {\n        options.manualSorting = undefined;\n      }\n    }\n  } else if (configSortable !== undefined) {\n    if (typeof configSortable === 'boolean') {\n      sortable = configSortable;\n    } else {\n      sortable = true;\n\n      if (configSortable.manualSort === true) {\n        options.manualSorting = true;\n      } else {\n        options.manualSorting = undefined;\n      }\n    }\n  }\n\n  options.enableSorting = sortable;\n  options.state = {\n    ...options.state,\n    sorting,\n  };\n  options.onSortingChange = setSorting;\n}\n\nconst sortingFunctions = {\n  text: stringlikeCompare,\n  textCaseSensitive: stringlikeCompareCaseSensitive,\n  number: numberlikeCompare,\n  datetime: datelikeCompare,\n};\n\n/**\n * @internal\n */\nexport const Sorting: TableFeature = {\n  createColumn<TData extends RowData, TValue>(\n    column: Column<TData, TValue>,\n    table: Table<TData>,\n  ) {\n    column.getCustomSortingFn = () => {\n      if (!column) {\n        throw new Error();\n      }\n\n      if (isFunction(column.columnDef.customSortingFn)) {\n        return column.columnDef.customSortingFn;\n      }\n\n      if (\n        typeof column.columnDef.sortType === 'string' &&\n        sortingFunctions[column.columnDef.sortType]\n      ) {\n        return sortingFunctions[\n          column.columnDef.sortType\n        ] as DataTableCustomSortingFn<TValue>;\n      }\n\n      return sortingFunctions['text'] as DataTableCustomSortingFn<TValue>;\n    };\n\n    column.getAutoSortDir = () => {\n      // overwrite the default from react table\n      // by default all columns should be sorted ascending first\n      return 'asc';\n    };\n\n    column.getCanSort = () => {\n      // Grouped columns should for now not be sortable.\n      if (isGroupColumnDef(column.columnDef)) {\n        return false;\n      }\n      return (\n        (column.columnDef.enableSorting ?? true) &&\n        (table.options.enableSorting ?? false) &&\n        !!column.accessorFn\n      );\n    };\n  },\n\n  createTable<TData extends RowData>(table: Table<TData>) {\n    assignRowMethods(table, {\n      getSortingValue(this: Row<TData>, columnId: string) {\n        if (Object.hasOwn(this._sortingValuesCache, columnId)) {\n          return this._sortingValuesCache[columnId];\n        }\n\n        const column = table.getColumn(columnId);\n\n        if (column && isColumnDefWithSortAccessor(column.columnDef)) {\n          const sortAccessor = column.columnDef.sortAccessor;\n          if (sortAccessor && typeof sortAccessor === 'string') {\n            return sortAccessor.split('.').reduce(\n              // @ts-expect-error Strict mode transition - needs to be investigated\n              (obj, key) => obj[key] as Record<string, unknown>,\n              this.original,\n            );\n          } else if (typeof sortAccessor === 'function') {\n            return sortAccessor(this.original);\n          }\n        }\n\n        if (!column?.accessorFn) {\n          return undefined;\n        }\n\n        this._sortingValuesCache[columnId] = column.accessorFn(\n          this.original,\n          this.index,\n        );\n\n        return this._sortingValuesCache[columnId];\n      },\n    });\n  },\n\n  createRow<TData extends RowData>(row: Row<TData>, table: Table<TData>) {\n    row._sortingValuesCache = {};\n  },\n\n  createHeader<TData extends RowData, TValue>(\n    header: Header<TData, TValue>,\n    table: Table<TData>,\n  ) {\n    header.getAriaSortAttribute = () => {\n      if (\n        table.options.enableSorting &&\n        header.column.columnDef.enableSorting !== false &&\n        header.column.columns.length === 0\n      ) {\n        const isSorted = header.column.getIsSorted();\n        if (isSorted) {\n          return isSorted === 'asc' ? 'ascending' : 'descending';\n        }\n        return 'none';\n      }\n      return undefined;\n    };\n\n    header.getCanSortByHeaderClick = () => {\n      if (header.column.getCanColumnActions() === true) {\n        return false;\n      }\n      return header.column.getCanSort();\n    };\n  },\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { isFunction } from '@tanstack/react-table';\n\nimport {\n  datelikeCompare,\n  numberlikeCompare,\n  stringlikeCompare,\n  stringlikeCompareCaseSensitive,\n} from './compare-functions.js';\nimport type {\n  DataTableColumnSort,\n  DataTableCustomSortingFn,\n  DataTableSortingProps,\n} from './sorting-types.js';\nimport { useControllableState } from '../../../../core/hooks/useControllableState.js';\nimport { useDataTableConfigElement } from '../../../hooks/useDataTableConfig.js';\nimport { isGroupColumnDef } from '../../hooks/useTable/datatable-typeguards.js';\nimport type {\n  Column,\n  ColumnDef,\n  Header,\n  Row,\n  RowData,\n  Table,\n  TableFeature,\n  TableOptions,\n} from '../../hooks/useTable/types.js';\nimport { assignRowMethods } from '../../hooks/useTable/utils.js';\nimport type { DataTableRowData } from '../../public.api.js';\n\n/**\n * Typeguard function that checks whether the given column definition has a 'sortAccessor' defined.\n */\nfunction isColumnDefWithSortAccessor(\n  columnDef: unknown,\n): columnDef is ColumnDef<unknown> {\n  return (\n    columnDef !== undefined &&\n    columnDef !== null &&\n    typeof columnDef === 'object' &&\n    'sortAccessor' in columnDef &&\n    columnDef.sortAccessor !== undefined\n  );\n}\n\n/**\n * Configuration hook for the DataTable sorting feature.\n * @internal\n */\nexport function useSorting<TData extends DataTableRowData>(\n  props: DataTableSortingProps,\n  options: TableOptions<TData>,\n): void {\n  const configSortable = useDataTableConfigElement('sortable');\n\n  const [sorting, setSorting] = useControllableState<DataTableColumnSort[]>({\n    value: props.sortBy,\n    defaultValue: props.defaultSortBy,\n    onChange: props.onSortByChange,\n  });\n\n  const { sortable: sortableProp } = props;\n  let sortable = false;\n\n  if (sortableProp !== undefined) {\n    if (typeof sortableProp === 'boolean') {\n      sortable = sortableProp;\n      options.manualSorting = false;\n    } else {\n      sortable = true;\n      // To do: should reconsider is there a better and simpler way (simpler API exposed) that we can check wheater the consumer wants to keep default sorting\n      // or they want to implement custom data pre sorting\n      if (sortableProp.manualSort === true) {\n        options.manualSorting = true;\n      } else {\n        options.manualSorting = undefined;\n      }\n    }\n  } else if (configSortable !== undefined) {\n    if (typeof configSortable === 'boolean') {\n      sortable = configSortable;\n    } else {\n      sortable = true;\n\n      if (configSortable.manualSort === true) {\n        options.manualSorting = true;\n      } else {\n        options.manualSorting = undefined;\n      }\n    }\n  }\n\n  options.enableSorting = sortable;\n  options.state = {\n    ...options.state,\n    sorting,\n  };\n  options.onSortingChange = setSorting;\n}\n\nconst sortingFunctions = {\n  text: stringlikeCompare,\n  textCaseSensitive: stringlikeCompareCaseSensitive,\n  number: numberlikeCompare,\n  datetime: datelikeCompare,\n};\n\n/**\n * @internal\n */\nexport const Sorting: TableFeature = {\n  createColumn<TData extends RowData, TValue>(\n    column: Column<TData, TValue>,\n    table: Table<TData>,\n  ) {\n    column.getCustomSortingFn = () => {\n      if (!column) {\n        throw new Error();\n      }\n\n      if (isFunction(column.columnDef.customSortingFn)) {\n        return column.columnDef.customSortingFn;\n      }\n\n      if (\n        typeof column.columnDef.sortType === 'string' &&\n        sortingFunctions[column.columnDef.sortType]\n      ) {\n        return sortingFunctions[\n          column.columnDef.sortType\n        ] as DataTableCustomSortingFn<TValue>;\n      }\n\n      return sortingFunctions['text'] as DataTableCustomSortingFn<TValue>;\n    };\n\n    column.getAutoSortDir = () => {\n      // overwrite the default from react table\n      // by default all columns should be sorted ascending first\n      return 'asc';\n    };\n\n    column.getCanSort = () => {\n      // Grouped columns should for now not be sortable.\n      if (isGroupColumnDef(column.columnDef)) {\n        return false;\n      }\n      return (\n        (column.columnDef.enableSorting ?? true) &&\n        (table.options.enableSorting ?? false) &&\n        !!column.accessorFn\n      );\n    };\n\n    // Override toggleSorting to fix multi-sort clearing when plain-clicking\n    // the last (lowest-priority) column in a multi-sort.\n    // The original implementation only replaces the sorting state when the clicked column\n    // is NOT the last in the sort array.\n    const originalToggleSorting = column.toggleSorting;\n    column.toggleSorting = (desc, isMulti) => {\n      if (!isMulti) {\n        const oldSorting = table.getState().sorting;\n\n        if (oldSorting && oldSorting.length > 1) {\n          const existingIndex = oldSorting.findIndex((s) => s.id === column.id);\n\n          // In multi-sort mode, plain-clicking a sorted column should clear all other sorted columns\n          // and keep only the clicked column, with its direction cycled to the next value.\n          // Out-of-the-box Tanstack only does this if the clicked column is not the last in the sorting array for some reason,\n          // which is why we need to override the function for specific case where the clicked column is the last in the sorting array.\n          if (existingIndex === oldSorting.length - 1) {\n            const nextSortingOrder = column.getNextSortingOrder();\n            const nextDesc = desc ?? nextSortingOrder === 'desc';\n            table.setSorting([{ id: column.id, desc: nextDesc }]);\n            return;\n          }\n        }\n      }\n      originalToggleSorting(desc, isMulti);\n    };\n  },\n\n  createTable<TData extends RowData>(table: Table<TData>) {\n    assignRowMethods(table, {\n      getSortingValue(this: Row<TData>, columnId: string) {\n        if (Object.hasOwn(this._sortingValuesCache, columnId)) {\n          return this._sortingValuesCache[columnId];\n        }\n\n        const column = table.getColumn(columnId);\n\n        if (column && isColumnDefWithSortAccessor(column.columnDef)) {\n          const sortAccessor = column.columnDef.sortAccessor;\n          if (sortAccessor && typeof sortAccessor === 'string') {\n            return sortAccessor.split('.').reduce(\n              // @ts-expect-error Strict mode transition - needs to be investigated\n              (obj, key) => obj[key] as Record<string, unknown>,\n              this.original,\n            );\n          } else if (typeof sortAccessor === 'function') {\n            return sortAccessor(this.original);\n          }\n        }\n\n        if (!column?.accessorFn) {\n          return undefined;\n        }\n\n        this._sortingValuesCache[columnId] = column.accessorFn(\n          this.original,\n          this.index,\n        );\n\n        return this._sortingValuesCache[columnId];\n      },\n    });\n  },\n\n  createRow<TData extends RowData>(row: Row<TData>, table: Table<TData>) {\n    row._sortingValuesCache = {};\n  },\n\n  createHeader<TData extends RowData, TValue>(\n    header: Header<TData, TValue>,\n    table: Table<TData>,\n  ) {\n    header.getAriaSortAttribute = () => {\n      if (\n        table.options.enableSorting &&\n        header.column.columnDef.enableSorting !== false &&\n        header.column.columns.length === 0\n      ) {\n        const isSorted = header.column.getIsSorted();\n        if (isSorted) {\n          return isSorted === 'asc' ? 'ascending' : 'descending';\n        }\n        return 'none';\n      }\n      return undefined;\n    };\n\n    header.getCanSortByHeaderClick = () => {\n      if (header.column.getCanColumnActions() === true) {\n        return false;\n      }\n      return header.column.getCanSort();\n    };\n  },\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/tables/DataTable/features/Sorting/Sorting.sty.js

@@ -12,8 +12,12 @@ import "../../components/DataTableHeaderCell.css";
 import "../../components/DataTableDefaultCell.css";
 import "./Sorting.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var sortingArrow = _7a468({ defaultClassName: "_cu1al70-3-2-0", variantClassNames: { arrowUp: { true: "_cu1al71-3-2-0" }, rowDensity: { "default": "_cu1al72-3-2-0", condensed: "_cu1al73-3-2-0", comfortable: "_cu1al74-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
+var multiSortIndicatorBubble = "_cu1al70-3-3-0";
+var sortOrderIndicator = "_cu1al71-3-3-0";
+var sortingArrow = _7a468({ defaultClassName: "_cu1al72-3-3-0", variantClassNames: { arrowUp: { true: "_cu1al73-3-3-0" }, rowDensity: { "default": "_cu1al74-3-3-0", condensed: "_cu1al75-3-3-0", comfortable: "_cu1al76-3-3-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
+  multiSortIndicatorBubble,
+  sortOrderIndicator,
   sortingArrow
 };
 //# sourceMappingURL=Sorting.sty.js.map

package/esm/tables/DataTable/features/Sorting/Sorting.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/Sorting/Sorting.css.ts"],
-  "sourcesContent": ["import '../../components/Alignment.css';\nimport '../../DataTable.css';\nimport '../../components/DataTableVirtualizationContainer.css';\nimport '../RowOrder/RowOrder.css';\nimport '../RowDetails/RowDetails.css';\nimport '../RowInteractivity/RowInteractivity.css';\nimport '../../components/DataTableRow.css';\nimport '../Thresholds/Thresholds.css';\nimport '../../components/DataTableCell.css';\nimport '../ColumnOrder/ColumnOrder.css';\nimport '../../components/DataTableHeaderCell.css';\nimport '../../components/DataTableDefaultCell.css';\nimport './Sorting.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var sortingArrow = _7a468({defaultClassName:'_cu1al70-3-2-0',variantClassNames:{arrowUp:{true:'_cu1al71-3-2-0'},rowDensity:{'default':'_cu1al72-3-2-0',condensed:'_cu1al73-3-2-0',comfortable:'_cu1al74-3-2-0'}},defaultVariants:{},compoundVariants:[]});"],
-  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,iBAAgB,GAAE,YAAW,EAAC,WAAU,kBAAiB,WAAU,kBAAiB,aAAY,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
+  "sourcesContent": ["import '../../components/Alignment.css';\nimport '../../DataTable.css';\nimport '../../components/DataTableVirtualizationContainer.css';\nimport '../RowOrder/RowOrder.css';\nimport '../RowDetails/RowDetails.css';\nimport '../RowInteractivity/RowInteractivity.css';\nimport '../../components/DataTableRow.css';\nimport '../Thresholds/Thresholds.css';\nimport '../../components/DataTableCell.css';\nimport '../ColumnOrder/ColumnOrder.css';\nimport '../../components/DataTableHeaderCell.css';\nimport '../../components/DataTableDefaultCell.css';\nimport './Sorting.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var multiSortIndicatorBubble = '_cu1al70-3-3-0';\nexport var sortOrderIndicator = '_cu1al71-3-3-0';\nexport var sortingArrow = _7a468({defaultClassName:'_cu1al72-3-3-0',variantClassNames:{arrowUp:{true:'_cu1al73-3-3-0'},rowDensity:{'default':'_cu1al74-3-3-0',condensed:'_cu1al75-3-3-0',comfortable:'_cu1al76-3-3-0'}},defaultVariants:{},compoundVariants:[]});"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,2BAA2B;AAC/B,IAAI,qBAAqB;AACzB,IAAI,eAAe,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,iBAAgB,GAAE,YAAW,EAAC,WAAU,kBAAiB,WAAU,kBAAiB,aAAY,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/tables/DataTable/features/Sorting/SortingHeaderButton.js

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import { useIntl } from "react-intl";
 import {
@@ -6,28 +6,47 @@ import {
   SorterSmallDoubleIcon
 } from "@dynatrace/strato-icons";
 import * as styles from "./Sorting.sty.js";
+import { Text } from "../../../../typography/text/Text.js";
 import { dataTableMessages } from "../../messages.js";
 const SortingArrowIndicators = (props) => {
-  const { isSorted, nextSortingOrder, rowDensity } = props;
+  const { isSorted, multiSortPriority, nextSortingOrder, rowDensity } = props;
   const intl = useIntl();
-  let dataDtName = "ColumnHeaderSortIconUnsort";
+  const dataDtName = "ColumnHeaderSortIcon";
+  let dataDtProperties = "state:clearSort";
   if (nextSortingOrder === "asc") {
-    dataDtName = "ColumnHeaderSortIconAscending";
+    dataDtProperties = "state:ascending";
   } else if (nextSortingOrder === "desc") {
-    dataDtName = "ColumnHeaderSortIconDescending";
+    dataDtProperties = "state:descending";
   }
   if (isSorted !== false) {
-    return /* @__PURE__ */ jsx(
+    const sortedDirectionIcon = /* @__PURE__ */ jsx(
       ArrowSmallDownIcon,
       {
         "data-sorticon": true,
         "data-dt-name": dataDtName,
+        "data-dt-properties": dataDtProperties,
         style: { display: "inline" },
         className: clsx(
           styles.sortingArrow({ arrowUp: isSorted === "asc", rowDensity })
         )
       }
     );
+    if (multiSortPriority !== void 0) {
+      return /* @__PURE__ */ jsxs(Text, { as: "span", className: styles.multiSortIndicatorBubble, children: [
+        sortedDirectionIcon,
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            as: "span",
+            textStyle: "small-emphasized",
+            "aria-hidden": "true",
+            className: styles.sortOrderIndicator,
+            children: multiSortPriority
+          }
+        )
+      ] });
+    }
+    return sortedDirectionIcon;
   }
   return /* @__PURE__ */ jsx(
     SorterSmallDoubleIcon,
@@ -35,7 +54,8 @@ const SortingArrowIndicators = (props) => {
       "data-sorticon": true,
       "aria-label": intl.formatMessage(dataTableMessages.sortableColumnIcon),
       className: styles.sortingArrow({ rowDensity }),
-      "data-dt-name": dataDtName
+      "data-dt-name": dataDtName,
+      "data-dt-properties": dataDtProperties
     }
   );
 };

package/esm/tables/DataTable/features/Sorting/SortingHeaderButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/Sorting/SortingHeaderButton.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type PropsWithChildren, type JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  ArrowSmallDownIcon,\n  SorterSmallDoubleIcon,\n} from '@dynatrace/strato-icons';\n\nimport * as styles from './Sorting.sty.js';\nimport { dataTableMessages } from '../../messages.js';\nimport type { SortDirection } from '../../tanstack-table-core-override/src/index.js';\n\n/**\n * Renders button within the column header to trigger sorting directly on header click.\n * @internal\n */\nexport const SortingArrowIndicators = (\n  props: PropsWithChildren<{\n    isSorted?: false | SortDirection;\n    nextSortingOrder: false | SortDirection | undefined;\n    rowDensity: 'default' | 'condensed' | 'comfortable';\n  }>,\n): JSX.Element => {\n  const { isSorted, nextSortingOrder, rowDensity } = props;\n\n  const intl = useIntl();\n\n  let dataDtName = 'ColumnHeaderSortIconUnsort';\n  if (nextSortingOrder === 'asc') {\n    dataDtName = 'ColumnHeaderSortIconAscending';\n  } else if (nextSortingOrder === 'desc') {\n    dataDtName = 'ColumnHeaderSortIconDescending';\n  }\n\n  if (isSorted !== false) {\n    return (\n      <ArrowSmallDownIcon\n        data-sorticon\n        data-dt-name={dataDtName}\n        style={{ display: 'inline' }}\n        className={clsx(\n          styles.sortingArrow({ arrowUp: isSorted === 'asc', rowDensity }),\n        )}\n      />\n    );\n  }\n\n  return (\n    <SorterSmallDoubleIcon\n      data-sorticon\n      aria-label={intl.formatMessage(dataTableMessages.sortableColumnIcon)}\n      className={styles.sortingArrow({ rowDensity })}\n      data-dt-name={dataDtName}\n    />\n  );\n};\n"],
-  "mappings": "AAqCM;AArCN,OAAO,UAAU;AAEjB,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,YAAY,YAAY;AACxB,SAAS,yBAAyB;AAO3B,MAAM,yBAAyB,CACpC,UAKgB;AAChB,QAAM,EAAE,UAAU,kBAAkB,WAAW,IAAI;AAEnD,QAAM,OAAO,QAAQ;AAErB,MAAI,aAAa;AACjB,MAAI,qBAAqB,OAAO;AAC9B,iBAAa;AAAA,EACf,WAAW,qBAAqB,QAAQ;AACtC,iBAAa;AAAA,EACf;AAEA,MAAI,aAAa,OAAO;AACtB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,iBAAa;AAAA,QACb,gBAAc;AAAA,QACd,OAAO,EAAE,SAAS,SAAS;AAAA,QAC3B,WAAW;AAAA,UACT,OAAO,aAAa,EAAE,SAAS,aAAa,OAAO,WAAW,CAAC;AAAA,QACjE;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAa;AAAA,MACb,cAAY,KAAK,cAAc,kBAAkB,kBAAkB;AAAA,MACnE,WAAW,OAAO,aAAa,EAAE,WAAW,CAAC;AAAA,MAC7C,gBAAc;AAAA;AAAA,EAChB;AAEJ;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { type PropsWithChildren, type JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  ArrowSmallDownIcon,\n  SorterSmallDoubleIcon,\n} from '@dynatrace/strato-icons';\n\nimport * as styles from './Sorting.sty.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { dataTableMessages } from '../../messages.js';\nimport type { SortDirection } from '../../tanstack-table-core-override/src/index.js';\n\n/**\n * Renders button within the column header to trigger sorting directly on header click.\n * @internal\n */\nexport const SortingArrowIndicators = (\n  props: PropsWithChildren<{\n    isSorted?: false | SortDirection;\n    nextSortingOrder?: false | SortDirection;\n    multiSortPriority?: number;\n    rowDensity: 'default' | 'condensed' | 'comfortable';\n  }>,\n): JSX.Element => {\n  const { isSorted, multiSortPriority, nextSortingOrder, rowDensity } = props;\n\n  const intl = useIntl();\n  const dataDtName = 'ColumnHeaderSortIcon';\n\n  let dataDtProperties = 'state:clearSort';\n  if (nextSortingOrder === 'asc') {\n    dataDtProperties = 'state:ascending';\n  } else if (nextSortingOrder === 'desc') {\n    dataDtProperties = 'state:descending';\n  }\n\n  if (isSorted !== false) {\n    const sortedDirectionIcon = (\n      <ArrowSmallDownIcon\n        data-sorticon\n        data-dt-name={dataDtName}\n        data-dt-properties={dataDtProperties}\n        style={{ display: 'inline' }}\n        className={clsx(\n          styles.sortingArrow({ arrowUp: isSorted === 'asc', rowDensity }),\n        )}\n      />\n    );\n    if (multiSortPriority !== undefined) {\n      return (\n        <Text as=\"span\" className={styles.multiSortIndicatorBubble}>\n          {sortedDirectionIcon}\n          <Text\n            as=\"span\"\n            textStyle=\"small-emphasized\"\n            aria-hidden=\"true\"\n            className={styles.sortOrderIndicator}\n          >\n            {multiSortPriority}\n          </Text>\n        </Text>\n      );\n    }\n\n    return sortedDirectionIcon;\n  }\n\n  return (\n    <SorterSmallDoubleIcon\n      data-sorticon\n      aria-label={intl.formatMessage(dataTableMessages.sortableColumnIcon)}\n      className={styles.sortingArrow({ rowDensity })}\n      data-dt-name={dataDtName}\n      data-dt-properties={dataDtProperties}\n    />\n  );\n};\n"],
+  "mappings": "AAwCM,cAYE,YAZF;AAxCN,OAAO,UAAU;AAEjB,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,YAAY,YAAY;AACxB,SAAS,YAAY;AACrB,SAAS,yBAAyB;AAO3B,MAAM,yBAAyB,CACpC,UAMgB;AAChB,QAAM,EAAE,UAAU,mBAAmB,kBAAkB,WAAW,IAAI;AAEtE,QAAM,OAAO,QAAQ;AACrB,QAAM,aAAa;AAEnB,MAAI,mBAAmB;AACvB,MAAI,qBAAqB,OAAO;AAC9B,uBAAmB;AAAA,EACrB,WAAW,qBAAqB,QAAQ;AACtC,uBAAmB;AAAA,EACrB;AAEA,MAAI,aAAa,OAAO;AACtB,UAAM,sBACJ;AAAA,MAAC;AAAA;AAAA,QACC,iBAAa;AAAA,QACb,gBAAc;AAAA,QACd,sBAAoB;AAAA,QACpB,OAAO,EAAE,SAAS,SAAS;AAAA,QAC3B,WAAW;AAAA,UACT,OAAO,aAAa,EAAE,SAAS,aAAa,OAAO,WAAW,CAAC;AAAA,QACjE;AAAA;AAAA,IACF;AAEF,QAAI,sBAAsB,QAAW;AACnC,aACE,qBAAC,QAAK,IAAG,QAAO,WAAW,OAAO,0BAC/B;AAAA;AAAA,QACD;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,WAAU;AAAA,YACV,eAAY;AAAA,YACZ,WAAW,OAAO;AAAA,YAEjB;AAAA;AAAA,QACH;AAAA,SACF;AAAA,IAEJ;AAEA,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAa;AAAA,MACb,cAAY,KAAK,cAAc,kBAAkB,kBAAkB;AAAA,MACnE,WAAW,OAAO,aAAa,EAAE,WAAW,CAAC;AAAA,MAC7C,gBAAc;AAAA,MACd,sBAAoB;AAAA;AAAA,EACtB;AAEJ;",
   "names": []
 }

package/esm/tables/DataTable/features/SubRows/SubRowExpanders.js

@@ -48,7 +48,8 @@ function SubRowsHeaderExpander(props) {
       style: {
         color: Colors.Text.Neutral.Subdued
       },
-      "data-dt-name": isAllRowsExpanded ? "SubRowCollapseAll" : "SubRowExpandAll",
+      "data-dt-name": "SubRowExpandCollapseAll",
+      "data-dt-properties": `state:${isAllRowsExpanded ? "collapse" : "expand"}`,
       children: isAllRowsExpanded ? /* @__PURE__ */ jsx(MinusIcon, {}) : /* @__PURE__ */ jsx(PlusIcon, {})
     }
   );
@@ -112,7 +113,8 @@ function SubRowsCellExpander({
               row.toggleExpanded(!isExpanded);
               remeasureSubRowIndicatorColumn(table);
             },
-            "data-dt-name": isExpanded ? "SubRowCollapse" : "SubRowExpand",
+            "data-dt-name": "SubRowExpandCollapse",
+            "data-dt-properties": `state:${isExpanded ? "collapse" : "expand"}`,
             children: isExpanded ? /* @__PURE__ */ jsx(MinusIcon, { size: SUB_ROW_EXPANDER_ICON_SIZE }) : /* @__PURE__ */ jsx(PlusIcon, { size: SUB_ROW_EXPANDER_ICON_SIZE })
           }
         ) : null,

package/esm/tables/DataTable/features/SubRows/SubRowExpanders.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/SubRows/SubRowExpanders.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type JSX, useContext, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\nimport { MinusIcon, PlusIcon } from '@dynatrace/strato-icons';\n\nimport { SubrowCellContext } from './SubRowCellContext.js';\nimport { SubRowExpanderPath } from './SubRowExpanderPath.js';\nimport * as styles from './SubRows.sty.js';\nimport { getSubRowCellWidth } from './SubRows.js';\nimport {\n  DATA_TABLE_SUB_ROW_EXPANDER_ICON_SIZE as SUB_ROW_EXPANDER_ICON_SIZE,\n  DATA_TABLE_SUB_ROW_INDENT_GRID as SUB_ROW_INDENT_GRID,\n} from '../../constants.js';\nimport {\n  useDataTable,\n  useDataTableRow,\n} from '../../contexts/DataTableContext.js';\nimport type { Table } from '../../hooks/useTable/types.js';\nimport { dataTableMessages } from '../../messages.js';\nimport {\n  isChartColumnType,\n  type DataTableColumnType,\n} from '../ColumnTypes/column-types-types.js';\n\nfunction remeasureSubRowIndicatorColumn(table: Table<unknown>) {\n  const subrowIndicatorColumnId = table.getSubRowIndicatorColumnId();\n  if (subrowIndicatorColumnId) {\n    table.remeasureColumn(subrowIndicatorColumnId);\n  }\n}\n\n/**\n * @internal\n */\nexport function SubRowsHeaderExpander(\n  props: Readonly<{ isAllRowsExpanded: boolean }>,\n): JSX.Element {\n  const { isAllRowsExpanded } = props;\n  const table = useDataTable();\n  const intl = useIntl();\n\n  return (\n    <button\n      type=\"button\"\n      className={clsx(\n        styles.expandButtonHeaderCellWrapper,\n        styles.expanderButton,\n      )}\n      onClick={() => {\n        table.toggleAllRowsExpanded();\n        remeasureSubRowIndicatorColumn(table);\n      }}\n      aria-label={intl.formatMessage(dataTableMessages.subRowAllTrigger, {\n        expandState: isAllRowsExpanded ? 'other' : 'expand',\n      })}\n      style={{\n        color: Colors.Text.Neutral.Subdued,\n      }}\n      data-dt-name={isAllRowsExpanded ? 'SubRowCollapseAll' : 'SubRowExpandAll'}\n    >\n      {isAllRowsExpanded ? <MinusIcon /> : <PlusIcon />}\n    </button>\n  );\n}\n\n/**\n * @internal\n */\nexport function SubRowsCellExpander({\n  columnType,\n}: {\n  columnType: DataTableColumnType | undefined;\n}): JSX.Element | null {\n  const intl = useIntl();\n  const table = useDataTable();\n  const row = useDataTableRow();\n\n  const subrowContext = useContext(SubrowCellContext);\n  const subRowExpandButtonWrapperRef = useRef<HTMLDivElement>(null);\n\n  if (!row) {\n    return null;\n  }\n\n  const {\n    canExpand: rowCanExpand,\n    canExpandDisabled: rowCanExpandDisabled,\n    isExpanded,\n  } = subrowContext;\n\n  const indentWidth = SUB_ROW_INDENT_GRID * row.depth;\n  const shouldCorrectIndicatorWidth = isChartColumnType(columnType);\n\n  const subRowDepth = table.getSubRowOpenDepth();\n  const depthDifference = subRowDepth - row.depth;\n  const widthCorrection = SUB_ROW_INDENT_GRID * depthDifference;\n  const rowDensity = table.getVisualVariantOptions().rowDensity;\n  let width = getSubRowCellWidth(rowDensity, indentWidth);\n  if (shouldCorrectIndicatorWidth) {\n    width = `calc(${width} + ${widthCorrection}px)`;\n  }\n\n  return (\n    <div\n      ref={subRowExpandButtonWrapperRef}\n      className={clsx(styles.expandButtonCellWrapper)}\n      style={{\n        width,\n      }}\n    >\n      {row.depth > 0 ? (\n        <SubRowExpanderPath\n          rowId={row.id}\n          width={indentWidth}\n          rowLineConfig={table.getRowLineConfig(row.id)}\n          rowCanExpand={rowCanExpand}\n        />\n      ) : null}\n\n      {/* Only render a button if the row can actually expand */}\n      {rowCanExpand ? (\n        <button\n          disabled={rowCanExpandDisabled}\n          type=\"button\"\n          aria-label={intl.formatMessage(dataTableMessages.subRowTrigger, {\n            expandState: isExpanded ? 'other' : 'expand',\n            id: row.id,\n          })}\n          aria-expanded={isExpanded}\n          className={styles.expanderButton}\n          onClick={() => {\n            row.toggleExpanded(!isExpanded);\n            remeasureSubRowIndicatorColumn(table);\n          }}\n          data-dt-name={isExpanded ? 'SubRowCollapse' : 'SubRowExpand'}\n        >\n          {isExpanded ? (\n            <MinusIcon size={SUB_ROW_EXPANDER_ICON_SIZE} />\n          ) : (\n            <PlusIcon size={SUB_ROW_EXPANDER_ICON_SIZE} />\n          )}\n        </button>\n      ) : null}\n\n      {shouldCorrectIndicatorWidth ? (\n        <div style={{ width: widthCorrection }} />\n      ) : null}\n    </div>\n  );\n}\n"],
-  "mappings": "AA8D2B,cA2CvB,YA3CuB;AA9D3B,OAAO,UAAU;AACjB,SAAmB,YAAY,cAAc;AAC7C,SAAS,eAAe;AAExB,OAAO,YAAY;AACnB,SAAS,WAAW,gBAAgB;AAEpC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,YAAY,YAAY;AACxB,SAAS,0BAA0B;AACnC;AAAA,EACE,yCAAyC;AAAA,EACzC,kCAAkC;AAAA,OAC7B;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,yBAAyB;AAClC;AAAA,EACE;AAAA,OAEK;AAEP,SAAS,+BAA+B,OAAuB;AAC7D,QAAM,0BAA0B,MAAM,2BAA2B;AACjE,MAAI,yBAAyB;AAC3B,UAAM,gBAAgB,uBAAuB;AAAA,EAC/C;AACF;AAKO,SAAS,sBACd,OACa;AACb,QAAM,EAAE,kBAAkB,IAAI;AAC9B,QAAM,QAAQ,aAAa;AAC3B,QAAM,OAAO,QAAQ;AAErB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW;AAAA,QACT,OAAO;AAAA,QACP,OAAO;AAAA,MACT;AAAA,MACA,SAAS,MAAM;AACb,cAAM,sBAAsB;AAC5B,uCAA+B,KAAK;AAAA,MACtC;AAAA,MACA,cAAY,KAAK,cAAc,kBAAkB,kBAAkB;AAAA,QACjE,aAAa,oBAAoB,UAAU;AAAA,MAC7C,CAAC;AAAA,MACD,OAAO;AAAA,QACL,OAAO,OAAO,KAAK,QAAQ;AAAA,MAC7B;AAAA,MACA,gBAAc,oBAAoB,sBAAsB;AAAA,MAEvD,8BAAoB,oBAAC,aAAU,IAAK,oBAAC,YAAS;AAAA;AAAA,EACjD;AAEJ;AAKO,SAAS,oBAAoB;AAAA,EAClC;AACF,GAEuB;AACrB,QAAM,OAAO,QAAQ;AACrB,QAAM,QAAQ,aAAa;AAC3B,QAAM,MAAM,gBAAgB;AAE5B,QAAM,gBAAgB,WAAW,iBAAiB;AAClD,QAAM,+BAA+B,OAAuB,IAAI;AAEhE,MAAI,CAAC,KAAK;AACR,WAAO;AAAA,EACT;AAEA,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,mBAAmB;AAAA,IACnB;AAAA,EACF,IAAI;AAEJ,QAAM,cAAc,sBAAsB,IAAI;AAC9C,QAAM,8BAA8B,kBAAkB,UAAU;AAEhE,QAAM,cAAc,MAAM,mBAAmB;AAC7C,QAAM,kBAAkB,cAAc,IAAI;AAC1C,QAAM,kBAAkB,sBAAsB;AAC9C,QAAM,aAAa,MAAM,wBAAwB,EAAE;AACnD,MAAI,QAAQ,mBAAmB,YAAY,WAAW;AACtD,MAAI,6BAA6B;AAC/B,YAAQ,QAAQ,KAAK,MAAM,eAAe;AAAA,EAC5C;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,KAAK,OAAO,uBAAuB;AAAA,MAC9C,OAAO;AAAA,QACL;AAAA,MACF;AAAA,MAEC;AAAA,YAAI,QAAQ,IACX;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,IAAI;AAAA,YACX,OAAO;AAAA,YACP,eAAe,MAAM,iBAAiB,IAAI,EAAE;AAAA,YAC5C;AAAA;AAAA,QACF,IACE;AAAA,QAGH,eACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,MAAK;AAAA,YACL,cAAY,KAAK,cAAc,kBAAkB,eAAe;AAAA,cAC9D,aAAa,aAAa,UAAU;AAAA,cACpC,IAAI,IAAI;AAAA,YACV,CAAC;AAAA,YACD,iBAAe;AAAA,YACf,WAAW,OAAO;AAAA,YAClB,SAAS,MAAM;AACb,kBAAI,eAAe,CAAC,UAAU;AAC9B,6CAA+B,KAAK;AAAA,YACtC;AAAA,YACA,gBAAc,aAAa,mBAAmB;AAAA,YAE7C,uBACC,oBAAC,aAAU,MAAM,4BAA4B,IAE7C,oBAAC,YAAS,MAAM,4BAA4B;AAAA;AAAA,QAEhD,IACE;AAAA,QAEH,8BACC,oBAAC,SAAI,OAAO,EAAE,OAAO,gBAAgB,GAAG,IACtC;AAAA;AAAA;AAAA,EACN;AAEJ;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { type JSX, useContext, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\nimport { MinusIcon, PlusIcon } from '@dynatrace/strato-icons';\n\nimport { SubrowCellContext } from './SubRowCellContext.js';\nimport { SubRowExpanderPath } from './SubRowExpanderPath.js';\nimport * as styles from './SubRows.sty.js';\nimport { getSubRowCellWidth } from './SubRows.js';\nimport {\n  DATA_TABLE_SUB_ROW_EXPANDER_ICON_SIZE as SUB_ROW_EXPANDER_ICON_SIZE,\n  DATA_TABLE_SUB_ROW_INDENT_GRID as SUB_ROW_INDENT_GRID,\n} from '../../constants.js';\nimport {\n  useDataTable,\n  useDataTableRow,\n} from '../../contexts/DataTableContext.js';\nimport type { Table } from '../../hooks/useTable/types.js';\nimport { dataTableMessages } from '../../messages.js';\nimport {\n  isChartColumnType,\n  type DataTableColumnType,\n} from '../ColumnTypes/column-types-types.js';\n\nfunction remeasureSubRowIndicatorColumn(table: Table<unknown>) {\n  const subrowIndicatorColumnId = table.getSubRowIndicatorColumnId();\n  if (subrowIndicatorColumnId) {\n    table.remeasureColumn(subrowIndicatorColumnId);\n  }\n}\n\n/**\n * @internal\n */\nexport function SubRowsHeaderExpander(\n  props: Readonly<{ isAllRowsExpanded: boolean }>,\n): JSX.Element {\n  const { isAllRowsExpanded } = props;\n  const table = useDataTable();\n  const intl = useIntl();\n\n  return (\n    <button\n      type=\"button\"\n      className={clsx(\n        styles.expandButtonHeaderCellWrapper,\n        styles.expanderButton,\n      )}\n      onClick={() => {\n        table.toggleAllRowsExpanded();\n        remeasureSubRowIndicatorColumn(table);\n      }}\n      aria-label={intl.formatMessage(dataTableMessages.subRowAllTrigger, {\n        expandState: isAllRowsExpanded ? 'other' : 'expand',\n      })}\n      style={{\n        color: Colors.Text.Neutral.Subdued,\n      }}\n      data-dt-name=\"SubRowExpandCollapseAll\"\n      data-dt-properties={`state:${isAllRowsExpanded ? 'collapse' : 'expand'}`}\n    >\n      {isAllRowsExpanded ? <MinusIcon /> : <PlusIcon />}\n    </button>\n  );\n}\n\n/**\n * @internal\n */\nexport function SubRowsCellExpander({\n  columnType,\n}: {\n  columnType: DataTableColumnType | undefined;\n}): JSX.Element | null {\n  const intl = useIntl();\n  const table = useDataTable();\n  const row = useDataTableRow();\n\n  const subrowContext = useContext(SubrowCellContext);\n  const subRowExpandButtonWrapperRef = useRef<HTMLDivElement>(null);\n\n  if (!row) {\n    return null;\n  }\n\n  const {\n    canExpand: rowCanExpand,\n    canExpandDisabled: rowCanExpandDisabled,\n    isExpanded,\n  } = subrowContext;\n\n  const indentWidth = SUB_ROW_INDENT_GRID * row.depth;\n  const shouldCorrectIndicatorWidth = isChartColumnType(columnType);\n\n  const subRowDepth = table.getSubRowOpenDepth();\n  const depthDifference = subRowDepth - row.depth;\n  const widthCorrection = SUB_ROW_INDENT_GRID * depthDifference;\n  const rowDensity = table.getVisualVariantOptions().rowDensity;\n  let width = getSubRowCellWidth(rowDensity, indentWidth);\n  if (shouldCorrectIndicatorWidth) {\n    width = `calc(${width} + ${widthCorrection}px)`;\n  }\n\n  return (\n    <div\n      ref={subRowExpandButtonWrapperRef}\n      className={clsx(styles.expandButtonCellWrapper)}\n      style={{\n        width,\n      }}\n    >\n      {row.depth > 0 ? (\n        <SubRowExpanderPath\n          rowId={row.id}\n          width={indentWidth}\n          rowLineConfig={table.getRowLineConfig(row.id)}\n          rowCanExpand={rowCanExpand}\n        />\n      ) : null}\n\n      {/* Only render a button if the row can actually expand */}\n      {rowCanExpand ? (\n        <button\n          disabled={rowCanExpandDisabled}\n          type=\"button\"\n          aria-label={intl.formatMessage(dataTableMessages.subRowTrigger, {\n            expandState: isExpanded ? 'other' : 'expand',\n            id: row.id,\n          })}\n          aria-expanded={isExpanded}\n          className={styles.expanderButton}\n          onClick={() => {\n            row.toggleExpanded(!isExpanded);\n            remeasureSubRowIndicatorColumn(table);\n          }}\n          data-dt-name=\"SubRowExpandCollapse\"\n          data-dt-properties={`state:${isExpanded ? 'collapse' : 'expand'}`}\n        >\n          {isExpanded ? (\n            <MinusIcon size={SUB_ROW_EXPANDER_ICON_SIZE} />\n          ) : (\n            <PlusIcon size={SUB_ROW_EXPANDER_ICON_SIZE} />\n          )}\n        </button>\n      ) : null}\n\n      {shouldCorrectIndicatorWidth ? (\n        <div style={{ width: widthCorrection }} />\n      ) : null}\n    </div>\n  );\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/tables/DataTable/features/SubRows/SubRows.css

@@ -1,4 +1,4 @@
-._1udh2jz0-3-2-0 {
+._1udh2jz0-3-3-0 {
   position: relative;
   padding-left: 0;
   padding-right: var(--dt-spacings-size-8, 8px);
@@ -9,67 +9,67 @@
   flex-shrink: 0;
   align-items: center;
 }
-._yj6voi3-3-2-0 ._1udh2jz0-3-2-0 {
+._yj6voi3-3-3-0 ._1udh2jz0-3-3-0 {
   align-items: start;
 }
-._yj6voi5-3-2-0 ._1udh2jz0-3-2-0 {
+._yj6voi5-3-3-0 ._1udh2jz0-3-3-0 {
   align-items: end;
 }
-._11pvd3zo-3-2-0 ._1udh2jz1-3-2-0, ._14k72813-3-2-0 ._1udh2jz1-3-2-0 {
+._11pvd3zy-3-3-0 ._1udh2jz1-3-3-0, ._14k72813-3-3-0 ._1udh2jz1-3-3-0 {
   margin-right: var(--dt-spacings-size-8, 8px);
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._11pvd3zp-3-2-0 ._1udh2jz1-3-2-0, ._14k72814-3-2-0 ._1udh2jz1-3-2-0 {
+._11pvd3zz-3-3-0 ._1udh2jz1-3-3-0, ._14k72814-3-3-0 ._1udh2jz1-3-3-0 {
   margin-right: var(--dt-spacings-size-2, 2px);
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._11pvd3zq-3-2-0 ._1udh2jz1-3-2-0, ._14k72815-3-2-0 ._1udh2jz1-3-2-0 {
+._11pvd3z10-3-3-0 ._1udh2jz1-3-3-0, ._14k72815-3-3-0 ._1udh2jz1-3-3-0 {
   margin-right: var(--dt-spacings-size-12, 12px);
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._1ons7qua-3-2-0 ._1udh2jz2-3-2-0, ._14k72813-3-2-0 ._1udh2jz2-3-2-0 {
+._1ons7qua-3-3-0 ._1udh2jz2-3-3-0, ._14k72813-3-3-0 ._1udh2jz2-3-3-0 {
   padding-right: var(--dt-spacings-size-8, 8px);
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._1ons7qub-3-2-0 ._1udh2jz2-3-2-0, ._14k72814-3-2-0 ._1udh2jz2-3-2-0 {
+._1ons7qub-3-3-0 ._1udh2jz2-3-3-0, ._14k72814-3-3-0 ._1udh2jz2-3-3-0 {
   padding-right: var(--dt-spacings-size-2, 2px);
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._1ons7quc-3-2-0 ._1udh2jz2-3-2-0, ._14k72815-3-2-0 ._1udh2jz2-3-2-0 {
+._1ons7quc-3-3-0 ._1udh2jz2-3-3-0, ._14k72815-3-3-0 ._1udh2jz2-3-3-0 {
   padding-right: var(--dt-spacings-size-12, 12px);
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-[data-columntype='sparkline'] ._1udh2jz2-3-2-0 {
+[data-columntype='sparkline'] ._1udh2jz2-3-3-0 {
   align-items: center;
 }
-._1udh2jz3-3-2-0 {
+._1udh2jz3-3-3-0 {
   position: absolute;
   left: 0;
   overflow: hidden;
   stroke: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1ons7qua-3-2-0 ._1udh2jz3-3-2-0, ._14k72813-3-2-0 ._1udh2jz3-3-2-0 {
+._1ons7qua-3-3-0 ._1udh2jz3-3-3-0, ._14k72813-3-3-0 ._1udh2jz3-3-3-0 {
   top: calc(var(--dt-spacings-size-8, 8px) * -1);
   bottom: calc(var(--dt-spacings-size-8, 8px) * -1);
   height: calc(100% + (2 * var(--dt-spacings-size-8, 8px)));
 }
-._1ons7qub-3-2-0 ._1udh2jz3-3-2-0, ._14k72814-3-2-0 ._1udh2jz3-3-2-0 {
+._1ons7qub-3-3-0 ._1udh2jz3-3-3-0, ._14k72814-3-3-0 ._1udh2jz3-3-3-0 {
   top: calc(var(--dt-spacings-size-2, 2px) * -1);
   bottom: calc(var(--dt-spacings-size-2, 2px) * -1);
   height: calc(100% + (2 * var(--dt-spacings-size-2, 2px)));
 }
-._1ons7quc-3-2-0 ._1udh2jz3-3-2-0, ._14k72815-3-2-0 ._1udh2jz3-3-2-0 {
+._1ons7quc-3-3-0 ._1udh2jz3-3-3-0, ._14k72815-3-3-0 ._1udh2jz3-3-3-0 {
   top: calc(var(--dt-spacings-size-12, 12px) * -1);
   bottom: calc(var(--dt-spacings-size-12, 12px) * -1);
   height: calc(100% + (2 * var(--dt-spacings-size-12, 12px)));
 }
-._1udh2jz4-3-2-0 {
+._1udh2jz4-3-3-0 {
   right: var(--dt-spacings-size-16, 16px);
 }
-._1udh2jz5-3-2-0 {
+._1udh2jz5-3-3-0 {
   right: calc(20 + var(--dt-spacings-size-16, 16px));
 }
-._1udh2jz6-3-2-0 {
+._1udh2jz6-3-3-0 {
   appearance: none;
   border: 0;
   line-height: 0;
@@ -84,10 +84,10 @@
   height: max-content;
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1udh2jz6-3-2-0:not([disabled]):hover {
+._1udh2jz6-3-3-0:not([disabled]):hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1udh2jz6-3-2-0[disabled] {
+._1udh2jz6-3-3-0[disabled] {
   color: var(--dt-colors-icon-neutral-disabled, #595a7d80);
   cursor: default;
 }

package/esm/tables/DataTable/features/SubRows/SubRows.sty.js

@@ -13,11 +13,11 @@ import "../../components/DataTableHeaderCell.css";
 import "../../components/DataTableDefaultCell.css";
 import "./SubRows.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var expandButtonCellWrapper = "_1udh2jz2-3-2-0 _1udh2jz0-3-2-0";
-var expandButtonHeaderCellWrapper = "_1udh2jz1-3-2-0 _1udh2jz0-3-2-0";
-var expandIndentSvg = "_1udh2jz3-3-2-0";
-var expandIndentSvgSize = _7a468({ defaultClassName: "_1udh2jz4-3-2-0", variantClassNames: { rowCanExpand: { true: "_1udh2jz5-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
-var expanderButton = "_1udh2jz6-3-2-0 _z0fq9b4-3-2-0 _z0fq9bc-3-2-0 _z0fq9b6-3-2-0 _z0fq9b8-3-2-0";
+var expandButtonCellWrapper = "_1udh2jz2-3-3-0 _1udh2jz0-3-3-0";
+var expandButtonHeaderCellWrapper = "_1udh2jz1-3-3-0 _1udh2jz0-3-3-0";
+var expandIndentSvg = "_1udh2jz3-3-3-0";
+var expandIndentSvgSize = _7a468({ defaultClassName: "_1udh2jz4-3-3-0", variantClassNames: { rowCanExpand: { true: "_1udh2jz5-3-3-0" } }, defaultVariants: {}, compoundVariants: [] });
+var expanderButton = "_1udh2jz6-3-3-0 _z0fq9b4-3-3-0 _z0fq9bc-3-3-0 _z0fq9b6-3-3-0 _z0fq9b8-3-3-0";
 export {
   expandButtonCellWrapper,
   expandButtonHeaderCellWrapper,

package/esm/tables/DataTable/features/SubRows/SubRows.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/SubRows/SubRows.css.ts"],
-  "sourcesContent": ["import '../../../../core/styles/focusRingStatic.css';\nimport '../../components/Alignment.css';\nimport '../../DataTable.css';\nimport '../../components/DataTableVirtualizationContainer.css';\nimport '../RowOrder/RowOrder.css';\nimport '../RowDetails/RowDetails.css';\nimport '../RowInteractivity/RowInteractivity.css';\nimport '../../components/DataTableRow.css';\nimport '../Thresholds/Thresholds.css';\nimport '../../components/DataTableCell.css';\nimport '../ColumnOrder/ColumnOrder.css';\nimport '../../components/DataTableHeaderCell.css';\nimport '../../components/DataTableDefaultCell.css';\nimport './SubRows.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var expandButtonCellWrapper = '_1udh2jz2-3-2-0 _1udh2jz0-3-2-0';\nexport var expandButtonHeaderCellWrapper = '_1udh2jz1-3-2-0 _1udh2jz0-3-2-0';\nexport var expandIndentSvg = '_1udh2jz3-3-2-0';\nexport var expandIndentSvgSize = _7a468({defaultClassName:'_1udh2jz4-3-2-0',variantClassNames:{rowCanExpand:{true:'_1udh2jz5-3-2-0'}},defaultVariants:{},compoundVariants:[]});\nexport var expanderButton = '_1udh2jz6-3-2-0 _z0fq9b4-3-2-0 _z0fq9bc-3-2-0 _z0fq9b6-3-2-0 _z0fq9b8-3-2-0';"],
+  "sourcesContent": ["import '../../../../core/styles/focusRingStatic.css';\nimport '../../components/Alignment.css';\nimport '../../DataTable.css';\nimport '../../components/DataTableVirtualizationContainer.css';\nimport '../RowOrder/RowOrder.css';\nimport '../RowDetails/RowDetails.css';\nimport '../RowInteractivity/RowInteractivity.css';\nimport '../../components/DataTableRow.css';\nimport '../Thresholds/Thresholds.css';\nimport '../../components/DataTableCell.css';\nimport '../ColumnOrder/ColumnOrder.css';\nimport '../../components/DataTableHeaderCell.css';\nimport '../../components/DataTableDefaultCell.css';\nimport './SubRows.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var expandButtonCellWrapper = '_1udh2jz2-3-3-0 _1udh2jz0-3-3-0';\nexport var expandButtonHeaderCellWrapper = '_1udh2jz1-3-3-0 _1udh2jz0-3-3-0';\nexport var expandIndentSvg = '_1udh2jz3-3-3-0';\nexport var expandIndentSvgSize = _7a468({defaultClassName:'_1udh2jz4-3-3-0',variantClassNames:{rowCanExpand:{true:'_1udh2jz5-3-3-0'}},defaultVariants:{},compoundVariants:[]});\nexport var expanderButton = '_1udh2jz6-3-3-0 _z0fq9b4-3-3-0 _z0fq9bc-3-3-0 _z0fq9b6-3-3-0 _z0fq9b8-3-3-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,0BAA0B;AAC9B,IAAI,gCAAgC;AACpC,IAAI,kBAAkB;AACtB,IAAI,sBAAsB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,cAAa,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACtK,IAAI,iBAAiB;",
   "names": []
 }

package/esm/tables/DataTable/features/Thresholds/Thresholds.css

@@ -1,4 +1,4 @@
-._1jrjqrd1-3-2-0 ._1jrjqrd2-3-2-0::before {
+._1jrjqrd1-3-3-0 ._1jrjqrd2-3-3-0::before {
   content: "";
   position: absolute;
   display: inline-block;
@@ -8,5 +8,5 @@
   width: var(--dt-spacings-size-4, 4px);
   left: var(--dt-spacings-size-0, 0);
   border-radius: 0 var(--dt-borders-radius-field-subdued, 3px) var(--dt-borders-radius-field-subdued, 3px) 0;
-  background-color: var(--_1jrjqrd0-3-2-0);
+  background-color: var(--_1jrjqrd0-3-3-0);
 }

package/esm/tables/DataTable/features/Thresholds/Thresholds.sty.js

@@ -1,7 +1,7 @@
 import "./Thresholds.css";
-var hasPillThresholds = "_1jrjqrd1-3-2-0";
-var thresholdPill = "_1jrjqrd2-3-2-0";
-var thresholdPillColor = "var(--_1jrjqrd0-3-2-0)";
+var hasPillThresholds = "_1jrjqrd1-3-3-0";
+var thresholdPill = "_1jrjqrd2-3-3-0";
+var thresholdPillColor = "var(--_1jrjqrd0-3-3-0)";
 export {
   hasPillThresholds,
   thresholdPill,

package/esm/tables/DataTable/features/Thresholds/Thresholds.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/Thresholds/Thresholds.css.ts"],
-  "sourcesContent": ["import './Thresholds.css';\nexport var hasPillThresholds = '_1jrjqrd1-3-2-0';\nexport var thresholdPill = '_1jrjqrd2-3-2-0';\nexport var thresholdPillColor = 'var(--_1jrjqrd0-3-2-0)';"],
+  "sourcesContent": ["import './Thresholds.css';\nexport var hasPillThresholds = '_1jrjqrd1-3-3-0';\nexport var thresholdPill = '_1jrjqrd2-3-3-0';\nexport var thresholdPillColor = 'var(--_1jrjqrd0-3-3-0)';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;AACxB,IAAI,gBAAgB;AACpB,IAAI,qBAAqB;",
   "names": []
 }

package/esm/tables/DataTable/features/UserActions/RowActions.css

@@ -1,4 +1,4 @@
-._bq8mqs0-3-2-0 {
+._bq8mqs0-3-3-0 {
   padding-left: var(--dt-spacings-size-2, 2px);
   padding-right: var(--dt-spacings-size-2, 2px);
   overflow: visible;
@@ -7,15 +7,15 @@
   flex-basis: 100%;
   gap: var(--dt-spacings-size-2, 2px);
 }
-._14k72813-3-2-0._bq8mqs0-3-2-0 {
+._14k72813-3-3-0._bq8mqs0-3-3-0 {
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
 }
-._14k72815-3-2-0._bq8mqs0-3-2-0 {
+._14k72815-3-3-0._bq8mqs0-3-3-0 {
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-6, 6px);
 }
-._14k72814-3-2-0._bq8mqs0-3-2-0 {
+._14k72814-3-3-0._bq8mqs0-3-3-0 {
   padding-top: var(--dt-spacings-size-0, 0);
   padding-bottom: var(--dt-spacings-size-0, 0);
 }

package/esm/tables/DataTable/features/UserActions/RowActions.sty.js

@@ -11,7 +11,7 @@ import "../ColumnOrder/ColumnOrder.css";
 import "../../components/DataTableHeaderCell.css";
 import "../../components/DataTableDefaultCell.css";
 import "./RowActions.css";
-var rowActions = "_bq8mqs0-3-2-0";
+var rowActions = "_bq8mqs0-3-3-0";
 export {
   rowActions
 };

package/esm/tables/DataTable/features/UserActions/RowActions.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/UserActions/RowActions.css.ts"],
-  "sourcesContent": ["import '../../components/Alignment.css';\nimport '../../DataTable.css';\nimport '../../components/DataTableVirtualizationContainer.css';\nimport '../RowOrder/RowOrder.css';\nimport '../RowDetails/RowDetails.css';\nimport '../RowInteractivity/RowInteractivity.css';\nimport '../../components/DataTableRow.css';\nimport '../Thresholds/Thresholds.css';\nimport '../../components/DataTableCell.css';\nimport '../ColumnOrder/ColumnOrder.css';\nimport '../../components/DataTableHeaderCell.css';\nimport '../../components/DataTableDefaultCell.css';\nimport './RowActions.css';\nexport var rowActions = '_bq8mqs0-3-2-0';"],
+  "sourcesContent": ["import '../../components/Alignment.css';\nimport '../../DataTable.css';\nimport '../../components/DataTableVirtualizationContainer.css';\nimport '../RowOrder/RowOrder.css';\nimport '../RowDetails/RowDetails.css';\nimport '../RowInteractivity/RowInteractivity.css';\nimport '../../components/DataTableRow.css';\nimport '../Thresholds/Thresholds.css';\nimport '../../components/DataTableCell.css';\nimport '../ColumnOrder/ColumnOrder.css';\nimport '../../components/DataTableHeaderCell.css';\nimport '../../components/DataTableDefaultCell.css';\nimport './RowActions.css';\nexport var rowActions = '_bq8mqs0-3-3-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,aAAa;",
   "names": []
 }

package/esm/tables/DataTable/features/UserActions/UserActions.css

@@ -1,4 +1,4 @@
-._duopj90-3-2-0 {
+._duopj90-3-3-0 {
   appearance: none;
   border: 0;
   padding: 0;
@@ -14,79 +14,79 @@
   width: 24px;
   z-index: var(--dt-elevations-default, 1);
 }
-._duopj90-3-2-0:hover {
+._duopj90-3-3-0:hover {
   cursor: pointer;
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._duopj90-3-2-0:focus {
+._duopj90-3-3-0:focus {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
   outline: none;
 }
-._1ons7qub-3-2-0 ._duopj90-3-2-0, ._14k72814-3-2-0 ~ ._duopj90-3-2-0, ._11pvd3zp-3-2-0 ._duopj90-3-2-0 {
+._1ons7qub-3-3-0 ._duopj90-3-3-0, ._14k72814-3-3-0 ~ ._duopj90-3-3-0, ._11pvd3zz-3-3-0 ._duopj90-3-3-0 {
   right: var(--dt-spacings-size-2, 2px);
   top: var(--dt-spacings-size-2, 2px);
 }
-._1ons7qua-3-2-0 ._duopj90-3-2-0, ._14k72813-3-2-0 ~ ._duopj90-3-2-0, ._11pvd3zo-3-2-0 ._duopj90-3-2-0 {
+._1ons7qua-3-3-0 ._duopj90-3-3-0, ._14k72813-3-3-0 ~ ._duopj90-3-3-0, ._11pvd3zy-3-3-0 ._duopj90-3-3-0 {
   right: var(--dt-spacings-size-8, 8px);
   top: var(--dt-spacings-size-8, 8px);
 }
-._1ons7quc-3-2-0  ._duopj90-3-2-0, ._14k72815-3-2-0 ~ ._duopj90-3-2-0, ._11pvd3zq-3-2-0 ._duopj90-3-2-0 {
+._1ons7quc-3-3-0  ._duopj90-3-3-0, ._14k72815-3-3-0 ~ ._duopj90-3-3-0, ._11pvd3z10-3-3-0 ._duopj90-3-3-0 {
   right: var(--dt-spacings-size-12, 12px);
   top: var(--dt-spacings-size-12, 12px);
 }
-._11pvd3zp-3-2-0._yj6voi0-3-2-0 ._duopj90-3-2-0, ._14k72814-3-2-0._yj6voi0-3-2-0 ~ ._duopj90-3-2-0, ._1ons7qub-3-2-0._yj6voi0-3-2-0 ._duopj90-3-2-0 {
+._11pvd3zz-3-3-0._yj6voi0-3-3-0 ._duopj90-3-3-0, ._14k72814-3-3-0._yj6voi0-3-3-0 ~ ._duopj90-3-3-0, ._1ons7qub-3-3-0._yj6voi0-3-3-0 ._duopj90-3-3-0 {
   left: var(--dt-spacings-size-2, 2px);
   top: var(--dt-spacings-size-2, 2px);
   right: auto;
 }
-._11pvd3zo-3-2-0._yj6voi0-3-2-0 ._duopj90-3-2-0, ._14k72813-3-2-0._yj6voi0-3-2-0 ~ ._duopj90-3-2-0, ._1ons7qua-3-2-0._yj6voi0-3-2-0 ._duopj90-3-2-0 {
+._11pvd3zy-3-3-0._yj6voi0-3-3-0 ._duopj90-3-3-0, ._14k72813-3-3-0._yj6voi0-3-3-0 ~ ._duopj90-3-3-0, ._1ons7qua-3-3-0._yj6voi0-3-3-0 ._duopj90-3-3-0 {
   left: var(--dt-spacings-size-8, 8px);
   top: var(--dt-spacings-size-8, 8px);
   right: auto;
 }
-._11pvd3zq-3-2-0._yj6voi0-3-2-0 ._duopj90-3-2-0, ._14k72815-3-2-0._yj6voi0-3-2-0 ~ ._duopj90-3-2-0, ._1ons7quc-3-2-0._yj6voi0-3-2-0 ._duopj90-3-2-0 {
+._11pvd3z10-3-3-0._yj6voi0-3-3-0 ._duopj90-3-3-0, ._14k72815-3-3-0._yj6voi0-3-3-0 ~ ._duopj90-3-3-0, ._1ons7quc-3-3-0._yj6voi0-3-3-0 ._duopj90-3-3-0 {
   left: var(--dt-spacings-size-12, 12px);
   top: var(--dt-spacings-size-12, 12px);
   right: auto;
 }
-._1ons7qub-3-2-0 ._yj6voi0-3-2-0 ._duopj90-3-2-0 {
+._1ons7qub-3-3-0 ._yj6voi0-3-3-0 ._duopj90-3-3-0 {
   left: var(--dt-spacings-size-2, 2px);
   top: var(--dt-spacings-size-2, 2px);
   right: auto;
 }
-._1ons7qua-3-2-0 ._yj6voi0-3-2-0 ._duopj90-3-2-0 {
+._1ons7qua-3-3-0 ._yj6voi0-3-3-0 ._duopj90-3-3-0 {
   left: var(--dt-spacings-size-8, 8px);
   top: var(--dt-spacings-size-8, 8px);
   right: auto;
 }
-._1ons7quc-3-2-0 ._yj6voi0-3-2-0 ._duopj90-3-2-0 {
+._1ons7quc-3-3-0 ._yj6voi0-3-3-0 ._duopj90-3-3-0 {
   left: var(--dt-spacings-size-12, 12px);
   top: var(--dt-spacings-size-12, 12px);
   right: auto;
 }
-._14k72814-3-2-0 ._yj6voi0-3-2-0 ~ ._duopj90-3-2-0 {
+._14k72814-3-3-0 ._yj6voi0-3-3-0 ~ ._duopj90-3-3-0 {
   left: var(--dt-spacings-size-2, 2px);
   top: var(--dt-spacings-size-2, 2px);
   right: auto;
 }
-._14k72813-3-2-0 ._yj6voi0-3-2-0 ~ ._duopj90-3-2-0 {
+._14k72813-3-3-0 ._yj6voi0-3-3-0 ~ ._duopj90-3-3-0 {
   left: var(--dt-spacings-size-8, 8px);
   top: var(--dt-spacings-size-8, 8px);
   right: auto;
 }
-._14k72815-3-2-0 ._yj6voi0-3-2-0 ~ ._duopj90-3-2-0 {
+._14k72815-3-3-0 ._yj6voi0-3-3-0 ~ ._duopj90-3-3-0 {
   left: var(--dt-spacings-size-12, 12px);
   top: var(--dt-spacings-size-12, 12px);
   right: auto;
 }
-._duopj90-3-2-0[data-state="open"] {
+._duopj90-3-3-0[data-state="open"] {
   display: inline-block;
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1ons7qu2-3-2-0:hover > ._duopj90-3-2-0, ._11pvd3z4-3-2-0 > ._duopj90-3-2-0 {
+._1ons7qu2-3-3-0:hover > ._duopj90-3-3-0, ._11pvd3z4-3-3-0 > ._duopj90-3-3-0 {
   display: inline-block;
 }
-._duopj91-3-2-0 {
+._duopj91-3-3-0 {
   appearance: none;
   border: 0;
   position: fixed;

package/esm/tables/DataTable/features/UserActions/UserActions.sty.js

@@ -11,8 +11,8 @@ import "../ColumnOrder/ColumnOrder.css";
 import "../../components/DataTableHeaderCell.css";
 import "../../components/DataTableDefaultCell.css";
 import "./UserActions.css";
-var actionButton = "_duopj90-3-2-0";
-var floatingMenuButton = "_duopj91-3-2-0";
+var actionButton = "_duopj90-3-3-0";
+var floatingMenuButton = "_duopj91-3-3-0";
 export {
   actionButton,
   floatingMenuButton

package/esm/tables/DataTable/features/UserActions/UserActions.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/UserActions/UserActions.css.ts"],
-  "sourcesContent": ["import '../../components/Alignment.css';\nimport '../../DataTable.css';\nimport '../../components/DataTableVirtualizationContainer.css';\nimport '../RowOrder/RowOrder.css';\nimport '../RowDetails/RowDetails.css';\nimport '../RowInteractivity/RowInteractivity.css';\nimport '../../components/DataTableRow.css';\nimport '../Thresholds/Thresholds.css';\nimport '../../components/DataTableCell.css';\nimport '../ColumnOrder/ColumnOrder.css';\nimport '../../components/DataTableHeaderCell.css';\nimport '../../components/DataTableDefaultCell.css';\nimport './UserActions.css';\nexport var actionButton = '_duopj90-3-2-0';\nexport var floatingMenuButton = '_duopj91-3-2-0';"],
+  "sourcesContent": ["import '../../components/Alignment.css';\nimport '../../DataTable.css';\nimport '../../components/DataTableVirtualizationContainer.css';\nimport '../RowOrder/RowOrder.css';\nimport '../RowDetails/RowDetails.css';\nimport '../RowInteractivity/RowInteractivity.css';\nimport '../../components/DataTableRow.css';\nimport '../Thresholds/Thresholds.css';\nimport '../../components/DataTableCell.css';\nimport '../ColumnOrder/ColumnOrder.css';\nimport '../../components/DataTableHeaderCell.css';\nimport '../../components/DataTableDefaultCell.css';\nimport './UserActions.css';\nexport var actionButton = '_duopj90-3-3-0';\nexport var floatingMenuButton = '_duopj91-3-3-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,eAAe;AACnB,IAAI,qBAAqB;",
   "names": []
 }