@aloudata/aloudata-design 3.1.6 → 3.1.8

package/dist/MemberPicker/components/NickLabel.js

@@ -1,10 +1,13 @@
 import Avatar from "../../Avatar/index.js";
 import { EUserType } from "../../ConfigProvider/getUserList.js";
+import HighlightText from "../../HighlightText/index.js";
 import { memo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/MemberPicker/components/NickLabel.tsx
-var NickLabel = ({ photo, name, id, account, type, addonBefore }) => {
+var NickLabel = ({ photo, name, id, account, type, addonBefore, path, searchValue }) => {
 	const innerName = name || id;
+	const searchPath = searchValue?.trim() && path?.length ? path : void 0;
+	const title = searchPath ? searchPath.map((node) => node.name).join(" / ") : account ? `${name}(${account})` : name;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "ald-member-picker-nick-label",
 		children: [/* @__PURE__ */ jsx(Avatar, {
@@ -14,8 +17,15 @@ var NickLabel = ({ photo, name, id, account, type, addonBefore }) => {
 			children: innerName
 		}, innerName), /* @__PURE__ */ jsxs("div", {
 			className: "ald-member-picker-nick-label-name",
-			title: account ? `${name}(${account})` : `${name}`,
-			children: [innerName, addonBefore]
+			title,
+			children: [searchPath ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				searchPath.slice(0, -1).map((node) => node.name).join(" / "),
+				searchPath.length > 1 && " / ",
+				/* @__PURE__ */ jsx(HighlightText, {
+					keyword: searchValue || "",
+					children: innerName
+				})
+			] }) : innerName, addonBefore]
 		})]
 	});
 };

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

@@ -1 +1 @@
-{"version":3,"file":"NickLabel.js","names":[],"sources":["../../../src/MemberPicker/components/NickLabel.tsx"],"sourcesContent":["import React, { ReactNode, memo } from 'react';\nimport Avatar from '../../Avatar';\nimport { EUserType } from '../../ConfigProvider/getUserList';\n\ninterface INickLabelProps {\n  name?: string;\n  id: string;\n  photo?: React.ReactNode;\n  account?: string;\n  type: EUserType;\n  addonBefore?: ReactNode;\n}\nconst NickLabel: React.FC<INickLabelProps> = ({\n  photo,\n  name,\n  id,\n  account,\n  type,\n  addonBefore,\n}) => {\n  const innerName = name || id;\n\n  return (\n    <div className=\"ald-member-picker-nick-label\">\n      <Avatar\n        key={innerName}\n        src={photo}\n        size={20}\n        type={type === EUserType.USER ? 'user' : 'team'}\n      >\n        {innerName}\n      </Avatar>\n      <div\n        className=\"ald-member-picker-nick-label-name\"\n        title={account ? `${name}(${account})` : `${name}`}\n      >\n        {innerName}\n        {addonBefore}\n      </div>\n    </div>\n  );\n};\n\nexport default memo(NickLabel);\n"],"mappings":";;;;;AAYA,IAAM,aAAwC,EAC5C,OACA,MACA,IACA,SACA,MACA,kBACI;CACJ,MAAM,YAAY,QAAQ;AAE1B,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,QAAD;GAEE,KAAK;GACL,MAAM;GACN,MAAM,SAAS,UAAU,OAAO,SAAS;aAExC;GACM,EANF,UAME,EACT,qBAAC,OAAD;GACE,WAAU;GACV,OAAO,UAAU,GAAG,KAAK,GAAG,QAAQ,KAAK,GAAG;aAF9C,CAIG,WACA,YACG;KACF;;;AAIV,IAAA,oBAAe,KAAK,UAAU"}
+{"version":3,"file":"NickLabel.js","names":[],"sources":["../../../src/MemberPicker/components/NickLabel.tsx"],"sourcesContent":["import React, { ReactNode, memo } from 'react';\nimport Avatar from '../../Avatar';\nimport HighlightText from '../../HighlightText';\nimport { EUserType } from '../../ConfigProvider/getUserList';\n\ninterface INickLabelProps {\n  name?: string;\n  id: string;\n  photo?: React.ReactNode;\n  account?: string;\n  type: EUserType;\n  addonBefore?: ReactNode;\n  path?: Array<{ groupId: string; name: string }> | null;\n  searchValue?: string;\n}\nconst NickLabel: React.FC<INickLabelProps> = ({\n  photo,\n  name,\n  id,\n  account,\n  type,\n  addonBefore,\n  path,\n  searchValue,\n}) => {\n  const innerName = name || id;\n  const searchPath = searchValue?.trim() && path?.length ? path : undefined;\n  const title = searchPath\n    ? searchPath.map((node) => node.name).join(' / ')\n    : account\n    ? `${name}(${account})`\n    : name;\n\n  return (\n    <div className=\"ald-member-picker-nick-label\">\n      <Avatar\n        key={innerName}\n        src={photo}\n        size={20}\n        type={type === EUserType.USER ? 'user' : 'team'}\n      >\n        {innerName}\n      </Avatar>\n      <div className=\"ald-member-picker-nick-label-name\" title={title}>\n        {searchPath ? (\n          <>\n            {searchPath\n              .slice(0, -1)\n              .map((node) => node.name)\n              .join(' / ')}\n            {searchPath.length > 1 && ' / '}\n            <HighlightText keyword={searchValue || ''}>\n              {innerName}\n            </HighlightText>\n          </>\n        ) : (\n          innerName\n        )}\n        {addonBefore}\n      </div>\n    </div>\n  );\n};\n\nexport default memo(NickLabel);\n"],"mappings":";;;;;;AAeA,IAAM,aAAwC,EAC5C,OACA,MACA,IACA,SACA,MACA,aACA,MACA,kBACI;CACJ,MAAM,YAAY,QAAQ;CAC1B,MAAM,aAAa,aAAa,MAAM,IAAI,MAAM,SAAS,OAAO;CAChE,MAAM,QAAQ,aACV,WAAW,KAAK,SAAS,KAAK,KAAK,CAAC,KAAK,MAAM,GAC/C,UACA,GAAG,KAAK,GAAG,QAAQ,KACnB;AAEJ,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,QAAD;GAEE,KAAK;GACL,MAAM;GACN,MAAM,SAAS,UAAU,OAAO,SAAS;aAExC;GACM,EANF,UAME,EACT,qBAAC,OAAD;GAAK,WAAU;GAA2C;aAA1D,CACG,aACC,qBAAA,UAAA,EAAA,UAAA;IACG,WACE,MAAM,GAAG,GAAG,CACZ,KAAK,SAAS,KAAK,KAAK,CACxB,KAAK,MAAM;IACb,WAAW,SAAS,KAAK;IAC1B,oBAAC,eAAD;KAAe,SAAS,eAAe;eACpC;KACa,CAAA;IACf,EAAA,CAAA,GAEH,WAED,YACG;KACF;;;AAIV,IAAA,oBAAe,KAAK,UAAU"}

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

@@ -1,7 +1,11 @@
+import { IBaseMemberSelectorProps, EMemberPicker, IUser } from '../interface';
 import { ReactNode } from 'react';
 import { IUserGroup, TUser, TUserGroupValue, TUserValue } from '../../ConfigProvider/getUserList';
