@sybilion/uilib 1.3.23 → 1.3.26

package/dist/esm/index.js

@@ -106,6 +106,10 @@ export { getDriverImportance, getHighestImportanceDriver } from './components/wi
 export { geographicCoordinates, geographicToSVG, getContinentFromRegion, getPreciseCoordinates, getResponsiveCoordinates, svgToPercentage } from './components/widgets/DriverMap/driverMapGeography.js';
 export { DriversComparisonChart } from './components/widgets/DriversComparisonChart/DriversComparisonChart.js';
 export { DRIVER_COMPARISON_CHART_LEAD_MONTHS, DRIVER_FORECAST_ID_BASE, INITIAL_VISIBLE_SERIES_COUNT, buildDriversComparisonChartData, formatSeriesImportance, mergeBacktestsChartData, mergeDatasetHistoricalWithBacktestsChartData } from './components/widgets/DriversComparisonChart/driversComparisonChart.helpers.js';
+export { PerformanceChart } from './components/widgets/PerformanceChart/PerformanceChart.js';
+export { PerformanceTable } from './components/widgets/PerformanceChart/PerformanceTable.js';
+export { SPAGHETTI_DRIFT_PER_HORIZON_ID_BASE, SPAGHETTI_MODEL_PER_HORIZON_ID_BASE, averageForecastErrorsVsHistoricalForMatrixColumn, buildDriftSpaghettiMatrixForCustomDialog, buildPerHorizonSpaghettiEntries, buildSpaghettiMergedChartData, calculateYRangeFromChartData, getForecastModelDisplayName, spaghettiGridFromHistoricalPreviousMonth } from './components/widgets/PerformanceChart/performanceChart.helpers.js';
+export { SPAGHETTI_LOCAL_LS_USER_SERIES_ROW_ID, SPAGHETTI_TIME_SERIES_MATRIX_V, tryParseSpaghettiPerformanceMatrix } from './components/widgets/PerformanceChart/performanceChartUserSeries.js';
 export { SybilionAppHeader } from './components/widgets/SybilionAppHeader/SybilionAppHeader.js';
 export { SybilionAuthLayout } from './components/widgets/SybilionAuthLayout/SybilionAuthLayout.js';
 export { SybilionAuthHeadline } from './components/widgets/SybilionAuthLayout/SybilionAuthHeadline.js';

package/dist/esm/types/src/components/ui/Tooltip/Tooltip.d.ts

@@ -1,6 +1,6 @@
 import type { TooltipContentProps, TooltipProps, TooltipProviderProps, TooltipTriggerProps } from './Tooltip.types';
 declare function TooltipProvider({ delayDuration, ...props }: TooltipProviderProps): import("react/jsx-runtime").JSX.Element;
