xmlui 0.11.4 → 0.11.6

package/dist/scripts/src/components/Charts/RadarChart/RadarChartNative.js

@@ -1,125 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultProps = void 0;
-exports.RadarChart = RadarChart;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const recharts_1 = require("recharts");
-const react_1 = require("react");
-const react_2 = require("react");
-const ChartProvider_1 = __importStar(require("../utils/ChartProvider"));
-const TooltipContent_1 = require("../Tooltip/TooltipContent");
-const ThemeContext_1 = require("../../../components-core/theming/ThemeContext");
-exports.defaultProps = {
-    hideGrid: false,
-    hideAngleAxis: false,
-    hideRadiusAxis: false,
-    hideTooltip: false,
-    showLegend: false,
-    filled: true,
-    strokeWidth: 2,
-    fillOpacity: 0.3,
-};
-function RadarChart({ data = [], nameKey, dataKeys = [], hideGrid = exports.defaultProps.hideGrid, hideAngleAxis = exports.defaultProps.hideAngleAxis, hideRadiusAxis = exports.defaultProps.hideRadiusAxis, hideTooltip = exports.defaultProps.hideTooltip, className, children, showLegend = exports.defaultProps.showLegend, filled = exports.defaultProps.filled, strokeWidth = exports.defaultProps.strokeWidth, fillOpacity = exports.defaultProps.fillOpacity, tooltipRenderer, }) {
-    // Validate and normalize data
-    const validData = Array.isArray(data) ? data : [];
-    const { getThemeVar } = (0, ThemeContext_1.useTheme)();
-    const colorValues = (0, react_2.useMemo)(() => {
-        return [
-            getThemeVar("color-primary-500"),
-            getThemeVar("color-primary-300"),
-            getThemeVar("color-success-500"),
-            getThemeVar("color-success-300"),
-            getThemeVar("color-warn-500"),
-            getThemeVar("color-warn-300"),
-            getThemeVar("color-danger-500"),
-            getThemeVar("color-danger-300"),
-            getThemeVar("color-info-500"),
-            getThemeVar("color-info-300"),
-            getThemeVar("color-secondary-500"),
-            getThemeVar("color-secondary-300"),
-        ];
-    }, [getThemeVar]);
-    const config = (0, react_2.useMemo)(() => {
-        return Object.assign({}, ...dataKeys.map((key, index) => {
-            return {
-                [key]: {
-                    label: key,
-                    color: colorValues[index % colorValues.length],
-                },
-            };
-        }));
-    }, [colorValues, dataKeys]);
-    const chartContextValue = (0, ChartProvider_1.useChartContextValue)({ dataKeys, nameKey });
-    // Process data and create radar elements based on dataKeys
-    const radarElements = (0, react_2.useMemo)(() => {
-        return dataKeys.map((key, index) => {
-            const color = colorValues[index % colorValues.length];
-            return ((0, jsx_runtime_1.jsx)(recharts_1.Radar, { name: key, dataKey: key, stroke: color, fill: filled ? color : "none", fillOpacity: filled ? fillOpacity : 0, strokeWidth: strokeWidth }, key));
-        });
-    }, [dataKeys, colorValues, filled, fillOpacity, strokeWidth]);
-    // Handle responsive behavior
-    const [containerSize, setContainerSize] = (0, react_1.useState)({ width: 0, height: 0 });
-    const containerRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        const updateSize = () => {
-            if (containerRef.current) {
-                const { width, height } = containerRef.current.getBoundingClientRect();
-                setContainerSize({ width, height });
-            }
-        };
-        updateSize();
-        window.addEventListener('resize', updateSize);
-        return () => window.removeEventListener('resize', updateSize);
-    }, []);
-    // Determine if we're in mini mode (very small container)
-    const isMiniMode = containerSize.height < 150;
-    const safeTooltipRenderer = (0, react_1.useCallback)((props) => {
-        if (!tooltipRenderer)
-            return (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, Object.assign({}, props));
-        const payloadObject = {};
-        if (props.payload && props.payload.length > 0 && props.payload[0].payload) {
-            Object.assign(payloadObject, props.payload[0].payload);
-        }
-        // Extract tooltip data from Recharts props
-        const tooltipData = {
-            label: props.label,
-            payload: payloadObject,
-            active: props.active,
-        };
-        return tooltipRenderer(tooltipData);
-    }, [tooltipRenderer]);
-    return ((0, jsx_runtime_1.jsx)(ChartProvider_1.default, { value: chartContextValue, children: (0, jsx_runtime_1.jsx)("div", { ref: containerRef, className: className, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.RadarChart, { data: validData, children: [!hideGrid && (0, jsx_runtime_1.jsx)(recharts_1.PolarGrid, {}), !hideAngleAxis && ((0, jsx_runtime_1.jsx)(recharts_1.PolarAngleAxis, { dataKey: nameKey, hide: isMiniMode })), !hideRadiusAxis && ((0, jsx_runtime_1.jsx)(recharts_1.PolarRadiusAxis, { hide: isMiniMode })), !isMiniMode && !hideTooltip && ((0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: safeTooltipRenderer })), showLegend && !isMiniMode && (0, jsx_runtime_1.jsx)(recharts_1.Legend, {}), radarElements, children] }) }) }) }));
-}

