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

package/dist/cjs/components/path/components/nodePath/nodePath.js

@@ -1,11 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NodePath = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const accessibilityTemplateProcessor_1 = require("../../../../charts/lineChart/utils/accessibilityTemplateProcessor");
-const pickCustomAttributes_1 = require("../../../../utils/pickCustomAttributes/pickCustomAttributes");
-const node_1 = require("../../../node/node");
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { processAccessibilityTemplate } from '../../../../charts/lineChart/utils/accessibilityTemplateProcessor';
+import { pickCustomAttributes } from '../../../../utils/pickCustomAttributes/pickCustomAttributes';
+import { Node } from '../../../node/node';
 const NODE_PATH_FOCUS_BORDER = 'node-path-focus-border';
 /**
  * NodePathComponent renders a Node with custom attributes including processed aria-label templates.
@@ -15,14 +12,14 @@ const NODE_PATH_FOCUS_BORDER = 'node-path-focus-border';
  */
 const NodePathComponent = ({ data, nodeConfig, tabIndex = 0, x, y }, ref) => {
     // Extract custom aria-* and data-* attributes from nodeConfig
-    const customAttributes = nodeConfig ? (0, pickCustomAttributes_1.pickCustomAttributes)(nodeConfig) : {};
+    const customAttributes = nodeConfig ? pickCustomAttributes(nodeConfig) : {};
     // Process aria-label template if it exists and contains placeholders
     if (customAttributes['aria-label'] &&
         data &&
         typeof customAttributes['aria-label'] === 'string') {
         const ariaLabelValue = customAttributes['aria-label'];
         if (ariaLabelValue.includes('{{')) {
-            const processedAriaLabel = (0, accessibilityTemplateProcessor_1.processAccessibilityTemplate)(ariaLabelValue, {
+            const processedAriaLabel = processAccessibilityTemplate(ariaLabelValue, {
                 dataKey: data.dataKey,
                 dataValue: data.dataValue,
                 index: data.index ?? 0,
@@ -33,9 +30,9 @@ const NodePathComponent = ({ data, nodeConfig, tabIndex = 0, x, y }, ref) => {
             }
         }
     }
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: nodeConfig && ((0, jsx_runtime_1.jsx)(node_1.Node, { ...nodeConfig, ref: ref, ...customAttributes, className: NODE_PATH_FOCUS_BORDER, data: data, hasHalo: nodeConfig.hasHalo, position: {
+    return (_jsx(_Fragment, { children: nodeConfig && (_jsx(Node, { ...nodeConfig, ref: ref, ...customAttributes, className: NODE_PATH_FOCUS_BORDER, data: data, hasHalo: nodeConfig.hasHalo, position: {
                 x: x,
                 y: y,
             }, tabIndex: tabIndex })) }));
 };
-exports.NodePath = (0, react_1.forwardRef)(NodePathComponent);
+export const NodePath = forwardRef(NodePathComponent);

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

@@ -1,18 +1,2 @@
-"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("./path"), exports);
-__exportStar(require("./path.types"), exports);
+export * from './path';
+export * from './path.types';

package/dist/cjs/components/path/path.js

@@ -1,15 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Path = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const useFocus_1 = require("../../hooks/useFocus/useFocus");
-const useHover_1 = require("../../hooks/useHover/useHover");
-const cssGradientToSvg_1 = require("../../utils/cssGradientToSvg/cssGradientToSvg");
-const pickCustomAttributes_1 = require("../../utils/pickCustomAttributes/pickCustomAttributes");
-const shadowSvg_1 = require("../../utils/shadowSvg/shadowSvg");
-const nodePath_1 = require("./components/nodePath/nodePath");
-require("./path.css");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef, } from 'react';
+import { useFocus } from '../../hooks/useFocus/useFocus';
+import { useHover } from '../../hooks/useHover/useHover';
+import { cssGradientToSVG } from '../../utils/cssGradientToSvg/cssGradientToSvg';
+import { pickCustomAttributes } from '../../utils/pickCustomAttributes/pickCustomAttributes';
+import { ShadowSvg } from '../../utils/shadowSvg/shadowSvg';
+import { NodePath } from './components/nodePath/nodePath';
+import './path.css';
 const ENTER = {
     code: 'Enter',
     key: 'Enter',
@@ -55,12 +52,12 @@ const PathComponent = ({ classNames = '', fill = 'transparent', stroke = '#0000F
     stroke: '#0000FF',
     strokeWidth: '0.5',
 }, role = 'img', ...props }, ref) => {
-    const { handleBlur, handleFocus, isFocused } = (0, useFocus_1.useFocus)(props.onFocus, props.onBlur);
-    const { handleMouseEnter, handleMouseLeave, isHovered } = (0, useHover_1.useHover)(props.onMouseEnter, props.onMouseLeave);
-    const pathRef = (0, react_1.useRef)(null);
-    const nodeRef = (0, react_1.useRef)([]);
-    const mainRef = (0, react_1.useRef)(null);
-    (0, react_1.useImperativeHandle)(ref, () => ({
+    const { handleBlur, handleFocus, isFocused } = useFocus(props.onFocus, props.onBlur);
+    const { handleMouseEnter, handleMouseLeave, isHovered } = useHover(props.onMouseEnter, props.onMouseLeave);
+    const pathRef = useRef(null);
+    const nodeRef = useRef([]);
+    const mainRef = useRef(null);
+    useImperativeHandle(ref, () => ({
         get main() {
             return mainRef.current;
         },
@@ -85,9 +82,9 @@ const PathComponent = ({ classNames = '', fill = 'transparent', stroke = '#0000F
     const handleMouseDown = (e) => {
         e.preventDefault();
     };
-    const gradientSvgElement = props.gradient && (0, cssGradientToSvg_1.cssGradientToSVG)(props.gradient);
+    const gradientSvgElement = props.gradient && cssGradientToSVG(props.gradient);
     // Extract custom data-* and aria-* attributes
-    const customAttributes = (0, pickCustomAttributes_1.pickCustomAttributes)(props);
+    const customAttributes = pickCustomAttributes(props);
     // Merge props to include focus and hover styles
     const defaultProps = {
         ...props,
@@ -103,7 +100,7 @@ const PathComponent = ({ classNames = '', fill = 'transparent', stroke = '#0000F
         ...(isFocused && focusConfig),
         ...(isHovered && hoverConfig),
     };
-    return ((0, jsx_runtime_1.jsxs)("g", { ref: mainRef, tabIndex: -1, children: [gradientSvgElement && gradientSvgElement, mergedProps.shadowSvgConfig && ((0, jsx_runtime_1.jsx)(shadowSvg_1.ShadowSvg, { id: SHADOW_FILTER_ID, shadowSvgConfig: mergedProps.shadowSvgConfig })), (0, jsx_runtime_1.jsxs)("g", { "aria-label": mergedProps.ariaLabel, className: mergedProps.classNames, "data-draw": true, filter: mergedProps.shadowSvgConfig && mergedProps.filter, opacity: mergedProps.opacity, orientation: mergedProps.orientation, role: mergedProps.role, rotate: mergedProps.rotate, tabIndex: mergedProps.tabIndex, transform: mergedProps.transform, visibility: mergedProps.visibility, ...customAttributes, onBlur: handleBlur, onClick: handleClick, onDoubleClick: handleDoubleClick, onFocus: handleFocus, onKeyDown: handleKeyDown, onMouseDown: handleMouseDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [(0, jsx_runtime_1.jsx)("path", { ref: pathRef, d: mergedProps.d, "data-testid": mergedProps.dataTestId, fill: mergedProps.dFill ? 'transparent' : mergedProps.fill, fillOpacity: mergedProps.fillOpacity, fillRule: mergedProps.fillRule, stroke: mergedProps.stroke, strokeDasharray: mergedProps.strokeDasharray, strokeDashoffset: mergedProps.strokeDashoffset, strokeLinecap: mergedProps.strokeLinecap, strokeLinejoin: mergedProps.strokeLinejoin, strokeMiterlimit: mergedProps.strokeMiterlimit, strokeOpacity: mergedProps.strokeOpacity, strokeWidth: mergedProps.strokeWidth, children: mergedProps.title && (0, jsx_runtime_1.jsx)("title", { children: mergedProps.title }) }), mergedProps.dFill && ((0, jsx_runtime_1.jsx)("path", { d: mergedProps.dFill, fill: mergedProps.fill, fillOpacity: mergedProps.fillOpacity, fillRule: mergedProps.fillRule }))] }), mergedProps.points &&
+    return (_jsxs("g", { ref: mainRef, tabIndex: -1, children: [gradientSvgElement && gradientSvgElement, mergedProps.shadowSvgConfig && (_jsx(ShadowSvg, { id: SHADOW_FILTER_ID, shadowSvgConfig: mergedProps.shadowSvgConfig })), _jsxs("g", { "aria-label": mergedProps.ariaLabel, className: mergedProps.classNames, "data-draw": true, filter: mergedProps.shadowSvgConfig && mergedProps.filter, opacity: mergedProps.opacity, orientation: mergedProps.orientation, role: mergedProps.role, rotate: mergedProps.rotate, tabIndex: mergedProps.tabIndex, transform: mergedProps.transform, visibility: mergedProps.visibility, ...customAttributes, onBlur: handleBlur, onClick: handleClick, onDoubleClick: handleDoubleClick, onFocus: handleFocus, onKeyDown: handleKeyDown, onMouseDown: handleMouseDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsx("path", { ref: pathRef, d: mergedProps.d, "data-testid": mergedProps.dataTestId, fill: mergedProps.dFill ? 'transparent' : mergedProps.fill, fillOpacity: mergedProps.fillOpacity, fillRule: mergedProps.fillRule, stroke: mergedProps.stroke, strokeDasharray: mergedProps.strokeDasharray, strokeDashoffset: mergedProps.strokeDashoffset, strokeLinecap: mergedProps.strokeLinecap, strokeLinejoin: mergedProps.strokeLinejoin, strokeMiterlimit: mergedProps.strokeMiterlimit, strokeOpacity: mergedProps.strokeOpacity, strokeWidth: mergedProps.strokeWidth, children: mergedProps.title && _jsx("title", { children: mergedProps.title }) }), mergedProps.dFill && (_jsx("path", { d: mergedProps.dFill, fill: mergedProps.fill, fillOpacity: mergedProps.fillOpacity, fillRule: mergedProps.fillRule }))] }), mergedProps.points &&
                 mergedProps.nodeConfig &&
                 mergedProps.points.map(([x, y], index) => {
                     const nodeData = {
@@ -112,7 +109,7 @@ const PathComponent = ({ classNames = '', fill = 'transparent', stroke = '#0000F
                         index,
                         xKey: mergedProps?.xKey,
                     };
-                    return ((0, jsx_runtime_1.jsx)(nodePath_1.NodePath, { ref: rf => (nodeRef.current[index] = rf), data: nodeData, nodeConfig: mergedProps.nodeConfig, tabIndex: -1, x: x, y: y }, `${index.toString()}`));
+                    return (_jsx(NodePath, { ref: rf => (nodeRef.current[index] = rf), data: nodeData, nodeConfig: mergedProps.nodeConfig, tabIndex: -1, x: x, y: y }, `${index.toString()}`));
                 })] }));
 };
-exports.Path = (0, react_1.forwardRef)(PathComponent);
+export const Path = forwardRef(PathComponent);

package/dist/cjs/components/path/path.types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/dist/cjs/components/plot/components/circle/circle.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Circle = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 const CircleComponent = ({ dataTestId, position, size, ...props }, ref) => {
-    return ((0, jsx_runtime_1.jsx)("circle", { ...props, ref: ref, cx: position.x, cy: position.y, "data-testid": `${dataTestId}-circle`, r: size / 2 }));
+    return (_jsx("circle", { ...props, ref: ref, cx: position.x, cy: position.y, "data-testid": `${dataTestId}-circle`, r: size / 2 }));
 };
-exports.Circle = (0, react_1.forwardRef)(CircleComponent);
+export const Circle = forwardRef(CircleComponent);

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

@@ -1,19 +1,3 @@
-"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("./circle/circle"), exports);
-__exportStar(require("./square/square"), exports);
-__exportStar(require("./triangle/triangle"), exports);
+export * from './circle/circle';
+export * from './square/square';
+export * from './triangle/triangle';

package/dist/cjs/components/plot/components/square/square.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Square = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 const SquareComponent = ({ dataTestId, position, size, ...props }, ref) => {
-    return ((0, jsx_runtime_1.jsx)("rect", { ...props, ref: ref, "data-testid": `${dataTestId}-square`, height: size, width: size, x: position.x - size / 2, y: position.y - size / 2 }));
+    return (_jsx("rect", { ...props, ref: ref, "data-testid": `${dataTestId}-square`, height: size, width: size, x: position.x - size / 2, y: position.y - size / 2 }));
 };
-exports.Square = (0, react_1.forwardRef)(SquareComponent);
+export const Square = forwardRef(SquareComponent);

package/dist/cjs/components/plot/components/triangle/triangle.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Triangle = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 const TriangleComponent = ({ dataTestId, position, size, ...props }, ref) => {
     // Create an isosceles triangle where both width and height are size*2
     // This maintains consistency with the circle and square Plots
@@ -12,6 +9,6 @@ const TriangleComponent = ({ dataTestId, position, size, ...props }, ref) => {
     const bottomLeft = `${position.x - halfWidth},${position.y + height / 2}`;
     const bottomRight = `${position.x + halfWidth},${position.y + height / 2}`;
     const trianglePoints = `${topPoint} ${bottomLeft} ${bottomRight}`;
-    return ((0, jsx_runtime_1.jsx)("polygon", { ...props, ref: ref, "data-testid": `${dataTestId}-triangle`, points: trianglePoints }));
+    return (_jsx("polygon", { ...props, ref: ref, "data-testid": `${dataTestId}-triangle`, points: trianglePoints }));
 };
-exports.Triangle = (0, react_1.forwardRef)(TriangleComponent);
+export const Triangle = forwardRef(TriangleComponent);

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

@@ -1,18 +1,2 @@
-"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("./plot"), exports);
-__exportStar(require("./plot.types"), exports);
+export * from './plot';
+export * from './plot.types';

package/dist/cjs/components/plot/plot.js

@@ -1,32 +1,29 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Plot = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const useFocus_1 = require("../../hooks/useFocus/useFocus");
-const useHover_1 = require("../../hooks/useHover/useHover");
-const calculateFocusOutline_1 = require("../../utils/calculateFocusOutline/calculateFocusOutline");
-const circle_1 = require("./components/circle/circle");
-const square_1 = require("./components/square/square");
-const triangle_1 = require("./components/triangle/triangle");
-require("./plot.css");
-const plot_types_1 = require("./plot.types");
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useFocus } from '../../hooks/useFocus/useFocus';
+import { useHover } from '../../hooks/useHover/useHover';
+import { calculateFocusOutline, getFocusConfig, } from '../../utils/calculateFocusOutline/calculateFocusOutline';
+import { Circle } from './components/circle/circle';
+import { Square } from './components/square/square';
+import { Triangle } from './components/triangle/triangle';
+import './plot.css';
+import { PLOT_SIZE_MAP, PlotSize, PlotType } from './plot.types';
 // Map of components by type
 const Component = {
-    [plot_types_1.PlotType.CIRCLE]: circle_1.Circle,
-    [plot_types_1.PlotType.SQUARE]: square_1.Square,
-    [plot_types_1.PlotType.TRIANGLE]: triangle_1.Triangle,
+    [PlotType.CIRCLE]: Circle,
+    [PlotType.SQUARE]: Square,
+    [PlotType.TRIANGLE]: Triangle,
 };
-const PlotComponent = ({ className, data, dataTestId = 'plot', fill, fillOpacity, focusConfig, hasHoverEffect, hoverConfig, id, label, onBlur, onClick, onFocus, onKeyDown, onMouseEnter, onMouseLeave, opacity, position = { x: 0, y: 0 }, size = plot_types_1.PlotSize.MEDIUM, stroke, strokeWidth, tabIndex, type = plot_types_1.PlotType.CIRCLE, ...props }, ref) => {
-    const { handleBlur, handleFocus, isFocused } = (0, useFocus_1.useFocus)(onFocus, onBlur);
-    const { handleMouseEnter, handleMouseLeave, isHovered } = (0, useHover_1.useHover)(onMouseEnter, onMouseLeave);
+const PlotComponent = ({ className, data, dataTestId = 'plot', fill, fillOpacity, focusConfig, hasHoverEffect, hoverConfig, id, label, onBlur, onClick, onFocus, onKeyDown, onMouseEnter, onMouseLeave, opacity, position = { x: 0, y: 0 }, size = PlotSize.MEDIUM, stroke, strokeWidth, tabIndex, type = PlotType.CIRCLE, ...props }, ref) => {
+    const { handleBlur, handleFocus, isFocused } = useFocus(onFocus, onBlur);
+    const { handleMouseEnter, handleMouseLeave, isHovered } = useHover(onMouseEnter, onMouseLeave);
     // Extract properties from hoverConfig with default values
     const { fill: hoverFill = fill, opacity: hoverOpacity = 0.3, scale: hoverScale = 1.3, stroke: hoverStroke = fill, strokeWidth: hoverStrokeWidth = 0, } = hoverConfig || {};
     // Extract properties from focusConfig with default values
-    const resolvedFocusConfig = (0, calculateFocusOutline_1.getFocusConfig)(focusConfig);
+    const resolvedFocusConfig = getFocusConfig(focusConfig);
     // Calculate focus outline dimensions using the utility
-    const sizeInPixels = typeof size === 'number' ? size : plot_types_1.PLOT_SIZE_MAP[size];
-    const focusOutline = (0, calculateFocusOutline_1.calculateFocusOutline)({
+    const sizeInPixels = typeof size === 'number' ? size : PLOT_SIZE_MAP[size];
+    const focusOutline = calculateFocusOutline({
         elementHeight: sizeInPixels,
         elementPosition: position,
         elementStrokeWidth: strokeWidth,
@@ -61,7 +58,7 @@ const PlotComponent = ({ className, data, dataTestId = 'plot', fill, fillOpacity
     };
     // Get the correct component based on type
     const PlotShape = Component[type];
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasHoverEffect && isHovered && !isFocused && ((0, jsx_runtime_1.jsx)(PlotShape, { dataTestId: `${dataTestId}-hover`, fill: hoverFill, opacity: hoverOpacity, position: position, size: sizeInPixels * hoverScale, stroke: hoverStroke, strokeWidth: hoverStrokeWidth })), isFocused && focusOutline.type === 'rectangle' && ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("rect", { className: "plot-focus-outer", "data-testid": `${dataTestId}-focus-outer`, fill: "none", height: focusOutline.outer.height, stroke: resolvedFocusConfig.outlineColor, strokeWidth: resolvedFocusConfig.outlineStrokeWidth, width: focusOutline.outer.width, x: focusOutline.outer.x, y: focusOutline.outer.y }), (0, jsx_runtime_1.jsx)("rect", { className: "plot-focus-inner", "data-testid": `${dataTestId}-focus-inner`, fill: "none", height: focusOutline.inner.height, stroke: resolvedFocusConfig.innerColor, strokeWidth: resolvedFocusConfig.innerStrokeWidth, width: focusOutline.inner.width, x: focusOutline.inner.x, y: focusOutline.inner.y })] })), (0, jsx_runtime_1.jsx)(PlotShape, { ref: ref, ...plotShapeProps })] }));
+    return (_jsxs(_Fragment, { children: [hasHoverEffect && isHovered && !isFocused && (_jsx(PlotShape, { dataTestId: `${dataTestId}-hover`, fill: hoverFill, opacity: hoverOpacity, position: position, size: sizeInPixels * hoverScale, stroke: hoverStroke, strokeWidth: hoverStrokeWidth })), isFocused && focusOutline.type === 'rectangle' && (_jsxs("g", { children: [_jsx("rect", { className: "plot-focus-outer", "data-testid": `${dataTestId}-focus-outer`, fill: "none", height: focusOutline.outer.height, stroke: resolvedFocusConfig.outlineColor, strokeWidth: resolvedFocusConfig.outlineStrokeWidth, width: focusOutline.outer.width, x: focusOutline.outer.x, y: focusOutline.outer.y }), _jsx("rect", { className: "plot-focus-inner", "data-testid": `${dataTestId}-focus-inner`, fill: "none", height: focusOutline.inner.height, stroke: resolvedFocusConfig.innerColor, strokeWidth: resolvedFocusConfig.innerStrokeWidth, width: focusOutline.inner.width, x: focusOutline.inner.x, y: focusOutline.inner.y })] })), _jsx(PlotShape, { ref: ref, ...plotShapeProps })] }));
 };
 /**
  * `Plot` component which renders an interactive point in a chart with hover effects and accessibility features.
@@ -95,4 +92,4 @@ const PlotComponent = ({ className, data, dataTestId = 'plot', fill, fillOpacity
  *
  * @returns An SVG element representing the plot point with event handlers and accessibility features.
  */
-exports.Plot = (0, react_1.forwardRef)(PlotComponent);
+export const Plot = forwardRef(PlotComponent);

package/dist/cjs/components/plot/plot.types.js

@@ -1,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PLOT_SIZE_MAP = exports.PlotSize = exports.PlotType = void 0;
 /**
  * Enum for plot types.
  *
@@ -9,7 +6,7 @@ exports.PLOT_SIZE_MAP = exports.PlotSize = exports.PlotType = void 0;
  *
  * @enum {string}
  */
-exports.PlotType = {
+export const PlotType = {
     /** Represents a circle plot point */
     CIRCLE: 'CIRCLE',
     /** Represents a square plot point */
@@ -25,7 +22,7 @@ exports.PlotType = {
  *
  * @enum {string}
  */
-exports.PlotSize = {
+export const PlotSize = {
     /** Extra large plot point (40x40 pixels) */
     EXTRA_LARGE: 'EXTRA_LARGE',
     /** Extra small plot point (8x8 pixels) */
@@ -45,10 +42,10 @@ exports.PlotSize = {
  *
  * @type {Record<PlotSize, number>}
  */
-exports.PLOT_SIZE_MAP = {
-    [exports.PlotSize.EXTRA_LARGE]: 40,
-    [exports.PlotSize.EXTRA_SMALL]: 8,
-    [exports.PlotSize.LARGE]: 32,
-    [exports.PlotSize.MEDIUM]: 24,
-    [exports.PlotSize.SMALL]: 16,
+export const PLOT_SIZE_MAP = {
+    [PlotSize.EXTRA_LARGE]: 40,
+    [PlotSize.EXTRA_SMALL]: 8,
+    [PlotSize.LARGE]: 32,
+    [PlotSize.MEDIUM]: 24,
+    [PlotSize.SMALL]: 16,
 };

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

@@ -1,17 +1 @@
-"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("./svgContainer"), exports);
+export * from './svgContainer';

package/dist/cjs/components/svgContainer/svgContainer.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SvgContainer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 /**
  * Renders an SVG container with customizable properties.
  *
@@ -28,10 +25,10 @@ const react_1 = require("react");
  * @returns {ReactElement} A React element representing the SVG container.
  */
 const SvgContainerComponent = ({ ariaHidden, ariaLabel, backgroundColor, caption, children, className, dataTestId, height, imageSrc, overflow, radius = '0px', role, tabIndex, viewBox, width, ...callbacks }, ref) => {
-    return ((0, jsx_runtime_1.jsxs)("svg", { ref: ref, "aria-hidden": ariaHidden, "aria-label": ariaLabel, className: className, "data-testid": dataTestId, height: height, role: role, style: {
+    return (_jsxs("svg", { ref: ref, "aria-hidden": ariaHidden, "aria-label": ariaLabel, className: className, "data-testid": dataTestId, height: height, role: role, style: {
             backgroundColor: backgroundColor,
             borderRadius: radius,
             overflow: overflow,
-        }, tabIndex: tabIndex, viewBox: viewBox, width: width, onMouseDown: e => e.preventDefault(), ...callbacks, children: [caption && (0, jsx_runtime_1.jsx)("title", { children: caption }), imageSrc && (0, jsx_runtime_1.jsx)("image", { height: height, href: imageSrc, width: width, x: "0", y: "0" }), children] }));
+        }, tabIndex: tabIndex, viewBox: viewBox, width: width, onMouseDown: e => e.preventDefault(), ...callbacks, children: [caption && _jsx("title", { children: caption }), imageSrc && _jsx("image", { height: height, href: imageSrc, width: width, x: "0", y: "0" }), children] }));
 };
-exports.SvgContainer = (0, react_1.forwardRef)(SvgContainerComponent);
+export const SvgContainer = forwardRef(SvgContainerComponent);

package/dist/cjs/components/svgContainer/svgContainer.types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/dist/cjs/components/svgContainer/utils/buildViewBox/buildViewBox.js

@@ -1,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildViewBox = void 0;
 /**
  * Constructs a viewBox attribute value for an SVG element.
  *
@@ -14,11 +11,10 @@ exports.buildViewBox = void 0;
  *
  * @returns {string} The `viewBox` attribute value, formatted as "minX minY width height".
  */
-const buildViewBox = (width, height, extraSpace = 0) => {
+export const buildViewBox = (width, height, extraSpace = 0) => {
     const minX = -extraSpace;
     const minY = -extraSpace;
     const viewBoxWidth = width;
     const viewBoxHeight = height;
     return `${minX} ${minY} ${viewBoxWidth} ${viewBoxHeight}`;
 };
-exports.buildViewBox = buildViewBox;

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

@@ -1,17 +1 @@
-"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("./buildViewBox/buildViewBox"), exports);
+export * from './buildViewBox/buildViewBox';

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

@@ -1,18 +1,2 @@
-"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("./tick"), exports);
-__exportStar(require("./tick.types"), exports);
+export * from './tick';
+export * from './tick.types';

package/dist/cjs/components/tick/tick.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tick = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const chartText_1 = require("../../components/chartText/chartText");
-const line_1 = require("../../components/line/line");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChartText } from '../../components/chartText/chartText';
+import { Line } from '../../components/line/line';
 /**
  * Functional component for rendering a tick mark in a chart or graph.
  *
@@ -19,5 +16,4 @@ const line_1 = require("../../components/line/line");
  * @param {number} [props.y] - Optional y-coordinate for the position of the tick mark. Used for vertical placement.
  * @returns A React functional component that renders the tick mark and its associated elements.
  */
-const Tick = ({ showTickLines, tick, tickLine, tickText }) => ((0, jsx_runtime_1.jsxs)("g", { children: [showTickLines && (0, jsx_runtime_1.jsx)(line_1.Line, { ...tickLine }), tickText && (0, jsx_runtime_1.jsx)(chartText_1.ChartText, { ...tickText, children: tick.value })] }));
-exports.Tick = Tick;
+export const Tick = ({ showTickLines, tick, tickLine, tickText }) => (_jsxs("g", { children: [showTickLines && _jsx(Line, { ...tickLine }), tickText && _jsx(ChartText, { ...tickText, children: tick.value })] }));

package/dist/cjs/components/tick/tick.types.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TickDataUtils = void 0;
 /**
  * Utility functions for working with TickData.
  */
-exports.TickDataUtils = {
+export const TickDataUtils = {
     /**
      * Formats the values of an array of TickData using the provided formatter function.
      *

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

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HandlerIcon = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Default color for handler icons
  */
@@ -20,7 +17,6 @@ const ICON_OFFSET = 5;
  * The icon is centered on the handler by applying a translation of:
  * x - ICON_OFFSET, y - ICON_OFFSET
  */
-const HandlerIcon = ({ fill = DEFAULT_ICON_COLOR, x, y }) => {
-    return ((0, jsx_runtime_1.jsxs)("g", { fill: fill, pointerEvents: "none", transform: `translate(${x - ICON_OFFSET}, ${y - ICON_OFFSET})`, children: [(0, jsx_runtime_1.jsx)("path", { d: "M4.99948 9.99802C4.47168 9.99802 4.04419 9.64335 4.04419 9.20547V0.79255C4.04419 0.354666 4.47168 0 4.99948 0C5.52728 0 5.95477 0.354666 5.95477 0.79255V9.20745C5.95477 9.64533 5.52728 10 4.99948 10V9.99802Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M0.955289 8.78839C0.427492 8.78839 0 8.43372 0 7.99584V2.00416C0 1.56628 0.427492 1.21161 0.955289 1.21161C1.48309 1.21161 1.91058 1.56628 1.91058 2.00416V7.99584C1.91058 8.43372 1.48309 8.78839 0.955289 8.78839Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M8.08936 7.99584C8.08936 8.43372 8.51685 8.78839 9.04464 8.78839C9.57244 8.78839 9.99993 8.43372 9.99993 7.99584V2.00416C9.99993 1.56628 9.57244 1.21161 9.04464 1.21161C8.51685 1.21161 8.08936 1.56628 8.08936 2.00416V7.99584Z" })] }));
+export const HandlerIcon = ({ fill = DEFAULT_ICON_COLOR, x, y }) => {
+    return (_jsxs("g", { fill: fill, pointerEvents: "none", transform: `translate(${x - ICON_OFFSET}, ${y - ICON_OFFSET})`, children: [_jsx("path", { d: "M4.99948 9.99802C4.47168 9.99802 4.04419 9.64335 4.04419 9.20547V0.79255C4.04419 0.354666 4.47168 0 4.99948 0C5.52728 0 5.95477 0.354666 5.95477 0.79255V9.20745C5.95477 9.64533 5.52728 10 4.99948 10V9.99802Z" }), _jsx("path", { d: "M0.955289 8.78839C0.427492 8.78839 0 8.43372 0 7.99584V2.00416C0 1.56628 0.427492 1.21161 0.955289 1.21161C1.48309 1.21161 1.91058 1.56628 1.91058 2.00416V7.99584C1.91058 8.43372 1.48309 8.78839 0.955289 8.78839Z" }), _jsx("path", { d: "M8.08936 7.99584C8.08936 8.43372 8.51685 8.78839 9.04464 8.78839C9.57244 8.78839 9.99993 8.43372 9.99993 7.99584V2.00416C9.99993 1.56628 9.57244 1.21161 9.04464 1.21161C8.51685 1.21161 8.08936 1.56628 8.08936 2.00416V7.99584Z" })] }));
 };
-exports.HandlerIcon = HandlerIcon;

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

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LineRenderer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Default color for lines when no stroke is provided
  */
@@ -9,7 +6,6 @@ const DEFAULT_LINE_COLOR = '#0078D4';
 /**
  * Renders all lines and fill areas for the zoom area chart
  */
-const LineRenderer = ({ linesData }) => {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: linesData.map((lineData, index) => ((0, jsx_runtime_1.jsxs)("g", { children: [lineData.config.fill && lineData.fillPath && ((0, jsx_runtime_1.jsx)("path", { d: lineData.fillPath, fill: lineData.config.fill, fillOpacity: lineData.config.fillOpacity || 0.2, stroke: "none" })), (0, jsx_runtime_1.jsx)("path", { d: lineData.linePath, fill: "none", stroke: lineData.config.stroke || DEFAULT_LINE_COLOR, strokeWidth: lineData.config.strokeWidth || 1 })] }, lineData.config.dataKey || lineData.config.yKey || index))) }));
+export const LineRenderer = ({ linesData }) => {
+    return (_jsx(_Fragment, { children: linesData.map((lineData, index) => (_jsxs("g", { children: [lineData.config.fill && lineData.fillPath && (_jsx("path", { d: lineData.fillPath, fill: lineData.config.fill, fillOpacity: lineData.config.fillOpacity || 0.2, stroke: "none" })), _jsx("path", { d: lineData.linePath, fill: "none", stroke: lineData.config.stroke || DEFAULT_LINE_COLOR, strokeWidth: lineData.config.strokeWidth || 1 })] }, lineData.config.dataKey || lineData.config.yKey || index))) }));
 };
-exports.LineRenderer = LineRenderer;

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

@@ -1,13 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectionArea = exports.SelectionAreaFocusRing = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const calculateFocusOutline_1 = require("../../../utils/calculateFocusOutline/calculateFocusOutline");
-const rangeAndPositions_1 = require("../utils/rangeAndPositions");
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { calculateFocusOutline } from '../../../utils/calculateFocusOutline/calculateFocusOutline';
+import { isFullRange } from '../utils/rangeAndPositions';
 /**
  * Focus ring for the selection area - rendered separately to control z-order
  */
-const SelectionAreaFocusRing = ({ endX, focusConfig, height, isFocused, startX, }) => {
+export const SelectionAreaFocusRing = ({ endX, focusConfig, height, isFocused, startX, }) => {
     if (!isFocused) {
         return null;
     }
@@ -17,7 +14,7 @@ const SelectionAreaFocusRing = ({ endX, focusConfig, height, isFocused, startX,
     const centerX = startX + selectionWidth / 2;
     const centerY = height / 2;
     // Calculate focus ring dimensions using the new util
-    const focusOutline = (0, calculateFocusOutline_1.calculateFocusOutline)({
+    const focusOutline = calculateFocusOutline({
         elementHeight: selectionHeight,
         elementPosition: { x: centerX, y: centerY },
         elementStrokeWidth: 0, // Selection area typically has no border
@@ -35,19 +32,17 @@ const SelectionAreaFocusRing = ({ endX, focusConfig, height, isFocused, startX,
     if (focusOutline.type !== 'rectangle') {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)("g", { pointerEvents: "none", children: [(0, jsx_runtime_1.jsx)("rect", { fill: "none", height: focusOutline.outer.height, stroke: outlineColor, strokeWidth: outlineStrokeWidth, width: focusOutline.outer.width, x: focusOutline.outer.x, y: focusOutline.outer.y }), (0, jsx_runtime_1.jsx)("rect", { fill: "none", height: focusOutline.inner.height, stroke: innerColor, strokeWidth: innerStrokeWidth, width: focusOutline.inner.width, x: focusOutline.inner.x, y: focusOutline.inner.y })] }));
+    return (_jsxs("g", { pointerEvents: "none", children: [_jsx("rect", { fill: "none", height: focusOutline.outer.height, stroke: outlineColor, strokeWidth: outlineStrokeWidth, width: focusOutline.outer.width, x: focusOutline.outer.x, y: focusOutline.outer.y }), _jsx("rect", { fill: "none", height: focusOutline.inner.height, stroke: innerColor, strokeWidth: innerStrokeWidth, width: focusOutline.inner.width, x: focusOutline.inner.x, y: focusOutline.inner.y })] }));
 };
-exports.SelectionAreaFocusRing = SelectionAreaFocusRing;
 /**
  * Selection area overlay
  */
-const SelectionArea = ({ currentRange, dataLength, dataTestId, endX, height, onBlur, onFocus, onKeyDown, onMouseDown, onTouchStart, screenReaderText, selectionConfig, startX, }) => {
+export const SelectionArea = ({ currentRange, dataLength, dataTestId, endX, height, onBlur, onFocus, onKeyDown, onMouseDown, onTouchStart, screenReaderText, selectionConfig, startX, }) => {
     // Check if overlay should be hidden based on design specs:
     // "Only visible when a range is defined"
-    const shouldHideOverlay = selectionConfig.hideOverlayOnFullRange && (0, rangeAndPositions_1.isFullRange)(currentRange, dataLength);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("rect", { "aria-label": screenReaderText, "aria-valuemax": dataLength - 1, "aria-valuemin": 0, "aria-valuetext": screenReaderText, cursor: "grab", "data-testid": dataTestId, fill: selectionConfig.fill, fillOpacity: selectionConfig.fillOpacity, height: height, role: "slider", stroke: selectionConfig.stroke, strokeWidth: selectionConfig.strokeWidth, style: {
+    const shouldHideOverlay = selectionConfig.hideOverlayOnFullRange && isFullRange(currentRange, dataLength);
+    return (_jsx(_Fragment, { children: _jsx("rect", { "aria-label": screenReaderText, "aria-valuemax": dataLength - 1, "aria-valuemin": 0, "aria-valuetext": screenReaderText, cursor: "grab", "data-testid": dataTestId, fill: selectionConfig.fill, fillOpacity: selectionConfig.fillOpacity, height: height, role: "slider", stroke: selectionConfig.stroke, strokeWidth: selectionConfig.strokeWidth, style: {
                 outline: 'none',
                 visibility: shouldHideOverlay ? 'hidden' : 'visible',
             }, tabIndex: 0, width: endX - startX, x: startX, y: 0, onBlur: onBlur, onFocus: onFocus, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onTouchStart: onTouchStart }) }));
 };
-exports.SelectionArea = SelectionArea;