diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md
index d611a0a5c8..373bf44c44 100644
--- a/packages/polaris-viz/CHANGELOG.md
+++ b/packages/polaris-viz/CHANGELOG.md
@@ -17,6 +17,14 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
- Fixed the positioning of the `` for the Stacked Horizontal Chart when all values are negative.
+### Changed
+
+- Allow `useWatchActiveSeries` to accept `null` as an `id` to disable attaching events.
+
+## Added
+
+- Export `setActiveSeriesListener()`.
+
## [10.5.2] - 2024-02-22
### Added
diff --git a/packages/polaris-viz/src/hooks/index.ts b/packages/polaris-viz/src/hooks/index.ts
index 11db91bee5..1a24fd354c 100644
--- a/packages/polaris-viz/src/hooks/index.ts
+++ b/packages/polaris-viz/src/hooks/index.ts
@@ -29,5 +29,8 @@ export {
getSeriesColors,
usePrevious,
} from '@shopify/polaris-viz-core';
-export {useWatchActiveSeries} from './useWatchActiveSeries';
+export {
+ useWatchActiveSeries,
+ setActiveSeriesListener,
+} from './useWatchActiveSeries';
export {useExternalHideEvents, setHiddenItems} from './ExternalEvents';
diff --git a/packages/polaris-viz/src/hooks/tests/useWatchActiveSeries.test.tsx b/packages/polaris-viz/src/hooks/tests/useWatchActiveSeries.test.tsx
new file mode 100644
index 0000000000..93fb2a6f67
--- /dev/null
+++ b/packages/polaris-viz/src/hooks/tests/useWatchActiveSeries.test.tsx
@@ -0,0 +1,62 @@
+import {mount} from '@shopify/react-testing';
+import {COLOR_VISION_SINGLE_ITEM} from '@shopify/polaris-viz-core';
+
+import {
+ useWatchActiveSeries,
+ setActiveSeriesListener,
+} from '../useWatchActiveSeries';
+import {getEventName} from '../ColorVisionA11y';
+
+describe('useWatchActiveSeries()', () => {
+ describe('useWatchActiveSeries()', () => {
+ it('attaches event listener to window when id is passed', () => {
+ const addEventListenerSpy = jest.spyOn(window, 'addEventListener');
+
+ function MockComponent() {
+ useWatchActiveSeries('id', () => {});
+
+ return null;
+ }
+
+ mount();
+
+ expect(addEventListenerSpy).toHaveBeenCalledWith(
+ 'id:color-vision-event:singleItem',
+ expect.any(Function),
+ );
+ });
+
+ it('removes event listener from window when component is unmounted', () => {
+ const removeEventListenerSpy = jest.spyOn(window, 'removeEventListener');
+
+ function MockComponent() {
+ useWatchActiveSeries('id', () => {});
+
+ return null;
+ }
+
+ const component = mount();
+
+ component.unmount();
+
+ expect(removeEventListenerSpy).toHaveBeenCalledWith(
+ 'id:color-vision-event:singleItem',
+ expect.any(Function),
+ );
+ });
+ });
+
+ describe('setActiveSeriesListener()', () => {
+ it('generates an event name using the given ID', () => {
+ const id = getEventName('someChartId', COLOR_VISION_SINGLE_ITEM);
+ const addEventListenerSpy = jest.spyOn(window, 'addEventListener');
+
+ setActiveSeriesListener('someChartId', () => {});
+
+ expect(addEventListenerSpy).toHaveBeenCalledWith(
+ id,
+ expect.any(Function),
+ );
+ });
+ });
+});
diff --git a/packages/polaris-viz/src/hooks/useWatchActiveSeries.ts b/packages/polaris-viz/src/hooks/useWatchActiveSeries.ts
index 4a035314ae..d3fc8ef10a 100644
--- a/packages/polaris-viz/src/hooks/useWatchActiveSeries.ts
+++ b/packages/polaris-viz/src/hooks/useWatchActiveSeries.ts
@@ -13,12 +13,24 @@ export function useWatchActiveSeries(
const onIndexChangeCallback = useCallbackRef(onIndexChange);
useEffect(() => {
- const eventName = getEventName(id, COLOR_VISION_SINGLE_ITEM);
+ const clearActiveSeriesListener = setActiveSeriesListener(
+ id,
+ onIndexChangeCallback,
+ );
- window.addEventListener(eventName, onIndexChangeCallback);
-
- return () => {
- window.removeEventListener(eventName, onIndexChangeCallback);
- };
+ return () => clearActiveSeriesListener();
}, [id, onIndexChangeCallback]);
}
+
+export function setActiveSeriesListener(
+ id: string,
+ onIndexChange: (event: ColorVisionEventReturn) => void,
+) {
+ const eventName = getEventName(id, COLOR_VISION_SINGLE_ITEM);
+
+ window.addEventListener(eventName, onIndexChange);
+
+ return () => {
+ window.removeEventListener(eventName, onIndexChange);
+ };
+}
diff --git a/packages/polaris-viz/src/index.ts b/packages/polaris-viz/src/index.ts
index 8624c60ad4..9e0479d8ee 100644
--- a/packages/polaris-viz/src/index.ts
+++ b/packages/polaris-viz/src/index.ts
@@ -86,6 +86,7 @@ export {renderLinearTooltipContent, setSingleSeriesActive} from './utilities';
export {
useWatchActiveSeries,
+ setActiveSeriesListener,
setHiddenItems,
useRenderTooltipContent,
} from './hooks';