@bioturing/components 0.42.0 → 0.43.0

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

@@ -1,186 +1,300 @@
 "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 r, jsxs as s, Fragment as ue } from "react/jsx-runtime";
+import { Popover as d } from "@base-ui/react/popover";
+import { mergeProps as G } from "@base-ui/react";
+import { useStableCallback as se } from "@base-ui/utils/useStableCallback";
+import { X as de } from "@bioturing/assets";
+import { useState as ae, useMemo as u, useCallback as Q, useRef as me, 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 Pe } from "../resizable/component.js";
+import { parseAntdPlacement as Re, 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 a } from "../utils/cn.js";
+import { IconButton as Ce } from "../icon-button/component.js";
+const D = {};
+function V({
+  side: m,
+  align: P,
+  onPlacementChange: g
+}) {
+  const R = me(void 0);
+  return ge(() => {
+    const h = ve({
+      side: m,
+      align: P
+    });
+    h !== R.current && (R.current = h, g?.(h));
+  }, [m, P, g]), null;
+}
+const Ye = ({
+  children: m,
+  placement: P,
+  openOnHover: g = !1,
+  open: R,
+  onOpenChange: h,
+  content: w,
+  title: v,
+  trigger: H = "click",
+  className: I,
+  anchor: n,
+  beforeCloseButton: z,
+  afterCloseButton: M,
+  afterTitle: T,
+  size: O = "medium",
+  footer: b,
+  defaultOpen: W = !1,
+  resizable: k = !1,
+  draggable: Z = !1,
+  maintainAspectRatio: $ = !1,
   classNames: e,
-  modal: D = !1,
-  closeOnClickOutside: E = !0,
-  onPlacementChange: M,
-  positionerProps: X = {},
-  triggerProps: $ = {},
-  portalProps: q = {},
-  ...B
+  modal: N = !1,
+  closeOnClickOutside: ee = !0,
+  onPlacementChange: C,
+  positionerProps: p = D,
+  triggerProps: te = D,
+  portalProps: re = D,
+  offsetFrom: E,
+  nativeButton: j = !0,
+  ...ne
 }) => {
-  const [C, u] = ie(
-    k,
-    w,
-    j
+  const [oe, x] = ye(
+    R,
+    h,
+    W
     // 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: A } = ke(), y = Re(P), [K, U] = ae(null), _ = u(() => {
+    if (n instanceof Element) return n;
+    if (n != null && "current" in n) return n.current;
+    if (typeof n == "function") {
+      const o = n();
+      return o instanceof Element ? o : null;
+    }
+    return K;
+  }, [n, K]), B = u(() => {
+    if (typeof p.sideOffset == "function")
+      return p.sideOffset;
+    const o = typeof p.sideOffset == "number" ? p.sideOffset : 0, l = be + o;
+    return E ? ({ side: q }) => {
+      const S = E.current;
+      if (!S || !_) return l;
+      const i = S.getBoundingClientRect(), c = _.getBoundingClientRect();
+      let f;
+      switch (q) {
+        case "bottom":
+          f = i.bottom - c.bottom;
+          break;
+        case "top":
+          f = c.top - i.top;
+          break;
+        case "right":
+          f = i.right - c.right;
+          break;
+        case "left":
+          f = c.left - i.left;
+          break;
+        default:
+          f = 0;
+      }
+      return Math.max(0, f) + l;
+    } : l;
+  }, [E, _, p.sideOffset]), F = u(() => /* @__PURE__ */ r(de, { size: 16 }), []), J = Q(() => /* @__PURE__ */ s("div", { className: a(t("popup-panel-header"), e?.header), children: [
+    /* @__PURE__ */ s(
+      he,
       {
         align: "center",
         gap: 8,
-        className: o("popup-panel-title-wrapper"),
+        className: t("popup-panel-title-wrapper"),
         children: [
           /* @__PURE__ */ r(
-            n.Title,
+            d.Title,
             {
-              render: /* @__PURE__ */ r("div", { className: p(o("grow", "truncate"), e?.title), children: l })
+              render: /* @__PURE__ */ r("div", { className: a(t("grow", "truncate"), e?.title), children: v })
             }
           ),
-          /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
-            g,
+          /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+            z,
             /* @__PURE__ */ r(
-              n.Close,
+              d.Close,
               {
-                render: /* @__PURE__ */ r(ce, { children: S })
+                render: /* @__PURE__ */ r(Ce, { children: F })
               }
             ),
-            P
+            M
           ] })
         ]
       }
     ),
-    m || null
+    T || null
   ] }), [
-    P,
-    m,
-    g,
-    o,
+    M,
+    T,
+    z,
+    t,
     e?.header,
     e?.title,
-    S,
-    l
-  ]), { ref: x } = ne(K), V = z(
-    () => /* @__PURE__ */ t(
-      n.Popup,
+    F,
+    v
+  ]), { ref: L } = Se(Z), le = u(
+    () => /* @__PURE__ */ s(
+      d.Popup,
       {
-        className: p(
-          o("popup-panel"),
-          o(`popup-panel-size-${a}`),
-          h,
+        className: a(
+          t("popup-panel"),
+          t(`popup-panel-size-${O}`),
+          I,
           e?.popup
         ),
-        ref: x,
+        ref: L,
         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 })
+          v && J(),
+          /* @__PURE__ */ r("div", { className: a(t("popup-panel-content"), e?.content), children: /* @__PURE__ */ r("div", { className: t("popup-panel-content-inner"), children: w }) }),
+          b && /* @__PURE__ */ r("div", { className: a(t("popup-panel-footer"), e?.footer), children: typeof b == "function" ? b({ close: () => x(!1) }) : b })
         ]
       }
     ),
     [
-      h,
+      I,
       e?.content,
       e?.footer,
       e?.popup,
-      o,
-      f,
+      t,
+      w,
+      L,
+      b,
+      J,
       x,
-      i,
-      R,
-      u,
-      a,
-      l
+      O,
+      v
     ]