package/dist/scripts/src/components/Charts/Tooltip/TooltipContent.js

@@ -1,27 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TooltipContent = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const TooltipContent_module_scss_1 = __importDefault(require("./TooltipContent.module.scss"));
-const classnames_1 = __importDefault(require("classnames"));
-exports.TooltipContent = (0, react_1.forwardRef)(function ({ active, payload, indicator = "dot", hideLabel = false, label, color }, ref) {
-    if (active && payload && payload.length) {
-        const nestLabel = payload.length === 1 && indicator !== "dot";
-        return ((0, jsx_runtime_1.jsxs)("div", { className: TooltipContent_module_scss_1.default.tooltipContainer, ref: ref, children: [!hideLabel && (0, jsx_runtime_1.jsx)("p", { className: "label", children: label }), (0, jsx_runtime_1.jsx)("div", { className: TooltipContent_module_scss_1.default.gridGap, children: payload === null || payload === void 0 ? void 0 : payload.map((item, index) => {
-                        var _a;
-                        const indicatorColor = color || ((_a = item.payload) === null || _a === void 0 ? void 0 : _a.fill) || item.color;
-                        return ((0, jsx_runtime_1.jsxs)("div", { className: TooltipContent_module_scss_1.default.itemContainer, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(TooltipContent_module_scss_1.default.indicator, {
-                                        [TooltipContent_module_scss_1.default.dot]: indicator === "dot",
-                                        [TooltipContent_module_scss_1.default.line]: indicator === "line",
-                                        [TooltipContent_module_scss_1.default.dashed]: indicator === "dashed",
-                                        [TooltipContent_module_scss_1.default.nestDashed]: nestLabel && indicator === "dashed",
-                                    }), style: { backgroundColor: indicatorColor, borderColor: indicatorColor } }), (0, jsx_runtime_1.jsxs)("div", { className: TooltipContent_module_scss_1.default.valueContainer, children: [(0, jsx_runtime_1.jsx)("div", { className: TooltipContent_module_scss_1.default.labelGrid, children: (0, jsx_runtime_1.jsx)("span", { className: TooltipContent_module_scss_1.default.mutedText, children: item.name }) }), item.value && ((0, jsx_runtime_1.jsx)("span", { className: TooltipContent_module_scss_1.default.valueText, children: item.value.toLocaleString() }))] })] }, index));
-                    }) })] }));
-    }
-    return null;
-});
-exports.TooltipContent.displayName = "TooltipContent";

package/dist/scripts/src/components/Charts/Tooltip/TooltipContent.spec.js

