@aloudata/aloudata-design 3.1.0 → 3.1.1

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

@@ -1 +1 @@
-{"version":3,"file":"SelectedMemberTags.js","names":[],"sources":["../../../src/MemberPicker/components/SelectedMemberTags.tsx"],"sourcesContent":["import { cn } from '../../lib/utils';\nimport _ from 'lodash';\nimport React, { ReactNode, useContext } from 'react';\nimport Badge from '../../Badge';\nimport ConfigProvider from '../../ConfigProvider';\nimport {\n  IUserGroup,\n  TUser,\n  TUserGroupValue,\n  TUserValue,\n} from '../../ConfigProvider/getUserList';\nimport { CloseMLine } from '../../Icon';\nimport ScrollArea from '../../ScrollArea';\nimport { LocaleContext, getTranslator } from '../../locale/default';\nimport { IUser } from '../interface';\nimport { getAccount, getId, getPhoto } from '../utils';\nimport { isUser } from '../utils/getUsersWithUserId';\nimport NickLabel from './NickLabel';\ninterface ISelectedMemberTagsProps {\n  className?: string;\n  selectedUsers: TUser;\n  onRemove?: (user: IUser | IUserGroup) => void;\n  width: number;\n  lockedIds: Array<TUserValue | TUserGroupValue>;\n  userList: TUser;\n  renderSelectedTag?: (\n    user: IUser | IUserGroup,\n    originNode: ReactNode,\n  ) => ReactNode;\n}\n\nexport default function SelectedMemberTags(props: ISelectedMemberTagsProps) {\n  const {\n    className,\n    selectedUsers,\n    width,\n    lockedIds = [],\n    renderSelectedTag,\n  } = props;\n\n  const { getMemberPickerItemMoreInfoKey } = ConfigProvider.useGetUserList();\n\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  return (\n    <div\n      className={cn(className, 'ald-member-picker-selected-member-tags-wrap')}\n    >\n      <div className={'ald-member-picker-has-selected'}>\n        {t.MemberPicker.selectedTotal(selectedUsers.length)}\n      </div>\n      <ScrollArea className={'ald-member-selected-member-wrapper'}>\n        <div className={'ald-member-picker-tags'} style={{ width: width - 17 }}>\n          {selectedUsers.map((user) => {\n            let hasLocked = false;\n\n            if (user && Object.prototype.hasOwnProperty.call(user, 'groupId')) {\n              const index = _.findIndex(lockedIds, {\n                groupId: (user as TUserGroupValue).groupId,\n                type: (user as TUserGroupValue).type,\n              });\n              hasLocked = index !== -1;\n            } else {\n              const index = _.findIndex(lockedIds, {\n                userId: (user as TUserValue).userId,\n                type: (user as TUserValue).type,\n              });\n\n              hasLocked = index !== -1;\n            }\n\n            const originNode = (\n              <div\n                className={'ald-member-picker-selected-member-tag'}\n                key={getId(user)}\n              >\n                <div className={'ald-member-picker-selected-member-tag-user'}>\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                      user.type === 'USER' && (\n                        <span className=\"ald-member-picker-option-id\">\n                          {getMemberPickerItemMoreInfoKey\n                            ? getMemberPickerItemMoreInfoKey(user)\n                            : user.userId}\n                        </span>\n                      )\n                    }\n                  ></NickLabel>\n                </div>\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                {!hasLocked && (\n                  <CloseMLine\n                    size={20}\n                    className={'ald-member-picker-close'}\n                    color=\"var(--content-tertiary)\"\n                    onClick={() => {\n                      props.onRemove?.(user);\n                    }}\n                  />\n                )}\n              </div>\n            );\n\n            if (renderSelectedTag) {\n              return renderSelectedTag(user, originNode);\n            }\n\n            return originNode;\n          })}\n        </div>\n      </ScrollArea>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AA+BA,SAAwB,mBAAmB,OAAiC;CAC1E,MAAM,EACJ,WACA,eACA,OACA,YAAY,EAAE,EACd,sBACE;CAEJ,MAAM,EAAE,mCAAmC,wBAAe,gBAAgB;CAE1E,MAAM,EAAE,WAAW,WAAW,cAAc;CAC5C,MAAM,IAAI,cAAc,OAAO;AAE/B,QACE,qBAAC,OAAD;EACE,WAAW,GAAG,WAAW,8CAA8C;YADzE,CAGE,oBAAC,OAAD;GAAK,WAAW;aACb,EAAE,aAAa,cAAc,cAAc,OAAO;GAC/C,CAAA,EACN,oBAAC,oBAAD;GAAY,WAAW;aACrB,oBAAC,OAAD;IAAK,WAAW;IAA0B,OAAO,EAAE,OAAO,QAAQ,IAAI;cACnE,cAAc,KAAK,SAAS;KAC3B,IAAI,YAAY;AAEhB,SAAI,QAAQ,OAAO,UAAU,eAAe,KAAK,MAAM,UAAU,CAK/D,aAJc,EAAE,UAAU,WAAW;MACnC,SAAU,KAAyB;MACnC,MAAO,KAAyB;MACjC,CAAC,KACoB;SAOtB,aALc,EAAE,UAAU,WAAW;MACnC,QAAS,KAAoB;MAC7B,MAAO,KAAoB;MAC5B,CAAC,KAEoB;KAGxB,MAAM,aACJ,qBAAC,OAAD;MACE,WAAW;gBADb;OAIE,oBAAC,OAAD;QAAK,WAAW;kBACd,oBAAC,mBAAD;SACE,MAAM,KAAK;SACX,IAAI,MAAM,KAAK;SACf,MAAM,KAAK;SACX,OAAO,SAAS,KAAK;SACrB,SAAS,WAAW,KAAK;SACzB,aACE,KAAK,SAAS,UACZ,oBAAC,QAAD;UAAM,WAAU;oBACb,iCACG,+BAA+B,KAAK,GACpC,KAAK;UACJ,CAAA;SAGA,CAAA;QACT,CAAA;OAEL,OAAO,KAAK,IAAI,KAAK,OACpB,oBAAC,OAAD;QACE,QAAO;QACP,OAAO,EAAE,aAAa;QACtB,WAAW;QACJ,CAAA;OAEV,CAAC,aACA,oBAAC,MAAD;QACE,MAAM;QACN,WAAW;QACX,OAAM;QACN,eAAe;AACb,eAAM,WAAW,KAAK;;QAExB,CAAA;OAEA;QAtCC,MAAM,KAAK,CAsCZ;AAGR,SAAI,kBACF,QAAO,kBAAkB,MAAM,WAAW;AAG5C,YAAO;MACP;IACE,CAAA;GACK,CAAA,CACT"}
+{"version":3,"file":"SelectedMemberTags.js","names":[],"sources":["../../../src/MemberPicker/components/SelectedMemberTags.tsx"],"sourcesContent":["import { cn } from '../../lib/utils';\nimport _ from 'lodash';\nimport React, { ReactNode, useContext } from 'react';\nimport Badge from '../../Badge';\nimport ConfigProvider from '../../ConfigProvider';\nimport {\n  IUserGroup,\n  TUser,\n  TUserGroupValue,\n  TUserValue,\n} from '../../ConfigProvider/getUserList';\nimport { CloseMLine } from '../../Icon';\nimport ScrollArea from '../../ScrollArea';\nimport { LocaleContext, getTranslator } from '../../locale/default';\nimport { IUser } from '../interface';\nimport { getAccount, getId, getPhoto } from '../utils';\nimport { isUser } from '../utils/getUsersWithUserId';\nimport NickLabel from './NickLabel';\ninterface ISelectedMemberTagsProps {\n  className?: string;\n  selectedUsers: TUser;\n  onRemove?: (user: IUser | IUserGroup) => void;\n  width: number;\n  lockedIds: Array<TUserValue | TUserGroupValue>;\n  userList: TUser;\n  renderSelectedTag?: (\n    user: IUser | IUserGroup,\n    originNode: ReactNode,\n  ) => ReactNode;\n}\n\nexport default function SelectedMemberTags(props: ISelectedMemberTagsProps) {\n  const {\n    className,\n    selectedUsers,\n    width,\n    lockedIds = [],\n    renderSelectedTag,\n  } = props;\n\n  const { getMemberPickerItemMoreInfoKey } = ConfigProvider.useGetUserList();\n\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  return (\n    <div\n      className={cn(className, 'ald-member-picker-selected-member-tags-wrap')}\n    >\n      <div className={'ald-member-picker-has-selected'}>\n        {t.MemberPicker.selectedTotal(selectedUsers.length)}\n      </div>\n      <ScrollArea className={'ald-member-selected-member-wrapper'}>\n        <div className={'ald-member-picker-tags'} style={{ width: width - 17 }}>\n          {selectedUsers.map((user) => {\n            let hasLocked = false;\n\n            if (user && Object.prototype.hasOwnProperty.call(user, 'groupId')) {\n              const index = _.findIndex(lockedIds, {\n                groupId: (user as TUserGroupValue).groupId,\n                type: (user as TUserGroupValue).type,\n              });\n              hasLocked = index !== -1;\n            } else {\n              const index = _.findIndex(lockedIds, {\n                userId: (user as TUserValue).userId,\n                type: (user as TUserValue).type,\n              });\n\n              hasLocked = index !== -1;\n            }\n\n            const originNode = (\n              <div\n                className={'ald-member-picker-selected-member-tag'}\n                key={getId(user)}\n              >\n                <div className={'ald-member-picker-selected-member-tag-user'}>\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                      user.type === 'USER' && (\n                        <span className=\"ald-member-picker-option-id\">\n                          {getMemberPickerItemMoreInfoKey\n                            ? getMemberPickerItemMoreInfoKey(user)\n                            : user.userId}\n                        </span>\n                      )\n                    }\n                  ></NickLabel>\n                </div>\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                {!hasLocked && (\n                  <button\n                    type=\"button\"\n                    aria-label={`Remove ${user.name as string}`}\n                    className={'ald-member-picker-close'}\n                    style={{ border: 0, background: 'transparent', padding: 0 }}\n                    onClick={() => props.onRemove?.(user)}\n                  >\n                    <CloseMLine\n                      size={20}\n                      color=\"var(--content-tertiary)\"\n                      aria-hidden=\"true\"\n                    />\n                  </button>\n                )}\n              </div>\n            );\n\n            if (renderSelectedTag) {\n              return renderSelectedTag(user, originNode);\n            }\n\n            return originNode;\n          })}\n        </div>\n      </ScrollArea>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AA+BA,SAAwB,mBAAmB,OAAiC;CAC1E,MAAM,EACJ,WACA,eACA,OACA,YAAY,EAAE,EACd,sBACE;CAEJ,MAAM,EAAE,mCAAmC,wBAAe,gBAAgB;CAE1E,MAAM,EAAE,WAAW,WAAW,cAAc;CAC5C,MAAM,IAAI,cAAc,OAAO;AAE/B,QACE,qBAAC,OAAD;EACE,WAAW,GAAG,WAAW,8CAA8C;YADzE,CAGE,oBAAC,OAAD;GAAK,WAAW;aACb,EAAE,aAAa,cAAc,cAAc,OAAO;GAC/C,CAAA,EACN,oBAAC,oBAAD;GAAY,WAAW;aACrB,oBAAC,OAAD;IAAK,WAAW;IAA0B,OAAO,EAAE,OAAO,QAAQ,IAAI;cACnE,cAAc,KAAK,SAAS;KAC3B,IAAI,YAAY;AAEhB,SAAI,QAAQ,OAAO,UAAU,eAAe,KAAK,MAAM,UAAU,CAK/D,aAJc,EAAE,UAAU,WAAW;MACnC,SAAU,KAAyB;MACnC,MAAO,KAAyB;MACjC,CAAC,KACoB;SAOtB,aALc,EAAE,UAAU,WAAW;MACnC,QAAS,KAAoB;MAC7B,MAAO,KAAoB;MAC5B,CAAC,KAEoB;KAGxB,MAAM,aACJ,qBAAC,OAAD;MACE,WAAW;gBADb;OAIE,oBAAC,OAAD;QAAK,WAAW;kBACd,oBAAC,mBAAD;SACE,MAAM,KAAK;SACX,IAAI,MAAM,KAAK;SACf,MAAM,KAAK;SACX,OAAO,SAAS,KAAK;SACrB,SAAS,WAAW,KAAK;SACzB,aACE,KAAK,SAAS,UACZ,oBAAC,QAAD;UAAM,WAAU;oBACb,iCACG,+BAA+B,KAAK,GACpC,KAAK;UACJ,CAAA;SAGA,CAAA;QACT,CAAA;OAEL,OAAO,KAAK,IAAI,KAAK,OACpB,oBAAC,OAAD;QACE,QAAO;QACP,OAAO,EAAE,aAAa;QACtB,WAAW;QACJ,CAAA;OAEV,CAAC,aACA,oBAAC,UAAD;QACE,MAAK;QACL,cAAY,UAAU,KAAK;QAC3B,WAAW;QACX,OAAO;SAAE,QAAQ;SAAG,YAAY;SAAe,SAAS;SAAG;QAC3D,eAAe,MAAM,WAAW,KAAK;kBAErC,oBAAC,MAAD;SACE,MAAM;SACN,OAAM;SACN,eAAY;SACZ,CAAA;QACK,CAAA;OAEP;QA3CC,MAAM,KAAK,CA2CZ;AAGR,SAAI,kBACF,QAAO,kBAAkB,MAAM,WAAW;AAG5C,YAAO;MACP;IACE,CAAA;GACK,CAAA,CACT"}

package/dist/MemberPicker/components/SingleOption.js

@@ -21,8 +21,20 @@ function SingleOption(params) {
 		else onChange?.(!selected, user);
 	};
 	return /* @__PURE__ */ jsxs("div", {
+		role: "option",
+		id: `ald-member-picker-option-${getId(user)}`,
+		"aria-selected": selected,
+		"aria-disabled": disabled || void 0,
+		tabIndex: -1,
 		className: cn("ald-member-picker-option", className, { ["ald-member-picker-option-disabled"]: disabled }),
 		onClick,
+		onKeyDown: (event) => {
+			if (disabled) return;
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				onClick();
+			}
+		},
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "ald-member-picker-label",
 			children: /* @__PURE__ */ jsxs("div", {

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      className={cn('ald-member-picker-option', className, {\n        ['ald-member-picker-option-disabled']: disabled,\n      })}\n      onClick={onClick}\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,WAAW,GAAG,4BAA4B,WAAW,GAClD,sCAAsC,UACxC,CAAC;EACO;YAJX,CAME,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}\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"}

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

@@ -11,6 +11,7 @@ interface IProps {
     width: number;
     lockedIds: Array<TUserValue | TUserGroupValue>;
     filterItem?: (item: IUserGroup) => boolean;
+    searchValue?: string;
     renderItem?: (item: IUserGroup, context: {
         isSelected: boolean;
         disabled: boolean;
@@ -19,5 +20,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, renderItem, }: IProps) => import("react/jsx-runtime").JSX.Element;
 export default UserGroupSelection;

package/dist/MemberPicker/components/UserGroupSelection.js

@@ -1,9 +1,7 @@
 import { cn } from "../../lib/utils.js";
 import Memo from "../../Icon/components/ChevronLeftLine.js";
-import Memo$1 from "../../Icon/components/SearchLine.js";
 import Breadcrumb from "../../Breadcrumb/index.js";
 import { LocaleContext, getTranslator } from "../../locale/default.js";
-import Input from "../../Input/index.js";
 import Empty from "../../Empty/index.js";
 import ScrollArea_default from "../../ScrollArea/index.js";
 import GetUserListContext from "../../ConfigProvider/getUserList.js";
@@ -11,58 +9,64 @@ 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 = "", 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, {
-				prefix: /* @__PURE__ */ jsx(Memo$1, { size: 16 }),
-				className: "ald-member-picker-search-input",
-				autoFocus: true,
-				value: searchKey,
-				onChange: (e) => {
-					setSearchKey(e.target.value);
-				}
-			}),
 			userGroupList.length === 0 && !loading && /* @__PURE__ */ jsx(Empty, {
 				title: t.MemberPicker.noData,
 				size: "small",
@@ -106,6 +110,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 +127,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 +148,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 } from '../../Icon';\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  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  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      {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":";;;;;;;;;;;;;;;AA0CA,IAAM,sBAAsB,EAC1B,WACA,eACA,UACA,UACA,oBAAoB,qBACpB,SACA,qBACA,OACA,WACA,YACA,cAAc,IACd,iBACY;CACZ,MAAM,EAAE,WAAW,WAAW,cAAc;CAC5C,MAAM,IAAI,cAAc,OAAO;CAE/B,MAAM,EAAE,sBAAsB,WAAW,mBAAmB;CAE5D,MAAM,UAAU,CAAC,CAAC;CAElB,MAAM,CAAC,WAAW,gBAAgB,SAAuB,EAAE,CAAC;CAC5D,MAAM,CAAC,oBAAoB,yBAAyB,SAClD,EAAE,CACH;CACD,MAAM,gBAAgB,EAAE,KAAK,UAAU,EAAE;AAEzC,iBAAgB;AACd,MAAI,CAAC,kBACH;EAGF,IAAI,SAAS;AACb,oBAAkB;GAChB;GACA,SAAS;GACV,CAAC,CAAC,MAAM,eAAe;AACtB,OAAI,CAAC,OACH,uBAAsB,WAAW;IAEnC;AAEF,eAAa;AACX,YAAS;;IAEV;EAAC;EAAmB;EAAe;EAAY,CAAC;CAEnD,MAAM,iBAAiB,cAAc;EACnC,IAAI,qBAAqB;AAEzB,MAAI,CAAC,SAAS;AACZ,wBAAqB,cAAc,QAAQ,cAAc;AACvD,QAAI,UAAU,WAAW,EACvB,QAAO,CAAC,UAAU;AAGpB,WAAO,UAAU,aAAa;KAC9B;GAEF,MAAM,oBAAoB,YAAY,MAAM,CAAC,aAAa;AAC1D,wBAAqB,mBAAmB,QAAQ,UAAU;AACxD,QAAI,CAAC,kBACH,QAAO;AAGT,WAAO,MAAM,KAAK,aAAa,CAAC,SAAS,kBAAkB;KAC3D;;AAGJ,SAAO,mBAAmB,QAAQ,cAAc;AAC9C,OAAI,WACF,QAAO,WAAW,UAAU;AAG9B,UAAO;IACP;IACD;EACD;EACA;EACA,UAAU;EACV;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,WAAW,qCAAqC;YAAnE;GACG,cAAc,WAAW,KAAK,CAAC,WAC9B,oBAAC,OAAD;IACE,OAAO,EAAE,aAAa;IACtB,MAAK;IACL,OAAO,MAAM;IACb,WAAU;IACV,CAAA;GAEH,UAAU,WAAW,KACpB,oBAAC,oBAAD;IAAY,WAAU;cACpB,qBAAC,YAAD;KAAY,WAAU;eAAtB,CACE,oBAAC,WAAW,MAAZ;MACE,WAAU;MACV,eAAe;AACb,oBAAa,EAAE,CAAC;;gBAGlB,qBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,oBAAC,MAAD,EAAiB,MAAM,IAAM,CAAA,EAC5B,EAAE,aAAa,WACZ;;MACU,CAAA,EACjB,UAAU,KAAK,UACd,oBAAC,WAAW,MAAZ;MACE,WAAU;MAEV,eAAe;AACb,qBAAc,WAAW;QACvB,MAAM,aAAa,OAAO,WACvB,cAAc,UAAU,YAAY,MAAM,QAC5C;AACD,eAAO,OAAO,QACX,WAAW,UAAU,SAAS,WAChC;SACD;;gBAGJ,oBAAC,OAAD;OAAK,WAAU;iBACZ,MAAM;OACH,CAAA;MACU,EAfX,MAAM,QAeK,CAClB,CACS;;IACF,CAAA;GAEf,oBAAC,YAAD;IACE,KAAI;IACJ,UAAU;IACV,MAAK;IACL,WAAU;cAEV,oBAAC,oBAAD;KACE,WAAW,GAAG,iCAAiC,EAC7C,sCACE,cAAc,WAAW,KAAK,CAAC,SAClC,CAAC;KACF,gBAAe;eAEf,oBAAC,OAAD;MACE,MAAK;MACL,cAAW;MACX,wBAAsB,YAAY;MAClC,WAAU;MACV,OAAO;OAAE,OAAO,WAAW,QAAQ;OAAW,UAAU;OAAU;gBAEjE,eAAe,KAAK,cAAc;OACjC,MAAM,aAAa,oBAAoB,MACpC,oBACC,gBAAgB,YAAY,UAAU,QACzC;OAMD,MAAM,WAJQ,EAAE,UAAU,WAAW;QACnC,SAAS,UAAU;QACnB,MAAM,UAAU;QACjB,CAAC,KACyB;OAE3B,MAAM,eACJ,cAAc,MACX,UAAU,MAAM,aAAa,UAAU,QACzC,IAAI;OACP,MAAM,oBAAoB;AACxB,sBAAc,SAAS,CAAC,GAAG,MAAM,UAAU,CAAC;AAC5C,8BAAsB,GAAG;;OAG3B,MAAM,aAAa,WACjB,oBAAC,cAAD;QAEE,MAAM;QACI;QACV,UAAU;QACV,WAAW,UAAU,cAAc;AACjC,aAAI,YAAY,UAAU,CACxB,UAAS,UAAU,UAAU;;QAGnB;QACD;QACG,EAXX,UAAU,QAWC,GAElB,oBAAC,cAAD;QAEE,MAAM;QACI;QACV,UAAU;QACV,WAAW,UAAU,cAAc;AACjC,aAAI,YAAY,UAAU,CACxB,UAAS,UAAU,UAAU;;QAGnB;QACD;QACC,EAXT,UAAU,QAWD;AAGlB,WAAI,WACF,QACE,oBAAC,OAAD;QAEE,MAAK;QACL,IAAI,4BAA4B,UAAU;QAC1C,iBAAe;QACf,iBAAe,YAAY;kBAE1B,WAAW,WAAW;SACrB;SACA;SACA,eAAe;AACb,cAAI,YAAY,UAAU,IAAI,CAAC,SAC7B,UAAS,CAAC,YAAY,UAAU;;SAGpC,aAAa,eAAe,cAAc;SAC1C;SACD,CAAC;QACE,EAjBC,UAAU,QAiBX;AAIV,cAAO;QACP;MACE,CAAA;KACK,CAAA;IACR,CAAA;GACH"}

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;