-  ), 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
+  ), X = Q(
+    ({
+      children: o,
+      onDragEnd: l,
+      onDragStart: q,
+      ...S
+    }, { side: i, align: c }) => {
+      const f = `${i}-${c}`;
+      return k ? /* @__PURE__ */ s(ue, { children: [
+        /* @__PURE__ */ r(
+          V,
+          {
+            side: i,
+            align: c,
+            onPlacementChange: C
+          }
+        ),
+        /* @__PURE__ */ r(
+          Pe,
+          {
+            resizable: k,
+            resetKey: f,
+            maintainAspectRatio: $,
+            classNames: {
+              resizeHandle: e?.resizeHandle
+            },
+            handles: Ee(i),
+            ...S,
+            children: o
+          }
+        )
+      ] }) : /* @__PURE__ */ s("div", { ...S, children: [
+        /* @__PURE__ */ r(
+          V,
+          {
+            side: i,
+            align: c,
+            onPlacementChange: C
+          }
+        ),
+        o
+      ] });
     },
-    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,
+    [
+      k,
+      $,
+      e?.resizeHandle,
+      C
+    ]
+  ), Y = u(
+    () => ({
+      "--size-width": O ? Oe[O] : void 0
+    }),
+    [O]
+  ), ie = u(
+    () => ({
+      className: a(
+        t("popup-panel-root"),
+        A,
+        e?.root
+      ),
+      side: y.side,
+      align: y.align,
+      sideOffset: B,
+      anchor: n,
+      style: Y,
+      render: X
+    }),
+    [
+      t,
+      A,
+      e?.root,
+      y.side,
+      y.align,
+      B,
+      n,
+      Y,
+      X
+    ]
+  ), pe = u(
+    () => E ? (({ sideOffset: o, ...l }) => l)(p) : p,
+    [E, p]
+  ), ce = se(
+    (o, l) => {
+      (l.reason === "outside-press" || l.reason === "focus-out") && !ee || x(o, l);
+    }
+  ), fe = u(
+    () => ({
+      ref: U,
+      render: m,
+      nativeButton: j,
+      className: a(t("popup-panel-trigger"), e?.trigger),
+      openOnHover: H === "hover" ? !0 : g
+    }),
+    [
+      U,
+      m,
+      j,
+      t,
+      e?.trigger,
+      H,
+      g
+    ]
+  );
+  return /* @__PURE__ */ s(
+    d.Root,
     {
-      open: C,
-      onOpenChange: (c, d) => {
-        (d.reason === "outside-press" || d.reason === "focus-out") && !E || u(c, d);
-      },
-      modal: D,
-      ...B,
+      open: oe,
+      onOpenChange: ce,
+      modal: N,
+      ...ne,
       children: [
         /* @__PURE__ */ r(
-          n.Trigger,
+          d.Trigger,
           {
-            ...y(
-              {
-                render: H,
-                className: p(o("popup-panel-trigger"), e?.trigger),
-                openOnHover: A === "hover" ? !0 : b
-              },
-              $
-            )
+            ...G(fe, te)
           }
         ),
-        /* @__PURE__ */ r(n.Portal, { ...q, children: /* @__PURE__ */ r(
-          n.Positioner,
+        /* @__PURE__ */ r(d.Portal, { ...re, children: /* @__PURE__ */ r(
+          d.Positioner,
           {
-            ...y(W, X),
-            children: V
+            ...G(ie, pe),
+            children: le
           }
         ) })
       ]
@@ -188,6 +302,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, useState } 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 [triggerEl, setTriggerEl] = useState<HTMLElement | null>(null);\n\n  // Resolve the anchor element from the various anchor prop types\n  const anchorEl = useMemo(() => {\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 triggerEl;\n  }, [anchor, triggerEl]);\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      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, anchorEl, 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: setTriggerEl,\n      render: children,\n      nativeButton,\n      className: clsx(cls(\"popup-panel-trigger\"), classNames?.trigger),\n      openOnHover: trigger === \"hover\" ? true : openOnHover,\n    }),\n    [\n      setTriggerEl,\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","triggerEl","setTriggerEl","useState","anchorEl","useMemo","result","resolvedSideOffset","userSideOffset","baseOffset","DEFAULT_SIDE_OFFSET","offsetFromEl","offsetRect","anchorRect","distance","defaultCloseIcon","jsx","X","renderTitle","useCallback","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"}