🐛 svg styles override unintentionally

documentation/src/components/Sights/SightCard/SightCard.tsx

@@ -3,6 +3,7 @@ import { useColorMode } from '@docusaurus/theme-common';
 import { labels, sights } from '@monkvision/sights';
 import { Sight, VehicleDetails, VehicleModel } from '@monkvision/types';
 import { CopyPopup, CopyPopupHandle } from '@site/src/components';
+import { DynamicSVGCustomizationFunctions } from '@monkvision/common-ui-web';
 import { DynamicSVG } from '../../domOnly';
 import styles from './SightCard.module.css';
 
@@ -53,11 +54,13 @@ export function SightCard({ item }: SightCardProps) {
     copyPopupRef.current?.open();
   };
 
-  const getOverlayAttributes = () => ({
-    style: {
-      stroke: isDarkTheme ? '#ffffff' : '#000000',
-    },
-  });
+  const getOverlayAttributes: DynamicSVGCustomizationFunctions['getAttributes'] = () => {
+    return {
+      style: {
+        stroke: isDarkTheme ? '#ffffff' : '#000000',
+      },
+    };
+  };
 
   return (
     <>

documentation/src/components/Sights/TopBar/TopBar.tsx

@@ -2,13 +2,13 @@ import { labels, sights, vehicles } from '@monkvision/sights';
 import { SearchBar } from '@site/src/components';
 import { SightCard } from '@site/src/components/Sights/SightCard';
 import clsx from 'clsx';
-import React, { ReactElement, useRef } from 'react';
+import React, { FunctionComponentElement, useRef } from 'react';
 import styles from './TopBar.module.css';
 
 export interface ListItem {
   id: string;
   lookups: string[];
-  component: ReactElement;
+  component: FunctionComponentElement<typeof SightCard>;
 }
 
 export interface Tab {

documentation/src/pages/Sights/index.tsx

@@ -1,9 +1,12 @@
-import { LabelTable, ListItem, Tab, tabs, TopBar } from '@site/src/components';
+import { LabelTable, ListItem, SightCard, Tab, tabs, TopBar } from '@site/src/components';
 import Layout from '@theme/Layout';
-import React, { ReactElement, useMemo, useState } from 'react';
+import React, { FunctionComponentElement, useMemo, useState } from 'react';
 import styles from './styles.module.css';
 
-function lookupItems(lookup: string, items: ListItem[]): ReactElement[] {
+function lookupItems(
+  lookup: string,
+  items: ListItem[],
+): FunctionComponentElement<typeof SightCard>[] {
   const str = lookup.toLowerCase();
   const filtered = str
     ? items.filter((item) => item.lookups.some((lookupStr) => lookupStr.includes(str)))

packages/common-ui-web/src/components/DynamicSVG/DynamicSVG.tsx

@@ -48,7 +48,7 @@ export interface DynamicSVGProps
 export function DynamicSVG({ svg, ...passThroughProps }: DynamicSVGProps) {
   const doc = useXMLParser(svg);
   const svgEl = useMemo(() => {
-    const element = doc.children[0];
+    const element = doc.children[0] as SVGSVGElement;
     if (element.tagName !== 'svg') {
       throw new Error(
         `Invalid SVG string provided to the DynamicSVG component: expected <svg> tag as the first children of XML document but got <${element.tagName}>.`,

packages/common-ui-web/src/components/DynamicSVG/SVGElement.tsx

@@ -41,7 +41,12 @@ export function SVGElement<T extends keyof JSXIntrinsicSVGElements = 'svg'>({
 }: SVGElementProps<T>) {
   const Tag = element.tagName as T;
   const attributes = useJSXTransformAttributes(element);
-  const customAttributes = useCustomAttributes({ element, groupIds, getAttributes });
+  const customAttributes = useCustomAttributes({
+    element,
+    groupIds,
+    getAttributes,
+    style: attributes.style,
+  });
   const tagAttr = { ...attributes, ...customAttributes, ...passThroughProps } as any;
   const innerHTML = useInnerHTML({ element, groupIds, getInnerText });
   const childrenGroupIds = getChildrenGroupIds({ element, groupIds });
@@ -53,7 +58,7 @@ export function SVGElement<T extends keyof JSXIntrinsicSVGElements = 'svg'>({
         ...Array.from(element.children).map((child, id) => (
           <SVGElement
             key={id.toString()}
-            element={child}
+            element={child as SVGSVGElement}
             groupIds={childrenGroupIds}
             getAttributes={getAttributes}
             getInnerText={getInnerText}

packages/common-ui-web/src/components/DynamicSVG/hooks/types.ts

@@ -14,7 +14,7 @@ export interface DynamicSVGCustomizationFunctions {
    * @return This callback should return a set of custom HTML attributes to pass to the element or `null` for no
    * attributes.
    */
-  getAttributes?: (element: Element, groupIds: string[]) => SVGProps<SVGSVGElement> | null;
+  getAttributes?: (element: SVGElement, groupIds: string[]) => SVGProps<SVGElement>;
   /**
    * A callback used to customize the inner text of SVG tags in a DynamicSVG component based on the HTMLElement itself,
    * or the IDs of the groups this element is part of.
@@ -23,7 +23,7 @@ export interface DynamicSVGCustomizationFunctions {
    * @param groupIds The IDs of the SVG group elements this element is part of (the IDs are in order).
    * @return This callback should return a string to use for the innerText of the element or `null` for no innerText.
    */
-  getInnerText?: (element: Element, groupIds: string[]) => string | null;
+  getInnerText?: (element: SVGSVGElement, groupIds: string[]) => string | null;
 }
 
 /**
@@ -34,7 +34,7 @@ export interface SVGElementCustomProps {
   /**
    * The HTMLElement representing the SVG tag that the SVGElement is supposed to display.
    */
-  element: Element;
+  element: SVGSVGElement;
   /**
    * The IDs of the SVG groups this element is part of (in order).
    *

packages/common-ui-web/src/components/DynamicSVG/hooks/useCustomAttributes.ts

@@ -1,4 +1,4 @@
-import { SVGProps, useMemo } from 'react';
+import { CSSProperties, SVGProps, useMemo } from 'react';
 import { DynamicSVGCustomizationFunctions, SVGElementCustomProps } from './types';
 
 /**
@@ -10,15 +10,16 @@ export function useCustomAttributes({
   element,
   groupIds,
   getAttributes,
+  style,
 }: Pick<DynamicSVGCustomizationFunctions, 'getAttributes'> &
-  Required<SVGElementCustomProps>): SVGProps<SVGSVGElement> | null {
+  Required<SVGElementCustomProps> & { style: CSSProperties }): SVGProps<SVGElement> | null {
   return useMemo(() => {
     const elementTag = element.tagName;
-
     if (['svg', 'g'].includes(elementTag)) {
       return { pointerEvents: 'box-none' };
     }
-
-    return getAttributes ? getAttributes(element, groupIds) : null;
+    if (!getAttributes) return { style };
+    const attributes = getAttributes(element, groupIds);
+    return { ...attributes, style: { ...attributes?.style, ...style } };
   }, [element, groupIds, getAttributes]);
 }

packages/common-ui-web/src/components/DynamicSVG/hooks/useJSXTransformAttributes.ts

@@ -31,7 +31,7 @@ function tranformJsxAttribute(attr: HtmlAttribute): JsxAttribute {
  * Custom hook used to map HTML attributes to their JSX counterpart (ex: "class" becomes "className", properly mapping
  * inline style values etc.).
  */
-export function useJSXTransformAttributes(element: Element) {
+export function useJSXTransformAttributes(element: Element): JSX.IntrinsicElements {
   return useMemo(
     () =>
       element.getAttributeNames().reduce((prev, attr) => {
@@ -42,8 +42,8 @@ export function useJSXTransformAttributes(element: Element) {
         return {
           ...prev,
           [key]: value,
-        };
-      }, {}),
+        } as Partial<JSX.IntrinsicElements>;
+      }, {}) as JSX.IntrinsicElements,
     [element],
   );
 }

packages/common-ui-web/test/components/DynamicSVG/SVGElement.test.tsx

@@ -22,7 +22,7 @@ describe('SVGElement component', () => {
       tagName: 'svg',
       children: [],
       getAttribute: (a: string) => a,
-    } as unknown as Element;
+    } as unknown as SVGSVGElement;
 
     const { unmount, container } = render(<SVGElement element={element} />);
 
@@ -36,7 +36,7 @@ describe('SVGElement component', () => {
       tagName: 'svg',
       children: [],
       getAttribute: (a: string) => a,
-    } as unknown as Element;
+    } as unknown as SVGSVGElement;
 
     const { unmount } = render(<SVGElement element={element} />);
 
@@ -49,7 +49,7 @@ describe('SVGElement component', () => {
       tagName: 'svg',
       children: [],
       getAttribute: (a: string) => a,
-    } as unknown as Element;
+    } as unknown as SVGSVGElement;
     const groupIds = ['test-id', 'test-id-23'];
     const getAttributes = jest.fn();
 
@@ -66,7 +66,7 @@ describe('SVGElement component', () => {
       tagName: 'svg',
       children: [],
       getAttribute: (a: string) => a,
-    } as unknown as Element;
+    } as unknown as SVGSVGElement;
     const groupIds = ['test-id', 'test-id-23'];
     const getInnerText = jest.fn();
 
@@ -83,7 +83,7 @@ describe('SVGElement component', () => {
       tagName: 'svg',
       children: [],
       getAttribute: (a: string) => a,
-    } as unknown as Element;
+    } as unknown as SVGSVGElement;
 
     const { unmount, container } = render(<SVGElement element={element} />);
 
@@ -102,7 +102,7 @@ describe('SVGElement component', () => {
       tagName: 'svg',
       children: [],
       getAttribute: (a: string) => a,
-    } as unknown as Element;
+    } as unknown as SVGSVGElement;
 
     const { unmount, container } = render(<SVGElement element={element} />);
 
@@ -121,7 +121,7 @@ describe('SVGElement component', () => {
       tagName: 'svg',
       children: [],
       getAttribute: (a: string) => a,
-    } as unknown as Element;
+    } as unknown as SVGSVGElement;
     const props: Record<string, string> = { id: 'test-id', from: 'test-from' };
 
     const { unmount, container } = render(<SVGElement element={element} {...props} />);
@@ -140,7 +140,7 @@ describe('SVGElement component', () => {
       tagName: 'svg',
       children: [],
       getAttribute: (a: string) => a,
-    } as unknown as Element;
+    } as unknown as SVGSVGElement;
 
     const { unmount, container } = render(<SVGElement element={element} />);
 
@@ -158,7 +158,7 @@ describe('SVGElement component', () => {
         { tagName: 'path', children: [], getAttribute: (a: string) => a },
       ],
       getAttribute: (a: string) => a,
-    } as unknown as Element;
+    } as unknown as SVGSVGElement;
 
     const { unmount, container } = render(<SVGElement element={element} />);
 
@@ -175,7 +175,7 @@ describe('SVGElement component', () => {
       tagName: 'svg',
       children: [{ tagName: 'g', children: [], getAttribute: (a: string) => a }],
       getAttribute: (a: string) => a,
-    } as unknown as Element;
+    } as unknown as SVGSVGElement;
     const getAttributes = jest.fn();
     const getInnerText = jest.fn();
 

packages/common-ui-web/test/components/DynamicSVG/hooks/useCustomAttributes.test.ts

@@ -7,46 +7,46 @@ describe('useCustomAttributes hook', () => {
   });
 
   it('should remove the pointer events of svg tags', () => {
-    const element = { tagName: 'svg' } as unknown as Element;
+    const element = { tagName: 'svg' } as unknown as SVGSVGElement;
 
     const { result, unmount } = renderHook(useCustomAttributes, {
-      initialProps: { element, groupIds: [] },
+      initialProps: { element, groupIds: [], style: {} },
     });
 
     expect(result.current).toEqual({ pointerEvents: 'box-none' });
     unmount();
   });
 
   it('should remove the pointer events of g tags', () => {
-    const element = { tagName: 'g' } as unknown as Element;
+    const element = { tagName: 'g' } as unknown as SVGSVGElement;
 
     const { result, unmount } = renderHook(useCustomAttributes, {
-      initialProps: { element, groupIds: [] },
+      initialProps: { element, groupIds: [], style: {} },
     });
 
     expect(result.current).toEqual({ pointerEvents: 'box-none' });
     unmount();
   });
 
   it('should return null if no customization function is passed', () => {
-    const element = { tagName: 'path' } as unknown as Element;
+    const element = { tagName: 'path' } as unknown as SVGSVGElement;
 
     const { result, unmount } = renderHook(useCustomAttributes, {
-      initialProps: { element, groupIds: [] },
+      initialProps: { element, groupIds: [], style: {} },
     });
 
-    expect(result.current).toBeNull();
+    expect(result.current).toEqual({ style: {} });
     unmount();
   });
 
   it('should return the result of the customization function', () => {
-    const element = { tagName: 'path' } as unknown as Element;
+    const element = { tagName: 'path' } as unknown as SVGSVGElement;
     const groupIds = ['test-id-1', 'test-id-2'];
     const customAttr = { style: { color: 'test-color' } };
     const getAttributes = jest.fn(() => customAttr);
 
     const { result, unmount } = renderHook(useCustomAttributes, {
-      initialProps: { element, groupIds, getAttributes },
+      initialProps: { element, groupIds, getAttributes, style: customAttr.style },
     });
 
     expect(getAttributes).toHaveBeenCalledWith(element, groupIds);

packages/common-ui-web/test/components/DynamicSVG/hooks/useInnerHTML.test.ts

@@ -7,7 +7,7 @@ describe('useInnerHTML hook', () => {
   });
 
   it('should return the element innerHTML if it is a style tag', () => {
-    const element = { tagName: 'style', innerHTML: 'test-html' } as unknown as Element;
+    const element = { tagName: 'style', innerHTML: 'test-html' } as unknown as SVGSVGElement;
 
     const { result, unmount } = renderHook(useInnerHTML, {
       initialProps: { element, groupIds: [] },
@@ -18,7 +18,7 @@ describe('useInnerHTML hook', () => {
   });
 
   it('should return null if no customization function is passed', () => {
-    const element = { tagName: 'path' } as unknown as Element;
+    const element = { tagName: 'path' } as unknown as SVGSVGElement;
 
     const { result, unmount } = renderHook(useInnerHTML, {
       initialProps: { element, groupIds: [] },
@@ -29,13 +29,13 @@ describe('useInnerHTML hook', () => {
   });
 
   it('should return the result of the customization function', () => {
-    const element = { innerHTML: 'test-html' } as unknown as Element;
+    const element = { innerHTML: 'test-html' } as unknown as SVGSVGElement;
     const groupIds = ['test-id-1', 'test-id-2'];
     const innerText = 'inner-text-test';
     const getInnerText = jest.fn(() => innerText);
 
     const { result, unmount } = renderHook(useInnerHTML, {
-      initialProps: { element, groupIds, getInnerText },
+      initialProps: { element, groupIds, getInnerText, style: {} },
     });
 
     expect(getInnerText).toHaveBeenCalledWith(element, groupIds);