@bioturing/components 0.15.2 → 0.15.3

package/dist/components/DropdownMenu/component.js

@@ -1,94 +1,146 @@
-import { jsxs as d, jsx as s } from "react/jsx-runtime";
-import { Menu as l } from "@base-ui-components/react/menu";
-import { useCallback as N, useRef as g } from "react";
-import { useControlled as P } from "@base-ui-components/react/utils";
+import { jsxs as l, jsx as d } from "react/jsx-runtime";
+import { Menu as p } from "@base-ui-components/react/menu";
+import { useCallback as A, useRef as E } from "react";
+import { useControlled as R } from "@base-ui-components/react/utils";
 import './style.css';/* empty css          */
-import { useCls as x, useAntdCssVarClassname as G, parseAntdPlacement as L } from "../utils/antdUtils.js";
-import { clsx as i } from "../utils/cn.js";
-const S = ({
-  children: m,
-  items: u,
-  placement: c,
-  openOnHover: h,
-  open: f,
-  onOpenChange: a
+import { useCls as D, useAntdCssVarClassname as S, parseAntdPlacement as T } from "../utils/antdUtils.js";
+import { clsx as u } from "../utils/cn.js";
+const J = ({
+  children: M,
+  items: w,
+  placement: v,
+  openOnHover: y,
+  open: C,
+  onOpenChange: i,
+  className: L,
+  itemRender: h,
+  classNames: o
 }) => {
-  const [b, t] = P({
-    controlled: f,
+  const [P, f] = R({
+    controlled: C,
     default: !1,
     name: "open"
-  }), M = N(
-    (o) => {
-      t(o), a == null || a(o);
+  }), x = A(
+    (n) => {
+      f(n), i == null || i(n);
     },
-    [t, a]
-  ), r = x(), v = G(), p = L(c), y = g(null), w = u.reduce((o, n) => (o.length === 0 && n.type !== "header" && o.push({
+    [f, i]
+  ), t = D(), b = S(), g = T(v), G = E(null), k = w.reduce((n, e) => (n.length === 0 && e.type !== "header" && n.push({
     label: null,
     items: []
-  }), n.type === "header" ? o.push({
-    label: n.title,
+  }), e.type === "header" ? n.push({
+    label: e.title,
     items: []
-  }) : (n.type === "item" || n.type === "divider") && o.length > 0 && o[o.length - 1].items.push(n), o), []);
-  return /* @__PURE__ */ d(
-    l.Root,
+  }) : (e.type === "item" || e.type === "divider") && n.length > 0 && n[n.length - 1].items.push(e), n), []);
+  return /* @__PURE__ */ l(
+    p.Root,
     {
-      openOnHover: h,
-      open: b,
-      onOpenChange: M,
+      openOnHover: y,
+      open: P,
+      onOpenChange: x,
       children: [
-        /* @__PURE__ */ s(l.Trigger, { render: m, ref: y }),
-        /* @__PURE__ */ s(l.Portal, { children: /* @__PURE__ */ s(
-          l.Positioner,
+        /* @__PURE__ */ d(
+          p.Trigger,
           {
-            side: p.placement,
-            align: p.align,
+            render: M,
+            ref: G,
+            className: u(
+              t("dropdown-menu-trigger"),
+              o == null ? void 0 : o.trigger,
+              b
+            )
+          }
+        ),
+        /* @__PURE__ */ d(p.Portal, { children: /* @__PURE__ */ d(
+          p.Positioner,
+          {
+            side: g.placement,
+            align: g.align,
             sideOffset: 4,
-            children: /* @__PURE__ */ s(
-              l.Popup,
+            className: u(t("dropdown-menu-root"), o == null ? void 0 : o.root),
+            children: /* @__PURE__ */ d(
+              p.Popup,
               {
-                className: i(r("dropdown-menu"), v),
-                children: w.map((o, n) => /* @__PURE__ */ d(l.Group, { children: [
-                  o.label && /* @__PURE__ */ s(
-                    l.GroupLabel,
-                    {
-                      className: r("dropdown-menu-header"),
-                      children: /* @__PURE__ */ s("span", { children: o.label })
-                    },
-                    n
-                  ),
-                  o.items.map((e, C) => e.type == "item" ? /* @__PURE__ */ d(
-                    l.Item,
-                    {
-                      className: i(r("dropdown-menu-item")),
-                      disabled: e.disabled,
-                      "data-danger": e.danger,
-                      ref: e.ref,
-                      onClick: e.onClick,
-                      onMouseEnter: e.onMouseEnter,
-                      onMouseLeave: e.onMouseLeave,
-                      onMouseOver: e.onMouseOver,
-                      onMouseOut: e.onMouseOut,
-                      children: [
-                        e.icon && /* @__PURE__ */ s("span", { className: r("dropdown-menu-item-icon"), children: e.icon }),
-                        /* @__PURE__ */ s("span", { children: e.label })
-                      ]
-                    },
-                    n + "-" + C
-                  ) : e.type == "divider" ? /* @__PURE__ */ s(
-                    l.Separator,
-                    {
-                      className: r("dropdown-menu-divider")
-                    },
-                    n
-                  ) : e.type == "header" ? /* @__PURE__ */ s(
-                    l.GroupLabel,
-                    {
-                      className: r("dropdown-menu-header"),
-                      children: /* @__PURE__ */ s("span", { children: e.title })
-                    },
-                    n
-                  ) : null)
-                ] }, "group" + n))
+                className: u(
+                  t("dropdown-menu"),
+                  L,
+                  o == null ? void 0 : o.popup,
+                  b
+                ),
+                children: k.map((n, e) => /* @__PURE__ */ l(
+                  p.Group,
+                  {
+                    className: u(
+                      t("dropdown-menu-group"),
+                      o == null ? void 0 : o.group
+                    ),
+                    children: [
+                      n.label && /* @__PURE__ */ d(
+                        p.GroupLabel,
+                        {
+                          className: u(
+                            t("dropdown-menu-header"),
+                            o == null ? void 0 : o.groupLabel
+                          ),
+                          children: /* @__PURE__ */ d("span", { children: n.label })
+                        },
+                        e
+                      ),
+                      n.items.map((r, I) => r.type == "item" ? /* @__PURE__ */ l(
+                        p.Item,
+                        {
+                          className: u(
+                            t("dropdown-menu-item"),
+                            o == null ? void 0 : o.item
+                          ),
+                          disabled: r.disabled,
+                          "data-danger": r.danger,
+                          ref: r.ref,
+                          onClick: r.onClick,
+                          onMouseEnter: r.onMouseEnter,
+                          onMouseLeave: r.onMouseLeave,
+                          onMouseOver: r.onMouseOver,
+                          onMouseOut: r.onMouseOut,
+                          render: h ? (j) => h(r, j) : void 0,
+                          children: [
+                            r.icon && /* @__PURE__ */ d(
+                              "span",
+                              {
+                                className: u(
+                                  t("dropdown-menu-item-icon"),
+                                  o == null ? void 0 : o.itemIcon
+                                ),
+                                children: r.icon
+                              }
+                            ),
+                            /* @__PURE__ */ d("span", { children: r.label })
+                          ]
+                        },
+                        e + "-" + I
+                      ) : r.type == "divider" ? /* @__PURE__ */ d(
+                        p.Separator,
+                        {
+                          className: u(
+                            t("dropdown-menu-divider"),
+                            o == null ? void 0 : o.separator
+                          )
+                        },
+                        e
+                      ) : r.type == "header" ? /* @__PURE__ */ d(
+                        p.GroupLabel,
+                        {
+                          className: u(
+                            t("dropdown-menu-header"),
+                            o == null ? void 0 : o.groupLabel
+                          ),
+                          children: /* @__PURE__ */ d("span", { children: r.title })
+                        },
+                        e
+                      ) : null)
+                    ]
+                  },
+                  "group" + e
+                ))
               }
             )
           }
@@ -98,6 +150,6 @@ const S = ({
   );
 };
 export {
-  S as DropdownMenu
+  J as DropdownMenu
 };
 //# sourceMappingURL=component.js.map

package/dist/components/DropdownMenu/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/DropdownMenu/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  useCls,\n  clsx,\n  useAntdCssVarClassname,\n  parseAntdPlacement,\n} from \"../utils\";\nimport { Menu } from \"@base-ui-components/react/menu\";\n\nimport { type PopoverProps } from \"antd/es/popover\";\nimport { useCallback, useRef } from \"react\";\nimport { useControlled } from \"@base-ui-components/react/utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport type DropdownMenuItemType =\n  | {\n      type: \"item\";\n      label?: React.ReactNode;\n      disabled?: boolean;\n      icon?: React.ReactNode;\n      key: React.Key;\n      onClick?: React.HTMLAttributes<HTMLElement>[\"onClick\"];\n      onMouseEnter?: React.HTMLAttributes<HTMLElement>[\"onMouseEnter\"];\n      onMouseLeave?: React.HTMLAttributes<HTMLElement>[\"onMouseLeave\"];\n      onMouseOver?: React.HTMLAttributes<HTMLElement>[\"onMouseOver\"];\n      onMouseOut?: React.HTMLAttributes<HTMLElement>[\"onMouseOut\"];\n      danger?: boolean;\n      ref?: React.Ref<HTMLElement>;\n    }\n  | {\n      type: \"divider\";\n    }\n  | {\n      type: \"header\";\n      title?: React.ReactNode;\n    };\n\nexport interface DropdownMenuProps {\n  items: DropdownMenuItemType[];\n  children?: React.ComponentProps<typeof Menu.Trigger>[\"render\"];\n  placement?: PopoverProps[\"placement\"];\n  openOnHover?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\ninterface DropdownMenuGroup {\n  label: React.ReactNode | null;\n  items: DropdownMenuItemType[];\n}\n\nexport const DropdownMenu = ({\n  children,\n  items,\n  placement,\n  openOnHover,\n  open: outsideOpen,\n  onOpenChange: outsideOnOpenChange,\n}: DropdownMenuProps) => {\n  const [open, setOpen] = useControlled({\n    controlled: outsideOpen,\n    default: false,\n    name: \"open\",\n  });\n  const onOpenChange = useCallback(\n    (newValue: boolean) => {\n      setOpen(newValue);\n      outsideOnOpenChange?.(newValue);\n    },\n    [setOpen, outsideOnOpenChange]\n  );\n  const cls = useCls();\n  const antdCssVarClassname = useAntdCssVarClassname();\n  const headlessUIPlacement = parseAntdPlacement(placement);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const itemGroups = items.reduce<DropdownMenuGroup[]>((acc, current) => {\n    // If no groups exist yet and current item is not a header, create default group\n    if (acc.length === 0 && current.type !== \"header\") {\n      acc.push({\n        label: null,\n        items: [],\n      });\n    }\n\n    // If it's a header, create a new group\n    if (current.type === \"header\") {\n      acc.push({\n        label: current.title,\n        items: [],\n      });\n    }\n    // If it's an item and we have at least one group, add it to the last group's items\n    else if (\n      (current.type === \"item\" || current.type === \"divider\") &&\n      acc.length > 0\n    ) {\n      acc[acc.length - 1].items.push(current);\n    }\n    // Skip dividers\n    return acc;\n  }, []);\n\n  return (\n    <Menu.Root\n      openOnHover={openOnHover}\n      open={open}\n      onOpenChange={onOpenChange}\n    >\n      <Menu.Trigger render={children} ref={buttonRef}></Menu.Trigger>\n      <Menu.Portal>\n        <Menu.Positioner\n          side={headlessUIPlacement.placement}\n          align={headlessUIPlacement.align}\n          sideOffset={4}\n        >\n          <Menu.Popup\n            className={clsx(cls(\"dropdown-menu\"), antdCssVarClassname)}\n          >\n            {itemGroups.map((group, i) => {\n              return (\n                <Menu.Group key={\"group\" + i}>\n                  {group.label && (\n                    <Menu.GroupLabel\n                      key={i}\n                      className={cls(\"dropdown-menu-header\")}\n                    >\n                      <span>{group.label}</span>\n                    </Menu.GroupLabel>\n                  )}\n                  {group.items.map((item, j) => {\n                    return item.type == \"item\" ? (\n                      <Menu.Item\n                        key={i + \"-\" + j}\n                        className={clsx(cls(\"dropdown-menu-item\"))}\n                        disabled={item.disabled}\n                        data-danger={item.danger}\n                        ref={item.ref}\n                        onClick={item.onClick}\n                        onMouseEnter={item.onMouseEnter}\n                        onMouseLeave={item.onMouseLeave}\n                        onMouseOver={item.onMouseOver}\n                        onMouseOut={item.onMouseOut}\n                      >\n                        {item.icon && (\n                          <span className={cls(\"dropdown-menu-item-icon\")}>\n                            {item.icon}\n                          </span>\n                        )}\n                        <span>{item.label}</span>\n                      </Menu.Item>\n                    ) : item.type == \"divider\" ? (\n                      <Menu.Separator\n                        key={i}\n                        className={cls(\"dropdown-menu-divider\")}\n                      ></Menu.Separator>\n                    ) : item.type == \"header\" ? (\n                      <Menu.GroupLabel\n                        key={i}\n                        className={cls(\"dropdown-menu-header\")}\n                      >\n                        <span>{item.title}</span>\n                      </Menu.GroupLabel>\n                    ) : null;\n                  })}\n                </Menu.Group>\n              );\n            })}\n          </Menu.Popup>\n        </Menu.Positioner>\n      </Menu.Portal>\n    </Menu.Root>\n  );\n};\n"],"names":["DropdownMenu","children","items","placement","openOnHover","outsideOpen","outsideOnOpenChange","open","setOpen","useControlled","onOpenChange","useCallback","newValue","cls","useCls","antdCssVarClassname","useAntdCssVarClassname","headlessUIPlacement","parseAntdPlacement","buttonRef","useRef","itemGroups","acc","current","jsxs","Menu","jsx","clsx","group","i","item","j"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/DropdownMenu/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  useCls,\n  clsx,\n  useAntdCssVarClassname,\n  parseAntdPlacement,\n} from \"../utils\";\nimport { Menu } from \"@base-ui-components/react/menu\";\nimport { type PopoverProps } from \"antd/es/popover\";\nimport { useCallback, useRef } from \"react\";\nimport { useControlled } from \"@base-ui-components/react/utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport type DropdownMenuItemType =\n  | {\n      type: \"item\";\n      label?: React.ReactNode;\n      disabled?: boolean;\n      icon?: React.ReactNode;\n      key: React.Key;\n      onClick?: React.HTMLAttributes<HTMLElement>[\"onClick\"];\n      onMouseEnter?: React.HTMLAttributes<HTMLElement>[\"onMouseEnter\"];\n      onMouseLeave?: React.HTMLAttributes<HTMLElement>[\"onMouseLeave\"];\n      onMouseOver?: React.HTMLAttributes<HTMLElement>[\"onMouseOver\"];\n      onMouseOut?: React.HTMLAttributes<HTMLElement>[\"onMouseOut\"];\n      danger?: boolean;\n      ref?: React.Ref<HTMLElement>;\n    }\n  | {\n      type: \"divider\";\n    }\n  | {\n      type: \"header\";\n      title?: React.ReactNode;\n    };\n\nexport interface DropdownMenuProps {\n  /** Array of menu items to be displayed in the dropdown */\n  items: DropdownMenuItemType[];\n  /** Custom render function for the trigger element */\n  children?: React.ComponentProps<typeof Menu.Trigger>[\"render\"];\n  /**\n   * Placement of the dropdown relative to the trigger element\n   * @default \"bottomLeft\"\n   */\n  placement?: PopoverProps[\"placement\"];\n  /**\n   * Whether to open the dropdown on hover instead of click\n   * @default false\n   */\n  openOnHover?: boolean;\n  /**\n   * Controlled open state of the dropdown\n   */\n  open?: boolean;\n  /**\n   * Callback fired when the dropdown open state changes\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Additional CSS class for the dropdown component\n   */\n  className?: string;\n  /**\n   * Custom class names for different parts of the dropdown\n   * @default {}\n   */\n  classNames?: {\n    root?: string;\n    trigger?: string;\n    popup?: string;\n    group?: string;\n    groupLabel?: string;\n    item?: string;\n    itemIcon?: string;\n    itemText?: string;\n    separator?: string;\n    positioner?: string;\n  };\n  /**\n   * Custom render function for menu items\n   */\n  itemRender?: (\n    item: DropdownMenuItemType,\n    props: React.HTMLAttributes<HTMLElement>\n  ) => React.ReactElement;\n}\n\ninterface DropdownMenuGroup {\n  label: React.ReactNode | null;\n  items: DropdownMenuItemType[];\n}\n\nexport const DropdownMenu = ({\n  children,\n  items,\n  placement,\n  openOnHover,\n  open: outsideOpen,\n  onOpenChange: outsideOnOpenChange,\n  className,\n  itemRender,\n  classNames,\n}: DropdownMenuProps) => {\n  const [open, setOpen] = useControlled({\n    controlled: outsideOpen,\n    default: false,\n    name: \"open\",\n  });\n  const onOpenChange = useCallback(\n    (newValue: boolean) => {\n      setOpen(newValue);\n      outsideOnOpenChange?.(newValue);\n    },\n    [setOpen, outsideOnOpenChange]\n  );\n  const cls = useCls();\n  const antdCssVarClassname = useAntdCssVarClassname();\n  const headlessUIPlacement = parseAntdPlacement(placement);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const itemGroups = items.reduce<DropdownMenuGroup[]>((acc, current) => {\n    // If no groups exist yet and current item is not a header, create default group\n    if (acc.length === 0 && current.type !== \"header\") {\n      acc.push({\n        label: null,\n        items: [],\n      });\n    }\n\n    // If it's a header, create a new group\n    if (current.type === \"header\") {\n      acc.push({\n        label: current.title,\n        items: [],\n      });\n    }\n    // If it's an item and we have at least one group, add it to the last group's items\n    else if (\n      (current.type === \"item\" || current.type === \"divider\") &&\n      acc.length > 0\n    ) {\n      acc[acc.length - 1].items.push(current);\n    }\n    // Skip dividers\n    return acc;\n  }, []);\n\n  return (\n    <Menu.Root\n      openOnHover={openOnHover}\n      open={open}\n      onOpenChange={onOpenChange}\n    >\n      <Menu.Trigger\n        render={children}\n        ref={buttonRef}\n        className={clsx(\n          cls(\"dropdown-menu-trigger\"),\n          classNames?.trigger,\n          antdCssVarClassname\n        )}\n      ></Menu.Trigger>\n      <Menu.Portal>\n        <Menu.Positioner\n          side={headlessUIPlacement.placement}\n          align={headlessUIPlacement.align}\n          sideOffset={4}\n          className={clsx(cls(\"dropdown-menu-root\"), classNames?.root)}\n        >\n          <Menu.Popup\n            className={clsx(\n              cls(\"dropdown-menu\"),\n              className,\n              classNames?.popup,\n              antdCssVarClassname\n            )}\n          >\n            {itemGroups.map((group, i) => {\n              return (\n                <Menu.Group\n                  key={\"group\" + i}\n                  className={clsx(\n                    cls(\"dropdown-menu-group\"),\n                    classNames?.group\n                  )}\n                >\n                  {group.label && (\n                    <Menu.GroupLabel\n                      key={i}\n                      className={clsx(\n                        cls(\"dropdown-menu-header\"),\n                        classNames?.groupLabel\n                      )}\n                    >\n                      <span>{group.label}</span>\n                    </Menu.GroupLabel>\n                  )}\n                  {group.items.map((item, j) => {\n                    return item.type == \"item\" ? (\n                      <Menu.Item\n                        key={i + \"-\" + j}\n                        className={clsx(\n                          cls(\"dropdown-menu-item\"),\n                          classNames?.item\n                        )}\n                        disabled={item.disabled}\n                        data-danger={item.danger}\n                        ref={item.ref}\n                        onClick={item.onClick}\n                        onMouseEnter={item.onMouseEnter}\n                        onMouseLeave={item.onMouseLeave}\n                        onMouseOver={item.onMouseOver}\n                        onMouseOut={item.onMouseOut}\n                        render={\n                          itemRender\n                            ? (itemProps) => itemRender(item, itemProps)\n                            : undefined\n                        }\n                      >\n                        {item.icon && (\n                          <span\n                            className={clsx(\n                              cls(\"dropdown-menu-item-icon\"),\n                              classNames?.itemIcon\n                            )}\n                          >\n                            {item.icon}\n                          </span>\n                        )}\n                        <span>{item.label}</span>\n                      </Menu.Item>\n                    ) : item.type == \"divider\" ? (\n                      <Menu.Separator\n                        key={i}\n                        className={clsx(\n                          cls(\"dropdown-menu-divider\"),\n                          classNames?.separator\n                        )}\n                      ></Menu.Separator>\n                    ) : item.type == \"header\" ? (\n                      <Menu.GroupLabel\n                        key={i}\n                        className={clsx(\n                          cls(\"dropdown-menu-header\"),\n                          classNames?.groupLabel\n                        )}\n                      >\n                        <span>{item.title}</span>\n                      </Menu.GroupLabel>\n                    ) : null;\n                  })}\n                </Menu.Group>\n              );\n            })}\n          </Menu.Popup>\n        </Menu.Positioner>\n      </Menu.Portal>\n    </Menu.Root>\n  );\n};\n"],"names":["DropdownMenu","children","items","placement","openOnHover","outsideOpen","outsideOnOpenChange","className","itemRender","classNames","open","setOpen","useControlled","onOpenChange","useCallback","newValue","cls","useCls","antdCssVarClassname","useAntdCssVarClassname","headlessUIPlacement","parseAntdPlacement","buttonRef","useRef","itemGroups","acc","current","jsxs","Menu","jsx","clsx","group","i","item","j","itemProps"],"mappings":"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"}

package/dist/components/DropdownMenu/style.css

@@ -1 +1 @@
-@layer components{.ds-dropdown-menu{box-shadow:var(--ds-box-shadow-secondary);border-radius:var(--ds-border-radius);background:var(--ds-color-bg-elevated);list-style:none;padding:.25rem;color:var(--ds-color-text);font-size:var(--ds-font-size);font-family:var(--ds-font-family);transition-property:transform,scale,opacity;transition-duration:.2s;transition-timing-function:var(--ds-motion-ease-out);transform-origin:var(--transform-origin)}.ds-dropdown-menu[data-ending-style],.ds-dropdown-menu[data-starting-style]{transform:scale(.9);opacity:0}.ds-dropdown-menu:focus{outline:none}.ds-dropdown-menu-item{padding:.375rem .75rem;border-radius:var(--ds-border-radius-sm);transition:all .3s var(--ds-motion-ease-out);cursor:pointer;display:flex;align-items:center}.ds-dropdown-menu-item:focus{outline:none}.ds-dropdown-menu-item:hover{background:var(--ds-control-item-bg-hover)}.ds-dropdown-menu-item:active,.ds-dropdown-menu-item:focus,.ds-dropdown-menu-item[data-focus]{background:var(--ds-control-item-bg-active)}.ds-dropdown-menu-item[data-disabled]{pointer-events:none;color:var(--ds-color-text-disabled)}.ds-dropdown-menu-item[data-danger]{color:var(--ds-color-error)}.ds-dropdown-menu-item[data-danger]:hover{background:var(--ds-color-error-bg)}.ds-dropdown-menu-item[data-danger]:active,.ds-dropdown-menu-item[data-danger]:focus,.ds-dropdown-menu-item[data-danger][data-focus]{background:var(--ds-color-error-bg-hover)}.ds-dropdown-menu-item-icon{display:flex;align-items:center;justify-content:center;margin-right:.5rem;font-size:1rem;color:var(--ds-color-icon)}[data-danger] .ds-dropdown-menu-item-icon{color:var(--ds-color-error)}.ds-dropdown-menu-divider{border-bottom:1px solid var(--ds-color-split);margin:.25rem 0}.ds-dropdown-menu-header{font-size:.75rem;font-weight:500;line-height:1rem;text-transform:uppercase;color:var(--ds-color-text-tertiary);padding:.75rem .75rem .25rem}.ds-dropdown-menu-header:first-child{padding-top:.5rem}}
+@layer components{.ds-dropdown-menu-root{z-index:2000}.ds-dropdown-menu{box-shadow:var(--ds-box-shadow-secondary);border-radius:var(--ds-border-radius);background:var(--ds-color-bg-elevated);list-style:none;padding:.25rem;color:var(--ds-color-text);font-size:var(--ds-font-size);font-family:var(--ds-font-family);transition-property:transform,scale,opacity;transition-duration:.2s;transition-timing-function:var(--ds-motion-ease-out);transform-origin:var(--transform-origin)}.ds-dropdown-menu[data-ending-style],.ds-dropdown-menu[data-starting-style]{transform:scale(.9);opacity:0}.ds-dropdown-menu:focus{outline:none}.ds-dropdown-menu-item{padding:.375rem .75rem;border-radius:var(--ds-border-radius-sm);transition:all .3s var(--ds-motion-ease-out);cursor:pointer;display:flex;align-items:center}.ds-dropdown-menu-item:focus{outline:none}.ds-dropdown-menu-item:hover{background:var(--ds-control-item-bg-hover)}.ds-dropdown-menu-item:active,.ds-dropdown-menu-item:focus,.ds-dropdown-menu-item[data-focus]{background:var(--ds-control-item-bg-active)}.ds-dropdown-menu-item[data-disabled]{pointer-events:none;color:var(--ds-color-text-disabled)}.ds-dropdown-menu-item[data-danger]{color:var(--ds-color-error)}.ds-dropdown-menu-item[data-danger]:hover{background:var(--ds-color-error-bg)}.ds-dropdown-menu-item[data-danger]:active,.ds-dropdown-menu-item[data-danger]:focus,.ds-dropdown-menu-item[data-danger][data-focus]{background:var(--ds-color-error-bg-hover)}.ds-dropdown-menu-item-icon{display:flex;align-items:center;justify-content:center;margin-right:.5rem;font-size:1rem;color:var(--ds-color-icon)}[data-danger] .ds-dropdown-menu-item-icon{color:var(--ds-color-error)}.ds-dropdown-menu-divider{border-bottom:1px solid var(--ds-color-split);margin:.25rem 0}.ds-dropdown-menu-header{font-size:.75rem;font-weight:500;line-height:1rem;text-transform:uppercase;color:var(--ds-color-text-tertiary);padding:.75rem .75rem .25rem}.ds-dropdown-menu-header:first-child{padding-top:.5rem}}

package/dist/components/PopupPanel/component.js

@@ -1,175 +1,201 @@
-import { jsx as t, jsxs as o, Fragment as L } from "react/jsx-runtime";
-import { Popover as r } from "@base-ui-components/react/popover";
-import { useRef as Q, useState as c, useCallback as y, useEffect as C, useMemo as Y } from "react";
-import Z from "antd/es/flex";
-import { X as _ } from "@bioturing/assets";
-import { PopupPanelSize as B } from "./constants.js";
-import { useResizable as ee } from "react-use-resizable";
+import { jsx as n, jsxs as i, Fragment as m } from "react/jsx-runtime";
+import { Popover as p } from "@base-ui-components/react/popover";
+import { useState as l, useCallback as k, useEffect as O, useMemo as a } from "react";
+import N from "antd/es/flex";
+import { X as s } from "@bioturing/assets";
+import { PopupPanelSize as ee } from "./constants.js";
+import { useResizable as te } from "react-use-resizable";
+import ne from "merge-refs";
 import './style.css';/* empty css          */
-import { useControlledState as te } from "../hooks/useControlledState.js";
-import { useCls as ne, useAntdCssVarClassname as re, parseAntdPlacement as se } from "../utils/antdUtils.js";
-import { IconButton as oe } from "../IconButton/component.js";
-import { clsx as le } from "../utils/cn.js";
-const ze = ({
-  children: H,
-  placement: b,
-  openOnHover: x = !1,
-  open: k,
-  onOpenChange: w,
-  content: O,
-  title: p,
-  trigger: S = "click",
-  className: I,
-  anchor: V,
-  beforeCloseButton: f,
-  afterCloseButton: h,
-  afterTitle: d,
+import { useControlledState as re } from "../hooks/useControlledState.js";
+import { useCls as oe, useAntdCssVarClassname as pe, parseAntdPlacement as ie } from "../utils/antdUtils.js";
+import { clsx as o } from "../utils/cn.js";
+import { IconButton as de } from "../IconButton/component.js";
+const be = ({
+  children: S,
+  placement: I,
+  openOnHover: V = !1,
+  open: D,
+  onOpenChange: W,
+  content: j,
+  title: f,
+  trigger: A = "click",
+  className: E,
+  anchor: F,
+  beforeCloseButton: P,
+  afterCloseButton: C,
+  afterTitle: h,
   size: g = "medium",
-  footer: i,
-  defaultOpen: D,
-  resizable: j = !1
+  footer: d,
+  defaultOpen: $,
+  resizable: M = !1,
+  classNames: e
 }) => {
-  const [A, v] = te(
-    k,
-    w,
-    D ?? !1
+  const [T, H] = re(
+    D,
+    W,
+    $ ?? !1
     // Always provide a default value to prevent undefined
-  ), n = ne(), E = re(), R = se(b), F = Q(null), [u, W] = c(null), [$, M] = c(), [T, U] = c(), X = y((e) => {
-    W(e);
+  ), t = oe(), y = pe(), b = ie(I), [c, U] = l(null), [X, q] = l(), [G, J] = l(), K = k((r) => {
+    U(r);
   }, []);
-  C(() => {
-    if (!u) return;
-    const e = new ResizeObserver((l) => {
-      for (const s of l)
-        M(s.contentRect.width), U(s.contentRect.height);
+  O(() => {
+    if (!c) return;
+    const r = new ResizeObserver((R) => {
+      for (const u of R)
+        q(u.contentRect.width), J(u.contentRect.height);
     });
-    return e.observe(u), () => {
-      e.disconnect();
+    return r.observe(c), () => {
+      r.disconnect();
     };
-  }, [u]);
-  const z = Y(() => /* @__PURE__ */ t(_, { size: 16 }), []), q = y(() => /* @__PURE__ */ o("div", { className: n("popup-panel-header"), children: [
-    /* @__PURE__ */ o(
-      Z,
+  }, [c]);
+  const w = a(() => /* @__PURE__ */ n(s, { size: 16 }), []), L = k(() => /* @__PURE__ */ i("div", { className: o(t("popup-panel-header"), e == null ? void 0 : e.header), children: [
+    /* @__PURE__ */ i(
+      N,
       {
         align: "center",
         gap: 8,
-        className: n("popup-panel-title-wrapper"),
+        className: t("popup-panel-title-wrapper"),
         children: [
-          /* @__PURE__ */ t(
-            r.Title,
+          /* @__PURE__ */ n(
+            p.Title,
             {
-              render: /* @__PURE__ */ t("div", { className: n("grow", "truncate"), children: p })
+              render: /* @__PURE__ */ n("div", { className: o(t("grow", "truncate"), e == null ? void 0 : e.title), children: f })
             }
           ),
-          /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
-            f,
-            /* @__PURE__ */ t(
-              r.Close,
+          /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+            P,
+            /* @__PURE__ */ n(
+              p.Close,
               {
-                render: /* @__PURE__ */ t(oe, { children: z })
+                render: /* @__PURE__ */ n(de, { children: w })
               }
             ),
-            h
+            C
           ] })
         ]
       }
     ),
-    d || null
+    h || null
   ] }), [
+    C,
     h,
-    d,
-    f,
-    n,
-    z,
-    p
-  ]), [m, N] = c(!1), { getRootProps: G, getHandleProps: a, rootRef: P } = ee({
-    initialWidth: $,
-    initialHeight: T,
-    onDragStart: () => N(!0),
-    onDragEnd: () => N(!1)
+    P,
+    t,
+    e == null ? void 0 : e.header,
+    e == null ? void 0 : e.title,
+    w,
+    f
+  ]), [v, x] = l(!1), { getRootProps: Q, getHandleProps: z, rootRef: Y } = te({
+    initialWidth: X,
+    initialHeight: G,
+    onDragStart: () => x(!0),
+    onDragEnd: () => x(!1)
   });
-  C(() => {
-    m ? document.body.style.userSelect = "none" : document.body.style.userSelect = "";
-  }, [m]);
-  const J = (e, l) => {
-    if (!e.current) return;
-    const { heightDiff: s } = l;
-    e.current.style.top = `${parseInt(e.current.style.top || "0") - s}px`;
-  }, K = (e, l) => {
-    if (!e.current) return;
-    const { widthDiff: s } = l;
-    e.current.style.left = `${parseInt(e.current.style.left || "0") - s}px`;
+  O(() => {
+    v ? document.body.style.userSelect = "none" : document.body.style.userSelect = "";
+  }, [v]);
+  const { ref: Z, ..._ } = Q(), B = (r, R) => {
+    if (!r.current) return;
+    const { widthDiff: u } = R;
+    r.current.style.left = `${parseInt(r.current.style.left || "0") - u}px`;
   };
-  return /* @__PURE__ */ o(
-    r.Root,
+  return /* @__PURE__ */ i(
+    p.Root,
     {
-      openOnHover: S === "hover" ? !0 : x,
-      open: A,
-      onOpenChange: (e) => {
-        v(e);
-      },
-      delay: 100,
+      openOnHover: A === "hover" ? !0 : V,
+      open: T,
+      onOpenChange: H,
       children: [
-        /* @__PURE__ */ t(r.Trigger, { render: H, ref: F }),
-        /* @__PURE__ */ t(r.Portal, { children: /* @__PURE__ */ t(
-          r.Positioner,
+        /* @__PURE__ */ n(
+          p.Trigger,
+          {
+            render: S,
+            className: o(t("popup-panel-trigger"), e == null ? void 0 : e.trigger)
+          }
+        ),
+        /* @__PURE__ */ n(p.Portal, { children: /* @__PURE__ */ n(
+          p.Positioner,
           {
-            className: n("popup-panel-root"),
-            side: R.placement,
-            align: R.align,
+            className: o(
+              t("popup-panel-root"),
+              e == null ? void 0 : e.root,
+              y
+            ),
+            side: b.placement,
+            align: b.align,
             sideOffset: 4,
-            anchor: V,
+            anchor: F,
             style: {
-              "--size-width": g ? B[g] : void 0
+              "--size-width": g ? ee[g] : void 0
             },
-            ref: X,
-            children: /* @__PURE__ */ o(
-              r.Popup,
+            children: /* @__PURE__ */ i(
+              p.Popup,
               {
-                className: le(n("popup-panel"), E, I),
-                ...G(),
-                ...m ? { "data-resizing": !0 } : {},
+                className: o(
+                  t("popup-panel"),
+                  t(`popup-panel-size-${g}`),
+                  E,
+                  e == null ? void 0 : e.popup,
+                  y
+                ),
+                ref: ne(Z, K),
+                ..._,
+                ...v ? { "data-resizing": !0 } : {},
                 children: [
-                  p && q(),
-                  /* @__PURE__ */ t("div", { className: n("popup-panel-content"), children: /* @__PURE__ */ t("div", { className: n("popup-panel-content-inner"), children: O }) }),
-                  i && /* @__PURE__ */ t("div", { className: n("popup-panel-footer"), children: typeof i == "function" ? i({ close: () => v(!1) }) : i }),
-                  j && /* @__PURE__ */ o(L, { children: [
-                    /* @__PURE__ */ t(
-                      "div",
-                      {
-                        className: n("resize-handle-top"),
-                        ...a({
-                          reverse: !0,
-                          lockHorizontal: !0,
-                          onResize: (e) => J(P, e)
-                        })
-                      }
-                    ),
-                    /* @__PURE__ */ t(
+                  f && L(),
+                  /* @__PURE__ */ n(
+                    "div",
+                    {
+                      className: o(t("popup-panel-content"), e == null ? void 0 : e.content),
+                      children: /* @__PURE__ */ n("div", { className: t("popup-panel-content-inner"), children: j })
+                    }
+                  ),
+                  d && /* @__PURE__ */ n(
+                    "div",
+                    {
+                      className: o(t("popup-panel-footer"), e == null ? void 0 : e.footer),
+                      children: typeof d == "function" ? d({ close: () => H(!1) }) : d
+                    }
+                  ),
+                  M && /* @__PURE__ */ i(m, { children: [
+                    /* @__PURE__ */ n(
                       "div",
                       {
-                        className: n("resize-handle-bottom"),
-                        ...a({
+                        className: o(
+                          t("popup-panel-resize-handle"),
+                          e == null ? void 0 : e.resizeHandle
+                        ),
+                        "data-placement": "bottom-left",
+                        ...z({
                           lockHorizontal: !0
                         })
                       }
                     ),
-                    /* @__PURE__ */ t(
+                    /* @__PURE__ */ n(
                       "div",
                       {
-                        className: n("resize-handle-left"),
-                        ...a({
+                        className: o(
+                          t("popup-panel-resize-handle"),
+                          e == null ? void 0 : e.resizeHandle
+                        ),
+                        "data-placement": "top-left",
+                        ...z({
                           reverse: !0,
                           lockVertical: !0,
-                          onResize: (e) => K(P, e)
+                          onResize: (r) => B(Y, r)
                         })
                       }
                     ),
-                    /* @__PURE__ */ t(
+                    /* @__PURE__ */ n(
                       "div",
                       {
-                        className: n("resize-handle-right"),
-                        ...a({
+                        className: o(
+                          t("popup-panel-resize-handle"),
+                          e == null ? void 0 : e.resizeHandle
+                        ),
+                        "data-placement": "top-right",
+                        ...z({
                           lockVertical: !0
                         })
                       }
@@ -185,6 +211,6 @@ const ze = ({
   );
 };
 export {
-  ze as PopupPanel
+  be as PopupPanel
 };
 //# sourceMappingURL=component.js.map

package/dist/components/PopupPanel/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/PopupPanel/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  useCls,\n  clsx,\n  useAntdCssVarClassname,\n  parseAntdPlacement,\n} from \"../utils\";\nimport { Popover } from \"@base-ui-components/react/popover\";\n\nimport { type PopoverProps } from \"antd/es/popover\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport Flex from \"antd/es/flex\";\nimport { IconButton } from \"../IconButton\";\nimport { X } from \"@bioturing/assets\";\nimport { PopupPanelSize } from \"./constants\";\nimport { useControlledState } from \"../hooks\";\nimport { useResizable, type MoveValues } from \"react-use-resizable\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface PopupPanelProps\n  extends Omit<\n    React.ComponentPropsWithRef<\"div\">,\n    \"title\" | \"content\" | \"children\"\n  > {\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?: PopoverProps[\"placement\"];\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?: (open: boolean) => void;\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\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,\n  resizable = false,\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 ?? false // Always provide a default value to prevent undefined\n  );\n\n  const cls = useCls();\n  const antdCssVarClassname = useAntdCssVarClassname();\n  const headlessUIPlacement = parseAntdPlacement(placement);\n  const triggerRef = useRef<HTMLElement>(null);\n  const [popupRef, setPopupRef] = useState<HTMLDivElement | null>(null);\n  const [width, setWidth] = useState<number>();\n  const [height, setHeight] = useState<number>();\n  const callbackRef = useCallback((node: HTMLDivElement) => {\n    setPopupRef(node);\n  }, []);\n  useEffect(() => {\n    if (!popupRef) return;\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        setWidth(entry.contentRect.width);\n        setHeight(entry.contentRect.height);\n      }\n    });\n    observer.observe(popupRef);\n    return () => {\n      observer.disconnect();\n    };\n  }, [popupRef]);\n\n  const defaultCloseIcon = useMemo(() => <X size={16} />, []);\n  const renderTitle = useCallback(() => {\n    return (\n      <div className={cls(\"popup-panel-header\")}>\n        <Flex\n          align=\"center\"\n          gap={8}\n          className={cls(\"popup-panel-title-wrapper\")}\n        >\n          <Popover.Title\n            render={<div className={cls(\"grow\", \"truncate\")}>{title}</div>}\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        </Flex>\n        {afterTitle ? afterTitle : null}\n      </div>\n    );\n  }, [\n    afterCloseButton,\n    afterTitle,\n    beforeCloseButton,\n    cls,\n    defaultCloseIcon,\n    title,\n  ]);\n  const [resizing, setResizing] = useState(false);\n  const { getRootProps, getHandleProps, rootRef } = useResizable({\n    initialWidth: width,\n    initialHeight: height,\n    onDragStart: () => setResizing(true),\n    onDragEnd: () => setResizing(false),\n  });\n  useEffect(() => {\n    if (resizing) {\n      document.body.style.userSelect = \"none\";\n    } else {\n      document.body.style.userSelect = \"\";\n    }\n  }, [resizing]);\n  // Handle reverse handle change\n  const onReverseHandleChangeVertical = (\n    parent: React.RefObject<HTMLDivElement>,\n    values: MoveValues\n  ) => {\n    if (!parent.current) return;\n    const { heightDiff } = values;\n    parent.current.style.top = `${\n      parseInt(parent.current.style.top || \"0\") - heightDiff\n    }px`;\n  };\n\n  // Handle reverse handle change\n  const onReverseHandleChangeHorizontal = (\n    parent: React.RefObject<HTMLDivElement>,\n    values: MoveValues\n  ) => {\n    if (!parent.current) return;\n    const { widthDiff } = values;\n    parent.current.style.left = `${\n      parseInt(parent.current.style.left || \"0\") - widthDiff\n    }px`;\n  };\n\n  return (\n    <Popover.Root\n      openOnHover={trigger === \"hover\" ? true : openOnHover}\n      open={open}\n      onOpenChange={(newOpen) => {\n        // Ensure we're properly handling the state change\n        setOpen(newOpen);\n      }}\n      delay={100}\n    >\n      <Popover.Trigger render={children} ref={triggerRef}></Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Positioner\n          className={cls(\"popup-panel-root\")}\n          side={headlessUIPlacement.placement}\n          align={headlessUIPlacement.align}\n          sideOffset={4}\n          anchor={anchor}\n          style={\n            {\n              \"--size-width\": size ? PopupPanelSize[size] : undefined,\n            } as React.CSSProperties\n          }\n          ref={callbackRef}\n        >\n          <Popover.Popup\n            className={clsx(cls(\"popup-panel\"), antdCssVarClassname, className)}\n            {...getRootProps()}\n            {...(resizing ? { \"data-resizing\": true } : {})}\n          >\n            {/* <div ref={popupRef}> */}\n            {title && renderTitle()}\n            <div className={cls(\"popup-panel-content\")}>\n              <div className={cls(\"popup-panel-content-inner\")}>{content}</div>\n            </div>\n            {footer && (\n              <div className={cls(\"popup-panel-footer\")}>\n                {typeof footer === \"function\"\n                  ? footer({ close: () => setOpen(false) })\n                  : footer}\n              </div>\n            )}\n            {resizable && (\n              <>\n                <div\n                  className={cls(\"resize-handle-top\")}\n                  {...getHandleProps({\n                    reverse: true,\n                    lockHorizontal: true,\n                    onResize: (values) =>\n                      onReverseHandleChangeVertical(rootRef, values),\n                  })}\n                />\n                <div\n                  className={cls(\"resize-handle-bottom\")}\n                  {...getHandleProps({\n                    lockHorizontal: true,\n                  })}\n                />\n                <div\n                  className={cls(\"resize-handle-left\")}\n                  {...getHandleProps({\n                    reverse: true,\n                    lockVertical: true,\n                    onResize: (values) =>\n                      onReverseHandleChangeHorizontal(rootRef, values),\n                  })}\n                />\n                <div\n                  className={cls(\"resize-handle-right\")}\n                  {...getHandleProps({\n                    lockVertical: true,\n                  })}\n                />\n              </>\n            )}\n          </Popover.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","open","setOpen","useControlledState","cls","useCls","antdCssVarClassname","useAntdCssVarClassname","headlessUIPlacement","parseAntdPlacement","triggerRef","useRef","popupRef","setPopupRef","useState","width","setWidth","height","setHeight","callbackRef","useCallback","node","useEffect","observer","entries","entry","defaultCloseIcon","useMemo","jsx","X","renderTitle","jsxs","Flex","Popover","IconButton","resizing","setResizing","getRootProps","getHandleProps","rootRef","useResizable","onReverseHandleChangeVertical","parent","values","heightDiff","onReverseHandleChangeHorizontal","widthDiff","newOpen","PopupPanelSize","clsx","Fragment"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/PopupPanel/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  useCls,\n  clsx,\n  useAntdCssVarClassname,\n  parseAntdPlacement,\n} from \"../utils\";\nimport { Popover } from \"@base-ui-components/react/popover\";\n\nimport { type PopoverProps } from \"antd/es/popover\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport Flex from \"antd/es/flex\";\nimport { IconButton } from \"../IconButton\";\nimport { X } from \"@bioturing/assets\";\nimport { PopupPanelSize } from \"./constants\";\nimport { useControlledState } from \"../hooks\";\nimport { useResizable, type MoveValues } from \"react-use-resizable\";\nimport mergeRefs from \"merge-refs\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface PopupPanelProps\n  extends Omit<\n    React.ComponentPropsWithRef<\"div\">,\n    \"title\" | \"content\" | \"children\"\n  > {\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?: PopoverProps[\"placement\"];\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?: (open: boolean) => void;\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   * 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\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,\n  resizable = false,\n  classNames,\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 ?? false // Always provide a default value to prevent undefined\n  );\n\n  const cls = useCls();\n  const antdCssVarClassname = useAntdCssVarClassname();\n  const headlessUIPlacement = parseAntdPlacement(placement);\n  // We don't need triggerRef since we're using callbackRef for the popup\n  const [popupRef, setPopupRef] = useState<HTMLDivElement | null>(null);\n  const [width, setWidth] = useState<number>();\n  const [height, setHeight] = useState<number>();\n  const callbackRef = useCallback((node: HTMLDivElement) => {\n    setPopupRef(node);\n  }, []);\n  useEffect(() => {\n    if (!popupRef) return;\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        setWidth(entry.contentRect.width);\n        setHeight(entry.contentRect.height);\n      }\n    });\n    observer.observe(popupRef);\n    return () => {\n      observer.disconnect();\n    };\n  }, [popupRef]);\n\n  const defaultCloseIcon = useMemo(() => <X size={16} />, []);\n  const renderTitle = useCallback(() => {\n    return (\n      <div className={clsx(cls(\"popup-panel-header\"), classNames?.header)}>\n        <Flex\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        </Flex>\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  const [resizing, setResizing] = useState(false);\n  const { getRootProps, getHandleProps, rootRef } = useResizable({\n    initialWidth: width,\n    initialHeight: height,\n    onDragStart: () => setResizing(true),\n    onDragEnd: () => setResizing(false),\n  });\n  useEffect(() => {\n    if (resizing) {\n      document.body.style.userSelect = \"none\";\n    } else {\n      document.body.style.userSelect = \"\";\n    }\n  }, [resizing]);\n  const { ref: rootRefProp, ...rootPropsWithoutRef } = getRootProps();\n  // Handle reverse handle change for vertical resizing\n  // Currently not used but kept for future implementation\n  const _onReverseHandleChangeVertical = (\n    parent: React.RefObject<HTMLDivElement>,\n    values: MoveValues\n  ) => {\n    if (!parent.current) return;\n    const { heightDiff } = values;\n    parent.current.style.top = `${\n      parseInt(parent.current.style.top || \"0\") - heightDiff\n    }px`;\n  };\n\n  // Handle reverse handle change\n  const onReverseHandleChangeHorizontal = (\n    parent: React.RefObject<HTMLDivElement>,\n    values: MoveValues\n  ) => {\n    if (!parent.current) return;\n    const { widthDiff } = values;\n    parent.current.style.left = `${\n      parseInt(parent.current.style.left || \"0\") - widthDiff\n    }px`;\n  };\n\n  return (\n    <Popover.Root\n      openOnHover={trigger === \"hover\" ? true : openOnHover}\n      open={open}\n      onOpenChange={setOpen}\n    >\n      <Popover.Trigger\n        render={children}\n        className={clsx(cls(\"popup-panel-trigger\"), classNames?.trigger)}\n      ></Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Positioner\n          className={clsx(\n            cls(\"popup-panel-root\"),\n            classNames?.root,\n            antdCssVarClassname\n          )}\n          side={headlessUIPlacement.placement}\n          align={headlessUIPlacement.align}\n          sideOffset={4}\n          anchor={anchor}\n          style={\n            {\n              \"--size-width\": size ? PopupPanelSize[size] : undefined,\n            } as React.CSSProperties\n          }\n        >\n          <Popover.Popup\n            className={clsx(\n              cls(\"popup-panel\"),\n              cls(`popup-panel-size-${size}`),\n              className,\n              classNames?.popup,\n              antdCssVarClassname\n            )}\n            ref={mergeRefs(rootRefProp, callbackRef)}\n            {...rootPropsWithoutRef}\n            {...(resizing ? { \"data-resizing\": true } : {})}\n          >\n            {/* <div ref={popupRef}> */}\n            {title && renderTitle()}\n            <div\n              className={clsx(cls(\"popup-panel-content\"), classNames?.content)}\n            >\n              <div className={cls(\"popup-panel-content-inner\")}>{content}</div>\n            </div>\n            {footer && (\n              <div\n                className={clsx(cls(\"popup-panel-footer\"), classNames?.footer)}\n              >\n                {typeof footer === \"function\"\n                  ? footer({ close: () => setOpen(false) })\n                  : footer}\n              </div>\n            )}\n            {resizable && (\n              <>\n                <div\n                  className={clsx(\n                    cls(\"popup-panel-resize-handle\"),\n                    classNames?.resizeHandle\n                  )}\n                  data-placement=\"bottom-left\"\n                  {...getHandleProps({\n                    lockHorizontal: true,\n                  })}\n                />\n                <div\n                  className={clsx(\n                    cls(\"popup-panel-resize-handle\"),\n                    classNames?.resizeHandle\n                  )}\n                  data-placement=\"top-left\"\n                  {...getHandleProps({\n                    reverse: true,\n                    lockVertical: true,\n                    onResize: (values) =>\n                      onReverseHandleChangeHorizontal(rootRef, values),\n                  })}\n                />\n                <div\n                  className={clsx(\n                    cls(\"popup-panel-resize-handle\"),\n                    classNames?.resizeHandle\n                  )}\n                  data-placement=\"top-right\"\n                  {...getHandleProps({\n                    lockVertical: true,\n                  })}\n                />\n              </>\n            )}\n          </Popover.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","classNames","open","setOpen","useControlledState","cls","useCls","antdCssVarClassname","useAntdCssVarClassname","headlessUIPlacement","parseAntdPlacement","popupRef","setPopupRef","useState","width","setWidth","height","setHeight","callbackRef","useCallback","node","useEffect","observer","entries","entry","defaultCloseIcon","useMemo","jsx","X","renderTitle","jsxs","clsx","Flex","Popover","IconButton","resizing","setResizing","getRootProps","getHandleProps","rootRef","useResizable","rootRefProp","rootPropsWithoutRef","onReverseHandleChangeHorizontal","parent","values","widthDiff","PopupPanelSize","mergeRefs","Fragment"],"mappings":";;;;;;;;;;;;;AAiGO,MAAMA,KAAa,CAAC;AAAA,EACzB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,MAAMC;AAAA,EACN,cAAcC;AAAA,EACd,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,YAAAC;AACF,MAAuB;AAEf,QAAA,CAACC,GAAMC,CAAO,IAAIC;AAAA,IACtBjB;AAAA,IACAC;AAAA,IACAW,KAAe;AAAA;AAAA,EACjB,GAEMM,IAAMC,GAAO,GACbC,IAAsBC,GAAuB,GAC7CC,IAAsBC,GAAmBzB,CAAS,GAElD,CAAC0B,GAAUC,CAAW,IAAIC,EAAgC,IAAI,GAC9D,CAACC,GAAOC,CAAQ,IAAIF,EAAiB,GACrC,CAACG,GAAQC,CAAS,IAAIJ,EAAiB,GACvCK,IAAcC,EAAY,CAACC,MAAyB;AACxD,IAAAR,EAAYQ,CAAI;AAAA,EAClB,GAAG,EAAE;AACL,EAAAC,EAAU,MAAM;AACd,QAAI,CAACV,EAAU;AACf,UAAMW,IAAW,IAAI,eAAe,CAACC,MAAY;AAC/C,iBAAWC,KAASD;AACT,QAAAR,EAAAS,EAAM,YAAY,KAAK,GACtBP,EAAAO,EAAM,YAAY,MAAM;AAAA,IACpC,CACD;AACD,WAAAF,EAAS,QAAQX,CAAQ,GAClB,MAAM;AACX,MAAAW,EAAS,WAAW;AAAA,IACtB;AAAA,EAAA,GACC,CAACX,CAAQ,CAAC;AAEP,QAAAc,IAAmBC,EAAQ,MAAM,gBAAAC,EAACC,KAAE,MAAM,IAAI,GAAI,EAAE,GACpDC,IAAcV,EAAY,MAE5B,gBAAAW,EAAC,SAAI,WAAWC,EAAK1B,EAAI,oBAAoB,GAAGJ,KAAA,gBAAAA,EAAY,MAAM,GAChE,UAAA;AAAA,IAAA,gBAAA6B;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,KAAK;AAAA,QACL,WAAW3B,EAAI,2BAA2B;AAAA,QAE1C,UAAA;AAAA,UAAA,gBAAAsB;AAAA,YAACM,EAAQ;AAAA,YAAR;AAAA,cACC,QACE,gBAAAN,EAAC,OAAI,EAAA,WAAWI,EAAK1B,EAAI,QAAQ,UAAU,GAAGJ,KAAA,gBAAAA,EAAY,KAAK,GAC5D,UACHX,EAAA,CAAA;AAAA,YAAA;AAAA,UAEH;AAAA,UACD,gBAAAwC,EAAC,OAAI,EAAA,WAAU,2BACZ,UAAA;AAAA,YAAApC;AAAA,YACD,gBAAAiC;AAAA,cAACM,EAAQ;AAAA,cAAR;AAAA,gBACC,QAAS,gBAAAN,EAAAO,IAAA,EAAY,UAAiBT,EAAA,CAAA;AAAA,cAAA;AAAA,YACxC;AAAA,YACC9B;AAAA,UAAA,EACH,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,IACCC,KAA0B;AAAA,EAAA,GAC7B,GAED;AAAA,IACDD;AAAA,IACAC;AAAA,IACAF;AAAA,IACAW;AAAA,IACAJ,KAAA,gBAAAA,EAAY;AAAA,IACZA,KAAA,gBAAAA,EAAY;AAAA,IACZwB;AAAA,IACAnC;AAAA,EAAA,CACD,GACK,CAAC6C,GAAUC,CAAW,IAAIvB,EAAS,EAAK,GACxC,EAAE,cAAAwB,GAAc,gBAAAC,GAAgB,SAAAC,EAAA,IAAYC,GAAa;AAAA,IAC7D,cAAc1B;AAAA,IACd,eAAeE;AAAA,IACf,aAAa,MAAMoB,EAAY,EAAI;AAAA,IACnC,WAAW,MAAMA,EAAY,EAAK;AAAA,EAAA,CACnC;AACD,EAAAf,EAAU,MAAM;AACd,IAAIc,IACO,SAAA,KAAK,MAAM,aAAa,SAExB,SAAA,KAAK,MAAM,aAAa;AAAA,EACnC,GACC,CAACA,CAAQ,CAAC;AACb,QAAM,EAAE,KAAKM,GAAa,GAAGC,EAAA,IAAwBL,EAAa,GAe5DM,IAAkC,CACtCC,GACAC,MACG;AACC,QAAA,CAACD,EAAO,QAAS;AACf,UAAA,EAAE,WAAAE,MAAcD;AACf,IAAAD,EAAA,QAAQ,MAAM,OAAO,GAC1B,SAASA,EAAO,QAAQ,MAAM,QAAQ,GAAG,IAAIE,CAC/C;AAAA,EACF;AAGE,SAAA,gBAAAhB;AAAA,IAACG,EAAQ;AAAA,IAAR;AAAA,MACC,aAAa1C,MAAY,UAAU,KAAOL;AAAA,MAC1C,MAAAgB;AAAA,MACA,cAAcC;AAAA,MAEd,UAAA;AAAA,QAAA,gBAAAwB;AAAA,UAACM,EAAQ;AAAA,UAAR;AAAA,YACC,QAAQjD;AAAA,YACR,WAAW+C,EAAK1B,EAAI,qBAAqB,GAAGJ,KAAA,gBAAAA,EAAY,OAAO;AAAA,UAAA;AAAA,QAChE;AAAA,QACD,gBAAA0B,EAACM,EAAQ,QAAR,EACC,UAAA,gBAAAN;AAAA,UAACM,EAAQ;AAAA,UAAR;AAAA,YACC,WAAWF;AAAA,cACT1B,EAAI,kBAAkB;AAAA,cACtBJ,KAAA,gBAAAA,EAAY;AAAA,cACZM;AAAA,YACF;AAAA,YACA,MAAME,EAAoB;AAAA,YAC1B,OAAOA,EAAoB;AAAA,YAC3B,YAAY;AAAA,YACZ,QAAAhB;AAAA,YACA,OACE;AAAA,cACE,gBAAgBI,IAAOkD,GAAelD,CAAI,IAAI;AAAA,YAChD;AAAA,YAGF,UAAA,gBAAAiC;AAAA,cAACG,EAAQ;AAAA,cAAR;AAAA,gBACC,WAAWF;AAAA,kBACT1B,EAAI,aAAa;AAAA,kBACjBA,EAAI,oBAAoBR,CAAI,EAAE;AAAA,kBAC9BL;AAAA,kBACAS,KAAA,gBAAAA,EAAY;AAAA,kBACZM;AAAA,gBACF;AAAA,gBACA,KAAKyC,GAAUP,GAAavB,CAAW;AAAA,gBACtC,GAAGwB;AAAA,gBACH,GAAIP,IAAW,EAAE,iBAAiB,OAAS,CAAC;AAAA,gBAG5C,UAAA;AAAA,kBAAA7C,KAASuC,EAAY;AAAA,kBACtB,gBAAAF;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAWI,EAAK1B,EAAI,qBAAqB,GAAGJ,KAAA,gBAAAA,EAAY,OAAO;AAAA,sBAE/D,4BAAC,OAAI,EAAA,WAAWI,EAAI,2BAA2B,GAAI,UAAQhB,EAAA,CAAA;AAAA,oBAAA;AAAA,kBAC7D;AAAA,kBACCS,KACC,gBAAA6B;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAWI,EAAK1B,EAAI,oBAAoB,GAAGJ,KAAA,gBAAAA,EAAY,MAAM;AAAA,sBAE5D,UAAA,OAAOH,KAAW,aACfA,EAAO,EAAE,OAAO,MAAMK,EAAQ,EAAK,EAAE,CAAC,IACtCL;AAAA,oBAAA;AAAA,kBACN;AAAA,kBAEDE,KAEG,gBAAA8B,EAAAmB,GAAA,EAAA,UAAA;AAAA,oBAAA,gBAAAtB;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,WAAWI;AAAA,0BACT1B,EAAI,2BAA2B;AAAA,0BAC/BJ,KAAA,gBAAAA,EAAY;AAAA,wBACd;AAAA,wBACA,kBAAe;AAAA,wBACd,GAAGqC,EAAe;AAAA,0BACjB,gBAAgB;AAAA,wBACjB,CAAA;AAAA,sBAAA;AAAA,oBACH;AAAA,oBACA,gBAAAX;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,WAAWI;AAAA,0BACT1B,EAAI,2BAA2B;AAAA,0BAC/BJ,KAAA,gBAAAA,EAAY;AAAA,wBACd;AAAA,wBACA,kBAAe;AAAA,wBACd,GAAGqC,EAAe;AAAA,0BACjB,SAAS;AAAA,0BACT,cAAc;AAAA,0BACd,UAAU,CAACO,MACTF,EAAgCJ,GAASM,CAAM;AAAA,wBAClD,CAAA;AAAA,sBAAA;AAAA,oBACH;AAAA,oBACA,gBAAAlB;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,WAAWI;AAAA,0BACT1B,EAAI,2BAA2B;AAAA,0BAC/BJ,KAAA,gBAAAA,EAAY;AAAA,wBACd;AAAA,wBACA,kBAAe;AAAA,wBACd,GAAGqC,EAAe;AAAA,0BACjB,cAAc;AAAA,wBACf,CAAA;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACH,EACF,CAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAEJ;AAAA,QAAA,EAEJ,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/components/PopupPanel/style.css

@@ -1 +1 @@
-@layer components{.ds-popup-panel{box-shadow:var(--ds-box-shadow-secondary);border-radius:var(--ds-border-radius);background:var(--ds-color-bg-elevated);list-style:none;color:var(--ds-color-text);font-size:var(--ds-font-size);font-family:var(--ds-font-family);transition-property:transform,scale,opacity;transition-duration:.2s;transition-timing-function:var(--ds-motion-ease-out);transform-origin:var(--transform-origin);width:min(var(--size-width),var(--available-width));max-width:var(--available-width);max-height:var(--available-height);height:max-content;display:flex;flex-direction:column}.ds-popup-panel[data-ending-style],.ds-popup-panel[data-starting-style]{transform:scale(.9);opacity:0}.ds-popup-panel:focus{outline:none}.ds-popup-panel-header{border-bottom:1px solid var(--ds-color-split);margin-bottom:0;padding:calc(var(--ds-popup-panel-padding) / 2) var(--ds-popup-panel-padding);flex:0}.ds-popup-panel-header .ds-popup-panel-title-wrapper{font-weight:500;font-size:var(--ds-font-size);line-height:var(--ds-line-height);color:var(--ds-color-text)}.ds-popup-panel-footer{border-top:1px solid var(--ds-color-split);margin-top:0;padding:calc(var(--ds-popup-panel-padding) / 2) var(--ds-popup-panel-padding);flex:0}.ds-popup-panel-content{display:flex;flex-direction:column;flex:1;overflow:auto}.ds-popup-panel-content .ds-popup-panel-content-inner{flex:1;padding:var(--ds-popup-panel-padding)}.ds-resize-handle-top{position:absolute;top:0;width:100%;padding:.5rem;height:4px;border-top-left-radius:.5rem;border-top-right-radius:.5rem;color:#fff;display:block;justify-content:center}.ds-resize-handle-bottom{position:absolute;bottom:0;width:100%;height:4px;padding:.5rem;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem;color:#fff;display:block;justify-content:center}.ds-resize-handle-left{position:absolute;left:0;top:0;width:4px;height:100%;padding:.5rem;border-top-left-radius:.5rem;border-bottom-left-radius:.5rem;color:#fff;display:block;align-items:center}.ds-resize-handle-right{position:absolute;right:0;top:0;width:4px;height:100%;padding:.5rem;border-top-right-radius:.5rem;border-bottom-right-radius:.5rem;color:#fff;display:block;align-items:center}}
+@layer components{.ds-popup-panel-root{z-index:1030}.ds-popup-panel{box-shadow:var(--ds-box-shadow-secondary);border-radius:var(--ds-border-radius);background:var(--ds-color-bg-elevated);list-style:none;color:var(--ds-color-text);font-size:var(--ds-font-size);font-family:var(--ds-font-family);transition-property:transform,scale,opacity;transition-duration:.2s;transition-timing-function:var(--ds-motion-ease-out);transform-origin:var(--transform-origin);width:min(var(--size-width),var(--available-width));max-width:var(--available-width);max-height:var(--available-height);height:max-content;display:flex;flex-direction:column}.ds-popup-panel[data-ending-style],.ds-popup-panel[data-starting-style]{transform:scale(.9);opacity:0}.ds-popup-panel:focus{outline:none}.ds-popup-panel-header{border-bottom:1px solid var(--ds-color-split);margin-bottom:0;padding:calc(var(--ds-popup-panel-padding) / 2) var(--ds-popup-panel-padding);flex:0}.ds-popup-panel-title-wrapper{font-weight:500;font-size:var(--ds-font-size);line-height:var(--ds-line-height);color:var(--ds-color-text)}.ds-popup-panel-footer{border-top:1px solid var(--ds-color-split);margin-top:0;padding:calc(var(--ds-popup-panel-padding) / 2) var(--ds-popup-panel-padding);flex:0}.ds-popup-panel-content{display:flex;flex-direction:column;flex:1;overflow:auto}.ds-popup-panel-content .ds-popup-panel-content-inner{flex:1;padding:var(--ds-popup-panel-padding)}.ds-popup-panel-resize-handle{position:absolute;padding:.5rem;color:#fff;display:block}.ds-popup-panel-resize-handle[data-placement=top-left]{left:0;top:0;width:4px;height:100%;border-top-left-radius:.5rem;border-bottom-left-radius:.5rem;align-items:center}.ds-popup-panel-resize-handle[data-placement=top-right]{right:0;top:0;width:4px;height:100%;border-top-right-radius:.5rem;border-bottom-right-radius:.5rem;align-items:center}.ds-popup-panel-resize-handle[data-placement=bottom-left]{bottom:0;width:100%;height:4px;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem;justify-content:center}}

package/dist/components/ScrollArea/style.css

@@ -1 +1 @@
-@layer components{.ds-scroll-area{display:flex;flex-direction:column;height:100%;min-height:0;flex:1}.ds-scroll-area .ds-scroll-area-viewport{flex-shrink:1;height:100%;max-height:100%;overflow:hidden;overscroll-behavior:contain}:is(.ds-scroll-area .ds-scroll-area-viewport):focus-visible{outline-width:2px;outline-offset:4px;outline-color:var(--ds-color-primary)}.ds-scroll-area .ds-scroll-area-scrollbar{padding:.25rem;display:flex;justify-content:center;background-color:transparent;opacity:0;transition-property:opacity;transition-delay:.1s}:is(.ds-scroll-area .ds-scroll-area-scrollbar) .ds-scroll-area-thumb{border-radius:9999px;background-color:var(--ds-color-bg-fill-tertiary);border:1px solid var(--ds-color-border)}[data-orientation=vertical]:is(.ds-scroll-area .ds-scroll-area-scrollbar){width:.875rem}[data-orientation=vertical]:is(.ds-scroll-area .ds-scroll-area-scrollbar) .ds-scroll-area-thumb{width:100%}[data-orientation=horizontal]:is(.ds-scroll-area .ds-scroll-area-scrollbar){width:100%;height:.875rem;flex-direction:column}[data-orientation=horizontal]:is(.ds-scroll-area .ds-scroll-area-scrollbar) .ds-scroll-area-thumb{height:100%}[data-hovering]:is(.ds-scroll-area .ds-scroll-area-scrollbar){opacity:1;transition-delay:0ms;transition-duration:.2s}[data-scrolling]:is(.ds-scroll-area .ds-scroll-area-scrollbar){opacity:1;transition-delay:0ms;transition-duration:.2s}}
+@layer components{.ds-scroll-area{display:flex;flex-direction:column;height:100%;min-height:0;flex:1}.ds-scroll-area .ds-scroll-area-viewport{flex-shrink:1;height:100%;max-height:100%;overflow:hidden;overscroll-behavior:contain}:is(.ds-scroll-area .ds-scroll-area-viewport):focus-visible{outline-width:2px;outline-offset:4px;outline-color:var(--ds-color-primary)}.ds-scroll-area .ds-scroll-area-scrollbar{padding:.125rem;display:flex;justify-content:center;background-color:transparent;opacity:0;transition-property:opacity;transition-delay:.1s}:is(.ds-scroll-area .ds-scroll-area-scrollbar) .ds-scroll-area-thumb{border-radius:9999px;background-color:var(--ds-color-bg-fill-tertiary);border:1px solid var(--ds-color-border)}[data-orientation=vertical]:is(.ds-scroll-area .ds-scroll-area-scrollbar){width:.625rem}[data-orientation=vertical]:is(.ds-scroll-area .ds-scroll-area-scrollbar) .ds-scroll-area-thumb{width:100%}[data-orientation=horizontal]:is(.ds-scroll-area .ds-scroll-area-scrollbar){width:100%;height:.625rem;flex-direction:column}[data-orientation=horizontal]:is(.ds-scroll-area .ds-scroll-area-scrollbar) .ds-scroll-area-thumb{height:100%}[data-hovering]:is(.ds-scroll-area .ds-scroll-area-scrollbar){opacity:1;transition-delay:0ms;transition-duration:.2s}[data-scrolling]:is(.ds-scroll-area .ds-scroll-area-scrollbar){opacity:1;transition-delay:0ms;transition-duration:.2s}}

package/dist/index.d.ts

@@ -917,7 +917,7 @@ export { DrawerProps }
 
 export { Dropdown }
 
-export declare const DropdownMenu: ({ children, items, placement, openOnHover, open: outsideOpen, onOpenChange: outsideOnOpenChange, }: DropdownMenuProps) => JSX.Element;
+export declare const DropdownMenu: ({ children, items, placement, openOnHover, open: outsideOpen, onOpenChange: outsideOnOpenChange, className, itemRender, classNames, }: DropdownMenuProps) => JSX.Element;
 
 export declare type DropdownMenuItemType = {
     type: "item";
@@ -940,12 +940,52 @@ export declare type DropdownMenuItemType = {
 };
 
 export declare interface DropdownMenuProps {
+    /** Array of menu items to be displayed in the dropdown */
     items: DropdownMenuItemType[];
+    /** Custom render function for the trigger element */
     children?: React.ComponentProps<typeof Menu_2.Trigger>["render"];
+    /**
+     * Placement of the dropdown relative to the trigger element
+     * @default "bottomLeft"
+     */
     placement?: PopoverProps_2["placement"];
+    /**
+     * Whether to open the dropdown on hover instead of click
+     * @default false
+     */
     openOnHover?: boolean;
+    /**
+     * Controlled open state of the dropdown
+     */
     open?: boolean;
+    /**
+     * Callback fired when the dropdown open state changes
+     */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Additional CSS class for the dropdown component
+     */
+    className?: string;
+    /**
+     * Custom class names for different parts of the dropdown
+     * @default {}
+     */
+    classNames?: {
+        root?: string;
+        trigger?: string;
+        popup?: string;
+        group?: string;
+        groupLabel?: string;
+        item?: string;
+        itemIcon?: string;
+        itemText?: string;
+        separator?: string;
+        positioner?: string;
+    };
+    /**
+     * Custom render function for menu items
+     */
+    itemRender?: (item: DropdownMenuItemType, props: React.HTMLAttributes<HTMLElement>) => React.ReactElement;
 }
 
 export { DropDownProps }
@@ -1299,7 +1339,7 @@ export declare interface PopoverProps extends PopoverProps_2 {
     arrow?: PopoverProps_2["arrow"];
 }
 
-export declare const PopupPanel: ({ children, placement, openOnHover, open: outsideOpen, onOpenChange: outsideOnOpenChange, content, title, trigger, className, anchor, beforeCloseButton, afterCloseButton, afterTitle, size, footer, defaultOpen, resizable, }: PopupPanelProps) => JSX.Element;
+export declare const PopupPanel: ({ children, placement, openOnHover, open: outsideOpen, onOpenChange: outsideOnOpenChange, content, title, trigger, className, anchor, beforeCloseButton, afterCloseButton, afterTitle, size, footer, defaultOpen, resizable, classNames, }: PopupPanelProps) => JSX.Element;
 
 export declare interface PopupPanelProps extends Omit<React.ComponentPropsWithRef<"div">, "title" | "content" | "children"> {
     /** The trigger element that opens the popup panel */
@@ -1356,6 +1396,20 @@ export declare interface PopupPanelProps extends Omit<React.ComponentPropsWithRe
      * @default false
      */
     resizable?: boolean;
+    /**
+     * Custom class names for different parts of the popup panel
+     * @default {}
+     */
+    classNames?: {
+        root?: string;
+        trigger?: string;
+        popup?: string;
+        header?: string;
+        title?: string;
+        content?: string;
+        footer?: string;
+        resizeHandle?: string;
+    };
 }
 
 declare enum PopupPanelSize {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bioturing/components",
-  "version": "0.15.2",
+  "version": "0.15.3",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -20,6 +20,7 @@
     "@base-ui-components/react": "1.0.0-alpha.8",
     "@floating-ui/react": "^0.27.8",
     "es-toolkit": "^1.37.2",
+    "merge-refs": "^2.0.0",
     "prism-react-renderer": "^2.4.1",
     "rc-select": "^14.16.7",
     "rc-table": "^7.50.4",