import { jsx, jsxs } from "react/jsx-runtime";
import Box from "@mui/material/Box";
import ClickAwayListener from "@mui/material/ClickAwayListener";
import Paper from "@mui/material/Paper";
import Popper from "@mui/material/Popper";
import { Colors } from "@uipath/apollo-core";
const PickerPopup = ({ open, anchorEl, onClose, width, placement = 'bottom-start', zIndex = 1400, header, footer, className, 'data-testid': dataTestId, children })=>/*#__PURE__*/ jsx(Popper, {
        open: open,
        anchorEl: anchorEl,
        placement: placement,
        style: {
            zIndex,
            width: width ?? anchorEl?.clientWidth
        },
        modifiers: [
            {
                name: 'offset',
                options: {
                    offset: [
                        0,
                        6
                    ]
                }
            }
        ],
        children: /*#__PURE__*/ jsx(ClickAwayListener, {
            onClickAway: onClose,
            children: /*#__PURE__*/ jsxs(Paper, {
                elevation: 0,
                className: className,
                "data-testid": dataTestId,
                sx: {
                    borderRadius: '10px',
                    overflow: 'hidden',
                    border: '1px solid',
                    borderColor: `var(--color-border-de-emp, ${Colors.ColorGray300})`,
                    backgroundColor: `var(--color-background-raised, ${Colors.ColorWhite})`,
                    boxShadow: '0 12px 30px rgba(16, 24, 40, 0.10), 0 2px 6px rgba(16, 24, 40, 0.04)',
                    display: 'flex',
                    flexDirection: 'column'
                },
                children: [
                    header,
                    /*#__PURE__*/ jsx(Box, {
                        sx: {
                            flex: 1,
                            minHeight: 0
                        },
                        children: children
                    }),
                    footer && /*#__PURE__*/ jsx(Box, {
                        sx: {
                            borderTop: '1px solid',
                            borderColor: `var(--color-border-de-emp, ${Colors.ColorGray300})`,
                            backgroundColor: `var(--color-background-raised, ${Colors.ColorWhite})`
                        },
                        children: footer
                    })
                ]
            })
        })
    });
export { PickerPopup };