-import { EMemberPicker, IUser } from '../interface';
 interface IPanelProps {
+    searchFeedback?: ReactNode;
+    searchFailed?: boolean;
+    useProvidedGroupSearch?: boolean;
+    active?: boolean;
     type: EMemberPicker;
     multiple?: boolean;
     onChange?: (value: TUser) => void;
@@ -14,6 +18,7 @@ interface IPanelProps {
     className?: string;
     lockedIds: Array<TUserValue | TUserGroupValue>;
     footer?: ReactNode;
+    canEnterGroup?: IBaseMemberSelectorProps['canEnterGroup'];
     renderItem?: (item: IUser | IUserGroup, context: {
         isSelected: boolean;
         disabled: boolean;

package/dist/MemberPicker/components/Panel.js

@@ -2,19 +2,19 @@ import { cn } from "../../lib/utils.js";
 import { LocaleContext, getTranslator } from "../../locale/default.js";
 import "../../ConfigProvider/getUserList.js";
 import Tabs from "../../Tabs/index.js";
+import SelectorFooter from "./SelectorFooter.js";
 import { EMemberPicker } from "../interface.js";
 import { getId } from "../utils/index.js";
 import { isUser, isUserGroup } from "../utils/getUsersWithUserId.js";
 import MemberSelection from "./MemberSelection.js";
 import SelectedMemberTags from "./SelectedMemberTags.js";
-import SelectorFooter from "./SelectorFooter.js";
 import UserGroupSelection from "./UserGroupSelection.js";
 import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function Panel(props) {
 	const { locale } = useContext(LocaleContext);
 	const t = getTranslator(locale);
-	const { type, multiple, dropdownWidth, value, onChange, dataList, onSearchValueChange, className, lockedIds, footer, onCancel, renderItem, renderSelectedTag, filterItem, searchValue = "", showSearch } = props;
+	const { type, multiple, dropdownWidth, value, onChange, dataList, onSearchValueChange, className, lockedIds, footer, onCancel, canEnterGroup, renderItem, renderSelectedTag, filterItem, searchValue = "", showSearch } = props;
 	const [selectedUsers, setSelected] = useState([]);
 	const onSelectionChange = useCallback((selected, user) => {
 		if (multiple) if (selected) setSelected([...selectedUsers, user]);
@@ -60,6 +60,9 @@ function Panel(props) {
 			renderItem
 		});
 		const userGroupSelection = /* @__PURE__ */ jsx(UserGroupSelection, {
+			active: props.active,
+			useProvidedSearch: props.useProvidedGroupSearch && !!searchValue.trim(),
+			parentSearchFailed: props.searchFailed,
 			className: "ald-member-picker-member-selection-multiple",
 			userGroupList: dataList.filter(isUserGroup),
 			filterItem,
@@ -72,6 +75,7 @@ function Panel(props) {
 			multiple: true,
 			lockedIds,
 			loading: props.loading,
+			canEnterGroup,
 			renderItem
 		});
 		if (type === EMemberPicker.USER) return userSelection;
@@ -101,18 +105,22 @@ function Panel(props) {
 		showSearch,
 		lockedIds,
 		props.loading,
+		props.active,
+		props.searchFailed,
+		props.useProvidedGroupSearch,
 		type,
+		canEnterGroup,
 		renderItem,
 		filterItem
 	]);
 	const wrapperWidth = dropdownWidth ?? (multiple ? panelwidth : "100%");
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs("div", {
 		className: cn(className, "ald-member-picker-wrapper", {
 			["ald-member-picker-multiple"]: multiple,
 			["ald-member-picker-single"]: !multiple
 		}),
 		style: { width: wrapperWidth },
-		children: multiple ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		children: [props.searchFeedback, multiple ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
 			className: "ald-member-picker-inner",
 			children: [/* @__PURE__ */ jsx("div", {
 				className: "ald-member-picker-member-selection-wrapper",
@@ -147,6 +155,9 @@ function Panel(props) {
 			loading: props.loading,
 			renderItem
 		}), type === EMemberPicker.GROUP && /* @__PURE__ */ jsx(UserGroupSelection, {
+			active: props.active,
+			useProvidedSearch: props.useProvidedGroupSearch && !!searchValue.trim(),
+			parentSearchFailed: props.searchFailed,
 			className: "ald-member-picker-member-selection-multiple",
 			userGroupList: dataList.filter(isUserGroup),
 			width: (panelwidth - 3) / 2,
@@ -158,8 +169,9 @@ function Panel(props) {
 			multiple: false,
 			lockedIds,
 			loading: props.loading,
+			canEnterGroup,
 			renderItem
-		})] })
+		})] })]
 	});
 }
 //#endregion

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  searchValue?: string;\n  showSearch?: 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    searchValue = '',\n    showSearch,\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        searchValue={searchValue}\n        showSearch={showSearch}\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        searchValue={searchValue}\n        showSearch={showSearch}\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    searchValue,\n    showSearch,\n    lockedIds,\n    props.loading,\n    type,\n    renderItem,\n    filterItem,\n  ]);\n\n  // 单选 + 调用方未传 dropdownWidth 时让 wrapper 跟随父级（popupMatchSelectWidth=true 的浮窗 = 触发器宽度），\n  // 否则按具体数字（多选 480 / 调用方自定义）固定宽度。\n  const wrapperWidth: number | string =\n    dropdownWidth ?? (multiple ? panelwidth : '100%');\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: wrapperWidth }}\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              searchValue={searchValue}\n              showSearch={showSearch}\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              searchValue={searchValue}\n              showSearch={showSearch}\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 type { IBaseMemberSelectorProps } from '../interface';\nimport { 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  searchFeedback?: ReactNode;\n  searchFailed?: boolean;\n  useProvidedGroupSearch?: boolean;\n  active?: boolean;\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  canEnterGroup?: IBaseMemberSelectorProps['canEnterGroup'];\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  searchValue?: string;\n  showSearch?: 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    canEnterGroup,\n    renderItem,\n    renderSelectedTag,\n    filterItem,\n    searchValue = '',\n    showSearch,\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        searchValue={searchValue}\n        showSearch={showSearch}\n        multiple={true}\n        lockedIds={lockedIds}\n        loading={props.loading}\n        renderItem={renderItem}\n      ></MemberSelection>\n    );\n    const userGroupSelection = (\n      <UserGroupSelection\n        active={props.active}\n        useProvidedSearch={props.useProvidedGroupSearch && !!searchValue.trim()}\n        parentSearchFailed={props.searchFailed}\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        searchValue={searchValue}\n        showSearch={showSearch}\n        multiple={true}\n        lockedIds={lockedIds}\n        loading={props.loading}\n        canEnterGroup={canEnterGroup}\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    searchValue,\n    showSearch,\n    lockedIds,\n    props.loading,\n    props.active,\n    props.searchFailed,\n    props.useProvidedGroupSearch,\n    type,\n    canEnterGroup,\n    renderItem,\n    filterItem,\n  ]);\n\n  // 单选 + 调用方未传 dropdownWidth 时让 wrapper 跟随父级（popupMatchSelectWidth=true 的浮窗 = 触发器宽度），\n  // 否则按具体数字（多选 480 / 调用方自定义）固定宽度。\n  const wrapperWidth: number | string =\n    dropdownWidth ?? (multiple ? panelwidth : '100%');\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: wrapperWidth }}\n    >\n      {props.searchFeedback}\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              searchValue={searchValue}\n              showSearch={showSearch}\n              multiple={false && multiple}\n              lockedIds={lockedIds}\n              loading={props.loading}\n              renderItem={renderItem}\n            ></MemberSelection>\n          )}\n          {type === EMemberPicker.GROUP && (\n            <UserGroupSelection\n              active={props.active}\n              useProvidedSearch={\n                props.useProvidedGroupSearch && !!searchValue.trim()\n              }\n              parentSearchFailed={props.searchFailed}\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              searchValue={searchValue}\n              showSearch={showSearch}\n              multiple={false}\n              lockedIds={lockedIds}\n              loading={props.loading}\n              canEnterGroup={canEnterGroup}\n              renderItem={renderItem}\n            ></UserGroupSelection>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
+import { IBaseMemberSelectorProps, EMemberPicker, IUser, TMemberPickerValue } from '../interface';
 import { ReactNode } from 'react';
 import { IUserGroup, TUser, TUserGroupValue, TUserValue } from '../../ConfigProvider/getUserList';
