@redsift/charts 12.5.13 → 12.5.15
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/CONTRIBUTING.md +9 -9
- package/index.d.ts +28 -2
- package/index.js +90 -0
- package/index.js.map +1 -1
- package/package.json +4 -4
package/CONTRIBUTING.md
CHANGED
|
@@ -48,7 +48,7 @@ The Design System is following a monorepo architecture, providing multiple packa
|
|
|
48
48
|
|
|
49
49
|
- `@redsift/table`
|
|
50
50
|
|
|
51
|
-
This package provides datagrid components and features based on [MUI DataGrid](https://mui.com/x/react-data-grid/)
|
|
51
|
+
This package provides datagrid components and features based on [MUI DataGrid](https://mui.com/x/react-data-grid/) Premium (`@redsift/table-pro` is the Pro-tier variant). A [Pro or Premium license](https://mui.com/x/introduction/licensing/) from MUI is required.
|
|
52
52
|
|
|
53
53
|
- `@redsift/charts`
|
|
54
54
|
|
|
@@ -416,22 +416,22 @@ yarn build:products
|
|
|
416
416
|
|
|
417
417
|
## Publishing a release
|
|
418
418
|
|
|
419
|
-
> **Canonical process:** the full, up-to-date release workflow —
|
|
419
|
+
> **Canonical process:** the full, up-to-date release workflow — peer-dependency bumps, docs/MCP regeneration, the preflight gates and the pre-release checklist — lives in **`.github/instructions/release.instructions.md`**. Follow that as the source of truth. The steps below are a summary.
|
|
420
420
|
|
|
421
421
|
### Stable release
|
|
422
422
|
|
|
423
|
-
Releases go through the one-command `yarn release` CLI — not a manual `lerna publish`. See `.github/instructions/release.instructions.md` for the full flow (
|
|
423
|
+
Releases go through the one-command `yarn release` CLI — not a manual `lerna publish`. See `.github/instructions/release.instructions.md` for the full flow (pre-release checklist, post steps, resume).
|
|
424
424
|
|
|
425
425
|
1. Login to NPM with an authorized account: `npm login`
|
|
426
|
-
2. Dry-run the readiness gate
|
|
427
|
-
3. When green, publish: `yarn release stable X.Y.Z` — the CLI preflights, then publishes `X.Y.Z
|
|
426
|
+
2. Dry-run the readiness gate: `yarn release stable X.Y.Z --dry-run` (validates `release/X.Y.Z` and stops before anything irreversible)
|
|
427
|
+
3. When green, publish: `yarn release stable X.Y.Z` — the CLI preflights, then publishes `X.Y.Z` under `latest`, pausing only for the npm OTP. It then creates the GitHub release notes, opens (never merges) the `release/X.Y.Z` → `main` PR, and cuts the next release branch.
|
|
428
428
|
|
|
429
429
|
### Alpha release
|
|
430
430
|
|
|
431
|
-
If you need to test your contribution in a product before releasing — and you're not using `yarn link` — publish to the live alpha channel (
|
|
431
|
+
If you need to test your contribution in a product before releasing — and you're not using `yarn link` — publish to the live alpha channel (from the current release branch, npm dist-tag `alpha`). There are no per-feature alpha branches to create or recreate.
|
|
432
432
|
|
|
433
433
|
1. Login to NPM with an authorized account: `npm login`
|
|
434
|
-
2. Check out the current
|
|
435
|
-
3. Publish: `yarn release alpha` — the CLI derives the next `X.Y.Z-alpha.N` from the tags, runs the
|
|
434
|
+
2. Check out the current release branch: `git checkout release/X.Y.Z`
|
|
435
|
+
3. Publish: `yarn release alpha` — the CLI derives the next `X.Y.Z-alpha.N` from the tags, runs the preflight, and publishes (only the npm OTP is manual)
|
|
436
436
|
|
|
437
|
-
To iterate, push more commits to the
|
|
437
|
+
To iterate, push more commits to the release branch and run `yarn release alpha` again.
|
package/index.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import * as _redsift_design_system from '@redsift/design-system';
|
|
|
3
3
|
import { ValueOf, Theme, Comp, ContainerProps, StylingTransientProps, ContainerTransientProps, FormatMessage } from '@redsift/design-system';
|
|
4
4
|
import { PieArcDatum } from 'd3-shape';
|
|
5
5
|
import * as react from 'react';
|
|
6
|
-
import react__default, { MutableRefObject, ComponentProps,
|
|
6
|
+
import react__default, { MutableRefObject, ComponentProps, RefObject, ReactElement, ReactNode } from 'react';
|
|
7
7
|
import * as d3_scale from 'd3-scale';
|
|
8
8
|
import { ScaleLinear as ScaleLinear$2, ScaleLogarithmic, ScaleSymLog, ScalePoint as ScalePoint$1, ScaleBand as ScaleBand$1, ScaleTime as ScaleTime$1 } from 'd3-scale';
|
|
9
9
|
import { TooltipProps } from '@redsift/popovers';
|
|
@@ -1712,6 +1712,32 @@ declare const useZoom: ({ svgRef, scaleX, scaleY, defaultTransform, size, onZoom
|
|
|
1712
1712
|
scaleY: ScaleLinear$1<number, number, never>;
|
|
1713
1713
|
};
|
|
1714
1714
|
|
|
1715
|
+
interface UseCategoricalChartAsListboxProps {
|
|
1716
|
+
/** The chart `id`. Options are located by the `id<id>__<type>-<index>` ids the chart gives them. */
|
|
1717
|
+
id: string;
|
|
1718
|
+
/** The chart's `chartRef`: the element that becomes the listbox and the single tab stop. */
|
|
1719
|
+
ref: RefObject<HTMLDivElement | null>;
|
|
1720
|
+
/** Id segment of the option elements: `arc` for `PieChart` slices, `bar` for `BarChart` bars. */
|
|
1721
|
+
type: 'arc' | 'bar';
|
|
1722
|
+
/** Number of rendered options. Zero-value slices and bars are not drawn, so leave them out. */
|
|
1723
|
+
optionCount: number;
|
|
1724
|
+
/** Which arrow keys move between options. */
|
|
1725
|
+
orientation?: 'horizontal' | 'vertical';
|
|
1726
|
+
/** Whether several options can be selected at once. */
|
|
1727
|
+
multiselectable?: boolean;
|
|
1728
|
+
}
|
|
1729
|
+
/**
|
|
1730
|
+
* Gives a categorical chart the roles, attributes and keyboard handling of a listbox: the chart is the
|
|
1731
|
+
* tab stop, arrow keys move `aria-activedescendant` and the `.focused` class between its options, and
|
|
1732
|
+
* Enter or Space activates the active option as a click would.
|
|
1733
|
+
*
|
|
1734
|
+
* Spread the result on `chartProps`, give the same `ref` to `chartRef`, and render the options with
|
|
1735
|
+
* `role="option"` and `tabIndex={-1}` (`sliceRole` + `sliceProps`, or `barRole` + `barProps`).
|
|
1736
|
+
*
|
|
1737
|
+
* Returns `undefined` while there is no option, so an empty chart is not a tab stop.
|
|
1738
|
+
*/
|
|
1739
|
+
declare const useCategoricalChartAsListbox: ({ id, ref, type, optionCount, orientation, multiselectable, }: UseCategoricalChartAsListboxProps) => ComponentProps<"div"> | undefined;
|
|
1740
|
+
|
|
1715
1741
|
declare const monochrome = "#73C5EB";
|
|
1716
1742
|
declare const empty = "#BFBFBF";
|
|
1717
1743
|
declare const scheme: {
|
|
@@ -4142,4 +4168,4 @@ declare const StyledScatterPlotEmptyText: styled_components_dist_types.IStyledCo
|
|
|
4142
4168
|
$theme: Theme;
|
|
4143
4169
|
}>> & string;
|
|
4144
4170
|
|
|
4145
|
-
export { AnchorProps, AnyScale, Arc, ArcDatum, ArcProps, Arcs, ArcsProps, Axis, AxisPosition, AxisProps, AxisVariant, Bar, BarChart, BarChartBarsProps, BarChartDimensions, BarChartLegendVariant, BarChartOverlayProps, BarChartProps, BarChartSectionProps, BarChartState, BarDatum, BarDirection, BarOrientation, BarProps, BaseBarChart, CategoricalOrLinearDim, CategoryData, CategoryDatum, CategoryDim, ChartAxesProps, ChartContainer, ChartContainerDescription, ChartContainerProps, ChartContainerTitle, ChartDimensions, ChartSize, ChartTheme, ColorTheme, ComputedBarProps, Coordinates, CoordinatesCategoryData, CoordinatesCategoryDatum, CoordinatesCategoryDim, CustomColorTheme, DataPoint, DataPointProps, Datum, Dot, DotDatum, DotProps, DotVariant, EmptyDatum, JSONArray, JSONObject, JSONValue, LabelVariant, Legend, LegendItemDatum, LegendProps, LegendVariant, Line, LineChart, LineChartDimensions, LineChartLegendVariant, LineChartProps, LinePointDatum, LineProps, LinearData, LinearDatum, LinearDim, MarginProps, NumericValue, PieChart, PieChartDimensions, PieChartLegendVariant, PieChartProps, PieChartVariant, RenderedLinearBarChartProps, Scale, ScaleBand, ScaleLinear, ScaleLog, ScalePoint, ScaleSymlog, ScaleTime, ScaleTypeToScale, ScaleValue, ScaleWithBandwidth, ScatterPlot, ScatterPlotDimensions, ScatterPlotLegendVariant, ScatterPlotProps, ScatterPlotVariant, SortingMethod, Statistic, Statistics, StringValue, StyledArc, StyledArcProps, StyledArcs, StyledArcsProps, StyledAxis, StyledAxisProps, StyledBar, StyledBarChart, StyledBarChartBars, StyledBarChartBarsProps, StyledBarChartEmptyText, StyledBarChartOverlay, StyledBarChartOverlayProps, StyledBarChartProps, StyledBarChartSection, StyledBarChartSectionProps, StyledBarProps, StyledChartContainer, StyledChartContainerCaption, StyledChartContainerProps, StyledChartContainerTitle, StyledDataPoint, StyledDataPointProps, StyledDot, StyledDotProps, StyledLegend, StyledLegendProps, StyledLine, StyledLineChart, StyledLineChartEmptyText, StyledLineChartProps, StyledLineProps, StyledPieChart, StyledPieChartCenterText, StyledPieChartEmptyText, StyledPieChartProps, StyledScatterPlot, StyledScatterPlotEmptyText, StyledScatterPlotProps, SuccessDangerColorTheme, TicksSpec, TooltipVariant, TwoCategoryData, TwoCategoryDatum, TwoCategoryDim, UseBrushProps, UseColorProps, UseFormatCategoricalDataProps, UseZoomProps, XScaleType, empty, getAxisType, getColorScale, getSortingMethod, isValidDate, mergeLegends, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };
|
|
4171
|
+
export { AnchorProps, AnyScale, Arc, ArcDatum, ArcProps, Arcs, ArcsProps, Axis, AxisPosition, AxisProps, AxisVariant, Bar, BarChart, BarChartBarsProps, BarChartDimensions, BarChartLegendVariant, BarChartOverlayProps, BarChartProps, BarChartSectionProps, BarChartState, BarDatum, BarDirection, BarOrientation, BarProps, BaseBarChart, CategoricalOrLinearDim, CategoryData, CategoryDatum, CategoryDim, ChartAxesProps, ChartContainer, ChartContainerDescription, ChartContainerProps, ChartContainerTitle, ChartDimensions, ChartSize, ChartTheme, ColorTheme, ComputedBarProps, Coordinates, CoordinatesCategoryData, CoordinatesCategoryDatum, CoordinatesCategoryDim, CustomColorTheme, DataPoint, DataPointProps, Datum, Dot, DotDatum, DotProps, DotVariant, EmptyDatum, JSONArray, JSONObject, JSONValue, LabelVariant, Legend, LegendItemDatum, LegendProps, LegendVariant, Line, LineChart, LineChartDimensions, LineChartLegendVariant, LineChartProps, LinePointDatum, LineProps, LinearData, LinearDatum, LinearDim, MarginProps, NumericValue, PieChart, PieChartDimensions, PieChartLegendVariant, PieChartProps, PieChartVariant, RenderedLinearBarChartProps, Scale, ScaleBand, ScaleLinear, ScaleLog, ScalePoint, ScaleSymlog, ScaleTime, ScaleTypeToScale, ScaleValue, ScaleWithBandwidth, ScatterPlot, ScatterPlotDimensions, ScatterPlotLegendVariant, ScatterPlotProps, ScatterPlotVariant, SortingMethod, Statistic, Statistics, StringValue, StyledArc, StyledArcProps, StyledArcs, StyledArcsProps, StyledAxis, StyledAxisProps, StyledBar, StyledBarChart, StyledBarChartBars, StyledBarChartBarsProps, StyledBarChartEmptyText, StyledBarChartOverlay, StyledBarChartOverlayProps, StyledBarChartProps, StyledBarChartSection, StyledBarChartSectionProps, StyledBarProps, StyledChartContainer, StyledChartContainerCaption, StyledChartContainerProps, StyledChartContainerTitle, StyledDataPoint, StyledDataPointProps, StyledDot, StyledDotProps, StyledLegend, StyledLegendProps, StyledLine, StyledLineChart, StyledLineChartEmptyText, StyledLineChartProps, StyledLineProps, StyledPieChart, StyledPieChartCenterText, StyledPieChartEmptyText, StyledPieChartProps, StyledScatterPlot, StyledScatterPlotEmptyText, StyledScatterPlotProps, SuccessDangerColorTheme, TicksSpec, TooltipVariant, TwoCategoryData, TwoCategoryDatum, TwoCategoryDim, UseBrushProps, UseCategoricalChartAsListboxProps, UseColorProps, UseFormatCategoricalDataProps, UseZoomProps, XScaleType, empty, getAxisType, getColorScale, getSortingMethod, isValidDate, mergeLegends, monochrome, scheme, successDangerScheme, useBrush, useCategoricalChartAsListbox, useColor, useFormatCategoricalData, useZoom };
|
package/index.js
CHANGED
|
@@ -2,6 +2,7 @@ export { e as empty, g as getColorScale, m as monochrome, s as scheme, a as succ
|
|
|
2
2
|
export { C as ChartSize, a as ColorTheme, g as getSortingMethod, i as isValidDate, m as mergeLegends, u as useColor } from './_internal/theme.js';
|
|
3
3
|
export { S as ScatterPlot, c as ScatterPlotLegendVariant, b as ScatterPlotVariant, d as StyledScatterPlot, e as StyledScatterPlotEmptyText, u as useBrush, a as useZoom } from './_internal/ScatterPlot2.js';
|
|
4
4
|
export { u as useFormatCategoricalData } from './_internal/useFormatCategoricalData.js';
|
|
5
|
+
import { useRef, useCallback, useMemo } from 'react';
|
|
5
6
|
export { a as LabelVariant, L as LegendVariant, T as TooltipVariant } from './_internal/legend2.js';
|
|
6
7
|
export { A as Arc, S as StyledArc } from './_internal/Arc2.js';
|
|
7
8
|
export { A as Arcs, S as StyledArcs } from './_internal/Arcs2.js';
|
|
@@ -15,4 +16,93 @@ export { L as Legend, S as StyledLegend } from './_internal/Legend3.js';
|
|
|
15
16
|
export { L as Line, S as StyledLine } from './_internal/Line2.js';
|
|
16
17
|
export { L as LineChart, a as LineChartLegendVariant, S as StyledLineChart, b as StyledLineChartEmptyText } from './_internal/LineChart2.js';
|
|
17
18
|
export { P as PieChart, b as PieChartLegendVariant, a as PieChartVariant, S as StyledPieChart, c as StyledPieChartCenterText, d as StyledPieChartEmptyText } from './_internal/PieChart2.js';
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Gives a categorical chart the roles, attributes and keyboard handling of a listbox: the chart is the
|
|
22
|
+
* tab stop, arrow keys move `aria-activedescendant` and the `.focused` class between its options, and
|
|
23
|
+
* Enter or Space activates the active option as a click would.
|
|
24
|
+
*
|
|
25
|
+
* Spread the result on `chartProps`, give the same `ref` to `chartRef`, and render the options with
|
|
26
|
+
* `role="option"` and `tabIndex={-1}` (`sliceRole` + `sliceProps`, or `barRole` + `barProps`).
|
|
27
|
+
*
|
|
28
|
+
* Returns `undefined` while there is no option, so an empty chart is not a tab stop.
|
|
29
|
+
*/
|
|
30
|
+
const useCategoricalChartAsListbox = _ref => {
|
|
31
|
+
let {
|
|
32
|
+
id,
|
|
33
|
+
ref,
|
|
34
|
+
type,
|
|
35
|
+
optionCount,
|
|
36
|
+
orientation = 'horizontal',
|
|
37
|
+
multiselectable = false
|
|
38
|
+
} = _ref;
|
|
39
|
+
const activeIndexRef = useRef(0);
|
|
40
|
+
const getOption = useCallback(index => {
|
|
41
|
+
var _ref$current$querySel, _ref$current;
|
|
42
|
+
return (_ref$current$querySel = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector(`[id="id${id}__${type}-${index}"]`)) !== null && _ref$current$querySel !== void 0 ? _ref$current$querySel : null;
|
|
43
|
+
}, [id, ref, type]);
|
|
44
|
+
const setActive = useCallback(index => {
|
|
45
|
+
var _getOption, _ref$current2, _getOption2;
|
|
46
|
+
(_getOption = getOption(activeIndexRef.current)) === null || _getOption === void 0 ? void 0 : _getOption.classList.remove('focused');
|
|
47
|
+
activeIndexRef.current = index;
|
|
48
|
+
(_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.setAttribute('aria-activedescendant', `id${id}__${type}-${index}`);
|
|
49
|
+
(_getOption2 = getOption(index)) === null || _getOption2 === void 0 ? void 0 : _getOption2.classList.add('focused');
|
|
50
|
+
}, [getOption, id, ref, type]);
|
|
51
|
+
return useMemo(() => {
|
|
52
|
+
if (optionCount <= 0) return undefined;
|
|
53
|
+
const forwards = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
|
|
54
|
+
const backwards = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
|
|
55
|
+
const step = delta => setActive((activeIndexRef.current + delta + optionCount) % optionCount);
|
|
56
|
+
return {
|
|
57
|
+
role: 'listbox',
|
|
58
|
+
tabIndex: 0,
|
|
59
|
+
'aria-activedescendant': '',
|
|
60
|
+
'aria-multiselectable': multiselectable,
|
|
61
|
+
'aria-orientation': orientation,
|
|
62
|
+
onFocus: () => setActive(activeIndexRef.current),
|
|
63
|
+
onBlur: () => {
|
|
64
|
+
var _getOption3, _ref$current3;
|
|
65
|
+
(_getOption3 = getOption(activeIndexRef.current)) === null || _getOption3 === void 0 ? void 0 : _getOption3.classList.remove('focused');
|
|
66
|
+
activeIndexRef.current = 0;
|
|
67
|
+
(_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.setAttribute('aria-activedescendant', '');
|
|
68
|
+
},
|
|
69
|
+
// A pointer click must not move the focus into the chart: the option (tabIndex -1) would take it,
|
|
70
|
+
// paint the `.focused` ring on the active option instead of the clicked one, and swallow the
|
|
71
|
+
// arrow keys it then receives.
|
|
72
|
+
onMouseDown: event => event.preventDefault(),
|
|
73
|
+
onKeyDown: event => {
|
|
74
|
+
var _getOption4;
|
|
75
|
+
switch (event.code) {
|
|
76
|
+
case forwards:
|
|
77
|
+
event.preventDefault();
|
|
78
|
+
step(1);
|
|
79
|
+
break;
|
|
80
|
+
case backwards:
|
|
81
|
+
event.preventDefault();
|
|
82
|
+
step(-1);
|
|
83
|
+
break;
|
|
84
|
+
case 'Home':
|
|
85
|
+
event.preventDefault();
|
|
86
|
+
setActive(0);
|
|
87
|
+
break;
|
|
88
|
+
case 'End':
|
|
89
|
+
event.preventDefault();
|
|
90
|
+
setActive(optionCount - 1);
|
|
91
|
+
break;
|
|
92
|
+
case 'Enter':
|
|
93
|
+
case 'Space':
|
|
94
|
+
event.preventDefault();
|
|
95
|
+
// Bubbling, so React's delegated `onClick` on the option receives it.
|
|
96
|
+
(_getOption4 = getOption(activeIndexRef.current)) === null || _getOption4 === void 0 ? void 0 : _getOption4.dispatchEvent(new window.MouseEvent('click', {
|
|
97
|
+
bubbles: true,
|
|
98
|
+
cancelable: true
|
|
99
|
+
}));
|
|
100
|
+
break;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
};
|
|
104
|
+
}, [getOption, multiselectable, optionCount, orientation, ref, setActive]);
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
export { useCategoricalChartAsListbox };
|
|
18
108
|
//# sourceMappingURL=index.js.map
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/hooks/useCategoricalChartAsListbox.ts"],"sourcesContent":["import { ComponentProps, KeyboardEvent, MouseEvent, RefObject, useCallback, useMemo, useRef } from 'react';\n\nexport interface UseCategoricalChartAsListboxProps {\n /** The chart `id`. Options are located by the `id<id>__<type>-<index>` ids the chart gives them. */\n id: string;\n /** The chart's `chartRef`: the element that becomes the listbox and the single tab stop. */\n ref: RefObject<HTMLDivElement | null>;\n /** Id segment of the option elements: `arc` for `PieChart` slices, `bar` for `BarChart` bars. */\n type: 'arc' | 'bar';\n /** Number of rendered options. Zero-value slices and bars are not drawn, so leave them out. */\n optionCount: number;\n /** Which arrow keys move between options. */\n orientation?: 'horizontal' | 'vertical';\n /** Whether several options can be selected at once. */\n multiselectable?: boolean;\n}\n\n/**\n * Gives a categorical chart the roles, attributes and keyboard handling of a listbox: the chart is the\n * tab stop, arrow keys move `aria-activedescendant` and the `.focused` class between its options, and\n * Enter or Space activates the active option as a click would.\n *\n * Spread the result on `chartProps`, give the same `ref` to `chartRef`, and render the options with\n * `role=\"option\"` and `tabIndex={-1}` (`sliceRole` + `sliceProps`, or `barRole` + `barProps`).\n *\n * Returns `undefined` while there is no option, so an empty chart is not a tab stop.\n */\nexport const useCategoricalChartAsListbox = ({\n id,\n ref,\n type,\n optionCount,\n orientation = 'horizontal',\n multiselectable = false,\n}: UseCategoricalChartAsListboxProps): ComponentProps<'div'> | undefined => {\n const activeIndexRef = useRef(0);\n\n const getOption = useCallback(\n (index: number) => ref.current?.querySelector<SVGElement>(`[id=\"id${id}__${type}-${index}\"]`) ?? null,\n [id, ref, type]\n );\n\n const setActive = useCallback(\n (index: number) => {\n getOption(activeIndexRef.current)?.classList.remove('focused');\n activeIndexRef.current = index;\n ref.current?.setAttribute('aria-activedescendant', `id${id}__${type}-${index}`);\n getOption(index)?.classList.add('focused');\n },\n [getOption, id, ref, type]\n );\n\n return useMemo(() => {\n if (optionCount <= 0) return undefined;\n\n const forwards = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';\n const backwards = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';\n\n const step = (delta: number) => setActive((activeIndexRef.current + delta + optionCount) % optionCount);\n\n return {\n role: 'listbox',\n tabIndex: 0,\n 'aria-activedescendant': '',\n 'aria-multiselectable': multiselectable,\n 'aria-orientation': orientation,\n onFocus: () => setActive(activeIndexRef.current),\n onBlur: () => {\n getOption(activeIndexRef.current)?.classList.remove('focused');\n activeIndexRef.current = 0;\n ref.current?.setAttribute('aria-activedescendant', '');\n },\n // A pointer click must not move the focus into the chart: the option (tabIndex -1) would take it,\n // paint the `.focused` ring on the active option instead of the clicked one, and swallow the\n // arrow keys it then receives.\n onMouseDown: (event: MouseEvent<HTMLDivElement>) => event.preventDefault(),\n onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => {\n switch (event.code) {\n case forwards:\n event.preventDefault();\n step(1);\n break;\n case backwards:\n event.preventDefault();\n step(-1);\n break;\n case 'Home':\n event.preventDefault();\n setActive(0);\n break;\n case 'End':\n event.preventDefault();\n setActive(optionCount - 1);\n break;\n case 'Enter':\n case 'Space':\n event.preventDefault();\n // Bubbling, so React's delegated `onClick` on the option receives it.\n getOption(activeIndexRef.current)?.dispatchEvent(\n new window.MouseEvent('click', { bubbles: true, cancelable: true })\n );\n break;\n default:\n break;\n }\n },\n };\n }, [getOption, multiselectable, optionCount, orientation, ref, setActive]);\n};\n"],"names":["useCategoricalChartAsListbox","_ref","id","ref","type","optionCount","orientation","multiselectable","activeIndexRef","useRef","getOption","useCallback","index","_ref$current$querySel","_ref$current","current","querySelector","setActive","_getOption","_ref$current2","_getOption2","classList","remove","setAttribute","add","useMemo","undefined","forwards","backwards","step","delta","role","tabIndex","onFocus","onBlur","_getOption3","_ref$current3","onMouseDown","event","preventDefault","onKeyDown","_getOption4","code","dispatchEvent","window","MouseEvent","bubbles","cancelable"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"test": "yarn test:unit && yarn test:storybook"
|
|
31
31
|
},
|
|
32
32
|
"types": "index.d.ts",
|
|
33
|
-
"version": "12.5.
|
|
33
|
+
"version": "12.5.15",
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@emotion/react": "^11.10.4",
|
|
36
36
|
"@emotion/styled": "^11.10.4",
|
|
@@ -86,11 +86,11 @@
|
|
|
86
86
|
"ts-jest": "^29.2.0"
|
|
87
87
|
},
|
|
88
88
|
"peerDependencies": {
|
|
89
|
-
"@redsift/design-system": "^12.5.
|
|
90
|
-
"@redsift/popovers": "^12.5.
|
|
89
|
+
"@redsift/design-system": "^12.5.15-0",
|
|
90
|
+
"@redsift/popovers": "^12.5.15-0",
|
|
91
91
|
"react": ">=17",
|
|
92
92
|
"react-dom": ">=17",
|
|
93
93
|
"styled-components": "6.1.19"
|
|
94
94
|
},
|
|
95
|
-
"gitHead": "
|
|
95
|
+
"gitHead": "b064c6c447607f10919e71c766182014fff8cee3"
|
|
96
96
|
}
|