@kubit-ui-web/react-charts 1.5.0 → 1.6.0

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 import { SvgContainer } from '../../components/svgContainer/svgContainer';
-import { getFocusConfig } from '../../utils/calculateFocusOutline/calculateFocusOutline';
 import { getDataFingerprint } from '../../utils/getDataFingerprint/getDataFingerprint';
+import { FocusRing } from '../focusRing/focusRing';
 import { LineRenderer } from './components/LineRenderer';
-import { SelectionArea, SelectionAreaFocusRing } from './components/SelectionArea';
+import { SelectionArea } from './components/SelectionArea';
 import { ZoomHandler } from './components/ZoomHandler';
 import { useDragInteraction } from './hooks/useDragInteraction';
 import { useKeyboardNavigation } from './hooks/useKeyboardNavigation';
@@ -34,8 +34,6 @@ initialRange, interactionConfig, lines, onDataChange, role, screenReaderTextConf
     const resolvedInteractionConfig = getInteractionConfig(interactionConfig);
     // Resolve selection config with defaults
     const resolvedSelectionConfig = getSelectionConfig(selectionConfig);
-    // Resolve focus config with defaults
-    const resolvedFocusConfig = getFocusConfig(focusConfig);
     // Hook for core data filtering functionality
     const { currentRange, handleRangeChange } = useZoomData({
         data,
@@ -52,6 +50,8 @@ initialRange, interactionConfig, lines, onDataChange, role, screenReaderTextConf
     // Create a fingerprint of the data/lines to avoid unnecessary updates
     const dataFingerprint = getDataFingerprint(data);
     const linesFingerprint = JSON.stringify(lines);
+    // Create ref for SelectionArea to enable separate focus ring rendering
+    const selectionAreaRef = useRef(null);
     const accessibilityLabels = generateAccessibilityLabels(data, xKey, currentRange, screenReaderTextConfig);
     // Memoize expensive line calculations
     const linesData = useMemo(() => {
@@ -76,5 +76,5 @@ initialRange, interactionConfig, lines, onDataChange, role, screenReaderTextConf
     });
     return (_jsxs(SvgContainer, { ref: groupRef, ariaHidden: ariaHidden, ariaLabel: ariaLabel, backgroundColor: backgroundColor, caption: caption, className: classNames, "data-testid": dataTestId, height: height, 
         // set overflow visible so handlers and focus rings are visible always
-        overflow: "visible", role: role, viewBox: viewBox, width: width, ...eventHandlers, children: [_jsx(LineRenderer, { linesData: linesData }), _jsx(SelectionArea, { currentRange: currentRange, dataLength: data.length, dataTestId: `${dataTestId}-selection-area`, endX: endX, height: parsedCanvas.height, screenReaderText: accessibilityLabels.selectionArea, selectionConfig: resolvedSelectionConfig, startX: startX, onBlur: handleBlur, onFocus: handleFocus(ZoomAreaElements.SELECTION_AREA), onKeyDown: handleKeyDown(ZoomAreaElements.SELECTION_AREA), onMouseDown: handleMouseDown(ZoomAreaElements.SELECTION_AREA), onTouchStart: handleTouchStart(ZoomAreaElements.SELECTION_AREA) }), _jsx(ZoomHandler, { dataTestId: `${dataTestId}-start-handler`, focusConfig: resolvedFocusConfig, handlerConfig: handlerConfig, height: parsedCanvas.height, isFocused: isFocused(ZoomAreaElements.START_HANDLER), max: currentRange.end - resolvedInteractionConfig.minHandlerDistance, min: 0, screenReaderText: accessibilityLabels.startHandler, type: ZoomAreaElements.START_HANDLER, value: currentRange.start, x: startX, onBlur: handleBlur, onFocus: handleFocus(ZoomAreaElements.START_HANDLER), onKeyDown: handleKeyDown(ZoomAreaElements.START_HANDLER), onMouseDown: handleMouseDown(ZoomAreaElements.START_HANDLER), onTouchStart: handleTouchStart(ZoomAreaElements.START_HANDLER) }), _jsx(ZoomHandler, { dataTestId: `${dataTestId}-end-handler`, focusConfig: resolvedFocusConfig, handlerConfig: handlerConfig, height: parsedCanvas.height, isFocused: isFocused(ZoomAreaElements.END_HANDLER), max: data.length - 1, min: currentRange.start + resolvedInteractionConfig.minHandlerDistance, screenReaderText: accessibilityLabels.endHandler, type: ZoomAreaElements.END_HANDLER, value: currentRange.end, x: endX, onBlur: handleBlur, onFocus: handleFocus(ZoomAreaElements.END_HANDLER), onKeyDown: handleKeyDown(ZoomAreaElements.END_HANDLER), onMouseDown: handleMouseDown(ZoomAreaElements.END_HANDLER), onTouchStart: handleTouchStart(ZoomAreaElements.END_HANDLER) }), _jsx(SelectionAreaFocusRing, { endX: endX, focusConfig: resolvedFocusConfig, height: parsedCanvas.height, isFocused: isFocused(ZoomAreaElements.SELECTION_AREA), startX: startX })] }));
+        overflow: "visible", role: role, viewBox: viewBox, width: width, ...eventHandlers, children: [_jsx(LineRenderer, { linesData: linesData }), _jsx(SelectionArea, { ref: selectionAreaRef, currentRange: currentRange, dataLength: data.length, dataTestId: `${dataTestId}-selection-area`, endX: endX, height: parsedCanvas.height, screenReaderText: accessibilityLabels.selectionArea, selectionConfig: resolvedSelectionConfig, startX: startX, onBlur: handleBlur, onFocus: handleFocus(ZoomAreaElements.SELECTION_AREA), onKeyDown: handleKeyDown(ZoomAreaElements.SELECTION_AREA), onMouseDown: handleMouseDown(ZoomAreaElements.SELECTION_AREA), onTouchStart: handleTouchStart(ZoomAreaElements.SELECTION_AREA) }), _jsx(ZoomHandler, { dataTestId: `${dataTestId}-start-handler`, focusConfig: focusConfig, handlerConfig: handlerConfig, height: parsedCanvas.height, isFocused: isFocused(ZoomAreaElements.START_HANDLER), max: currentRange.end - resolvedInteractionConfig.minHandlerDistance, min: 0, screenReaderText: accessibilityLabels.startHandler, type: ZoomAreaElements.START_HANDLER, value: currentRange.start, x: startX, onBlur: handleBlur, onFocus: handleFocus(ZoomAreaElements.START_HANDLER), onKeyDown: handleKeyDown(ZoomAreaElements.START_HANDLER), onMouseDown: handleMouseDown(ZoomAreaElements.START_HANDLER), onTouchStart: handleTouchStart(ZoomAreaElements.START_HANDLER) }), _jsx(ZoomHandler, { dataTestId: `${dataTestId}-end-handler`, focusConfig: focusConfig, handlerConfig: handlerConfig, height: parsedCanvas.height, isFocused: isFocused(ZoomAreaElements.END_HANDLER), max: data.length - 1, min: currentRange.start + resolvedInteractionConfig.minHandlerDistance, screenReaderText: accessibilityLabels.endHandler, type: ZoomAreaElements.END_HANDLER, value: currentRange.end, x: endX, onBlur: handleBlur, onFocus: handleFocus(ZoomAreaElements.END_HANDLER), onKeyDown: handleKeyDown(ZoomAreaElements.END_HANDLER), onMouseDown: handleMouseDown(ZoomAreaElements.END_HANDLER), onTouchStart: handleTouchStart(ZoomAreaElements.END_HANDLER) }), _jsx(FocusRing, { dataTestId: "selection-area-focus", focusConfig: { ...focusConfig, variant: 'bounding-box' }, isFocused: isFocused(ZoomAreaElements.SELECTION_AREA), targetRef: selectionAreaRef })] }));
 };

