web/packages/design-system/lib/components/Map/InfoWindow/index.tsx

import {
  InfoWindow as GoogleMapsInfoWindow,
  type InfoWindowProps as GoogleMapsInfoWindowProps,
} from '@vis.gl/react-google-maps'

import styles from './infoWindow.module.css'

import type { MouseEventHandler } from 'react'

interface InfoWindowProps
  extends React.PropsWithChildren<
    Omit<GoogleMapsInfoWindowProps, 'pixelOffset'>
  > {
  pixelOffsetY?: number
  onMouseEnter?: MouseEventHandler<HTMLDivElement>
  onMouseLeave?: MouseEventHandler<HTMLDivElement>
}

export function InfoWindow({
  children,
  pixelOffsetY = -12,
  onMouseEnter,
  onMouseLeave,
  ...options
}: InfoWindowProps) {
  function onMouseEnterHandler(e: React.MouseEvent<HTMLDivElement>) {
    if (onMouseEnter) {
      onMouseEnter(e)
    }
  }

  function onMouseLeaveHandler(e: React.MouseEvent<HTMLDivElement>) {
    if (onMouseLeave) {
      onMouseLeave(e)
    }
  }

  return (
    <GoogleMapsInfoWindow {...options}>
      <div
        className={styles.infoWindow}
        onMouseEnter={onMouseEnterHandler}
        onMouseLeave={onMouseLeaveHandler}
        style={{ paddingBottom: pixelOffsetY ? `${pixelOffsetY * -1}px` : 0 }}
      >
        <div className={styles.content}>{children}</div>
        <span className={styles.arrow} />
      </div>
    </GoogleMapsInfoWindow>
  )
}