@kubit-ui-web/react-charts 1.0.0 → 1.1.0

package/dist/cjs/components/zoomArea/components/ZoomHandler.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ZoomHandler = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const calculateFocusOutline_1 = require("../../../utils/calculateFocusOutline/calculateFocusOutline");
-const HandlerIcon_1 = require("./HandlerIcon");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { calculateFocusOutline } from '../../../utils/calculateFocusOutline/calculateFocusOutline';
+import { HandlerIcon } from './HandlerIcon';
 /**
  * Default colors for zoom handlers
  */
@@ -42,11 +39,11 @@ const getHandlerStyles = (handlerConfig) => ({
 /**
  * Individual zoom handler with line, circle, and icon
  */
-const ZoomHandler = ({ dataTestId, focusConfig, handlerConfig, height, isFocused, max, min, onBlur, onFocus, onKeyDown, onMouseDown, onTouchStart, screenReaderText, x, }) => {
+export const ZoomHandler = ({ dataTestId, focusConfig, handlerConfig, height, isFocused, max, min, onBlur, onFocus, onKeyDown, onMouseDown, onTouchStart, screenReaderText, x, }) => {
     const centerY = height / 2;
     const styles = getHandlerStyles(handlerConfig);
     // Calculate focus ring dimensions using the new util
-    const focusOutline = (0, calculateFocusOutline_1.calculateFocusOutline)({
+    const focusOutline = calculateFocusOutline({
         elementHeight: styles.radius * 2,
         elementPosition: { x, y: centerY },
         elementStrokeWidth: typeof styles.strokeWidth === 'number'
@@ -58,6 +55,5 @@ const ZoomHandler = ({ dataTestId, focusConfig, handlerConfig, height, isFocused
         innerStrokeWidth: focusConfig.innerStrokeWidth,
         outlineStrokeWidth: focusConfig.outlineStrokeWidth,
     });
-    return ((0, jsx_runtime_1.jsxs)("g", { "data-testid": `${dataTestId}-group`, children: [(0, jsx_runtime_1.jsx)("line", { pointerEvents: "none", stroke: styles.verticalLineStroke, strokeWidth: styles.verticalLineStrokeWidth, x1: x, x2: x, y1: 0, y2: height }), (0, jsx_runtime_1.jsx)("circle", { "aria-label": screenReaderText, "aria-valuemax": max, "aria-valuemin": min, "aria-valuetext": screenReaderText, cursor: "ew-resize", cx: x, cy: centerY, "data-testid": dataTestId, fill: styles.fill, r: styles.radius, role: "slider", stroke: styles.stroke, strokeWidth: styles.strokeWidth, style: { outline: 'none' }, tabIndex: 0, onBlur: onBlur, onFocus: onFocus, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onTouchStart: onTouchStart }), (0, jsx_runtime_1.jsx)(HandlerIcon_1.HandlerIcon, { fill: styles.iconColor, x: x, y: centerY }), isFocused && focusOutline.type === 'circle' && ((0, jsx_runtime_1.jsxs)("g", { pointerEvents: "none", children: [(0, jsx_runtime_1.jsx)("circle", { cx: focusOutline.outer.cx, cy: focusOutline.outer.cy, fill: "none", r: focusOutline.outer.r, stroke: focusConfig.outlineColor, strokeWidth: focusConfig.outlineStrokeWidth }), (0, jsx_runtime_1.jsx)("circle", { cx: focusOutline.inner.cx, cy: focusOutline.inner.cy, fill: "none", r: focusOutline.inner.r, stroke: focusConfig.innerColor, strokeWidth: focusConfig.innerStrokeWidth })] }))] }));
+    return (_jsxs("g", { "data-testid": `${dataTestId}-group`, children: [_jsx("line", { pointerEvents: "none", stroke: styles.verticalLineStroke, strokeWidth: styles.verticalLineStrokeWidth, x1: x, x2: x, y1: 0, y2: height }), _jsx("circle", { "aria-label": screenReaderText, "aria-valuemax": max, "aria-valuemin": min, "aria-valuetext": screenReaderText, cursor: "ew-resize", cx: x, cy: centerY, "data-testid": dataTestId, fill: styles.fill, r: styles.radius, role: "slider", stroke: styles.stroke, strokeWidth: styles.strokeWidth, style: { outline: 'none' }, tabIndex: 0, onBlur: onBlur, onFocus: onFocus, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onTouchStart: onTouchStart }), _jsx(HandlerIcon, { fill: styles.iconColor, x: x, y: centerY }), isFocused && focusOutline.type === 'circle' && (_jsxs("g", { pointerEvents: "none", children: [_jsx("circle", { cx: focusOutline.outer.cx, cy: focusOutline.outer.cy, fill: "none", r: focusOutline.outer.r, stroke: focusConfig.outlineColor, strokeWidth: focusConfig.outlineStrokeWidth }), _jsx("circle", { cx: focusOutline.inner.cx, cy: focusOutline.inner.cy, fill: "none", r: focusOutline.inner.r, stroke: focusConfig.innerColor, strokeWidth: focusConfig.innerStrokeWidth })] }))] }));
 };
-exports.ZoomHandler = ZoomHandler;

package/dist/cjs/components/zoomArea/components/index.js

@@ -1,12 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ZoomHandler = exports.SelectionAreaFocusRing = exports.SelectionArea = exports.LineRenderer = exports.HandlerIcon = void 0;
-var HandlerIcon_1 = require("./HandlerIcon");
-Object.defineProperty(exports, "HandlerIcon", { enumerable: true, get: function () { return HandlerIcon_1.HandlerIcon; } });
-var LineRenderer_1 = require("./LineRenderer");
-Object.defineProperty(exports, "LineRenderer", { enumerable: true, get: function () { return LineRenderer_1.LineRenderer; } });
-var SelectionArea_1 = require("./SelectionArea");
-Object.defineProperty(exports, "SelectionArea", { enumerable: true, get: function () { return SelectionArea_1.SelectionArea; } });
-Object.defineProperty(exports, "SelectionAreaFocusRing", { enumerable: true, get: function () { return SelectionArea_1.SelectionAreaFocusRing; } });
-var ZoomHandler_1 = require("./ZoomHandler");
-Object.defineProperty(exports, "ZoomHandler", { enumerable: true, get: function () { return ZoomHandler_1.ZoomHandler; } });
+export { HandlerIcon } from './HandlerIcon';
+export { LineRenderer } from './LineRenderer';
+export { SelectionArea, SelectionAreaFocusRing } from './SelectionArea';
+export { ZoomHandler } from './ZoomHandler';

package/dist/cjs/components/zoomArea/hooks/index.js

@@ -1,13 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useZoomData = exports.useZoomAreaFocus = exports.useResponsiveCanvas = exports.useKeyboardNavigation = exports.useDragInteraction = void 0;
-var useDragInteraction_1 = require("./useDragInteraction");
-Object.defineProperty(exports, "useDragInteraction", { enumerable: true, get: function () { return useDragInteraction_1.useDragInteraction; } });
-var useKeyboardNavigation_1 = require("./useKeyboardNavigation");
-Object.defineProperty(exports, "useKeyboardNavigation", { enumerable: true, get: function () { return useKeyboardNavigation_1.useKeyboardNavigation; } });
-var useResponsiveCanvas_1 = require("./useResponsiveCanvas");
-Object.defineProperty(exports, "useResponsiveCanvas", { enumerable: true, get: function () { return useResponsiveCanvas_1.useResponsiveCanvas; } });
-var useZoomAreaFocus_1 = require("./useZoomAreaFocus");
-Object.defineProperty(exports, "useZoomAreaFocus", { enumerable: true, get: function () { return useZoomAreaFocus_1.useZoomAreaFocus; } });
-var useZoomData_1 = require("./useZoomData");
-Object.defineProperty(exports, "useZoomData", { enumerable: true, get: function () { return useZoomData_1.useZoomData; } });
+export { useDragInteraction } from './useDragInteraction';
+export { useKeyboardNavigation } from './useKeyboardNavigation';
+export { useResponsiveCanvas } from './useResponsiveCanvas';
+export { useZoomAreaFocus } from './useZoomAreaFocus';
+export { useZoomData } from './useZoomData';

package/dist/cjs/components/zoomArea/hooks/useDragInteraction.js

@@ -1,21 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDragInteraction = void 0;
-const react_1 = require("react");
-const rangeAndPositions_1 = require("../utils/rangeAndPositions");
-const zoomArea_type_1 = require("../zoomArea.type");
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { clampRange, mouseToDataIndex } from '../utils/rangeAndPositions';
+import { ZoomAreaElements } from '../zoomArea.type';
 /**
  * Calculate new range based on drag type and pointer position
  */
 const calculateNewRange = (dragType, currentRange, dataIndex, dataLength, interactionConfig) => {
     const newRange = { ...currentRange };
-    if (dragType === zoomArea_type_1.ZoomAreaElements.START_HANDLER) {
+    if (dragType === ZoomAreaElements.START_HANDLER) {
         newRange.start = Math.max(0, Math.min(dataIndex, currentRange.end - interactionConfig.minHandlerDistance));
     }
-    else if (dragType === zoomArea_type_1.ZoomAreaElements.END_HANDLER) {
+    else if (dragType === ZoomAreaElements.END_HANDLER) {
         newRange.end = Math.min(dataLength - 1, Math.max(dataIndex, currentRange.start + interactionConfig.minHandlerDistance));
     }
-    else if (dragType === zoomArea_type_1.ZoomAreaElements.SELECTION_AREA) {
+    else if (dragType === ZoomAreaElements.SELECTION_AREA) {
         // Moving entire selection
         const selectionWidth = currentRange.end - currentRange.start;
         const newStart = Math.max(0, Math.min(dataLength - 1 - selectionWidth, dataIndex - selectionWidth / 2));
@@ -34,22 +31,22 @@ const calculateNewRange = (dragType, currentRange, dataIndex, dataLength, intera
  * @param params - Configuration parameters for drag functionality
  * @returns Object with drag handlers and state
  */
-const useDragInteraction = (params) => {
+export const useDragInteraction = (params) => {
     const { currentRange, dataLength, interactionConfig, onRangeChange, width } = params;
-    const groupRef = (0, react_1.useRef)(null);
-    const [isDragging, setIsDragging] = (0, react_1.useState)(null);
-    const handleMouseDown = (0, react_1.useCallback)((target) => {
+    const groupRef = useRef(null);
+    const [isDragging, setIsDragging] = useState(null);
+    const handleMouseDown = useCallback((target) => {
         return () => {
             setIsDragging(target);
         };
     }, []);
-    const handleTouchStart = (0, react_1.useCallback)((target) => {
+    const handleTouchStart = useCallback((target) => {
         return () => {
             setIsDragging(target);
         };
     }, []);
     // Common logic for handling pointer movement (mouse or touch)
-    const handlePointerMove = (0, react_1.useCallback)((clientX) => {
+    const handlePointerMove = useCallback((clientX) => {
         if (!isDragging || !groupRef.current) {
             return;
         }
@@ -62,15 +59,15 @@ const useDragInteraction = (params) => {
         const rect = svgElement.getBoundingClientRect();
         const pointerX = clientX - rect.left;
         // Convert pointer X to data index (0 to dataLength-1)
-        const dataIndex = (0, rangeAndPositions_1.mouseToDataIndex)(pointerX, width, dataLength);
+        const dataIndex = mouseToDataIndex(pointerX, width, dataLength);
         const newRange = calculateNewRange(isDragging, currentRange, dataIndex, dataLength, interactionConfig);
-        const clampedRange = (0, rangeAndPositions_1.clampRange)(newRange, dataLength, interactionConfig.minHandlerDistance);
+        const clampedRange = clampRange(newRange, dataLength, interactionConfig.minHandlerDistance);
         onRangeChange(clampedRange);
     }, [isDragging, width, dataLength, currentRange, onRangeChange, interactionConfig]);
-    const handleMouseMove = (0, react_1.useCallback)((event) => {
+    const handleMouseMove = useCallback((event) => {
         handlePointerMove(event.clientX);
     }, [handlePointerMove]);
-    const handleTouchMove = (0, react_1.useCallback)((event) => {
+    const handleTouchMove = useCallback((event) => {
         if (event.touches.length === 0) {
             return;
         }
@@ -78,14 +75,14 @@ const useDragInteraction = (params) => {
         event.preventDefault();
         handlePointerMove(event.touches[0].clientX);
     }, [handlePointerMove]);
-    const handleMouseUp = (0, react_1.useCallback)(() => {
+    const handleMouseUp = useCallback(() => {
         setIsDragging(null);
     }, []);
-    const handleTouchEnd = (0, react_1.useCallback)(() => {
+    const handleTouchEnd = useCallback(() => {
         setIsDragging(null);
     }, []);
     // Set up global mouse and touch events when dragging
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (isDragging) {
             // Mouse events
             document.addEventListener('mousemove', handleMouseMove);
@@ -111,4 +108,3 @@ const useDragInteraction = (params) => {
         isDragging,
     };
 };
-exports.useDragInteraction = useDragInteraction;

package/dist/cjs/components/zoomArea/hooks/useKeyboardNavigation.js

@@ -1,21 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useKeyboardNavigation = void 0;
-const react_1 = require("react");
-const rangeAndPositions_1 = require("../utils/rangeAndPositions");
-const zoomArea_type_1 = require("../zoomArea.type");
+import { useCallback } from 'react';
+import { clampRange } from '../utils/rangeAndPositions';
+import { ZoomAreaElements } from '../zoomArea.type';
 /**
  * Handle left arrow and down arrow key movement (decrease values)
  */
 const handleArrowLeft = (target, currentRange, step, interactionConfig) => {
     const newRange = { ...currentRange };
-    if (target === zoomArea_type_1.ZoomAreaElements.START_HANDLER) {
+    if (target === ZoomAreaElements.START_HANDLER) {
         newRange.start = Math.max(0, currentRange.start - step);
     }
-    else if (target === zoomArea_type_1.ZoomAreaElements.END_HANDLER) {
+    else if (target === ZoomAreaElements.END_HANDLER) {
         newRange.end = Math.max(currentRange.start + interactionConfig.minHandlerDistance, currentRange.end - step);
     }
-    else if (target === zoomArea_type_1.ZoomAreaElements.SELECTION_AREA) {
+    else if (target === ZoomAreaElements.SELECTION_AREA) {
         // Move entire selection left
         const selectionWidth = currentRange.end - currentRange.start;
         const newStart = Math.max(0, currentRange.start - step);
@@ -29,13 +26,13 @@ const handleArrowLeft = (target, currentRange, step, interactionConfig) => {
  */
 const handleArrowRight = (target, currentRange, step, dataLength, interactionConfig) => {
     const newRange = { ...currentRange };
-    if (target === zoomArea_type_1.ZoomAreaElements.START_HANDLER) {
+    if (target === ZoomAreaElements.START_HANDLER) {
         newRange.start = Math.min(currentRange.end - interactionConfig.minHandlerDistance, currentRange.start + step);
     }
-    else if (target === zoomArea_type_1.ZoomAreaElements.END_HANDLER) {
+    else if (target === ZoomAreaElements.END_HANDLER) {
         newRange.end = Math.min(dataLength - 1, currentRange.end + step);
     }
-    else if (target === zoomArea_type_1.ZoomAreaElements.SELECTION_AREA) {
+    else if (target === ZoomAreaElements.SELECTION_AREA) {
         // Move entire selection right
         const selectionWidth = currentRange.end - currentRange.start;
         const newStart = Math.min(dataLength - 1 - selectionWidth, currentRange.start + step);
@@ -49,13 +46,13 @@ const handleArrowRight = (target, currentRange, step, dataLength, interactionCon
  */
 const handleHome = (target, currentRange, dataLength) => {
     const newRange = { ...currentRange };
-    if (target === zoomArea_type_1.ZoomAreaElements.START_HANDLER) {
+    if (target === ZoomAreaElements.START_HANDLER) {
         newRange.start = 0;
     }
-    else if (target === zoomArea_type_1.ZoomAreaElements.END_HANDLER) {
+    else if (target === ZoomAreaElements.END_HANDLER) {
         newRange.end = dataLength - 1;
     }
-    else if (target === zoomArea_type_1.ZoomAreaElements.SELECTION_AREA) {
+    else if (target === ZoomAreaElements.SELECTION_AREA) {
         const selectionWidth = currentRange.end - currentRange.start;
         newRange.start = 0;
         newRange.end = selectionWidth;
@@ -67,13 +64,13 @@ const handleHome = (target, currentRange, dataLength) => {
  */
 const handleEnd = (target, currentRange, dataLength, interactionConfig) => {
     const newRange = { ...currentRange };
-    if (target === zoomArea_type_1.ZoomAreaElements.START_HANDLER) {
+    if (target === ZoomAreaElements.START_HANDLER) {
         newRange.start = currentRange.end - interactionConfig.minHandlerDistance;
     }
-    else if (target === zoomArea_type_1.ZoomAreaElements.END_HANDLER) {
+    else if (target === ZoomAreaElements.END_HANDLER) {
         newRange.end = dataLength - 1;
     }
-    else if (target === zoomArea_type_1.ZoomAreaElements.SELECTION_AREA) {
+    else if (target === ZoomAreaElements.SELECTION_AREA) {
         const selectionWidth = currentRange.end - currentRange.start;
         newRange.start = dataLength - 1 - selectionWidth;
         newRange.end = dataLength - 1;
@@ -86,9 +83,9 @@ const handleEnd = (target, currentRange, dataLength, interactionConfig) => {
  * @param params - Configuration parameters for keyboard navigation
  * @returns Object with keyboard event handlers
  */
-const useKeyboardNavigation = (params) => {
+export const useKeyboardNavigation = (params) => {
     const { currentRange, dataLength, interactionConfig, onRangeChange } = params;
-    const handleKeyDown = (0, react_1.useCallback)((target) => {
+    const handleKeyDown = useCallback((target) => {
         return (event) => {
             // Shift key = fast navigation, normal keys = precise control
             const step = event.shiftKey
@@ -117,10 +114,9 @@ const useKeyboardNavigation = (params) => {
                 default:
                     return; // Don't handle other keys
             }
-            const clampedRange = (0, rangeAndPositions_1.clampRange)(newRange, dataLength, interactionConfig.minHandlerDistance);
+            const clampedRange = clampRange(newRange, dataLength, interactionConfig.minHandlerDistance);
             onRangeChange(clampedRange);
         };
     }, [currentRange, dataLength, onRangeChange, interactionConfig]);
     return { handleKeyDown };
 };
-exports.useKeyboardNavigation = useKeyboardNavigation;

package/dist/cjs/components/zoomArea/hooks/useResponsiveCanvas.js

@@ -1,18 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useResponsiveCanvas = void 0;
-const react_1 = require("react");
-const buildViewBox_1 = require("../../../components/svgContainer/utils/buildViewBox/buildViewBox");
-const getCanvasDimensions_1 = require("../../../utils/getCanvasDimensions/getCanvasDimensions");
-const parseStringToNumberPx_1 = require("../../../utils/parseStringToNumberPx.ts/parseStringToNumberPx");
-const useResponsiveCanvas = ({ canvasConfig, dataTestId, extraSpace = 0, height, width, }) => {
+import { useEffect, useMemo, useState } from 'react';
+import { buildViewBox } from '../../../components/svgContainer/utils/buildViewBox/buildViewBox';
+import { getCanvasDimensions } from '../../../utils/getCanvasDimensions/getCanvasDimensions';
+import { parseStringToNumberPx } from '../../../utils/parseStringToNumberPx.ts/parseStringToNumberPx';
+export const useResponsiveCanvas = ({ canvasConfig, dataTestId, extraSpace = 0, height, width, }) => {
     // State for parsed/calculated dimensions
-    const [parsedCanvas, setParsedCanvas] = (0, react_1.useState)({
+    const [parsedCanvas, setParsedCanvas] = useState({
         height: 0,
         width: 0,
     });
     // Determine effective configuration (legacy vs modern API)
-    const effectiveCanvasConfig = (0, react_1.useMemo)(() => {
+    const effectiveCanvasConfig = useMemo(() => {
         if (canvasConfig) {
             // Legacy mode: use provided canvasConfig
             return canvasConfig;
@@ -27,17 +24,17 @@ const useResponsiveCanvas = ({ canvasConfig, dataTestId, extraSpace = 0, height,
     // Extract and parse canvas configuration
     const { extraSpace: canvasExtraSpace, height: canvasHeight, width: canvasWidth, } = effectiveCanvasConfig;
     const parsedCanvasExtraSpace = canvasExtraSpace
-        ? (0, parseStringToNumberPx_1.parseStringToNumberPx)(canvasExtraSpace)
+        ? parseStringToNumberPx(canvasExtraSpace)
         : undefined;
     // Set up responsive dimensions with ResizeObserver
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         // Find the SVG element for this specific component instance
         const svgElement = document.querySelector(`[data-testid="${dataTestId}"]`);
         if (!svgElement) {
             return;
         }
         const calculateDimensions = () => {
-            const { parsedCanvasHeight, parsedCanvasWidth } = (0, getCanvasDimensions_1.getCanvasDimensions)({
+            const { parsedCanvasHeight, parsedCanvasWidth } = getCanvasDimensions({
                 canvasHeight,
                 canvasWidth,
                 svgElement,
@@ -62,8 +59,8 @@ const useResponsiveCanvas = ({ canvasConfig, dataTestId, extraSpace = 0, height,
         };
     }, [canvasWidth, canvasHeight, dataTestId]);
     // Calculate viewBox based on parsed dimensions
-    const viewBox = (0, react_1.useMemo)(() => {
-        const calculatedViewBox = (0, buildViewBox_1.buildViewBox)(parsedCanvas.width, parsedCanvas.height, parsedCanvasExtraSpace);
+    const viewBox = useMemo(() => {
+        const calculatedViewBox = buildViewBox(parsedCanvas.width, parsedCanvas.height, parsedCanvasExtraSpace);
         return calculatedViewBox;
     }, [parsedCanvas.width, parsedCanvas.height, parsedCanvasExtraSpace]);
     return {
@@ -71,4 +68,3 @@ const useResponsiveCanvas = ({ canvasConfig, dataTestId, extraSpace = 0, height,
         viewBox,
     };
 };
-exports.useResponsiveCanvas = useResponsiveCanvas;

package/dist/cjs/components/zoomArea/hooks/useZoomAreaFocus.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useZoomAreaFocus = void 0;
-const react_1 = require("react");
+import { useCallback, useState } from 'react';
 /**
  * Custom hook for managing focus state of zoom area elements.
  *
@@ -11,16 +8,16 @@ const react_1 = require("react");
  * @param params - Configuration parameters for the hook
  * @returns Object with focus handlers and utilities
  */
-const useZoomAreaFocus = () => {
-    const [focusedElement, setFocusedElement] = (0, react_1.useState)(null);
-    const handleFocus = (0, react_1.useCallback)((target) => {
+export const useZoomAreaFocus = () => {
+    const [focusedElement, setFocusedElement] = useState(null);
+    const handleFocus = useCallback((target) => {
         return () => setFocusedElement(target);
     }, []);
-    const handleBlur = (0, react_1.useCallback)(() => {
+    const handleBlur = useCallback(() => {
         setFocusedElement(null);
     }, []);
     // Helper function to check focus state
-    const isFocused = (0, react_1.useCallback)((target) => {
+    const isFocused = useCallback((target) => {
         return focusedElement === target;
     }, [focusedElement]);
     return {
@@ -29,4 +26,3 @@ const useZoomAreaFocus = () => {
         isFocused,
     };
 };
-exports.useZoomAreaFocus = useZoomAreaFocus;

package/dist/cjs/components/zoomArea/hooks/useZoomData.js

@@ -1,20 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useZoomData = void 0;
-const react_1 = require("react");
-const indexRounding_1 = require("../utils/indexRounding");
-const rangeAndPositions_1 = require("../utils/rangeAndPositions");
-const useZoomData = ({ data, initialRange, onDataChange, }) => {
+import { useEffect, useState } from 'react';
+import { getRangeIndices } from '../utils/indexRounding';
+import { createDefaultRange } from '../utils/rangeAndPositions';
+export const useZoomData = ({ data, initialRange, onDataChange, }) => {
     // Initialize range state
-    const defaultRange = initialRange || (0, rangeAndPositions_1.createDefaultRange)(data.length);
-    const [currentRange, setCurrentRange] = (0, react_1.useState)(defaultRange);
+    const defaultRange = initialRange || createDefaultRange(data.length);
+    const [currentRange, setCurrentRange] = useState(defaultRange);
     // Filter data based on current range and emit changes
     const filterData = (range) => {
         if (!onDataChange || data.length === 0) {
             return;
         }
         // Use centralized rounding logic to ensure consistency with accessibility labels
-        const { endIndex, startIndex } = (0, indexRounding_1.getRangeIndices)(range, data.length);
+        const { endIndex, startIndex } = getRangeIndices(range, data.length);
         const filteredData = data.slice(startIndex, endIndex + 1);
         onDataChange(filteredData);
     };
@@ -24,7 +21,7 @@ const useZoomData = ({ data, initialRange, onDataChange, }) => {
         filterData(newRange);
     };
     // Emit initial filtered data on mount
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         filterData(currentRange);
     }, []);
     return {
@@ -32,4 +29,3 @@ const useZoomData = ({ data, initialRange, onDataChange, }) => {
         handleRangeChange,
     };
 };
-exports.useZoomData = useZoomData;

package/dist/cjs/components/zoomArea/index.js

@@ -1,21 +1,5 @@
-"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 __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 });
-__exportStar(require("./components"), exports);
-__exportStar(require("./hooks"), exports);
-__exportStar(require("./utils"), exports);
-__exportStar(require("./zoomArea"), exports);
-__exportStar(require("./zoomArea.type"), exports);
+export * from './components';
+export * from './hooks';
+export * from './utils';
+export * from './zoomArea';
+export * from './zoomArea.type';

package/dist/cjs/components/zoomArea/utils/accessibilityLabels.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateAccessibilityLabels = exports.getXAxisValue = void 0;
-const indexRounding_1 = require("./indexRounding");
+import { getRangeIndices } from './indexRounding';
 // Template keys for accessibility labels
 const ACCESSIBILITY_START_VALUE_KEY = '{{startValue}}';
 const ACCESSIBILITY_END_VALUE_KEY = '{{endValue}}';
@@ -13,11 +10,10 @@ const ACCESSIBILITY_END_VALUE_KEY = '{{endValue}}';
  * @param index - Integer index (should be pre-rounded using indexRounding utils)
  * @returns String representation of the X-axis value, or fallback to string index
  */
-const getXAxisValue = (data, xKey, index) => {
+export const getXAxisValue = (data, xKey, index) => {
     // Index should already be rounded and clamped by getRangeIndices()
     return data[index]?.[xKey]?.toString() || `${index}`;
 };
-exports.getXAxisValue = getXAxisValue;
 /**
  * Builds screen reader text by replacing template keys with actual values
  *
@@ -46,11 +42,11 @@ const buildScreenReaderText = (template, startValue, endValue) => {
  * @param config - Optional configuration for custom label templates
  * @returns Object with formatted accessibility labels for UI components
  */
-const generateAccessibilityLabels = (data, xKey, currentRange, config) => {
+export const generateAccessibilityLabels = (data, xKey, currentRange, config) => {
     // Use EXACT same indexing logic as useZoomData.filterData() via shared utilities
-    const { endIndex, startIndex } = (0, indexRounding_1.getRangeIndices)(currentRange, data.length);
-    const startValue = (0, exports.getXAxisValue)(data, xKey, startIndex);
-    const endValue = (0, exports.getXAxisValue)(data, xKey, endIndex);
+    const { endIndex, startIndex } = getRangeIndices(currentRange, data.length);
+    const startValue = getXAxisValue(data, xKey, startIndex);
+    const endValue = getXAxisValue(data, xKey, endIndex);
     // Use custom templates or fall back to simple defaults (just the values)
     const startHandler = buildScreenReaderText(config?.startHandler, startValue, endValue) ?? startValue;
     const endHandler = buildScreenReaderText(config?.endHandler, startValue, endValue) ?? endValue;
@@ -62,4 +58,3 @@ const generateAccessibilityLabels = (data, xKey, currentRange, config) => {
         startHandler,
     };
 };
-exports.generateAccessibilityLabels = generateAccessibilityLabels;

package/dist/cjs/components/zoomArea/utils/index.js

@@ -1,14 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isFullRange = exports.createDefaultRange = exports.clampRange = exports.mouseToDataIndex = exports.calculateHandlerPositions = exports.calculateLinesPathData = exports.generateCurvedPath = exports.getInteractionConfig = void 0;
-var interactionConfig_1 = require("./interactionConfig");
-Object.defineProperty(exports, "getInteractionConfig", { enumerable: true, get: function () { return interactionConfig_1.getInteractionConfig; } });
-var pathGeneration_1 = require("./pathGeneration");
-Object.defineProperty(exports, "generateCurvedPath", { enumerable: true, get: function () { return pathGeneration_1.generateCurvedPath; } });
-Object.defineProperty(exports, "calculateLinesPathData", { enumerable: true, get: function () { return pathGeneration_1.calculateLinesPathData; } });
-var rangeAndPositions_1 = require("./rangeAndPositions");
-Object.defineProperty(exports, "calculateHandlerPositions", { enumerable: true, get: function () { return rangeAndPositions_1.calculateHandlerPositions; } });
-Object.defineProperty(exports, "mouseToDataIndex", { enumerable: true, get: function () { return rangeAndPositions_1.mouseToDataIndex; } });
-Object.defineProperty(exports, "clampRange", { enumerable: true, get: function () { return rangeAndPositions_1.clampRange; } });
-Object.defineProperty(exports, "createDefaultRange", { enumerable: true, get: function () { return rangeAndPositions_1.createDefaultRange; } });
-Object.defineProperty(exports, "isFullRange", { enumerable: true, get: function () { return rangeAndPositions_1.isFullRange; } });
+export { getInteractionConfig } from './interactionConfig';
+export { generateCurvedPath, calculateLinesPathData } from './pathGeneration';
+export { calculateHandlerPositions, mouseToDataIndex, clampRange, createDefaultRange, isFullRange, } from './rangeAndPositions';

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

@@ -1,4 +1,3 @@
-"use strict";
 /**
  * Index rounding utilities for consistent data filtering and accessibility labels.
  *
@@ -6,8 +5,6 @@
  * (generateAccessibilityLabels) use exactly the same rounding logic, preventing
  * inconsistencies between what users see and what screen readers announce.
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRangeIndices = exports.roundEndIndex = exports.roundStartIndex = void 0;
 /**
  * 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.
@@ -22,11 +19,10 @@ exports.getRangeIndices = exports.roundEndIndex = exports.roundStartIndex = void
  * roundStartIndex(-0.5, 4); // Math.floor(-0.5) = -1, clamped to [0,4] → 0
  * ```
  */
-const roundStartIndex = (index, maxIndex) => {
+export const roundStartIndex = (index, maxIndex) => {
     const rounded = Math.floor(index);
     return Math.max(0, Math.min(maxIndex, rounded));
 };
-exports.roundStartIndex = roundStartIndex;
 /**
  * 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.
@@ -41,11 +37,10 @@ exports.roundStartIndex = roundStartIndex;
  * roundEndIndex(5.2, 4); // Math.ceil(5.2) = 6, clamped to [0,4] → 4
  * ```
  */
-const roundEndIndex = (index, maxIndex) => {
+export const roundEndIndex = (index, maxIndex) => {
     const rounded = Math.ceil(index);
     return Math.max(0, Math.min(maxIndex, rounded));
 };
-exports.roundEndIndex = roundEndIndex;
 /**
  * Converts a fractional range to integer indices using consistent rounding.
  * This is the core function that both data filtering and accessibility use.
@@ -64,11 +59,10 @@ exports.roundEndIndex = roundEndIndex;
  * // 2. Accessibility: data[startIndex][xKey] to data[endIndex][xKey]
  * ```
  */
-const getRangeIndices = (range, dataLength) => {
+export const getRangeIndices = (range, dataLength) => {
     const maxIndex = Math.max(0, dataLength - 1);
     return {
-        endIndex: (0, exports.roundEndIndex)(range.end, maxIndex),
-        startIndex: (0, exports.roundStartIndex)(range.start, maxIndex),
+        endIndex: roundEndIndex(range.end, maxIndex),
+        startIndex: roundStartIndex(range.start, maxIndex),
     };
 };
-exports.getRangeIndices = getRangeIndices;

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

@@ -1,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getInteractionConfig = void 0;
 /**
  * Default configuration for ZoomArea interactions
  */
@@ -19,9 +16,8 @@ const DEFAULT_INTERACTION_CONFIG = {
  * @param config - Optional user configuration
  * @returns Complete interaction configuration with defaults applied
  */
-const getInteractionConfig = (config) => ({
+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,
 });
-exports.getInteractionConfig = getInteractionConfig;

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

@@ -1,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.calculateLinesPathData = exports.generateCurvedPath = void 0;
 /**
  * Path generation utilities for ZoomArea SVG rendering
  */
@@ -21,7 +18,7 @@ exports.calculateLinesPathData = exports.generateCurvedPath = void 0;
  * // Returns: "M 0 10 C 3 10, 7 20, 10 20 C 13 20, 17 15, 20 15"
  * ```
  */
-const generateCurvedPath = (points) => {
+export const generateCurvedPath = (points) => {
     if (points.length === 0) {
         return '';
     }
@@ -42,7 +39,6 @@ const generateCurvedPath = (points) => {
     });
     return path;
 };
-exports.generateCurvedPath = generateCurvedPath;
 /**
  * Calculates path data for all lines with unified Y-scale, supporting both curved and straight lines.
  *
@@ -72,7 +68,7 @@ exports.generateCurvedPath = generateCurvedPath;
  * // Returns: [{ linePath: "M 0 80 C...", fillPath: "", config: {...} }, ...]
  * ```
  */
-const calculateLinesPathData = (data, lines, width, height) => {
+export const calculateLinesPathData = (data, lines, width, height) => {
     if (data.length === 0 || lines.length === 0) {
         return [];
     }
@@ -97,14 +93,14 @@ const calculateLinesPathData = (data, lines, width, height) => {
         });
         // Generate line path - curved or straight based on config
         const linePath = lineConfig.curved
-            ? (0, exports.generateCurvedPath)(pathPoints)
+            ? 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
-                ? `${(0, exports.generateCurvedPath)(pathPoints)} L ${width} ${height} L 0 ${height} Z`
+                ? `${generateCurvedPath(pathPoints)} L ${width} ${height} L 0 ${height} Z`
                 : `${linePath} L ${width},${height} L 0,${height} Z`;
         }
         return {
@@ -114,4 +110,3 @@ const calculateLinesPathData = (data, lines, width, height) => {
         };
     });
 };
-exports.calculateLinesPathData = calculateLinesPathData;