package/dist/cjs/components/zoomArea/zoomArea.type.d.ts

@@ -121,7 +121,7 @@ export interface ZoomAreaProps {
     /** Custom selection area configuration */
     selectionConfig?: ZoomAreaSelectionConfig;
     /** Custom focus configuration applied to all focusable elements */
-    focusConfig?: FocusConfig;
+    focusConfig?: Omit<FocusConfig, 'variant'>;
     /** Configuration for interaction behavior (keyboard navigation, handler distances) */
     interactionConfig?: ZoomAreaInteractionConfig;
     /** Configuration for accessibility label templates */

package/dist/cjs/components/zoomArea/zoomArea.type.d.ts.map

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

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

@@ -3,16 +3,22 @@
  *
  * - `outlineColor` - Color of the outer outline when focused. Defaults to #0078D7.
  * - `outlineStrokeWidth` - Stroke width of the outer outline. Defaults to 2.
- * - `innerStrokeColor` - Color of the inner outline when focused. Defaults to #FFFFFF.
+ * - `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 inner and outer outline. Defaults to 0.
+ * - `gap` - Gap between the element and the focus rings. 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)
+ *   - 'bounding-box': Ring is always rectangular, wrapping the element's bounding box
  */
 export interface FocusConfig {
     outlineColor?: string;
     outlineStrokeWidth?: number;
     innerColor?: string;
     innerStrokeWidth?: number;
+    /** Only applicable when variant is 'bounding-box' */
     gap?: number;
+    variant?: 'adaptive' | 'bounding-box';
 }
 export declare const FOCUS_DEFAULT: {
     /** Focus ring color */
@@ -23,7 +29,13 @@ export declare const FOCUS_DEFAULT: {
     readonly INNER_FOCUS_STROKE_WIDTH: 2;
     /** Focus ring outer stroke width */
     readonly OUTER_FOCUS_STROKE_WIDTH: 2;
-    /** Gap between element and outlines */
+    /** Gap between element and outlines (only applies in bounding-box variant) */
     readonly OUTLINES_GAP: 0;
+    /** Focus ring rendering variant */
+    readonly VARIANT: "adaptive";
 };
+/**
+ * Helper function to get complete focus config with defaults applied
+ */
+export declare const getFocusConfig: (focusConfig?: FocusConfig) => Required<FocusConfig>;
 //# sourceMappingURL=focusConfig.type.d.ts.map

package/dist/cjs/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;;;;;;;;GAQG;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,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,aAAa;IACxB,uBAAuB;;IAEvB,8BAA8B;;IAE9B,oCAAoC;;IAEpC,oCAAoC;;IAEpC,uCAAuC;;CAE/B,CAAC"}
+{"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"}

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

@@ -7,6 +7,19 @@ export const FOCUS_DEFAULT = {
     INNER_FOCUS_STROKE_WIDTH: 2,
     /** Focus ring outer stroke width */
     OUTER_FOCUS_STROKE_WIDTH: 2,
-    /** Gap between element and outlines */
+    /** Gap between element and outlines (only applies in bounding-box variant) */
     OUTLINES_GAP: 0,
+    /** Focus ring rendering variant */
+    VARIANT: 'adaptive',
 };
+/**
+ * Helper function to get complete focus config with defaults applied
+ */
+export const getFocusConfig = (focusConfig) => ({
+    gap: focusConfig?.gap ?? FOCUS_DEFAULT.OUTLINES_GAP,
+    innerColor: focusConfig?.innerColor ?? FOCUS_DEFAULT.FOCUS_INNER,
+    innerStrokeWidth: focusConfig?.innerStrokeWidth ?? FOCUS_DEFAULT.INNER_FOCUS_STROKE_WIDTH,
+    outlineColor: focusConfig?.outlineColor ?? FOCUS_DEFAULT.FOCUS_COLOR,
+    outlineStrokeWidth: focusConfig?.outlineStrokeWidth ?? FOCUS_DEFAULT.OUTER_FOCUS_STROKE_WIDTH,
+    variant: focusConfig?.variant ?? FOCUS_DEFAULT.VARIANT,
+});

package/dist/esm/charts/lineChart/fragments/lineChartPath.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lineChartPath.d.ts","sourceRoot":"","sources":["../../../../../src/charts/lineChart/fragments/lineChartPath.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAoD,MAAM,OAAO,CAAC;AAWlF,OAAO,KAAK,EAAc,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAIxE,OAAO,qBAAqB,CAAC;AAO7B,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA8LhD,CAAC"}
+{"version":3,"file":"lineChartPath.d.ts","sourceRoot":"","sources":["../../../../../src/charts/lineChart/fragments/lineChartPath.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAoD,MAAM,OAAO,CAAC;AAWlF,OAAO,KAAK,EAAc,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAIxE,OAAO,qBAAqB,CAAC;AAO7B,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAoMhD,CAAC"}

package/dist/esm/charts/lineChart/fragments/lineChartPath.js

@@ -65,9 +65,13 @@ export const LineChartPath = ({ ariaLabel, closestClick, curved, getNodeFocusInf
     const pressedRef = useRef(null);
     // the projection line logic
     const { autoClick, lineIndicator, ...nodeIndicatorConfig } = indicatorConfig || {};
-    // line indicator <Y> coordinates
-    const y1 = context.extraSpaceTopY;
-    const y2 = Number(context.canvasHeight) - context.extraSpaceBottomY;
+    // Calculate line indicator boundaries using pre-calculated axis coordinates
+    // Y-axis: spans from top to bottom of chart area
+    const { y1, y2 } = yAxisCoordinates.coordinates;
+    // X-axis: constrain to path area to prevent overflow into axis labels
+    // The indicator should only render within the data visualization area
+    const { x1: pathAreaMinX, x2: pathAreaMaxX } = xAxisCoordinates.coordinates;
+    const isCursorWithinPathArea = context.xCursor >= pathAreaMinX && context.xCursor <= pathAreaMaxX;
     // the path
     const { tickValues: xTickValues } = xAxisCoordinates;
     const { tickValues: yTickValues } = yAxisCoordinates;
@@ -141,5 +145,5 @@ export const LineChartPath = ({ ariaLabel, closestClick, curved, getNodeFocusInf
         // Handle deprecated ariaLabel - give precedence to ariaLabel for backward compatibility
         ...(ariaLabel && { 'aria-label': ariaLabel }),
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Path, { ref: innerRefs, d: dataOnlyLine, dFill: dataFill, dataTestId: `${context.dataTestId}path`, dataValue: context.data, points: points, xKey: context.xKey, onClick: handleClick, ...mergedProps }), lineProjection && (_jsx(LineChartProjection, { curved: curved, dataKey: props.dataKey, lineProjection: lineProjection, points: points, svgHeight: Number(context.canvasHeight) - context.extraSpaceBottomY })), showIndicator && (_jsxs(_Fragment, { children: [!!lineIndicator && (_jsx(Line, { ...lineIndicator, className: "pointer-events-none", x1: context.xCursor, x2: context.xCursor, y1: y1, y2: y2 })), _jsx("g", { ref: indicatorRef, className: "pointer-events-none", children: _jsx(Node, { ...nodeIndicatorConfig }) })] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Path, { ref: innerRefs, d: dataOnlyLine, dFill: dataFill, dataTestId: `${context.dataTestId}path`, dataValue: context.data, points: points, xKey: context.xKey, onClick: handleClick, ...mergedProps }), lineProjection && (_jsx(LineChartProjection, { curved: curved, dataKey: props.dataKey, lineProjection: lineProjection, points: points, svgHeight: Number(context.canvasHeight) - context.extraSpaceBottomY })), showIndicator && (_jsxs(_Fragment, { children: [!!lineIndicator && isCursorWithinPathArea && (_jsx(Line, { ...lineIndicator, className: "pointer-events-none", x1: context.xCursor, x2: context.xCursor, y1: y1, y2: y2 })), _jsx("g", { ref: indicatorRef, className: "pointer-events-none", children: _jsx(Node, { ...nodeIndicatorConfig }) })] }))] }));
 };

package/dist/esm/components/focusRing/components/FocusRingInline.d.ts

@@ -0,0 +1,25 @@
+import { type ReactElement } from 'react';
+import type { FocusConfig } from '../../../types/focusConfig.type';
+export interface FocusRingInlineProps {
+    children: ReactElement;
+    isFocused: boolean;
+    disabled?: boolean;
+    dataTestId?: string;
+    focusConfig?: FocusConfig;
+}
+/**
+ * FocusRing component for inline mode (children).
+ * Wraps the element and renders focus ring inline with automatic z-order.
+ *
+ * This component:
+ * - Clones the children element and attaches a ref to it
+ * - Detects element bounds on mount and when focus state changes
+ * - Renders the focus ring BEFORE the element (proper z-order)
+ * - Handles both adaptive and bounding-box variants
+ * - Preserves any existing ref the children might have
+ *
+ * @param props - FocusRingInlineProps
+ * @returns JSX element with focus ring + wrapped children
+ */
+export declare const FocusRingInline: React.FC<FocusRingInlineProps>;
+//# sourceMappingURL=FocusRingInline.d.ts.map

package/dist/esm/components/focusRing/components/FocusRingInline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusRingInline.d.ts","sourceRoot":"","sources":["../../../../../src/components/focusRing/components/FocusRingInline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAwB,MAAM,OAAO,CAAC;AAEhE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAM5D,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,YAAY,CAAC;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAoC1D,CAAC"}

package/dist/esm/components/focusRing/components/FocusRingInline.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, useRef } from 'react';
+import { useFocusRingData } from '../hooks/useFocusRingData';
+import { composeRefs } from '../utils/composeRefs';
+import { FocusRingRenderer } from './FocusRingRenderer';
+/**
+ * FocusRing component for inline mode (children).
+ * Wraps the element and renders focus ring inline with automatic z-order.
+ *
+ * This component:
+ * - Clones the children element and attaches a ref to it
+ * - Detects element bounds on mount and when focus state changes
+ * - Renders the focus ring BEFORE the element (proper z-order)
+ * - Handles both adaptive and bounding-box variants
+ * - Preserves any existing ref the children might have
+ *
+ * @param props - FocusRingInlineProps
+ * @returns JSX element with focus ring + wrapped children
+ */
+export const FocusRingInline = ({ children, dataTestId = 'focus-ring', disabled = false, focusConfig, isFocused, }) => {
+    // Create ref for the SVG graphics element
+    const childrenRef = useRef(null);
+    const { layers } = useFocusRingData({
+        elementRef: childrenRef,
+        focusConfig,
+        isFocused,
+    });
+    // Extract the ref from children safely
+    // Children might have a ref attached, we need to preserve it while adding our own
+    const childrenWithRef = children;
+    const combinedRef = composeRefs(childrenRef, childrenWithRef.ref);
+    // Clone children and add ref (but NOT event handlers - parent manages those)
+    const wrappedChildren = cloneElement(children, {
+        ref: combinedRef,
+    });
+    return (_jsxs(_Fragment, { children: [isFocused && !disabled && (_jsx(FocusRingRenderer, { dataTestId: dataTestId, layers: layers ?? undefined })), wrappedChildren] }));
+};

package/dist/esm/components/focusRing/components/FocusRingRenderer.d.ts

@@ -0,0 +1,13 @@
+import type { FocusRingRendererProps } from '../focusRing.types';
+/**
+ * Internal component that renders the actual focus ring elements.
+ * Supports both adaptive and bounding-box strategies with a unified rendering approach.
+ *
+ * This is a pure presentational component that receives pre-calculated FocusRingLayers
+ * and renders the appropriate SVG elements using React.createElement.
+ *
+ * @param props - FocusRingRendererProps
+ * @returns JSX element with focus ring SVG elements, or null if no valid data
+ */
+export declare const FocusRingRenderer: React.FC<FocusRingRendererProps>;
+//# sourceMappingURL=FocusRingRenderer.d.ts.map

package/dist/esm/components/focusRing/components/FocusRingRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusRingRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/components/focusRing/components/FocusRingRenderer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAEjE;;;;;;;;;GASG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAkB9D,CAAC"}

package/dist/esm/components/focusRing/components/FocusRingRenderer.js

@@ -0,0 +1,25 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement } from 'react';
+/**
+ * Internal component that renders the actual focus ring elements.
+ * Supports both adaptive and bounding-box strategies with a unified rendering approach.
+ *
+ * This is a pure presentational component that receives pre-calculated FocusRingLayers
+ * and renders the appropriate SVG elements using React.createElement.
+ *
+ * @param props - FocusRingRendererProps
+ * @returns JSX element with focus ring SVG elements, or null if no valid data
+ */
+export const FocusRingRenderer = ({ dataTestId, layers }) => {
+    if (!layers) {
+        return null;
+    }
+    // Unified rendering: both adaptive and bounding-box use the same structure
+    return (_jsxs("g", { className: "focus-ring-container", pointerEvents: "none", children: [createElement(layers.outerRing.type, {
+                ...layers.outerRing.props,
+                'data-testid': `${dataTestId}-focus-outer`,
+            }), createElement(layers.innerRing.type, {
+                ...layers.innerRing.props,
+                'data-testid': `${dataTestId}-focus-inner`,
+            })] }));
+};

package/dist/esm/components/focusRing/components/FocusRingSeparate.d.ts

@@ -0,0 +1,40 @@
+import type { RefObject } from 'react';
+import type { FocusConfig } from '../../../types/focusConfig.type';
+export interface FocusRingSeparateProps {
+    targetRef: RefObject<SVGGraphicsElement>;
+    isFocused: boolean;
+    disabled?: boolean;
+    dataTestId?: string;
+    focusConfig?: FocusConfig;
+}
+/**
+ * FocusRing component for separate mode (targetRef).
+ * Renders only the focus ring, allowing precise z-order control.
+ *
+ * This component:
+ * - Uses a ref to the target element (does not wrap it)
+ * - Only renders the focus ring (no children cloning)
+ * - Allows precise z-order control by controlling where FocusRing is placed in JSX
+ * - Handles both adaptive and bounding-box variants
+ *
+ * **IMPORTANT NOTE: Z-Order with Adaptive Variant**
+ *
+ * When using `variant: 'adaptive'` (default), the FocusRing **MUST be rendered BEFORE**
+ * the target element in SVG document order. Otherwise, focus ring strokes will cover the element.
+ *
+ * @param props - FocusRingSeparateProps
+ * @returns JSX element with only focus ring, or null if not focused/disabled
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<SVGCircleElement>(null);
+ *
+ * // CORRECT: FocusRing before element
+ * <>
+ *   <FocusRingSeparate targetRef={ref} isFocused={true} />
+ *   <circle ref={ref} cx={50} cy={50} r={30} />
+ * </>
+ * ```
+ */
+export declare const FocusRingSeparate: React.FC<FocusRingSeparateProps>;
+//# sourceMappingURL=FocusRingSeparate.d.ts.map

package/dist/esm/components/focusRing/components/FocusRingSeparate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusRingSeparate.d.ts","sourceRoot":"","sources":["../../../../../src/components/focusRing/components/FocusRingSeparate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAK5D,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,SAAS,CAAC,kBAAkB,CAAC,CAAC;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAoB9D,CAAC"}

package/dist/esm/components/focusRing/components/FocusRingSeparate.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFocusRingData } from '../hooks/useFocusRingData';
+import { FocusRingRenderer } from './FocusRingRenderer';
+/**
+ * FocusRing component for separate mode (targetRef).
+ * Renders only the focus ring, allowing precise z-order control.
+ *
+ * This component:
+ * - Uses a ref to the target element (does not wrap it)
+ * - Only renders the focus ring (no children cloning)
+ * - Allows precise z-order control by controlling where FocusRing is placed in JSX
+ * - Handles both adaptive and bounding-box variants
+ *
+ * **IMPORTANT NOTE: Z-Order with Adaptive Variant**
+ *
+ * When using `variant: 'adaptive'` (default), the FocusRing **MUST be rendered BEFORE**
+ * the target element in SVG document order. Otherwise, focus ring strokes will cover the element.
+ *
+ * @param props - FocusRingSeparateProps
+ * @returns JSX element with only focus ring, or null if not focused/disabled
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<SVGCircleElement>(null);
+ *
+ * // CORRECT: FocusRing before element
+ * <>
+ *   <FocusRingSeparate targetRef={ref} isFocused={true} />
+ *   <circle ref={ref} cx={50} cy={50} r={30} />
+ * </>
+ * ```
+ */
+export const FocusRingSeparate = ({ dataTestId = 'focus-ring', disabled = false, focusConfig, isFocused, targetRef, }) => {
+    const { layers } = useFocusRingData({
+        elementRef: targetRef,
+        focusConfig,
+        isFocused,
+    });
+    // Early return if not focused or disabled
+    if (!isFocused || disabled) {
+        return null;
+    }
+    // Render focus ring with unified structure
+    return _jsx(FocusRingRenderer, { dataTestId: dataTestId, layers: layers });
+};

