@elastic/charts 46.13.0 → 47.0.0

package/dist/components/tooltip/components/tooltip_table_cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip_table_cell.js","sourceRoot":"","sources":["../../../../src/components/tooltip/components/tooltip_table_cell.tsx"],"names":[],"mappings":";;;;;;AAQA,0DAAoC;AACpC,gDAAiD;AAY1C,IAAM,gBAAgB,GAAG,UAAC,EAAqE;QAAnE,KAAK,WAAA,EAAE,eAAc,EAAd,OAAO,mBAAG,IAAI,KAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAA;IAC3E,IAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,uBAAuB,EAAE,SAAS,CAAC,CAAC;IAC/D,IAAI,OAAO,KAAK,IAAI,EAAE;QACpB,OAAO,CACL,sCAAI,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,IACjC,QAAQ,CACN,CACN,CAAC;KACH;IACD,OAAO,CACL,sCAAI,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,IACjC,QAAQ,CACN,CACN,CAAC;AACJ,CAAC,CAAC;AAdW,QAAA,gBAAgB,oBAc3B"}

package/dist/components/tooltip/components/tooltip_table_color_cell.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { TooltipTableCellProps } from './tooltip_table_cell';
+/** @public */
+export declare type ColorStripCellProps = Omit<TooltipTableCellProps, 'children'> & {
+    color?: string;
+};
+/**
+ * Renders color strip column cell
+ * @public
+ */
+export declare function TooltipTableColorCell({ color, className, ...cellProps }: ColorStripCellProps): JSX.Element | null;
+//# sourceMappingURL=tooltip_table_color_cell.d.ts.map

package/dist/components/tooltip/components/tooltip_table_color_cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip_table_color_cell.d.ts","sourceRoot":"","sources":["../../../../src/components/tooltip/components/tooltip_table_color_cell.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAoB,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAE/E,cAAc;AACd,oBAAY,mBAAmB,GAAG,IAAI,CAAC,qBAAqB,EAAE,UAAU,CAAC,GAAG;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAkBjH"}

package/dist/components/tooltip/components/tooltip_table_color_cell.js

@@ -0,0 +1,44 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipTableColorCell = void 0;
+var classnames_1 = __importDefault(require("classnames"));
+var react_1 = __importDefault(require("react"));
+var tooltip_provider_1 = require("./tooltip_provider");
+var tooltip_table_cell_1 = require("./tooltip_table_cell");
+function TooltipTableColorCell(_a) {
+    var color = _a.color, className = _a.className, cellProps = __rest(_a, ["color", "className"]);
+    var backgroundColor = (0, tooltip_provider_1.useTooltipContext)().backgroundColor;
+    return (react_1.default.createElement(tooltip_table_cell_1.TooltipTableCell, __assign({}, cellProps, { className: (0, classnames_1.default)('echTooltip__colorCell', className, {
+            'echTooltip__colorCell--empty': !color,
+        }) }), color ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "echTooltip__colorStrip", style: { backgroundColor: backgroundColor } }),
+        react_1.default.createElement("div", { className: "echTooltip__colorStrip", style: { backgroundColor: color } }),
+        react_1.default.createElement("div", { className: "echTooltip__colorStripSpacer" }))) : null));
+}
+exports.TooltipTableColorCell = TooltipTableColorCell;
+//# sourceMappingURL=tooltip_table_color_cell.js.map

package/dist/components/tooltip/components/tooltip_table_color_cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip_table_color_cell.js","sourceRoot":"","sources":["../../../../src/components/tooltip/components/tooltip_table_color_cell.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,0DAAoC;AACpC,gDAA0B;AAE1B,uDAAuD;AACvD,2DAA+E;AAW/E,SAAgB,qBAAqB,CAAC,EAAuD;IAArD,IAAA,KAAK,WAAA,EAAE,SAAS,eAAA,EAAK,SAAS,cAAhC,sBAAkC,CAAF;IAC5D,IAAA,eAAe,GAAK,IAAA,oCAAiB,GAAE,gBAAxB,CAAyB;IAChD,OAAO,CACL,8BAAC,qCAAgB,eACX,SAAS,IACb,SAAS,EAAE,IAAA,oBAAU,EAAC,uBAAuB,EAAE,SAAS,EAAE;YACxD,8BAA8B,EAAE,CAAC,KAAK;SACvC,CAAC,KAED,KAAK,CAAC,CAAC,CAAC,CACP;QACE,uCAAK,SAAS,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAE,eAAe,iBAAA,EAAE,GAAI;QACtE,uCAAK,SAAS,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,GAAI;QAC7E,uCAAK,SAAS,EAAC,8BAA8B,GAAG,CAC/C,CACJ,CAAC,CAAC,CAAC,IAAI,CACS,CACpB,CAAC;AACJ,CAAC;AAlBD,sDAkBC"}

