Add are you sure popover?

Author: kadiryazici

package-lock.json

@@ -127,6 +127,7 @@
     }
   },
   "dependencies": {
+    "@floating-ui/react": "^0.27.5",
     "@seamapi/http": "^1.20.0",
     "@tanstack/react-query": "^5.27.5",
     "classnames": "^2.3.2",

package.json

@@ -1,11 +1,21 @@
 import classNames from 'classnames'
+import type { Ref } from 'react'
 
 import type { ButtonProps } from 'lib/ui/types.js'
 
-export function IconButton({ className, ...props }: ButtonProps): JSX.Element {
+export type IconProps = ButtonProps & {
+  elRef?: Ref<HTMLButtonElement>
+}
+
+export function IconButton({
+  className,
+  elRef,
+  ...props
+}: IconProps): JSX.Element {
   return (
     <button
       {...props}
+      ref={elRef}
       className={classNames(
         'seam-icon-btn',
         props.disabled === true && 'seam-icon-btn-disabled',

src/lib/ui/IconButton.tsx

@@ -0,0 +1,168 @@
+import {
+  autoUpdate,
+  flip,
+  limitShift,
+  offset,
+  type ReferenceElement,
+  shift,
+  useFloating,
+} from '@floating-ui/react'
+import {
+  type ReactNode,
+  type Ref,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { createPortal } from 'react-dom'
+
+import { seamComponentsClassName } from 'lib/seam/SeamProvider.js'
+
+export interface PopoverInstance {
+  show: () => void
+  hide: () => void
+  toggle: () => void
+}
+
+type PopoverChildren = (
+  params: {
+    setRef: (ref: HTMLElement | undefined | null) => void
+  } & PopoverInstance
+) => ReactNode
+
+export interface PopoverProps {
+  children: PopoverChildren
+  content: ReactNode | ((instance: PopoverInstance) => ReactNode)
+  instanceRef?: Ref<PopoverInstance>
+  preventCloseOnClickOutside?: boolean
+}
+
+export function Popover(props: PopoverProps): JSX.Element {
+  const { children, content, instanceRef, preventCloseOnClickOutside } = props
+
+  const [open, setOpen] = useState(false)
+
+  const { refs, floatingStyles } = useFloating({
+    whileElementsMounted: autoUpdate,
+    transform: false,
+    open,
+    onOpenChange: setOpen,
+    placement: 'bottom',
+    middleware: [
+      shift({
+        crossAxis: true,
+        limiter: limitShift(),
+      }),
+      flip(),
+      offset(5),
+    ],
+  })
+
+  const referenceEl = useRef<HTMLElement | null>()
+  const floatingEl = useRef<HTMLElement | null>()
+
+  const setFLoating = useCallback(
+    (ref: HTMLElement | null): void => {
+      refs.setFloating(ref)
+      floatingEl.current = ref
+    },
+    [refs, floatingEl]
+  )
+
+  const toggle = useCallback(() => {
+    setOpen((value) => !value)
+  }, [])
+
+  const instance = useMemo(
+    () => ({
+      show: () => {
+        setOpen(true)
+      },
+      hide: () => {
+        setOpen(false)
+      },
+      toggle,
+    }),
+    [toggle]
+  )
+
+  const setReference = useCallback(
+    (ref: ReferenceElement | undefined | null): void => {
+      if (!(ref instanceof HTMLElement) || referenceEl.current === ref) return
+
+      if (referenceEl.current != null) {
+        referenceEl.current.removeEventListener('click', toggle)
+      }
+
+      refs.setReference(ref)
+      ref.addEventListener('click', toggle)
+      referenceEl.current = ref
+    },
+    [toggle, refs]
+  )
+
+  useImperativeHandle(instanceRef, () => instance)
+
+  /**
+   * Closes the popover when the user clicks outside of it.
+   */
+  const windowClickHandler = useCallback((e: MouseEvent): void => {
+    const target = e.target as HTMLElement
+
+    // If the target is the reference element, do nothing.
+    if (
+      referenceEl.current === target ||
+      referenceEl.current?.contains(target) === true
+    ) {
+      return
+    }
+
+    const closest = target.closest('[data-seam-popover]')
+
+    // Prevents closing if target is floating element, also adds support for nested popovers somehow :)
+    if (
+      closest != null &&
+      referenceEl.current != null &&
+      !closest.contains(referenceEl.current)
+    ) {
+      return
+    }
+
+    setOpen(false)
+  }, [])
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (preventCloseOnClickOutside === false) return
+
+      window.addEventListener('click', windowClickHandler)
+    }, 0)
+
+    return () => {
+      window.removeEventListener('click', windowClickHandler)
+    }
+  }, [windowClickHandler, preventCloseOnClickOutside])
+
+  return (
+    <>
+      {children({ setRef: setReference, ...instance })}
+      {open &&
+        createPortal(
+          <div
+            className={seamComponentsClassName}
+            data-seam-popover=''
+            ref={setFLoating}
+            style={floatingStyles}
+          >
+            <div className='seam-popover'>
+              {typeof content === 'function' ? content(instance) : content}
+            </div>
+          </div>,
+          document.body
+        )}
+    </>
+  )
+}

src/lib/ui/Popover/Popover.tsx

@@ -0,0 +1,58 @@
+import { Button } from 'lib/ui/Button.js'
+
+export interface PopoverContentPromptProps {
+  onConfirm?: () => void
+  onCancel?: () => void
+  prompt?: string
+  description?: string
+  confirmText?: string
+  cancelText?: string
+  confirmLoading?: boolean
+}
+
+export function PopoverContentPrompt(
+  props: PopoverContentPromptProps
+): JSX.Element {
+  const {
+    confirmText = t.confirm,
+    cancelText = t.cancel,
+    confirmLoading = false,
+    prompt = t.areYouSure,
+    description,
+    onConfirm,
+    onCancel,
+  } = props
+
+  return (
+    <div className='seam-popover-content-prompt'>
+      <div>
+        <div className='seam-popover-content-prompt-text'>{prompt}</div>
+        {description != null && (
+          <div className='seam-popover-content-prompt-description'>
+            {description}
+          </div>
+        )}
+      </div>
+      <div className='seam-popover-content-prompt-buttons'>
+        <Button
+          variant='solid'
+          onClick={onConfirm}
+          loading={confirmLoading}
+          size='small'
+        >
+          {confirmText}
+        </Button>
+
+        <Button variant='danger' size='small' onClick={onCancel}>
+          {cancelText}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+const t = {
+  confirm: 'Confirm',
+  cancel: 'Cancel',
+  areYouSure: 'Are you sure?',
+}