@edux-design/popovers 1.0.6 → 1.1.1

package/src/elements/Popover.jsx

@@ -1,156 +0,0 @@
-import React, { forwardRef } from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { cx } from "@edux-design/utils";
-
-const POPOVER_Z_INDEX = 2147483646;
-
-/**
- * Root Popover component.
- *
- * Wraps a `PopoverTrigger` (or `Popover.Anchor + Trigger`) and a `PopoverContent`.
- * Supports both controlled and uncontrolled modes.
- *
- * @component
- * @param {Object} props
- * @param {boolean} [props.defaultOpen] – whether popover is open by default (uncontrolled mode)
- * @param {boolean} [props.open] – controlled open state
- * @param {(open: boolean) => void} [props.onOpenChange] – change handler for controlled mode
- * @param {boolean} [props.modal=false] – whether to render modal behavior (blocking outside interactions) :contentReference[oaicite:1]{index=1}
- * @param {React.ReactNode} props.children
- * @returns JSX.Element
- */
-export const Popover = PopoverPrimitive.Root;
-
-/**
- * PopoverTrigger
- *
- * The interactive element that toggles opening/closing the popover.
- *
- * @component
- * @param {React.ComponentProps<typeof PopoverPrimitive.Trigger>} props
- * @example
- * ```jsx
- * <PopoverTrigger asChild>
- *   <button>Open Popover</button>
- * </PopoverTrigger>
- * ```
- */
-export const PopoverTrigger = PopoverPrimitive.Trigger;
-
-/**
- * PopoverAnchor
- *
- * Optional anchor component: if you want the PopoverContent positioned against an element
- * other than the trigger. (Matches Radix’s `Popover.Anchor`) :contentReference[oaicite:2]{index=2}
- *
- * @component
- * @param {React.ComponentProps<typeof PopoverPrimitive.Anchor>} props
- */
-export const PopoverAnchor = PopoverPrimitive.Anchor;
-
-/**
- * PopoverPortal
- *
- * Portal wrapper. You can use this if you need to override portal container or force mount.
- *
- * @component
- * @param {React.ComponentProps<typeof PopoverPrimitive.Portal>} props
- */
-export const PopoverPortal = PopoverPrimitive.Portal;
-
-/**
- * Props for PopoverContent component.
- *
- * @typedef {Object} PopoverContentProps
- * @property {React.ReactNode} children – content inside the popover
- * @property {"top"|"right"|"bottom"|"left"} [side="bottom"] – preferred side for popover placement
- * @property {number} [sideOffset=8] – gap between trigger (or anchor) and the popover
- * @property {"start"|"center"|"end"} [align="center"] – alignment along the cross-axis
- * @property {number} [alignOffset=0] – offset for the alignment axis
- * @property {boolean} [avoidCollisions=true] – whether to auto-adjust position to avoid clipping :contentReference[oaicite:3]{index=3}
- * @property {boolean} [forceMount=false] – whether to always mount the content into the DOM
- * @property {string} [className] – additional CSS / Tailwind classes
- * @property {Object} [style] – inline style overrides
- * @property {React.ComponentProps<typeof PopoverPrimitive.Content>} [contentProps] – any extra props forwarded to Radix’s Content
- */
-
-/**
- * PopoverContent
- *
- * The popover surface that appears. Renders in a Portal by default.
- * You can override animation, styling, arrow, etc.
- *
- * @component
- * @param {PopoverContentProps & React.RefAttributes<HTMLDivElement>} props
- */
-export const PopoverContent = forwardRef(
-  (
-    {
-      children,
-      className,
-      style,
-      container,
-      portalProps = {},
-      side = "bottom",
-      sideOffset = 8,
-      align = "center",
-      alignOffset = 0,
-      avoidCollisions = true,
-      forceMount = false,
-      showArrow = false,
-      contentProps = {},
-      ...restProps
-    },
-    ref
-  ) => {
-    // Base styling; consuming apps can override via className or wrapping
-    const base =
-      "bg-fg-base text-fg-invert text-sm font-normal rounded-xl shadow-lg px-12 py-8 animate-fade-in";
-    // A transform to “nudge” content initially
-    const positioning = {
-      top: "translate-y-[-4px]",
-      right: "translate-x-[4px]",
-      bottom: "translate-y-[4px]",
-      left: "translate-x-[-4px]",
-    }[side];
-
-    return (
-      <PopoverPortal container={container} {...portalProps}>
-        <PopoverPrimitive.Content
-          ref={ref}
-          side={side}
-          sideOffset={sideOffset}
-          align={align}
-          alignOffset={alignOffset}
-          avoidCollisions={avoidCollisions}
-          forceMount={forceMount}
-          className={cx(positioning, className, "relative")}
-          style={{ zIndex: POPOVER_Z_INDEX, ...style }}
-          {...contentProps}
-          {...restProps}
-        >
-          {children}
-          {showArrow && (
-            <PopoverPrimitive.Arrow
-              className="fill-fg-base"
-              width={12}
-              height={8}
-            />
-          )}
-        </PopoverPrimitive.Content>
-      </PopoverPortal>
-    );
-  }
-);
-
-PopoverContent.displayName = "PopoverContent";
-
-/**
- * PopoverClose
- *
- * A button or element inside the PopoverContent that triggers closing action.
- *
- * @component
- * @param {React.ComponentProps<typeof PopoverPrimitive.Close>} props
- */
-export const PopoverClose = PopoverPrimitive.Close;

