🐛 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,7 +54,7 @@ export function SightCard({ item }: SightCardProps) {
     copyPopupRef.current?.open();
   };
 
-  const getOverlayAttributes = () => ({
+  const getOverlayAttributes: DynamicSVGCustomizationFunctions['getAttributes'] = () => ({
     style: {
       stroke: isDarkTheme ? '#ffffff' : '#000000',
     },

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

@@ -21,8 +21,7 @@ export interface TopBarProps {
   onSelectTab: (tab: Tab) => void;
   onLookupInput: (value: string) => void;
 }
-
-export const tabs = {
+export const tabs: Record<'sights' | 'vehicles' | 'labels', Tab> = {
   sights: {
     key: 'sights',
     items: Object.values(sights).map((sight) => ({

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): Partial<JSX.IntrinsicElements> {
   return useMemo(
     () =>
       element.getAttributeNames().reduce((prev, attr) => {

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,15 +49,20 @@ 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();
 
     const { unmount } = render(
       <SVGElement element={element} groupIds={groupIds} getAttributes={getAttributes} />,
     );
 
-    expect(useCustomAttributes).toHaveBeenCalledWith({ element, groupIds, getAttributes });
+    expect(useCustomAttributes).toHaveBeenCalledWith({
+      element,
+      groupIds,
+      getAttributes,
+      style: {},
+    });
     unmount();
   });
 
@@ -66,7 +71,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 +88,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 +107,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 +126,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 +145,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 +163,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 +180,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,50 +7,64 @@ 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);
     expect(result.current).toEqual(customAttr);
     unmount();
   });
+
+  it('should apply style correctly', () => {
+    const elementStyle = { stroke: '#fff' },
+      customStyle = { color: 'test-color' };
+    const element = { tagName: 'path', style: { stroke: '#fff' } } as SVGSVGElement;
+    const groupIds = ['test-id-1', 'test-id-2'];
+    const getAttributes = jest.fn(() => ({ style: customStyle }));
+    const { result, unmount } = renderHook(useCustomAttributes, {
+      initialProps: { element, groupIds, getAttributes, style: elementStyle },
+    });
+    expect(getAttributes).toHaveBeenCalledWith(element, groupIds);
+    expect(result.current).toEqual({ style: { ...elementStyle, ...customStyle } });
+    unmount();
+  });
 });

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