@bioturing/components 0.38.0 → 0.39.1

package/dist/components/dropdown-menu/useDropdownMenu.js

@@ -1,38 +1,37 @@
-import { jsx as t, jsxs as D } from "react/jsx-runtime";
-import { useCallback as m, useMemo as S } from "react";
-import { DropdownMenuItem as k } from "./item.js";
-import { DropdownMenuDivider as I } from "./divider.js";
-import { Menu as b } from "@base-ui-components/react";
-import { Command as L } from "../cmdk/index.js";
+import { jsx as i, jsxs as w } from "react/jsx-runtime";
+import { useCallback as m, useMemo as L } from "react";
+import { DropdownMenuItem as I } from "./item.js";
+import { DropdownMenuDivider as j } from "./divider.js";
+import { Menu as v, Combobox as f } from "@base-ui-components/react";
 import './style.css';/* empty css          */
-import { useCls as j } from "../utils/antdUtils.js";
-import { reactNodeToString as T } from "../utils/reactToString.js";
+import { useCls as k } from "../utils/antdUtils.js";
+import { reactNodeToString as x } from "../utils/reactToString.js";
 import { clsx as d } from "../utils/cn.js";
-const U = ({
-  items: f,
-  inCombobox: u = !1,
+const J = ({
+  items: s,
+  inCombobox: n = !1,
   classNames: o = {},
-  selectedItemKeys: s,
-  keepOpenOnSelect: h,
-  showCheckbox: a = !1,
-  getItemKeywords: g = (p) => [String(p.key), T(p.label)],
-  onOpenChange: G,
+  selectedItemKeys: h,
+  keepOpenOnSelect: a,
+  showCheckbox: G = !1,
+  getItemKeywords: b = (l) => [String(l.key), x(l.label)],
+  onOpenChange: g,
   itemRender: y,
   itemLabelRender: M
 }) => {
-  const p = j(), l = m(
-    (e, r, i) => e.type === "item" ? /* @__PURE__ */ t(
-      k,
+  const l = k(), p = m(
+    (e, r, t) => e.type === "item" ? /* @__PURE__ */ i(
+      I,
       {
         item: e,
-        inCombobox: u,
-        selected: s?.includes(e.key),
+        inCombobox: n,
+        selected: h?.includes(e.key),
         afterSelect: () => {
-          h || G?.(!1);
+          a || g?.(!1);
         },
         itemRender: y,
-        showCheckbox: a,
-        getItemKeywords: g,
+        showCheckbox: G,
+        getItemKeywords: b,
         itemLabelRender: M,
         classNames: {
           item: o.item,
@@ -40,85 +39,90 @@ const U = ({
           itemSuffix: o.itemSuffix
         }
       },
-      r + "-" + i
-    ) : e.type === "divider" ? /* @__PURE__ */ t(
-      I,
+      r + "-" + t
+    ) : e.type === "divider" ? /* @__PURE__ */ i(
+      j,
       {
-        inCombobox: u,
+        inCombobox: n,
         className: o?.divider
       },
-      r + "-" + i
+      r + "-" + t
     ) : null,
     [
       o,
       y,
-      G,
-      u,
-      h,
-      s,
-      a,
       g,
+      n,
+      a,
+      h,
+      G,
+      b,
       M
     ]
-  ), v = m(
-    (e, r) => /* @__PURE__ */ D(
-      b.Group,
+  ), D = m(
+    (e, r) => /* @__PURE__ */ w(
+      v.Group,
       {
-        className: d(p("dropdown-menu-group"), o?.group),
+        className: d(l("dropdown-menu-group"), o?.group),
         children: [
-          e.label && /* @__PURE__ */ t(
-            b.GroupLabel,
+          e.label && /* @__PURE__ */ i(
+            v.GroupLabel,
             {
               className: d(
-                p("dropdown-menu-header"),
+                l("dropdown-menu-header"),
                 o?.groupLabel
               ),
-              children: /* @__PURE__ */ t("span", { children: e.label })
+              children: /* @__PURE__ */ i("span", { children: e.label })
             }
           ),
-          e.items.map((i, n) => l(i, r, n))
+          e.items.map((t, u) => p(t, r, u))
         ]
       },
       "group" + r
     ),
-    [p, o, l]
-  ), w = m(
-    (e, r) => e.label ? /* @__PURE__ */ t(
-      L.Group,
+    [l, o, p]
+  ), S = m(
+    (e, r) => e.label ? /* @__PURE__ */ w(
+      f.Group,
       {
-        className: d(p("dropdown-menu-group"), o?.group),
-        heading: /* @__PURE__ */ t(
-          "div",
-          {
-            className: d(
-              p("dropdown-menu-header"),
-              o?.groupLabel
-            ),
-            children: /* @__PURE__ */ t("span", { children: e.label })
-          }
-        ),
-        children: e.items.map((i, n) => l(i, r, n))
+        className: d(l("dropdown-menu-group"), o?.group),
+        items: e.items,
+        children: [
+          /* @__PURE__ */ i(
+            f.GroupLabel,
+            {
+              className: d(
+                l("dropdown-menu-header"),
+                o?.groupLabel
+              ),
+              children: /* @__PURE__ */ i("span", { children: e.label })
+            }
+          ),
+          /* @__PURE__ */ i(f.Collection, { children: (t, u) => p(t, r, u) })
+        ]
       },
       "group" + r
-    ) : e.items.map((i, n) => l(i, r, n)),
-    [p, o, l]
+    ) : e.items.map((t, u) => p(t, r, u)),
+    [l, o, p]
   );
   return {
-    itemGroups: S(
-      () => f.reduce((e, r) => (e.length === 0 && r.type !== "header" && e.push({
+    itemGroups: L(
+      () => s.reduce((e, r) => (e.length === 0 && r.type !== "header" && e.push({
         label: null,
         items: []
       }), r.type === "header" ? e.push({
         label: r.title,
         items: []
-      }) : (r.type === "item" || r.type === "divider") && e.length > 0 && e[e.length - 1].items.push(r), e), []),
-      [f]
+      }) : (r.type === "item" || r.type === "divider") && e.length > 0 && e[e.length - 1].items.push({
+        ...r
+      }), e), []),
+      [s]
     ),
-    renderMenuItem: l,
-    renderGroup: u ? w : v
+    renderMenuItem: p,
+    renderGroup: n ? S : D
   };
 };
 export {
-  U as useDropdownMenu
+  J as useDropdownMenu
 };
 //# sourceMappingURL=useDropdownMenu.js.map

package/dist/components/dropdown-menu/useDropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDropdownMenu.js","sources":["../../../src/components/dropdown-menu/useDropdownMenu.tsx"],"sourcesContent":["import { useMemo, useCallback } from \"react\";\nimport { DropdownMenuItemType, DropdownMenuGroup } from \"./types\";\nimport { DropdownMenuItem } from \"./item\";\nimport { DropdownMenuDivider } from \"./divider\";\nimport { reactNodeToString, clsx, useCls } from \"../utils\";\nimport { Menu } from \"@base-ui-components/react\";\nimport { Command } from \"../cmdk\";\n\nimport \"./style.css\";\n\nexport interface UseDropdownMenuProps {\n  /**\n   * Callback function to handle the open state change of the dropdown menu.\n   */\n  onOpenChange?: (open: boolean) => void;\n  items: DropdownMenuItemType[];\n  inCombobox?: boolean;\n  classNames?: {\n    item?: string;\n    itemIcon?: string;\n    itemSuffix?: string;\n    group?: string;\n    groupLabel?: string;\n    divider?: 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   * Custom render function for menu item labels\n   */\n  itemLabelRender?: (\n    item: DropdownMenuItemType & { type: \"item\" },\n    props: React.HTMLAttributes<HTMLElement>\n  ) => React.ReactElement;\n  /**\n   * Whether to keep the dropdown open when an item is selected\n   * @default false\n   */\n  keepOpenOnSelect?: boolean;\n  /**\n   * Control the highlighted state of the menu item\n   */\n  highlightedItemKey?: React.Key;\n  /**\n   * Control the selected state of the menu item\n   */\n  selectedItemKeys?: React.Key[];\n  /**\n   * Whether to show checkbox\n   * @default false\n   */\n  showCheckbox?: boolean;\n  /**\n   * Function to extract keywords from the item for search filtering\n   * @default (item) => [String(item.key), reactNodeToString(item.label)]\n   */\n  getItemKeywords?: (item: DropdownMenuItemType & { type: \"item\" }) => string[];\n}\n\nexport const useDropdownMenu = ({\n  items,\n  inCombobox = false,\n  classNames = {},\n  selectedItemKeys,\n  keepOpenOnSelect,\n  showCheckbox = false,\n  getItemKeywords = (item) => [String(item.key), reactNodeToString(item.label)],\n  onOpenChange,\n  itemRender,\n  itemLabelRender,\n}: UseDropdownMenuProps) => {\n  const cls = useCls();\n  const renderMenuItem = useCallback(\n    (item: DropdownMenuItemType, i: number, j: number) => {\n      if (item.type === \"item\") {\n        return (\n          <DropdownMenuItem\n            key={i + \"-\" + j}\n            item={item}\n            inCombobox={inCombobox}\n            selected={selectedItemKeys?.includes(item.key)}\n            afterSelect={() => {\n              if (!keepOpenOnSelect) onOpenChange?.(false);\n            }}\n            itemRender={itemRender}\n            showCheckbox={showCheckbox}\n            getItemKeywords={getItemKeywords}\n            itemLabelRender={itemLabelRender}\n            classNames={{\n              item: classNames.item,\n              itemIcon: classNames.itemIcon,\n              itemSuffix: classNames.itemSuffix,\n            }}\n          />\n        );\n      } else if (item.type === \"divider\") {\n        return (\n          <DropdownMenuDivider\n            key={i + \"-\" + j}\n            inCombobox={inCombobox}\n            className={classNames?.divider}\n          />\n        );\n      }\n      return null;\n    },\n    [\n      classNames,\n      itemRender,\n      onOpenChange,\n      inCombobox,\n      keepOpenOnSelect,\n      selectedItemKeys,\n      showCheckbox,\n      getItemKeywords,\n      itemLabelRender,\n    ]\n  );\n\n  const renderGroup = useCallback(\n    (group: DropdownMenuGroup, index: number) => (\n      <Menu.Group\n        key={\"group\" + index}\n        className={clsx(cls(\"dropdown-menu-group\"), classNames?.group)}\n      >\n        {group.label && (\n          <Menu.GroupLabel\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) => renderMenuItem(item, index, j))}\n      </Menu.Group>\n    ),\n    [cls, classNames, renderMenuItem]\n  );\n\n  const renderGroupCombobox = useCallback(\n    (group: DropdownMenuGroup, index: number) =>\n      group.label ? (\n        <Command.Group\n          key={\"group\" + index}\n          className={clsx(cls(\"dropdown-menu-group\"), classNames?.group)}\n          heading={\n            <div\n              className={clsx(\n                cls(\"dropdown-menu-header\"),\n                classNames?.groupLabel\n              )}\n            >\n              <span>{group.label}</span>\n            </div>\n          }\n        >\n          {group.items.map((item, j) => renderMenuItem(item, index, j))}\n        </Command.Group>\n      ) : (\n        group.items.map((item, j) => renderMenuItem(item, index, j))\n      ),\n    [cls, classNames, renderMenuItem]\n  );\n\n  const itemGroups = useMemo(\n    () =>\n      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    [items]\n  );\n  return {\n    itemGroups,\n    renderMenuItem,\n    renderGroup: inCombobox ? renderGroupCombobox : renderGroup,\n  };\n};\n"],"names":["useDropdownMenu","items","inCombobox","classNames","selectedItemKeys","keepOpenOnSelect","showCheckbox","getItemKeywords","item","reactNodeToString","onOpenChange","itemRender","itemLabelRender","cls","useCls","renderMenuItem","useCallback","i","j","jsx","DropdownMenuItem","DropdownMenuDivider","renderGroup","group","index","jsxs","Menu","clsx","renderGroupCombobox","Command","useMemo","acc","current"],"mappings":"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"}
+{"version":3,"file":"useDropdownMenu.js","sources":["../../../src/components/dropdown-menu/useDropdownMenu.tsx"],"sourcesContent":["import { useMemo, useCallback } from \"react\";\nimport { DropdownMenuItemType, DropdownMenuGroup } from \"./types\";\nimport { DropdownMenuItem } from \"./item\";\nimport { DropdownMenuDivider } from \"./divider\";\nimport { reactNodeToString, clsx, useCls } from \"../utils\";\nimport { Combobox, Menu } from \"@base-ui-components/react\";\n\nimport \"./style.css\";\n\nexport interface UseDropdownMenuProps {\n  /**\n   * Callback function to handle the open state change of the dropdown menu.\n   */\n  onOpenChange?: (open: boolean) => void;\n  items: DropdownMenuItemType[];\n  inCombobox?: boolean;\n  classNames?: {\n    item?: string;\n    itemIcon?: string;\n    itemSuffix?: string;\n    group?: string;\n    groupLabel?: string;\n    divider?: 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   * Custom render function for menu item labels\n   */\n  itemLabelRender?: (\n    item: DropdownMenuItemType & { type: \"item\" },\n    props: React.HTMLAttributes<HTMLElement>\n  ) => React.ReactElement;\n  /**\n   * Whether to keep the dropdown open when an item is selected\n   * @default false\n   */\n  keepOpenOnSelect?: boolean;\n  /**\n   * Control the highlighted state of the menu item\n   */\n  highlightedItemKey?: React.Key;\n  /**\n   * Control the selected state of the menu item\n   */\n  selectedItemKeys?: React.Key[];\n  /**\n   * Whether to show checkbox\n   * @default false\n   */\n  showCheckbox?: boolean;\n  /**\n   * Function to extract keywords from the item for search filtering\n   * @default (item) => [String(item.key), reactNodeToString(item.label)]\n   */\n  getItemKeywords?: (item: DropdownMenuItemType & { type: \"item\" }) => string[];\n}\n\nexport const useDropdownMenu = ({\n  items,\n  inCombobox = false,\n  classNames = {},\n  selectedItemKeys,\n  keepOpenOnSelect,\n  showCheckbox = false,\n  getItemKeywords = (item) => [String(item.key), reactNodeToString(item.label)],\n  onOpenChange,\n  itemRender,\n  itemLabelRender,\n}: UseDropdownMenuProps) => {\n  const cls = useCls();\n  const renderMenuItem = useCallback(\n    (item: DropdownMenuItemType, i: number, j: number) => {\n      if (item.type === \"item\") {\n        return (\n          <DropdownMenuItem\n            key={i + \"-\" + j}\n            item={item}\n            inCombobox={inCombobox}\n            selected={selectedItemKeys?.includes(item.key)}\n            afterSelect={() => {\n              if (!keepOpenOnSelect) onOpenChange?.(false);\n            }}\n            itemRender={itemRender}\n            showCheckbox={showCheckbox}\n            getItemKeywords={getItemKeywords}\n            itemLabelRender={itemLabelRender}\n            classNames={{\n              item: classNames.item,\n              itemIcon: classNames.itemIcon,\n              itemSuffix: classNames.itemSuffix,\n            }}\n          />\n        );\n      } else if (item.type === \"divider\") {\n        return (\n          <DropdownMenuDivider\n            key={i + \"-\" + j}\n            inCombobox={inCombobox}\n            className={classNames?.divider}\n          />\n        );\n      }\n      return null;\n    },\n    [\n      classNames,\n      itemRender,\n      onOpenChange,\n      inCombobox,\n      keepOpenOnSelect,\n      selectedItemKeys,\n      showCheckbox,\n      getItemKeywords,\n      itemLabelRender,\n    ]\n  );\n\n  const renderGroup = useCallback(\n    (group: DropdownMenuGroup, index: number) => (\n      <Menu.Group\n        key={\"group\" + index}\n        className={clsx(cls(\"dropdown-menu-group\"), classNames?.group)}\n      >\n        {group.label && (\n          <Menu.GroupLabel\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) => renderMenuItem(item, index, j))}\n      </Menu.Group>\n    ),\n    [cls, classNames, renderMenuItem]\n  );\n\n  const renderGroupCombobox = useCallback(\n    (group: DropdownMenuGroup, index: number) =>\n      group.label ? (\n        <Combobox.Group\n          key={\"group\" + index}\n          className={clsx(cls(\"dropdown-menu-group\"), classNames?.group)}\n          items={group.items}\n        >\n          <Combobox.GroupLabel\n            className={clsx(\n              cls(\"dropdown-menu-header\"),\n              classNames?.groupLabel\n            )}\n          >\n            <span>{group.label}</span>\n          </Combobox.GroupLabel>\n          <Combobox.Collection>\n            {(item, i) => renderMenuItem(item, index, i)}\n          </Combobox.Collection>\n        </Combobox.Group>\n      ) : (\n        group.items.map((item, j) => renderMenuItem(item, index, j))\n      ),\n    [cls, classNames, renderMenuItem]\n  );\n\n  const itemGroups = useMemo(\n    () =>\n      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({\n            ...current,\n          });\n        }\n        // Skip dividers\n        return acc;\n      }, []),\n    [items]\n  );\n  return {\n    itemGroups,\n    renderMenuItem,\n    renderGroup: inCombobox ? renderGroupCombobox : renderGroup,\n  };\n};\n"],"names":["useDropdownMenu","items","inCombobox","classNames","selectedItemKeys","keepOpenOnSelect","showCheckbox","getItemKeywords","item","reactNodeToString","onOpenChange","itemRender","itemLabelRender","cls","useCls","renderMenuItem","useCallback","i","j","jsx","DropdownMenuItem","DropdownMenuDivider","renderGroup","group","index","jsxs","Menu","clsx","renderGroupCombobox","Combobox","useMemo","acc","current"],"mappings":"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"}

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

@@ -95,6 +95,18 @@ export interface PopupPanelProps extends Omit<React.ComponentPropsWithRef<"div">
      * Callback function when the placement changes
      */
     onPlacementChange?: (placement: PopoverProps["placement"]) => void;
+    /**
+     * Props to pass to the positioner
+     */
+    positionerProps?: Popover.Positioner.Props;
+    /**
+     * Props to pass to the trigger
+     */
+    triggerProps?: Popover.Trigger.Props;
+    /**
+     * Props to pass to the portal
+     */
+    portalProps?: Popover.Portal.Props;
 }
-export declare const PopupPanel: ({ children, placement, openOnHover, open: outsideOpen, onOpenChange: outsideOnOpenChange, content, title, trigger, className, anchor, beforeCloseButton, afterCloseButton, afterTitle, size, footer, defaultOpen, resizable, draggable, maintainAspectRatio, classNames, modal, closeOnClickOutside, onPlacementChange, ...rest }: PopupPanelProps) => import("react/jsx-runtime").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, draggable, maintainAspectRatio, classNames, modal, closeOnClickOutside, onPlacementChange, positionerProps, triggerProps, portalProps, ...rest }: PopupPanelProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/popup-panel/component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAW5D,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAMpD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAK7C,OAAO,aAAa,CAAC;AAGrB,MAAM,WAAW,eACf,SAAQ,IAAI,CACR,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAClC,OAAO,GAAG,SAAS,GAAG,UAAU,CACjC,EACD,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC;IACtC,qDAAqD;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC;IAClE,2DAA2D;IAC3D,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC,+CAA+C;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iDAAiD;IACjD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iDAAiD;IACjD,YAAY,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;IAClD,gDAAgD;IAChD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,8CAA8C;IAC9C;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC5B,sDAAsD;IACtD,MAAM,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC5C,iDAAiD;IACjD,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,yCAAyC;IACzC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC;;;OAGG;IACH,MAAM,CAAC,EACH,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACxD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;IACF;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACpC;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACpE;AAED,eAAO,MAAM,UAAU,GAAI,mUAyBxB,eAAe,4CA+MjB,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/popup-panel/component.tsx"],"names":[],"mappings":"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"}

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

@@ -1,86 +1,90 @@
 "use client";
 import { jsx as e, jsxs as c } from "react/jsx-runtime";
 import { Popover as a } from "@base-ui-components/react/popover";
-import { X as Y } from "@bioturing/assets";
-import { useMemo as Z, useRef as S, useState as A, useEffect as _, useCallback as B } from "react";
-import { Stack as ee } from "../stack/index.js";
-import { PopupPanelSize as re } from "./constants.js";
+import { mergeProps as S } from "@base-ui-components/react";
+import { X as re } from "@bioturing/assets";
+import { useMemo as te, useRef as A, useState as x, useEffect as ne, useCallback as oe } from "react";
+import { Stack as ie } from "../stack/index.js";
+import { PopupPanelSize as ae } from "./constants.js";
 import './style.css';/* empty css          */
-import { anchorToResizeHandles as te } from "./utils.js";
-import { parseAntdPlacement as ne, buildAntdPlacement as oe } from "../utils/placement.js";
-import { useDraggable as ie } from "../hooks/useDraggable.js";
-import { Resizable as ae } from "../resizable/component.js";
-import { useControlledState as pe } from "../hooks/useControlledState.js";
-import { useCls as le } from "../utils/antdUtils.js";
-import { useTheme as se } from "../theme-provider/context/themeStore.js";
+import { anchorToResizeHandles as pe } from "./utils.js";
+import { parseAntdPlacement as se, buildAntdPlacement as le } from "../utils/placement.js";
+import { useDraggable as ce } from "../hooks/useDraggable.js";
+import { Resizable as ue } from "../resizable/component.js";
+import { useControlledState as de } from "../hooks/useControlledState.js";
+import { useCls as me } from "../utils/antdUtils.js";
+import { useTheme as fe } from "../theme-provider/context/themeStore.js";
 import { clsx as p } from "../utils/cn.js";
-import { IconButton as ce } from "../icon-button/component.js";
-const Ae = ({
-  children: x,
-  placement: z,
-  openOnHover: H = !1,
-  open: k,
-  onOpenChange: E,
-  content: I,
+import { IconButton as ge } from "../icon-button/component.js";
+const Ie = ({
+  children: z,
+  placement: H,
+  openOnHover: k = !1,
+  open: E,
+  onOpenChange: I,
+  content: K,
   title: h,
-  trigger: K = "click",
-  className: T,
-  anchor: j,
+  trigger: T = "click",
+  className: j,
+  anchor: M,
   beforeCloseButton: N,
   afterCloseButton: w,
   afterTitle: b,
   size: P = "medium",
   footer: u,
-  defaultOpen: M = !1,
+  defaultOpen: D = !1,
   resizable: y = !1,
-  draggable: D = !1,
-  maintainAspectRatio: F = !1,
+  draggable: F = !1,
+  maintainAspectRatio: U = !1,
   classNames: n,
-  modal: U = !1,
-  closeOnClickOutside: V = !0,
+  modal: V = !1,
+  closeOnClickOutside: X = !0,
   onPlacementChange: v,
-  ...X
+  positionerProps: $ = {},
+  triggerProps: q = {},
+  portalProps: G = {},
+  ...J
 }) => {
-  const [R, C] = pe(
-    k,
+  const [R, C] = de(
     E,
-    M
+    I,
+    D
     // Always provide a default value to prevent undefined
-  ), r = le(), { className: $ } = se(), d = ne(z), O = Z(() => /* @__PURE__ */ e(Y, { size: 16 }), []), f = S(d.side), m = S(d.align), [q, G] = A(0), [s, J] = A(
+  ), r = me(), { className: L } = fe(), d = se(H), O = te(() => /* @__PURE__ */ e(re, { size: 16 }), []), m = A(d.side), f = A(d.align), [Q, W] = x(0), [l, Y] = x(
     null
   );
-  _(() => {
-    if (!s || !R) return;
-    const i = new MutationObserver((l) => {
+  ne(() => {
+    if (!l || !R) return;
+    const i = new MutationObserver((s) => {
       let g = !1;
-      if (l.forEach((t) => {
+      if (s.forEach((t) => {
         if (t.type === "attributes" && t.attributeName === "data-side") {
-          const o = s.getAttribute(t.attributeName);
-          o && o !== f.current && (f.current = o, g = !0);
+          const o = l.getAttribute(t.attributeName);
+          o && o !== m.current && (m.current = o, g = !0);
         }
         if (t.type === "attributes" && t.attributeName === "data-align") {
-          const o = s.getAttribute(t.attributeName);
-          o && o !== m.current && (m.current = o, g = !0);
+          const o = l.getAttribute(t.attributeName);
+          o && o !== f.current && (f.current = o, g = !0);
         }
       }), g) {
-        const t = oe({
-          side: f.current,
-          align: m.current
+        const t = le({
+          side: m.current,
+          align: f.current
         });
-        G((o) => o + 1), v && v(t);
+        W((o) => o + 1), v && v(t);
       }
     });
-    return i.observe(s, {
+    return i.observe(l, {
       attributes: !0,
       attributeFilter: ["data-side", "data-align"],
       attributeOldValue: !0
     }), () => {
       i.disconnect();
     };
-  }, [v, R, s]);
-  const L = B(() => /* @__PURE__ */ c("div", { className: p(r("popup-panel-header"), n?.header), children: [
+  }, [v, R, l]);
+  const Z = oe(() => /* @__PURE__ */ c("div", { className: p(r("popup-panel-header"), n?.header), children: [
     /* @__PURE__ */ c(
-      ee,
+      ie,
       {
         align: "center",
         gap: 8,
@@ -97,7 +101,7 @@ const Ae = ({
             /* @__PURE__ */ e(
               a.Close,
               {
-                render: /* @__PURE__ */ e(ce, { children: O })
+                render: /* @__PURE__ */ e(ge, { children: O })
               }
             ),
             w
@@ -115,75 +119,78 @@ const Ae = ({
     n?.title,
     O,
     h
-  ]), { ref: Q } = ie(D), W = /* @__PURE__ */ c(
+  ]), { ref: _ } = ce(F), B = /* @__PURE__ */ c(
     a.Popup,
     {
       className: p(
         r("popup-panel"),
         r(`popup-panel-size-${P}`),
-        T,
+        j,
         n?.popup
       ),
-      ref: Q,
+      ref: _,
       children: [
-        h && L(),
-        /* @__PURE__ */ e("div", { className: p(r("popup-panel-content"), n?.content), children: /* @__PURE__ */ e("div", { className: r("popup-panel-content-inner"), children: I }) }),
+        h && Z(),
+        /* @__PURE__ */ e("div", { className: p(r("popup-panel-content"), n?.content), children: /* @__PURE__ */ e("div", { className: r("popup-panel-content-inner"), children: K }) }),
         u && /* @__PURE__ */ e("div", { className: p(r("popup-panel-footer"), n?.footer), children: typeof u == "function" ? u({ close: () => C(!1) }) : u })
       ]
     }
-  );
+  ), ee = {
+    ref: Y,
+    className: p(r("popup-panel-root"), L, n?.root),
+    side: d.side,
+    align: d.align,
+    sideOffset: 4,
+    anchor: M,
+    style: {
+      "--size-width": P ? ae[P] : void 0
+    },
+    render: ({ children: i, onDragEnd: s, onDragStart: g, ...t }) => y ? /* @__PURE__ */ e(
+      ue,
+      {
+        resizable: y,
+        resetKey: Q,
+        maintainAspectRatio: U,
+        classNames: {
+          resizeHandle: n?.resizeHandle
+        },
+        handles: pe(
+          m.current,
+          f.current
+        ),
+        ...t,
+        children: i
+      }
+    ) : /* @__PURE__ */ e("div", { ...t, children: i })
+  };
   return /* @__PURE__ */ c(
     a.Root,
     {
-      openOnHover: K === "hover" ? !0 : H,
       open: R,
-      onOpenChange: (i, l) => {
-        (l.reason === "outside-press" || l.reason === "focus-out") && !V || C(i, l);
+      onOpenChange: (i, s) => {
+        (s.reason === "outside-press" || s.reason === "focus-out") && !X || C(i, s);
       },
-      modal: U,
-      ...X,
+      modal: V,
+      ...J,
       children: [
         /* @__PURE__ */ e(
           a.Trigger,
           {
-            render: x,
-            className: p(r("popup-panel-trigger"), n?.trigger)
+            ...S(
+              {
+                render: z,
+                className: p(r("popup-panel-trigger"), n?.trigger),
+                openOnHover: T === "hover" ? !0 : k
+              },
+              q
+            )
           }
         ),
-        /* @__PURE__ */ e(a.Portal, { children: /* @__PURE__ */ e(
+        /* @__PURE__ */ e(a.Portal, { ...G, children: /* @__PURE__ */ e(
           a.Positioner,
           {
-            ref: J,
-            className: p(
-              r("popup-panel-root"),
-              $,
-              n?.root
-            ),
-            side: d.side,
-            align: d.align,
-            sideOffset: 4,
-            anchor: j,
-            style: {
-              "--size-width": P ? re[P] : void 0
-            },
-            render: ({ children: i, onDragEnd: l, onDragStart: g, ...t }) => y ? /* @__PURE__ */ e(
-              ae,
-              {
-                resizable: y,
-                resetKey: q,
-                maintainAspectRatio: F,
-                classNames: {
-                  resizeHandle: n?.resizeHandle
-                },
-                handles: te(
-                  f.current,
-                  m.current
-                ),
-                ...t,
-                children: i
-              }
-            ) : /* @__PURE__ */ e("div", { ...t, children: i }),
-            children: W
+            ...S(ee, $),
+            children: B
           }
         ) })
       ]
@@ -191,6 +198,6 @@ const Ae = ({
   );
 };
 export {
-  Ae as PopupPanel
+  Ie as PopupPanel
 };
 //# sourceMappingURL=component.js.map