package/dist/esm/components/focusRing/focusRing.css

@@ -0,0 +1,14 @@
+.focus-ring-outer {
+    /* Ensure focus rings don't interfere with pointer events */
+    pointer-events: none;
+}
+
+.focus-ring-inner {
+    /* Ensure focus rings don't interfere with pointer events */
+    pointer-events: none;
+}
+
+.focus-ring-container {
+    /* Ensure focus ring group doesn't interfere with interactions */
+    pointer-events: none;
+}

package/dist/esm/components/focusRing/focusRing.d.ts

@@ -0,0 +1,35 @@
+import type { FC } from 'react';
+import './focusRing.css';
+import type { FocusRingProps } from './focusRing.types';
+/**
+ * FocusRing - Controlled, purely decorative component for rendering focus rings around SVG elements.
+ *
+ * **Key Characteristics:**
+ * - **Controlled Component**: Parent manages `isFocused` state
+ * - **Purely Decorative**: Does not intercept or manage events
+ * - **Two Modes**: Inline (children) or Separate (targetRef) rendering
+ * - **Zero Configuration**: Automatic element detection
+ *
+ * **Two Modes:**
+ *
+ * 1. **Inline (children)** - Wraps element, focus ring rendered inline, z-order handled automatically
+ * 2. **Separate (targetRef)** - Only renders focus ring, allows precise z-order control
+ *
+ * **IMPORTANT NOTE: Z-Order with Adaptive Variant**
+ *
+ * When using `variant: 'adaptive'` (default) with `targetRef` mode, the FocusRing **MUST be rendered BEFORE**
+ * the target element in SVG document order. Otherwise, focus ring strokes will cover the element.
+ *
+ * ```tsx
+ * // CORRECT: FocusRing before element
+ * <>
+ *   <FocusRing targetRef={ref} isFocused={focused} />
+ *   <circle ref={ref} cx={50} cy={50} r={30} />
+ * </>
+ * ```
+ *
+ * @param props - FocusRingProps
+ * @returns JSX element with focus ring or null
+ */
+export declare const FocusRing: FC<FocusRingProps>;
+//# sourceMappingURL=focusRing.d.ts.map

