@aloudata/aloudata-design 3.1.0 → 3.1.2

package/dist/Menu/index.js

@@ -2,14 +2,38 @@ import { cn } from "../lib/utils.js";
 import Memo from "../Icon/components/CheckLightLine.js";
 import Memo$1 from "../Icon/components/ChevronRightLine.js";
 /* empty css     */
-import { useRef } from "react";
+import { useCallback, useMemo, useRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import _ from "lodash";
 import { ControlledMenu, MenuDivider, MenuHeader, MenuItem, SubMenu } from "@szhsin/react-menu";
 //#region src/Menu/index.tsx
 function Menu(props) {
-	const { className, items, onClick: onMenuClick, onBeforeLeafItemClick, selectedKeys, menuStyle, rootClosing = false, externalOverflow } = props;
+	const { className, items, onClick: onMenuClick, onBeforeLeafItemClick, selectedKeys, menuStyle, ariaLabel, initialFocus = "first", onRequestClose, rootClosing = false, externalOverflow } = props;
 	const selectedKeySet = new Set(selectedKeys || []);
+	const typeaheadRef = useRef({
+		query: "",
+		timestamp: 0
+	});
+	const menuItemFocus = useMemo(() => ({ position: initialFocus }), [initialFocus]);
+	const onMenuKeyDown = useCallback((event) => {
+		if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.key.length !== 1) return;
+		const now = Date.now();
+		const previous = typeaheadRef.current;
+		const query = `${now - previous.timestamp > 500 ? "" : previous.query}${event.key}`.toLocaleLowerCase();
+		typeaheadRef.current = {
+			query,
+			timestamp: now
+		};
+		const menuItems = Array.from(event.currentTarget.querySelectorAll("[role=\"menuitem\"]:not([aria-hidden=\"true\"]):not([aria-disabled=\"true\"])"));
+		const activeIndex = menuItems.indexOf(document.activeElement);
+		const match = [...menuItems.slice(activeIndex + 1), ...menuItems.slice(0, activeIndex + 1)].find((item) => {
+			return (item.getAttribute("aria-label") || item.textContent || "").trim().toLocaleLowerCase().startsWith(query);
+		});
+		if (match) {
+			event.preventDefault();
+			match.focus();
+		}
+	}, []);
 	const hasDirectSelectedItem = (items) => items.some((item) => {
 		if (isSubMenuItem(item)) return selectedKeySet.has(item.key);
 		if (isHeaderMenuItem(item) || isDivideMenuItem(item)) return false;
@@ -46,6 +70,7 @@ function Menu(props) {
 						]
 					}),
 					disabled: item.disabled,
+					"aria-label": item.ariaLabel || titleStr || void 0,
 					itemProps: { className: isLeafSubMenu ? "ald-menu-submenu-leaf-trigger" : void 0 },
 					align: "start",
 					direction: "right",
@@ -64,6 +89,7 @@ function Menu(props) {
 					"ald-menu-item-selected": isSelected
 				}),
 				disabled: item.disabled,