package/dist/components/tooltip/components/tooltip_table_footer.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties } from 'react';
+import { SeriesIdentifier } from '../../../common/series_id';
+import { BaseDatum, TooltipValue } from '../../../specs';
+import { Datum } from '../../../utils/common';
+import { PropsOrChildrenWithProps } from '../types';
+import { TooltipTableColumn } from './types';
+declare type TooltipTableFooterProps<D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier> = PropsOrChildrenWithProps<{
+    columns: TooltipTableColumn<D, SI>[];
+    items: TooltipValue<D, SI>[];
+}, {}, {
+    className?: string;
+    maxHeight?: CSSProperties['maxHeight'];
+}>;
+/** @public */
+export declare const TooltipTableFooter: <D extends BaseDatum = any, SI extends SeriesIdentifier = SeriesIdentifier>({ maxHeight, className, ...props }: TooltipTableFooterProps<D, SI>) => JSX.Element | null;
+export {};
+//# sourceMappingURL=tooltip_table_footer.d.ts.map

package/dist/components/tooltip/components/tooltip_table_footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip_table_footer.d.ts","sourceRoot":"","sources":["../../../../src/components/tooltip/components/tooltip_table_footer.tsx"],"names":[],"mappings":"AASA,OAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAIpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,aAAK,uBAAuB,CAC1B,CAAC,SAAS,SAAS,GAAG,KAAK,EAC3B,EAAE,SAAS,gBAAgB,GAAG,gBAAgB,IAC5C,wBAAwB,CAC1B;IACE,OAAO,EAAE,kBAAkB,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC;IACrC,KAAK,EAAE,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC;CAC9B,EACD,EAAE,EACF;IACE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACxC,CACF,CAAC;AAEF,cAAc;AACd,eAAO,MAAM,kBAAkB,uKA+B9B,CAAC"}

package/dist/components/tooltip/components/tooltip_table_footer.js

@@ -0,0 +1,41 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipTableFooter = void 0;
+var classnames_1 = __importDefault(require("classnames"));
+var react_1 = __importDefault(require("react"));
+var tooltip_table_cell_1 = require("./tooltip_table_cell");
+var tooltip_table_color_cell_1 = require("./tooltip_table_color_cell");
+var tooltip_table_row_1 = require("./tooltip_table_row");
+var TooltipTableFooter = function (_a) {
+    var maxHeight = _a.maxHeight, className = _a.className, props = __rest(_a, ["maxHeight", "className"]);
+    var classes = (0, classnames_1.default)('echTooltip__tableFooter', className);
+    if ('children' in props) {
+        return (react_1.default.createElement("tfoot", { className: classes, style: { maxHeight: maxHeight } }, props.children));
+    }
+    if (props.columns.every(function (c) { return !c.footer; }))
+        return null;
+    return (react_1.default.createElement("tfoot", { className: classes },
+        react_1.default.createElement(tooltip_table_row_1.TooltipTableRow, { maxHeight: maxHeight }, props.columns.map(function (_a, i) {
+            var style = _a.style, id = _a.id, cn = _a.className, type = _a.type, footer = _a.footer;
+            var key = id !== null && id !== void 0 ? id : type + "-" + i;
+            if (type === 'color')
+                return react_1.default.createElement(tooltip_table_color_cell_1.TooltipTableColorCell, { className: cn, style: style, key: key });
+            return (react_1.default.createElement(tooltip_table_cell_1.TooltipTableCell, { className: cn, style: style, key: id !== null && id !== void 0 ? id : key }, footer ? (typeof footer === 'string' ? footer : footer(props.items)) : undefined));
+        }))));
+};
+exports.TooltipTableFooter = TooltipTableFooter;
+//# sourceMappingURL=tooltip_table_footer.js.map

