@lobehub/ui 5.11.0 → 5.12.1

package/es/base-ui/ContextMenu/ContextMenuHost.mjs

@@ -3,6 +3,7 @@ import { useIsClient } from "../../hooks/useIsClient.mjs";
 import { useAppElement } from "../../ThemeProvider/AppElementContext.mjs";
 import { preventDefaultAndStopPropagation } from "../../utils/dom.mjs";
 import { styles } from "../../Menu/sharedStyle.mjs";
+import { useLayerZIndex } from "../zIndex/useLayerZIndex.mjs";
 import { registerDevSingleton } from "../../utils/devSingleton.mjs";
 import { renderContextMenuItems } from "./renderItems.mjs";
 import { closeContextMenu, getServerSnapshot, getSnapshot, setContextMenuState, subscribe, updateLastPointer } from "./store.mjs";
@@ -37,6 +38,7 @@ const ContextMenuHost = memo(() => {
 		state.iconAlign,
 		state.iconSpaceMode
 	]);
+	const { zIndex, ref: zRef } = useLayerZIndex("floating");
 	if (!isClient) return null;
 	if (!state.open && state.items.length === 0) return null;
 	return /* @__PURE__ */ jsx(ContextMenu.Root, {
@@ -53,8 +55,12 @@ const ContextMenuHost = memo(() => {
 			children: /* @__PURE__ */ jsx(ContextMenu.Positioner, {
 				anchor: state.anchor ?? void 0,
 				className: styles.positioner,
+				ref: zRef,
 				sideOffset: 6,
-				style: noAnimationStyles,
+				style: {
+					...noAnimationStyles,
+					zIndex
+				},
 				children: /* @__PURE__ */ jsx(ContextMenu.Popup, {
 					className: styles.popup,
 					onContextMenu: preventDefaultAndStopPropagation,

package/es/base-ui/ContextMenu/ContextMenuHost.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuHost.mjs","names":[],"sources":["../../../src/base-ui/ContextMenu/ContextMenuHost.tsx"],"sourcesContent":["'use client';\n\nimport { ContextMenu } from '@base-ui/react/context-menu';\nimport { memo, useEffect, useMemo, useSyncExternalStore } from 'react';\n\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useAppElement } from '@/ThemeProvider';\nimport { registerDevSingleton } from '@/utils/devSingleton';\nimport { preventDefaultAndStopPropagation } from '@/utils/dom';\n\nimport { renderContextMenuItems } from './renderItems';\nimport {\n  closeContextMenu,\n  getServerSnapshot,\n  getSnapshot,\n  setContextMenuState,\n  subscribe,\n  updateLastPointer,\n} from './store';\nimport { styles } from './style';\n\nconst noAnimationStyles = { '--lobe-dropdown-animation-duration': '0ms' } as React.CSSProperties;\n\nexport const ContextMenuHost = memo(() => {\n  const isClient = useIsClient();\n  const appElement = useAppElement();\n  const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n\n  useEffect(() => {\n    const DEV = process.env.NODE_ENV === 'development';\n    if (!isClient || !DEV) return;\n    return registerDevSingleton('ContextMenuHost', document.body);\n  }, [isClient]);\n\n  useEffect(() => {\n    const handler = (event: MouseEvent | PointerEvent) => updateLastPointer(event);\n    window.addEventListener('pointerdown', handler, true);\n    window.addEventListener('contextmenu', handler, true);\n    return () => {\n      window.removeEventListener('pointerdown', handler, true);\n      window.removeEventListener('contextmenu', handler, true);\n    };\n  }, []);\n\n  const menuItems = useMemo(\n    () =>\n      renderContextMenuItems(state.items, [], {\n        iconAlign: state.iconAlign,\n        iconSpaceMode: state.iconSpaceMode,\n      }),\n    [state.items, state.iconAlign, state.iconSpaceMode],\n  );\n  if (!isClient) return null;\n  if (!state.open && state.items.length === 0) return null;\n\n  return (\n    <ContextMenu.Root\n      open={state.open}\n      onOpenChange={(open) => {\n        if (open) {\n          setContextMenuState({ open });\n          return;\n        }\n        closeContextMenu();\n      }}\n    >\n      <ContextMenu.Portal container={appElement}>\n        <ContextMenu.Positioner\n          anchor={state.anchor ?? undefined}\n          className={styles.positioner}\n          sideOffset={6}\n          style={noAnimationStyles}\n        >\n          <ContextMenu.Popup\n            className={styles.popup}\n            onContextMenu={preventDefaultAndStopPropagation}\n          >\n            {menuItems}\n          </ContextMenu.Popup>\n        </ContextMenu.Positioner>\n      </ContextMenu.Portal>\n    </ContextMenu.Root>\n  );\n});\n\nContextMenuHost.displayName = 'ContextMenuHost';\n"],"mappings":";;;;;;;;;;;;AAqBA,MAAM,oBAAoB,EAAE,sCAAsC,OAAO;AAEzE,MAAa,kBAAkB,WAAW;CACxC,MAAM,WAAW,aAAa;CAC9B,MAAM,aAAa,eAAe;CAClC,MAAM,QAAQ,qBAAqB,WAAW,aAAa,kBAAkB;AAE7E,iBAAgB;EACd,MAAM,MAAM,QAAQ,IAAI,aAAa;AACrC,MAAI,CAAC,YAAY,CAAC,IAAK;AACvB,SAAO,qBAAqB,mBAAmB,SAAS,KAAK;IAC5D,CAAC,SAAS,CAAC;AAEd,iBAAgB;EACd,MAAM,WAAW,UAAqC,kBAAkB,MAAM;AAC9E,SAAO,iBAAiB,eAAe,SAAS,KAAK;AACrD,SAAO,iBAAiB,eAAe,SAAS,KAAK;AACrD,eAAa;AACX,UAAO,oBAAoB,eAAe,SAAS,KAAK;AACxD,UAAO,oBAAoB,eAAe,SAAS,KAAK;;IAEzD,EAAE,CAAC;CAEN,MAAM,YAAY,cAEd,uBAAuB,MAAM,OAAO,EAAE,EAAE;EACtC,WAAW,MAAM;EACjB,eAAe,MAAM;EACtB,CAAC,EACJ;EAAC,MAAM;EAAO,MAAM;EAAW,MAAM;EAAc,CACpD;AACD,KAAI,CAAC,SAAU,QAAO;AACtB,KAAI,CAAC,MAAM,QAAQ,MAAM,MAAM,WAAW,EAAG,QAAO;AAEpD,QACE,oBAAC,YAAY,MAAb;EACE,MAAM,MAAM;EACZ,eAAe,SAAS;AACtB,OAAI,MAAM;AACR,wBAAoB,EAAE,MAAM,CAAC;AAC7B;;AAEF,qBAAkB;;YAGpB,oBAAC,YAAY,QAAb;GAAoB,WAAW;aAC7B,oBAAC,YAAY,YAAb;IACE,QAAQ,MAAM,UAAU,KAAA;IACxB,WAAW,OAAO;IAClB,YAAY;IACZ,OAAO;cAEP,oBAAC,YAAY,OAAb;KACE,WAAW,OAAO;KAClB,eAAe;eAEd;KACiB,CAAA;IACG,CAAA;GACN,CAAA;EACJ,CAAA;EAErB;AAEF,gBAAgB,cAAc"}
+{"version":3,"file":"ContextMenuHost.mjs","names":[],"sources":["../../../src/base-ui/ContextMenu/ContextMenuHost.tsx"],"sourcesContent":["'use client';\n\nimport { ContextMenu } from '@base-ui/react/context-menu';\nimport { memo, useEffect, useMemo, useSyncExternalStore } from 'react';\n\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useAppElement } from '@/ThemeProvider';\nimport { registerDevSingleton } from '@/utils/devSingleton';\nimport { preventDefaultAndStopPropagation } from '@/utils/dom';\n\nimport { useLayerZIndex } from '../zIndex';\nimport { renderContextMenuItems } from './renderItems';\nimport {\n  closeContextMenu,\n  getServerSnapshot,\n  getSnapshot,\n  setContextMenuState,\n  subscribe,\n  updateLastPointer,\n} from './store';\nimport { styles } from './style';\n\nconst noAnimationStyles = { '--lobe-dropdown-animation-duration': '0ms' } as React.CSSProperties;\n\nexport const ContextMenuHost = memo(() => {\n  const isClient = useIsClient();\n  const appElement = useAppElement();\n  const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n\n  useEffect(() => {\n    const DEV = process.env.NODE_ENV === 'development';\n    if (!isClient || !DEV) return;\n    return registerDevSingleton('ContextMenuHost', document.body);\n  }, [isClient]);\n\n  useEffect(() => {\n    const handler = (event: MouseEvent | PointerEvent) => updateLastPointer(event);\n    window.addEventListener('pointerdown', handler, true);\n    window.addEventListener('contextmenu', handler, true);\n    return () => {\n      window.removeEventListener('pointerdown', handler, true);\n      window.removeEventListener('contextmenu', handler, true);\n    };\n  }, []);\n\n  const menuItems = useMemo(\n    () =>\n      renderContextMenuItems(state.items, [], {\n        iconAlign: state.iconAlign,\n        iconSpaceMode: state.iconSpaceMode,\n      }),\n    [state.items, state.iconAlign, state.iconSpaceMode],\n  );\n  const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating');\n  if (!isClient) return null;\n  if (!state.open && state.items.length === 0) return null;\n\n  return (\n    <ContextMenu.Root\n      open={state.open}\n      onOpenChange={(open) => {\n        if (open) {\n          setContextMenuState({ open });\n          return;\n        }\n        closeContextMenu();\n      }}\n    >\n      <ContextMenu.Portal container={appElement}>\n        <ContextMenu.Positioner\n          anchor={state.anchor ?? undefined}\n          className={styles.positioner}\n          ref={zRef as any}\n          sideOffset={6}\n          style={{ ...noAnimationStyles, zIndex }}\n        >\n          <ContextMenu.Popup\n            className={styles.popup}\n            onContextMenu={preventDefaultAndStopPropagation}\n          >\n            {menuItems}\n          </ContextMenu.Popup>\n        </ContextMenu.Positioner>\n      </ContextMenu.Portal>\n    </ContextMenu.Root>\n  );\n});\n\nContextMenuHost.displayName = 'ContextMenuHost';\n"],"mappings":";;;;;;;;;;;;;AAsBA,MAAM,oBAAoB,EAAE,sCAAsC,OAAO;AAEzE,MAAa,kBAAkB,WAAW;CACxC,MAAM,WAAW,aAAa;CAC9B,MAAM,aAAa,eAAe;CAClC,MAAM,QAAQ,qBAAqB,WAAW,aAAa,kBAAkB;AAE7E,iBAAgB;EACd,MAAM,MAAM,QAAQ,IAAI,aAAa;AACrC,MAAI,CAAC,YAAY,CAAC,IAAK;AACvB,SAAO,qBAAqB,mBAAmB,SAAS,KAAK;IAC5D,CAAC,SAAS,CAAC;AAEd,iBAAgB;EACd,MAAM,WAAW,UAAqC,kBAAkB,MAAM;AAC9E,SAAO,iBAAiB,eAAe,SAAS,KAAK;AACrD,SAAO,iBAAiB,eAAe,SAAS,KAAK;AACrD,eAAa;AACX,UAAO,oBAAoB,eAAe,SAAS,KAAK;AACxD,UAAO,oBAAoB,eAAe,SAAS,KAAK;;IAEzD,EAAE,CAAC;CAEN,MAAM,YAAY,cAEd,uBAAuB,MAAM,OAAO,EAAE,EAAE;EACtC,WAAW,MAAM;EACjB,eAAe,MAAM;EACtB,CAAC,EACJ;EAAC,MAAM;EAAO,MAAM;EAAW,MAAM;EAAc,CACpD;CACD,MAAM,EAAE,QAAQ,KAAK,SAAS,eAA+B,WAAW;AACxE,KAAI,CAAC,SAAU,QAAO;AACtB,KAAI,CAAC,MAAM,QAAQ,MAAM,MAAM,WAAW,EAAG,QAAO;AAEpD,QACE,oBAAC,YAAY,MAAb;EACE,MAAM,MAAM;EACZ,eAAe,SAAS;AACtB,OAAI,MAAM;AACR,wBAAoB,EAAE,MAAM,CAAC;AAC7B;;AAEF,qBAAkB;;YAGpB,oBAAC,YAAY,QAAb;GAAoB,WAAW;aAC7B,oBAAC,YAAY,YAAb;IACE,QAAQ,MAAM,UAAU,KAAA;IACxB,WAAW,OAAO;IAClB,KAAK;IACL,YAAY;IACZ,OAAO;KAAE,GAAG;KAAmB;KAAQ;cAEvC,oBAAC,YAAY,OAAb;KACE,WAAW,OAAO;KAClB,eAAe;eAEd;KACiB,CAAA;IACG,CAAA;GACN,CAAA;EACJ,CAAA;EAErB;AAEF,gBAAgB,cAAc"}

package/es/base-ui/DropdownMenu/atoms.d.mts

@@ -47,6 +47,7 @@ declare const DropdownMenuPositioner: {
     side,
     sideOffset,
     children,
+    style,
     ...rest
   }: DropdownMenuPositionerProps): _$react_jsx_runtime0.JSX.Element;
   displayName: string;

package/es/base-ui/DropdownMenu/atoms.mjs

@@ -5,12 +5,13 @@ import { useAppElement } from "../../ThemeProvider/AppElementContext.mjs";
 import { CLASSNAMES } from "../../styles/classNames.mjs";
 import { placementMap } from "../../utils/placement.mjs";
 import { styles } from "../../Menu/sharedStyle.mjs";
+import { useLayerZIndex } from "../zIndex/useLayerZIndex.mjs";
 import { cloneElement, isValidElement, useCallback, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Switch } from "antd";
 import { cx } from "antd-style";
 import { mergeProps } from "@base-ui/react/merge-props";
-import { mergeRefs } from "react-merge-refs";
+import { mergeRefs, useMergeRefs } from "react-merge-refs";
 import { Menu as Menu$1 } from "@base-ui/react/menu";
 import clsx from "clsx";
 //#region src/base-ui/DropdownMenu/atoms.tsx
@@ -68,18 +69,28 @@ const DropdownMenuPortal = ({ container, ...rest }) => {
 	});
 };
 DropdownMenuPortal.displayName = "DropdownMenuPortal";
-const DropdownMenuPositioner = ({ className, placement, hoverTrigger, align, side, sideOffset, children, ...rest }) => {
+const DropdownMenuPositioner = ({ className, placement, hoverTrigger, align, side, sideOffset, children, style, ...rest }) => {
 	const placementConfig = placement ? placementMap[placement] : void 0;
 	const [positionerNode, setPositionerNode] = useState(null);
+	const { zIndex, ref: zRef } = useLayerZIndex("floating", typeof style !== "function" && style?.zIndex != null && typeof style.zIndex === "number" ? style.zIndex : void 0);
+	const composedRef = useMergeRefs([setPositionerNode, zRef]);
+	const resolvedStyle = typeof style === "function" ? (state) => ({
+		zIndex,
+		...style(state)
+	}) : {
+		zIndex,
+		...style
+	};
 	return /* @__PURE__ */ jsx(Menu$1.Positioner, {
 		...rest,
 		align: align ?? placementConfig?.align,
 		className: mergeStateClassName(styles.positioner, className),
 		"data-hover-trigger": hoverTrigger || void 0,
 		"data-placement": placement,
-		ref: setPositionerNode,
+		ref: composedRef,
 		side: side ?? placementConfig?.side,
 		sideOffset: sideOffset ?? (placementConfig ? 6 : void 0),
+		style: resolvedStyle,
 		children: /* @__PURE__ */ jsx(FloatingLayerProvider, {
 			value: positionerNode,
 			children

package/es/base-ui/DropdownMenu/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":["Menu"],"sources":["../../../src/base-ui/DropdownMenu/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Menu } from '@base-ui/react/menu';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Switch } from 'antd';\nimport { cx } from 'antd-style';\nimport clsx from 'clsx';\nimport type React from 'react';\nimport { cloneElement, isValidElement, useCallback, useState } from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\nimport { FloatingLayerProvider } from '@/hooks/useFloatingLayer';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { styles } from '@/Menu/sharedStyle';\nimport { CLASSNAMES } from '@/styles/classNames';\nimport { useAppElement } from '@/ThemeProvider';\nimport { placementMap } from '@/utils/placement';\n\nimport { type DropdownMenuPlacement } from './type';\n\nexport const DropdownMenuRoot: typeof Menu.Root = (props) => <Menu.Root modal={false} {...props} />;\nexport const DropdownMenuSubmenuRoot = Menu.SubmenuRoot;\nexport const DropdownMenuCheckboxItemIndicator = Menu.CheckboxItemIndicator;\n\nconst mergeStateClassName = <TState,>(\n  base: string,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  if (typeof className === 'function') return (state: TState) => cx(base, className(state));\n  return cx(base, className);\n};\n\nexport type DropdownMenuTriggerProps = Omit<\n  React.ComponentPropsWithRef<typeof Menu.Trigger>,\n  'children' | 'render'\n> & {\n  children: React.ReactNode;\n};\n\nexport const DropdownMenuTrigger = ({\n  children,\n  className,\n  nativeButton,\n  ref: refProp,\n  ...rest\n}: DropdownMenuTriggerProps) => {\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  const renderer = (props: any) => {\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 props as any;\n      // eslint-disable-next-line unused-imports/no-unused-vars\n      const { type, ...restProps } = props 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: clsx(CLASSNAMES.DropdownMenuTrigger, className, mergedProps.className),\n      ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n    });\n  };\n\n  if (isValidElement(children)) {\n    return <Menu.Trigger {...rest} nativeButton={resolvedNativeButton} render={renderer as any} />;\n  }\n\n  return (\n    <Menu.Trigger\n      {...rest}\n      className={clsx(CLASSNAMES.DropdownMenuTrigger, className)}\n      nativeButton={resolvedNativeButton}\n      ref={refProp as any}\n    >\n      {children}\n    </Menu.Trigger>\n  );\n};\n\nDropdownMenuTrigger.displayName = 'DropdownMenuTrigger';\n\nexport type DropdownMenuPortalProps = React.ComponentProps<typeof Menu.Portal> & {\n  /**\n   * When `container` is not provided, it uses a shared container created by `usePortalContainer`.\n   */\n  container?: HTMLElement | null;\n};\n\nexport const DropdownMenuPortal = ({ container, ...rest }: DropdownMenuPortalProps) => {\n  const appElement = useAppElement();\n  return <Menu.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\nDropdownMenuPortal.displayName = 'DropdownMenuPortal';\n\nexport type DropdownMenuPositionerProps = React.ComponentProps<typeof Menu.Positioner> & {\n  hoverTrigger?: boolean;\n  placement?: DropdownMenuPlacement;\n};\n\nexport const DropdownMenuPositioner = ({\n  className,\n  placement,\n  hoverTrigger,\n  align,\n  side,\n  sideOffset,\n  children,\n  ...rest\n}: DropdownMenuPositionerProps) => {\n  const placementConfig = placement ? placementMap[placement] : undefined;\n  const [positionerNode, setPositionerNode] = useState<HTMLDivElement | null>(null);\n\n  return (\n    <Menu.Positioner\n      {...rest}\n      align={align ?? placementConfig?.align}\n      className={mergeStateClassName(styles.positioner, className as any) as any}\n      data-hover-trigger={hoverTrigger || undefined}\n      data-placement={placement}\n      ref={setPositionerNode}\n      side={side ?? placementConfig?.side}\n      sideOffset={sideOffset ?? (placementConfig ? 6 : undefined)}\n    >\n      <FloatingLayerProvider value={positionerNode}>{children}</FloatingLayerProvider>\n    </Menu.Positioner>\n  );\n};\n\nDropdownMenuPositioner.displayName = 'DropdownMenuPositioner';\n\nexport type DropdownMenuPopupProps = React.ComponentProps<typeof Menu.Popup>;\n\nexport const DropdownMenuPopup = ({ className, ...rest }: DropdownMenuPopupProps) => {\n  return (\n    <Menu.Popup {...rest} className={mergeStateClassName(styles.popup, className as any) as any} />\n  );\n};\n\nDropdownMenuPopup.displayName = 'DropdownMenuPopup';\n\nexport type DropdownMenuItemProps = React.ComponentProps<typeof Menu.Item> & { danger?: boolean };\n\nexport const DropdownMenuItem = ({ className, danger, ...rest }: DropdownMenuItemProps) => {\n  return (\n    <Menu.Item\n      {...rest}\n      className={(state) =>\n        cx(\n          styles.item,\n          danger && styles.danger,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    />\n  );\n};\n\nDropdownMenuItem.displayName = 'DropdownMenuItem';\n\nexport type DropdownMenuCheckboxItemProps = React.ComponentProps<typeof Menu.CheckboxItem> & {\n  danger?: boolean;\n};\n\nexport const DropdownMenuCheckboxItemPrimitive = ({\n  className,\n  danger,\n  ...rest\n}: DropdownMenuCheckboxItemProps) => {\n  return (\n    <Menu.CheckboxItem\n      {...rest}\n      className={(state) =>\n        cx(\n          styles.item,\n          danger && styles.danger,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    />\n  );\n};\n\nDropdownMenuCheckboxItemPrimitive.displayName = 'DropdownMenuCheckboxItemPrimitive';\n\nexport type DropdownMenuSeparatorProps = React.ComponentProps<typeof Menu.Separator>;\n\nexport const DropdownMenuSeparator = ({ className, ...rest }: DropdownMenuSeparatorProps) => {\n  return (\n    <Menu.Separator\n      {...rest}\n      className={(state) =>\n        cx(styles.separator, typeof className === 'function' ? className(state) : className)\n      }\n    />\n  );\n};\n\nDropdownMenuSeparator.displayName = 'DropdownMenuSeparator';\n\nexport const DropdownMenuGroup = Menu.Group;\n\nexport type DropdownMenuGroupLabelProps = React.ComponentProps<typeof Menu.GroupLabel>;\n\nexport const DropdownMenuGroupLabel = ({ className, ...rest }: DropdownMenuGroupLabelProps) => {\n  return (\n    <Menu.GroupLabel\n      {...rest}\n      className={(state) =>\n        cx(styles.groupLabel, typeof className === 'function' ? className(state) : className)\n      }\n    />\n  );\n};\n\nDropdownMenuGroupLabel.displayName = 'DropdownMenuGroupLabel';\n\nexport type DropdownMenuSubmenuTriggerProps = React.ComponentProps<typeof Menu.SubmenuTrigger> & {\n  danger?: boolean;\n};\n\nexport const DropdownMenuSubmenuTrigger = ({\n  className,\n  danger,\n  ...rest\n}: DropdownMenuSubmenuTriggerProps) => {\n  return (\n    <Menu.SubmenuTrigger\n      {...rest}\n      className={(state) =>\n        cx(\n          styles.item,\n          danger && styles.danger,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    />\n  );\n};\n\nDropdownMenuSubmenuTrigger.displayName = 'DropdownMenuSubmenuTrigger';\n\nexport type DropdownMenuItemContentProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuItemContent = ({ className, ...rest }: DropdownMenuItemContentProps) => {\n  return <div {...rest} className={cx(styles.itemContent, className)} />;\n};\n\nDropdownMenuItemContent.displayName = 'DropdownMenuItemContent';\n\nexport type DropdownMenuItemIconProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemIcon = ({ className, ...rest }: DropdownMenuItemIconProps) => {\n  return <span {...rest} className={cx(styles.icon, className)} />;\n};\n\nDropdownMenuItemIcon.displayName = 'DropdownMenuItemIcon';\n\nexport type DropdownMenuItemLabelGroupProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuItemLabelGroup = ({\n  className,\n  ...rest\n}: DropdownMenuItemLabelGroupProps) => {\n  return <div {...rest} className={cx(styles.labelGroup, className)} />;\n};\n\nDropdownMenuItemLabelGroup.displayName = 'DropdownMenuItemLabelGroup';\n\nexport type DropdownMenuItemLabelProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemLabel = ({ className, ...rest }: DropdownMenuItemLabelProps) => {\n  return <span {...rest} className={cx(styles.label, className)} />;\n};\n\nDropdownMenuItemLabel.displayName = 'DropdownMenuItemLabel';\n\nexport type DropdownMenuItemDescProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemDesc = ({ className, ...rest }: DropdownMenuItemDescProps) => {\n  return <span {...rest} className={cx(styles.desc, className)} />;\n};\n\nDropdownMenuItemDesc.displayName = 'DropdownMenuItemDesc';\n\nexport type DropdownMenuItemExtraProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemExtra = ({ className, ...rest }: DropdownMenuItemExtraProps) => {\n  return <span {...rest} className={cx(styles.extra, className)} />;\n};\n\nDropdownMenuItemExtra.displayName = 'DropdownMenuItemExtra';\n\nexport type DropdownMenuSubmenuArrowProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuSubmenuArrow = ({ className, ...rest }: DropdownMenuSubmenuArrowProps) => {\n  return <span {...rest} className={cx(styles.submenuArrow, className)} />;\n};\n\nDropdownMenuSubmenuArrow.displayName = 'DropdownMenuSubmenuArrow';\n\nexport type DropdownMenuSwitchItemProps = Omit<\n  React.ComponentProps<typeof Menu.Item>,\n  'onClick'\n> & {\n  checked?: boolean;\n  closeOnClick?: boolean;\n  danger?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n};\n\nexport const DropdownMenuSwitchItem = ({\n  checked: checkedProp,\n  className,\n  closeOnClick = false,\n  danger,\n  defaultChecked,\n  disabled,\n  onCheckedChange,\n  children,\n  ...rest\n}: DropdownMenuSwitchItemProps) => {\n  const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);\n  const isControlled = checkedProp !== undefined;\n  const checked = isControlled ? checkedProp : internalChecked;\n\n  const handleCheckedChange = useCallback(\n    (newChecked: boolean) => {\n      if (!isControlled) {\n        setInternalChecked(newChecked);\n      }\n      onCheckedChange?.(newChecked);\n    },\n    [isControlled, onCheckedChange],\n  );\n\n  return (\n    <Menu.Item\n      {...rest}\n      closeOnClick={closeOnClick}\n      disabled={disabled}\n      className={(state) =>\n        cx(\n          styles.item,\n          danger && styles.danger,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n      onClick={(e) => {\n        e.preventDefault();\n        if (!disabled) {\n          handleCheckedChange(!checked);\n        }\n      }}\n    >\n      {children}\n      <span\n        style={{ display: 'inline-flex', marginInlineStart: 16 }}\n        onFocus={(e) => e.stopPropagation()}\n      >\n        <Switch\n          checked={checked}\n          disabled={disabled}\n          size=\"small\"\n          tabIndex={-1}\n          onChange={handleCheckedChange}\n          onClick={(_, e) => e.stopPropagation()}\n        />\n      </span>\n    </Menu.Item>\n  );\n};\n\nDropdownMenuSwitchItem.displayName = 'DropdownMenuSwitchItem';\n"],"mappings":"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"}
+{"version":3,"file":"atoms.mjs","names":["Menu"],"sources":["../../../src/base-ui/DropdownMenu/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Menu } from '@base-ui/react/menu';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Switch } from 'antd';\nimport { cx } from 'antd-style';\nimport clsx from 'clsx';\nimport type React from 'react';\nimport { cloneElement, isValidElement, useCallback, useState } from 'react';\nimport { mergeRefs, useMergeRefs } from 'react-merge-refs';\n\nimport { FloatingLayerProvider } from '@/hooks/useFloatingLayer';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { styles } from '@/Menu/sharedStyle';\nimport { CLASSNAMES } from '@/styles/classNames';\nimport { useAppElement } from '@/ThemeProvider';\nimport { placementMap } from '@/utils/placement';\n\nimport { useLayerZIndex } from '../zIndex';\nimport { type DropdownMenuPlacement } from './type';\n\nexport const DropdownMenuRoot: typeof Menu.Root = (props) => <Menu.Root modal={false} {...props} />;\nexport const DropdownMenuSubmenuRoot = Menu.SubmenuRoot;\nexport const DropdownMenuCheckboxItemIndicator = Menu.CheckboxItemIndicator;\n\nconst mergeStateClassName = <TState,>(\n  base: string,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  if (typeof className === 'function') return (state: TState) => cx(base, className(state));\n  return cx(base, className);\n};\n\nexport type DropdownMenuTriggerProps = Omit<\n  React.ComponentPropsWithRef<typeof Menu.Trigger>,\n  'children' | 'render'\n> & {\n  children: React.ReactNode;\n};\n\nexport const DropdownMenuTrigger = ({\n  children,\n  className,\n  nativeButton,\n  ref: refProp,\n  ...rest\n}: DropdownMenuTriggerProps) => {\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  const renderer = (props: any) => {\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 props as any;\n      // eslint-disable-next-line unused-imports/no-unused-vars\n      const { type, ...restProps } = props 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: clsx(CLASSNAMES.DropdownMenuTrigger, className, mergedProps.className),\n      ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n    });\n  };\n\n  if (isValidElement(children)) {\n    return <Menu.Trigger {...rest} nativeButton={resolvedNativeButton} render={renderer as any} />;\n  }\n\n  return (\n    <Menu.Trigger\n      {...rest}\n      className={clsx(CLASSNAMES.DropdownMenuTrigger, className)}\n      nativeButton={resolvedNativeButton}\n      ref={refProp as any}\n    >\n      {children}\n    </Menu.Trigger>\n  );\n};\n\nDropdownMenuTrigger.displayName = 'DropdownMenuTrigger';\n\nexport type DropdownMenuPortalProps = React.ComponentProps<typeof Menu.Portal> & {\n  /**\n   * When `container` is not provided, it uses a shared container created by `usePortalContainer`.\n   */\n  container?: HTMLElement | null;\n};\n\nexport const DropdownMenuPortal = ({ container, ...rest }: DropdownMenuPortalProps) => {\n  const appElement = useAppElement();\n  return <Menu.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\nDropdownMenuPortal.displayName = 'DropdownMenuPortal';\n\nexport type DropdownMenuPositionerProps = React.ComponentProps<typeof Menu.Positioner> & {\n  hoverTrigger?: boolean;\n  placement?: DropdownMenuPlacement;\n};\n\nexport const DropdownMenuPositioner = ({\n  className,\n  placement,\n  hoverTrigger,\n  align,\n  side,\n  sideOffset,\n  children,\n  style,\n  ...rest\n}: DropdownMenuPositionerProps) => {\n  const placementConfig = placement ? placementMap[placement] : undefined;\n  const [positionerNode, setPositionerNode] = useState<HTMLDivElement | null>(null);\n\n  const explicitZIndex =\n    typeof style !== 'function' && style?.zIndex != null && typeof style.zIndex === 'number'\n      ? style.zIndex\n      : undefined;\n  const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating', explicitZIndex);\n  const composedRef = useMergeRefs([setPositionerNode, zRef]);\n\n  const resolvedStyle =\n    typeof style === 'function'\n      ? (state: any) => ({ zIndex, ...style(state) })\n      : { zIndex, ...style };\n\n  return (\n    <Menu.Positioner\n      {...rest}\n      align={align ?? placementConfig?.align}\n      className={mergeStateClassName(styles.positioner, className as any) as any}\n      data-hover-trigger={hoverTrigger || undefined}\n      data-placement={placement}\n      ref={composedRef as any}\n      side={side ?? placementConfig?.side}\n      sideOffset={sideOffset ?? (placementConfig ? 6 : undefined)}\n      style={resolvedStyle}\n    >\n      <FloatingLayerProvider value={positionerNode}>{children}</FloatingLayerProvider>\n    </Menu.Positioner>\n  );\n};\n\nDropdownMenuPositioner.displayName = 'DropdownMenuPositioner';\n\nexport type DropdownMenuPopupProps = React.ComponentProps<typeof Menu.Popup>;\n\nexport const DropdownMenuPopup = ({ className, ...rest }: DropdownMenuPopupProps) => {\n  return (\n    <Menu.Popup {...rest} className={mergeStateClassName(styles.popup, className as any) as any} />\n  );\n};\n\nDropdownMenuPopup.displayName = 'DropdownMenuPopup';\n\nexport type DropdownMenuItemProps = React.ComponentProps<typeof Menu.Item> & { danger?: boolean };\n\nexport const DropdownMenuItem = ({ className, danger, ...rest }: DropdownMenuItemProps) => {\n  return (\n    <Menu.Item\n      {...rest}\n      className={(state) =>\n        cx(\n          styles.item,\n          danger && styles.danger,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    />\n  );\n};\n\nDropdownMenuItem.displayName = 'DropdownMenuItem';\n\nexport type DropdownMenuCheckboxItemProps = React.ComponentProps<typeof Menu.CheckboxItem> & {\n  danger?: boolean;\n};\n\nexport const DropdownMenuCheckboxItemPrimitive = ({\n  className,\n  danger,\n  ...rest\n}: DropdownMenuCheckboxItemProps) => {\n  return (\n    <Menu.CheckboxItem\n      {...rest}\n      className={(state) =>\n        cx(\n          styles.item,\n          danger && styles.danger,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    />\n  );\n};\n\nDropdownMenuCheckboxItemPrimitive.displayName = 'DropdownMenuCheckboxItemPrimitive';\n\nexport type DropdownMenuSeparatorProps = React.ComponentProps<typeof Menu.Separator>;\n\nexport const DropdownMenuSeparator = ({ className, ...rest }: DropdownMenuSeparatorProps) => {\n  return (\n    <Menu.Separator\n      {...rest}\n      className={(state) =>\n        cx(styles.separator, typeof className === 'function' ? className(state) : className)\n      }\n    />\n  );\n};\n\nDropdownMenuSeparator.displayName = 'DropdownMenuSeparator';\n\nexport const DropdownMenuGroup = Menu.Group;\n\nexport type DropdownMenuGroupLabelProps = React.ComponentProps<typeof Menu.GroupLabel>;\n\nexport const DropdownMenuGroupLabel = ({ className, ...rest }: DropdownMenuGroupLabelProps) => {\n  return (\n    <Menu.GroupLabel\n      {...rest}\n      className={(state) =>\n        cx(styles.groupLabel, typeof className === 'function' ? className(state) : className)\n      }\n    />\n  );\n};\n\nDropdownMenuGroupLabel.displayName = 'DropdownMenuGroupLabel';\n\nexport type DropdownMenuSubmenuTriggerProps = React.ComponentProps<typeof Menu.SubmenuTrigger> & {\n  danger?: boolean;\n};\n\nexport const DropdownMenuSubmenuTrigger = ({\n  className,\n  danger,\n  ...rest\n}: DropdownMenuSubmenuTriggerProps) => {\n  return (\n    <Menu.SubmenuTrigger\n      {...rest}\n      className={(state) =>\n        cx(\n          styles.item,\n          danger && styles.danger,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    />\n  );\n};\n\nDropdownMenuSubmenuTrigger.displayName = 'DropdownMenuSubmenuTrigger';\n\nexport type DropdownMenuItemContentProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuItemContent = ({ className, ...rest }: DropdownMenuItemContentProps) => {\n  return <div {...rest} className={cx(styles.itemContent, className)} />;\n};\n\nDropdownMenuItemContent.displayName = 'DropdownMenuItemContent';\n\nexport type DropdownMenuItemIconProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemIcon = ({ className, ...rest }: DropdownMenuItemIconProps) => {\n  return <span {...rest} className={cx(styles.icon, className)} />;\n};\n\nDropdownMenuItemIcon.displayName = 'DropdownMenuItemIcon';\n\nexport type DropdownMenuItemLabelGroupProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuItemLabelGroup = ({\n  className,\n  ...rest\n}: DropdownMenuItemLabelGroupProps) => {\n  return <div {...rest} className={cx(styles.labelGroup, className)} />;\n};\n\nDropdownMenuItemLabelGroup.displayName = 'DropdownMenuItemLabelGroup';\n\nexport type DropdownMenuItemLabelProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemLabel = ({ className, ...rest }: DropdownMenuItemLabelProps) => {\n  return <span {...rest} className={cx(styles.label, className)} />;\n};\n\nDropdownMenuItemLabel.displayName = 'DropdownMenuItemLabel';\n\nexport type DropdownMenuItemDescProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemDesc = ({ className, ...rest }: DropdownMenuItemDescProps) => {\n  return <span {...rest} className={cx(styles.desc, className)} />;\n};\n\nDropdownMenuItemDesc.displayName = 'DropdownMenuItemDesc';\n\nexport type DropdownMenuItemExtraProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemExtra = ({ className, ...rest }: DropdownMenuItemExtraProps) => {\n  return <span {...rest} className={cx(styles.extra, className)} />;\n};\n\nDropdownMenuItemExtra.displayName = 'DropdownMenuItemExtra';\n\nexport type DropdownMenuSubmenuArrowProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuSubmenuArrow = ({ className, ...rest }: DropdownMenuSubmenuArrowProps) => {\n  return <span {...rest} className={cx(styles.submenuArrow, className)} />;\n};\n\nDropdownMenuSubmenuArrow.displayName = 'DropdownMenuSubmenuArrow';\n\nexport type DropdownMenuSwitchItemProps = Omit<\n  React.ComponentProps<typeof Menu.Item>,\n  'onClick'\n> & {\n  checked?: boolean;\n  closeOnClick?: boolean;\n  danger?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n};\n\nexport const DropdownMenuSwitchItem = ({\n  checked: checkedProp,\n  className,\n  closeOnClick = false,\n  danger,\n  defaultChecked,\n  disabled,\n  onCheckedChange,\n  children,\n  ...rest\n}: DropdownMenuSwitchItemProps) => {\n  const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);\n  const isControlled = checkedProp !== undefined;\n  const checked = isControlled ? checkedProp : internalChecked;\n\n  const handleCheckedChange = useCallback(\n    (newChecked: boolean) => {\n      if (!isControlled) {\n        setInternalChecked(newChecked);\n      }\n      onCheckedChange?.(newChecked);\n    },\n    [isControlled, onCheckedChange],\n  );\n\n  return (\n    <Menu.Item\n      {...rest}\n      closeOnClick={closeOnClick}\n      disabled={disabled}\n      className={(state) =>\n        cx(\n          styles.item,\n          danger && styles.danger,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n      onClick={(e) => {\n        e.preventDefault();\n        if (!disabled) {\n          handleCheckedChange(!checked);\n        }\n      }}\n    >\n      {children}\n      <span\n        style={{ display: 'inline-flex', marginInlineStart: 16 }}\n        onFocus={(e) => e.stopPropagation()}\n      >\n        <Switch\n          checked={checked}\n          disabled={disabled}\n          size=\"small\"\n          tabIndex={-1}\n          onChange={handleCheckedChange}\n          onClick={(_, e) => e.stopPropagation()}\n        />\n      </span>\n    </Menu.Item>\n  );\n};\n\nDropdownMenuSwitchItem.displayName = 'DropdownMenuSwitchItem';\n"],"mappings":"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"}

package/es/base-ui/Modal/Modal.mjs

@@ -3,7 +3,6 @@ import { safeReadableColor } from "../../utils/safeReadableColor.mjs";
 import { stopPropagation } from "../../utils/dom.mjs";
 import { styles } from "./style.mjs";
 import { ModalBackdrop, ModalContent, ModalFooter, ModalHeader, ModalPopup, ModalPortal, ModalRoot, ModalTitle } from "./atoms.mjs";
-import { acquireModalZIndex } from "./zIndexManager.mjs";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { cx, useTheme } from "antd-style";
@@ -132,13 +131,6 @@ const Modal = memo(({ open, title, children, onOk, onCancel, okText = "OK", canc
 		handleOk
 	]);
 	const container = getContainer === false ? void 0 : getContainer ?? void 0;
-	const prevOpenRef = useRef(false);
-	const acquiredZRef = useRef(void 0);
-	if (open && !prevOpenRef.current) acquiredZRef.current = acquireModalZIndex();
-	prevOpenRef.current = !!open;
-	const effectiveZIndex = zIndex ?? acquiredZRef.current;
-	const backdropZIndex = effectiveZIndex ? { zIndex: effectiveZIndex } : void 0;
-	const popupZIndex = effectiveZIndex ? { zIndex: effectiveZIndex + 1 } : void 0;
 	const shouldDrag = draggable && !isFullscreen;
 	const dragProps = shouldDrag ? {
 		drag: true,
@@ -158,22 +150,17 @@ const Modal = memo(({ open, title, children, onOk, onCancel, okText = "OK", canc
 	};
 	return /* @__PURE__ */ jsx(ModalRoot, {
 		open: open ?? false,
+		zIndex,
 		onExitComplete: handleExitComplete,
 		onOpenChange: handleOpenChange,
 		children: /* @__PURE__ */ jsxs(ModalPortal, {
 			container,
 			children: [mask && /* @__PURE__ */ jsx(ModalBackdrop, {
 				className: classNames?.mask,
-				style: {
-					...backdropZIndex,
-					...semanticStyles?.mask
-				}
+				style: semanticStyles?.mask
 			}), /* @__PURE__ */ jsxs(ModalPopup, {
 				className: classNames?.wrapper,
-				popupStyle: {
-					...popupZIndex,
-					...semanticStyles?.wrapper
-				},
+				popupStyle: semanticStyles?.wrapper,
 				ref: constraintsRef,
 				style: panelStyle,
 				width: isFullscreen ? void 0 : width,

package/es/base-ui/Modal/Modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.mjs","names":[],"sources":["../../../src/base-ui/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useTheme } from 'antd-style';\nimport { Maximize2, Minimize2, X } from 'lucide-react';\nimport { useDragControls } from 'motion/react';\nimport type { MouseEvent, PointerEvent } from 'react';\nimport type React from 'react';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { stopPropagation } from '@/utils/dom';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport {\n  ModalBackdrop,\n  ModalContent,\n  ModalFooter,\n  ModalHeader,\n  ModalPopup,\n  ModalPortal,\n  ModalRoot,\n  ModalTitle,\n} from './atoms';\nimport { styles } from './style';\nimport type { ModalComponentProps } from './type';\nimport { acquireModalZIndex } from './zIndexManager';\n\ninterface OkBtnProps {\n  confirmLoading?: boolean;\n  okButtonProps?: ModalComponentProps['okButtonProps'];\n  okText?: React.ReactNode;\n  onOk: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst OkBtn: React.FC<OkBtnProps> = ({ confirmLoading, okButtonProps, okText, onOk }) => {\n  const theme = useTheme();\n  const {\n    className: userCls,\n    danger,\n    disabled: userDisabled,\n    onClick: userOnClick,\n    style: userStyle,\n    ...restOk\n  } = okButtonProps ?? {};\n  const bgColor = danger ? theme.colorError : theme.colorPrimary;\n  const textColor = safeReadableColor(bgColor);\n  return (\n    <button\n      type=\"button\"\n      {...restOk}\n      className={cx(styles.buttonBase, danger ? styles.dangerOkButton : styles.okButton, userCls)}\n      disabled={confirmLoading || userDisabled}\n      style={{ color: textColor, ...userStyle }}\n      onClick={(e) => {\n        onOk(e);\n        userOnClick?.(e);\n      }}\n    >\n      {confirmLoading && <span className={styles.loadingSpinner} />}\n      {okText}\n    </button>\n  );\n};\ninterface CancelBtnProps {\n  cancelButtonProps?: ModalComponentProps['cancelButtonProps'];\n  cancelText?: React.ReactNode;\n  onCancel: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst CancelBtn: React.FC<CancelBtnProps> = ({ cancelButtonProps, cancelText, onCancel }) => {\n  const { className: userCls, onClick: userOnClick, ...restCancel } = cancelButtonProps ?? {};\n  return (\n    <button\n      type=\"button\"\n      {...restCancel}\n      className={cx(styles.buttonBase, styles.cancelButton, userCls)}\n      onClick={(e) => {\n        onCancel(e);\n        userOnClick?.(e);\n      }}\n    >\n      {cancelText}\n    </button>\n  );\n};\n\nconst Modal = memo<ModalComponentProps>(\n  ({\n    open,\n    title,\n    children,\n    onOk,\n    onCancel,\n    okText = 'OK',\n    cancelText = 'Cancel',\n    okButtonProps,\n    cancelButtonProps,\n    confirmLoading,\n    footer,\n    width,\n    height,\n    maskClosable = true,\n    closable = true,\n    closeIcon,\n    className,\n    style,\n    classNames,\n    styles: semanticStyles,\n    zIndex,\n    afterClose,\n    afterOpenChange,\n    loading,\n    getContainer,\n    mask = true,\n    keyboard,\n    draggable = true,\n    allowFullscreen = false,\n  }) => {\n    const dragControls = useDragControls();\n    const constraintsRef = useRef<HTMLDivElement>(null);\n    const [isFullscreen, setIsFullscreen] = useState(false);\n    const [isDragging, setIsDragging] = useState(false);\n    const [isDenying, setIsDenying] = useState(false);\n    const denyTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n    useEffect(() => () => clearTimeout(denyTimerRef.current), []);\n\n    const triggerDeny = useCallback(() => {\n      clearTimeout(denyTimerRef.current);\n      setIsDenying(true);\n      denyTimerRef.current = setTimeout(() => setIsDenying(false), 400);\n    }, []);\n\n    const handleOpenChange = useCallback(\n      (nextOpen: boolean, eventDetails: { reason: string }) => {\n        if (!open) return;\n        if (!nextOpen && keyboard === false && eventDetails.reason === 'escape-key') return;\n        if (!nextOpen && !maskClosable && eventDetails.reason === 'outside-press') {\n          triggerDeny();\n          return;\n        }\n        if (!nextOpen) {\n          onCancel?.(new MouseEvent('click') as unknown as MouseEvent<HTMLButtonElement>);\n        }\n      },\n      [onCancel, keyboard, maskClosable, open, triggerDeny],\n    );\n\n    const handleExitComplete = useCallback(() => {\n      setIsFullscreen(false);\n      afterClose?.();\n      afterOpenChange?.(false);\n    }, [afterClose, afterOpenChange]);\n\n    const handleAnimationComplete = useCallback(() => {\n      if (open) afterOpenChange?.(true);\n    }, [open, afterOpenChange]);\n\n    const handleDragStart = useCallback(\n      (e: PointerEvent) => {\n        if (draggable && !isFullscreen) {\n          dragControls.start(e);\n          setIsDragging(true);\n        }\n      },\n      [draggable, dragControls, isFullscreen],\n    );\n\n    const handleDragEnd = useCallback(() => {\n      setIsDragging(false);\n    }, []);\n\n    const handleOk = useCallback(\n      (e: MouseEvent<HTMLButtonElement>) => {\n        onOk?.(e);\n      },\n      [onOk],\n    );\n\n    const handleCancel = useCallback(\n      (e: MouseEvent<HTMLButtonElement>) => {\n        onCancel?.(e);\n      },\n      [onCancel],\n    );\n\n    const footerNode = useMemo(() => {\n      if (footer === false || footer === null) return null;\n      const cancelBtnNode = (\n        <CancelBtn\n          cancelButtonProps={cancelButtonProps}\n          cancelText={cancelText}\n          onCancel={handleCancel}\n        />\n      );\n      const okBtnNode = (\n        <OkBtn\n          confirmLoading={confirmLoading}\n          okButtonProps={okButtonProps}\n          okText={okText}\n          onOk={handleOk}\n        />\n      );\n      const defaultFooter = (\n        <>\n          {cancelBtnNode}\n          {okBtnNode}\n        </>\n      );\n\n      if (typeof footer === 'function') {\n        const BoundCancelBtn: React.FC = () => cancelBtnNode;\n        const BoundOkBtn: React.FC = () => okBtnNode;\n        return footer(defaultFooter, { CancelBtn: BoundCancelBtn, OkBtn: BoundOkBtn });\n      }\n\n      return footer ?? defaultFooter;\n    }, [\n      footer,\n      cancelButtonProps,\n      cancelText,\n      handleCancel,\n      confirmLoading,\n      okButtonProps,\n      okText,\n      handleOk,\n    ]);\n\n    const container = getContainer === false ? undefined : (getContainer ?? undefined);\n\n    const prevOpenRef = useRef(false);\n    const acquiredZRef = useRef<number | undefined>(undefined);\n    if (open && !prevOpenRef.current) {\n      acquiredZRef.current = acquireModalZIndex();\n    }\n    prevOpenRef.current = !!open;\n    const effectiveZIndex = zIndex ?? acquiredZRef.current;\n    const backdropZIndex = effectiveZIndex ? { zIndex: effectiveZIndex } : undefined;\n    const popupZIndex = effectiveZIndex ? { zIndex: effectiveZIndex + 1 } : undefined;\n\n    const shouldDrag = draggable && !isFullscreen;\n    const dragProps = shouldDrag\n      ? {\n          drag: true as const,\n          dragConstraints: constraintsRef,\n          dragControls,\n          dragElastic: 0,\n          dragListener: false,\n          dragMomentum: false,\n          whileDrag: { cursor: 'grabbing' as const },\n        }\n      : {};\n\n    const showTitle = title !== undefined && title !== false && title !== null;\n    const showHeader = showTitle || closable || allowFullscreen;\n\n    const hasHeight = height !== undefined;\n    const panelStyle: React.CSSProperties = {\n      ...(hasHeight && !isFullscreen ? { height } : {}),\n      ...style,\n    };\n\n    return (\n      <ModalRoot\n        open={open ?? false}\n        onExitComplete={handleExitComplete}\n        onOpenChange={handleOpenChange}\n      >\n        <ModalPortal container={container}>\n          {mask && (\n            <ModalBackdrop\n              className={classNames?.mask}\n              style={{ ...backdropZIndex, ...semanticStyles?.mask }}\n            />\n          )}\n          <ModalPopup\n            className={classNames?.wrapper}\n            popupStyle={{ ...popupZIndex, ...semanticStyles?.wrapper }}\n            ref={constraintsRef}\n            style={panelStyle}\n            width={isFullscreen ? undefined : width}\n            motionProps={{\n              ...dragProps,\n              onAnimationComplete: handleAnimationComplete,\n            }}\n            panelClassName={cx(\n              className,\n              isFullscreen && styles.fullscreenPopupInner,\n              isDenying && styles.denyAnimation,\n            )}\n          >\n            {showHeader && (\n              <ModalHeader\n                className={cx(classNames?.header, shouldDrag && styles.headerDraggable)}\n                style={{\n                  ...(isDragging ? { cursor: 'grabbing' } : {}),\n                  ...semanticStyles?.header,\n                }}\n                onPointerCancel={handleDragEnd}\n                onPointerDown={handleDragStart}\n                onPointerUp={handleDragEnd}\n              >\n                {showTitle ? (\n                  <ModalTitle className={classNames?.title} style={semanticStyles?.title}>\n                    {title}\n                  </ModalTitle>\n                ) : (\n                  <span />\n                )}\n                <div className={styles.headerActions} onPointerDown={stopPropagation}>\n                  {allowFullscreen && (\n                    <button\n                      aria-label={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}\n                      className={styles.fullscreenToggle}\n                      type=\"button\"\n                      onClick={() => setIsFullscreen((prev) => !prev)}\n                    >\n                      {isFullscreen ? <Minimize2 size={14} /> : <Maximize2 size={14} />}\n                    </button>\n                  )}\n                  {closable && (\n                    <button\n                      aria-label=\"Close\"\n                      className={styles.closeInline}\n                      type=\"button\"\n                      onClick={handleCancel}\n                    >\n                      {closeIcon ?? <X size={18} />}\n                    </button>\n                  )}\n                </div>\n              </ModalHeader>\n            )}\n            <ModalContent\n              className={classNames?.body}\n              style={{\n                ...(hasHeight || isFullscreen ? { flex: 1 } : {}),\n                ...semanticStyles?.body,\n              }}\n            >\n              {loading ? (\n                <div\n                  style={{\n                    display: 'flex',\n                    justifyContent: 'center',\n                    padding: '32px 0',\n                  }}\n                >\n                  <span className={styles.loadingSpinner} style={{ height: 24, width: 24 }} />\n                </div>\n              ) : (\n                children\n              )}\n            </ModalContent>\n            {footerNode !== null && (\n              <ModalFooter className={classNames?.footer} style={semanticStyles?.footer}>\n                {footerNode}\n              </ModalFooter>\n            )}\n          </ModalPopup>\n        </ModalPortal>\n      </ModalRoot>\n    );\n  },\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":"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"}
+{"version":3,"file":"Modal.mjs","names":[],"sources":["../../../src/base-ui/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useTheme } from 'antd-style';\nimport { Maximize2, Minimize2, X } from 'lucide-react';\nimport { useDragControls } from 'motion/react';\nimport type { MouseEvent, PointerEvent } from 'react';\nimport type React from 'react';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { stopPropagation } from '@/utils/dom';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport {\n  ModalBackdrop,\n  ModalContent,\n  ModalFooter,\n  ModalHeader,\n  ModalPopup,\n  ModalPortal,\n  ModalRoot,\n  ModalTitle,\n} from './atoms';\nimport { styles } from './style';\nimport type { ModalComponentProps } from './type';\n\ninterface OkBtnProps {\n  confirmLoading?: boolean;\n  okButtonProps?: ModalComponentProps['okButtonProps'];\n  okText?: React.ReactNode;\n  onOk: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst OkBtn: React.FC<OkBtnProps> = ({ confirmLoading, okButtonProps, okText, onOk }) => {\n  const theme = useTheme();\n  const {\n    className: userCls,\n    danger,\n    disabled: userDisabled,\n    onClick: userOnClick,\n    style: userStyle,\n    ...restOk\n  } = okButtonProps ?? {};\n  const bgColor = danger ? theme.colorError : theme.colorPrimary;\n  const textColor = safeReadableColor(bgColor);\n  return (\n    <button\n      type=\"button\"\n      {...restOk}\n      className={cx(styles.buttonBase, danger ? styles.dangerOkButton : styles.okButton, userCls)}\n      disabled={confirmLoading || userDisabled}\n      style={{ color: textColor, ...userStyle }}\n      onClick={(e) => {\n        onOk(e);\n        userOnClick?.(e);\n      }}\n    >\n      {confirmLoading && <span className={styles.loadingSpinner} />}\n      {okText}\n    </button>\n  );\n};\ninterface CancelBtnProps {\n  cancelButtonProps?: ModalComponentProps['cancelButtonProps'];\n  cancelText?: React.ReactNode;\n  onCancel: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst CancelBtn: React.FC<CancelBtnProps> = ({ cancelButtonProps, cancelText, onCancel }) => {\n  const { className: userCls, onClick: userOnClick, ...restCancel } = cancelButtonProps ?? {};\n  return (\n    <button\n      type=\"button\"\n      {...restCancel}\n      className={cx(styles.buttonBase, styles.cancelButton, userCls)}\n      onClick={(e) => {\n        onCancel(e);\n        userOnClick?.(e);\n      }}\n    >\n      {cancelText}\n    </button>\n  );\n};\n\nconst Modal = memo<ModalComponentProps>(\n  ({\n    open,\n    title,\n    children,\n    onOk,\n    onCancel,\n    okText = 'OK',\n    cancelText = 'Cancel',\n    okButtonProps,\n    cancelButtonProps,\n    confirmLoading,\n    footer,\n    width,\n    height,\n    maskClosable = true,\n    closable = true,\n    closeIcon,\n    className,\n    style,\n    classNames,\n    styles: semanticStyles,\n    zIndex,\n    afterClose,\n    afterOpenChange,\n    loading,\n    getContainer,\n    mask = true,\n    keyboard,\n    draggable = true,\n    allowFullscreen = false,\n  }) => {\n    const dragControls = useDragControls();\n    const constraintsRef = useRef<HTMLDivElement>(null);\n    const [isFullscreen, setIsFullscreen] = useState(false);\n    const [isDragging, setIsDragging] = useState(false);\n    const [isDenying, setIsDenying] = useState(false);\n    const denyTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n    useEffect(() => () => clearTimeout(denyTimerRef.current), []);\n\n    const triggerDeny = useCallback(() => {\n      clearTimeout(denyTimerRef.current);\n      setIsDenying(true);\n      denyTimerRef.current = setTimeout(() => setIsDenying(false), 400);\n    }, []);\n\n    const handleOpenChange = useCallback(\n      (nextOpen: boolean, eventDetails: { reason: string }) => {\n        if (!open) return;\n        if (!nextOpen && keyboard === false && eventDetails.reason === 'escape-key') return;\n        if (!nextOpen && !maskClosable && eventDetails.reason === 'outside-press') {\n          triggerDeny();\n          return;\n        }\n        if (!nextOpen) {\n          onCancel?.(new MouseEvent('click') as unknown as MouseEvent<HTMLButtonElement>);\n        }\n      },\n      [onCancel, keyboard, maskClosable, open, triggerDeny],\n    );\n\n    const handleExitComplete = useCallback(() => {\n      setIsFullscreen(false);\n      afterClose?.();\n      afterOpenChange?.(false);\n    }, [afterClose, afterOpenChange]);\n\n    const handleAnimationComplete = useCallback(() => {\n      if (open) afterOpenChange?.(true);\n    }, [open, afterOpenChange]);\n\n    const handleDragStart = useCallback(\n      (e: PointerEvent) => {\n        if (draggable && !isFullscreen) {\n          dragControls.start(e);\n          setIsDragging(true);\n        }\n      },\n      [draggable, dragControls, isFullscreen],\n    );\n\n    const handleDragEnd = useCallback(() => {\n      setIsDragging(false);\n    }, []);\n\n    const handleOk = useCallback(\n      (e: MouseEvent<HTMLButtonElement>) => {\n        onOk?.(e);\n      },\n      [onOk],\n    );\n\n    const handleCancel = useCallback(\n      (e: MouseEvent<HTMLButtonElement>) => {\n        onCancel?.(e);\n      },\n      [onCancel],\n    );\n\n    const footerNode = useMemo(() => {\n      if (footer === false || footer === null) return null;\n      const cancelBtnNode = (\n        <CancelBtn\n          cancelButtonProps={cancelButtonProps}\n          cancelText={cancelText}\n          onCancel={handleCancel}\n        />\n      );\n      const okBtnNode = (\n        <OkBtn\n          confirmLoading={confirmLoading}\n          okButtonProps={okButtonProps}\n          okText={okText}\n          onOk={handleOk}\n        />\n      );\n      const defaultFooter = (\n        <>\n          {cancelBtnNode}\n          {okBtnNode}\n        </>\n      );\n\n      if (typeof footer === 'function') {\n        const BoundCancelBtn: React.FC = () => cancelBtnNode;\n        const BoundOkBtn: React.FC = () => okBtnNode;\n        return footer(defaultFooter, { CancelBtn: BoundCancelBtn, OkBtn: BoundOkBtn });\n      }\n\n      return footer ?? defaultFooter;\n    }, [\n      footer,\n      cancelButtonProps,\n      cancelText,\n      handleCancel,\n      confirmLoading,\n      okButtonProps,\n      okText,\n      handleOk,\n    ]);\n\n    const container = getContainer === false ? undefined : (getContainer ?? undefined);\n\n    const shouldDrag = draggable && !isFullscreen;\n    const dragProps = shouldDrag\n      ? {\n          drag: true as const,\n          dragConstraints: constraintsRef,\n          dragControls,\n          dragElastic: 0,\n          dragListener: false,\n          dragMomentum: false,\n          whileDrag: { cursor: 'grabbing' as const },\n        }\n      : {};\n\n    const showTitle = title !== undefined && title !== false && title !== null;\n    const showHeader = showTitle || closable || allowFullscreen;\n\n    const hasHeight = height !== undefined;\n    const panelStyle: React.CSSProperties = {\n      ...(hasHeight && !isFullscreen ? { height } : {}),\n      ...style,\n    };\n\n    return (\n      <ModalRoot\n        open={open ?? false}\n        zIndex={zIndex}\n        onExitComplete={handleExitComplete}\n        onOpenChange={handleOpenChange}\n      >\n        <ModalPortal container={container}>\n          {mask && <ModalBackdrop className={classNames?.mask} style={semanticStyles?.mask} />}\n          <ModalPopup\n            className={classNames?.wrapper}\n            popupStyle={semanticStyles?.wrapper}\n            ref={constraintsRef}\n            style={panelStyle}\n            width={isFullscreen ? undefined : width}\n            motionProps={{\n              ...dragProps,\n              onAnimationComplete: handleAnimationComplete,\n            }}\n            panelClassName={cx(\n              className,\n              isFullscreen && styles.fullscreenPopupInner,\n              isDenying && styles.denyAnimation,\n            )}\n          >\n            {showHeader && (\n              <ModalHeader\n                className={cx(classNames?.header, shouldDrag && styles.headerDraggable)}\n                style={{\n                  ...(isDragging ? { cursor: 'grabbing' } : {}),\n                  ...semanticStyles?.header,\n                }}\n                onPointerCancel={handleDragEnd}\n                onPointerDown={handleDragStart}\n                onPointerUp={handleDragEnd}\n              >\n                {showTitle ? (\n                  <ModalTitle className={classNames?.title} style={semanticStyles?.title}>\n                    {title}\n                  </ModalTitle>\n                ) : (\n                  <span />\n                )}\n                <div className={styles.headerActions} onPointerDown={stopPropagation}>\n                  {allowFullscreen && (\n                    <button\n                      aria-label={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}\n                      className={styles.fullscreenToggle}\n                      type=\"button\"\n                      onClick={() => setIsFullscreen((prev) => !prev)}\n                    >\n                      {isFullscreen ? <Minimize2 size={14} /> : <Maximize2 size={14} />}\n                    </button>\n                  )}\n                  {closable && (\n                    <button\n                      aria-label=\"Close\"\n                      className={styles.closeInline}\n                      type=\"button\"\n                      onClick={handleCancel}\n                    >\n                      {closeIcon ?? <X size={18} />}\n                    </button>\n                  )}\n                </div>\n              </ModalHeader>\n            )}\n            <ModalContent\n              className={classNames?.body}\n              style={{\n                ...(hasHeight || isFullscreen ? { flex: 1 } : {}),\n                ...semanticStyles?.body,\n              }}\n            >\n              {loading ? (\n                <div\n                  style={{\n                    display: 'flex',\n                    justifyContent: 'center',\n                    padding: '32px 0',\n                  }}\n                >\n                  <span className={styles.loadingSpinner} style={{ height: 24, width: 24 }} />\n                </div>\n              ) : (\n                children\n              )}\n            </ModalContent>\n            {footerNode !== null && (\n              <ModalFooter className={classNames?.footer} style={semanticStyles?.footer}>\n                {footerNode}\n              </ModalFooter>\n            )}\n          </ModalPopup>\n        </ModalPortal>\n      </ModalRoot>\n    );\n  },\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":"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"}

package/es/base-ui/Modal/ModalLayerContext.mjs

@@ -0,0 +1,10 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/base-ui/Modal/ModalLayerContext.tsx
+const ModalLayerContext = createContext(null);
+const useModalLayer = () => use(ModalLayerContext);
+const ModalLayerProvider = ModalLayerContext.Provider;
+//#endregion
+export { ModalLayerProvider, useModalLayer };
+
+//# sourceMappingURL=ModalLayerContext.mjs.map

package/es/base-ui/Modal/ModalLayerContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalLayerContext.mjs","names":[],"sources":["../../../src/base-ui/Modal/ModalLayerContext.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, use } from 'react';\n\nexport interface ModalLayer {\n  popupRef: (node: HTMLElement | null) => void;\n  zIndex: number | undefined;\n}\n\nconst ModalLayerContext = createContext<ModalLayer | null>(null);\n\nexport const useModalLayer = () => use(ModalLayerContext);\nexport const ModalLayerProvider = ModalLayerContext.Provider;\n"],"mappings":";;;AASA,MAAM,oBAAoB,cAAiC,KAAK;AAEhE,MAAa,sBAAsB,IAAI,kBAAkB;AACzD,MAAa,qBAAqB,kBAAkB"}

package/es/base-ui/Modal/atoms.d.mts

@@ -10,6 +10,7 @@ declare const useModalOpen: () => boolean | null;
 declare const useModalActions: () => ModalAnimationActions | null;
 type ModalRootProps = Dialog.Root.Props & {
   onExitComplete?: () => void;
+  zIndex?: number;
 };
 declare const ModalRoot: ({
   open,
@@ -48,6 +49,7 @@ declare const ModalPopup: ({
   motionProps,
   panelClassName,
   popupStyle,
+  ref: forwardedRef,
   ...rest
 }: ModalPopupProps) => _$react_jsx_runtime0.JSX.Element;
 type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement> & {

package/es/base-ui/Modal/atoms.mjs

@@ -2,14 +2,16 @@
 import { useMotionComponent } from "../../MotionProvider/index.mjs";
 import { useNativeButton } from "../../hooks/useNativeButton.mjs";
 import { useAppElement } from "../../ThemeProvider/AppElementContext.mjs";
+import { useLayerZIndex } from "../zIndex/useLayerZIndex.mjs";
 import { backdropTransition, modalMotionConfig } from "./constants.mjs";
+import { ModalLayerProvider, useModalLayer } from "./ModalLayerContext.mjs";
 import { styles } from "./style.mjs";
 import { cloneElement, createContext, createElement, isValidElement, use, useCallback, useEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { cx } from "antd-style";
 import { AnimatePresence } from "motion/react";
 import { mergeProps } from "@base-ui/react/merge-props";
-import { mergeRefs } from "react-merge-refs";
+import { mergeRefs, useMergeRefs } from "react-merge-refs";
 import { X } from "lucide-react";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/base-ui/Modal/atoms.tsx
@@ -21,7 +23,7 @@ const ModalOpenContext = createContext(null);
 const ModalActionsContext = createContext(null);
 const useModalOpen = () => use(ModalOpenContext);
 const useModalActions = () => use(ModalActionsContext);
-const AnimatedModalRoot = ({ open, children, onExitComplete: onExitCompleteProp, ...rest }) => {
+const AnimatedModalRoot = ({ open, children, onExitComplete: onExitCompleteProp, zIndex: explicitZIndex, ...rest }) => {
 	const [isPresent, setIsPresent] = useState(!!open);
 	useEffect(() => {
 		if (open) setIsPresent(true);
@@ -31,30 +33,49 @@ const AnimatedModalRoot = ({ open, children, onExitComplete: onExitCompleteProp,
 		onExitCompleteProp?.();
 	}, [onExitCompleteProp]);
 	const actions = useMemo(() => ({ onExitComplete: handleExitComplete }), [handleExitComplete]);
+	const { zIndex, ref: popupRef } = useLayerZIndex("modal", explicitZIndex);
+	const layer = useMemo(() => ({
+		popupRef,
+		zIndex
+	}), [zIndex, popupRef]);
 	if (!isPresent) return null;
 	return /* @__PURE__ */ jsx(ModalOpenContext, {
 		value: open,
 		children: /* @__PURE__ */ jsx(ModalActionsContext, {
 			value: actions,
-			children: /* @__PURE__ */ jsx(Dialog.Root, {
-				modal: true,
-				open: true,
-				...rest,
-				children
+			children: /* @__PURE__ */ jsx(ModalLayerProvider, {
+				value: layer,
+				children: /* @__PURE__ */ jsx(Dialog.Root, {
+					modal: true,
+					open: true,
+					...rest,
+					children
+				})
 			})
 		})
 	});
 };
+const NonAnimatedModalRoot = ({ zIndex: explicitZIndex, children, ...rest }) => {
+	const { zIndex, ref: popupRef } = useLayerZIndex("modal", explicitZIndex);
+	return /* @__PURE__ */ jsx(ModalLayerProvider, {
+		value: useMemo(() => ({
+			popupRef,
+			zIndex
+		}), [zIndex, popupRef]),
+		children: /* @__PURE__ */ jsx(Dialog.Root, {
+			modal: true,
+			...rest,
+			children
+		})
+	});
+};
 const ModalRoot = ({ open, onExitComplete, ...rest }) => {
 	if (open !== void 0) return /* @__PURE__ */ jsx(AnimatedModalRoot, {
 		open,
 		onExitComplete,
 		...rest
 	});
-	return /* @__PURE__ */ jsx(Dialog.Root, {
-		modal: true,
-		...rest
-	});
+	return /* @__PURE__ */ jsx(NonAnimatedModalRoot, { ...rest });
 };
 const ModalPortal = ({ container, ...rest }) => {
 	const appElement = useAppElement();
@@ -69,11 +90,14 @@ const ModalViewport = ({ className, ...rest }) => /* @__PURE__ */ jsx(Dialog.Vie
 });
 const ModalBackdrop = ({ className, style, ...rest }) => {
 	const open = useModalOpen();
+	const layer = useModalLayer();
 	const Motion = useMotionComponent();
+	const layerStyle = layer?.zIndex !== void 0 ? { zIndex: layer.zIndex } : void 0;
 	if (open !== null) return /* @__PURE__ */ jsx(Dialog.Backdrop, {
 		...rest,
 		className: cx(styles.backdrop, className),
 		style: {
+			...layerStyle,
 			...style,
 			transition: "none"
 		},
@@ -86,17 +110,27 @@ const ModalBackdrop = ({ className, style, ...rest }) => {
 	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
 		...rest,
 		className: mergeStateClassName(styles.backdrop, className),
-		style
+		style: {
+			...layerStyle,
+			...style
+		}
 	});
 };
-const ModalPopup = ({ className, children, width, style, motionProps, panelClassName, popupStyle, ...rest }) => {
+const ModalPopup = ({ className, children, width, style, motionProps, panelClassName, popupStyle, ref: forwardedRef, ...rest }) => {
 	const open = useModalOpen();
 	const actions = useModalActions();
+	const layer = useModalLayer();
 	const Motion = useMotionComponent();
+	const popupZIndexStyle = layer?.zIndex !== void 0 ? { zIndex: layer.zIndex + 1 } : void 0;
+	const composedRef = useMergeRefs([forwardedRef, layer?.popupRef]);
 	if (open !== null && actions) return /* @__PURE__ */ jsx(Dialog.Popup, {
 		...rest,
 		className: cx(styles.popup, className),
-		style: popupStyle,
+		ref: composedRef,
+		style: {
+			...popupZIndexStyle,
+			...popupStyle
+		},
 		children: /* @__PURE__ */ jsx(AnimatePresence, {
 			onExitComplete: actions.onExitComplete,
 			children: open ? /* @__PURE__ */ createElement(Motion.div, {
@@ -115,7 +149,11 @@ const ModalPopup = ({ className, children, width, style, motionProps, panelClass
 	return /* @__PURE__ */ jsx(Dialog.Popup, {
 		...rest,
 		className: mergeStateClassName(styles.popup, className),
-		style: popupStyle,
+		ref: composedRef,
+		style: {
+			...popupZIndexStyle,
+			...popupStyle
+		},
 		children: /* @__PURE__ */ jsx("div", {
 			className: cx(styles.popupInner, panelClassName),
 			style: {

package/es/base-ui/Modal/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":[],"sources":["../../../src/base-ui/Modal/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog } from '@base-ui/react/dialog';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { cx } from 'antd-style';\nimport { X } from 'lucide-react';\nimport { AnimatePresence } from 'motion/react';\nimport type React from 'react';\nimport {\n  cloneElement,\n  createContext,\n  isValidElement,\n  use,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { useAppElement } from '@/ThemeProvider';\n\nimport { backdropTransition, modalMotionConfig } from './constants';\nimport { styles } from './style';\n\nconst mergeStateClassName = <TState,>(\n  base: string,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  if (typeof className === 'function') return (state: TState) => cx(base, className(state));\n  return cx(base, className);\n};\n\n// --- Animation Contexts (granular to minimize re-renders) ---\n\n// State: open boolean, null = non-animated mode\nconst ModalOpenContext = createContext<boolean | null>(null);\n\n// Actions: stable callbacks, null = non-animated mode\ninterface ModalAnimationActions {\n  onExitComplete: () => void;\n}\nconst ModalActionsContext = createContext<ModalAnimationActions | null>(null);\n\nexport const useModalOpen = () => use(ModalOpenContext);\nexport const useModalActions = () => use(ModalActionsContext);\n\n// --- Root ---\nexport type ModalRootProps = Dialog.Root.Props & {\n  onExitComplete?: () => void;\n};\n\nconst AnimatedModalRoot = ({\n  open,\n  children,\n  onExitComplete: onExitCompleteProp,\n  ...rest\n}: Omit<ModalRootProps, 'open'> & { open: boolean }) => {\n  const [isPresent, setIsPresent] = useState(!!open);\n\n  useEffect(() => {\n    if (open) setIsPresent(true);\n  }, [open]);\n\n  const handleExitComplete = useCallback(() => {\n    setIsPresent(false);\n    onExitCompleteProp?.();\n  }, [onExitCompleteProp]);\n\n  const actions = useMemo(() => ({ onExitComplete: handleExitComplete }), [handleExitComplete]);\n\n  if (!isPresent) return null;\n\n  return (\n    <ModalOpenContext value={open}>\n      <ModalActionsContext value={actions}>\n        <Dialog.Root modal open {...rest}>\n          {children}\n        </Dialog.Root>\n      </ModalActionsContext>\n    </ModalOpenContext>\n  );\n};\n\nexport const ModalRoot = ({ open, onExitComplete, ...rest }: ModalRootProps) => {\n  if (open !== undefined) {\n    return <AnimatedModalRoot open={open} onExitComplete={onExitComplete} {...rest} />;\n  }\n  return <Dialog.Root modal {...rest} />;\n};\n\n// --- Portal ---\nexport type ModalPortalProps = React.ComponentProps<typeof Dialog.Portal> & {\n  container?: HTMLElement | null;\n};\nexport const ModalPortal = ({ container, ...rest }: ModalPortalProps) => {\n  const appElement = useAppElement();\n  return <Dialog.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\n// --- Viewport ---\nexport type ModalViewportProps = React.ComponentProps<typeof Dialog.Viewport>;\nexport const ModalViewport = ({ className, ...rest }: ModalViewportProps) => (\n  <Dialog.Viewport\n    {...rest}\n    className={mergeStateClassName(styles.viewport, className as any) as any}\n  />\n);\n\n// --- Backdrop ---\nexport type ModalBackdropProps = React.ComponentProps<typeof Dialog.Backdrop>;\nexport const ModalBackdrop = ({ className, style, ...rest }: ModalBackdropProps) => {\n  const open = useModalOpen();\n  const Motion = useMotionComponent();\n\n  if (open !== null) {\n    return (\n      <Dialog.Backdrop\n        {...rest}\n        className={cx(styles.backdrop, className as string)}\n        style={{ ...style, transition: 'none' }}\n        render={\n          <Motion.div\n            animate={{ opacity: open ? 1 : 0 }}\n            initial={{ opacity: 0 }}\n            transition={backdropTransition}\n          />\n        }\n      />\n    );\n  }\n\n  return (\n    <Dialog.Backdrop\n      {...rest}\n      className={mergeStateClassName(styles.backdrop, className as any) as any}\n      style={style}\n    />\n  );\n};\n\n// --- Popup ---\nexport type ModalPopupProps = React.ComponentProps<typeof Dialog.Popup> & {\n  motionProps?: Record<string, any>;\n  panelClassName?: string;\n  popupStyle?: React.CSSProperties;\n  width?: number | string;\n};\nexport const ModalPopup = ({\n  className,\n  children,\n  width,\n  style,\n  motionProps,\n  panelClassName,\n  popupStyle,\n  ...rest\n}: ModalPopupProps) => {\n  const open = useModalOpen();\n  const actions = useModalActions();\n  const Motion = useMotionComponent();\n\n  if (open !== null && actions) {\n    return (\n      <Dialog.Popup {...rest} className={cx(styles.popup, className as string)} style={popupStyle}>\n        <AnimatePresence onExitComplete={actions.onExitComplete}>\n          {open ? (\n            <Motion.div\n              {...modalMotionConfig}\n              {...motionProps}\n              className={cx(styles.popupInner, panelClassName)}\n              key=\"modal-popup-panel\"\n              style={{ maxWidth: width ?? undefined, transition: 'none', ...style }}\n            >\n              {children}\n            </Motion.div>\n          ) : null}\n        </AnimatePresence>\n      </Dialog.Popup>\n    );\n  }\n\n  return (\n    <Dialog.Popup\n      {...rest}\n      className={mergeStateClassName(styles.popup, className as any) as any}\n      style={popupStyle}\n    >\n      <div\n        className={cx(styles.popupInner, panelClassName)}\n        style={{ maxWidth: width ?? undefined, ...style }}\n      >\n        {children}\n      </div>\n    </Dialog.Popup>\n  );\n};\n\n// --- Header ---\nexport type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalHeader = ({ className, ...rest }: ModalHeaderProps) => (\n  <div {...rest} className={cx(styles.header, className)} />\n);\n\n// --- Title ---\nexport type ModalTitleProps = React.ComponentProps<typeof Dialog.Title>;\nexport const ModalTitle = ({ className, ...rest }: ModalTitleProps) => (\n  <Dialog.Title {...rest} className={mergeStateClassName(styles.title, className as any) as any} />\n);\n\n// --- Description ---\nexport type ModalDescriptionProps = React.ComponentProps<typeof Dialog.Description>;\nexport const ModalDescription: React.FC<ModalDescriptionProps> = Dialog.Description;\n\n// --- Content ---\nexport type ModalContentProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalContent = ({ className, ...rest }: ModalContentProps) => (\n  <div {...rest} className={cx(styles.content, className)} />\n);\n\n// --- Footer ---\nexport type ModalFooterProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalFooter = ({ className, ...rest }: ModalFooterProps) => (\n  <div {...rest} className={cx(styles.footer, className)} />\n);\n\n// --- Close ---\nexport type ModalCloseProps = React.ComponentProps<typeof Dialog.Close>;\nexport const ModalClose = ({ className, children, ...rest }: ModalCloseProps) => (\n  <Dialog.Close {...rest} className={mergeStateClassName(styles.close, className as any) as any}>\n    {children ?? <X size={18} />}\n  </Dialog.Close>\n);\n\n// --- Trigger ---\nexport type ModalTriggerProps = Omit<\n  React.ComponentPropsWithRef<typeof Dialog.Trigger>,\n  'children' | 'render'\n> & {\n  children?: React.ReactNode;\n  nativeButton?: boolean;\n};\n\nexport const ModalTrigger = ({\n  children,\n  className,\n  nativeButton,\n  ref: refProp,\n  ...rest\n}: ModalTriggerProps) => {\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  const renderer = (props: any) => {\n    const resolvedProps = (() => {\n      if (isNativeButtonTriggerElement) return props as any;\n      // eslint-disable-next-line unused-imports/no-unused-vars\n      const { type, ...restProps } = props 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      ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n    });\n  };\n\n  if (isValidElement(children)) {\n    return (\n      <Dialog.Trigger\n        {...rest}\n        className={className}\n        nativeButton={resolvedNativeButton}\n        render={renderer as any}\n      />\n    );\n  }\n\n  return (\n    <Dialog.Trigger\n      {...rest}\n      className={className}\n      nativeButton={resolvedNativeButton}\n      ref={refProp as any}\n    >\n      {children}\n    </Dialog.Trigger>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"atoms.mjs","names":[],"sources":["../../../src/base-ui/Modal/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog } from '@base-ui/react/dialog';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { cx } from 'antd-style';\nimport { X } from 'lucide-react';\nimport { AnimatePresence } from 'motion/react';\nimport type React from 'react';\nimport {\n  cloneElement,\n  createContext,\n  isValidElement,\n  use,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { mergeRefs, useMergeRefs } from 'react-merge-refs';\n\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { useAppElement } from '@/ThemeProvider';\n\nimport { useLayerZIndex } from '../zIndex';\nimport { backdropTransition, modalMotionConfig } from './constants';\nimport { ModalLayerProvider, useModalLayer } from './ModalLayerContext';\nimport { styles } from './style';\n\nconst mergeStateClassName = <TState,>(\n  base: string,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  if (typeof className === 'function') return (state: TState) => cx(base, className(state));\n  return cx(base, className);\n};\n\n// --- Animation Contexts (granular to minimize re-renders) ---\n\n// State: open boolean, null = non-animated mode\nconst ModalOpenContext = createContext<boolean | null>(null);\n\n// Actions: stable callbacks, null = non-animated mode\ninterface ModalAnimationActions {\n  onExitComplete: () => void;\n}\nconst ModalActionsContext = createContext<ModalAnimationActions | null>(null);\n\nexport const useModalOpen = () => use(ModalOpenContext);\nexport const useModalActions = () => use(ModalActionsContext);\n\n// --- Root ---\nexport type ModalRootProps = Dialog.Root.Props & {\n  onExitComplete?: () => void;\n  zIndex?: number;\n};\n\nconst AnimatedModalRoot = ({\n  open,\n  children,\n  onExitComplete: onExitCompleteProp,\n  zIndex: explicitZIndex,\n  ...rest\n}: Omit<ModalRootProps, 'open'> & { open: boolean }) => {\n  const [isPresent, setIsPresent] = useState(!!open);\n\n  useEffect(() => {\n    if (open) setIsPresent(true);\n  }, [open]);\n\n  const handleExitComplete = useCallback(() => {\n    setIsPresent(false);\n    onExitCompleteProp?.();\n  }, [onExitCompleteProp]);\n\n  const actions = useMemo(() => ({ onExitComplete: handleExitComplete }), [handleExitComplete]);\n\n  const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n  const layer = useMemo(\n    () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n    [zIndex, popupRef],\n  );\n\n  if (!isPresent) return null;\n\n  return (\n    <ModalOpenContext value={open}>\n      <ModalActionsContext value={actions}>\n        <ModalLayerProvider value={layer}>\n          <Dialog.Root modal open {...rest}>\n            {children}\n          </Dialog.Root>\n        </ModalLayerProvider>\n      </ModalActionsContext>\n    </ModalOpenContext>\n  );\n};\n\nconst NonAnimatedModalRoot = ({ zIndex: explicitZIndex, children, ...rest }: ModalRootProps) => {\n  const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n  const layer = useMemo(\n    () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n    [zIndex, popupRef],\n  );\n  return (\n    <ModalLayerProvider value={layer}>\n      <Dialog.Root modal {...rest}>\n        {children}\n      </Dialog.Root>\n    </ModalLayerProvider>\n  );\n};\n\nexport const ModalRoot = ({ open, onExitComplete, ...rest }: ModalRootProps) => {\n  if (open !== undefined) {\n    return <AnimatedModalRoot open={open} onExitComplete={onExitComplete} {...rest} />;\n  }\n  return <NonAnimatedModalRoot {...rest} />;\n};\n\n// --- Portal ---\nexport type ModalPortalProps = React.ComponentProps<typeof Dialog.Portal> & {\n  container?: HTMLElement | null;\n};\nexport const ModalPortal = ({ container, ...rest }: ModalPortalProps) => {\n  const appElement = useAppElement();\n  return <Dialog.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\n// --- Viewport ---\nexport type ModalViewportProps = React.ComponentProps<typeof Dialog.Viewport>;\nexport const ModalViewport = ({ className, ...rest }: ModalViewportProps) => (\n  <Dialog.Viewport\n    {...rest}\n    className={mergeStateClassName(styles.viewport, className as any) as any}\n  />\n);\n\n// --- Backdrop ---\nexport type ModalBackdropProps = React.ComponentProps<typeof Dialog.Backdrop>;\nexport const ModalBackdrop = ({ className, style, ...rest }: ModalBackdropProps) => {\n  const open = useModalOpen();\n  const layer = useModalLayer();\n  const Motion = useMotionComponent();\n  const layerStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex } : undefined;\n\n  if (open !== null) {\n    return (\n      <Dialog.Backdrop\n        {...rest}\n        className={cx(styles.backdrop, className as string)}\n        style={{ ...layerStyle, ...style, transition: 'none' }}\n        render={\n          <Motion.div\n            animate={{ opacity: open ? 1 : 0 }}\n            initial={{ opacity: 0 }}\n            transition={backdropTransition}\n          />\n        }\n      />\n    );\n  }\n\n  return (\n    <Dialog.Backdrop\n      {...rest}\n      className={mergeStateClassName(styles.backdrop, className as any) as any}\n      style={{ ...layerStyle, ...style }}\n    />\n  );\n};\n\n// --- Popup ---\nexport type ModalPopupProps = React.ComponentProps<typeof Dialog.Popup> & {\n  motionProps?: Record<string, any>;\n  panelClassName?: string;\n  popupStyle?: React.CSSProperties;\n  width?: number | string;\n};\nexport const ModalPopup = ({\n  className,\n  children,\n  width,\n  style,\n  motionProps,\n  panelClassName,\n  popupStyle,\n  ref: forwardedRef,\n  ...rest\n}: ModalPopupProps) => {\n  const open = useModalOpen();\n  const actions = useModalActions();\n  const layer = useModalLayer();\n  const Motion = useMotionComponent();\n  const popupZIndexStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex + 1 } : undefined;\n  const composedRef = useMergeRefs([forwardedRef, layer?.popupRef]);\n\n  if (open !== null && actions) {\n    return (\n      <Dialog.Popup\n        {...rest}\n        className={cx(styles.popup, className as string)}\n        ref={composedRef as any}\n        style={{ ...popupZIndexStyle, ...popupStyle }}\n      >\n        <AnimatePresence onExitComplete={actions.onExitComplete}>\n          {open ? (\n            <Motion.div\n              {...modalMotionConfig}\n              {...motionProps}\n              className={cx(styles.popupInner, panelClassName)}\n              key=\"modal-popup-panel\"\n              style={{ maxWidth: width ?? undefined, transition: 'none', ...style }}\n            >\n              {children}\n            </Motion.div>\n          ) : null}\n        </AnimatePresence>\n      </Dialog.Popup>\n    );\n  }\n\n  return (\n    <Dialog.Popup\n      {...rest}\n      className={mergeStateClassName(styles.popup, className as any) as any}\n      ref={composedRef as any}\n      style={{ ...popupZIndexStyle, ...popupStyle }}\n    >\n      <div\n        className={cx(styles.popupInner, panelClassName)}\n        style={{ maxWidth: width ?? undefined, ...style }}\n      >\n        {children}\n      </div>\n    </Dialog.Popup>\n  );\n};\n\n// --- Header ---\nexport type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalHeader = ({ className, ...rest }: ModalHeaderProps) => (\n  <div {...rest} className={cx(styles.header, className)} />\n);\n\n// --- Title ---\nexport type ModalTitleProps = React.ComponentProps<typeof Dialog.Title>;\nexport const ModalTitle = ({ className, ...rest }: ModalTitleProps) => (\n  <Dialog.Title {...rest} className={mergeStateClassName(styles.title, className as any) as any} />\n);\n\n// --- Description ---\nexport type ModalDescriptionProps = React.ComponentProps<typeof Dialog.Description>;\nexport const ModalDescription: React.FC<ModalDescriptionProps> = Dialog.Description;\n\n// --- Content ---\nexport type ModalContentProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalContent = ({ className, ...rest }: ModalContentProps) => (\n  <div {...rest} className={cx(styles.content, className)} />\n);\n\n// --- Footer ---\nexport type ModalFooterProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalFooter = ({ className, ...rest }: ModalFooterProps) => (\n  <div {...rest} className={cx(styles.footer, className)} />\n);\n\n// --- Close ---\nexport type ModalCloseProps = React.ComponentProps<typeof Dialog.Close>;\nexport const ModalClose = ({ className, children, ...rest }: ModalCloseProps) => (\n  <Dialog.Close {...rest} className={mergeStateClassName(styles.close, className as any) as any}>\n    {children ?? <X size={18} />}\n  </Dialog.Close>\n);\n\n// --- Trigger ---\nexport type ModalTriggerProps = Omit<\n  React.ComponentPropsWithRef<typeof Dialog.Trigger>,\n  'children' | 'render'\n> & {\n  children?: React.ReactNode;\n  nativeButton?: boolean;\n};\n\nexport const ModalTrigger = ({\n  children,\n  className,\n  nativeButton,\n  ref: refProp,\n  ...rest\n}: ModalTriggerProps) => {\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  const renderer = (props: any) => {\n    const resolvedProps = (() => {\n      if (isNativeButtonTriggerElement) return props as any;\n      // eslint-disable-next-line unused-imports/no-unused-vars\n      const { type, ...restProps } = props 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      ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n    });\n  };\n\n  if (isValidElement(children)) {\n    return (\n      <Dialog.Trigger\n        {...rest}\n        className={className}\n        nativeButton={resolvedNativeButton}\n        render={renderer as any}\n      />\n    );\n  }\n\n  return (\n    <Dialog.Trigger\n      {...rest}\n      className={className}\n      nativeButton={resolvedNativeButton}\n      ref={refProp as any}\n    >\n      {children}\n    </Dialog.Trigger>\n  );\n};\n"],"mappings":"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"}

package/es/base-ui/Modal/imperative.mjs

@@ -6,8 +6,7 @@ import { registerDevSingleton } from "../../utils/devSingleton.mjs";
 import { styles } from "./style.mjs";
 import { ModalBackdrop, ModalClose, ModalContent, ModalFooter, ModalHeader, ModalPopup, ModalPortal, ModalRoot, ModalTitle } from "./atoms.mjs";
 import { ModalContext, useModalContext } from "./context.mjs";
-import { acquireModalZIndex } from "./zIndexManager.mjs";
-import { memo, useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { memo, useCallback, useEffect, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { cx, useTheme } from "antd-style";
 import { createPortal } from "react-dom";
@@ -106,11 +105,6 @@ function createModalSystem() {
 		const { id, props } = entry;
 		const { children, classNames, content, footer, maskClosable, onOpenChange, onOpenChangeComplete, open, styles: semanticStyles, title, width } = props;
 		const isOpen = open ?? true;
-		const zIndexRef = useRef(void 0);
-		const prevOpenRef = useRef(false);
-		if (isOpen && !prevOpenRef.current) zIndexRef.current = acquireModalZIndex();
-		prevOpenRef.current = isOpen;
-		const zIndex = zIndexRef.current ?? 1e3;
 		const handleOpenChange = useCallback((nextOpen, eventDetails) => {
 			if (!nextOpen && maskClosable === false && eventDetails?.reason === "outside-press") return;
 			if (!nextOpen) closeModal(id);
@@ -138,16 +132,10 @@ function createModalSystem() {
 				onOpenChange: handleOpenChange,
 				children: /* @__PURE__ */ jsxs(ModalPortal, { children: [/* @__PURE__ */ jsx(ModalBackdrop, {
 					className: classNames?.backdrop,
-					style: {
-						zIndex,
-						...semanticStyles?.backdrop
-					}
+					style: semanticStyles?.backdrop
 				}), /* @__PURE__ */ jsxs(ModalPopup, {
 					className: classNames?.popup,
-					popupStyle: {
-						zIndex: zIndex + 1,
-						...semanticStyles?.popup
-					},
+					popupStyle: semanticStyles?.popup,
 					width,
 					children: [
 						showTitle && /* @__PURE__ */ jsxs(ModalHeader, {