@kubit-ui-web/react-charts 1.9.0 → 1.10.0

package/dist/esm/components/path/path.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useImperativeHandle, useRef, } from 'react';
+import { FocusRing } from '../../components/focusRing/focusRing';
 import { useFocus } from '../../hooks/useFocus/useFocus';
 import { useHover } from '../../hooks/useHover/useHover';
+import { adaptLegacyFocusConfig } from '../../utils/adaptLegacyFocusConfig/adaptLegacyFocusConfig';
 import { cssGradientToSVG } from '../../utils/cssGradientToSvg/cssGradientToSvg';
 import { pickCustomAttributes } from '../../utils/pickCustomAttributes/pickCustomAttributes';
 import { ShadowSvg } from '../../utils/shadowSvg/shadowSvg';
@@ -15,7 +17,7 @@ const ENTER = {
 };
 const SHADOW_FILTER_ID = 'shadow';
 /**
- * Represents a customizable SVG path component in
+ * Represents a customizable SVG path component with FocusRing integration
  *
  * This component renders an SVG path with various customizable properties such as fill color, stroke color, and stroke width.
  * It supports dynamic SVG gradients through a utility function, interactive event handlers, and accessibility features.
@@ -26,7 +28,8 @@ const SHADOW_FILTER_ID = 'shadow';
  * @param {string} [props.gradient] - A CSS gradient string that will be converted to an SVG gradient.
  * @param {string | number} [props.dataValue] - The value of the represented data.
  * @param {string} [props.d] - The SVG path data string.
- * @param {number} [props.tabIndex] - The tab index for keyboard navigation.
+ * @param {number} [props.tabIndex=0] - The tab index for keyboard navigation. Defaults to 0 (focusable). Set to -1 to exclude from tab order.
+ * @param {FocusConfig} [props.focusConfig] - Configuration for the focus ring appearance and behavior. Defaults to adaptive variant.
  * @param {Function} [props.onClick] - Click event handler.
  * @param {Function} [props.onMouseEnter] - Mouse enter event handler.
  * @param {Function} [props.onMouseLeave] - Mouse leave event handler.
@@ -43,16 +46,26 @@ const SHADOW_FILTER_ID = 'shadow';
  * @param {Array} [props.points] - An array of points for rendering nodes along the path.
  * @param {Object} [props.nodeConfig] - Configuration for the nodes.
  *
- * @returns {ReactElement} A React element representing the SVG path.
+ * @returns {ReactElement} A React element representing the SVG path with FocusRing.
  */
