@transkripid/flowbite-react
Version:
Official React components built for Flowbite and Tailwind CSS - Transkrip.id fork
1 lines • 6.46 kB
Source Map (JSON)
{"version":3,"file":"Popover.mjs","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ComponentPropsWithRef, Dispatch, ReactNode, SetStateAction } from 'react';\nimport { cloneElement, isValidElement, useMemo, useRef, useState } from 'react';\nimport type { Placement } from '@floating-ui/react';\nimport { FloatingFocusManager, useMergeRefs } from '@floating-ui/react';\nimport type { DeepPartial } from '../../types';\nimport type { FlowbiteFloatingArrowTheme } from '../Floating';\nimport { mergeDeep } from '../../helpers/merge-deep';\nimport { getTheme } from '../../theme-store';\nimport { useBaseFLoating, useFloatingInteractions } from '../../hooks/use-floating';\nimport { getArrowPlacement } from '../Floating/helpers';\n\nexport interface FlowbitePopoverTheme {\n arrow: Omit<FlowbiteFloatingArrowTheme, 'style'>;\n base: string;\n content: string;\n}\n\nexport interface PopoverProps extends Omit<ComponentProps<'div'>, 'content' | 'style'> {\n arrow?: boolean;\n content: ReactNode;\n placement?: 'auto' | Placement;\n theme?: DeepPartial<FlowbitePopoverTheme>;\n trigger?: 'hover' | 'click';\n initialOpen?: boolean;\n open?: boolean;\n onOpenChange?: Dispatch<SetStateAction<boolean>>;\n}\n\nexport function Popover({\n children,\n content,\n theme: customTheme = {},\n arrow = true,\n trigger = 'click',\n initialOpen,\n open: controlledOpen,\n onOpenChange: setControlledOpen,\n placement: theirPlacement = 'bottom',\n ...props\n}: PopoverProps) {\n const [uncontrolledOpen, setUncontrolledOpen] = useState<boolean>(Boolean(initialOpen));\n const arrowRef = useRef<HTMLDivElement>(null);\n\n const theme = mergeDeep(getTheme().popover, customTheme);\n\n const open = controlledOpen ?? uncontrolledOpen;\n const setOpen = setControlledOpen ?? setUncontrolledOpen;\n\n const floatingProps = useBaseFLoating({\n open,\n placement: theirPlacement,\n arrowRef,\n setOpen,\n });\n\n const {\n floatingStyles,\n context,\n placement,\n middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n refs,\n } = floatingProps;\n\n const { getFloatingProps, getReferenceProps } = useFloatingInteractions({\n context,\n role: 'dialog',\n trigger,\n });\n\n const childrenRef = (children as ComponentPropsWithRef<'button'>).ref;\n const ref = useMergeRefs([context.refs.setReference, childrenRef]);\n\n if (!isValidElement(children)) {\n throw Error('Invalid target element');\n }\n\n const target = useMemo(() => {\n return cloneElement(\n children,\n getReferenceProps({\n ref,\n 'data-testid': 'flowbite-popover-target',\n ...children?.props,\n }),\n );\n }, [children, ref, getReferenceProps]);\n\n return (\n <>\n {target}\n {open && (\n <FloatingFocusManager context={context} modal>\n <div\n className={theme.base}\n ref={refs.setFloating}\n data-testid=\"flowbite-popover\"\n {...props}\n style={floatingStyles}\n {...getFloatingProps()}\n >\n <div className=\"relative\">\n {arrow && (\n <div\n className={theme.arrow.base}\n data-testid=\"flowbite-popover-arrow\"\n ref={arrowRef}\n style={{\n top: arrowY ?? ' ',\n left: arrowX ?? ' ',\n right: ' ',\n bottom: ' ',\n [getArrowPlacement({ placement })]: theme.arrow.placement,\n }}\n >\n \n </div>\n )}\n <div className={theme.content}>{content}</div>\n </div>\n </div>\n </FloatingFocusManager>\n )}\n </>\n );\n}\n"],"names":["Popover","children","content","theme","customTheme","arrow","trigger","initialOpen","open","controlledOpen","onOpenChange","setControlledOpen","placement","theirPlacement","props","uncontrolledOpen","setUncontrolledOpen","useState","Boolean","arrowRef","useRef","mergeDeep","getTheme","popover","floatingProps","useBaseFLoating","setOpen","floatingStyles","context","middlewareData","x","arrowX","y","arrowY","refs","getFloatingProps","getReferenceProps","useFloatingInteractions","role","childrenRef","ref","useMergeRefs","setReference","isValidElement","Error","target","useMemo","cloneElement","jsx","FloatingFocusManager","base","setFloating","jsxs","top","left","right","bottom","getArrowPlacement"],"mappings":";;;;;;;AA8BO,SAASA,EAAQ;AAAA,EACtBC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,OAAOC,IAAc,CAAC;AAAA,EACtBC,OAAAA,IAAQ;AAAA,EACRC,SAAAA,IAAU;AAAA,EACVC,aAAAA;AAAAA,EACAC,MAAMC;AAAAA,EACNC,cAAcC;AAAAA,EACdC,WAAWC,IAAiB;AAAA,EAC5B,GAAGC;AACS,GAAG;AACf,QAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAkBC,EAAQX,CAAY,GAChFY,IAAWC,EAAuB,IAAI,GAEtCjB,IAAQkB,EAAUC,EAAS,EAAEC,SAASnB,CAAW,GAEjDI,IAAOC,KAAkBM,GAGzBS,IAAgBC,EAAgB;AAAA,IACpCjB,MAAAA;AAAAA,IACAI,WAAWC;AAAAA,IACXM,UAAAA;AAAAA,IACAO,SANcf,KAAqBK;AAAAA,EAMnCU,CACD,GAEK;AAAA,IACJC,gBAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAhB,WAAAA;AAAAA,IACAiB,gBAAgB;AAAA,MAAExB,OAAO;AAAA,QAAEyB,GAAGC;AAAAA,QAAQC,GAAGC;AAAAA,MAAAA,IAAW,CAAC;AAAA,IAAE;AAAA,IACvDC,MAAAA;AAAAA,EACEV,IAAAA,GAEE;AAAA,IAAEW,kBAAAA;AAAAA,IAAkBC,mBAAAA;AAAAA,MAAsBC,EAAwB;AAAA,IACtET,SAAAA;AAAAA,IACAU,MAAM;AAAA,IACNhC,SAAAA;AAAAA,EAAAA,CACD,GAEKiC,IAAetC,EAA6CuC,KAC5DA,IAAMC,EAAa,CAACb,EAAQM,KAAKQ,cAAcH,CAAW,CAAC;AAE7D,MAAA,CAACI,EAAe1C,CAAQ;AAC1B,UAAM2C,MAAM,wBAAwB;AAGhCC,QAAAA,IAASC,EAAQ,MACdC,EACL9C,GACAmC,EAAkB;AAAA,IAChBI,KAAAA;AAAAA,IACA,eAAe;AAAA,IACf,GAAGvC,KAAAA,gBAAAA,EAAUa;AAAAA,EACd,CAAA,CACH,GACC,CAACb,GAAUuC,GAAKJ,CAAiB,CAAC;AAErC,SAEKS,gBAAAA,EAAAA,GAAAA,EAAAA,UAAAA;AAAAA,IAAAA;AAAAA,IACArC,KACE,gBAAAwC,EAAAC,GAAA,EAAqB,SAAArB,GAAkB,OAAK,IAC3C,UAAA,gBAAAoB,EAAC,OACC,EAAA,WAAW7C,EAAM+C,MACjB,KAAKhB,EAAKiB,aACV,eAAY,oBACRrC,GAAAA,GACJ,OAAOa,MACHQ,EAEJ,GAAA,UAAA,gBAAAiB,EAAC,OAAI,EAAA,WAAU,YACZ/C,UAAAA;AAAAA,MACCA,KAAA,gBAAA2C,EAAC,OACC,EAAA,WAAW7C,EAAME,MAAM6C,MACvB,eAAY,0BACZ,KAAK/B,GACL,OAAO;AAAA,QACLkC,KAAKpB,KAAU;AAAA,QACfqB,MAAMvB,KAAU;AAAA,QAChBwB,OAAO;AAAA,QACPC,QAAQ;AAAA,QACR,CAACC,EAAkB;AAAA,UAAE7C,WAAAA;AAAAA,QAAAA,CAAW,CAAC,GAAGT,EAAME,MAAMO;AAAAA,MAAAA,GAChD,UAGJ,KAAA;AAAA,MAED,gBAAAoC,EAAA,OAAA,EAAI,WAAW7C,EAAMD,SAAUA,UAAQA,GAAA;AAAA,IAAA,EAC1C,CAAA,EACF,CAAA,GACF;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}