@dynatrace/strato-components 3.2.0 → 3.3.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/ColumnSizing/ColumnSizing.tsx"],
-  "sourcesContent": ["import { functionalUpdate } from '@tanstack/react-table';\nimport {\n  type MouseEvent as ReactMouseEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type TouchEvent as ReactTouchEvent,\n} from 'react';\n\nimport type {\n  DataTableColumnSizingProps,\n  DataTableColumnSizingState,\n} from './column-sizing-types.js';\nimport * as styles from './ColumnSizing.sty.js';\nimport { useControllableState } from '../../../../core/hooks/useControllableState.js';\nimport { useDataTableConfigElement } from '../../../hooks/useDataTableConfig.js';\nimport {\n  DATA_TABLE_DEFAULT_MIN_COLUMN_WIDTH,\n  DATA_TABLE_RESIZING_LEFT_POSITION_CSS_VAR,\n  DATA_TABLE_RESIZING_RIGHT_POSITION_CSS_VAR,\n  DATA_TABLE_STRATO_RESIZING_SIZE_CSS_VAR,\n} from '../../constants.js';\nimport type {\n  Column,\n  Header,\n  RowData,\n  Table,\n  TableFeature,\n  TableOptions,\n} from '../../hooks/useTable/types.js';\nimport { isFractionWidth } from '../Layout/width-utils.js';\n\n/** Keyboard offset for column resizing (px). */\nconst COLUMN_RESIZE_KEYBOARD_OFFSET = 10;\n/** Keyboard multiplier for column resizing when Ctrl is held. */\nconst COLUMN_RESIZE_KEYBOARD_CTRL_MULTIPLIER = 10;\n\nconst getClientX = (event: MouseEvent | TouchEvent): number | undefined => {\n  if ('touches' in event && event.touches.length > 0) {\n    return event.touches[0].clientX;\n  }\n  if ('changedTouches' in event && event.changedTouches.length > 0) {\n    return event.changedTouches[0].clientX;\n  }\n  if ('clientX' in event) {\n    return event.clientX;\n  }\n};\n\n/**\n * @internal\n */\nexport const DataTableColumnSizing: TableFeature = {\n  createHeader<TData extends RowData, TValue>(\n    header: Header<TData, TValue>,\n    table: Table<TData>,\n  ) {\n    // helper function to clear the focus on the resizer.\n    const clearResizerFocus = () => {\n      if (document.activeElement instanceof HTMLElement) {\n        document.activeElement.blur();\n      }\n    };\n\n    // Side effect function to add the temporary variables to pinned columns while resizing\n    const addPinnedColumnsPositionsStyles = (\n      pinnedPosition: 'left' | 'right',\n      container: HTMLElement | null,\n      colId: string,\n      newPosition: number,\n    ) => {\n      const resizingPositionVariable =\n        pinnedPosition === 'left'\n          ? DATA_TABLE_RESIZING_LEFT_POSITION_CSS_VAR\n          : DATA_TABLE_RESIZING_RIGHT_POSITION_CSS_VAR;\n\n      // Update header position\n      const targetColumn: HTMLElement | null | undefined =\n        container?.querySelector(\n          `[role=columnheader][data-headerid=${CSS.escape(colId)}]`,\n        );\n      targetColumn?.style.setProperty(\n        resizingPositionVariable,\n        `${newPosition}px`,\n      );\n\n      const targetColumnParentId = table.getColumn(colId)?.parent?.id;\n\n      if (targetColumnParentId) {\n        const pinnedState = table.getState().columnPinning;\n        const pinnedColumns: string[] | undefined =\n          pinnedPosition === 'left' ? pinnedState.left : pinnedState.right;\n\n        const pinnedChildren: string[] | undefined = pinnedColumns?.filter(\n          (id) => id.includes(targetColumnParentId),\n        );\n\n        // for the left pinned columns, only update the parent position if the child at the left edge is being resized\n        // for the right pinned columns, only update the parent position if the child at the right edge is being resized\n        const edgeChildId: string | undefined =\n          pinnedPosition === 'left'\n            ? pinnedChildren?.at(0)\n            : pinnedChildren?.at(-1);\n\n        if (colId === edgeChildId) {\n          const parentNode: HTMLElement | null | undefined =\n            container?.querySelector(\n              `[data-headerid*=${pinnedPosition}][data-headerid*=${CSS.escape(\n                targetColumnParentId,\n              )}]`,\n            );\n\n          parentNode?.style.setProperty(\n            resizingPositionVariable,\n            `${newPosition}px`,\n          );\n        }\n      }\n\n      // update all cells from the column\n      const allColumnCells: NodeListOf<HTMLElement> | undefined =\n        container?.querySelectorAll(\n          `[role=cell][data-columnid=${CSS.escape(colId)}]`,\n        );\n\n      if (allColumnCells?.length) {\n        Array.from(allColumnCells).forEach((cell) => {\n          cell.style.setProperty(resizingPositionVariable, `${newPosition}px`);\n        });\n      }\n\n      // update the position of the box-shadow\n      const pinnedShadowNodes: NodeListOf<HTMLElement> | undefined =\n        container?.querySelectorAll(`[data-pinned-position=${pinnedPosition}]`);\n\n      if (pinnedShadowNodes?.length) {\n        Array.from(pinnedShadowNodes).forEach((node) => {\n          node.style.setProperty(resizingPositionVariable, `${newPosition}px`);\n        });\n      }\n    };\n\n    // Side effect function to clear up the container styles that have been applied while resizing.\n    const clearContainerStyles = (container: HTMLElement | null): void => {\n      // Wait an animation frame to remove the custom property to prevent\n      // a layout jump\n      requestAnimationFrame(() => {\n        container?.style.removeProperty(\n          DATA_TABLE_STRATO_RESIZING_SIZE_CSS_VAR,\n        );\n        // Remove col-resize cursor style from body element,\n        // and reset pointer events on all children.\n        document.body.classList.remove(styles.tableColumnResizing);\n\n        if (table.options.enableColumnPinning) {\n          container\n            ?.querySelectorAll(\n              `[style*=${DATA_TABLE_RESIZING_LEFT_POSITION_CSS_VAR}], [style*=${DATA_TABLE_RESIZING_RIGHT_POSITION_CSS_VAR}]`,\n            )\n            .forEach((elem) => {\n              if (elem instanceof HTMLElement) {\n                const style = elem.style;\n                style.removeProperty(DATA_TABLE_RESIZING_LEFT_POSITION_CSS_VAR);\n                style.removeProperty(\n                  DATA_TABLE_RESIZING_RIGHT_POSITION_CSS_VAR,\n                );\n              }\n            });\n        }\n      });\n    };\n\n    header.handleResize = (\n      event:\n        | ReactMouseEvent<HTMLButtonElement>\n        | ReactTouchEvent<HTMLButtonElement>,\n    ) => {\n      const column = table.getColumn(header.column.id);\n      const canResize = column?.getCanResize();\n      const pinnedPosition = header.getIsPinned();\n      const isPinnedLeft = pinnedPosition === 'left';\n      const isPinnedRight = pinnedPosition === 'right';\n\n      if (!column || !canResize) {\n        return;\n      }\n      event.persist();\n\n      // If a double click appears, do not continue further with the single click\n      // drag handling\n      if (event.detail === 2) {\n        return;\n      }\n\n      const target = event.target;\n      if (target instanceof HTMLElement === false) {\n        return;\n      }\n\n      // store initial pinned columns widths.\n      // necessary to dynamically update the positions of the pinned columns during resize\n      const pinnedColumnsWidths: {\n        left: Record<string, number>;\n        right: Record<string, number>;\n      } = { left: {}, right: {} };\n      let columnIndex: number | undefined;\n\n      if (pinnedPosition) {\n        const pinnedState = table.getState().columnPinning;\n\n        // current target ID\n        const targetId =\n          target.previousElementSibling?.getAttribute('data-headerid');\n\n        columnIndex = pinnedState[pinnedPosition]?.findIndex(\n          (id) => id === targetId,\n        );\n        if (columnIndex !== undefined && pinnedState[pinnedPosition]?.length) {\n          for (const element of pinnedState[pinnedPosition]) {\n            pinnedColumnsWidths[pinnedPosition][element] =\n              table.getColumnOrHeaderWidth(element);\n          }\n        }\n      }\n\n      const startSize =\n        target.previousElementSibling?.getBoundingClientRect().width;\n      // If the header could not be measured, we can't resize it\n      if (startSize === undefined) {\n        return;\n      }\n\n      const columnSizingStart: [string, number][] = [[column.id, startSize]];\n      // Keep a reference for columns affected by the sizing.\n      const newColumnSizing: DataTableColumnSizingState = {};\n      // Get the starting clientX where the drag started.\n      const clientX = getClientX(event.nativeEvent) ?? null;\n\n      const {\n        minWidth = DATA_TABLE_DEFAULT_MIN_COLUMN_WIDTH,\n        maxWidth = Number.MAX_SAFE_INTEGER,\n      } = column.columnDef;\n      const size = `${Math.min(Math.max(startSize, minWidth), maxWidth)}px`;\n      const container: HTMLElement | null = target.closest(\n        '.strato-table-virtualization-container',\n      );\n      container?.style.setProperty(\n        DATA_TABLE_STRATO_RESIZING_SIZE_CSS_VAR,\n        size,\n      );\n      // During resizing, add col-resize cursor style to body element,\n      // and prevent pointer events on all children.\n      // Note: needs to be an element outside the container\n      // that does not have pointer-events: none.\n      document.body.classList.add(styles.tableColumnResizing);\n\n      // Updating the actual offset in the columnSizingInfo\n      const updateOffset = (eventType: 'move' | 'end', clientXPos?: number) => {\n        if (typeof clientXPos !== 'number') {\n          return;\n        }\n\n        const old = table.getState().columnSizingInfo;\n\n        const deltaOffset = clientXPos - (old?.startOffset ?? 0);\n        const deltaOffsetRatio = deltaOffset / (old?.startSize ?? 0);\n        // Calculate the percentage so the other columns next to it can be scaled\n        // by the same fraction.\n        const deltaPercentage = isPinnedRight\n          ? deltaOffsetRatio\n          : Math.max(deltaOffsetRatio, -0.9999999);\n\n        columnSizingStart.forEach(([columnId, headerSize]) => {\n          newColumnSizing[columnId] =\n            Math.round(\n              Math.max(\n                isPinnedRight\n                  ? headerSize - headerSize * deltaPercentage\n                  : headerSize + headerSize * deltaPercentage,\n                0,\n              ) * 100,\n            ) / 100;\n        });\n        const {\n          minWidth = DATA_TABLE_DEFAULT_MIN_COLUMN_WIDTH,\n          maxWidth = Number.MAX_SAFE_INTEGER,\n        } = column.columnDef;\n        const size = `${Math.min(\n          Math.max(\n            isPinnedRight ? startSize - deltaOffset : startSize + deltaOffset,\n            minWidth,\n          ),\n          maxWidth,\n        )}px`;\n\n        // While dragging set the custom property value\n        container?.style.setProperty(\n          DATA_TABLE_STRATO_RESIZING_SIZE_CSS_VAR,\n          size,\n        );\n\n        updatePinnedColumnsPositions(deltaOffset);\n\n        // When dragging ends, we can update the actual widths of the columns\n        if (eventType === 'end') {\n          table.setColumnSizing((old) => ({\n            ...old,\n            ...newColumnSizing,\n          }));\n        }\n      };\n\n      /**\n       * Dynamically update the positions of the pinned columns while resizing\n       */\n      const updatePinnedColumnsPositions = (deltaOffset: number): void => {\n        if (columnIndex === undefined) {\n          return;\n        }\n\n        const leftPinnedColumnsWidths = pinnedColumnsWidths.left;\n        const rightPinnedColumnsWidths = pinnedColumnsWidths.right;\n\n        if (isPinnedLeft) {\n          const values = Object.entries(leftPinnedColumnsWidths);\n          const [, currentColumnInitialWidth] = values[columnIndex];\n\n          // we should update only the left position of the pinned columns to the right of the one being resized\n          for (let i = columnIndex + 1; i < values.length; i++) {\n            const [colId] = values[i];\n\n            // left position of a column is equal to the sum of the previous column widths + deltaOffset\n            let prevColumnIndex = i - 1;\n            let totalWidth = 0;\n\n            while (prevColumnIndex >= 0) {\n              const [, prevColWidth] = values[prevColumnIndex];\n              totalWidth += prevColWidth;\n              prevColumnIndex -= 1;\n            }\n\n            const leftPositionThreshold =\n              totalWidth - currentColumnInitialWidth + minWidth;\n\n            const newLeftPosition = Math.max(\n              totalWidth + deltaOffset,\n              leftPositionThreshold,\n            );\n\n            addPinnedColumnsPositionsStyles(\n              'left',\n              container,\n              colId,\n              newLeftPosition,\n            );\n          }\n        }\n\n        if (isPinnedRight) {\n          const values = Object.entries(rightPinnedColumnsWidths);\n          const [, currentColumnInitialWidth] = values[columnIndex];\n\n          // we should update only the right position of the pinned columns to the left of the one being resized\n          for (let i = columnIndex - 1; i >= 0; i--) {\n            const [colId] = values[i];\n\n            // right position of a column is equal to the next column width from the right - deltaOffset\n            let prevColumnIndex = i + 1;\n            let totalWidth = 0;\n\n            while (prevColumnIndex < values.length) {\n              const [, prevWidth] = values[prevColumnIndex];\n              totalWidth += prevWidth;\n              prevColumnIndex += 1;\n            }\n\n            const rightPositionThreshold =\n              totalWidth - currentColumnInitialWidth + minWidth;\n\n            const newRightPosition = Math.max(\n              totalWidth - deltaOffset,\n              rightPositionThreshold,\n            );\n\n            addPinnedColumnsPositionsStyles(\n              'right',\n              container,\n              colId,\n              newRightPosition,\n            );\n          }\n        }\n      };\n\n      const onEnd = (clientXPos?: number) => {\n        updateOffset('end', clientXPos);\n        clearContainerStyles(container);\n\n        // If we are coming from mouse movements, then clear the focus on resizer\n        clearResizerFocus();\n\n        table.setColumnSizingInfo((old) => ({\n          ...old,\n          isResizingColumn: false,\n          startOffset: null,\n          startSize: null,\n          deltaOffset: null,\n          deltaPercentage: null,\n          columnSizingStart: [],\n        }));\n      };\n\n      const moveHandler = (moveEvent: MouseEvent | TouchEvent): void => {\n        const clientXPos = getClientX(moveEvent);\n        updateOffset('move', clientXPos);\n      };\n\n      const upHandler = (upEvent: MouseEvent | TouchEvent): void => {\n        document.removeEventListener('mousemove', moveHandler);\n        document.removeEventListener('mouseup', upHandler);\n        document.removeEventListener('touchmove', moveHandler);\n        document.removeEventListener('touchend', upHandler);\n        const clientXPos = getClientX(upEvent);\n        onEnd(clientXPos);\n      };\n\n      // TODO: SSR check if document is there.\n      document.addEventListener('mousemove', moveHandler);\n      document.addEventListener('mouseup', upHandler);\n      document.addEventListener('touchmove', moveHandler);\n      document.addEventListener('touchend', upHandler);\n\n      // If the table has any fractional templates, we need to make sure to lock their size in place, before starting\n      // to resize the remaining things.\n      if (table.getHasFractionalTemplate()) {\n        const fractionColumns = table\n          .getVisibleLeafColumnsWithoutBuiltin()\n          .filter(\n            ({ id, columnDef }) =>\n              (columnDef.width === undefined ||\n                isFractionWidth(columnDef.width)) &&\n              id !== column.id,\n          );\n\n        table.setColumnSizing((old) => {\n          const newColumnSizing = { ...old };\n          for (const fractionColumn of fractionColumns) {\n            newColumnSizing[fractionColumn.id] = table.getColumnOrHeaderWidth(\n              fractionColumn.id,\n            );\n          }\n          return newColumnSizing;\n        });\n      }\n\n      table.setColumnSizingInfo((old) => ({\n        ...old,\n        startOffset: clientX,\n        startSize,\n        deltaOffset: 0,\n        deltaPercentage: 0,\n        columnSizingStart,\n        isResizingColumn: column.id,\n      }));\n    };\n\n    header.handleResizeExpand = (event: ReactMouseEvent<HTMLButtonElement>) => {\n      const column = table.getColumn(header.column.id);\n      const canResize = column?.getCanResize();\n\n      if (event.type !== 'dblclick') {\n        return;\n      }\n\n      if (!column || !canResize) {\n        return;\n      }\n\n      event.persist();\n\n      const target = event.target;\n      if (target instanceof HTMLElement === false) {\n        return;\n      }\n\n      const startSize =\n        target.previousElementSibling?.getBoundingClientRect().width;\n\n      // If the header could not be measured, we can't resize it\n      if (startSize === undefined) {\n        return;\n      }\n\n      // Get the starting clientX where the drag started.\n      const clientX = event.clientX;\n\n      const columnSizingStart: [string, number][] = [[column.id, startSize]];\n      const container: HTMLElement | null = target.closest(\n        '.strato-table-virtualization-container',\n      );\n      // While dragging set the custom property value\n      container?.style.setProperty(\n        DATA_TABLE_STRATO_RESIZING_SIZE_CSS_VAR,\n        'max-content',\n      );\n\n      table.setColumnSizingInfo((old) => ({\n        ...old,\n        startOffset: clientX,\n        startSize,\n        deltaOffset: 0,\n        deltaPercentage: 0,\n        columnSizingStart,\n        isResizingColumn: column.id,\n      }));\n\n      table._queue(() => {\n        const target = event.target;\n        if (!(target instanceof HTMLButtonElement)) {\n          return;\n        }\n        const targetRow = target.dataset.headerRow;\n        const targetColumn = target.dataset.column;\n        const parent = target.parentElement;\n        const cell: HTMLElement | null | undefined = parent?.querySelector(\n          `div[data-header-row=\"${CSS.escape(\n            String(targetRow),\n          )}\"][data-column=\"${CSS.escape(String(targetColumn))}\"]`,\n        );\n        if (cell) {\n          const { width } = cell.getBoundingClientRect();\n          table.setColumnSizingInfo((old) => ({\n            ...old,\n            isResizingColumn: false,\n            startOffset: null,\n            startSize: null,\n            deltaOffset: null,\n            deltaPercentage: null,\n            columnSizingStart: [],\n          }));\n          table.setColumnSizing((old) => ({\n            ...old,\n            [column.id]: width,\n          }));\n        }\n        requestAnimationFrame(() =>\n          container?.style.removeProperty(\n            DATA_TABLE_STRATO_RESIZING_SIZE_CSS_VAR,\n          ),\n        );\n      });\n    };\n\n    header.handleKeyboardResize = (\n      event: ReactKeyboardEvent<HTMLButtonElement>,\n    ) => {\n      const column = table.getColumn(header.column.id);\n      const canResize = column?.getCanResize();\n\n      const target = event.target;\n      if (\n        !column ||\n        !canResize ||\n        target instanceof HTMLElement === false ||\n        (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')\n      ) {\n        // clear the focus on resizer\n        if (event.key === 'Escape') {\n          clearResizerFocus();\n        }\n        return;\n      }\n\n      event.persist();\n\n      const startSize =\n        target.previousElementSibling?.getBoundingClientRect().width;\n\n      // If the header could not be measured, we can't resize it\n      if (startSize === undefined) {\n        return;\n      }\n\n      let offset = 0;\n      if (event.key === 'ArrowLeft') {\n        offset = -COLUMN_RESIZE_KEYBOARD_OFFSET;\n      } else if (event.key === 'ArrowRight') {\n        offset = COLUMN_RESIZE_KEYBOARD_OFFSET;\n      }\n\n      if (event.ctrlKey === true) {\n        offset *= COLUMN_RESIZE_KEYBOARD_CTRL_MULTIPLIER;\n      }\n\n      table.setColumnSizing((old) => ({\n        ...old,\n        [column.id]: startSize + offset,\n      }));\n    };\n  },\n\n  createColumn<TData extends RowData, TValue>(\n    column: Column<TData, TValue>,\n    table: Table<TData>,\n  ) {\n    column.getCanResize = () => {\n      // Parent columns are not resizable, only their children are.\n      if (column.columns.length !== 0) {\n        return false;\n      }\n\n      // columnResizing is disabled on the DataTable or on the individual column\n      if (\n        table.options.enableColumnResizing !== true ||\n        column.columnDef.enableResizing === false\n      ) {\n        return false;\n      }\n\n      // Need to evaluate that one here, as it is not yet available in the\n      // createColumn wrapper.\n      const lastLeafColumn = table.getVisibleLeafColumns().at(-1);\n      // Check if it is the last column\n      if (column.id === lastLeafColumn?.id) {\n        return false;\n      }\n\n      return true;\n    };\n  },\n};\n\n/**\n * @internal\n */\nexport function useColumnSizing<TData>(\n  props: DataTableColumnSizingProps,\n  options: TableOptions<TData>,\n): void {\n  options.enableColumnResizing = false;\n\n  const configResizable = useDataTableConfigElement('resizable');\n\n  const [columnSizing, setColumnSizing] = useControllableState({\n    value: props.columnSizing,\n    defaultValue: props.defaultColumnSizing ?? {},\n    onChange: props.onColumnSizingChange,\n  });\n\n  if (configResizable === true || props.resizable === true) {\n    options.enableColumnResizing = true;\n    options.state = {\n      ...options.state,\n      columnSizing,\n    };\n\n    options.onColumnSizingChange = (updater) => {\n      const newValue = functionalUpdate(updater, columnSizing);\n      setColumnSizing(newValue);\n    };\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { functionalUpdate } from '@tanstack/react-table';\nimport {\n  type MouseEvent as ReactMouseEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type TouchEvent as ReactTouchEvent,\n} from 'react';\n\nimport type {\n  DataTableColumnSizingProps,\n  DataTableColumnSizingState,\n} from './column-sizing-types.js';\nimport * as styles from './ColumnSizing.sty.js';\nimport { useControllableState } from '../../../../core/hooks/useControllableState.js';\nimport { useDataTableConfigElement } from '../../../hooks/useDataTableConfig.js';\nimport {\n  DATA_TABLE_DEFAULT_MIN_COLUMN_WIDTH,\n  DATA_TABLE_RESIZING_LEFT_POSITION_CSS_VAR,\n  DATA_TABLE_RESIZING_RIGHT_POSITION_CSS_VAR,\n  DATA_TABLE_STRATO_RESIZING_SIZE_CSS_VAR,\n} from '../../constants.js';\nimport type {\n  Column,\n  Header,\n  RowData,\n  Table,\n  TableFeature,\n  TableOptions,\n} from '../../hooks/useTable/types.js';\nimport { isFractionWidth } from '../Layout/width-utils.js';\n\n/** Keyboard offset for column resizing (px). */\nconst COLUMN_RESIZE_KEYBOARD_OFFSET = 10;\n/** Keyboard multiplier for column resizing when Ctrl is held. */\nconst COLUMN_RESIZE_KEYBOARD_CTRL_MULTIPLIER = 10;\n\nconst getClientX = (event: MouseEvent | TouchEvent): number | undefined => {\n  if ('touches' in event && event.touches.length > 0) {\n    return event.touches[0].clientX;\n  }\n  if ('changedTouches' in event && event.changedTouches.length > 0) {\n    return event.changedTouches[0].clientX;\n  }\n  if ('clientX' in event) {\n    return event.clientX;\n  }\n};\n\n// Returns the width of the header cell element of the given resize handle.\nconst getHeaderCellWidth = (resizeHandle: HTMLElement): number | undefined =>\n  resizeHandle.parentElement?.getBoundingClientRect().width;\n\n// helper function to clear the focus on the resizer.\nconst clearResizerFocus = (): void => {\n  if (document.activeElement instanceof HTMLElement) {\n    document.activeElement.blur();\n  }\n};\n\n/**\n * @internal\n */\nexport const DataTableColumnSizing: TableFeature = {\n  createHeader<TData extends RowData, TValue>(\n    header: Header<TData, TValue>,\n    table: Table<TData>,\n  ) {\n    // Side effect function to clear up the container styles that have been applied while resizing.\n    const clearContainerStyles = (container: HTMLElement | null): void => {\n      // Wait an animation frame to remove the custom property to prevent\n      // a layout jump\n      requestAnimationFrame(() => {\n        container?.style.removeProperty(\n          DATA_TABLE_STRATO_RESIZING_SIZE_CSS_VAR,\n        );\n        // Remove col-resize cursor style from body element,\n        // and reset pointer events on all children.\n        document.body.classList.remove(styles.tableColumnResizing);\n\n        if (table.options.enableColumnPinning) {\n          container\n            ?.querySelectorAll(\n              `[style*=${DATA_TABLE_RESIZING_LEFT_POSITION_CSS_VAR}], [style*=${DATA_TABLE_RESIZING_RIGHT_POSITION_CSS_VAR}]`,\n            )\n            .forEach((elem) => {\n              if (elem instanceof HTMLElement) {\n                const style = elem.style;\n                style.removeProperty(DATA_TABLE_RESIZING_LEFT_POSITION_CSS_VAR);\n                style.removeProperty(\n                  DATA_TABLE_RESIZING_RIGHT_POSITION_CSS_VAR,\n                );\n              }\n            });\n        }\n      });\n    };\n\n    // Side effect function to add the temporary variables to pinned columns while resizing\n    const addPinnedColumnsPositionsStyles = (\n      pinnedPosition: 'left' | 'right',\n      container: HTMLElement | null,\n      colId: string,\n      newPosition: number,\n    ) => {\n      const resizingPositionVariable =\n        pinnedPosition === 'left'\n          ? DATA_TABLE_RESIZING_LEFT_POSITION_CSS_VAR\n          : DATA_TABLE_RESIZING_RIGHT_POSITION_CSS_VAR;\n\n      // Update header position\n      const targetColumn: HTMLElement | null | undefined =\n        container?.querySelector(\n          `[role=columnheader][data-headerid=${CSS.escape(colId)}]`,\n        );\n      targetColumn?.style.setProperty(\n        resizingPositionVariable,\n        `${newPosition}px`,\n      );\n\n      const targetColumnParentId = table.getColumn(colId)?.parent?.id;\n\n      if (targetColumnParentId) {\n        const pinnedState = table.getState().columnPinning;\n        const pinnedColumns: string[] | undefined =\n          pinnedPosition === 'left' ? pinnedState.left : pinnedState.right;\n\n        const pinnedChildren: string[] | undefined = pinnedColumns?.filter(\n          (id) => id.includes(targetColumnParentId),\n        );\n\n        // for the left pinned columns, only update the parent position if the child at the left edge is being resized\n        // for the right pinned columns, only update the parent position if the child at the right edge is being resized\n        const edgeChildId: string | undefined =\n          pinnedPosition === 'left'\n            ? pinnedChildren?.at(0)\n            : pinnedChildren?.at(-1);\n\n        if (colId === edgeChildId) {\n          const parentNode: HTMLElement | null | undefined =\n            container?.querySelector(\n              `[data-headerid*=${pinnedPosition}][data-headerid*=${CSS.escape(\n                targetColumnParentId,\n              )}]`,\n            );\n\n          parentNode?.style.setProperty(\n            resizingPositionVariable,\n            `${newPosition}px`,\n          );\n        }\n      }\n\n      // update all cells from the column\n      const allColumnCells: NodeListOf<HTMLElement> | undefined =\n        container?.querySelectorAll(\n          `[role=cell][data-columnid=${CSS.escape(colId)}]`,\n        );\n\n      if (allColumnCells?.length) {\n        Array.from(allColumnCells).forEach((cell) => {\n          cell.style.setProperty(resizingPositionVariable, `${newPosition}px`);\n        });\n      }\n\n      // update the position of the box-shadow\n      const pinnedShadowNodes: NodeListOf<HTMLElement> | undefined =\n        container?.querySelectorAll(`[data-pinned-position=${pinnedPosition}]`);\n\n      if (pinnedShadowNodes?.length) {\n        Array.from(pinnedShadowNodes).forEach((node) => {\n          node.style.setProperty(resizingPositionVariable, `${newPosition}px`);\n        });\n      }\n    };\n\n    header.handleResize = (\n      event:\n        | ReactMouseEvent<HTMLButtonElement>\n        | ReactTouchEvent<HTMLButtonElement>,\n    ) => {\n      const column = table.getColumn(header.column.id);\n      const canResize = column?.getCanResize();\n      const pinnedPosition = header.getIsPinned();\n      const isPinnedLeft = pinnedPosition === 'left';\n      const isPinnedRight = pinnedPosition === 'right';\n\n      if (!column || !canResize) {\n        return;\n      }\n      event.persist();\n\n      // If a double click appears, do not continue further with the single click\n      // drag handling\n      if (event.detail === 2) {\n        return;\n      }\n\n      const target = event.target;\n      if (target instanceof HTMLElement === false) {\n        return;\n      }\n\n      // store initial pinned columns widths.\n      // necessary to dynamically update the positions of the pinned columns during resize\n      const pinnedColumnsWidths: {\n        left: Record<string, number>;\n        right: Record<string, number>;\n      } = { left: {}, right: {} };\n      let columnIndex: number | undefined;\n\n      if (pinnedPosition) {\n        const pinnedState = table.getState().columnPinning;\n\n        // The header id of the header the resize handle belongs to\n        const headerId = target.parentElement?.dataset.headerid;\n\n        columnIndex = headerId\n          ? pinnedState[pinnedPosition]?.indexOf(headerId)\n          : undefined;\n        if (columnIndex !== undefined && pinnedState[pinnedPosition]?.length) {\n          for (const element of pinnedState[pinnedPosition]) {\n            pinnedColumnsWidths[pinnedPosition][element] =\n              table.getColumnOrHeaderWidth(element);\n          }\n        }\n      }\n\n      const startSize = getHeaderCellWidth(target);\n      // If the header could not be measured, we can't resize it\n      if (startSize === undefined) {\n        return;\n      }\n\n      const columnSizingStart: [string, number][] = [[column.id, startSize]];\n      // Keep a reference for columns affected by the sizing.\n      const newColumnSizing: DataTableColumnSizingState = {};\n      // Get the starting clientX where the drag started.\n      const clientX = getClientX(event.nativeEvent) ?? null;\n\n      const {\n        minWidth = DATA_TABLE_DEFAULT_MIN_COLUMN_WIDTH,\n        maxWidth = Number.MAX_SAFE_INTEGER,\n      } = column.columnDef;\n      const size = `${Math.min(Math.max(startSize, minWidth), maxWidth)}px`;\n      const container: HTMLElement | null = target.closest(\n        '.strato-table-virtualization-container',\n      );\n      container?.style.setProperty(\n        DATA_TABLE_STRATO_RESIZING_SIZE_CSS_VAR,\n        size,\n      );\n      // During resizing, add col-resize cursor style to body element,\n      // and prevent pointer events on all children.\n      // Note: needs to be an element outside the container\n      // that does not have pointer-events: none.\n      document.body.classList.add(styles.tableColumnResizing);\n\n      // Updating the actual offset in the columnSizingInfo\n      const updateOffset = (eventType: 'move' | 'end', clientXPos?: number) => {\n        if (typeof clientXPos !== 'number') {\n          return;\n        }\n\n        const old = table.getState().columnSizingInfo;\n\n        const deltaOffset = clientXPos - (old?.startOffset ?? 0);\n        const deltaOffsetRatio = deltaOffset / (old?.startSize ?? 0);\n        // Calculate the percentage so the other columns next to it can be scaled\n        // by the same fraction.\n        const deltaPercentage = isPinnedRight\n          ? deltaOffsetRatio\n          : Math.max(deltaOffsetRatio, -0.9999999);\n\n        columnSizingStart.forEach(([columnId, headerSize]) => {\n          newColumnSizing[columnId] =\n            Math.round(\n              Math.max(\n                isPinnedRight\n                  ? headerSize - headerSize * deltaPercentage\n                  : headerSize + headerSize * deltaPercentage,\n                0,\n              ) * 100,\n            ) / 100;\n        });\n        const {\n          minWidth = DATA_TABLE_DEFAULT_MIN_COLUMN_WIDTH,\n          maxWidth = Number.MAX_SAFE_INTEGER,\n        } = column.columnDef;\n        const size = `${Math.min(\n          Math.max(\n            isPinnedRight ? startSize - deltaOffset : startSize + deltaOffset,\n            minWidth,\n          ),\n          maxWidth,\n        )}px`;\n\n        // While dragging set the custom property value\n        container?.style.setProperty(\n          DATA_TABLE_STRATO_RESIZING_SIZE_CSS_VAR,\n          size,\n        );\n\n        updatePinnedColumnsPositions(deltaOffset);\n\n        // When dragging ends, we can update the actual widths of the columns\n        if (eventType === 'end') {\n          table.setColumnSizing((old) => ({\n            ...old,\n            ...newColumnSizing,\n          }));\n        }\n      };\n\n      /**\n       * Dynamically update the positions of the pinned columns while resizing\n       */\n      const updatePinnedColumnsPositions = (deltaOffset: number): void => {\n        if (columnIndex === undefined) {\n          return;\n        }\n\n        const leftPinnedColumnsWidths = pinnedColumnsWidths.left;\n        const rightPinnedColumnsWidths = pinnedColumnsWidths.right;\n\n        if (isPinnedLeft) {\n          const values = Object.entries(leftPinnedColumnsWidths);\n          const [, currentColumnInitialWidth] = values[columnIndex];\n\n          // we should update only the left position of the pinned columns to the right of the one being resized\n          for (let i = columnIndex + 1; i < values.length; i++) {\n            const [colId] = values[i];\n\n            // left position of a column is equal to the sum of the previous column widths + deltaOffset\n            let prevColumnIndex = i - 1;\n            let totalWidth = 0;\n\n            while (prevColumnIndex >= 0) {\n              const [, prevColWidth] = values[prevColumnIndex];\n              totalWidth += prevColWidth;\n              prevColumnIndex -= 1;\n            }\n\n            const leftPositionThreshold =\n              totalWidth - currentColumnInitialWidth + minWidth;\n\n            const newLeftPosition = Math.max(\n              totalWidth + deltaOffset,\n              leftPositionThreshold,\n            );\n\n            addPinnedColumnsPositionsStyles(\n              'left',\n              container,\n              colId,\n              newLeftPosition,\n            );\n          }\n        }\n\n        if (isPinnedRight) {\n          const values = Object.entries(rightPinnedColumnsWidths);\n          const [, currentColumnInitialWidth] = values[columnIndex];\n\n          // we should update only the right position of the pinned columns to the left of the one being resized\n          for (let i = columnIndex - 1; i >= 0; i--) {\n            const [colId] = values[i];\n\n            // right position of a column is equal to the next column width from the right - deltaOffset\n            let prevColumnIndex = i + 1;\n            let totalWidth = 0;\n\n            while (prevColumnIndex < values.length) {\n              const [, prevWidth] = values[prevColumnIndex];\n              totalWidth += prevWidth;\n              prevColumnIndex += 1;\n            }\n\n            const rightPositionThreshold =\n              totalWidth - currentColumnInitialWidth + minWidth;\n\n            const newRightPosition = Math.max(\n              totalWidth - deltaOffset,\n              rightPositionThreshold,\n            );\n\n            addPinnedColumnsPositionsStyles(\n              'right',\n              container,\n              colId,\n              newRightPosition,\n            );\n          }\n        }\n      };\n\n      const onEnd = (clientXPos?: number) => {\n        updateOffset('end', clientXPos);\n        clearContainerStyles(container);\n\n        // If we are coming from mouse movements, then clear the focus on resizer\n        clearResizerFocus();\n\n        table.setColumnSizingInfo((old) => ({\n          ...old,\n          isResizingColumn: false,\n          startOffset: null,\n          startSize: null,\n          deltaOffset: null,\n          deltaPercentage: null,\n          columnSizingStart: [],\n        }));\n      };\n\n      const moveHandler = (moveEvent: MouseEvent | TouchEvent): void => {\n        const clientXPos = getClientX(moveEvent);\n        updateOffset('move', clientXPos);\n      };\n\n      const upHandler = (upEvent: MouseEvent | TouchEvent): void => {\n        document.removeEventListener('mousemove', moveHandler);\n        document.removeEventListener('mouseup', upHandler);\n        document.removeEventListener('touchmove', moveHandler);\n        document.removeEventListener('touchend', upHandler);\n        const clientXPos = getClientX(upEvent);\n        onEnd(clientXPos);\n      };\n\n      // TODO: SSR check if document is there.\n      document.addEventListener('mousemove', moveHandler);\n      document.addEventListener('mouseup', upHandler);\n      document.addEventListener('touchmove', moveHandler);\n      document.addEventListener('touchend', upHandler);\n\n      // If the table has any fractional templates, we need to make sure to lock their size in place, before starting\n      // to resize the remaining things.\n      if (table.getHasFractionalTemplate()) {\n        const fractionColumns = table\n          .getVisibleLeafColumnsWithoutBuiltin()\n          .filter(\n            ({ id, columnDef }) =>\n              (columnDef.width === undefined ||\n                isFractionWidth(columnDef.width)) &&\n              id !== column.id,\n          );\n\n        table.setColumnSizing((old) => {\n          const newColumnSizing = { ...old };\n          for (const fractionColumn of fractionColumns) {\n            newColumnSizing[fractionColumn.id] = table.getColumnOrHeaderWidth(\n              fractionColumn.id,\n            );\n          }\n          return newColumnSizing;\n        });\n      }\n\n      table.setColumnSizingInfo((old) => ({\n        ...old,\n        startOffset: clientX,\n        startSize,\n        deltaOffset: 0,\n        deltaPercentage: 0,\n        columnSizingStart,\n        isResizingColumn: column.id,\n      }));\n    };\n\n    header.handleResizeExpand = (event: ReactMouseEvent<HTMLButtonElement>) => {\n      const column = table.getColumn(header.column.id);\n      const canResize = column?.getCanResize();\n\n      if (event.type !== 'dblclick') {\n        return;\n      }\n\n      if (!column || !canResize) {\n        return;\n      }\n\n      event.persist();\n\n      const target = event.target;\n      if (target instanceof HTMLElement === false) {\n        return;\n      }\n\n      const startSize = getHeaderCellWidth(target);\n\n      // If the header could not be measured, we can't resize it\n      if (startSize === undefined) {\n        return;\n      }\n\n      // Get the starting clientX where the drag started.\n      const clientX = event.clientX;\n\n      const columnSizingStart: [string, number][] = [[column.id, startSize]];\n      const container: HTMLElement | null = target.closest(\n        '.strato-table-virtualization-container',\n      );\n      // While dragging set the custom property value\n      container?.style.setProperty(\n        DATA_TABLE_STRATO_RESIZING_SIZE_CSS_VAR,\n        'max-content',\n      );\n\n      table.setColumnSizingInfo((old) => ({\n        ...old,\n        startOffset: clientX,\n        startSize,\n        deltaOffset: 0,\n        deltaPercentage: 0,\n        columnSizingStart,\n        isResizingColumn: column.id,\n      }));\n\n      table._queue(() => {\n        const target = event.target;\n        if (!(target instanceof HTMLButtonElement)) {\n          return;\n        }\n        // The button is now inside the columnheader div, so parentElement is the cell itself\n        const cell: HTMLElement | null = target.parentElement;\n        if (cell) {\n          const { width } = cell.getBoundingClientRect();\n          table.setColumnSizingInfo((old) => ({\n            ...old,\n            isResizingColumn: false,\n            startOffset: null,\n            startSize: null,\n            deltaOffset: null,\n            deltaPercentage: null,\n            columnSizingStart: [],\n          }));\n          table.setColumnSizing((old) => ({\n            ...old,\n            [column.id]: width,\n          }));\n        }\n        requestAnimationFrame(() =>\n          container?.style.removeProperty(\n            DATA_TABLE_STRATO_RESIZING_SIZE_CSS_VAR,\n          ),\n        );\n      });\n    };\n\n    header.handleKeyboardResize = (\n      event: ReactKeyboardEvent<HTMLButtonElement>,\n    ) => {\n      const column = table.getColumn(header.column.id);\n      const canResize = column?.getCanResize();\n\n      const target = event.target;\n      if (\n        !column ||\n        !canResize ||\n        target instanceof HTMLElement === false ||\n        (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')\n      ) {\n        // clear the focus on resizer\n        if (event.key === 'Escape') {\n          clearResizerFocus();\n        }\n        return;\n      }\n\n      event.persist();\n\n      const startSize = getHeaderCellWidth(target);\n\n      // If the header could not be measured, we can't resize it\n      if (startSize === undefined) {\n        return;\n      }\n\n      let offset = 0;\n      if (event.key === 'ArrowLeft') {\n        offset = -COLUMN_RESIZE_KEYBOARD_OFFSET;\n      } else if (event.key === 'ArrowRight') {\n        offset = COLUMN_RESIZE_KEYBOARD_OFFSET;\n      }\n\n      if (event.ctrlKey === true) {\n        offset *= COLUMN_RESIZE_KEYBOARD_CTRL_MULTIPLIER;\n      }\n\n      table.setColumnSizing((old) => ({\n        ...old,\n        [column.id]: startSize + offset,\n      }));\n    };\n  },\n\n  createColumn<TData extends RowData, TValue>(\n    column: Column<TData, TValue>,\n    table: Table<TData>,\n  ) {\n    column.getCanResize = () => {\n      // Parent columns are not resizable, only their children are.\n      if (column.columns.length !== 0) {\n        return false;\n      }\n\n      // columnResizing is disabled on the DataTable or on the individual column\n      if (\n        table.options.enableColumnResizing !== true ||\n        column.columnDef.enableResizing === false\n      ) {\n        return false;\n      }\n\n      // Need to evaluate that one here, as it is not yet available in the\n      // createColumn wrapper.\n      const lastLeafColumn = table.getVisibleLeafColumns().at(-1);\n      // Check if it is the last column\n      if (column.id === lastLeafColumn?.id) {\n        return false;\n      }\n\n      return true;\n    };\n  },\n};\n\n/**\n * @internal\n */\nexport function useColumnSizing<TData>(\n  props: DataTableColumnSizingProps,\n  options: TableOptions<TData>,\n): void {\n  options.enableColumnResizing = false;\n\n  const configResizable = useDataTableConfigElement('resizable');\n\n  const [columnSizing, setColumnSizing] = useControllableState({\n    value: props.columnSizing,\n    defaultValue: props.defaultColumnSizing ?? {},\n    onChange: props.onColumnSizingChange,\n  });\n\n  if (configResizable === true || props.resizable === true) {\n    options.enableColumnResizing = true;\n    options.state = {\n      ...options.state,\n      columnSizing,\n    };\n\n    options.onColumnSizingChange = (updater) => {\n      const newValue = functionalUpdate(updater, columnSizing);\n      setColumnSizing(newValue);\n    };\n  }\n}\n"],
+  "mappings": "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",
   "names": ["minWidth", "maxWidth", "size", "old", "newColumnSizing", "target"]
 }

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

