Implementation:TobikoData Sqlmesh Modal

Knowledge Sources	TobikoData_Sqlmesh
Domains	Web_UI, Components
Last Updated	2026-02-07 20:00 GMT

Overview

A foundational modal dialog component with animated transitions and backdrop overlay.

Description

Modal is a base React component built on Headless UI's Dialog that provides the core structure for modal overlays. The component implements a standard modal pattern with a semi-transparent backdrop (bg-overlay opacity-90) that covers the entire viewport, and centers its children content using flexbox. It includes smooth enter/exit animations using Headless UI's Transition component, with opacity and scale transforms that create a professional fade-and-zoom effect. The modal supports lifecycle callbacks (afterLeave) for cleanup operations and can be dismissed by calling the onClose handler. The component uses z-index 50 to ensure it appears above other UI elements.

Usage

Use this component as the foundation for building specific modal dialogs in the application. It handles the overlay, positioning, and transitions, while its children define the actual modal content. This is typically wrapped around more specific modal components like ModalConfirmation.

Code Reference

Source Location

• Repository: TobikoData_Sqlmesh
• File: web/client/src/library/components/modal/Modal.tsx

Signature

interface PropsModal extends React.HTMLAttributes<HTMLElement> {
  show: boolean
  onClose?: () => void
  afterLeave?: () => void
}

export default function Modal({
  show,
  children,
  afterLeave,
  onClose = () => undefined,
}: PropsModal): JSX.Element

Import

import Modal from '@components/modal/Modal'

I/O Contract

Inputs

Name	Type	Required	Description
show	boolean	Yes	Controls whether the modal is visible
children	React.ReactNode	Yes	Content to render inside the modal dialog
onClose	() => void	No	Callback when modal is dismissed (defaults to no-op)
afterLeave	() => void	No	Callback after modal exit animation completes

Outputs

Name	Type	Description
JSX.Element	React component	Modal overlay with animated backdrop and centered content

Usage Examples

import { useState } from 'react'
import Modal from '@components/modal/Modal'

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>

      <Modal
        show={isOpen}
        onClose={() => setIsOpen(false)}
        afterLeave={() => console.log('Modal closed')}
      >
        <div className="bg-white rounded p-4">
          <h2>Modal Content</h2>
          <p>Your modal content goes here</p>
        </div>
      </Modal>
    </>
  )
}

Related Pages

• Environment:TobikoData_Sqlmesh_Web_UI_Stack