@kubit-ui-web/react-charts 1.11.0 → 1.11.2

package/dist/esm/components/zoomArea/utils/indexRounding.js

@@ -1,68 +1,8 @@
-/**
- * Index rounding utilities for consistent data filtering and accessibility labels.
- *
- * These utilities ensure that both data filtering (useZoomData) and accessibility labels
- * (generateAccessibilityLabels) use exactly the same rounding logic, preventing
- * inconsistencies between what users see and what screen readers announce.
- */
-/**
- * Rounds a fractional index to be used as a start index (inclusive lower bound).
- * Uses Math.floor() to include the current data point and everything after it.
- *
- * @param index - Continuous index (can be fractional)
- * @param maxIndex - Maximum valid index (usually data.length - 1)
- * @returns Rounded index clamped to valid bounds
- *
- * @example
- * ```typescript
- * roundStartIndex(1.3, 4); // Math.floor(1.3) = 1, clamped to [0,4] → 1
- * roundStartIndex(-0.5, 4); // Math.floor(-0.5) = -1, clamped to [0,4] → 0
- * ```
- */
-export const roundStartIndex = (index, maxIndex) => {
-    const rounded = Math.floor(index);
-    return Math.max(0, Math.min(maxIndex, rounded));
-};
-/**
- * Rounds a fractional index to be used as an end index (inclusive upper bound).
- * Uses Math.ceil() to include the current data point and everything before it.
- *
- * @param index - Continuous index (can be fractional)
- * @param maxIndex - Maximum valid index (usually data.length - 1)
- * @returns Rounded index clamped to valid bounds
- *
- * @example
- * ```typescript
- * roundEndIndex(2.7, 4); // Math.ceil(2.7) = 3, clamped to [0,4] → 3
- * roundEndIndex(5.2, 4); // Math.ceil(5.2) = 6, clamped to [0,4] → 4
- * ```
- */
-export const roundEndIndex = (index, maxIndex) => {
-    const rounded = Math.ceil(index);
-    return Math.max(0, Math.min(maxIndex, rounded));
-};
-/**
- * Converts a fractional range to integer indices using consistent rounding.
- * This is the core function that both data filtering and accessibility use.
- *
- * @param range - Zoom range with potentially fractional start/end values
- * @param dataLength - Length of the data array
- * @returns Object with rounded startIndex and endIndex
- *
- * @example
- * ```typescript
- * const indices = getRangeIndices({ start: 1.3, end: 3.7 }, 10);
- * // Returns: { startIndex: 1, endIndex: 4 }
- *
- * // This can be used for:
- * // 1. Data filtering: data.slice(startIndex, endIndex + 1)
- * // 2. Accessibility: data[startIndex][xKey] to data[endIndex][xKey]
- * ```
- */
-export const getRangeIndices = (range, dataLength) => {
-    const maxIndex = Math.max(0, dataLength - 1);
-    return {
-        endIndex: roundEndIndex(range.end, maxIndex),
-        startIndex: roundStartIndex(range.start, maxIndex),
-    };
+const roundStartIndex = (e, t) => Math.max(0, Math.min(t, Math.floor(e))), roundEndIndex = (e, t) => Math.max(0, Math.min(t, Math.ceil(e))), getRangeIndices = (n, r) => {
+	let i = Math.max(0, r - 1);
+	return {
+		endIndex: roundEndIndex(n.end, i),
+		startIndex: roundStartIndex(n.start, i)
+	};
 };
+export { getRangeIndices };

package/dist/esm/components/zoomArea/utils/interactionConfig.js

@@ -1,23 +1,11 @@
-/**
- * Default configuration for ZoomArea interactions
- */
-const DEFAULT_INTERACTION_CONFIG = {
-    /** Fast keyboard movement step (Shift + arrows) */
-    KEYBOARD_FAST_STEP: 2,
-    /** Default keyboard movement step (arrows without modifiers) */
-    KEYBOARD_STEP: 1,
-    /** Minimum distance between start and end handlers */
-    MIN_HANDLER_DISTANCE: 1,
+var DEFAULT_INTERACTION_CONFIG = {
+	KEYBOARD_FAST_STEP: 2,
+	KEYBOARD_STEP: 1,
+	MIN_HANDLER_DISTANCE: 1
 };
-/**
- * Utility function to get resolved interaction configuration.
- * Merges user-provided config with sensible defaults.
- *
- * @param config - Optional user configuration
- * @returns Complete interaction configuration with defaults applied
- */
-export const getInteractionConfig = (config) => ({
-    keyboardFastStep: config?.keyboardFastStep ?? DEFAULT_INTERACTION_CONFIG.KEYBOARD_FAST_STEP,
-    keyboardStep: config?.keyboardStep ?? DEFAULT_INTERACTION_CONFIG.KEYBOARD_STEP,
-    minHandlerDistance: config?.minHandlerDistance ?? DEFAULT_INTERACTION_CONFIG.MIN_HANDLER_DISTANCE,
+const getInteractionConfig = (e) => ({
+	keyboardFastStep: e?.keyboardFastStep ?? DEFAULT_INTERACTION_CONFIG.KEYBOARD_FAST_STEP,
+	keyboardStep: e?.keyboardStep ?? DEFAULT_INTERACTION_CONFIG.KEYBOARD_STEP,
+	minHandlerDistance: e?.minHandlerDistance ?? DEFAULT_INTERACTION_CONFIG.MIN_HANDLER_DISTANCE
 });
+export { getInteractionConfig };

package/dist/esm/components/zoomArea/utils/pathGeneration.js

@@ -1,112 +1,21 @@
-/**
- * Path generation utilities for ZoomArea SVG rendering
- */
-/**
- * Generates smooth curved path using simplified Bézier curves.
- *
- * This implementation is based on LineChart's curve algorithm but optimized for performance
- * in the ZoomArea context. Uses cubic Bézier curves with control points positioned at 30%
- * of the horizontal distance between consecutive points.
- *
- * @param points - Array of [x, y] coordinates representing the line points
- * @returns SVG path string with curved segments (e.g., "M 0 10 C 3 10, 7 20, 10 20")
- *
- * @example
- * ```typescript
- * const points: Array<[number, number]> = [[0, 10], [10, 20], [20, 15]];
- * const curvedPath = generateCurvedPath(points);
- * // Returns: "M 0 10 C 3 10, 7 20, 10 20 C 13 20, 17 15, 20 15"
- * ```
- */
-export const generateCurvedPath = (points) => {
-    if (points.length === 0) {
-        return '';
-    }
-    if (points.length === 1) {
-        return `M ${points[0][0]} ${points[0][1]}`;
-    }
-    const [firstPoint, ...remainingPoints] = points;
-    let path = `M ${firstPoint[0]} ${firstPoint[1]}`;
-    remainingPoints.forEach((point, i) => {
-        const start = i === 0 ? firstPoint : remainingPoints[i - 1];
-        const [x1, y1] = start;
-        const [x2, y2] = point;
-        // Control points calculation (same as LineChart but simplified factor)
-        const dx = (x2 - x1) * 0.3;
-        const controlPoint1 = [x1 + dx, y1];
-        const controlPoint2 = [x2 - dx, y2];
-        path += ` C ${controlPoint1[0]} ${controlPoint1[1]}, ${controlPoint2[0]} ${controlPoint2[1]}, ${x2} ${y2}`;
-    });
-    return path;
-};
-/**
- * Calculates path data for all lines with unified Y-scale, supporting both curved and straight lines.
- *
- * This function processes multiple line configurations and generates SVG path strings for each line.
- * All lines share the same Y-scale to maintain visual consistency when comparing different datasets.
- *
- * **Y-scaling behavior:** Uses padding to prevent lines from touching chart bounds, similar to LineChart.
- * The effective chart area is reduced by 10% (5% top + 5% bottom) to provide visual breathing room.
- *
- * @param data - Array of data points containing values for all lines
- * @param lines - Configuration for each line including styling and curve settings
- * @param width - Canvas width for scaling X coordinates
- * @param height - Canvas height for scaling Y coordinates
- * @returns Array of objects containing line and fill paths with their configurations
- *
- * @example
- * ```typescript
- * const result = calculateLinesPathData(
- *   [{ month: 'Jan', sales: 100, profit: 20 }, { month: 'Feb', sales: 150, profit: 30 }],
- *   [
- *     { yKey: 'sales', stroke: '#blue', curved: true },
- *     { yKey: 'profit', stroke: '#red', curved: false }
- *   ],
- *   400, // width
- *   100  // height
- * );
- * // Returns: [{ linePath: "M 0 80 C...", fillPath: "", config: {...} }, ...]
- * ```
- */
-export const calculateLinesPathData = (data, lines, width, height) => {
-    if (data.length === 0 || lines.length === 0) {
-        return [];
-    }
-    // Add padding to prevent lines from touching chart bounds (similar to LineChart behavior)
-    const yPaddingPercent = 0.05; // 5% padding top and bottom
-    const yPadding = height * yPaddingPercent;
-    const effectiveHeight = height - 2 * yPadding;
-    // Get min/max values for scaling across all lines for consistent Y scale
-    const allYValues = lines.flatMap(line => data.map(d => Number(d[line.yKey])));
-    const minY = Math.min(...allYValues);
-    const maxY = Math.max(...allYValues);
-    const yRange = maxY - minY || 1;
-    return lines.map(lineConfig => {
-        // Create path points for this specific line
-        const pathPoints = data.map((d, index) => {
-            const x = (index / Math.max(1, data.length - 1)) * width;
-            // Apply padding and scale within the effective height
-            const y = yPadding +
-                effectiveHeight -
-                ((Number(d[lineConfig.yKey]) - minY) / yRange) * effectiveHeight;
-            return [x, y];
-        });
-        // Generate line path - curved or straight based on config
-        const linePath = lineConfig.curved
-            ? generateCurvedPath(pathPoints)
-            : `M ${pathPoints.map(([x, y]) => `${x},${y}`).join(' L ')}`;
-        // Generate fill path if needed
-        let fillPath = '';
-        if (lineConfig.fill) {
-            // For fill, extend to the bottom of the chart (full height)
-            fillPath = lineConfig.curved
-                ? `${generateCurvedPath(pathPoints)} L ${width} ${height} L 0 ${height} Z`
-                : `${linePath} L ${width},${height} L 0,${height} Z`;
-        }
-        return {
-            config: lineConfig,
-            fillPath,
-            linePath,
-        };
-    });
+const generateCurvedPath = (e) => {
+	if (e.length === 0) return "";
+	if (e.length === 1) return `M ${e[0][0]} ${e[0][1]}`;
+	let [t, ...n] = e, r = `M ${t[0]} ${t[1]}`;
+	return n.forEach((e, i) => {
+		let [a, o] = i === 0 ? t : n[i - 1], [s, c] = e, l = (s - a) * .3, u = [a + l, o], d = [s - l, c];
+		r += ` C ${u[0]} ${u[1]}, ${d[0]} ${d[1]}, ${s} ${c}`;
+	}), r;
+}, calculateLinesPathData = (t, n, r, i) => {
+	if (t.length === 0 || n.length === 0) return [];
+	let a = i * .05, o = i - 2 * a, s = n.flatMap((e) => t.map((t) => Number(t[e.yKey]))), c = Math.min(...s), l = Math.max(...s) - c || 1;
+	return n.map((n) => {
+		let s = t.map((e, i) => [i / Math.max(1, t.length - 1) * r, a + o - (Number(e[n.yKey]) - c) / l * o]), u = n.curved ? generateCurvedPath(s) : `M ${s.map(([e, t]) => `${e},${t}`).join(" L ")}`, d = "";
+		return n.fill && (d = n.curved ? `${generateCurvedPath(s)} L ${r} ${i} L 0 ${i} Z` : `${u} L ${r},${i} L 0,${i} Z`), {
+			config: n,
+			fillPath: d,
+			linePath: u
+		};
+	});
 };
+export { calculateLinesPathData, generateCurvedPath };

package/dist/esm/components/zoomArea/utils/rangeAndPositions.js

@@ -1,75 +1,20 @@
-/**
- * Range operations and position calculation utilities for ZoomArea
- */
-/**
- * Calculates handler positions based on current range
- *
- * @param currentRange - The current zoom range
- * @param dataLength - Total length of the dataset
- * @param width - Canvas width for scaling
- * @returns Object with startX and endX positions
- */
-export const calculateHandlerPositions = (currentRange, dataLength, width) => {
-    const startX = (currentRange.start / Math.max(1, dataLength - 1)) * width;
-    const endX = (currentRange.end / Math.max(1, dataLength - 1)) * width;
-    return { endX, startX };
-};
-/**
- * Converts mouse position to continuous data index
- *
- * @param mouseX - Mouse X coordinate relative to the chart
- * @param width - Canvas width
- * @param dataLength - Total length of the dataset
- * @returns Data index
- */
-export const mouseToDataIndex = (mouseX, width, dataLength) => {
-    const relativeX = Math.max(0, Math.min(width, mouseX));
-    const normalizedPosition = relativeX / width;
-    return Math.round(normalizedPosition * (dataLength - 1));
-};
-/**
- * Clamps a range to valid bounds
- *
- * @param range - The range to clamp
- * @param dataLength - Total length of the dataset
- * @param minDistance - Minimum distance between start and end (default: 0.1)
- * @returns Clamped range within valid bounds
- */
-export const clampRange = (range, dataLength, minDistance = 0.1) => {
-    const clampedStart = Math.max(0, Math.min(range.start, dataLength - 1 - minDistance));
-    const clampedEnd = Math.min(dataLength - 1, Math.max(range.end, clampedStart + minDistance));
-    return {
-        end: clampedEnd,
-        start: clampedStart,
-    };
-};
-/**
- * Creates a default range for the given data length
- *
- * @param dataLength - Total length of the dataset
- * @returns Default range covering the full dataset
- */
-export const createDefaultRange = (dataLength) => ({
-    end: Math.max(0, dataLength - 1),
-    start: 0,
-});
-/**
- * Determines if the current range covers the full dataset.
- * According to design specs: overlay is "only visible when a range is defined".
- * A range is considered "defined" when it doesn't cover the complete dataset.
- *
- * @param range - The current zoom range
- * @param dataLength - Total length of the dataset
- * @returns true if the range covers the full dataset (no selection defined)
- *
- * @example
- * ```typescript
- * // Dataset with 10 elements [0-9]
- * isFullRange({ start: 0, end: 9 }, 10); // true - covers full dataset
- * isFullRange({ start: 1, end: 8 }, 10); // false - partial selection
- * isFullRange({ start: 0, end: 7 }, 10); // false - partial selection
- * ```
- */
-export const isFullRange = (range, dataLength) => {
-    return range.start === 0 && range.end === dataLength - 1;
-};
+const calculateHandlerPositions = (e, t, n) => {
+	let r = e.start / Math.max(1, t - 1) * n;
+	return {
+		endX: e.end / Math.max(1, t - 1) * n,
+		startX: r
+	};
+}, mouseToDataIndex = (e, t, n) => {
+	let r = Math.max(0, Math.min(t, e)) / t;
+	return Math.round(r * (n - 1));
+}, clampRange = (e, t, n = .1) => {
+	let r = Math.max(0, Math.min(e.start, t - 1 - n));
+	return {
+		end: Math.min(t - 1, Math.max(e.end, r + n)),
+		start: r
+	};
+}, createDefaultRange = (e) => ({
+	end: Math.max(0, e - 1),
+	start: 0
+}), isFullRange = (e, t) => e.start === 0 && e.end === t - 1;
+export { calculateHandlerPositions, clampRange, createDefaultRange, isFullRange, mouseToDataIndex };

package/dist/esm/components/zoomArea/utils/selectionConfig.js

@@ -1,29 +1,15 @@
-/**
- * Default configuration for ZoomArea selection area
- */
-const DEFAULT_SELECTION_CONFIG = {
-    /** Selection area background color */
-    FILL: '#0078d4',
-    /** Selection area fill opacity */
-    FILL_OPACITY: 0.5,
-    /** Hide overlay when full range is selected */
-    HIDE_OVERLAY_ON_FULL_RANGE: true,
-    /** Selection area border color */
-    STROKE: '#0078d4',
-    /** Selection area border width */
-    STROKE_WIDTH: 0,
+var DEFAULT_SELECTION_CONFIG = {
+	FILL: "#0078d4",
+	FILL_OPACITY: .5,
+	HIDE_OVERLAY_ON_FULL_RANGE: !0,
+	STROKE: "#0078d4",
+	STROKE_WIDTH: 0
 };
-/**
- * Utility function to get resolved selection configuration.
- * Merges user-provided config with sensible defaults.
- *
- * @param config - Optional user configuration
- * @returns Complete selection configuration with defaults applied
- */
-export const getSelectionConfig = (config) => ({
-    fill: config?.fill ?? DEFAULT_SELECTION_CONFIG.FILL,
-    fillOpacity: config?.fillOpacity ?? DEFAULT_SELECTION_CONFIG.FILL_OPACITY,
-    hideOverlayOnFullRange: config?.hideOverlayOnFullRange ?? DEFAULT_SELECTION_CONFIG.HIDE_OVERLAY_ON_FULL_RANGE,
-    stroke: config?.stroke ?? DEFAULT_SELECTION_CONFIG.STROKE,
-    strokeWidth: config?.strokeWidth ?? DEFAULT_SELECTION_CONFIG.STROKE_WIDTH,
+const getSelectionConfig = (e) => ({
+	fill: e?.fill ?? DEFAULT_SELECTION_CONFIG.FILL,
+	fillOpacity: e?.fillOpacity ?? DEFAULT_SELECTION_CONFIG.FILL_OPACITY,
+	hideOverlayOnFullRange: e?.hideOverlayOnFullRange ?? DEFAULT_SELECTION_CONFIG.HIDE_OVERLAY_ON_FULL_RANGE,
+	stroke: e?.stroke ?? DEFAULT_SELECTION_CONFIG.STROKE,
+	strokeWidth: e?.strokeWidth ?? DEFAULT_SELECTION_CONFIG.STROKE_WIDTH
 });
+export { getSelectionConfig };

package/dist/esm/components/zoomArea/zoomArea.js

@@ -1,80 +1,131 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useRef } from 'react';
-import { SvgContainer } from '../../components/svgContainer/svgContainer';
-import { useResponsiveCanvas } from '../../hooks/useResponsiveCanvas/useResponsiveCanvas';
-import { getDataFingerprint } from '../../utils/getDataFingerprint/getDataFingerprint';
-import { FocusRing } from '../focusRing/focusRing';
-import { LineRenderer } from './components/LineRenderer';
-import { SelectionArea } from './components/SelectionArea';
-import { ZoomHandler } from './components/ZoomHandler';
-import { useDragInteraction } from './hooks/useDragInteraction';
-import { useKeyboardNavigation } from './hooks/useKeyboardNavigation';
-import { useZoomAreaFocus } from './hooks/useZoomAreaFocus';
-import { useZoomData } from './hooks/useZoomData';
-import { generateAccessibilityLabels } from './utils/accessibilityLabels';
-import { getInteractionConfig } from './utils/interactionConfig';
-import { calculateLinesPathData } from './utils/pathGeneration';
-import { calculateHandlerPositions } from './utils/rangeAndPositions';
-import { getSelectionConfig } from './utils/selectionConfig';
-import { ZoomAreaElements } from './zoomArea.type';
-/**
- * `ZoomArea` component that renders a scaled chart with draggable zoom handlers for interactive data filtering.
- *
- * It includes full keyboard navigation support, accessibility features, and customizable appearance.
- *
- * @param props - See {@link ZoomAreaProps} for detailed documentation of all available properties.
- *
- * @returns A React functional component that renders an SVG-based zoom area with interactive handlers and accessibility features.
- */
-export const ZoomArea = ({ ariaHidden, ariaLabel, backgroundColor, canvasConfig, // Optional - auto-calculated based on width/height if not provided
-caption, classNames, data, focusConfig, handlerConfig, height = '40px', // 2.5rem, defined by size_400 token in Figma
-initialRange, interactionConfig, lines, onDataChange, role, screenReaderTextConfig, selectionConfig, width = '100%', xKey, ...eventHandlers }) => {
-    const dataTestId = 'zoom-area';
-    // Resolve interaction config with defaults
-    const resolvedInteractionConfig = getInteractionConfig(interactionConfig);
-    // Resolve selection config with defaults
-    const resolvedSelectionConfig = getSelectionConfig(selectionConfig);
-    // Hook for core data filtering functionality
-    const { currentRange, handleRangeChange } = useZoomData({
-        data,
-        initialRange,
-        onDataChange,
-    });
-    // Hook for responsive dimensions of the component when set as percentage
-    const { parsedCanvas, viewBox } = useResponsiveCanvas({
-        canvasConfig,
-        dataTestId,
-        height,
-        width,
-    });
-    // Create a fingerprint of the data/lines to avoid unnecessary updates
-    const dataFingerprint = getDataFingerprint(data);
-    const linesFingerprint = JSON.stringify(lines);
-    // Create ref for SelectionArea to enable separate focus ring rendering
-    const selectionAreaRef = useRef(null);
-    const accessibilityLabels = generateAccessibilityLabels(data, xKey, currentRange, screenReaderTextConfig);
-    // Memoize expensive line calculations
-    const linesData = useMemo(() => {
-        return calculateLinesPathData(data, lines, parsedCanvas.width, parsedCanvas.height);
-    }, [dataFingerprint, linesFingerprint, parsedCanvas.width, parsedCanvas.height]);
-    // Memoize handler positions calculation
-    const { endX, startX } = useMemo(() => calculateHandlerPositions(currentRange, data.length, parsedCanvas.width), [currentRange, dataFingerprint, parsedCanvas.width]);
-    // Interaction hooks
-    const { handleBlur, handleFocus, isFocused } = useZoomAreaFocus();
-    const { handleKeyDown } = useKeyboardNavigation({
-        currentRange,
-        dataLength: data.length,
-        interactionConfig: resolvedInteractionConfig,
-        onRangeChange: handleRangeChange,
-    });
-    const { groupRef, handleMouseDown, handleTouchStart } = useDragInteraction({
-        currentRange,
-        dataLength: data.length,
-        interactionConfig: resolvedInteractionConfig,
-        onRangeChange: handleRangeChange,
-        width: parsedCanvas.width,
-    });
-    return (_jsxs(SvgContainer, { ref: groupRef, ariaHidden: ariaHidden, ariaLabel: ariaLabel, backgroundColor: backgroundColor, caption: caption, className: classNames, "data-testid": dataTestId, height: height, 
-        // set overflow visible so handlers and focus rings are visible always
-        overflow: "visible", role: role, viewBox: viewBox, width: width, ...eventHandlers, children: [_jsx(LineRenderer, { linesData: linesData }), _jsx(SelectionArea, { ref: selectionAreaRef, currentRange: currentRange, dataLength: data.length, dataTestId: `${dataTestId}-selection-area`, endX: endX, height: parsedCanvas.height, screenReaderText: accessibilityLabels.selectionArea, selectionConfig: resolvedSelectionConfig, startX: startX, onBlur: handleBlur, onFocus: handleFocus(ZoomAreaElements.SELECTION_AREA), onKeyDown: handleKeyDown(ZoomAreaElements.SELECTION_AREA), onMouseDown: handleMouseDown(ZoomAreaElements.SELECTION_AREA), onTouchStart: handleTouchStart(ZoomAreaElements.SELECTION_AREA) }), _jsx(ZoomHandler, { dataTestId: `${dataTestId}-start-handler`, focusConfig: focusConfig, handlerConfig: handlerConfig, height: parsedCanvas.height, isFocused: isFocused(ZoomAreaElements.START_HANDLER), max: currentRange.end - resolvedInteractionConfig.minHandlerDistance, min: 0, screenReaderText: accessibilityLabels.startHandler, type: ZoomAreaElements.START_HANDLER, value: currentRange.start, x: startX, onBlur: handleBlur, onFocus: handleFocus(ZoomAreaElements.START_HANDLER), onKeyDown: handleKeyDown(ZoomAreaElements.START_HANDLER), onMouseDown: handleMouseDown(ZoomAreaElements.START_HANDLER), onTouchStart: handleTouchStart(ZoomAreaElements.START_HANDLER) }), _jsx(ZoomHandler, { dataTestId: `${dataTestId}-end-handler`, focusConfig: focusConfig, handlerConfig: handlerConfig, height: parsedCanvas.height, isFocused: isFocused(ZoomAreaElements.END_HANDLER), max: data.length - 1, min: currentRange.start + resolvedInteractionConfig.minHandlerDistance, screenReaderText: accessibilityLabels.endHandler, type: ZoomAreaElements.END_HANDLER, value: currentRange.end, x: endX, onBlur: handleBlur, onFocus: handleFocus(ZoomAreaElements.END_HANDLER), onKeyDown: handleKeyDown(ZoomAreaElements.END_HANDLER), onMouseDown: handleMouseDown(ZoomAreaElements.END_HANDLER), onTouchStart: handleTouchStart(ZoomAreaElements.END_HANDLER) }), _jsx(FocusRing, { dataTestId: "selection-area-focus", focusConfig: { ...focusConfig, variant: 'bounding-box' }, isFocused: isFocused(ZoomAreaElements.SELECTION_AREA), targetRef: selectionAreaRef })] }));
+import { SvgContainer } from "../svgContainer/svgContainer.js";
+import { useResponsiveCanvas } from "../../hooks/useResponsiveCanvas/useResponsiveCanvas.js";
+import { getDataFingerprint } from "../../utils/getDataFingerprint/getDataFingerprint.js";
+import { FocusRing } from "../focusRing/focusRing2.js";
+import { LineRenderer } from "./components/LineRenderer.js";
+import { calculateHandlerPositions } from "./utils/rangeAndPositions.js";
+import { SelectionArea } from "./components/SelectionArea.js";
+import { ZoomHandler } from "./components/ZoomHandler.js";
+import { ZoomAreaElements } from "./zoomArea.type.js";
+import { useDragInteraction } from "./hooks/useDragInteraction.js";
+import { useKeyboardNavigation } from "./hooks/useKeyboardNavigation.js";
+import { useZoomAreaFocus } from "./hooks/useZoomAreaFocus.js";
+import { useZoomData } from "./hooks/useZoomData.js";
+import { getInteractionConfig } from "./utils/interactionConfig.js";
+import { calculateLinesPathData } from "./utils/pathGeneration.js";
+import { generateAccessibilityLabels } from "./utils/accessibilityLabels.js";
+import { getSelectionConfig } from "./utils/selectionConfig.js";
+import { useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const ZoomArea = ({ ariaHidden: e, ariaLabel: t, backgroundColor: n, canvasConfig: r, caption: i, classNames: a, data: o, focusConfig: s, handlerConfig: c, height: l = "40px", initialRange: u, interactionConfig: d, lines: f, onDataChange: p, role: m, screenReaderTextConfig: h, selectionConfig: g, width: _ = "100%", xKey: v, ...y }) => {
+	let b = "zoom-area", x = getInteractionConfig(d), S = getSelectionConfig(g), { currentRange: C, handleRangeChange: w } = useZoomData({
+		data: o,
+		initialRange: u,
+		onDataChange: p
+	}), { parsedCanvas: T, viewBox: E } = useResponsiveCanvas({
+		canvasConfig: r,
+		dataTestId: b,
+		height: l,
+		width: _
+	}), D = getDataFingerprint(o), O = JSON.stringify(f), k = useRef(null), A = generateAccessibilityLabels(o, v, C, h), j = useMemo(() => calculateLinesPathData(o, f, T.width, T.height), [
+		D,
+		O,
+		T.width,
+		T.height
+	]), { endX: M, startX: N } = useMemo(() => calculateHandlerPositions(C, o.length, T.width), [
+		C,
+		D,
+		T.width
+	]), { handleBlur: P, handleFocus: F, isFocused: I } = useZoomAreaFocus(), { handleKeyDown: L } = useKeyboardNavigation({
+		currentRange: C,
+		dataLength: o.length,
+		interactionConfig: x,
+		onRangeChange: w
+	}), { groupRef: R, handleMouseDown: z, handleTouchStart: B } = useDragInteraction({
+		currentRange: C,
+		dataLength: o.length,
+		interactionConfig: x,
+		onRangeChange: w,
+		width: T.width
+	});
+	return /* @__PURE__ */ jsxs(SvgContainer, {
+		ref: R,
+		ariaHidden: e,
+		ariaLabel: t,
+		backgroundColor: n,
+		caption: i,
+		className: a,
+		"data-testid": b,
+		height: l,
+		overflow: "visible",
+		role: m,
+		viewBox: E,
+		width: _,
+		...y,
+		children: [
+			/* @__PURE__ */ jsx(LineRenderer, { linesData: j }),
+			/* @__PURE__ */ jsx(SelectionArea, {
+				ref: k,
+				currentRange: C,
+				dataLength: o.length,
+				dataTestId: `${b}-selection-area`,
+				endX: M,
+				height: T.height,
+				screenReaderText: A.selectionArea,
+				selectionConfig: S,
+				startX: N,
+				onBlur: P,
+				onFocus: F(ZoomAreaElements.SELECTION_AREA),
+				onKeyDown: L(ZoomAreaElements.SELECTION_AREA),
+				onMouseDown: z(ZoomAreaElements.SELECTION_AREA),
+				onTouchStart: B(ZoomAreaElements.SELECTION_AREA)
+			}),
+			/* @__PURE__ */ jsx(ZoomHandler, {
+				dataTestId: `${b}-start-handler`,
+				focusConfig: s,
+				handlerConfig: c,
+				height: T.height,
+				isFocused: I(ZoomAreaElements.START_HANDLER),
+				max: C.end - x.minHandlerDistance,
+				min: 0,
+				screenReaderText: A.startHandler,
+				type: ZoomAreaElements.START_HANDLER,
+				value: C.start,
+				x: N,
+				onBlur: P,
+				onFocus: F(ZoomAreaElements.START_HANDLER),
+				onKeyDown: L(ZoomAreaElements.START_HANDLER),
+				onMouseDown: z(ZoomAreaElements.START_HANDLER),
+				onTouchStart: B(ZoomAreaElements.START_HANDLER)
+			}),
+			/* @__PURE__ */ jsx(ZoomHandler, {
+				dataTestId: `${b}-end-handler`,
+				focusConfig: s,
+				handlerConfig: c,
+				height: T.height,
+				isFocused: I(ZoomAreaElements.END_HANDLER),
+				max: o.length - 1,
+				min: C.start + x.minHandlerDistance,
+				screenReaderText: A.endHandler,
+				type: ZoomAreaElements.END_HANDLER,
+				value: C.end,
+				x: M,
+				onBlur: P,
+				onFocus: F(ZoomAreaElements.END_HANDLER),
+				onKeyDown: L(ZoomAreaElements.END_HANDLER),
+				onMouseDown: z(ZoomAreaElements.END_HANDLER),
+				onTouchStart: B(ZoomAreaElements.END_HANDLER)
+			}),
+			/* @__PURE__ */ jsx(FocusRing, {
+				dataTestId: "selection-area-focus",
+				focusConfig: {
+					...s,
+					variant: "bounding-box"
+				},
+				isFocused: I(ZoomAreaElements.SELECTION_AREA),
+				targetRef: k
+			})
+		]
+	});
 };
+export { ZoomArea };

package/dist/esm/components/zoomArea/zoomArea.type.js

@@ -1,8 +1,6 @@
-/**
- * Target enumeration for zoom area elements
- */
-export const ZoomAreaElements = {
-    END_HANDLER: 'END_HANDLER',
-    SELECTION_AREA: 'SELECTION_AREA',
-    START_HANDLER: 'START_HANDLER',
+const ZoomAreaElements = {
+	END_HANDLER: "END_HANDLER",
+	SELECTION_AREA: "SELECTION_AREA",
+	START_HANDLER: "START_HANDLER"
 };
+export { ZoomAreaElements };