package/dist/components/tooltip/components/tooltip_table_footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip_table_footer.js","sourceRoot":"","sources":["../../../../src/components/tooltip/components/tooltip_table_footer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAQA,0DAAoC;AACpC,gDAA6C;AAM7C,2DAAwD;AACxD,uEAAmE;AACnE,yDAAsD;AAmB/C,IAAM,kBAAkB,GAAG,UAA8E,EAI/E;IAH/B,IAAA,SAAS,eAAA,EACT,SAAS,eAAA,EACN,KAAK,cAHsG,0BAI/G,CADS;IAER,IAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,yBAAyB,EAAE,SAAS,CAAC,CAAC;IACjE,IAAI,UAAU,IAAI,KAAK,EAAE;QACvB,OAAO,CACL,yCAAO,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,SAAS,WAAA,EAAE,IAC5C,KAAK,CAAC,QAAQ,CACT,CACT,CAAC;KACH;IAED,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,CAAC,MAAM,EAAT,CAAS,CAAC;QAAE,OAAO,IAAI,CAAC;IAEvD,OAAO,CACL,yCAAO,SAAS,EAAE,OAAO;QACvB,8BAAC,mCAAe,IAAC,SAAS,EAAE,SAAS,IAClC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,UAAC,EAA0C,EAAE,CAAC;gBAA3C,KAAK,WAAA,EAAE,EAAE,QAAA,EAAa,EAAE,eAAA,EAAE,IAAI,UAAA,EAAE,MAAM,YAAA;YAC1D,IAAM,GAAG,GAAG,EAAE,aAAF,EAAE,cAAF,EAAE,GAAO,IAAI,SAAI,CAAG,CAAC;YACjC,IAAI,IAAI,KAAK,OAAO;gBAAE,OAAO,8BAAC,gDAAqB,IAAC,SAAS,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,GAAI,CAAC;YAC9F,OAAO,CACL,8BAAC,qCAAgB,IAAC,SAAS,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,GAAG,IAC1D,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAChE,CACpB,CAAC;QACJ,CAAC,CAAC,CACc,CACZ,CACT,CAAC;AACJ,CAAC,CAAC;AA/BW,QAAA,kBAAkB,sBA+B7B"}

package/dist/components/tooltip/components/tooltip_table_header.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties } from 'react';
+import { SeriesIdentifier } from '../../../common/series_id';
+import { BaseDatum, TooltipValue } from '../../../specs';
+import { Datum } from '../../../utils/common';
+import { PropsOrChildrenWithProps } from '../types';
+import { TooltipTableColumn } from './types';
+declare type TooltipTableHeaderProps<D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier> = PropsOrChildrenWithProps<{
+    columns: TooltipTableColumn<D, SI>[];
+    items: TooltipValue<D, SI>[];
+}, {}, {
+    className?: string;
+    maxHeight?: CSSProperties['maxHeight'];
+}>;
+/** @public */
+export declare const TooltipTableHeader: <D extends BaseDatum = any, SI extends SeriesIdentifier = SeriesIdentifier>({ maxHeight, className, ...props }: TooltipTableHeaderProps<D, SI>) => JSX.Element | null;
+export {};
+//# sourceMappingURL=tooltip_table_header.d.ts.map

package/dist/components/tooltip/components/tooltip_table_header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip_table_header.d.ts","sourceRoot":"","sources":["../../../../src/components/tooltip/components/tooltip_table_header.tsx"],"names":[],"mappings":"AASA,OAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAIpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,aAAK,uBAAuB,CAC1B,CAAC,SAAS,SAAS,GAAG,KAAK,EAC3B,EAAE,SAAS,gBAAgB,GAAG,gBAAgB,IAC5C,wBAAwB,CAC1B;IACE,OAAO,EAAE,kBAAkB,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC;IACrC,KAAK,EAAE,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC;CAC9B,EACD,EAAE,EACF;IACE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACxC,CACF,CAAC;AAEF,cAAc;AACd,eAAO,MAAM,kBAAkB,uKA+B9B,CAAC"}

package/dist/components/tooltip/components/tooltip_table_header.js

@@ -0,0 +1,41 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipTableHeader = void 0;
+var classnames_1 = __importDefault(require("classnames"));
+var react_1 = __importDefault(require("react"));
+var tooltip_table_cell_1 = require("./tooltip_table_cell");
+var tooltip_table_color_cell_1 = require("./tooltip_table_color_cell");
+var tooltip_table_row_1 = require("./tooltip_table_row");
+var TooltipTableHeader = function (_a) {
+    var maxHeight = _a.maxHeight, className = _a.className, props = __rest(_a, ["maxHeight", "className"]);
+    var classes = (0, classnames_1.default)('echTooltip__tableHeader', className);
+    if ('children' in props) {
+        return (react_1.default.createElement("thead", { className: classes, style: { maxHeight: maxHeight } }, props.children));
+    }
+    if (props.columns.every(function (c) { return !c.header; }))
+        return null;
+    return (react_1.default.createElement("thead", { className: classes, style: { maxHeight: maxHeight } },
+        react_1.default.createElement(tooltip_table_row_1.TooltipTableRow, null, props.columns.map(function (_a, i) {
+            var header = _a.header, style = _a.style, id = _a.id, cn = _a.className, type = _a.type;
+            var key = id !== null && id !== void 0 ? id : type + "-" + i;
+            if (type === 'color')
+                return react_1.default.createElement(tooltip_table_color_cell_1.TooltipTableColorCell, { className: cn, style: style, key: key });
+            return (react_1.default.createElement(tooltip_table_cell_1.TooltipTableCell, { className: cn, style: style, key: key }, header ? (typeof header === 'string' ? header : header(props.items)) : undefined));
+        }))));
+};
+exports.TooltipTableHeader = TooltipTableHeader;
+//# sourceMappingURL=tooltip_table_header.js.map