-import { EMemberPicker, IUser, TMemberPickerValue } from '../interface';
 interface IProps {
     type?: EMemberPicker;
     multiple?: boolean;
@@ -12,6 +12,7 @@ interface IProps {
     lockedIds?: Array<TUserValue | TUserGroupValue>;
     showUserId?: boolean;
     footer?: ReactNode;
+    canEnterGroup?: IBaseMemberSelectorProps['canEnterGroup'];
     renderItem?: (item: IUser | IUserGroup, context: {
         isSelected: boolean;
         disabled: boolean;
@@ -22,5 +23,5 @@ interface IProps {
     renderSelectedTag?: (user: IUser | IUserGroup, originNode: ReactNode) => ReactNode;
     filterItem?: (item: IUser | IUserGroup) => boolean;
 }
-export declare const PanelWrapper: ({ type, value, multiple, dropdownWidth, onChange, onCancel, className, footer, lockedIds, renderItem, renderSelectedTag, filterItem, }: IProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PanelWrapper: ({ type, value, multiple, dropdownWidth, onChange, onCancel, className, footer, lockedIds, canEnterGroup, renderItem, renderSelectedTag, filterItem, }: IProps) => import("react/jsx-runtime").JSX.Element;
 export default PanelWrapper;

package/dist/MemberPicker/components/PanelWrapper.js

@@ -1,45 +1,40 @@
 import { LocaleContext, getTranslator } from "../../locale/default.js";
 import { EUserType } from "../../ConfigProvider/getUserList.js";
 import AldCustomConfigProvider from "../../ConfigProvider/index.js";
-import message from "../../message/index.js";
 import { EMemberPicker } from "../interface.js";
+import SearchFeedback from "./SearchFeedback.js";
+import useMemberSearch from "../useMemberSearch.js";
 import { isUser, isUserGroup } from "../utils/getUsersWithUserId.js";
 import Panel from "./Panel.js";
 import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import _ from "lodash";
-import { useRequest } from "ahooks";
 //#region src/MemberPicker/components/PanelWrapper.tsx
-var PanelWrapper = ({ type = EMemberPicker.USER, value, multiple, dropdownWidth, onChange, onCancel, className, footer, lockedIds = [], renderItem, renderSelectedTag, filterItem }) => {
+var PanelWrapper = ({ type = EMemberPicker.USER, value, multiple, dropdownWidth, onChange, onCancel, className, footer, lockedIds = [], canEnterGroup, renderItem, renderSelectedTag, filterItem }) => {
 	const { locale } = useContext(LocaleContext);
 	const t = getTranslator(locale);
-	const { getUsersByIds, getUsersByKeywords } = AldCustomConfigProvider.useGetUserList();
+	const { getUsersByIds, getUsersByKeywords, getUsersByKeywordsWithMeta, getNextLevelGroup, getNextLevelGroupWithMeta } = AldCustomConfigProvider.useGetUserList();
+	const usesGroupQuery = (type === EMemberPicker.GROUP || !getUsersByKeywords && !getUsersByKeywordsWithMeta) && !!(getNextLevelGroup || getNextLevelGroupWithMeta);
 	const [selectedUserList, setSelectedUserList] = useState([]);
-	const [searchUserList, setSearchUserList] = useState([]);
 	const [searchString, setSearchString] = useState("");
 	const onSearchValueChange = useCallback((v) => {
 		setSearchString(v);
 	}, []);
 	const queryByKeywords = useMemo(() => {
+		if (getUsersByKeywordsWithMeta) return getUsersByKeywordsWithMeta;
 		if (getUsersByKeywords) return getUsersByKeywords;
 		return (_params = {}) => Promise.reject({ message: t.MemberPicker.pleaseConfigGetUserByKeywordsMethod });
-	}, [getUsersByKeywords, t.MemberPicker.pleaseConfigGetUserByKeywordsMethod]);
+	}, [
+		getUsersByKeywords,
+		getUsersByKeywordsWithMeta,
+		t.MemberPicker.pleaseConfigGetUserByKeywordsMethod
+	]);
 	const queryByIds = useMemo(() => {
 		if (getUsersByIds) return getUsersByIds;
 		return (_params = {}) => Promise.reject({ message: t.MemberPicker.pleaseConfigGetUserByIdsMethod });
 	}, [getUsersByIds, t.MemberPicker.pleaseConfigGetUserByIdsMethod]);
-	const { loading, run } = useRequest(() => queryByKeywords(searchString), {
-		refreshDeps: [searchString],
-		manual: true,
-		cacheKey: "member-selector",
-		cacheTime: 1e3 * 60 * 2,
-		onSuccess: (result) => {
-			setSearchUserList(result);
-		},
-		onError: (error) => {
-			message.error(error.message);
-		}
-	});
+	const { result: searchResult, loading, failed, retry } = useMemberSearch(queryByKeywords, searchString, !usesGroupQuery);
+	const searchUserList = searchResult.items;
 	const totalUserList = useMemo(() => {
 		const totalUsers = searchUserList.concat(selectedUserList).filter((item) => {
 			if (filterItem) return filterItem(item);
@@ -54,9 +49,6 @@ var PanelWrapper = ({ type = EMemberPicker.USER, value, multiple, dropdownWidth,
 		selectedUserList,
 		filterItem
 	]);
-	useEffect(() => {
-		run();
-	}, [run, searchString]);
 	useEffect(() => {
 		if (Array.isArray(value) && (isUser(value[0]) || isUserGroup(value[0]))) setSelectedUserList(value);
 		else if (isUser(value) || isUserGroup(value)) setSelectedUserList([value]);
@@ -74,7 +66,19 @@ var PanelWrapper = ({ type = EMemberPicker.USER, value, multiple, dropdownWidth,
 			});
 		}
 	}, [value, queryByIds]);
+	const onSelectedChange = useCallback((users) => {
+		if (multiple) onChange?.(users);
+		else onChange?.(users[0]);
+	}, [multiple, onChange]);
 	return /* @__PURE__ */ jsx(Panel, {
+		searchFailed: failed,
+		useProvidedGroupSearch: type === EMemberPicker.BOTH && !usesGroupQuery,
+		searchFeedback: !usesGroupQuery && /* @__PURE__ */ jsx(SearchFeedback, {
+			failed,
+			hasMore: searchResult.hasMore,
+			pathWarningCode: searchResult.pathWarningCode,
+			retry
+		}),
 		type,
 		value: selectedUserList,
 		dataList: totalUserList,
@@ -84,14 +88,12 @@ var PanelWrapper = ({ type = EMemberPicker.USER, value, multiple, dropdownWidth,
 		onSearchValueChange,
 		searchValue: searchString,
 		showSearch: true,
-		onChange: useCallback((users) => {
-			if (multiple) onChange?.(users);
-			else onChange?.(users[0]);
-		}, [multiple, onChange]),
+		onChange: onSelectedChange,
 		className,
 		onCancel,
 		lockedIds,
 		footer,
+		canEnterGroup,
 		renderItem,
 		renderSelectedTag
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"PanelWrapper.js","names":[],"sources":["../../../src/MemberPicker/components/PanelWrapper.tsx"],"sourcesContent":["import { useRequest } from 'ahooks';\nimport _ from 'lodash';\nimport React, {\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { message } from '../../';\nimport ConfigProvider from '../../ConfigProvider';\nimport {\n  EUserType,\n  IUserGroup,\n  TUser,\n  TUserGroupValue,\n  TUserValue,\n} from '../../ConfigProvider/getUserList';\nimport { LocaleContext, getTranslator } from '../../locale/default';\nimport { EMemberPicker, IUser, TMemberPickerValue } from '../interface';\nimport { isUser, isUserGroup } from '../utils/getUsersWithUserId';\nimport Panel from './Panel';\n\ninterface IProps {\n  type?: EMemberPicker;\n  multiple?: boolean;\n  onChange?(v: TUser | (IUser | IUserGroup)): void;\n  dropdownWidth?: number;\n  value?: TMemberPickerValue;\n  className?: string;\n  onCancel?: () => void;\n  lockedIds?: Array<TUserValue | TUserGroupValue>;\n  showUserId?: boolean;\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 PanelWrapper = ({\n  type = EMemberPicker.USER,\n  value,\n  multiple,\n  dropdownWidth,\n  onChange,\n  onCancel,\n  className,\n  footer,\n  lockedIds = [],\n  renderItem,\n  renderSelectedTag,\n  filterItem,\n}: IProps) => {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const { getUsersByIds, getUsersByKeywords } = ConfigProvider.useGetUserList();\n  const [selectedUserList, setSelectedUserList] = useState<TUser>([]);\n  const [searchUserList, setSearchUserList] = useState<TUser>([]);\n  const [searchString, setSearchString] = useState<string>('');\n\n  const onSearchValueChange = useCallback((v: string) => {\n    setSearchString(v);\n  }, []);\n\n  const queryByKeywords = useMemo(() => {\n    if (getUsersByKeywords) {\n      return getUsersByKeywords;\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    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  const totalUserList: TUser = useMemo(() => {\n    const totalUsers = searchUserList\n      .concat(selectedUserList)\n      .filter((item) => {\n        if (filterItem) {\n          return filterItem(item);\n        }\n        return true;\n      });\n    return _.uniqBy(totalUsers, (data: IUser | IUserGroup) => {\n      if (data.type === EUserType.USER) return data.userId;\n      return data.groupId;\n    });\n  }, [searchUserList, selectedUserList, filterItem]);\n\n  useEffect(() => {\n    run();\n  }, [run, searchString]);\n\n  useEffect(() => {\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        return;\n      }\n      if (!Array.isArray(value)) {\n        param = [value];\n      } else {\n        param = value;\n      }\n      queryByIds(param).then((result) => {\n        setSelectedUserList(result);\n      });\n    }\n  }, [value, queryByIds]);\n\n  const onSelectedChange = useCallback(\n    (users: TUser) => {\n      if (multiple) {\n        onChange?.(users);\n      } else {\n        onChange?.(users[0]);\n      }\n    },\n    [multiple, onChange],\n  );\n\n  return (\n    <Panel\n      type={type}\n      value={selectedUserList}\n      dataList={totalUserList}\n      multiple={multiple}\n      loading={loading}\n      dropdownWidth={dropdownWidth}\n      onSearchValueChange={onSearchValueChange}\n      searchValue={searchString}\n      showSearch\n      onChange={onSelectedChange}\n      className={className}\n      onCancel={onCancel}\n      lockedIds={lockedIds}\n      footer={footer}\n      renderItem={renderItem}\n      renderSelectedTag={renderSelectedTag}\n    ></Panel>\n  );\n};\n\nexport default PanelWrapper;\n"],"mappings":";;;;;;;;;;;;AAoDA,IAAa,gBAAgB,EAC3B,OAAO,cAAc,MACrB,OACA,UACA,eACA,UACA,UACA,WACA,QACA,YAAY,EAAE,EACd,YACA,mBACA,iBACY;CACZ,MAAM,EAAE,WAAW,WAAW,cAAc;CAC5C,MAAM,IAAI,cAAc,OAAO;CAE/B,MAAM,EAAE,eAAe,uBAAuB,wBAAe,gBAAgB;CAC7E,MAAM,CAAC,kBAAkB,uBAAuB,SAAgB,EAAE,CAAC;CACnE,MAAM,CAAC,gBAAgB,qBAAqB,SAAgB,EAAE,CAAC;CAC/D,MAAM,CAAC,cAAc,mBAAmB,SAAiB,GAAG;CAE5D,MAAM,sBAAsB,aAAa,MAAc;AACrD,kBAAgB,EAAE;IACjB,EAAE,CAAC;CAEN,MAAM,kBAAkB,cAAc;AACpC,MAAI,mBACF,QAAO;AAET,UAAQ,UAAU,EAAE,KAClB,QAAQ,OAAO,EACb,SAAS,EAAE,aAAa,qCACzB,CAAC;IACH,CAAC,oBAAoB,EAAE,aAAa,oCAAoC,CAAC;CAC5E,MAAM,aAAa,cAAc;AAC/B,MAAI,cACF,QAAO;AAET,UAAQ,UAAU,EAAE,KAClB,QAAQ,OAAO,EACb,SAAS,EAAE,aAAa,gCACzB,CAAC;IACH,CAAC,eAAe,EAAE,aAAa,+BAA+B,CAAC;CAClE,MAAM,EAAE,SAAS,QAAQ,iBAAiB,gBAAgB,aAAa,EAAE;EACvE,aAAa,CAAC,aAAa;EAC3B,QAAQ;EACR,UAAU;EACV,WAAW,MAAO,KAAK;EACvB,YAAY,WAAW;AACrB,qBAAkB,OAAO;;EAE3B,UAAU,UAAU;AAClB,WAAQ,MAAM,MAAM,QAAQ;;EAE/B,CAAC;CACF,MAAM,gBAAuB,cAAc;EACzC,MAAM,aAAa,eAChB,OAAO,iBAAiB,CACxB,QAAQ,SAAS;AAChB,OAAI,WACF,QAAO,WAAW,KAAK;AAEzB,UAAO;IACP;AACJ,SAAO,EAAE,OAAO,aAAa,SAA6B;AACxD,OAAI,KAAK,SAAS,UAAU,KAAM,QAAO,KAAK;AAC9C,UAAO,KAAK;IACZ;IACD;EAAC;EAAgB;EAAkB;EAAW,CAAC;AAElD,iBAAgB;AACd,OAAK;IACJ,CAAC,KAAK,aAAa,CAAC;AAEvB,iBAAgB;AACd,MAAI,MAAM,QAAQ,MAAM,KAAK,OAAO,MAAM,GAAG,IAAI,YAAY,MAAM,GAAG,EACpE,qBAAoB,MAAe;WAC1B,OAAO,MAAM,IAAI,YAAY,MAAM,CAC5C,qBAAoB,CAAC,MAAM,CAAC;OACvB;GACL,IAAI,QAA6C,EAAE;AACnD,OAAI,CAAC,MAAO;AACZ,OAAI,MAAM,QAAQ,MAAM,IAAI,MAAM,WAAW,GAAG;AAC9C,wBAAoB,EAAE,CAAC;AACvB;;AAEF,OAAI,CAAC,MAAM,QAAQ,MAAM,CACvB,SAAQ,CAAC,MAAM;OAEf,SAAQ;AAEV,cAAW,MAAM,CAAC,MAAM,WAAW;AACjC,wBAAoB,OAAO;KAC3B;;IAEH,CAAC,OAAO,WAAW,CAAC;AAavB,QACE,oBAAC,OAAD;EACQ;EACN,OAAO;EACP,UAAU;EACA;EACD;EACM;EACM;EACrB,aAAa;EACb,YAAA;EACA,UAtBqB,aACtB,UAAiB;AAChB,OAAI,SACF,YAAW,MAAM;OAEjB,YAAW,MAAM,GAAG;KAGxB,CAAC,UAAU,SAAS,CACrB;EAcc;EACD;EACC;EACH;EACI;EACO;EACZ,CAAA"}
+{"version":3,"file":"PanelWrapper.js","names":[],"sources":["../../../src/MemberPicker/components/PanelWrapper.tsx"],"sourcesContent":["import type { IBaseMemberSelectorProps } from '../interface';\nimport useMemberSearch from '../useMemberSearch';\nimport SearchFeedback from './SearchFeedback';\nimport _ from 'lodash';\nimport React, {\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport ConfigProvider from '../../ConfigProvider';\nimport {\n  EUserType,\n  IUserGroup,\n  TUser,\n  TUserGroupValue,\n  TUserValue,\n} from '../../ConfigProvider/getUserList';\nimport { LocaleContext, getTranslator } from '../../locale/default';\nimport { EMemberPicker, IUser, TMemberPickerValue } from '../interface';\nimport { isUser, isUserGroup } from '../utils/getUsersWithUserId';\nimport Panel from './Panel';\n\ninterface IProps {\n  type?: EMemberPicker;\n  multiple?: boolean;\n  onChange?(v: TUser | (IUser | IUserGroup)): void;\n  dropdownWidth?: number;\n  value?: TMemberPickerValue;\n  className?: string;\n  onCancel?: () => void;\n  lockedIds?: Array<TUserValue | TUserGroupValue>;\n  showUserId?: boolean;\n  footer?: ReactNode;\n  canEnterGroup?: IBaseMemberSelectorProps['canEnterGroup'];\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 PanelWrapper = ({\n  type = EMemberPicker.USER,\n  value,\n  multiple,\n  dropdownWidth,\n  onChange,\n  onCancel,\n  className,\n  footer,\n  lockedIds = [],\n  canEnterGroup,\n  renderItem,\n  renderSelectedTag,\n  filterItem,\n}: IProps) => {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const {\n    getUsersByIds,\n    getUsersByKeywords,\n    getUsersByKeywordsWithMeta,\n    getNextLevelGroup,\n    getNextLevelGroupWithMeta,\n  } = ConfigProvider.useGetUserList();\n  const usesGroupQuery =\n    (type === EMemberPicker.GROUP ||\n      (!getUsersByKeywords && !getUsersByKeywordsWithMeta)) &&\n    !!(getNextLevelGroup || getNextLevelGroupWithMeta);\n  const [selectedUserList, setSelectedUserList] = useState<TUser>([]);\n  const [searchString, setSearchString] = useState<string>('');\n\n  const onSearchValueChange = useCallback((v: string) => {\n    setSearchString(v);\n  }, []);\n\n  const queryByKeywords = useMemo(() => {\n    if (getUsersByKeywordsWithMeta) return getUsersByKeywordsWithMeta;\n    if (getUsersByKeywords) {\n      return getUsersByKeywords;\n    }\n    return (_params = {}) =>\n      Promise.reject({\n        message: t.MemberPicker.pleaseConfigGetUserByKeywordsMethod,\n      });\n  }, [\n    getUsersByKeywords,\n    getUsersByKeywordsWithMeta,\n    t.MemberPicker.pleaseConfigGetUserByKeywordsMethod,\n  ]);\n  const queryByIds = useMemo(() => {\n    if (getUsersByIds) {\n      return getUsersByIds;\n    }\n    return (_params = {}) =>\n      Promise.reject({\n        message: t.MemberPicker.pleaseConfigGetUserByIdsMethod,\n      });\n  }, [getUsersByIds, t.MemberPicker.pleaseConfigGetUserByIdsMethod]);\n  const {\n    result: searchResult,\n    loading,\n    failed,\n    retry,\n  } = useMemberSearch<IUser | IUserGroup>(\n    queryByKeywords,\n    searchString,\n    !usesGroupQuery,\n  );\n  const searchUserList = searchResult.items;\n\n  const totalUserList: TUser = useMemo(() => {\n    const totalUsers = searchUserList\n      .concat(selectedUserList)\n      .filter((item) => {\n        if (filterItem) {\n          return filterItem(item);\n        }\n        return true;\n      });\n    return _.uniqBy(totalUsers, (data: IUser | IUserGroup) => {\n      if (data.type === EUserType.USER) return data.userId;\n      return data.groupId;\n    });\n  }, [searchUserList, selectedUserList, filterItem]);\n\n  useEffect(() => {\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        return;\n      }\n      if (!Array.isArray(value)) {\n        param = [value];\n      } else {\n        param = value;\n      }\n      queryByIds(param).then((result) => {\n        setSelectedUserList(result);\n      });\n    }\n  }, [value, queryByIds]);\n\n  const onSelectedChange = useCallback(\n    (users: TUser) => {\n      if (multiple) {\n        onChange?.(users);\n      } else {\n        onChange?.(users[0]);\n      }\n    },\n    [multiple, onChange],\n  );\n\n  return (\n    <Panel\n      searchFailed={failed}\n      useProvidedGroupSearch={type === EMemberPicker.BOTH && !usesGroupQuery}\n      searchFeedback={\n        !usesGroupQuery && (\n          <SearchFeedback\n            failed={failed}\n            hasMore={searchResult.hasMore}\n            pathWarningCode={searchResult.pathWarningCode}\n            retry={retry}\n          />\n        )\n      }\n      type={type}\n      value={selectedUserList}\n      dataList={totalUserList}\n      multiple={multiple}\n      loading={loading}\n      dropdownWidth={dropdownWidth}\n      onSearchValueChange={onSearchValueChange}\n      searchValue={searchString}\n      showSearch\n      onChange={onSelectedChange}\n      className={className}\n      onCancel={onCancel}\n      lockedIds={lockedIds}\n      footer={footer}\n      canEnterGroup={canEnterGroup}\n      renderItem={renderItem}\n      renderSelectedTag={renderSelectedTag}\n    ></Panel>\n  );\n};\n\nexport default PanelWrapper;\n"],"mappings":";;;;;;;;;;;;AAsDA,IAAa,gBAAgB,EAC3B,OAAO,cAAc,MACrB,OACA,UACA,eACA,UACA,UACA,WACA,QACA,YAAY,EAAE,EACd,eACA,YACA,mBACA,iBACY;CACZ,MAAM,EAAE,WAAW,WAAW,cAAc;CAC5C,MAAM,IAAI,cAAc,OAAO;CAE/B,MAAM,EACJ,eACA,oBACA,4BACA,mBACA,8BACE,wBAAe,gBAAgB;CACnC,MAAM,kBACH,SAAS,cAAc,SACrB,CAAC,sBAAsB,CAAC,+BAC3B,CAAC,EAAE,qBAAqB;CAC1B,MAAM,CAAC,kBAAkB,uBAAuB,SAAgB,EAAE,CAAC;CACnE,MAAM,CAAC,cAAc,mBAAmB,SAAiB,GAAG;CAE5D,MAAM,sBAAsB,aAAa,MAAc;AACrD,kBAAgB,EAAE;IACjB,EAAE,CAAC;CAEN,MAAM,kBAAkB,cAAc;AACpC,MAAI,2BAA4B,QAAO;AACvC,MAAI,mBACF,QAAO;AAET,UAAQ,UAAU,EAAE,KAClB,QAAQ,OAAO,EACb,SAAS,EAAE,aAAa,qCACzB,CAAC;IACH;EACD;EACA;EACA,EAAE,aAAa;EAChB,CAAC;CACF,MAAM,aAAa,cAAc;AAC/B,MAAI,cACF,QAAO;AAET,UAAQ,UAAU,EAAE,KAClB,QAAQ,OAAO,EACb,SAAS,EAAE,aAAa,gCACzB,CAAC;IACH,CAAC,eAAe,EAAE,aAAa,+BAA+B,CAAC;CAClE,MAAM,EACJ,QAAQ,cACR,SACA,QACA,UACE,gBACF,iBACA,cACA,CAAC,eACF;CACD,MAAM,iBAAiB,aAAa;CAEpC,MAAM,gBAAuB,cAAc;EACzC,MAAM,aAAa,eAChB,OAAO,iBAAiB,CACxB,QAAQ,SAAS;AAChB,OAAI,WACF,QAAO,WAAW,KAAK;AAEzB,UAAO;IACP;AACJ,SAAO,EAAE,OAAO,aAAa,SAA6B;AACxD,OAAI,KAAK,SAAS,UAAU,KAAM,QAAO,KAAK;AAC9C,UAAO,KAAK;IACZ;IACD;EAAC;EAAgB;EAAkB;EAAW,CAAC;AAElD,iBAAgB;AACd,MAAI,MAAM,QAAQ,MAAM,KAAK,OAAO,MAAM,GAAG,IAAI,YAAY,MAAM,GAAG,EACpE,qBAAoB,MAAe;WAC1B,OAAO,MAAM,IAAI,YAAY,MAAM,CAC5C,qBAAoB,CAAC,MAAM,CAAC;OACvB;GACL,IAAI,QAA6C,EAAE;AACnD,OAAI,CAAC,MAAO;AACZ,OAAI,MAAM,QAAQ,MAAM,IAAI,MAAM,WAAW,GAAG;AAC9C,wBAAoB,EAAE,CAAC;AACvB;;AAEF,OAAI,CAAC,MAAM,QAAQ,MAAM,CACvB,SAAQ,CAAC,MAAM;OAEf,SAAQ;AAEV,cAAW,MAAM,CAAC,MAAM,WAAW;AACjC,wBAAoB,OAAO;KAC3B;;IAEH,CAAC,OAAO,WAAW,CAAC;CAEvB,MAAM,mBAAmB,aACtB,UAAiB;AAChB,MAAI,SACF,YAAW,MAAM;MAEjB,YAAW,MAAM,GAAG;IAGxB,CAAC,UAAU,SAAS,CACrB;AAED,QACE,oBAAC,OAAD;EACE,cAAc;EACd,wBAAwB,SAAS,cAAc,QAAQ,CAAC;EACxD,gBACE,CAAC,kBACC,oBAAC,gBAAD;GACU;GACR,SAAS,aAAa;GACtB,iBAAiB,aAAa;GACvB;GACP,CAAA;EAGA;EACN,OAAO;EACP,UAAU;EACA;EACD;EACM;EACM;EACrB,aAAa;EACb,YAAA;EACA,UAAU;EACC;EACD;EACC;EACH;EACO;EACH;EACO;EACZ,CAAA"}

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

@@ -0,0 +1,7 @@
+/** 只展示当前请求的可恢复状态，不重复弹出业务层已上报的错误。 */
+export default function SearchFeedback({ failed, hasMore, pathWarningCode, retry, }: {
+    failed?: boolean;
+    hasMore?: boolean;
+    pathWarningCode?: string | null;
+    retry: () => void;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/MemberPicker/components/SearchFeedback.js

@@ -0,0 +1,27 @@
+import { LocaleContext, getTranslator } from "../../locale/default.js";
+import TextLink from "../../TextLink/index.js";
+import { useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/MemberPicker/components/SearchFeedback.tsx
+/** 只展示当前请求的可恢复状态，不重复弹出业务层已上报的错误。 */
+function SearchFeedback({ failed, hasMore, pathWarningCode, retry }) {
+	const { locale } = useContext(LocaleContext);
+	const t = getTranslator(locale);
+	if (!failed && !hasMore && !pathWarningCode) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		children: [
+			failed && /* @__PURE__ */ jsx("span", { children: t.MemberPicker.searchFailed }),
+			!failed && pathWarningCode && /* @__PURE__ */ jsx("span", { children: t.MemberPicker.pathUnavailable }),
+			hasMore && /* @__PURE__ */ jsx("span", { children: t.MemberPicker.moreResults }),
+			(failed || pathWarningCode) && /* @__PURE__ */ jsx(TextLink, {
+				onClick: retry,
+				children: t.MemberPicker.retry
+			})
+		]
+	});
+}
+//#endregion
+export { SearchFeedback as default };
+
+//# sourceMappingURL=SearchFeedback.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchFeedback.js","names":[],"sources":["../../../src/MemberPicker/components/SearchFeedback.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport TextLink from '../../TextLink';\nimport { LocaleContext, getTranslator } from '../../locale/default';\n\n/** 只展示当前请求的可恢复状态，不重复弹出业务层已上报的错误。 */\nexport default function SearchFeedback({\n  failed,\n  hasMore,\n  pathWarningCode,\n  retry,\n}: {\n  failed?: boolean;\n  hasMore?: boolean;\n  pathWarningCode?: string | null;\n  retry: () => void;\n}) {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n  if (!failed && !hasMore && !pathWarningCode) return null;\n  return (\n    <div role=\"status\">\n      {failed && <span>{t.MemberPicker.searchFailed}</span>}\n      {!failed && pathWarningCode && (\n        <span>{t.MemberPicker.pathUnavailable}</span>\n      )}\n      {hasMore && <span>{t.MemberPicker.moreResults}</span>}\n      {(failed || pathWarningCode) && (\n        <TextLink onClick={retry}>{t.MemberPicker.retry}</TextLink>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAKA,SAAwB,eAAe,EACrC,QACA,SACA,iBACA,SAMC;CACD,MAAM,EAAE,WAAW,WAAW,cAAc;CAC5C,MAAM,IAAI,cAAc,OAAO;AAC/B,KAAI,CAAC,UAAU,CAAC,WAAW,CAAC,gBAAiB,QAAO;AACpD,QACE,qBAAC,OAAD;EAAK,MAAK;YAAV;GACG,UAAU,oBAAC,QAAD,EAAA,UAAO,EAAE,aAAa,cAAoB,CAAA;GACpD,CAAC,UAAU,mBACV,oBAAC,QAAD,EAAA,UAAO,EAAE,aAAa,iBAAuB,CAAA;GAE9C,WAAW,oBAAC,QAAD,EAAA,UAAO,EAAE,aAAa,aAAmB,CAAA;IACnD,UAAU,oBACV,oBAAC,UAAD;IAAU,SAAS;cAAQ,EAAE,aAAa;IAAiB,CAAA;GAEzD"}

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

@@ -9,6 +9,7 @@ interface IMultipleOptionProps {
     onNextLevel?: (userGroup: IUserGroup) => void;
     hasNextLevel?: boolean;
     showUserId?: boolean;
+    searchValue?: string;
 }
 export default function SingleOption(params: IMultipleOptionProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/MemberPicker/components/SingleOption.js

@@ -14,7 +14,7 @@ function SingleOption(params) {
 	const { locale } = useContext(LocaleContext);
 	const t = getTranslator(locale);
 	const { getMemberPickerItemMoreInfoKey } = AldCustomConfigProvider.useGetUserList();
-	const { disabled, user, selected, onChange, className, onNextLevel, hasNextLevel = true, showUserId } = params;
+	const { disabled, user, selected, onChange, className, onNextLevel, hasNextLevel = true, searchValue, showUserId } = params;
 	const onClick = () => {
 		if (disabled) return;
 		if (selected) onChange?.(selected, user);
@@ -40,6 +40,8 @@ function SingleOption(params) {
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "ald-member-picker-option-content",
 				children: [/* @__PURE__ */ jsx(NickLabel_default, {
+					searchValue,
+					path: isUserGroup(user) ? user.path : void 0,
 					type: user.type,
 					id: getId(user),
 					name: user.name,

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

@@ -1 +1 @@
-{"version":3,"file":"SingleOption.js","names":[],"sources":["../../../src/MemberPicker/components/SingleOption.tsx"],"sourcesContent":["import { cn } from '../../lib/utils';\nimport React, { useContext } from 'react';\nimport Badge from '../../Badge';\nimport ConfigProvider from '../../ConfigProvider';\nimport { EUserType, IUserGroup } from '../../ConfigProvider/getUserList';\nimport TextLink from '../../TextLink/index';\nimport { LocaleContext, getTranslator } from '../../locale/default';\nimport { IUser } from '../interface';\nimport { getAccount, getId, getPhoto } from '../utils';\nimport { isUser, isUserGroup } from '../utils/getUsersWithUserId';\nimport NickLabel from './NickLabel';\ninterface IMultipleOptionProps {\n  selected: boolean;\n  disabled?: boolean;\n  user: IUser | IUserGroup;\n  onChange?: (selected: boolean, user: IUser | IUserGroup) => void;\n  className?: string;\n  onNextLevel?: (userGroup: IUserGroup) => void;\n  hasNextLevel?: boolean;\n  showUserId?: boolean;\n}\nexport default function SingleOption(params: IMultipleOptionProps) {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const { getMemberPickerItemMoreInfoKey } = ConfigProvider.useGetUserList();\n\n  const {\n    disabled,\n    user,\n    selected,\n    onChange,\n    className,\n    onNextLevel,\n    hasNextLevel = true,\n    showUserId,\n  } = params;\n\n  const onClick = () => {\n    if (disabled) return;\n\n    if (selected) {\n      onChange?.(selected, user);\n    } else onChange?.(!selected, user);\n  };\n\n  return (\n    <div\n      role=\"option\"\n      id={`ald-member-picker-option-${getId(user)}`}\n      aria-selected={selected}\n      aria-disabled={disabled || undefined}\n      tabIndex={-1}\n      className={cn('ald-member-picker-option', className, {\n        ['ald-member-picker-option-disabled']: disabled,\n      })}\n      onClick={onClick}\n      onKeyDown={(event) => {\n        if (disabled) return;\n        if (event.key === 'Enter' || event.key === ' ') {\n          event.preventDefault();\n          onClick();\n        }\n      }}\n    >\n      <div className={'ald-member-picker-label'}>\n        <div className={'ald-member-picker-option-content'}>\n          <NickLabel\n            type={user.type}\n            id={getId(user)}\n            name={user.name as string}\n            photo={getPhoto(user)}\n            account={getAccount(user)}\n            addonBefore={\n              showUserId &&\n              user.type === EUserType.USER && (\n                <span className={'ald-member-picker-option-id'}>\n                  {getMemberPickerItemMoreInfoKey\n                    ? getMemberPickerItemMoreInfoKey(user)\n                    : user.userId}\n                </span>\n              )\n            }\n          ></NickLabel>\n          {/* 如果是用户的话并且user.ban为true，则展示 已停用 Tag */}\n          {isUser(user) && user.ban && (\n            <Badge\n              status=\"default\"\n              count={t.MemberPicker.ban}\n              className={'ald-member-picker-ban-badge'}\n            ></Badge>\n          )}\n        </div>\n      </div>\n      {isUserGroup(user) && hasNextLevel && (\n        <TextLink\n          className=\"ald-member-picker-btn\"\n          size=\"small\"\n          disabled={disabled}\n          onClick={(e) => {\n            onNextLevel?.(user);\n            e.stopPropagation();\n            e.preventDefault();\n          }}\n        >\n          {t.MemberPicker.subLevel}\n        </TextLink>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAqBA,SAAwB,aAAa,QAA8B;CACjE,MAAM,EAAE,WAAW,WAAW,cAAc;CAC5C,MAAM,IAAI,cAAc,OAAO;CAE/B,MAAM,EAAE,mCAAmC,wBAAe,gBAAgB;CAE1E,MAAM,EACJ,UACA,MACA,UACA,UACA,WACA,aACA,eAAe,MACf,eACE;CAEJ,MAAM,gBAAgB;AACpB,MAAI,SAAU;AAEd,MAAI,SACF,YAAW,UAAU,KAAK;MACrB,YAAW,CAAC,UAAU,KAAK;;AAGpC,QACE,qBAAC,OAAD;EACE,MAAK;EACL,IAAI,4BAA4B,MAAM,KAAK;EAC3C,iBAAe;EACf,iBAAe,YAAY;EAC3B,UAAU;EACV,WAAW,GAAG,4BAA4B,WAAW,GAClD,sCAAsC,UACxC,CAAC;EACO;EACT,YAAY,UAAU;AACpB,OAAI,SAAU;AACd,OAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,UAAM,gBAAgB;AACtB,aAAS;;;YAdf,CAkBE,oBAAC,OAAD;GAAK,WAAW;aACd,qBAAC,OAAD;IAAK,WAAW;cAAhB,CACE,oBAAC,mBAAD;KACE,MAAM,KAAK;KACX,IAAI,MAAM,KAAK;KACf,MAAM,KAAK;KACX,OAAO,SAAS,KAAK;KACrB,SAAS,WAAW,KAAK;KACzB,aACE,cACA,KAAK,SAAS,UAAU,QACtB,oBAAC,QAAD;MAAM,WAAW;gBACd,iCACG,+BAA+B,KAAK,GACpC,KAAK;MACJ,CAAA;KAGA,CAAA,EAEZ,OAAO,KAAK,IAAI,KAAK,OACpB,oBAAC,OAAD;KACE,QAAO;KACP,OAAO,EAAE,aAAa;KACtB,WAAW;KACJ,CAAA,CAEP;;GACF,CAAA,EACL,YAAY,KAAK,IAAI,gBACpB,oBAAC,UAAD;GACE,WAAU;GACV,MAAK;GACK;GACV,UAAU,MAAM;AACd,kBAAc,KAAK;AACnB,MAAE,iBAAiB;AACnB,MAAE,gBAAgB;;aAGnB,EAAE,aAAa;GACP,CAAA,CAET"}
+{"version":3,"file":"SingleOption.js","names":[],"sources":["../../../src/MemberPicker/components/SingleOption.tsx"],"sourcesContent":["import { cn } from '../../lib/utils';\nimport React, { useContext } from 'react';\nimport Badge from '../../Badge';\nimport ConfigProvider from '../../ConfigProvider';\nimport { EUserType, IUserGroup } from '../../ConfigProvider/getUserList';\nimport TextLink from '../../TextLink/index';\nimport { LocaleContext, getTranslator } from '../../locale/default';\nimport { IUser } from '../interface';\nimport { getAccount, getId, getPhoto } from '../utils';\nimport { isUser, isUserGroup } from '../utils/getUsersWithUserId';\nimport NickLabel from './NickLabel';\ninterface IMultipleOptionProps {\n  selected: boolean;\n  disabled?: boolean;\n  user: IUser | IUserGroup;\n  onChange?: (selected: boolean, user: IUser | IUserGroup) => void;\n  className?: string;\n  onNextLevel?: (userGroup: IUserGroup) => void;\n  hasNextLevel?: boolean;\n  showUserId?: boolean;\n  searchValue?: string;\n}\nexport default function SingleOption(params: IMultipleOptionProps) {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const { getMemberPickerItemMoreInfoKey } = ConfigProvider.useGetUserList();\n\n  const {\n    disabled,\n    user,\n    selected,\n    onChange,\n    className,\n    onNextLevel,\n    hasNextLevel = true,\n    searchValue,\n    showUserId,\n  } = params;\n\n  const onClick = () => {\n    if (disabled) return;\n\n    if (selected) {\n      onChange?.(selected, user);\n    } else onChange?.(!selected, user);\n  };\n\n  return (\n    <div\n      role=\"option\"\n      id={`ald-member-picker-option-${getId(user)}`}\n      aria-selected={selected}\n      aria-disabled={disabled || undefined}\n      tabIndex={-1}\n      className={cn('ald-member-picker-option', className, {\n        ['ald-member-picker-option-disabled']: disabled,\n      })}\n      onClick={onClick}\n      onKeyDown={(event) => {\n        if (disabled) return;\n        if (event.key === 'Enter' || event.key === ' ') {\n          event.preventDefault();\n          onClick();\n        }\n      }}\n    >\n      <div className={'ald-member-picker-label'}>\n        <div className={'ald-member-picker-option-content'}>\n          <NickLabel\n            searchValue={searchValue}\n            path={isUserGroup(user) ? user.path : undefined}\n            type={user.type}\n            id={getId(user)}\n            name={user.name as string}\n            photo={getPhoto(user)}\n            account={getAccount(user)}\n            addonBefore={\n              showUserId &&\n              user.type === EUserType.USER && (\n                <span className={'ald-member-picker-option-id'}>\n                  {getMemberPickerItemMoreInfoKey\n                    ? getMemberPickerItemMoreInfoKey(user)\n                    : user.userId}\n                </span>\n              )\n            }\n          ></NickLabel>\n          {/* 如果是用户的话并且user.ban为true，则展示 已停用 Tag */}\n          {isUser(user) && user.ban && (\n            <Badge\n              status=\"default\"\n              count={t.MemberPicker.ban}\n              className={'ald-member-picker-ban-badge'}\n            ></Badge>\n          )}\n        </div>\n      </div>\n      {isUserGroup(user) && hasNextLevel && (\n        <TextLink\n          className=\"ald-member-picker-btn\"\n          size=\"small\"\n          disabled={disabled}\n          onClick={(e) => {\n            onNextLevel?.(user);\n            e.stopPropagation();\n            e.preventDefault();\n          }}\n        >\n          {t.MemberPicker.subLevel}\n        </TextLink>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAsBA,SAAwB,aAAa,QAA8B;CACjE,MAAM,EAAE,WAAW,WAAW,cAAc;CAC5C,MAAM,IAAI,cAAc,OAAO;CAE/B,MAAM,EAAE,mCAAmC,wBAAe,gBAAgB;CAE1E,MAAM,EACJ,UACA,MACA,UACA,UACA,WACA,aACA,eAAe,MACf,aACA,eACE;CAEJ,MAAM,gBAAgB;AACpB,MAAI,SAAU;AAEd,MAAI,SACF,YAAW,UAAU,KAAK;MACrB,YAAW,CAAC,UAAU,KAAK;;AAGpC,QACE,qBAAC,OAAD;EACE,MAAK;EACL,IAAI,4BAA4B,MAAM,KAAK;EAC3C,iBAAe;EACf,iBAAe,YAAY;EAC3B,UAAU;EACV,WAAW,GAAG,4BAA4B,WAAW,GAClD,sCAAsC,UACxC,CAAC;EACO;EACT,YAAY,UAAU;AACpB,OAAI,SAAU;AACd,OAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,UAAM,gBAAgB;AACtB,aAAS;;;YAdf,CAkBE,oBAAC,OAAD;GAAK,WAAW;aACd,qBAAC,OAAD;IAAK,WAAW;cAAhB,CACE,oBAAC,mBAAD;KACe;KACb,MAAM,YAAY,KAAK,GAAG,KAAK,OAAO;KACtC,MAAM,KAAK;KACX,IAAI,MAAM,KAAK;KACf,MAAM,KAAK;KACX,OAAO,SAAS,KAAK;KACrB,SAAS,WAAW,KAAK;KACzB,aACE,cACA,KAAK,SAAS,UAAU,QACtB,oBAAC,QAAD;MAAM,WAAW;gBACd,iCACG,+BAA+B,KAAK,GACpC,KAAK;MACJ,CAAA;KAGA,CAAA,EAEZ,OAAO,KAAK,IAAI,KAAK,OACpB,oBAAC,OAAD;KACE,QAAO;KACP,OAAO,EAAE,aAAa;KACtB,WAAW;KACJ,CAAA,CAEP;;GACF,CAAA,EACL,YAAY,KAAK,IAAI,gBACpB,oBAAC,UAAD;GACE,WAAU;GACV,MAAK;GACK;GACV,UAAU,MAAM;AACd,kBAAc,KAAK;AACnB,MAAE,iBAAiB;AACnB,MAAE,gBAAgB;;aAGnB,EAAE,aAAa;GACP,CAAA,CAET"}

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

@@ -1,6 +1,10 @@
+import { IBaseMemberSelectorProps } from '../interface';
 import { default as React } from 'react';
 import { IUserGroup, TUserGroupValue, TUserValue } from '../../ConfigProvider/getUserList';
 interface IProps {
+    active?: boolean;
+    useProvidedSearch?: boolean;
+    parentSearchFailed?: boolean;
     className?: string;
     userGroupList: IUserGroup[];
     multiple?: boolean;
@@ -13,6 +17,7 @@ interface IProps {
     filterItem?: (item: IUserGroup) => boolean;
     searchValue?: string;
     showSearch?: boolean;
+    canEnterGroup?: IBaseMemberSelectorProps['canEnterGroup'];
     renderItem?: (item: IUserGroup, context: {
         isSelected: boolean;
         disabled: boolean;
@@ -21,5 +26,5 @@ interface IProps {
         originNode: React.ReactNode;
     }) => React.ReactNode;
 }
-declare const UserGroupSelection: ({ className, userGroupList, multiple, onChange, selectedUsersGroup: selectedUsersGroups, loading, onSearchValueChange, width, lockedIds, filterItem, searchValue, showSearch, renderItem, }: IProps) => import("react/jsx-runtime").JSX.Element;
+declare const UserGroupSelection: ({ active, useProvidedSearch, parentSearchFailed, className, userGroupList, multiple, onChange, selectedUsersGroup: selectedUsersGroups, loading, onSearchValueChange, width, lockedIds, filterItem, searchValue, showSearch, canEnterGroup, renderItem, }: IProps) => import("react/jsx-runtime").JSX.Element;
 export default UserGroupSelection;

package/dist/MemberPicker/components/UserGroupSelection.js

@@ -8,42 +8,40 @@ import Empty from "../../Empty/index.js";
 import ScrollArea_default from "../../ScrollArea/index.js";
 import GetUserListContext from "../../ConfigProvider/getUserList.js";
 import CustomSpin from "../../Spin/index.js";
+import SearchFeedback from "./SearchFeedback.js";
+import useMemberSearch from "../useMemberSearch.js";
 import { isUserGroup } from "../utils/getUsersWithUserId.js";
 import MultipleList from "./MultipleOption.js";
 import SingleOption from "./SingleOption.js";
-import { useContext, useEffect, useMemo, useState } from "react";
+import { useCallback, useContext, 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, onSearchValueChange, width, lockedIds, filterItem, searchValue = "", showSearch, renderItem }) => {
+var UserGroupSelection = ({ active = true, useProvidedSearch = false, parentSearchFailed = false, className, userGroupList, multiple, onChange, selectedUsersGroup: selectedUsersGroups, loading, onSearchValueChange, width, lockedIds, filterItem, searchValue = "", showSearch, canEnterGroup, renderItem }) => {
 	const { locale } = useContext(LocaleContext);
 	const t = getTranslator(locale);
-	const { getNextLevelGroup } = useContext(GetUserListContext);
-	const isAsync = !!getNextLevelGroup;
+	const { getNextLevelGroup, getNextLevelGroupWithMeta } = useContext(GetUserListContext);
+	const isAsync = !!(getNextLevelGroup || getNextLevelGroupWithMeta);
 	const [groupPath, setGroupPath] = useState([]);
-	const [asyncUserGroupList, setAsyncUserGroupList] = useState([]);
 	const parentGroupId = _.last(groupPath)?.groupId;
-	useEffect(() => {
-		if (!getNextLevelGroup) return;
-		let ignore = false;
-		getNextLevelGroup({
+	const { result, loading: groupLoading, failed, retry } = useMemberSearch(useCallback((keyword) => {
+		const params = {
 			parentGroupId,
-			keyword: searchValue
-		}).then((userGroups) => {
-			if (!ignore) setAsyncUserGroupList(userGroups);
-		});
-		return () => {
-			ignore = true;
+			keyword
 		};
+		if (getNextLevelGroupWithMeta) return getNextLevelGroupWithMeta(params);
+		return getNextLevelGroup ? getNextLevelGroup(params) : Promise.resolve([]);
 	}, [
 		getNextLevelGroup,
-		parentGroupId,
-		searchValue
-	]);
+		getNextLevelGroupWithMeta,
+		parentGroupId
+	]), searchValue, isAsync && active && !useProvidedSearch);
+	const asyncUserGroupList = result.items;
 	const filterUserList = useMemo(() => {
 		let currentLevelGroups = asyncUserGroupList;
-		if (!isAsync) {
+		if (!isAsync || useProvidedSearch) {
 			currentLevelGroups = userGroupList.filter((userGroup) => {
+				if (searchValue.trim()) return true;
 				if (groupPath.length === 0) return !userGroup.parentId;
 				return userGroup.parentId === parentGroupId;
 			});
@@ -62,6 +60,7 @@ var UserGroupSelection = ({ className, userGroupList, multiple, onChange, select
 		filterItem,
 		groupPath.length,
 		isAsync,
+		useProvidedSearch,
 		parentGroupId,
 		searchValue,
 		userGroupList
@@ -77,7 +76,7 @@ var UserGroupSelection = ({ className, userGroupList, multiple, onChange, select
 				value: searchValue,
 				onChange: (event) => onSearchValueChange?.(event.target.value)
 			}),
-			userGroupList.length === 0 && !loading && /* @__PURE__ */ jsx(Empty, {
+			filterUserList.length === 0 && !loading && !(useProvidedSearch ? parentSearchFailed : groupLoading || failed) && /* @__PURE__ */ jsx(Empty, {
 				title: t.MemberPicker.noData,
 				size: "small",
 				image: Empty.PRESENTED_IMAGE_SEARCH,
@@ -111,13 +110,19 @@ var UserGroupSelection = ({ className, userGroupList, multiple, onChange, select
 					}, group.groupId))]
 				})
 			}),
+			isAsync && !useProvidedSearch && /* @__PURE__ */ jsx(SearchFeedback, {
+				failed,
+				hasMore: result.hasMore,
+				pathWarningCode: result.pathWarningCode,
+				retry
+			}),
 			/* @__PURE__ */ jsx(CustomSpin, {
 				tip: "Loading",
-				spinning: loading,
+				spinning: loading || !useProvidedSearch && groupLoading,
 				size: "small",
 				className: "ald-member-picker-user-list",
 				children: /* @__PURE__ */ jsx(ScrollArea_default, {
-					className: cn("ald-member-picker-member-list", { "ald-member-picker-member-list-null": userGroupList.length === 0 && !loading }),
+					className: cn("ald-member-picker-member-list", { "ald-member-picker-member-list-null": filterUserList.length === 0 && !loading && !groupLoading }),
 					innerClassName: "ald-member-picker-member-scroll",
 					children: /* @__PURE__ */ jsx("div", {
 						role: "listbox",
@@ -134,12 +139,13 @@ var UserGroupSelection = ({ className, userGroupList, multiple, onChange, select
 								groupId: userGroup.groupId,
 								type: userGroup.type
 							}) !== -1;
-							const hasNextLevel = userGroupList.some((group) => group.parentId === userGroup.groupId) || isAsync;
+							const hasNextLevel = (userGroupList.some((group) => group.parentId === userGroup.groupId) || isAsync) && canEnterGroup?.(userGroup) !== false;
 							const onNextLevel = () => {
 								setGroupPath((prev) => [...prev, userGroup]);
 								onSearchValueChange?.("");
 							};
 							const originNode = multiple ? /* @__PURE__ */ jsx(MultipleList, {
+								searchValue,
 								user: userGroup,
 								disabled,
 								selected: isSelected,
@@ -149,6 +155,7 @@ var UserGroupSelection = ({ className, userGroupList, multiple, onChange, select
 								hasNextLevel,
 								onNextLevel
 							}, userGroup.groupId) : /* @__PURE__ */ jsx(SingleOption, {
+								searchValue,
 								user: userGroup,
 								disabled,
 								selected: isSelected,