{"version":3,"file":"Popover.jsx","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/Popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useEffect, useMemo } from 'react';\nimport type { ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Popover as CorePopover,\n  Flex,\n  Button,\n  Text,\n  useI18n,\n  useEscape,\n  useOuterEvent,\n  CardHeader,\n  CardFooter,\n  CardContent,\n  Progress,\n  useFocusTrap,\n  useUID,\n  getFocusables,\n  VisuallyHiddenText\n} from '@pega/cosmos-react-core';\nimport type { PopoverProps as CorePopoverProps } from '@pega/cosmos-react-core';\n\ntype PopoverProps = {\n  target: NonNullable<CorePopoverProps['target']>;\n  loading?: boolean;\n  heading: string;\n  children?: ReactNode;\n  displayHeading?: boolean;\n  onCancel: () => void;\n  onSubmit: () => void;\n};\n\nconst StyledContent = styled(CardContent)`\n  overflow: auto;\n`;\n\nconst StyledPopover = styled(CorePopover)`\n  position: relative;\n  width: min(100vh, 60ch);\n  min-height: 6rem;\n  max-height: calc(100vh - 2rem);\n`;\n\nconst Popover = ({\n  loading,\n  heading,\n  target,\n  children,\n  displayHeading = true,\n  onCancel,\n  onSubmit\n}: PopoverProps) => {\n  const t = useI18n();\n  const headingId = useUID();\n  const ref = useRef<HTMLElement>(null);\n\n  useOuterEvent('mousedown', [ref], onCancel);\n\n  useEscape(onCancel);\n\n  useFocusTrap(ref);\n\n  useEffect(() => {\n    getFocusables(ref)[0]?.focus();\n  }, []);\n\n  const header = useMemo(() => {\n    if (loading) return;\n\n    const h2 = (\n      <Text variant='h2' id={headingId}>\n        {displayHeading ? heading : <VisuallyHiddenText>{heading}</VisuallyHiddenText>}\n      </Text>\n    );\n\n    return displayHeading ? <CardHeader>{h2}</CardHeader> : h2;\n  }, [loading, heading, headingId, displayHeading]);\n\n  return (\n    <Flex\n      role='dialog'\n      aria-labelledby={headingId}\n      container={{ direction: 'column' }}\n      as={StyledPopover}\n      target={target}\n      arrow\n      ref={ref}\n    >\n      {header}\n\n      <Flex item={{ grow: 1 }} as={StyledContent}>\n        {!loading && children}\n      </Flex>\n\n      {!loading && (\n        <CardFooter container={{ justify: 'between' }}>\n          <Button autoFocus onClick={onCancel}>\n            {t('cancel')}\n          </Button>\n          <Button variant='primary' onClick={onSubmit}>\n            {t('submit')}\n          </Button>\n        </CardFooter>\n      )}\n\n      {loading && <Progress placement='local' message={t('loading')} />}\n    </Flex>\n  );\n};\n\nexport default Popover;\n"]}