@kubit-ui-web/react-charts 1.5.1 → 1.7.0

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

@@ -1,48 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { calculateFocusOutline } from '../../../utils/calculateFocusOutline/calculateFocusOutline';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { isFullRange } from '../utils/rangeAndPositions';
 /**
- * Focus ring for the selection area - rendered separately to control z-order
+ * Selection area overlay - the interactive rectangle that users can drag and focus
  */
-export const SelectionAreaFocusRing = ({ endX, focusConfig, height, isFocused, startX, }) => {
-    if (!isFocused) {
-        return null;
-    }
-    // Calculate selection area dimensions
-    const selectionWidth = endX - startX;
-    const selectionHeight = height;
-    const centerX = startX + selectionWidth / 2;
-    const centerY = height / 2;
-    // Calculate focus ring dimensions using the new util
-    const focusOutline = calculateFocusOutline({
-        elementHeight: selectionHeight,
-        elementPosition: { x: centerX, y: centerY },
-        elementStrokeWidth: 0, // Selection area typically has no border
-        elementType: 'rectangle',
-        elementWidth: selectionWidth,
-        gap: focusConfig.gap,
-        innerStrokeWidth: focusConfig.innerStrokeWidth,
-        outlineStrokeWidth: focusConfig.outlineStrokeWidth,
-    });
-    // Use resolved configuration values directly
-    const outlineColor = focusConfig.outlineColor;
-    const innerColor = focusConfig.innerColor;
-    const outlineStrokeWidth = focusConfig.outlineStrokeWidth;
-    const innerStrokeWidth = focusConfig.innerStrokeWidth;
-    if (focusOutline.type !== 'rectangle') {
-        return null;
-    }
-    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 })] }));
-};
-/**
- * Selection area overlay
- */
-export const SelectionArea = ({ currentRange, dataLength, dataTestId, endX, height, onBlur, onFocus, onKeyDown, onMouseDown, onTouchStart, screenReaderText, selectionConfig, startX, }) => {
+export const SelectionArea = forwardRef(({ currentRange, dataLength, dataTestId, endX, height, onBlur, onFocus, onKeyDown, onMouseDown, onTouchStart, screenReaderText, selectionConfig, startX, }, ref) => {
     // Check if overlay should be hidden based on design specs:
     // "Only visible when a range is defined"
     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: {
+    return (_jsx(_Fragment, { children: _jsx("rect", { ref: ref, "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 }) }));
-};
+});
+SelectionArea.displayName = 'SelectionArea';

package/dist/esm/components/zoomArea/components/ZoomHandler.d.ts

@@ -17,12 +17,12 @@ interface ZoomHandlerProps {
     min: number;
     /** Maximum allowed value */
     max: number;
-    /** Whether this handler is focused */
+    /** Whether the handler is focused (controlled mode) */
     isFocused: boolean;
     /** Custom handler configuration */
     handlerConfig?: ZoomAreaHandlerConfig;
-    /** Custom focus configuration (already resolved) */
-    focusConfig: Required<FocusConfig>;
+    /** Focus ring configuration */
+    focusConfig?: FocusConfig;
     /** Text announced by screen readers */
     screenReaderText?: string;
     /** Data test ID */

package/dist/esm/components/zoomArea/components/ZoomHandler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ZoomHandler.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/components/ZoomHandler.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAG5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAyBhF;;GAEG;AACH,UAAU,gBAAgB;IACxB,+CAA+C;IAC/C,IAAI,EAAE,MAAM,OAAO,gBAAgB,CAAC;IACpC,iBAAiB;IACjB,CAAC,EAAE,MAAM,CAAC;IACV,mBAAmB;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,4BAA4B;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,sCAAsC;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,aAAa,CAAC,EAAE,qBAAqB,CAAC;IACtC,oDAAoD;IACpD,WAAW,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC;IACnC,uCAAuC;IACvC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,WAAW,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,YAAY,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAC1C,SAAS,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAmBD;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAoGlD,CAAC"}
+{"version":3,"file":"ZoomHandler.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/components/ZoomHandler.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAE5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAyBhF;;GAEG;AACH,UAAU,gBAAgB;IACxB,+CAA+C;IAC/C,IAAI,EAAE,MAAM,OAAO,gBAAgB,CAAC;IACpC,iBAAiB;IACjB,CAAC,EAAE,MAAM,CAAC;IACV,mBAAmB;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,4BAA4B;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,uDAAuD;IACvD,SAAS,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,aAAa,CAAC,EAAE,qBAAqB,CAAC;IACtC,+BAA+B;IAC/B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,uCAAuC;IACvC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,WAAW,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,YAAY,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAC1C,SAAS,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAmBD;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA+DlD,CAAC"}

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { calculateFocusOutline } from '../../../utils/calculateFocusOutline/calculateFocusOutline';
+import { FocusRing } from '../../../components/focusRing/focusRing';
 import { HandlerIcon } from './HandlerIcon';
 /**
  * Default colors for zoom handlers
@@ -42,18 +42,5 @@ const getHandlerStyles = (handlerConfig) => ({
 export const ZoomHandler = ({ dataTestId, focusConfig, handlerConfig, height, isFocused, max, min, onBlur, onFocus, onKeyDown, onMouseDown, onTouchStart, screenReaderText, x, }) => {
     const centerY = height / 2;
     const styles = getHandlerStyles(handlerConfig);
-    // Calculate focus ring dimensions using the new util
-    const focusOutline = calculateFocusOutline({
-        elementHeight: styles.radius * 2,
-        elementPosition: { x, y: centerY },
-        elementStrokeWidth: typeof styles.strokeWidth === 'number'
-            ? styles.strokeWidth
-            : parseFloat(styles.strokeWidth.toString()),
-        elementType: 'circle',
-        elementWidth: styles.radius * 2,
-        gap: focusConfig.gap,
-        innerStrokeWidth: focusConfig.innerStrokeWidth,
-        outlineStrokeWidth: focusConfig.outlineStrokeWidth,
-    });
-    return (_jsxs("g", { "data-testid": `${dataTestId}-group`, children: [_jsx("line", { pointerEvents: "none", stroke: styles.verticalLineStroke, strokeWidth: styles.verticalLineStrokeWidth, x1: x, x2: x, y1: 0, y2: height }), _jsx("circle", { "aria-label": screenReaderText, "aria-valuemax": max, "aria-valuemin": min, "aria-valuetext": screenReaderText, cursor: "ew-resize", cx: x, cy: centerY, "data-testid": dataTestId, fill: styles.fill, r: styles.radius, role: "slider", stroke: styles.stroke, strokeWidth: styles.strokeWidth, style: { outline: 'none' }, tabIndex: 0, onBlur: onBlur, onFocus: onFocus, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onTouchStart: onTouchStart }), _jsx(HandlerIcon, { fill: styles.iconColor, x: x, y: centerY }), isFocused && focusOutline.type === 'circle' && (_jsxs("g", { pointerEvents: "none", children: [_jsx("circle", { cx: focusOutline.outer.cx, cy: focusOutline.outer.cy, fill: "none", r: focusOutline.outer.r, stroke: focusConfig.outlineColor, strokeWidth: focusConfig.outlineStrokeWidth }), _jsx("circle", { cx: focusOutline.inner.cx, cy: focusOutline.inner.cy, fill: "none", r: focusOutline.inner.r, stroke: focusConfig.innerColor, strokeWidth: focusConfig.innerStrokeWidth })] }))] }));
+    return (_jsxs("g", { "data-testid": `${dataTestId}-group`, children: [_jsx("line", { pointerEvents: "none", stroke: styles.verticalLineStroke, strokeWidth: styles.verticalLineStrokeWidth, x1: x, x2: x, y1: 0, y2: height }), _jsx(FocusRing, { dataTestId: dataTestId, focusConfig: focusConfig, isFocused: isFocused, children: _jsx("circle", { "aria-label": screenReaderText, "aria-valuemax": max, "aria-valuemin": min, "aria-valuetext": screenReaderText, cursor: "ew-resize", cx: x, cy: centerY, "data-testid": dataTestId, fill: styles.fill, r: styles.radius, role: "slider", stroke: styles.stroke, strokeWidth: styles.strokeWidth, style: { outline: 'none' }, tabIndex: 0, onBlur: onBlur, onFocus: onFocus, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onTouchStart: onTouchStart }) }), _jsx(HandlerIcon, { fill: styles.iconColor, x: x, y: centerY })] }));
 };

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

@@ -1,5 +1,5 @@
 export { HandlerIcon } from './HandlerIcon';
 export { LineRenderer } from './LineRenderer';
-export { SelectionArea, SelectionAreaFocusRing } from './SelectionArea';
+export { SelectionArea } from './SelectionArea';
 export { ZoomHandler } from './ZoomHandler';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/zoomArea/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

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

@@ -1,4 +1,4 @@
 export { HandlerIcon } from './HandlerIcon';
 export { LineRenderer } from './LineRenderer';
-export { SelectionArea, SelectionAreaFocusRing } from './SelectionArea';
+export { SelectionArea } from './SelectionArea';
 export { ZoomHandler } from './ZoomHandler';

package/dist/esm/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/esm/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/esm/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/esm/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/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;;;;;;;;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/esm/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/utils/pickCustomAttributes/pickCustomAttributes.d.ts

@@ -1,5 +1,5 @@
 /**
- * Filters and extracts only aria-* and data-* attributes from a given object,
+ * Filters and extracts only aria-*, data-* and role attributes from a given object,
  * converting all values to strings for HTML compatibility.
  *
  * This function is useful for extracting accessibility and data attributes
@@ -10,8 +10,8 @@
  *   - Keys can be strings representing attribute names.
  *   - Values can be strings, booleans, numbers, or any other type.
  *
- * @returns A new object containing only aria-* and data-* attributes:
- *   - Only includes attributes that start with `aria-` or `data-`.
+ * @returns A new object containing only aria-*, data-* and role attributes:
+ *   - Only includes attributes that start with `aria-` or `data-` or are exactly `role`.
  *   - All values are converted to strings for HTML compatibility.
  *   - Null and undefined values are excluded.
  *
@@ -20,13 +20,14 @@
  * const props = {
  *   'aria-label': 'Button',
  *   'data-testid': 'my-button',
- *   'onClick': () => {},
+ *   'onClick': () => {},g
  *   'className': 'btn',
- *   'aria-hidden': true
+ *   'aria-hidden': true,
+ *   'role': 'button',
  * };
  *
  * const result = pickCustomAttributes(props);
- * // Result: { 'aria-label': 'Button', 'data-testid': 'my-button', 'aria-hidden': 'true' }
+ * // Result: { 'aria-label': 'Button', 'data-testid': 'my-button', 'aria-hidden': 'true', 'role': 'button' }
  * ```
  */
 export declare const pickCustomAttributes: (attributes?: Record<string, any>) => Record<string, string>;

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

@@ -1 +1 @@
-{"version":3,"file":"pickCustomAttributes.d.ts","sourceRoot":"","sources":["../../../../src/utils/pickCustomAttributes/pickCustomAttributes.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,oBAAoB,GAE/B,aAAa,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAC/B,MAAM,CAAC,MAAM,EAAE,MAAM,CAkBvB,CAAC"}
+{"version":3,"file":"pickCustomAttributes.d.ts","sourceRoot":"","sources":["../../../../src/utils/pickCustomAttributes/pickCustomAttributes.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,oBAAoB,GAE/B,aAAa,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAC/B,MAAM,CAAC,MAAM,EAAE,MAAM,CAkBvB,CAAC"}

package/dist/esm/utils/pickCustomAttributes/pickCustomAttributes.js

@@ -1,5 +1,5 @@
 /**
- * Filters and extracts only aria-* and data-* attributes from a given object,
+ * Filters and extracts only aria-*, data-* and role attributes from a given object,
  * converting all values to strings for HTML compatibility.
  *
  * This function is useful for extracting accessibility and data attributes
@@ -10,8 +10,8 @@
  *   - Keys can be strings representing attribute names.
  *   - Values can be strings, booleans, numbers, or any other type.
  *
- * @returns A new object containing only aria-* and data-* attributes:
- *   - Only includes attributes that start with `aria-` or `data-`.
+ * @returns A new object containing only aria-*, data-* and role attributes:
+ *   - Only includes attributes that start with `aria-` or `data-` or are exactly `role`.
  *   - All values are converted to strings for HTML compatibility.
  *   - Null and undefined values are excluded.
  *
@@ -20,13 +20,14 @@
  * const props = {
  *   'aria-label': 'Button',
  *   'data-testid': 'my-button',
- *   'onClick': () => {},
+ *   'onClick': () => {},g
  *   'className': 'btn',
- *   'aria-hidden': true
+ *   'aria-hidden': true,
+ *   'role': 'button',
  * };
  *
  * const result = pickCustomAttributes(props);
- * // Result: { 'aria-label': 'Button', 'data-testid': 'my-button', 'aria-hidden': 'true' }
+ * // Result: { 'aria-label': 'Button', 'data-testid': 'my-button', 'aria-hidden': 'true', 'role': 'button' }
  * ```
  */
 export const pickCustomAttributes = (
@@ -36,7 +37,7 @@ attributes) => {
         return {};
     }
     return Object.entries(attributes).reduce((acc, [key, value]) => {
-        if ((key.startsWith('aria-') || key.startsWith('data-')) &&
+        if ((key.startsWith('aria-') || key.startsWith('data-') || key === 'role') &&
             value !== null &&
             value !== undefined) {
             acc[key] = String(value);