package/dist/esm/components/focusRing/focusRing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusRing.d.ts","sourceRoot":"","sources":["../../../../src/components/focusRing/focusRing.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC,OAAO,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAsCxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,SAAS,oBAAqB,CAAC"}

package/dist/esm/components/focusRing/focusRing.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FocusRingInline } from './components/FocusRingInline';
+import { FocusRingSeparate } from './components/FocusRingSeparate';
+import './focusRing.css';
+const FocusRingComponent = ({ children, dataTestId = 'focus-ring', disabled = false, focusConfig, isFocused, targetRef, }) => {
+    if (children) {
+        return (_jsx(FocusRingInline, { dataTestId: dataTestId, disabled: disabled, focusConfig: focusConfig, isFocused: isFocused, children: children }));
+    }
+    if (targetRef) {
+        return (_jsx(FocusRingSeparate, { dataTestId: dataTestId, disabled: disabled, focusConfig: focusConfig, isFocused: isFocused, targetRef: targetRef }));
+    }
+    return null;
+};
+/**
+ * FocusRing - Controlled, purely decorative component for rendering focus rings around SVG elements.
+ *
+ * **Key Characteristics:**
+ * - **Controlled Component**: Parent manages `isFocused` state
+ * - **Purely Decorative**: Does not intercept or manage events
+ * - **Two Modes**: Inline (children) or Separate (targetRef) rendering
+ * - **Zero Configuration**: Automatic element detection
+ *
+ * **Two Modes:**
+ *
+ * 1. **Inline (children)** - Wraps element, focus ring rendered inline, z-order handled automatically
+ * 2. **Separate (targetRef)** - Only renders focus ring, allows precise z-order control
+ *
+ * **IMPORTANT NOTE: Z-Order with Adaptive Variant**
+ *
+ * When using `variant: 'adaptive'` (default) with `targetRef` mode, the FocusRing **MUST be rendered BEFORE**
+ * the target element in SVG document order. Otherwise, focus ring strokes will cover the element.
+ *
+ * ```tsx
+ * // CORRECT: FocusRing before element
+ * <>
+ *   <FocusRing targetRef={ref} isFocused={focused} />
+ *   <circle ref={ref} cx={50} cy={50} r={30} />
+ * </>
+ * ```
+ *
+ * @param props - FocusRingProps
+ * @returns JSX element with focus ring or null
+ */
+export const FocusRing = FocusRingComponent;

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

