UNPKG

tldraw

Version:

A tiny little drawing editor.

8 lines (7 loc) 3 kB
{ "version": 3, "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiPopover.tsx"], "sourcesContent": ["import * as PopoverPrimitive from '@radix-ui/react-popover'\nimport { useContainer } from '@tldraw/editor'\nimport React from 'react'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\n\n/** @public */\nexport interface TLUiPopoverProps {\n\tid: string\n\topen?: boolean\n\tchildren: React.ReactNode\n\tonOpenChange?(isOpen: boolean): void\n}\n\n/** @public @react */\nexport function TldrawUiPopover({ id, children, onOpenChange, open }: TLUiPopoverProps) {\n\tconst [isOpen, handleOpenChange] = useMenuIsOpen(id, onOpenChange)\n\n\treturn (\n\t\t<PopoverPrimitive.Root\n\t\t\tonOpenChange={handleOpenChange}\n\t\t\topen={open || isOpen /* allow debugging */}\n\t\t>\n\t\t\t<div className=\"tlui-popover\">{children}</div>\n\t\t</PopoverPrimitive.Root>\n\t)\n}\n\n/** @public */\nexport interface TLUiPopoverTriggerProps {\n\tchildren?: React.ReactNode\n}\n\n/** @public @react */\nexport function TldrawUiPopoverTrigger({ children }: TLUiPopoverTriggerProps) {\n\treturn (\n\t\t<PopoverPrimitive.Trigger asChild dir=\"ltr\">\n\t\t\t{children}\n\t\t</PopoverPrimitive.Trigger>\n\t)\n}\n\n/** @public */\nexport interface TLUiPopoverContentProps {\n\tchildren: React.ReactNode\n\tside: 'top' | 'bottom' | 'left' | 'right'\n\talign?: 'start' | 'center' | 'end'\n\talignOffset?: number\n\tsideOffset?: number\n\tdisableEscapeKeyDown?: boolean\n}\n\n/** @public @react */\nexport function TldrawUiPopoverContent({\n\tside,\n\tchildren,\n\talign = 'center',\n\tsideOffset = 8,\n\talignOffset = 0,\n\tdisableEscapeKeyDown = false,\n}: TLUiPopoverContentProps) {\n\tconst container = useContainer()\n\treturn (\n\t\t<PopoverPrimitive.Portal container={container}>\n\t\t\t<PopoverPrimitive.Content\n\t\t\t\tclassName=\"tlui-popover__content\"\n\t\t\t\tside={side}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\talign={align}\n\t\t\t\talignOffset={alignOffset}\n\t\t\t\tdir=\"ltr\"\n\t\t\t\tonEscapeKeyDown={(e) => disableEscapeKeyDown && e.preventDefault()}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t{/* <StyledArrow /> */}\n\t\t\t</PopoverPrimitive.Content>\n\t\t</PopoverPrimitive.Portal>\n\t)\n}\n"], "mappings": "AAsBG;AAtBH,YAAY,sBAAsB;AAClC,SAAS,oBAAoB;AAE7B,SAAS,qBAAqB;AAWvB,SAAS,gBAAgB,EAAE,IAAI,UAAU,cAAc,KAAK,GAAqB;AACvF,QAAM,CAAC,QAAQ,gBAAgB,IAAI,cAAc,IAAI,YAAY;AAEjE,SACC;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACA,cAAc;AAAA,MACd,MAAM,QAAQ;AAAA,MAEd,8BAAC,SAAI,WAAU,gBAAgB,UAAS;AAAA;AAAA,EACzC;AAEF;AAQO,SAAS,uBAAuB,EAAE,SAAS,GAA4B;AAC7E,SACC,oBAAC,iBAAiB,SAAjB,EAAyB,SAAO,MAAC,KAAI,OACpC,UACF;AAEF;AAaO,SAAS,uBAAuB;AAAA,EACtC;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,cAAc;AAAA,EACd,uBAAuB;AACxB,GAA4B;AAC3B,QAAM,YAAY,aAAa;AAC/B,SACC,oBAAC,iBAAiB,QAAjB,EAAwB,WACxB;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACA,WAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAI;AAAA,MACJ,iBAAiB,CAAC,MAAM,wBAAwB,EAAE,eAAe;AAAA,MAEhE;AAAA;AAAA,EAEF,GACD;AAEF;", "names": [] }