package/dist/components/tooltip/components/tooltip_table_header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip_table_header.js","sourceRoot":"","sources":["../../../../src/components/tooltip/components/tooltip_table_header.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAQA,0DAAoC;AACpC,gDAA6C;AAM7C,2DAAwD;AACxD,uEAAmE;AACnE,yDAAsD;AAmB/C,IAAM,kBAAkB,GAAG,UAA8E,EAI/E;IAH/B,IAAA,SAAS,eAAA,EACT,SAAS,eAAA,EACN,KAAK,cAHsG,0BAI/G,CADS;IAER,IAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,yBAAyB,EAAE,SAAS,CAAC,CAAC;IACjE,IAAI,UAAU,IAAI,KAAK,EAAE;QACvB,OAAO,CACL,yCAAO,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,SAAS,WAAA,EAAE,IAC5C,KAAK,CAAC,QAAQ,CACT,CACT,CAAC;KACH;IAED,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,CAAC,MAAM,EAAT,CAAS,CAAC;QAAE,OAAO,IAAI,CAAC;IAEvD,OAAO,CACL,yCAAO,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,SAAS,WAAA,EAAE;QAC7C,8BAAC,mCAAe,QACb,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,UAAC,EAA0C,EAAE,CAAC;gBAA3C,MAAM,YAAA,EAAE,KAAK,WAAA,EAAE,EAAE,QAAA,EAAa,EAAE,eAAA,EAAE,IAAI,UAAA;YAC1D,IAAM,GAAG,GAAG,EAAE,aAAF,EAAE,cAAF,EAAE,GAAO,IAAI,SAAI,CAAG,CAAC;YACjC,IAAI,IAAI,KAAK,OAAO;gBAAE,OAAO,8BAAC,gDAAqB,IAAC,SAAS,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,GAAI,CAAC;YAC9F,OAAO,CACL,8BAAC,qCAAgB,IAAC,SAAS,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,IACpD,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAChE,CACpB,CAAC;QACJ,CAAC,CAAC,CACc,CACZ,CACT,CAAC;AACJ,CAAC,CAAC;AA/BW,QAAA,kBAAkB,sBA+B7B"}

package/dist/components/tooltip/components/tooltip_table_row.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties, PropsWithChildren } from 'react';
+declare type TooltipTableRowProps = PropsWithChildren<{
+    className?: string;
+    isHighlighted?: boolean;
+    maxHeight?: CSSProperties['maxHeight'];
+}>;
+/** @public */
+export declare const TooltipTableRow: ({ maxHeight, isHighlighted, children, className }: TooltipTableRowProps) => JSX.Element;
+export {};
+//# sourceMappingURL=tooltip_table_row.d.ts.map

package/dist/components/tooltip/components/tooltip_table_row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip_table_row.d.ts","sourceRoot":"","sources":["../../../../src/components/tooltip/components/tooltip_table_row.tsx"],"names":[],"mappings":"AASA,OAAc,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAIhE,aAAK,oBAAoB,GAAG,iBAAiB,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACxC,CAAC,CAAC;AAEH,cAAc;AACd,eAAO,MAAM,eAAe,sDAA+D,oBAAoB,gBAW9G,CAAC"}

package/dist/components/tooltip/components/tooltip_table_row.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipTableRow = void 0;
+var classnames_1 = __importDefault(require("classnames"));
+var react_1 = __importDefault(require("react"));
+var common_1 = require("../../../utils/common");
+var TooltipTableRow = function (_a) {
+    var maxHeight = _a.maxHeight, _b = _a.isHighlighted, isHighlighted = _b === void 0 ? false : _b, children = _a.children, className = _a.className;
+    var classes = (0, classnames_1.default)('echTooltip__tableRow', className, {
+        'echTooltip__tableRow--scrollable': !(0, common_1.isNil)(maxHeight),
+        'echTooltip__tableRow--highlighted': isHighlighted,
+    });
+    return (react_1.default.createElement("tr", { className: classes, style: { maxHeight: maxHeight } }, children));
+};
+exports.TooltipTableRow = TooltipTableRow;
+//# sourceMappingURL=tooltip_table_row.js.map

