fix: make menu, popover, select ssr friendly

[jinlee93]

Summary:

• wraps createportal used in the Menu, Popover, and Select components in a conditional checking for window
• tested working with v12.2.0-alpha.2 release on running edu-stack locally
• tried wrapping document.body in useEffect but still got ssr errors

Test Plan:

• CI tests / new tests are not applicable
• Manually tested my changes, and here are the details:
  • Create an alpha publish and try out in edu-stack or traject as a sanity check if changes affect build or deploy, or are breaking, such as token changes, widely used component updates, hooks changes, and major dependency upgrades.

[jinlee93]

Tried something like:

  const [container] = useState(() => {
    const el = document.createElement('div')
    return el
  })

  useEffect(() => {
    document.body.appendChild(container);
    return () => {
      document.body.removeChild(container)
    }
  }, [])

  return (
    <>{createPortal(<HeadlessMenu.Items {...optionProps} />, container)}</>
  );

but still got error along the lines of document is not defined

[jinlee93]

Rather than finagling with this more I felt like checking for window was simpler and easier to understand

[codecov]

Codecov Report

Merging #1660 (4bce6df) into next (bbee463) will decrease coverage by 0.09%.
The diff coverage is 66.66%.

@@            Coverage Diff             @@
##             next    #1660      +/-   ##
==========================================
- Coverage   93.30%   93.21%   -0.09%     
==========================================
  Files         222      222              
  Lines        2957     2963       +6     
  Branches      717      720       +3     
==========================================
+ Hits         2759     2762       +3     
- Misses        181      184       +3     
  Partials       17       17              

Impacted Files	Coverage Δ
src/components/Menu/Menu.tsx	97.91% <66.66%> (-2.09%)	⬇️
src/components/Popover/Popover.tsx	91.89% <66.66%> (-2.40%)	⬇️
src/components/Select/Select.tsx	94.50% <66.66%> (-1.01%)	⬇️

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[github-actions]

size-limit report 📦

Path	Size
components	95.15 KB (+0.09% 🔺)
styles	36.54 KB (0%)

[ghost]

This approach seems reasonable and is along the lines of what the remix docs call out https://remix.run/docs/en/1.17.1/pages/gotchas#typeof-window-checks

[jinlee93]

This approach seems reasonable and is along the lines of what the remix docs call out https://remix.run/docs/en/1.17.1/pages/gotchas#typeof-window-checks

Used typeof document !== 'undefined' as recommended by docs, and tested working with alpha v12.2.0-alpha.3