fix(useSingleton): className prop

Author: atomiks

src/Tippy.js

@@ -5,8 +5,8 @@ import {
   preserveRef,
   ssrSafeCreateDiv,
   toDataAttributes,
-  updateClassName,
   deepPreserveProps,
+  updateClassName,
 } from './utils';
 import {useMutableBox, useIsomorphicLayoutEffect} from './util-hooks';
 
@@ -116,6 +116,7 @@ export default function TippyGenerator(tippy) {
           instance,
           content,
           props: computedProps,
+          className,
         });
       }
 
@@ -157,7 +158,8 @@ export default function TippyGenerator(tippy) {
         singleton.hook({
           instance,
           content,
-          props: computedProps,
+          props,
+          className,
         });
       }
     });

src/useSingleton.js

@@ -1,5 +1,5 @@
 import {useMutableBox, useIsomorphicLayoutEffect} from './util-hooks';
-import {deepPreserveProps} from './utils';
+import {deepPreserveProps, updateClassName} from './utils';
 import {useMemo} from 'react';
 
 export default function useSingletonGenerator(createSingleton) {
@@ -77,6 +77,34 @@ export default function useSingletonGenerator(createSingleton) {
       }
     });
 
+    useIsomorphicLayoutEffect(() => {
+      const className = mutableBox.sourceData?.className;
+
+      if (className) {
+        if (mutableBox.sourceData?.props.render) {
+          if (process.env.NODE_ENV !== 'production') {
+            console.warn(
+              [
+                '@tippyjs/react: Cannot use `className` prop in conjunction',
+                'with the `render` prop. Place the className on the element',
+                'you are rendering.',
+              ].join(' '),
+            );
+          }
+
+          return;
+        }
+
+        const box = mutableBox.instance.popper.firstElementChild;
+
+        updateClassName(box, 'add', className);
+
+        return () => {
+          updateClassName(box, 'remove', className);
+        };
+      }
+    });
+
     return useMemo(() => {
       const source = {
         data: mutableBox,

test/useSingleton.test.js

@@ -51,6 +51,36 @@ it('changes the singleton content correctly', () => {
   expect(instance.props.content.textContent).toBe('b');
 });
 
+it('updates `className` correctly', () => {
+  function App({className}) {
+    const [source, target] = useSingleton();
+
+    return (
+      <>
+        <Tippy onCreate={onCreate} className={className} singleton={source} />
+        <Tippy content="a" singleton={target}>
+          <button data-testid="a" />
+        </Tippy>
+        <Tippy content="b" singleton={target}>
+          <button data-testid="b" />
+        </Tippy>
+      </>
+    );
+  }
+
+  const {rerender} = render(<App className="some class names" />);
+
+  expect(
+    instance.popper.firstElementChild.className.includes('some class names'),
+  ).toBe(true);
+
+  rerender(<App className="other names" />);
+
+  expect(
+    instance.popper.firstElementChild.className.includes('other names'),
+  ).toBe(true);
+});
+
 describe('disabled prop', () => {
   function App({disabled}) {
     const [source, target] = useSingleton({disabled});