@kubit-ui-web/react-charts 1.5.1 → 1.7.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/context/buildLineContextValue.d.ts +1 -3
- package/dist/cjs/charts/lineChart/context/buildLineContextValue.d.ts.map +1 -1
- package/dist/cjs/charts/lineChart/context/buildLineContextValue.js +64 -128
- package/dist/cjs/charts/lineChart/fragments/fixture/contextData.d.ts +2 -43
- package/dist/cjs/charts/lineChart/fragments/fixture/contextData.d.ts.map +1 -1
- package/dist/cjs/charts/lineChart/fragments/fixture/contextData.js +8 -6
- package/dist/cjs/charts/lineChart/fragments/lineChartPath.js +3 -3
- package/dist/cjs/charts/lineChart/fragments/lineChartXAxis.d.ts.map +1 -1
- package/dist/cjs/charts/lineChart/fragments/lineChartXAxis.js +3 -8
- package/dist/cjs/charts/lineChart/fragments/lineChartYAxis.d.ts.map +1 -1
- package/dist/cjs/charts/lineChart/fragments/lineChartYAxis.js +9 -9
- package/dist/cjs/charts/lineChart/lineChart.type.d.ts +12 -7
- package/dist/cjs/charts/lineChart/lineChart.type.d.ts.map +1 -1
- package/dist/cjs/charts/lineChart/lineChartStructure.js +11 -10
- package/dist/cjs/charts/lineChart/utils/getCoordinates.d.ts +25 -0
- package/dist/cjs/charts/lineChart/utils/getCoordinates.d.ts.map +1 -0
- package/dist/cjs/charts/lineChart/utils/getCoordinates.js +55 -0
- package/dist/cjs/charts/lineChart/utils/getExtraSpacing.d.ts +1 -3
- package/dist/cjs/charts/lineChart/utils/getExtraSpacing.d.ts.map +1 -1
- package/dist/cjs/charts/lineChart/utils/getExtraSpacing.js +68 -51
- package/dist/cjs/charts/lineChart/utils/getTicks.d.ts +21 -0
- package/dist/cjs/charts/lineChart/utils/getTicks.d.ts.map +1 -0
- package/dist/cjs/charts/lineChart/utils/getTicks.js +36 -0
- package/dist/cjs/charts/lineChart/utils/handleNodesFocus.d.ts.map +1 -1
- package/dist/cjs/charts/lineChart/utils/handleNodesFocus.js +14 -25
- package/dist/cjs/charts/lineChart/utils/tickTextPosition.d.ts +33 -0
- package/dist/cjs/charts/lineChart/utils/tickTextPosition.d.ts.map +1 -0
- package/dist/cjs/charts/lineChart/utils/tickTextPosition.js +109 -0
- package/dist/cjs/charts/lineChart/utils/validations.d.ts +54 -0
- package/dist/cjs/charts/lineChart/utils/validations.d.ts.map +1 -0
- package/dist/cjs/charts/lineChart/utils/validations.js +117 -0
- package/dist/cjs/components/chartText/chartText.d.ts.map +1 -1
- package/dist/cjs/components/chartText/chartText.js +2 -2
- 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/line/line.d.ts.map +1 -1
- package/dist/cjs/components/line/line.js +2 -2
- package/dist/cjs/components/line/line.types.d.ts +2 -0
- package/dist/cjs/components/line/line.types.d.ts.map +1 -1
- package/dist/cjs/components/node/node.d.ts.map +1 -1
- package/dist/cjs/components/node/node.js +1 -1
- package/dist/cjs/components/node/node.types.d.ts +2 -0
- package/dist/cjs/components/node/node.types.d.ts.map +1 -1
- package/dist/cjs/components/path/path.js +1 -1
- 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/cjs/utils/pickCustomAttributes/pickCustomAttributes.d.ts +7 -6
- package/dist/cjs/utils/pickCustomAttributes/pickCustomAttributes.d.ts.map +1 -1
- package/dist/cjs/utils/pickCustomAttributes/pickCustomAttributes.js +8 -7
- package/dist/esm/charts/lineChart/context/buildLineContextValue.d.ts +1 -3
- package/dist/esm/charts/lineChart/context/buildLineContextValue.d.ts.map +1 -1
- package/dist/esm/charts/lineChart/context/buildLineContextValue.js +64 -128
- package/dist/esm/charts/lineChart/fragments/fixture/contextData.d.ts +2 -43
- package/dist/esm/charts/lineChart/fragments/fixture/contextData.d.ts.map +1 -1
- package/dist/esm/charts/lineChart/fragments/fixture/contextData.js +8 -6
- package/dist/esm/charts/lineChart/fragments/lineChartPath.js +3 -3
- package/dist/esm/charts/lineChart/fragments/lineChartXAxis.d.ts.map +1 -1
- package/dist/esm/charts/lineChart/fragments/lineChartXAxis.js +3 -8
- package/dist/esm/charts/lineChart/fragments/lineChartYAxis.d.ts.map +1 -1
- package/dist/esm/charts/lineChart/fragments/lineChartYAxis.js +9 -9
- package/dist/esm/charts/lineChart/lineChart.type.d.ts +12 -7
- package/dist/esm/charts/lineChart/lineChart.type.d.ts.map +1 -1
- package/dist/esm/charts/lineChart/lineChartStructure.js +11 -10
- package/dist/esm/charts/lineChart/utils/getCoordinates.d.ts +25 -0
- package/dist/esm/charts/lineChart/utils/getCoordinates.d.ts.map +1 -0
- package/dist/esm/charts/lineChart/utils/getCoordinates.js +55 -0
- package/dist/esm/charts/lineChart/utils/getExtraSpacing.d.ts +1 -3
- package/dist/esm/charts/lineChart/utils/getExtraSpacing.d.ts.map +1 -1
- package/dist/esm/charts/lineChart/utils/getExtraSpacing.js +68 -51
- package/dist/esm/charts/lineChart/utils/getTicks.d.ts +21 -0
- package/dist/esm/charts/lineChart/utils/getTicks.d.ts.map +1 -0
- package/dist/esm/charts/lineChart/utils/getTicks.js +36 -0
- package/dist/esm/charts/lineChart/utils/handleNodesFocus.d.ts.map +1 -1
- package/dist/esm/charts/lineChart/utils/handleNodesFocus.js +14 -25
- package/dist/esm/charts/lineChart/utils/tickTextPosition.d.ts +33 -0
- package/dist/esm/charts/lineChart/utils/tickTextPosition.d.ts.map +1 -0
- package/dist/esm/charts/lineChart/utils/tickTextPosition.js +109 -0
- package/dist/esm/charts/lineChart/utils/validations.d.ts +54 -0
- package/dist/esm/charts/lineChart/utils/validations.d.ts.map +1 -0
- package/dist/esm/charts/lineChart/utils/validations.js +117 -0
- package/dist/esm/components/chartText/chartText.d.ts.map +1 -1
- package/dist/esm/components/chartText/chartText.js +2 -2
- 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/line/line.d.ts.map +1 -1
- package/dist/esm/components/line/line.js +2 -2
- package/dist/esm/components/line/line.types.d.ts +2 -0
- package/dist/esm/components/line/line.types.d.ts.map +1 -1
- package/dist/esm/components/node/node.d.ts.map +1 -1
- package/dist/esm/components/node/node.js +1 -1
- package/dist/esm/components/node/node.types.d.ts +2 -0
- package/dist/esm/components/node/node.types.d.ts.map +1 -1
- package/dist/esm/components/path/path.js +1 -1
- 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/esm/utils/pickCustomAttributes/pickCustomAttributes.d.ts +7 -6
- package/dist/esm/utils/pickCustomAttributes/pickCustomAttributes.d.ts.map +1 -1
- package/dist/esm/utils/pickCustomAttributes/pickCustomAttributes.js +8 -7
- 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/context/buildLineContextValue.d.ts +1 -3
- package/dist/types/charts/lineChart/context/buildLineContextValue.d.ts.map +1 -1
- package/dist/types/charts/lineChart/fragments/fixture/contextData.d.ts +2 -43
- package/dist/types/charts/lineChart/fragments/fixture/contextData.d.ts.map +1 -1
- package/dist/types/charts/lineChart/fragments/lineChartXAxis.d.ts.map +1 -1
- package/dist/types/charts/lineChart/fragments/lineChartYAxis.d.ts.map +1 -1
- package/dist/types/charts/lineChart/lineChart.type.d.ts +12 -7
- package/dist/types/charts/lineChart/lineChart.type.d.ts.map +1 -1
- package/dist/types/charts/lineChart/utils/getCoordinates.d.ts +25 -0
- package/dist/types/charts/lineChart/utils/getCoordinates.d.ts.map +1 -0
- package/dist/types/charts/lineChart/utils/getExtraSpacing.d.ts +1 -3
- package/dist/types/charts/lineChart/utils/getExtraSpacing.d.ts.map +1 -1
- package/dist/types/charts/lineChart/utils/getTicks.d.ts +21 -0
- package/dist/types/charts/lineChart/utils/getTicks.d.ts.map +1 -0
- package/dist/types/charts/lineChart/utils/handleNodesFocus.d.ts.map +1 -1
- package/dist/types/charts/lineChart/utils/tickTextPosition.d.ts +33 -0
- package/dist/types/charts/lineChart/utils/tickTextPosition.d.ts.map +1 -0
- package/dist/types/charts/lineChart/utils/validations.d.ts +54 -0
- package/dist/types/charts/lineChart/utils/validations.d.ts.map +1 -0
- package/dist/types/components/chartText/chartText.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/line/line.d.ts.map +1 -1
- package/dist/types/components/line/line.types.d.ts +2 -0
- package/dist/types/components/line/line.types.d.ts.map +1 -1
- package/dist/types/components/node/node.d.ts.map +1 -1
- package/dist/types/components/node/node.types.d.ts +2 -0
- package/dist/types/components/node/node.types.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/dist/types/utils/pickCustomAttributes/pickCustomAttributes.d.ts +7 -6
- package/dist/types/utils/pickCustomAttributes/pickCustomAttributes.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,5 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { FocusConfig } from '../../../types/focusConfig.type';
|
|
1
|
+
import { KeyboardEvent, MouseEvent, TouchEvent } from '../../../../node_modules/react';
|
|
3
2
|
import { ZoomAreaSelectionConfig, ZoomRange } from '../zoomArea.type';
|
|
4
3
|
/**
|
|
5
4
|
|
|
@@ -31,27 +30,8 @@ interface SelectionAreaProps {
|
|
|
31
30
|
onBlur: () => void;
|
|
32
31
|
}
|
|
33
32
|
/**
|
|
34
|
-
*
|
|
33
|
+
* Selection area overlay - the interactive rectangle that users can drag and focus
|
|
35
34
|
*/
|
|
36
|
-
|
|
37
|
-
/** Start X position */
|
|
38
|
-
startX: number;
|
|
39
|
-
/** End X position */
|
|
40
|
-
endX: number;
|
|
41
|
-
/** Chart height */
|
|
42
|
-
height: number;
|
|
43
|
-
/** Whether the selection area is focused */
|
|
44
|
-
isFocused: boolean;
|
|
45
|
-
/** Custom focus configuration (already resolved) */
|
|
46
|
-
focusConfig: Required<FocusConfig>;
|
|
47
|
-
}
|
|
48
|
-
/**
|
|
49
|
-
* Focus ring for the selection area - rendered separately to control z-order
|
|
50
|
-
*/
|
|
51
|
-
export declare const SelectionAreaFocusRing: FC<SelectionAreaFocusRingProps>;
|
|
52
|
-
/**
|
|
53
|
-
* Selection area overlay
|
|
54
|
-
*/
|
|
55
|
-
export declare const SelectionArea: FC<SelectionAreaProps>;
|
|
35
|
+
export declare const SelectionArea: import('../../../../node_modules/react').ForwardRefExoticComponent<SelectionAreaProps & import('../../../../node_modules/react').RefAttributes<SVGRectElement>>;
|
|
56
36
|
export {};
|
|
57
37
|
//# sourceMappingURL=SelectionArea.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectionArea.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/components/SelectionArea.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"SelectionArea.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/components/SelectionArea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAc,MAAM,OAAO,CAAC;AAGzF,OAAO,KAAK,EAAE,uBAAuB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE3E;;;;GAIG;AACH,UAAU,kBAAkB;IAC1B,uBAAuB;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,mBAAmB;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,YAAY,EAAE,SAAS,CAAC;IACxB,kCAAkC;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,eAAe,EAAE,QAAQ,CAAC,uBAAuB,CAAC,CAAC;IACnD,uCAAuC;IACvC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,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;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,+GA2DzB,CAAC"}
|
|
@@ -17,12 +17,12 @@ interface ZoomHandlerProps {
|
|
|
17
17
|
min: number;
|
|
18
18
|
/** Maximum allowed value */
|
|
19
19
|
max: number;
|
|
20
|
-
/** Whether
|
|
20
|
+
/** Whether the handler is focused (controlled mode) */
|
|
21
21
|
isFocused: boolean;
|
|
22
22
|
/** Custom handler configuration */
|
|
23
23
|
handlerConfig?: ZoomAreaHandlerConfig;
|
|
24
|
-
/**
|
|
25
|
-
focusConfig
|
|
24
|
+
/** Focus ring configuration */
|
|
25
|
+
focusConfig?: FocusConfig;
|
|
26
26
|
/** Text announced by screen readers */
|
|
27
27
|
screenReaderText?: string;
|
|
28
28
|
/** Data test ID */
|
|
@@ -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
|
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"}
|
|
@@ -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":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAE5D;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;CAChC;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;CAInB,CAAC;AAEX;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,iCAAiC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,wBAAwB;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,uCAAuC;IACvC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,oEAAoE;IACpE,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gGAAgG;IAChG,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,mGAAmG;IACnG,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,gCAAgC;IAChC,IAAI,EAAE,kBAAkB,EAAE,CAAC;IAC3B,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,sDAAsD;IACtD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,0CAA0C;IAC1C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mCAAmC;IACnC,aAAa,CAAC,EAAE,qBAAqB,CAAC;IACtC,0CAA0C;IAC1C,eAAe,CAAC,EAAE,uBAAuB,CAAC;IAC1C,mEAAmE;IACnE,WAAW,CAAC,EAAE,WAAW,CAAC;
|
|
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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Filters and extracts only aria-* and
|
|
2
|
+
* Filters and extracts only aria-*, data-* and role attributes from a given object,
|
|
3
3
|
* converting all values to strings for HTML compatibility.
|
|
4
4
|
*
|
|
5
5
|
* This function is useful for extracting accessibility and data attributes
|
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
* - Keys can be strings representing attribute names.
|
|
11
11
|
* - Values can be strings, booleans, numbers, or any other type.
|
|
12
12
|
*
|
|
13
|
-
* @returns A new object containing only aria-* and
|
|
14
|
-
* - Only includes attributes that start with `aria-` or `data
|
|
13
|
+
* @returns A new object containing only aria-*, data-* and role attributes:
|
|
14
|
+
* - Only includes attributes that start with `aria-` or `data-` or are exactly `role`.
|
|
15
15
|
* - All values are converted to strings for HTML compatibility.
|
|
16
16
|
* - Null and undefined values are excluded.
|
|
17
17
|
*
|
|
@@ -20,13 +20,14 @@
|
|
|
20
20
|
* const props = {
|
|
21
21
|
* 'aria-label': 'Button',
|
|
22
22
|
* 'data-testid': 'my-button',
|
|
23
|
-
* 'onClick': () => {},
|
|
23
|
+
* 'onClick': () => {},g
|
|
24
24
|
* 'className': 'btn',
|
|
25
|
-
* 'aria-hidden': true
|
|
25
|
+
* 'aria-hidden': true,
|
|
26
|
+
* 'role': 'button',
|
|
26
27
|
* };
|
|
27
28
|
*
|
|
28
29
|
* const result = pickCustomAttributes(props);
|
|
29
|
-
* // Result: { 'aria-label': 'Button', 'data-testid': 'my-button', 'aria-hidden': 'true' }
|
|
30
|
+
* // Result: { 'aria-label': 'Button', 'data-testid': 'my-button', 'aria-hidden': 'true', 'role': 'button' }
|
|
30
31
|
* ```
|
|
31
32
|
*/
|
|
32
33
|
export declare const pickCustomAttributes: (attributes?: Record<string, any>) => Record<string, string>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pickCustomAttributes.d.ts","sourceRoot":"","sources":["../../../../src/utils/pickCustomAttributes/pickCustomAttributes.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"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/package.json
CHANGED
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import { type FocusConfig } from '../../types/focusConfig.type';
|
|
2
|
-
export interface FocusOutlineConfig {
|
|
3
|
-
/** Type of element for focus calculation */
|
|
4
|
-
elementType: 'circle' | 'rectangle';
|
|
5
|
-
/** Element width in pixels */
|
|
6
|
-
elementWidth: number;
|
|
7
|
-
/** Element height in pixels */
|
|
8
|
-
elementHeight: number;
|
|
9
|
-
/** Position of the element center */
|
|
10
|
-
elementPosition: {
|
|
11
|
-
x: number;
|
|
12
|
-
y: number;
|
|
13
|
-
};
|
|
14
|
-
/** Stroke width of the element */
|
|
15
|
-
elementStrokeWidth?: number;
|
|
16
|
-
/** Stroke width of the outer focus outline */
|
|
17
|
-
outlineStrokeWidth?: number;
|
|
18
|
-
/** Stroke width of the inner focus outline */
|
|
19
|
-
innerStrokeWidth?: number;
|
|
20
|
-
/** Gap between the outer and inner outlines */
|
|
21
|
-
gap?: number;
|
|
22
|
-
}
|
|
23
|
-
/**
|
|
24
|
-
* Dimensions for circle focus outlines
|
|
25
|
-
*/
|
|
26
|
-
export interface CircleFocusOutline {
|
|
27
|
-
type: 'circle';
|
|
28
|
-
outer: {
|
|
29
|
-
cx: number;
|
|
30
|
-
cy: number;
|
|
31
|
-
r: number;
|
|
32
|
-
};
|
|
33
|
-
inner: {
|
|
34
|
-
cx: number;
|
|
35
|
-
cy: number;
|
|
36
|
-
r: number;
|
|
37
|
-
};
|
|
38
|
-
}
|
|
39
|
-
/**
|
|
40
|
-
* Dimensions for rectangle focus outlines
|
|
41
|
-
*/
|
|
42
|
-
export interface RectangleFocusOutline {
|
|
43
|
-
type: 'rectangle';
|
|
44
|
-
outer: {
|
|
45
|
-
x: number;
|
|
46
|
-
y: number;
|
|
47
|
-
width: number;
|
|
48
|
-
height: number;
|
|
49
|
-
};
|
|
50
|
-
inner: {
|
|
51
|
-
x: number;
|
|
52
|
-
y: number;
|
|
53
|
-
width: number;
|
|
54
|
-
height: number;
|
|
55
|
-
};
|
|
56
|
-
}
|
|
57
|
-
/**
|
|
58
|
-
* Union type for focus outline results
|
|
59
|
-
*/
|
|
60
|
-
export type FocusOutlineDimensions = CircleFocusOutline | RectangleFocusOutline;
|
|
61
|
-
/**
|
|
62
|
-
* Calculates the dimensions of the focus outlines (outer and inner) for an SVG element.
|
|
63
|
-
* Supports elements with different width and height dimensions.
|
|
64
|
-
*
|
|
65
|
-
* @param config - Configuration for the calculation.
|
|
66
|
-
* @returns Object with the dimensions and positions of the outer and inner rectangles.
|
|
67
|
-
*/
|
|
68
|
-
export declare const calculateFocusOutline: ({ elementHeight, elementPosition, elementStrokeWidth, elementType, elementWidth, gap, innerStrokeWidth, outlineStrokeWidth, }: FocusOutlineConfig) => FocusOutlineDimensions;
|
|
69
|
-
/**
|
|
70
|
-
* Helper function to get focus complete config
|
|
71
|
-
*/
|
|
72
|
-
export declare const getFocusConfig: (focusConfig?: FocusConfig) => Required<FocusConfig>;
|
|
73
|
-
//# sourceMappingURL=calculateFocusOutline.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"calculateFocusOutline.d.ts","sourceRoot":"","sources":["../../../../src/utils/calculateFocusOutline/calculateFocusOutline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAE3E,MAAM,WAAW,kBAAkB;IACjC,4CAA4C;IAC5C,WAAW,EAAE,QAAQ,GAAG,WAAW,CAAC;IACpC,8BAA8B;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,aAAa,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,eAAe,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,+CAA+C;IAC/C,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IACF,KAAK,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;CACH;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE;QACL,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,KAAK,EAAE;QACL,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,kBAAkB,GAAG,qBAAqB,CAAC;AAEhF;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,GAAI,+HASnC,kBAAkB,KAAG,sBAmEvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,cAAc,WAAW,KAAG,QAAQ,CAAC,WAAW,CAM7E,CAAC"}
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
import { FOCUS_DEFAULT } from '../../types/focusConfig.type';
|
|
2
|
-
/**
|
|
3
|
-
* Calculates the dimensions of the focus outlines (outer and inner) for an SVG element.
|
|
4
|
-
* Supports elements with different width and height dimensions.
|
|
5
|
-
*
|
|
6
|
-
* @param config - Configuration for the calculation.
|
|
7
|
-
* @returns Object with the dimensions and positions of the outer and inner rectangles.
|
|
8
|
-
*/
|
|
9
|
-
export const calculateFocusOutline = ({ elementHeight, elementPosition, elementStrokeWidth = 0, elementType, elementWidth, gap = 0, innerStrokeWidth = 2, outlineStrokeWidth = 2, }) => {
|
|
10
|
-
if (elementType === 'circle') {
|
|
11
|
-
// For circles, work with radius
|
|
12
|
-
const elementRadius = elementWidth / 2;
|
|
13
|
-
// Calculate inner circle radius
|
|
14
|
-
// Position inner circle adjacent to the inner edge of the outer stroke (no gap)
|
|
15
|
-
// The element's stroke extends strokeWidth/2 outward from the element edge
|
|
16
|
-
// The same happens for the inner stroke
|
|
17
|
-
// This ensures the inner circle is positioned correctly without gaps
|
|
18
|
-
const innerRadius = elementRadius + elementStrokeWidth / 2 + innerStrokeWidth / 2 + gap;
|
|
19
|
-
// Calculate outer circle radius
|
|
20
|
-
// Position outer ring completely outside the element and the inner stroke
|
|
21
|
-
// The element's stroke extends strokeWidth/2 outward from the element edge
|
|
22
|
-
// The inner stroke is added to ensure the outer ring is clearly visible
|
|
23
|
-
// The outline stroke / 2 is added to ensure the outer ring is clearly visible
|
|
24
|
-
const outerRadius = innerRadius + innerStrokeWidth / 2 + outlineStrokeWidth / 2;
|
|
25
|
-
return {
|
|
26
|
-
inner: {
|
|
27
|
-
cx: elementPosition.x,
|
|
28
|
-
cy: elementPosition.y,
|
|
29
|
-
r: innerRadius,
|
|
30
|
-
},
|
|
31
|
-
outer: {
|
|
32
|
-
cx: elementPosition.x,
|
|
33
|
-
cy: elementPosition.y,
|
|
34
|
-
r: outerRadius,
|
|
35
|
-
},
|
|
36
|
-
type: 'circle',
|
|
37
|
-
};
|
|
38
|
-
}
|
|
39
|
-
// Calculate inner rectangle dimensions
|
|
40
|
-
// Here we have to take into account that height and width must grow in both sides
|
|
41
|
-
// to ensure the inner rectangle is positioned correctly without gaps
|
|
42
|
-
// that is why here we do not divide by 2
|
|
43
|
-
const innerWidth = elementWidth + elementStrokeWidth + innerStrokeWidth + gap * 2;
|
|
44
|
-
const innerHeight = elementHeight + elementStrokeWidth + innerStrokeWidth + gap * 2;
|
|
45
|
-
const innerX = elementPosition.x - innerWidth / 2;
|
|
46
|
-
const innerY = elementPosition.y - innerHeight / 2;
|
|
47
|
-
// Calculate outer rectangle dimensions
|
|
48
|
-
// Must account for the fact that both inner and outer strokes extend outward from their borders
|
|
49
|
-
// Inner stroke extends innerStrokeWidth/2 on each side, outer stroke extends outlineStrokeWidth/2 on each side
|
|
50
|
-
// We also take into account if some gap between outlines is wanted
|
|
51
|
-
const outerWidth = innerWidth + innerStrokeWidth + outlineStrokeWidth;
|
|
52
|
-
const outerHeight = innerHeight + innerStrokeWidth + outlineStrokeWidth;
|
|
53
|
-
const outerX = elementPosition.x - outerWidth / 2;
|
|
54
|
-
const outerY = elementPosition.y - outerHeight / 2;
|
|
55
|
-
return {
|
|
56
|
-
inner: {
|
|
57
|
-
height: innerHeight,
|
|
58
|
-
width: innerWidth,
|
|
59
|
-
x: innerX,
|
|
60
|
-
y: innerY,
|
|
61
|
-
},
|
|
62
|
-
outer: {
|
|
63
|
-
height: outerHeight,
|
|
64
|
-
width: outerWidth,
|
|
65
|
-
x: outerX,
|
|
66
|
-
y: outerY,
|
|
67
|
-
},
|
|
68
|
-
type: 'rectangle',
|
|
69
|
-
};
|
|
70
|
-
};
|
|
71
|
-
/**
|
|
72
|
-
* Helper function to get focus complete config
|
|
73
|
-
*/
|
|
74
|
-
export const getFocusConfig = (focusConfig) => ({
|
|
75
|
-
gap: focusConfig?.gap ?? FOCUS_DEFAULT.OUTLINES_GAP,
|
|
76
|
-
innerColor: focusConfig?.innerColor ?? FOCUS_DEFAULT.FOCUS_INNER,
|
|
77
|
-
innerStrokeWidth: focusConfig?.innerStrokeWidth ?? FOCUS_DEFAULT.INNER_FOCUS_STROKE_WIDTH,
|
|
78
|
-
outlineColor: focusConfig?.outlineColor ?? FOCUS_DEFAULT.FOCUS_COLOR,
|
|
79
|
-
outlineStrokeWidth: focusConfig?.outlineStrokeWidth ?? FOCUS_DEFAULT.OUTER_FOCUS_STROKE_WIDTH,
|
|
80
|
-
});
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import { type FocusConfig } from '../../types/focusConfig.type';
|
|
2
|
-
export interface FocusOutlineConfig {
|
|
3
|
-
/** Type of element for focus calculation */
|
|
4
|
-
elementType: 'circle' | 'rectangle';
|
|
5
|
-
/** Element width in pixels */
|
|
6
|
-
elementWidth: number;
|
|
7
|
-
/** Element height in pixels */
|
|
8
|
-
elementHeight: number;
|
|
9
|
-
/** Position of the element center */
|
|
10
|
-
elementPosition: {
|
|
11
|
-
x: number;
|
|
12
|
-
y: number;
|
|
13
|
-
};
|
|
14
|
-
/** Stroke width of the element */
|
|
15
|
-
elementStrokeWidth?: number;
|
|
16
|
-
/** Stroke width of the outer focus outline */
|
|
17
|
-
outlineStrokeWidth?: number;
|
|
18
|
-
/** Stroke width of the inner focus outline */
|
|
19
|
-
innerStrokeWidth?: number;
|
|
20
|
-
/** Gap between the outer and inner outlines */
|
|
21
|
-
gap?: number;
|
|
22
|
-
}
|
|
23
|
-
/**
|
|
24
|
-
* Dimensions for circle focus outlines
|
|
25
|
-
*/
|
|
26
|
-
export interface CircleFocusOutline {
|
|
27
|
-
type: 'circle';
|
|
28
|
-
outer: {
|
|
29
|
-
cx: number;
|
|
30
|
-
cy: number;
|
|
31
|
-
r: number;
|
|
32
|
-
};
|
|
33
|
-
inner: {
|
|
34
|
-
cx: number;
|
|
35
|
-
cy: number;
|
|
36
|
-
r: number;
|
|
37
|
-
};
|
|
38
|
-
}
|
|
39
|
-
/**
|
|
40
|
-
* Dimensions for rectangle focus outlines
|
|
41
|
-
*/
|
|
42
|
-
export interface RectangleFocusOutline {
|
|
43
|
-
type: 'rectangle';
|
|
44
|
-
outer: {
|
|
45
|
-
x: number;
|
|
46
|
-
y: number;
|
|
47
|
-
width: number;
|
|
48
|
-
height: number;
|
|
49
|
-
};
|
|
50
|
-
inner: {
|
|
51
|
-
x: number;
|
|
52
|
-
y: number;
|
|
53
|
-
width: number;
|
|
54
|
-
height: number;
|
|
55
|
-
};
|
|
56
|
-
}
|
|
57
|
-
/**
|
|
58
|
-
* Union type for focus outline results
|
|
59
|
-
*/
|
|
60
|
-
export type FocusOutlineDimensions = CircleFocusOutline | RectangleFocusOutline;
|
|
61
|
-
/**
|
|
62
|
-
* Calculates the dimensions of the focus outlines (outer and inner) for an SVG element.
|
|
63
|
-
* Supports elements with different width and height dimensions.
|
|
64
|
-
*
|
|
65
|
-
* @param config - Configuration for the calculation.
|
|
66
|
-
* @returns Object with the dimensions and positions of the outer and inner rectangles.
|
|
67
|
-
*/
|
|
68
|
-
export declare const calculateFocusOutline: ({ elementHeight, elementPosition, elementStrokeWidth, elementType, elementWidth, gap, innerStrokeWidth, outlineStrokeWidth, }: FocusOutlineConfig) => FocusOutlineDimensions;
|
|
69
|
-
/**
|
|
70
|
-
* Helper function to get focus complete config
|
|
71
|
-
*/
|
|
72
|
-
export declare const getFocusConfig: (focusConfig?: FocusConfig) => Required<FocusConfig>;
|
|
73
|
-
//# sourceMappingURL=calculateFocusOutline.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"calculateFocusOutline.d.ts","sourceRoot":"","sources":["../../../../src/utils/calculateFocusOutline/calculateFocusOutline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAE3E,MAAM,WAAW,kBAAkB;IACjC,4CAA4C;IAC5C,WAAW,EAAE,QAAQ,GAAG,WAAW,CAAC;IACpC,8BAA8B;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,aAAa,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,eAAe,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,+CAA+C;IAC/C,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IACF,KAAK,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;CACH;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE;QACL,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,KAAK,EAAE;QACL,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,kBAAkB,GAAG,qBAAqB,CAAC;AAEhF;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,GAAI,+HASnC,kBAAkB,KAAG,sBAmEvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,cAAc,WAAW,KAAG,QAAQ,CAAC,WAAW,CAM7E,CAAC"}
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
import { FOCUS_DEFAULT } from '../../types/focusConfig.type';
|
|
2
|
-
/**
|
|
3
|
-
* Calculates the dimensions of the focus outlines (outer and inner) for an SVG element.
|
|
4
|
-
* Supports elements with different width and height dimensions.
|
|
5
|
-
*
|
|
6
|
-
* @param config - Configuration for the calculation.
|
|
7
|
-
* @returns Object with the dimensions and positions of the outer and inner rectangles.
|
|
8
|
-
*/
|
|
9
|
-
export const calculateFocusOutline = ({ elementHeight, elementPosition, elementStrokeWidth = 0, elementType, elementWidth, gap = 0, innerStrokeWidth = 2, outlineStrokeWidth = 2, }) => {
|
|
10
|
-
if (elementType === 'circle') {
|
|
11
|
-
// For circles, work with radius
|
|
12
|
-
const elementRadius = elementWidth / 2;
|
|
13
|
-
// Calculate inner circle radius
|
|
14
|
-
// Position inner circle adjacent to the inner edge of the outer stroke (no gap)
|
|
15
|
-
// The element's stroke extends strokeWidth/2 outward from the element edge
|
|
16
|
-
// The same happens for the inner stroke
|
|
17
|
-
// This ensures the inner circle is positioned correctly without gaps
|
|
18
|
-
const innerRadius = elementRadius + elementStrokeWidth / 2 + innerStrokeWidth / 2 + gap;
|
|
19
|
-
// Calculate outer circle radius
|
|
20
|
-
// Position outer ring completely outside the element and the inner stroke
|
|
21
|
-
// The element's stroke extends strokeWidth/2 outward from the element edge
|
|
22
|
-
// The inner stroke is added to ensure the outer ring is clearly visible
|
|
23
|
-
// The outline stroke / 2 is added to ensure the outer ring is clearly visible
|
|
24
|
-
const outerRadius = innerRadius + innerStrokeWidth / 2 + outlineStrokeWidth / 2;
|
|
25
|
-
return {
|
|
26
|
-
inner: {
|
|
27
|
-
cx: elementPosition.x,
|
|
28
|
-
cy: elementPosition.y,
|
|
29
|
-
r: innerRadius,
|
|
30
|
-
},
|
|
31
|
-
outer: {
|
|
32
|
-
cx: elementPosition.x,
|
|
33
|
-
cy: elementPosition.y,
|
|
34
|
-
r: outerRadius,
|
|
35
|
-
},
|
|
36
|
-
type: 'circle',
|
|
37
|
-
};
|
|
38
|
-
}
|
|
39
|
-
// Calculate inner rectangle dimensions
|
|
40
|
-
// Here we have to take into account that height and width must grow in both sides
|
|
41
|
-
// to ensure the inner rectangle is positioned correctly without gaps
|
|
42
|
-
// that is why here we do not divide by 2
|
|
43
|
-
const innerWidth = elementWidth + elementStrokeWidth + innerStrokeWidth + gap * 2;
|
|
44
|
-
const innerHeight = elementHeight + elementStrokeWidth + innerStrokeWidth + gap * 2;
|
|
45
|
-
const innerX = elementPosition.x - innerWidth / 2;
|
|
46
|
-
const innerY = elementPosition.y - innerHeight / 2;
|
|
47
|
-
// Calculate outer rectangle dimensions
|
|
48
|
-
// Must account for the fact that both inner and outer strokes extend outward from their borders
|
|
49
|
-
// Inner stroke extends innerStrokeWidth/2 on each side, outer stroke extends outlineStrokeWidth/2 on each side
|
|
50
|
-
// We also take into account if some gap between outlines is wanted
|
|
51
|
-
const outerWidth = innerWidth + innerStrokeWidth + outlineStrokeWidth;
|
|
52
|
-
const outerHeight = innerHeight + innerStrokeWidth + outlineStrokeWidth;
|
|
53
|
-
const outerX = elementPosition.x - outerWidth / 2;
|
|
54
|
-
const outerY = elementPosition.y - outerHeight / 2;
|
|
55
|
-
return {
|
|
56
|
-
inner: {
|
|
57
|
-
height: innerHeight,
|
|
58
|
-
width: innerWidth,
|
|
59
|
-
x: innerX,
|
|
60
|
-
y: innerY,
|
|
61
|
-
},
|
|
62
|
-
outer: {
|
|
63
|
-
height: outerHeight,
|
|
64
|
-
width: outerWidth,
|
|
65
|
-
x: outerX,
|
|
66
|
-
y: outerY,
|
|
67
|
-
},
|
|
68
|
-
type: 'rectangle',
|
|
69
|
-
};
|
|
70
|
-
};
|
|
71
|
-
/**
|
|
72
|
-
* Helper function to get focus complete config
|
|
73
|
-
*/
|
|
74
|
-
export const getFocusConfig = (focusConfig) => ({
|
|
75
|
-
gap: focusConfig?.gap ?? FOCUS_DEFAULT.OUTLINES_GAP,
|
|
76
|
-
innerColor: focusConfig?.innerColor ?? FOCUS_DEFAULT.FOCUS_INNER,
|
|
77
|
-
innerStrokeWidth: focusConfig?.innerStrokeWidth ?? FOCUS_DEFAULT.INNER_FOCUS_STROKE_WIDTH,
|
|
78
|
-
outlineColor: focusConfig?.outlineColor ?? FOCUS_DEFAULT.FOCUS_COLOR,
|
|
79
|
-
outlineStrokeWidth: focusConfig?.outlineStrokeWidth ?? FOCUS_DEFAULT.OUTER_FOCUS_STROKE_WIDTH,
|
|
80
|
-
});
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import { FocusConfig } from '../../types/focusConfig.type';
|
|
2
|
-
export interface FocusOutlineConfig {
|
|
3
|
-
/** Type of element for focus calculation */
|
|
4
|
-
elementType: 'circle' | 'rectangle';
|
|
5
|
-
/** Element width in pixels */
|
|
6
|
-
elementWidth: number;
|
|
7
|
-
/** Element height in pixels */
|
|
8
|
-
elementHeight: number;
|
|
9
|
-
/** Position of the element center */
|
|
10
|
-
elementPosition: {
|
|
11
|
-
x: number;
|
|
12
|
-
y: number;
|
|
13
|
-
};
|
|
14
|
-
/** Stroke width of the element */
|
|
15
|
-
elementStrokeWidth?: number;
|
|
16
|
-
/** Stroke width of the outer focus outline */
|
|
17
|
-
outlineStrokeWidth?: number;
|
|
18
|
-
/** Stroke width of the inner focus outline */
|
|
19
|
-
innerStrokeWidth?: number;
|
|
20
|
-
/** Gap between the outer and inner outlines */
|
|
21
|
-
gap?: number;
|
|
22
|
-
}
|
|
23
|
-
/**
|
|
24
|
-
* Dimensions for circle focus outlines
|
|
25
|
-
*/
|
|
26
|
-
export interface CircleFocusOutline {
|
|
27
|
-
type: 'circle';
|
|
28
|
-
outer: {
|
|
29
|
-
cx: number;
|
|
30
|
-
cy: number;
|
|
31
|
-
r: number;
|
|
32
|
-
};
|
|
33
|
-
inner: {
|
|
34
|
-
cx: number;
|
|
35
|
-
cy: number;
|
|
36
|
-
r: number;
|
|
37
|
-
};
|
|
38
|
-
}
|
|
39
|
-
/**
|
|
40
|
-
* Dimensions for rectangle focus outlines
|
|
41
|
-
*/
|
|
42
|
-
export interface RectangleFocusOutline {
|
|
43
|
-
type: 'rectangle';
|
|
44
|
-
outer: {
|
|
45
|
-
x: number;
|
|
46
|
-
y: number;
|
|
47
|
-
width: number;
|
|
48
|
-
height: number;
|
|
49
|
-
};
|
|
50
|
-
inner: {
|
|
51
|
-
x: number;
|
|
52
|
-
y: number;
|
|
53
|
-
width: number;
|
|
54
|
-
height: number;
|
|
55
|
-
};
|
|
56
|
-
}
|
|
57
|
-
/**
|
|
58
|
-
* Union type for focus outline results
|
|
59
|
-
*/
|
|
60
|
-
export type FocusOutlineDimensions = CircleFocusOutline | RectangleFocusOutline;
|
|
61
|
-
/**
|
|
62
|
-
* Calculates the dimensions of the focus outlines (outer and inner) for an SVG element.
|
|
63
|
-
* Supports elements with different width and height dimensions.
|
|
64
|
-
*
|
|
65
|
-
* @param config - Configuration for the calculation.
|
|
66
|
-
* @returns Object with the dimensions and positions of the outer and inner rectangles.
|
|
67
|
-
*/
|
|
68
|
-
export declare const calculateFocusOutline: ({ elementHeight, elementPosition, elementStrokeWidth, elementType, elementWidth, gap, innerStrokeWidth, outlineStrokeWidth, }: FocusOutlineConfig) => FocusOutlineDimensions;
|
|
69
|
-
/**
|
|
70
|
-
* Helper function to get focus complete config
|
|
71
|
-
*/
|
|
72
|
-
export declare const getFocusConfig: (focusConfig?: FocusConfig) => Required<FocusConfig>;
|
|
73
|
-
//# sourceMappingURL=calculateFocusOutline.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"calculateFocusOutline.d.ts","sourceRoot":"","sources":["../../../../src/utils/calculateFocusOutline/calculateFocusOutline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAE3E,MAAM,WAAW,kBAAkB;IACjC,4CAA4C;IAC5C,WAAW,EAAE,QAAQ,GAAG,WAAW,CAAC;IACpC,8BAA8B;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,aAAa,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,eAAe,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,+CAA+C;IAC/C,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IACF,KAAK,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;CACH;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE;QACL,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,KAAK,EAAE;QACL,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,kBAAkB,GAAG,qBAAqB,CAAC;AAEhF;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,GAAI,+HASnC,kBAAkB,KAAG,sBAmEvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,cAAc,WAAW,KAAG,QAAQ,CAAC,WAAW,CAM7E,CAAC"}
|