+				"aria-label": item.ariaLabel || titleStr || void 0,
 				onClick: ({ syntheticEvent }) => {
 					onBeforeLeafItemClick?.();
 					const menuInfo = {
@@ -117,7 +143,11 @@ function Menu(props) {
 		anchorRef: ref,
 		className: cn(className, "ald-menu", isLeafRootMenu && !externalOverflow && "ald-menu-leaf", !isLeafRootMenu && menuStyle?.maxHeight !== void 0 && !externalOverflow && "ald-menu-scrollable"),
 		position: externalOverflow ? "initial" : "auto",
-		captureFocus: false,
+		"aria-label": ariaLabel,
+		captureFocus: true,
+		menuItemFocus,
+		onKeyDown: onMenuKeyDown,
+		onClose: ({ reason }) => onRequestClose?.(reason),
 		viewScroll: externalOverflow ? "initial" : "auto",
 		overflow: externalOverflow ? "visible" : menuOverflow,
 		children: getMenuItems(items || [])

package/dist/Menu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Menu/index.tsx"],"sourcesContent":["import {\n  ControlledMenu,\n  MenuDivider,\n  MenuHeader,\n  MenuItem,\n  SubMenu,\n} from '@szhsin/react-menu';\nimport { cn } from '../lib/utils';\nimport _ from 'lodash';\nimport React, { useRef } from 'react';\nimport { CheckLightLine, ChevronRightLine } from '../Icon';\nimport './menu.css';\n\nexport interface MenuProps {\n  onClick?: (info: MenuInfo) => void;\n  onBeforeLeafItemClick?: () => void;\n  className?: string;\n  items: MenuItemType[];\n  selectedKeys?: string[];\n  menuStyle?: React.CSSProperties;\n  rootClosing?: boolean;\n  /** @internal 由 Dropdown 注入，禁用内部定位/overflow 计算。不支持含 SubMenu 的菜单 */\n  externalOverflow?: boolean;\n}\n\nexport default function Menu(props: MenuProps) {\n  const {\n    className,\n    items,\n    onClick: onMenuClick,\n    onBeforeLeafItemClick,\n    selectedKeys,\n    menuStyle,\n    rootClosing = false,\n    externalOverflow,\n  } = props;\n  const selectedKeySet = new Set(selectedKeys || []);\n\n  const hasDirectSelectedItem = (items: MenuItemType[]): boolean =>\n    items.some((item) => {\n      if (isSubMenuItem(item)) {\n        return selectedKeySet.has(item.key);\n      }\n      if (isHeaderMenuItem(item) || isDivideMenuItem(item)) {\n        return false;\n      }\n      return selectedKeySet.has(item.key);\n    });\n\n  const getMenuItems = (items: MenuItemType[], parentPath: string[] = []) => {\n    const isSelectableGroup = hasDirectSelectedItem(items);\n\n    return items.map((item, index) => {\n      if (isDivideMenuItem(item)) {\n        return <MenuDivider key={`divider_${index}`} />;\n      }\n      if (isHeaderMenuItem(item)) {\n        return <MenuHeader key={`header_${index}`}>{item.label}</MenuHeader>;\n      }\n      const currPath = [...parentPath, item.key];\n      const titleStr = _.isString(item.label) ? item.label : '';\n      const isSelected = selectedKeys?.includes(item.key);\n\n      if (isSubMenuItem(item)) {\n        const isLeafSubMenu = isLeafMenu(item.children);\n        const subMenuOverflow =\n          isLeafSubMenu || menuStyle?.maxHeight !== undefined\n            ? 'auto'\n            : undefined;\n        const subMenuItemLabel = (\n          <div className=\"ald-menu-item-label\" title={titleStr}>\n            {item.icon ? (\n              <div className=\"ald-menu-item-label-icon\">{item.icon}</div>\n            ) : null}\n            <div className=\"ald-menu-item-label-text tw-text-typography-body-dense\">\n              {item.label}\n            </div>\n            <div className=\"ald-menu-item-right\">\n              {isSelectableGroup ? (\n                <div className=\"ald-menu-item-selection-slot\" />\n              ) : null}\n              <ChevronRightLine size={16} />\n            </div>\n          </div>\n        );\n\n        return (\n          <SubMenu\n            key={item.key}\n            label={subMenuItemLabel}\n            disabled={item.disabled}\n            itemProps={{\n              className: isLeafSubMenu\n                ? 'ald-menu-submenu-leaf-trigger'\n                : undefined,\n            }}\n            align=\"start\"\n            direction=\"right\"\n            gap={-8}\n            position=\"anchor\"\n            shift={0}\n            menuStyle={{\n              ...menuStyle,\n            }}\n            menuClassName={cn(\n              'ald-menu-submenu-popup',\n              isLeafSubMenu && 'ald-menu-submenu-popup-leaf',\n              !isLeafSubMenu &&\n                menuStyle?.maxHeight !== undefined &&\n                'ald-menu-submenu-popup-scrollable',\n              item.popupClassName,\n              rootClosing && 'ald-menu-submenu-popup-root-closing',\n            )}\n            overflow={subMenuOverflow}\n          >\n            {getMenuItems(item.children, currPath)}\n          </SubMenu>\n        );\n      }\n\n      return (\n        <MenuItem\n          key={item.key}\n          className={cn(item.className, {\n            'ald-menu-item-danger': item.danger,\n            'ald-menu-item-selected': isSelected,\n          })}\n          disabled={item.disabled}\n          onClick={({ syntheticEvent }) => {\n            onBeforeLeafItemClick?.();\n            const menuInfo = {\n              key: item.key,\n              keyPath: currPath,\n              domEvent: syntheticEvent,\n            };\n            if (item.onClick) {\n              item.onClick(menuInfo);\n            }\n            if (onMenuClick) {\n              onMenuClick(menuInfo);\n            }\n          }}\n        >\n          <div className=\"ald-menu-item-label\" title={titleStr}>\n            {item.icon ? (\n              <div className=\"ald-menu-item-label-icon\">{item.icon}</div>\n            ) : null}\n            <div className=\"ald-menu-item-label-text tw-text-typography-body-dense\">\n              {item.label}\n            </div>\n            {isSelectableGroup ? (\n              <div className=\"ald-menu-item-right\">\n                <div\n                  className={cn(\n                    'ald-menu-item-selection-slot',\n                    isSelected &&\n                      'ald-menu-item-selection-slot-selected ald-menu-item-selected-icon',\n                  )}\n                >\n                  {isSelected ? <CheckLightLine /> : null}\n                </div>\n              </div>\n            ) : null}\n          </div>\n        </MenuItem>\n      );\n    });\n  };\n\n  const ref = useRef(null);\n\n  const isLeafRootMenu = isLeafMenu(items);\n  const menuOverflow =\n    isLeafRootMenu || menuStyle?.maxHeight !== undefined ? 'auto' : undefined;\n\n  return (\n    <>\n      <div style={{ display: 'none' }} ref={ref} />\n      <ControlledMenu\n        state=\"open\"\n        transition={{ open: true, close: true }}\n        transitionTimeout={200}\n        submenuOpenDelay={0}\n        submenuCloseDelay={0}\n        menuStyle={{\n          ...menuStyle,\n        }}\n        anchorRef={ref}\n        className={cn(\n          className,\n          'ald-menu',\n          isLeafRootMenu && !externalOverflow && 'ald-menu-leaf',\n          !isLeafRootMenu &&\n            menuStyle?.maxHeight !== undefined &&\n            !externalOverflow &&\n            'ald-menu-scrollable',\n        )}\n        position={externalOverflow ? 'initial' : 'auto'}\n        captureFocus={false}\n        viewScroll={externalOverflow ? 'initial' : 'auto'}\n        overflow={externalOverflow ? 'visible' : menuOverflow}\n      >\n        {getMenuItems(items || [])}\n      </ControlledMenu>\n    </>\n  );\n}\n\nexport function isHeaderMenuItem(\n  menuItem: MenuItemType,\n): menuItem is MenuHeaderType {\n  return 'type' in menuItem && menuItem.type === 'header';\n}\n\nexport function isDivideMenuItem(\n  menuItem: MenuItemType,\n): menuItem is MenuDividerType {\n  return 'type' in menuItem && menuItem.type === 'divider';\n}\n\nexport function isSubMenuItem(menuItem: MenuItemType): menuItem is SubMenuType {\n  return 'children' in menuItem && !!menuItem.children;\n}\n\nexport function isLeafMenu(menuItems: MenuItemType[]) {\n  return !_.some(menuItems, (item) => isSubMenuItem(item));\n}\n\nexport type MenuItemType =\n  | ItemType\n  | MenuDividerType\n  | SubMenuType\n  | MenuHeaderType;\n\nexport interface ItemType {\n  key: string;\n  label: React.ReactNode;\n  icon?: React.ReactNode;\n  onClick?: (info: MenuInfo) => void;\n  danger?: boolean;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport interface MenuDividerType {\n  key?: string;\n  type: 'divider';\n}\n\nexport interface MenuHeaderType {\n  key?: string;\n  type: 'header';\n  label: string;\n}\n\nexport interface SubMenuType {\n  children: MenuItemType[];\n  key: string;\n  label: React.ReactNode;\n  icon?: React.ReactNode;\n  popupClassName?: string;\n  disabled?: boolean;\n}\n\nexport interface MenuInfo {\n  key: string;\n  keyPath: string[];\n  domEvent: MouseEvent | KeyboardEvent;\n  // 阻止菜单关闭\n  keepOpen?: boolean;\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Menu/index.tsx"],"sourcesContent":["import {\n  ControlledMenu,\n  MenuDivider,\n  MenuHeader,\n  MenuItem,\n  SubMenu,\n} from '@szhsin/react-menu';\nimport { cn } from '../lib/utils';\nimport _ from 'lodash';\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport { CheckLightLine, ChevronRightLine } from '../Icon';\nimport './menu.css';\n\nexport interface MenuProps {\n  onClick?: (info: MenuInfo) => void;\n  onBeforeLeafItemClick?: () => void;\n  className?: string;\n  items: MenuItemType[];\n  selectedKeys?: string[];\n  menuStyle?: React.CSSProperties;\n  /** Accessible name for the command menu when its context is not otherwise clear. */\n  ariaLabel?: string;\n  /** @internal Requested initial keyboard position when the popup opens. */\n  initialFocus?: 'first' | 'last';\n  /** @internal Requests that the owning popup close, including on Escape. */\n  onRequestClose?: (reason: 'click' | 'cancel' | 'blur' | 'scroll') => void;\n  rootClosing?: boolean;\n  /** @internal 由 Dropdown 注入，禁用内部定位/overflow 计算。不支持含 SubMenu 的菜单 */\n  externalOverflow?: boolean;\n}\n\nexport default function Menu(props: MenuProps) {\n  const {\n    className,\n    items,\n    onClick: onMenuClick,\n    onBeforeLeafItemClick,\n    selectedKeys,\n    menuStyle,\n    ariaLabel,\n    initialFocus = 'first',\n    onRequestClose,\n    rootClosing = false,\n    externalOverflow,\n  } = props;\n  const selectedKeySet = new Set(selectedKeys || []);\n  const typeaheadRef = useRef({ query: '', timestamp: 0 });\n  const menuItemFocus = useMemo(\n    () => ({ position: initialFocus }),\n    [initialFocus],\n  );\n  const onMenuKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLUListElement>) => {\n      if (\n        event.defaultPrevented ||\n        event.altKey ||\n        event.ctrlKey ||\n        event.metaKey ||\n        event.key.length !== 1\n      ) {\n        return;\n      }\n\n      const now = Date.now();\n      const previous = typeaheadRef.current;\n      const query = `${now - previous.timestamp > 500 ? '' : previous.query}${\n        event.key\n      }`.toLocaleLowerCase();\n      typeaheadRef.current = { query, timestamp: now };\n\n      const menuItems = Array.from(\n        event.currentTarget.querySelectorAll<HTMLElement>(\n          '[role=\"menuitem\"]:not([aria-hidden=\"true\"]):not([aria-disabled=\"true\"])',\n        ),\n      );\n      const activeIndex = menuItems.indexOf(\n        document.activeElement as HTMLElement,\n      );\n      const orderedItems = [\n        ...menuItems.slice(activeIndex + 1),\n        ...menuItems.slice(0, activeIndex + 1),\n      ];\n      const match = orderedItems.find((item) => {\n        const accessibleName =\n          item.getAttribute('aria-label') || item.textContent || '';\n        return accessibleName.trim().toLocaleLowerCase().startsWith(query);\n      });\n\n      if (match) {\n        event.preventDefault();\n        match.focus();\n      }\n    },\n    [],\n  );\n\n  const hasDirectSelectedItem = (items: MenuItemType[]): boolean =>\n    items.some((item) => {\n      if (isSubMenuItem(item)) {\n        return selectedKeySet.has(item.key);\n      }\n      if (isHeaderMenuItem(item) || isDivideMenuItem(item)) {\n        return false;\n      }\n      return selectedKeySet.has(item.key);\n    });\n\n  const getMenuItems = (items: MenuItemType[], parentPath: string[] = []) => {\n    const isSelectableGroup = hasDirectSelectedItem(items);\n\n    return items.map((item, index) => {\n      if (isDivideMenuItem(item)) {\n        return <MenuDivider key={`divider_${index}`} />;\n      }\n      if (isHeaderMenuItem(item)) {\n        return <MenuHeader key={`header_${index}`}>{item.label}</MenuHeader>;\n      }\n      const currPath = [...parentPath, item.key];\n      const titleStr = _.isString(item.label) ? item.label : '';\n      const isSelected = selectedKeys?.includes(item.key);\n\n      if (isSubMenuItem(item)) {\n        const isLeafSubMenu = isLeafMenu(item.children);\n        const subMenuOverflow =\n          isLeafSubMenu || menuStyle?.maxHeight !== undefined\n            ? 'auto'\n            : undefined;\n        const subMenuItemLabel = (\n          <div className=\"ald-menu-item-label\" title={titleStr}>\n            {item.icon ? (\n              <div className=\"ald-menu-item-label-icon\">{item.icon}</div>\n            ) : null}\n            <div className=\"ald-menu-item-label-text tw-text-typography-body-dense\">\n              {item.label}\n            </div>\n            <div className=\"ald-menu-item-right\">\n              {isSelectableGroup ? (\n                <div className=\"ald-menu-item-selection-slot\" />\n              ) : null}\n              <ChevronRightLine size={16} />\n            </div>\n          </div>\n        );\n\n        return (\n          <SubMenu\n            key={item.key}\n            label={subMenuItemLabel}\n            disabled={item.disabled}\n            aria-label={item.ariaLabel || titleStr || undefined}\n            itemProps={{\n              className: isLeafSubMenu\n                ? 'ald-menu-submenu-leaf-trigger'\n                : undefined,\n            }}\n            align=\"start\"\n            direction=\"right\"\n            gap={-8}\n            position=\"anchor\"\n            shift={0}\n            menuStyle={{\n              ...menuStyle,\n            }}\n            menuClassName={cn(\n              'ald-menu-submenu-popup',\n              isLeafSubMenu && 'ald-menu-submenu-popup-leaf',\n              !isLeafSubMenu &&\n                menuStyle?.maxHeight !== undefined &&\n                'ald-menu-submenu-popup-scrollable',\n              item.popupClassName,\n              rootClosing && 'ald-menu-submenu-popup-root-closing',\n            )}\n            overflow={subMenuOverflow}\n          >\n            {getMenuItems(item.children, currPath)}\n          </SubMenu>\n        );\n      }\n\n      return (\n        <MenuItem\n          key={item.key}\n          className={cn(item.className, {\n            'ald-menu-item-danger': item.danger,\n            'ald-menu-item-selected': isSelected,\n          })}\n          disabled={item.disabled}\n          aria-label={item.ariaLabel || titleStr || undefined}\n          onClick={({ syntheticEvent }) => {\n            onBeforeLeafItemClick?.();\n            const menuInfo = {\n              key: item.key,\n              keyPath: currPath,\n              domEvent: syntheticEvent,\n            };\n            if (item.onClick) {\n              item.onClick(menuInfo);\n            }\n            if (onMenuClick) {\n              onMenuClick(menuInfo);\n            }\n          }}\n        >\n          <div className=\"ald-menu-item-label\" title={titleStr}>\n            {item.icon ? (\n              <div className=\"ald-menu-item-label-icon\">{item.icon}</div>\n            ) : null}\n            <div className=\"ald-menu-item-label-text tw-text-typography-body-dense\">\n              {item.label}\n            </div>\n            {isSelectableGroup ? (\n              <div className=\"ald-menu-item-right\">\n                <div\n                  className={cn(\n                    'ald-menu-item-selection-slot',\n                    isSelected &&\n                      'ald-menu-item-selection-slot-selected ald-menu-item-selected-icon',\n                  )}\n                >\n                  {isSelected ? <CheckLightLine /> : null}\n                </div>\n              </div>\n            ) : null}\n          </div>\n        </MenuItem>\n      );\n    });\n  };\n\n  const ref = useRef(null);\n\n  const isLeafRootMenu = isLeafMenu(items);\n  const menuOverflow =\n    isLeafRootMenu || menuStyle?.maxHeight !== undefined ? 'auto' : undefined;\n\n  return (\n    <>\n      <div style={{ display: 'none' }} ref={ref} />\n      <ControlledMenu\n        state=\"open\"\n        transition={{ open: true, close: true }}\n        transitionTimeout={200}\n        submenuOpenDelay={0}\n        submenuCloseDelay={0}\n        menuStyle={{\n          ...menuStyle,\n        }}\n        anchorRef={ref}\n        className={cn(\n          className,\n          'ald-menu',\n          isLeafRootMenu && !externalOverflow && 'ald-menu-leaf',\n          !isLeafRootMenu &&\n            menuStyle?.maxHeight !== undefined &&\n            !externalOverflow &&\n            'ald-menu-scrollable',\n        )}\n        position={externalOverflow ? 'initial' : 'auto'}\n        aria-label={ariaLabel}\n        captureFocus\n        menuItemFocus={menuItemFocus}\n        onKeyDown={onMenuKeyDown}\n        onClose={({ reason }) => onRequestClose?.(reason)}\n        viewScroll={externalOverflow ? 'initial' : 'auto'}\n        overflow={externalOverflow ? 'visible' : menuOverflow}\n      >\n        {getMenuItems(items || [])}\n      </ControlledMenu>\n    </>\n  );\n}\n\nexport function isHeaderMenuItem(\n  menuItem: MenuItemType,\n): menuItem is MenuHeaderType {\n  return 'type' in menuItem && menuItem.type === 'header';\n}\n\nexport function isDivideMenuItem(\n  menuItem: MenuItemType,\n): menuItem is MenuDividerType {\n  return 'type' in menuItem && menuItem.type === 'divider';\n}\n\nexport function isSubMenuItem(menuItem: MenuItemType): menuItem is SubMenuType {\n  return 'children' in menuItem && !!menuItem.children;\n}\n\nexport function isLeafMenu(menuItems: MenuItemType[]) {\n  return !_.some(menuItems, (item) => isSubMenuItem(item));\n}\n\nexport type MenuItemType =\n  | ItemType\n  | MenuDividerType\n  | SubMenuType\n  | MenuHeaderType;\n\nexport interface ItemType {\n  key: string;\n  label: React.ReactNode;\n  icon?: React.ReactNode;\n  onClick?: (info: MenuInfo) => void;\n  danger?: boolean;\n  disabled?: boolean;\n  className?: string;\n  ariaLabel?: string;\n}\n\nexport interface MenuDividerType {\n  key?: string;\n  type: 'divider';\n}\n\nexport interface MenuHeaderType {\n  key?: string;\n  type: 'header';\n  label: string;\n}\n\nexport interface SubMenuType {\n  children: MenuItemType[];\n  key: string;\n  label: React.ReactNode;\n  icon?: React.ReactNode;\n  popupClassName?: string;\n  disabled?: boolean;\n  ariaLabel?: string;\n}\n\nexport interface MenuInfo {\n  key: string;\n  keyPath: string[];\n  domEvent: MouseEvent | KeyboardEvent;\n  // 阻止菜单关闭\n  keepOpen?: boolean;\n}\n"],"mappings":"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"}

package/dist/Modal/index.d.ts

@@ -27,6 +27,8 @@ export interface ModalProps {
     'data-testid'?: string;
     /** Pass through to the modal content root for accessibility and automated testing. */
     'aria-label'?: string;
+    /** Dialog semantic role. Use alertdialog only for explicitly urgent confirmation flows. */
+    role?: 'dialog' | 'alertdialog';
     /** Applied to the outer wrap layer (matches antd wrapClassName behavior) */
     wrapClassName?: string;
     style?: React.CSSProperties;
@@ -67,6 +69,8 @@ export interface ModalFuncProps {
     type?: 'info' | 'success' | 'error' | 'warn' | 'warning' | 'confirm';
     centered?: boolean;
     maskClosable?: boolean;
+    /** Dialog semantic role. Use alertdialog only for explicitly urgent confirmation flows. */
+    role?: 'dialog' | 'alertdialog';
 }
 declare function OriginModal(props: OriginModalProps): import("react/jsx-runtime").JSX.Element;
 type ModalFunc = (props: ModalFuncProps) => {

package/dist/Modal/index.js

@@ -7,9 +7,10 @@ import { FLOATING_LAYER_BASE_Z_INDEX, FloatingLayerProvider } from "../_utils/fl
 import { ModalLayerProvider, useModalLayer } from "../_utils/overlayCoordinator.js";
 import Button_default from "../Button/index.js";
 import { LocaleContext, getTranslator } from "../locale/default.js";
-import IconButton from "../IconButton/index.js";
+/* empty css                        */
 import ScrollArea_default from "../ScrollArea/index.js";
-import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { focusInitialDialogTarget, markDialogEscapeEvent, restoreDialogFocus, useDialogAccessibility } from "../_utils/dialogAccessibility.js";
+import React, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { hideOthers } from "aria-hidden";
@@ -17,10 +18,6 @@ import { createRoot } from "react-dom/client";
 //#region src/Modal/index.tsx
 var destroyFns = [];
 var DEFAULT_WIDTH = 552;
-var modalEscapeEvents = /* @__PURE__ */ new WeakSet();
-function shouldCancelTopModal(event) {
-	return !event.cancelBubble && (!event.defaultPrevented || modalEscapeEvents.has(event));
-}
 function ModalContentProviders({ layerId, floatingLevel, children }) {
 	return /* @__PURE__ */ jsx(ModalLayerProvider, {
 		id: layerId,
@@ -30,7 +27,7 @@ function ModalContentProviders({ layerId, floatingLevel, children }) {
 		})
 	});
 }
-var ModalTitle = ({ icon, title, subTitle }, type) => /* @__PURE__ */ jsxs("div", {
+var ModalTitle = ({ icon, title, subTitle, titleId, descriptionId }, type) => /* @__PURE__ */ jsxs("div", {
 	className: "ald-modal-title-container tw-flex tw-items-center tw-gap-4",
 	children: [icon && /* @__PURE__ */ jsx("div", {
 		className: cn("ald-modal-icon-container tw-grid tw-size-10 tw-shrink-0 tw-place-items-center tw-rounded-[var(--global-grid-250)]", type === "info" && "ald-modal-cion-info-container tw-bg-[var(--background-informative-muted)]", type === "success" && "ald-modal-cion-success-container tw-bg-[var(--background-positive-muted)]", type === "warning" && "ald-modal-cion-warning-container tw-bg-[var(--background-warning-muted)]", type === "warn" && "ald-modal-cion-warning-container tw-bg-[var(--background-warning-muted)]", type === "error" && "ald-modal-cion-error-container tw-bg-[var(--background-negative-muted)]", type === "confirm" && "ald-modal-cion-confirm-container tw-bg-[var(--background-brand-muted)]"),
@@ -38,9 +35,11 @@ var ModalTitle = ({ icon, title, subTitle }, type) => /* @__PURE__ */ jsxs("div"
 	}), /* @__PURE__ */ jsxs("div", {
 		className: "ald-modal-text-container",
 		children: [title && /* @__PURE__ */ jsx("div", {
+			id: titleId,
 			className: cn("ald-modal-text-title tw-text-lg tw-font-semibold tw-leading-7 tw-text-[var(--content-primary)]", !subTitle && "ald-modal-text-title-only tw-text-xl"),
 			children: title
 		}), subTitle && /* @__PURE__ */ jsx("div", {
+			id: descriptionId,
 			className: "ald-modal-text-sub-title tw-mt-1 tw-text-xs tw-leading-4 tw-text-[var(--content-secondary)]",
 			children: subTitle
 		})]
@@ -69,12 +68,22 @@ function getIcon(type) {
 function OriginModal(props) {
 	const { locale } = useContext(LocaleContext);
 	const t = getTranslator(locale);
-	const { className, "data-testid": dataTestId, "aria-label": ariaLabel, children, okType = "primary", width, closeIcon, subTitle, okButtonProps = {}, cancelButtonProps = {}, okText = t.Modal.sure, cancelText = t.Modal.cancel, icon, title, paddingLess, responsiveBounds, hideHeaderBottomBorder, virtualScrollBar, style, maskClosable = false, fullscreen, open = false, onOk, onCancel, footer, confirmLoading, closable = true, zIndex = 1e3, bodyStyle, keyboard = true, afterOpenChange, wrapClassName, _modalType, onTopChange } = props;
+	const { className, "data-testid": dataTestId, "aria-label": ariaLabel, role = "dialog", children, okType = "primary", width, closeIcon, subTitle, okButtonProps = {}, cancelButtonProps = {}, okText = t.Modal.sure, cancelText = t.Modal.cancel, icon, title, paddingLess, responsiveBounds, hideHeaderBottomBorder, virtualScrollBar, style, maskClosable = false, fullscreen, open = false, onOk, onCancel, footer, confirmLoading, closable = true, zIndex = 1e3, bodyStyle, keyboard = true, afterOpenChange, wrapClassName, _modalType, onTopChange } = props;
 	const prevOpenRef = useRef(open);
 	const contentRef = useRef(null);
 	const modalRef = useRef(null);
+	const generatedId = React.useId();
+	const titleId = `${generatedId}-title`;
+	const descriptionId = `${generatedId}-description`;
 	const { id: modalLayerId, maskZIndex, contentZIndex, isTop } = useModalLayer(open, zIndex);
 	const nextFloatingLevel = (maskZIndex - FLOATING_LAYER_BASE_Z_INDEX) / 10 + 1;
+	useDialogAccessibility({
+		open,
+		isTop,
+		keyboard,
+		containerRef: modalRef,
+		onEscape: () => onCancel?.({})
+	});
 	useLayoutEffect(() => {
 		onTopChange?.(isTop);
 	}, [isTop, onTopChange]);
@@ -88,44 +97,6 @@ function OriginModal(props) {
 		if (!open || !isTop || !contentRef.current) return;
 		return hideOthers(contentRef.current);
 	}, [isTop, open]);
-	useEffect(() => {
-		if (!open || !isTop || !contentRef.current) return;
-		const container = contentRef.current;
-		const handleKeyDown = (e) => {
-			if (e.key !== "Tab") return;
-			const focusable = container.querySelectorAll("a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled])");
-			if (focusable.length === 0) return;
-			const first = focusable[0];
-			const last = focusable[focusable.length - 1];
-			if (e.shiftKey) {
-				if (document.activeElement === first || !container.contains(document.activeElement)) {
-					e.preventDefault();
-					last.focus();
-				}
-			} else if (document.activeElement === last || !container.contains(document.activeElement)) {
-				e.preventDefault();
-				first.focus();
-			}
-		};
-		document.addEventListener("keydown", handleKeyDown);
-		return () => document.removeEventListener("keydown", handleKeyDown);
-	}, [isTop, open]);
-	useEffect(() => {
-		if (!open || !isTop || !keyboard) return;
-		const handleEscape = (event) => {
-			if (event.key !== "Escape") return;
-			queueMicrotask(() => {
-				if (shouldCancelTopModal(event)) onCancel?.({});
-			});
-		};
-		window.addEventListener("keydown", handleEscape, true);
-		return () => window.removeEventListener("keydown", handleEscape, true);
-	}, [
-		isTop,
-		keyboard,
-		onCancel,
-		open
-	]);
 	const responsiveBoundsStyle = useMemo(() => {
 		if (!responsiveBounds) return {};
 		return {
@@ -141,14 +112,16 @@ function OriginModal(props) {
 		loading: confirmLoading,
 		...okButtonProps
 	};
+	const headerBorderClassName = hideHeaderBottomBorder ? "!tw-border-0" : "tw-border-b tw-border-solid tw-border-[var(--border-default)] !tw-border-x-0 !tw-border-t-0";
 	const renderFooter = () => {
 		if (footer === null) return null;
+		const footerBorderClassName = "tw-border-t tw-border-solid tw-border-[var(--border-default)] !tw-border-x-0 !tw-border-b-0";
 		if (footer) return /* @__PURE__ */ jsx("div", {
-			className: "ald-modal-footer ant-modal-footer tw-flex tw-items-center tw-justify-end tw-gap-2 tw-border-t tw-border-solid tw-border-[var(--border-default)] tw-bg-[var(--background-default)] tw-px-6 tw-py-3 tw-text-right",
+			className: cn("ald-modal-footer ant-modal-footer tw-flex tw-items-center tw-justify-end tw-gap-2 tw-bg-[var(--background-default)] tw-px-6 tw-py-3 tw-text-right", footerBorderClassName),
 			children: footer
 		});
 		return /* @__PURE__ */ jsxs("div", {
-			className: "ald-modal-footer ant-modal-footer tw-flex tw-justify-end tw-gap-2 tw-border-t tw-border-solid tw-border-[var(--border-default)] tw-px-6 tw-py-4",
+			className: cn("ald-modal-footer ant-modal-footer tw-flex tw-justify-end tw-gap-2 tw-px-6 tw-py-4", footerBorderClassName),
 			children: [/* @__PURE__ */ jsx(Button_default, {
 				type: "secondary",
 				size: "middle",
@@ -182,9 +155,13 @@ function OriginModal(props) {
 			children: /* @__PURE__ */ jsx(DialogPrimitive.Content, {
 				ref: modalRef,
 				tabIndex: -1,
+				role,
 				"data-testid": dataTestId,
+				"aria-modal": isTop || void 0,
+				"aria-labelledby": title ? titleId : void 0,
+				"aria-describedby": subTitle ? descriptionId : void 0,
 				"aria-label": ariaLabel,
-				className: cn("ald-modal ant-modal tw-pointer-events-auto tw-box-border tw-flex tw-flex-col tw-overflow-hidden tw-bg-[var(--background-default)] tw-shadow-[var(--elevation-bottom-bottom-lg)] tw-outline-none", fullscreen ? "ald-modal-fullscreen tw-fixed tw-inset-0 tw-size-full tw-rounded-none" : "tw-rounded-r-75", !fullscreen && "tw-border tw-border-solid tw-border-[var(--border-default)]", paddingLess && "ald-modal-padding-less", virtualScrollBar && "ald-modal-virtual-scroll-bar", hideHeaderBottomBorder && "ald-modal-hide-header-bottom-border", responsiveBounds && "ald-modal-responsive-bounds", className),
+				className: cn("ald-modal ant-modal tw-pointer-events-auto tw-box-border tw-flex tw-flex-col tw-overflow-hidden tw-border-0 tw-bg-[var(--background-default)] tw-shadow-none tw-outline-none", fullscreen ? "ald-modal-fullscreen tw-fixed tw-inset-0 tw-size-full tw-rounded-none" : "tw-rounded-r-75", paddingLess && "ald-modal-padding-less", virtualScrollBar && "ald-modal-virtual-scroll-bar", hideHeaderBottomBorder && "ald-modal-hide-header-bottom-border", responsiveBounds && "ald-modal-responsive-bounds", className),
 				style: {
 					...fullscreen ? {} : {
 						width: responsiveBounds ? responsiveBoundsStyle.width : width || DEFAULT_WIDTH,
@@ -196,14 +173,11 @@ function OriginModal(props) {
 					event.preventDefault();
 					requestAnimationFrame(() => {
 						const modal = modalRef.current;
-						const activeElement = document.activeElement;
-						const activeOverlay = activeElement instanceof HTMLElement ? activeElement.closest("[role=\"dialog\"], [role=\"menu\"], [role=\"listbox\"]") : null;
-						if (!modal || activeOverlay && !activeOverlay.classList.contains("ald-modal") && activeOverlay !== modal && !modal.contains(activeOverlay)) return;
-						modal.focus({ preventScroll: true });
+						if (modal) focusInitialDialogTarget(modal);
 					});
 				},
 				onEscapeKeyDown: (event) => {
-					if (!event.defaultPrevented) modalEscapeEvents.add(event);
+					if (!event.defaultPrevented) markDialogEscapeEvent(event);
 					event.preventDefault();
 				},
 				onPointerDownOutside: (e) => {
@@ -214,13 +188,13 @@ function OriginModal(props) {
 					if (!maskClosable) e.preventDefault();
 				},
 				children: /* @__PURE__ */ jsx("div", {
-					className: "ant-modal-content tw-flex tw-h-full tw-flex-col",
+					className: "ant-modal-content tw-flex tw-h-full tw-flex-col !tw-rounded-none !tw-border-0 !tw-bg-transparent !tw-p-0 !tw-shadow-none",
 					children: /* @__PURE__ */ jsxs(ModalContentProviders, {
 						layerId: modalLayerId,
 						floatingLevel: nextFloatingLevel,
 						children: [
 							!fullscreen && /* @__PURE__ */ jsxs("div", {
-								className: cn("ald-modal-header ant-modal-header tw-flex tw-items-start tw-justify-between tw-bg-[var(--background-default)] tw-px-6 tw-py-4", !hideHeaderBottomBorder && "tw-border-b tw-border-solid tw-border-[var(--border-default)]"),
+								className: cn("ald-modal-header ant-modal-header tw-flex tw-items-start tw-justify-between tw-bg-[var(--background-default)] tw-px-6 tw-py-4", headerBorderClassName),
 								children: [/* @__PURE__ */ jsx(DialogPrimitive.Title, {
 									asChild: true,
 									children: /* @__PURE__ */ jsx("div", {
@@ -228,24 +202,39 @@ function OriginModal(props) {
 										children: ModalTitle({
 											icon,
 											title,
-											subTitle
+											subTitle,
+											titleId,
+											descriptionId
 										}, _modalType)
 									})
 								}), closable && /* @__PURE__ */ jsx(DialogPrimitive.Close, {
 									asChild: true,
-									children: /* @__PURE__ */ jsx("span", {
-										className: "ant-modal-close",
+									children: /* @__PURE__ */ jsx("button", {
+										type: "button",
+										className: "ant-modal-close ald-icon-button ald-icon-button-middle focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-[var(--focus-ring)] forced-colors:focus-visible:tw-outline-[Highlight]",
+										"aria-label": "Close",
+										"data-overlay-close": "true",
 										onClick: onCancel,
-										children: closeIcon || /* @__PURE__ */ jsx(IconButton, {
-											icon: /* @__PURE__ */ jsx(Memo$2, { size: 20 }),
-											size: "middle"
+										children: /* @__PURE__ */ jsx("span", {
+											className: "ald-icon-button-wrap",
+											children: closeIcon || /* @__PURE__ */ jsx(Memo$2, { size: 20 })
 										})
 									})
 								})]
 							}),
 							fullscreen && /* @__PURE__ */ jsx(DialogPrimitive.Title, {
+								asChild: true,
+								children: /* @__PURE__ */ jsx("div", {
+									className: "tw-sr-only",
+									children: title && /* @__PURE__ */ jsx("span", {
+										id: titleId,
+										children: title
+									})
+								})
+							}),
+							subTitle && /* @__PURE__ */ jsx(DialogPrimitive.Description, {
 								className: "tw-sr-only",
-								children: title
+								children: subTitle
 							}),
 							/* @__PURE__ */ jsx("div", {
 								className: cn("ald-modal-body ant-modal-body tw-flex-1 tw-text-sm tw-leading-5", fullscreen ? "tw-h-full tw-overflow-auto tw-p-0" : "tw-min-h-[130px]", !fullscreen && (virtualScrollBar ? "tw-overflow-hidden tw-p-0" : "tw-overflow-auto"), !fullscreen && !responsiveBounds && !virtualScrollBar && "tw-max-h-[68vh]", !fullscreen && !paddingLess && !virtualScrollBar && "tw-p-6"),
@@ -280,9 +269,7 @@ function createStaticModal(type, props) {
 		container.remove();
 		const idx = destroyFns.indexOf(destroy);
 		if (idx >= 0) destroyFns.splice(idx, 1);
-		queueMicrotask(() => {
-			if (shouldRestoreFocus && focusTarget?.isConnected) focusTarget.focus();
-		});
+		if (shouldRestoreFocus) restoreDialogFocus(focusTarget);
 	};
 	const update = (newProps) => {
 		currentProps = {
@@ -317,6 +304,7 @@ function createStaticModal(type, props) {
 			className: cn("ald-modal", p.className),
 			closable: p.closable,
 			maskClosable: p.maskClosable,
+			role: p.role,
 			_modalType: type,
 			onTopChange: (nextIsTop) => {
 				isTop = nextIsTop;
@@ -408,6 +396,7 @@ function useModal() {
 			className: cn("ald-modal", m.props.className),
 			closable: m.props.closable,
 			maskClosable: m.props.maskClosable,
+			role: m.props.role,
 			_modalType: m.type,
 			footer: isConfirmType ? void 0 : /* @__PURE__ */ jsx(Button_default, {
 				type: "primary",

package/dist/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Modal/index.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { hideOthers } from 'aria-hidden';\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { createRoot } from 'react-dom/client';\nimport Button, { ButtonType, IButtonProps } from '../Button';\nimport {\n  AttentionTriangleLightLine,\n  CheckCircleLightLine,\n  CloseLLine,\n  InformationCircleLightLine,\n} from '../Icon';\nimport IconButton from '../IconButton';\nimport ScrollArea from '../ScrollArea';\nimport {\n  FLOATING_LAYER_BASE_Z_INDEX,\n  FLOATING_LAYER_STEP,\n  FloatingLayerProvider,\n} from '../_utils/floatingLayer';\nimport {\n  ModalLayerProvider,\n  useModalLayer,\n} from '../_utils/overlayCoordinator';\nimport { LocaleContext, getTranslator } from '../locale/default';\nimport { cn } from '../lib/utils';\n\nexport const destroyFns: Array<() => void> = [];\n\nexport interface ModalProps {\n  open?: boolean;\n  onOk?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  onCancel?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  afterClose?: () => void;\n  title?: React.ReactNode;\n  subTitle?: React.ReactNode;\n  icon?: React.ReactElement;\n  width?: number | string;\n  footer?: React.ReactNode | null;\n  okText?: React.ReactNode;\n  cancelText?: React.ReactNode;\n  okButtonProps?: IButtonProps;\n  cancelButtonProps?: IButtonProps;\n  okType?: ButtonType;\n  confirmLoading?: boolean;\n  maskClosable?: boolean;\n  closable?: boolean;\n  closeIcon?: React.ReactNode;\n  centered?: boolean;\n  destroyOnClose?: boolean;\n  className?: string;\n  /** Pass through to the modal content root for automated testing. */\n  'data-testid'?: string;\n  /** Pass through to the modal content root for accessibility and automated testing. */\n  'aria-label'?: string;\n  /** Applied to the outer wrap layer (matches antd wrapClassName behavior) */\n  wrapClassName?: string;\n  style?: React.CSSProperties;\n  bodyStyle?: React.CSSProperties;\n  zIndex?: number;\n  children?: React.ReactNode;\n  paddingLess?: boolean;\n  virtualScrollBar?: boolean;\n  hideHeaderBottomBorder?: boolean;\n  responsiveBounds?: boolean;\n  fullscreen?: boolean;\n  keyboard?: boolean;\n  afterOpenChange?: (open: boolean) => void;\n  getContainer?: (() => HTMLElement) | false;\n  /** @internal used by static methods to pass modal type for icon styling */\n  _modalType?: string;\n}\n\ninterface OriginModalProps extends ModalProps {\n  onTopChange?: (isTop: boolean) => void;\n}\n\nexport interface ModalFuncProps {\n  title?: React.ReactNode;\n  subTitle?: React.ReactNode;\n  content?: React.ReactNode;\n  icon?: React.ReactElement;\n  okText?: React.ReactNode;\n  cancelText?: React.ReactNode;\n  okButtonProps?: IButtonProps;\n  cancelButtonProps?: IButtonProps;\n  okType?: ButtonType;\n  onOk?: (...args: any[]) => any;\n  onCancel?: (...args: any[]) => any;\n  width?: number | string;\n  className?: string;\n  /** @deprecated Use `className` instead. Preserved for antd v4 compat. */\n  wrapClassName?: string;\n  closable?: boolean;\n  type?: 'info' | 'success' | 'error' | 'warn' | 'warning' | 'confirm';\n  centered?: boolean;\n  maskClosable?: boolean;\n}\n\nconst DEFAULT_WIDTH = 552;\nconst modalEscapeEvents = new WeakSet<KeyboardEvent>();\n\nfunction shouldCancelTopModal(event: KeyboardEvent) {\n  return (\n    !event.cancelBubble &&\n    (!event.defaultPrevented || modalEscapeEvents.has(event))\n  );\n}\n\nfunction ModalContentProviders({\n  layerId,\n  floatingLevel,\n  children,\n}: {\n  layerId: number;\n  floatingLevel: number;\n  children: React.ReactNode;\n}) {\n  return (\n    <ModalLayerProvider id={layerId}>\n      <FloatingLayerProvider value={floatingLevel}>\n        {children}\n      </FloatingLayerProvider>\n    </ModalLayerProvider>\n  );\n}\n\nconst ModalTitle = (\n  { icon, title, subTitle }: Pick<ModalProps, 'icon' | 'title' | 'subTitle'>,\n  type?: string,\n) => (\n  <div className=\"ald-modal-title-container tw-flex tw-items-center tw-gap-4\">\n    {icon && (\n      <div\n        className={cn(\n          'ald-modal-icon-container tw-grid tw-size-10 tw-shrink-0 tw-place-items-center tw-rounded-[var(--global-grid-250)]',\n          type === 'info' &&\n            'ald-modal-cion-info-container tw-bg-[var(--background-informative-muted)]',\n          type === 'success' &&\n            'ald-modal-cion-success-container tw-bg-[var(--background-positive-muted)]',\n          type === 'warning' &&\n            'ald-modal-cion-warning-container tw-bg-[var(--background-warning-muted)]',\n          type === 'warn' &&\n            'ald-modal-cion-warning-container tw-bg-[var(--background-warning-muted)]',\n          type === 'error' &&\n            'ald-modal-cion-error-container tw-bg-[var(--background-negative-muted)]',\n          type === 'confirm' &&\n            'ald-modal-cion-confirm-container tw-bg-[var(--background-brand-muted)]',\n        )}\n      >\n        {icon}\n      </div>\n    )}\n    <div className=\"ald-modal-text-container\">\n      {title && (\n        <div\n          className={cn(\n            'ald-modal-text-title tw-text-lg tw-font-semibold tw-leading-7 tw-text-[var(--content-primary)]',\n            !subTitle && 'ald-modal-text-title-only tw-text-xl',\n          )}\n        >\n          {title}\n        </div>\n      )}\n      {subTitle && (\n        <div className=\"ald-modal-text-sub-title tw-mt-1 tw-text-xs tw-leading-4 tw-text-[var(--content-secondary)]\">\n          {subTitle}\n        </div>\n      )}\n    </div>\n  </div>\n);\n\nfunction getIcon(\n  type: 'info' | 'success' | 'error' | 'warn' | 'warning' | 'confirm',\n) {\n  if (type === 'success')\n    return (\n      <CheckCircleLightLine\n        fill=\"var(--content-inverted-primary)\"\n        color=\"var(--background-positive-strong)\"\n        size={24}\n      />\n    );\n  if (type === 'error')\n    return (\n      <AttentionTriangleLightLine\n        color=\"var(--background-negative-strong)\"\n        fill=\"var(--content-inverted-primary)\"\n        size={24}\n      />\n    );\n  if (type === 'warning' || type === 'warn')\n    return (\n      <AttentionTriangleLightLine\n        color=\"var(--background-warning-strong)\"\n        size={24}\n      />\n    );\n  return (\n    <InformationCircleLightLine\n      size={24}\n      color=\"var(--action-primary-normal)\"\n    />\n  );\n}\n\nfunction OriginModal(props: OriginModalProps) {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n  const {\n    className,\n    'data-testid': dataTestId,\n    'aria-label': ariaLabel,\n    children,\n    okType = 'primary',\n    width,\n    closeIcon,\n    subTitle,\n    okButtonProps = {},\n    cancelButtonProps = {},\n    okText = t.Modal.sure,\n    cancelText = t.Modal.cancel,\n    icon,\n    title,\n    paddingLess,\n    responsiveBounds,\n    hideHeaderBottomBorder,\n    virtualScrollBar,\n    style,\n    maskClosable = false,\n    fullscreen,\n    open = false,\n    onOk,\n    onCancel,\n    footer,\n    confirmLoading,\n    closable = true,\n    zIndex = 1000,\n    bodyStyle,\n    keyboard = true,\n    afterOpenChange,\n    wrapClassName,\n    _modalType,\n    onTopChange,\n  } = props;\n\n  const prevOpenRef = useRef(open);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const modalRef = useRef<HTMLDivElement>(null);\n  const modalLayer = useModalLayer(open, zIndex);\n  const { id: modalLayerId, maskZIndex, contentZIndex, isTop } = modalLayer;\n  const nextFloatingLevel =\n    (maskZIndex - FLOATING_LAYER_BASE_Z_INDEX) / FLOATING_LAYER_STEP + 1;\n\n  useLayoutEffect(() => {\n    onTopChange?.(isTop);\n  }, [isTop, onTopChange]);\n\n  useEffect(() => {\n    if (prevOpenRef.current !== open) {\n      prevOpenRef.current = open;\n      afterOpenChange?.(open);\n    }\n  }, [open, afterOpenChange]);\n\n  // ---- modal={false} 补偿：aria-hidden（屏幕阅读器只感知弹窗） ----\n  useEffect(() => {\n    if (!open || !isTop || !contentRef.current) return;\n    return hideOthers(contentRef.current);\n  }, [isTop, open]);\n\n  // ---- modal={false} 补偿：Tab 焦点循环 ----\n  useEffect(() => {\n    if (!open || !isTop || !contentRef.current) return;\n    const container = contentRef.current;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key !== 'Tab') return;\n      const focusable = container.querySelectorAll<HTMLElement>(\n        'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled])',\n      );\n      if (focusable.length === 0) return;\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n\n      if (e.shiftKey) {\n        if (\n          document.activeElement === first ||\n          !container.contains(document.activeElement)\n        ) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else {\n        if (\n          document.activeElement === last ||\n          !container.contains(document.activeElement)\n        ) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [isTop, open]);\n\n  useEffect(() => {\n    if (!open || !isTop || !keyboard) return;\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') return;\n      // Radix observes Escape during document capture, so child overlays can\n      // only finish their own propagation handling later in the event cycle.\n      queueMicrotask(() => {\n        if (shouldCancelTopModal(event)) {\n          onCancel?.({} as React.MouseEvent<HTMLButtonElement>);\n        }\n      });\n    };\n\n    window.addEventListener('keydown', handleEscape, true);\n    return () => window.removeEventListener('keydown', handleEscape, true);\n  }, [isTop, keyboard, onCancel, open]);\n\n  const responsiveBoundsStyle = useMemo(() => {\n    if (!responsiveBounds) return {};\n    return {\n      width: 'calc(100% - 160px)',\n      maxWidth: '1680px',\n      minWidth: '1280px',\n      height: 'calc(100% - 48px)',\n      maxHeight: '900px',\n      minHeight: '640px',\n    };\n  }, [responsiveBounds]);\n\n  const mergedOkProps = { loading: confirmLoading, ...okButtonProps };\n\n  const renderFooter = () => {\n    if (footer === null) return null;\n    if (footer)\n      return (\n        // antd 兼容：antd .ant-modal-footer 使用 text-align:right 让 inline 按钮右对齐，\n        // 即使消费方传入 width:100% 的子容器，内部 inline 元素仍能右对齐。\n        // 此处同时使用 tw-flex tw-justify-end（flexbox 对齐）和 tw-text-right（继承式对齐）保持兼容。\n        <div className=\"ald-modal-footer ant-modal-footer tw-flex tw-items-center tw-justify-end tw-gap-2 tw-border-t tw-border-solid tw-border-[var(--border-default)] tw-bg-[var(--background-default)] tw-px-6 tw-py-3 tw-text-right\">\n          {footer}\n        </div>\n      );\n    return (\n      <div className=\"ald-modal-footer ant-modal-footer tw-flex tw-justify-end tw-gap-2 tw-border-t tw-border-solid tw-border-[var(--border-default)] tw-px-6 tw-py-4\">\n        <Button\n          type=\"secondary\"\n          size=\"middle\"\n          {...cancelButtonProps}\n          onClick={onCancel}\n        >\n          {cancelText}\n        </Button>\n        <Button type={okType} size=\"middle\" {...mergedOkProps} onClick={onOk}>\n          {okText}\n        </Button>\n      </div>\n    );\n  };\n\n  return (\n    <DialogPrimitive.Root open={open} modal={false}>\n      <DialogPrimitive.Portal>\n        {/* modal={false} 时 DialogPrimitive.Overlay 不渲染，用普通 div 替代 */}\n        {isTop && (\n          <div\n            className=\"ald-modal-mask tw-animate-in tw-fade-in-0 tw-fixed tw-inset-0 tw-bg-[var(--background-inverted)] tw-opacity-45\"\n            style={{ zIndex: maskZIndex }}\n            onPointerDown={() => {\n              if (maskClosable) {\n                onCancel?.({} as React.MouseEvent<HTMLButtonElement>);\n              }\n            }}\n          />\n        )}\n        {/* Centering wrapper — replaces transform centering so consumer CSS (top/left overrides) works */}\n        <div\n          ref={contentRef}\n          {...(!isTop ? { inert: '' } : {})}\n          aria-hidden={!isTop || undefined}\n          className={cn(\n            // antd 兼容：保留 ant-modal-wrap class，消费方 CSS 通过 wrapClassName + :global(.ant-modal) 控制弹窗宽高\n            'ald-modal-wrap ant-modal-wrap tw-pointer-events-none tw-fixed tw-inset-0 tw-flex tw-items-center tw-justify-center',\n            wrapClassName,\n          )}\n          style={{ zIndex: contentZIndex }}\n        >\n          <DialogPrimitive.Content\n            ref={modalRef}\n            tabIndex={-1}\n            data-testid={dataTestId}\n            aria-label={ariaLabel}\n            className={cn(\n              // antd 兼容：保留 ant-modal class，消费方 CSS 通过 .ant-modal 选择器控制弹窗宽高等样式\n              // tw-outline-none：Radix 打开时会聚焦 Content，不抑制 outline 会渲染出蓝色焦点框\n              'ald-modal ant-modal tw-pointer-events-auto tw-box-border tw-flex tw-flex-col tw-overflow-hidden tw-bg-[var(--background-default)] tw-shadow-[var(--elevation-bottom-bottom-lg)] tw-outline-none',\n              fullscreen\n                ? 'ald-modal-fullscreen tw-fixed tw-inset-0 tw-size-full tw-rounded-none'\n                : 'tw-rounded-r-75',\n              !fullscreen &&\n                'tw-border tw-border-solid tw-border-[var(--border-default)]',\n              paddingLess && 'ald-modal-padding-less',\n              virtualScrollBar && 'ald-modal-virtual-scroll-bar',\n              hideHeaderBottomBorder && 'ald-modal-hide-header-bottom-border',\n              responsiveBounds && 'ald-modal-responsive-bounds',\n              className,\n            )}\n            style={{\n              ...(fullscreen\n                ? {}\n                : {\n                    width: responsiveBounds\n                      ? responsiveBoundsStyle.width\n                      : width || DEFAULT_WIDTH,\n                    ...responsiveBoundsStyle,\n                  }),\n              ...style,\n            }}\n            onOpenAutoFocus={(event) => {\n              event.preventDefault();\n              requestAnimationFrame(() => {\n                const modal = modalRef.current;\n                const activeElement = document.activeElement;\n                const activeOverlay =\n                  activeElement instanceof HTMLElement\n                    ? activeElement.closest(\n                        '[role=\"dialog\"], [role=\"menu\"], [role=\"listbox\"]',\n                      )\n                    : null;\n\n                // A nested overlay may open together with the modal and owns\n                // focus already. Do not steal focus back from that overlay.\n                if (\n                  !modal ||\n                  (activeOverlay &&\n                    !activeOverlay.classList.contains('ald-modal') &&\n                    activeOverlay !== modal &&\n                    !modal.contains(activeOverlay))\n                ) {\n                  return;\n                }\n                modal.focus({ preventScroll: true });\n              });\n            }}\n            onEscapeKeyDown={(event) => {\n              if (!event.defaultPrevented) modalEscapeEvents.add(event);\n              event.preventDefault();\n            }}\n            onPointerDownOutside={(e) => {\n              if (maskClosable) {\n                onCancel?.({} as React.MouseEvent<HTMLButtonElement>);\n              } else {\n                e.preventDefault();\n              }\n            }}\n            onInteractOutside={(e) => {\n              if (!maskClosable) {\n                e.preventDefault();\n              }\n            }}\n          >\n            {/* ant-modal-content compat wrapper — matches antd DOM nesting for consumer CSS */}\n            <div className=\"ant-modal-content tw-flex tw-h-full tw-flex-col\">\n              <ModalContentProviders\n                layerId={modalLayerId}\n                floatingLevel={nextFloatingLevel}\n              >\n                {!fullscreen && (\n                  <div\n                    className={cn(\n                      'ald-modal-header ant-modal-header tw-flex tw-items-start tw-justify-between tw-bg-[var(--background-default)] tw-px-6 tw-py-4',\n                      !hideHeaderBottomBorder &&\n                        'tw-border-b tw-border-solid tw-border-[var(--border-default)]',\n                    )}\n                  >\n                    <DialogPrimitive.Title asChild>\n                      <div className=\"tw-flex-1\">\n                        {ModalTitle({ icon, title, subTitle }, _modalType)}\n                      </div>\n                    </DialogPrimitive.Title>\n                    {closable && (\n                      <DialogPrimitive.Close asChild>\n                        <span className=\"ant-modal-close\" onClick={onCancel}>\n                          {closeIcon || (\n                            <IconButton\n                              icon={<CloseLLine size={20} />}\n                              size=\"middle\"\n                            />\n                          )}\n                        </span>\n                      </DialogPrimitive.Close>\n                    )}\n                  </div>\n                )}\n                {/* Hidden title for accessibility when fullscreen hides the header */}\n                {fullscreen && (\n                  <DialogPrimitive.Title className=\"tw-sr-only\">\n                    {title}\n                  </DialogPrimitive.Title>\n                )}\n                <div\n                  className={cn(\n                    'ald-modal-body ant-modal-body tw-flex-1 tw-text-sm tw-leading-5',\n                    fullscreen\n                      ? 'tw-h-full tw-overflow-auto tw-p-0'\n                      : 'tw-min-h-[130px]',\n                    !fullscreen &&\n                      (virtualScrollBar\n                        ? 'tw-overflow-hidden tw-p-0'\n                        : 'tw-overflow-auto'),\n                    !fullscreen &&\n                      !responsiveBounds &&\n                      !virtualScrollBar &&\n                      'tw-max-h-[68vh]',\n                    !fullscreen &&\n                      !paddingLess &&\n                      !virtualScrollBar &&\n                      'tw-p-6',\n                  )}\n                  style={bodyStyle}\n                >\n                  {virtualScrollBar ? (\n                    <ScrollArea\n                      className=\"ald-modal-body-wrap !tw-h-auto\"\n                      innerClassName={cn(\n                        'ald-modal-body-wrap-inner tw-max-h-[68vh]',\n                        paddingLess ? 'tw-p-0' : 'tw-px-[23px] tw-py-0',\n                      )}\n                    >\n                      {children}\n                    </ScrollArea>\n                  ) : (\n                    children\n                  )}\n                </div>\n                {!fullscreen && renderFooter()}\n              </ModalContentProviders>\n            </div>\n          </DialogPrimitive.Content>\n        </div>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n}\n\n// Static method helper\nfunction createStaticModal(\n  type: ModalFuncProps['type'],\n  props: ModalFuncProps,\n) {\n  const focusTarget = document.activeElement as HTMLElement | null;\n  const container = document.createElement('div');\n  document.body.appendChild(container);\n  const root = createRoot(container);\n\n  let currentProps = { ...props };\n  let destroyed = false;\n  let isTop = true;\n\n  const destroy = () => {\n    if (destroyed) return;\n    destroyed = true;\n    const shouldRestoreFocus = isTop;\n    root.unmount();\n    container.remove();\n    const idx = destroyFns.indexOf(destroy);\n    if (idx >= 0) destroyFns.splice(idx, 1);\n    queueMicrotask(() => {\n      if (shouldRestoreFocus && focusTarget?.isConnected) focusTarget.focus();\n    });\n  };\n\n  const update = (newProps: Partial<ModalFuncProps>) => {\n    currentProps = { ...currentProps, ...newProps };\n    render(currentProps);\n  };\n\n  const isConfirm = type === 'confirm';\n\n  const render = (p: ModalFuncProps) => {\n    const handleOk = () => {\n      p.onOk?.();\n      destroy();\n    };\n    const handleCancel = () => {\n      p.onCancel?.();\n      destroy();\n    };\n\n    root.render(\n      <OriginModal\n        open={true}\n        title={p.title}\n        subTitle={p.subTitle}\n        icon={p.icon || getIcon(type || 'info')}\n        onOk={handleOk}\n        onCancel={handleCancel}\n        okText={p.okText}\n        cancelText={p.cancelText}\n        okButtonProps={p.okButtonProps}\n        cancelButtonProps={p.cancelButtonProps}\n        okType={p.okType || (isConfirm ? 'dangerous' : 'primary')}\n        width={p.width || DEFAULT_WIDTH}\n        className={cn('ald-modal', p.className)}\n        closable={p.closable}\n        maskClosable={p.maskClosable}\n        _modalType={type}\n        onTopChange={(nextIsTop) => {\n          isTop = nextIsTop;\n        }}\n        footer={\n          isConfirm ? undefined : (\n            <Button\n              type=\"primary\"\n              size=\"middle\"\n              {...(p.okButtonProps || {})}\n              onClick={handleOk}\n            >\n              {p.okText || 'OK'}\n            </Button>\n          )\n        }\n      >\n        {p.content}\n      </OriginModal>,\n    );\n  };\n\n  destroyFns.push(destroy);\n  render(currentProps);\n\n  return { destroy, update };\n}\n\n// Attach static methods\ntype ModalFunc = (props: ModalFuncProps) => {\n  destroy: () => void;\n  update: (props: Partial<ModalFuncProps>) => void;\n};\n\n// ---------- useModal hook ----------\n\ninterface ModalInstance {\n  id: number;\n  type: ModalFuncProps['type'];\n  props: ModalFuncProps;\n  open: boolean;\n}\n\nexport interface ModalApiInstance {\n  destroy: () => void;\n  update: (newProps: Partial<ModalFuncProps>) => void;\n}\n\nexport interface ModalStaticFunctions {\n  info: (props: ModalFuncProps) => ModalApiInstance;\n  success: (props: ModalFuncProps) => ModalApiInstance;\n  error: (props: ModalFuncProps) => ModalApiInstance;\n  warning: (props: ModalFuncProps) => ModalApiInstance;\n  confirm: (props: ModalFuncProps) => ModalApiInstance;\n}\n\nfunction useModal(): [ModalStaticFunctions, React.ReactElement] {\n  const [modals, setModals] = useState<ModalInstance[]>([]);\n  const idCounter = useRef(0);\n\n  const removeModal = useCallback((id: number) => {\n    setModals((prev) =>\n      prev.map((m) => (m.id === id ? { ...m, open: false } : m)),\n    );\n    // Remove from DOM after animation\n    setTimeout(() => {\n      setModals((prev) => prev.filter((m) => m.id !== id));\n    }, 300);\n  }, []);\n\n  const updateModal = useCallback(\n    (id: number, newProps: Partial<ModalFuncProps>) => {\n      setModals((prev) =>\n        prev.map((m) =>\n          m.id === id ? { ...m, props: { ...m.props, ...newProps } } : m,\n        ),\n      );\n    },\n    [],\n  );\n\n  const openModal = useCallback(\n    (type: ModalFuncProps['type'], props: ModalFuncProps): ModalApiInstance => {\n      const id = ++idCounter.current;\n      const instance: ModalInstance = { id, type, props, open: true };\n      setModals((prev) => [...prev, instance]);\n\n      return {\n        destroy: () => removeModal(id),\n        update: (newProps: Partial<ModalFuncProps>) =>\n          updateModal(id, newProps),\n      };\n    },\n    [removeModal, updateModal],\n  );\n\n  const api = useMemo<ModalStaticFunctions>(\n    () => ({\n      info: (props) => openModal('info', props),\n      success: (props) => openModal('success', props),\n      error: (props) => openModal('error', props),\n      warning: (props) => openModal('warning', props),\n      confirm: (props) =>\n        openModal('confirm', { ...props, type: props.type || 'confirm' }),\n    }),\n    [openModal],\n  );\n\n  const contextHolder = (\n    <>\n      {modals.map((m) => {\n        const isConfirmType = m.type === 'confirm';\n        const handleOk = () => {\n          m.props.onOk?.();\n          removeModal(m.id);\n        };\n        const handleCancel = () => {\n          m.props.onCancel?.();\n          removeModal(m.id);\n        };\n        return (\n          <OriginModal\n            key={m.id}\n            open={m.open}\n            title={m.props.title}\n            subTitle={m.props.subTitle}\n            icon={m.props.icon || getIcon(m.type || 'info')}\n            onOk={handleOk}\n            onCancel={handleCancel}\n            okText={m.props.okText}\n            cancelText={m.props.cancelText}\n            okButtonProps={m.props.okButtonProps}\n            cancelButtonProps={m.props.cancelButtonProps}\n            okType={m.props.okType || (isConfirmType ? 'dangerous' : 'primary')}\n            width={m.props.width || DEFAULT_WIDTH}\n            className={cn('ald-modal', m.props.className)}\n            closable={m.props.closable}\n            maskClosable={m.props.maskClosable}\n            _modalType={m.type}\n            footer={\n              isConfirmType ? undefined : (\n                <Button\n                  type=\"primary\"\n                  size=\"middle\"\n                  {...(m.props.okButtonProps || {})}\n                  onClick={handleOk}\n                >\n                  {m.props.okText || 'OK'}\n                </Button>\n              )\n            }\n          >\n            {m.props.content}\n          </OriginModal>\n        );\n      })}\n    </>\n  );\n\n  return [api, contextHolder];\n}\n\n// ---------- end useModal ----------\n\nconst Modal = OriginModal as typeof OriginModal & {\n  info: ModalFunc;\n  success: ModalFunc;\n  error: ModalFunc;\n  warning: ModalFunc;\n  confirm: ModalFunc;\n  destroyAll: () => void;\n  useModal: typeof useModal;\n  config: (config: any) => void;\n};\n\nModal.info = (props) => createStaticModal('info', props);\nModal.success = (props) => createStaticModal('success', props);\nModal.error = (props) => createStaticModal('error', props);\nModal.warning = (props) => createStaticModal('warning', props);\nModal.confirm = (props) =>\n  createStaticModal('confirm', { ...props, type: props.type || 'confirm' });\n\nModal.destroyAll = () => {\n  while (destroyFns.length) {\n    const close = destroyFns.pop();\n    if (close) close();\n  }\n};\n\nModal.useModal = useModal;\nModal.config = () => {};\n\nexport default Modal;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Modal/index.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { hideOthers } from 'aria-hidden';\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { createRoot } from 'react-dom/client';\nimport Button, { ButtonType, IButtonProps } from '../Button';\nimport {\n  AttentionTriangleLightLine,\n  CheckCircleLightLine,\n  CloseLLine,\n  InformationCircleLightLine,\n} from '../Icon';\nimport '../IconButton/icon-button.css';\nimport ScrollArea from '../ScrollArea';\nimport {\n  FLOATING_LAYER_BASE_Z_INDEX,\n  FLOATING_LAYER_STEP,\n  FloatingLayerProvider,\n} from '../_utils/floatingLayer';\nimport {\n  ModalLayerProvider,\n  useModalLayer,\n} from '../_utils/overlayCoordinator';\nimport {\n  focusInitialDialogTarget,\n  markDialogEscapeEvent,\n  restoreDialogFocus,\n  useDialogAccessibility,\n} from '../_utils/dialogAccessibility';\nimport { LocaleContext, getTranslator } from '../locale/default';\nimport { cn } from '../lib/utils';\n\nexport const destroyFns: Array<() => void> = [];\n\nexport interface ModalProps {\n  open?: boolean;\n  onOk?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  onCancel?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  afterClose?: () => void;\n  title?: React.ReactNode;\n  subTitle?: React.ReactNode;\n  icon?: React.ReactElement;\n  width?: number | string;\n  footer?: React.ReactNode | null;\n  okText?: React.ReactNode;\n  cancelText?: React.ReactNode;\n  okButtonProps?: IButtonProps;\n  cancelButtonProps?: IButtonProps;\n  okType?: ButtonType;\n  confirmLoading?: boolean;\n  maskClosable?: boolean;\n  closable?: boolean;\n  closeIcon?: React.ReactNode;\n  centered?: boolean;\n  destroyOnClose?: boolean;\n  className?: string;\n  /** Pass through to the modal content root for automated testing. */\n  'data-testid'?: string;\n  /** Pass through to the modal content root for accessibility and automated testing. */\n  'aria-label'?: string;\n  /** Dialog semantic role. Use alertdialog only for explicitly urgent confirmation flows. */\n  role?: 'dialog' | 'alertdialog';\n  /** Applied to the outer wrap layer (matches antd wrapClassName behavior) */\n  wrapClassName?: string;\n  style?: React.CSSProperties;\n  bodyStyle?: React.CSSProperties;\n  zIndex?: number;\n  children?: React.ReactNode;\n  paddingLess?: boolean;\n  virtualScrollBar?: boolean;\n  hideHeaderBottomBorder?: boolean;\n  responsiveBounds?: boolean;\n  fullscreen?: boolean;\n  keyboard?: boolean;\n  afterOpenChange?: (open: boolean) => void;\n  getContainer?: (() => HTMLElement) | false;\n  /** @internal used by static methods to pass modal type for icon styling */\n  _modalType?: string;\n}\n\ninterface OriginModalProps extends ModalProps {\n  onTopChange?: (isTop: boolean) => void;\n}\n\nexport interface ModalFuncProps {\n  title?: React.ReactNode;\n  subTitle?: React.ReactNode;\n  content?: React.ReactNode;\n  icon?: React.ReactElement;\n  okText?: React.ReactNode;\n  cancelText?: React.ReactNode;\n  okButtonProps?: IButtonProps;\n  cancelButtonProps?: IButtonProps;\n  okType?: ButtonType;\n  onOk?: (...args: any[]) => any;\n  onCancel?: (...args: any[]) => any;\n  width?: number | string;\n  className?: string;\n  /** @deprecated Use `className` instead. Preserved for antd v4 compat. */\n  wrapClassName?: string;\n  closable?: boolean;\n  type?: 'info' | 'success' | 'error' | 'warn' | 'warning' | 'confirm';\n  centered?: boolean;\n  maskClosable?: boolean;\n  /** Dialog semantic role. Use alertdialog only for explicitly urgent confirmation flows. */\n  role?: 'dialog' | 'alertdialog';\n}\n\nconst DEFAULT_WIDTH = 552;\nfunction ModalContentProviders({\n  layerId,\n  floatingLevel,\n  children,\n}: {\n  layerId: number;\n  floatingLevel: number;\n  children: React.ReactNode;\n}) {\n  return (\n    <ModalLayerProvider id={layerId}>\n      <FloatingLayerProvider value={floatingLevel}>\n        {children}\n      </FloatingLayerProvider>\n    </ModalLayerProvider>\n  );\n}\n\nconst ModalTitle = (\n  {\n    icon,\n    title,\n    subTitle,\n    titleId,\n    descriptionId,\n  }: Pick<ModalProps, 'icon' | 'title' | 'subTitle'> & {\n    titleId?: string;\n    descriptionId?: string;\n  },\n  type?: string,\n) => (\n  <div className=\"ald-modal-title-container tw-flex tw-items-center tw-gap-4\">\n    {icon && (\n      <div\n        className={cn(\n          'ald-modal-icon-container tw-grid tw-size-10 tw-shrink-0 tw-place-items-center tw-rounded-[var(--global-grid-250)]',\n          type === 'info' &&\n            'ald-modal-cion-info-container tw-bg-[var(--background-informative-muted)]',\n          type === 'success' &&\n            'ald-modal-cion-success-container tw-bg-[var(--background-positive-muted)]',\n          type === 'warning' &&\n            'ald-modal-cion-warning-container tw-bg-[var(--background-warning-muted)]',\n          type === 'warn' &&\n            'ald-modal-cion-warning-container tw-bg-[var(--background-warning-muted)]',\n          type === 'error' &&\n            'ald-modal-cion-error-container tw-bg-[var(--background-negative-muted)]',\n          type === 'confirm' &&\n            'ald-modal-cion-confirm-container tw-bg-[var(--background-brand-muted)]',\n        )}\n      >\n        {icon}\n      </div>\n    )}\n    <div className=\"ald-modal-text-container\">\n      {title && (\n        <div\n          id={titleId}\n          className={cn(\n            'ald-modal-text-title tw-text-lg tw-font-semibold tw-leading-7 tw-text-[var(--content-primary)]',\n            !subTitle && 'ald-modal-text-title-only tw-text-xl',\n          )}\n        >\n          {title}\n        </div>\n      )}\n      {subTitle && (\n        <div\n          id={descriptionId}\n          className=\"ald-modal-text-sub-title tw-mt-1 tw-text-xs tw-leading-4 tw-text-[var(--content-secondary)]\"\n        >\n          {subTitle}\n        </div>\n      )}\n    </div>\n  </div>\n);\n\nfunction getIcon(\n  type: 'info' | 'success' | 'error' | 'warn' | 'warning' | 'confirm',\n) {\n  if (type === 'success')\n    return (\n      <CheckCircleLightLine\n        fill=\"var(--content-inverted-primary)\"\n        color=\"var(--background-positive-strong)\"\n        size={24}\n      />\n    );\n  if (type === 'error')\n    return (\n      <AttentionTriangleLightLine\n        color=\"var(--background-negative-strong)\"\n        fill=\"var(--content-inverted-primary)\"\n        size={24}\n      />\n    );\n  if (type === 'warning' || type === 'warn')\n    return (\n      <AttentionTriangleLightLine\n        color=\"var(--background-warning-strong)\"\n        size={24}\n      />\n    );\n  return (\n    <InformationCircleLightLine\n      size={24}\n      color=\"var(--action-primary-normal)\"\n    />\n  );\n}\n\nfunction OriginModal(props: OriginModalProps) {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n  const {\n    className,\n    'data-testid': dataTestId,\n    'aria-label': ariaLabel,\n    role = 'dialog',\n    children,\n    okType = 'primary',\n    width,\n    closeIcon,\n    subTitle,\n    okButtonProps = {},\n    cancelButtonProps = {},\n    okText = t.Modal.sure,\n    cancelText = t.Modal.cancel,\n    icon,\n    title,\n    paddingLess,\n    responsiveBounds,\n    hideHeaderBottomBorder,\n    virtualScrollBar,\n    style,\n    maskClosable = false,\n    fullscreen,\n    open = false,\n    onOk,\n    onCancel,\n    footer,\n    confirmLoading,\n    closable = true,\n    zIndex = 1000,\n    bodyStyle,\n    keyboard = true,\n    afterOpenChange,\n    wrapClassName,\n    _modalType,\n    onTopChange,\n  } = props;\n\n  const prevOpenRef = useRef(open);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const modalRef = useRef<HTMLDivElement>(null);\n  const generatedId = React.useId();\n  const titleId = `${generatedId}-title`;\n  const descriptionId = `${generatedId}-description`;\n  const modalLayer = useModalLayer(open, zIndex);\n  const { id: modalLayerId, maskZIndex, contentZIndex, isTop } = modalLayer;\n  const nextFloatingLevel =\n    (maskZIndex - FLOATING_LAYER_BASE_Z_INDEX) / FLOATING_LAYER_STEP + 1;\n\n  useDialogAccessibility({\n    open,\n    isTop,\n    keyboard,\n    containerRef: modalRef,\n    onEscape: () => onCancel?.({} as React.MouseEvent<HTMLButtonElement>),\n  });\n\n  useLayoutEffect(() => {\n    onTopChange?.(isTop);\n  }, [isTop, onTopChange]);\n\n  useEffect(() => {\n    if (prevOpenRef.current !== open) {\n      prevOpenRef.current = open;\n      afterOpenChange?.(open);\n    }\n  }, [open, afterOpenChange]);\n\n  // ---- modal={false} 补偿：aria-hidden（屏幕阅读器只感知弹窗） ----\n  useEffect(() => {\n    if (!open || !isTop || !contentRef.current) return;\n    return hideOthers(contentRef.current);\n  }, [isTop, open]);\n\n  const responsiveBoundsStyle = useMemo(() => {\n    if (!responsiveBounds) return {};\n    return {\n      width: 'calc(100% - 160px)',\n      maxWidth: '1680px',\n      minWidth: '1280px',\n      height: 'calc(100% - 48px)',\n      maxHeight: '900px',\n      minHeight: '640px',\n    };\n  }, [responsiveBounds]);\n\n  const mergedOkProps = { loading: confirmLoading, ...okButtonProps };\n  const headerBorderClassName = hideHeaderBottomBorder\n    ? '!tw-border-0'\n    : 'tw-border-b tw-border-solid tw-border-[var(--border-default)] !tw-border-x-0 !tw-border-t-0';\n\n  const renderFooter = () => {\n    if (footer === null) return null;\n    const footerBorderClassName =\n      'tw-border-t tw-border-solid tw-border-[var(--border-default)] !tw-border-x-0 !tw-border-b-0';\n    if (footer)\n      return (\n        // antd 兼容：antd .ant-modal-footer 使用 text-align:right 让 inline 按钮右对齐，\n        // 即使消费方传入 width:100% 的子容器，内部 inline 元素仍能右对齐。\n        // 此处同时使用 tw-flex tw-justify-end（flexbox 对齐）和 tw-text-right（继承式对齐）保持兼容。\n        <div\n          className={cn(\n            'ald-modal-footer ant-modal-footer tw-flex tw-items-center tw-justify-end tw-gap-2 tw-bg-[var(--background-default)] tw-px-6 tw-py-3 tw-text-right',\n            footerBorderClassName,\n          )}\n        >\n          {footer}\n        </div>\n      );\n    return (\n      <div\n        className={cn(\n          'ald-modal-footer ant-modal-footer tw-flex tw-justify-end tw-gap-2 tw-px-6 tw-py-4',\n          footerBorderClassName,\n        )}\n      >\n        <Button\n          type=\"secondary\"\n          size=\"middle\"\n          {...cancelButtonProps}\n          onClick={onCancel}\n        >\n          {cancelText}\n        </Button>\n        <Button type={okType} size=\"middle\" {...mergedOkProps} onClick={onOk}>\n          {okText}\n        </Button>\n      </div>\n    );\n  };\n\n  return (\n    <DialogPrimitive.Root open={open} modal={false}>\n      <DialogPrimitive.Portal>\n        {/* modal={false} 时 DialogPrimitive.Overlay 不渲染，用普通 div 替代 */}\n        {isTop && (\n          <div\n            className=\"ald-modal-mask tw-animate-in tw-fade-in-0 tw-fixed tw-inset-0 tw-bg-[var(--background-inverted)] tw-opacity-45\"\n            style={{ zIndex: maskZIndex }}\n            onPointerDown={() => {\n              if (maskClosable) {\n                onCancel?.({} as React.MouseEvent<HTMLButtonElement>);\n              }\n            }}\n          />\n        )}\n        {/* Centering wrapper — replaces transform centering so consumer CSS (top/left overrides) works */}\n        <div\n          ref={contentRef}\n          {...(!isTop ? { inert: '' } : {})}\n          aria-hidden={!isTop || undefined}\n          className={cn(\n            // antd 兼容：保留 ant-modal-wrap class，消费方 CSS 通过 wrapClassName + :global(.ant-modal) 控制弹窗宽高\n            'ald-modal-wrap ant-modal-wrap tw-pointer-events-none tw-fixed tw-inset-0 tw-flex tw-items-center tw-justify-center',\n            wrapClassName,\n          )}\n          style={{ zIndex: contentZIndex }}\n        >\n          <DialogPrimitive.Content\n            ref={modalRef}\n            tabIndex={-1}\n            role={role}\n            data-testid={dataTestId}\n            aria-modal={isTop || undefined}\n            aria-labelledby={title ? titleId : undefined}\n            aria-describedby={subTitle ? descriptionId : undefined}\n            aria-label={ariaLabel}\n            className={cn(\n              // antd 兼容：保留 ant-modal class，消费方 CSS 通过 .ant-modal 选择器控制弹窗宽高等样式\n              // tw-outline-none：Radix 打开时会聚焦 Content，不抑制 outline 会渲染出蓝色焦点框\n              'ald-modal ant-modal tw-pointer-events-auto tw-box-border tw-flex tw-flex-col tw-overflow-hidden tw-border-0 tw-bg-[var(--background-default)] tw-shadow-none tw-outline-none',\n              fullscreen\n                ? 'ald-modal-fullscreen tw-fixed tw-inset-0 tw-size-full tw-rounded-none'\n                : 'tw-rounded-r-75',\n              paddingLess && 'ald-modal-padding-less',\n              virtualScrollBar && 'ald-modal-virtual-scroll-bar',\n              hideHeaderBottomBorder && 'ald-modal-hide-header-bottom-border',\n              responsiveBounds && 'ald-modal-responsive-bounds',\n              className,\n            )}\n            style={{\n              ...(fullscreen\n                ? {}\n                : {\n                    width: responsiveBounds\n                      ? responsiveBoundsStyle.width\n                      : width || DEFAULT_WIDTH,\n                    ...responsiveBoundsStyle,\n                  }),\n              ...style,\n            }}\n            onOpenAutoFocus={(event) => {\n              event.preventDefault();\n              requestAnimationFrame(() => {\n                const modal = modalRef.current;\n                if (modal) focusInitialDialogTarget(modal);\n              });\n            }}\n            onEscapeKeyDown={(event) => {\n              if (!event.defaultPrevented) markDialogEscapeEvent(event);\n              event.preventDefault();\n            }}\n            onPointerDownOutside={(e) => {\n              if (maskClosable) {\n                onCancel?.({} as React.MouseEvent<HTMLButtonElement>);\n              } else {\n                e.preventDefault();\n              }\n            }}\n            onInteractOutside={(e) => {\n              if (!maskClosable) {\n                e.preventDefault();\n              }\n            }}\n          >\n            {/* ant-modal-content compat wrapper — matches antd DOM nesting for consumer CSS.\n                Visual chrome is owned by .ald-modal to avoid nested antd styles adding\n                an extra footer-side/bottom edge. */}\n            <div className=\"ant-modal-content tw-flex tw-h-full tw-flex-col !tw-rounded-none !tw-border-0 !tw-bg-transparent !tw-p-0 !tw-shadow-none\">\n              <ModalContentProviders\n                layerId={modalLayerId}\n                floatingLevel={nextFloatingLevel}\n              >\n                {!fullscreen && (\n                  <div\n                    className={cn(\n                      'ald-modal-header ant-modal-header tw-flex tw-items-start tw-justify-between tw-bg-[var(--background-default)] tw-px-6 tw-py-4',\n                      headerBorderClassName,\n                    )}\n                  >\n                    <DialogPrimitive.Title asChild>\n                      <div className=\"tw-flex-1\">\n                        {ModalTitle(\n                          { icon, title, subTitle, titleId, descriptionId },\n                          _modalType,\n                        )}\n                      </div>\n                    </DialogPrimitive.Title>\n                    {closable && (\n                      <DialogPrimitive.Close asChild>\n                        <button\n                          type=\"button\"\n                          className=\"ant-modal-close ald-icon-button ald-icon-button-middle focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-[var(--focus-ring)] forced-colors:focus-visible:tw-outline-[Highlight]\"\n                          aria-label=\"Close\"\n                          data-overlay-close=\"true\"\n                          onClick={onCancel}\n                        >\n                          <span className=\"ald-icon-button-wrap\">\n                            {closeIcon || <CloseLLine size={20} />}\n                          </span>\n                        </button>\n                      </DialogPrimitive.Close>\n                    )}\n                  </div>\n                )}\n                {/* Hidden title for accessibility when fullscreen hides the header */}\n                {fullscreen && (\n                  <DialogPrimitive.Title asChild>\n                    <div className=\"tw-sr-only\">\n                      {title && <span id={titleId}>{title}</span>}\n                    </div>\n                  </DialogPrimitive.Title>\n                )}\n                {subTitle && (\n                  <DialogPrimitive.Description className=\"tw-sr-only\">\n                    {subTitle}\n                  </DialogPrimitive.Description>\n                )}\n                <div\n                  className={cn(\n                    'ald-modal-body ant-modal-body tw-flex-1 tw-text-sm tw-leading-5',\n                    fullscreen\n                      ? 'tw-h-full tw-overflow-auto tw-p-0'\n                      : 'tw-min-h-[130px]',\n                    !fullscreen &&\n                      (virtualScrollBar\n                        ? 'tw-overflow-hidden tw-p-0'\n                        : 'tw-overflow-auto'),\n                    !fullscreen &&\n                      !responsiveBounds &&\n                      !virtualScrollBar &&\n                      'tw-max-h-[68vh]',\n                    !fullscreen &&\n                      !paddingLess &&\n                      !virtualScrollBar &&\n                      'tw-p-6',\n                  )}\n                  style={bodyStyle}\n                >\n                  {virtualScrollBar ? (\n                    <ScrollArea\n                      className=\"ald-modal-body-wrap !tw-h-auto\"\n                      innerClassName={cn(\n                        'ald-modal-body-wrap-inner tw-max-h-[68vh]',\n                        paddingLess ? 'tw-p-0' : 'tw-px-[23px] tw-py-0',\n                      )}\n                    >\n                      {children}\n                    </ScrollArea>\n                  ) : (\n                    children\n                  )}\n                </div>\n                {!fullscreen && renderFooter()}\n              </ModalContentProviders>\n            </div>\n          </DialogPrimitive.Content>\n        </div>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n}\n\n// Static method helper\nfunction createStaticModal(\n  type: ModalFuncProps['type'],\n  props: ModalFuncProps,\n) {\n  const focusTarget = document.activeElement as HTMLElement | null;\n  const container = document.createElement('div');\n  document.body.appendChild(container);\n  const root = createRoot(container);\n\n  let currentProps = { ...props };\n  let destroyed = false;\n  let isTop = true;\n\n  const destroy = () => {\n    if (destroyed) return;\n    destroyed = true;\n    const shouldRestoreFocus = isTop;\n    root.unmount();\n    container.remove();\n    const idx = destroyFns.indexOf(destroy);\n    if (idx >= 0) destroyFns.splice(idx, 1);\n    if (shouldRestoreFocus) restoreDialogFocus(focusTarget);\n  };\n\n  const update = (newProps: Partial<ModalFuncProps>) => {\n    currentProps = { ...currentProps, ...newProps };\n    render(currentProps);\n  };\n\n  const isConfirm = type === 'confirm';\n\n  const render = (p: ModalFuncProps) => {\n    const handleOk = () => {\n      p.onOk?.();\n      destroy();\n    };\n    const handleCancel = () => {\n      p.onCancel?.();\n      destroy();\n    };\n\n    root.render(\n      <OriginModal\n        open={true}\n        title={p.title}\n        subTitle={p.subTitle}\n        icon={p.icon || getIcon(type || 'info')}\n        onOk={handleOk}\n        onCancel={handleCancel}\n        okText={p.okText}\n        cancelText={p.cancelText}\n        okButtonProps={p.okButtonProps}\n        cancelButtonProps={p.cancelButtonProps}\n        okType={p.okType || (isConfirm ? 'dangerous' : 'primary')}\n        width={p.width || DEFAULT_WIDTH}\n        className={cn('ald-modal', p.className)}\n        closable={p.closable}\n        maskClosable={p.maskClosable}\n        role={p.role}\n        _modalType={type}\n        onTopChange={(nextIsTop) => {\n          isTop = nextIsTop;\n        }}\n        footer={\n          isConfirm ? undefined : (\n            <Button\n              type=\"primary\"\n              size=\"middle\"\n              {...(p.okButtonProps || {})}\n              onClick={handleOk}\n            >\n              {p.okText || 'OK'}\n            </Button>\n          )\n        }\n      >\n        {p.content}\n      </OriginModal>,\n    );\n  };\n\n  destroyFns.push(destroy);\n  render(currentProps);\n\n  return { destroy, update };\n}\n\n// Attach static methods\ntype ModalFunc = (props: ModalFuncProps) => {\n  destroy: () => void;\n  update: (props: Partial<ModalFuncProps>) => void;\n};\n\n// ---------- useModal hook ----------\n\ninterface ModalInstance {\n  id: number;\n  type: ModalFuncProps['type'];\n  props: ModalFuncProps;\n  open: boolean;\n}\n\nexport interface ModalApiInstance {\n  destroy: () => void;\n  update: (newProps: Partial<ModalFuncProps>) => void;\n}\n\nexport interface ModalStaticFunctions {\n  info: (props: ModalFuncProps) => ModalApiInstance;\n  success: (props: ModalFuncProps) => ModalApiInstance;\n  error: (props: ModalFuncProps) => ModalApiInstance;\n  warning: (props: ModalFuncProps) => ModalApiInstance;\n  confirm: (props: ModalFuncProps) => ModalApiInstance;\n}\n\nfunction useModal(): [ModalStaticFunctions, React.ReactElement] {\n  const [modals, setModals] = useState<ModalInstance[]>([]);\n  const idCounter = useRef(0);\n\n  const removeModal = useCallback((id: number) => {\n    setModals((prev) =>\n      prev.map((m) => (m.id === id ? { ...m, open: false } : m)),\n    );\n    // Remove from DOM after animation\n    setTimeout(() => {\n      setModals((prev) => prev.filter((m) => m.id !== id));\n    }, 300);\n  }, []);\n\n  const updateModal = useCallback(\n    (id: number, newProps: Partial<ModalFuncProps>) => {\n      setModals((prev) =>\n        prev.map((m) =>\n          m.id === id ? { ...m, props: { ...m.props, ...newProps } } : m,\n        ),\n      );\n    },\n    [],\n  );\n\n  const openModal = useCallback(\n    (type: ModalFuncProps['type'], props: ModalFuncProps): ModalApiInstance => {\n      const id = ++idCounter.current;\n      const instance: ModalInstance = { id, type, props, open: true };\n      setModals((prev) => [...prev, instance]);\n\n      return {\n        destroy: () => removeModal(id),\n        update: (newProps: Partial<ModalFuncProps>) =>\n          updateModal(id, newProps),\n      };\n    },\n    [removeModal, updateModal],\n  );\n\n  const api = useMemo<ModalStaticFunctions>(\n    () => ({\n      info: (props) => openModal('info', props),\n      success: (props) => openModal('success', props),\n      error: (props) => openModal('error', props),\n      warning: (props) => openModal('warning', props),\n      confirm: (props) =>\n        openModal('confirm', { ...props, type: props.type || 'confirm' }),\n    }),\n    [openModal],\n  );\n\n  const contextHolder = (\n    <>\n      {modals.map((m) => {\n        const isConfirmType = m.type === 'confirm';\n        const handleOk = () => {\n          m.props.onOk?.();\n          removeModal(m.id);\n        };\n        const handleCancel = () => {\n          m.props.onCancel?.();\n          removeModal(m.id);\n        };\n        return (\n          <OriginModal\n            key={m.id}\n            open={m.open}\n            title={m.props.title}\n            subTitle={m.props.subTitle}\n            icon={m.props.icon || getIcon(m.type || 'info')}\n            onOk={handleOk}\n            onCancel={handleCancel}\n            okText={m.props.okText}\n            cancelText={m.props.cancelText}\n            okButtonProps={m.props.okButtonProps}\n            cancelButtonProps={m.props.cancelButtonProps}\n            okType={m.props.okType || (isConfirmType ? 'dangerous' : 'primary')}\n            width={m.props.width || DEFAULT_WIDTH}\n            className={cn('ald-modal', m.props.className)}\n            closable={m.props.closable}\n            maskClosable={m.props.maskClosable}\n            role={m.props.role}\n            _modalType={m.type}\n            footer={\n              isConfirmType ? undefined : (\n                <Button\n                  type=\"primary\"\n                  size=\"middle\"\n                  {...(m.props.okButtonProps || {})}\n                  onClick={handleOk}\n                >\n                  {m.props.okText || 'OK'}\n                </Button>\n              )\n            }\n          >\n            {m.props.content}\n          </OriginModal>\n        );\n      })}\n    </>\n  );\n\n  return [api, contextHolder];\n}\n\n// ---------- end useModal ----------\n\nconst Modal = OriginModal as typeof OriginModal & {\n  info: ModalFunc;\n  success: ModalFunc;\n  error: ModalFunc;\n  warning: ModalFunc;\n  confirm: ModalFunc;\n  destroyAll: () => void;\n  useModal: typeof useModal;\n  config: (config: any) => void;\n};\n\nModal.info = (props) => createStaticModal('info', props);\nModal.success = (props) => createStaticModal('success', props);\nModal.error = (props) => createStaticModal('error', props);\nModal.warning = (props) => createStaticModal('warning', props);\nModal.confirm = (props) =>\n  createStaticModal('confirm', { ...props, type: props.type || 'confirm' });\n\nModal.destroyAll = () => {\n  while (destroyFns.length) {\n    const close = destroyFns.pop();\n    if (close) close();\n  }\n};\n\nModal.useModal = useModal;\nModal.config = () => {};\n\nexport default Modal;\n"],"mappings":"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"}

package/dist/OverflowCount/index.js

@@ -48,6 +48,16 @@ function OverflowCount(props) {
 			onOpenChange: (open) => setIsPopupOpen(open),
 			children: /* @__PURE__ */ jsx("div", {
 				className: cn(prefixCls("rest-btn"), "tw-flex tw-cursor-pointer tw-items-center"),
+				role: "button",
+				tabIndex: 0,
+				"aria-label": `Show ${omittedItems.length} more items`,
+				"aria-expanded": isPopupOpen,
+				onKeyDown: (event) => {
+					if (event.key === "Enter" || event.key === " ") {
+						event.preventDefault();
+						setIsPopupOpen((open) => !open);
+					}
+				},
 				children: /* @__PURE__ */ jsx(Badge, {
 					count: `+${omittedItems.length}`,
 					status: "info",