Merge pull request #1633 from Shopify/envex/use-watch-null-id

Allow id to be null

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 `<ZeroLine />` 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

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

packages/polaris-viz/src/hooks/tests/useWatchActiveSeries.test.tsx

@@ -0,0 +1,94 @@
+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';
+import {useCallbackRef} from '../useCallbackRef';
+
+jest.mock('../useCallbackRef');
+
+const mockUseCallbackRef = useCallbackRef as jest.MockedFunction<
+  typeof useCallbackRef
+>;
+
+const onIndexChangeCallback = jest.fn();
+
+describe('useWatchActiveSeries()', () => {
+  beforeEach(() => {
+    mockUseCallbackRef.mockReturnValue(onIndexChangeCallback);
+  });
+
+  afterEach(() => {
+    mockUseCallbackRef.mockReset();
+  });
+
+  describe('useWatchActiveSeries()', () => {
+    it('attaches event listener to window when id is passed', () => {
+      const addEventListenerSpy = jest.spyOn(window, 'addEventListener');
+
+      function MockComponent() {
+        useWatchActiveSeries('id', onIndexChangeCallback);
+
+        return null;
+      }
+
+      mount(<MockComponent />);
+
+      expect(addEventListenerSpy).toHaveBeenCalledWith(
+        'id:color-vision-event:singleItem',
+        onIndexChangeCallback,
+      );
+    });
+
+    it('removes event listener from window when component is unmounted', () => {
+      const onIndexChangeCallback = jest.fn();
+      const removeEventListenerSpy = jest.spyOn(window, 'removeEventListener');
+
+      mockUseCallbackRef.mockReturnValue(onIndexChangeCallback);
+
+      function MockComponent() {
+        useWatchActiveSeries('id', onIndexChangeCallback);
+
+        return null;
+      }
+
+      const component = mount(<MockComponent />);
+
+      component.unmount();
+
+      expect(removeEventListenerSpy).toHaveBeenCalledWith(
+        'id:color-vision-event:singleItem',
+        onIndexChangeCallback,
+      );
+    });
+  });
+
+  describe('setActiveSeriesListener()', () => {
+    it('adds an event listener using an event name generated using the given ID', () => {
+      const id = getEventName('someChartId', COLOR_VISION_SINGLE_ITEM);
+      const addEventListenerSpy = jest.spyOn(window, 'addEventListener');
+
+      setActiveSeriesListener('someChartId', onIndexChangeCallback);
+
+      expect(addEventListenerSpy).toHaveBeenCalledWith(
+        id,
+        onIndexChangeCallback,
+      );
+    });
+
+    it('returns a method that removes the previously set event listener', () => {
+      const id = getEventName('someChartId', COLOR_VISION_SINGLE_ITEM);
+      const addEventListenerSpy = jest.spyOn(window, 'addEventListener');
+
+      setActiveSeriesListener('someChartId', onIndexChangeCallback);
+
+      expect(addEventListenerSpy).toHaveBeenCalledWith(
+        id,
+        onIndexChangeCallback,
+      );
+    });
+  });
+});

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);
+  };
+}

packages/polaris-viz/src/index.ts

@@ -86,6 +86,7 @@ export {renderLinearTooltipContent, setSingleSeriesActive} from './utilities';
 
 export {
   useWatchActiveSeries,
+  setActiveSeriesListener,
   setHiddenItems,
   useRenderTooltipContent,
 } from './hooks';