@aloudata/aloudata-design 3.0.0-beta.2 → 3.0.0-beta.20

package/dist/MemberPicker/components/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","names":[],"sources":["../../../src/MemberPicker/components/Panel.tsx"],"sourcesContent":["import { cn } from '../../lib/utils';\n\nimport React, {\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport {\n  EUserType,\n  IUserGroup,\n  TUser,\n  TUserGroupValue,\n  TUserValue,\n} from '../../ConfigProvider/getUserList';\nimport Tabs from '../../Tabs';\nimport { LocaleContext, getTranslator } from '../../locale/default';\nimport { EMemberPicker, IUser } from '../interface';\nimport { getId } from '../utils';\nimport { isUser, isUserGroup } from '../utils/getUsersWithUserId';\nimport MemberSelection from './MemberSelection';\nimport SelectedMemberTags from './SelectedMemberTags';\nimport SelectorFooter from './SelectorFooter';\nimport UserGroupSelection from './UserGroupSelection';\n\ninterface IPanelProps {\n  type: EMemberPicker;\n  multiple?: boolean;\n  onChange?: (value: TUser) => void;\n  dropdownWidth?: number;\n  value?: TUser | (IUser | IUserGroup);\n  dataList: TUser;\n  onSearchValueChange?: (value: string) => void;\n  onCancel?: () => void;\n  loading: boolean;\n  className?: string;\n  lockedIds: Array<TUserValue | TUserGroupValue>;\n  footer?: ReactNode;\n  renderItem?: (\n    item: IUser | IUserGroup,\n    context: {\n      isSelected: boolean;\n      disabled: boolean;\n      onClick: () => void;\n      onNextLevel?: () => void;\n      originNode: ReactNode;\n    },\n  ) => ReactNode;\n  renderSelectedTag?: (\n    user: IUser | IUserGroup,\n    originNode: ReactNode,\n  ) => ReactNode;\n  filterItem?: (item: IUser | IUserGroup) => boolean;\n}\n\nexport const userDisplayNameIsRepeated = (\n  userList: TUser,\n  displayName?: string,\n) => {\n  return (\n    userList.filter(\n      (user) => user.type === EUserType.USER && user.nickname === displayName,\n    ).length > 1\n  );\n};\n\nexport default function Panel(props: IPanelProps) {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const {\n    type,\n    multiple,\n    dropdownWidth,\n    value,\n    onChange,\n    dataList,\n    onSearchValueChange,\n    className,\n    lockedIds,\n    footer,\n    onCancel,\n    renderItem,\n    renderSelectedTag,\n    filterItem,\n  } = props;\n\n  const [selectedUsers, setSelected] = useState<TUser>([]);\n\n  const onSelectionChange = useCallback(\n    (selected: boolean, user: IUser | IUserGroup) => {\n      if (multiple) {\n        if (selected) {\n          setSelected([...selectedUsers, user]);\n        } else {\n          setSelected(\n            selectedUsers.filter((item) => getId(item) !== getId(user)),\n          );\n        }\n      } else {\n        if (selected) {\n          setSelected([user]);\n          onChange?.([user]);\n        } else {\n          setSelected([]);\n          onChange?.([]);\n        }\n      }\n    },\n    [multiple, selectedUsers, onChange],\n  );\n\n  const onRemove = useCallback(\n    (user: IUser | IUserGroup) => {\n      setSelected(selectedUsers.filter((item) => getId(item) !== getId(user)));\n    },\n    [selectedUsers],\n  );\n\n  const panelwidth = useMemo(() => {\n    if (dropdownWidth) {\n      return dropdownWidth;\n    } else if (multiple) {\n      return 480;\n    } else {\n      return 160;\n    }\n  }, [dropdownWidth, multiple]);\n\n  useEffect(() => {\n    if (value) {\n      if (Array.isArray(value)) {\n        setSelected(value);\n      } else {\n        setSelected([value]);\n      }\n    }\n  }, [setSelected, value]);\n\n  const renderDropdown = useCallback(() => {\n    const userSelection = (\n      <MemberSelection\n        className={'ald-member-picker-member-selection-multiple'}\n        userList={dataList.filter(isUser)}\n        filterItem={filterItem}\n        width={(panelwidth - 6) / 2}\n        selectedUsers={selectedUsers.filter(isUser)}\n        onChange={onSelectionChange}\n        onSearchValueChange={onSearchValueChange}\n        multiple={true}\n        lockedIds={lockedIds}\n        loading={props.loading}\n        renderItem={renderItem}\n      ></MemberSelection>\n    );\n    const userGroupSelection = (\n      <UserGroupSelection\n        className={'ald-member-picker-member-selection-multiple'}\n        userGroupList={dataList.filter(isUserGroup)}\n        filterItem={filterItem}\n        width={(panelwidth - 6) / 2}\n        selectedUsersGroup={selectedUsers.filter(isUserGroup)}\n        onChange={onSelectionChange}\n        onSearchValueChange={onSearchValueChange}\n        multiple={true}\n        lockedIds={lockedIds}\n        loading={props.loading}\n        renderItem={renderItem}\n      ></UserGroupSelection>\n    );\n    if (type === EMemberPicker.USER) {\n      return userSelection;\n    }\n    if (type === EMemberPicker.GROUP) {\n      return userGroupSelection;\n    }\n    if (type === EMemberPicker.BOTH) {\n      return (\n        <Tabs\n          centered\n          destroyInactiveTabPane\n          items={[\n            {\n              key: 'user',\n              label: t.MemberPicker.users,\n              children: userSelection,\n            },\n            {\n              key: 'userGroup',\n              label: t.MemberPicker.userGroups,\n              children: userGroupSelection,\n            },\n          ]}\n          className=\"ald-member-tabs\"\n        ></Tabs>\n      );\n    }\n  }, [\n    t,\n    dataList,\n    panelwidth,\n    selectedUsers,\n    onSelectionChange,\n    onSearchValueChange,\n    lockedIds,\n    props.loading,\n    type,\n    renderItem,\n    filterItem,\n  ]);\n\n  return (\n    <div\n      className={cn(className, 'ald-member-picker-wrapper', {\n        ['ald-member-picker-multiple']: multiple,\n        ['ald-member-picker-single']: !multiple,\n      })}\n      style={{ width: panelwidth }}\n    >\n      {multiple ? (\n        <>\n          <div className=\"ald-member-picker-member-selection-wrapper\">\n            {renderDropdown()}\n          </div>\n          <SelectedMemberTags\n            className={'ald-member-picker-selected-member-tags'}\n            selectedUsers={selectedUsers}\n            width={(panelwidth - 3) / 2}\n            onRemove={onRemove}\n            lockedIds={lockedIds}\n            userList={dataList}\n            renderSelectedTag={renderSelectedTag}\n          ></SelectedMemberTags>\n          <SelectorFooter\n            className={'ald-member-picker-selector-footer'}\n            onCancel={onCancel}\n            onOk={() => {\n              onChange?.(selectedUsers);\n            }}\n            footer={footer}\n          ></SelectorFooter>\n        </>\n      ) : (\n        <>\n          {type === EMemberPicker.USER && (\n            <MemberSelection\n              className={'ald-member-picker-member-selection-single'}\n              userList={dataList.filter(isUser)}\n              width={panelwidth - 2}\n              onChange={onSelectionChange}\n              selectedUsers={selectedUsers.filter(isUser)}\n              onSearchValueChange={onSearchValueChange}\n              multiple={false && multiple}\n              lockedIds={lockedIds}\n              loading={props.loading}\n              renderItem={renderItem}\n            ></MemberSelection>\n          )}\n          {type === EMemberPicker.GROUP && (\n            <UserGroupSelection\n              className={'ald-member-picker-member-selection-multiple'}\n              userGroupList={dataList.filter(isUserGroup)}\n              width={(panelwidth - 3) / 2}\n              selectedUsersGroup={selectedUsers.filter(isUserGroup)}\n              onChange={onSelectionChange}\n              onSearchValueChange={onSearchValueChange}\n              multiple={false}\n              lockedIds={lockedIds}\n              loading={props.loading}\n              renderItem={renderItem}\n            ></UserGroupSelection>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Panel.js","names":[],"sources":["../../../src/MemberPicker/components/Panel.tsx"],"sourcesContent":["import { cn } from '../../lib/utils';\n\nimport React, {\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport {\n  EUserType,\n  IUserGroup,\n  TUser,\n  TUserGroupValue,\n  TUserValue,\n} from '../../ConfigProvider/getUserList';\nimport Tabs from '../../Tabs';\nimport { LocaleContext, getTranslator } from '../../locale/default';\nimport { EMemberPicker, IUser } from '../interface';\nimport { getId } from '../utils';\nimport { isUser, isUserGroup } from '../utils/getUsersWithUserId';\nimport MemberSelection from './MemberSelection';\nimport SelectedMemberTags from './SelectedMemberTags';\nimport SelectorFooter from './SelectorFooter';\nimport UserGroupSelection from './UserGroupSelection';\n\ninterface IPanelProps {\n  type: EMemberPicker;\n  multiple?: boolean;\n  onChange?: (value: TUser) => void;\n  dropdownWidth?: number;\n  value?: TUser | (IUser | IUserGroup);\n  dataList: TUser;\n  onSearchValueChange?: (value: string) => void;\n  onCancel?: () => void;\n  loading: boolean;\n  className?: string;\n  lockedIds: Array<TUserValue | TUserGroupValue>;\n  footer?: ReactNode;\n  renderItem?: (\n    item: IUser | IUserGroup,\n    context: {\n      isSelected: boolean;\n      disabled: boolean;\n      onClick: () => void;\n      onNextLevel?: () => void;\n      originNode: ReactNode;\n    },\n  ) => ReactNode;\n  renderSelectedTag?: (\n    user: IUser | IUserGroup,\n    originNode: ReactNode,\n  ) => ReactNode;\n  filterItem?: (item: IUser | IUserGroup) => boolean;\n}\n\nexport const userDisplayNameIsRepeated = (\n  userList: TUser,\n  displayName?: string,\n) => {\n  return (\n    userList.filter(\n      (user) => user.type === EUserType.USER && user.nickname === displayName,\n    ).length > 1\n  );\n};\n\nexport default function Panel(props: IPanelProps) {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const {\n    type,\n    multiple,\n    dropdownWidth,\n    value,\n    onChange,\n    dataList,\n    onSearchValueChange,\n    className,\n    lockedIds,\n    footer,\n    onCancel,\n    renderItem,\n    renderSelectedTag,\n    filterItem,\n  } = props;\n\n  const [selectedUsers, setSelected] = useState<TUser>([]);\n\n  const onSelectionChange = useCallback(\n    (selected: boolean, user: IUser | IUserGroup) => {\n      if (multiple) {\n        if (selected) {\n          setSelected([...selectedUsers, user]);\n        } else {\n          setSelected(\n            selectedUsers.filter((item) => getId(item) !== getId(user)),\n          );\n        }\n      } else {\n        if (selected) {\n          setSelected([user]);\n          onChange?.([user]);\n        } else {\n          setSelected([]);\n          onChange?.([]);\n        }\n      }\n    },\n    [multiple, selectedUsers, onChange],\n  );\n\n  const onRemove = useCallback(\n    (user: IUser | IUserGroup) => {\n      setSelected(selectedUsers.filter((item) => getId(item) !== getId(user)));\n    },\n    [selectedUsers],\n  );\n\n  const panelwidth = useMemo(() => {\n    if (dropdownWidth) {\n      return dropdownWidth;\n    } else if (multiple) {\n      return 480;\n    } else {\n      return 160;\n    }\n  }, [dropdownWidth, multiple]);\n\n  useEffect(() => {\n    if (value) {\n      if (Array.isArray(value)) {\n        setSelected(value);\n      } else {\n        setSelected([value]);\n      }\n    }\n  }, [setSelected, value]);\n\n  const renderDropdown = useCallback(() => {\n    const userSelection = (\n      <MemberSelection\n        className={'ald-member-picker-member-selection-multiple'}\n        userList={dataList.filter(isUser)}\n        filterItem={filterItem}\n        width={(panelwidth - 6) / 2}\n        selectedUsers={selectedUsers.filter(isUser)}\n        onChange={onSelectionChange}\n        onSearchValueChange={onSearchValueChange}\n        multiple={true}\n        lockedIds={lockedIds}\n        loading={props.loading}\n        renderItem={renderItem}\n      ></MemberSelection>\n    );\n    const userGroupSelection = (\n      <UserGroupSelection\n        className={'ald-member-picker-member-selection-multiple'}\n        userGroupList={dataList.filter(isUserGroup)}\n        filterItem={filterItem}\n        width={(panelwidth - 6) / 2}\n        selectedUsersGroup={selectedUsers.filter(isUserGroup)}\n        onChange={onSelectionChange}\n        onSearchValueChange={onSearchValueChange}\n        multiple={true}\n        lockedIds={lockedIds}\n        loading={props.loading}\n        renderItem={renderItem}\n      ></UserGroupSelection>\n    );\n    if (type === EMemberPicker.USER) {\n      return userSelection;\n    }\n    if (type === EMemberPicker.GROUP) {\n      return userGroupSelection;\n    }\n    if (type === EMemberPicker.BOTH) {\n      return (\n        <Tabs\n          centered\n          destroyInactiveTabPane\n          items={[\n            {\n              key: 'user',\n              label: t.MemberPicker.users,\n              children: userSelection,\n            },\n            {\n              key: 'userGroup',\n              label: t.MemberPicker.userGroups,\n              children: userGroupSelection,\n            },\n          ]}\n          className=\"ald-member-tabs\"\n        ></Tabs>\n      );\n    }\n  }, [\n    t,\n    dataList,\n    panelwidth,\n    selectedUsers,\n    onSelectionChange,\n    onSearchValueChange,\n    lockedIds,\n    props.loading,\n    type,\n    renderItem,\n    filterItem,\n  ]);\n\n  return (\n    <div\n      className={cn(className, 'ald-member-picker-wrapper', {\n        ['ald-member-picker-multiple']: multiple,\n        ['ald-member-picker-single']: !multiple,\n      })}\n      style={{ width: panelwidth }}\n    >\n      {multiple ? (\n        <>\n          <div className=\"ald-member-picker-inner\">\n            <div className=\"ald-member-picker-member-selection-wrapper\">\n              {renderDropdown()}\n            </div>\n            <SelectedMemberTags\n              className={'ald-member-picker-selected-member-tags'}\n              selectedUsers={selectedUsers}\n              width={(panelwidth - 3) / 2}\n              onRemove={onRemove}\n              lockedIds={lockedIds}\n              userList={dataList}\n              renderSelectedTag={renderSelectedTag}\n            ></SelectedMemberTags>\n          </div>\n          <SelectorFooter\n            className={'ald-member-picker-selector-footer'}\n            onCancel={onCancel}\n            onOk={() => {\n              onChange?.(selectedUsers);\n            }}\n            footer={footer}\n          ></SelectorFooter>\n        </>\n      ) : (\n        <>\n          {type === EMemberPicker.USER && (\n            <MemberSelection\n              className={'ald-member-picker-member-selection-single'}\n              userList={dataList.filter(isUser)}\n              width={panelwidth - 2}\n              onChange={onSelectionChange}\n              selectedUsers={selectedUsers.filter(isUser)}\n              onSearchValueChange={onSearchValueChange}\n              multiple={false && multiple}\n              lockedIds={lockedIds}\n              loading={props.loading}\n              renderItem={renderItem}\n            ></MemberSelection>\n          )}\n          {type === EMemberPicker.GROUP && (\n            <UserGroupSelection\n              className={'ald-member-picker-member-selection-multiple'}\n              userGroupList={dataList.filter(isUserGroup)}\n              width={(panelwidth - 3) / 2}\n              selectedUsersGroup={selectedUsers.filter(isUserGroup)}\n              onChange={onSelectionChange}\n              onSearchValueChange={onSearchValueChange}\n              multiple={false}\n              lockedIds={lockedIds}\n              loading={props.loading}\n              renderItem={renderItem}\n            ></UserGroupSelection>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/MemberPicker/index.js

@@ -15,16 +15,20 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import _ from "lodash";
 import { usePrevious, useRequest } from "ahooks";
 //#region src/MemberPicker/index.tsx
+var DEFAULT_MULTIPLE_DROPDOWN_WIDTH = 480;
+var DEFAULT_SINGLE_DROPDOWN_WIDTH = 160;
 var Component = (props) => {
 	const { locale } = useContext(LocaleContext);
 	const t = getTranslator(locale);
 	const { value, type = EMemberPicker.USER, onChange, multiple, dropdownWidth, open, onOpenChange, placeholder = t.MemberPicker.select, className, allowClear, disabled, onClear, size, prefix: propPrefix, lockedIds = [], footer, onCancel, filterItem, mode: propsMode, renderItem, renderSelectedTag, ...restProps } = props;
+	const allowOverlap = props.allowOverlap ?? false;
 	const { getUsersByIds, getUsersByKeywords } = AldCustomConfigProvider.useGetUserList();
 	const [selectedUserList, setSelectedUserList] = useState([]);
 	const prevValue = usePrevious(value);
 	const [searchUserList, setSearchUserList] = useState([]);
 	const [searchString, setSearchString] = useState("");
 	const [dropdownContentWidth, setDropdownContentWidth] = useState(dropdownWidth);
+	const panelWidth = dropdownWidth ?? (multiple ? DEFAULT_MULTIPLE_DROPDOWN_WIDTH : DEFAULT_SINGLE_DROPDOWN_WIDTH);
 	const triggerRef = useRef(null);
 	const onSearchValueChange = useCallback((v) => {
 		setSearchString(v);
@@ -164,7 +168,6 @@ var Component = (props) => {
 		}
 		return multiple ? multiple : propsMode;
 	}, [multiple, propsMode]);
-	console.log(mode);
 	const selectOpen = typeof open === "boolean" ? open : dropdownOpen;
 	return /* @__PURE__ */ jsx(Select_default, {
 		prefix: propPrefix,
@@ -214,7 +217,7 @@ var Component = (props) => {
 			else onChange?.();
 			onClear?.();
 		},
-		popupClassName: cn("ald-member-picker-popup", props.popupClassName),
+		popupClassName: cn("ald-member-picker-popup", allowOverlap && "ald-member-picker-popup-adaptive", props.popupClassName),
 		mode,
 		options: selectedUserList.map((item) => {
 			if (item.type === EUserType.USER_GROUP) return {
@@ -223,7 +226,7 @@ var Component = (props) => {
 				tag: /* @__PURE__ */ jsxs("div", {
 					className: "ald-member-picker-tag",
 					children: [/* @__PURE__ */ jsx(Avatar, {
-						type: "userGroup",
+						type: "team",
 						size: 20,
 						children: item.name || item.groupId
 					}), item.name || item.groupId]
@@ -237,7 +240,7 @@ var Component = (props) => {
 					children: [/* @__PURE__ */ jsx(Avatar, {
 						size: 20,
 						src: item.photo,
-						type: item.type === EUserType.USER ? "user" : "userGroup",
+						type: item.type === EUserType.USER ? "user" : "team",
 						children: item.nickname || item.name || item.userId
 					}), item.nickname || item.name || item.userId]
 				})
@@ -246,11 +249,13 @@ var Component = (props) => {
 		optionLabelProp: multiple ? "label" : "tag",
 		open: selectOpen,
 		onOpenChange: onDropdownOpenChange,
-		popupMatchSelectWidth: false,
+		popupMatchSelectWidth: panelWidth,
+		allowOverlap,
 		placeholder,
 		dropdownRender: () => {
 			return /* @__PURE__ */ jsx("div", {
 				ref: triggerRef,
+				className: cn({ "ald-member-picker-popup-body": allowOverlap }),
 				children: /* @__PURE__ */ jsx(Panel, {
 					type,
 					footer,

package/dist/MemberPicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/MemberPicker/index.tsx"],"sourcesContent":["import { usePrevious, useRequest } from 'ahooks';\nimport { cn } from '../lib/utils';\nimport _ from 'lodash';\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Avatar from '../Avatar';\nimport ConfigProvider from '../ConfigProvider';\nimport './member-picker.css';\nimport {\n  EUserType,\n  IUser,\n  IUserGroup,\n  TUser,\n} from '../ConfigProvider/getUserList';\nimport { LocaleContext, getTranslator } from '../locale/default';\nimport message from '../message';\nimport Panel from './components/Panel';\nimport MemberPanel from './components/PanelWrapper';\nimport {\n  EMemberPicker,\n  IMemberPickerProps,\n  TUserGroupValue,\n  TUserValue,\n} from './interface';\nimport { isUser, isUserGroup } from './utils/getUsersWithUserId';\nimport Select from '../Select';\nimport { Mode } from '../Select/BaseSelect';\n\nconst Component: React.FC<IMemberPickerProps> = (props) => {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const {\n    value,\n    type = EMemberPicker.USER,\n    onChange,\n    multiple,\n    dropdownWidth,\n    open,\n    onOpenChange,\n    placeholder = t.MemberPicker.select,\n    className,\n    allowClear,\n    disabled,\n    onClear,\n    size,\n    prefix: propPrefix,\n    lockedIds = [],\n    footer,\n    onCancel,\n    filterItem,\n    mode: propsMode,\n    renderItem,\n    renderSelectedTag,\n    ...restProps\n  } = props;\n  const { getUsersByIds, getUsersByKeywords } = ConfigProvider.useGetUserList();\n  const [selectedUserList, setSelectedUserList] = useState<TUser>([]);\n  const prevValue = usePrevious(value);\n  const [searchUserList, setSearchUserList] = useState<TUser>([]);\n  const [searchString, setSearchString] = useState<string>('');\n  const [dropdownContentWidth, setDropdownContentWidth] =\n    useState(dropdownWidth);\n\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const onSearchValueChange = useCallback((v: string) => {\n    setSearchString(v);\n  }, []);\n  const [dropdownOpen, setDropdownOpen] = useState<boolean>(!!open);\n  const queryByKeywords = useMemo(() => {\n    if (getUsersByKeywords) {\n      return getUsersByKeywords;\n    }\n\n    return (_params = {}) =>\n      Promise.reject({\n        message: t.MemberPicker.pleaseConfigGetUserByKeywordsMethod,\n      });\n  }, [getUsersByKeywords, t.MemberPicker.pleaseConfigGetUserByKeywordsMethod]);\n  const queryByIds = useMemo(() => {\n    if (getUsersByIds) {\n      return getUsersByIds;\n    }\n\n    return (_params = {}) =>\n      Promise.reject({\n        message: t.MemberPicker.pleaseConfigGetUserByIdsMethod,\n      });\n  }, [getUsersByIds, t.MemberPicker.pleaseConfigGetUserByIdsMethod]);\n  const { loading, run } = useRequest(() => queryByKeywords(searchString), {\n    refreshDeps: [searchString],\n    manual: true,\n    cacheKey: 'member-selector',\n    cacheTime: 1000 * 60 * 2, // 2分钟内不重复请求\n    onSuccess: (result) => {\n      setSearchUserList(result);\n    },\n    onError: (error) => {\n      message.error(error.message);\n    },\n  });\n\n  const totalUserList: TUser = useMemo(() => {\n    const totalUsers = searchUserList.concat(\n      selectedUserList.filter((item) => {\n        const name =\n          (item.type === EUserType.USER ? item.nickname : item.name) || '';\n\n        return name.toUpperCase().includes(searchString.trim().toUpperCase());\n      }),\n    );\n\n    return _.uniqBy(totalUsers, (data: IUser | IUserGroup) => {\n      if (data.type === EUserType.USER) return data.userId;\n\n      return data.groupId;\n    }).filter((item) => {\n      if (filterItem) {\n        return filterItem(item);\n      }\n\n      return true;\n    });\n  }, [filterItem, searchString, searchUserList, selectedUserList]);\n\n  useEffect(() => {\n    if (!dropdownOpen) return;\n    run();\n  }, [dropdownOpen, run, searchString]);\n\n  useEffect(() => {\n    if (_.isEqual(value, prevValue)) {\n      return;\n    }\n    if (Array.isArray(value) && (isUser(value[0]) || isUserGroup(value[0]))) {\n      setSelectedUserList(value as TUser);\n    } else if (isUser(value) || isUserGroup(value)) {\n      setSelectedUserList([value]);\n    } else {\n      let param: Array<TUserValue | TUserGroupValue> = [];\n      if (!value) return;\n      if (Array.isArray(value) && value.length === 0) {\n        setSelectedUserList([]);\n\n        return;\n      }\n      if (!Array.isArray(value)) {\n        param = [value];\n      } else {\n        param = value;\n      }\n      queryByIds(param).then((result) => {\n        // 如果用户已被删除，则需要展示出id\n        const valueNotInResult: TUser = param\n          .filter((item) => {\n            if (item.type === EUserType.USER) {\n              return result\n                .filter(isUser)\n                .every((user) => user.userId !== item.userId);\n            }\n\n            return result\n              .filter(isUserGroup)\n              .every((user) => user.groupId !== item.groupId);\n          })\n          .map((item) => {\n            if (item.type === EUserType.USER) {\n              return {\n                type: EUserType.USER,\n                userId: item.userId,\n              } as IUser;\n            }\n\n            return {\n              type: EUserType.USER_GROUP,\n              groupId: item.groupId,\n            } as IUserGroup;\n          });\n\n        setSelectedUserList([...result, ...valueNotInResult]);\n      });\n    }\n  }, [value, queryByIds, prevValue]);\n\n  const onSelectedChange = useCallback(\n    (users: TUser) => {\n      if (multiple) {\n        setSelectedUserList(users);\n        onChange?.(users);\n      } else {\n        setSelectedUserList(users);\n        onChange?.(users[0]);\n      }\n      setDropdownOpen(false);\n    },\n    [multiple, onChange, setDropdownOpen],\n  );\n\n  useEffect(() => {\n    if (typeof open === 'boolean') {\n      setDropdownOpen(open);\n    }\n  }, [open]);\n\n  useEffect(() => {\n    if (!dropdownContentWidth) {\n      const resizeEle = triggerRef.current;\n      if (!resizeEle) return;\n      const resizeObserver = new ResizeObserver((entries) => {\n        for (const entry of entries) {\n          const { width } = entry.contentRect;\n          setDropdownContentWidth(width);\n        }\n      });\n      resizeObserver.observe(resizeEle);\n\n      return () => {\n        resizeObserver.unobserve(resizeEle);\n      };\n    }\n  }, [triggerRef, dropdownContentWidth]);\n  const onDropdownOpenChange = useCallback(\n    (open: boolean) => {\n      setDropdownOpen(open);\n      onOpenChange?.(open);\n    },\n    [onOpenChange],\n  );\n  const panelKey = useMemo(() => {\n    if (dropdownOpen) {\n      return _.sampleSize('abcdefghijklmnopqrstuvwxyz0123456789', 8).join('');\n    }\n  }, [dropdownOpen]);\n  const mode = useMemo(() => {\n    if (multiple === true) {\n      if (typeof propsMode === 'object')\n        return {\n          ...(propsMode || {}),\n          type: 'multiple',\n          responsive: _.isNil(propsMode.responsive)\n            ? true\n            : propsMode.responsive,\n        } as Mode;\n      return {\n        type: 'multiple',\n        responsive: true,\n      } as Mode;\n    }\n\n    return multiple ? (multiple as Mode) : propsMode;\n  }, [multiple, propsMode]);\n\n  console.log(mode);\n\n  const selectOpen = typeof open === 'boolean' ? open : dropdownOpen;\n\n  return (\n    <Select\n      prefix={propPrefix}\n      {...restProps}\n      size={size}\n      className={cn('ald-member-picker-select', className)}\n      value={selectedUserList.map((item) => {\n        if (item.type === EUserType.USER_GROUP) {\n          return item.groupId;\n        } else {\n          return item.userId;\n        }\n      })}\n      onChange={(value) => {\n        if (_.isEmpty(value)) {\n          setSelectedUserList([]);\n          if (multiple) {\n            onChange?.([]);\n          } else {\n            onChange?.();\n          }\n        } else {\n          const valueList = Array.isArray(value) ? value : [value];\n          if (multiple) {\n            const users = valueList\n              .map((item) => {\n                const user = totalUserList.find((user) => {\n                  if (user.type === EUserType.USER) {\n                    return user.userId === item;\n                  }\n\n                  return user.groupId === item;\n                });\n\n                return user;\n              })\n              .filter(Boolean) as TUser;\n            setSelectedUserList(users);\n            onChange?.(users);\n          } else {\n            const user = totalUserList.find((user) => {\n              if (user.type === EUserType.USER) {\n                return user.userId === value;\n              }\n\n              return user.groupId === value;\n            });\n            if (user) {\n              setSelectedUserList([user]);\n              onChange?.(user);\n            } else {\n              setSelectedUserList([]);\n              onChange?.();\n            }\n          }\n        }\n      }}\n      disabled={disabled}\n      allowClear={allowClear}\n      onClear={() => {\n        setSelectedUserList([]);\n        if (multiple) {\n          onChange?.([]);\n        } else {\n          onChange?.();\n        }\n        onClear?.();\n      }}\n      popupClassName={cn('ald-member-picker-popup', props.popupClassName)}\n      mode={mode}\n      options={selectedUserList.map((item) => {\n        if (item.type === EUserType.USER_GROUP)\n          return {\n            label: item.name || item.groupId,\n            value: item.groupId,\n            tag: (\n              <div className={'ald-member-picker-tag'}>\n                <Avatar type=\"userGroup\" size={20}>\n                  {item.name || item.groupId}\n                </Avatar>\n                {item.name || item.groupId}\n              </div>\n            ),\n          };\n\n        return {\n          label: item.nickname || item.name || item.userId,\n          value: item.userId,\n          tag: (\n            <div className={'ald-member-picker-tag'}>\n              <Avatar\n                size={20}\n                src={item.photo}\n                type={item.type === EUserType.USER ? 'user' : 'userGroup'}\n              >\n                {item.nickname || item.name || item.userId}\n              </Avatar>\n              {item.nickname || item.name || item.userId}\n            </div>\n          ),\n        };\n      })}\n      optionLabelProp={multiple ? 'label' : 'tag'}\n      open={selectOpen}\n      onOpenChange={onDropdownOpenChange}\n      popupMatchSelectWidth={false}\n      placeholder={placeholder}\n      dropdownRender={() => {\n        return (\n          <div ref={triggerRef}>\n            <Panel\n              type={type}\n              footer={footer}\n              value={selectedUserList}\n              dataList={totalUserList}\n              lockedIds={lockedIds}\n              multiple={!!multiple}\n              key={panelKey}\n              loading={loading}\n              dropdownWidth={dropdownContentWidth}\n              onSearchValueChange={onSearchValueChange}\n              onChange={onSelectedChange}\n              onCancel={() => {\n                onCancel?.();\n                setDropdownOpen(false);\n              }}\n              renderItem={renderItem}\n              renderSelectedTag={renderSelectedTag}\n            ></Panel>\n          </div>\n        );\n      }}\n    ></Select>\n  );\n};\n\nconst MemberSelector = Component as React.FC<IMemberPickerProps> & {\n  MemberPanel: typeof MemberPanel;\n};\n\nMemberSelector.MemberPanel = MemberPanel;\nexport default MemberSelector;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/MemberPicker/index.tsx"],"sourcesContent":["import { usePrevious, useRequest } from 'ahooks';\nimport { cn } from '../lib/utils';\nimport _ from 'lodash';\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Avatar from '../Avatar';\nimport ConfigProvider from '../ConfigProvider';\nimport './member-picker.css';\nimport {\n  EUserType,\n  IUser,\n  IUserGroup,\n  TUser,\n} from '../ConfigProvider/getUserList';\nimport { LocaleContext, getTranslator } from '../locale/default';\nimport message from '../message';\nimport Panel from './components/Panel';\nimport MemberPanel from './components/PanelWrapper';\nimport {\n  EMemberPicker,\n  IMemberPickerProps,\n  TUserGroupValue,\n  TUserValue,\n} from './interface';\nimport { isUser, isUserGroup } from './utils/getUsersWithUserId';\nimport Select from '../Select';\nimport { Mode } from '../Select/BaseSelect';\n\nconst DEFAULT_MULTIPLE_DROPDOWN_WIDTH = 480;\nconst DEFAULT_SINGLE_DROPDOWN_WIDTH = 160;\n\nconst Component: React.FC<IMemberPickerProps> = (props) => {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const {\n    value,\n    type = EMemberPicker.USER,\n    onChange,\n    multiple,\n    dropdownWidth,\n    open,\n    onOpenChange,\n    placeholder = t.MemberPicker.select,\n    className,\n    allowClear,\n    disabled,\n    onClear,\n    size,\n    prefix: propPrefix,\n    lockedIds = [],\n    footer,\n    onCancel,\n    filterItem,\n    mode: propsMode,\n    renderItem,\n    renderSelectedTag,\n    ...restProps\n  } = props;\n  const allowOverlap = props.allowOverlap ?? false;\n  const { getUsersByIds, getUsersByKeywords } = ConfigProvider.useGetUserList();\n  const [selectedUserList, setSelectedUserList] = useState<TUser>([]);\n  const prevValue = usePrevious(value);\n  const [searchUserList, setSearchUserList] = useState<TUser>([]);\n  const [searchString, setSearchString] = useState<string>('');\n  const [dropdownContentWidth, setDropdownContentWidth] =\n    useState(dropdownWidth);\n  const panelWidth =\n    dropdownWidth ??\n    (multiple\n      ? DEFAULT_MULTIPLE_DROPDOWN_WIDTH\n      : DEFAULT_SINGLE_DROPDOWN_WIDTH);\n\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const onSearchValueChange = useCallback((v: string) => {\n    setSearchString(v);\n  }, []);\n  const [dropdownOpen, setDropdownOpen] = useState<boolean>(!!open);\n  const queryByKeywords = useMemo(() => {\n    if (getUsersByKeywords) {\n      return getUsersByKeywords;\n    }\n\n    return (_params = {}) =>\n      Promise.reject({\n        message: t.MemberPicker.pleaseConfigGetUserByKeywordsMethod,\n      });\n  }, [getUsersByKeywords, t.MemberPicker.pleaseConfigGetUserByKeywordsMethod]);\n  const queryByIds = useMemo(() => {\n    if (getUsersByIds) {\n      return getUsersByIds;\n    }\n\n    return (_params = {}) =>\n      Promise.reject({\n        message: t.MemberPicker.pleaseConfigGetUserByIdsMethod,\n      });\n  }, [getUsersByIds, t.MemberPicker.pleaseConfigGetUserByIdsMethod]);\n  const { loading, run } = useRequest(() => queryByKeywords(searchString), {\n    refreshDeps: [searchString],\n    manual: true,\n    cacheKey: 'member-selector',\n    cacheTime: 1000 * 60 * 2, // 2分钟内不重复请求\n    onSuccess: (result) => {\n      setSearchUserList(result);\n    },\n    onError: (error) => {\n      message.error(error.message);\n    },\n  });\n\n  const totalUserList: TUser = useMemo(() => {\n    const totalUsers = searchUserList.concat(\n      selectedUserList.filter((item) => {\n        const name =\n          (item.type === EUserType.USER ? item.nickname : item.name) || '';\n\n        return name.toUpperCase().includes(searchString.trim().toUpperCase());\n      }),\n    );\n\n    return _.uniqBy(totalUsers, (data: IUser | IUserGroup) => {\n      if (data.type === EUserType.USER) return data.userId;\n\n      return data.groupId;\n    }).filter((item) => {\n      if (filterItem) {\n        return filterItem(item);\n      }\n\n      return true;\n    });\n  }, [filterItem, searchString, searchUserList, selectedUserList]);\n\n  useEffect(() => {\n    if (!dropdownOpen) return;\n    run();\n  }, [dropdownOpen, run, searchString]);\n\n  useEffect(() => {\n    if (_.isEqual(value, prevValue)) {\n      return;\n    }\n    if (Array.isArray(value) && (isUser(value[0]) || isUserGroup(value[0]))) {\n      setSelectedUserList(value as TUser);\n    } else if (isUser(value) || isUserGroup(value)) {\n      setSelectedUserList([value]);\n    } else {\n      let param: Array<TUserValue | TUserGroupValue> = [];\n      if (!value) return;\n      if (Array.isArray(value) && value.length === 0) {\n        setSelectedUserList([]);\n\n        return;\n      }\n      if (!Array.isArray(value)) {\n        param = [value];\n      } else {\n        param = value;\n      }\n      queryByIds(param).then((result) => {\n        // 如果用户已被删除，则需要展示出id\n        const valueNotInResult: TUser = param\n          .filter((item) => {\n            if (item.type === EUserType.USER) {\n              return result\n                .filter(isUser)\n                .every((user) => user.userId !== item.userId);\n            }\n\n            return result\n              .filter(isUserGroup)\n              .every((user) => user.groupId !== item.groupId);\n          })\n          .map((item) => {\n            if (item.type === EUserType.USER) {\n              return {\n                type: EUserType.USER,\n                userId: item.userId,\n              } as IUser;\n            }\n\n            return {\n              type: EUserType.USER_GROUP,\n              groupId: item.groupId,\n            } as IUserGroup;\n          });\n\n        setSelectedUserList([...result, ...valueNotInResult]);\n      });\n    }\n  }, [value, queryByIds, prevValue]);\n\n  const onSelectedChange = useCallback(\n    (users: TUser) => {\n      if (multiple) {\n        setSelectedUserList(users);\n        onChange?.(users);\n      } else {\n        setSelectedUserList(users);\n        onChange?.(users[0]);\n      }\n      setDropdownOpen(false);\n    },\n    [multiple, onChange, setDropdownOpen],\n  );\n\n  useEffect(() => {\n    if (typeof open === 'boolean') {\n      setDropdownOpen(open);\n    }\n  }, [open]);\n\n  useEffect(() => {\n    if (!dropdownContentWidth) {\n      const resizeEle = triggerRef.current;\n      if (!resizeEle) return;\n      const resizeObserver = new ResizeObserver((entries) => {\n        for (const entry of entries) {\n          const { width } = entry.contentRect;\n          setDropdownContentWidth(width);\n        }\n      });\n      resizeObserver.observe(resizeEle);\n\n      return () => {\n        resizeObserver.unobserve(resizeEle);\n      };\n    }\n  }, [triggerRef, dropdownContentWidth]);\n  const onDropdownOpenChange = useCallback(\n    (open: boolean) => {\n      setDropdownOpen(open);\n      onOpenChange?.(open);\n    },\n    [onOpenChange],\n  );\n  const panelKey = useMemo(() => {\n    if (dropdownOpen) {\n      return _.sampleSize('abcdefghijklmnopqrstuvwxyz0123456789', 8).join('');\n    }\n  }, [dropdownOpen]);\n  const mode = useMemo(() => {\n    if (multiple === true) {\n      if (typeof propsMode === 'object')\n        return {\n          ...(propsMode || {}),\n          type: 'multiple',\n          responsive: _.isNil(propsMode.responsive)\n            ? true\n            : propsMode.responsive,\n        } as Mode;\n      return {\n        type: 'multiple',\n        responsive: true,\n      } as Mode;\n    }\n\n    return multiple ? (multiple as Mode) : propsMode;\n  }, [multiple, propsMode]);\n\n  const selectOpen = typeof open === 'boolean' ? open : dropdownOpen;\n\n  return (\n    <Select\n      prefix={propPrefix}\n      {...restProps}\n      size={size}\n      className={cn('ald-member-picker-select', className)}\n      value={selectedUserList.map((item) => {\n        if (item.type === EUserType.USER_GROUP) {\n          return item.groupId;\n        } else {\n          return item.userId;\n        }\n      })}\n      onChange={(value) => {\n        if (_.isEmpty(value)) {\n          setSelectedUserList([]);\n          if (multiple) {\n            onChange?.([]);\n          } else {\n            onChange?.();\n          }\n        } else {\n          const valueList = Array.isArray(value) ? value : [value];\n          if (multiple) {\n            const users = valueList\n              .map((item) => {\n                const user = totalUserList.find((user) => {\n                  if (user.type === EUserType.USER) {\n                    return user.userId === item;\n                  }\n\n                  return user.groupId === item;\n                });\n\n                return user;\n              })\n              .filter(Boolean) as TUser;\n            setSelectedUserList(users);\n            onChange?.(users);\n          } else {\n            const user = totalUserList.find((user) => {\n              if (user.type === EUserType.USER) {\n                return user.userId === value;\n              }\n\n              return user.groupId === value;\n            });\n            if (user) {\n              setSelectedUserList([user]);\n              onChange?.(user);\n            } else {\n              setSelectedUserList([]);\n              onChange?.();\n            }\n          }\n        }\n      }}\n      disabled={disabled}\n      allowClear={allowClear}\n      onClear={() => {\n        setSelectedUserList([]);\n        if (multiple) {\n          onChange?.([]);\n        } else {\n          onChange?.();\n        }\n        onClear?.();\n      }}\n      popupClassName={cn(\n        'ald-member-picker-popup',\n        allowOverlap && 'ald-member-picker-popup-adaptive',\n        props.popupClassName,\n      )}\n      mode={mode}\n      options={selectedUserList.map((item) => {\n        if (item.type === EUserType.USER_GROUP)\n          return {\n            label: item.name || item.groupId,\n            value: item.groupId,\n            tag: (\n              <div className={'ald-member-picker-tag'}>\n                <Avatar type=\"team\" size={20}>\n                  {item.name || item.groupId}\n                </Avatar>\n                {item.name || item.groupId}\n              </div>\n            ),\n          };\n\n        return {\n          label: item.nickname || item.name || item.userId,\n          value: item.userId,\n          tag: (\n            <div className={'ald-member-picker-tag'}>\n              <Avatar\n                size={20}\n                src={item.photo}\n                type={item.type === EUserType.USER ? 'user' : 'team'}\n              >\n                {item.nickname || item.name || item.userId}\n              </Avatar>\n              {item.nickname || item.name || item.userId}\n            </div>\n          ),\n        };\n      })}\n      optionLabelProp={multiple ? 'label' : 'tag'}\n      open={selectOpen}\n      onOpenChange={onDropdownOpenChange}\n      popupMatchSelectWidth={panelWidth}\n      allowOverlap={allowOverlap}\n      placeholder={placeholder}\n      dropdownRender={() => {\n        return (\n          <div\n            ref={triggerRef}\n            className={cn({\n              'ald-member-picker-popup-body': allowOverlap,\n            })}\n          >\n            <Panel\n              type={type}\n              footer={footer}\n              value={selectedUserList}\n              dataList={totalUserList}\n              lockedIds={lockedIds}\n              multiple={!!multiple}\n              key={panelKey}\n              loading={loading}\n              dropdownWidth={dropdownContentWidth}\n              onSearchValueChange={onSearchValueChange}\n              onChange={onSelectedChange}\n              onCancel={() => {\n                onCancel?.();\n                setDropdownOpen(false);\n              }}\n              renderItem={renderItem}\n              renderSelectedTag={renderSelectedTag}\n            ></Panel>\n          </div>\n        );\n      }}\n    ></Select>\n  );\n};\n\nconst MemberSelector = Component as React.FC<IMemberPickerProps> & {\n  MemberPanel: typeof MemberPanel;\n};\n\nMemberSelector.MemberPanel = MemberPanel;\nexport default MemberSelector;\n"],"mappings":"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"}

package/dist/MemberPicker/utils.d.ts

@@ -0,0 +1,2 @@
+export * from './utils/index.js';
+export { default } from './utils/index.js';

package/dist/MemberPicker.d.ts

@@ -0,0 +1,2 @@
+export * from './MemberPicker/index.js';
+export { default } from './MemberPicker/index.js';

package/dist/Menu/index.d.ts

@@ -1,10 +1,14 @@
 import { default as React } from 'react';
 export interface MenuProps {
     onClick?: (info: MenuInfo) => void;
+    onBeforeLeafItemClick?: () => void;
     className?: string;
     items: MenuItemType[];
     selectedKeys?: string[];
     menuStyle?: React.CSSProperties;
+    rootClosing?: boolean;
+    /** @internal 由 Dropdown 注入，禁用内部定位/overflow 计算。不支持含 SubMenu 的菜单 */
+    externalOverflow?: boolean;
 }
 export default function Menu(props: MenuProps): import("react/jsx-runtime").JSX.Element;
 export declare function isHeaderMenuItem(menuItem: MenuItemType): menuItem is MenuHeaderType;

package/dist/Menu/index.js

@@ -8,18 +8,27 @@ 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, selectedKeys, menuStyle } = props;
+	const { className, items, onClick: onMenuClick, onBeforeLeafItemClick, selectedKeys, menuStyle, rootClosing = false, externalOverflow } = props;
+	const selectedKeySet = new Set(selectedKeys || []);
+	const hasDirectSelectedItem = (items) => items.some((item) => {
+		if (isSubMenuItem(item)) return selectedKeySet.has(item.key);
+		if (isHeaderMenuItem(item) || isDivideMenuItem(item)) return false;
+		return selectedKeySet.has(item.key);
+	});
 	const getMenuItems = (items, parentPath = []) => {
+		const isSelectableGroup = hasDirectSelectedItem(items);
 		return items.map((item, index) => {
 			if (isDivideMenuItem(item)) return /* @__PURE__ */ jsx(MenuDivider, {}, `divider_${index}`);
 			if (isHeaderMenuItem(item)) return /* @__PURE__ */ jsx(MenuHeader, { children: item.label }, `header_${index}`);
 			const currPath = [...parentPath, item.key];
 			const titleStr = _.isString(item.label) ? item.label : "";
+			const isSelected = selectedKeys?.includes(item.key);
 			if (isSubMenuItem(item)) return /* @__PURE__ */ jsx(SubMenu, {
 				label: /* @__PURE__ */ jsxs("div", {
 					className: "ald-menu-item-label",
 					title: titleStr,
 					children: [
+						isSelectableGroup ? /* @__PURE__ */ jsx("div", { className: "ald-menu-item-selection-slot" }) : null,
 						item.icon ? /* @__PURE__ */ jsx("div", {
 							className: "ald-menu-item-label-icon",
 							children: item.icon
@@ -35,22 +44,27 @@ function Menu(props) {
 					]
 				}),
 				disabled: item.disabled,
-				gap: 0,
+				align: "start",
+				direction: "right",
+				gap: -8,
+				position: "anchor",
+				shift: 0,
 				menuStyle: {
 					...menuStyle,
 					overflow: isLeafMenu(item.children) ? "auto" : void 0
 				},
-				menuClassName: cn("ald-menu-submenu-popup", item.popupClassName),
+				menuClassName: cn("ald-menu-submenu-popup", item.popupClassName, rootClosing && "ald-menu-submenu-popup-root-closing"),
 				overflow: isLeafMenu(item.children) ? "auto" : void 0,
 				children: getMenuItems(item.children, currPath)
 			}, item.key);
 			return /* @__PURE__ */ jsx(MenuItem, {
 				className: cn(item.className, {
 					"ald-menu-item-danger": item.danger,
-					"ald-menu-item-selected": selectedKeys?.includes(item.key)
+					"ald-menu-item-selected": isSelected
 				}),
 				disabled: item.disabled,
 				onClick: ({ syntheticEvent }) => {
+					onBeforeLeafItemClick?.();
 					const menuInfo = {
 						key: item.key,
 						keyPath: currPath,
@@ -63,6 +77,10 @@ function Menu(props) {
 					className: "ald-menu-item-label",
 					title: titleStr,
 					children: [
+						isSelectableGroup ? /* @__PURE__ */ jsx("div", {
+							className: cn("ald-menu-item-selection-slot", isSelected && "ald-menu-item-selection-slot-selected ald-menu-item-selected-icon"),
+							children: isSelected ? /* @__PURE__ */ jsx(Memo, {}) : null
+						}) : null,
 						item.icon ? /* @__PURE__ */ jsx("div", {
 							className: "ald-menu-item-label-icon",
 							children: item.icon
@@ -70,10 +88,6 @@ function Menu(props) {
 						/* @__PURE__ */ jsx("div", {
 							className: "ald-menu-item-label-text",
 							children: item.label
-						}),
-						selectedKeys?.includes(item.key) && /* @__PURE__ */ jsx("div", {
-							className: "ald-menu-item-selected-icon",
-							children: /* @__PURE__ */ jsx(Memo, {})
 						})
 					]
 				})
@@ -81,21 +95,29 @@ function Menu(props) {
 		});
 	};
 	const ref = useRef(null);
+	const leafOverflow = isLeafMenu(items) ? "auto" : void 0;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-		style: { display: "none " },
+		style: { display: "none" },
 		ref
 	}), /* @__PURE__ */ jsx(ControlledMenu, {
 		state: "open",
+		transition: {
+			open: true,
+			close: true
+		},
+		transitionTimeout: 200,
+		submenuOpenDelay: 0,
+		submenuCloseDelay: 0,
 		menuStyle: {
 			...menuStyle,
-			overflow: isLeafMenu(items) ? "auto" : void 0
+			overflow: externalOverflow ? void 0 : leafOverflow
 		},
 		anchorRef: ref,
 		className: cn(className, "ald-menu"),
-		position: "auto",
+		position: externalOverflow ? "initial" : "auto",
 		captureFocus: false,
-		viewScroll: "auto",
-		overflow: isLeafMenu(items) ? "auto" : void 0,
+		viewScroll: externalOverflow ? "initial" : "auto",
+		overflow: externalOverflow ? "visible" : leafOverflow,
 		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  className?: string;\n  items: MenuItemType[];\n  selectedKeys?: string[];\n  menuStyle?: React.CSSProperties;\n}\n\nexport default function Menu(props: MenuProps) {\n  const {\n    className,\n    items,\n    onClick: onMenuClick,\n    selectedKeys,\n    menuStyle,\n  } = props;\n\n  const getMenuItems = (items: MenuItemType[], parentPath: string[] = []) => {\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\n      if (isSubMenuItem(item)) {\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\">{item.label}</div>\n            <div className=\"ald-menu-item-right\">\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            gap={0}\n            menuStyle={{\n              ...menuStyle,\n              overflow: isLeafMenu(item.children) ? 'auto' : undefined,\n            }}\n            menuClassName={cn('ald-menu-submenu-popup', item.popupClassName)}\n            overflow={isLeafMenu(item.children) ? 'auto' : undefined}\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': selectedKeys?.includes(item.key),\n          })}\n          disabled={item.disabled}\n          onClick={({ syntheticEvent }) => {\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\">{item.label}</div>\n            {selectedKeys?.includes(item.key) && (\n              <div className=\"ald-menu-item-selected-icon\">\n                <CheckLightLine />\n              </div>\n            )}\n          </div>\n        </MenuItem>\n      );\n    });\n  };\n\n  const ref = useRef(null);\n\n  return (\n    <>\n      <div style={{ display: 'none ' }} ref={ref} />\n      <ControlledMenu\n        state=\"open\"\n        menuStyle={{\n          ...menuStyle,\n          overflow: isLeafMenu(items) ? 'auto' : undefined,\n        }}\n        anchorRef={ref}\n        className={cn(className, 'ald-menu')}\n        position=\"auto\"\n        captureFocus={false}\n        viewScroll=\"auto\"\n        overflow={isLeafMenu(items) ? 'auto' : undefined}\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, { 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 subMenuItemLabel = (\n          <div className=\"ald-menu-item-label\" title={titleStr}>\n            {isSelectableGroup ? (\n              <div className=\"ald-menu-item-selection-slot\" />\n            ) : null}\n            {item.icon ? (\n              <div className=\"ald-menu-item-label-icon\">{item.icon}</div>\n            ) : null}\n            <div className=\"ald-menu-item-label-text\">{item.label}</div>\n            <div className=\"ald-menu-item-right\">\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            align=\"start\"\n            direction=\"right\"\n            gap={-8}\n            position=\"anchor\"\n            shift={0}\n            menuStyle={{\n              ...menuStyle,\n              overflow: isLeafMenu(item.children) ? 'auto' : undefined,\n            }}\n            menuClassName={cn(\n              'ald-menu-submenu-popup',\n              item.popupClassName,\n              rootClosing && 'ald-menu-submenu-popup-root-closing',\n            )}\n            overflow={isLeafMenu(item.children) ? 'auto' : undefined}\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            {isSelectableGroup ? (\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            ) : null}\n            {item.icon ? (\n              <div className=\"ald-menu-item-label-icon\">{item.icon}</div>\n            ) : null}\n            <div className=\"ald-menu-item-label-text\">{item.label}</div>\n          </div>\n        </MenuItem>\n      );\n    });\n  };\n\n  const ref = useRef(null);\n\n  const leafOverflow = isLeafMenu(items) ? '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          overflow: externalOverflow ? undefined : leafOverflow,\n        }}\n        anchorRef={ref}\n        className={cn(className, 'ald-menu')}\n        position={externalOverflow ? 'initial' : 'auto'}\n        captureFocus={false}\n        viewScroll={externalOverflow ? 'initial' : 'auto'}\n        overflow={externalOverflow ? 'visible' : leafOverflow}\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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"}

package/dist/Menu.d.ts

@@ -0,0 +1,2 @@
+export * from './Menu/index.js';
+export { default } from './Menu/index.js';

package/dist/Modal/index.d.ts

@@ -3,8 +3,8 @@ import { ButtonType, IButtonProps } from '../Button';
 export declare const destroyFns: Array<() => void>;
 export interface ModalProps {
     open?: boolean;
-    onOk?: (e: React.MouseEvent) => void;
-    onCancel?: (e: React.MouseEvent) => void;
+    onOk?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onCancel?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     afterClose?: () => void;
     title?: React.ReactNode;
     subTitle?: React.ReactNode;
@@ -23,6 +23,7 @@ export interface ModalProps {
     centered?: boolean;
     destroyOnClose?: boolean;
     className?: string;
+    /** Applied to the outer wrap layer (matches antd wrapClassName behavior) */
     wrapClassName?: string;
     style?: React.CSSProperties;
     bodyStyle?: React.CSSProperties;
@@ -35,6 +36,7 @@ export interface ModalProps {
     fullscreen?: boolean;
     keyboard?: boolean;
     afterOpenChange?: (open: boolean) => void;
+    getContainer?: (() => HTMLElement) | false;
     /** @internal used by static methods to pass modal type for icon styling */
     _modalType?: string;
 }
@@ -52,6 +54,8 @@ export interface ModalFuncProps {
     onCancel?: (...args: any[]) => any;
     width?: number | string;
     className?: string;
+    /** @deprecated Use `className` instead. Preserved for antd v4 compat. */
+    wrapClassName?: string;
     closable?: boolean;
     type?: 'info' | 'success' | 'error' | 'warn' | 'warning' | 'confirm';
     centered?: boolean;