@bioturing/components 0.15.2 → 0.15.4

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":"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"}

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/components/Table/component.js

@@ -1,68 +1,100 @@
-import { jsx as n, jsxs as C, Fragment as L } from "react/jsx-runtime";
-import e from "antd/es/table";
-import { Funnel as T, CaretUp as r, CaretDown as a } from "@bioturing/assets";
-import { Empty as I } from "../Empty/component.js";
+import { jsx as e, jsxs as g, Fragment as _ } from "react/jsx-runtime";
+import t from "antd/es/table";
+import { FunnelIcon as h, CaretUpIcon as p, CaretDownIcon as E } from "@bioturing/assets";
+import { Empty as w } from "../Empty/component.js";
+import { forwardRef as x, useState as j, useRef as A, useEffect as U, useCallback as M } from "react";
 import './style.css';/* empty css          */
-import { useCls as O } from "../utils/antdUtils.js";
-const d = ({
-  columns: s,
-  locale: m,
-  emptyDescription: c,
-  loading: t,
-  scroll: p = {},
-  ...N
-}) => {
-  const l = O(), E = s ? s.map((u) => ({
-    sortIcon: ({ sortOrder: o }) => /* @__PURE__ */ n(
+import { useCls as R } from "../utils/antdUtils.js";
+const D = ({
+  columns: f,
+  locale: N,
+  emptyDescription: C,
+  loading: l,
+  virtual: i,
+  scroll: I = {},
+  ...b
+}, r) => {
+  const c = R(), [L, d] = j(
+    i ? {} : {
+      x: "fit-content",
+      y: "fit-content"
+    }
+  ), s = A(null);
+  U(() => {
+    var u;
+    if (!s.current) return;
+    const n = (u = s.current) == null ? void 0 : u.nativeElement.querySelector(
+      "." + c("table-tbody")
+    ), o = new ResizeObserver((S) => {
+      for (const m of S)
+        m.target && d({
+          y: m.target.clientHeight,
+          x: m.target.clientWidth
+        });
+    });
+    return n && i && o.observe(n), () => {
+      n && i && o.disconnect();
+    };
+  }, [i, c]);
+  const T = f ? f.map((n) => ({
+    sortIcon: ({ sortOrder: o }) => /* @__PURE__ */ e(
       "span",
       {
-        className: l(
+        className: c(
           "table-column-sort-icon",
           o ? `table-column-sort-icon-${o}` : "table-column-sort-icon-none"
         ),
-        children: o ? o === "ascend" ? /* @__PURE__ */ n(r, { weight: "fill" }) : /* @__PURE__ */ n(a, { weight: "fill" }) : /* @__PURE__ */ C(L, { children: [
-          /* @__PURE__ */ n(r, { weight: "fill" }),
+        children: o ? o === "ascend" ? /* @__PURE__ */ e(p, { weight: "fill" }) : /* @__PURE__ */ e(E, { weight: "fill" }) : /* @__PURE__ */ g(_, { children: [
+          /* @__PURE__ */ e(p, { weight: "fill" }),
           " ",
-          /* @__PURE__ */ n(a, { weight: "fill" })
+          /* @__PURE__ */ e(E, { weight: "fill" })
         ] })
       }
     ),
-    filterIcon: (o) => /* @__PURE__ */ n("span", { className: l("table-column-filter-icon"), children: /* @__PURE__ */ n(T, { weight: "fill" }) }),
-    ...u
-  })) : void 0, f = {
-    emptyText: /* @__PURE__ */ n(I, { description: c }),
-    ...m
+    filterIcon: (o) => /* @__PURE__ */ e("span", { className: c("table-column-filter-icon"), children: /* @__PURE__ */ e(h, { weight: "fill" }) }),
+    ...n
+  })) : void 0, y = {
+    emptyText: /* @__PURE__ */ e(w, { description: C }),
+    ...N
   };
-  let i;
-  return typeof t == "boolean" ? i = {
-    spinning: t,
-    indicator: /* @__PURE__ */ n("span", { className: l("spin-loader") })
-  } : typeof t == "object" && (i = {
+  let a;
+  typeof l == "boolean" ? a = {
+    spinning: l,
+    indicator: /* @__PURE__ */ e("span", { className: c("spin-loader") })
+  } : typeof l == "object" && (a = {
     spinning: !0,
-    indicator: /* @__PURE__ */ n("span", { className: l("spin-loader") }),
-    ...t
-  }), /* @__PURE__ */ n(
-    e,
+    indicator: /* @__PURE__ */ e("span", { className: c("spin-loader") }),
+    ...l
+  });
+  const O = M(
+    (n) => {
+      n && (typeof r == "function" && r(n), r && typeof r == "object" && "current" in r && (r.current = n), s.current = n);
+    },
+    [r]
+  );
+  return /* @__PURE__ */ e(
+    t,
     {
-      columns: E,
-      loading: i,
-      locale: f,
-      scroll: { x: "fit-content", ...p },
-      ...N
+      ref: O,
+      columns: T,
+      loading: a,
+      locale: y,
+      virtual: i,
+      scroll: { ...L, ...I },
+      ...b
     }
   );
-}, y = Object.assign(d, {
-  Column: e.Column,
-  ColumnGroup: e.ColumnGroup,
-  SELECTION_COLUMN: e.SELECTION_COLUMN,
-  EXPAND_COLUMN: e.EXPAND_COLUMN,
-  SELECTION_ALL: e.SELECTION_ALL,
-  SELECTION_INVERT: e.SELECTION_INVERT,
-  SELECTION_NONE: e.SELECTION_NONE,
-  Summary: e.Summary
+}, P = x(D), v = Object.assign(P, {
+  Column: t.Column,
+  ColumnGroup: t.ColumnGroup,
+  SELECTION_COLUMN: t.SELECTION_COLUMN,
+  EXPAND_COLUMN: t.EXPAND_COLUMN,
+  SELECTION_ALL: t.SELECTION_ALL,
+  SELECTION_INVERT: t.SELECTION_INVERT,
+  SELECTION_NONE: t.SELECTION_NONE,
+  Summary: t.Summary
 });
 export {
-  y as Table,
-  y as default
+  v as Table
 };
 //# sourceMappingURL=component.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/Table/component.tsx"],"sourcesContent":["import {\n  default as AntTable,\n  type ColumnType,\n  type TableProps as AntTableProps,\n} from \"antd/es/table\";\nimport { CaretDown, CaretUp, Funnel } from \"@bioturing/assets\";\nimport { useCls } from \"../utils\";\nimport Empty from \"../Empty/component\";\nimport { SpinProps } from \"antd/es/spin\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\n// Define interface with all the generic type parameters from AntTable without any\nexport interface TableProps<RecordType extends object = object>\n  extends AntTableProps<RecordType> {\n  /**\n   * Add empty description for the table\n   */\n  emptyDescription?: React.ReactNode;\n}\n\n// Simple wrapper component with proper generics\nconst InternalTable = <RecordType extends object = object>({\n  columns,\n  locale,\n  emptyDescription,\n  loading,\n  scroll = {},\n  ...rest\n}: TableProps<RecordType>) => {\n  const cls = useCls();\n  const modifiedColumns = columns\n    ? columns.map((column: ColumnType<RecordType>): ColumnType<RecordType> => {\n        return {\n          sortIcon: ({ sortOrder }) => {\n            return (\n              <span\n                className={cls(\n                  \"table-column-sort-icon\",\n                  sortOrder\n                    ? `table-column-sort-icon-${sortOrder}`\n                    : `table-column-sort-icon-none`\n                )}\n              >\n                {!sortOrder ? (\n                  <>\n                    <CaretUp weight=\"fill\" /> <CaretDown weight=\"fill\" />\n                  </>\n                ) : sortOrder === \"ascend\" ? (\n                  <CaretUp weight=\"fill\" />\n                ) : (\n                  <CaretDown weight=\"fill\" />\n                )}\n              </span>\n            );\n          },\n          filterIcon: (_filtered) => {\n            return (\n              <span className={cls(\"table-column-filter-icon\")}>\n                <Funnel weight=\"fill\" />\n              </span>\n            );\n          },\n          ...column,\n        };\n      })\n    : undefined;\n  const modifiedLocale = {\n    emptyText: <Empty description={emptyDescription} />,\n    ...locale,\n  };\n  let spinProps: SpinProps | undefined;\n  if (typeof loading === \"boolean\") {\n    spinProps = {\n      spinning: loading,\n      indicator: <span className={cls(\"spin-loader\")} />,\n    };\n  } else if (typeof loading === \"object\") {\n    spinProps = {\n      spinning: true,\n      indicator: <span className={cls(\"spin-loader\")} />,\n      ...loading,\n    };\n  }\n  return (\n    <AntTable\n      columns={modifiedColumns}\n      loading={spinProps}\n      locale={modifiedLocale}\n      scroll={{ x: \"fit-content\", ...scroll }}\n      {...rest}\n    />\n  );\n};\n\n// Create the final component with all static properties\nexport const Table = Object.assign(InternalTable, {\n  Column: AntTable.Column,\n  ColumnGroup: AntTable.ColumnGroup,\n  SELECTION_COLUMN: AntTable.SELECTION_COLUMN,\n  EXPAND_COLUMN: AntTable.EXPAND_COLUMN,\n  SELECTION_ALL: AntTable.SELECTION_ALL,\n  SELECTION_INVERT: AntTable.SELECTION_INVERT,\n  SELECTION_NONE: AntTable.SELECTION_NONE,\n  Summary: AntTable.Summary,\n}) as typeof InternalTable & {\n  Column: typeof AntTable.Column;\n  ColumnGroup: typeof AntTable.ColumnGroup;\n  SELECTION_COLUMN: typeof AntTable.SELECTION_COLUMN;\n  EXPAND_COLUMN: typeof AntTable.EXPAND_COLUMN;\n  SELECTION_ALL: typeof AntTable.SELECTION_ALL;\n  SELECTION_INVERT: typeof AntTable.SELECTION_INVERT;\n  SELECTION_NONE: typeof AntTable.SELECTION_NONE;\n  Summary: typeof AntTable.Summary;\n};\n\nexport default Table;\n"],"names":["InternalTable","columns","locale","emptyDescription","loading","scroll","rest","cls","useCls","modifiedColumns","column","sortOrder","jsx","CaretUp","CaretDown","jsxs","Fragment","_filtered","Funnel","modifiedLocale","Empty","spinProps","AntTable","Table"],"mappings":";;;;;;AAuBA,MAAMA,IAAgB,CAAqC;AAAA,EACzD,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC,IAAS,CAAC;AAAA,EACV,GAAGC;AACL,MAA8B;AAC5B,QAAMC,IAAMC,EAAO,GACbC,IAAkBR,IACpBA,EAAQ,IAAI,CAACS,OACJ;AAAA,IACL,UAAU,CAAC,EAAE,WAAAC,QAET,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWL;AAAA,UACT;AAAA,UACAI,IACI,0BAA0BA,CAAS,KACnC;AAAA,QACN;AAAA,QAEC,UAACA,IAIEA,MAAc,WACf,gBAAAC,EAAAC,GAAA,EAAQ,QAAO,OAAA,CAAO,IAEvB,gBAAAD,EAACE,GAAU,EAAA,QAAO,OAAO,CAAA,IALvB,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,UAAC,gBAAAJ,EAAAC,GAAA,EAAQ,QAAO,OAAO,CAAA;AAAA,UAAE;AAAA,UAAC,gBAAAD,EAACE,GAAU,EAAA,QAAO,OAAO,CAAA;AAAA,QACrD,EAAA,CAAA;AAAA,MAIyB;AAAA,IAE7B;AAAA,IAGJ,YAAY,CAACG,MAET,gBAAAL,EAAC,QAAK,EAAA,WAAWL,EAAI,0BAA0B,GAC7C,UAAC,gBAAAK,EAAAM,GAAA,EAAO,QAAO,OAAA,CAAO,EACxB,CAAA;AAAA,IAGJ,GAAGR;AAAA,EACL,EACD,IACD,QACES,IAAiB;AAAA,IACrB,WAAW,gBAAAP,EAACQ,GAAM,EAAA,aAAajB,EAAkB,CAAA;AAAA,IACjD,GAAGD;AAAA,EACL;AACI,MAAAmB;AACA,SAAA,OAAOjB,KAAY,YACTiB,IAAA;AAAA,IACV,UAAUjB;AAAA,IACV,WAAY,gBAAAQ,EAAA,QAAA,EAAK,WAAWL,EAAI,aAAa,EAAG,CAAA;AAAA,EAClD,IACS,OAAOH,KAAY,aAChBiB,IAAA;AAAA,IACV,UAAU;AAAA,IACV,WAAY,gBAAAT,EAAA,QAAA,EAAK,WAAWL,EAAI,aAAa,GAAG;AAAA,IAChD,GAAGH;AAAA,EACL,IAGA,gBAAAQ;AAAA,IAACU;AAAA,IAAA;AAAA,MACC,SAASb;AAAA,MACT,SAASY;AAAA,MACT,QAAQF;AAAA,MACR,QAAQ,EAAE,GAAG,eAAe,GAAGd,EAAO;AAAA,MACrC,GAAGC;AAAA,IAAA;AAAA,EACN;AAEJ,GAGaiB,IAAQ,OAAO,OAAOvB,GAAe;AAAA,EAChD,QAAQsB,EAAS;AAAA,EACjB,aAAaA,EAAS;AAAA,EACtB,kBAAkBA,EAAS;AAAA,EAC3B,eAAeA,EAAS;AAAA,EACxB,eAAeA,EAAS;AAAA,EACxB,kBAAkBA,EAAS;AAAA,EAC3B,gBAAgBA,EAAS;AAAA,EACzB,SAASA,EAAS;AACpB,CAAC;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/Table/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  default as AntTable,\n  type ColumnType,\n  type TableProps as AntTableProps,\n  type TableRef,\n} from \"antd/es/table\";\nimport { CaretDownIcon, CaretUpIcon, FunnelIcon } from \"@bioturing/assets\";\nimport { useCls } from \"../utils\";\nimport Empty from \"../Empty/component\";\nimport { SpinProps } from \"antd/es/spin\";\nimport {\n  useState,\n  useEffect,\n  forwardRef,\n  Ref,\n  ForwardedRef,\n  useCallback,\n  useRef,\n} from \"react\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\n// Define interface with all the generic type parameters from AntTable without any\nexport interface TableProps<RecordType extends object = object>\n  extends AntTableProps<RecordType> {\n  /**\n   * Add empty description for the table\n   */\n  emptyDescription?: React.ReactNode;\n  /**\n   * Table ref\n   */\n  tableRef?: React.Ref<HTMLDivElement>;\n}\n\n// Simple wrapper component with proper generics\nconst InnerInternalTable = <RecordType extends object = object>(\n  {\n    columns,\n    locale,\n    emptyDescription,\n    loading,\n    virtual,\n    scroll: scrollProp = {},\n    ...rest\n  }: TableProps<RecordType>,\n  ref: Ref<TableRef>\n) => {\n  const cls = useCls();\n  const [scroll, setScroll] = useState<TableProps[\"scroll\"]>(\n    virtual\n      ? {}\n      : {\n          x: \"fit-content\",\n          y: \"fit-content\",\n        }\n  );\n\n  const innerRef = useRef<TableRef>(null);\n\n  useEffect(() => {\n    if (!innerRef.current) return;\n    const tbody = innerRef.current?.nativeElement.querySelector(\n      \".\" + cls(\"table-tbody\")\n    ) as HTMLElement;\n    const resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        if (entry.target) {\n          setScroll({\n            y: entry.target.clientHeight,\n            x: entry.target.clientWidth,\n          });\n        }\n      }\n    });\n    if (tbody && virtual) {\n      resizeObserver.observe(tbody);\n    }\n\n    return () => {\n      if (tbody && virtual) {\n        resizeObserver.disconnect();\n      }\n    };\n  }, [virtual, cls]);\n  const modifiedColumns = columns\n    ? columns.map((column: ColumnType<RecordType>): ColumnType<RecordType> => {\n        return {\n          sortIcon: ({ sortOrder }) => {\n            return (\n              <span\n                className={cls(\n                  \"table-column-sort-icon\",\n                  sortOrder\n                    ? `table-column-sort-icon-${sortOrder}`\n                    : `table-column-sort-icon-none`\n                )}\n              >\n                {!sortOrder ? (\n                  <>\n                    <CaretUpIcon weight=\"fill\" />{\" \"}\n                    <CaretDownIcon weight=\"fill\" />\n                  </>\n                ) : sortOrder === \"ascend\" ? (\n                  <CaretUpIcon weight=\"fill\" />\n                ) : (\n                  <CaretDownIcon weight=\"fill\" />\n                )}\n              </span>\n            );\n          },\n          filterIcon: (_filtered) => {\n            return (\n              <span className={cls(\"table-column-filter-icon\")}>\n                <FunnelIcon weight=\"fill\" />\n              </span>\n            );\n          },\n          ...column,\n        };\n      })\n    : undefined;\n  const modifiedLocale = {\n    emptyText: <Empty description={emptyDescription} />,\n    ...locale,\n  };\n  let spinProps: SpinProps | undefined;\n  if (typeof loading === \"boolean\") {\n    spinProps = {\n      spinning: loading,\n      indicator: <span className={cls(\"spin-loader\")} />,\n    };\n  } else if (typeof loading === \"object\") {\n    spinProps = {\n      spinning: true,\n      indicator: <span className={cls(\"spin-loader\")} />,\n      ...loading,\n    };\n  }\n  const callbackRef = useCallback(\n    (tableRef: TableRef) => {\n      if (tableRef) {\n        if (typeof ref === \"function\") {\n          ref(tableRef);\n        }\n        if (ref && typeof ref === \"object\" && \"current\" in ref) {\n          ref.current = tableRef;\n        }\n        innerRef.current = tableRef;\n      }\n    },\n    [ref]\n  );\n\n  return (\n    <AntTable\n      ref={callbackRef}\n      columns={modifiedColumns}\n      loading={spinProps}\n      locale={modifiedLocale}\n      virtual={virtual}\n      scroll={{ ...scroll, ...scrollProp }}\n      {...rest}\n    />\n  );\n};\n\nconst InternalTable = forwardRef(InnerInternalTable) as <\n  RecordType extends object = object\n>(\n  props: TableProps<RecordType> & { ref?: ForwardedRef<TableRef> }\n) => ReturnType<typeof InnerInternalTable>;\n\n// Create the final component with all static properties\nexport const Table = Object.assign(InternalTable, {\n  Column: AntTable.Column,\n  ColumnGroup: AntTable.ColumnGroup,\n  SELECTION_COLUMN: AntTable.SELECTION_COLUMN,\n  EXPAND_COLUMN: AntTable.EXPAND_COLUMN,\n  SELECTION_ALL: AntTable.SELECTION_ALL,\n  SELECTION_INVERT: AntTable.SELECTION_INVERT,\n  SELECTION_NONE: AntTable.SELECTION_NONE,\n  Summary: AntTable.Summary,\n}) as typeof InternalTable & {\n  Column: typeof AntTable.Column;\n  ColumnGroup: typeof AntTable.ColumnGroup;\n  SELECTION_COLUMN: typeof AntTable.SELECTION_COLUMN;\n  EXPAND_COLUMN: typeof AntTable.EXPAND_COLUMN;\n  SELECTION_ALL: typeof AntTable.SELECTION_ALL;\n  SELECTION_INVERT: typeof AntTable.SELECTION_INVERT;\n  SELECTION_NONE: typeof AntTable.SELECTION_NONE;\n  Summary: typeof AntTable.Summary;\n};\n"],"names":["InnerInternalTable","columns","locale","emptyDescription","loading","virtual","scrollProp","rest","ref","cls","useCls","scroll","setScroll","useState","innerRef","useRef","useEffect","tbody","_a","resizeObserver","entries","entry","modifiedColumns","column","sortOrder","jsx","CaretUpIcon","CaretDownIcon","jsxs","Fragment","_filtered","FunnelIcon","modifiedLocale","Empty","spinProps","callbackRef","useCallback","tableRef","AntTable","InternalTable","forwardRef","Table"],"mappings":"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"}

package/dist/components/Table/style.css

@@ -1 +1 @@
-@layer components{.ds-table-column-sort-icon{display:flex;flex-direction:column}.ds-table-column-sort-icon svg{color:var(--ds-color-text-disabled);font-size:1rem}:is(.ds-table-column-sort-icon svg):hover{color:var(--ds-color-text-secondary)}.ds-table-column-sort-icon.ds-table-column-sort-icon-none svg{font-size:.75rem}.ds-table-column-sort-icon.ds-table-column-sort-icon-none>svg:first-child{margin-bottom:-2px}.ds-table-column-sort-icon.ds-table-column-sort-icon-none>svg:last-child{margin-top:-2px}.ds-table-column-filter-icon{display:flex;flex-direction:column}.ds-table-column-filter-icon svg{color:var(--ds-color-text-disabled);font-size:.875rem}:is(.ds-table-column-filter-icon svg):hover{color:var(--ds-color-text-secondary)}.ds-table-column-filter-icon.ds-table-column-filter-icon-active svg{color:var(--ds-color-primary)}.ds-table-wrapper .ds-table-ping-left .ds-table-cell-fix-left-first:after,.ds-table-wrapper .ds-table-ping-left .ds-table-cell-fix-left-last:after{box-shadow:inset 10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper .ds-table-ping-right .ds-table-cell-fix-right-first:after,.ds-table-wrapper .ds-table-ping-right .ds-table-cell-fix-right-last:after{box-shadow:inset -10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper .ds-table-ping-right:not(.ds-table-has-fix-right) .ds-table-container:after{box-shadow:inset -10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper .ds-table-ping-left:not(.ds-table-has-fix-left) .ds-table-container:before{box-shadow:inset 10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper{display:flex;flex-direction:column}.ds-table-wrapper .ds-spin-nested-loading,.ds-table-wrapper .ds-spin-container{display:flex;flex-direction:column;flex-shrink:1;flex-grow:1;min-height:0}:is(.ds-table-wrapper .ds-spin-container) .ds-table{flex-shrink:1;flex-grow:1;min-height:0}.ds-table{display:flex;flex-direction:column}.ds-table-container{flex-shrink:1;min-height:0;display:flex;flex-direction:column}.ds-table-header{flex-shrink:0}.ds-table-body{flex-shrink:1}}
+@layer components{.ds-table-column-sort-icon{display:flex;flex-direction:column}.ds-table-column-sort-icon svg{color:var(--ds-color-text-disabled);font-size:1rem}:is(.ds-table-column-sort-icon svg):hover{color:var(--ds-color-text-secondary)}.ds-table-column-sort-icon.ds-table-column-sort-icon-none svg{font-size:.75rem}.ds-table-column-sort-icon.ds-table-column-sort-icon-none>svg:first-child{margin-bottom:-2px}.ds-table-column-sort-icon.ds-table-column-sort-icon-none>svg:last-child{margin-top:-2px}.ds-table-column-filter-icon{display:flex;flex-direction:column}.ds-table-column-filter-icon svg{color:var(--ds-color-text-disabled);font-size:.875rem}:is(.ds-table-column-filter-icon svg):hover{color:var(--ds-color-text-secondary)}.ds-table-column-filter-icon.ds-table-column-filter-icon-active svg{color:var(--ds-color-primary)}.ds-table-wrapper .ds-table-ping-left .ds-table-cell-fix-left-first:after,.ds-table-wrapper .ds-table-ping-left .ds-table-cell-fix-left-last:after{box-shadow:inset 10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper .ds-table-ping-right .ds-table-cell-fix-right-first:after,.ds-table-wrapper .ds-table-ping-right .ds-table-cell-fix-right-last:after{box-shadow:inset -10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper .ds-table-ping-right:not(.ds-table-has-fix-right) .ds-table-container:after{box-shadow:inset -10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper .ds-table-ping-left:not(.ds-table-has-fix-left) .ds-table-container:before{box-shadow:inset 10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper{display:flex;flex-direction:column}.ds-table-wrapper .ds-spin-nested-loading,.ds-table-wrapper .ds-spin-container{display:flex;flex-direction:column;flex-shrink:1;flex-grow:1;min-height:0}:is(.ds-table-wrapper .ds-spin-container) .ds-table{flex-shrink:1;flex-grow:1;min-height:0}.ds-table{display:flex;flex-direction:column}.ds-table-container{flex-shrink:1;min-height:0;display:flex;flex-direction:column}.ds-table-header{flex-shrink:0}.ds-table-body{flex-shrink:1;min-height:0;min-width:0}}

package/dist/components/utils/antdUtils.js

@@ -1,58 +1,61 @@
 import n from "antd/es/config-provider";
-import a from "antd/es/theme/useToken";
-import { useContext as i } from "react";
-import { cx as c } from "./cn.js";
-const C = () => {
-  const { getPrefixCls: o } = i(n.ConfigContext);
-  return { getPrefixCls: o };
+import c from "antd/es/theme/useToken";
+import { useContext as i, useCallback as a } from "react";
+import { cx as l } from "./cn.js";
+const b = () => {
+  const { getPrefixCls: s } = i(n.ConfigContext);
+  return { getPrefixCls: s };
 }, g = () => {
   var t;
-  return (t = a()[4]) == null ? void 0 : t.key;
-}, b = () => {
-  const { getPrefixCls: o } = i(n.ConfigContext);
-  return (...t) => c(...t).map((e) => o(e)).join(" ");
+  return (t = c()[4]) == null ? void 0 : t.key;
+}, k = () => {
+  const { getPrefixCls: s } = i(n.ConfigContext);
+  return a(
+    (...e) => l(...e).map((o) => s(o)).join(" "),
+    [s]
+  );
 };
-function f(o) {
+function f(s) {
   const t = [];
   let e = "";
-  for (const r of o)
-    r >= "A" && r <= "Z" ? (e && t.push(e), e = r.toLowerCase()) : e += r;
-  return e && t.push(e), t.length > 0 ? t : [o];
+  for (const o of s)
+    o >= "A" && o <= "Z" ? (e && t.push(e), e = o.toLowerCase()) : e += o;
+  return e && t.push(e), t.length > 0 ? t : [s];
 }
-const h = (o = "bottomLeft") => {
-  const [t, e] = f(o);
-  let r, s = "center";
+const h = (s = "bottomLeft") => {
+  const [t, e] = f(s);
+  let o, r = "center";
   if (t === "top" || t === "bottom") {
-    if (r = t, e)
+    if (o = t, e)
       switch (e) {
         case "left":
-          s = "start";
+          r = "start";
           break;
         case "right":
-          s = "end";
+          r = "end";
           break;
       }
   } else if (t === "left" || t === "right") {
-    if (r = t, e)
+    if (o = t, e)
       switch (e) {
         case "top":
-          s = "start";
+          r = "start";
           break;
         case "bottom":
-          s = "end";
+          r = "end";
           break;
       }
   } else
-    r = "bottom";
+    o = "bottom";
   return {
-    placement: r,
-    align: s
+    placement: o,
+    align: r
   };
 };
 export {
   h as parseAntdPlacement,
   g as useAntdCssVarClassname,
-  b as useCls,
-  C as useGetPrefixCls
+  k as useCls,
+  b as useGetPrefixCls
 };
 //# sourceMappingURL=antdUtils.js.map

package/dist/components/utils/antdUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"antdUtils.js","sources":["../../../src/components/utils/antdUtils.ts"],"sourcesContent":["\"use client\";\nimport { default as ConfigProvider } from \"antd/es/config-provider\";\nimport useToken from \"antd/es/theme/useToken\";\nimport { useContext } from \"react\";\nimport type { ClassValue } from \"./types\";\nimport { cx } from \"./cn\";\nimport { PopoverProps } from \"antd/es/popover\";\n\nexport const useGetPrefixCls = () => {\n  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n  return { getPrefixCls };\n};\n\n/**\n *\n * @returns the antd classname providing css variables\n */\nexport const useAntdCssVarClassname = () => {\n  const token = useToken();\n  return token[4]?.key;\n};\n\nexport const useCls = () => {\n  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n  return (...args: ClassValue[]) => {\n    return cx(...args)\n      .map((cls) => getPrefixCls(cls))\n      .join(\" \");\n  };\n};\n\nfunction splitCamelCase(text: string): string[] {\n  const result: string[] = [];\n  let currentWord = \"\";\n\n  for (const char of text) {\n    if (char >= \"A\" && char <= \"Z\") {\n      if (currentWord) {\n        result.push(currentWord);\n      }\n      currentWord = char.toLowerCase();\n    } else {\n      currentWord += char;\n    }\n  }\n\n  if (currentWord) {\n    result.push(currentWord);\n  }\n\n  return result.length > 0 ? result : [text];\n}\n\nexport const parseAntdPlacement = (\n  placement: PopoverProps[\"placement\"] = \"bottomLeft\"\n): {\n  placement: \"top\" | \"bottom\" | \"left\" | \"right\";\n  align: \"start\" | \"end\" | \"center\";\n} => {\n  const [position1, position2] = splitCamelCase(placement);\n\n  // Determine primary placement\n  let primaryPlacement: \"top\" | \"bottom\" | \"left\" | \"right\";\n  let align: \"start\" | \"end\" | \"center\" = \"center\";\n\n  // First check if it's a vertical or horizontal primary placement\n  if (position1 === \"top\" || position1 === \"bottom\") {\n    primaryPlacement = position1;\n    if (position2) {\n      switch (position2) {\n        case \"left\":\n          align = \"start\";\n          break;\n        case \"right\":\n          align = \"end\";\n          break;\n        // \"top\" or \"bottom\" as second position is invalid, defaults to center\n      }\n    }\n  } else if (position1 === \"left\" || position1 === \"right\") {\n    primaryPlacement = position1;\n    if (position2) {\n      switch (position2) {\n        case \"top\":\n          align = \"start\";\n          break;\n        case \"bottom\":\n          align = \"end\";\n          break;\n        // \"left\" or \"right\" as second position is invalid, defaults to center\n      }\n    }\n  } else {\n    // Fallback for invalid placement\n    primaryPlacement = \"bottom\";\n  }\n\n  return {\n    placement: primaryPlacement,\n    align,\n  };\n};\n"],"names":["useGetPrefixCls","getPrefixCls","useContext","ConfigProvider","useAntdCssVarClassname","_a","useToken","useCls","args","cx","cls","splitCamelCase","text","result","currentWord","char","parseAntdPlacement","placement","position1","position2","primaryPlacement","align"],"mappings":";;;;AAQO,MAAMA,IAAkB,MAAM;AACnC,QAAM,EAAE,cAAAC,EAAiB,IAAAC,EAAWC,EAAe,aAAa;AAChE,SAAO,EAAE,cAAAF,EAAa;AACxB,GAMaG,IAAyB,MAAM;;AAEnC,UAAAC,IADOC,EAAS,EACV,CAAC,MAAP,gBAAAD,EAAU;AACnB,GAEaE,IAAS,MAAM;AAC1B,QAAM,EAAE,cAAAN,EAAiB,IAAAC,EAAWC,EAAe,aAAa;AAChE,SAAO,IAAIK,MACFC,EAAG,GAAGD,CAAI,EACd,IAAI,CAACE,MAAQT,EAAaS,CAAG,CAAC,EAC9B,KAAK,GAAG;AAEf;AAEA,SAASC,EAAeC,GAAwB;AAC9C,QAAMC,IAAmB,CAAC;AAC1B,MAAIC,IAAc;AAElB,aAAWC,KAAQH;AACb,IAAAG,KAAQ,OAAOA,KAAQ,OACrBD,KACFD,EAAO,KAAKC,CAAW,GAEzBA,IAAcC,EAAK,YAAY,KAEhBD,KAAAC;AAInB,SAAID,KACFD,EAAO,KAAKC,CAAW,GAGlBD,EAAO,SAAS,IAAIA,IAAS,CAACD,CAAI;AAC3C;AAEa,MAAAI,IAAqB,CAChCC,IAAuC,iBAIpC;AACH,QAAM,CAACC,GAAWC,CAAS,IAAIR,EAAeM,CAAS;AAGnD,MAAAG,GACAC,IAAoC;AAGpC,MAAAH,MAAc,SAASA,MAAc;AAEvC,QADmBE,IAAAF,GACfC;AACF,cAAQA,GAAW;AAAA,QACjB,KAAK;AACK,UAAAE,IAAA;AACR;AAAA,QACF,KAAK;AACK,UAAAA,IAAA;AACR;AAAA,MAAA;AAAA,aAIGH,MAAc,UAAUA,MAAc;AAE/C,QADmBE,IAAAF,GACfC;AACF,cAAQA,GAAW;AAAA,QACjB,KAAK;AACK,UAAAE,IAAA;AACR;AAAA,QACF,KAAK;AACK,UAAAA,IAAA;AACR;AAAA,MAAA;AAAA;AAMa,IAAAD,IAAA;AAGd,SAAA;AAAA,IACL,WAAWA;AAAA,IACX,OAAAC;AAAA,EACF;AACF;"}
+{"version":3,"file":"antdUtils.js","sources":["../../../src/components/utils/antdUtils.ts"],"sourcesContent":["\"use client\";\nimport { default as ConfigProvider } from \"antd/es/config-provider\";\nimport useToken from \"antd/es/theme/useToken\";\nimport { useCallback, useContext } from \"react\";\nimport type { ClassValue } from \"./types\";\nimport { cx } from \"./cn\";\nimport { PopoverProps } from \"antd/es/popover\";\n\nexport const useGetPrefixCls = () => {\n  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n  return { getPrefixCls };\n};\n\n/**\n *\n * @returns the antd classname providing css variables\n */\nexport const useAntdCssVarClassname = () => {\n  const token = useToken();\n  return token[4]?.key;\n};\n\nexport const useCls = () => {\n  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n  const cls = useCallback(\n    (...args: ClassValue[]) => {\n      return cx(...args)\n        .map((cls) => getPrefixCls(cls))\n        .join(\" \");\n    },\n    [getPrefixCls]\n  );\n  return cls;\n};\n\nfunction splitCamelCase(text: string): string[] {\n  const result: string[] = [];\n  let currentWord = \"\";\n\n  for (const char of text) {\n    if (char >= \"A\" && char <= \"Z\") {\n      if (currentWord) {\n        result.push(currentWord);\n      }\n      currentWord = char.toLowerCase();\n    } else {\n      currentWord += char;\n    }\n  }\n\n  if (currentWord) {\n    result.push(currentWord);\n  }\n\n  return result.length > 0 ? result : [text];\n}\n\nexport const parseAntdPlacement = (\n  placement: PopoverProps[\"placement\"] = \"bottomLeft\"\n): {\n  placement: \"top\" | \"bottom\" | \"left\" | \"right\";\n  align: \"start\" | \"end\" | \"center\";\n} => {\n  const [position1, position2] = splitCamelCase(placement);\n\n  // Determine primary placement\n  let primaryPlacement: \"top\" | \"bottom\" | \"left\" | \"right\";\n  let align: \"start\" | \"end\" | \"center\" = \"center\";\n\n  // First check if it's a vertical or horizontal primary placement\n  if (position1 === \"top\" || position1 === \"bottom\") {\n    primaryPlacement = position1;\n    if (position2) {\n      switch (position2) {\n        case \"left\":\n          align = \"start\";\n          break;\n        case \"right\":\n          align = \"end\";\n          break;\n        // \"top\" or \"bottom\" as second position is invalid, defaults to center\n      }\n    }\n  } else if (position1 === \"left\" || position1 === \"right\") {\n    primaryPlacement = position1;\n    if (position2) {\n      switch (position2) {\n        case \"top\":\n          align = \"start\";\n          break;\n        case \"bottom\":\n          align = \"end\";\n          break;\n        // \"left\" or \"right\" as second position is invalid, defaults to center\n      }\n    }\n  } else {\n    // Fallback for invalid placement\n    primaryPlacement = \"bottom\";\n  }\n\n  return {\n    placement: primaryPlacement,\n    align,\n  };\n};\n"],"names":["useGetPrefixCls","getPrefixCls","useContext","ConfigProvider","useAntdCssVarClassname","_a","useToken","useCls","useCallback","args","cx","cls","splitCamelCase","text","result","currentWord","char","parseAntdPlacement","placement","position1","position2","primaryPlacement","align"],"mappings":";;;;AAQO,MAAMA,IAAkB,MAAM;AACnC,QAAM,EAAE,cAAAC,EAAiB,IAAAC,EAAWC,EAAe,aAAa;AAChE,SAAO,EAAE,cAAAF,EAAa;AACxB,GAMaG,IAAyB,MAAM;;AAEnC,UAAAC,IADOC,EAAS,EACV,CAAC,MAAP,gBAAAD,EAAU;AACnB,GAEaE,IAAS,MAAM;AAC1B,QAAM,EAAE,cAAAN,EAAiB,IAAAC,EAAWC,EAAe,aAAa;AASzD,SARKK;AAAA,IACV,IAAIC,MACKC,EAAG,GAAGD,CAAI,EACd,IAAI,CAACE,MAAQV,EAAaU,CAAG,CAAC,EAC9B,KAAK,GAAG;AAAA,IAEb,CAACV,CAAY;AAAA,EACf;AAEF;AAEA,SAASW,EAAeC,GAAwB;AAC9C,QAAMC,IAAmB,CAAC;AAC1B,MAAIC,IAAc;AAElB,aAAWC,KAAQH;AACb,IAAAG,KAAQ,OAAOA,KAAQ,OACrBD,KACFD,EAAO,KAAKC,CAAW,GAEzBA,IAAcC,EAAK,YAAY,KAEhBD,KAAAC;AAInB,SAAID,KACFD,EAAO,KAAKC,CAAW,GAGlBD,EAAO,SAAS,IAAIA,IAAS,CAACD,CAAI;AAC3C;AAEa,MAAAI,IAAqB,CAChCC,IAAuC,iBAIpC;AACH,QAAM,CAACC,GAAWC,CAAS,IAAIR,EAAeM,CAAS;AAGnD,MAAAG,GACAC,IAAoC;AAGpC,MAAAH,MAAc,SAASA,MAAc;AAEvC,QADmBE,IAAAF,GACfC;AACF,cAAQA,GAAW;AAAA,QACjB,KAAK;AACK,UAAAE,IAAA;AACR;AAAA,QACF,KAAK;AACK,UAAAA,IAAA;AACR;AAAA,MAAA;AAAA,aAIGH,MAAc,UAAUA,MAAc;AAE/C,QADmBE,IAAAF,GACfC;AACF,cAAQA,GAAW;AAAA,QACjB,KAAK;AACK,UAAAE,IAAA;AACR;AAAA,QACF,KAAK;AACK,UAAAA,IAAA;AACR;AAAA,MAAA;AAAA;AAMa,IAAAD,IAAA;AAGd,SAAA;AAAA,IACL,WAAWA;AAAA,IACX,OAAAC;AAAA,EACF;AACF;"}

package/dist/index.d.ts

@@ -160,6 +160,7 @@ import { RcFile } from 'antd/es/upload';
 import * as React_2 from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
+import { Ref } from 'react';
 import { RefAttributes } from 'react';
 import { RefObject } from 'react';
 import { RefSelectProps } from 'antd';
@@ -200,6 +201,7 @@ import { TableColumnType } from 'antd';
 import { TablePaginationConfig } from 'antd';
 import { TableProps } from 'antd';
 import { TableProps as TableProps_3 } from 'antd/es/table';
+import { TableRef } from 'antd/es/table';
 import { TabPaneProps } from 'antd';
 import { Tabs } from 'antd';
 import { TabsProps } from 'antd';
@@ -917,7 +919,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 +942,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 }
@@ -1067,6 +1109,8 @@ declare type IconButtonOwnProps<E extends ElementType = ElementType> = WithHrefP
 
 export declare type IconButtonProps<E extends ElementType = "button"> = IconButtonOwnProps<E> & Omit<ComponentPropsWithoutRef<E>, keyof IconButtonOwnProps<E>>;
 
+declare const InnerInternalTable: <RecordType extends object = object>({ columns, locale, emptyDescription, loading, virtual, scroll: scrollProp, ...rest }: TableProps_2<RecordType>, ref: Ref<TableRef>) => JSX.Element;
+
 declare function InnerToast({ toast, }: {
     toast: Toast_2.Root.ToastObject<ToastData>;
 }): JSX.Element;
@@ -1100,7 +1144,9 @@ export declare interface InputProps extends InputProps_2 {
 declare interface InternalFormProps<Values = any> extends React_2.ComponentProps<typeof default_8<Values>> {
 }
 
-declare const InternalTable: <RecordType extends object = object>({ columns, locale, emptyDescription, loading, scroll, ...rest }: TableProps_2<RecordType>) => JSX.Element;
+declare const InternalTable: <RecordType extends object = object>(props: TableProps_2<RecordType> & {
+    ref?: ForwardedRef<TableRef>;
+}) => ReturnType<typeof InnerInternalTable>;
 
 declare type IntrinsicElement = keyof JSX_2.IntrinsicElements | JSXElementConstructor<any>;
 
@@ -1299,7 +1345,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 +1402,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 {
@@ -2108,6 +2168,10 @@ declare interface TableProps_2<RecordType extends object = object> extends Table
      * Add empty description for the table
      */
     emptyDescription?: React.ReactNode;
+    /**
+     * Table ref
+     */
+    tableRef?: React.Ref<HTMLDivElement>;
 }
 
 export { TabPaneProps }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bioturing/components",
-  "version": "0.15.2",
+  "version": "0.15.4",
   "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",