'use strict';

var react = require('@floating-ui/react');
var react$1 = require('@headlessui/react');
var focus = require('@react-aria/focus');
var componentsTheming = require('@wise/components-theming');
var clsx = require('clsx');
var React = require('react');
var PreventScroll = require('../../../common/preventScroll/PreventScroll.js');
var jsxRuntime = require('react/jsx-runtime');

const FLOATING_PADDING = 16;
function SelectInputPopover({
  placement,
  open,
  renderTrigger,
  title,
  size = 'md',
  padding = 'md',
  children,
  onClose,
  onCloseEnd
}) {
  const {
    refs,
    floatingStyles,
    context
  } = react.useFloating({
    strategy: 'fixed',
    placement,
    middleware: [react.offset(8), react.flip({
      padding: FLOATING_PADDING,
      crossAxis: false
    }), react.shift(), react.size({
      padding: FLOATING_PADDING,
      apply: ({
        elements,
        rects,
        availableHeight
      }) => {
        elements.floating.style.setProperty('--max-height', `${availableHeight}px`);
        elements.floating.style.setProperty('--width', `${rects.reference.width}px`);
      }
    })],
    whileElementsMounted: react.autoUpdate,
    open,
    onOpenChange: value => {
      if (!value) {
        onClose?.();
      }
    }
  });
  const dismiss = react.useDismiss(context);
  const role = react.useRole(context);
  const {
    getReferenceProps,
    getFloatingProps
  } = react.useInteractions([role, dismiss]);
  const [floatingKey, setFloatingKey] = React.useState(0);
  const {
    theme,
    screenMode
  } = componentsTheming.useTheme();
  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
    children: [open ? /*#__PURE__*/jsxRuntime.jsx(PreventScroll.PreventScroll, {}) : null, renderTrigger({
      ref: refs.setReference,
      getInteractionProps: getReferenceProps
    }), /*#__PURE__*/jsxRuntime.jsx(react.FloatingPortal, {
      children: /*#__PURE__*/jsxRuntime.jsx(componentsTheming.ThemeProvider, {
        theme: "personal",
        screenMode: theme === 'personal' ? screenMode : 'light',
        children: /*#__PURE__*/jsxRuntime.jsx(react$1.Transition, {
          as: "div",
          show: open,
          leave: "transition-opacity",
          leaveTo: "opacity-0",
          beforeEnter: () => {
            setFloatingKey(prev => prev + 1);
          },
          afterLeave: onCloseEnd,
          children: /*#__PURE__*/jsxRuntime.jsx(focus.FocusScope, {
            children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
              context: context,
              children: /*#__PURE__*/jsxRuntime.jsx("div", {
                // Force inner state invalidation on open
                ref: refs.setFloating,
                className: clsx.clsx('np-popover-v2-container', {
                  'np-popover-v2-container--size-md': size === 'md',
                  'np-popover-v2-container--size-lg': size === 'lg'
                }),
                style: floatingStyles,
                ...getFloatingProps(),
                children: /*#__PURE__*/jsxRuntime.jsxs("div", {
                  className: clsx.clsx('np-popover-v2', title && 'np-popover-v2--has-title', {
                    'np-popover-v2--padding-md': padding === 'md'
                  }),
                  children: [title ? /*#__PURE__*/jsxRuntime.jsx("h2", {
                    className: "np-popover-v2-title np-text-title-body",
                    children: title
                  }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
                    className: "np-popover-v2-content np-text-body-default",
                    children: children
                  })]
                })
              }, floatingKey)
            })
          })
        })
      })
    })]
  });
}

exports.SelectInputPopover = SelectInputPopover;
//# sourceMappingURL=SelectInputPopover.js.map
