@dynatrace/strato-components 3.2.1 → 3.3.0

package/esm/tables/DataTable/features/Layout/Layout.js

@@ -156,11 +156,7 @@ const Layout = {
         const fallbackHeight = table.estimateRowHeight({ isHeaderRow: true }) * table.getVisibleHeaderGroupsCount() + bottomBorderOffset;
         return fallbackHeight;
       },
-      getMemoOptions(
-        table.options,
-        "debugTable",
-        "table._getTotalHeaderHeight"
-      )
+      getMemoOptions(table.options, "debugTable", "table.getTotalHeaderHeight")
     );
     table.estimateRowHeight = memo(
       (props) => [

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/Layout/Layout.ts"],
-  "sourcesContent": ["import type { DataTableColumnGridTemplates } from './layout-types.js';\nimport {\n  getColumnTemplateEntry,\n  getTargetTemplate,\n  processBuiltinColumn,\n} from './layout-utils.js';\nimport { useDataTableConfigElement } from '../../../hooks/useDataTableConfig.js';\nimport {\n  DATA_TABLE_DEFAULT_COLUMN_WIDTH,\n  DATA_TABLE_ROW_HEIGHT_MAP,\n  DATA_TABLE_SPACER_COLUMN_ID,\n  DATA_TABLE_ROW_BORDER,\n  DATA_TABLE_MIN_WIDTH,\n} from '../../constants.js';\nimport type {\n  Column,\n  ColumnDef,\n  Header,\n  InitialTableState,\n  Table,\n  TableFeature,\n  TableOptions,\n} from '../../hooks/useTable/types.js';\nimport {\n  assignRowMethods,\n  getMemoOptions,\n} from '../../hooks/useTable/utils.js';\nimport type { DataTableRowData } from '../../public.api.js';\nimport { memo } from '../../tanstack-table-core-override/src/index.js';\n\nexport const SPACER_COLUMN: ColumnDef<unknown> = {\n  id: DATA_TABLE_SPACER_COLUMN_ID,\n  header: () => undefined,\n  cell: () => undefined,\n  enableSorting: false,\n  enablePinning: false,\n  enableGrouping: false,\n  enableUserActions: false,\n  enableResizing: false,\n  enableHiding: false,\n  meta: {\n    builtin: true,\n    builtinPlacement: 'suffix',\n    hasCustomCellRenderer: true,\n    hasCustomHeaderRenderer: true,\n    spacer: true,\n    cellDeps: () => {\n      // empty dependency to avoid unnecessary re-renders\n      return [];\n    },\n  },\n};\n\nexport const Layout: TableFeature = {\n  getInitialState(state?: InitialTableState) {\n    return {\n      columnMeasureInfo: {},\n      observedHeaderHeight: 0,\n      ...state,\n    };\n  },\n\n  createHeader<TData extends DataTableRowData, TValue>(\n    header: Header<TData, TValue>,\n    table: Table<TData>,\n  ): void {\n    /**\n     * Allows to get the gridPosition of a specific header cell in order\n     * to place it into the correct place in the template and span it across the correct\n     * elements.\n     */\n    header.getGridPosition = memo(\n      (headers) => [headers],\n      (headers) => {\n        // Get the start of the column index the header should be rendered into,\n        // this should be equal to the index of the header cell in the loop passed\n        // to this function.\n        let gridColumnStart = 0;\n        for (const headerInGroup of headers ?? []) {\n          if (headerInGroup === header) {\n            break;\n          }\n          gridColumnStart = gridColumnStart + headerInGroup.colSpan;\n        }\n\n        // The header already exposes a colSpan value, which can be used to span\n        // the header cell element from the start position to the end of the\n        // header group.\n        const colSpan = header.colSpan;\n\n        // Get the start of the index as this is actually the defined\n        // column nesting level. If the column is not nested, it will get a\n        // depth of 0, and nesting levels increase going deeper.\n        const gridRowStart = header.column.depth;\n\n        // Get the end from the headers depth, as this is where it would be rendered\n        // within the tanstack table. As nested columns would be rendered in the\n        // lower headerrow. The strato approach here is different, as the header\n        // cell should span both header rows\n        const gridRowEnd = header.depth;\n\n        // return the gridColumn positioning. As the grid column positioning in\n        // css is One-based, it needs an offset of 1 in every entry.\n        return {\n          gridColumnStart: gridColumnStart + 1,\n          gridColumnEnd: `span ${colSpan}`,\n          gridRowStart: gridRowStart + 1,\n          gridRowEnd: `span ${gridRowEnd - gridRowStart}`,\n        };\n      },\n      getMemoOptions(table.options, 'debugHeaders', 'header.getGridPosition'),\n    );\n  },\n\n  createColumn<TData extends DataTableRowData>(\n    column: Column<TData, unknown>,\n    table: Table<TData>,\n  ): void {\n    column.getGridColumnPosition = (columnIndex?: number) => ({\n      // Offset the index by one as the CSS grid column is a one based position.\n      gridColumnStart: (columnIndex ?? 0) + 1,\n      gridColumnEnd: 'span 1',\n    });\n  },\n\n  createTable<TData extends DataTableRowData>(table: Table<TData>): void {\n    assignRowMethods(table, {\n      getGridRowPosition(rowIndex: number = -1) {\n        return {\n          // Offset the index by one as the CSS grid column is a one based position.\n          gridColumnStart: 1,\n          // The row should span all columns.\n          gridColumnEnd: 'row-end',\n\n          // The CSS grid column is a one based position, so we need to offset the index by one.\n          // To account for the virtualized rows at the start of the grid, a spacer row is inserted.\n          // Therefore we need to offset the index by two in total\n          gridRowStart: rowIndex + 2,\n          // The row should span only one line from the start edge.\n          gridRowEnd: 'span 1',\n        };\n      },\n    });\n\n    table.getHasFractionalTemplate = () => {\n      const template = table.getGridTemplateColumns();\n      return template.includes('fr');\n    };\n\n    table.getVisibleHeaderGroupsCount = () => {\n      if (table.getVisualVariantOptions().headers === 'hidden') {\n        return 0;\n      }\n\n      return table.getHeaderGroups().length;\n    };\n\n    table.setObservedHeaderHeight = (height: number) => {\n      if (height !== table.getState().observedHeaderHeight) {\n        table.setState((state) => ({\n          ...state,\n          observedHeaderHeight: height,\n        }));\n      }\n    };\n\n    table.getHeaderSize = (\n      headerId: string,\n    ): {\n      width: number;\n      height: number;\n    } => {\n      const escapedId = CSS.escape(headerId);\n      const headerSize = table\n        .getRowVirtualizationContainer()\n        ?.querySelector(\n          `[role=\"columnheader\"][data-headerid=${escapedId}], [role=\"columnheader\"][data-columnid=${escapedId}], [role=\"presentation\"][data-columnid=${escapedId}]`,\n        )\n        ?.getBoundingClientRect();\n\n      if (headerSize === undefined) {\n        // Use some standard value if no resize observer is there\n        return {\n          width: DATA_TABLE_DEFAULT_COLUMN_WIDTH,\n          height: table.estimateRowHeight({ isHeaderRow: true }),\n        };\n      }\n\n      return {\n        width: headerSize.width,\n        height: headerSize.height,\n      };\n    };\n\n    table.getColumnOrHeaderWidth = (columnOrHeaderId: string): number => {\n      const hasHiddenHeaders =\n        table.getVisualVariantOptions().headers === 'hidden';\n\n      // saved width that was stored upon measuring\n      const storedWidth = table.getMeasuredColumnWidth(columnOrHeaderId);\n\n      // early exit if all headers are visible and the column is a leaf column\n      if (!hasHiddenHeaders && storedWidth !== undefined) {\n        return storedWidth;\n      }\n\n      const escapedId = CSS.escape(columnOrHeaderId);\n      // If all headers are hidden, take the cell in the first rendered row to retrieve the width since all other cells\n      // in the same column should have the same width.\n      // If the header is not in the virtualizer (because it is a parent column for instance), try to retrieve the height from the rendered element directly.\n      const selectorString = hasHiddenHeaders\n        ? `[role=\"cell\"][data-columnid=\"${escapedId}\"]`\n        : `[role=\"columnheader\"][data-headerid=\"${escapedId}\"], [role=\"columnheader\"][data-columnid=\"${escapedId}\"], [role=\"presentation\"][data-columnid=\"${escapedId}\"]`;\n\n      const columnWidth = table\n        .getRowVirtualizationContainer()\n        ?.querySelector(selectorString)\n        ?.getBoundingClientRect().width;\n\n      return columnWidth ?? DATA_TABLE_DEFAULT_COLUMN_WIDTH;\n    };\n\n    table.getTotalHeaderHeight = memo(\n      () => [\n        table.getVisualVariantOptions(),\n        table.getVisibleLeafColumnsWithoutBuiltin(),\n        table.getHeaderGroups(),\n        table.getState().observedHeaderHeight,\n      ],\n      (\n        visualVariantOptions,\n        visibleLeafColumns,\n        tableHeaderGroups,\n        observedHeaderHeight,\n      ) => {\n        // If the headers are hidden, we can opt out earlier.\n        if (\n          visualVariantOptions.headers === 'hidden' ||\n          visibleLeafColumns.length === 0 ||\n          (tableHeaderGroups.length === 1 &&\n            tableHeaderGroups.at(0)?.headers.length === 0)\n        ) {\n          return 0;\n        }\n\n        if (observedHeaderHeight > 0) {\n          return observedHeaderHeight;\n        }\n\n        // if the measured header height is still undefined or 0, estimate it based on row density and amount of header groups,\n        // so that the rowVirtualizer can return the most accurate height possible for the first render\n        // this prevents an unnecessary vertical scrollbar which would cause wrong column measurements on initial render\n        // the header's bottom border is actually 2px, estimateRowHeight only considers 1px so we need to add 1px more\n        const bottomBorderOffset = DATA_TABLE_ROW_BORDER;\n        const fallbackHeight =\n          table.estimateRowHeight({ isHeaderRow: true }) *\n            table.getVisibleHeaderGroupsCount() +\n          bottomBorderOffset;\n\n        return fallbackHeight;\n      },\n      getMemoOptions(\n        table.options,\n        'debugTable',\n        'table._getTotalHeaderHeight',\n      ),\n    );\n\n    table.estimateRowHeight = memo(\n      (props) => [\n        props?.index,\n        props?.isHeaderRow,\n        table.getVisualVariantOptions(),\n      ],\n      (index, isHeaderRow, { rowDensity, rowSeparation }) => {\n        const rowHeight = DATA_TABLE_ROW_HEIGHT_MAP[rowDensity];\n        const paginationFlatRows = table.getPaginationRowModel().flatRows;\n        const isLastRowOnPage = index === paginationFlatRows.length - 1;\n        // only consider the border if the index is defined or the estimate is for a header row\n        // when estimating rows for an empty table, the index will be undefined and there are no vertical dividers\n        const addBorder = index !== undefined || isHeaderRow === true;\n\n        if (\n          addBorder === false ||\n          rowSeparation === 'none' ||\n          isLastRowOnPage\n        ) {\n          return rowHeight;\n        }\n\n        // add 1px border if rowSeparation is enabled or if this is a header row\n        return rowHeight + DATA_TABLE_ROW_BORDER;\n      },\n      getMemoOptions(table.options, 'debugTable', 'table._estimateRowHeight'),\n    );\n\n    table.getHeaderGridTemplateRows = () => {\n      switch (table.getVisibleHeaderGroupsCount()) {\n        case 0:\n          return '[body-start]';\n        case 1:\n          return '[header-start] max-content [header-end body-start]';\n        default:\n          return '[header-start] max-content max-content [header-end body-start]';\n      }\n    };\n\n    table.getGridTemplateRows = memo(\n      () => {\n        const { getVirtualItems, range } = table.getRowVirtualizer() ?? {};\n\n        return [\n          getVirtualItems?.(),\n          range?.startIndex,\n          range?.endIndex,\n          table.getVisibleHeaderGroupsCount(),\n          table.options.data.length,\n        ];\n      },\n      (virtualItems): string => {\n        const measurementsCache = table.getRowVirtualizer()?.measurementsCache;\n        const headerRows = table.getHeaderGridTemplateRows();\n\n        if (!measurementsCache || !virtualItems?.length) {\n          return headerRows;\n        }\n\n        // Determine the template rows for the body, based on the currently rendered rows\n        const bodyRows = virtualItems\n          .map((virtualItem) => {\n            // The virtual item size is the most up to date value as it is measured during rendering,\n            // while the measurementsCache can be outdated until the next render.\n            // Therefore, the virtual item size is preferred to retrieve the row height.\n            const rowHeight =\n              virtualItem.size ??\n              table.estimateRowHeight({ index: virtualItem.index });\n            return `minmax(min-content, ${rowHeight}px)`;\n          })\n          .join(' ');\n\n        // Add spacer row to account for virtualized rows above the first rendered row\n        const firstVirtualItem = virtualItems[0];\n        let spacerRowHeight = 0;\n\n        if (firstVirtualItem.index > 0) {\n          const scrollPaddingStart = table.getTotalHeaderHeight();\n          // Calculate the height by subtracting the scroll padding (header height) from the starting offset of the first visible item.\n          spacerRowHeight = firstVirtualItem.start - scrollPaddingStart;\n        }\n\n        // combine header, spacer and body rows into a grid row template\n        return `${headerRows} ${spacerRowHeight}px ${bodyRows} [body-end]`;\n      },\n      getMemoOptions(table.options, 'debugTable', 'table.getGridTemplateRows'),\n    );\n\n    table.getGridTemplateColumns = memo(\n      () => {\n        const state = table.getState();\n        return [\n          state.columnSizing,\n          state.columnSizingInfo,\n          state.columnPinning,\n          state.columnOrder,\n          state.columnVisibility,\n          table.getSubRowIndicatorColumnId(),\n          JSON.stringify([...table.getMeasuredColumnWidths()]),\n        ];\n      },\n      (columnSizing, columnSizingInfo) => {\n        const leftVisibleColumns = table.getLeftVisibleLeafColumns();\n        const centerVisibleColumns = table.getCenterVisibleLeafColumns();\n        const rightVisibleColumns = table.getRightVisibleLeafColumns();\n\n        if (\n          leftVisibleColumns === undefined ||\n          centerVisibleColumns === undefined ||\n          rightVisibleColumns === undefined ||\n          columnSizing === undefined ||\n          columnSizingInfo === undefined\n        ) {\n          return '';\n        }\n\n        /**\n         * Gets the measured column width if possible.\n         * Min/max constraints are already considered during measurement. (see columnVirtualizer measureElement)\n         *\n         * @param columnId - ID of the column\n         * @param isFractionWidth - whether the width is a fraction width\n         * @returns measured width in pixels or undefined if not measured yet\n         */\n        function getMeasuredWidth(\n          columnId: string,\n          isFractionWidth: boolean = false,\n        ): number | undefined {\n          // If there are no rows (e.g. loading state), measure the header cell instead\n          if (table.getRowModel().rows.length === 0) {\n            const headerCell = table\n              .getColumnVirtualizer()\n              ?.scrollElement?.querySelector(\n                `[role=\"columnheader\"][data-columnid=\"${CSS.escape(\n                  columnId,\n                )}\"]`,\n              );\n            const headerWidth = headerCell?.getBoundingClientRect().width;\n\n            if (headerWidth === undefined) {\n              return DATA_TABLE_MIN_WIDTH;\n            }\n\n            // Round up slightly for non-fraction widths to avoid rendering an ellipsis due to subpixel rendering issues\n            // don't round for fraction widths to avoid rendering an unnecessary scrollbar for fullWidth tables\n            return isFractionWidth\n              ? headerWidth\n              : Math.ceil(headerWidth * 10) / 10;\n          }\n\n          return table.getMeasuredColumnWidth(columnId);\n        }\n\n        // Grid templates for left, center and right pinned columns\n        const columnGridTemplates: DataTableColumnGridTemplates = {\n          left: [],\n          center: [],\n          right: [],\n        };\n\n        const orderedVisibleColumns = [\n          ...leftVisibleColumns,\n          ...centerVisibleColumns,\n          ...rightVisibleColumns,\n        ];\n\n        // To generate the grid template columns, we need to iterate through all visible columns in order\n        for (const column of orderedVisibleColumns) {\n          // Handle built-in columns (prefix, suffix, spacer)\n          const isBuiltinColumn = processBuiltinColumn(\n            column,\n            table.getVisualVariantOptions().rowDensity,\n            table.options.rowThresholds,\n            columnGridTemplates,\n          );\n\n          if (isBuiltinColumn) {\n            continue;\n          }\n\n          // Handle width configuration for standard column\n          const entry = getColumnTemplateEntry(\n            column,\n            columnSizing,\n            columnSizingInfo,\n            getMeasuredWidth,\n          );\n\n          if (entry !== undefined) {\n            const targetTemplate = getTargetTemplate(\n              column.getIsPinned(),\n              columnGridTemplates,\n            );\n\n            targetTemplate.push(entry);\n          }\n        }\n\n        const combinedGridTemplates = [\n          ...columnGridTemplates.left,\n          ...columnGridTemplates.center,\n          ...columnGridTemplates.right,\n        ];\n\n        return `${combinedGridTemplates.join(' ')} [row-end]`;\n      },\n      getMemoOptions(\n        table.options,\n        'debugTable',\n        'table.getGridTemplateColumns',\n      ),\n    );\n  },\n};\n\nexport function useLayout<TData>(\n  props: { fullWidth?: boolean; fullHeight?: boolean },\n  options: TableOptions<TData>,\n): void {\n  const configFullWidth = useDataTableConfigElement('fullWidth');\n  const configFullHeight = useDataTableConfigElement('fullHeight');\n\n  options.layout = {\n    ...options.layout,\n    fullWidth: props.fullWidth ?? configFullWidth,\n    fullHeight: props.fullHeight ?? configFullHeight,\n  };\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { DataTableColumnGridTemplates } from './layout-types.js';\nimport {\n  getColumnTemplateEntry,\n  getTargetTemplate,\n  processBuiltinColumn,\n} from './layout-utils.js';\nimport { useDataTableConfigElement } from '../../../hooks/useDataTableConfig.js';\nimport {\n  DATA_TABLE_DEFAULT_COLUMN_WIDTH,\n  DATA_TABLE_ROW_HEIGHT_MAP,\n  DATA_TABLE_SPACER_COLUMN_ID,\n  DATA_TABLE_ROW_BORDER,\n  DATA_TABLE_MIN_WIDTH,\n} from '../../constants.js';\nimport type {\n  Column,\n  ColumnDef,\n  Header,\n  InitialTableState,\n  Table,\n  TableFeature,\n  TableOptions,\n} from '../../hooks/useTable/types.js';\nimport {\n  assignRowMethods,\n  getMemoOptions,\n} from '../../hooks/useTable/utils.js';\nimport type { DataTableRowData } from '../../public.api.js';\nimport { memo } from '../../tanstack-table-core-override/src/index.js';\n\nexport const SPACER_COLUMN: ColumnDef<unknown> = {\n  id: DATA_TABLE_SPACER_COLUMN_ID,\n  header: () => undefined,\n  cell: () => undefined,\n  enableSorting: false,\n  enablePinning: false,\n  enableGrouping: false,\n  enableUserActions: false,\n  enableResizing: false,\n  enableHiding: false,\n  meta: {\n    builtin: true,\n    builtinPlacement: 'suffix',\n    hasCustomCellRenderer: true,\n    hasCustomHeaderRenderer: true,\n    spacer: true,\n    cellDeps: () => {\n      // empty dependency to avoid unnecessary re-renders\n      return [];\n    },\n  },\n};\n\nexport const Layout: TableFeature = {\n  getInitialState(state?: InitialTableState) {\n    return {\n      columnMeasureInfo: {},\n      observedHeaderHeight: 0,\n      ...state,\n    };\n  },\n\n  createHeader<TData extends DataTableRowData, TValue>(\n    header: Header<TData, TValue>,\n    table: Table<TData>,\n  ): void {\n    /**\n     * Allows to get the gridPosition of a specific header cell in order\n     * to place it into the correct place in the template and span it across the correct\n     * elements.\n     */\n    header.getGridPosition = memo(\n      (headers) => [headers],\n      (headers) => {\n        // Get the start of the column index the header should be rendered into,\n        // this should be equal to the index of the header cell in the loop passed\n        // to this function.\n        let gridColumnStart = 0;\n        for (const headerInGroup of headers ?? []) {\n          if (headerInGroup === header) {\n            break;\n          }\n          gridColumnStart = gridColumnStart + headerInGroup.colSpan;\n        }\n\n        // The header already exposes a colSpan value, which can be used to span\n        // the header cell element from the start position to the end of the\n        // header group.\n        const colSpan = header.colSpan;\n\n        // Get the start of the index as this is actually the defined\n        // column nesting level. If the column is not nested, it will get a\n        // depth of 0, and nesting levels increase going deeper.\n        const gridRowStart = header.column.depth;\n\n        // Get the end from the headers depth, as this is where it would be rendered\n        // within the tanstack table. As nested columns would be rendered in the\n        // lower headerrow. The strato approach here is different, as the header\n        // cell should span both header rows\n        const gridRowEnd = header.depth;\n\n        // return the gridColumn positioning. As the grid column positioning in\n        // css is One-based, it needs an offset of 1 in every entry.\n        return {\n          gridColumnStart: gridColumnStart + 1,\n          gridColumnEnd: `span ${colSpan}`,\n          gridRowStart: gridRowStart + 1,\n          gridRowEnd: `span ${gridRowEnd - gridRowStart}`,\n        };\n      },\n      getMemoOptions(table.options, 'debugHeaders', 'header.getGridPosition'),\n    );\n  },\n\n  createColumn<TData extends DataTableRowData>(\n    column: Column<TData, unknown>,\n    table: Table<TData>,\n  ): void {\n    column.getGridColumnPosition = (columnIndex?: number) => ({\n      // Offset the index by one as the CSS grid column is a one based position.\n      gridColumnStart: (columnIndex ?? 0) + 1,\n      gridColumnEnd: 'span 1',\n    });\n  },\n\n  createTable<TData extends DataTableRowData>(table: Table<TData>): void {\n    assignRowMethods(table, {\n      getGridRowPosition(rowIndex: number = -1) {\n        return {\n          // Offset the index by one as the CSS grid column is a one based position.\n          gridColumnStart: 1,\n          // The row should span all columns.\n          gridColumnEnd: 'row-end',\n\n          // The CSS grid column is a one based position, so we need to offset the index by one.\n          // To account for the virtualized rows at the start of the grid, a spacer row is inserted.\n          // Therefore we need to offset the index by two in total\n          gridRowStart: rowIndex + 2,\n          // The row should span only one line from the start edge.\n          gridRowEnd: 'span 1',\n        };\n      },\n    });\n\n    table.getHasFractionalTemplate = () => {\n      const template = table.getGridTemplateColumns();\n      return template.includes('fr');\n    };\n\n    table.getVisibleHeaderGroupsCount = () => {\n      if (table.getVisualVariantOptions().headers === 'hidden') {\n        return 0;\n      }\n\n      return table.getHeaderGroups().length;\n    };\n\n    table.setObservedHeaderHeight = (height: number) => {\n      if (height !== table.getState().observedHeaderHeight) {\n        table.setState((state) => ({\n          ...state,\n          observedHeaderHeight: height,\n        }));\n      }\n    };\n\n    table.getHeaderSize = (\n      headerId: string,\n    ): {\n      width: number;\n      height: number;\n    } => {\n      const escapedId = CSS.escape(headerId);\n      const headerSize = table\n        .getRowVirtualizationContainer()\n        ?.querySelector(\n          `[role=\"columnheader\"][data-headerid=${escapedId}], [role=\"columnheader\"][data-columnid=${escapedId}], [role=\"presentation\"][data-columnid=${escapedId}]`,\n        )\n        ?.getBoundingClientRect();\n\n      if (headerSize === undefined) {\n        // Use some standard value if no resize observer is there\n        return {\n          width: DATA_TABLE_DEFAULT_COLUMN_WIDTH,\n          height: table.estimateRowHeight({ isHeaderRow: true }),\n        };\n      }\n\n      return {\n        width: headerSize.width,\n        height: headerSize.height,\n      };\n    };\n\n    table.getColumnOrHeaderWidth = (columnOrHeaderId: string): number => {\n      const hasHiddenHeaders =\n        table.getVisualVariantOptions().headers === 'hidden';\n\n      // saved width that was stored upon measuring\n      const storedWidth = table.getMeasuredColumnWidth(columnOrHeaderId);\n\n      // early exit if all headers are visible and the column is a leaf column\n      if (!hasHiddenHeaders && storedWidth !== undefined) {\n        return storedWidth;\n      }\n\n      const escapedId = CSS.escape(columnOrHeaderId);\n      // If all headers are hidden, take the cell in the first rendered row to retrieve the width since all other cells\n      // in the same column should have the same width.\n      // If the header is not in the virtualizer (because it is a parent column for instance), try to retrieve the height from the rendered element directly.\n      const selectorString = hasHiddenHeaders\n        ? `[role=\"cell\"][data-columnid=\"${escapedId}\"]`\n        : `[role=\"columnheader\"][data-headerid=\"${escapedId}\"], [role=\"columnheader\"][data-columnid=\"${escapedId}\"], [role=\"presentation\"][data-columnid=\"${escapedId}\"]`;\n\n      const columnWidth = table\n        .getRowVirtualizationContainer()\n        ?.querySelector(selectorString)\n        ?.getBoundingClientRect().width;\n\n      return columnWidth ?? DATA_TABLE_DEFAULT_COLUMN_WIDTH;\n    };\n\n    table.getTotalHeaderHeight = memo(\n      () => [\n        table.getVisualVariantOptions(),\n        table.getVisibleLeafColumnsWithoutBuiltin(),\n        table.getHeaderGroups(),\n        table.getState().observedHeaderHeight,\n      ],\n      (\n        visualVariantOptions,\n        visibleLeafColumns,\n        tableHeaderGroups,\n        observedHeaderHeight,\n      ) => {\n        // If the headers are hidden, we can opt out earlier.\n        if (\n          visualVariantOptions.headers === 'hidden' ||\n          visibleLeafColumns.length === 0 ||\n          (tableHeaderGroups.length === 1 &&\n            tableHeaderGroups.at(0)?.headers.length === 0)\n        ) {\n          return 0;\n        }\n\n        if (observedHeaderHeight > 0) {\n          return observedHeaderHeight;\n        }\n\n        // if the measured header height is still undefined or 0, estimate it based on row density and amount of header groups,\n        // so that the rowVirtualizer can return the most accurate height possible for the first render\n        // this prevents an unnecessary vertical scrollbar which would cause wrong column measurements on initial render\n        // the header's bottom border is actually 2px, estimateRowHeight only considers 1px so we need to add 1px more\n        const bottomBorderOffset = DATA_TABLE_ROW_BORDER;\n        const fallbackHeight =\n          table.estimateRowHeight({ isHeaderRow: true }) *\n            table.getVisibleHeaderGroupsCount() +\n          bottomBorderOffset;\n\n        return fallbackHeight;\n      },\n      getMemoOptions(table.options, 'debugTable', 'table.getTotalHeaderHeight'),\n    );\n\n    table.estimateRowHeight = memo(\n      (props) => [\n        props?.index,\n        props?.isHeaderRow,\n        table.getVisualVariantOptions(),\n      ],\n      (index, isHeaderRow, { rowDensity, rowSeparation }) => {\n        const rowHeight = DATA_TABLE_ROW_HEIGHT_MAP[rowDensity];\n        const paginationFlatRows = table.getPaginationRowModel().flatRows;\n        const isLastRowOnPage = index === paginationFlatRows.length - 1;\n        // only consider the border if the index is defined or the estimate is for a header row\n        // when estimating rows for an empty table, the index will be undefined and there are no vertical dividers\n        const addBorder = index !== undefined || isHeaderRow === true;\n\n        if (\n          addBorder === false ||\n          rowSeparation === 'none' ||\n          isLastRowOnPage\n        ) {\n          return rowHeight;\n        }\n\n        // add 1px border if rowSeparation is enabled or if this is a header row\n        return rowHeight + DATA_TABLE_ROW_BORDER;\n      },\n      getMemoOptions(table.options, 'debugTable', 'table._estimateRowHeight'),\n    );\n\n    table.getHeaderGridTemplateRows = () => {\n      switch (table.getVisibleHeaderGroupsCount()) {\n        case 0:\n          return '[body-start]';\n        case 1:\n          return '[header-start] max-content [header-end body-start]';\n        default:\n          return '[header-start] max-content max-content [header-end body-start]';\n      }\n    };\n\n    table.getGridTemplateRows = memo(\n      () => {\n        const { getVirtualItems, range } = table.getRowVirtualizer() ?? {};\n\n        return [\n          getVirtualItems?.(),\n          range?.startIndex,\n          range?.endIndex,\n          table.getVisibleHeaderGroupsCount(),\n          table.options.data.length,\n        ];\n      },\n      (virtualItems): string => {\n        const measurementsCache = table.getRowVirtualizer()?.measurementsCache;\n        const headerRows = table.getHeaderGridTemplateRows();\n\n        if (!measurementsCache || !virtualItems?.length) {\n          return headerRows;\n        }\n\n        // Determine the template rows for the body, based on the currently rendered rows\n        const bodyRows = virtualItems\n          .map((virtualItem) => {\n            // The virtual item size is the most up to date value as it is measured during rendering,\n            // while the measurementsCache can be outdated until the next render.\n            // Therefore, the virtual item size is preferred to retrieve the row height.\n            const rowHeight =\n              virtualItem.size ??\n              table.estimateRowHeight({ index: virtualItem.index });\n            return `minmax(min-content, ${rowHeight}px)`;\n          })\n          .join(' ');\n\n        // Add spacer row to account for virtualized rows above the first rendered row\n        const firstVirtualItem = virtualItems[0];\n        let spacerRowHeight = 0;\n\n        if (firstVirtualItem.index > 0) {\n          const scrollPaddingStart = table.getTotalHeaderHeight();\n          // Calculate the height by subtracting the scroll padding (header height) from the starting offset of the first visible item.\n          spacerRowHeight = firstVirtualItem.start - scrollPaddingStart;\n        }\n\n        // combine header, spacer and body rows into a grid row template\n        return `${headerRows} ${spacerRowHeight}px ${bodyRows} [body-end]`;\n      },\n      getMemoOptions(table.options, 'debugTable', 'table.getGridTemplateRows'),\n    );\n\n    table.getGridTemplateColumns = memo(\n      () => {\n        const state = table.getState();\n        return [\n          state.columnSizing,\n          state.columnSizingInfo,\n          state.columnPinning,\n          state.columnOrder,\n          state.columnVisibility,\n          table.getSubRowIndicatorColumnId(),\n          JSON.stringify([...table.getMeasuredColumnWidths()]),\n        ];\n      },\n      (columnSizing, columnSizingInfo) => {\n        const leftVisibleColumns = table.getLeftVisibleLeafColumns();\n        const centerVisibleColumns = table.getCenterVisibleLeafColumns();\n        const rightVisibleColumns = table.getRightVisibleLeafColumns();\n\n        if (\n          leftVisibleColumns === undefined ||\n          centerVisibleColumns === undefined ||\n          rightVisibleColumns === undefined ||\n          columnSizing === undefined ||\n          columnSizingInfo === undefined\n        ) {\n          return '';\n        }\n\n        /**\n         * Gets the measured column width if possible.\n         * Min/max constraints are already considered during measurement. (see columnVirtualizer measureElement)\n         *\n         * @param columnId - ID of the column\n         * @param isFractionWidth - whether the width is a fraction width\n         * @returns measured width in pixels or undefined if not measured yet\n         */\n        function getMeasuredWidth(\n          columnId: string,\n          isFractionWidth: boolean = false,\n        ): number | undefined {\n          // If there are no rows (e.g. loading state), measure the header cell instead\n          if (table.getRowModel().rows.length === 0) {\n            const headerCell = table\n              .getColumnVirtualizer()\n              ?.scrollElement?.querySelector(\n                `[role=\"columnheader\"][data-columnid=\"${CSS.escape(\n                  columnId,\n                )}\"]`,\n              );\n            const headerWidth = headerCell?.getBoundingClientRect().width;\n\n            if (headerWidth === undefined) {\n              return DATA_TABLE_MIN_WIDTH;\n            }\n\n            // Round up slightly for non-fraction widths to avoid rendering an ellipsis due to subpixel rendering issues\n            // don't round for fraction widths to avoid rendering an unnecessary scrollbar for fullWidth tables\n            return isFractionWidth\n              ? headerWidth\n              : Math.ceil(headerWidth * 10) / 10;\n          }\n\n          return table.getMeasuredColumnWidth(columnId);\n        }\n\n        // Grid templates for left, center and right pinned columns\n        const columnGridTemplates: DataTableColumnGridTemplates = {\n          left: [],\n          center: [],\n          right: [],\n        };\n\n        const orderedVisibleColumns = [\n          ...leftVisibleColumns,\n          ...centerVisibleColumns,\n          ...rightVisibleColumns,\n        ];\n\n        // To generate the grid template columns, we need to iterate through all visible columns in order\n        for (const column of orderedVisibleColumns) {\n          // Handle built-in columns (prefix, suffix, spacer)\n          const isBuiltinColumn = processBuiltinColumn(\n            column,\n            table.getVisualVariantOptions().rowDensity,\n            table.options.rowThresholds,\n            columnGridTemplates,\n          );\n\n          if (isBuiltinColumn) {\n            continue;\n          }\n\n          // Handle width configuration for standard column\n          const entry = getColumnTemplateEntry(\n            column,\n            columnSizing,\n            columnSizingInfo,\n            getMeasuredWidth,\n          );\n\n          if (entry !== undefined) {\n            const targetTemplate = getTargetTemplate(\n              column.getIsPinned(),\n              columnGridTemplates,\n            );\n\n            targetTemplate.push(entry);\n          }\n        }\n\n        const combinedGridTemplates = [\n          ...columnGridTemplates.left,\n          ...columnGridTemplates.center,\n          ...columnGridTemplates.right,\n        ];\n\n        return `${combinedGridTemplates.join(' ')} [row-end]`;\n      },\n      getMemoOptions(\n        table.options,\n        'debugTable',\n        'table.getGridTemplateColumns',\n      ),\n    );\n  },\n};\n\nexport function useLayout<TData>(\n  props: { fullWidth?: boolean; fullHeight?: boolean },\n  options: TableOptions<TData>,\n): void {\n  const configFullWidth = useDataTableConfigElement('fullWidth');\n  const configFullHeight = useDataTableConfigElement('fullHeight');\n\n  options.layout = {\n    ...options.layout,\n    fullWidth: props.fullWidth ?? configFullWidth,\n    fullHeight: props.fullHeight ?? configFullHeight,\n  };\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/tables/DataTable/features/LineWrap/LineWrap.js

@@ -84,12 +84,13 @@ function DataTableGlobalLineWrapToolbarAction() {
   const lineWrapState = table.getState().columnLineWrap;
   const Icon = lineWrapState === true ? /* @__PURE__ */ jsx(WrapTextOffIcon, {}) : /* @__PURE__ */ jsx(WrapTextIcon, {});
   const lineWrapLabel = lineWrapState === true ? intl.formatMessage(dataTableMessages.disableLineWrapLabel) : intl.formatMessage(dataTableMessages.enableLineWrapLabel);
-  const lineWrapDtName = lineWrapState === true ? "ToolbarDisableLineWrap" : "ToolbarEnableLineWrap";
+  const lineWrapDtProperty = `state:${lineWrapState === true ? "unwrap" : "wrap"}`;
   return /* @__PURE__ */ jsx(Tooltip, { text: lineWrapLabel, children: /* @__PURE__ */ jsx(
     Button,
     {
       "aria-label": lineWrapLabel,
-      "data-dt-name": lineWrapDtName,
+      "data-dt-name": "ToolbarLineWrap",
+      "data-dt-properties": lineWrapDtProperty,
       onClick: () => table.setColumnLineWrap((oldLineWrap) => {
         if (oldLineWrap === true) {
           return {};

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/LineWrap/LineWrap.tsx"],
-  "sourcesContent": ["import { type RowData, functionalUpdate } from '@tanstack/react-table';\nimport { type JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { WrapTextIcon, WrapTextOffIcon } from '@dynatrace/strato-icons';\n\nimport type { DataTableLineWrapProps } from './line-wrap-types.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useControllableState } from '../../../../core/hooks/useControllableState.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport { useDataTableConfigElement } from '../../../hooks/useDataTableConfig.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport {\n  type Column,\n  type Table,\n  type TableFeature,\n  type TableOptions,\n} from '../../hooks/useTable/types.js';\nimport { dataTableMessages } from '../../messages.js';\n\n/**\n * Global line wrap action for the DataTable to be used in the DataTable.Toolbar\n *\n * @public\n */\nexport function DataTableGlobalLineWrapAction() {\n  return null;\n}\n\n/**\n * Feature implementation for LineWrap. This contains the logic that will be given\n * to the tanstack table. The implementing interface is important as these are\n * the function that will be called by the tanstack table core during render.\n * @internal\n */\nexport const LineWrap: TableFeature = {\n  createColumn<TData extends RowData, TValue>(\n    column: Column<TData, TValue>,\n    table: Table<TData>,\n  ) {\n    column.toggleLineWrap = (value) => {\n      if (!column.getCanLineWrap()) {\n        return;\n      }\n\n      table.setColumnLineWrap((oldValue) => {\n        const columnsStatesToUpdate = computeLineWrapStateUpdate(column, value);\n\n        // Check if the lineWrap was set as a global first\n        if (typeof oldValue === 'boolean') {\n          const columnIds = table\n            .getAllLeafColumnsWithoutBuiltin()\n            .map((col) => col.id);\n\n          // when switching from a boolean, we need to preserve the current state of the other columns\n          const currentColumnsState: Record<string, boolean> =\n            Object.fromEntries(columnIds.map((id) => [id, oldValue]));\n\n          // When toggling a parent column, we need to set the state of all child columns\n          return {\n            ...currentColumnsState,\n            ...columnsStatesToUpdate,\n          };\n        }\n\n        return {\n          ...oldValue,\n          ...columnsStatesToUpdate,\n        };\n      });\n    };\n\n    column.getIsLineWrapped = () => {\n      const lineWrapState = table.getState().columnLineWrap;\n      // Boolean values define a global line wrapping on the table.\n      if (typeof lineWrapState === 'boolean') {\n        return lineWrapState;\n      }\n\n      const childColumns = column.columns;\n      if (childColumns.length > 0) {\n        // If the current column is a parent, we consider it line wrapped only if all child columns are line wrapped\n        return childColumns.every((child) => child.getIsLineWrapped());\n      }\n      return lineWrapState?.[column.id] ?? false;\n    };\n\n    column.getCanLineWrap = () => {\n      return table.options.enableLineWrap ?? true;\n    };\n  },\n\n  createTable<TData extends RowData>(table: Table<TData>): void {\n    table.setColumnLineWrap = (updater) => {\n      const newValue = functionalUpdate(\n        updater,\n        table.getState().columnLineWrap ?? false,\n      );\n      table.options.onColumnLineWrapChange?.(newValue);\n    };\n  },\n};\n\n/**\n * Determines which columns need to have their lineWrap state updated.\n * @param column - The column for which lineWrap was toggled.\n * @param value - The new lineWrap value to set. If not provided, the current value will be toggled.\n * @returns a record of column IDs and their new lineWrap states.\n */\nfunction computeLineWrapStateUpdate<TData extends RowData>(\n  column: Column<TData>,\n  value?: boolean,\n): Record<string, boolean> {\n  const newValue = value ?? !column.getIsLineWrapped();\n  const childColumns = column.columns;\n\n  if (childColumns.length === 0) {\n    // For leaf or standalone columns, we only need to update the toggled column\n    return {\n      [column.id]: newValue,\n    };\n  }\n  // If the toggled column is a parent column, we need to toggle all its child columns\n  return Object.fromEntries(childColumns.map((child) => [child.id, newValue]));\n}\n\n/**\n * Configuration hook for the DataTable LineWrap feature.\n * @internal\n */\nexport function useColumnLineWrap<T>(\n  props: DataTableLineWrapProps,\n  options: TableOptions<T>,\n): void {\n  const configLineWrap = useDataTableConfigElement('lineWrap');\n\n  const [columnLineWrap, onColumnLineWrapChange] = useControllableState({\n    value: props.lineWrap ?? configLineWrap,\n    defaultValue: props.defaultLineWrap,\n    onChange: props.onLineWrapChange,\n  });\n\n  options.state = { ...options.state, columnLineWrap };\n  options.onColumnLineWrapChange = onColumnLineWrapChange;\n}\n\n//# region Providing actions\n\n/**\n * Provides the toolbar button that allows toggling global line wrap.\n * @internal\n */\nexport function DataTableGlobalLineWrapToolbarAction(): JSX.Element {\n  const table = useDataTable();\n  const intl = useIntl();\n\n  const lineWrapState = table.getState().columnLineWrap;\n  const Icon = lineWrapState === true ? <WrapTextOffIcon /> : <WrapTextIcon />;\n  const lineWrapLabel =\n    lineWrapState === true\n      ? intl.formatMessage(dataTableMessages.disableLineWrapLabel)\n      : intl.formatMessage(dataTableMessages.enableLineWrapLabel);\n\n  const lineWrapDtName =\n    lineWrapState === true ? 'ToolbarDisableLineWrap' : 'ToolbarEnableLineWrap';\n\n  return (\n    <Tooltip text={lineWrapLabel}>\n      <Button\n        aria-label={lineWrapLabel}\n        data-dt-name={lineWrapDtName}\n        onClick={() =>\n          table.setColumnLineWrap((oldLineWrap) => {\n            if (oldLineWrap === true) {\n              return {};\n            }\n            return true;\n          })\n        }\n      >\n        <Button.Prefix>{Icon}</Button.Prefix>\n      </Button>\n    </Tooltip>\n  );\n}\n\n//# endregion Providing actions\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { type RowData, functionalUpdate } from '@tanstack/react-table';\nimport { type JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { WrapTextIcon, WrapTextOffIcon } from '@dynatrace/strato-icons';\n\nimport type { DataTableLineWrapProps } from './line-wrap-types.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useControllableState } from '../../../../core/hooks/useControllableState.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport { useDataTableConfigElement } from '../../../hooks/useDataTableConfig.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport {\n  type Column,\n  type Table,\n  type TableFeature,\n  type TableOptions,\n} from '../../hooks/useTable/types.js';\nimport { dataTableMessages } from '../../messages.js';\n\n/**\n * Global line wrap action for the DataTable to be used in the DataTable.Toolbar\n *\n * @public\n */\nexport function DataTableGlobalLineWrapAction() {\n  return null;\n}\n\n/**\n * Feature implementation for LineWrap. This contains the logic that will be given\n * to the tanstack table. The implementing interface is important as these are\n * the function that will be called by the tanstack table core during render.\n * @internal\n */\nexport const LineWrap: TableFeature = {\n  createColumn<TData extends RowData, TValue>(\n    column: Column<TData, TValue>,\n    table: Table<TData>,\n  ) {\n    column.toggleLineWrap = (value) => {\n      if (!column.getCanLineWrap()) {\n        return;\n      }\n\n      table.setColumnLineWrap((oldValue) => {\n        const columnsStatesToUpdate = computeLineWrapStateUpdate(column, value);\n\n        // Check if the lineWrap was set as a global first\n        if (typeof oldValue === 'boolean') {\n          const columnIds = table\n            .getAllLeafColumnsWithoutBuiltin()\n            .map((col) => col.id);\n\n          // when switching from a boolean, we need to preserve the current state of the other columns\n          const currentColumnsState: Record<string, boolean> =\n            Object.fromEntries(columnIds.map((id) => [id, oldValue]));\n\n          // When toggling a parent column, we need to set the state of all child columns\n          return {\n            ...currentColumnsState,\n            ...columnsStatesToUpdate,\n          };\n        }\n\n        return {\n          ...oldValue,\n          ...columnsStatesToUpdate,\n        };\n      });\n    };\n\n    column.getIsLineWrapped = () => {\n      const lineWrapState = table.getState().columnLineWrap;\n      // Boolean values define a global line wrapping on the table.\n      if (typeof lineWrapState === 'boolean') {\n        return lineWrapState;\n      }\n\n      const childColumns = column.columns;\n      if (childColumns.length > 0) {\n        // If the current column is a parent, we consider it line wrapped only if all child columns are line wrapped\n        return childColumns.every((child) => child.getIsLineWrapped());\n      }\n      return lineWrapState?.[column.id] ?? false;\n    };\n\n    column.getCanLineWrap = () => {\n      return table.options.enableLineWrap ?? true;\n    };\n  },\n\n  createTable<TData extends RowData>(table: Table<TData>): void {\n    table.setColumnLineWrap = (updater) => {\n      const newValue = functionalUpdate(\n        updater,\n        table.getState().columnLineWrap ?? false,\n      );\n      table.options.onColumnLineWrapChange?.(newValue);\n    };\n  },\n};\n\n/**\n * Determines which columns need to have their lineWrap state updated.\n * @param column - The column for which lineWrap was toggled.\n * @param value - The new lineWrap value to set. If not provided, the current value will be toggled.\n * @returns a record of column IDs and their new lineWrap states.\n */\nfunction computeLineWrapStateUpdate<TData extends RowData>(\n  column: Column<TData>,\n  value?: boolean,\n): Record<string, boolean> {\n  const newValue = value ?? !column.getIsLineWrapped();\n  const childColumns = column.columns;\n\n  if (childColumns.length === 0) {\n    // For leaf or standalone columns, we only need to update the toggled column\n    return {\n      [column.id]: newValue,\n    };\n  }\n  // If the toggled column is a parent column, we need to toggle all its child columns\n  return Object.fromEntries(childColumns.map((child) => [child.id, newValue]));\n}\n\n/**\n * Configuration hook for the DataTable LineWrap feature.\n * @internal\n */\nexport function useColumnLineWrap<T>(\n  props: DataTableLineWrapProps,\n  options: TableOptions<T>,\n): void {\n  const configLineWrap = useDataTableConfigElement('lineWrap');\n\n  const [columnLineWrap, onColumnLineWrapChange] = useControllableState({\n    value: props.lineWrap ?? configLineWrap,\n    defaultValue: props.defaultLineWrap,\n    onChange: props.onLineWrapChange,\n  });\n\n  options.state = { ...options.state, columnLineWrap };\n  options.onColumnLineWrapChange = onColumnLineWrapChange;\n}\n\n//# region Providing actions\n\n/**\n * Provides the toolbar button that allows toggling global line wrap.\n * @internal\n */\nexport function DataTableGlobalLineWrapToolbarAction(): JSX.Element {\n  const table = useDataTable();\n  const intl = useIntl();\n\n  const lineWrapState = table.getState().columnLineWrap;\n  const Icon = lineWrapState === true ? <WrapTextOffIcon /> : <WrapTextIcon />;\n  const lineWrapLabel =\n    lineWrapState === true\n      ? intl.formatMessage(dataTableMessages.disableLineWrapLabel)\n      : intl.formatMessage(dataTableMessages.enableLineWrapLabel);\n\n  const lineWrapDtProperty = `state:${\n    lineWrapState === true ? 'unwrap' : 'wrap'\n  }`;\n\n  return (\n    <Tooltip text={lineWrapLabel}>\n      <Button\n        aria-label={lineWrapLabel}\n        data-dt-name=\"ToolbarLineWrap\"\n        data-dt-properties={lineWrapDtProperty}\n        onClick={() =>\n          table.setColumnLineWrap((oldLineWrap) => {\n            if (oldLineWrap === true) {\n              return {};\n            }\n            return true;\n          })\n        }\n      >\n        <Button.Prefix>{Icon}</Button.Prefix>\n      </Button>\n    </Tooltip>\n  );\n}\n\n//# endregion Providing actions\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,6 +1,6 @@
-._14flfjk1-3-2-1 {
+._14flfjk1-3-3-0 {
   z-index: 1;
   position: absolute;
   inset: 0;
-  top: var(--_14flfjk0-3-2-1);
+  top: var(--_14flfjk0-3-3-0);
 }

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

@@ -1,6 +1,6 @@
 import "./LoadingState.css";
-var dataTableHeaderHeight = "var(--_14flfjk0-3-2-1)";
-var loadingState = "_14flfjk1-3-2-1";
+var dataTableHeaderHeight = "var(--_14flfjk0-3-3-0)";
+var loadingState = "_14flfjk1-3-3-0";
 export {
   dataTableHeaderHeight,
   loadingState

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/LoadingState/LoadingState.css.ts"],
-  "sourcesContent": ["import './LoadingState.css';\nexport var dataTableHeaderHeight = 'var(--_14flfjk0-3-2-1)';\nexport var loadingState = '_14flfjk1-3-2-1';"],
+  "sourcesContent": ["import './LoadingState.css';\nexport var dataTableHeaderHeight = 'var(--_14flfjk0-3-3-0)';\nexport var loadingState = '_14flfjk1-3-3-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,wBAAwB;AAC5B,IAAI,eAAe;",
   "names": []
 }

package/esm/tables/DataTable/features/MeterBarChart/MeterBarChart.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { isEmpty, isNumber } from "lodash-es";
-import { useMemo } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import Spacings from "@dynatrace/strato-design-tokens/spacings";
 import { MultiMeterBarChart } from "../../../../charts/meter-bar/multi-meter-bar/MultiMeterBarChart.js";
 import { METER_BAR_SIZE } from "../../../../charts/meter-bar/shared/constants.js";
@@ -25,6 +25,7 @@ function MeterBarChartRenderer({
   column
 }) {
   const table = useDataTable();
+  const chartRef = useRef(null);
   let config = {};
   if (column?.columnDef.meta && isDataTableMeterBarColumnConfig(column.columnDef.meta.config)) {
     config = column.columnDef.meta.config;
@@ -32,35 +33,65 @@ function MeterBarChartRenderer({
   const columnId = column.columnDef.id ?? "";
   const maxValuesFromState = table.getState().meterbarChartMaxValues;
   const maxValue = !isEmpty(maxValuesFromState) ? maxValuesFromState[columnId] : DEFAULT_MAX_VALUE;
+  const listenerRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      listenerRef.current?.();
+    };
+  }, []);
+  const registerUnpinOnPointerUp = config?.showTooltip ? () => {
+    if (listenerRef.current) {
+      return;
+    }
+    const handler = (event) => {
+      if (event.target.closest('[role="tooltip"]') !== null) {
+        return;
+      }
+      chartRef.current?.unpinTooltip();
+      listenerRef.current?.();
+      listenerRef.current = null;
+    };
+    listenerRef.current = () => document.removeEventListener("pointerup", handler);
+    document.addEventListener("pointerup", handler);
+  } : void 0;
   if (typeof value === "number") {
-    return /* @__PURE__ */ jsxs(
-      MeterBarChart,
+    return /* @__PURE__ */ jsx(
+      "span",
       {
-        value,
-        min: config?.min,
-        max: maxValue,
-        color: config?.color,
-        size: METER_BAR_SIZE.Size8,
-        width: "100%",
-        height: "auto",
-        style: {
-          pointerEvents: "auto",
-          padding: `${Spacings.Size6} 0`
-        },
-        formatter: config?.formatter,
-        children: [
-          config?.showTooltip && /* @__PURE__ */ jsx(MeterBarChart.Tooltip, {}),
-          config?.thresholds?.map((threshold) => /* @__PURE__ */ jsx(
-            MeterBarChart.ThresholdIndicator,
-            {
-              name: threshold.name,
-              color: threshold.color,
-              value: threshold.value,
-              showIndicator: threshold.showIndicator
+        style: { display: "contents" },
+        onClick: registerUnpinOnPointerUp,
+        role: "none",
+        children: /* @__PURE__ */ jsxs(
+          MeterBarChart,
+          {
+            value,
+            min: config?.min,
+            max: maxValue,
+            color: config?.color,
+            size: METER_BAR_SIZE.Size8,
+            width: "100%",
+            height: "auto",
+            style: {
+              pointerEvents: "auto",
+              padding: `${Spacings.Size6} 0`
             },
-            `threshold-${threshold.color}-${threshold.value}`
-          ))
-        ]
+            formatter: config?.formatter,
+            ref: chartRef,
+            children: [
+              config?.showTooltip && /* @__PURE__ */ jsx(MeterBarChart.Tooltip, {}),
+              config?.thresholds?.map((threshold) => /* @__PURE__ */ jsx(
+                MeterBarChart.ThresholdIndicator,
+                {
+                  name: threshold.name,
+                  color: threshold.color,
+                  value: threshold.value,
+                  showIndicator: threshold.showIndicator
+                },
+                `threshold-${threshold.color}-${threshold.value}`
+              ))
+            ]
+          }
+        )
       }
     );
   }
@@ -68,34 +99,42 @@ function MeterBarChartRenderer({
   if (!isMultiMeterData) {
     devLog("Invalid meter chart data.");
   }
-  return /* @__PURE__ */ jsxs(
-    MultiMeterBarChart,
+  return /* @__PURE__ */ jsx(
+    "span",
     {
-      size: "size8",
-      min: config?.min,
-      max: maxValue,
-      colorPalette: config?.colorPalette || "categorical",
-      width: "100%",
-      height: "auto",
-      style: {
-        pointerEvents: "auto",
-        padding: `${Spacings.Size6} 0`
-      },
-      formatter: config?.formatter,
-      // only if this is multi meter data render segments
-      children: [
-        isMultiMeterData && value.map((data) => /* @__PURE__ */ jsx(
-          MultiMeterBarChart.Segment,
-          {
-            name: data.name,
-            value: data.value,
-            color: data?.color
+      style: { display: "contents" },
+      onClick: registerUnpinOnPointerUp,
+      role: "none",
+      children: /* @__PURE__ */ jsxs(
+        MultiMeterBarChart,
+        {
+          size: "size8",
+          min: config?.min,
+          max: maxValue,
+          colorPalette: config?.colorPalette || "categorical",
+          width: "100%",
+          height: "auto",
+          style: {
+            pointerEvents: "auto",
+            padding: `${Spacings.Size6} 0`
           },
-          `${data.name}-${data.value}`
-        )),
-        /* @__PURE__ */ jsx(MeterBarChart.Tooltip, {}),
-        config?.showTooltip && /* @__PURE__ */ jsx(MultiMeterBarChart.Tooltip, { variant: "shared" })
-      ]
+          formatter: config?.formatter,
+          ref: chartRef,
+          // only if this is multi meter data render segments
+          children: [
+            isMultiMeterData && value.map((data) => /* @__PURE__ */ jsx(
+              MultiMeterBarChart.Segment,
+              {
+                name: data.name,
+                value: data.value,
+                color: data?.color
+              },
+              `${data.name}-${data.value}`
+            )),
+            config?.showTooltip && /* @__PURE__ */ jsx(MultiMeterBarChart.Tooltip, { variant: "shared" })
+          ]
+        }
+      )
     }
   );
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/MeterBarChart/MeterBarChart.tsx"],
-  "sourcesContent": ["import { isEmpty, isNumber } from 'lodash-es';\nimport { useMemo, type JSX } from 'react';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\n\nimport { MultiMeterBarChart } from '../../../../charts/meter-bar/multi-meter-bar/MultiMeterBarChart.js';\nimport { METER_BAR_SIZE } from '../../../../charts/meter-bar/shared/constants.js';\nimport { MeterBarChart } from '../../../../charts/meter-bar/single-meter-bar/MeterBarChart.js';\nimport { devLog } from '../../../../core/utils/logging.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport { isDisplayColumnDef } from '../../hooks/useTable/datatable-typeguards.js';\nimport type { Column, TableOptions } from '../../hooks/useTable/types.js';\nimport type {\n  DataTableColumnDef,\n  DataTableDisplayColumnDef,\n  DataTableRowData,\n} from '../../public.api.js';\nimport type { DataTableMeterbarColumnConfig } from '../ColumnTypes/column-types-types.js';\n\n/** Default max value for meterbar column. */\nconst DEFAULT_MAX_VALUE = 100;\n\n/**\n * Typeguard function ensures that the defined config in the column definition contains certain properties.\n * @internal\n */\nfunction isDataTableMeterBarColumnConfig(\n  config: unknown,\n): config is DataTableMeterbarColumnConfig {\n  return (\n    config !== null &&\n    config !== undefined &&\n    typeof config === 'object' &&\n    ('max' in config ||\n      'color' in config ||\n      'threshold' in config ||\n      'showTooltip' in config ||\n      'max' in config)\n  );\n}\n\n/**\n * Typeguard function ensures that the defined column contains the 'accessor' property.\n * @internal\n */\nfunction isColumnDefWithAccessor<TData, TValue>(\n  column: unknown,\n): column is DataTableDisplayColumnDef<TData, TValue> {\n  return (\n    column !== null &&\n    column !== undefined &&\n    typeof column === 'object' &&\n    'accessor' in column\n  );\n}\n\ntype MeterBarChartRendererType<TData, TValue> = {\n  value: number | { name: string; value: number; color?: string }[];\n  column: Column<TData, TValue>;\n};\n\n/**\n * Type guard to check value against MultiMeterBar values.\n * @internal\n */\nexport function isMultiMeterBarData(\n  value: unknown,\n): value is Array<{ name: string; value: number; color?: string }> {\n  return (\n    Array.isArray(value) &&\n    value.every(\n      (item) =>\n        typeof item === 'object' &&\n        typeof item.name === 'string' &&\n        typeof item.value === 'number' &&\n        (item.color === undefined || typeof item.color === 'string'),\n    )\n  );\n}\n\n/**\n * Intended for configuring and rendering the meterbar chart component.\n */\nexport function MeterBarChartRenderer<TData, TValue>({\n  value,\n  column,\n}: Readonly<MeterBarChartRendererType<TData, TValue>>): JSX.Element {\n  const table = useDataTable();\n  let config: DataTableMeterbarColumnConfig = {};\n  if (\n    column?.columnDef.meta &&\n    isDataTableMeterBarColumnConfig(column.columnDef.meta.config)\n  ) {\n    config = column.columnDef.meta.config;\n  }\n\n  const columnId = column.columnDef.id ?? '';\n\n  const maxValuesFromState = table.getState().meterbarChartMaxValues;\n\n  const maxValue = !isEmpty(maxValuesFromState)\n    ? maxValuesFromState[columnId]\n    : DEFAULT_MAX_VALUE;\n\n  // simple MeterBar\n  if (typeof value === 'number') {\n    return (\n      <MeterBarChart\n        value={value}\n        min={config?.min}\n        max={maxValue}\n        color={config?.color as string}\n        size={METER_BAR_SIZE.Size8}\n        width=\"100%\"\n        height=\"auto\"\n        style={{\n          pointerEvents: 'auto',\n          padding: `${Spacings.Size6} 0`,\n        }}\n        formatter={config?.formatter}\n      >\n        {config?.showTooltip && <MeterBarChart.Tooltip />}\n        {config?.thresholds?.map((threshold) => (\n          <MeterBarChart.ThresholdIndicator\n            key={`threshold-${threshold.color}-${threshold.value}`}\n            name={threshold.name}\n            color={threshold.color}\n            value={threshold.value}\n            showIndicator={threshold.showIndicator}\n          />\n        ))}\n      </MeterBarChart>\n    );\n  }\n\n  const isMultiMeterData = isMultiMeterBarData(value);\n  if (!isMultiMeterData) {\n    devLog('Invalid meter chart data.');\n  }\n\n  return (\n    <MultiMeterBarChart\n      size=\"size8\"\n      min={config?.min}\n      max={maxValue}\n      colorPalette={config?.colorPalette || 'categorical'}\n      width=\"100%\"\n      height=\"auto\"\n      style={{\n        pointerEvents: 'auto',\n        padding: `${Spacings.Size6} 0`,\n      }}\n      formatter={config?.formatter}\n    >\n      {\n        // only if this is multi meter data render segments\n        isMultiMeterData &&\n          value.map((data) => (\n            <MultiMeterBarChart.Segment\n              key={`${data.name}-${data.value}`}\n              name={data.name}\n              value={data.value}\n              color={data?.color}\n            />\n          ))\n      }\n      <MeterBarChart.Tooltip />\n      {config?.showTooltip && <MultiMeterBarChart.Tooltip variant=\"shared\" />}\n    </MultiMeterBarChart>\n  );\n}\n\n/**\n * Gets the highest total max values in a meterbar column.\n *\n * @param data - table data\n * @param columns - table column definition\n * @returns record of highest total max value per column\n * @internal\n */\nexport function getTotalMaxFromMeterbarChartData<\n  TData extends DataTableRowData,\n>(data: TData[], columns: DataTableColumnDef<TData>[]): Record<string, number> {\n  const meterbarColumns = columns.filter(\n    (columnDef) =>\n      isDisplayColumnDef(columnDef) && columnDef.columnType === 'meterbar',\n  );\n\n  const maxValuesStorage: Record<string, number> = {};\n\n  for (const row of data) {\n    for (const columnDef of meterbarColumns) {\n      if (isColumnDefWithAccessor(columnDef)) {\n        const { accessor, config, id: columnId } = columnDef;\n\n        const configuredMax: number | 'data-max' | undefined =\n          isDataTableMeterBarColumnConfig(config) ? config.max : undefined;\n\n        const meterbarValue = row as Record<string, unknown>;\n\n        const meterbarDataEntry =\n          typeof accessor === 'string'\n            ? meterbarValue[accessor]\n            : accessor(row);\n\n        let totalValue = DEFAULT_MAX_VALUE;\n\n        if (isNumber(configuredMax)) {\n          maxValuesStorage[columnId] = configuredMax;\n          continue;\n        }\n\n        if (meterbarDataEntry) {\n          if (Array.isArray(meterbarDataEntry)) {\n            totalValue = meterbarDataEntry.reduce(\n              (acc, current) => acc + current.value,\n              0,\n            );\n          } else {\n            const entry = isNumber(meterbarDataEntry)\n              ? meterbarDataEntry\n              : DEFAULT_MAX_VALUE;\n            totalValue =\n              configuredMax === 'data-max'\n                ? entry\n                : Math.max(entry, DEFAULT_MAX_VALUE);\n          }\n        }\n\n        maxValuesStorage[columnId] = Math.max(\n          maxValuesStorage[columnId] ?? totalValue,\n          totalValue,\n        );\n      }\n    }\n  }\n\n  return maxValuesStorage;\n}\n\n/**\n * Configuration hook for the DataTable Meterbar Chart feature.\n * @internal\n */\nexport function useMeterBarChartMaxValuesCalc<TData extends DataTableRowData>(\n  props: {\n    data: TData[];\n    columns: DataTableColumnDef<TData>[];\n  },\n  options: TableOptions<TData>,\n): void {\n  const meterbarChartMaxValues = useMemo(\n    () => getTotalMaxFromMeterbarChartData<TData>(props.data, props.columns),\n    [props.columns, props.data],\n  );\n\n  options.state = { ...options.state, meterbarChartMaxValues };\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { isEmpty, isNumber } from 'lodash-es';\nimport { useEffect, useMemo, useRef, type JSX } from 'react';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\n\nimport { MultiMeterBarChart } from '../../../../charts/meter-bar/multi-meter-bar/MultiMeterBarChart.js';\nimport { METER_BAR_SIZE } from '../../../../charts/meter-bar/shared/constants.js';\nimport type { MeterBarChartElementRef } from '../../../../charts/meter-bar/shared/types/meter-bars.js';\nimport { MeterBarChart } from '../../../../charts/meter-bar/single-meter-bar/MeterBarChart.js';\nimport { devLog } from '../../../../core/utils/logging.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport { isDisplayColumnDef } from '../../hooks/useTable/datatable-typeguards.js';\nimport type { Column, TableOptions } from '../../hooks/useTable/types.js';\nimport type {\n  DataTableColumnDef,\n  DataTableDisplayColumnDef,\n  DataTableRowData,\n} from '../../public.api.js';\nimport type { DataTableMeterbarColumnConfig } from '../ColumnTypes/column-types-types.js';\n\n/** Default max value for meterbar column. */\nconst DEFAULT_MAX_VALUE = 100;\n\n/**\n * Type guard function ensures that the defined config in the column definition contains certain properties.\n * @internal\n */\nfunction isDataTableMeterBarColumnConfig(\n  config: unknown,\n): config is DataTableMeterbarColumnConfig {\n  return (\n    config !== null &&\n    config !== undefined &&\n    typeof config === 'object' &&\n    ('max' in config ||\n      'color' in config ||\n      'threshold' in config ||\n      'showTooltip' in config ||\n      'max' in config)\n  );\n}\n\n/**\n * Type guard function ensures that the defined column contains the 'accessor' property.\n * @internal\n */\nfunction isColumnDefWithAccessor<TData, TValue>(\n  column: unknown,\n): column is DataTableDisplayColumnDef<TData, TValue> {\n  return (\n    column !== null &&\n    column !== undefined &&\n    typeof column === 'object' &&\n    'accessor' in column\n  );\n}\n\ntype MeterBarChartRendererType<TData, TValue> = {\n  value: number | { name: string; value: number; color?: string }[];\n  column: Column<TData, TValue>;\n};\n\n/**\n * Type guard to check value against MultiMeterBar values.\n * @internal\n */\nexport function isMultiMeterBarData(\n  value: unknown,\n): value is Array<{ name: string; value: number; color?: string }> {\n  return (\n    Array.isArray(value) &&\n    value.every(\n      (item) =>\n        typeof item === 'object' &&\n        typeof item.name === 'string' &&\n        typeof item.value === 'number' &&\n        (item.color === undefined || typeof item.color === 'string'),\n    )\n  );\n}\n\n/**\n * Intended for configuring and rendering the meterbar chart component.\n */\nexport function MeterBarChartRenderer<TData, TValue>({\n  value,\n  column,\n}: Readonly<MeterBarChartRendererType<TData, TValue>>): JSX.Element {\n  const table = useDataTable();\n  const chartRef = useRef<MeterBarChartElementRef>(null);\n\n  let config: DataTableMeterbarColumnConfig = {};\n  if (\n    column?.columnDef.meta &&\n    isDataTableMeterBarColumnConfig(column.columnDef.meta.config)\n  ) {\n    config = column.columnDef.meta.config;\n  }\n\n  const columnId = column.columnDef.id ?? '';\n\n  const maxValuesFromState = table.getState().meterbarChartMaxValues;\n\n  const maxValue = !isEmpty(maxValuesFromState)\n    ? maxValuesFromState[columnId]\n    : DEFAULT_MAX_VALUE;\n\n  const listenerRef = useRef<((e?: PointerEvent) => void) | null>(null);\n\n  useEffect(() => {\n    // clean possible leftover event on unmount\n    return () => {\n      listenerRef.current?.();\n    };\n  }, []);\n\n  const registerUnpinOnPointerUp = config?.showTooltip\n    ? () => {\n        if (listenerRef.current) {\n          return;\n        }\n        const handler = (event: PointerEvent) => {\n          if (\n            (event.target as HTMLElement).closest('[role=\"tooltip\"]') !== null\n          ) {\n            return;\n          }\n\n          chartRef.current?.unpinTooltip();\n          listenerRef.current?.();\n          listenerRef.current = null;\n        };\n        listenerRef.current = () =>\n          document.removeEventListener('pointerup', handler);\n        document.addEventListener('pointerup', handler);\n      }\n    : undefined;\n\n  // simple MeterBar\n  if (typeof value === 'number') {\n    return (\n      <span\n        style={{ display: 'contents' }}\n        onClick={registerUnpinOnPointerUp}\n        role=\"none\"\n      >\n        <MeterBarChart\n          value={value}\n          min={config?.min}\n          max={maxValue}\n          color={config?.color as string}\n          size={METER_BAR_SIZE.Size8}\n          width=\"100%\"\n          height=\"auto\"\n          style={{\n            pointerEvents: 'auto',\n            padding: `${Spacings.Size6} 0`,\n          }}\n          formatter={config?.formatter}\n          ref={chartRef}\n        >\n          {config?.showTooltip && <MeterBarChart.Tooltip />}\n          {config?.thresholds?.map((threshold) => (\n            <MeterBarChart.ThresholdIndicator\n              key={`threshold-${threshold.color}-${threshold.value}`}\n              name={threshold.name}\n              color={threshold.color}\n              value={threshold.value}\n              showIndicator={threshold.showIndicator}\n            />\n          ))}\n        </MeterBarChart>\n      </span>\n    );\n  }\n\n  const isMultiMeterData = isMultiMeterBarData(value);\n  if (!isMultiMeterData) {\n    devLog('Invalid meter chart data.');\n  }\n\n  return (\n    <span\n      style={{ display: 'contents' }}\n      onClick={registerUnpinOnPointerUp}\n      role=\"none\"\n    >\n      <MultiMeterBarChart\n        size=\"size8\"\n        min={config?.min}\n        max={maxValue}\n        colorPalette={config?.colorPalette || 'categorical'}\n        width=\"100%\"\n        height=\"auto\"\n        style={{\n          pointerEvents: 'auto',\n          padding: `${Spacings.Size6} 0`,\n        }}\n        formatter={config?.formatter}\n        ref={chartRef}\n      >\n        {\n          // only if this is multi meter data render segments\n          isMultiMeterData &&\n            value.map((data) => (\n              <MultiMeterBarChart.Segment\n                key={`${data.name}-${data.value}`}\n                name={data.name}\n                value={data.value}\n                color={data?.color}\n              />\n            ))\n        }\n        {config?.showTooltip && <MultiMeterBarChart.Tooltip variant=\"shared\" />}\n      </MultiMeterBarChart>\n    </span>\n  );\n}\n\n/**\n * Gets the highest total max values in a meterbar column.\n *\n * @param data - table data\n * @param columns - table column definition\n * @returns record of highest total max value per column\n * @internal\n */\nexport function getTotalMaxFromMeterbarChartData<\n  TData extends DataTableRowData,\n>(data: TData[], columns: DataTableColumnDef<TData>[]): Record<string, number> {\n  const meterbarColumns = columns.filter(\n    (columnDef) =>\n      isDisplayColumnDef(columnDef) && columnDef.columnType === 'meterbar',\n  );\n\n  const maxValuesStorage: Record<string, number> = {};\n\n  for (const row of data) {\n    for (const columnDef of meterbarColumns) {\n      if (isColumnDefWithAccessor(columnDef)) {\n        const { accessor, config, id: columnId } = columnDef;\n\n        const configuredMax: number | 'data-max' | undefined =\n          isDataTableMeterBarColumnConfig(config) ? config.max : undefined;\n\n        const meterbarValue = row as Record<string, unknown>;\n\n        const meterbarDataEntry =\n          typeof accessor === 'string'\n            ? meterbarValue[accessor]\n            : accessor(row);\n\n        let totalValue = DEFAULT_MAX_VALUE;\n\n        if (isNumber(configuredMax)) {\n          maxValuesStorage[columnId] = configuredMax;\n          continue;\n        }\n\n        if (meterbarDataEntry) {\n          if (Array.isArray(meterbarDataEntry)) {\n            totalValue = meterbarDataEntry.reduce(\n              (acc, current) => acc + current.value,\n              0,\n            );\n          } else {\n            const entry = isNumber(meterbarDataEntry)\n              ? meterbarDataEntry\n              : DEFAULT_MAX_VALUE;\n            totalValue =\n              configuredMax === 'data-max'\n                ? entry\n                : Math.max(entry, DEFAULT_MAX_VALUE);\n          }\n        }\n\n        maxValuesStorage[columnId] = Math.max(\n          maxValuesStorage[columnId] ?? totalValue,\n          totalValue,\n        );\n      }\n    }\n  }\n\n  return maxValuesStorage;\n}\n\n/**\n * Configuration hook for the DataTable Meterbar Chart feature.\n * @internal\n */\nexport function useMeterBarChartMaxValuesCalc<TData extends DataTableRowData>(\n  props: {\n    data: TData[];\n    columns: DataTableColumnDef<TData>[];\n  },\n  options: TableOptions<TData>,\n): void {\n  const meterbarChartMaxValues = useMemo(\n    () => getTotalMaxFromMeterbarChartData<TData>(props.data, props.columns),\n    [props.columns, props.data],\n  );\n\n  options.state = { ...options.state, meterbarChartMaxValues };\n}\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._2twyod0-3-2-1::before {
+._2twyod0-3-3-0::before {
   content: "";
   display: block;
   top: 0;
@@ -8,10 +8,10 @@
   width: 100%;
   z-index: 4;
 }
-._or8s40-3-2-1 ._2twyod0-3-2-1::before, ._2twyod0-3-2-1:not(:first-child)::before {
+._or8s40-3-3-0 ._2twyod0-3-3-0::before, ._2twyod0-3-3-0:not(:first-child)::before {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._2twyod1-3-2-1 {
+._2twyod1-3-3-0 {
   position: relative;
   box-sizing: border-box;
   border-bottom-width: 1px;
@@ -19,40 +19,40 @@
   border-bottom-color: transparent;
   overflow: hidden;
 }
-._2twyod1-3-2-1:not(:has(+ ._2twyod0-3-2-1)) {
+._2twyod1-3-3-0:not(:has(+ ._2twyod0-3-3-0)) {
   border-bottom-color: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._2twyod4-3-2-1:not(._or8s40-3-2-1 ._2twyod4-3-2-1) {
+._2twyod4-3-3-0:not(._or8s40-3-3-0 ._2twyod4-3-3-0) {
   opacity: 0;
 }
-._2twyod6-3-2-1 {
+._2twyod6-3-3-0 {
   border-top: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._2twyod7-3-2-1 {
+._2twyod7-3-3-0 {
   border-top: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._2twyod8-3-2-1 {
+._2twyod8-3-3-0 {
   border-bottom-width: 0;
 }
-._2twyod9-3-2-1 {
+._2twyod9-3-3-0 {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._2twyoda-3-2-1 {
+._2twyoda-3-3-0 {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
 }
-._2twyodc-3-2-1 {
+._2twyodc-3-3-0 {
   padding-top: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-8, 8px);
   padding-left: var(--dt-spacings-size-12, 12px);
 }
-._2twyodd-3-2-1 {
+._2twyodd-3-3-0 {
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-right: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   padding-left: var(--dt-spacings-size-6, 6px);
 }
-._2twyode-3-2-1 {
+._2twyode-3-3-0 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-right: var(--dt-spacings-size-16, 16px);
   padding-bottom: var(--dt-spacings-size-12, 12px);

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

@@ -1,9 +1,9 @@
 import "../RowOrder/RowOrder.css";
 import "./RowDetails.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var rowDetailsExpandedRowCell = "_2twyod0-3-2-1";
-var rowDetailsRow = _7a468({ defaultClassName: "_2twyod1-3-2-1", variantClassNames: { rowParity: { even: "_2twyod2-3-2-1", odd: "_2twyod3-3-2-1" }, isDraggedRow: { true: "_2twyod4-3-2-1" }, rowSeparation: { none: "_2twyod5-3-2-1", horizontalDividers: "_2twyod6-3-2-1", zebraStripes: "_2twyod7-3-2-1" }, isLastRow: { true: "_2twyod8-3-2-1" } }, defaultVariants: {}, compoundVariants: [[{ rowSeparation: "zebraStripes", rowParity: "even" }, "_2twyod9-3-2-1"], [{ rowSeparation: "zebraStripes", rowParity: "odd" }, "_2twyoda-3-2-1"]] });
-var rowDetailsWrapperCSS = _7a468({ defaultClassName: "_2twyodb-3-2-1", variantClassNames: { rowDensity: { "default": "_2twyodc-3-2-1", condensed: "_2twyodd-3-2-1", comfortable: "_2twyode-3-2-1" } }, defaultVariants: { rowDensity: "default" }, compoundVariants: [] });
+var rowDetailsExpandedRowCell = "_2twyod0-3-3-0";
+var rowDetailsRow = _7a468({ defaultClassName: "_2twyod1-3-3-0", variantClassNames: { rowParity: { even: "_2twyod2-3-3-0", odd: "_2twyod3-3-3-0" }, isDraggedRow: { true: "_2twyod4-3-3-0" }, rowSeparation: { none: "_2twyod5-3-3-0", horizontalDividers: "_2twyod6-3-3-0", zebraStripes: "_2twyod7-3-3-0" }, isLastRow: { true: "_2twyod8-3-3-0" } }, defaultVariants: {}, compoundVariants: [[{ rowSeparation: "zebraStripes", rowParity: "even" }, "_2twyod9-3-3-0"], [{ rowSeparation: "zebraStripes", rowParity: "odd" }, "_2twyoda-3-3-0"]] });
+var rowDetailsWrapperCSS = _7a468({ defaultClassName: "_2twyodb-3-3-0", variantClassNames: { rowDensity: { "default": "_2twyodc-3-3-0", condensed: "_2twyodd-3-3-0", comfortable: "_2twyode-3-3-0" } }, defaultVariants: { rowDensity: "default" }, compoundVariants: [] });
 export {
   rowDetailsExpandedRowCell,
   rowDetailsRow,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/RowDetails/RowDetails.css.ts"],
-  "sourcesContent": ["import '../RowOrder/RowOrder.css';\nimport './RowDetails.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var rowDetailsExpandedRowCell = '_2twyod0-3-2-1';\nexport var rowDetailsRow = _7a468({defaultClassName:'_2twyod1-3-2-1',variantClassNames:{rowParity:{even:'_2twyod2-3-2-1',odd:'_2twyod3-3-2-1'},isDraggedRow:{true:'_2twyod4-3-2-1'},rowSeparation:{none:'_2twyod5-3-2-1',horizontalDividers:'_2twyod6-3-2-1',zebraStripes:'_2twyod7-3-2-1'},isLastRow:{true:'_2twyod8-3-2-1'}},defaultVariants:{},compoundVariants:[[{rowSeparation:'zebraStripes',rowParity:'even'},'_2twyod9-3-2-1'],[{rowSeparation:'zebraStripes',rowParity:'odd'},'_2twyoda-3-2-1']]});\nexport var rowDetailsWrapperCSS = _7a468({defaultClassName:'_2twyodb-3-2-1',variantClassNames:{rowDensity:{'default':'_2twyodc-3-2-1',condensed:'_2twyodd-3-2-1',comfortable:'_2twyode-3-2-1'}},defaultVariants:{rowDensity:'default'},compoundVariants:[]});"],
+  "sourcesContent": ["import '../RowOrder/RowOrder.css';\nimport './RowDetails.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var rowDetailsExpandedRowCell = '_2twyod0-3-3-0';\nexport var rowDetailsRow = _7a468({defaultClassName:'_2twyod1-3-3-0',variantClassNames:{rowParity:{even:'_2twyod2-3-3-0',odd:'_2twyod3-3-3-0'},isDraggedRow:{true:'_2twyod4-3-3-0'},rowSeparation:{none:'_2twyod5-3-3-0',horizontalDividers:'_2twyod6-3-3-0',zebraStripes:'_2twyod7-3-3-0'},isLastRow:{true:'_2twyod8-3-3-0'}},defaultVariants:{},compoundVariants:[[{rowSeparation:'zebraStripes',rowParity:'even'},'_2twyod9-3-3-0'],[{rowSeparation:'zebraStripes',rowParity:'odd'},'_2twyoda-3-3-0']]});\nexport var rowDetailsWrapperCSS = _7a468({defaultClassName:'_2twyodb-3-3-0',variantClassNames:{rowDensity:{'default':'_2twyodc-3-3-0',condensed:'_2twyodd-3-3-0',comfortable:'_2twyode-3-3-0'}},defaultVariants:{rowDensity:'default'},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,4BAA4B;AAChC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,WAAU,EAAC,MAAK,kBAAiB,KAAI,iBAAgB,GAAE,cAAa,EAAC,MAAK,iBAAgB,GAAE,eAAc,EAAC,MAAK,kBAAiB,oBAAmB,kBAAiB,cAAa,iBAAgB,GAAE,WAAU,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,eAAc,gBAAe,WAAU,OAAM,GAAE,gBAAgB,GAAE,CAAC,EAAC,eAAc,gBAAe,WAAU,MAAK,GAAE,gBAAgB,CAAC,EAAC,CAAC;AACne,IAAI,uBAAuB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,YAAW,EAAC,WAAU,kBAAiB,WAAU,kBAAiB,aAAY,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,YAAW,UAAS,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }