import { jsx, jsxs } from "react/jsx-runtime";
import { e as $07b14b47974efb58$export$5b6b19405a83ff9d, f as $de32f1b87079253c$export$3ddf2d174ce01153, g as $de32f1b87079253c$export$2e1e1122cf0cba88 } from "../../Dialog-CQ8H6Noi.js";
import { c as clsx } from "../../lite-DVmmD_-j.js";
import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
import { Button } from "../button/button.js";
/**
 * A popover component.
 *
 * Two modes of operation are supported:
 * - **controlled mode**: pass `isOpen` and `onOpenChange` to control when the popover is open.
 * - **uncontrolled mode**: pass `openByDefault` to set the initial popover state. The show/hide state will be managed internally, based on the interaction with the trigger button.
 *
 * @component
 * @param {PopoverProps} props - Component props.
 *
 * @returns {JSX.Element} The Popover component.
 *
 * @example
 * // Uncontrolled mode.
 * const ref = useRef(null);
 *
 * <Button forwardedRef={ref}>Open popover</Button>
 *
 * <Popover
 * 	triggerRef={triggerRef}
 * 	openByDefault={true}
 * >
 * 	...
 * </Popover>
 *
 * @example
 * // Controlled mode.
 * const [open, setOpen] = useState(false);
 *
 * <Button onPress={() => setOpen(true)}>Open popover</Button>
 *
 * <Popover
 * 	onOpenChange={setOpen}
 * 	isOpen={open}
 * 	triggerRef={triggerRef}
 * >
 * 	...
 * 	<Button onPress={() => setOpen(false)}>Close popover</Button>
 * </Popover>
 *
 * @preserve
 */
const Popover = (props) => {
  const {
    children,
    triggerRef,
    openByDefault,
    isOpen,
    onOpenChange,
    placement,
    className,
    wrapperClassName,
    style,
    offset,
    crossOffset,
    containerPadding,
    shouldFlip,
    shouldCloseOnInteractOutside = () => true,
    "aria-label": rawAriaLabel,
    hidden,
    ...other
  } = props;
  let ariaLabel = rawAriaLabel;
  if (ariaLabel === false) {
    ariaLabel = void 0;
  }
  if (hidden) {
    return null;
  }
  return /* @__PURE__ */ jsx(
    $07b14b47974efb58$export$5b6b19405a83ff9d,
    {
      shouldFlip,
      shouldCloseOnInteractOutside,
      triggerRef,
      isOpen,
      onOpenChange,
      defaultOpen: openByDefault,
      placement,
      offset,
      crossOffset,
      containerPadding,
      className: ({ isEntering, isExiting }) => clsx(
        "es:rounded-2xl es:border es:border-secondary-300 es:bg-white/85 es:inset-ring es:inset-ring-secondary-100 es:shadow-xl es:outline-hidden",
        "es:backdrop-blur-2xl es:backdrop-brightness-125 es:backdrop-saturate-150",
        "es:inset-shadow-xs es:inset-shadow-secondary-100",
        "es:motion-safe:motion-duration-200 es:motion-safe:motion-ease-spring-bouncy",
        "es:placement-bottom:origin-top-left es:placement-top:origin-bottom-left",
        "es:placement-left:origin-right es:placement-right:origin-left",
        isEntering || isExiting && "es:pointer-events-none",
        isEntering && "es:motion-safe:motion-scale-in-95 es:motion-opacity-in-0",
        isEntering && "es:motion-safe:placement-top:motion-translate-y-in-[5%] es:motion-safe:placement-bottom:motion-translate-y-in-[-5%] es:motion-safe:placement-left:motion-translate-x-in-[5%] es:motion-safe:placement-right:motion-translate-x-in-[-5%]",
        isExiting && "es:motion-safe:motion-scale-out-95 es:motion-opacity-out-0",
        isExiting && "es:motion-safe:placement-top:motion-translate-y-out-[5%] es:motion-safe:placement-bottom:motion-translate-y-out-[-5%] es:motion-safe:placement-left:motion-translate-x-out-[5%] es:motion-safe:placement-right:motion-translate-x-out-[-5%]",
        wrapperClassName
      ),
      style,
      children: /* @__PURE__ */ jsx(
        $de32f1b87079253c$export$3ddf2d174ce01153,
        {
          className: clsx("es:p-1 es:text-sm es:outline-hidden", className),
          "aria-label": ariaLabel,
          ...other,
          children
        }
      )
    }
  );
};
/**
 * A simple version of the Popover component that includes a trigger button.
 * The control of the popover is handled internally. A custom trigger can be provided.
 *
 * If you need more control over the trigger, use the Popover component directly.
 *
 * @component
 * @param {Object} props - Component props.
 * @param {JSX.Element} props.trigger - Allows using a custom trigger element.
 * @param {JSX.Element} [props.triggerButtonIcon] - The icon for the built-in trigger button.
 * @param {string} props.triggerButtonLabel - The label for the built-in trigger button.
 * @param {ButtonProps} props.triggerButtonProps - Props to pass to the built-in trigger button.
 * @param {Function} props.onOpenChange - Function to run when the popover is opened or closed. `(isOpen: boolean) => void`.
 * @param {boolean} props.openByDefault - If `true`, the popover is open by default.
 * @param {PopoverPlacement} props.placement - The placement of the popover.
 * @param {string} props.className - Classes to pass to the popover.
 * @param {Object} props.style - Styles to pass to the popover.
 * @param {number} props.offset - Offset from the trigger element, on the same axis as the placement of the popover (e.g. if `placement` is `left`, this controls the horizontal spacing from the element).
 * @param {number} props.crossOffset - Offset from the trigger element, on the opposite axis as the placement of the popover (e.g. if `placement` is `left`, this controls the vertical spacing from the element).
 * @param {number} props.containerPadding - Space that should be left between the popover and the edge of the container (the default container is browser window).
 * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
 *
 * @returns {JSX.Element} The TriggeredPopover component.
 *
 * @typedef {'bottom' | 'bottom left' | 'bottom right' | 'bottom start' | 'bottom end' | 'top' | 'top left' | 'top right' | 'top start' | 'top end' | 'left' | 'left top' | 'left bottom' | 'start' | 'start top' | 'start bottom' | 'right' | 'right top' | 'right bottom' | 'end' | 'end top' | 'end bottom'} PopoverPlacement
 *
 * @example
 * <TriggeredPopover>
 * 		...
 * </TriggeredPopover>
 *
 * @preserve
 */
const TriggeredPopover = (props) => {
  const {
    trigger,
    triggerButtonIcon,
    triggerButtonLabel = !triggerButtonIcon && __("Open", "eightshift-ui-components"),
    triggerButtonProps,
    children,
    onOpenChange,
    openByDefault,
    placement,
    style,
    className,
    offset,
    crossOffset,
    containerPadding,
    hidden,
    ...rest
  } = props;
  if (hidden) {
    return null;
  }
  return /* @__PURE__ */ jsxs($de32f1b87079253c$export$2e1e1122cf0cba88, { onOpenChange, children: [
    trigger,
    !trigger && /* @__PURE__ */ jsx(
      Button,
      {
        icon: triggerButtonIcon,
        ...triggerButtonProps,
        children: triggerButtonLabel
      }
    ),
    /* @__PURE__ */ jsx(
      Popover,
      {
        placement,
        openByDefault,
        offset,
        crossOffset,
        containerPadding,
        className,
        style,
        ...rest,
        children
      }
    )
  ] });
};
export {
  Popover,
  TriggeredPopover
};