package/dist/components/tooltip/components/tooltip_table_row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip_table_row.js","sourceRoot":"","sources":["../../../../src/components/tooltip/components/tooltip_table_row.tsx"],"names":[],"mappings":";;;;;;AAQA,0DAAoC;AACpC,gDAAgE;AAEhE,gDAA8C;AASvC,IAAM,eAAe,GAAG,UAAC,EAA+E;QAA7E,SAAS,eAAA,EAAE,qBAAqB,EAArB,aAAa,mBAAG,KAAK,KAAA,EAAE,QAAQ,cAAA,EAAE,SAAS,eAAA;IACrF,IAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,sBAAsB,EAAE,SAAS,EAAE;QAC5D,kCAAkC,EAAE,CAAC,IAAA,cAAK,EAAC,SAAS,CAAC;QACrD,mCAAmC,EAAE,aAAa;KACnD,CAAC,CAAC;IAEH,OAAO,CACL,sCAAI,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,SAAS,WAAA,EAAE,IACzC,QAAQ,CACN,CACN,CAAC;AACJ,CAAC,CAAC;AAXW,QAAA,eAAe,mBAW1B"}

package/dist/components/tooltip/components/tooltip_wrapper.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tooltip_wrapper.d.ts.map

package/dist/components/tooltip/components/tooltip_wrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip_wrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/tooltip/components/tooltip_wrapper.tsx"],"names":[],"mappings":""}

package/dist/components/tooltip/components/tooltip_wrapper.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipWrapper = void 0;
+var classnames_1 = __importDefault(require("classnames"));
+var react_1 = __importDefault(require("react"));
+var common_1 = require("../../../utils/common");
+var tooltip_provider_1 = require("./tooltip_provider");
+var TooltipWrapper = function (_a) {
+    var children = _a.children, className = _a.className;
+    var dir = (0, tooltip_provider_1.useTooltipContext)().dir;
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('echTooltip', className), dir: dir }, (0, common_1.renderComplexChildren)(children)));
+};
+exports.TooltipWrapper = TooltipWrapper;
+//# sourceMappingURL=tooltip_wrapper.js.map

package/dist/components/tooltip/components/tooltip_wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip_wrapper.js","sourceRoot":"","sources":["../../../../src/components/tooltip/components/tooltip_wrapper.tsx"],"names":[],"mappings":";;;;;;AAQA,0DAAoC;AACpC,gDAAiD;AAEjD,gDAA8D;AAC9D,uDAAuD;AAOhD,IAAM,cAAc,GAAG,UAAC,EAA4C;QAA1C,QAAQ,cAAA,EAAE,SAAS,eAAA;IAC1C,IAAA,GAAG,GAAK,IAAA,oCAAiB,GAAE,IAAxB,CAAyB;IAEpC,OAAO,CACL,uCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,YAAY,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE,GAAG,IAC1D,IAAA,8BAAqB,EAAC,QAAQ,CAAC,CAG5B,CACP,CAAC;AACJ,CAAC,CAAC;AAVW,QAAA,cAAc,kBAUzB"}

package/dist/components/tooltip/components/types.d.ts

@@ -0,0 +1,88 @@
+import { CSSProperties, ReactNode } from 'react';
+import { SeriesIdentifier } from '../../../common/series_id';
+import { BaseDatum } from '../../../specs';
+import { TooltipValue } from '../../../specs/tooltip';
+import { Datum } from '../../../utils/common';
+/**
+ * Styles to apply to tooltip table cell
+ * @public */
+export declare type TooltipCellStyle = Pick<CSSProperties, 'maxHeight' | 'textAlign' | 'padding' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft'>;
+/**
+ * Base table column definition
+ * @alpha
+ */
+export declare type TooltipTableColumnBase<D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier> = {
+    /**
+     * Identifier for column to be used in callbacks if needed
+     */
+    id?: string;
+    /**
+     * ClassName to be applied to table cells within column (i.e. `td` or `th`)
+     */
+    className?: string;
+    /**
+     * Table column header
+     */
+    header?: string | ((items: TooltipValue<D, SI>[]) => string);
+    /**
+     * Table column footer
+     */
+    footer?: string | ((items: TooltipValue<D, SI>[]) => string);
+    /**
+     * Boolean to hide entire column from table
+     */
+    hidden?: boolean | ((items: TooltipValue<D, SI>[]) => boolean);
+    /**
+     * Limited styles to apply to table cells within column (i.e. `td` or `th`)
+     */
+    style?: TooltipCellStyle;
+};
+/**
+ * Table column definition for fully custom values
+ * @alpha
+ */
+export interface TooltipTableColumnCustom<D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier> extends TooltipTableColumnBase<D, SI> {
+    type: 'custom';
+    /**
+     * Renders column cell element inside a `td` element
+     */
+    cell: (item: TooltipValue<D, SI>) => ReactNode;
+}
+/**
+ * Table column definition for color strip
+ * @alpha
+ */
+export interface TooltipTableColumnColor<D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier> extends Omit<TooltipTableColumnBase<D, SI>, 'header' | 'footer'> {
+    type: 'color';
+    header?: never;
+    footer?: never;
+}
+/**
+ * Table column definition for number values
+ * @alpha
+ */
+export interface TooltipTableColumnNumber<D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier> extends TooltipTableColumnBase<D, SI> {
+    type: 'number';
+    /**
+     * Renders column cell element inside a `td` element
+     */
+    cell: (item: TooltipValue<D, SI>) => string | number;
+}
+/**
+ * Table column definition for text values
+ * @alpha
+ */
+export interface TooltipTableColumnText<D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier> extends TooltipTableColumnBase<D, SI> {
+    type: 'text';
+    /**
+     * Renders column cell element inside a `td` element
+     */
+    cell: (item: TooltipValue<D, SI>) => string;
+}
+/**
+ * Table column definition for number values
+ *
+ * @alpha
+ */
+export declare type TooltipTableColumn<D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier> = TooltipTableColumnCustom<D, SI> | TooltipTableColumnColor<D, SI> | TooltipTableColumnNumber<D, SI> | TooltipTableColumnText<D, SI>;
+//# sourceMappingURL=types.d.ts.map

