@lobehub/ui 4.10.0 → 4.11.0

package/es/Input/InputOPT.d.mts

@@ -1,8 +1,8 @@
 import { InputOPTProps } from "./type.mjs";
-import * as react115 from "react";
+import * as react140 from "react";
 
 //#region src/Input/InputOPT.d.ts
-declare const InputOPT: react115.NamedExoticComponent<InputOPTProps>;
+declare const InputOPT: react140.NamedExoticComponent<InputOPTProps>;
 //#endregion
 export { InputOPT };
 //# sourceMappingURL=InputOPT.d.mts.map

package/es/Input/InputPassword.d.mts

@@ -1,8 +1,8 @@
 import { InputPasswordProps } from "./type.mjs";
-import * as react116 from "react";
+import * as react141 from "react";
 
 //#region src/Input/InputPassword.d.ts
-declare const InputPassword: react116.NamedExoticComponent<InputPasswordProps>;
+declare const InputPassword: react141.NamedExoticComponent<InputPasswordProps>;
 //#endregion
 export { InputPassword };
 //# sourceMappingURL=InputPassword.d.mts.map

package/es/Input/TextArea.d.mts

@@ -1,8 +1,8 @@
 import { TextAreaProps } from "./type.mjs";
-import * as react117 from "react";
+import * as react142 from "react";
 
 //#region src/Input/TextArea.d.ts
-declare const TextArea: react117.NamedExoticComponent<TextAreaProps>;
+declare const TextArea: react142.NamedExoticComponent<TextAreaProps>;
 //#endregion
 export { TextArea };
 //# sourceMappingURL=TextArea.d.mts.map

package/es/Layout/components/LayoutFooter.d.mts

@@ -1,9 +1,9 @@
 import { DivProps } from "../../types/index.mjs";
 import "../../index.mjs";
-import * as react53 from "react";
+import * as react21 from "react";
 
 //#region src/Layout/components/LayoutFooter.d.ts
-declare const LayoutFooter: react53.NamedExoticComponent<DivProps>;
+declare const LayoutFooter: react21.NamedExoticComponent<DivProps>;
 //#endregion
 export { LayoutFooter };
 //# sourceMappingURL=LayoutFooter.d.mts.map

package/es/Layout/components/LayoutHeader.d.mts

@@ -1,8 +1,8 @@
 import { LayoutHeaderProps } from "../type.mjs";
-import * as react54 from "react";
+import * as react20 from "react";
 
 //#region src/Layout/components/LayoutHeader.d.ts
-declare const LayoutHeader: react54.NamedExoticComponent<LayoutHeaderProps>;
+declare const LayoutHeader: react20.NamedExoticComponent<LayoutHeaderProps>;
 //#endregion
 export { LayoutHeader };
 //# sourceMappingURL=LayoutHeader.d.mts.map

package/es/Layout/components/LayoutMain.d.mts

@@ -1,9 +1,9 @@
 import { DivProps } from "../../types/index.mjs";
 import "../../index.mjs";
-import * as react55 from "react";
+import * as react22 from "react";
 
 //#region src/Layout/components/LayoutMain.d.ts
-declare const LayoutMain: react55.NamedExoticComponent<DivProps>;
+declare const LayoutMain: react22.NamedExoticComponent<DivProps>;
 //#endregion
 export { LayoutMain };
 //# sourceMappingURL=LayoutMain.d.mts.map

package/es/Layout/components/LayoutSidebar.d.mts

@@ -1,8 +1,8 @@
 import { LayoutSidebarProps } from "../type.mjs";
-import * as react56 from "react";
+import * as react23 from "react";
 
 //#region src/Layout/components/LayoutSidebar.d.ts
-declare const LayoutSidebar: react56.NamedExoticComponent<LayoutSidebarProps>;
+declare const LayoutSidebar: react23.NamedExoticComponent<LayoutSidebarProps>;
 //#endregion
 export { LayoutSidebar };
 //# sourceMappingURL=LayoutSidebar.d.mts.map

package/es/Layout/components/LayoutSidebarInner.d.mts

@@ -1,8 +1,8 @@
 import { LayoutSidebarInnerProps } from "../type.mjs";
-import * as react57 from "react";
+import * as react24 from "react";
 
 //#region src/Layout/components/LayoutSidebarInner.d.ts
-declare const LayoutSidebarInner: react57.NamedExoticComponent<LayoutSidebarInnerProps>;
+declare const LayoutSidebarInner: react24.NamedExoticComponent<LayoutSidebarInnerProps>;
 //#endregion
 export { LayoutSidebarInner };
 //# sourceMappingURL=LayoutSidebarInner.d.mts.map

package/es/Layout/components/LayoutToc.d.mts

@@ -1,8 +1,8 @@
 import { LayoutTocProps } from "../type.mjs";
-import * as react58 from "react";
+import * as react25 from "react";
 
 //#region src/Layout/components/LayoutToc.d.ts
-declare const LayoutToc: react58.NamedExoticComponent<LayoutTocProps>;
+declare const LayoutToc: react25.NamedExoticComponent<LayoutTocProps>;
 //#endregion
 export { LayoutToc };
 //# sourceMappingURL=LayoutToc.d.mts.map

package/es/List/ListItem/index.d.mts

@@ -1,8 +1,8 @@
 import { ListItemProps } from "../type.mjs";
-import * as react50 from "react";
+import * as react30 from "react";
 
 //#region src/List/ListItem/index.d.ts
-declare const ListItem: react50.NamedExoticComponent<ListItemProps>;
+declare const ListItem: react30.NamedExoticComponent<ListItemProps>;
 //#endregion
 export { ListItem };
 //# sourceMappingURL=index.d.mts.map

package/es/Markdown/Markdown.d.mts

@@ -1,8 +1,8 @@
 import { MarkdownProps } from "./type.mjs";
-import * as react52 from "react";
+import * as react2 from "react";
 
 //#region src/Markdown/Markdown.d.ts
-declare const Markdown: react52.NamedExoticComponent<MarkdownProps>;
+declare const Markdown: react2.NamedExoticComponent<MarkdownProps>;
 //#endregion
 export { Markdown };
 //# sourceMappingURL=Markdown.d.mts.map

package/es/Markdown/Typography.d.mts

@@ -1,8 +1,8 @@
 import { TypographyProps } from "./type.mjs";
-import * as react51 from "react";
+import * as react3 from "react";
 
 //#region src/Markdown/Typography.d.ts
-declare const Typography: react51.NamedExoticComponent<TypographyProps>;
+declare const Typography: react3.NamedExoticComponent<TypographyProps>;
 //#endregion
 export { Typography };
 //# sourceMappingURL=Typography.d.mts.map

package/es/Markdown/components/SearchResultCards/index.d.mts

@@ -1,6 +1,6 @@
 import { FlexboxProps } from "../../../Flex/type.mjs";
 import "../../../Flex/index.mjs";
-import * as react3 from "react";
+import * as react46 from "react";
 import { Ref } from "react";
 
 //#region src/Markdown/components/SearchResultCards/index.d.ts
@@ -14,7 +14,7 @@ interface SearchResultCardsProps extends FlexboxProps {
   dataSource: string[] | SearchResultItem[];
   ref?: Ref<HTMLDivElement>;
 }
-declare const SearchResultCards: react3.NamedExoticComponent<SearchResultCardsProps>;
+declare const SearchResultCards: react46.NamedExoticComponent<SearchResultCardsProps>;
 //#endregion
 export { SearchResultCards, SearchResultCardsProps };
 //# sourceMappingURL=index.d.mts.map

package/es/MaskShadow/MaskShadow.d.mts

@@ -1,8 +1,8 @@
 import { MaskShadowProps } from "./type.mjs";
-import * as react46 from "react";
+import * as react4 from "react";
 
 //#region src/MaskShadow/MaskShadow.d.ts
-declare const MaskShadow: react46.NamedExoticComponent<MaskShadowProps>;
+declare const MaskShadow: react4.NamedExoticComponent<MaskShadowProps>;
 //#endregion
 export { MaskShadow };
 //# sourceMappingURL=MaskShadow.d.mts.map

package/es/Menu/Menu.d.mts

@@ -1,8 +1,8 @@
 import { MenuProps } from "./type.mjs";
-import * as react41 from "react";
+import * as react0 from "react";
 
 //#region src/Menu/Menu.d.ts
-declare const Menu: react41.NamedExoticComponent<MenuProps<unknown>>;
+declare const Menu: react0.NamedExoticComponent<MenuProps<unknown>>;
 //#endregion
 export { Menu };
 //# sourceMappingURL=Menu.d.mts.map

package/es/Mermaid/Mermaid.d.mts

@@ -1,8 +1,8 @@
 import { MermaidProps } from "./type.mjs";
-import * as react42 from "react";
+import * as react39 from "react";
 
 //#region src/Mermaid/Mermaid.d.ts
-declare const Mermaid: react42.NamedExoticComponent<MermaidProps>;
+declare const Mermaid: react39.NamedExoticComponent<MermaidProps>;
 //#endregion
 export { Mermaid };
 //# sourceMappingURL=Mermaid.d.mts.map

package/es/Mermaid/SyntaxMermaid/index.d.mts

@@ -1,8 +1,8 @@
 import { SyntaxMermaidProps } from "../type.mjs";
-import * as react43 from "react";
+import * as react40 from "react";
 
 //#region src/Mermaid/SyntaxMermaid/index.d.ts
-declare const SyntaxMermaid: react43.NamedExoticComponent<SyntaxMermaidProps>;
+declare const SyntaxMermaid: react40.NamedExoticComponent<SyntaxMermaidProps>;
 //#endregion
 export { SyntaxMermaid };
 //# sourceMappingURL=index.d.mts.map

package/es/Modal/Modal.d.mts

@@ -1,8 +1,8 @@
 import { ModalProps } from "./type.mjs";
-import * as react38 from "react";
+import * as react60 from "react";
 
 //#region src/Modal/Modal.d.ts
-declare const Modal: react38.NamedExoticComponent<ModalProps>;
+declare const Modal: react60.NamedExoticComponent<ModalProps>;
 //#endregion
 export { Modal };
 //# sourceMappingURL=Modal.d.mts.map

package/es/Modal/ModalProvider.d.mts

@@ -1,9 +1,9 @@
 import { ModalContextValue } from "./type.mjs";
-import * as react39 from "react";
+import * as react61 from "react";
 import { ReactNode } from "react";
 
 //#region src/Modal/ModalProvider.d.ts