@@ -1,451 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const fixtures_1 = require("../../../testing/fixtures");
-// Test data helpers - using proper XMLUI data format
-const sampleData = `[
-  { name: 'Desktop', value: 400, fill: '#8884d8' },
-  { name: 'Mobile', value: 300, fill: '#82ca9d' },
-  { name: 'Tablet', value: 200, fill: '#ffc658' },
-  { name: 'Other', value: 100, fill: '#ff7300' }
-]`;
-const multiSeriesData = `[
-  { name: 'Jan', sales: 100, profit: 20, expenses: 80 },
-  { name: 'Feb', sales: 150, profit: 30, expenses: 120 },
-  { name: 'Mar', sales: 120, profit: 25, expenses: 95 },
-  { name: 'Apr', sales: 180, profit: 40, expenses: 140 }
-]`;
-const largeValueData = `[
-  { name: 'Category A', value: 1234567 },
-  { name: 'Category B', value: 9876543 },
-  { name: 'Category C', value: 5555555 }
-]`;
-// Chart selectors - Tooltip specific
-const chartRoot = ".recharts-responsive-container";
-const tooltipSelector = ".recharts-tooltip-wrapper";
-const tooltipContentSelector = "[class*='tooltipContainer']";
-const tooltipLabelSelector = ".label";
-const tooltipIndicatorSelector = "[class*='indicator']";
-const tooltipValueSelector = "[class*='valueText']";
-const tooltipNameSelector = "[class*='mutedText']";
-// =============================================================================
-// BASIC FUNCTIONALITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Basic Functionality", () => {
-    // Smoke tests
-    fixtures_1.test.describe("smoke tests", { tag: "@smoke" }, () => {
-        (0, fixtures_1.test)("TooltipContent renders in PieChart on hover", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <PieChart
-          nameKey="name"
-          dataKey="value"
-          data="{${sampleData}}"
-          width="400px"
-          height="400px"
-        />
-      `);
-            yield page.waitForSelector(chartRoot, { timeout: 10000 });
-            // Hover over a pie sector to trigger tooltip
-            const pieSector = page.locator(".recharts-pie-sector").first();
-            yield pieSector.hover();
-            // Tooltip should appear
-            yield (0, fixtures_1.expect)(page.locator(tooltipSelector)).toBeVisible();
-            yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
-        }));
-        (0, fixtures_1.test)("TooltipContent renders in BarChart on hover", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <BarChart
-          xKey="name"
-          yKeys="{['value']}"
-          data="{${sampleData}}"
-          width="400px"
-          height="400px"
-        />
-      `);
-            yield page.waitForSelector(chartRoot, { timeout: 10000 });
-            // Hover over a bar to trigger tooltip
-            const barElement = page.locator(".recharts-bar-rectangle").first();
-            yield barElement.hover();
-            // Check if tooltip content is visible
-            yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
-            yield (0, fixtures_1.expect)(page.locator(tooltipNameSelector)).toBeVisible();
-            yield (0, fixtures_1.expect)(page.locator(tooltipValueSelector)).toBeVisible();
-        }));
-    });
-    // Indicator prop tests
-    fixtures_1.test.describe("indicator prop", () => {
-        (0, fixtures_1.test)("displays dot indicator by default", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <PieChart
-          nameKey="name"
-          dataKey="value"
-          data="{${sampleData}}"
-          width="400px"
-          height="400px"
-        />
-      `);
-            yield page.waitForSelector(chartRoot, { timeout: 10000 });
-            const pieSector = page.locator(".recharts-pie-sector").first();
-            yield pieSector.hover();
-            yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
-            const indicator = page.locator(tooltipIndicatorSelector);
-            yield (0, fixtures_1.expect)(indicator).toBeVisible();
-            // Should have dot styling (default)
-            yield (0, fixtures_1.expect)(indicator).toHaveClass(/dot/);
-        }));
-        (0, fixtures_1.test)("displays line indicator when specified", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            // Note: Since TooltipContent is used internally, we test through chart context
-            // The indicator prop would be passed through chart tooltip configuration
-            yield initTestBed(`
-        <BarChart
-          xKey="name"
-          yKeys="{['value']}"
-          data="{${sampleData}}"
-          width="400px"
-          height="400px"
-        />
-      `);
-            yield page.waitForSelector(chartRoot, { timeout: 10000 });
-            // Hover over a bar to trigger tooltip
-            const barElement = page.locator(".recharts-bar-rectangle").first();
-            yield barElement.hover();
-            // Check if tooltip content is visible with proper styling
-            yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
-            yield (0, fixtures_1.expect)(page.locator(tooltipNameSelector)).toBeVisible();
-            yield (0, fixtures_1.expect)(page.locator(tooltipValueSelector)).toBeVisible();
-        }));
-    });
-    // Data handling tests
-    fixtures_1.test.describe("data handling", () => {
-        (0, fixtures_1.test)("displays single data point correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            const singleData = `[{ name: 'Single', value: 100 }]`;
-            yield initTestBed(`
-        <PieChart
-          nameKey="name"
-          dataKey="value"
-          data="{${singleData}}"
-          width="400px"
-          height="400px"
-        />
-      `);
-            yield page.waitForSelector(chartRoot, { timeout: 10000 });
-            const pieSector = page.locator(".recharts-pie-sector").first();
-            yield pieSector.hover();
-            yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
-            yield (0, fixtures_1.expect)(page.locator(tooltipNameSelector)).toContainText("Single");
-            yield (0, fixtures_1.expect)(page.locator(tooltipValueSelector)).toContainText("100");
-        }));
-        (0, fixtures_1.test)("displays multiple data series correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <BarChart
-          xKey="name"
-          yKeys="{['sales', 'profit']}"
-          data="{${multiSeriesData}}"
-          width="400px"
-          height="400px"
-        />
-      `);
-            yield page.waitForSelector(chartRoot, { timeout: 10000 });
-            // Hover over a bar to trigger tooltip
-            const barElement = page.locator(".recharts-bar-rectangle").first();
-            yield barElement.hover();
-            // Check if tooltip shows multiple series data
-            yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
-            // Should show data for both series - check for multiple indicators
-            const indicators = page.locator(tooltipIndicatorSelector);
-            yield (0, fixtures_1.expect)(indicators).toHaveCount(2);
-        }));
-        (0, fixtures_1.test)("formats large numbers with locale string", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <PieChart
-          nameKey="name"
-          dataKey="value"
-          data="{${largeValueData}}"
-          width="400px"
-          height="400px"
-        />
-      `);
-            yield page.waitForSelector(chartRoot, { timeout: 10000 });
-            const pieSector = page.locator(".recharts-pie-sector").first();
-            yield pieSector.hover();
-            yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
-            // Should format large numbers with commas
-            const valueText = yield page.locator(tooltipValueSelector).textContent();
-            (0, fixtures_1.expect)(valueText).toMatch(/1,234,567/);
-        }));
-        (0, fixtures_1.test)("handles zero values correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            const zeroData = `[
-        { name: 'Zero', value: 0 },
-        { name: 'Positive', value: 100 }
-      ]`;
-            yield initTestBed(`
-        <PieChart
-          nameKey="name"
-          dataKey="value"
-          data="{${zeroData}}"
-          width="400px"
-          height="400px"
-        />
-      `);
-            yield page.waitForSelector(chartRoot, { timeout: 10000 });
-            const pieSector = page.locator(".recharts-pie-sector").first();
-            yield pieSector.hover();
-            yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
-            // Should handle zero values gracefully
-            const valueElements = page.locator(tooltipValueSelector);
-            yield (0, fixtures_1.expect)(valueElements.first()).toBeVisible();
-        }));
-    });
-    // Label handling tests
-    fixtures_1.test.describe("label handling", () => {
-        (0, fixtures_1.test)("displays tooltip content without label by default", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <PieChart
-          nameKey="name"
-          dataKey="value"
-          data="{${sampleData}}"
-          width="400px"
-          height="400px"
-        />
-      `);
-            yield page.waitForSelector(chartRoot, { timeout: 10000 });
-            const pieSector = page.locator(".recharts-pie-sector").first();
-            yield pieSector.hover();
-            yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
-            // Default PieChart tooltip doesn't have a label, so check for name and value instead
-            yield (0, fixtures_1.expect)(page.locator(tooltipNameSelector)).toBeVisible();
-            yield (0, fixtures_1.expect)(page.locator(tooltipValueSelector)).toBeVisible();
-        }));
-        (0, fixtures_1.test)("handles Unicode characters in labels", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            const unicodeData = `[
-        { name: 'Desktop 🖥️', value: 400 },
-        { name: 'Mobile 📱', value: 300 }
-      ]`;
-            yield initTestBed(`
-        <PieChart
-          nameKey="name"
-          dataKey="value"
-          data="{${unicodeData}}"
-          width="400px"
-          height="400px"
-        />
-      `);
-            yield page.waitForSelector(chartRoot, { timeout: 10000 });
-            const pieSector = page.locator(".recharts-pie-sector").first();
-            yield pieSector.hover();
-            yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
-            // Should display Unicode characters correctly
-            const nameText = page.locator(tooltipNameSelector);
-            yield (0, fixtures_1.expect)(nameText).toContainText("🖥️");
-        }));
-    });
-    // Color and styling tests
-    fixtures_1.test.describe("color and styling", () => {
-        (0, fixtures_1.test)("displays indicator with correct colors", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <PieChart
-          nameKey="name"
-          dataKey="value"
-          data="{${sampleData}}"
-          width="400px"
-          height="400px"
-        />
-      `);
-            yield page.waitForSelector(chartRoot, { timeout: 10000 });
-            const pieSector = page.locator(".recharts-pie-sector").first();
-            yield pieSector.hover();
-            yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
-            const indicator = page.locator(tooltipIndicatorSelector);
-            yield (0, fixtures_1.expect)(indicator).toBeVisible();
-            // Indicator should have background color
-            const backgroundColor = yield indicator.evaluate((el) => window.getComputedStyle(el).backgroundColor);
-            (0, fixtures_1.expect)(backgroundColor).not.toBe("rgba(0, 0, 0, 0)"); // Not transparent
-        }));
-        (0, fixtures_1.test)("applies consistent styling across different chart types", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-            // Test in LineChart context
-            yield initTestBed(`
-        <LineChart
-          xKey="name"
-          yKeys="{['value']}"
-          data="{${sampleData}}"
-          width="400px"
-          height="400px"
-        />
-      `);
-            yield page.waitForSelector(chartRoot, { timeout: 10000 });
-            // Hover over chart area to trigger tooltip (Recharts tooltip activates on chart area, not just line)
-            const chartSvg = page.locator(".recharts-surface").first();
-            yield chartSvg.hover({ position: { x: 200, y: 200 } });
-            // Wait for tooltip to appear
-            yield page.waitForTimeout(500);
-            yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
-            // Should have consistent styling
-            const indicator = page.locator(tooltipIndicatorSelector);
-            yield (0, fixtures_1.expect)(indicator).toBeVisible();
-        }));
-    });
-});
-// =============================================================================
-// ACCESSIBILITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Accessibility", () => {
-    (0, fixtures_1.test)("tooltip content is accessible to screen readers", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <PieChart
-        nameKey="name"
-        dataKey="value"
-        data="{${sampleData}}"
-        width="400px"
-        height="400px"
-      />
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        const pieSector = page.locator(".recharts-pie-sector").first();
-        yield pieSector.hover();
-        yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
-        // Tooltip content should be accessible
-        const tooltipContent = page.locator(tooltipContentSelector);
-        yield (0, fixtures_1.expect)(tooltipContent).toBeVisible();
-        // Text content should be readable
-        const nameText = page.locator(tooltipNameSelector);
-        const valueText = page.locator(tooltipValueSelector);
-        yield (0, fixtures_1.expect)(nameText).toBeVisible();
-        yield (0, fixtures_1.expect)(valueText).toBeVisible();
-    }));
-    (0, fixtures_1.test)("tooltip has proper contrast and readability", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <PieChart
-        nameKey="name"
-        dataKey="value"
-        data="{${sampleData}}"
-        width="400px"
-        height="400px"
-      />
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        const pieSector = page.locator(".recharts-pie-sector").first();
-        yield pieSector.hover();
-        yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
-        // Text should have readable font size
-        const valueText = page.locator(tooltipValueSelector);
-        yield (0, fixtures_1.expect)(valueText).toHaveCSS("font-size", /\d+px/);
-        // Should have proper contrast (background vs text)
-        const tooltipContainer = page.locator(tooltipContentSelector);
-        const backgroundColor = yield tooltipContainer.evaluate((el) => window.getComputedStyle(el).backgroundColor);
-        (0, fixtures_1.expect)(backgroundColor).not.toBe("transparent");
-    }));
-    (0, fixtures_1.test)("tooltip appears on keyboard navigation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <PieChart
-        nameKey="name"
-        dataKey="value"
-        data="{${sampleData}}"
-        width="400px"
-        height="400px"
-      />
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        // Focus on chart and use keyboard navigation
-        yield page.keyboard.press("Tab");
-        // Chart should be focusable and tooltip may appear on focus
-        const focusedElement = page.locator(":focus");
-        yield (0, fixtures_1.expect)(focusedElement).toBeVisible();
-    }));
-});
-// =============================================================================
-// PERFORMANCE AND EDGE CASES
-// =============================================================================
-fixtures_1.test.describe("Performance and Edge Cases", () => {
-    (0, fixtures_1.test)("handles rapid hover events efficiently", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <PieChart
-        nameKey="name"
-        dataKey="value"
-        data="{${sampleData}}"
-        width="400px"
-        height="400px"
-      />
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        const sectors = page.locator(".recharts-pie-sector");
-        // Rapidly hover over different sectors
-        for (let i = 0; i < 3; i++) {
-            yield sectors.nth(i).hover();
-            yield page.waitForTimeout(100);
-        }
-        // Tooltip should still work correctly
-        yield sectors.first().hover();
-        yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles empty or null data gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const emptyData = `[]`;
-        yield initTestBed(`
-      <PieChart
-        nameKey="name"
-        dataKey="value"
-        data="{${emptyData}}"
-        width="400px"
-        height="400px"
-      />
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        // Should not crash with empty data
-        // Tooltip won't appear since there's no data to hover over
-        const chart = page.locator(chartRoot);
-        yield (0, fixtures_1.expect)(chart).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles special characters and long text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <PieChart
-        nameKey="name"
-        dataKey="value"
-        data="{[
-          { name: 'Category with quotes & symbols', value: 400 },
-          { name: 'Very long category name that might wrap to multiple lines in the tooltip', value: 300 }
-        ]}"
-        width="400px"
-        height="400px"
-      />
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        const pieSector = page.locator(".recharts-pie-sector").first();
-        yield pieSector.hover();
-        yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
-        // Should handle special characters correctly
-        const nameText = page.locator(tooltipNameSelector);
-        yield (0, fixtures_1.expect)(nameText).toContainText("quotes");
-        yield (0, fixtures_1.expect)(page.locator(tooltipValueSelector)).toContainText("400");
-    }));
-    (0, fixtures_1.test)("tooltip positioning adapts to chart boundaries", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <PieChart
-        nameKey="name"
-        dataKey="value"
-        data="{${sampleData}}"
-        width="200px"
-        height="200px"
-      />
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        // Hover near edge of small chart
-        const pieSector = page.locator(".recharts-pie-sector").first();
-        yield pieSector.hover();
-        yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
-        // Tooltip should be positioned within viewport
-        const tooltip = page.locator(tooltipSelector);
-        const boundingBox = yield tooltip.boundingBox();
-        (0, fixtures_1.expect)(boundingBox).toBeTruthy();
-        if (boundingBox) {
-            (0, fixtures_1.expect)(boundingBox.x).toBeGreaterThanOrEqual(0);
-            (0, fixtures_1.expect)(boundingBox.y).toBeGreaterThanOrEqual(0);
-        }
-    }));
-});

