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';