-declare function Tooltip(props: TooltipProps): import("react/jsx-runtime").JSX.Element;
-declare function TooltipTrigger({ ...props }: TooltipTriggerProps): import("react/jsx-runtime").JSX.Element;
-declare function TooltipContent({ className, sideOffset, children, maxWidth, ...props }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;
+declare function Tooltip({ children, ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+declare function TooltipTrigger({ ref, ...props }: TooltipTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function TooltipContent({ className, sideOffset, children, maxWidth, overTrigger, align, side, avoidCollisions, style: styleProp, ...props }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/esm/types/src/components/ui/Tooltip/Tooltip.types.d.ts

@@ -10,4 +10,5 @@ export interface TooltipContentProps extends React.ComponentProps<typeof Tooltip
     className?: string;
     sideOffset?: number;
     maxWidth?: number;
+    overTrigger?: boolean;
 }

package/dist/esm/types/src/components/widgets/PerformanceChart/HorizonsSelector/HorizonsSelector.d.ts

@@ -0,0 +1,7 @@
+interface HorizonsSelectorProps {
+    selectedHorizon: string;
+    onHorizonChange: (horizon: string) => void;
+    availableHorizons: string[];
+}
+export declare function HorizonsSelector({ selectedHorizon, onHorizonChange, availableHorizons, }: HorizonsSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/src/components/widgets/PerformanceChart/PerformanceChart.constants.d.ts

@@ -0,0 +1,3 @@
+export declare const METRICS_KEY: "24m";
+export declare const MONTHS_24 = 24;
+export declare const MONTH_NAMES: string[];

package/dist/esm/types/src/components/widgets/PerformanceChart/PerformanceChart.d.ts

@@ -0,0 +1,54 @@
+import { type ReactNode } from 'react';
+import type { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
+import type { ForecastData } from '#uilib/types/forecast-data';
+import { type SpaghettiPerformanceMatrixPayload } from './performanceChartUserSeries';
+export type PerformanceViewTab = 'perHorizon' | 'spaghetti';
+export type PerformanceChartPayload = Record<string, {
+    forecasts?: Record<string, Record<string, number>>;
+    metrics_history?: Record<string, {
+        mae?: Record<string, number>;
+        mape?: Record<string, number>;
+    }>;
+}>;
+export type PerformanceChartProps = {
+    performanceData: PerformanceChartPayload | null;
+    historicalData?: ChartDataPoint[];
+    combinedData?: ChartDataPoint[];
+    forecastData?: Record<string, ForecastData>;
+    userSeries?: {
+        id: number;
+        name?: string;
+    }[];
+    spaghettiUserSeries?: {
+        id: number;
+        name?: string;
+    }[];
+    customPerformanceMatrix?: SpaghettiPerformanceMatrixPayload | null;
+    customPerformanceLabel?: string | null;
+    loading?: boolean;
+    chartLoading?: boolean;
+    performanceSectionPending?: boolean;
+    isEmpty?: boolean;
+    perfFetchSettled?: boolean;
+    performanceDataLoading?: boolean;
+    performanceAnalysisId?: number | null;
+    statusHint?: string | null;
+    statusTone?: 'destructive' | 'muted';
+    runAnalysisHint?: boolean;
+    timeRange?: string;
+    onTimeRangeChange?: (range: string, meta?: {
+        viewTab: PerformanceViewTab;
+    }) => void;
+    isDarkTheme?: boolean;
+    className?: string;
+    seriesInitKey?: string;
+    toolbarStart?: ReactNode;
+    onEditCustomPerformance?: () => void;
+    showAddEditCustomDataButton?: boolean;
+    addEditCustomDataDisabled?: boolean;
+    hiddenSeries?: Set<string>;
+    onToggleLegendSeries?: (key: string) => void;
+    onEnsureSeriesVisible?: (key: string) => void;
+    onHiddenSeriesChange?: (update: Set<string> | ((prev: Set<string>) => Set<string>)) => void;
+};
+export declare function PerformanceChart({ performanceData, historicalData, combinedData, forecastData, userSeries, spaghettiUserSeries, customPerformanceMatrix, customPerformanceLabel, loading, chartLoading, performanceSectionPending, isEmpty, perfFetchSettled, performanceDataLoading, performanceAnalysisId, statusHint, statusTone, runAnalysisHint, timeRange: timeRangeProp, onTimeRangeChange, isDarkTheme, className, seriesInitKey, toolbarStart, onEditCustomPerformance, showAddEditCustomDataButton, addEditCustomDataDisabled, hiddenSeries: hiddenSeriesProp, onToggleLegendSeries, onEnsureSeriesVisible, onHiddenSeriesChange, }: PerformanceChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/widgets/PerformanceChart/PerformanceTable.d.ts

@@ -0,0 +1,31 @@
+export interface ForecastModelData {
+    key: string;
+    mae: number;
+    mape: number;
+}
+export interface AdjustParameters {
+    procurementVolume: number;
+    variableRawMaterialCostShare: number;
+    controllableCosts: number;
+    currentForecastAccuracy: number;
+    expectedImprovement: number;
+    analystHourlyRate: number;
+}
+interface PerformanceTableProps {
+    forecastModels: ForecastModelData[];
+    adjustParameters: AdjustParameters;
+    onAdjustParametersChange: (params: AdjustParameters) => void;
+    /** Shown when custom spaghetti matrix is saved (localStorage). Metrics vs historical for selected horizon. */
+    customPerformance?: {
+        label: string;
+        mae: number;
+        mape: number;
+    } | null;
+    /** Opens custom performance dialog; used by the custom row edit control. */
+    onEditCustomPerformance?: () => void;
+    /** Last row with Add custom data (hidden when custom row already present); per-horizon + spaghetti. */
+    showAddEditCustomDataButton?: boolean;
+    addEditCustomDataDisabled?: boolean;
+}
+export declare function PerformanceTable({ forecastModels, adjustParameters, onAdjustParametersChange, customPerformance, onEditCustomPerformance, showAddEditCustomDataButton, addEditCustomDataDisabled, }: PerformanceTableProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/src/components/widgets/PerformanceChart/PerformanceUnderChartLegend/PerformanceUnderChartLegend.d.ts

@@ -0,0 +1,20 @@
+export type PerformanceUnderChartLegendRowProps = {
+    label: React.ReactNode;
+    /** Line color (CSS color string). */
+    lineColor: string;
+    /** Historical uses solid bar; forecast lines use dashed preview. */
+    lineStyle?: 'solid' | 'dashed';
+    hidden: boolean;
+    onToggle?: () => void;
+};
+export type PerformanceUnderChartLegendItemConfig = PerformanceUnderChartLegendRowProps & {
+    id: string;
+};
+export declare function PerformanceUnderChartLegendRow({ label, lineColor, lineStyle, hidden, onToggle, }: PerformanceUnderChartLegendRowProps): import("react/jsx-runtime").JSX.Element;
+/** Renders rows from tab-agnostic config (labels + toggles supplied by parent). */
+export declare function PerformanceUnderChartLegendFromItems({ items, }: {
+    items: PerformanceUnderChartLegendItemConfig[];
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PerformanceUnderChartLegend({ children, }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/widgets/PerformanceChart/index.d.ts

@@ -0,0 +1,4 @@
+export { PerformanceChart, type PerformanceChartPayload, type PerformanceChartProps, type PerformanceViewTab, } from './PerformanceChart';
+export { type AdjustParameters, type ForecastModelData, PerformanceTable, } from './PerformanceTable';
+export { SPAGHETTI_DRIFT_PER_HORIZON_ID_BASE, SPAGHETTI_MODEL_PER_HORIZON_ID_BASE, averageForecastErrorsVsHistoricalForMatrixColumn, buildDriftSpaghettiMatrixForCustomDialog, buildPerHorizonSpaghettiEntries, buildSpaghettiMergedChartData, calculateYRangeFromChartData, getForecastModelDisplayName, spaghettiGridFromHistoricalPreviousMonth, } from './performanceChart.helpers';
+export { SPAGHETTI_LOCAL_LS_USER_SERIES_ROW_ID, SPAGHETTI_TIME_SERIES_MATRIX_V, tryParseSpaghettiPerformanceMatrix, type SpaghettiPerformanceMatrixPayload, } from './performanceChartUserSeries';

package/dist/esm/types/src/components/widgets/PerformanceChart/performanceChart.helpers.d.ts

@@ -0,0 +1,212 @@
+/**
+ * Helper functions for Performance Tab calculations
+ * Note: ROI/calculatons.ts is only for reference/example
+ */
+import type { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
+import type { ForecastData } from '#uilib/types/forecast-data';
+import type { SpaghettiPerformanceMatrixPayload } from './performanceChartUserSeries';
+export type RealBacktestsEntry = {
+    forecast_start: string;
+    forecast_end: string;
+    forecast_series: Record<string, number>;
+};
+/** Legacy: API backtest spaghetti lines used `SPAGHETTI_FORECAST_ID_BASE + i` (spaghetti view now uses drift per-horizon instead). */
+export declare const SPAGHETTI_FORECAST_ID_BASE = 6000;
+/** Model PER_HORIZON_TO_SPAGHETTI lines use `SPAGHETTI_MODEL_PER_HORIZON_ID_BASE + i`. */
+export declare const SPAGHETTI_MODEL_PER_HORIZON_ID_BASE = 7000;
+/** Drift PER_HORIZON_TO_SPAGHETTI lines use `SPAGHETTI_DRIFT_PER_HORIZON_ID_BASE + i`. */
+export declare const SPAGHETTI_DRIFT_PER_HORIZON_ID_BASE = 8000;
+export declare function isSpaghettiModelPerHorizonLineId(id: number): boolean;
+export declare function isSpaghettiDriftPerHorizonLineId(id: number): boolean;
+/**
+ * Converts `performance.model` / `performance.drift` per-horizon forecasts into synthetic
+ * backtest-shaped entries: each line is [horizon_1[i], …, horizon_n[i]] as date→value points
+ * (aligned by sorted key index per horizon).
+ */
+export declare function buildPerHorizonSpaghettiEntries(forecastRoot: {
+    forecasts?: Record<string, Record<string, number>>;
+} | null | undefined, horizonKeys: string[]): RealBacktestsEntry[];
+/**
+ * Same row alignment as {@link buildPerHorizonSpaghettiEntries}: row `i` uses each horizon's
+ * i-th sorted forecast month; `dates[i]` is horizon_1's month at that row (Date column).
+ * Use this for custom dialog seed + “copy statistical baseline (drift)” prefill.
+ */
+export declare function buildDriftSpaghettiMatrixForCustomDialog(driftRoot: {
+    forecasts?: Record<string, Record<string, number>>;
+} | null | undefined, horizonKeys: string[]): {
+    dates: string[];
+    grid: number[][];
+    perHorizonDates: string[][];
+} | null;
+/**
+ * Prefill for custom performance when copying drift layout: each spaghetti row is flat at the
+ * historical value for the month before the earliest forecast month in that row (same anchor as
+ * chart connection-point logic).
+ */
+export declare function spaghettiGridFromHistoricalPreviousMonth(perHorizonDates: string[][], horizonCount: number, historicalByDate: Map<string, number>): number[][];
+/** Mean absolute error / MAPE vs historical for one horizon column of a spaghetti matrix (aligned by month). */
+export declare function averageForecastErrorsVsHistoricalForMatrixColumn(matrix: SpaghettiPerformanceMatrixPayload, horizonColumnIndex: number, historicalByDate: Map<string, number>): {
+    mae: number;
+    mape: number;
+} | null;
+/** @deprecated Use {@link buildPerHorizonSpaghettiEntries} (same implementation). */
+export declare const buildModelPerHorizonSpaghettiEntries: typeof buildPerHorizonSpaghettiEntries;
+export declare function mergeSpaghettiMergedBases(a: {
+    mergedData: ChartDataPoint[];
+    seriesMeta: {
+        id: number;
+        label: string;
+    }[];
+}, b: {
+    mergedData: ChartDataPoint[];
+    seriesMeta: {
+        id: number;
+        label: string;
+    }[];
+}): {
+    mergedData: ChartDataPoint[];
+    seriesMeta: {
+        id: number;
+        label: string;
+    }[];
+};
+export declare function buildSpaghettiMergedChartData(entries: RealBacktestsEntry[], historicalChartData: ChartDataPoint[], idBase?: number): {
+    mergedData: ChartDataPoint[];
+    seriesMeta: {
+        id: number;
+        label: string;
+    }[];
+};
+/** Appends forecast-backed user series (from dataset context) onto spaghetti backtest lines. */
+export declare function mergeSpaghettiUserSeriesFromForecastData(base: {
+    mergedData: ChartDataPoint[];
+    seriesMeta: {
+        id: number;
+        label: string;
+    }[];
+}, userSeries: {
+    id: number;
+    name?: string;
+}[], forecastData: Record<string, ForecastData>): {
+    mergedData: ChartDataPoint[];
+    seriesMeta: {
+        id: number;
+        label: string;
+    }[];
+};
+export declare function filterChartDataLast24Months(data: ChartDataPoint[], months: number): ChartDataPoint[];
+/**
+ * Spaghetti chart x-range: from two months before the earliest forecast_start
+ * (per-horizon synthetic entries + mergeable user forecast series), inclusive.
+ * Falls back to last N months when no forecast candidates exist.
+ *
+ * When `historicalWindowFloor` is set (e.g. first month of per-horizon `filtered24mData`),
+ * the range start is floored to that month so the historical line matches the per-horizon tab.
+ *
+ * When `historicalWindowCeiling` is set (e.g. last month of `filtered24mData`), drops points after
+ * that month so spaghetti X matches per-horizon (per-horizon chart trims forecasts past last historical).
+ */
+export declare function filterSpaghettiDataFromEarliestForecastStart(mergedData: ChartDataPoint[], entries: RealBacktestsEntry[], userSeries: {
+    id: number;
+    name?: string;
+}[], forecastData: Record<string, ForecastData>, 
+/** Series meta from the first merged batch (e.g. drift) — used to skip duplicate user-series ids. */
+firstBatchSeriesMeta: {
+    id: number;
+    label: string;
+}[], fallbackMonths: number, extraForecastCandidates?: RealBacktestsEntry[], historicalWindowFloor?: string | null, historicalWindowCeiling?: string | null): ChartDataPoint[];
+/**
+ * Ensure each spaghetti row has `historical` from {@link historicalChartData} when that month
+ * falls in the filtered window — matches per-horizon chart (actuals line), and fills months that
+ * exist in history but were missing after merge/filter.
+ */
+export declare function mergeHistoricalIntoSpaghettiChartData(filteredRows: ChartDataPoint[], historicalChartData: ChartDataPoint[]): ChartDataPoint[];
+/**
+ * Calculate Accuracy: 100% - MAPE
+ * @param mape - MAPE value as decimal (e.g., 0.0436 for 4.36%)
+ * @returns Accuracy percentage
+ */
+export declare function calculateAccuracy(mape: number): number;
+/**
+ * Format Accuracy as percentage
+ * @param value - Accuracy value
+ * @returns Formatted accuracy string (e.g., "97%")
+ */
+export declare function formatAccuracy(value: number): string;
+/**
+ * Format Error as "$/Ton"
+ * @param mae - MAE value from metrics_summary.24m.mae
+ * @returns Formatted error string (e.g., "0.05$/Ton")
+ */
+export declare function formatError(mae: number): string;
+/**
+ * Calculate ROI
+ * Reference: ROI/calculatons.ts for example logic
+ * @param totalBenefit - Total annual benefit
+ * @param operatingCost - Annual operating cost
+ * @returns ROI percentage
+ */
+export declare function calculateROI(totalBenefit: number, operatingCost: number): number;
+/**
+ * Calculate ROI Multiple
+ * Formula: ROI Multiple = ROI / 100
+ * Where ROI = (AB - IC) / IC × 100
+ * @param totalBenefit - Total annual benefit (AB)
+ * @param operatingCost - Annual operating cost (IC)
+ * @returns ROI multiple (e.g., 1.0 for 100% ROI, 2.0 for 200% ROI)
+ */
+export declare function calculateROIMultiple(totalBenefit: number, operatingCost: number): number;
+/**
+ * Format ROI as multiplier (xN format)
+ * Formula: ROI Multiple = ROI / 100
+ * Examples: 100% ROI = x1, 200% ROI = x2, 0% ROI = x0
+ * Note: Negative ROI (when benefit < cost) is displayed as x1
+ * @param totalBenefit - Total annual benefit (AB)
+ * @param operatingCost - Annual operating cost (IC)
+ * @returns Formatted ROI string (e.g., "x1.5")
+ */
+export declare function formatROI(totalBenefit: number, operatingCost: number): string;
+/**
+ * Calculate Benefit p/a
+ * Formula: Annual Benefit = PV × V × C × PI
+ * Where:
+ * - PV = Procurement Volume
+ * - V = Variable Raw Material Share (as decimal)
+ * - C = Controllable Cost Share (as decimal)
+ * - PI = Price Improvement = |FA_new - FA_current| × 0.2 (correlation factor)
+ * @param mae - MAE value (not used in calculation, kept for backward compatibility)
+ * @param mape - MAPE value (used to calculate actual forecast accuracy)
+ * @param adjustParams - Adjust parameters from dialog
+ * @param baselineAccuracy - Optional baseline accuracy for comparison (if provided, uses actual improvement)
+ * @returns Benefit per annum
+ */
+export declare function calculateBenefit(mae: number, mape: number, adjustParams: {
+    procurementVolume: number;
+    variableRawMaterialCostShare: number;
+    controllableCosts: number;
+    currentForecastAccuracy: number;
+    expectedImprovement: number;
+    analystHourlyRate: number;
+}, baselineAccuracy?: number): number;
+/**
+ * Format Benefit as euros
+ * @param value - Benefit value
+ * @returns Formatted benefit string (e.g., "€616.640")
+ */
+export declare function formatBenefit(value: number): string;
+/**
+ * Map forecast model key to display name
+ * @param key - Forecast model key (e.g., "mean", "drift", "seasonal")
+ * @returns Display name (e.g., "Mean", "Drift", "Seasonal")
+ */
+export declare function getForecastModelDisplayName(key: string): string;
+/**
+ * Calculate Y range (min/max) from chart data points
+ * Extracts all numeric values from chart data points and calculates min/max with padding
+ * @param chartData - Array of chart data points
+ * @returns Object with yMin and yMax values
+ */
+export declare function calculateYRangeFromChartData(chartData: Array<Record<string, unknown>>): {
+    yMin: number;
+    yMax: number;
+};

package/dist/esm/types/src/components/widgets/PerformanceChart/performanceChartUserSeries.d.ts

@@ -0,0 +1,20 @@
+import type { ForecastData } from '#uilib/types/forecast-data';
+export declare const SPAGHETTI_TIME_SERIES_MATRIX_V: 2;
+export interface SpaghettiPerformanceMatrixPayload {
+    v: typeof SPAGHETTI_TIME_SERIES_MATRIX_V;
+    dates: string[];
+    horizonKeys: string[];
+    grid: number[][];
+    perHorizonDates?: string[][];
+}
+export declare const SPAGHETTI_MATRIX_SYNTHETIC_BASE = 9800000;
+export declare const SPAGHETTI_MATRIX_MAX_COLS = 128;
+export declare const SPAGHETTI_LOCAL_LS_USER_SERIES_ROW_ID = 9000001;
+export declare function spaghettiMatrixSyntheticId(userSeriesRowId: number, horizonIndex: number): number;
+export declare function isSpaghettiMatrixSyntheticLineId(id: number): boolean;
+export declare function getCustomMatrixSeriesForHorizonTab(matrix: SpaghettiPerformanceMatrixPayload, horizonKey: string, rowId: number, forecastData: Record<string, ForecastData> | undefined): {
+    lineId: number;
+    dates: string[];
+    forecastValues: number[];
+} | null;
+export declare function tryParseSpaghettiPerformanceMatrix(parsed: unknown): SpaghettiPerformanceMatrixPayload | null;

package/dist/esm/types/src/docs/pages/PerformanceChartPage.d.ts

@@ -0,0 +1 @@
+export default function PerformanceChartPage(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/index.d.ts

@@ -69,6 +69,7 @@ export * from './components/widgets/SidebarDatasetsItemsGrouped';
 export * from './components/widgets/DriverCard';
 export * from './components/widgets/DriverMap';
 export * from './components/widgets/DriversComparisonChart';
+export * from './components/widgets/PerformanceChart';
 export * from './components/widgets/SybilionAppHeader';
 export * from './components/widgets/SybilionAuthLayout';
 export * from './components/widgets/SybilionSignInPanel';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.23",
+  "version": "1.3.26",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

package/src/components/ui/TextWithDeferTooltip/TextWithDeferTooltip.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 
 import {
   Tooltip,
@@ -18,9 +18,7 @@ function TextWithDeferTooltip({
   ...props
 }: TextWithDeferTooltipProps) {
   const [withTooltip, setWithTooltip] = useState(false);
-  const [tooltipStyles, setTooltipStyles] = useState<CSSProperties>({});
   const ref = useRef<HTMLDivElement>(null);
-  const cachedFontSizeRef = useRef<string | null>(null);
 
   const handleMouseEnter = () => {
     if (!ref.current) return;
@@ -31,33 +29,6 @@ function TextWithDeferTooltip({
       ref.current.scrollHeight - ref.current.clientHeight > 3;
 
     if (isOverflowingHorizontally || isOverflowingVertically) {
-      const styles: CSSProperties = {
-        fontSize: cachedFontSizeRef.current || undefined,
-      };
-
-      if (ref.current) {
-        const {
-          width: rectWidth,
-          left,
-          top,
-        } = ref.current.getBoundingClientRect();
-
-        styles.width = `${width ?? rectWidth}px`;
-
-        if (!cachedFontSizeRef.current) {
-          const { fontSize } = window.getComputedStyle(ref.current);
-          cachedFontSizeRef.current = fontSize;
-          styles.fontSize = fontSize;
-        }
-
-        if (overTrigger) {
-          styles.transform = `translate(${left}px, ${top}px) !important`;
-          // styles.translateX = `${left}px`;
-          // styles.translateY = `${top}px`;
-        }
-      }
-
-      setTooltipStyles(styles);
       setWithTooltip(true);
     }
   };
@@ -74,17 +45,14 @@ function TextWithDeferTooltip({
   );
 
   if (withTooltip) {
-    const tooltipSide = overTrigger ? 'bottom' : side;
-
     return (
       <Tooltip open={withTooltip} onOpenChange={setWithTooltip}>
         <TooltipTrigger asChild>{textElement}</TooltipTrigger>
         <TooltipContent
-          side={tooltipSide}
-          style={{
-            ...(maxWidth !== undefined && { maxWidth: `${maxWidth}px` }),
-            ...tooltipStyles,
-          }}
+          side={side}
+          overTrigger={overTrigger}
+          maxWidth={maxWidth}
+          style={width !== undefined ? { width: `${width}px` } : undefined}
         >
           {children}
         </TooltipContent>

package/src/components/ui/Tooltip/Tooltip.styl

@@ -57,6 +57,18 @@
   &[data-state="closed"][data-side="top"]
     animation fade-out 0.1s ease-in, zoom-out 0.1s ease-in
 
+.tooltipContentOverTrigger
+  box-sizing border-box
+  height auto
+
+  &[data-state="open"],
+  &[data-state="instant-open"],
+  &[data-state="delayed-open"]
+    animation fade-in 0.15s ease-out
+
+  &[data-state="closed"]
+    animation fade-out 0.1s ease-in
+
 .tooltipArrow
   z-index 50
   width 10px

package/src/components/ui/Tooltip/Tooltip.styl.d.ts

@@ -9,6 +9,7 @@ interface CssExports {
   'slide-in-from-top-2': string;
   'tooltipArrow': string;
   'tooltipContent': string;
+  'tooltipContentOverTrigger': string;
   'zoom-in': string;
   'zoom-out': string;
 }