package/dist/components/tooltip/components/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/tooltip/components/types.ts"],"names":[],"mappings":"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"}

package/dist/components/tooltip/components/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/components/tooltip/components/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/tooltip/components/types.ts"],"names":[],"mappings":""}

package/dist/components/tooltip/index.d.ts

@@ -1,2 +1,3 @@
-export {};
+export * from './components';
+export * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/index.ts"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/index.ts"],"names":[],"mappings":"AAQA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

package/dist/components/tooltip/index.js

@@ -1,6 +1,15 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tooltip = void 0;
-var tooltip_1 = require("./tooltip");
-Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return tooltip_1.Tooltip; } });
+__exportStar(require("./components"), exports);
+__exportStar(require("./types"), exports);
 //# sourceMappingURL=index.js.map

package/dist/components/tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/tooltip/index.ts"],"names":[],"mappings":";;;AASA,qCAAoC;AAA3B,kGAAA,OAAO,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/tooltip/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAQA,+CAA6B;AAC7B,0CAAwB"}

package/dist/components/tooltip/tooltip.js

@@ -65,16 +65,11 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BasicTooltip = exports.Tooltip = void 0;
-var classnames_1 = __importDefault(require("classnames"));
+exports.BasicTooltip = exports.Tooltip = exports.TooltipComponent = void 0;
 var react_1 = __importStar(require("react"));
 var react_redux_1 = require("react-redux");
 var redux_1 = require("redux");
-var color_library_wrappers_1 = require("../../common/color_library_wrappers");
 var colors_1 = require("../../common/colors");
 var mouse_1 = require("../../state/actions/mouse");
 var get_chart_rotation_1 = require("../../state/selectors/get_chart_rotation");