package/src/elements/Popover.test.jsx

@@ -1,63 +0,0 @@
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import {
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverClose,
-} from "./Popover";
-
-vi.mock("@radix-ui/react-popover", () => {
-  const Passthrough = ({ children, ...props }) => (
-    <div {...props}>{children}</div>
-  );
-  const Buttonish = ({ children, ...props }) => (
-    <button type="button" {...props}>
-      {children}
-    </button>
-  );
-const Content = React.forwardRef(
-  ({ sideOffset, alignOffset, avoidCollisions, forceMount, ...props }, ref) => (
-    <div ref={ref} data-testid="radix-content" {...props} />
-  )
-);
-  Content.displayName = "RadixContent";
-  const Arrow = (props) => <div data-testid="popover-arrow" {...props} />;
-
-  return {
-    Provider: Passthrough,
-    Root: Passthrough,
-    Trigger: Buttonish,
-    Anchor: Passthrough,
-    Portal: Passthrough,
-    Content,
-    Close: Buttonish,
-    Arrow,
-  };
-});
-
-describe("PopoverContent", () => {
-  it("merges Tailwind classes and optionally renders arrow", () => {
-    render(
-      <PopoverContent className="custom" showArrow side="top" data-testid="content">
-        Body
-      </PopoverContent>
-    );
-    const content = screen.getByTestId("content");
-    expect(content).toHaveClass("custom");
-    expect(content).toHaveStyle({ zIndex: "2147483646" });
-    expect(screen.getByTestId("popover-arrow")).toBeInTheDocument();
-  });
-
-  it("plays nicely with Popover + Trigger exports", () => {
-    render(
-      <Popover>
-        <PopoverTrigger>Open</PopoverTrigger>
-        <PopoverContent>Panel</PopoverContent>
-        <PopoverClose>Close</PopoverClose>
-      </Popover>
-    );
-    expect(screen.getByText("Open")).toBeInTheDocument();
-    expect(screen.getAllByText(/close|panel/i).length).toBeGreaterThan(0);
-  });
-});

package/src/index.js

@@ -1,8 +0,0 @@
-export {
-  Popover,
-  PopoverTrigger,
-  PopoverAnchor,
-  PopoverPortal,
-  PopoverContent,
-  PopoverClose,
-} from "./elements/Popover";