@mantine/core/cjs/components/Popover/use-popover.cjs

React components library focused on usability, accessibility and developer experience

'use client';
'use strict';

var react = require('@floating-ui/react');
var hooks = require('@mantine/hooks');
require('react');
var useFloatingAutoUpdate = require('../Floating/use-floating-auto-update.cjs');
require('../Floating/FloatingArrow/FloatingArrow.cjs');

function getPopoverMiddlewares(options, getFloating) {
  const middlewares = [react.offset(options.offset)];
  if (options.middlewares?.shift) {
    middlewares.push(react.shift({ limiter: react.limitShift() }));
  }
  if (options.middlewares?.flip) {
    middlewares.push(react.flip());
  }
  if (options.middlewares?.inline) {
    middlewares.push(react.inline());
  }
  middlewares.push(react.arrow({ element: options.arrowRef, padding: options.arrowOffset }));
  if (options.middlewares?.size || options.width === "target") {
    middlewares.push(
      react.size({
        apply({ rects, availableWidth, availableHeight }) {
          const floating = getFloating();
          const styles = floating.refs.floating.current?.style ?? {};
          if (options.middlewares?.size) {
            Object.assign(styles, {
              maxWidth: `${availableWidth}px`,
              maxHeight: `${availableHeight}px`
            });
          }
          if (options.width === "target") {
            Object.assign(styles, {
              width: `${rects.reference.width}px`
            });
          }
        }
      })
    );
  }
  return middlewares;
}
function usePopover(options) {
  const [_opened, setOpened] = hooks.useUncontrolled({
    value: options.opened,
    defaultValue: options.defaultOpened,
    finalValue: false,
    onChange: options.onChange
  });
  const onClose = () => {
    if (_opened) {
      options.onClose?.();
      setOpened(false);
    }
  };
  const onToggle = () => {
    if (_opened) {
      options.onClose?.();
      setOpened(false);
    } else {
      options.onOpen?.();
      setOpened(true);
    }
  };
  const floating = react.useFloating({
    placement: options.position,
    middleware: getPopoverMiddlewares(options, () => floating)
  });
  useFloatingAutoUpdate.useFloatingAutoUpdate({
    opened: options.opened,
    position: options.position,
    positionDependencies: options.positionDependencies || [],
    floating
  });
  hooks.useDidUpdate(() => {
    options.onPositionChange?.(floating.placement);
  }, [floating.placement]);
  hooks.useDidUpdate(() => {
    if (!options.opened) {
      options.onClose?.();
    } else {
      options.onOpen?.();
    }
  }, [options.opened]);
  return {
    floating,
    controlled: typeof options.opened === "boolean",
    opened: _opened,
    onClose,
    onToggle
  };
}

exports.usePopover = usePopover;
//# sourceMappingURL=use-popover.cjs.map