@bioturing/components 0.42.0 → 0.44.0

package/dist/components/popup-panel/component.js

@@ -1,186 +1,302 @@
 "use client";
-import { jsx as r, jsxs as t } from "react/jsx-runtime";
-import { Popover as n } from "@base-ui/react/popover";
-import { mergeProps as y } from "@base-ui/react";
-import { X as Y } from "@bioturing/assets";
-import { useMemo as z, useState as Z, useCallback as _ } from "react";
-import { Stack as ee } from "../stack/index.js";
-import { PopupPanelSize as re } from "./constants.js";
+import { jsx as n, jsxs as u, Fragment as de } from "react/jsx-runtime";
+import { Popover as f } from "@base-ui/react/popover";
+import { mergeProps as V } from "@base-ui/react";
+import { useStableCallback as ae } from "@base-ui/utils/useStableCallback";
+import { X as me } from "@bioturing/assets";
+import { useRef as Z, useCallback as k, useMemo as s, useEffect as ge } from "react";
+import { Stack as he } from "../stack/index.js";
+import { PopupPanelSize as Oe, DEFAULT_SIDE_OFFSET as be } from "./constants.js";
 import './style.css';/* empty css          */
-import { anchorToResizeHandles as oe } from "./utils.js";
-import { useDraggable as ne } from "../hooks/useDraggable.js";
-import { Resizable as pe } from "../resizable/component.js";
-import { useControlledState as ie } from "../hooks/useControlledState.js";
-import { useCls as te } from "../utils/antdUtils.js";
-import { useTheme as le } from "../theme-provider/context/themeStore.js";
-import { parseAntdPlacement as ae } from "../utils/placement.js";
-import { useBaseUIPlacement as se } from "../hooks/useBaseUIPlacement.js";
-import { clsx as p } from "../utils/cn.js";
-import { IconButton as ce } from "../icon-button/component.js";
-const we = ({
-  children: H,
-  placement: I,
-  openOnHover: b = !1,
-  open: k,
-  onOpenChange: w,
-  content: f,
-  title: l,
-  trigger: A = "click",
-  className: h,
-  anchor: T,
-  beforeCloseButton: g,
-  afterCloseButton: P,
-  afterTitle: m,
-  size: a = "medium",
-  footer: i,
-  defaultOpen: j = !1,
-  resizable: v = !1,
-  draggable: K = !1,
-  maintainAspectRatio: U = !1,
+import { anchorToResizeHandles as Ee } from "./utils.js";
+import { useDraggable as Se } from "../hooks/useDraggable.js";
+import { Resizable as Re } from "../resizable/component.js";
+import { parseAntdPlacement as Pe, buildAntdPlacement as ve } from "../utils/placement.js";
+import { useControlledState as ye } from "../hooks/useControlledState.js";
+import { useCls as Te } from "../utils/antdUtils.js";
+import { useTheme as ke } from "../theme-provider/context/themeStore.js";
+import { clsx as d } from "../utils/cn.js";
+import { IconButton as Ce } from "../icon-button/component.js";
+const H = {};
+function W({
+  side: g,
+  align: P,
+  onPlacementChange: h
+}) {
+  const v = Z(void 0);
+  return ge(() => {
+    const O = ve({
+      side: g,
+      align: P
+    });
+    O !== v.current && (v.current = O, h?.(O));
+  }, [g, P, h]), null;
+}
+const Ye = ({
+  children: g,
+  placement: P,
+  openOnHover: h = !1,
+  open: v,
+  onOpenChange: O,
+  content: I,
+  title: y,
+  trigger: z = "click",
+  className: A,
+  anchor: o,
+  beforeCloseButton: M,
+  afterCloseButton: $,
+  afterTitle: C,
+  size: b = "medium",
+  footer: E,
+  defaultOpen: N = !1,
+  resizable: x = !1,
+  draggable: ee = !1,
+  maintainAspectRatio: j = !1,
   classNames: e,
-  modal: D = !1,
-  closeOnClickOutside: E = !0,
-  onPlacementChange: M,
-  positionerProps: X = {},
-  triggerProps: $ = {},
-  portalProps: q = {},
-  ...B
+  modal: te = !1,
+  closeOnClickOutside: re = !0,
+  onPlacementChange: _,
+  positionerProps: i = H,
+  triggerProps: ne = H,
+  portalProps: oe = H,
+  offsetFrom: S,
+  nativeButton: K = !0,
+  ...le
 }) => {
-  const [C, u] = ie(
-    k,
-    w,
-    j
+  const [ie, D] = ye(
+    v,
+    O,
+    N
     // Always provide a default value to prevent undefined
-  ), o = te(), { className: F } = le(), s = ae(I), S = z(() => /* @__PURE__ */ r(Y, { size: 16 }), []), [G, J] = Z(
-    null
-  ), { currentSide: L, currentAlign: N, placementChangeKey: Q } = se({
-    positionerRef: G,
-    open: C,
-    initialSide: s.side,
-    initialAlign: s.align,
-    onPlacementChange: M
-  }), R = _(() => /* @__PURE__ */ t("div", { className: p(o("popup-panel-header"), e?.header), children: [
-    /* @__PURE__ */ t(
-      ee,
+  ), t = Te(), { className: U } = ke(), T = Pe(P), w = Z(null), B = k((r) => {
+    r === null || w.current === r || (w.current = r);
+  }, []), F = k(() => {
+    if (o instanceof Element) return o;
+    if (o != null && "current" in o) return o.current;
+    if (typeof o == "function") {
+      const r = o();
+      return r instanceof Element ? r : null;
+    }
+    return w.current;
+  }, [o]), J = s(() => {
+    if (typeof i.sideOffset == "function")
+      return i.sideOffset;
+    const r = typeof i.sideOffset == "number" ? i.sideOffset : 0, l = be + r;
+    return S ? ({ side: Q }) => {
+      const R = S.current, p = F();
+      if (!R || !p) return l;
+      const c = R.getBoundingClientRect(), a = p.getBoundingClientRect();
+      let m;
+      switch (Q) {
+        case "bottom":
+          m = c.bottom - a.bottom;
+          break;
+        case "top":
+          m = a.top - c.top;
+          break;
+        case "right":
+          m = c.right - a.right;
+          break;
+        case "left":
+          m = a.left - c.left;
+          break;
+        default:
+          m = 0;
+      }
+      return Math.max(0, m) + l;
+    } : l;
+  }, [S, F, i.sideOffset]), L = s(() => /* @__PURE__ */ n(me, { size: 16 }), []), X = k(() => /* @__PURE__ */ u("div", { className: d(t("popup-panel-header"), e?.header), children: [
+    /* @__PURE__ */ u(
+      he,
       {
         align: "center",
         gap: 8,
-        className: o("popup-panel-title-wrapper"),
+        className: t("popup-panel-title-wrapper"),
         children: [
-          /* @__PURE__ */ r(
-            n.Title,
+          /* @__PURE__ */ n(
+            f.Title,
             {
-              render: /* @__PURE__ */ r("div", { className: p(o("grow", "truncate"), e?.title), children: l })
+              render: /* @__PURE__ */ n("div", { className: d(t("grow", "truncate"), e?.title), children: y })
             }
           ),
-          /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
-            g,
-            /* @__PURE__ */ r(
-              n.Close,
+          /* @__PURE__ */ u("div", { className: "flex items-center gap-2", children: [
+            M,
+            /* @__PURE__ */ n(
+              f.Close,
               {
-                render: /* @__PURE__ */ r(ce, { children: S })
+                render: /* @__PURE__ */ n(Ce, { children: L })
               }
             ),
-            P
+            $
           ] })
         ]
       }
     ),
-    m || null
+    C || null
   ] }), [
-    P,
-    m,
-    g,
-    o,
+    $,
+    C,
+    M,
+    t,
     e?.header,
     e?.title,
-    S,
-    l
-  ]), { ref: x } = ne(K), V = z(
-    () => /* @__PURE__ */ t(
-      n.Popup,
+    L,
+    y
+  ]), { ref: Y } = Se(ee), ce = s(
+    () => /* @__PURE__ */ u(
+      f.Popup,
       {
-        className: p(
-          o("popup-panel"),
-          o(`popup-panel-size-${a}`),
-          h,
+        className: d(
+          t("popup-panel"),
+          t(`popup-panel-size-${b}`),
+          A,
           e?.popup
         ),
-        ref: x,
+        ref: Y,
         children: [
-          l && R(),
-          /* @__PURE__ */ r("div", { className: p(o("popup-panel-content"), e?.content), children: /* @__PURE__ */ r("div", { className: o("popup-panel-content-inner"), children: f }) }),
-          i && /* @__PURE__ */ r("div", { className: p(o("popup-panel-footer"), e?.footer), children: typeof i == "function" ? i({ close: () => u(!1) }) : i })
+          y && X(),
+          /* @__PURE__ */ n("div", { className: d(t("popup-panel-content"), e?.content), children: /* @__PURE__ */ n("div", { className: t("popup-panel-content-inner"), children: I }) }),
+          E && /* @__PURE__ */ n("div", { className: d(t("popup-panel-footer"), e?.footer), children: typeof E == "function" ? E({ close: () => D(!1) }) : E })
         ]
       }
     ),
     [
-      h,
+      A,
       e?.content,
       e?.footer,
       e?.popup,
-      o,
-      f,
-      x,
-      i,
-      R,
-      u,
-      a,
-      l
+      t,
+      I,
+      Y,
+      E,
+      X,
+      D,
+      b,
+      y
     ]
-  ), W = {
-    ref: J,
-    className: p(o("popup-panel-root"), F, e?.root),
-    side: s.side,
-    align: s.align,
-    sideOffset: 4,
-    anchor: T,
-    style: {
-      "--size-width": a ? re[a] : void 0
+  ), q = k(
+    ({
+      children: r,
+      onDragEnd: l,
+      onDragStart: Q,
+      ...R
+    }, { side: p, align: c }) => {
+      const a = `${p}-${c}`;
+      return x ? /* @__PURE__ */ u(de, { children: [
+        /* @__PURE__ */ n(
+          W,
+          {
+            side: p,
+            align: c,
+            onPlacementChange: _
+          }
+        ),
+        /* @__PURE__ */ n(
+          Re,
+          {
+            resizable: x,
+            resetKey: a,
+            maintainAspectRatio: j,
+            classNames: {
+              resizeHandle: e?.resizeHandle
+            },
+            handles: Ee(p),
+            ...R,
+            children: r
+          }
+        )
+      ] }) : /* @__PURE__ */ u("div", { ...R, children: [
+        /* @__PURE__ */ n(
+          W,
+          {
+            side: p,
+            align: c,
+            onPlacementChange: _
+          }
+        ),
+        r
+      ] });
     },
-    render: ({ children: c, onDragEnd: d, onDragStart: de, ...O }) => v ? /* @__PURE__ */ r(
-      pe,
-      {
-        resizable: v,
-        resetKey: Q,
-        maintainAspectRatio: U,
-        classNames: {
-          resizeHandle: e?.resizeHandle
-        },
-        handles: oe(L, N),
-        ...O,
-        children: c
-      }
-    ) : /* @__PURE__ */ r("div", { ...O, children: c })
-  };
-  return /* @__PURE__ */ t(
-    n.Root,
+    [
+      x,
+      j,
+      e?.resizeHandle,
+      _
+    ]
+  ), G = s(
+    () => ({
+      "--size-width": b ? Oe[b] : void 0
+    }),
+    [b]
+  ), pe = s(
+    () => ({
+      className: d(
+        t("popup-panel-root"),
+        U,
+        e?.root
+      ),
+      side: T.side,
+      align: T.align,
+      sideOffset: J,
+      anchor: o,
+      style: G,
+      render: q
+    }),
+    [
+      t,
+      U,
+      e?.root,
+      T.side,
+      T.align,
+      J,
+      o,
+      G,
+      q
+    ]
+  ), ue = s(
+    () => S ? (({ sideOffset: r, ...l }) => l)(i) : i,
+    [S, i]
+  ), fe = ae(
+    (r, l) => {
+      (l.reason === "outside-press" || l.reason === "focus-out") && !re || D(r, l);
+    }
+  ), se = s(
+    () => ({
+      ref: B,
+      render: g,
+      nativeButton: K,
+      className: d(t("popup-panel-trigger"), e?.trigger),
+      openOnHover: z === "hover" ? !0 : h
+    }),
+    [
+      B,
+      g,
+      K,
+      t,
+      e?.trigger,
+      z,
+      h
+    ]
+  );
+  return /* @__PURE__ */ u(
+    f.Root,
     {
-      open: C,
-      onOpenChange: (c, d) => {
-        (d.reason === "outside-press" || d.reason === "focus-out") && !E || u(c, d);
-      },
-      modal: D,
-      ...B,
+      open: ie,
+      onOpenChange: fe,
+      modal: te,
+      ...le,
       children: [
-        /* @__PURE__ */ r(
-          n.Trigger,
+        /* @__PURE__ */ n(
+          f.Trigger,
           {
-            ...y(
-              {
-                render: H,
-                className: p(o("popup-panel-trigger"), e?.trigger),
-                openOnHover: A === "hover" ? !0 : b
-              },
-              $
-            )
+            ...V(se, ne)
           }
         ),
-        /* @__PURE__ */ r(n.Portal, { ...q, children: /* @__PURE__ */ r(
-          n.Positioner,
+        /* @__PURE__ */ n(f.Portal, { ...oe, children: /* @__PURE__ */ n(
+          f.Positioner,
           {
-            ...y(W, X),
-            children: V
+            ...V(pe, ue),
+            children: ce
           }
         ) })
       ]
@@ -188,6 +304,6 @@ const we = ({
   );
 };
 export {
-  we as PopupPanel
+  Ye as PopupPanel
 };
 //# sourceMappingURL=component.js.map

package/dist/components/popup-panel/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/popup-panel/component.tsx"],"sourcesContent":["\"use client\";\nimport { Popover } from \"@base-ui/react/popover\";\nimport { clsx, parseAntdPlacement, useCls } from \"../utils\";\n\nimport { mergeProps } from \"@base-ui/react\";\nimport { X } from \"@bioturing/assets\";\nimport { useCallback, useMemo, useState } from \"react\";\nimport { useControlledState, useDraggable, useBaseUIPlacement } from \"../hooks\";\nimport { IconButton } from \"../icon-button\";\nimport { Resizable } from \"../resizable\";\nimport { Stack } from \"../stack\";\nimport { PopupPanelSize } from \"./constants\";\n\n// Import component-specific styles\nimport { useTheme } from \"../theme-provider\";\nimport \"./style.css\";\nimport { anchorToResizeHandles } from \"./utils\";\n\nexport type PopupPanelPlacement =\n  | \"top\"\n  | \"left\"\n  | \"right\"\n  | \"bottom\"\n  | \"topLeft\"\n  | \"topRight\"\n  | \"bottomLeft\"\n  | \"bottomRight\"\n  | \"leftTop\"\n  | \"leftBottom\"\n  | \"rightTop\"\n  | \"rightBottom\";\n\nexport interface PopupPanelProps\n  extends Omit<\n      React.ComponentPropsWithRef<\"div\">,\n      \"title\" | \"content\" | \"children\"\n    >,\n    Omit<Popover.Root.Props, \"children\"> {\n  /** The trigger element that opens the popup panel */\n  children?: React.ComponentProps<typeof Popover.Trigger>[\"render\"];\n  /** Placement of the popup panel relative to its trigger */\n  placement?: PopupPanelPlacement;\n  /** Whether to open the popup panel on hover */\n  openOnHover?: boolean;\n  /** Controls the open state of the popup panel */\n  open?: boolean;\n  /** Callback fired when the open state changes */\n  onOpenChange?: Popover.Root.Props[\"onOpenChange\"];\n  /** Content to display inside the popup panel */\n  content?: React.ReactNode;\n  /** Title text or element to display in the panel header */\n  title?: React.ReactNode;\n  /** The event that triggers the popup panel */\n  /**\n   * @default \"click\"\n   */\n  trigger?: \"click\" | \"hover\";\n  /** Custom anchor element for positioning the panel */\n  anchor?: Popover.Positioner.Props[\"anchor\"];\n  /** Content to display before the close button */\n  beforeCloseButton?: React.ReactNode;\n  /** Content to display after the close button */\n  afterCloseButton?: React.ReactNode;\n  /** Content to display after the title */\n  afterTitle?: React.ReactNode;\n  /**\n   * Predefined sizes for the popup panel\n   * - xsmall: 320px\n   * - small: 400px\n   * - medium: 480px (default)\n   * - large: 640px\n   * - xlarge: 840px\n   * @default \"medium\" for default type, \"xsmall\" for other types\n   */\n  size?: keyof typeof PopupPanelSize;\n  /**\n   * Footer content for the popup panel\n   * Can be a React node or a function that returns a React node\n   */\n  footer?:\n    | React.ReactNode\n    | ((props: { close: () => void }) => React.ReactNode);\n  /**\n   * Whether the panel should be open by default when uncontrolled\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Whether the panel should be resizable\n   * @default false\n   */\n  resizable?: boolean;\n  /**\n   * Whether the panel should be draggable\n   * @default false\n   */\n  draggable?: boolean;\n  /**\n   * Whether to maintain aspect ratio when resizing\n   * Only applies when resizable is true\n   * @default false\n   */\n  maintainAspectRatio?: boolean;\n  /**\n   * Custom class names for different parts of the popup panel\n   * @default {}\n   */\n  classNames?: {\n    root?: string;\n    trigger?: string;\n    popup?: string;\n    header?: string;\n    title?: string;\n    content?: string;\n    footer?: string;\n    resizeHandle?: string;\n  };\n  /**\n   * Whether to close the panel when clicking outside\n   * @default true\n   */\n  closeOnClickOutside?: boolean;\n  /**\n   * Whether to use modal mode\n   * @default false\n   */\n  modal?: Popover.Root.Props[\"modal\"];\n  /**\n   * Callback function when the placement changes\n   */\n  onPlacementChange?: (placement: PopupPanelPlacement) => void;\n  /**\n   * Props to pass to the positioner\n   */\n  positionerProps?: Popover.Positioner.Props;\n  /**\n   * Props to pass to the trigger\n   */\n  triggerProps?: Popover.Trigger.Props;\n  /**\n   * Props to pass to the portal\n   */\n  portalProps?: Popover.Portal.Props;\n}\n\nexport const PopupPanel = ({\n  children,\n  placement,\n  openOnHover = false,\n  open: outsideOpen,\n  onOpenChange: outsideOnOpenChange,\n  content,\n  title,\n  trigger = \"click\",\n  className,\n  anchor,\n  beforeCloseButton,\n  afterCloseButton,\n  afterTitle,\n  size = \"medium\",\n  footer,\n  defaultOpen = false,\n  resizable = false,\n  draggable = false,\n  maintainAspectRatio = false,\n  classNames,\n  modal = false,\n  closeOnClickOutside = true,\n  onPlacementChange,\n  positionerProps = {},\n  triggerProps = {},\n  portalProps = {},\n  ...rest\n}: PopupPanelProps) => {\n  // Use controlled state with proper initialization to prevent switching between controlled/uncontrolled\n  const [open, setOpen] = useControlledState(\n    outsideOpen,\n    outsideOnOpenChange,\n    defaultOpen // Always provide a default value to prevent undefined\n  );\n\n  const cls = useCls();\n  const { className: themeClassName } = useTheme();\n  const baseUIPlacement = parseAntdPlacement(placement);\n\n  const defaultCloseIcon = useMemo(() => <X size={16} />, []);\n\n  const [positionerRef, setPositionerRef] = useState<HTMLDivElement | null>(\n    null\n  );\n\n  // Track Base UI placement changes\n  const { currentSide, currentAlign, placementChangeKey } = useBaseUIPlacement({\n    positionerRef,\n    open,\n    initialSide: baseUIPlacement.side,\n    initialAlign: baseUIPlacement.align,\n    onPlacementChange,\n  });\n\n  const renderTitle = useCallback(() => {\n    return (\n      <div className={clsx(cls(\"popup-panel-header\"), classNames?.header)}>\n        <Stack\n          align=\"center\"\n          gap={8}\n          className={cls(\"popup-panel-title-wrapper\")}\n        >\n          <Popover.Title\n            render={\n              <div className={clsx(cls(\"grow\", \"truncate\"), classNames?.title)}>\n                {title}\n              </div>\n            }\n          ></Popover.Title>\n          <div className=\"flex items-center gap-2\">\n            {beforeCloseButton}\n            <Popover.Close\n              render={<IconButton>{defaultCloseIcon}</IconButton>}\n            />\n            {afterCloseButton}\n          </div>\n        </Stack>\n        {afterTitle ? afterTitle : null}\n      </div>\n    );\n  }, [\n    afterCloseButton,\n    afterTitle,\n    beforeCloseButton,\n    cls,\n    classNames?.header,\n    classNames?.title,\n    defaultCloseIcon,\n    title,\n  ]);\n\n  const { ref: draggableRef } = useDraggable(draggable);\n\n  const popup = useMemo(\n    () => (\n      <Popover.Popup\n        className={clsx(\n          cls(\"popup-panel\"),\n          cls(`popup-panel-size-${size}`),\n          className,\n          classNames?.popup\n        )}\n        ref={draggableRef}\n      >\n        {title && renderTitle()}\n        <div className={clsx(cls(\"popup-panel-content\"), classNames?.content)}>\n          <div className={cls(\"popup-panel-content-inner\")}>{content}</div>\n        </div>\n        {footer && (\n          <div className={clsx(cls(\"popup-panel-footer\"), classNames?.footer)}>\n            {typeof footer === \"function\"\n              ? footer({ close: () => setOpen(false) })\n              : footer}\n          </div>\n        )}\n      </Popover.Popup>\n    ),\n    [\n      className,\n      classNames?.content,\n      classNames?.footer,\n      classNames?.popup,\n      cls,\n      content,\n      draggableRef,\n      footer,\n      renderTitle,\n      setOpen,\n      size,\n      title,\n    ]\n  );\n\n  const defaultPositionerProps = {\n    ref: setPositionerRef,\n    className: clsx(cls(\"popup-panel-root\"), themeClassName, classNames?.root),\n    side: baseUIPlacement.side,\n    align: baseUIPlacement.align,\n    sideOffset: 4,\n    anchor,\n    style: {\n      \"--size-width\": size ? PopupPanelSize[size] : undefined,\n    } as React.CSSProperties,\n    render: ({ children, onDragEnd, onDragStart, ...props }) => {\n      return resizable ? (\n        <Resizable\n          resizable={resizable}\n          resetKey={placementChangeKey}\n          maintainAspectRatio={maintainAspectRatio}\n          classNames={{\n            resizeHandle: classNames?.resizeHandle,\n          }}\n          handles={anchorToResizeHandles(currentSide, currentAlign)}\n          {...props}\n        >\n          {children}\n        </Resizable>\n      ) : (\n        <div {...props}>{children}</div>\n      );\n    },\n  };\n\n  return (\n    <Popover.Root\n      open={open}\n      onOpenChange={(open, eventDetails) => {\n        if (\n          (eventDetails.reason === \"outside-press\" ||\n            eventDetails.reason === \"focus-out\") &&\n          !closeOnClickOutside\n        )\n          return;\n        setOpen(open, eventDetails);\n      }}\n      modal={modal}\n      {...rest}\n    >\n      <Popover.Trigger\n        {...mergeProps(\n          {\n            render: children,\n            className: clsx(cls(\"popup-panel-trigger\"), classNames?.trigger),\n            openOnHover: trigger === \"hover\" ? true : openOnHover,\n          },\n          triggerProps\n        )}\n      ></Popover.Trigger>\n      <Popover.Portal {...portalProps}>\n        <Popover.Positioner\n          {...mergeProps(defaultPositionerProps, positionerProps)}\n        >\n          {popup}\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n"],"names":["PopupPanel","children","placement","openOnHover","outsideOpen","outsideOnOpenChange","content","title","trigger","className","anchor","beforeCloseButton","afterCloseButton","afterTitle","size","footer","defaultOpen","resizable","draggable","maintainAspectRatio","classNames","modal","closeOnClickOutside","onPlacementChange","positionerProps","triggerProps","portalProps","rest","open","setOpen","useControlledState","cls","useCls","themeClassName","useTheme","baseUIPlacement","parseAntdPlacement","defaultCloseIcon","useMemo","jsx","X","positionerRef","setPositionerRef","useState","currentSide","currentAlign","placementChangeKey","useBaseUIPlacement","renderTitle","useCallback","jsxs","clsx","Stack","Popover","IconButton","draggableRef","useDraggable","popup","defaultPositionerProps","PopupPanelSize","onDragEnd","onDragStart","props","Resizable","anchorToResizeHandles","eventDetails","mergeProps"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/popup-panel/component.tsx"],"sourcesContent":["\"use client\";\nimport { Popover } from \"@base-ui/react/popover\";\nimport { buildAntdPlacement, clsx, parseAntdPlacement, useCls } from \"../utils\";\n\nimport { mergeProps } from \"@base-ui/react\";\nimport { useStableCallback } from \"@base-ui/utils/useStableCallback\";\nimport { X } from \"@bioturing/assets\";\nimport { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { useControlledState, useDraggable } from \"../hooks\";\nimport { IconButton } from \"../icon-button\";\nimport { Resizable } from \"../resizable\";\nimport { Stack } from \"../stack\";\nimport { DEFAULT_SIDE_OFFSET, PopupPanelSize } from \"./constants\";\nimport { PopupPanelProps } from \"./types\";\n\n// Import component-specific styles\nimport { useTheme } from \"../theme-provider\";\nimport \"./style.css\";\nimport { anchorToResizeHandles } from \"./utils\";\n\n// Stable empty objects to avoid creating new references on every render\nconst EMPTY_OBJECT = {} as const;\n\ninterface PlacementStateSyncProps {\n  side: Popover.Positioner.State[\"side\"];\n  align: Popover.Positioner.State[\"align\"];\n  onPlacementChange?: (\n    placement: NonNullable<PopupPanelProps[\"placement\"]>,\n  ) => void;\n}\n\nfunction PlacementStateSync({\n  side,\n  align,\n  onPlacementChange,\n}: PlacementStateSyncProps) {\n  const lastPlacementRef = useRef<\n    NonNullable<PopupPanelProps[\"placement\"]> | undefined\n  >(undefined);\n\n  useEffect(() => {\n    const placement = buildAntdPlacement({\n      side,\n      align,\n    }) as NonNullable<PopupPanelProps[\"placement\"]>;\n    if (placement === lastPlacementRef.current) return;\n    lastPlacementRef.current = placement;\n    onPlacementChange?.(placement);\n  }, [side, align, onPlacementChange]);\n\n  return null;\n}\n\nexport const PopupPanel = ({\n  children,\n  placement,\n  openOnHover = false,\n  open: outsideOpen,\n  onOpenChange: outsideOnOpenChange,\n  content,\n  title,\n  trigger = \"click\",\n  className,\n  anchor,\n  beforeCloseButton,\n  afterCloseButton,\n  afterTitle,\n  size = \"medium\",\n  footer,\n  defaultOpen = false,\n  resizable = false,\n  draggable = false,\n  maintainAspectRatio = false,\n  classNames,\n  modal = false,\n  closeOnClickOutside = true,\n  onPlacementChange,\n  positionerProps = EMPTY_OBJECT,\n  triggerProps = EMPTY_OBJECT,\n  portalProps = EMPTY_OBJECT,\n  offsetFrom,\n  nativeButton = true,\n  ...rest\n}: PopupPanelProps) => {\n  // Use controlled state with proper initialization to prevent switching between controlled/uncontrolled\n  const [open, setOpen] = useControlledState(\n    outsideOpen,\n    outsideOnOpenChange,\n    defaultOpen, // Always provide a default value to prevent undefined\n  );\n\n  const cls = useCls();\n  const { className: themeClassName } = useTheme();\n  const baseUIPlacement = parseAntdPlacement(placement);\n\n  const triggerElRef = useRef<HTMLElement | null>(null);\n  const handleTriggerRef = useCallback((node: HTMLElement | null) => {\n    if (node === null || triggerElRef.current === node) return;\n    triggerElRef.current = node;\n  }, []);\n\n  const getAnchorEl = useCallback(() => {\n    if (anchor instanceof Element) return anchor;\n    if (anchor != null && \"current\" in anchor) return anchor.current;\n    if (typeof anchor === \"function\") {\n      const result = anchor();\n      return result instanceof Element ? result : null;\n    }\n    return triggerElRef.current;\n  }, [anchor]);\n\n  // Compute sideOffset: incorporate user sideOffset, and when offsetFrom is\n  // provided, add the distance from the anchor to the offsetFrom element\n  const resolvedSideOffset = useMemo(() => {\n    // If user provides a function, let them fully control the offset\n    if (typeof positionerProps.sideOffset === \"function\")\n      return positionerProps.sideOffset;\n\n    const userSideOffset =\n      typeof positionerProps.sideOffset === \"number\"\n        ? positionerProps.sideOffset\n        : 0;\n    const baseOffset = DEFAULT_SIDE_OFFSET + userSideOffset;\n\n    if (!offsetFrom) return baseOffset;\n\n    return ({ side }: { side: string }) => {\n      const offsetFromEl = offsetFrom.current;\n      const anchorEl = getAnchorEl();\n      if (!offsetFromEl || !anchorEl) return baseOffset;\n\n      const offsetRect = offsetFromEl.getBoundingClientRect();\n      const anchorRect = anchorEl.getBoundingClientRect();\n\n      let distance: number;\n      switch (side) {\n        case \"bottom\":\n          distance = offsetRect.bottom - anchorRect.bottom;\n          break;\n        case \"top\":\n          distance = anchorRect.top - offsetRect.top;\n          break;\n        case \"right\":\n          distance = offsetRect.right - anchorRect.right;\n          break;\n        case \"left\":\n          distance = anchorRect.left - offsetRect.left;\n          break;\n        default:\n          distance = 0;\n      }\n\n      return Math.max(0, distance) + baseOffset;\n    };\n  }, [offsetFrom, getAnchorEl, positionerProps.sideOffset]);\n\n  const defaultCloseIcon = useMemo(() => <X size={16} />, []);\n\n  const renderTitle = useCallback(() => {\n    return (\n      <div className={clsx(cls(\"popup-panel-header\"), classNames?.header)}>\n        <Stack\n          align=\"center\"\n          gap={8}\n          className={cls(\"popup-panel-title-wrapper\")}\n        >\n          <Popover.Title\n            render={\n              <div className={clsx(cls(\"grow\", \"truncate\"), classNames?.title)}>\n                {title}\n              </div>\n            }\n          ></Popover.Title>\n          <div className=\"flex items-center gap-2\">\n            {beforeCloseButton}\n            <Popover.Close\n              render={<IconButton>{defaultCloseIcon}</IconButton>}\n            />\n            {afterCloseButton}\n          </div>\n        </Stack>\n        {afterTitle ? afterTitle : null}\n      </div>\n    );\n  }, [\n    afterCloseButton,\n    afterTitle,\n    beforeCloseButton,\n    cls,\n    classNames?.header,\n    classNames?.title,\n    defaultCloseIcon,\n    title,\n  ]);\n\n  const { ref: draggableRef } = useDraggable(draggable);\n\n  const popup = useMemo(\n    () => (\n      <Popover.Popup\n        className={clsx(\n          cls(\"popup-panel\"),\n          cls(`popup-panel-size-${size}`),\n          className,\n          classNames?.popup,\n        )}\n        ref={draggableRef}\n      >\n        {title && renderTitle()}\n        <div className={clsx(cls(\"popup-panel-content\"), classNames?.content)}>\n          <div className={cls(\"popup-panel-content-inner\")}>{content}</div>\n        </div>\n        {footer && (\n          <div className={clsx(cls(\"popup-panel-footer\"), classNames?.footer)}>\n            {typeof footer === \"function\"\n              ? footer({ close: () => setOpen(false) })\n              : footer}\n          </div>\n        )}\n      </Popover.Popup>\n    ),\n    [\n      className,\n      classNames?.content,\n      classNames?.footer,\n      classNames?.popup,\n      cls,\n      content,\n      draggableRef,\n      footer,\n      renderTitle,\n      setOpen,\n      size,\n      title,\n    ],\n  );\n\n  // Positioner render function — useCallback keeps the reference stable when deps\n  // don't change. Cannot use useStableCallback here because render props are\n  // called during React's render phase, not in effects/event handlers.\n  const positionerRender = useCallback(\n    (\n      {\n        children,\n        onDragEnd: _onDragEnd,\n        onDragStart: _onDragStart,\n        ...props\n      }: React.ComponentProps<\"div\">,\n      { side, align }: Popover.Positioner.State,\n    ) => {\n      const placementKey = `${side}-${align}`;\n      return resizable ? (\n        <>\n          <PlacementStateSync\n            side={side}\n            align={align}\n            onPlacementChange={onPlacementChange}\n          />\n          <Resizable\n            resizable={resizable}\n            resetKey={placementKey}\n            maintainAspectRatio={maintainAspectRatio}\n            classNames={{\n              resizeHandle: classNames?.resizeHandle,\n            }}\n            handles={anchorToResizeHandles(side, align)}\n            {...props}\n          >\n            {children}\n          </Resizable>\n        </>\n      ) : (\n        <div {...props}>\n          <PlacementStateSync\n            side={side}\n            align={align}\n            onPlacementChange={onPlacementChange}\n          />\n          {children}\n        </div>\n      );\n    },\n    [\n      resizable,\n      maintainAspectRatio,\n      classNames?.resizeHandle,\n      onPlacementChange,\n    ],\n  );\n\n  const positionerStyle = useMemo(\n    () =>\n      ({\n        \"--size-width\": size ? PopupPanelSize[size] : undefined,\n      }) as React.CSSProperties,\n    [size],\n  );\n\n  const defaultPositionerProps = useMemo(\n    () => ({\n      className: clsx(\n        cls(\"popup-panel-root\"),\n        themeClassName,\n        classNames?.root,\n      ),\n      side: baseUIPlacement.side,\n      align: baseUIPlacement.align,\n      sideOffset: resolvedSideOffset,\n      anchor,\n      style: positionerStyle,\n      render: positionerRender,\n    }),\n    [\n      cls,\n      themeClassName,\n      classNames?.root,\n      baseUIPlacement.side,\n      baseUIPlacement.align,\n      resolvedSideOffset,\n      anchor,\n      positionerStyle,\n      positionerRender,\n    ],\n  );\n\n  // Strip sideOffset from positionerProps when offsetFrom is active,\n  // since we've already incorporated it into resolvedSideOffset\n  const finalPositionerProps = useMemo(\n    () =>\n      offsetFrom\n        ? (({ sideOffset: _, ...rest }) => rest)(positionerProps)\n        : positionerProps,\n    [offsetFrom, positionerProps],\n  );\n\n  // Stable onOpenChange handler to avoid recreating on every render\n  const handleOpenChange = useStableCallback(\n    (nextOpen: boolean, eventDetails: Popover.Root.ChangeEventDetails) => {\n      if (\n        (eventDetails.reason === \"outside-press\" ||\n          eventDetails.reason === \"focus-out\") &&\n        !closeOnClickOutside\n      )\n        return;\n      setOpen(nextOpen, eventDetails);\n    },\n  );\n\n  const defaultTriggerProps = useMemo(\n    () => ({\n      ref: handleTriggerRef,\n      render: children,\n      nativeButton,\n      className: clsx(cls(\"popup-panel-trigger\"), classNames?.trigger),\n      openOnHover: trigger === \"hover\" ? true : openOnHover,\n    }),\n    [\n      handleTriggerRef,\n      children,\n      nativeButton,\n      cls,\n      classNames?.trigger,\n      trigger,\n      openOnHover,\n    ],\n  );\n\n  return (\n    <Popover.Root\n      open={open}\n      onOpenChange={handleOpenChange}\n      modal={modal}\n      {...rest}\n    >\n      <Popover.Trigger\n        {...mergeProps(defaultTriggerProps, triggerProps)}\n      ></Popover.Trigger>\n      <Popover.Portal {...portalProps}>\n        <Popover.Positioner\n          {...mergeProps(defaultPositionerProps, finalPositionerProps)}\n        >\n          {popup}\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n"],"names":["EMPTY_OBJECT","PlacementStateSync","side","align","onPlacementChange","lastPlacementRef","useRef","useEffect","placement","buildAntdPlacement","PopupPanel","children","openOnHover","outsideOpen","outsideOnOpenChange","content","title","trigger","className","anchor","beforeCloseButton","afterCloseButton","afterTitle","size","footer","defaultOpen","resizable","draggable","maintainAspectRatio","classNames","modal","closeOnClickOutside","positionerProps","triggerProps","portalProps","offsetFrom","nativeButton","rest","open","setOpen","useControlledState","cls","useCls","themeClassName","useTheme","baseUIPlacement","parseAntdPlacement","triggerElRef","handleTriggerRef","useCallback","node","getAnchorEl","result","resolvedSideOffset","useMemo","userSideOffset","baseOffset","DEFAULT_SIDE_OFFSET","offsetFromEl","anchorEl","offsetRect","anchorRect","distance","defaultCloseIcon","jsx","X","renderTitle","jsxs","clsx","Stack","Popover","IconButton","draggableRef","useDraggable","popup","positionerRender","_onDragEnd","_onDragStart","props","placementKey","Fragment","Resizable","anchorToResizeHandles","positionerStyle","PopupPanelSize","defaultPositionerProps","finalPositionerProps","_","handleOpenChange","useStableCallback","nextOpen","eventDetails","defaultTriggerProps","mergeProps"],"mappings":"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"}

package/dist/components/popup-panel/constants.d.ts

@@ -1,3 +1,4 @@
+export declare const DEFAULT_SIDE_OFFSET = 4;
 export declare enum PopupPanelSize {
     xsmall = "320px",
     small = "400px",

package/dist/components/popup-panel/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/popup-panel/constants.ts"],"names":[],"mappings":"AACA,oBAAY,cAAc;IACxB,MAAM,UAAU;IAChB,KAAK,UAAU;IACf,MAAM,UAAU;IAChB,KAAK,UAAU;IACf,MAAM,UAAU;CACjB"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/popup-panel/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,IAAI,CAAC;AAGrC,oBAAY,cAAc;IACxB,MAAM,UAAU;IAChB,KAAK,UAAU;IACf,MAAM,UAAU;IAChB,KAAK,UAAU;IACf,MAAM,UAAU;CACjB"}

package/dist/components/popup-panel/constants.js

@@ -1,5 +1,7 @@
+const m = 4;
 var r = /* @__PURE__ */ ((x) => (x.xsmall = "320px", x.small = "400px", x.medium = "480px", x.large = "640px", x.xlarge = "840px", x))(r || {});
 export {
+  m as DEFAULT_SIDE_OFFSET,
   r as PopupPanelSize
 };
 //# sourceMappingURL=constants.js.map

package/dist/components/popup-panel/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../src/components/popup-panel/constants.ts"],"sourcesContent":["// Size map for predefined modal sizes\nexport enum PopupPanelSize {\n  xsmall = \"320px\",\n  small = \"400px\",\n  medium = \"480px\",\n  large = \"640px\",\n  xlarge = \"840px\",\n}\n"],"names":["PopupPanelSize"],"mappings":"AACO,IAAKA,sBAAAA,OACVA,EAAA,SAAS,SACTA,EAAA,QAAQ,SACRA,EAAA,SAAS,SACTA,EAAA,QAAQ,SACRA,EAAA,SAAS,SALCA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"constants.js","sources":["../../../src/components/popup-panel/constants.ts"],"sourcesContent":["export const DEFAULT_SIDE_OFFSET = 4;\n\n// Size map for predefined modal sizes\nexport enum PopupPanelSize {\n  xsmall = \"320px\",\n  small = \"400px\",\n  medium = \"480px\",\n  large = \"640px\",\n  xlarge = \"840px\",\n}\n"],"names":["DEFAULT_SIDE_OFFSET","PopupPanelSize"],"mappings":"AAAO,MAAMA,IAAsB;AAG5B,IAAKC,sBAAAA,OACVA,EAAA,SAAS,SACTA,EAAA,QAAQ,SACRA,EAAA,SAAS,SACTA,EAAA,QAAQ,SACRA,EAAA,SAAS,SALCA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/components/popup-panel/index.d.ts

@@ -1,2 +1,3 @@
 export * from './component';
+export * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/popup-panel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/popup-panel/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/popup-panel/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC"}