@aloudata/aloudata-design 3.0.27 → 3.1.1

package/dist/LogicTree/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/LogicTree/index.tsx"],"sourcesContent":["import { useControllableValue } from 'ahooks';\nimport { cn } from '../lib/utils';\nimport './logic-tree.css';\nimport _ from 'lodash';\nimport React, { useCallback, useState } from 'react';\nimport { DndProvider, useDragDropManager } from 'react-dnd';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\nimport { getUniqId } from '../_utils/getUniqId';\nimport LogicItem from './components/LogicItem';\nimport {\n  addLogicNode,\n  addRecordNode,\n  changeRecordData,\n  changeRelation,\n  findNodeById,\n  findParentNodeById,\n  isDescendant,\n  removeNode,\n} from './helper';\nimport { ELogicType, ENodeType, type TNode } from './type';\n\nexport { default as DisplayLogicTree } from './DisplayLogicTree';\nexport * from './type';\n\nexport enum EPutPosition {\n  TOP = 'TOP',\n  BOTTOM = 'BOTTOM',\n}\n\nexport type TRenderCondition<T> = (\n  data: T,\n  { changeData }: { changeData: (data: T) => void },\n  nodeId: string,\n) => React.ReactNode;\n\ninterface IProps<T> {\n  newInitializationData: T;\n  onChange: (value: TNode<T>) => void;\n  value?: TNode<T>;\n  renderCondition: TRenderCondition<T>;\n  rootNodeAllowedEmpty?: boolean;\n  className?: string;\n  needDndProvider?: boolean;\n  hideBottomBtn?: {\n    addRelation?: boolean;\n  };\n}\n\nfunction useHasDndContext() {\n  try {\n    return !!useDragDropManager();\n  } catch {\n    return false;\n  }\n}\n\nfunction LogicTreeDndProvider({ children }: { children: React.ReactNode }) {\n  const hasDndContext = useHasDndContext();\n  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null);\n\n  if (hasDndContext) {\n    return <>{children}</>;\n  }\n\n  return (\n    <div ref={setRootElement} style={{ display: 'contents' }}>\n      {rootElement ? (\n        <DndProvider backend={HTML5Backend} options={{ rootElement }}>\n          {children}\n        </DndProvider>\n      ) : null}\n    </div>\n  );\n}\n\nexport default function LogicTree<T>(props: IProps<T>) {\n  const {\n    newInitializationData,\n    onChange: propsOnChange,\n    renderCondition,\n    rootNodeAllowedEmpty,\n    className,\n    hideBottomBtn,\n  } = props;\n  const initialNode: TNode<T> = {\n    id: getUniqId(),\n    type: ENodeType.LOGIC,\n    logicType: ELogicType.AND,\n    nodes: [\n      {\n        id: getUniqId(),\n        type: ENodeType.RECORD,\n        data: newInitializationData,\n      },\n    ],\n  };\n\n  const [innerValue, setInnerValue] = useControllableValue<TNode<T>>(\n    props.value ? { value: props.value } : {},\n    {\n      defaultValue: initialNode,\n    },\n  );\n  const [hoverItemId, setHoverItemId] = useState<string>('');\n\n  const changeInnerValue = useCallback(\n    (newValue: TNode<T>) => {\n      setInnerValue(newValue);\n      propsOnChange(newValue);\n    },\n    [propsOnChange, setInnerValue],\n  );\n\n  const onAddCondition = (id: string) => {\n    const newRootNode = addRecordNode(id, innerValue, newInitializationData);\n    changeInnerValue(newRootNode);\n  };\n\n  const onAddRelation = (id: string) => {\n    const newRootNode = addLogicNode(id, innerValue, newInitializationData);\n    changeInnerValue(newRootNode);\n  };\n\n  const onChangeRelation = (id: string, logicType: ELogicType) => {\n    const newRootNode = changeRelation(id, logicType, innerValue);\n    changeInnerValue(newRootNode);\n  };\n\n  const onRemove = (id: string) => {\n    const newRootNode = removeNode(\n      id,\n      innerValue,\n      initialNode,\n      rootNodeAllowedEmpty,\n    );\n    changeInnerValue(newRootNode);\n  };\n\n  const onChangeRecordData = (id: string, data: T) => {\n    const newRootNode = changeRecordData(id, data, innerValue);\n    changeInnerValue(newRootNode);\n  };\n\n  const moveNode = useCallback(\n    (dragId: string, hoverId: string, dropPosition: EPutPosition) => {\n      const newRootNode = _.cloneDeep(innerValue);\n      const dragNode = findNodeById(dragId, newRootNode);\n      const hoverNode = findNodeById(hoverId, newRootNode);\n\n      if (dragNode && hoverNode) {\n        if (isDescendant(hoverId, dragNode)) {\n          return;\n        }\n\n        const dragParent = findParentNodeById(dragId, newRootNode);\n        const hoverParent = findParentNodeById(hoverId, newRootNode);\n\n        if (dragParent && hoverParent) {\n          // 从原位置移除节点\n          dragParent.nodes = dragParent.nodes.filter(\n            (node) => node.id !== dragId,\n          );\n\n          // 如果拖拽父节点为空，处理删除逻辑\n          if (dragParent.nodes.length === 0) {\n            const grandParent = findParentNodeById(dragParent.id, newRootNode);\n            if (grandParent) {\n              grandParent.nodes = grandParent.nodes.filter(\n                (node) => node.id !== dragParent.id,\n              );\n            } else {\n              dragParent.nodes = [];\n            }\n          }\n\n          // 插入到新位置\n          const hoverIndex = hoverParent.nodes.findIndex(\n            (node) => node.id === hoverId,\n          );\n          const newIndex =\n            dropPosition === EPutPosition.TOP ? hoverIndex : hoverIndex + 1;\n          hoverParent.nodes.splice(newIndex, 0, dragNode);\n\n          // 更新状态\n          changeInnerValue(newRootNode);\n        }\n      }\n    },\n    [innerValue, changeInnerValue],\n  );\n\n  if (!innerValue) {\n    return null;\n  }\n\n  const content = (\n    <div className={cn('ald-logic-tree-wrap', className)}>\n      <LogicItem\n        value={innerValue}\n        addCondition={onAddCondition}\n        addRelation={onAddRelation}\n        remove={onRemove}\n        changeRecordData={onChangeRecordData}\n        renderCondition={renderCondition}\n        changeRelation={onChangeRelation}\n        onDragEnd={moveNode}\n        hoverId={hoverItemId}\n        setHoverId={setHoverItemId}\n        isRoot={true} // 将最顶层的LogicItem标记为根节点\n        hideBottomBtn={hideBottomBtn}\n      />\n    </div>\n  );\n\n  return <LogicTreeDndProvider>{content}</LogicTreeDndProvider>;\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/LogicTree/index.tsx"],"sourcesContent":["import { useControllableValue } from 'ahooks';\nimport { cn } from '../lib/utils';\nimport './logic-tree.css';\nimport _ from 'lodash';\nimport React, { useCallback, useState } from 'react';\nimport { DndProvider, useDragDropManager } from 'react-dnd';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\nimport { getUniqId } from '../_utils/getUniqId';\nimport LogicItem from './components/LogicItem';\nimport {\n  addLogicNode,\n  addRecordNode,\n  changeRecordData,\n  changeRelation,\n  findNodeById,\n  findParentNodeById,\n  isDescendant,\n  removeNode,\n} from './helper';\nimport { ELogicType, ENodeType, type TNode } from './type';\n\nexport { default as DisplayLogicTree } from './DisplayLogicTree';\nexport * from './type';\n\nexport enum EPutPosition {\n  TOP = 'TOP',\n  BOTTOM = 'BOTTOM',\n}\n\nexport type TRenderCondition<T> = (\n  data: T,\n  { changeData }: { changeData: (data: T) => void },\n  nodeId: string,\n) => React.ReactNode;\n\ninterface IProps<T> {\n  newInitializationData: T;\n  onChange: (value: TNode<T>) => void;\n  value?: TNode<T>;\n  renderCondition: TRenderCondition<T>;\n  rootNodeAllowedEmpty?: boolean;\n  className?: string;\n  needDndProvider?: boolean;\n  hideBottomBtn?: {\n    addRelation?: boolean;\n  };\n}\n\nfunction useHasDndContext() {\n  try {\n    return !!useDragDropManager();\n  } catch {\n    return false;\n  }\n}\n\nfunction LogicTreeDndProvider({ children }: { children: React.ReactNode }) {\n  const hasDndContext = useHasDndContext();\n  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null);\n\n  if (hasDndContext) {\n    return <>{children}</>;\n  }\n\n  return (\n    <div ref={setRootElement} style={{ display: 'contents' }}>\n      {rootElement ? (\n        <DndProvider backend={HTML5Backend} options={{ rootElement }}>\n          {children}\n        </DndProvider>\n      ) : null}\n    </div>\n  );\n}\n\nexport default function LogicTree<T>(props: IProps<T>) {\n  const {\n    newInitializationData,\n    onChange: propsOnChange,\n    renderCondition,\n    rootNodeAllowedEmpty,\n    className,\n    hideBottomBtn,\n  } = props;\n  const initialNode: TNode<T> = {\n    id: getUniqId(),\n    type: ENodeType.LOGIC,\n    logicType: ELogicType.AND,\n    nodes: [\n      {\n        id: getUniqId(),\n        type: ENodeType.RECORD,\n        data: newInitializationData,\n      },\n    ],\n  };\n\n  const [innerValue, setInnerValue] = useControllableValue<TNode<T>>(\n    props.value ? { value: props.value } : {},\n    {\n      defaultValue: initialNode,\n    },\n  );\n  const [hoverItemId, setHoverItemId] = useState<string>('');\n\n  const changeInnerValue = useCallback(\n    (newValue: TNode<T>) => {\n      setInnerValue(newValue);\n      propsOnChange(newValue);\n    },\n    [propsOnChange, setInnerValue],\n  );\n\n  const onAddCondition = (id: string) => {\n    const newRootNode = addRecordNode(id, innerValue, newInitializationData);\n    changeInnerValue(newRootNode);\n  };\n\n  const onAddRelation = (id: string) => {\n    const newRootNode = addLogicNode(id, innerValue, newInitializationData);\n    changeInnerValue(newRootNode);\n  };\n\n  const onChangeRelation = (id: string, logicType: ELogicType) => {\n    const newRootNode = changeRelation(id, logicType, innerValue);\n    changeInnerValue(newRootNode);\n  };\n\n  const onRemove = (id: string) => {\n    const newRootNode = removeNode(\n      id,\n      innerValue,\n      initialNode,\n      rootNodeAllowedEmpty,\n    );\n    changeInnerValue(newRootNode);\n  };\n\n  const onChangeRecordData = (id: string, data: T) => {\n    const newRootNode = changeRecordData(id, data, innerValue);\n    changeInnerValue(newRootNode);\n  };\n\n  const moveNode = useCallback(\n    (dragId: string, hoverId: string, dropPosition: EPutPosition) => {\n      const newRootNode = _.cloneDeep(innerValue);\n      const dragNode = findNodeById(dragId, newRootNode);\n      const hoverNode = findNodeById(hoverId, newRootNode);\n\n      if (dragNode && hoverNode) {\n        if (isDescendant(hoverId, dragNode)) {\n          return;\n        }\n\n        const dragParent = findParentNodeById(dragId, newRootNode);\n        const hoverParent = findParentNodeById(hoverId, newRootNode);\n\n        if (dragParent && hoverParent) {\n          // 从原位置移除节点\n          dragParent.nodes = dragParent.nodes.filter(\n            (node) => node.id !== dragId,\n          );\n\n          // 如果拖拽父节点为空，处理删除逻辑\n          if (dragParent.nodes.length === 0) {\n            const grandParent = findParentNodeById(dragParent.id, newRootNode);\n            if (grandParent) {\n              grandParent.nodes = grandParent.nodes.filter(\n                (node) => node.id !== dragParent.id,\n              );\n            } else {\n              dragParent.nodes = [];\n            }\n          }\n\n          // 插入到新位置\n          const hoverIndex = hoverParent.nodes.findIndex(\n            (node) => node.id === hoverId,\n          );\n          const newIndex =\n            dropPosition === EPutPosition.TOP ? hoverIndex : hoverIndex + 1;\n          hoverParent.nodes.splice(newIndex, 0, dragNode);\n\n          // 更新状态\n          changeInnerValue(newRootNode);\n        }\n      }\n    },\n    [innerValue, changeInnerValue],\n  );\n\n  if (!innerValue) {\n    return null;\n  }\n\n  const content = (\n    <div\n      className={cn('ald-logic-tree-wrap', className)}\n      role=\"tree\"\n      aria-label=\"Logic tree\"\n    >\n      <LogicItem\n        value={innerValue}\n        addCondition={onAddCondition}\n        addRelation={onAddRelation}\n        remove={onRemove}\n        changeRecordData={onChangeRecordData}\n        renderCondition={renderCondition}\n        changeRelation={onChangeRelation}\n        onDragEnd={moveNode}\n        hoverId={hoverItemId}\n        setHoverId={setHoverItemId}\n        isRoot={true} // 将最顶层的LogicItem标记为根节点\n        hideBottomBtn={hideBottomBtn}\n      />\n    </div>\n  );\n\n  return <LogicTreeDndProvider>{content}</LogicTreeDndProvider>;\n}\n"],"mappings":"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"}

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

@@ -10,6 +10,7 @@ interface IMemberSelectionProps {
     loading: boolean;
     width: number;
     filterItem?: (item: IUser) => boolean;
+    searchValue?: string;
     lockedIds: Array<TUserValue | TUserGroupValue>;
     renderItem?: (item: IUser, context: {
         isSelected: boolean;

package/dist/MemberPicker/components/MemberSelection.js

@@ -1,20 +1,18 @@
 import { cn } from "../../lib/utils.js";
-import Memo from "../../Icon/components/SearchLine.js";
 import { LocaleContext, getTranslator } from "../../locale/default.js";
-import Input from "../../Input/index.js";
 import Empty from "../../Empty/index.js";
 import CustomSpin from "../../Spin/index.js";
 import { isUser } from "../utils/getUsersWithUserId.js";
 import MultipleList from "./MultipleOption.js";
 import SingleOption from "./SingleOption.js";
-import React, { useContext, useDeferredValue, useEffect, useMemo, useState } from "react";
+import React, { useContext, useDeferredValue, useEffect, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import _ from "lodash";
 import { useVirtualizer } from "@tanstack/react-virtual";
 function MemberSelection(props) {
 	const { locale } = useContext(LocaleContext);
 	const t = getTranslator(locale);
-	const { className, userList, multiple, onChange, selectedUsers, onSearchValueChange, loading, width, lockedIds, filterItem, renderItem } = props;
+	const { className, userList, multiple, onChange, selectedUsers, onSearchValueChange, loading, width, lockedIds, filterItem, renderItem, searchValue = "" } = props;
 	const filteredList = useMemo(() => {
 		return userList.filter((item) => {
 			if (filterItem) return filterItem(item);
@@ -27,110 +25,101 @@ function MemberSelection(props) {
 		getScrollElement: () => parentRef.current,
 		estimateSize: () => 36
 	});
-	const [searchValue, setSearchValue] = useState("");
 	const deferredSearchValue = useDeferredValue(searchValue);
-	const inputRef = React.useRef(null);
 	useEffect(() => {
 		onSearchValueChange?.(deferredSearchValue);
 	}, [deferredSearchValue, onSearchValueChange]);
-	useEffect(() => {
-		if (inputRef.current) inputRef.current.focus();
-	}, []);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn(className, "ald-member-picker-member-list-wrap"),
-		children: [
-			/* @__PURE__ */ jsx(Input, {
-				prefix: /* @__PURE__ */ jsx(Memo, {}),
-				ref: inputRef,
-				className: "ald-member-picker-search-input",
-				onChange: (e) => {
-					setSearchValue(e.target.value);
-				}
-			}),
-			filteredList.length === 0 && !loading && /* @__PURE__ */ jsx(Empty, {
-				title: t.MemberPicker.noData,
-				size: "small",
-				image: Empty.PRESENTED_IMAGE_SEARCH,
-				className: "ald-member-picker-member-list-empty"
-			}),
-			/* @__PURE__ */ jsx(CustomSpin, {
-				tip: "Loading",
-				spinning: loading,
-				size: "small",
-				className: "ald-member-picker-user-list",
+		children: [filteredList.length === 0 && !loading && /* @__PURE__ */ jsx(Empty, {
+			title: t.MemberPicker.noData,
+			size: "small",
+			image: Empty.PRESENTED_IMAGE_SEARCH,
+			className: "ald-member-picker-member-list-empty"
+		}), /* @__PURE__ */ jsx(CustomSpin, {
+			tip: "Loading",
+			spinning: loading,
+			size: "small",
+			className: "ald-member-picker-user-list",
+			children: /* @__PURE__ */ jsx("div", {
+				ref: parentRef,
+				style: {
+					height: 300,
+					overflowY: "auto",
+					overflowX: "hidden"
+				},
+				className: cn("ald-member-picker-member-list", { "ald-member-picker-member-list-null": filteredList.length === 0 && !loading }),
 				children: /* @__PURE__ */ jsx("div", {
-					ref: parentRef,
+					role: "listbox",
+					"aria-label": "Members",
+					"aria-multiselectable": multiple || void 0,
+					className: "ald-member-picker-member-list-inner",
 					style: {
-						height: 300,
-						overflowY: "auto",
-						overflowX: "hidden"
+						width: multiple ? width : void 0,
+						overflow: "hidden",
+						position: "relative",
+						height: `${rowVirtualizer.getTotalSize()}px`
 					},
-					className: cn("ald-member-picker-member-list", { "ald-member-picker-member-list-null": filteredList.length === 0 && !loading }),
-					children: /* @__PURE__ */ jsx("div", {
-						className: "ald-member-picker-member-list-inner",
-						style: {
-							width: multiple ? width : void 0,
-							overflow: "hidden",
-							position: "relative",
-							height: `${rowVirtualizer.getTotalSize()}px`
-						},
-						children: rowVirtualizer.getVirtualItems().map((virtualItem) => {
-							const user = filteredList[virtualItem.index];
-							const isSelected = selectedUsers.some((selectedUser) => selectedUser.userId === user.userId);
-							const disabled = _.findIndex(lockedIds, {
-								userId: user.userId,
-								type: user.type
-							}) !== -1;
-							const originNode = multiple ? /* @__PURE__ */ jsx(MultipleList, {
-								user,
+					children: rowVirtualizer.getVirtualItems().map((virtualItem) => {
+						const user = filteredList[virtualItem.index];
+						const isSelected = selectedUsers.some((selectedUser) => selectedUser.userId === user.userId);
+						const disabled = _.findIndex(lockedIds, {
+							userId: user.userId,
+							type: user.type
+						}) !== -1;
+						const originNode = multiple ? /* @__PURE__ */ jsx(MultipleList, {
+							user,
+							disabled,
+							selected: isSelected,
+							showUserId: true,
+							onChange: (selected, user) => {
+								if (isUser(user)) onChange(selected, user);
+							}
+						}, user.userId) : /* @__PURE__ */ jsx(SingleOption, {
+							user,
+							selected: isSelected,
+							showUserId: true,
+							onChange: (selected, user) => {
+								if (isUser(user)) onChange(selected, user);
+							}
+						}, user.userId);
+						if (renderItem) return /* @__PURE__ */ jsx("div", {
+							role: "option",
+							id: `ald-member-picker-option-${user.userId}`,
+							"aria-selected": isSelected,
+							"aria-disabled": disabled || void 0,
+							style: {
+								position: "absolute",
+								top: 0,
+								left: 0,
+								width: "100%",
+								height: `${virtualItem.size}px`,
+								transform: `translateY(${virtualItem.start}px)`
+							},
+							children: renderItem(user, {
+								isSelected,
 								disabled,
-								selected: isSelected,
-								showUserId: true,
-								onChange: (selected, user) => {
-									if (isUser(user)) onChange(selected, user);
-								}
-							}, user.userId) : /* @__PURE__ */ jsx(SingleOption, {
-								user,
-								selected: isSelected,
-								showUserId: true,
-								onChange: (selected, user) => {
-									if (isUser(user)) onChange(selected, user);
-								}
-							}, user.userId);
-							if (renderItem) return /* @__PURE__ */ jsx("div", {
-								style: {
-									position: "absolute",
-									top: 0,
-									left: 0,
-									width: "100%",
-									height: `${virtualItem.size}px`,
-									transform: `translateY(${virtualItem.start}px)`
-								},
-								children: renderItem(user, {
-									isSelected,
-									disabled,
-									onClick: () => {
-										if (!disabled) onChange(!isSelected, user);
-									},
-									originNode
-								})
-							}, virtualItem.key);
-							return /* @__PURE__ */ jsx("div", {
-								style: {
-									position: "absolute",
-									top: 0,
-									left: 0,
-									width: "100%",
-									height: `${virtualItem.size}px`,
-									transform: `translateY(${virtualItem.start}px)`
+								onClick: () => {
+									if (!disabled) onChange(!isSelected, user);
 								},
-								children: originNode
-							}, virtualItem.key);
-						})
+								originNode
+							})
+						}, virtualItem.key);
+						return /* @__PURE__ */ jsx("div", {
+							style: {
+								position: "absolute",
+								top: 0,
+								left: 0,
+								width: "100%",
+								height: `${virtualItem.size}px`,
+								transform: `translateY(${virtualItem.start}px)`
+							},
+							children: originNode
+						}, virtualItem.key);
 					})
 				})
 			})
-		]
+		})]
 	});
 }
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"MemberSelection.js","names":[],"sources":["../../../src/MemberPicker/components/MemberSelection.tsx"],"sourcesContent":["import { useVirtualizer } from '@tanstack/react-virtual';\nimport { cn } from '../../lib/utils';\nimport _ from 'lodash';\nimport React, {\n  useContext,\n  useDeferredValue,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport Empty from '../../Empty';\nimport { SearchLine } from '../../Icon';\nimport Input, { InputRef } from '../../Input';\nimport Spin from '../../Spin';\nimport { LocaleContext, getTranslator } from '../../locale/default';\nimport { IUser, TUserGroupValue, TUserValue } from '../interface';\nimport { isUser } from '../utils/getUsersWithUserId';\nimport MultipleOption from './MultipleOption';\nimport SingleOption from './SingleOption';\n\ninterface IMemberSelectionProps {\n  className?: string;\n  userList: IUser[];\n  multiple?: boolean;\n  onChange: (selected: boolean, user: IUser) => void;\n  selectedUsers: IUser[];\n  onSearchValueChange?: (value: string) => void;\n  loading: boolean;\n  width: number;\n  filterItem?: (item: IUser) => boolean;\n  lockedIds: Array<TUserValue | TUserGroupValue>;\n  renderItem?: (\n    item: IUser,\n    context: {\n      isSelected: boolean;\n      disabled: boolean;\n      onClick: () => void;\n      originNode: React.ReactNode;\n    },\n  ) => React.ReactNode;\n}\n\nexport const OPTION_HEIGHT = 36;\nexport const WRAPPER_HEIGHT = 300;\n\nexport default function MemberSelection(props: IMemberSelectionProps) {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const {\n    className,\n    userList,\n    multiple,\n    onChange,\n    selectedUsers,\n    onSearchValueChange,\n    loading,\n    width,\n    lockedIds,\n    filterItem,\n    renderItem,\n  } = props;\n\n  const filteredList = useMemo(() => {\n    return userList.filter((item) => {\n      if (filterItem) {\n        return filterItem(item);\n      }\n      return true;\n    });\n  }, [userList, filterItem]);\n\n  const parentRef = React.useRef<HTMLDivElement>(null);\n\n  // The virtualizer\n  const rowVirtualizer = useVirtualizer({\n    count: filteredList.length,\n    getScrollElement: () => parentRef.current,\n    estimateSize: () => OPTION_HEIGHT,\n  });\n\n  const [searchValue, setSearchValue] = useState<string>('');\n  const deferredSearchValue = useDeferredValue(searchValue);\n  const inputRef = React.useRef<InputRef>(null);\n  useEffect(() => {\n    onSearchValueChange?.(deferredSearchValue);\n  }, [deferredSearchValue, onSearchValueChange]);\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.focus();\n    }\n  }, []);\n\n  return (\n    <div className={cn(className, 'ald-member-picker-member-list-wrap')}>\n      <Input\n        prefix={<SearchLine />}\n        ref={inputRef}\n        className={'ald-member-picker-search-input'}\n        onChange={(e) => {\n          setSearchValue(e.target.value);\n        }}\n      ></Input>\n\n      {filteredList.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\n      <Spin\n        tip=\"Loading\"\n        spinning={loading}\n        size=\"small\"\n        className=\"ald-member-picker-user-list\"\n      >\n        <div\n          ref={parentRef}\n          style={{\n            height: WRAPPER_HEIGHT,\n            overflowY: 'auto',\n            overflowX: 'hidden',\n          }}\n          className={cn('ald-member-picker-member-list', {\n            'ald-member-picker-member-list-null':\n              filteredList.length === 0 && !loading,\n          })}\n          // innerClassName=\"ald-member-picker-member-scroll\"\n        >\n          <div\n            className=\"ald-member-picker-member-list-inner\"\n            style={{\n              width: multiple ? width : undefined,\n              overflow: 'hidden',\n              position: 'relative',\n              height: `${rowVirtualizer.getTotalSize()}px`,\n            }}\n          >\n            {rowVirtualizer.getVirtualItems().map((virtualItem) => {\n              const user = filteredList[virtualItem.index];\n              const isSelected = selectedUsers.some(\n                (selectedUser) => selectedUser.userId === user.userId,\n              );\n              const index = _.findIndex(lockedIds, {\n                userId: user.userId,\n                type: user.type,\n              });\n              const disabled = index !== -1;\n\n              const originNode = multiple ? (\n                <MultipleOption\n                  key={user.userId}\n                  user={user}\n                  disabled={disabled}\n                  selected={isSelected}\n                  showUserId={true}\n                  onChange={(selected, user) => {\n                    if (isUser(user)) onChange(selected, user);\n                  }}\n                ></MultipleOption>\n              ) : (\n                <SingleOption\n                  key={user.userId}\n                  user={user}\n                  selected={isSelected}\n                  showUserId={true}\n                  onChange={(selected, user) => {\n                    if (isUser(user)) onChange(selected, user);\n                  }}\n                ></SingleOption>\n              );\n\n              if (renderItem) {\n                return (\n                  <div\n                    key={virtualItem.key}\n                    style={{\n                      position: 'absolute',\n                      top: 0,\n                      left: 0,\n                      width: '100%',\n                      height: `${virtualItem.size}px`,\n                      transform: `translateY(${virtualItem.start}px)`,\n                    }}\n                  >\n                    {renderItem(user, {\n                      isSelected,\n                      disabled,\n                      onClick: () => {\n                        if (!disabled) {\n                          onChange(!isSelected, user);\n                        }\n                      },\n                      originNode,\n                    })}\n                  </div>\n                );\n              }\n\n              return (\n                <div\n                  key={virtualItem.key}\n                  style={{\n                    position: 'absolute',\n                    top: 0,\n                    left: 0,\n                    width: '100%',\n                    height: `${virtualItem.size}px`,\n                    transform: `translateY(${virtualItem.start}px)`,\n                  }}\n                >\n                  {originNode}\n                </div>\n              );\n            })}\n          </div>\n        </div>\n      </Spin>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"MemberSelection.js","names":[],"sources":["../../../src/MemberPicker/components/MemberSelection.tsx"],"sourcesContent":["import { useVirtualizer } from '@tanstack/react-virtual';\nimport { cn } from '../../lib/utils';\nimport _ from 'lodash';\nimport React, { useContext, useDeferredValue, useEffect, useMemo } from 'react';\nimport Empty from '../../Empty';\nimport Spin from '../../Spin';\nimport { LocaleContext, getTranslator } from '../../locale/default';\nimport { IUser, TUserGroupValue, TUserValue } from '../interface';\nimport { isUser } from '../utils/getUsersWithUserId';\nimport MultipleOption from './MultipleOption';\nimport SingleOption from './SingleOption';\n\ninterface IMemberSelectionProps {\n  className?: string;\n  userList: IUser[];\n  multiple?: boolean;\n  onChange: (selected: boolean, user: IUser) => void;\n  selectedUsers: IUser[];\n  onSearchValueChange?: (value: string) => void;\n  loading: boolean;\n  width: number;\n  filterItem?: (item: IUser) => boolean;\n  searchValue?: string;\n  lockedIds: Array<TUserValue | TUserGroupValue>;\n  renderItem?: (\n    item: IUser,\n    context: {\n      isSelected: boolean;\n      disabled: boolean;\n      onClick: () => void;\n      originNode: React.ReactNode;\n    },\n  ) => React.ReactNode;\n}\n\nexport const OPTION_HEIGHT = 36;\nexport const WRAPPER_HEIGHT = 300;\n\nexport default function MemberSelection(props: IMemberSelectionProps) {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const {\n    className,\n    userList,\n    multiple,\n    onChange,\n    selectedUsers,\n    onSearchValueChange,\n    loading,\n    width,\n    lockedIds,\n    filterItem,\n    renderItem,\n    searchValue = '',\n  } = props;\n\n  const filteredList = useMemo(() => {\n    return userList.filter((item) => {\n      if (filterItem) {\n        return filterItem(item);\n      }\n      return true;\n    });\n  }, [userList, filterItem]);\n\n  const parentRef = React.useRef<HTMLDivElement>(null);\n\n  // The virtualizer\n  const rowVirtualizer = useVirtualizer({\n    count: filteredList.length,\n    getScrollElement: () => parentRef.current,\n    estimateSize: () => OPTION_HEIGHT,\n  });\n\n  const deferredSearchValue = useDeferredValue(searchValue);\n  useEffect(() => {\n    onSearchValueChange?.(deferredSearchValue);\n  }, [deferredSearchValue, onSearchValueChange]);\n\n  return (\n    <div className={cn(className, 'ald-member-picker-member-list-wrap')}>\n      {filteredList.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\n      <Spin\n        tip=\"Loading\"\n        spinning={loading}\n        size=\"small\"\n        className=\"ald-member-picker-user-list\"\n      >\n        <div\n          ref={parentRef}\n          style={{\n            height: WRAPPER_HEIGHT,\n            overflowY: 'auto',\n            overflowX: 'hidden',\n          }}\n          className={cn('ald-member-picker-member-list', {\n            'ald-member-picker-member-list-null':\n              filteredList.length === 0 && !loading,\n          })}\n          // innerClassName=\"ald-member-picker-member-scroll\"\n        >\n          <div\n            role=\"listbox\"\n            aria-label=\"Members\"\n            aria-multiselectable={multiple || undefined}\n            className=\"ald-member-picker-member-list-inner\"\n            style={{\n              width: multiple ? width : undefined,\n              overflow: 'hidden',\n              position: 'relative',\n              height: `${rowVirtualizer.getTotalSize()}px`,\n            }}\n          >\n            {rowVirtualizer.getVirtualItems().map((virtualItem) => {\n              const user = filteredList[virtualItem.index];\n              const isSelected = selectedUsers.some(\n                (selectedUser) => selectedUser.userId === user.userId,\n              );\n              const index = _.findIndex(lockedIds, {\n                userId: user.userId,\n                type: user.type,\n              });\n              const disabled = index !== -1;\n\n              const originNode = multiple ? (\n                <MultipleOption\n                  key={user.userId}\n                  user={user}\n                  disabled={disabled}\n                  selected={isSelected}\n                  showUserId={true}\n                  onChange={(selected, user) => {\n                    if (isUser(user)) onChange(selected, user);\n                  }}\n                ></MultipleOption>\n              ) : (\n                <SingleOption\n                  key={user.userId}\n                  user={user}\n                  selected={isSelected}\n                  showUserId={true}\n                  onChange={(selected, user) => {\n                    if (isUser(user)) onChange(selected, user);\n                  }}\n                ></SingleOption>\n              );\n\n              if (renderItem) {\n                return (\n                  <div\n                    role=\"option\"\n                    id={`ald-member-picker-option-${user.userId}`}\n                    aria-selected={isSelected}\n                    aria-disabled={disabled || undefined}\n                    key={virtualItem.key}\n                    style={{\n                      position: 'absolute',\n                      top: 0,\n                      left: 0,\n                      width: '100%',\n                      height: `${virtualItem.size}px`,\n                      transform: `translateY(${virtualItem.start}px)`,\n                    }}\n                  >\n                    {renderItem(user, {\n                      isSelected,\n                      disabled,\n                      onClick: () => {\n                        if (!disabled) {\n                          onChange(!isSelected, user);\n                        }\n                      },\n                      originNode,\n                    })}\n                  </div>\n                );\n              }\n\n              return (\n                <div\n                  key={virtualItem.key}\n                  style={{\n                    position: 'absolute',\n                    top: 0,\n                    left: 0,\n                    width: '100%',\n                    height: `${virtualItem.size}px`,\n                    transform: `translateY(${virtualItem.start}px)`,\n                  }}\n                >\n                  {originNode}\n                </div>\n              );\n            })}\n          </div>\n        </div>\n      </Spin>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAsCA,SAAwB,gBAAgB,OAA8B;CACpE,MAAM,EAAE,WAAW,WAAW,cAAc;CAC5C,MAAM,IAAI,cAAc,OAAO;CAE/B,MAAM,EACJ,WACA,UACA,UACA,UACA,eACA,qBACA,SACA,OACA,WACA,YACA,YACA,cAAc,OACZ;CAEJ,MAAM,eAAe,cAAc;AACjC,SAAO,SAAS,QAAQ,SAAS;AAC/B,OAAI,WACF,QAAO,WAAW,KAAK;AAEzB,UAAO;IACP;IACD,CAAC,UAAU,WAAW,CAAC;CAE1B,MAAM,YAAY,MAAM,OAAuB,KAAK;CAGpD,MAAM,iBAAiB,eAAe;EACpC,OAAO,aAAa;EACpB,wBAAwB,UAAU;EAClC,oBAAA;EACD,CAAC;CAEF,MAAM,sBAAsB,iBAAiB,YAAY;AACzD,iBAAgB;AACd,wBAAsB,oBAAoB;IACzC,CAAC,qBAAqB,oBAAoB,CAAC;AAE9C,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,WAAW,qCAAqC;YAAnE,CACG,aAAa,WAAW,KAAK,CAAC,WAC7B,oBAAC,OAAD;GACE,OAAO,EAAE,aAAa;GACtB,MAAK;GACL,OAAO,MAAM;GACb,WAAU;GACV,CAAA,EAGJ,oBAAC,YAAD;GACE,KAAI;GACJ,UAAU;GACV,MAAK;GACL,WAAU;aAEV,oBAAC,OAAD;IACE,KAAK;IACL,OAAO;KACL,QAAA;KACA,WAAW;KACX,WAAW;KACZ;IACD,WAAW,GAAG,iCAAiC,EAC7C,sCACE,aAAa,WAAW,KAAK,CAAC,SACjC,CAAC;cAGF,oBAAC,OAAD;KACE,MAAK;KACL,cAAW;KACX,wBAAsB,YAAY;KAClC,WAAU;KACV,OAAO;MACL,OAAO,WAAW,QAAQ;MAC1B,UAAU;MACV,UAAU;MACV,QAAQ,GAAG,eAAe,cAAc,CAAC;MAC1C;eAEA,eAAe,iBAAiB,CAAC,KAAK,gBAAgB;MACrD,MAAM,OAAO,aAAa,YAAY;MACtC,MAAM,aAAa,cAAc,MAC9B,iBAAiB,aAAa,WAAW,KAAK,OAChD;MAKD,MAAM,WAJQ,EAAE,UAAU,WAAW;OACnC,QAAQ,KAAK;OACb,MAAM,KAAK;OACZ,CAAC,KACyB;MAE3B,MAAM,aAAa,WACjB,oBAAC,cAAD;OAEQ;OACI;OACV,UAAU;OACV,YAAY;OACZ,WAAW,UAAU,SAAS;AAC5B,YAAI,OAAO,KAAK,CAAE,UAAS,UAAU,KAAK;;OAE5B,EARX,KAAK,OAQM,GAElB,oBAAC,cAAD;OAEQ;OACN,UAAU;OACV,YAAY;OACZ,WAAW,UAAU,SAAS;AAC5B,YAAI,OAAO,KAAK,CAAE,UAAS,UAAU,KAAK;;OAE9B,EAPT,KAAK,OAOI;AAGlB,UAAI,WACF,QACE,oBAAC,OAAD;OACE,MAAK;OACL,IAAI,4BAA4B,KAAK;OACrC,iBAAe;OACf,iBAAe,YAAY;OAE3B,OAAO;QACL,UAAU;QACV,KAAK;QACL,MAAM;QACN,OAAO;QACP,QAAQ,GAAG,YAAY,KAAK;QAC5B,WAAW,cAAc,YAAY,MAAM;QAC5C;iBAEA,WAAW,MAAM;QAChB;QACA;QACA,eAAe;AACb,aAAI,CAAC,SACH,UAAS,CAAC,YAAY,KAAK;;QAG/B;QACD,CAAC;OACE,EApBC,YAAY,IAoBb;AAIV,aACE,oBAAC,OAAD;OAEE,OAAO;QACL,UAAU;QACV,KAAK;QACL,MAAM;QACN,OAAO;QACP,QAAQ,GAAG,YAAY,KAAK;QAC5B,WAAW,cAAc,YAAY,MAAM;QAC5C;iBAEA;OACG,EAXC,YAAY,IAWb;OAER;KACE,CAAA;IACF,CAAA;GACD,CAAA,CACH"}

package/dist/MemberPicker/components/MultipleOption.js

@@ -21,8 +21,20 @@ function MultipleList(params) {
 		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__ */ jsxs("div", {
 			className: "ald-member-picker-label",
 			children: [/* @__PURE__ */ jsx(Checkbox, {

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

@@ -1 +1 @@
-{"version":3,"file":"MultipleOption.js","names":[],"sources":["../../../src/MemberPicker/components/MultipleOption.tsx"],"sourcesContent":["import { cn } from '../../lib/utils';\nimport React, { useContext } from 'react';\nimport Badge from '../../Badge';\nimport Checkbox from '../../Checkbox';\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';\n\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 MultipleList(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 = false,\n  } = params;\n\n  const onClick = () => {\n    if (disabled) return;\n\n    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        <Checkbox\n          className={'ald-member-picker-checkbox'}\n          checked={selected}\n          disabled={disabled}\n        ></Checkbox>\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":";;;;;;;;;;;;;AAuBA,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,aAAa,UACX;CAEJ,MAAM,gBAAgB;AACpB,MAAI,SAAU;AAEd,aAAW,CAAC,UAAU,KAAK;;AAG7B,QACE,qBAAC,OAAD;EACE,WAAW,GAAG,4BAA4B,WAAW,GAClD,sCAAsC,UACxC,CAAC;EACO;YAJX,CAME,qBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,oBAAC,UAAD;IACE,WAAW;IACX,SAAS;IACC;IACA,CAAA,EACZ,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;MACF;MACL,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":"MultipleOption.js","names":[],"sources":["../../../src/MemberPicker/components/MultipleOption.tsx"],"sourcesContent":["import { cn } from '../../lib/utils';\nimport React, { useContext } from 'react';\nimport Badge from '../../Badge';\nimport Checkbox from '../../Checkbox';\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';\n\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 MultipleList(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 = false,\n  } = params;\n\n  const onClick = () => {\n    if (disabled) return;\n\n    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        <Checkbox\n          className={'ald-member-picker-checkbox'}\n          checked={selected}\n          disabled={disabled}\n        ></Checkbox>\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":";;;;;;;;;;;;;AAuBA,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,aAAa,UACX;CAEJ,MAAM,gBAAgB;AACpB,MAAI,SAAU;AAEd,aAAW,CAAC,UAAU,KAAK;;AAG7B,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,qBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,oBAAC,UAAD;IACE,WAAW;IACX,SAAS;IACC;IACA,CAAA,EACZ,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;MACF;MACL,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/Panel.d.ts

@@ -23,6 +23,7 @@ interface IPanelProps {
     }) => ReactNode;
     renderSelectedTag?: (user: IUser | IUserGroup, originNode: ReactNode) => ReactNode;
     filterItem?: (item: IUser | IUserGroup) => boolean;
+    searchValue?: string;
 }
 export declare const userDisplayNameIsRepeated: (userList: TUser, displayName?: string) => boolean;
 export default function Panel(props: IPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/MemberPicker/components/Panel.js

@@ -14,7 +14,7 @@ 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 } = props;
+	const { type, multiple, dropdownWidth, value, onChange, dataList, onSearchValueChange, className, lockedIds, footer, onCancel, renderItem, renderSelectedTag, filterItem, searchValue = "" } = props;
 	const [selectedUsers, setSelected] = useState([]);
 	const onSelectionChange = useCallback((selected, user) => {
 		if (multiple) if (selected) setSelected([...selectedUsers, user]);
@@ -52,6 +52,7 @@ function Panel(props) {
 			selectedUsers: selectedUsers.filter(isUser),
 			onChange: onSelectionChange,
 			onSearchValueChange,
+			searchValue,
 			multiple: true,
 			lockedIds,
 			loading: props.loading,
@@ -65,6 +66,7 @@ function Panel(props) {
 			selectedUsersGroup: selectedUsers.filter(isUserGroup),
 			onChange: onSelectionChange,
 			onSearchValueChange,
+			searchValue,
 			multiple: true,
 			lockedIds,
 			loading: props.loading,
@@ -93,6 +95,7 @@ function Panel(props) {
 		selectedUsers,
 		onSelectionChange,
 		onSearchValueChange,
+		searchValue,
 		lockedIds,
 		props.loading,
 		type,

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

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","names":[],"sources":["../../../src/MemberPicker/components/Panel.tsx"],"sourcesContent":["import { cn } from '../../lib/utils';\n\nimport React, {\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport {\n  EUserType,\n  IUserGroup,\n  TUser,\n  TUserGroupValue,\n  TUserValue,\n} from '../../ConfigProvider/getUserList';\nimport Tabs from '../../Tabs';\nimport { LocaleContext, getTranslator } from '../../locale/default';\nimport { EMemberPicker, IUser } from '../interface';\nimport { getId } from '../utils';\nimport { isUser, isUserGroup } from '../utils/getUsersWithUserId';\nimport MemberSelection from './MemberSelection';\nimport SelectedMemberTags from './SelectedMemberTags';\nimport SelectorFooter from './SelectorFooter';\nimport UserGroupSelection from './UserGroupSelection';\n\ninterface IPanelProps {\n  type: EMemberPicker;\n  multiple?: boolean;\n  onChange?: (value: TUser) => void;\n  dropdownWidth?: number;\n  value?: TUser | (IUser | IUserGroup);\n  dataList: TUser;\n  onSearchValueChange?: (value: string) => void;\n  onCancel?: () => void;\n  loading: boolean;\n  className?: string;\n  lockedIds: Array<TUserValue | TUserGroupValue>;\n  footer?: ReactNode;\n  renderItem?: (\n    item: IUser | IUserGroup,\n    context: {\n      isSelected: boolean;\n      disabled: boolean;\n      onClick: () => void;\n      onNextLevel?: () => void;\n      originNode: ReactNode;\n    },\n  ) => ReactNode;\n  renderSelectedTag?: (\n    user: IUser | IUserGroup,\n    originNode: ReactNode,\n  ) => ReactNode;\n  filterItem?: (item: IUser | IUserGroup) => boolean;\n}\n\nexport const userDisplayNameIsRepeated = (\n  userList: TUser,\n  displayName?: string,\n) => {\n  return (\n    userList.filter(\n      (user) => user.type === EUserType.USER && user.nickname === displayName,\n    ).length > 1\n  );\n};\n\nexport default function Panel(props: IPanelProps) {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const {\n    type,\n    multiple,\n    dropdownWidth,\n    value,\n    onChange,\n    dataList,\n    onSearchValueChange,\n    className,\n    lockedIds,\n    footer,\n    onCancel,\n    renderItem,\n    renderSelectedTag,\n    filterItem,\n  } = props;\n\n  const [selectedUsers, setSelected] = useState<TUser>([]);\n\n  const onSelectionChange = useCallback(\n    (selected: boolean, user: IUser | IUserGroup) => {\n      if (multiple) {\n        if (selected) {\n          setSelected([...selectedUsers, user]);\n        } else {\n          setSelected(\n            selectedUsers.filter((item) => getId(item) !== getId(user)),\n          );\n        }\n      } else {\n        if (selected) {\n          setSelected([user]);\n          onChange?.([user]);\n        } else {\n          setSelected([]);\n          onChange?.([]);\n        }\n      }\n    },\n    [multiple, selectedUsers, onChange],\n  );\n\n  const onRemove = useCallback(\n    (user: IUser | IUserGroup) => {\n      setSelected(selectedUsers.filter((item) => getId(item) !== getId(user)));\n    },\n    [selectedUsers],\n  );\n\n  const panelwidth = useMemo(() => {\n    if (dropdownWidth) {\n      return dropdownWidth;\n    } else if (multiple) {\n      return 480;\n    } else {\n      return 160;\n    }\n  }, [dropdownWidth, multiple]);\n\n  useEffect(() => {\n    if (value) {\n      if (Array.isArray(value)) {\n        setSelected(value);\n      } else {\n        setSelected([value]);\n      }\n    }\n  }, [setSelected, value]);\n\n  const renderDropdown = useCallback(() => {\n    const userSelection = (\n      <MemberSelection\n        className={'ald-member-picker-member-selection-multiple'}\n        userList={dataList.filter(isUser)}\n        filterItem={filterItem}\n        width={(panelwidth - 6) / 2}\n        selectedUsers={selectedUsers.filter(isUser)}\n        onChange={onSelectionChange}\n        onSearchValueChange={onSearchValueChange}\n        multiple={true}\n        lockedIds={lockedIds}\n        loading={props.loading}\n        renderItem={renderItem}\n      ></MemberSelection>\n    );\n    const userGroupSelection = (\n      <UserGroupSelection\n        className={'ald-member-picker-member-selection-multiple'}\n        userGroupList={dataList.filter(isUserGroup)}\n        filterItem={filterItem}\n        width={(panelwidth - 6) / 2}\n        selectedUsersGroup={selectedUsers.filter(isUserGroup)}\n        onChange={onSelectionChange}\n        onSearchValueChange={onSearchValueChange}\n        multiple={true}\n        lockedIds={lockedIds}\n        loading={props.loading}\n        renderItem={renderItem}\n      ></UserGroupSelection>\n    );\n    if (type === EMemberPicker.USER) {\n      return userSelection;\n    }\n    if (type === EMemberPicker.GROUP) {\n      return userGroupSelection;\n    }\n    if (type === EMemberPicker.BOTH) {\n      return (\n        <Tabs\n          centered\n          destroyInactiveTabPane\n          items={[\n            {\n              key: 'user',\n              label: t.MemberPicker.users,\n              children: userSelection,\n            },\n            {\n              key: 'userGroup',\n              label: t.MemberPicker.userGroups,\n              children: userGroupSelection,\n            },\n          ]}\n          className=\"ald-member-tabs\"\n        ></Tabs>\n      );\n    }\n  }, [\n    t,\n    dataList,\n    panelwidth,\n    selectedUsers,\n    onSelectionChange,\n    onSearchValueChange,\n    lockedIds,\n    props.loading,\n    type,\n    renderItem,\n    filterItem,\n  ]);\n\n  // 单选 + 调用方未传 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              multiple={false && multiple}\n              lockedIds={lockedIds}\n              loading={props.loading}\n              renderItem={renderItem}\n            ></MemberSelection>\n          )}\n          {type === EMemberPicker.GROUP && (\n            <UserGroupSelection\n              className={'ald-member-picker-member-selection-multiple'}\n              userGroupList={dataList.filter(isUserGroup)}\n              width={(panelwidth - 3) / 2}\n              selectedUsersGroup={selectedUsers.filter(isUserGroup)}\n              onChange={onSelectionChange}\n              onSearchValueChange={onSearchValueChange}\n              multiple={false}\n              lockedIds={lockedIds}\n              loading={props.loading}\n              renderItem={renderItem}\n            ></UserGroupSelection>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Panel.js","names":[],"sources":["../../../src/MemberPicker/components/Panel.tsx"],"sourcesContent":["import { cn } from '../../lib/utils';\n\nimport React, {\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport {\n  EUserType,\n  IUserGroup,\n  TUser,\n  TUserGroupValue,\n  TUserValue,\n} from '../../ConfigProvider/getUserList';\nimport Tabs from '../../Tabs';\nimport { LocaleContext, getTranslator } from '../../locale/default';\nimport { EMemberPicker, IUser } from '../interface';\nimport { getId } from '../utils';\nimport { isUser, isUserGroup } from '../utils/getUsersWithUserId';\nimport MemberSelection from './MemberSelection';\nimport SelectedMemberTags from './SelectedMemberTags';\nimport SelectorFooter from './SelectorFooter';\nimport UserGroupSelection from './UserGroupSelection';\n\ninterface IPanelProps {\n  type: EMemberPicker;\n  multiple?: boolean;\n  onChange?: (value: TUser) => void;\n  dropdownWidth?: number;\n  value?: TUser | (IUser | IUserGroup);\n  dataList: TUser;\n  onSearchValueChange?: (value: string) => void;\n  onCancel?: () => void;\n  loading: boolean;\n  className?: string;\n  lockedIds: Array<TUserValue | TUserGroupValue>;\n  footer?: ReactNode;\n  renderItem?: (\n    item: IUser | IUserGroup,\n    context: {\n      isSelected: boolean;\n      disabled: boolean;\n      onClick: () => void;\n      onNextLevel?: () => void;\n      originNode: ReactNode;\n    },\n  ) => ReactNode;\n  renderSelectedTag?: (\n    user: IUser | IUserGroup,\n    originNode: ReactNode,\n  ) => ReactNode;\n  filterItem?: (item: IUser | IUserGroup) => boolean;\n  searchValue?: string;\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  } = 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        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        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    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              multiple={false && multiple}\n              lockedIds={lockedIds}\n              loading={props.loading}\n              renderItem={renderItem}\n            ></MemberSelection>\n          )}\n          {type === EMemberPicker.GROUP && (\n            <UserGroupSelection\n              className={'ald-member-picker-member-selection-multiple'}\n              userGroupList={dataList.filter(isUserGroup)}\n              width={(panelwidth - 3) / 2}\n              selectedUsersGroup={selectedUsers.filter(isUserGroup)}\n              onChange={onSelectionChange}\n              onSearchValueChange={onSearchValueChange}\n              multiple={false}\n              lockedIds={lockedIds}\n              loading={props.loading}\n              renderItem={renderItem}\n            ></UserGroupSelection>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAqEA,SAAwB,MAAM,OAAoB;CAChD,MAAM,EAAE,WAAW,WAAW,cAAc;CAC5C,MAAM,IAAI,cAAc,OAAO;CAE/B,MAAM,EACJ,MACA,UACA,eACA,OACA,UACA,UACA,qBACA,WACA,WACA,QACA,UACA,YACA,mBACA,YACA,cAAc,OACZ;CAEJ,MAAM,CAAC,eAAe,eAAe,SAAgB,EAAE,CAAC;CAExD,MAAM,oBAAoB,aACvB,UAAmB,SAA6B;AAC/C,MAAI,SACF,KAAI,SACF,aAAY,CAAC,GAAG,eAAe,KAAK,CAAC;MAErC,aACE,cAAc,QAAQ,SAAS,MAAM,KAAK,KAAK,MAAM,KAAK,CAAC,CAC5D;WAGC,UAAU;AACZ,eAAY,CAAC,KAAK,CAAC;AACnB,cAAW,CAAC,KAAK,CAAC;SACb;AACL,eAAY,EAAE,CAAC;AACf,cAAW,EAAE,CAAC;;IAIpB;EAAC;EAAU;EAAe;EAAS,CACpC;CAED,MAAM,WAAW,aACd,SAA6B;AAC5B,cAAY,cAAc,QAAQ,SAAS,MAAM,KAAK,KAAK,MAAM,KAAK,CAAC,CAAC;IAE1E,CAAC,cAAc,CAChB;CAED,MAAM,aAAa,cAAc;AAC/B,MAAI,cACF,QAAO;WACE,SACT,QAAO;MAEP,QAAO;IAER,CAAC,eAAe,SAAS,CAAC;AAE7B,iBAAgB;AACd,MAAI,MACF,KAAI,MAAM,QAAQ,MAAM,CACtB,aAAY,MAAM;MAElB,aAAY,CAAC,MAAM,CAAC;IAGvB,CAAC,aAAa,MAAM,CAAC;CAExB,MAAM,iBAAiB,kBAAkB;EACvC,MAAM,gBACJ,oBAAC,iBAAD;GACE,WAAW;GACX,UAAU,SAAS,OAAO,OAAO;GACrB;GACZ,QAAQ,aAAa,KAAK;GAC1B,eAAe,cAAc,OAAO,OAAO;GAC3C,UAAU;GACW;GACR;GACb,UAAU;GACC;GACX,SAAS,MAAM;GACH;GACK,CAAA;EAErB,MAAM,qBACJ,oBAAC,oBAAD;GACE,WAAW;GACX,eAAe,SAAS,OAAO,YAAY;GAC/B;GACZ,QAAQ,aAAa,KAAK;GAC1B,oBAAoB,cAAc,OAAO,YAAY;GACrD,UAAU;GACW;GACR;GACb,UAAU;GACC;GACX,SAAS,MAAM;GACH;GACQ,CAAA;AAExB,MAAI,SAAS,cAAc,KACzB,QAAO;AAET,MAAI,SAAS,cAAc,MACzB,QAAO;AAET,MAAI,SAAS,cAAc,KACzB,QACE,oBAAC,MAAD;GACE,UAAA;GACA,wBAAA;GACA,OAAO,CACL;IACE,KAAK;IACL,OAAO,EAAE,aAAa;IACtB,UAAU;IACX,EACD;IACE,KAAK;IACL,OAAO,EAAE,aAAa;IACtB,UAAU;IACX,CACF;GACD,WAAU;GACJ,CAAA;IAGX;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAM;EACN;EACA;EACA;EACD,CAAC;CAIF,MAAM,eACJ,kBAAkB,WAAW,aAAa;AAE5C,QACE,oBAAC,OAAD;EACE,WAAW,GAAG,WAAW,6BAA6B;IACnD,+BAA+B;IAC/B,6BAA6B,CAAC;GAChC,CAAC;EACF,OAAO,EAAE,OAAO,cAAc;YAE7B,WACC,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,OAAD;IAAK,WAAU;cACZ,gBAAgB;IACb,CAAA,EACN,oBAAC,oBAAD;IACE,WAAW;IACI;IACf,QAAQ,aAAa,KAAK;IAChB;IACC;IACX,UAAU;IACS;IACC,CAAA,CAClB;MACN,oBAAC,gBAAD;GACE,WAAW;GACD;GACV,YAAY;AACV,eAAW,cAAc;;GAEnB;GACQ,CAAA,CACjB,EAAA,CAAA,GAEH,qBAAA,UAAA,EAAA,UAAA,CACG,SAAS,cAAc,QACtB,oBAAC,iBAAD;GACE,WAAW;GACX,UAAU,SAAS,OAAO,OAAO;GACjC,OAAO,aAAa;GACpB,UAAU;GACV,eAAe,cAAc,OAAO,OAAO;GACtB;GACrB,UAAU;GACC;GACX,SAAS,MAAM;GACH;GACK,CAAA,EAEpB,SAAS,cAAc,SACtB,oBAAC,oBAAD;GACE,WAAW;GACX,eAAe,SAAS,OAAO,YAAY;GAC3C,QAAQ,aAAa,KAAK;GAC1B,oBAAoB,cAAc,OAAO,YAAY;GACrD,UAAU;GACW;GACrB,UAAU;GACC;GACX,SAAS,MAAM;GACH;GACQ,CAAA,CAEvB,EAAA,CAAA;EAED,CAAA"}

package/dist/MemberPicker/components/SelectedMemberTags.js

@@ -58,13 +58,21 @@ function SelectedMemberTags(props) {
 								count: t.MemberPicker.ban,
 								className: "ald-member-picker-ban-badge"
 							}),
-							!hasLocked && /* @__PURE__ */ jsx(Memo, {
-								size: 20,
+							!hasLocked && /* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": `Remove ${user.name}`,
 								className: "ald-member-picker-close",
-								color: "var(--content-tertiary)",
-								onClick: () => {
-									props.onRemove?.(user);
-								}
+								style: {
+									border: 0,
+									background: "transparent",
+									padding: 0
+								},
+								onClick: () => props.onRemove?.(user),
+								children: /* @__PURE__ */ jsx(Memo, {
+									size: 20,
+									color: "var(--content-tertiary)",
+									"aria-hidden": "true"
+								})
 							})
 						]
 					}, getId(user));

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;