-const PathComponent = ({ classNames = '', fill = 'transparent', stroke = '#0000FF', strokeWidth = '1', focusConfig = {
+const PathComponent = ({ classNames = '', fill = 'transparent', stroke = '#0000FF', 
+// NOTE: Default strokeWidth='1' affects FocusRing calculations in adaptive variant.
+// FocusRing adds originalStrokeWidth to focus ring widths. If using fill-only paths
+// (like Bar), pass strokeWidth="0" explicitly to avoid inflated focus rings.
+strokeWidth = '1', focusConfig, hoverConfig = {
     stroke: '#0000FF',
     strokeWidth: '0.5',
-}, hoverConfig = {
-    stroke: '#0000FF',
-    strokeWidth: '0.5',
-}, role = 'img', ...props }, ref) => {
+}, role = 'img', tabIndex = 0, // Default to 0 for keyboard accessibility
+...props }, ref) => {
     const { handleBlur, handleFocus, isFocused } = useFocus(props.onFocus, props.onBlur);
+    /**
+     * Translate StyleProps focusConfig to FocusConfig for FocusRing component.
+     * Maps: stroke → outlineColor, strokeWidth → outlineStrokeWidth
+     *
+     * @deprecated This adapter will be removed in the next major version when
+     * focusConfig prop uses FocusConfig type directly.
+     */
+    const resolvedFocusConfig = adaptLegacyFocusConfig(focusConfig);
     const { handleMouseEnter, handleMouseLeave, isHovered } = useHover(props.onMouseEnter, props.onMouseLeave);
     const pathRef = useRef(null);
     const nodeRef = useRef([]);
@@ -85,7 +98,7 @@ const PathComponent = ({ classNames = '', fill = 'transparent', stroke = '#0000F
     const gradientSvgElement = props.gradient && cssGradientToSVG(props.gradient);
     // Extract custom data-* and aria-* attributes
     const customAttributes = pickCustomAttributes(props);
-    // Merge props to include focus and hover styles
+    // Merge props to include hover styles (focus is now handled by FocusRing)
     const defaultProps = {
         ...props,
         classNames: `path ${classNames}`,
@@ -94,13 +107,13 @@ const PathComponent = ({ classNames = '', fill = 'transparent', stroke = '#0000F
         role,
         stroke,
         strokeWidth,
+        tabIndex,
     };
     const mergedProps = {
         ...defaultProps,
-        ...(isFocused && focusConfig),
         ...(isHovered && hoverConfig),
     };
-    return (_jsxs("g", { ref: mainRef, 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 &&
+    return (_jsxs("g", { ref: mainRef, children: [gradientSvgElement && gradientSvgElement, mergedProps.shadowSvgConfig && (_jsx(ShadowSvg, { id: SHADOW_FILTER_ID, shadowSvgConfig: mergedProps.shadowSvgConfig })), _jsx(FocusRing, { dataTestId: `${mergedProps.dataTestId}-focus-ring`, focusConfig: resolvedFocusConfig, isFocused: isFocused, targetRef: pathRef }), _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 = {

package/dist/esm/components/path/path.types.d.ts

@@ -45,6 +45,15 @@ export interface PathProps extends StyleProps, AriaAttributes, DataAttributes {
     classNames?: string;
     gradient?: string;
     shadowSvgConfig?: ShadowSvgConfig;
+    /**
+     * Focus styling configuration.
+     * Uses StyleProps interface - internally translated to FocusRing configuration.
+     * Only `stroke` and `strokeWidth` are mapped to the FocusRing component
+     * (stroke → outlineColor, strokeWidth → outlineStrokeWidth).
+     *
+     * @deprecated In the next major version, this prop will use a more restrictive interface
+     * based on FocusConfig type. Other StyleProps fields are currently ignored.
+     */
     focusConfig?: StyleProps;
     hoverConfig?: StyleProps;
     dataValue?: string | number | IDataPoint[];

package/dist/esm/components/path/path.types.d.ts.map

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

package/dist/esm/types/focusConfig.type.d.ts

@@ -1,11 +1,15 @@
 /**
  * Configuration for the focus effect.
  *
+ * **Important**: All numeric values (stroke widths and gap) are relative to the SVG viewBox coordinate system,
+ * not pixel values. This means the same values may appear different in size depending on the chart's viewBox dimensions.
+ * For example, a value of 2 in a chart with viewBox 200x200 will appear larger than the same value in a chart with viewBox 100x80.
+ *
  * - `outlineColor` - Color of the outer outline when focused. Defaults to #0078D7.
- * - `outlineStrokeWidth` - Stroke width of the outer outline. Defaults to 2.
+ * - `outlineStrokeWidth` - Stroke width of the outer outline (viewBox-relative). Defaults to 2.
  * - `innerColor` - Color of the inner outline when focused. Defaults to #FFFFFF.
- * - `innerStrokeWidth` - Stroke width of the inner outline. Defaults to 2.
- * - `gap` - Gap between the element and the focus rings. Defaults to 0.
+ * - `innerStrokeWidth` - Stroke width of the inner outline (viewBox-relative). Defaults to 2.
+ * - `gap` - Gap between the element and the focus rings (viewBox-relative). Defaults to 0.
  *   Note: Only applies when variant is 'bounding-box'. Ignored in 'adaptive' mode.
  * - `variant` - Focus ring rendering mode. Defaults to 'adaptive'.
  *   - 'adaptive': Ring follows the exact shape of the element (circle → circular ring, path → path ring)
@@ -13,10 +17,12 @@
  */
 export interface FocusConfig {
     outlineColor?: string;
+    /** Stroke width in viewBox coordinate units (not pixels) */
     outlineStrokeWidth?: number;
     innerColor?: string;
+    /** Stroke width in viewBox coordinate units (not pixels) */
     innerStrokeWidth?: number;
-    /** Only applicable when variant is 'bounding-box' */
+    /** Gap in viewBox coordinate units (not pixels). Only applicable when variant is 'bounding-box' */
     gap?: number;
     variant?: 'adaptive' | 'bounding-box';
 }
@@ -25,11 +31,11 @@ export declare const FOCUS_DEFAULT: {
     readonly FOCUS_COLOR: "#0078D4";
     /** Focus ring inner border */
     readonly FOCUS_INNER: "#ffffff";
-    /** Focus ring inner stroke width */
+    /** Focus ring inner stroke width (viewBox-relative units) */
     readonly INNER_FOCUS_STROKE_WIDTH: 2;
-    /** Focus ring outer stroke width */
+    /** Focus ring outer stroke width (viewBox-relative units) */
     readonly OUTER_FOCUS_STROKE_WIDTH: 2;
-    /** Gap between element and outlines (only applies in bounding-box variant) */
+    /** Gap between element and outlines in viewBox-relative units (only applies in bounding-box variant) */
     readonly OUTLINES_GAP: 0;
     /** Focus ring rendering variant */
     readonly VARIANT: "adaptive";

package/dist/esm/types/focusConfig.type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focusConfig.type.d.ts","sourceRoot":"","sources":["../../../src/types/focusConfig.type.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,WAAW;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qDAAqD;IACrD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC;CACvC;AAED,eAAO,MAAM,aAAa;IACxB,uBAAuB;;IAEvB,8BAA8B;;IAE9B,oCAAoC;;IAEpC,oCAAoC;;IAEpC,8EAA8E;;IAE9E,mCAAmC;;CAE3B,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,cAAc,WAAW,KAAG,QAAQ,CAAC,WAAW,CAO7E,CAAC"}
+{"version":3,"file":"focusConfig.type.d.ts","sourceRoot":"","sources":["../../../src/types/focusConfig.type.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,WAAW;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4DAA4D;IAC5D,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mGAAmG;IACnG,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC;CACvC;AAED,eAAO,MAAM,aAAa;IACxB,uBAAuB;;IAEvB,8BAA8B;;IAE9B,6DAA6D;;IAE7D,6DAA6D;;IAE7D,wGAAwG;;IAExG,mCAAmC;;CAE3B,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,cAAc,WAAW,KAAG,QAAQ,CAAC,WAAW,CAO7E,CAAC"}

package/dist/esm/types/focusConfig.type.js

@@ -3,11 +3,11 @@ export const FOCUS_DEFAULT = {
     FOCUS_COLOR: '#0078D4',
     /** Focus ring inner border */
     FOCUS_INNER: '#ffffff',
-    /** Focus ring inner stroke width */
+    /** Focus ring inner stroke width (viewBox-relative units) */
     INNER_FOCUS_STROKE_WIDTH: 2,
-    /** Focus ring outer stroke width */
+    /** Focus ring outer stroke width (viewBox-relative units) */
     OUTER_FOCUS_STROKE_WIDTH: 2,
-    /** Gap between element and outlines (only applies in bounding-box variant) */
+    /** Gap between element and outlines in viewBox-relative units (only applies in bounding-box variant) */
     OUTLINES_GAP: 0,
     /** Focus ring rendering variant */
     VARIANT: 'adaptive',

package/dist/esm/utils/adaptLegacyFocusConfig/adaptLegacyFocusConfig.d.ts

@@ -0,0 +1,20 @@
+import type { StyleProps } from '../../components/path/path.types';
+import type { FocusConfig } from '../../types/focusConfig.type';
+/**
+ * Adapts legacy StyleProps focusConfig to the new FocusConfig format.
+ *
+ * Only maps properties that have semantic equivalence:
+ * - `stroke` → `outlineColor` (color of the focus ring outline)
+ * - `strokeWidth` → `outlineStrokeWidth` and `innerStrokeWidth` (width of both focus rings)
+ *
+ * Other StyleProps properties (fill, fillOpacity, strokeDasharray, etc.) are ignored
+ * as they don't have meaningful equivalents in the new FocusRing component.
+ *
+ * @deprecated This adapter exists for backward compatibility only.
+ * It will be removed in the next major version along with the legacy focusConfig prop.
+ *
+ * @param legacy - Legacy focusConfig using StyleProps interface
+ * @returns FocusConfig compatible object, or undefined if no legacy config provided
+ */
+export declare const adaptLegacyFocusConfig: (legacy?: StyleProps) => FocusConfig | undefined;
+//# sourceMappingURL=adaptLegacyFocusConfig.d.ts.map

package/dist/esm/utils/adaptLegacyFocusConfig/adaptLegacyFocusConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"adaptLegacyFocusConfig.d.ts","sourceRoot":"","sources":["../../../../src/utils/adaptLegacyFocusConfig/adaptLegacyFocusConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAE5D;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,sBAAsB,GAAI,SAAS,UAAU,KAAG,WAAW,GAAG,SAU1E,CAAC"}

package/dist/esm/utils/adaptLegacyFocusConfig/adaptLegacyFocusConfig.js

@@ -0,0 +1,27 @@
+/**
+ * Adapts legacy StyleProps focusConfig to the new FocusConfig format.
+ *
+ * Only maps properties that have semantic equivalence:
+ * - `stroke` → `outlineColor` (color of the focus ring outline)
+ * - `strokeWidth` → `outlineStrokeWidth` and `innerStrokeWidth` (width of both focus rings)
+ *
+ * Other StyleProps properties (fill, fillOpacity, strokeDasharray, etc.) are ignored
+ * as they don't have meaningful equivalents in the new FocusRing component.
+ *
+ * @deprecated This adapter exists for backward compatibility only.
+ * It will be removed in the next major version along with the legacy focusConfig prop.
+ *
+ * @param legacy - Legacy focusConfig using StyleProps interface
+ * @returns FocusConfig compatible object, or undefined if no legacy config provided
+ */
+export const adaptLegacyFocusConfig = (legacy) => {
+    if (!legacy) {
+        return undefined;
+    }
+    const strokeWidth = legacy.strokeWidth ? Number(legacy.strokeWidth) : undefined;
+    return {
+        innerStrokeWidth: strokeWidth,
+        outlineColor: legacy.stroke,
+        outlineStrokeWidth: strokeWidth,
+    };
+};

package/dist/esm/utils/adaptLegacyFocusConfig/index.d.ts

@@ -0,0 +1,2 @@
+export { adaptLegacyFocusConfig } from './adaptLegacyFocusConfig';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/utils/adaptLegacyFocusConfig/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/adaptLegacyFocusConfig/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/esm/utils/adaptLegacyFocusConfig/index.js

@@ -0,0 +1 @@
+export { adaptLegacyFocusConfig } from './adaptLegacyFocusConfig';