@@ -0,0 +1,40 @@
+import type { ReactElement, RefObject } from 'react';
+import type { FocusConfig } from '../../types/focusConfig.type';
+import type { FocusRingLayers } from './utils/utils.types';
+export interface FocusRingProps {
+    /**
+     * The SVG graphics element to wrap with focus ring (Mode 1: inline rendering).
+     * Must be a renderable SVG element (path, circle, rect, g, etc.).
+     * Mutually exclusive with targetRef - provide either children OR targetRef, not both.
+     */
+    children?: ReactElement;
+    /**
+     * Reference to external SVG graphics element (Mode 2: separate rendering).
+     * Must be a renderable SVG element (path, circle, rect, g, etc.).
+     * When provided, only the focus ring is rendered (not the element itself).
+     * Mutually exclusive with children - provide either children OR targetRef, not both.
+     */
+    targetRef?: RefObject<SVGGraphicsElement>;
+    /**
+     * Controlled focus state (REQUIRED).
+     * The parent component must manage this state and update it based on focus/blur events.
+     * FocusRing is purely decorative and does not manage state internally.
+     */
+    isFocused: boolean;
+    /** Test identifier for the focus ring elements */
+    dataTestId?: string;
+    /** Whether the focus ring is disabled */
+    disabled?: boolean;
+    /** Configuration for focus ring appearance */
+    focusConfig?: FocusConfig;
+}
+/**
+ * Props for the internal FocusRingRenderer component
+ */
+export interface FocusRingRendererProps {
+    /** Test identifier for the focus ring elements */
+    dataTestId: string;
+    /** Pre-computed layers (unified structure for both adaptive and bounding-box modes) */
+    layers?: FocusRingLayers;
+}
+//# sourceMappingURL=focusRing.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"focusRing.types.d.ts","sourceRoot":"","sources":["../../../../src/components/focusRing/focusRing.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAE5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3D,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;IAExB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,kBAAkB,CAAC,CAAC;IAE1C;;;;OAIG;IACH,SAAS,EAAE,OAAO,CAAC;IAEnB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,kDAAkD;IAClD,UAAU,EAAE,MAAM,CAAC;IAEnB,uFAAuF;IACvF,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B"}

