{"version":3,"sources":["../src/components/popover/popover.tsx"],"names":["React","useEffect","useId","useRef","Popover","id","children","trigger","triggerLabel","mode","placement","isOpen","onToggle","showCloseButton","showArrow","closeButtonLabel","className","styles","generatedId","popoverId","popoverRef","shouldShowCloseButton","popover","isCurrentlyOpen","handleToggle","event","popover_default"],"mappings":"AAAA,OAAOA,GAAS,aAAAC,EAAW,SAAAC,EAAO,UAAAC,MAAc,QAmEzC,IAAMC,EAAkC,CAAC,CAC9C,GAAAC,EACA,SAAAC,EACA,QAAAC,EACA,aAAAC,EAAe,OACf,KAAAC,EAAO,OACP,UAAAC,EAAY,SACZ,OAAAC,EACA,SAAAC,EACA,gBAAAC,EACA,UAAAC,EAAY,GACZ,iBAAAC,EAAmB,QACnB,UAAAC,EAAY,GACZ,OAAAC,CACF,IAAM,CACJ,IAAMC,EAAchB,EAAM,EACpBiB,EAAYd,GAAMa,EAClBE,EAAajB,EAAuB,IAAI,EAGxCkB,EACJR,IAAoB,OAAYA,EAAkBJ,IAAS,SAG7D,OAAAR,EAAU,IAAM,CACd,IAAMqB,EAAUF,EAAW,QAC3B,GAAKE,GAEDX,IAAW,OACb,GAAI,CAGF,IAAMY,EACJD,EAAQ,QAAQ,eAAe,GAAKA,EAAQ,aAAa,mBAAmB,EAE1EX,GAAU,CAACY,EACbD,EAAQ,YAAY,EACX,CAACX,GAAUY,GACpBD,EAAQ,YAAY,CAExB,MAAQ,CAEN,IAAMC,EAAkBD,EAAQ,aAAa,mBAAmB,EAC5DX,GAAU,CAACY,EACbD,EAAQ,YAAY,EACX,CAACX,GAAUY,GACpBD,EAAQ,YAAY,CAExB,CAEJ,EAAG,CAACX,CAAM,CAAC,EAGXV,EAAU,IAAM,CACd,IAAMqB,EAAUF,EAAW,QAC3B,GAAI,CAACE,GAAW,CAACV,EAAU,OAE3B,IAAMY,EAAgBC,GAAiB,CAErCb,EADoBa,EACC,WAAa,MAAM,CAC1C,EAEA,OAAAH,EAAQ,iBAAiB,SAAUE,CAAY,EACxC,IAAMF,EAAQ,oBAAoB,SAAUE,CAAY,CACjE,EAAG,CAACZ,CAAQ,CAAC,EAyBXZ,EAAA,cAAAA,EAAA,eAtBoB,IAChBO,EACKP,EAAM,aAAaO,EAA+B,CACvD,cAAeY,EACf,oBAAqB,QACvB,CAAC,EAIDnB,EAAA,cAAC,UACC,KAAK,SACL,cAAemB,EACf,oBAAoB,SACpB,aAAYX,EACZ,UAAU,yBAETA,CACH,GAMe,EACfR,EAAA,cAAC,OACC,IAAKoB,EACL,GAAID,EACJ,QAASV,EACT,UAAW,iBAAiBO,CAAS,GAAG,KAAK,EAC7C,iBAAgBN,EAChB,MAAOO,GAENH,GAAad,EAAA,cAAC,OAAI,UAAU,sBAAsB,iBAAgBU,EAAW,EAC9EV,EAAA,cAAC,OAAI,UAAU,yBACZM,EACAe,GACCrB,EAAA,cAAC,UACC,KAAK,SACL,cAAemB,EACf,oBAAoB,OACpB,aAAYJ,EACZ,UAAU,uBACX,QAED,CAEJ,CACF,CACF,CAEJ,EAEOW,EAAQtB,EACfA,EAAQ,YAAc","sourcesContent":["import React, { useEffect, useId, useRef } from 'react';\nimport type {} from '../../types/popover';\n\n/**\n * Props for the Popover component using native HTML popover API\n */\nexport interface PopoverProps {\n /** Unique ID for popover (required for popovertarget attribute) */\n id?: string;\n /** Content to display inside the popover */\n children: React.ReactNode;\n /** Custom trigger element (default: button with triggerLabel) */\n trigger?: React.ReactNode;\n /** Aria-label for default trigger button */\n triggerLabel?: string;\n /** Popover mode: \"auto\" (light dismiss) or \"manual\" (explicit close) */\n mode?: 'auto' | 'manual';\n /** Preferred placement position relative to trigger */\n placement?: 'top' | 'bottom' | 'left' | 'right';\n /** Controlled open state (optional) */\n isOpen?: boolean;\n /** Callback when popover toggles open/closed */\n onToggle?: (open: boolean) => void;\n /** Show close button (default: true for manual mode, false for auto) */\n showCloseButton?: boolean;\n /** Aria-label for close button */\n closeButtonLabel?: string;\n /** Show positioning arrow */\n showArrow?: boolean;\n /** Custom CSS class for popover element */\n className?: string;\n /** Inline CSS variables for theming */\n styles?: React.CSSProperties;\n}\n\n/**\n * Popover component using native HTML popover API\n *\n * Provides automatic top-layer rendering, light dismiss behavior,\n * and accessibility features built into the platform.\n *\n * **Browser Requirements:**\n * - Chrome 125+, Edge 125+, Safari 17.4+\n * - Requires CSS anchor positioning support for optimal placement\n *\n * @example\n * ```tsx\n * \n *

Popover content here

\n * \n * ```\n *\n * @example\n * ```tsx\n * Custom Trigger}\n * >\n *

Popover Title

\n *

This requires explicit close action.

\n * \n * ```\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover\n */\nexport const Popover: React.FC = ({\n id,\n children,\n trigger,\n triggerLabel = 'Open',\n mode = 'auto',\n placement = 'bottom',\n isOpen,\n onToggle,\n showCloseButton,\n showArrow = true,\n closeButtonLabel = 'Close',\n className = '',\n styles,\n}) => {\n const generatedId = useId();\n const popoverId = id || generatedId;\n const popoverRef = useRef(null);\n\n // Default showCloseButton based on mode\n const shouldShowCloseButton =\n showCloseButton !== undefined ? showCloseButton : mode === 'manual';\n\n // Handle controlled state\n useEffect(() => {\n const popover = popoverRef.current;\n if (!popover) return;\n\n if (isOpen !== undefined) {\n try {\n // Try to check if popover is open using :popover-open pseudo-class\n // Fall back to checking data attribute for testing environments\n const isCurrentlyOpen =\n popover.matches(':popover-open') || popover.hasAttribute('data-popover-open');\n\n if (isOpen && !isCurrentlyOpen) {\n popover.showPopover();\n } else if (!isOpen && isCurrentlyOpen) {\n popover.hidePopover();\n }\n } catch {\n // In environments without popover support, check data attribute\n const isCurrentlyOpen = popover.hasAttribute('data-popover-open');\n if (isOpen && !isCurrentlyOpen) {\n popover.showPopover();\n } else if (!isOpen && isCurrentlyOpen) {\n popover.hidePopover();\n }\n }\n }\n }, [isOpen]);\n\n // Listen to toggle events\n useEffect(() => {\n const popover = popoverRef.current;\n if (!popover || !onToggle) return;\n\n const handleToggle = (event: Event) => {\n const toggleEvent = event as ToggleEvent;\n onToggle(toggleEvent.newState === 'open');\n };\n\n popover.addEventListener('toggle', handleToggle);\n return () => popover.removeEventListener('toggle', handleToggle);\n }, [onToggle]);\n\n // Custom trigger with popovertarget attribute\n const renderTrigger = () => {\n if (trigger) {\n return React.cloneElement(trigger as React.ReactElement, {\n popovertarget: popoverId,\n popovertargetaction: 'toggle',\n });\n }\n\n return (\n \n {triggerLabel}\n \n );\n };\n\n return (\n <>\n {renderTrigger()}\n \n {showArrow &&
}\n
\n {children}\n {shouldShowCloseButton && (\n \n ✕\n \n )}\n
\n
\n \n );\n};\n\nexport default Popover;\nPopover.displayName = 'Popover';\n"]}