package/dist/scripts/src/components/Charts/utils/ChartProvider.js

@@ -1,65 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useChartContextValue = useChartContextValue;
-exports.useChart = useChart;
-exports.useLabelList = useLabelList;
-exports.useLegend = useLegend;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("react");
-const ChartContext = (0, react_2.createContext)({
-    dataKey: "",
-    nameKey: "",
-    dataKeys: [],
-    labelList: null,
-    setLabelList: () => { },
-    legend: null,
-    setLegend: () => { },
-});
-function useChartContextValue({ dataKey = "", dataKeys = [], nameKey = "", }) {
-    const [dKey] = (0, react_1.useState)(dataKey);
-    const [dKeys] = (0, react_1.useState)(dataKeys);
-    const [nKey] = (0, react_1.useState)(nameKey);
-    const [labelList, setLabelList] = (0, react_1.useState)(null);
-    const [legend, setLegend] = (0, react_1.useState)(null);
-    return {
-        dataKey: dKey,
-        nameKey: nKey,
-        dataKeys: dKeys,
-        labelList,
-        setLabelList,
-        legend,
-        setLegend,
-    };
-}
-function useChart() {
-    const context = (0, react_2.useContext)(ChartContext);
-    if (context === undefined) {
-        throw new Error("useChart must be used within a ChartProvider");
-    }
-    return context;
-}
-function useLabelList() {
-    const context = (0, react_2.useContext)(ChartContext);
-    if (context === undefined) {
-        throw new Error("LabelList must be used within a chart");
-    }
-    const { setLabelList } = context;
-    return {
-        setLabelList,
-    };
-}
-function useLegend() {
-    const context = (0, react_2.useContext)(ChartContext);
-    if (context === undefined) {
-        throw new Error("Legend must be used within a chart");
-    }
-    const { setLegend } = context;
-    return {
-        setLegend,
-    };
-}
-function ChartProvider({ value, children }) {
-    return (0, jsx_runtime_1.jsx)(ChartContext.Provider, { value: value, children: children });
-}
-exports.default = ChartProvider;