package/dist/esm/components/focusRing/focusRing.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/focusRing/hooks/useFocusRingData.d.ts

@@ -0,0 +1,27 @@
+import { type RefObject } from 'react';
+import { type FocusConfig } from '../../../types/focusConfig.type';
+import type { FocusRingLayers } from '../utils/utils.types';
+export interface UseFocusRingDataOptions {
+    elementRef: RefObject<SVGGraphicsElement>;
+    isFocused: boolean;
+    focusConfig?: FocusConfig;
+}
+export interface FocusRingData {
+    resolvedConfig: Required<FocusConfig>;
+    layers: FocusRingLayers | undefined;
+}
+/**
+ * Hook that handles all focus ring data calculation logic.
+ * Separated from rendering concerns for better testability and reusability.
+ *
+ * This hook:
+ * - Generates layers for both adaptive and bounding-box variants
+ * - Both variants return the same FocusRingLayers structure
+ * - Only calculates what's needed based on the variant
+ * - Manages all the state and effects related to focus ring data
+ *
+ * @param options - Configuration options for the hook
+ * @returns Focus ring data including resolved config and calculated layers
+ */
+export declare function useFocusRingData({ elementRef, focusConfig, isFocused, }: UseFocusRingDataOptions): FocusRingData;
+//# sourceMappingURL=useFocusRingData.d.ts.map

