https://suid.dev/assets/PopoverPage-DU-yakeO.js

1var g=Object.defineProperty;var n=(e,r)=>g(e,"name",{value:r,configurable:!0});import{P as u}from"./Popover-DAEdR1X5.js";import{C as E}from"./ComponentInfo-Ctlyewpe.js";import{a as v,t as h,F as i,h as t,A as P,k as c}from"./index-u9yx2Mx7.js";import"./Grow-DB0NJloj.js";import"./Link-8lUTF9_p.js";import"./copyText-uykli1yJ.js";import"./PaperCode-D-vvHp4Z.js";var f=h("<div>");function d(){const[e,r]=v(null),s=n(a=>{r(a.currentTarget)},"handleClick"),p=n(()=>{r(null)},"handleClose"),l=n(()=>!!e(),"open"),o=n(()=>l()?"simple-popover":void 0,"id");return(()=>{var a=f();return i(a,t(P,{get"aria-describedby"(){return o()},variant:"contained",onClick:s,children:"Open Popover"}),null),i(a,t(u,{get id(){return o()},get open(){return l()},get anchorEl(){return e()},onClose:p,anchorOrigin:{vertical:"bottom",horizontal:"left"},get children(){return t(c,{sx:{p:2},children:"The content of the Popover."})}}),null),a})()}n(d,"BasicPopover");d.code=`import { Button, Popover, Typography } from "@suid/material";
2import { createSignal } from "solid-js";
3
4export default function BasicPopover() {
5  const [anchorEl, setAnchorEl] = createSignal<HTMLButtonElement | null>(null);
6
7  const handleClick = (
8    event: MouseEvent & { currentTarget: HTMLButtonElement }
9  ) => {
10    setAnchorEl(event.currentTarget);
11  };
12
13  const handleClose = () => {
14    setAnchorEl(null);
15  };
16
17  const open = () => Boolean(anchorEl());
18  const id = () => (open() ? "simple-popover" : undefined);
19
20  return (
21    <div>
22      <Button aria-describedby={id()} variant="contained" onClick={handleClick}>
23        Open Popover
24      </Button>
25      <Popover
26        id={id()}
27        open={open()}
28        anchorEl={anchorEl()}
29        onClose={handleClose}
30        anchorOrigin={{
31          vertical: "bottom",
32          horizontal: "left",
33        }}
34      >
35        <Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
36      </Popover>
37    </div>
38  );
39}
40`;var y=h("<div>");function m(){const[e,r]=v(null),s=n(o=>{r(o.currentTarget)},"handlePopoverOpen"),p=n(()=>{r(null)},"handlePopoverClose"),l=n(()=>!!e(),"open");return(()=>{var o=y();return i(o,t(c,{get"aria-owns"(){return l()?"mouse-over-popover":void 0},"aria-haspopup":"true",onMouseEnter:s,onMouseLeave:p,children:"Hover with a Popover."}),null),i(o,t(u,{id:"mouse-over-popover",sx:{pointerEvents:"none"},get open(){return l()},get anchorEl(){return e()},anchorOrigin:{vertical:"bottom",horizontal:"left"},transformOrigin:{vertical:"top",horizontal:"left"},onClose:p,disableRestoreFocus:!0,get children(){return t(c,{sx:{p:1},children:"I use Popover."})}}),null),o})()}n(m,"MouseOverPopover");m.code=`import { Popover, Typography } from "@suid/material";
41import { createSignal } from "solid-js";
42
43export default function MouseOverPopover() {
44  const [anchorEl, setAnchorEl] = createSignal<Element | null>(null);
45
46  const handlePopoverOpen = (event: { currentTarget: Element }) => {
47    setAnchorEl(event.currentTarget);
48  };
49
50  const handlePopoverClose = () => {
51    setAnchorEl(null);
52  };
53
54  const open = () => Boolean(anchorEl());
55
56  return (
57    <div>
58      <Typography
59        aria-owns={open() ? "mouse-over-popover" : undefined}
60        aria-haspopup="true"
61        onMouseEnter={handlePopoverOpen}
62        onMouseLeave={handlePopoverClose}
63      >
64        Hover with a Popover.
65      </Typography>
66      <Popover
67        id="mouse-over-popover"
68        sx={{ pointerEvents: "none" }}
69        open={open()}
70        anchorEl={anchorEl()}
71        anchorOrigin={{
72          vertical: "bottom",
73          horizontal: "left",
74        }}
75        transformOrigin={{
76          vertical: "top",
77          horizontal: "left",
78        }}
79        onClose={handlePopoverClose}
80        disableRestoreFocus
81      >
82        <Typography sx={{ p: 1 }}>I use Popover.</Typography>
83      </Popover>
84    </div>
85  );
86}
87`;function k(){return t(E,{get name(){return u.name},examples:[d,m]})}n(k,"PopoverPage");export{k as default};