@@ -1,6 +1,6 @@
 import "../../DataTable.css";
 import "./ColumnSizing.css";
-var tableColumnResizing = "_17437gx0-3-2-0";
+var tableColumnResizing = "_17437gx0-3-3-0";
 export {
   tableColumnResizing
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/ColumnSizing/ColumnSizing.css.ts"],
-  "sourcesContent": ["import '../../DataTable.css';\nimport './ColumnSizing.css';\nexport var tableColumnResizing = '_17437gx0-3-2-0';"],
+  "sourcesContent": ["import '../../DataTable.css';\nimport './ColumnSizing.css';\nexport var tableColumnResizing = '_17437gx0-3-3-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,sBAAsB;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._19nyr521-3-2-0 {
+._19nyr521-3-3-0 {
   overflow: hidden;
   text-overflow: ellipsis;
 }

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

@@ -1,4 +1,4 @@
-import { Fragment, jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo } from "react";
 import Colors from "@dynatrace/strato-design-tokens/colors";
 import {
@@ -95,7 +95,7 @@ function isDatatableGanttColumnConfig(config) {
   return config !== null && config !== void 0 && typeof config === "object" && "nameAccessor" in config;
 }
 function isDatatableSparklineColumnConfig(config) {
-  return config !== null && config !== void 0 && typeof config === "object" && ("color" in config || "variant" in config || "gapPolicy" in config || "curve" in config || "showContextValues" in config || "xAxis" in config);
+  return config !== null && config !== void 0 && typeof config === "object" && ("color" in config || "variant" in config || "gapPolicy" in config || "curve" in config || "showContextValues" in config || "xAxis" in config || "yAxis" in config);
 }
 function isDatatableMarkdownColumnConfig(config) {
   return config !== null && config !== void 0 && typeof config === "object" && "customComponentMappings" in config;
@@ -180,7 +180,7 @@ const CELL_TYPE_RENDERERS = {
       config = props.column.columnDef.meta.config;
     }
     const rowDensity = props.table.getVisualVariantOptions().rowDensity;
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       SparklineMemo,
       {
         data: props.getValue(),
@@ -191,7 +191,10 @@ const CELL_TYPE_RENDERERS = {
         showContextValues: !!config?.showContextValues,
         labelsAlignment: "right",
         labelsFixedWidth: rowDensity === "condensed" ? 32 : 42,
-        children: config.xAxis && /* @__PURE__ */ jsx(Sparkline.XAxis, { ...config.xAxis })
+        children: [
+          config.xAxis && /* @__PURE__ */ jsx(Sparkline.XAxis, { ...config.xAxis }),
+          config.yAxis && /* @__PURE__ */ jsx(Sparkline.YAxis, { ...config.yAxis })
+        ]
       }
     );
   },
@@ -211,6 +214,8 @@ const CELL_TYPE_RENDERERS = {
     const parentData = props.row.getParentRow()?.getValue(props.column.id);
     const isGanttValue = isGanttSegmentData(value) || Array.isArray(value) && value.every(isGanttSegmentData);
     const isGanttParentData = parentData === void 0 || isGanttSegmentData(parentData) || Array.isArray(parentData) && parentData.every(isGanttSegmentData);
+    const pageRows = props.table.getPaginationRowModel().rows;
+    const isLastPageRow = props.row.id === pageRows.at(-1)?.id;
     if (isGanttValue && isGanttParentData) {
       return /* @__PURE__ */ jsx(
         DataTableGanttChartCell,
@@ -218,7 +223,8 @@ const CELL_TYPE_RENDERERS = {
           data: value,
           parentData,
           columnId: props.column.id,
-          config
+          config,
+          isLastPageRow
         }
       );
     }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/ColumnTypes/ColumnTypes.tsx"],
-  "sourcesContent": ["import { type JSX, memo } from 'react';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\nimport {\n  adjustFractionDigits,\n  format,\n  formatLong,\n  units,\n} from '@dynatrace-sdk/units';\n\nimport type {\n  DataTableColumnType,\n  DataTableGanttColumnConfig,\n  DataTableLogContentColumnConfig,\n  DataTableMarkdownColumnConfig,\n  DataTableSparklineColumnConfig,\n  DataTableTextColumnConfig,\n} from './column-types-types.js';\nimport { logContentWrapper } from './ColumnTypes.sty.js';\nimport type { Timeseries } from '../../../../charts/core/types/timeseries.js';\nimport { Sparkline } from '../../../../charts/sparkline/Sparkline.js';\nimport { Markdown } from '../../../../content/markdown/Markdown.js';\nimport { type Components } from '../../../../core/types/markdown/react-markdown.js';\nimport {\n  formatCurrencyDefault,\n  formatDatetimeDefault,\n} from '../../../../core/utils/default-formatters.js';\nimport { devLog } from '../../../../core/utils/logging.js';\nimport { convertToNumberIfPureNumber } from '../../../../core/utils/string-utils.js';\nimport { LogContentHighlight } from '../../../utils/log-content-highlighting.js';\nimport { replaceUrlsWithLinks } from '../../../utils/replace-urls-with-links.js';\nimport { DATA_TABLE_DEFAULT_HORIZONTAL_ALIGNMENT } from '../../constants.js';\nimport type {\n  CellContext,\n  ColumnDef,\n  ColumnDefBase,\n  ColumnDefTemplate,\n  ColumnMeta,\n} from '../../hooks/useTable/types.js';\nimport type { DataTableDisplayColumnDef } from '../../public.api.js';\nimport type { DataTableAlignmentColumnDef } from '../ColumnAlignment.js';\nimport {\n  DataTableGanttChartCell,\n  isGanttSegmentData,\n} from '../GanttChart/DataTableGanttChartCell.js';\nimport { DataTableGanttChartHeader } from '../GanttChart/DataTableGanttChartHeader.js';\nimport {\n  isMultiMeterBarData,\n  MeterBarChartRenderer,\n} from '../MeterBarChart/MeterBarChart.js';\n\n/**\n * Function that sets the column alignment and the custom cell renderer\n * based on the column type from the column definition\n * @param columnDef - column definition prop\n *\n * @returns the column alignment and the custom cell renderer based on the column type\n * @internal\n */\nexport function applyColumnTypes<TData, TValue>(\n  columnDef: DataTableDisplayColumnDef<TData, TValue>,\n  composedDef: ColumnDef<TData, TValue>,\n): {\n  alignment?: DataTableAlignmentColumnDef['alignment'];\n  cell?: ColumnDefBase<TData, TValue>['cell'];\n  enableSorting?: boolean;\n  header?: string | (() => JSX.Element);\n  /**\n   * Enables user actions for a specific column type.\n   * If set to `true`, all user actions can be enabled, while `false` disables all user actions.\n   * Additionally, the configuration `{type: 'chart'}` ensures that only specific user actions are enabled.\n   */\n  enableUserActions?: boolean | { type: 'chart' };\n  meta?: ColumnMeta<TData, TValue>;\n} {\n  if (columnDef.cell !== undefined) {\n    return {};\n  }\n\n  const columnType = columnDef.columnType;\n  if (!columnType) {\n    return {};\n  }\n\n  // DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType.\n  if (columnType === 'date') {\n    devLog(\n      \"DataTable: columnType 'date' is deprecated and will be removed in a future release. Use 'datetime' instead.\",\n    );\n  }\n\n  let enableUserActions: boolean | { type: 'chart' } = true;\n\n  if (columnType === 'sparkline') {\n    columnDef.disableSorting = true;\n  }\n\n  if (columnType === 'meterbar') {\n    // disable sorting by default for meter bar columns\n    // for backwards compatibility,\n    // but allow user to override\n    columnDef.disableSorting ??= true;\n    enableUserActions = { type: 'chart' };\n  }\n\n  if (columnType === 'markdown') {\n    columnDef.disableSorting = true;\n  }\n\n  if (columnType === 'gantt') {\n    columnDef.disableSorting = true;\n    enableUserActions = false;\n    columnDef.header = () => (\n      <DataTableGanttChartHeader columnDef={columnDef} />\n    );\n    composedDef.meta = {\n      ...composedDef.meta,\n      hasCustomCellRenderer: true,\n      hasCustomHeaderRenderer: true,\n    };\n  }\n  if (columnType === 'log-content') {\n    composedDef.meta = {\n      ...composedDef.meta,\n      fontStyle: 'code',\n    };\n  }\n\n  return {\n    alignment: columnDef.alignment || getAlignmentBasedOnType(columnType),\n    cell: getCellTypeRenderer(columnType),\n    enableSorting: !columnDef.disableSorting,\n    header: columnDef.header,\n    enableUserActions,\n    meta: composedDef.meta,\n  };\n}\n\n/**\n * Gets text alignment of a column based on its type.\n * @internal\n */\nexport function getAlignmentBasedOnType(\n  columnType?: DataTableColumnType,\n): DataTableAlignmentColumnDef['alignment'] {\n  switch (columnType) {\n    case 'number':\n    case 'long':\n    case 'currency':\n    case 'bit':\n    case 'date': // DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType.\n    case 'datetime':\n      return 'right';\n    default:\n      return DATA_TABLE_DEFAULT_HORIZONTAL_ALIGNMENT;\n  }\n}\n\n/**\n * Typeguard function ensures that the defined config in the column definition contains certain properties.\n * @internal\n */\nexport function isDatatableGanttColumnConfig(\n  config: unknown,\n): config is DataTableGanttColumnConfig {\n  return (\n    config !== null &&\n    config !== undefined &&\n    typeof config === 'object' &&\n    'nameAccessor' in config\n  );\n}\n\n/**\n * Typeguard function ensures that the defined config in the column definition contains certain properties.\n * @internal\n */\nfunction isDatatableSparklineColumnConfig(\n  config: unknown,\n): config is DataTableSparklineColumnConfig {\n  return (\n    config !== null &&\n    config !== undefined &&\n    typeof config === 'object' &&\n    ('color' in config ||\n      'variant' in config ||\n      'gapPolicy' in config ||\n      'curve' in config ||\n      'showContextValues' in config ||\n      'xAxis' in config)\n  );\n}\n\n/**\n * Typeguard function ensures that the defined config in the column definition contains certain properties.\n * @internal\n */\nfunction isDatatableMarkdownColumnConfig(\n  config: unknown,\n): config is DataTableMarkdownColumnConfig {\n  return (\n    config !== null &&\n    config !== undefined &&\n    typeof config === 'object' &&\n    'customComponentMappings' in config\n  );\n}\n\n/**\n * Typeguard function ensures that the defined config in the column definition contains certain properties.\n * @internal\n */\nexport function isDatatableLogContentColumnConfig(\n  config: unknown,\n): config is DataTableLogContentColumnConfig {\n  return (\n    config !== null &&\n    config !== undefined &&\n    typeof config === 'object' &&\n    'truncationLimit' in config\n  );\n}\n\n/**\n * Typeguard function ensures that the defined config in the column definition contains certain properties.\n * @internal\n */\nfunction isDatatableTextColumnConfig(\n  config: unknown,\n): config is DataTableTextColumnConfig {\n  return (\n    config !== null &&\n    config !== undefined &&\n    typeof config === 'object' &&\n    'detectLinks' in config\n  );\n}\n\n// Create memo versions of the Sparkline and MeterBarChart here to avoid excessive\n// rerenders.\nconst SparklineMemo = memo(Sparkline);\nconst MeterbarMemo = memo(MeterBarChartRenderer);\n// Markdown component is also memoized here. In a follow-up we should look into\n// memoizing the root component, as it can be 100% controlled by its primitive props.\nconst MarkdownMemo = memo(Markdown);\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst DatetimeMemo = memo((props: { value: any }) => {\n  return (\n    <>\n      {formatDatetimeDefault(\n        new Date(convertToNumberIfPureNumber(props.value as string)),\n      )}\n    </>\n  );\n});\n\nconst CELL_TYPE_RENDERERS: Record<\n  string,\n  ColumnDefBase<unknown, unknown>['cell']\n> = {\n  number: (props) => {\n    const cellValue = props.getValue();\n    if (typeof cellValue === 'string' || typeof cellValue === 'number') {\n      const valueAsNumber =\n        Number.isNaN(+cellValue) || cellValue === null\n          ? ''\n          : convertToNumberIfPureNumber(cellValue as string);\n\n      return typeof valueAsNumber === 'number'\n        ? adjustFractionDigits(valueAsNumber)\n        : '';\n    }\n  },\n  long: (props) => {\n    const cellValue = props.getValue();\n    if (\n      cellValue === undefined ||\n      cellValue === null ||\n      Number.isNaN(cellValue)\n    ) {\n      return '';\n    } else if (\n      typeof cellValue === 'number' ||\n      typeof cellValue === 'bigint' ||\n      typeof cellValue === 'string'\n    ) {\n      return formatLong(cellValue);\n    }\n\n    return `${cellValue}`;\n  },\n  currency: (props) => {\n    const cellValue = props.getValue();\n    if (typeof cellValue === 'string' || typeof cellValue === 'number') {\n      const valueAsNumber =\n        Number.isNaN(+cellValue) || cellValue === null\n          ? ''\n          : convertToNumberIfPureNumber(cellValue as string);\n\n      return typeof valueAsNumber === 'number'\n        ? // no currency (e.g. 'EUR', 'USD') provided \u2192 default format without currency symbol\n          formatCurrencyDefault(valueAsNumber)\n        : '';\n    }\n  },\n  bit: (props) => {\n    const cellValue = props.getValue();\n    if (typeof cellValue === 'string' || typeof cellValue === 'number') {\n      const valueAsNumber = Number.isNaN(+cellValue)\n        ? ''\n        : convertToNumberIfPureNumber(cellValue as string);\n\n      return typeof valueAsNumber === 'number'\n        ? format(valueAsNumber, { input: units.data.bit })\n        : '';\n    }\n  },\n  // DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType.\n  date: (props) => {\n    const cellValue = props.getValue();\n\n    if (cellValue === null) {\n      return null;\n    }\n    return <DatetimeMemo value={cellValue} />;\n  },\n  datetime: (props) => {\n    const cellValue = props.getValue();\n\n    if (cellValue === null) {\n      return null;\n    }\n    return <DatetimeMemo value={cellValue} />;\n  },\n  text: (props) => {\n    const cellValue = props.getValue();\n    let detectLinks = true;\n    if (isDatatableTextColumnConfig(props.column.columnDef.meta?.config)) {\n      detectLinks = !!props.column.columnDef.meta?.config.detectLinks;\n    }\n    if (typeof cellValue !== 'string' || !detectLinks) {\n      return cellValue === undefined ||\n        cellValue === null ||\n        Number.isNaN(cellValue)\n        ? ''\n        : `${cellValue}`;\n    }\n    return replaceUrlsWithLinks(cellValue);\n  },\n  sparkline: (props) => {\n    let config: DataTableSparklineColumnConfig = {};\n    if (\n      props.column.columnDef.meta &&\n      isDatatableSparklineColumnConfig(props.column.columnDef.meta.config)\n    ) {\n      config = props.column.columnDef.meta.config;\n    }\n\n    const rowDensity = props.table.getVisualVariantOptions().rowDensity;\n    return (\n      <SparklineMemo\n        data={props.getValue() as Timeseries[]}\n        color={config.color ?? Colors.Charts.Categorical.Color01.Default}\n        variant={config.variant ?? 'line'}\n        gapPolicy={config.gapPolicy ?? 'connect'}\n        curve={config.curve ?? 'linear'}\n        showContextValues={!!config?.showContextValues}\n        labelsAlignment=\"right\"\n        labelsFixedWidth={rowDensity === 'condensed' ? 32 : 42}\n      >\n        {config.xAxis && <Sparkline.XAxis {...config.xAxis} />}\n      </SparklineMemo>\n    );\n  },\n  meterbar: (props) => {\n    const value = props.getValue();\n\n    if (typeof value === 'number' || isMultiMeterBarData(value)) {\n      return <MeterbarMemo value={value} column={props.column} />;\n    }\n    return '';\n  },\n  gantt: (props) => {\n    let config: DataTableGanttColumnConfig = { nameAccessor: 'name' };\n    if (\n      props.column.columnDef.meta &&\n      isDatatableGanttColumnConfig(props.column.columnDef.meta.config)\n    ) {\n      config = props.column.columnDef.meta.config;\n    }\n\n    const value = props.getValue();\n    const parentData = props.row.getParentRow()?.getValue(props.column.id);\n    const isGanttValue =\n      isGanttSegmentData(value) ||\n      (Array.isArray(value) && value.every(isGanttSegmentData));\n\n    const isGanttParentData =\n      parentData === undefined ||\n      isGanttSegmentData(parentData) ||\n      (Array.isArray(parentData) && parentData.every(isGanttSegmentData));\n\n    if (isGanttValue && isGanttParentData) {\n      return (\n        <DataTableGanttChartCell\n          data={value}\n          parentData={parentData}\n          columnId={props.column.id}\n          config={config}\n        />\n      );\n    }\n\n    return '';\n  },\n  markdown: (props) => {\n    const config = props.column.columnDef.meta?.config;\n    const customComponentMappings: Components | undefined =\n      isDatatableMarkdownColumnConfig(config)\n        ? config?.customComponentMappings\n        : undefined;\n\n    const value = props.getValue();\n    if (value !== null && value !== undefined && typeof value === 'string') {\n      return (\n        <MarkdownMemo customComponentMappings={customComponentMappings}>\n          {value}\n        </MarkdownMemo>\n      );\n    }\n    return '';\n  },\n  'log-content': (props) => {\n    const cellValue = props.getValue();\n\n    if (typeof cellValue === 'string') {\n      const isColumnLineWrap = props.column.getIsLineWrapped();\n      const config = props.column.columnDef.meta?.config;\n      const truncationLimit = isDatatableLogContentColumnConfig(config)\n        ? config?.truncationLimit\n        : undefined;\n\n      return (\n        <div className={logContentWrapper({ linewrap: isColumnLineWrap })}>\n          <LogContentHighlight\n            logContent={cellValue}\n            lineWrap={isColumnLineWrap}\n            truncationLimit={truncationLimit}\n          />\n        </div>\n      );\n    }\n\n    return '';\n  },\n};\n\n/**\n * Returns matching cell renderer for each of the different column types so\n * the values are displayed correctly.\n */\nfunction getCellTypeRenderer(\n  columnType: DataTableColumnType,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n): ColumnDefTemplate<CellContext<any, any>> | undefined {\n  return CELL_TYPE_RENDERERS[columnType] ?? CELL_TYPE_RENDERERS.text;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { type JSX, memo } from 'react';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\nimport {\n  adjustFractionDigits,\n  format,\n  formatLong,\n  units,\n} from '@dynatrace-sdk/units';\n\nimport type {\n  DataTableColumnType,\n  DataTableGanttColumnConfig,\n  DataTableLogContentColumnConfig,\n  DataTableMarkdownColumnConfig,\n  DataTableSparklineColumnConfig,\n  DataTableTextColumnConfig,\n} from './column-types-types.js';\nimport { logContentWrapper } from './ColumnTypes.sty.js';\nimport type { Timeseries } from '../../../../charts/core/types/timeseries.js';\nimport { Sparkline } from '../../../../charts/sparkline/Sparkline.js';\nimport { Markdown } from '../../../../content/markdown/Markdown.js';\nimport { type Components } from '../../../../core/types/markdown/react-markdown.js';\nimport {\n  formatCurrencyDefault,\n  formatDatetimeDefault,\n} from '../../../../core/utils/default-formatters.js';\nimport { devLog } from '../../../../core/utils/logging.js';\nimport { convertToNumberIfPureNumber } from '../../../../core/utils/string-utils.js';\nimport { LogContentHighlight } from '../../../utils/log-content-highlighting.js';\nimport { replaceUrlsWithLinks } from '../../../utils/replace-urls-with-links.js';\nimport { DATA_TABLE_DEFAULT_HORIZONTAL_ALIGNMENT } from '../../constants.js';\nimport type {\n  CellContext,\n  ColumnDef,\n  ColumnDefBase,\n  ColumnDefTemplate,\n  ColumnMeta,\n} from '../../hooks/useTable/types.js';\nimport type { DataTableDisplayColumnDef } from '../../public.api.js';\nimport type { DataTableAlignmentColumnDef } from '../ColumnAlignment.js';\nimport {\n  DataTableGanttChartCell,\n  isGanttSegmentData,\n} from '../GanttChart/DataTableGanttChartCell.js';\nimport { DataTableGanttChartHeader } from '../GanttChart/DataTableGanttChartHeader.js';\nimport {\n  isMultiMeterBarData,\n  MeterBarChartRenderer,\n} from '../MeterBarChart/MeterBarChart.js';\n\n/**\n * Function that sets the column alignment and the custom cell renderer\n * based on the column type from the column definition\n * @param columnDef - column definition prop\n *\n * @returns the column alignment and the custom cell renderer based on the column type\n * @internal\n */\nexport function applyColumnTypes<TData, TValue>(\n  columnDef: DataTableDisplayColumnDef<TData, TValue>,\n  composedDef: ColumnDef<TData, TValue>,\n): {\n  alignment?: DataTableAlignmentColumnDef['alignment'];\n  cell?: ColumnDefBase<TData, TValue>['cell'];\n  enableSorting?: boolean;\n  header?: string | (() => JSX.Element);\n  /**\n   * Enables user actions for a specific column type.\n   * If set to `true`, all user actions can be enabled, while `false` disables all user actions.\n   * Additionally, the configuration `{type: 'chart'}` ensures that only specific user actions are enabled.\n   */\n  enableUserActions?: boolean | { type: 'chart' };\n  meta?: ColumnMeta<TData, TValue>;\n} {\n  if (columnDef.cell !== undefined) {\n    return {};\n  }\n\n  const columnType = columnDef.columnType;\n  if (!columnType) {\n    return {};\n  }\n\n  // DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType.\n  if (columnType === 'date') {\n    devLog(\n      \"DataTable: columnType 'date' is deprecated and will be removed in a future release. Use 'datetime' instead.\",\n    );\n  }\n\n  let enableUserActions: boolean | { type: 'chart' } = true;\n\n  if (columnType === 'sparkline') {\n    columnDef.disableSorting = true;\n  }\n\n  if (columnType === 'meterbar') {\n    // disable sorting by default for meter bar columns\n    // for backwards compatibility,\n    // but allow user to override\n    columnDef.disableSorting ??= true;\n    enableUserActions = { type: 'chart' };\n  }\n\n  if (columnType === 'markdown') {\n    columnDef.disableSorting = true;\n  }\n\n  if (columnType === 'gantt') {\n    columnDef.disableSorting = true;\n    enableUserActions = false;\n    columnDef.header = () => (\n      <DataTableGanttChartHeader columnDef={columnDef} />\n    );\n    composedDef.meta = {\n      ...composedDef.meta,\n      hasCustomCellRenderer: true,\n      hasCustomHeaderRenderer: true,\n    };\n  }\n  if (columnType === 'log-content') {\n    composedDef.meta = {\n      ...composedDef.meta,\n      fontStyle: 'code',\n    };\n  }\n\n  return {\n    alignment: columnDef.alignment || getAlignmentBasedOnType(columnType),\n    cell: getCellTypeRenderer(columnType),\n    enableSorting: !columnDef.disableSorting,\n    header: columnDef.header,\n    enableUserActions,\n    meta: composedDef.meta,\n  };\n}\n\n/**\n * Gets text alignment of a column based on its type.\n * @internal\n */\nexport function getAlignmentBasedOnType(\n  columnType?: DataTableColumnType,\n): DataTableAlignmentColumnDef['alignment'] {\n  switch (columnType) {\n    case 'number':\n    case 'long':\n    case 'currency':\n    case 'bit':\n    case 'date': // DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType.\n    case 'datetime':\n      return 'right';\n    default:\n      return DATA_TABLE_DEFAULT_HORIZONTAL_ALIGNMENT;\n  }\n}\n\n/**\n * Typeguard function ensures that the defined config in the column definition contains certain properties.\n * @internal\n */\nexport function isDatatableGanttColumnConfig(\n  config: unknown,\n): config is DataTableGanttColumnConfig {\n  return (\n    config !== null &&\n    config !== undefined &&\n    typeof config === 'object' &&\n    'nameAccessor' in config\n  );\n}\n\n/**\n * Typeguard function ensures that the defined config in the column definition contains certain properties.\n * @internal\n */\nfunction isDatatableSparklineColumnConfig(\n  config: unknown,\n): config is DataTableSparklineColumnConfig {\n  return (\n    config !== null &&\n    config !== undefined &&\n    typeof config === 'object' &&\n    ('color' in config ||\n      'variant' in config ||\n      'gapPolicy' in config ||\n      'curve' in config ||\n      'showContextValues' in config ||\n      'xAxis' in config ||\n      'yAxis' in config)\n  );\n}\n\n/**\n * Typeguard function ensures that the defined config in the column definition contains certain properties.\n * @internal\n */\nfunction isDatatableMarkdownColumnConfig(\n  config: unknown,\n): config is DataTableMarkdownColumnConfig {\n  return (\n    config !== null &&\n    config !== undefined &&\n    typeof config === 'object' &&\n    'customComponentMappings' in config\n  );\n}\n\n/**\n * Typeguard function ensures that the defined config in the column definition contains certain properties.\n * @internal\n */\nexport function isDatatableLogContentColumnConfig(\n  config: unknown,\n): config is DataTableLogContentColumnConfig {\n  return (\n    config !== null &&\n    config !== undefined &&\n    typeof config === 'object' &&\n    'truncationLimit' in config\n  );\n}\n\n/**\n * Typeguard function ensures that the defined config in the column definition contains certain properties.\n * @internal\n */\nfunction isDatatableTextColumnConfig(\n  config: unknown,\n): config is DataTableTextColumnConfig {\n  return (\n    config !== null &&\n    config !== undefined &&\n    typeof config === 'object' &&\n    'detectLinks' in config\n  );\n}\n\n// Create memo versions of the Sparkline and MeterBarChart here to avoid excessive\n// rerenders.\nconst SparklineMemo = memo(Sparkline);\nconst MeterbarMemo = memo(MeterBarChartRenderer);\n// Markdown component is also memoized here. In a follow-up we should look into\n// memoizing the root component, as it can be 100% controlled by its primitive props.\nconst MarkdownMemo = memo(Markdown);\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst DatetimeMemo = memo((props: { value: any }) => {\n  return (\n    <>\n      {formatDatetimeDefault(\n        new Date(convertToNumberIfPureNumber(props.value as string)),\n      )}\n    </>\n  );\n});\n\nconst CELL_TYPE_RENDERERS: Record<\n  string,\n  ColumnDefBase<unknown, unknown>['cell']\n> = {\n  number: (props) => {\n    const cellValue = props.getValue();\n    if (typeof cellValue === 'string' || typeof cellValue === 'number') {\n      const valueAsNumber =\n        Number.isNaN(+cellValue) || cellValue === null\n          ? ''\n          : convertToNumberIfPureNumber(cellValue as string);\n\n      return typeof valueAsNumber === 'number'\n        ? adjustFractionDigits(valueAsNumber)\n        : '';\n    }\n  },\n  long: (props) => {\n    const cellValue = props.getValue();\n    if (\n      cellValue === undefined ||\n      cellValue === null ||\n      Number.isNaN(cellValue)\n    ) {\n      return '';\n    } else if (\n      typeof cellValue === 'number' ||\n      typeof cellValue === 'bigint' ||\n      typeof cellValue === 'string'\n    ) {\n      return formatLong(cellValue);\n    }\n\n    return `${cellValue}`;\n  },\n  currency: (props) => {\n    const cellValue = props.getValue();\n    if (typeof cellValue === 'string' || typeof cellValue === 'number') {\n      const valueAsNumber =\n        Number.isNaN(+cellValue) || cellValue === null\n          ? ''\n          : convertToNumberIfPureNumber(cellValue as string);\n\n      return typeof valueAsNumber === 'number'\n        ? // no currency (e.g. 'EUR', 'USD') provided \u2192 default format without currency symbol\n          formatCurrencyDefault(valueAsNumber)\n        : '';\n    }\n  },\n  bit: (props) => {\n    const cellValue = props.getValue();\n    if (typeof cellValue === 'string' || typeof cellValue === 'number') {\n      const valueAsNumber = Number.isNaN(+cellValue)\n        ? ''\n        : convertToNumberIfPureNumber(cellValue as string);\n\n      return typeof valueAsNumber === 'number'\n        ? format(valueAsNumber, { input: units.data.bit })\n        : '';\n    }\n  },\n  // DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType.\n  date: (props) => {\n    const cellValue = props.getValue();\n\n    if (cellValue === null) {\n      return null;\n    }\n    return <DatetimeMemo value={cellValue} />;\n  },\n  datetime: (props) => {\n    const cellValue = props.getValue();\n\n    if (cellValue === null) {\n      return null;\n    }\n    return <DatetimeMemo value={cellValue} />;\n  },\n  text: (props) => {\n    const cellValue = props.getValue();\n    let detectLinks = true;\n    if (isDatatableTextColumnConfig(props.column.columnDef.meta?.config)) {\n      detectLinks = !!props.column.columnDef.meta?.config.detectLinks;\n    }\n    if (typeof cellValue !== 'string' || !detectLinks) {\n      return cellValue === undefined ||\n        cellValue === null ||\n        Number.isNaN(cellValue)\n        ? ''\n        : `${cellValue}`;\n    }\n    return replaceUrlsWithLinks(cellValue);\n  },\n  sparkline: (props) => {\n    let config: DataTableSparklineColumnConfig = {};\n    if (\n      props.column.columnDef.meta &&\n      isDatatableSparklineColumnConfig(props.column.columnDef.meta.config)\n    ) {\n      config = props.column.columnDef.meta.config;\n    }\n\n    const rowDensity = props.table.getVisualVariantOptions().rowDensity;\n    return (\n      <SparklineMemo\n        data={props.getValue() as Timeseries[]}\n        color={config.color ?? Colors.Charts.Categorical.Color01.Default}\n        variant={config.variant ?? 'line'}\n        gapPolicy={config.gapPolicy ?? 'connect'}\n        curve={config.curve ?? 'linear'}\n        showContextValues={!!config?.showContextValues}\n        labelsAlignment=\"right\"\n        labelsFixedWidth={rowDensity === 'condensed' ? 32 : 42}\n      >\n        {config.xAxis && <Sparkline.XAxis {...config.xAxis} />}\n        {config.yAxis && <Sparkline.YAxis {...config.yAxis} />}\n      </SparklineMemo>\n    );\n  },\n  meterbar: (props) => {\n    const value = props.getValue();\n\n    if (typeof value === 'number' || isMultiMeterBarData(value)) {\n      return <MeterbarMemo value={value} column={props.column} />;\n    }\n    return '';\n  },\n  gantt: (props) => {\n    let config: DataTableGanttColumnConfig = { nameAccessor: 'name' };\n    if (\n      props.column.columnDef.meta &&\n      isDatatableGanttColumnConfig(props.column.columnDef.meta.config)\n    ) {\n      config = props.column.columnDef.meta.config;\n    }\n\n    const value = props.getValue();\n    const parentData = props.row.getParentRow()?.getValue(props.column.id);\n    const isGanttValue =\n      isGanttSegmentData(value) ||\n      (Array.isArray(value) && value.every(isGanttSegmentData));\n\n    const isGanttParentData =\n      parentData === undefined ||\n      isGanttSegmentData(parentData) ||\n      (Array.isArray(parentData) && parentData.every(isGanttSegmentData));\n\n    const pageRows = props.table.getPaginationRowModel().rows;\n    const isLastPageRow = props.row.id === pageRows.at(-1)?.id;\n\n    if (isGanttValue && isGanttParentData) {\n      return (\n        <DataTableGanttChartCell\n          data={value}\n          parentData={parentData}\n          columnId={props.column.id}\n          config={config}\n          isLastPageRow={isLastPageRow}\n        />\n      );\n    }\n\n    return '';\n  },\n  markdown: (props) => {\n    const config = props.column.columnDef.meta?.config;\n    const customComponentMappings: Components | undefined =\n      isDatatableMarkdownColumnConfig(config)\n        ? config?.customComponentMappings\n        : undefined;\n\n    const value = props.getValue();\n    if (value !== null && value !== undefined && typeof value === 'string') {\n      return (\n        <MarkdownMemo customComponentMappings={customComponentMappings}>\n          {value}\n        </MarkdownMemo>\n      );\n    }\n    return '';\n  },\n  'log-content': (props) => {\n    const cellValue = props.getValue();\n\n    if (typeof cellValue === 'string') {\n      const isColumnLineWrap = props.column.getIsLineWrapped();\n      const config = props.column.columnDef.meta?.config;\n      const truncationLimit = isDatatableLogContentColumnConfig(config)\n        ? config?.truncationLimit\n        : undefined;\n\n      return (\n        <div className={logContentWrapper({ linewrap: isColumnLineWrap })}>\n          <LogContentHighlight\n            logContent={cellValue}\n            lineWrap={isColumnLineWrap}\n            truncationLimit={truncationLimit}\n          />\n        </div>\n      );\n    }\n\n    return '';\n  },\n};\n\n/**\n * Returns matching cell renderer for each of the different column types so\n * the values are displayed correctly.\n */\nfunction getCellTypeRenderer(\n  columnType: DataTableColumnType,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n): ColumnDefTemplate<CellContext<any, any>> | undefined {\n  return CELL_TYPE_RENDERERS[columnType] ?? CELL_TYPE_RENDERERS.text;\n}\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,6 +1,6 @@
 import "./ColumnTypes.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var logContentWrapper = _7a468({ defaultClassName: "_19nyr520-3-2-0", variantClassNames: { linewrap: { false: "_19nyr521-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
+var logContentWrapper = _7a468({ defaultClassName: "_19nyr520-3-3-0", variantClassNames: { linewrap: { false: "_19nyr521-3-3-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   logContentWrapper
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/ColumnTypes/ColumnTypes.css.ts"],
-  "sourcesContent": ["import './ColumnTypes.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var logContentWrapper = _7a468({defaultClassName:'_19nyr520-3-2-0',variantClassNames:{linewrap:{false:'_19nyr521-3-2-0'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './ColumnTypes.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var logContentWrapper = _7a468({defaultClassName:'_19nyr520-3-3-0',variantClassNames:{linewrap:{false:'_19nyr521-3-3-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,oBAAoB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/tables/DataTable/features/ColumnTypes/column-types-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/ColumnTypes/column-types-types.ts"],
-  "sourcesContent": ["import type {\n  ConvertibleUnit,\n  FormatDateOptions,\n  FormatOptions,\n  Unit,\n} from '@dynatrace-sdk/units';\n\nimport type {\n  ColorPalette,\n  CustomColorPalette,\n} from '../../../../charts/core/types/color-palette.js';\nimport type { Formatter } from '../../../../charts/core/types/formatter.js';\nimport type { GanttChartConfig } from '../../../../charts/gantt-chart/types/gantt-chart.js';\nimport type { Components } from '../../../../core/types/markdown/react-markdown.js';\nimport type {\n  DataTableDatetimeDisplayMode,\n  FormatterCurrencyOptions,\n} from '../CellFormatter/cell-formatter-types.js';\n\n/**\n * Available column types for the DataTable.\n * @public\n */\nexport type DataTableColumnType =\n  | 'text'\n  // DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType.\n  | 'date'\n  | 'datetime'\n  | 'bit'\n  | 'number'\n  | 'long'\n  | 'currency'\n  | 'sparkline'\n  | 'meterbar'\n  | 'gantt'\n  | 'markdown'\n  | 'log-content';\n\n/**\n * The x-axis boundaries props used in the sparkline column.\n * @public\n */\nexport interface DataTableSparklineXAxisProps {\n  /**\n   * The min value configuration to display in the x-axis\n   * @defaultValue 'auto'\n   */\n  min?: 'auto' | 'data-min' | number | Date;\n  /**\n   * The max value configuration to display in the x-axis\n   * @defaultValue 'auto'\n   */\n  max?: 'auto' | 'data-max' | number | Date;\n}\n\n/**\n * Defined config options used in sparkline column.\n * @public\n */\nexport type DataTableSparklineColumnConfig = {\n  /**\n   * Sparkline color.\n   * @defaultValue Colors.Charts.Categorical.Color01.Default\n   */\n  color?: string;\n  /**\n   * Sparkline variant (line, area, bar).\n   * @defaultValue 'line'\n   */\n  variant?: 'line' | 'area' | 'bar';\n  /**\n   * Defines how gaps in the data are visualized.\n   * @defaultValue 'connect'\n   */\n  gapPolicy?: 'connect' | 'gap';\n  /**\n   * Curve shape of the series.\n   * @defaultValue 'linear'\n   */\n  curve?: 'linear' | 'smooth';\n  /**\n   * Whether Sparkline shows min/max labels.\n   * @defaultValue false\n   */\n  showContextValues?: boolean;\n\n  /**\n   * Optional x-axis boundary configuration for the sparkline.\n   *\n   * Use this to override the default domain derived from the data.\n   * The `min` and `max` values can be set to `Date`, numeric timestamps,\n   * or automatic data-based boundaries (`'data-min'` / `'data-max'`).\n   * @defaultValue undefined\n   */\n  xAxis?: DataTableSparklineXAxisProps;\n};\n\n/**\n * Defined configuration options used in meterbar column.\n * @public\n */\nexport type DataTableMeterbarColumnConfig = {\n  /**\n   * Color of the meter bar segment.\n   * @defaultValue 'Categorical.Color11'\n   */\n  color?: string;\n\n  /**\n   * Min value for the meter bar chart scale.\n   * @defaultValue 0\n   */\n  min?: number;\n\n  /**\n   * Max value for the meter bar chart scale.\n   * @defaultValue 100\n   */\n  max?: number | 'data-max';\n\n  /**\n   * The color palette to use for multi-segment meter bars.\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n\n  /**\n   * When set to true, shows a tooltip on hover.\n   * @defaultValue false\n   */\n  showTooltip?: boolean;\n\n  /**\n   * Formats the value displayed in the tooltip.\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n\n  /**\n   * Array of threshold configurations to display on the meter bar.\n   */\n  thresholds?: {\n    /**\n     * The value of the threshold.\n     */\n    value: number;\n\n    /**\n     * The color of the threshold.\n     * @defaultValue 'Categorical.Color11'\n     */\n    color: string;\n\n    /**\n     * Name of the threshold.\n     */\n    name: string;\n\n    /**\n     * When set to true, the threshold indicator is shown.\n     * @defaultValue false\n     */\n    showIndicator?: boolean;\n  }[];\n};\n\n/**\n * Defined configuration options used in gantt column.\n * @public\n */\nexport type DataTableGanttColumnConfig = GanttChartConfig;\n\n/**\n * Defined config options used in Markdown column.\n * @public\n */\nexport type DataTableMarkdownColumnConfig = {\n  /**\n   * A mapping of HTML tags (e.g., 'a', 'h1') to functions that provide custom implementations,\n   * allowing for the override of default rendering.\n   * @defaultValue undefined\n   * @example\n   * ```jsx\n   * const customMappings = {\n   *   h2: ({ children }) => (<u><h2>{children}</h2></u>)\n   * }\n   * ```\n   */\n  customComponentMappings?: Components;\n};\n\n/**\n * Defined config options used in log content column.\n * @public\n */\nexport type DataTableLogContentColumnConfig = {\n  /**\n   * Defines the character limit for truncating log lines. Defaults to 1000 characters.\n   * Set to `false` to disable truncation and always display the entire log line.\n   *\n   * @defaultValue 1000\n   * @remarks **Warning:** Increasing or disabling this limit may negatively impact table performance!\n   */\n  truncationLimit?: number | false;\n};\n\n/**\n * Defined config options used in text column.\n * @public\n */\nexport type DataTableTextColumnConfig = {\n  /** Specifies whether URLs in the text should be automatically detected and rendered as external links. */\n  detectLinks?: boolean;\n};\n\n/**\n * Combined ruleset of column types and their matching configurations.\n * @public\n */\nexport type DataTableColumnTypesColumnDef =\n  | {\n      columnType: Extract<DataTableColumnType, 'meterbar'>;\n      config?: DataTableMeterbarColumnConfig;\n    }\n  | {\n      columnType: Extract<DataTableColumnType, 'sparkline'>;\n      config?: DataTableSparklineColumnConfig;\n    }\n  | {\n      columnType: Extract<DataTableColumnType, 'datetime'>;\n      formatter?: FormatDateOptions | DataTableDatetimeDisplayMode;\n      config?: never;\n    }\n  | {\n      // DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType.\n      columnType: Extract<DataTableColumnType, 'date'>;\n      formatter?: FormatDateOptions;\n      config?: never;\n    }\n  | {\n      columnType: Extract<DataTableColumnType, 'currency'>;\n      formatter?: FormatterCurrencyOptions;\n      config?: never;\n    }\n  | {\n      columnType?: Extract<DataTableColumnType, 'number' | 'bit'>;\n      formatter?: FormatOptions<Unit, ConvertibleUnit>;\n      config?: never;\n    }\n  | {\n      columnType: Extract<DataTableColumnType, 'long'>;\n      formatter?: Pick<\n        FormatOptions<Unit, ConvertibleUnit>,\n        | 'locale'\n        | 'maximumFractionDigits'\n        | 'maximumSignificantDigits'\n        | 'minimumFractionDigits'\n        | 'minimumSignificantDigits'\n        | 'useGrouping'\n      >;\n      config?: never;\n    }\n  | {\n      columnType: Extract<DataTableColumnType, 'gantt'>;\n      config?: DataTableGanttColumnConfig;\n    }\n  | {\n      columnType?: Extract<DataTableColumnType, 'markdown'>;\n      formatter?: never;\n      config?: DataTableMarkdownColumnConfig;\n    }\n  | {\n      columnType: Extract<DataTableColumnType, 'log-content'>;\n      formatter?: never;\n      config?: DataTableLogContentColumnConfig;\n    }\n  | {\n      columnType: Extract<DataTableColumnType, 'text'>;\n      formatter?: FormatOptions<Unit, ConvertibleUnit>;\n      config?: DataTableTextColumnConfig;\n    };\n\n/**\n * Available chart column types.\n * @internal\n */\nconst CHART_COLUMN_TYPES = ['sparkline', 'meterbar', 'gantt'] as const;\n\nexport type ChartColumnTypes = (typeof CHART_COLUMN_TYPES)[number];\n\n/**\n * Checks whether column type is a chart type.\n * @internal\n */\nexport function isChartColumnType(\n  columnType: DataTableColumnType | undefined,\n): columnType is ChartColumnTypes {\n  if (columnType) {\n    return (CHART_COLUMN_TYPES as readonly DataTableColumnType[]).includes(\n      columnType,\n    );\n  }\n  return false;\n}\n"],
-  "mappings": "AA4RA,MAAM,qBAAqB,CAAC,aAAa,YAAY,OAAO;AAQrD,SAAS,kBACd,YACgC;AAChC,MAAI,YAAY;AACd,WAAQ,mBAAsD;AAAA,MAC5D;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;",
+  "sourcesContent": ["import type {\n  ConvertibleUnit,\n  FormatDateOptions,\n  FormatOptions,\n  Unit,\n} from '@dynatrace-sdk/units';\n\nimport type {\n  ColorPalette,\n  CustomColorPalette,\n} from '../../../../charts/core/types/color-palette.js';\nimport type { Formatter } from '../../../../charts/core/types/formatter.js';\nimport type { GanttChartConfig } from '../../../../charts/gantt-chart/types/gantt-chart.js';\nimport type { Components } from '../../../../core/types/markdown/react-markdown.js';\nimport type {\n  DataTableDatetimeDisplayMode,\n  FormatterCurrencyOptions,\n} from '../CellFormatter/cell-formatter-types.js';\n\n/**\n * Available column types for the DataTable.\n * @public\n */\nexport type DataTableColumnType =\n  | 'text'\n  // DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType.\n  | 'date'\n  | 'datetime'\n  | 'bit'\n  | 'number'\n  | 'long'\n  | 'currency'\n  | 'sparkline'\n  | 'meterbar'\n  | 'gantt'\n  | 'markdown'\n  | 'log-content';\n\n/**\n * The x-axis boundaries props used in the sparkline column.\n * @public\n */\nexport interface DataTableSparklineXAxisProps {\n  /**\n   * The min value configuration to display in the x-axis\n   * @defaultValue 'auto'\n   */\n  min?: 'auto' | 'data-min' | number | Date;\n  /**\n   * The max value configuration to display in the x-axis\n   * @defaultValue 'auto'\n   */\n  max?: 'auto' | 'data-max' | number | Date;\n}\n\n/**\n * The y-axis boundaries and scale props used in the sparkline column.\n * @public\n */\nexport interface DataTableSparklineYAxisProps {\n  /**\n   * The min value configuration to display in the y-axis\n   * @defaultValue 'data-min'\n   */\n  min?: number | 'data-min';\n  /**\n   * The max value configuration to display in the y-axis\n   * @defaultValue 'data-max'\n   */\n  max?: number | 'data-max';\n  /**\n   * The scale of the y-axis values. Is only applied to the bar variant.\n   * @defaultValue 'linear'\n   */\n  scale?: 'linear' | 'log';\n}\n\n/**\n * Defined config options used in sparkline column.\n * @public\n */\nexport type DataTableSparklineColumnConfig = {\n  /**\n   * Sparkline color.\n   * @defaultValue Colors.Charts.Categorical.Color01.Default\n   */\n  color?: string;\n  /**\n   * Sparkline variant (line, area, bar).\n   * @defaultValue 'line'\n   */\n  variant?: 'line' | 'area' | 'bar';\n  /**\n   * Defines how gaps in the data are visualized.\n   * @defaultValue 'connect'\n   */\n  gapPolicy?: 'connect' | 'gap';\n  /**\n   * Curve shape of the series.\n   * @defaultValue 'linear'\n   */\n  curve?: 'linear' | 'smooth';\n  /**\n   * Whether Sparkline shows min/max labels.\n   * @defaultValue false\n   */\n  showContextValues?: boolean;\n\n  /**\n   * Optional x-axis boundary configuration for the sparkline.\n   *\n   * Use this to override the default domain derived from the data.\n   * The `min` and `max` values can be set to `Date`, numeric timestamps,\n   * or automatic data-based boundaries (`'data-min'` / `'data-max'`).\n   * @defaultValue undefined\n   */\n  xAxis?: DataTableSparklineXAxisProps;\n\n  /**\n   * Optional y-axis boundary and scale configuration for the sparkline.\n   *\n   * Use this to override the default value domain or scale.\n   * @defaultValue undefined\n   */\n  yAxis?: DataTableSparklineYAxisProps;\n};\n\n/**\n * Defined configuration options used in meterbar column.\n * @public\n */\nexport type DataTableMeterbarColumnConfig = {\n  /**\n   * Color of the meter bar segment.\n   * @defaultValue 'Categorical.Color11'\n   */\n  color?: string;\n\n  /**\n   * Min value for the meter bar chart scale.\n   * @defaultValue 0\n   */\n  min?: number;\n\n  /**\n   * Max value for the meter bar chart scale.\n   * @defaultValue 100\n   */\n  max?: number | 'data-max';\n\n  /**\n   * The color palette to use for multi-segment meter bars.\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n\n  /**\n   * When set to true, shows a tooltip on hover.\n   * @defaultValue false\n   */\n  showTooltip?: boolean;\n\n  /**\n   * Formats the value displayed in the tooltip.\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n\n  /**\n   * Array of threshold configurations to display on the meter bar.\n   */\n  thresholds?: {\n    /**\n     * The value of the threshold.\n     */\n    value: number;\n\n    /**\n     * The color of the threshold.\n     * @defaultValue 'Categorical.Color11'\n     */\n    color: string;\n\n    /**\n     * Name of the threshold.\n     */\n    name: string;\n\n    /**\n     * When set to true, the threshold indicator is shown.\n     * @defaultValue false\n     */\n    showIndicator?: boolean;\n  }[];\n};\n\n/**\n * Defined configuration options used in gantt column.\n * @public\n */\nexport type DataTableGanttColumnConfig = GanttChartConfig;\n\n/**\n * Defined config options used in Markdown column.\n * @public\n */\nexport type DataTableMarkdownColumnConfig = {\n  /**\n   * A mapping of HTML tags (e.g., 'a', 'h1') to functions that provide custom implementations,\n   * allowing for the override of default rendering.\n   * @defaultValue undefined\n   * @example\n   * ```jsx\n   * const customMappings = {\n   *   h2: ({ children }) => (<u><h2>{children}</h2></u>)\n   * }\n   * ```\n   */\n  customComponentMappings?: Components;\n};\n\n/**\n * Defined config options used in log content column.\n * @public\n */\nexport type DataTableLogContentColumnConfig = {\n  /**\n   * Defines the character limit for truncating log lines. Defaults to 1000 characters.\n   * Set to `false` to disable truncation and always display the entire log line.\n   *\n   * @defaultValue 1000\n   * @remarks **Warning:** Increasing or disabling this limit may negatively impact table performance!\n   */\n  truncationLimit?: number | false;\n};\n\n/**\n * Defined config options used in text column.\n * @public\n */\nexport type DataTableTextColumnConfig = {\n  /** Specifies whether URLs in the text should be automatically detected and rendered as external links. */\n  detectLinks?: boolean;\n};\n\n/**\n * Combined ruleset of column types and their matching configurations.\n * @public\n */\nexport type DataTableColumnTypesColumnDef =\n  | {\n      columnType: Extract<DataTableColumnType, 'meterbar'>;\n      config?: DataTableMeterbarColumnConfig;\n    }\n  | {\n      columnType: Extract<DataTableColumnType, 'sparkline'>;\n      config?: DataTableSparklineColumnConfig;\n    }\n  | {\n      columnType: Extract<DataTableColumnType, 'datetime'>;\n      formatter?: FormatDateOptions | DataTableDatetimeDisplayMode;\n      config?: never;\n    }\n  | {\n      // DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType.\n      columnType: Extract<DataTableColumnType, 'date'>;\n      formatter?: FormatDateOptions;\n      config?: never;\n    }\n  | {\n      columnType: Extract<DataTableColumnType, 'currency'>;\n      formatter?: FormatterCurrencyOptions;\n      config?: never;\n    }\n  | {\n      columnType?: Extract<DataTableColumnType, 'number' | 'bit'>;\n      formatter?: FormatOptions<Unit, ConvertibleUnit>;\n      config?: never;\n    }\n  | {\n      columnType: Extract<DataTableColumnType, 'long'>;\n      formatter?: Pick<\n        FormatOptions<Unit, ConvertibleUnit>,\n        | 'locale'\n        | 'maximumFractionDigits'\n        | 'maximumSignificantDigits'\n        | 'minimumFractionDigits'\n        | 'minimumSignificantDigits'\n        | 'useGrouping'\n      >;\n      config?: never;\n    }\n  | {\n      columnType: Extract<DataTableColumnType, 'gantt'>;\n      config?: DataTableGanttColumnConfig;\n    }\n  | {\n      columnType?: Extract<DataTableColumnType, 'markdown'>;\n      formatter?: never;\n      config?: DataTableMarkdownColumnConfig;\n    }\n  | {\n      columnType: Extract<DataTableColumnType, 'log-content'>;\n      formatter?: never;\n      config?: DataTableLogContentColumnConfig;\n    }\n  | {\n      columnType: Extract<DataTableColumnType, 'text'>;\n      formatter?: FormatOptions<Unit, ConvertibleUnit>;\n      config?: DataTableTextColumnConfig;\n    };\n\n/**\n * Available chart column types.\n * @internal\n */\nconst CHART_COLUMN_TYPES = ['sparkline', 'meterbar', 'gantt'] as const;\n\nexport type ChartColumnTypes = (typeof CHART_COLUMN_TYPES)[number];\n\n/**\n * Checks whether column type is a chart type.\n * @internal\n */\nexport function isChartColumnType(\n  columnType: DataTableColumnType | undefined,\n): columnType is ChartColumnTypes {\n  if (columnType) {\n    return (CHART_COLUMN_TYPES as readonly DataTableColumnType[]).includes(\n      columnType,\n    );\n  }\n  return false;\n}\n"],
+  "mappings": "AA0TA,MAAM,qBAAqB,CAAC,aAAa,YAAY,OAAO;AAQrD,SAAS,kBACd,YACgC;AAChC,MAAI,YAAY;AACd,WAAQ,mBAAsD;AAAA,MAC5D;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;",
   "names": []
 }

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

@@ -1,6 +1,7 @@
 import { useImperativeHandle, useRef } from "react";
 import { useMergeRefs } from "../../../core/hooks/useMergeRefs.js";
 import { useDataTableConfigElement } from "../../hooks/useDataTableConfig.js";
+import { DATA_TABLE_DETAILS_ROW_IDENTIFIER } from "../constants.js";
 function useDataTableConfigRef(forwardedRef, columnSettingsModalRef, table, props) {
   const containerRef = useRef(null);
   const rootRef = useMergeRefs([
@@ -46,6 +47,15 @@ function useDataTableConfigRef(forwardedRef, columnSettingsModalRef, table, prop
       }
     },
     scrollToRow: table.scrollToRow,
+    getDisplayedRowIds() {
+      const result = [];
+      for (const row of table.getRowModel().rows) {
+        if (!row[DATA_TABLE_DETAILS_ROW_IDENTIFIER]) {
+          result.push(row.id);
+        }
+      }
+      return result;
+    },
     openColumnSettings: (columnSettings) => {
       columnSettingsModalRef.current?.openColumnSettings(columnSettings);
     }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/features/Config.ts"],
-  "sourcesContent": ["import { useImperativeHandle, useRef, type Ref, type RefObject } from 'react';\n\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport { useDataTableConfigElement } from '../../hooks/useDataTableConfig.js';\nimport type { DataTableColumnSettingsModalRef } from '../components/Toolbar/ColumnSettings/column-settings-types.js';\nimport type { Table } from '../hooks/useTable/types.js';\nimport type {\n  DataTableColumnSettingsConfig,\n  DataTableRef,\n} from '../public.api.js';\nimport type {\n  DataTableRowThreshold,\n  DataTableThresholdProps,\n} from './Thresholds/threshold-types.js';\n\n/**\n * Extends the ref of the DataTable with additional configuration and control options.\n * @internal\n */\nexport function useDataTableConfigRef<TData>(\n  forwardedRef: Ref<DataTableRef>,\n  columnSettingsModalRef: RefObject<DataTableColumnSettingsModalRef | null>,\n  table: Table<TData>,\n  props: DataTableThresholdProps<TData>,\n) {\n  /*\n   * Collect the refs and create an imperative handle in order to expose the\n   * functions we need on the DataTable.\n   */\n  const containerRef = useRef<HTMLDivElement>(null);\n  const rootRef = useMergeRefs<DataTableRef | HTMLDivElement>([\n    forwardedRef,\n    containerRef,\n  ]);\n\n  const configRowThresholds = useDataTableConfigElement('rowThresholds');\n\n  useImperativeHandle(forwardedRef, () => ({\n    element: containerRef.current,\n    // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    getConfig() {\n      const options = table.options;\n      const state = options.state;\n      return {\n        pagination: {\n          defaultPageIndex: state.pagination?.pageIndex,\n          defaultPageSize: state.pagination?.pageSize,\n        },\n        columnVisibility: state.columnVisibility,\n        fullWidth: options.layout?.fullWidth,\n        fullHeight: options.layout?.fullHeight,\n        lineWrap: state.columnLineWrap,\n        resizable: options.enableColumnResizing,\n        selectableRows: options.enableRowSelection,\n        // NOTE: typecast necessary due to generic resolving to unknown\n        rowThresholds: (props.rowThresholds ?? configRowThresholds) as\n          | DataTableRowThreshold<unknown>[]\n          | undefined,\n        sortable: options.enableSorting,\n        variant: state.visualVariantConfig,\n      };\n    },\n    downloadData(\n      subset: 'all' | 'page' | 'selected',\n      excludeColumns?: string[],\n    ) {\n      switch (subset) {\n        case 'all':\n          table.downloadAllData(excludeColumns);\n          break;\n        case 'page':\n          table.downloadPageData(excludeColumns);\n          break;\n        case 'selected':\n          table.downloadSelectedData(excludeColumns);\n          break;\n      }\n    },\n    scrollToRow: table.scrollToRow,\n    openColumnSettings: (columnSettings?: DataTableColumnSettingsConfig) => {\n      columnSettingsModalRef.current?.openColumnSettings(columnSettings);\n    },\n  }));\n\n  return rootRef;\n}\n"],
-  "mappings": "AAAA,SAAS,qBAAqB,cAAwC;AAEtE,SAAS,oBAAoB;AAC7B,SAAS,iCAAiC;AAgBnC,SAAS,sBACd,cACA,wBACA,OACA,OACA;AAKA,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,UAAU,aAA4C;AAAA,IAC1D;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,sBAAsB,0BAA0B,eAAe;AAErE,sBAAoB,cAAc,OAAO;AAAA,IACvC,SAAS,aAAa;AAAA;AAAA;AAAA,IAGtB,YAAY;AACV,YAAM,UAAU,MAAM;AACtB,YAAM,QAAQ,QAAQ;AACtB,aAAO;AAAA,QACL,YAAY;AAAA,UACV,kBAAkB,MAAM,YAAY;AAAA,UACpC,iBAAiB,MAAM,YAAY;AAAA,QACrC;AAAA,QACA,kBAAkB,MAAM;AAAA,QACxB,WAAW,QAAQ,QAAQ;AAAA,QAC3B,YAAY,QAAQ,QAAQ;AAAA,QAC5B,UAAU,MAAM;AAAA,QAChB,WAAW,QAAQ;AAAA,QACnB,gBAAgB,QAAQ;AAAA;AAAA,QAExB,eAAgB,MAAM,iBAAiB;AAAA,QAGvC,UAAU,QAAQ;AAAA,QAClB,SAAS,MAAM;AAAA,MACjB;AAAA,IACF;AAAA,IACA,aACE,QACA,gBACA;AACA,cAAQ,QAAQ;AAAA,QACd,KAAK;AACH,gBAAM,gBAAgB,cAAc;AACpC;AAAA,QACF,KAAK;AACH,gBAAM,iBAAiB,cAAc;AACrC;AAAA,QACF,KAAK;AACH,gBAAM,qBAAqB,cAAc;AACzC;AAAA,MACJ;AAAA,IACF;AAAA,IACA,aAAa,MAAM;AAAA,IACnB,oBAAoB,CAAC,mBAAmD;AACtE,6BAAuB,SAAS,mBAAmB,cAAc;AAAA,IACnE;AAAA,EACF,EAAE;AAEF,SAAO;AACT;",
+  "sourcesContent": ["import { useImperativeHandle, useRef, type Ref, type RefObject } from 'react';\n\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport { useDataTableConfigElement } from '../../hooks/useDataTableConfig.js';\nimport type { DataTableColumnSettingsModalRef } from '../components/Toolbar/ColumnSettings/column-settings-types.js';\nimport { DATA_TABLE_DETAILS_ROW_IDENTIFIER } from '../constants.js';\nimport type { Table } from '../hooks/useTable/types.js';\nimport type {\n  DataTableColumnSettingsConfig,\n  DataTableRef,\n} from '../public.api.js';\nimport type {\n  DataTableRowThreshold,\n  DataTableThresholdProps,\n} from './Thresholds/threshold-types.js';\n\n/**\n * Extends the ref of the DataTable with additional configuration and control options.\n * @internal\n */\nexport function useDataTableConfigRef<TData>(\n  forwardedRef: Ref<DataTableRef>,\n  columnSettingsModalRef: RefObject<DataTableColumnSettingsModalRef | null>,\n  table: Table<TData>,\n  props: DataTableThresholdProps<TData>,\n) {\n  /*\n   * Collect the refs and create an imperative handle in order to expose the\n   * functions we need on the DataTable.\n   */\n  const containerRef = useRef<HTMLDivElement>(null);\n  const rootRef = useMergeRefs<DataTableRef | HTMLDivElement>([\n    forwardedRef,\n    containerRef,\n  ]);\n\n  const configRowThresholds = useDataTableConfigElement('rowThresholds');\n\n  useImperativeHandle(forwardedRef, () => ({\n    element: containerRef.current,\n    // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    getConfig() {\n      const options = table.options;\n      const state = options.state;\n      return {\n        pagination: {\n          defaultPageIndex: state.pagination?.pageIndex,\n          defaultPageSize: state.pagination?.pageSize,\n        },\n        columnVisibility: state.columnVisibility,\n        fullWidth: options.layout?.fullWidth,\n        fullHeight: options.layout?.fullHeight,\n        lineWrap: state.columnLineWrap,\n        resizable: options.enableColumnResizing,\n        selectableRows: options.enableRowSelection,\n        // NOTE: typecast necessary due to generic resolving to unknown\n        rowThresholds: (props.rowThresholds ?? configRowThresholds) as\n          | DataTableRowThreshold<unknown>[]\n          | undefined,\n        sortable: options.enableSorting,\n        variant: state.visualVariantConfig,\n      };\n    },\n    downloadData(\n      subset: 'all' | 'page' | 'selected',\n      excludeColumns?: string[],\n    ) {\n      switch (subset) {\n        case 'all':\n          table.downloadAllData(excludeColumns);\n          break;\n        case 'page':\n          table.downloadPageData(excludeColumns);\n          break;\n        case 'selected':\n          table.downloadSelectedData(excludeColumns);\n          break;\n      }\n    },\n    scrollToRow: table.scrollToRow,\n    getDisplayedRowIds(): string[] {\n      const result: string[] = [];\n      for (const row of table.getRowModel().rows) {\n        if (!row[DATA_TABLE_DETAILS_ROW_IDENTIFIER]) {\n          result.push(row.id);\n        }\n      }\n      return result;\n    },\n    openColumnSettings: (columnSettings?: DataTableColumnSettingsConfig) => {\n      columnSettingsModalRef.current?.openColumnSettings(columnSettings);\n    },\n  }));\n\n  return rootRef;\n}\n"],
+  "mappings": "AAAA,SAAS,qBAAqB,cAAwC;AAEtE,SAAS,oBAAoB;AAC7B,SAAS,iCAAiC;AAE1C,SAAS,yCAAyC;AAe3C,SAAS,sBACd,cACA,wBACA,OACA,OACA;AAKA,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,UAAU,aAA4C;AAAA,IAC1D;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,sBAAsB,0BAA0B,eAAe;AAErE,sBAAoB,cAAc,OAAO;AAAA,IACvC,SAAS,aAAa;AAAA;AAAA;AAAA,IAGtB,YAAY;AACV,YAAM,UAAU,MAAM;AACtB,YAAM,QAAQ,QAAQ;AACtB,aAAO;AAAA,QACL,YAAY;AAAA,UACV,kBAAkB,MAAM,YAAY;AAAA,UACpC,iBAAiB,MAAM,YAAY;AAAA,QACrC;AAAA,QACA,kBAAkB,MAAM;AAAA,QACxB,WAAW,QAAQ,QAAQ;AAAA,QAC3B,YAAY,QAAQ,QAAQ;AAAA,QAC5B,UAAU,MAAM;AAAA,QAChB,WAAW,QAAQ;AAAA,QACnB,gBAAgB,QAAQ;AAAA;AAAA,QAExB,eAAgB,MAAM,iBAAiB;AAAA,QAGvC,UAAU,QAAQ;AAAA,QAClB,SAAS,MAAM;AAAA,MACjB;AAAA,IACF;AAAA,IACA,aACE,QACA,gBACA;AACA,cAAQ,QAAQ;AAAA,QACd,KAAK;AACH,gBAAM,gBAAgB,cAAc;AACpC;AAAA,QACF,KAAK;AACH,gBAAM,iBAAiB,cAAc;AACrC;AAAA,QACF,KAAK;AACH,gBAAM,qBAAqB,cAAc;AACzC;AAAA,MACJ;AAAA,IACF;AAAA,IACA,aAAa,MAAM;AAAA,IACnB,qBAA+B;AAC7B,YAAM,SAAmB,CAAC;AAC1B,iBAAW,OAAO,MAAM,YAAY,EAAE,MAAM;AAC1C,YAAI,CAAC,IAAI,iCAAiC,GAAG;AAC3C,iBAAO,KAAK,IAAI,EAAE;AAAA,QACpB;AAAA,MACF;AACA,aAAO;AAAA,IACT;AAAA,IACA,oBAAoB,CAAC,mBAAmD;AACtE,6BAAuB,SAAS,mBAAmB,cAAc;AAAA,IACnE;AAAA,EACF,EAAE;AAEF,SAAO;AACT;",
   "names": []
 }

package/esm/tables/DataTable/features/GanttChart/DataTableGanttAnnotationsIndicators.css

@@ -0,0 +1,7 @@
+._1x1hmrh0-3-3-0 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin-left: auto;
+  pointer-events: none;
+}

package/esm/tables/DataTable/features/GanttChart/DataTableGanttAnnotationsIndicators.js

@@ -0,0 +1,110 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as styles from "./DataTableGanttAnnotationsIndicators.sty.js";
+import { DATA_TABLE_ROW_BORDER } from "../../constants.js";
+import { useScaleAndFormatter } from "./hooks/useScaleAndFormatter.js";
+import { toIntegrationTracks } from "./to-integration-tracks.js";
+import { AreaIndicator } from "../../../../charts/core/components/annotations/components/indicators/AreaIndicator.js";
+import { LineIndicator } from "../../../../charts/core/components/annotations/components/indicators/LineIndicator.js";
+import { getShownIndicators } from "../../../../charts/core/components/annotations/components/indicators/utils/get-shown-indicators.js";
+import { getUniqueIndicatorsByPriority } from "../../../../charts/core/components/annotations/components/indicators/utils/get-unique-indicators-by-priority.js";
+import { getMarkerBrightnessBasedOnState } from "../../../../charts/core/components/annotations/utils/get-marker-brightness-based-on-state.js";
+import { isRangeMarker } from "../../../../charts/core/components/annotations/utils/is-range-marker.js";
+import { serializeMarkerRange } from "../../../../charts/core/components/annotations/utils/serialize-marker-range.js";
+import { BrightnessFilter } from "../../../../charts/core/components/BrightnessFilter.js";
+import { useCurrentTheme } from "../../../../core/hooks/useCurrentTheme.js";
+import { useDataTable } from "../../contexts/DataTableContext.js";
+function getBrightnessFilterId(indicator, trackIndex) {
+  const { start, end } = indicator;
+  return `gantt_brightness_${serializeMarkerRange(
+    {
+      start: start.valueOf(),
+      end: end ? end.valueOf() : void 0
+    },
+    trackIndex
+  )}`;
+}
+function useGanttIndicators(config, columnId, range) {
+  const table = useDataTable();
+  const { tracks: configuredTracks } = config.annotationsHeader ?? {};
+  if (!configuredTracks?.length) {
+    return null;
+  }
+  const selection = table.getState().ganttAnnotationsSelection?.[columnId] ?? {};
+  const tracks = toIntegrationTracks(configuredTracks);
+  const shownIndicators = getShownIndicators(tracks, selection);
+  const uniqueIndicators = getUniqueIndicatorsByPriority(
+    shownIndicators,
+    range
+  );
+  const hasIndicators = uniqueIndicators.some((track) => track.length > 0);
+  return hasIndicators ? uniqueIndicators : null;
+}
+function GanttIndicatorShape({
+  indicator,
+  trackIndex,
+  scale,
+  height,
+  theme
+}) {
+  const { start, end, color, state } = indicator;
+  const brightnessFilterId = getBrightnessFilterId(indicator, trackIndex);
+  const slope = getMarkerBrightnessBasedOnState(theme, state);
+  const filter = `url(#${brightnessFilterId})`;
+  const range = { start, end };
+  const x = scale(start) ?? 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(BrightnessFilter, { id: brightnessFilterId, slope }),
+    isRangeMarker(range) ? /* @__PURE__ */ jsx(
+      AreaIndicator,
+      {
+        x,
+        width: (scale(range.end) ?? 0) - x,
+        height,
+        color,
+        filter
+      }
+    ) : /* @__PURE__ */ jsx(LineIndicator, { x, height, color, filter })
+  ] });
+}
+const DataTableGanttAnnotationIndicators = ({
+  width,
+  height,
+  min,
+  max,
+  config,
+  columnId,
+  isLastPageRow
+}) => {
+  const theme = useCurrentTheme();
+  const { scale } = useScaleAndFormatter(width, config, min, max);
+  const indicators = useGanttIndicators(config, columnId, [min, max]);
+  if (!indicators) {
+    return null;
+  }
+  const fullRowHeight = height + (isLastPageRow ? 0 : DATA_TABLE_ROW_BORDER);
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      height: fullRowHeight,
+      width,
+      className: styles.annotationIndicators,
+      children: indicators.map(
+        (track, trackIndex) => track.map(([key, indicator]) => /* @__PURE__ */ jsx(
+          GanttIndicatorShape,
+          {
+            indicator,
+            trackIndex,
+            scale,
+            height: fullRowHeight,
+            theme
+          },
+          key
+        ))
+      )
+    }
+  );
+};
+export {
+  DataTableGanttAnnotationIndicators
+};
+//# sourceMappingURL=DataTableGanttAnnotationsIndicators.js.map