package/dist/esm/components/focusRing/hooks/useFocusRingData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusRingData.d.ts","sourceRoot":"","sources":["../../../../../src/components/focusRing/hooks/useFocusRingData.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAgC,MAAM,OAAO,CAAC;AAErE,OAAO,EAAE,KAAK,WAAW,EAAkB,MAAM,0BAA0B,CAAC;AAO5E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE5D,MAAM,WAAW,uBAAuB;IACtC,UAAU,EAAE,SAAS,CAAC,kBAAkB,CAAC,CAAC;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,WAAW,aAAa;IAC5B,cAAc,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC;IACtC,MAAM,EAAE,eAAe,GAAG,SAAS,CAAC;CACrC;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,EACV,WAAW,EACX,SAAS,GACV,EAAE,uBAAuB,GAAG,aAAa,CA+DzC"}

package/dist/esm/components/focusRing/hooks/useFocusRingData.js

@@ -0,0 +1,67 @@
+import { useEffect, useMemo, useState } from 'react';
+import { getFocusConfig } from '../../../types/focusConfig.type';
+import { SVG_GEOMETRIC_ATTRIBUTES, createAdaptiveFocusRings, } from '../utils/createAdaptiveFocusRings';
+import { createBoundingBoxFocusRings } from '../utils/createBoundingBoxFocusRings';
+/**
+ * Hook that handles all focus ring data calculation logic.
+ * Separated from rendering concerns for better testability and reusability.
+ *
+ * This hook:
+ * - Generates layers for both adaptive and bounding-box variants
+ * - Both variants return the same FocusRingLayers structure
+ * - Only calculates what's needed based on the variant
+ * - Manages all the state and effects related to focus ring data
+ *
+ * @param options - Configuration options for the hook
+ * @returns Focus ring data including resolved config and calculated layers
+ */
+export function useFocusRingData({ elementRef, focusConfig, isFocused, }) {
+    // Resolve config once at the top
+    const resolvedConfig = useMemo(() => getFocusConfig(focusConfig), [focusConfig]);
+    const [layers, setLayers] = useState(undefined);
+    // Calculation happens when isFocused changes or when focus config changes
+    // MutationObserver watches for geometric attribute changes
+    // to automatically regenerate layers when the element moves or resizes
+    useEffect(() => {
+        if (!elementRef?.current || !isFocused) {
+            setLayers(undefined);
+            return undefined;
+        }
+        const element = elementRef.current;
+        // Function to calculate focus ring layers from current DOM state
+        const calculateRings = () => {
+            // Strategy 1: Adaptive variant - generate layers from DOM element
+            if (resolvedConfig.variant === 'adaptive') {
+                const adaptiveLayers = createAdaptiveFocusRings(element, resolvedConfig);
+                setLayers(adaptiveLayers);
+            }
+            // Strategy 2: Bounding-box variant - detect bounds and calculate layers
+            if (resolvedConfig.variant === 'bounding-box') {
+                const boundingBoxLayers = createBoundingBoxFocusRings(element, resolvedConfig);
+                setLayers(boundingBoxLayers);
+            }
+        };
+        // Calculate layers initially
+        calculateRings();
+        // Set up MutationObserver to detect changes in geometric attributes
+        // This ensures focus ring updates automatically when the element moves or resizes
+        const observer = new MutationObserver(mutations => {
+            const hasGeometricChanges = mutations.some(mutation => mutation.type === 'attributes' &&
+                SVG_GEOMETRIC_ATTRIBUTES.includes(mutation.attributeName ?? ''));
+            if (hasGeometricChanges) {
+                // Recalculate focus rings on relevant attribute changes
+                calculateRings();
+            }
+        });
+        // Observe only geometric attributes that affect position and size
+        observer.observe(element, {
+            attributeFilter: [...SVG_GEOMETRIC_ATTRIBUTES],
+            attributes: true,
+        });
+        return () => observer.disconnect();
+    }, [isFocused, resolvedConfig]);
+    return {
+        layers,
+        resolvedConfig,
+    };
+}

package/dist/esm/components/focusRing/index.d.ts

@@ -0,0 +1,3 @@
+export { FocusRing } from './focusRing';
+export type { FocusRingProps, FocusRingRendererProps } from './focusRing.types';
+//# sourceMappingURL=index.d.ts.map