-declare const ModalProvider: react39.NamedExoticComponent<{
+declare const ModalProvider: react61.NamedExoticComponent<{
   children: ReactNode;
   value: ModalContextValue;
 }>;

package/es/MotionProvider/index.d.mts

@@ -1,4 +1,4 @@
-import * as react4 from "react";
+import * as react47 from "react";
 import { Context, ReactNode } from "react";
 import * as motion_react0 from "motion/react";
 import * as m from "motion/react-m";
@@ -6,7 +6,7 @@ import * as m from "motion/react-m";
 //#region src/MotionProvider/index.d.ts
 type MotionComponentType = typeof motion_react0.motion | typeof m;
 declare const MotionComponent: Context<MotionComponentType>;
-declare const MotionProvider: react4.NamedExoticComponent<{
+declare const MotionProvider: react47.NamedExoticComponent<{
   children: ReactNode;
   motion: MotionComponentType;
 }>;

package/es/Popover/ArrowIcon.mjs

@@ -3,7 +3,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/Popover/ArrowIcon.tsx
-const PopoverArrowIcon = () => /* @__PURE__ */ jsxs("svg", {
+const PopoverArrowIcon = /* @__PURE__ */ jsxs("svg", {
 	"aria-hidden": "true",
 	height: "6",
 	viewBox: "0 0 12 6",

package/es/Popover/ArrowIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ArrowIcon.mjs","names":["PopoverArrowIcon: FC"],"sources":["../../src/Popover/ArrowIcon.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\n\nexport const PopoverArrowIcon: FC = () => (\n  <svg aria-hidden=\"true\" height=\"6\" viewBox=\"0 0 12 6\" width=\"12\">\n    <path d=\"M0 6L6 0L12 6Z\" data-role=\"fill\" />\n    <path d=\"M0 6L6 0L12 6\" data-role=\"stroke\" />\n  </svg>\n);\n"],"mappings":";;;;;AAIA,MAAaA,yBACX,qBAAC;CAAI,eAAY;CAAO,QAAO;CAAI,SAAQ;CAAW,OAAM;YAC1D,oBAAC;EAAK,GAAE;EAAiB,aAAU;GAAS,EAC5C,oBAAC;EAAK,GAAE;EAAgB,aAAU;GAAW;EACzC"}
+{"version":3,"file":"ArrowIcon.mjs","names":[],"sources":["../../src/Popover/ArrowIcon.tsx"],"sourcesContent":["'use client';\n\nexport const PopoverArrowIcon = (\n  <svg aria-hidden=\"true\" height=\"6\" viewBox=\"0 0 12 6\" width=\"12\">\n    <path d=\"M0 6L6 0L12 6Z\" data-role=\"fill\" />\n    <path d=\"M0 6L6 0L12 6\" data-role=\"stroke\" />\n  </svg>\n);\n"],"mappings":";;;;;AAEA,MAAa,mBACX,qBAAC;CAAI,eAAY;CAAO,QAAO;CAAI,SAAQ;CAAW,OAAM;YAC1D,oBAAC;EAAK,GAAE;EAAiB,aAAU;GAAS,EAC5C,oBAAC;EAAK,GAAE;EAAgB,aAAU;GAAW;EACzC"}

package/es/Popover/PopoverGroup.mjs

@@ -1,6 +1,7 @@
 'use client';
 
 import { placementMap } from "../utils/placement.mjs";
+import { PopoverProvider } from "./context.mjs";
 import { PopoverGroupHandleContext, PopoverGroupPropsContext } from "./groupContext.mjs";
 import { parseTrigger } from "./parseTrigger.mjs";
 import { PopoverArrowIcon } from "./ArrowIcon.mjs";
@@ -15,6 +16,10 @@ import { Popover } from "@base-ui/react/popover";
 const PopoverGroup = ({ children, contentLayoutAnimation = true, ...sharedProps }) => {
 	const handle = useMemo(() => Popover.createHandle(), []);
 	const activeItemRef = useRef(null);
+	const close = useCallback(() => {
+		handle.close();
+	}, [handle]);
+	const contextValue = useMemo(() => ({ close }), [close]);
 	const handleOpenChange = useCallback((open) => {
 		activeItemRef.current?.onOpenChange?.(open);
 	}, []);
@@ -53,6 +58,10 @@ const PopoverGroup = ({ children, contentLayoutAnimation = true, ...sharedProps
 						},
 						viewport: item.styles?.content
 					};
+					const contentNode = /* @__PURE__ */ jsx(PopoverProvider, {
+						value: contextValue,
+						children: item.content
+					});
 					const popup = /* @__PURE__ */ jsx(Popover.Positioner, {
 						align: placementConfig.align,
 						className: resolvedClassNames.positioner,
@@ -66,15 +75,15 @@ const PopoverGroup = ({ children, contentLayoutAnimation = true, ...sharedProps
 							children: [arrow && /* @__PURE__ */ jsx(Popover.Arrow, {
 								className: resolvedClassNames.arrow,
 								style: resolvedStyles.arrow,
-								children: /* @__PURE__ */ jsx(PopoverArrowIcon, {})
+								children: PopoverArrowIcon
 							}), contentLayoutAnimation ? /* @__PURE__ */ jsx(Popover.Viewport, {
 								className: resolvedClassNames.viewport,
 								style: resolvedStyles.viewport,
-								children: item.content
+								children: contentNode
 							}) : /* @__PURE__ */ jsx("div", {
 								className: resolvedClassNames.viewport,
 								style: resolvedStyles.viewport,
-								children: item.content
+								children: contentNode
 							})]
 						})
 					});

package/es/Popover/PopoverGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverGroup.mjs","names":["PopoverGroup: FC<PopoverGroupProps>","BasePopover"],"sources":["../../src/Popover/PopoverGroup.tsx"],"sourcesContent":["'use client';\n\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport type { Side } from '@base-ui/react/utils/useAnchorPositioning';\nimport { cx } from 'antd-style';\nimport { type FC, type ReactNode, useCallback, useMemo, useRef } from 'react';\n\nimport { placementMap } from '@/utils/placement';\n\nimport { PopoverArrowIcon } from './ArrowIcon';\nimport { usePopoverPortalContainer } from './PopoverPortal';\nimport {\n  PopoverGroupHandleContext,\n  type PopoverGroupItem,\n  PopoverGroupPropsContext,\n  type PopoverGroupSharedProps,\n} from './groupContext';\nimport { parseTrigger } from './parseTrigger';\nimport { styles } from './style';\n\ntype PopoverGroupProps = PopoverGroupSharedProps & {\n  children: ReactNode;\n};\n\nconst PopoverGroup: FC<PopoverGroupProps> = ({\n  children,\n  contentLayoutAnimation = true,\n  ...sharedProps\n}) => {\n  const handle = useMemo(() => BasePopover.createHandle<PopoverGroupItem>(), []);\n  const activeItemRef = useRef<PopoverGroupItem | null>(null);\n\n  const handleOpenChange = useCallback((open: boolean) => {\n    activeItemRef.current?.onOpenChange?.(open);\n  }, []);\n\n  const portalContainer = usePopoverPortalContainer();\n\n  return (\n    <PopoverGroupHandleContext.Provider value={handle}>\n      <PopoverGroupPropsContext.Provider value={sharedProps}>\n        {children}\n        <BasePopover.Root handle={handle} onOpenChange={handleOpenChange}>\n          {({ payload }) => {\n            const item = (payload as PopoverGroupItem | null) ?? null;\n            activeItemRef.current = item;\n\n            if (!item?.content) return null;\n\n            const arrow = item.inset ? false : (item.arrow ?? true);\n            const placement = item.placement ?? 'top';\n            const { openOnHover } = parseTrigger(item.trigger ?? 'hover');\n\n            const placementConfig = placementMap[placement] ?? placementMap.top;\n            const baseSideOffset = arrow ? 10 : 6;\n            const resolvedSideOffset = item.inset\n              ? ({\n                  side,\n                  positioner,\n                }: {\n                  positioner: { height: number; width: number };\n                  side: Side;\n                }) => {\n                  if (\n                    side === 'left' ||\n                    side === 'right' ||\n                    side === 'inline-start' ||\n                    side === 'inline-end'\n                  ) {\n                    return -positioner.width;\n                  }\n                  return -positioner.height;\n                }\n              : baseSideOffset;\n\n            const resolvedClassNames = {\n              arrow: cx(styles.arrow, item.classNames?.arrow),\n              popup: cx(styles.popup, item.className),\n              positioner: cx(styles.positioner, item.classNames?.root),\n              viewport: cx(styles.viewport, item.classNames?.content),\n            };\n\n            const resolvedStyles = {\n              arrow: item.styles?.arrow,\n              positioner: {\n                ...item.styles?.root,\n                zIndex: item.zIndex ?? 1100,\n              },\n              viewport: item.styles?.content,\n            };\n\n            const popup = (\n              <BasePopover.Positioner\n                align={placementConfig.align}\n                className={resolvedClassNames.positioner}\n                data-hover-trigger={openOnHover || undefined}\n                data-placement={placement}\n                side={placementConfig.side}\n                sideOffset={resolvedSideOffset}\n                style={resolvedStyles.positioner}\n              >\n                <BasePopover.Popup className={resolvedClassNames.popup}>\n                  {arrow && (\n                    <BasePopover.Arrow\n                      className={resolvedClassNames.arrow}\n                      style={resolvedStyles.arrow}\n                    >\n                      <PopoverArrowIcon />\n                    </BasePopover.Arrow>\n                  )}\n                  {contentLayoutAnimation ? (\n                    <BasePopover.Viewport\n                      className={resolvedClassNames.viewport}\n                      style={resolvedStyles.viewport}\n                    >\n                      {item.content}\n                    </BasePopover.Viewport>\n                  ) : (\n                    <div className={resolvedClassNames.viewport} style={resolvedStyles.viewport}>\n                      {item.content}\n                    </div>\n                  )}\n                </BasePopover.Popup>\n              </BasePopover.Positioner>\n            );\n\n            const resolvedPortalContainer = portalContainer;\n            const portalled = item.portalled ?? true;\n\n            return portalled ? (\n              resolvedPortalContainer ? (\n                <BasePopover.Portal container={resolvedPortalContainer}>{popup}</BasePopover.Portal>\n              ) : null\n            ) : (\n              popup\n            );\n          }}\n        </BasePopover.Root>\n      </PopoverGroupPropsContext.Provider>\n    </PopoverGroupHandleContext.Provider>\n  );\n};\n\nPopoverGroup.displayName = 'PopoverGroup';\n\nexport default PopoverGroup;\n"],"mappings":";;;;;;;;;;;;;;AAwBA,MAAMA,gBAAuC,EAC3C,UACA,yBAAyB,MACzB,GAAG,kBACC;CACJ,MAAM,SAAS,cAAcC,QAAY,cAAgC,EAAE,EAAE,CAAC;CAC9E,MAAM,gBAAgB,OAAgC,KAAK;CAE3D,MAAM,mBAAmB,aAAa,SAAkB;AACtD,gBAAc,SAAS,eAAe,KAAK;IAC1C,EAAE,CAAC;CAEN,MAAM,kBAAkB,2BAA2B;AAEnD,QACE,oBAAC,0BAA0B;EAAS,OAAO;YACzC,qBAAC,yBAAyB;GAAS,OAAO;cACvC,UACD,oBAACA,QAAY;IAAa;IAAQ,cAAc;eAC5C,EAAE,cAAc;KAChB,MAAM,OAAQ,WAAuC;AACrD,mBAAc,UAAU;AAExB,SAAI,CAAC,MAAM,QAAS,QAAO;KAE3B,MAAM,QAAQ,KAAK,QAAQ,QAAS,KAAK,SAAS;KAClD,MAAM,YAAY,KAAK,aAAa;KACpC,MAAM,EAAE,gBAAgB,aAAa,KAAK,WAAW,QAAQ;KAE7D,MAAM,kBAAkB,aAAa,cAAc,aAAa;KAChE,MAAM,iBAAiB,QAAQ,KAAK;KACpC,MAAM,qBAAqB,KAAK,SAC3B,EACC,MACA,iBAII;AACJ,UACE,SAAS,UACT,SAAS,WACT,SAAS,kBACT,SAAS,aAET,QAAO,CAAC,WAAW;AAErB,aAAO,CAAC,WAAW;SAErB;KAEJ,MAAM,qBAAqB;MACzB,OAAO,GAAG,OAAO,OAAO,KAAK,YAAY,MAAM;MAC/C,OAAO,GAAG,OAAO,OAAO,KAAK,UAAU;MACvC,YAAY,GAAG,OAAO,YAAY,KAAK,YAAY,KAAK;MACxD,UAAU,GAAG,OAAO,UAAU,KAAK,YAAY,QAAQ;MACxD;KAED,MAAM,iBAAiB;MACrB,OAAO,KAAK,QAAQ;MACpB,YAAY;OACV,GAAG,KAAK,QAAQ;OAChB,QAAQ,KAAK,UAAU;OACxB;MACD,UAAU,KAAK,QAAQ;MACxB;KAED,MAAM,QACJ,oBAACA,QAAY;MACX,OAAO,gBAAgB;MACvB,WAAW,mBAAmB;MAC9B,sBAAoB,eAAe;MACnC,kBAAgB;MAChB,MAAM,gBAAgB;MACtB,YAAY;MACZ,OAAO,eAAe;gBAEtB,qBAACA,QAAY;OAAM,WAAW,mBAAmB;kBAC9C,SACC,oBAACA,QAAY;QACX,WAAW,mBAAmB;QAC9B,OAAO,eAAe;kBAEtB,oBAAC,qBAAmB;SACF,EAErB,yBACC,oBAACA,QAAY;QACX,WAAW,mBAAmB;QAC9B,OAAO,eAAe;kBAErB,KAAK;SACe,GAEvB,oBAAC;QAAI,WAAW,mBAAmB;QAAU,OAAO,eAAe;kBAChE,KAAK;SACF;QAEU;OACG;KAG3B,MAAM,0BAA0B;AAGhC,YAFkB,KAAK,aAAa,OAGlC,0BACE,oBAACA,QAAY;MAAO,WAAW;gBAA0B;OAA2B,GAClF,OAEJ;;KAGa;IACe;GACD;;AAIzC,aAAa,cAAc;AAE3B,2BAAe"}
+{"version":3,"file":"PopoverGroup.mjs","names":["PopoverGroup: FC<PopoverGroupProps>","BasePopover"],"sources":["../../src/Popover/PopoverGroup.tsx"],"sourcesContent":["'use client';\n\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport type { Side } from '@base-ui/react/utils/useAnchorPositioning';\nimport { cx } from 'antd-style';\nimport { type FC, type ReactNode, useCallback, useMemo, useRef } from 'react';\n\nimport { placementMap } from '@/utils/placement';\n\nimport { PopoverArrowIcon } from './ArrowIcon';\nimport { usePopoverPortalContainer } from './PopoverPortal';\nimport { PopoverProvider } from './context';\nimport {\n  PopoverGroupHandleContext,\n  type PopoverGroupItem,\n  PopoverGroupPropsContext,\n  type PopoverGroupSharedProps,\n} from './groupContext';\nimport { parseTrigger } from './parseTrigger';\nimport { styles } from './style';\n\ntype PopoverGroupProps = PopoverGroupSharedProps & {\n  children: ReactNode;\n};\n\nconst PopoverGroup: FC<PopoverGroupProps> = ({\n  children,\n  contentLayoutAnimation = true,\n  ...sharedProps\n}) => {\n  const handle = useMemo(() => BasePopover.createHandle<PopoverGroupItem>(), []);\n  const activeItemRef = useRef<PopoverGroupItem | null>(null);\n  const close = useCallback(() => {\n    handle.close();\n  }, [handle]);\n  const contextValue = useMemo(() => ({ close }), [close]);\n\n  const handleOpenChange = useCallback((open: boolean) => {\n    activeItemRef.current?.onOpenChange?.(open);\n  }, []);\n\n  const portalContainer = usePopoverPortalContainer();\n\n  return (\n    <PopoverGroupHandleContext.Provider value={handle}>\n      <PopoverGroupPropsContext.Provider value={sharedProps}>\n        {children}\n        <BasePopover.Root handle={handle} onOpenChange={handleOpenChange}>\n          {({ payload }) => {\n            const item = (payload as PopoverGroupItem | null) ?? null;\n            activeItemRef.current = item;\n\n            if (!item?.content) return null;\n\n            const arrow = item.inset ? false : (item.arrow ?? true);\n            const placement = item.placement ?? 'top';\n            const { openOnHover } = parseTrigger(item.trigger ?? 'hover');\n\n            const placementConfig = placementMap[placement] ?? placementMap.top;\n            const baseSideOffset = arrow ? 10 : 6;\n            const resolvedSideOffset = item.inset\n              ? ({\n                  side,\n                  positioner,\n                }: {\n                  positioner: { height: number; width: number };\n                  side: Side;\n                }) => {\n                  if (\n                    side === 'left' ||\n                    side === 'right' ||\n                    side === 'inline-start' ||\n                    side === 'inline-end'\n                  ) {\n                    return -positioner.width;\n                  }\n                  return -positioner.height;\n                }\n              : baseSideOffset;\n\n            const resolvedClassNames = {\n              arrow: cx(styles.arrow, item.classNames?.arrow),\n              popup: cx(styles.popup, item.className),\n              positioner: cx(styles.positioner, item.classNames?.root),\n              viewport: cx(styles.viewport, item.classNames?.content),\n            };\n\n            const resolvedStyles = {\n              arrow: item.styles?.arrow,\n              positioner: {\n                ...item.styles?.root,\n                zIndex: item.zIndex ?? 1100,\n              },\n              viewport: item.styles?.content,\n            };\n\n            const contentNode = (\n              <PopoverProvider value={contextValue}>{item.content}</PopoverProvider>\n            );\n\n            const popup = (\n              <BasePopover.Positioner\n                align={placementConfig.align}\n                className={resolvedClassNames.positioner}\n                data-hover-trigger={openOnHover || undefined}\n                data-placement={placement}\n                side={placementConfig.side}\n                sideOffset={resolvedSideOffset}\n                style={resolvedStyles.positioner}\n              >\n                <BasePopover.Popup className={resolvedClassNames.popup}>\n                  {arrow && (\n                    <BasePopover.Arrow\n                      className={resolvedClassNames.arrow}\n                      style={resolvedStyles.arrow}\n                    >\n                      {PopoverArrowIcon}\n                    </BasePopover.Arrow>\n                  )}\n                  {contentLayoutAnimation ? (\n                    <BasePopover.Viewport\n                      className={resolvedClassNames.viewport}\n                      style={resolvedStyles.viewport}\n                    >\n                      {contentNode}\n                    </BasePopover.Viewport>\n                  ) : (\n                    <div className={resolvedClassNames.viewport} style={resolvedStyles.viewport}>\n                      {contentNode}\n                    </div>\n                  )}\n                </BasePopover.Popup>\n              </BasePopover.Positioner>\n            );\n\n            const resolvedPortalContainer = portalContainer;\n            const portalled = item.portalled ?? true;\n\n            return portalled ? (\n              resolvedPortalContainer ? (\n                <BasePopover.Portal container={resolvedPortalContainer}>{popup}</BasePopover.Portal>\n              ) : null\n            ) : (\n              popup\n            );\n          }}\n        </BasePopover.Root>\n      </PopoverGroupPropsContext.Provider>\n    </PopoverGroupHandleContext.Provider>\n  );\n};\n\nPopoverGroup.displayName = 'PopoverGroup';\n\nexport default PopoverGroup;\n"],"mappings":";;;;;;;;;;;;;;;AAyBA,MAAMA,gBAAuC,EAC3C,UACA,yBAAyB,MACzB,GAAG,kBACC;CACJ,MAAM,SAAS,cAAcC,QAAY,cAAgC,EAAE,EAAE,CAAC;CAC9E,MAAM,gBAAgB,OAAgC,KAAK;CAC3D,MAAM,QAAQ,kBAAkB;AAC9B,SAAO,OAAO;IACb,CAAC,OAAO,CAAC;CACZ,MAAM,eAAe,eAAe,EAAE,OAAO,GAAG,CAAC,MAAM,CAAC;CAExD,MAAM,mBAAmB,aAAa,SAAkB;AACtD,gBAAc,SAAS,eAAe,KAAK;IAC1C,EAAE,CAAC;CAEN,MAAM,kBAAkB,2BAA2B;AAEnD,QACE,oBAAC,0BAA0B;EAAS,OAAO;YACzC,qBAAC,yBAAyB;GAAS,OAAO;cACvC,UACD,oBAACA,QAAY;IAAa;IAAQ,cAAc;eAC5C,EAAE,cAAc;KAChB,MAAM,OAAQ,WAAuC;AACrD,mBAAc,UAAU;AAExB,SAAI,CAAC,MAAM,QAAS,QAAO;KAE3B,MAAM,QAAQ,KAAK,QAAQ,QAAS,KAAK,SAAS;KAClD,MAAM,YAAY,KAAK,aAAa;KACpC,MAAM,EAAE,gBAAgB,aAAa,KAAK,WAAW,QAAQ;KAE7D,MAAM,kBAAkB,aAAa,cAAc,aAAa;KAChE,MAAM,iBAAiB,QAAQ,KAAK;KACpC,MAAM,qBAAqB,KAAK,SAC3B,EACC,MACA,iBAII;AACJ,UACE,SAAS,UACT,SAAS,WACT,SAAS,kBACT,SAAS,aAET,QAAO,CAAC,WAAW;AAErB,aAAO,CAAC,WAAW;SAErB;KAEJ,MAAM,qBAAqB;MACzB,OAAO,GAAG,OAAO,OAAO,KAAK,YAAY,MAAM;MAC/C,OAAO,GAAG,OAAO,OAAO,KAAK,UAAU;MACvC,YAAY,GAAG,OAAO,YAAY,KAAK,YAAY,KAAK;MACxD,UAAU,GAAG,OAAO,UAAU,KAAK,YAAY,QAAQ;MACxD;KAED,MAAM,iBAAiB;MACrB,OAAO,KAAK,QAAQ;MACpB,YAAY;OACV,GAAG,KAAK,QAAQ;OAChB,QAAQ,KAAK,UAAU;OACxB;MACD,UAAU,KAAK,QAAQ;MACxB;KAED,MAAM,cACJ,oBAAC;MAAgB,OAAO;gBAAe,KAAK;OAA0B;KAGxE,MAAM,QACJ,oBAACA,QAAY;MACX,OAAO,gBAAgB;MACvB,WAAW,mBAAmB;MAC9B,sBAAoB,eAAe;MACnC,kBAAgB;MAChB,MAAM,gBAAgB;MACtB,YAAY;MACZ,OAAO,eAAe;gBAEtB,qBAACA,QAAY;OAAM,WAAW,mBAAmB;kBAC9C,SACC,oBAACA,QAAY;QACX,WAAW,mBAAmB;QAC9B,OAAO,eAAe;kBAErB;SACiB,EAErB,yBACC,oBAACA,QAAY;QACX,WAAW,mBAAmB;QAC9B,OAAO,eAAe;kBAErB;SACoB,GAEvB,oBAAC;QAAI,WAAW,mBAAmB;QAAU,OAAO,eAAe;kBAChE;SACG;QAEU;OACG;KAG3B,MAAM,0BAA0B;AAGhC,YAFkB,KAAK,aAAa,OAGlC,0BACE,oBAACA,QAAY;MAAO,WAAW;gBAA0B;OAA2B,GAClF,OAEJ;;KAGa;IACe;GACD;;AAIzC,aAAa,cAAc;AAE3B,2BAAe"}

package/es/Popover/PopoverInGroup.mjs

@@ -1,10 +1,12 @@
 'use client';
 
+import { useNativeButton } from "../hooks/useNativeButton.mjs";
 import { PopoverGroupHandleContext } from "./groupContext.mjs";
 import { parseTrigger } from "./parseTrigger.mjs";
 import { useMergedPopoverProps } from "./useMergedPopoverProps.mjs";
 import { cloneElement, isValidElement, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
 import { mergeRefs } from "react-merge-refs";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { Popover } from "@base-ui/react/popover";
@@ -17,6 +19,10 @@ const PopoverInGroup = ({ children, ref: refProp, ...props }) => {
 	const resolvedOpenDelay = item.openDelay ?? (item.mouseEnterDelay ?? .1) * 1e3;
 	const resolvedCloseDelay = item.closeDelay ?? (item.mouseLeaveDelay ?? .1) * 1e3;
 	const disabled = Boolean(item.disabled);
+	const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({
+		children,
+		nativeButton: item.nativeButton
+	});
 	if (!item.content) return children;
 	const triggerProps = {
 		closeDelay: resolvedCloseDelay,
@@ -25,17 +31,24 @@ const PopoverInGroup = ({ children, ref: refProp, ...props }) => {
 		openOnHover: openOnHover && !disabled,
 		payload: item
 	};
+	const triggerClassName = item.classNames?.trigger;
 	if (isValidElement(children)) return /* @__PURE__ */ jsx(Popover.Trigger, {
 		handle: group ?? void 0,
 		...triggerProps,
+		nativeButton: resolvedNativeButton,
 		render: (renderProps) => {
-			const { type, ref: triggerRef, ...restProps } = renderProps;
-			const resolvedProps = typeof children.type === "string" && children.type === "button" ? renderProps : restProps;
+			const resolvedProps = (() => {
+				if (isNativeButtonTriggerElement) return renderProps;
+				const { type, ref: triggerRef, ...restProps } = renderProps;
+				return restProps;
+			})();
+			const mergedProps = mergeProps(children.props, resolvedProps);
 			return cloneElement(children, {
-				...mergeProps(children.props, resolvedProps),
+				...mergedProps,
+				className: cx(mergedProps.className, triggerClassName),
 				ref: mergeRefs([
 					children.ref,
-					triggerRef,
+					renderProps.ref,
 					refProp
 				])
 			});
@@ -44,6 +57,8 @@ const PopoverInGroup = ({ children, ref: refProp, ...props }) => {
 	return /* @__PURE__ */ jsx(Popover.Trigger, {
 		handle: group ?? void 0,
 		...triggerProps,
+		className: triggerClassName,
+		nativeButton: resolvedNativeButton,
 		ref: refProp,
 		children
 	});

package/es/Popover/PopoverInGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverInGroup.mjs","names":["PopoverInGroup: FC<PopoverProps>","BasePopover"],"sources":["../../src/Popover/PopoverInGroup.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport { type FC, cloneElement, isValidElement, useContext, useMemo } from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\nimport { PopoverGroupHandleContext } from './groupContext';\nimport { parseTrigger } from './parseTrigger';\nimport type { PopoverProps } from './type';\nimport { useMergedPopoverProps } from './useMergedPopoverProps';\n\nexport const PopoverInGroup: FC<PopoverProps> = ({ children, ref: refProp, ...props }) => {\n  const group = useContext(PopoverGroupHandleContext);\n  const item = useMergedPopoverProps(props);\n\n  const { openOnHover } = useMemo(() => parseTrigger(item.trigger ?? 'hover'), [item.trigger]);\n\n  const resolvedOpenDelay = item.openDelay ?? (item.mouseEnterDelay ?? 0.1) * 1000;\n  const resolvedCloseDelay = item.closeDelay ?? (item.mouseLeaveDelay ?? 0.1) * 1000;\n  const disabled = Boolean(item.disabled);\n\n  // Don't render trigger behavior if no content\n  if (!item.content) {\n    return children as any;\n  }\n\n  const triggerProps = {\n    closeDelay: resolvedCloseDelay,\n    delay: resolvedOpenDelay,\n    disabled,\n    openOnHover: openOnHover && !disabled,\n    payload: item,\n  };\n\n  if (isValidElement(children)) {\n    return (\n      <BasePopover.Trigger\n        handle={group ?? undefined}\n        {...triggerProps}\n        render={(renderProps) => {\n          // Remove type=\"button\" for non-button elements\n          // eslint-disable-next-line unused-imports/no-unused-vars, @typescript-eslint/no-unused-vars\n          const { type, ref: triggerRef, ...restProps } = renderProps as any;\n          const resolvedProps =\n            typeof (children as any).type === 'string' && (children as any).type === 'button'\n              ? renderProps\n              : restProps;\n          const mergedProps = mergeProps((children as any).props, resolvedProps);\n          return cloneElement(children as any, {\n            ...mergedProps,\n            ref: mergeRefs([(children as any).ref, triggerRef, refProp]),\n          });\n        }}\n      />\n    );\n  }\n\n  return (\n    <BasePopover.Trigger handle={group ?? undefined} {...triggerProps} ref={refProp}>\n      {children}\n    </BasePopover.Trigger>\n  );\n};\n\nPopoverInGroup.displayName = 'PopoverInGroup';\n"],"mappings":";;;;;;;;;;;;AAYA,MAAaA,kBAAoC,EAAE,UAAU,KAAK,SAAS,GAAG,YAAY;CACxF,MAAM,QAAQ,WAAW,0BAA0B;CACnD,MAAM,OAAO,sBAAsB,MAAM;CAEzC,MAAM,EAAE,gBAAgB,cAAc,aAAa,KAAK,WAAW,QAAQ,EAAE,CAAC,KAAK,QAAQ,CAAC;CAE5F,MAAM,oBAAoB,KAAK,cAAc,KAAK,mBAAmB,MAAO;CAC5E,MAAM,qBAAqB,KAAK,eAAe,KAAK,mBAAmB,MAAO;CAC9E,MAAM,WAAW,QAAQ,KAAK,SAAS;AAGvC,KAAI,CAAC,KAAK,QACR,QAAO;CAGT,MAAM,eAAe;EACnB,YAAY;EACZ,OAAO;EACP;EACA,aAAa,eAAe,CAAC;EAC7B,SAAS;EACV;AAED,KAAI,eAAe,SAAS,CAC1B,QACE,oBAACC,QAAY;EACX,QAAQ,SAAS;EACjB,GAAI;EACJ,SAAS,gBAAgB;GAGvB,MAAM,EAAE,MAAM,KAAK,YAAY,GAAG,cAAc;GAChD,MAAM,gBACJ,OAAQ,SAAiB,SAAS,YAAa,SAAiB,SAAS,WACrE,cACA;AAEN,UAAO,aAAa,UAAiB;IACnC,GAFkB,WAAY,SAAiB,OAAO,cAAc;IAGpE,KAAK,UAAU;KAAE,SAAiB;KAAK;KAAY;KAAQ,CAAC;IAC7D,CAAC;;GAEJ;AAIN,QACE,oBAACA,QAAY;EAAQ,QAAQ,SAAS;EAAW,GAAI;EAAc,KAAK;EACrE;GACmB;;AAI1B,eAAe,cAAc"}
+{"version":3,"file":"PopoverInGroup.mjs","names":["PopoverInGroup: FC<PopoverProps>","BasePopover"],"sources":["../../src/Popover/PopoverInGroup.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport { cx } from 'antd-style';\nimport { type FC, cloneElement, isValidElement, useContext, useMemo } from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\nimport { useNativeButton } from '@/hooks/useNativeButton';\n\nimport { PopoverGroupHandleContext } from './groupContext';\nimport { parseTrigger } from './parseTrigger';\nimport type { PopoverProps } from './type';\nimport { useMergedPopoverProps } from './useMergedPopoverProps';\n\nexport const PopoverInGroup: FC<PopoverProps> = ({ children, ref: refProp, ...props }) => {\n  const group = useContext(PopoverGroupHandleContext);\n  const item = useMergedPopoverProps(props);\n\n  const { openOnHover } = useMemo(() => parseTrigger(item.trigger ?? 'hover'), [item.trigger]);\n\n  const resolvedOpenDelay = item.openDelay ?? (item.mouseEnterDelay ?? 0.1) * 1000;\n  const resolvedCloseDelay = item.closeDelay ?? (item.mouseLeaveDelay ?? 0.1) * 1000;\n  const disabled = Boolean(item.disabled);\n\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton: item.nativeButton,\n  });\n\n  // Don't render trigger behavior if no content\n  if (!item.content) {\n    return children as any;\n  }\n\n  const triggerProps = {\n    closeDelay: resolvedCloseDelay,\n    delay: resolvedOpenDelay,\n    disabled,\n    openOnHover: openOnHover && !disabled,\n    payload: item,\n  };\n\n  const triggerClassName = item.classNames?.trigger;\n\n  if (isValidElement(children)) {\n    return (\n      <BasePopover.Trigger\n        handle={group ?? undefined}\n        {...triggerProps}\n        nativeButton={resolvedNativeButton}\n        render={(renderProps) => {\n          // Base UI's trigger props include `type=\"button\"` by default.\n          // If we render into a non-<button> element, that prop is invalid and can warn.\n          const resolvedProps = (() => {\n            if (isNativeButtonTriggerElement) return renderProps as any;\n            // eslint-disable-next-line unused-imports/no-unused-vars, @typescript-eslint/no-unused-vars\n            const { type, ref: triggerRef, ...restProps } = renderProps as any;\n            return restProps;\n          })();\n\n          const mergedProps = mergeProps((children as any).props, resolvedProps);\n          return cloneElement(children as any, {\n            ...mergedProps,\n            className: cx(mergedProps.className, triggerClassName),\n            ref: mergeRefs([(children as any).ref, (renderProps as any).ref, refProp]),\n          });\n        }}\n      />\n    );\n  }\n\n  return (\n    <BasePopover.Trigger\n      handle={group ?? undefined}\n      {...triggerProps}\n      className={triggerClassName}\n      nativeButton={resolvedNativeButton}\n      ref={refProp}\n    >\n      {children}\n    </BasePopover.Trigger>\n  );\n};\n\nPopoverInGroup.displayName = 'PopoverInGroup';\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAaA,kBAAoC,EAAE,UAAU,KAAK,SAAS,GAAG,YAAY;CACxF,MAAM,QAAQ,WAAW,0BAA0B;CACnD,MAAM,OAAO,sBAAsB,MAAM;CAEzC,MAAM,EAAE,gBAAgB,cAAc,aAAa,KAAK,WAAW,QAAQ,EAAE,CAAC,KAAK,QAAQ,CAAC;CAE5F,MAAM,oBAAoB,KAAK,cAAc,KAAK,mBAAmB,MAAO;CAC5E,MAAM,qBAAqB,KAAK,eAAe,KAAK,mBAAmB,MAAO;CAC9E,MAAM,WAAW,QAAQ,KAAK,SAAS;CAEvC,MAAM,EAAE,8BAA8B,yBAAyB,gBAAgB;EAC7E;EACA,cAAc,KAAK;EACpB,CAAC;AAGF,KAAI,CAAC,KAAK,QACR,QAAO;CAGT,MAAM,eAAe;EACnB,YAAY;EACZ,OAAO;EACP;EACA,aAAa,eAAe,CAAC;EAC7B,SAAS;EACV;CAED,MAAM,mBAAmB,KAAK,YAAY;AAE1C,KAAI,eAAe,SAAS,CAC1B,QACE,oBAACC,QAAY;EACX,QAAQ,SAAS;EACjB,GAAI;EACJ,cAAc;EACd,SAAS,gBAAgB;GAGvB,MAAM,uBAAuB;AAC3B,QAAI,6BAA8B,QAAO;IAEzC,MAAM,EAAE,MAAM,KAAK,YAAY,GAAG,cAAc;AAChD,WAAO;OACL;GAEJ,MAAM,cAAc,WAAY,SAAiB,OAAO,cAAc;AACtE,UAAO,aAAa,UAAiB;IACnC,GAAG;IACH,WAAW,GAAG,YAAY,WAAW,iBAAiB;IACtD,KAAK,UAAU;KAAE,SAAiB;KAAM,YAAoB;KAAK;KAAQ,CAAC;IAC3E,CAAC;;GAEJ;AAIN,QACE,oBAACA,QAAY;EACX,QAAQ,SAAS;EACjB,GAAI;EACJ,WAAW;EACX,cAAc;EACd,KAAK;EAEJ;GACmB;;AAI1B,eAAe,cAAc"}

package/es/Popover/PopoverStandalone.mjs

@@ -2,11 +2,13 @@
 
 import { placementMap } from "../utils/placement.mjs";
 import { useIsClient } from "../hooks/useIsClient.mjs";
+import { useNativeButton } from "../hooks/useNativeButton.mjs";
+import { PopoverProvider } from "./context.mjs";
 import { parseTrigger } from "./parseTrigger.mjs";
 import { PopoverArrowIcon } from "./ArrowIcon.mjs";
 import { usePopoverPortalContainer } from "./PopoverPortal.mjs";
 import { styles } from "./style.mjs";
-import { cloneElement, isValidElement, memo, useCallback, useEffect, useMemo, useState } from "react";
+import { cloneElement, isValidElement, memo, useCallback, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
 import { mergeRefs } from "react-merge-refs";
@@ -18,15 +20,15 @@ import { Popover } from "@base-ui/react/popover";
 * Popover component - displays floating content relative to a trigger element
 * Compatible with Ant Design Popover API
 */
-const PopoverStandalone = memo(({ children, content, arrow: originArrow = true, inset = false, trigger = "hover", placement = "top", styles: styleProps, classNames, className, open, onOpenChange, defaultOpen = false, mouseEnterDelay = .1, mouseLeaveDelay = .1, openDelay, closeDelay, portalled = true, getPopupContainer, disabled = false, zIndex, ref: refProp }) => {
+const PopoverStandalone = memo(({ children, content, arrow: originArrow = true, inset = false, trigger = "hover", placement = "top", styles: styleProps, classNames, className, open, onOpenChange, defaultOpen = false, mouseEnterDelay = .1, mouseLeaveDelay = .1, openDelay, closeDelay, portalled = true, getPopupContainer, disabled = false, zIndex, nativeButton, ref: refProp }) => {
 	const arrow = inset ? false : originArrow;
 	const isClient = useIsClient();
 	const popoverHandle = useMemo(() => Popover.createHandle(), []);
 	const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));
-	useEffect(() => {
-		if (open === void 0) return;
-		setUncontrolledOpen(open);
-	}, [open]);
+	const close = useCallback(() => {
+		popoverHandle.close();
+	}, [popoverHandle]);
+	const contextValue = useMemo(() => ({ close }), [close]);
 	const resolvedOpen = disabled ? false : open ?? uncontrolledOpen;
 	const handleOpenChange = useCallback((nextOpen) => {
 		if (disabled && nextOpen) return;
@@ -50,6 +52,23 @@ const PopoverStandalone = memo(({ children, content, arrow: originArrow = true,
 		};
 	}, [baseSideOffset, inset]);
 	const portalContainer = usePopoverPortalContainer();
+	const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({
+		children,
+		nativeButton
+	});
+	const resolvedClassNames = useMemo(() => ({
+		arrow: cx(styles.arrow, classNames?.arrow),
+		popup: cx(styles.popup, className),
+		positioner: cx(styles.positioner, classNames?.root),
+		trigger: classNames?.trigger,
+		viewport: cx(styles.viewport, classNames?.content)
+	}), [
+		className,
+		classNames?.arrow,
+		classNames?.content,
+		classNames?.root,
+		classNames?.trigger
+	]);
 	const triggerElement = useMemo(() => {
 		const triggerProps = {
 			closeDelay: resolvedCloseDelay,
@@ -60,14 +79,20 @@ const PopoverStandalone = memo(({ children, content, arrow: originArrow = true,
 		if (isValidElement(children)) return /* @__PURE__ */ jsx(Popover.Trigger, {
 			handle: popoverHandle,
 			...triggerProps,
+			nativeButton: resolvedNativeButton,
 			render: (props) => {
-				const { type, ref: triggerRef, ...restProps } = props;
-				const resolvedProps = typeof children.type === "string" && children.type === "button" ? props : restProps;
+				const resolvedProps = (() => {
+					if (isNativeButtonTriggerElement) return props;
+					const { type, ref: triggerRef, ...restProps } = props;
+					return restProps;
+				})();
+				const mergedProps = mergeProps(children.props, resolvedProps);
 				return cloneElement(children, {
-					...mergeProps(children.props, resolvedProps),
+					...mergedProps,
+					className: cx(mergedProps.className, resolvedClassNames.trigger),
 					ref: mergeRefs([
 						children.ref,
-						triggerRef,
+						props.ref,
 						refProp
 					])
 				});
@@ -76,32 +101,26 @@ const PopoverStandalone = memo(({ children, content, arrow: originArrow = true,
 		return /* @__PURE__ */ jsx(Popover.Trigger, {
 			handle: popoverHandle,
 			...triggerProps,
+			className: resolvedClassNames.trigger,
+			nativeButton: resolvedNativeButton,
 			ref: refProp,
 			children
 		});
 	}, [
 		children,
 		disabled,
+		isNativeButtonTriggerElement,
 		openOnHover,
 		popoverHandle,
 		refProp,
+		resolvedClassNames.trigger,
+		resolvedNativeButton,
 		resolvedOpenDelay,
 		resolvedCloseDelay
 	]);
 	const customContainer = useMemo(() => {
 		if (!getPopupContainer || !isClient) return void 0;
 	}, [getPopupContainer, isClient]);
-	const resolvedClassNames = useMemo(() => ({
-		arrow: cx(styles.arrow, classNames?.arrow),
-		popup: cx(styles.popup, className),
-		positioner: cx(styles.positioner, classNames?.root),
-		viewport: cx(styles.viewport, classNames?.content)
-	}), [
-		className,
-		classNames?.arrow,
-		classNames?.content,
-		classNames?.root
-	]);
 	const resolvedStyles = useMemo(() => ({
 		arrow: styleProps?.arrow,
 		positioner: {
@@ -128,16 +147,20 @@ const PopoverStandalone = memo(({ children, content, arrow: originArrow = true,
 			children: [arrow && /* @__PURE__ */ jsx(Popover.Arrow, {
 				className: resolvedClassNames.arrow,
 				style: resolvedStyles.arrow,
-				children: /* @__PURE__ */ jsx(PopoverArrowIcon, {})
+				children: PopoverArrowIcon
 			}), /* @__PURE__ */ jsx(Popover.Viewport, {
 				className: resolvedClassNames.viewport,
 				style: resolvedStyles.viewport,
-				children: content
+				children: /* @__PURE__ */ jsx(PopoverProvider, {
+					value: contextValue,
+					children: content
+				})
 			})]
 		})
 	}), [
 		arrow,
 		content,
+		contextValue,
 		openOnHover,
 		placement,
 		placementConfig.align,