@@ -83,13 +78,15 @@ var get_internal_is_intialized_1 = require("../../state/selectors/get_internal_i
 var get_internal_is_tooltip_visible_1 = require("../../state/selectors/get_internal_is_tooltip_visible");
 var get_internal_tooltip_anchor_position_1 = require("../../state/selectors/get_internal_tooltip_anchor_position");
 var get_internal_tooltip_info_1 = require("../../state/selectors/get_internal_tooltip_info");
-var get_settings_specs_1 = require("../../state/selectors/get_settings_specs");
-var get_tooltip_header_formatter_1 = require("../../state/selectors/get_tooltip_header_formatter");
+var get_settings_spec_1 = require("../../state/selectors/get_settings_spec");
+var get_tooltip_spec_1 = require("../../state/selectors/get_tooltip_spec");
 var common_1 = require("../../utils/common");
 var portal_1 = require("../portal");
-var get_tooltip_settings_1 = require("./get_tooltip_settings");
+var tooltip_body_1 = require("./components/tooltip_body");
+var tooltip_provider_1 = require("./components/tooltip_provider");
 var TooltipComponent = function (_a) {
-    var info = _a.info, zIndex = _a.zIndex, headerFormatter = _a.headerFormatter, position = _a.position, getChartContainerRef = _a.getChartContainerRef, settings = _a.settings, visible = _a.visible, rotation = _a.rotation, chartId = _a.chartId, onPointerMove = _a.onPointerMove, backgroundColor = _a.backgroundColor;
+    var _b, _c, _d, _e, _f;
+    var anchorRef = _a.anchorRef, info = _a.info, zIndex = _a.zIndex, headerFormatter = _a.headerFormatter, position = _a.position, getChartContainerRef = _a.getChartContainerRef, settings = _a.settings, visible = _a.visible, rotation = _a.rotation, chartId = _a.chartId, onPointerMove = _a.onPointerMove, backgroundColor = _a.backgroundColor, header = _a.header, footer = _a.footer;
     var chartRef = getChartContainerRef();
     var handleScroll = function () {
         onPointerMove({ x: -1, y: -1 }, Date.now());
@@ -98,51 +95,6 @@ var TooltipComponent = function (_a) {
         window.addEventListener('scroll', handleScroll, true);
         return function () { return window.removeEventListener('scroll', handleScroll, true); };
     }, []);
-    var renderHeader = (0, react_1.useCallback)(function (header) {
-        if (!header || !header.isVisible) {
-            return null;
-        }
-        return (react_1.default.createElement("div", { className: "echTooltip__header" }, headerFormatter ? headerFormatter(header) : header.formattedValue));
-    }, [headerFormatter]);
-    var renderValues = function (values) { return (react_1.default.createElement("div", { className: "echTooltip__list" }, values.map(function (_a, index) {
-        var seriesIdentifier = _a.seriesIdentifier, valueAccessor = _a.valueAccessor, label = _a.label, markValue = _a.markValue, formattedValue = _a.formattedValue, formattedMarkValue = _a.formattedMarkValue, color = _a.color, isHighlighted = _a.isHighlighted, isVisible = _a.isVisible;
-        if (!isVisible) {
-            return null;
-        }
-        var classes = (0, classnames_1.default)('echTooltip__item', {
-            echTooltip__rowHighlighted: isHighlighted,
-        });
-        var adjustedBGColor = (0, color_library_wrappers_1.colorToRgba)(color)[3] === 0 ? colors_1.Colors.Transparent.keyword : backgroundColor;
-        return (react_1.default.createElement("div", { key: seriesIdentifier.key + "__" + valueAccessor + "__" + index, className: classes, style: {
-                borderLeftColor: color,
-            } },
-            react_1.default.createElement("div", { className: "echTooltip__item--backgroundColor", style: { backgroundColor: adjustedBGColor } },
-                react_1.default.createElement("div", { className: "echTooltip__item--color", style: { backgroundColor: color } })),
-            react_1.default.createElement("div", { className: "echTooltip__item--container" },
-                react_1.default.createElement("span", { className: "echTooltip__label" }, label),
-                react_1.default.createElement("span", { className: "echTooltip__value" }, formattedValue),
-                (0, common_1.isDefined)(markValue) && react_1.default.createElement("span", { className: "echTooltip__markValue" },
-                    "\u00A0(",
-                    formattedMarkValue,
-                    ")"))));
-    }))); };
-    var renderTooltip = function () {
-        var _a, _b;
-        if (!info || !visible) {
-            return null;
-        }
-        if (typeof settings !== 'string' && (settings === null || settings === void 0 ? void 0 : settings.customTooltip)) {
-            var CustomTooltip = settings.customTooltip;
-            return react_1.default.createElement(CustomTooltip, __assign({}, info));
-        }
-        var isMostlyRTL = (0, common_1.hasMostlyRTLItems)(__spreadArray(__spreadArray([], __read(info.values.map(function (_a) {
-            var label = _a.label;
-            return label;
-        })), false), [(_b = (_a = info.header) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : ''], false));
-        return (react_1.default.createElement("div", { className: "echTooltip", dir: isMostlyRTL ? 'rtl' : 'ltr' },
-            renderHeader(info.header),
-            renderValues(info.values)));
-    };
     var popperSettings = (0, react_1.useMemo)(function () {
         var _a;
         if (!settings || typeof settings === 'string') {
@@ -156,12 +108,73 @@ var TooltipComponent = function (_a) {
     if (!visible) {
         return null;
     }
-    return (react_1.default.createElement(portal_1.TooltipPortal, { scope: "MainTooltip", zIndex: zIndex + 100, anchor: {
+    var isMostlyRTL = (0, common_1.hasMostlyRTLItems)(__spreadArray(__spreadArray([], __read(((_d = (_c = (_b = info === null || info === void 0 ? void 0 : info.values) === null || _b === void 0 ? void 0 : _b.map) === null || _c === void 0 ? void 0 : _c.call(_b, function (_a) {
+        var label = _a.label;
+        return label;
+    })) !== null && _d !== void 0 ? _d : [])), false), [
+        (_f = (_e = info === null || info === void 0 ? void 0 : info.header) === null || _e === void 0 ? void 0 : _e.label) !== null && _f !== void 0 ? _f : '',
+    ], false));
+    var columns = [
+        {
+            id: 'color',
+            type: 'color',
+        },
+        {
+            id: 'label',
+            type: 'custom',
+            cell: function (_a) {
+                var label = _a.label;
+                return react_1.default.createElement("span", { className: "echTooltip__label" }, label);
+            },
+            style: {
+                textAlign: 'left',
+            },
+        },
+        {
+            id: 'value',
+            type: 'custom',
+            cell: function (_a) {
+                var formattedValue = _a.formattedValue;
+                return (react_1.default.createElement("span", { className: "echTooltip__value", dir: "ltr" }, formattedValue));
+            },
+            style: {
+                textAlign: 'right',
+            },
+        },
+        {
+            id: 'markValue',
+            type: 'custom',
+            style: {
+                paddingLeft: 0,
+            },
+            hidden: function (items) { return items.every(function (_a) {
+                var markValue = _a.markValue;
+                return !markValue;
+            }); },
+            cell: function (_a) {
+                var markValue = _a.markValue, formattedMarkValue = _a.formattedMarkValue;
+                return (0, common_1.isDefined)(markValue) ? react_1.default.createElement("span", { className: "echTooltip__markValue" },
+                    "\u00A0(",
+                    formattedMarkValue,
+                    ")") : null;
+            },
+        },
+    ];
+    return (react_1.default.createElement(portal_1.TooltipPortal, { scope: "MainTooltip", zIndex: zIndex + 100, anchor: anchorRef !== null && anchorRef !== void 0 ? anchorRef : {
             position: position,
-            ref: chartRef.current,
-        }, settings: popperSettings, chartId: chartId, visible: visible }, renderTooltip()));
+            appendRef: chartRef,
+        }, settings: popperSettings, chartId: chartId, visible: visible },
+        react_1.default.createElement(tooltip_provider_1.TooltipProvider, { backgroundColor: backgroundColor, dir: isMostlyRTL ? 'rtl' : 'ltr' },
+            react_1.default.createElement(tooltip_body_1.TooltipBody, { info: info, columns: columns, headerFormatter: headerFormatter, settings: settings, visible: visible, header: header, footer: footer }))));
 };
-TooltipComponent.displayName = 'Tooltip';
+exports.TooltipComponent = TooltipComponent;
+exports.TooltipComponent.displayName = 'Tooltip';
+function getTooltipSettings(tooltip, _a, isExternalTooltipVisible) {
+    var externalPointerEvents = _a.externalPointerEvents;
+    if (!isExternalTooltipVisible)
+        return tooltip;
+    return __assign(__assign({}, tooltip), externalPointerEvents.tooltip);
+}
 var HIDDEN_TOOLTIP_PROPS = {
     zIndex: 0,
     visible: false,
@@ -177,12 +190,15 @@ var mapDispatchToProps = function (dispatch) {
     return (0, redux_1.bindActionCreators)({ onPointerMove: mouse_1.onPointerMove }, dispatch);
 };
 var mapStateToPropsBasic = function (state) {
+    var tooltip = (0, get_tooltip_spec_1.getTooltipSpecSelector)(state);
     return (0, get_internal_is_intialized_1.getInternalIsInitializedSelector)(state) !== get_internal_is_intialized_1.InitStatus.Initialized
         ? HIDDEN_TOOLTIP_PROPS
         : {
             zIndex: state.zIndex,
-            headerFormatter: (0, get_tooltip_header_formatter_1.getTooltipHeaderFormatterSelector)(state),
-            settings: (0, get_tooltip_settings_1.getTooltipSettings)((0, get_settings_specs_1.getSettingsSpecSelector)(state), (0, get_internal_is_tooltip_visible_1.getInternalIsTooltipVisibleSelector)(state).isExternal),
+            headerFormatter: tooltip.headerFormatter,
+            settings: getTooltipSettings(tooltip, (0, get_settings_spec_1.getSettingsSpecSelector)(state), (0, get_internal_is_tooltip_visible_1.getInternalIsTooltipVisibleSelector)(state).isExternal),
+            header: tooltip.header,
+            footer: tooltip.footer,
             rotation: (0, get_chart_rotation_1.getChartRotationSelector)(state),
             chartId: state.chartId,
             backgroundColor: (0, get_chart_theme_1.getChartThemeSelector)(state).background.color,
@@ -193,6 +209,6 @@ var mapStateToProps = function (state) {
         ? HIDDEN_TOOLTIP_PROPS
         : __assign(__assign({}, mapStateToPropsBasic(state)), { visible: (0, get_internal_is_tooltip_visible_1.getInternalIsTooltipVisibleSelector)(state).visible, position: (0, get_internal_tooltip_anchor_position_1.getInternalTooltipAnchorPositionSelector)(state), info: (0, get_internal_tooltip_info_1.getInternalTooltipInfoSelector)(state) });
 };
-exports.Tooltip = (0, react_1.memo)((0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(TooltipComponent));
-exports.BasicTooltip = (0, react_1.memo)((0, react_redux_1.connect)(mapStateToPropsBasic)(TooltipComponent));
+exports.Tooltip = (0, react_1.memo)((0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(exports.TooltipComponent));
+exports.BasicTooltip = (0, react_1.memo)((0, react_redux_1.connect)(mapStateToPropsBasic)(exports.TooltipComponent));
 //# sourceMappingURL=tooltip.js.map