Support stroke and filter styles for spotlight

[MattIPv4]

With v3, it appears it is no longer possible to show a border around the spotlight to emphasize it. Previously, we'd just pass spotlight: { border: '...' } to the styles.

Would it be possible to accept a stroke + strokeWidth, which can then apply to the spotlight (would need to switch to using fill: transparent instead of opacity: 0):

react-joyride/src/components/Overlay.tsx

Lines 167 to 175 in 9a0deb5

	<path
	d={coverPath}
	fill={overlayColor}
	style={{
	opacity: spotlightReady ? 0 : 1,
	pointerEvents: blockTargetInteraction ? 'auto' : 'none',
	transition: 'opacity 0.2s',
	}}
	/>

Ideally, would love to be able to apply a shadow to it as well via filter. This is my current workaround, which demonstrates this should work, I believe:

import { PORTAL_ELEMENT_ID } from 'react-joyride';

...

  // FIXME: https://github.com/gilbarbara/react-joyride/discussions/1201
  useEffect(() => {
    const style = document.createElement('style');
    style.innerHTML = `
      #${PORTAL_ELEMENT_ID} [data-testid="spotlight"] path:nth-child(2) {
        fill: transparent !important;
        opacity: 1 !important;
        stroke: #f00 !important;
        stroke-width: 2px !important;
        filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.75)) !important;
        transition: none !important;
      }
    `;
    document.head.appendChild(style);
    return () => {
      document.head.removeChild(style);
    };
  }, []);

[gilbarbara]

Hey @MattIPv4

I was working with this already, so I finished it and released it in 3.0.1
You can see it in action on the Scroll demo.
I also added some properties to the Overlay section in the config panel so they can be applied to any demo.

[MattIPv4]

Heh, amazing, thank you!