{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a5b5692e-c760-4019-a6c7-80b555e94963",
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "from panel_material_ui import Button, Column, IconButton, Popup\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "986d6f98-044d-4031-9e7e-3073cd218250",
   "metadata": {},
   "source": [
    "The `Popup` component displays content in an anchored overlay that requires user interaction. It is commonly used for contextual menus, confirmations, forms, or any UI element that should appear relative to another component or screen position.\n",
    "\n",
    "#### Parameters\n",
    "\n",
    "For more details on customization, see the [customization guides](https://panel-material-ui.holoviz.org/customization/index.html).\n",
    "\n",
    "##### Core\n",
    "\n",
    "* **`open`** (`boolean`): Whether the popup is visible.\n",
    "* **`close_on_click`** (`boolean`): Whether clicking outside the popup should close it.\n",
    "* **`enforce_focus`** (`boolean`): Whether focus is locked inside the popup while open.\n",
    "* **`hide_backdrop`** (`boolean`): Whether to hide the backdrop behind the popup.\n",
    "\n",
    "##### Positioning\n",
    "\n",
    "* **`anchor_origin`** (`dict`): The vertical and horizontal alignment relative to the anchor (default: `{\"horizontal\": \"right\", \"vertical\": \"bottom\"}`).\n",
    "* **`anchor_position`** (`XYCoordinates`): Absolute x/y coordinates to anchor the popup to.\n",
    "* **`elevation`** (`int`): Elevation level of the popup surface.\n",
    "\n",
    "##### Styling\n",
    "\n",
    "* **`sx`** (`dict`): Component-level styling options.\n",
    "* **`theme_config`** (`dict`): Theming options.\n",
    "\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f251256c-d718-44f3-8ea2-cc8c6710c8e1",
   "metadata": {},
   "source": [
    "### Basic Usage\n",
    "\n",
    "The `Popup` can be programmatically opened and closed by setting the `open` parameter:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c2ac2780-ed7a-4315-b85e-4183d6a38ec2",
   "metadata": {},
   "outputs": [],
   "source": [
    "open = Button(label='Open')\n",
    "close = Button(label='Close')\n",
    "\n",
    "popup = Popup('# This is a popup', close, open=True)\n",
    "\n",
    "open.js_on_click(args={'popup': popup}, code=\"popup.data.open = true\")\n",
    "close.js_on_click(args={'popup': popup}, code=\"popup.data.open = false\")\n",
    "\n",
    "Column(open, popup).preview(height=200, width=400)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a6579c94-b07d-48ea-b9e2-cdae9bb106cd",
   "metadata": {},
   "source": [
    "Here we set up a `jslink` to toggle `open` but you can toggle it programmatically:\n",
    "\n",
    "```python\n",
    "popup.open = True\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "4c6482e5-eadb-4881-bb7c-6420f3583e35",
   "metadata": {},
   "source": [
    "### Positioning\n",
    "\n",
    "By default the component is anchored to its parent element, alternatively it can be `attached` to another element:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "6f4182c1-0a70-4ec1-91f4-843d8cbf0882",
   "metadata": {},
   "outputs": [],
   "source": [
    "popup = Popup(\"# An anchored Popup\", open=True)\n",
    "help_button = IconButton(icon=\"help\", attached=[popup])\n",
    "\n",
    "help_button.js_on_click(args={'popup': popup}, code=\"popup.data.open = true\")\n",
    "\n",
    "help_button.preview(width=400, height=200)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ab8c0fa3-2a14-4566-a701-d55ede33ecd0",
   "metadata": {},
   "source": [
    "Alternatively, we can also define an absolute position using the `anchor_position` argument, a tuple of the `(vertical, horizontal)` position:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "02d84ed3-01b0-4d48-956f-4a475a11b5c0",
   "metadata": {},
   "outputs": [],
   "source": [
    "popup = Popup(\"### Absolute position popup\", open=True, anchor_position=(60, 120))\n",
    "\n",
    "popup.preview(width=500, height=200)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "26c8f567-a88e-4225-a59a-cd3a085efed6",
   "metadata": {},
   "source": [
    "### Anchor & Transform Origin\n",
    "\n",
    "The `anchor_origin` determines which part of the anchor element the popup aligns to and the `transform_origin` the point on the popup which will attach to the anchor's origin:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "16ebf6c9-5b2f-4521-a215-a77fe21d45bd",
   "metadata": {},
   "outputs": [],
   "source": [
    "popup = Popup(\n",
    "    \"### Bottom-left anchored popup\",\n",
    "    open=True,\n",
    "    anchor_origin={\"horizontal\": \"left\", \"vertical\": \"bottom\"},\n",
    "    transform_origin={\"horizontal\": \"right\", \"vertical\": \"center\"}\n",
    ")\n",
    "\n",
    "anchor_btn = IconButton(icon=\"info\", attached=[popup], styles={\"margin-left\": \"auto\"})\n",
    "\n",
    "anchor_btn.js_on_click(args={'popup': popup}, code=\"popup.data.open = true\")\n",
    "\n",
    "anchor_btn.preview(width=400, height=200)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "9b30eafe-5d1b-47a7-b55f-e7d3b8a884aa",
   "metadata": {},
   "source": [
    "### References\n",
    "\n",
    "**Material UI Popover:**\n",
    "\n",
    "- [Material UI Popover Reference](https://mui.com/material-ui/react-popover) - Complete documentation for the underlying Material UI component\n",
    "- [Material UI Popover API](https://mui.com/material-ui/api/popover/) - Detailed API reference and configuration options"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.12.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}