@kubit-ui-web/react-charts 1.5.0 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/charts/lineChart/fragments/lineChartPath.d.ts.map +1 -1
- package/dist/cjs/charts/lineChart/fragments/lineChartPath.js +8 -4
- package/dist/cjs/components/focusRing/components/FocusRingInline.d.ts +25 -0
- package/dist/cjs/components/focusRing/components/FocusRingInline.d.ts.map +1 -0
- package/dist/cjs/components/focusRing/components/FocusRingInline.js +37 -0
- package/dist/cjs/components/focusRing/components/FocusRingRenderer.d.ts +13 -0
- package/dist/cjs/components/focusRing/components/FocusRingRenderer.d.ts.map +1 -0
- package/dist/cjs/components/focusRing/components/FocusRingRenderer.js +25 -0
- package/dist/cjs/components/focusRing/components/FocusRingSeparate.d.ts +40 -0
- package/dist/cjs/components/focusRing/components/FocusRingSeparate.d.ts.map +1 -0
- package/dist/cjs/components/focusRing/components/FocusRingSeparate.js +45 -0
- package/dist/cjs/components/focusRing/focusRing.css +14 -0
- package/dist/cjs/components/focusRing/focusRing.d.ts +35 -0
- package/dist/cjs/components/focusRing/focusRing.d.ts.map +1 -0
- package/dist/cjs/components/focusRing/focusRing.js +44 -0
- package/dist/cjs/components/focusRing/focusRing.types.d.ts +40 -0
- package/dist/cjs/components/focusRing/focusRing.types.d.ts.map +1 -0
- package/dist/cjs/components/focusRing/focusRing.types.js +1 -0
- package/dist/cjs/components/focusRing/hooks/useFocusRingData.d.ts +27 -0
- package/dist/cjs/components/focusRing/hooks/useFocusRingData.d.ts.map +1 -0
- package/dist/cjs/components/focusRing/hooks/useFocusRingData.js +67 -0
- package/dist/cjs/components/focusRing/index.d.ts +3 -0
- package/dist/cjs/components/focusRing/index.d.ts.map +1 -0
- package/dist/cjs/components/focusRing/index.js +1 -0
- package/dist/cjs/components/focusRing/utils/composeRefs.d.ts +7 -0
- package/dist/cjs/components/focusRing/utils/composeRefs.d.ts.map +1 -0
- package/dist/cjs/components/focusRing/utils/composeRefs.js +16 -0
- package/dist/cjs/components/focusRing/utils/createAdaptiveFocusRings.d.ts +24 -0
- package/dist/cjs/components/focusRing/utils/createAdaptiveFocusRings.d.ts.map +1 -0
- package/dist/cjs/components/focusRing/utils/createAdaptiveFocusRings.js +141 -0
- package/dist/cjs/components/focusRing/utils/createBoundingBoxFocusRings.d.ts +33 -0
- package/dist/cjs/components/focusRing/utils/createBoundingBoxFocusRings.d.ts.map +1 -0
- package/dist/cjs/components/focusRing/utils/createBoundingBoxFocusRings.js +126 -0
- package/dist/cjs/components/focusRing/utils/utils.types.d.ts +52 -0
- package/dist/cjs/components/focusRing/utils/utils.types.d.ts.map +1 -0
- package/dist/cjs/components/focusRing/utils/utils.types.js +1 -0
- package/dist/cjs/components/index.d.ts +1 -0
- package/dist/cjs/components/index.d.ts.map +1 -1
- package/dist/cjs/components/index.js +1 -0
- package/dist/cjs/components/plot/plot.d.ts.map +1 -1
- package/dist/cjs/components/plot/plot.js +7 -19
- package/dist/cjs/components/zoomArea/components/SelectionArea.d.ts +3 -23
- package/dist/cjs/components/zoomArea/components/SelectionArea.d.ts.map +1 -1
- package/dist/cjs/components/zoomArea/components/SelectionArea.js +7 -39
- package/dist/cjs/components/zoomArea/components/ZoomHandler.d.ts +3 -3
- package/dist/cjs/components/zoomArea/components/ZoomHandler.d.ts.map +1 -1
- package/dist/cjs/components/zoomArea/components/ZoomHandler.js +2 -15
- package/dist/cjs/components/zoomArea/components/index.d.ts +1 -1
- package/dist/cjs/components/zoomArea/components/index.d.ts.map +1 -1
- package/dist/cjs/components/zoomArea/components/index.js +1 -1
- package/dist/cjs/components/zoomArea/zoomArea.js +6 -6
- package/dist/cjs/components/zoomArea/zoomArea.type.d.ts +1 -1
- package/dist/cjs/components/zoomArea/zoomArea.type.d.ts.map +1 -1
- package/dist/cjs/types/focusConfig.type.d.ts +15 -3
- package/dist/cjs/types/focusConfig.type.d.ts.map +1 -1
- package/dist/cjs/types/focusConfig.type.js +14 -1
- package/dist/esm/charts/lineChart/fragments/lineChartPath.d.ts.map +1 -1
- package/dist/esm/charts/lineChart/fragments/lineChartPath.js +8 -4
- package/dist/esm/components/focusRing/components/FocusRingInline.d.ts +25 -0
- package/dist/esm/components/focusRing/components/FocusRingInline.d.ts.map +1 -0
- package/dist/esm/components/focusRing/components/FocusRingInline.js +37 -0
- package/dist/esm/components/focusRing/components/FocusRingRenderer.d.ts +13 -0
- package/dist/esm/components/focusRing/components/FocusRingRenderer.d.ts.map +1 -0
- package/dist/esm/components/focusRing/components/FocusRingRenderer.js +25 -0
- package/dist/esm/components/focusRing/components/FocusRingSeparate.d.ts +40 -0
- package/dist/esm/components/focusRing/components/FocusRingSeparate.d.ts.map +1 -0
- package/dist/esm/components/focusRing/components/FocusRingSeparate.js +45 -0
- package/dist/esm/components/focusRing/focusRing.css +14 -0
- package/dist/esm/components/focusRing/focusRing.d.ts +35 -0
- package/dist/esm/components/focusRing/focusRing.d.ts.map +1 -0
- package/dist/esm/components/focusRing/focusRing.js +44 -0
- package/dist/esm/components/focusRing/focusRing.types.d.ts +40 -0
- package/dist/esm/components/focusRing/focusRing.types.d.ts.map +1 -0
- package/dist/esm/components/focusRing/focusRing.types.js +1 -0
- package/dist/esm/components/focusRing/hooks/useFocusRingData.d.ts +27 -0
- package/dist/esm/components/focusRing/hooks/useFocusRingData.d.ts.map +1 -0
- package/dist/esm/components/focusRing/hooks/useFocusRingData.js +67 -0
- package/dist/esm/components/focusRing/index.d.ts +3 -0
- package/dist/esm/components/focusRing/index.d.ts.map +1 -0
- package/dist/esm/components/focusRing/index.js +1 -0
- package/dist/esm/components/focusRing/utils/composeRefs.d.ts +7 -0
- package/dist/esm/components/focusRing/utils/composeRefs.d.ts.map +1 -0
- package/dist/esm/components/focusRing/utils/composeRefs.js +16 -0
- package/dist/esm/components/focusRing/utils/createAdaptiveFocusRings.d.ts +24 -0
- package/dist/esm/components/focusRing/utils/createAdaptiveFocusRings.d.ts.map +1 -0
- package/dist/esm/components/focusRing/utils/createAdaptiveFocusRings.js +141 -0
- package/dist/esm/components/focusRing/utils/createBoundingBoxFocusRings.d.ts +33 -0
- package/dist/esm/components/focusRing/utils/createBoundingBoxFocusRings.d.ts.map +1 -0
- package/dist/esm/components/focusRing/utils/createBoundingBoxFocusRings.js +126 -0
- package/dist/esm/components/focusRing/utils/utils.types.d.ts +52 -0
- package/dist/esm/components/focusRing/utils/utils.types.d.ts.map +1 -0
- package/dist/esm/components/focusRing/utils/utils.types.js +1 -0
- package/dist/esm/components/index.d.ts +1 -0
- package/dist/esm/components/index.d.ts.map +1 -1
- package/dist/esm/components/index.js +1 -0
- package/dist/esm/components/plot/plot.d.ts.map +1 -1
- package/dist/esm/components/plot/plot.js +7 -19
- package/dist/esm/components/zoomArea/components/SelectionArea.d.ts +3 -23
- package/dist/esm/components/zoomArea/components/SelectionArea.d.ts.map +1 -1
- package/dist/esm/components/zoomArea/components/SelectionArea.js +7 -39
- package/dist/esm/components/zoomArea/components/ZoomHandler.d.ts +3 -3
- package/dist/esm/components/zoomArea/components/ZoomHandler.d.ts.map +1 -1
- package/dist/esm/components/zoomArea/components/ZoomHandler.js +2 -15
- package/dist/esm/components/zoomArea/components/index.d.ts +1 -1
- package/dist/esm/components/zoomArea/components/index.d.ts.map +1 -1
- package/dist/esm/components/zoomArea/components/index.js +1 -1
- package/dist/esm/components/zoomArea/zoomArea.js +6 -6
- package/dist/esm/components/zoomArea/zoomArea.type.d.ts +1 -1
- package/dist/esm/components/zoomArea/zoomArea.type.d.ts.map +1 -1
- package/dist/esm/types/focusConfig.type.d.ts +15 -3
- package/dist/esm/types/focusConfig.type.d.ts.map +1 -1
- package/dist/esm/types/focusConfig.type.js +14 -1
- package/dist/kubit-ui-web-react-charts.cjs.js +1 -1
- package/dist/kubit-ui-web-react-charts.es.js +1 -1
- package/dist/kubit-ui-web-react-charts.umd.js +1 -1
- package/dist/react-charts.css +1 -1
- package/dist/types/charts/lineChart/fragments/lineChartPath.d.ts.map +1 -1
- package/dist/types/components/focusRing/components/FocusRingInline.d.ts +25 -0
- package/dist/types/components/focusRing/components/FocusRingInline.d.ts.map +1 -0
- package/dist/types/components/focusRing/components/FocusRingRenderer.d.ts +13 -0
- package/dist/types/components/focusRing/components/FocusRingRenderer.d.ts.map +1 -0
- package/dist/types/components/focusRing/components/FocusRingSeparate.d.ts +40 -0
- package/dist/types/components/focusRing/components/FocusRingSeparate.d.ts.map +1 -0
- package/dist/types/components/focusRing/focusRing.d.ts +34 -0
- package/dist/types/components/focusRing/focusRing.d.ts.map +1 -0
- package/dist/types/components/focusRing/focusRing.types.d.ts +40 -0
- package/dist/types/components/focusRing/focusRing.types.d.ts.map +1 -0
- package/dist/types/components/focusRing/hooks/useFocusRingData.d.ts +27 -0
- package/dist/types/components/focusRing/hooks/useFocusRingData.d.ts.map +1 -0
- package/dist/types/components/focusRing/index.d.ts +3 -0
- package/dist/types/components/focusRing/index.d.ts.map +1 -0
- package/dist/types/components/focusRing/utils/composeRefs.d.ts +7 -0
- package/dist/types/components/focusRing/utils/composeRefs.d.ts.map +1 -0
- package/dist/types/components/focusRing/utils/createAdaptiveFocusRings.d.ts +24 -0
- package/dist/types/components/focusRing/utils/createAdaptiveFocusRings.d.ts.map +1 -0
- package/dist/types/components/focusRing/utils/createBoundingBoxFocusRings.d.ts +33 -0
- package/dist/types/components/focusRing/utils/createBoundingBoxFocusRings.d.ts.map +1 -0
- package/dist/types/components/focusRing/utils/utils.types.d.ts +52 -0
- package/dist/types/components/focusRing/utils/utils.types.d.ts.map +1 -0
- package/dist/types/components/index.d.ts +1 -0
- package/dist/types/components/index.d.ts.map +1 -1
- package/dist/types/components/plot/plot.d.ts.map +1 -1
- package/dist/types/components/zoomArea/components/SelectionArea.d.ts +3 -23
- package/dist/types/components/zoomArea/components/SelectionArea.d.ts.map +1 -1
- package/dist/types/components/zoomArea/components/ZoomHandler.d.ts +3 -3
- package/dist/types/components/zoomArea/components/ZoomHandler.d.ts.map +1 -1
- package/dist/types/components/zoomArea/components/index.d.ts +1 -1
- package/dist/types/components/zoomArea/components/index.d.ts.map +1 -1
- package/dist/types/components/zoomArea/zoomArea.type.d.ts +1 -1
- package/dist/types/components/zoomArea/zoomArea.type.d.ts.map +1 -1
- package/dist/types/types/focusConfig.type.d.ts +15 -3
- package/dist/types/types/focusConfig.type.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/cjs/utils/calculateFocusOutline/calculateFocusOutline.d.ts +0 -73
- package/dist/cjs/utils/calculateFocusOutline/calculateFocusOutline.d.ts.map +0 -1
- package/dist/cjs/utils/calculateFocusOutline/calculateFocusOutline.js +0 -80
- package/dist/esm/utils/calculateFocusOutline/calculateFocusOutline.d.ts +0 -73
- package/dist/esm/utils/calculateFocusOutline/calculateFocusOutline.d.ts.map +0 -1
- package/dist/esm/utils/calculateFocusOutline/calculateFocusOutline.js +0 -80
- package/dist/types/utils/calculateFocusOutline/calculateFocusOutline.d.ts +0 -73
- package/dist/types/utils/calculateFocusOutline/calculateFocusOutline.d.ts.map +0 -1
|
@@ -1 +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;
|
|
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;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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { FocusRing } from '../../../components/focusRing/focusRing';
|
|
3
3
|
import { HandlerIcon } from './HandlerIcon';
|
|
4
4
|
/**
|
|
5
5
|
* Default colors for zoom handlers
|
|
@@ -42,18 +42,5 @@ const getHandlerStyles = (handlerConfig) => ({
|
|
|
42
42
|
export const ZoomHandler = ({ dataTestId, focusConfig, handlerConfig, height, isFocused, max, min, onBlur, onFocus, onKeyDown, onMouseDown, onTouchStart, screenReaderText, x, }) => {
|
|
43
43
|
const centerY = height / 2;
|
|
44
44
|
const styles = getHandlerStyles(handlerConfig);
|
|
45
|
-
|
|
46
|
-
const focusOutline = calculateFocusOutline({
|
|
47
|
-
elementHeight: styles.radius * 2,
|
|
48
|
-
elementPosition: { x, y: centerY },
|
|
49
|
-
elementStrokeWidth: typeof styles.strokeWidth === 'number'
|
|
50
|
-
? styles.strokeWidth
|
|
51
|
-
: parseFloat(styles.strokeWidth.toString()),
|
|
52
|
-
elementType: 'circle',
|
|
53
|
-
elementWidth: styles.radius * 2,
|
|
54
|
-
gap: focusConfig.gap,
|
|
55
|
-
innerStrokeWidth: focusConfig.innerStrokeWidth,
|
|
56
|
-
outlineStrokeWidth: focusConfig.outlineStrokeWidth,
|
|
57
|
-
});
|
|
58
|
-
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 })] }))] }));
|
|
45
|
+
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 })] }));
|
|
59
46
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { HandlerIcon } from './HandlerIcon';
|
|
2
2
|
export { LineRenderer } from './LineRenderer';
|
|
3
|
-
export { SelectionArea
|
|
3
|
+
export { SelectionArea } from './SelectionArea';
|
|
4
4
|
export { ZoomHandler } from './ZoomHandler';
|
|
5
5
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +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,
|
|
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,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useMemo } from 'react';
|
|
2
|
+
import { useMemo, useRef } from 'react';
|
|
3
3
|
import { SvgContainer } from '../../components/svgContainer/svgContainer';
|
|
4
|
-
import { getFocusConfig } from '../../utils/calculateFocusOutline/calculateFocusOutline';
|
|
5
4
|
import { getDataFingerprint } from '../../utils/getDataFingerprint/getDataFingerprint';
|
|
5
|
+
import { FocusRing } from '../focusRing/focusRing';
|
|
6
6
|
import { LineRenderer } from './components/LineRenderer';
|
|
7
|
-
import { SelectionArea
|
|
7
|
+
import { SelectionArea } from './components/SelectionArea';
|
|
8
8
|
import { ZoomHandler } from './components/ZoomHandler';
|
|
9
9
|
import { useDragInteraction } from './hooks/useDragInteraction';
|
|
10
10
|
import { useKeyboardNavigation } from './hooks/useKeyboardNavigation';
|
|
@@ -34,8 +34,6 @@ initialRange, interactionConfig, lines, onDataChange, role, screenReaderTextConf
|
|
|
34
34
|
const resolvedInteractionConfig = getInteractionConfig(interactionConfig);
|
|
35
35
|
// Resolve selection config with defaults
|
|
36
36
|
const resolvedSelectionConfig = getSelectionConfig(selectionConfig);
|
|
37
|
-
// Resolve focus config with defaults
|
|
38
|
-
const resolvedFocusConfig = getFocusConfig(focusConfig);
|
|
39
37
|
// Hook for core data filtering functionality
|
|
40
38
|
const { currentRange, handleRangeChange } = useZoomData({
|
|
41
39
|
data,
|
|
@@ -52,6 +50,8 @@ initialRange, interactionConfig, lines, onDataChange, role, screenReaderTextConf
|
|
|
52
50
|
// Create a fingerprint of the data/lines to avoid unnecessary updates
|
|
53
51
|
const dataFingerprint = getDataFingerprint(data);
|
|
54
52
|
const linesFingerprint = JSON.stringify(lines);
|
|
53
|
+
// Create ref for SelectionArea to enable separate focus ring rendering
|
|
54
|
+
const selectionAreaRef = useRef(null);
|
|
55
55
|
const accessibilityLabels = generateAccessibilityLabels(data, xKey, currentRange, screenReaderTextConfig);
|
|
56
56
|
// Memoize expensive line calculations
|
|
57
57
|
const linesData = useMemo(() => {
|
|
@@ -76,5 +76,5 @@ initialRange, interactionConfig, lines, onDataChange, role, screenReaderTextConf
|
|
|
76
76
|
});
|
|
77
77
|
return (_jsxs(SvgContainer, { ref: groupRef, ariaHidden: ariaHidden, ariaLabel: ariaLabel, backgroundColor: backgroundColor, caption: caption, className: classNames, "data-testid": dataTestId, height: height,
|
|
78
78
|
// set overflow visible so handlers and focus rings are visible always
|
|
79
|
-
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:
|
|
79
|
+
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 })] }));
|
|
80
80
|
};
|
|
@@ -121,7 +121,7 @@ export interface ZoomAreaProps {
|
|
|
121
121
|
/** Custom selection area configuration */
|
|
122
122
|
selectionConfig?: ZoomAreaSelectionConfig;
|
|
123
123
|
/** Custom focus configuration applied to all focusable elements */
|
|
124
|
-
focusConfig?: FocusConfig
|
|
124
|
+
focusConfig?: Omit<FocusConfig, 'variant'>;
|
|
125
125
|
/** Configuration for interaction behavior (keyboard navigation, handler distances) */
|
|
126
126
|
interactionConfig?: ZoomAreaInteractionConfig;
|
|
127
127
|
/** Configuration for accessibility label templates */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"zoomArea.type.d.ts","sourceRoot":"","sources":["../../../../src/components/zoomArea/zoomArea.type.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"zoomArea.type.d.ts","sourceRoot":"","sources":["../../../../src/components/zoomArea/zoomArea.type.ts"],"names":[],"mappings":"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"}
|
|
@@ -3,16 +3,22 @@
|
|
|
3
3
|
*
|
|
4
4
|
* - `outlineColor` - Color of the outer outline when focused. Defaults to #0078D7.
|
|
5
5
|
* - `outlineStrokeWidth` - Stroke width of the outer outline. Defaults to 2.
|
|
6
|
-
* - `
|
|
6
|
+
* - `innerColor` - Color of the inner outline when focused. Defaults to #FFFFFF.
|
|
7
7
|
* - `innerStrokeWidth` - Stroke width of the inner outline. Defaults to 2.
|
|
8
|
-
* - `gap` - Gap between the
|
|
8
|
+
* - `gap` - Gap between the element and the focus rings. Defaults to 0.
|
|
9
|
+
* Note: Only applies when variant is 'bounding-box'. Ignored in 'adaptive' mode.
|
|
10
|
+
* - `variant` - Focus ring rendering mode. Defaults to 'adaptive'.
|
|
11
|
+
* - 'adaptive': Ring follows the exact shape of the element (circle → circular ring, path → path ring)
|
|
12
|
+
* - 'bounding-box': Ring is always rectangular, wrapping the element's bounding box
|
|
9
13
|
*/
|
|
10
14
|
export interface FocusConfig {
|
|
11
15
|
outlineColor?: string;
|
|
12
16
|
outlineStrokeWidth?: number;
|
|
13
17
|
innerColor?: string;
|
|
14
18
|
innerStrokeWidth?: number;
|
|
19
|
+
/** Only applicable when variant is 'bounding-box' */
|
|
15
20
|
gap?: number;
|
|
21
|
+
variant?: 'adaptive' | 'bounding-box';
|
|
16
22
|
}
|
|
17
23
|
export declare const FOCUS_DEFAULT: {
|
|
18
24
|
/** Focus ring color */
|
|
@@ -23,7 +29,13 @@ export declare const FOCUS_DEFAULT: {
|
|
|
23
29
|
readonly INNER_FOCUS_STROKE_WIDTH: 2;
|
|
24
30
|
/** Focus ring outer stroke width */
|
|
25
31
|
readonly OUTER_FOCUS_STROKE_WIDTH: 2;
|
|
26
|
-
/** Gap between element and outlines */
|
|
32
|
+
/** Gap between element and outlines (only applies in bounding-box variant) */
|
|
27
33
|
readonly OUTLINES_GAP: 0;
|
|
34
|
+
/** Focus ring rendering variant */
|
|
35
|
+
readonly VARIANT: "adaptive";
|
|
28
36
|
};
|
|
37
|
+
/**
|
|
38
|
+
* Helper function to get complete focus config with defaults applied
|
|
39
|
+
*/
|
|
40
|
+
export declare const getFocusConfig: (focusConfig?: FocusConfig) => Required<FocusConfig>;
|
|
29
41
|
//# sourceMappingURL=focusConfig.type.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focusConfig.type.d.ts","sourceRoot":"","sources":["../../../src/types/focusConfig.type.ts"],"names":[],"mappings":"AAAA
|
|
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"}
|
|
@@ -7,6 +7,19 @@ export const FOCUS_DEFAULT = {
|
|
|
7
7
|
INNER_FOCUS_STROKE_WIDTH: 2,
|
|
8
8
|
/** Focus ring outer stroke width */
|
|
9
9
|
OUTER_FOCUS_STROKE_WIDTH: 2,
|
|
10
|
-
/** Gap between element and outlines */
|
|
10
|
+
/** Gap between element and outlines (only applies in bounding-box variant) */
|
|
11
11
|
OUTLINES_GAP: 0,
|
|
12
|
+
/** Focus ring rendering variant */
|
|
13
|
+
VARIANT: 'adaptive',
|
|
12
14
|
};
|
|
15
|
+
/**
|
|
16
|
+
* Helper function to get complete focus config with defaults applied
|
|
17
|
+
*/
|
|
18
|
+
export const getFocusConfig = (focusConfig) => ({
|
|
19
|
+
gap: focusConfig?.gap ?? FOCUS_DEFAULT.OUTLINES_GAP,
|
|
20
|
+
innerColor: focusConfig?.innerColor ?? FOCUS_DEFAULT.FOCUS_INNER,
|
|
21
|
+
innerStrokeWidth: focusConfig?.innerStrokeWidth ?? FOCUS_DEFAULT.INNER_FOCUS_STROKE_WIDTH,
|
|
22
|
+
outlineColor: focusConfig?.outlineColor ?? FOCUS_DEFAULT.FOCUS_COLOR,
|
|
23
|
+
outlineStrokeWidth: focusConfig?.outlineStrokeWidth ?? FOCUS_DEFAULT.OUTER_FOCUS_STROKE_WIDTH,
|
|
24
|
+
variant: focusConfig?.variant ?? FOCUS_DEFAULT.VARIANT,
|
|
25
|
+
});
|