@aloudata/aloudata-design 3.1.0 → 3.1.2

package/dist/MemberPicker/components/UserGroupSelection.d.ts

@@ -11,6 +11,8 @@ interface IProps {
     width: number;
     lockedIds: Array<TUserValue | TUserGroupValue>;
     filterItem?: (item: IUserGroup) => boolean;
+    searchValue?: string;
+    showSearch?: boolean;
     renderItem?: (item: IUserGroup, context: {
         isSelected: boolean;
         disabled: boolean;
@@ -19,5 +21,5 @@ interface IProps {
         originNode: React.ReactNode;
     }) => React.ReactNode;
 }
-declare const UserGroupSelection: ({ className, userGroupList, multiple, onChange, selectedUsersGroup: selectedUsersGroups, loading, width, lockedIds, filterItem, renderItem, }: IProps) => import("react/jsx-runtime").JSX.Element;
+declare const UserGroupSelection: ({ className, userGroupList, multiple, onChange, selectedUsersGroup: selectedUsersGroups, loading, onSearchValueChange, width, lockedIds, filterItem, searchValue, showSearch, renderItem, }: IProps) => import("react/jsx-runtime").JSX.Element;
 export default UserGroupSelection;

package/dist/MemberPicker/components/UserGroupSelection.js

@@ -11,57 +11,71 @@ import CustomSpin from "../../Spin/index.js";
 import { isUserGroup } from "../utils/getUsersWithUserId.js";
 import MultipleList from "./MultipleOption.js";
 import SingleOption from "./SingleOption.js";
-import { useCallback, useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import _ from "lodash";
 //#region src/MemberPicker/components/UserGroupSelection.tsx
-var UserGroupSelection = ({ className, userGroupList, multiple, onChange, selectedUsersGroup: selectedUsersGroups, loading, width, lockedIds, filterItem, renderItem }) => {
+var UserGroupSelection = ({ className, userGroupList, multiple, onChange, selectedUsersGroup: selectedUsersGroups, loading, onSearchValueChange, width, lockedIds, filterItem, searchValue = "", showSearch, renderItem }) => {
 	const { locale } = useContext(LocaleContext);
 	const t = getTranslator(locale);
 	const { getNextLevelGroup } = useContext(GetUserListContext);
 	const isAsync = !!getNextLevelGroup;
-	const [searchKey, setSearchKey] = useState("");
 	const [groupPath, setGroupPath] = useState([]);
-	const [filterUserList, setFilterUserList] = useState([]);
-	const getFilterUserList = useCallback(async () => {
-		if (isAsync) return await getNextLevelGroup({
-			parentGroupId: _.last(groupPath)?.groupId,
-			keyword: searchKey
-		});
-		const normalizedKeyword = searchKey.trim().toLowerCase();
-		return userGroupList.filter((userGroup) => {
-			if (groupPath.length === 0) return !userGroup.parentId;
-			return userGroup.parentId === _.last(groupPath)?.groupId;
-		}).filter((group) => {
-			if (!normalizedKeyword) return true;
-			return group.name.toLowerCase().includes(normalizedKeyword);
+	const [asyncUserGroupList, setAsyncUserGroupList] = useState([]);
+	const parentGroupId = _.last(groupPath)?.groupId;
+	useEffect(() => {
+		if (!getNextLevelGroup) return;
+		let ignore = false;
+		getNextLevelGroup({
+			parentGroupId,
+			keyword: searchValue
+		}).then((userGroups) => {
+			if (!ignore) setAsyncUserGroupList(userGroups);
 		});
+		return () => {
+			ignore = true;
+		};
 	}, [
-		isAsync,
-		searchKey,
-		userGroupList,
 		getNextLevelGroup,
-		groupPath
+		parentGroupId,
+		searchValue
 	]);
-	useEffect(() => {
-		getFilterUserList().then((userGroups) => {
-			setFilterUserList(userGroups.filter((userGroup) => {
-				if (filterItem) return filterItem(userGroup);
-				return true;
-			}));
+	const filterUserList = useMemo(() => {
+		let currentLevelGroups = asyncUserGroupList;
+		if (!isAsync) {
+			currentLevelGroups = userGroupList.filter((userGroup) => {
+				if (groupPath.length === 0) return !userGroup.parentId;
+				return userGroup.parentId === parentGroupId;
+			});
+			const normalizedKeyword = searchValue.trim().toLowerCase();
+			currentLevelGroups = currentLevelGroups.filter((group) => {
+				if (!normalizedKeyword) return true;
+				return group.name.toLowerCase().includes(normalizedKeyword);
+			});
+		}
+		return currentLevelGroups.filter((userGroup) => {
+			if (filterItem) return filterItem(userGroup);
+			return true;
 		});
-	}, [filterItem, getFilterUserList]);
+	}, [
+		asyncUserGroupList,
+		filterItem,
+		groupPath.length,
+		isAsync,
+		parentGroupId,
+		searchValue,
+		userGroupList
+	]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn(className, "ald-member-picker-member-list-wrap"),
 		children: [
-			/* @__PURE__ */ jsx(Input, {
+			showSearch && /* @__PURE__ */ jsx(Input, {
 				prefix: /* @__PURE__ */ jsx(Memo$1, { size: 16 }),
 				className: "ald-member-picker-search-input",
+				"aria-label": t.InputSearch.search,
 				autoFocus: true,
-				value: searchKey,
-				onChange: (e) => {
-					setSearchKey(e.target.value);
-				}
+				value: searchValue,
+				onChange: (event) => onSearchValueChange?.(event.target.value)
 			}),
 			userGroupList.length === 0 && !loading && /* @__PURE__ */ jsx(Empty, {
 				title: t.MemberPicker.noData,
@@ -106,6 +120,9 @@ var UserGroupSelection = ({ className, userGroupList, multiple, onChange, select
 					className: cn("ald-member-picker-member-list", { "ald-member-picker-member-list-null": userGroupList.length === 0 && !loading }),
 					innerClassName: "ald-member-picker-member-scroll",
 					children: /* @__PURE__ */ jsx("div", {
+						role: "listbox",
+						"aria-label": "Groups",
+						"aria-multiselectable": multiple || void 0,
 						className: "ald-member-picker-member-list-inner",
 						style: {
 							width: multiple ? width : void 0,
@@ -120,7 +137,7 @@ var UserGroupSelection = ({ className, userGroupList, multiple, onChange, select
 							const hasNextLevel = userGroupList.some((group) => group.parentId === userGroup.groupId) || isAsync;
 							const onNextLevel = () => {
 								setGroupPath((prev) => [...prev, userGroup]);
-								setSearchKey("");
+								onSearchValueChange?.("");
 							};
 							const originNode = multiple ? /* @__PURE__ */ jsx(MultipleList, {
 								user: userGroup,
@@ -141,15 +158,21 @@ var UserGroupSelection = ({ className, userGroupList, multiple, onChange, select
 								hasNextLevel,
 								onNextLevel
 							}, userGroup.groupId);
-							if (renderItem) return /* @__PURE__ */ jsx("div", { children: renderItem(userGroup, {
-								isSelected,
-								disabled,
-								onClick: () => {
-									if (isUserGroup(userGroup) && !disabled) onChange(!isSelected, userGroup);
-								},
-								onNextLevel: hasNextLevel ? onNextLevel : void 0,
-								originNode
-							}) }, userGroup.groupId);
+							if (renderItem) return /* @__PURE__ */ jsx("div", {
+								role: "option",
+								id: `ald-member-picker-option-${userGroup.groupId}`,
+								"aria-selected": isSelected,
+								"aria-disabled": disabled || void 0,
+								children: renderItem(userGroup, {
+									isSelected,
+									disabled,
+									onClick: () => {
+										if (isUserGroup(userGroup) && !disabled) onChange(!isSelected, userGroup);
+									},
+									onNextLevel: hasNextLevel ? onNextLevel : void 0,
+									originNode
+								})
+							}, userGroup.groupId);
 							return originNode;
 						})
 					})

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

@@ -1 +1 @@
-{"version":3,"file":"UserGroupSelection.js","names":[],"sources":["../../../src/MemberPicker/components/UserGroupSelection.tsx"],"sourcesContent":["import Breadcrumb from '../../Breadcrumb';\nimport { cn } from '../../lib/utils';\nimport _ from 'lodash';\nimport React, { useCallback, useContext, useEffect, useState } from 'react';\nimport GetUserListContext, {\n  IUserGroup,\n  TUserGroupValue,\n  TUserValue,\n} from '../../ConfigProvider/getUserList';\nimport Empty from '../../Empty';\nimport { ChevronLeftLine, SearchLine } from '../../Icon';\nimport Input from '../../Input';\nimport ScrollArea from '../../ScrollArea';\nimport Spin from '../../Spin';\nimport { LocaleContext, getTranslator } from '../../locale/default';\nimport { isUserGroup } from '../utils/getUsersWithUserId';\nimport MultipleOption from './MultipleOption';\nimport SingleOption from './SingleOption';\n\ninterface IProps {\n  className?: string;\n  userGroupList: IUserGroup[];\n  multiple?: boolean;\n  onChange: (selected: boolean, userGroup: IUserGroup) => void;\n  selectedUsersGroup: IUserGroup[];\n  loading: boolean;\n  onSearchValueChange?: (value: string) => void;\n  width: number;\n  lockedIds: Array<TUserValue | TUserGroupValue>;\n  filterItem?: (item: IUserGroup) => boolean;\n  renderItem?: (\n    item: IUserGroup,\n    context: {\n      isSelected: boolean;\n      disabled: boolean;\n      onClick: () => void;\n      onNextLevel?: () => void;\n      originNode: React.ReactNode;\n    },\n  ) => React.ReactNode;\n}\n\nconst UserGroupSelection = ({\n  className,\n  userGroupList,\n  multiple,\n  onChange,\n  selectedUsersGroup: selectedUsersGroups,\n  loading,\n  width,\n  lockedIds,\n  filterItem,\n  renderItem,\n}: IProps) => {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const { getNextLevelGroup } = useContext(GetUserListContext);\n\n  const isAsync = !!getNextLevelGroup;\n\n  const [searchKey, setSearchKey] = useState('');\n  const [groupPath, setGroupPath] = useState<IUserGroup[]>([]);\n\n  const [filterUserList, setFilterUserList] = useState<IUserGroup[]>([]);\n\n  const getFilterUserList = useCallback(async () => {\n    if (isAsync) {\n      const nextLevelGroup = await getNextLevelGroup({\n        parentGroupId: _.last(groupPath)?.groupId,\n        keyword: searchKey,\n      });\n      return nextLevelGroup;\n    }\n\n    const normalizedKeyword = searchKey.trim().toLowerCase();\n\n    const currentLevelGroups = userGroupList.filter((userGroup) => {\n      if (groupPath.length === 0) {\n        return !userGroup.parentId;\n      }\n\n      return userGroup.parentId === _.last(groupPath)?.groupId;\n    });\n\n    return currentLevelGroups.filter((group) => {\n      if (!normalizedKeyword) {\n        return true;\n      }\n\n      return group.name.toLowerCase().includes(normalizedKeyword);\n    });\n  }, [isAsync, searchKey, userGroupList, getNextLevelGroup, groupPath]);\n\n  useEffect(() => {\n    getFilterUserList().then((userGroups) => {\n      setFilterUserList(\n        userGroups.filter((userGroup) => {\n          if (filterItem) {\n            return filterItem(userGroup);\n          }\n          return true;\n        }),\n      );\n    });\n  }, [filterItem, getFilterUserList]);\n\n  return (\n    <div className={cn(className, 'ald-member-picker-member-list-wrap')}>\n      <Input\n        prefix={<SearchLine size={16} />}\n        className={'ald-member-picker-search-input'}\n        autoFocus={true}\n        value={searchKey}\n        onChange={(e) => {\n          setSearchKey(e.target.value);\n        }}\n      ></Input>\n      {userGroupList.length === 0 && !loading && (\n        <Empty\n          title={t.MemberPicker.noData}\n          size=\"small\"\n          image={Empty.PRESENTED_IMAGE_SEARCH}\n          className=\"ald-member-picker-member-list-empty\"\n        />\n      )}\n      {groupPath.length !== 0 && (\n        <ScrollArea className=\"ald-member-picker-breadcrumb-scroll\">\n          <Breadcrumb className=\"ald-member-picker-breadcrumb\">\n            <Breadcrumb.Item\n              className=\"ald-member-picker-breadcrumb-item\"\n              onClick={() => {\n                setGroupPath([]);\n              }}\n            >\n              <div className=\"ald-member-picker-breadcrumb-item-inner\">\n                <ChevronLeftLine size={16} />\n                {t.MemberPicker.userGroups}\n              </div>\n            </Breadcrumb.Item>\n            {groupPath.map((group) => (\n              <Breadcrumb.Item\n                className=\"ald-member-picker-breadcrumb-item\"\n                key={group.groupId}\n                onClick={() => {\n                  setGroupPath((groups) => {\n                    const groupIndex = groups.findIndex(\n                      (tempGroup) => tempGroup.groupId === group.groupId,\n                    );\n                    return groups.filter(\n                      (tempGroup, index) => index <= groupIndex,\n                    );\n                  });\n                }}\n              >\n                <div className=\"ald-member-picker-breadcrumb-item-inner\">\n                  {group.name}\n                </div>\n              </Breadcrumb.Item>\n            ))}\n          </Breadcrumb>\n        </ScrollArea>\n      )}\n      <Spin\n        tip=\"Loading\"\n        spinning={loading}\n        size=\"small\"\n        className=\"ald-member-picker-user-list\"\n      >\n        <ScrollArea\n          className={cn('ald-member-picker-member-list', {\n            'ald-member-picker-member-list-null':\n              userGroupList.length === 0 && !loading,\n          })}\n          innerClassName=\"ald-member-picker-member-scroll\"\n        >\n          <div\n            className=\"ald-member-picker-member-list-inner\"\n            style={{ width: multiple ? width : undefined, overflow: 'hidden' }}\n          >\n            {filterUserList.map((userGroup) => {\n              const isSelected = selectedUsersGroups.some(\n                (selectUserGroup) =>\n                  selectUserGroup.groupId === userGroup.groupId,\n              );\n\n              const index = _.findIndex(lockedIds, {\n                groupId: userGroup.groupId,\n                type: userGroup.type,\n              });\n              const disabled = index !== -1;\n\n              const hasNextLevel =\n                userGroupList.some(\n                  (group) => group.parentId === userGroup.groupId,\n                ) || isAsync;\n              const onNextLevel = () => {\n                setGroupPath((prev) => [...prev, userGroup]);\n                setSearchKey('');\n              };\n\n              const originNode = multiple ? (\n                <MultipleOption\n                  key={userGroup.groupId}\n                  user={userGroup}\n                  disabled={disabled}\n                  selected={isSelected}\n                  onChange={(selected, userGroup) => {\n                    if (isUserGroup(userGroup)) {\n                      onChange(selected, userGroup);\n                    }\n                  }}\n                  hasNextLevel={hasNextLevel}\n                  onNextLevel={onNextLevel}\n                ></MultipleOption>\n              ) : (\n                <SingleOption\n                  key={userGroup.groupId}\n                  user={userGroup}\n                  disabled={disabled}\n                  selected={isSelected}\n                  onChange={(selected, userGroup) => {\n                    if (isUserGroup(userGroup)) {\n                      onChange(selected, userGroup);\n                    }\n                  }}\n                  hasNextLevel={hasNextLevel}\n                  onNextLevel={onNextLevel}\n                ></SingleOption>\n              );\n\n              if (renderItem) {\n                return (\n                  <div key={userGroup.groupId}>\n                    {renderItem(userGroup, {\n                      isSelected,\n                      disabled,\n                      onClick: () => {\n                        if (isUserGroup(userGroup) && !disabled) {\n                          onChange(!isSelected, userGroup);\n                        }\n                      },\n                      onNextLevel: hasNextLevel ? onNextLevel : undefined,\n                      originNode,\n                    })}\n                  </div>\n                );\n              }\n\n              return originNode;\n            })}\n          </div>\n        </ScrollArea>\n      </Spin>\n    </div>\n  );\n};\n\nexport default UserGroupSelection;\n"],"mappings":"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"}
+{"version":3,"file":"UserGroupSelection.js","names":[],"sources":["../../../src/MemberPicker/components/UserGroupSelection.tsx"],"sourcesContent":["import Breadcrumb from '../../Breadcrumb';\nimport { cn } from '../../lib/utils';\nimport _ from 'lodash';\nimport React, { useContext, useEffect, useMemo, useState } from 'react';\nimport GetUserListContext, {\n  IUserGroup,\n  TUserGroupValue,\n  TUserValue,\n} from '../../ConfigProvider/getUserList';\nimport Empty from '../../Empty';\nimport { ChevronLeftLine, SearchLine } from '../../Icon';\nimport Input from '../../Input';\nimport ScrollArea from '../../ScrollArea';\nimport Spin from '../../Spin';\nimport { LocaleContext, getTranslator } from '../../locale/default';\nimport { isUserGroup } from '../utils/getUsersWithUserId';\nimport MultipleOption from './MultipleOption';\nimport SingleOption from './SingleOption';\n\ninterface IProps {\n  className?: string;\n  userGroupList: IUserGroup[];\n  multiple?: boolean;\n  onChange: (selected: boolean, userGroup: IUserGroup) => void;\n  selectedUsersGroup: IUserGroup[];\n  loading: boolean;\n  onSearchValueChange?: (value: string) => void;\n  width: number;\n  lockedIds: Array<TUserValue | TUserGroupValue>;\n  filterItem?: (item: IUserGroup) => boolean;\n  searchValue?: string;\n  showSearch?: boolean;\n  renderItem?: (\n    item: IUserGroup,\n    context: {\n      isSelected: boolean;\n      disabled: boolean;\n      onClick: () => void;\n      onNextLevel?: () => void;\n      originNode: React.ReactNode;\n    },\n  ) => React.ReactNode;\n}\n\nconst UserGroupSelection = ({\n  className,\n  userGroupList,\n  multiple,\n  onChange,\n  selectedUsersGroup: selectedUsersGroups,\n  loading,\n  onSearchValueChange,\n  width,\n  lockedIds,\n  filterItem,\n  searchValue = '',\n  showSearch,\n  renderItem,\n}: IProps) => {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const { getNextLevelGroup } = useContext(GetUserListContext);\n\n  const isAsync = !!getNextLevelGroup;\n\n  const [groupPath, setGroupPath] = useState<IUserGroup[]>([]);\n  const [asyncUserGroupList, setAsyncUserGroupList] = useState<IUserGroup[]>(\n    [],\n  );\n  const parentGroupId = _.last(groupPath)?.groupId;\n\n  useEffect(() => {\n    if (!getNextLevelGroup) {\n      return;\n    }\n\n    let ignore = false;\n    getNextLevelGroup({\n      parentGroupId,\n      keyword: searchValue,\n    }).then((userGroups) => {\n      if (!ignore) {\n        setAsyncUserGroupList(userGroups);\n      }\n    });\n\n    return () => {\n      ignore = true;\n    };\n  }, [getNextLevelGroup, parentGroupId, searchValue]);\n\n  const filterUserList = useMemo(() => {\n    let currentLevelGroups = asyncUserGroupList;\n\n    if (!isAsync) {\n      currentLevelGroups = userGroupList.filter((userGroup) => {\n        if (groupPath.length === 0) {\n          return !userGroup.parentId;\n        }\n\n        return userGroup.parentId === parentGroupId;\n      });\n\n      const normalizedKeyword = searchValue.trim().toLowerCase();\n      currentLevelGroups = currentLevelGroups.filter((group) => {\n        if (!normalizedKeyword) {\n          return true;\n        }\n\n        return group.name.toLowerCase().includes(normalizedKeyword);\n      });\n    }\n\n    return currentLevelGroups.filter((userGroup) => {\n      if (filterItem) {\n        return filterItem(userGroup);\n      }\n\n      return true;\n    });\n  }, [\n    asyncUserGroupList,\n    filterItem,\n    groupPath.length,\n    isAsync,\n    parentGroupId,\n    searchValue,\n    userGroupList,\n  ]);\n\n  return (\n    <div className={cn(className, 'ald-member-picker-member-list-wrap')}>\n      {showSearch && (\n        <Input\n          prefix={<SearchLine size={16} />}\n          className=\"ald-member-picker-search-input\"\n          aria-label={t.InputSearch.search}\n          autoFocus\n          value={searchValue}\n          onChange={(event) => onSearchValueChange?.(event.target.value)}\n        />\n      )}\n      {userGroupList.length === 0 && !loading && (\n        <Empty\n          title={t.MemberPicker.noData}\n          size=\"small\"\n          image={Empty.PRESENTED_IMAGE_SEARCH}\n          className=\"ald-member-picker-member-list-empty\"\n        />\n      )}\n      {groupPath.length !== 0 && (\n        <ScrollArea className=\"ald-member-picker-breadcrumb-scroll\">\n          <Breadcrumb className=\"ald-member-picker-breadcrumb\">\n            <Breadcrumb.Item\n              className=\"ald-member-picker-breadcrumb-item\"\n              onClick={() => {\n                setGroupPath([]);\n              }}\n            >\n              <div className=\"ald-member-picker-breadcrumb-item-inner\">\n                <ChevronLeftLine size={16} />\n                {t.MemberPicker.userGroups}\n              </div>\n            </Breadcrumb.Item>\n            {groupPath.map((group) => (\n              <Breadcrumb.Item\n                className=\"ald-member-picker-breadcrumb-item\"\n                key={group.groupId}\n                onClick={() => {\n                  setGroupPath((groups) => {\n                    const groupIndex = groups.findIndex(\n                      (tempGroup) => tempGroup.groupId === group.groupId,\n                    );\n                    return groups.filter(\n                      (tempGroup, index) => index <= groupIndex,\n                    );\n                  });\n                }}\n              >\n                <div className=\"ald-member-picker-breadcrumb-item-inner\">\n                  {group.name}\n                </div>\n              </Breadcrumb.Item>\n            ))}\n          </Breadcrumb>\n        </ScrollArea>\n      )}\n      <Spin\n        tip=\"Loading\"\n        spinning={loading}\n        size=\"small\"\n        className=\"ald-member-picker-user-list\"\n      >\n        <ScrollArea\n          className={cn('ald-member-picker-member-list', {\n            'ald-member-picker-member-list-null':\n              userGroupList.length === 0 && !loading,\n          })}\n          innerClassName=\"ald-member-picker-member-scroll\"\n        >\n          <div\n            role=\"listbox\"\n            aria-label=\"Groups\"\n            aria-multiselectable={multiple || undefined}\n            className=\"ald-member-picker-member-list-inner\"\n            style={{ width: multiple ? width : undefined, overflow: 'hidden' }}\n          >\n            {filterUserList.map((userGroup) => {\n              const isSelected = selectedUsersGroups.some(\n                (selectUserGroup) =>\n                  selectUserGroup.groupId === userGroup.groupId,\n              );\n\n              const index = _.findIndex(lockedIds, {\n                groupId: userGroup.groupId,\n                type: userGroup.type,\n              });\n              const disabled = index !== -1;\n\n              const hasNextLevel =\n                userGroupList.some(\n                  (group) => group.parentId === userGroup.groupId,\n                ) || isAsync;\n              const onNextLevel = () => {\n                setGroupPath((prev) => [...prev, userGroup]);\n                onSearchValueChange?.('');\n              };\n\n              const originNode = multiple ? (\n                <MultipleOption\n                  key={userGroup.groupId}\n                  user={userGroup}\n                  disabled={disabled}\n                  selected={isSelected}\n                  onChange={(selected, userGroup) => {\n                    if (isUserGroup(userGroup)) {\n                      onChange(selected, userGroup);\n                    }\n                  }}\n                  hasNextLevel={hasNextLevel}\n                  onNextLevel={onNextLevel}\n                ></MultipleOption>\n              ) : (\n                <SingleOption\n                  key={userGroup.groupId}\n                  user={userGroup}\n                  disabled={disabled}\n                  selected={isSelected}\n                  onChange={(selected, userGroup) => {\n                    if (isUserGroup(userGroup)) {\n                      onChange(selected, userGroup);\n                    }\n                  }}\n                  hasNextLevel={hasNextLevel}\n                  onNextLevel={onNextLevel}\n                ></SingleOption>\n              );\n\n              if (renderItem) {\n                return (\n                  <div\n                    key={userGroup.groupId}\n                    role=\"option\"\n                    id={`ald-member-picker-option-${userGroup.groupId}`}\n                    aria-selected={isSelected}\n                    aria-disabled={disabled || undefined}\n                  >\n                    {renderItem(userGroup, {\n                      isSelected,\n                      disabled,\n                      onClick: () => {\n                        if (isUserGroup(userGroup) && !disabled) {\n                          onChange(!isSelected, userGroup);\n                        }\n                      },\n                      onNextLevel: hasNextLevel ? onNextLevel : undefined,\n                      originNode,\n                    })}\n                  </div>\n                );\n              }\n\n              return originNode;\n            })}\n          </div>\n        </ScrollArea>\n      </Spin>\n    </div>\n  );\n};\n\nexport default UserGroupSelection;\n"],"mappings":"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"}

package/dist/MemberPicker/index.js

@@ -7,10 +7,11 @@ import Select_default from "../Select/index.js";
 /* empty css              */
 import message from "../message/index.js";
 import { EMemberPicker } from "./interface.js";
+import { getId } from "./utils/index.js";
 import { isUser, isUserGroup } from "./utils/getUsersWithUserId.js";
 import Panel from "./components/Panel.js";
 import PanelWrapper from "./components/PanelWrapper.js";
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import _ from "lodash";
 import { usePrevious, useRequest } from "ahooks";
@@ -27,6 +28,7 @@ var Component = (props) => {
 	const [searchUserList, setSearchUserList] = useState([]);
 	const [searchString, setSearchString] = useState("");
 	const [dropdownContentWidth, setDropdownContentWidth] = useState(dropdownWidth);
+	const selectOwnerRef = useRef(null);
 	const panelWidth = dropdownWidth ?? (multiple ? DEFAULT_MULTIPLE_DROPDOWN_WIDTH : true);
 	const triggerRef = useRef(null);
 	const onSearchValueChange = useCallback((v) => {
@@ -150,9 +152,6 @@ var Component = (props) => {
 		setDropdownOpen(open);
 		onOpenChange?.(open);
 	}, [onOpenChange]);
-	const panelKey = useMemo(() => {
-		if (dropdownOpen) return _.sampleSize("abcdefghijklmnopqrstuvwxyz0123456789", 8).join("");
-	}, [dropdownOpen]);
 	const mode = useMemo(() => {
 		if (multiple === true) {
 			if (typeof propsMode === "object") return {
@@ -168,115 +167,142 @@ var Component = (props) => {
 		return multiple ? multiple : propsMode;
 	}, [multiple, propsMode]);
 	const selectOpen = typeof open === "boolean" ? open : dropdownOpen;
-	return /* @__PURE__ */ jsx(Select_default, {
-		prefix: propPrefix,
-		...restProps,
-		"data-testid": dataTestId,
-		"aria-label": ariaLabel,
-		size,
-		className: cn("ald-member-picker-select", className),
-		value: selectedUserList.map((item) => {
-			if (item.type === EUserType.USER_GROUP) return item.groupId;
-			else return item.userId;
-		}),
-		onChange: (value) => {
-			if (_.isEmpty(value)) {
-				setSelectedUserList([]);
-				if (multiple) onChange?.([]);
-				else onChange?.();
-			} else {
-				const valueList = Array.isArray(value) ? value : [value];
-				if (multiple) {
-					const users = valueList.map((item) => {
-						return totalUserList.find((user) => {
-							if (user.type === EUserType.USER) return user.userId === item;
-							return user.groupId === item;
-						});
-					}).filter(Boolean);
-					setSelectedUserList(users);
-					onChange?.(users);
+	const listboxId = `ald-member-picker-listbox-${React.useId().replace(/:/g, "")}`;
+	const activeMember = totalUserList[0];
+	const activeMemberId = activeMember ? `ald-member-picker-option-${getId(activeMember)}` : void 0;
+	useEffect(() => {
+		const owner = selectOwnerRef.current?.querySelector("[role=\"combobox\"], input");
+		if (!owner) return;
+		owner.setAttribute("aria-controls", listboxId);
+		if (selectOpen && activeMemberId) owner.setAttribute("aria-activedescendant", activeMemberId);
+		else owner.removeAttribute("aria-activedescendant");
+	}, [
+		activeMemberId,
+		listboxId,
+		selectOpen
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: selectOwnerRef,
+		style: { display: "contents" },
+		children: /* @__PURE__ */ jsx(Select_default, {
+			prefix: propPrefix,
+			...restProps,
+			"data-testid": dataTestId,
+			"aria-label": ariaLabel,
+			showSearch: true,
+			searchValue: searchString,
+			onSearch: onSearchValueChange,
+			"aria-controls": listboxId,
+			"aria-activedescendant": selectOpen ? activeMemberId : void 0,
+			size,
+			className: cn("ald-member-picker-select", className),
+			value: selectedUserList.map((item) => {
+				if (item.type === EUserType.USER_GROUP) return item.groupId;
+				else return item.userId;
+			}),
+			onChange: (value) => {
+				if (_.isEmpty(value)) {
+					setSelectedUserList([]);
+					if (multiple) onChange?.([]);
+					else onChange?.();
 				} else {
-					const user = totalUserList.find((user) => {
-						if (user.type === EUserType.USER) return user.userId === value;
-						return user.groupId === value;
-					});
-					if (user) {
-						setSelectedUserList([user]);
-						onChange?.(user);
+					const valueList = Array.isArray(value) ? value : [value];
+					if (multiple) {
+						const users = valueList.map((item) => {
+							return totalUserList.find((user) => {
+								if (user.type === EUserType.USER) return user.userId === item;
+								return user.groupId === item;
+							});
+						}).filter(Boolean);
+						setSelectedUserList(users);
+						onChange?.(users);
 					} else {
-						setSelectedUserList([]);
-						onChange?.();
+						const user = totalUserList.find((user) => {
+							if (user.type === EUserType.USER) return user.userId === value;
+							return user.groupId === value;
+						});
+						if (user) {
+							setSelectedUserList([user]);
+							onChange?.(user);
+						} else {
+							setSelectedUserList([]);
+							onChange?.();
+						}
 					}
 				}
+			},
+			disabled,
+			allowClear,
+			onClear: () => {
+				setSelectedUserList([]);
+				if (multiple) onChange?.([]);
+				else onChange?.();
+				onClear?.();
+			},
+			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 {
+					label: item.name || item.groupId,
+					value: item.groupId,
+					tag: /* @__PURE__ */ jsxs("div", {
+						className: "ald-member-picker-tag",
+						children: [/* @__PURE__ */ jsx(Avatar, {
+							type: "team",
+							size: 20,
+							children: item.name || item.groupId
+						}), item.name || item.groupId]
+					})
+				};
+				return {
+					label: item.nickname || item.name || item.userId,
+					value: item.userId,
+					tag: /* @__PURE__ */ jsxs("div", {
+						className: "ald-member-picker-tag",
+						children: [/* @__PURE__ */ jsx(Avatar, {
+							size: 20,
+							src: item.photo,
+							type: item.type === EUserType.USER ? "user" : "team",
+							children: item.nickname || item.name || item.userId
+						}), item.nickname || item.name || item.userId]
+					})
+				};
+			}),
+			optionLabelProp: multiple ? "label" : "tag",
+			open: selectOpen,
+			onOpenChange: onDropdownOpenChange,
+			popupMatchSelectWidth: panelWidth,
+			allowOverlap,
+			placeholder,
+			dropdownRender: () => {
+				return /* @__PURE__ */ jsx("div", {
+					ref: triggerRef,
+					id: listboxId,
+					role: "group",
+					"aria-label": "Member selection results",
+					className: cn({ "ald-member-picker-popup-body": allowOverlap }),
+					children: /* @__PURE__ */ jsx(Panel, {
+						type,
+						footer,
+						value: selectedUserList,
+						dataList: totalUserList,
+						lockedIds,
+						multiple: !!multiple,
+						loading,
+						dropdownWidth: dropdownContentWidth,
+						onSearchValueChange,
+						onChange: onSelectedChange,
+						onCancel: () => {
+							onCancel?.();
+							setDropdownOpen(false);
+						},
+						renderItem,
+						renderSelectedTag,
+						searchValue: searchString
+					})
+				});
 			}
-		},
-		disabled,
-		allowClear,
-		onClear: () => {
-			setSelectedUserList([]);
-			if (multiple) onChange?.([]);
-			else onChange?.();
-			onClear?.();
-		},
-		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 {
-				label: item.name || item.groupId,
-				value: item.groupId,
-				tag: /* @__PURE__ */ jsxs("div", {
-					className: "ald-member-picker-tag",
-					children: [/* @__PURE__ */ jsx(Avatar, {
-						type: "team",
-						size: 20,
-						children: item.name || item.groupId
-					}), item.name || item.groupId]
-				})
-			};
-			return {
-				label: item.nickname || item.name || item.userId,
-				value: item.userId,
-				tag: /* @__PURE__ */ jsxs("div", {
-					className: "ald-member-picker-tag",
-					children: [/* @__PURE__ */ jsx(Avatar, {
-						size: 20,
-						src: item.photo,
-						type: item.type === EUserType.USER ? "user" : "team",
-						children: item.nickname || item.name || item.userId
-					}), item.nickname || item.name || item.userId]
-				})
-			};
-		}),
-		optionLabelProp: multiple ? "label" : "tag",
-		open: selectOpen,
-		onOpenChange: onDropdownOpenChange,
-		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,
-					value: selectedUserList,
-					dataList: totalUserList,
-					lockedIds,
-					multiple: !!multiple,
-					loading,
-					dropdownWidth: dropdownContentWidth,
-					onSearchValueChange,
-					onChange: onSelectedChange,
-					onCancel: () => {
-						onCancel?.();
-						setDropdownOpen(false);
-					},
-					renderItem,
-					renderSelectedTag
-				}, panelKey)
-			});
-		}
+		})
 	});
 };
 var MemberSelector = Component;

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 DEFAULT_MULTIPLE_DROPDOWN_WIDTH = 480;\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    'data-testid': dataTestId,\n    'aria-label': ariaLabel,\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  // 单选默认浮窗跟触发器等宽（true），调用方传 dropdownWidth 时用具体数字；\n  // 多选默认 480，单条记录只有 头像+nickname 时触发器太窄装不下选中标签，故固定值。\n  const panelWidth: number | boolean =\n    dropdownWidth ?? (multiple ? DEFAULT_MULTIPLE_DROPDOWN_WIDTH : true);\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      data-testid={dataTestId}\n      aria-label={ariaLabel}\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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"}
+{"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 { getId } from './utils';\nimport { isUser, isUserGroup } from './utils/getUsersWithUserId';\nimport Select from '../Select';\nimport { Mode } from '../Select/BaseSelect';\n\nconst DEFAULT_MULTIPLE_DROPDOWN_WIDTH = 480;\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    'data-testid': dataTestId,\n    'aria-label': ariaLabel,\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 selectOwnerRef = useRef<HTMLDivElement>(null);\n  // 单选默认浮窗跟触发器等宽（true），调用方传 dropdownWidth 时用具体数字；\n  // 多选默认 480，单条记录只有 头像+nickname 时触发器太窄装不下选中标签，故固定值。\n  const panelWidth: number | boolean =\n    dropdownWidth ?? (multiple ? DEFAULT_MULTIPLE_DROPDOWN_WIDTH : true);\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 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  const listboxId = `ald-member-picker-listbox-${React.useId().replace(\n    /:/g,\n    '',\n  )}`;\n  const activeMember = totalUserList[0];\n  const activeMemberId = activeMember\n    ? `ald-member-picker-option-${getId(activeMember)}`\n    : undefined;\n\n  useEffect(() => {\n    const owner = selectOwnerRef.current?.querySelector<HTMLElement>(\n      '[role=\"combobox\"], input',\n    );\n    if (!owner) return;\n    owner.setAttribute('aria-controls', listboxId);\n    if (selectOpen && activeMemberId) {\n      owner.setAttribute('aria-activedescendant', activeMemberId);\n    } else {\n      owner.removeAttribute('aria-activedescendant');\n    }\n  }, [activeMemberId, listboxId, selectOpen]);\n\n  return (\n    <div ref={selectOwnerRef} style={{ display: 'contents' }}>\n      <Select\n        prefix={propPrefix}\n        {...restProps}\n        data-testid={dataTestId}\n        aria-label={ariaLabel}\n        showSearch\n        searchValue={searchString}\n        onSearch={onSearchValueChange}\n        aria-controls={listboxId}\n        aria-activedescendant={selectOpen ? activeMemberId : undefined}\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              id={listboxId}\n              role=\"group\"\n              aria-label=\"Member selection results\"\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                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                searchValue={searchString}\n              ></Panel>\n            </div>\n          );\n        }}\n      ></Select>\n    </div>\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/Menu/index.d.ts

@@ -6,6 +6,12 @@ export interface MenuProps {
     items: MenuItemType[];
     selectedKeys?: string[];
     menuStyle?: React.CSSProperties;
+    /** Accessible name for the command menu when its context is not otherwise clear. */
+    ariaLabel?: string;
+    /** @internal Requested initial keyboard position when the popup opens. */
+    initialFocus?: 'first' | 'last';
+    /** @internal Requests that the owning popup close, including on Escape. */
+    onRequestClose?: (reason: 'click' | 'cancel' | 'blur' | 'scroll') => void;
     rootClosing?: boolean;
     /** @internal 由 Dropdown 注入，禁用内部定位/overflow 计算。不支持含 SubMenu 的菜单 */
     externalOverflow?: boolean;
@@ -24,6 +30,7 @@ export interface ItemType {
     danger?: boolean;
     disabled?: boolean;
     className?: string;
+    ariaLabel?: string;
 }
 export interface MenuDividerType {
     key?: string;
@@ -41,6 +48,7 @@ export interface SubMenuType {
     icon?: React.ReactNode;
     popupClassName?: string;
     disabled?: boolean;
+    ariaLabel?: string;
 }
 export interface MenuInfo {
     key: string;