@aloudata/aloudata-design 3.1.6 → 3.1.8

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

package/dist/MemberPicker/dialog/DialogColumns.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+/** 两栏分隔器仅持有比例；指针与键盘共用边界，避免全屏切换后像素宽度失效。 */
+export default function DialogColumns({ children, }: {
+    children: [ReactNode, ReactNode];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/MemberPicker/dialog/DialogColumns.js

@@ -0,0 +1,59 @@
+import useDialogLocale from "./useDialogLocale.js";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/MemberPicker/dialog/DialogColumns.tsx
+/** 两栏分隔器仅持有比例；指针与键盘共用边界，避免全屏切换后像素宽度失效。 */
+function DialogColumns({ children }) {
+	const root = useRef(null);
+	const [percent, setPercent] = useState(58);
+	const t = useDialogLocale();
+	const clamp = (value) => Math.min(70, Math.max(35, value));
+	return /* @__PURE__ */ jsxs("div", {
+		ref: root,
+		className: "tw-grid tw-h-full tw-min-h-0 tw-min-w-0",
+		style: { gridTemplateColumns: `minmax(0, ${percent}fr) 8px minmax(0, ${100 - percent}fr)` },
+		children: [
+			children[0],
+			/* @__PURE__ */ jsxs("div", {
+				role: "separator",
+				tabIndex: 0,
+				"aria-label": t.MemberPickerDialog.resizePanels,
+				"aria-orientation": "vertical",
+				"aria-valuemin": 35,
+				"aria-valuemax": 70,
+				"aria-valuenow": Math.round(percent),
+				className: "tw-group tw-relative tw-flex tw-cursor-col-resize tw-touch-none tw-items-center tw-justify-center tw-rounded-r-50 focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-[var(--focus-ring)]",
+				onKeyDown: (event) => {
+					const offset = event.key === "ArrowLeft" ? -2 : event.key === "ArrowRight" ? 2 : 0;
+					if (offset || event.key === "Home" || event.key === "End") {
+						event.preventDefault();
+						setPercent((current) => event.key === "Home" ? 35 : event.key === "End" ? 70 : clamp(current + offset));
+					}
+				},
+				onPointerDown: (event) => {
+					event.currentTarget.setPointerCapture(event.pointerId);
+				},
+				onPointerMove: (event) => {
+					if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
+					const bounds = root.current?.getBoundingClientRect();
+					if (bounds?.width) setPercent(clamp((event.clientX - bounds.left) / bounds.width * 100));
+				},
+				onPointerUp: (event) => {
+					if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+				},
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "tw-pointer-events-none tw-h-full tw-w-px tw-bg-border-default group-hover:tw-bg-[var(--border-brand-strong)] group-focus-visible:tw-bg-[var(--border-brand-strong)]"
+				}), /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "tw-pointer-events-none tw-absolute tw-h-sp-300 tw-w-full tw-rounded-r-50 tw-border tw-border-solid tw-border-border-default tw-bg-bg-default group-hover:tw-border-[var(--border-brand-strong)] group-focus-visible:tw-border-[var(--border-brand-strong)]"
+				})]
+			}),
+			children[1]
+		]
+	});
+}
+//#endregion
+export { DialogColumns as default };
+
+//# sourceMappingURL=DialogColumns.js.map

package/dist/MemberPicker/dialog/DialogColumns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogColumns.js","names":[],"sources":["../../../src/MemberPicker/dialog/DialogColumns.tsx"],"sourcesContent":["import { useRef, useState, type ReactNode } from 'react';\nimport useDialogLocale from './useDialogLocale';\n\n/** 两栏分隔器仅持有比例；指针与键盘共用边界，避免全屏切换后像素宽度失效。 */\nexport default function DialogColumns({\n  children,\n}: {\n  children: [ReactNode, ReactNode];\n}) {\n  const root = useRef<HTMLDivElement>(null);\n  const [percent, setPercent] = useState(58);\n  const t = useDialogLocale();\n  const clamp = (value: number) => Math.min(70, Math.max(35, value));\n  return (\n    <div\n      ref={root}\n      className=\"tw-grid tw-h-full tw-min-h-0 tw-min-w-0\"\n      style={{\n        gridTemplateColumns: `minmax(0, ${percent}fr) 8px minmax(0, ${\n          100 - percent\n        }fr)`,\n      }}\n    >\n      {children[0]}\n      <div\n        role=\"separator\"\n        tabIndex={0}\n        aria-label={t.MemberPickerDialog.resizePanels}\n        aria-orientation=\"vertical\"\n        aria-valuemin={35}\n        aria-valuemax={70}\n        aria-valuenow={Math.round(percent)}\n        className=\"tw-group tw-relative tw-flex tw-cursor-col-resize tw-touch-none tw-items-center tw-justify-center tw-rounded-r-50 focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-[var(--focus-ring)]\"\n        onKeyDown={(event) => {\n          const offset =\n            event.key === 'ArrowLeft' ? -2 : event.key === 'ArrowRight' ? 2 : 0;\n          if (offset || event.key === 'Home' || event.key === 'End') {\n            event.preventDefault();\n            setPercent((current) =>\n              event.key === 'Home'\n                ? 35\n                : event.key === 'End'\n                ? 70\n                : clamp(current + offset),\n            );\n          }\n        }}\n        onPointerDown={(event) => {\n          event.currentTarget.setPointerCapture(event.pointerId);\n        }}\n        onPointerMove={(event) => {\n          if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;\n          const bounds = root.current?.getBoundingClientRect();\n          if (bounds?.width)\n            setPercent(\n              clamp(((event.clientX - bounds.left) / bounds.width) * 100),\n            );\n        }}\n        onPointerUp={(event) => {\n          if (event.currentTarget.hasPointerCapture(event.pointerId))\n            event.currentTarget.releasePointerCapture(event.pointerId);\n        }}\n      >\n        <span\n          aria-hidden=\"true\"\n          className=\"tw-pointer-events-none tw-h-full tw-w-px tw-bg-border-default group-hover:tw-bg-[var(--border-brand-strong)] group-focus-visible:tw-bg-[var(--border-brand-strong)]\"\n        />\n        <span\n          aria-hidden=\"true\"\n          className=\"tw-pointer-events-none tw-absolute tw-h-sp-300 tw-w-full tw-rounded-r-50 tw-border tw-border-solid tw-border-border-default tw-bg-bg-default group-hover:tw-border-[var(--border-brand-strong)] group-focus-visible:tw-border-[var(--border-brand-strong)]\"\n        />\n      </div>\n      {children[1]}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAIA,SAAwB,cAAc,EACpC,YAGC;CACD,MAAM,OAAO,OAAuB,KAAK;CACzC,MAAM,CAAC,SAAS,cAAc,SAAS,GAAG;CAC1C,MAAM,IAAI,iBAAiB;CAC3B,MAAM,SAAS,UAAkB,KAAK,IAAI,IAAI,KAAK,IAAI,IAAI,MAAM,CAAC;AAClE,QACE,qBAAC,OAAD;EACE,KAAK;EACL,WAAU;EACV,OAAO,EACL,qBAAqB,aAAa,QAAQ,oBACxC,MAAM,QACP,MACF;YAPH;GASG,SAAS;GACV,qBAAC,OAAD;IACE,MAAK;IACL,UAAU;IACV,cAAY,EAAE,mBAAmB;IACjC,oBAAiB;IACjB,iBAAe;IACf,iBAAe;IACf,iBAAe,KAAK,MAAM,QAAQ;IAClC,WAAU;IACV,YAAY,UAAU;KACpB,MAAM,SACJ,MAAM,QAAQ,cAAc,KAAK,MAAM,QAAQ,eAAe,IAAI;AACpE,SAAI,UAAU,MAAM,QAAQ,UAAU,MAAM,QAAQ,OAAO;AACzD,YAAM,gBAAgB;AACtB,kBAAY,YACV,MAAM,QAAQ,SACV,KACA,MAAM,QAAQ,QACd,KACA,MAAM,UAAU,OAAO,CAC5B;;;IAGL,gBAAgB,UAAU;AACxB,WAAM,cAAc,kBAAkB,MAAM,UAAU;;IAExD,gBAAgB,UAAU;AACxB,SAAI,CAAC,MAAM,cAAc,kBAAkB,MAAM,UAAU,CAAE;KAC7D,MAAM,SAAS,KAAK,SAAS,uBAAuB;AACpD,SAAI,QAAQ,MACV,YACE,OAAQ,MAAM,UAAU,OAAO,QAAQ,OAAO,QAAS,IAAI,CAC5D;;IAEL,cAAc,UAAU;AACtB,SAAI,MAAM,cAAc,kBAAkB,MAAM,UAAU,CACxD,OAAM,cAAc,sBAAsB,MAAM,UAAU;;cApChE,CAuCE,oBAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACV,CAAA,EACF,oBAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACV,CAAA,CACE;;GACL,SAAS;GACN"}

package/dist/MemberPicker/dialog/DialogContent.d.ts

@@ -0,0 +1,3 @@
+import { MemberPickerDialogProps } from './MemberPickerDialog.js';
+/** 打开期间拥有选择草稿；确认才通知业务，取消与卸载均释放请求和临时选择。 */
+export default function DialogContent({ value, onChange, onClose, type, lockedIds, filterItem, canEnterGroup, renderItem, renderSelectedTag, zIndex, footer, onCancel, }: MemberPickerDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/MemberPicker/dialog/DialogContent.js

@@ -0,0 +1,109 @@
+import IconButton from "../../IconButton/index.js";
+import Modal from "../../Modal/index.js";
+import Tabs from "../../Tabs/index.js";
+import SelectorFooter from "../components/SelectorFooter.js";
+import { EMemberPicker } from "../interface.js";
+import useDialogLocale from "./useDialogLocale.js";
+import DialogColumns from "./DialogColumns.js";
+import SelectedMemberPanel from "./SelectedMemberPanel.js";
+import UserCandidatePanel from "./UserCandidatePanel.js";
+import UserGroupCandidatePanel from "./UserGroupCandidatePanel.js";
+import { useMemberPickerDraft } from "./useMemberPickerDraft.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MaximizeLine, MinimizeLine } from "@aloudata/icons-react";
+//#region src/MemberPicker/dialog/DialogContent.tsx
+/** 打开期间拥有选择草稿；确认才通知业务，取消与卸载均释放请求和临时选择。 */
+function DialogContent({ value, onChange, onClose, type = EMemberPicker.BOTH, lockedIds, filterItem, canEnterGroup, renderItem, renderSelectedTag, zIndex, footer, onCancel }) {
+	const t = useDialogLocale();
+	const [fullscreen, setFullscreen] = useState(false);
+	const draft = useMemberPickerDraft({
+		value,
+		onChange,
+		type,
+		lockedIds
+	});
+	const panelProps = {
+		selectedByKey: draft.selectedByKey,
+		onToggle: draft.toggleMember,
+		onToggleAll: draft.toggleMembers,
+		lockedIds,
+		filterItem,
+		renderItem
+	};
+	const confirm = () => {
+		if (draft.hydrating) return;
+		draft.confirm();
+		onClose();
+	};
+	const cancel = () => {
+		onCancel?.();
+		onClose();
+	};
+	const users = /* @__PURE__ */ jsx(UserCandidatePanel, { ...panelProps });
+	const groups = /* @__PURE__ */ jsx(UserGroupCandidatePanel, {
+		...panelProps,
+		canEnterGroup
+	});
+	return /* @__PURE__ */ jsx(Modal, {
+		open: true,
+		centered: true,
+		paddingLess: true,
+		zIndex,
+		width: fullscreen ? "calc(100vw - 24px)" : "min(800px, calc(100vw - 32px))",
+		title: /* @__PURE__ */ jsxs("div", {
+			className: "tw-flex tw-items-center tw-gap-sp-150",
+			children: [/* @__PURE__ */ jsx("span", { children: t.MemberPickerDialog.title }), /* @__PURE__ */ jsx(IconButton, {
+				size: "small",
+				"aria-label": fullscreen ? t.MemberPickerDialog.exitMaximize : t.MemberPickerDialog.maximize,
+				tooltip: { title: fullscreen ? t.MemberPickerDialog.exitMaximize : t.MemberPickerDialog.maximize },
+				icon: fullscreen ? /* @__PURE__ */ jsx(MinimizeLine, {}) : /* @__PURE__ */ jsx(MaximizeLine, {}),
+				onClick: () => setFullscreen((current) => !current)
+			})]
+		}),
+		okText: t.MemberPickerDialog.ok,
+		cancelText: t.MemberPickerDialog.cancel,
+		okButtonProps: { disabled: draft.hydrating },
+		onOk: confirm,
+		footer: footer ? /* @__PURE__ */ jsx(SelectorFooter, {
+			footer,
+			onOk: confirm,
+			onCancel: cancel
+		}) : void 0,
+		onCancel: cancel,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "ald-member-picker-dialog tw-min-h-0 tw-p-sp-200",
+			style: { height: fullscreen ? "calc(100dvh - 150px)" : "min(560px, calc(100dvh - 180px))" },
+			children: /* @__PURE__ */ jsxs(DialogColumns, { children: [/* @__PURE__ */ jsx("div", {
+				className: "tw-h-full tw-min-w-0 tw-overflow-hidden",
+				children: type === EMemberPicker.BOTH ? /* @__PURE__ */ jsx(Tabs, {
+					compact: true,
+					adaptHeight: true,
+					className: "tw-h-full",
+					activeKey: draft.activeTab,
+					onChange: (key) => {
+						if (key === EMemberPicker.USER || key === EMemberPicker.GROUP) draft.setActiveTab(key);
+					},
+					items: [{
+						key: EMemberPicker.USER,
+						label: t.MemberPickerDialog.user,
+						children: users
+					}, {
+						key: EMemberPicker.GROUP,
+						label: t.MemberPickerDialog.userGroup,
+						children: groups
+					}]
+				}) : type === EMemberPicker.GROUP ? groups : users
+			}), /* @__PURE__ */ jsx(SelectedMemberPanel, {
+				members: draft.selectedMembers,
+				lockedIds,
+				onRemove: draft.removeMember,
+				renderSelectedTag
+			})] })
+		})
+	});
+}
+//#endregion
+export { DialogContent as default };
+
+//# sourceMappingURL=DialogContent.js.map

package/dist/MemberPicker/dialog/DialogContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogContent.js","names":[],"sources":["../../../src/MemberPicker/dialog/DialogContent.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { MaximizeLine, MinimizeLine } from '@aloudata/icons-react';\nimport IconButton from '../../IconButton';\nimport Modal from '../../Modal';\nimport Tabs from '../../Tabs';\nimport SelectorFooter from '../components/SelectorFooter';\nimport { EMemberPicker } from '../interface';\nimport type { MemberPickerDialogProps } from './MemberPickerDialog';\nimport DialogColumns from './DialogColumns';\nimport SelectedMemberPanel from './SelectedMemberPanel';\nimport UserCandidatePanel from './UserCandidatePanel';\nimport UserGroupCandidatePanel from './UserGroupCandidatePanel';\nimport { useMemberPickerDraft } from './useMemberPickerDraft';\nimport useDialogLocale from './useDialogLocale';\n\n/** 打开期间拥有选择草稿；确认才通知业务，取消与卸载均释放请求和临时选择。 */\nexport default function DialogContent({\n  value,\n  onChange,\n  onClose,\n  type = EMemberPicker.BOTH,\n  lockedIds,\n  filterItem,\n  canEnterGroup,\n  renderItem,\n  renderSelectedTag,\n  zIndex,\n  footer,\n  onCancel,\n}: MemberPickerDialogProps) {\n  const t = useDialogLocale();\n  const [fullscreen, setFullscreen] = useState(false);\n  const draft = useMemberPickerDraft({ value, onChange, type, lockedIds });\n  const panelProps = {\n    selectedByKey: draft.selectedByKey,\n    onToggle: draft.toggleMember,\n    onToggleAll: draft.toggleMembers,\n    lockedIds,\n    filterItem,\n    renderItem,\n  };\n  const confirm = () => {\n    if (draft.hydrating) return;\n    draft.confirm();\n    onClose();\n  };\n  const cancel = () => {\n    onCancel?.();\n    onClose();\n  };\n  const users = <UserCandidatePanel {...panelProps} />;\n  const groups = (\n    <UserGroupCandidatePanel {...panelProps} canEnterGroup={canEnterGroup} />\n  );\n  return (\n    <Modal\n      open\n      centered\n      paddingLess\n      zIndex={zIndex}\n      width={\n        fullscreen ? 'calc(100vw - 24px)' : 'min(800px, calc(100vw - 32px))'\n      }\n      title={\n        <div className=\"tw-flex tw-items-center tw-gap-sp-150\">\n          <span>{t.MemberPickerDialog.title}</span>\n          <IconButton\n            size=\"small\"\n            aria-label={\n              fullscreen\n                ? t.MemberPickerDialog.exitMaximize\n                : t.MemberPickerDialog.maximize\n            }\n            tooltip={{\n              title: fullscreen\n                ? t.MemberPickerDialog.exitMaximize\n                : t.MemberPickerDialog.maximize,\n            }}\n            icon={fullscreen ? <MinimizeLine /> : <MaximizeLine />}\n            onClick={() => setFullscreen((current) => !current)}\n          />\n        </div>\n      }\n      okText={t.MemberPickerDialog.ok}\n      cancelText={t.MemberPickerDialog.cancel}\n      okButtonProps={{ disabled: draft.hydrating }}\n      onOk={confirm}\n      footer={\n        footer ? (\n          <SelectorFooter footer={footer} onOk={confirm} onCancel={cancel} />\n        ) : undefined\n      }\n      onCancel={cancel}\n    >\n      <div\n        className=\"ald-member-picker-dialog tw-min-h-0 tw-p-sp-200\"\n        style={{\n          height: fullscreen\n            ? 'calc(100dvh - 150px)'\n            : 'min(560px, calc(100dvh - 180px))',\n        }}\n      >\n        <DialogColumns>\n          <div className=\"tw-h-full tw-min-w-0 tw-overflow-hidden\">\n            {type === EMemberPicker.BOTH ? (\n              <Tabs\n                compact\n                adaptHeight\n                className=\"tw-h-full\"\n                activeKey={draft.activeTab}\n                onChange={(key) => {\n                  if (key === EMemberPicker.USER || key === EMemberPicker.GROUP)\n                    draft.setActiveTab(key);\n                }}\n                items={[\n                  {\n                    key: EMemberPicker.USER,\n                    label: t.MemberPickerDialog.user,\n                    children: users,\n                  },\n                  {\n                    key: EMemberPicker.GROUP,\n                    label: t.MemberPickerDialog.userGroup,\n                    children: groups,\n                  },\n                ]}\n              />\n            ) : type === EMemberPicker.GROUP ? (\n              groups\n            ) : (\n              users\n            )}\n          </div>\n          <SelectedMemberPanel\n            members={draft.selectedMembers}\n            lockedIds={lockedIds}\n            onRemove={draft.removeMember}\n            renderSelectedTag={renderSelectedTag}\n          />\n        </DialogColumns>\n      </div>\n    </Modal>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,SAAwB,cAAc,EACpC,OACA,UACA,SACA,OAAO,cAAc,MACrB,WACA,YACA,eACA,YACA,mBACA,QACA,QACA,YAC0B;CAC1B,MAAM,IAAI,iBAAiB;CAC3B,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,QAAQ,qBAAqB;EAAE;EAAO;EAAU;EAAM;EAAW,CAAC;CACxE,MAAM,aAAa;EACjB,eAAe,MAAM;EACrB,UAAU,MAAM;EAChB,aAAa,MAAM;EACnB;EACA;EACA;EACD;CACD,MAAM,gBAAgB;AACpB,MAAI,MAAM,UAAW;AACrB,QAAM,SAAS;AACf,WAAS;;CAEX,MAAM,eAAe;AACnB,cAAY;AACZ,WAAS;;CAEX,MAAM,QAAQ,oBAAC,oBAAD,EAAoB,GAAI,YAAc,CAAA;CACpD,MAAM,SACJ,oBAAC,yBAAD;EAAyB,GAAI;EAA2B;EAAiB,CAAA;AAE3E,QACE,oBAAC,OAAD;EACE,MAAA;EACA,UAAA;EACA,aAAA;EACQ;EACR,OACE,aAAa,uBAAuB;EAEtC,OACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,QAAD,EAAA,UAAO,EAAE,mBAAmB,OAAa,CAAA,EACzC,oBAAC,YAAD;IACE,MAAK;IACL,cACE,aACI,EAAE,mBAAmB,eACrB,EAAE,mBAAmB;IAE3B,SAAS,EACP,OAAO,aACH,EAAE,mBAAmB,eACrB,EAAE,mBAAmB,UAC1B;IACD,MAAM,aAAa,oBAAC,cAAD,EAAgB,CAAA,GAAG,oBAAC,cAAD,EAAgB,CAAA;IACtD,eAAe,eAAe,YAAY,CAAC,QAAQ;IACnD,CAAA,CACE;;EAER,QAAQ,EAAE,mBAAmB;EAC7B,YAAY,EAAE,mBAAmB;EACjC,eAAe,EAAE,UAAU,MAAM,WAAW;EAC5C,MAAM;EACN,QACE,SACE,oBAAC,gBAAD;GAAwB;GAAQ,MAAM;GAAS,UAAU;GAAU,CAAA,GACjE;EAEN,UAAU;YAEV,oBAAC,OAAD;GACE,WAAU;GACV,OAAO,EACL,QAAQ,aACJ,yBACA,oCACL;aAED,qBAAC,eAAD,EAAA,UAAA,CACE,oBAAC,OAAD;IAAK,WAAU;cACZ,SAAS,cAAc,OACtB,oBAAC,MAAD;KACE,SAAA;KACA,aAAA;KACA,WAAU;KACV,WAAW,MAAM;KACjB,WAAW,QAAQ;AACjB,UAAI,QAAQ,cAAc,QAAQ,QAAQ,cAAc,MACtD,OAAM,aAAa,IAAI;;KAE3B,OAAO,CACL;MACE,KAAK,cAAc;MACnB,OAAO,EAAE,mBAAmB;MAC5B,UAAU;MACX,EACD;MACE,KAAK,cAAc;MACnB,OAAO,EAAE,mBAAmB;MAC5B,UAAU;MACX,CACF;KACD,CAAA,GACA,SAAS,cAAc,QACzB,SAEA;IAEE,CAAA,EACN,oBAAC,qBAAD;IACE,SAAS,MAAM;IACJ;IACX,UAAU,MAAM;IACG;IACnB,CAAA,CACY,EAAA,CAAA;GACZ,CAAA;EACA,CAAA"}

package/dist/MemberPicker/dialog/MemberOption.d.ts

@@ -0,0 +1,16 @@
+import { IMemberPickerProps as MemberPickerProps } from '../interface';
+import { TMember } from './types.js';
+interface IProps {
+    member: TMember;
+    selected: boolean;
+    locked: boolean;
+    onToggle?: (member: TMember) => void;
+    onRemove?: (member: TMember) => void;
+    onOpenGroup?: () => void;
+    renderItem?: MemberPickerProps['renderItem'];
+    searchValue?: string;
+    renderSelectedTag?: MemberPickerProps['renderSelectedTag'];
+}
+/** 候选项统一用名称切换选择；用户组仅通过右侧独立入口进入下级。 */
+export default function MemberOption({ member, selected, locked, onToggle, onRemove, onOpenGroup, renderItem, renderSelectedTag, searchValue, }: IProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/MemberPicker/dialog/MemberOption.js

@@ -0,0 +1,101 @@
+import { cn } from "../../lib/utils.js";
+import Avatar from "../../Avatar/index.js";
+import Button_default from "../../Button/index.js";
+import Checkbox from "../../Checkbox/index.js";
+import Tooltip from "../../Tooltip/index.js";
+import Tag from "../../Tag/index.js";
+import { EUserType } from "../../ConfigProvider/getUserList.js";
+import HighlightText from "../../HighlightText/index.js";
+import useDialogLocale from "./useDialogLocale.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/MemberPicker/dialog/MemberOption.tsx
+/** 候选项统一用名称切换选择；用户组仅通过右侧独立入口进入下级。 */
+function MemberOption({ member, selected, locked, onToggle, onRemove, onOpenGroup, renderItem, renderSelectedTag, searchValue }) {
+	const t = useDialogLocale();
+	const toggle = () => onToggle?.(member);
+	const displayName = member.type === EUserType.USER_GROUP && searchValue?.trim() && member.path?.length ? member.path.map((node) => node.name).join(" / ") : member.name;
+	const ancestors = member.type === EUserType.USER_GROUP && searchValue?.trim() ? member.path?.slice(0, -1).map((node) => node.name).join(" / ") : void 0;
+	const nameNode = /* @__PURE__ */ jsx(Tooltip, {
+		title: displayName,
+		children: /* @__PURE__ */ jsxs("span", {
+			title: displayName,
+			className: cn("tw-min-w-0 tw-flex-1 tw-truncate tw-text-typography-body-dense", locked ? "tw-text-content-disabled" : "tw-text-content-primary"),
+			children: [ancestors && /* @__PURE__ */ jsxs("span", {
+				className: "tw-text-content-secondary",
+				children: [ancestors, " / "]
+			}), /* @__PURE__ */ jsx(HighlightText, {
+				keyword: searchValue?.trim() ?? "",
+				children: member.name ?? ""
+			})]
+		})
+	});
+	const renderedCandidate = renderItem?.(member, {
+		isSelected: selected,
+		disabled: locked,
+		onClick: toggle,
+		onNextLevel: onOpenGroup,
+		originNode: nameNode
+	});
+	const content = (onRemove ? renderSelectedTag?.(member, nameNode) : void 0) ?? renderedCandidate ?? nameNode;
+	if (onRemove) return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Tag, {
+		closable: true,
+		disabled: locked,
+		status: "default",
+		mode: "border",
+		title: member.name,
+		className: "tw-min-w-0 tw-max-w-full",
+		onClose: (event) => {
+			event.stopPropagation();
+			onRemove(member);
+		},
+		children: content
+	}) });
+	return /* @__PURE__ */ jsxs("div", {
+		className: "tw-flex tw-min-w-0 tw-items-center tw-gap-sp-100 tw-rounded-r-50 tw-px-sp-150 tw-py-sp-100 hover:tw-bg-bg-subtle",
+		onClick: locked ? void 0 : toggle,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				onClick: (event) => event.stopPropagation(),
+				children: /* @__PURE__ */ jsx(Checkbox, {
+					checked: selected,
+					disabled: locked,
+					"aria-label": member.name,
+					onChange: toggle
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "tw-flex tw-shrink-0",
+				children: /* @__PURE__ */ jsx(Avatar, {
+					size: 20,
+					type: member.type === EUserType.USER ? "user" : "team"
+				})
+			}),
+			/* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled: locked,
+				className: "tw-flex tw-min-w-0 tw-flex-1 tw-items-center tw-border-0 tw-bg-transparent tw-p-0 tw-text-left focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-[var(--focus-ring)]",
+				onClick: (event) => {
+					event.stopPropagation();
+					toggle();
+				},
+				children: content
+			}) }),
+			onOpenGroup ? /* @__PURE__ */ jsx(Button_default, {
+				type: "link",
+				size: "small",
+				className: "tw-ml-auto tw-shrink-0",
+				disabled: locked,
+				onClick: (event) => {
+					event.stopPropagation();
+					onOpenGroup();
+				},
+				children: t.MemberPickerDialog.subLevel
+			}) : null
+		]
+	});
+}
+//#endregion
+export { MemberOption as default };
+
+//# sourceMappingURL=MemberOption.js.map

package/dist/MemberPicker/dialog/MemberOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MemberOption.js","names":[],"sources":["../../../src/MemberPicker/dialog/MemberOption.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Button from '../../Button';\nimport Avatar from '../../Avatar';\nimport { cn } from '../../lib/utils';\nimport Checkbox from '../../Checkbox';\nimport { EUserType } from '../../ConfigProvider/getUserList';\nimport Tag from '../../Tag';\nimport Tooltip from '../../Tooltip';\nimport HighlightText from '../../HighlightText';\nimport type { IMemberPickerProps as MemberPickerProps } from '../interface';\nimport useDialogLocale from './useDialogLocale';\nimport type { TMember } from './types';\n\ninterface IProps {\n  member: TMember;\n  selected: boolean;\n  locked: boolean;\n  onToggle?: (member: TMember) => void;\n  onRemove?: (member: TMember) => void;\n  onOpenGroup?: () => void;\n  renderItem?: MemberPickerProps['renderItem'];\n  searchValue?: string;\n  renderSelectedTag?: MemberPickerProps['renderSelectedTag'];\n}\n\n/** 候选项统一用名称切换选择；用户组仅通过右侧独立入口进入下级。 */\nexport default function MemberOption({\n  member,\n  selected,\n  locked,\n  onToggle,\n  onRemove,\n  onOpenGroup,\n  renderItem,\n  renderSelectedTag,\n  searchValue,\n}: IProps) {\n  const t = useDialogLocale();\n  const toggle = () => onToggle?.(member);\n  const displayName =\n    member.type === EUserType.USER_GROUP &&\n    searchValue?.trim() &&\n    member.path?.length\n      ? member.path.map((node) => node.name).join(' / ')\n      : member.name;\n  // 祖先路径提供定位上下文，命中名称仍使用正文层级；标签保持原名称。\n  const ancestors =\n    member.type === EUserType.USER_GROUP && searchValue?.trim()\n      ? member.path\n          ?.slice(0, -1)\n          .map((node) => node.name)\n          .join(' / ')\n      : undefined;\n  const nameTextNode = (\n    <span\n      title={displayName}\n      className={cn(\n        'tw-min-w-0 tw-flex-1 tw-truncate tw-text-typography-body-dense',\n        locked ? 'tw-text-content-disabled' : 'tw-text-content-primary',\n      )}\n    >\n      {ancestors && (\n        <span className=\"tw-text-content-secondary\">{ancestors} / </span>\n      )}\n      <HighlightText keyword={searchValue?.trim() ?? ''}>\n        {member.name ?? ''}\n      </HighlightText>\n    </span>\n  );\n  const nameNode = <Tooltip title={displayName}>{nameTextNode}</Tooltip>;\n  const renderedCandidate = renderItem?.(member, {\n    isSelected: selected,\n    disabled: locked,\n    onClick: toggle,\n    onNextLevel: onOpenGroup,\n    originNode: nameNode,\n  });\n  const renderedSelected = onRemove\n    ? renderSelectedTag?.(member, nameNode)\n    : undefined;\n  const content: ReactNode = renderedSelected ?? renderedCandidate ?? nameNode;\n\n  if (onRemove) {\n    return (\n      <>\n        <Tag\n          closable\n          disabled={locked}\n          status=\"default\"\n          mode=\"border\"\n          title={member.name}\n          className=\"tw-min-w-0 tw-max-w-full\"\n          onClose={(event) => {\n            event.stopPropagation();\n            onRemove(member);\n          }}\n        >\n          {content}\n        </Tag>\n      </>\n    );\n  }\n\n  return (\n    <div\n      className=\"tw-flex tw-min-w-0 tw-items-center tw-gap-sp-100 tw-rounded-r-50 tw-px-sp-150 tw-py-sp-100 hover:tw-bg-bg-subtle\"\n      onClick={locked ? undefined : toggle}\n    >\n      <span onClick={(event) => event.stopPropagation()}>\n        <Checkbox\n          checked={selected}\n          disabled={locked}\n          aria-label={member.name}\n          onChange={toggle}\n        />\n      </span>\n      <span aria-hidden=\"true\" className=\"tw-flex tw-shrink-0\">\n        <Avatar\n          size={20}\n          type={member.type === EUserType.USER ? 'user' : 'team'}\n        />\n      </span>\n      <>\n        <button\n          type=\"button\"\n          disabled={locked}\n          className=\"tw-flex tw-min-w-0 tw-flex-1 tw-items-center tw-border-0 tw-bg-transparent tw-p-0 tw-text-left focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-[var(--focus-ring)]\"\n          onClick={(event) => {\n            event.stopPropagation();\n            toggle();\n          }}\n        >\n          {content}\n        </button>\n      </>\n      {onOpenGroup ? (\n        <Button\n          type=\"link\"\n          size=\"small\"\n          className=\"tw-ml-auto tw-shrink-0\"\n          disabled={locked}\n          onClick={(event) => {\n            event.stopPropagation();\n            onOpenGroup();\n          }}\n        >\n          {t.MemberPickerDialog.subLevel}\n        </Button>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AA0BA,SAAwB,aAAa,EACnC,QACA,UACA,QACA,UACA,UACA,aACA,YACA,mBACA,eACS;CACT,MAAM,IAAI,iBAAiB;CAC3B,MAAM,eAAe,WAAW,OAAO;CACvC,MAAM,cACJ,OAAO,SAAS,UAAU,cAC1B,aAAa,MAAM,IACnB,OAAO,MAAM,SACT,OAAO,KAAK,KAAK,SAAS,KAAK,KAAK,CAAC,KAAK,MAAM,GAChD,OAAO;CAEb,MAAM,YACJ,OAAO,SAAS,UAAU,cAAc,aAAa,MAAM,GACvD,OAAO,MACH,MAAM,GAAG,GAAG,CACb,KAAK,SAAS,KAAK,KAAK,CACxB,KAAK,MAAM,GACd;CAiBN,MAAM,WAAW,oBAAC,SAAD;EAAS,OAAO;YAf/B,qBAAC,QAAD;GACE,OAAO;GACP,WAAW,GACT,kEACA,SAAS,6BAA6B,0BACvC;aALH,CAOG,aACC,qBAAC,QAAD;IAAM,WAAU;cAAhB,CAA6C,WAAU,MAAU;OAEnE,oBAAC,eAAD;IAAe,SAAS,aAAa,MAAM,IAAI;cAC5C,OAAO,QAAQ;IACF,CAAA,CACX;;EAE6D,CAAA;CACtE,MAAM,oBAAoB,aAAa,QAAQ;EAC7C,YAAY;EACZ,UAAU;EACV,SAAS;EACT,aAAa;EACb,YAAY;EACb,CAAC;CAIF,MAAM,WAHmB,WACrB,oBAAoB,QAAQ,SAAS,GACrC,WAC2C,qBAAqB;AAEpE,KAAI,SACF,QACE,oBAAA,UAAA,EAAA,UACE,oBAAC,KAAD;EACE,UAAA;EACA,UAAU;EACV,QAAO;EACP,MAAK;EACL,OAAO,OAAO;EACd,WAAU;EACV,UAAU,UAAU;AAClB,SAAM,iBAAiB;AACvB,YAAS,OAAO;;YAGjB;EACG,CAAA,EACL,CAAA;AAIP,QACE,qBAAC,OAAD;EACE,WAAU;EACV,SAAS,SAAS,SAAY;YAFhC;GAIE,oBAAC,QAAD;IAAM,UAAU,UAAU,MAAM,iBAAiB;cAC/C,oBAAC,UAAD;KACE,SAAS;KACT,UAAU;KACV,cAAY,OAAO;KACnB,UAAU;KACV,CAAA;IACG,CAAA;GACP,oBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;cACjC,oBAAC,QAAD;KACE,MAAM;KACN,MAAM,OAAO,SAAS,UAAU,OAAO,SAAS;KAChD,CAAA;IACG,CAAA;GACP,oBAAA,UAAA,EAAA,UACE,oBAAC,UAAD;IACE,MAAK;IACL,UAAU;IACV,WAAU;IACV,UAAU,UAAU;AAClB,WAAM,iBAAiB;AACvB,aAAQ;;cAGT;IACM,CAAA,EACR,CAAA;GACF,cACC,oBAAC,gBAAD;IACE,MAAK;IACL,MAAK;IACL,WAAU;IACV,UAAU;IACV,UAAU,UAAU;AAClB,WAAM,iBAAiB;AACvB,kBAAa;;cAGd,EAAE,mBAAmB;IACf,CAAA,GACP;GACA"}

package/dist/MemberPicker/dialog/MemberPickerDialog.d.ts

@@ -0,0 +1,11 @@
+import { TUser } from '../../ConfigProvider/getUserList';
+import { IBaseMemberSelectorProps } from '../interface';
+/** 独立弹窗公开契约，数据从最近的 ConfigProvider 读取。 */
+export interface MemberPickerDialogProps extends Pick<IBaseMemberSelectorProps, 'value' | 'type' | 'lockedIds' | 'filterItem' | 'canEnterGroup' | 'renderItem' | 'renderSelectedTag' | 'footer' | 'onCancel'> {
+    open: boolean;
+    onClose: () => void;
+    onChange?: (members: TUser) => void;
+    zIndex?: number;
+}
+/** 关闭时不挂载内容，避免关闭态请求和选择草稿串入下次打开。 */
+export default function MemberPickerDialog(props: MemberPickerDialogProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/MemberPicker/dialog/MemberPickerDialog.js

@@ -0,0 +1,11 @@
+import DialogContent from "./DialogContent.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/MemberPicker/dialog/MemberPickerDialog.tsx
+/** 关闭时不挂载内容，避免关闭态请求和选择草稿串入下次打开。 */
+function MemberPickerDialog(props) {
+	return props.open ? /* @__PURE__ */ jsx(DialogContent, { ...props }) : null;
+}
+//#endregion
+export { MemberPickerDialog as default };
+
+//# sourceMappingURL=MemberPickerDialog.js.map

package/dist/MemberPicker/dialog/MemberPickerDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MemberPickerDialog.js","names":[],"sources":["../../../src/MemberPicker/dialog/MemberPickerDialog.tsx"],"sourcesContent":["import type { TUser } from '../../ConfigProvider/getUserList';\nimport type { IBaseMemberSelectorProps } from '../interface';\nimport DialogContent from './DialogContent';\n\n/** 独立弹窗公开契约，数据从最近的 ConfigProvider 读取。 */\nexport interface MemberPickerDialogProps\n  extends Pick<\n    IBaseMemberSelectorProps,\n    | 'value'\n    | 'type'\n    | 'lockedIds'\n    | 'filterItem'\n    | 'canEnterGroup'\n    | 'renderItem'\n    | 'renderSelectedTag'\n    | 'footer'\n    | 'onCancel'\n  > {\n  open: boolean;\n  onClose: () => void;\n  onChange?: (members: TUser) => void;\n  zIndex?: number;\n}\n\n/** 关闭时不挂载内容，避免关闭态请求和选择草稿串入下次打开。 */\nexport default function MemberPickerDialog(props: MemberPickerDialogProps) {\n  return props.open ? <DialogContent {...props} /> : null;\n}\n"],"mappings":";;;;AAyBA,SAAwB,mBAAmB,OAAgC;AACzE,QAAO,MAAM,OAAO,oBAAC,eAAD,EAAe,GAAI,OAAS,CAAA,GAAG"}

package/dist/MemberPicker/dialog/SelectedMemberPanel.d.ts

@@ -0,0 +1,12 @@
+import { IMemberPickerProps as MemberPickerProps } from '../interface';
+import { TUserGroupValue, TUserValue, TUser } from '../../ConfigProvider/getUserList';
+import { TMember } from './types.js';
+interface IProps {
+    members: TUser;
+    lockedIds?: Array<TUserValue | TUserGroupValue>;
+    onRemove: (member: TMember) => void;
+    renderSelectedTag?: MemberPickerProps['renderSelectedTag'];
+}
+/** 用户和用户组共享一个已选区，顺序直接来自不可变选择 Map。 */
+export default function SelectedMemberPanel({ members, lockedIds, onRemove, renderSelectedTag, }: IProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/MemberPicker/dialog/SelectedMemberPanel.js

@@ -0,0 +1,37 @@
+import Empty from "../../Empty/index.js";
+import useDialogLocale from "./useDialogLocale.js";
+import { getMemberKey, isMemberLocked } from "./helper.js";
+import MemberOption from "./MemberOption.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/MemberPicker/dialog/SelectedMemberPanel.tsx
+/** 用户和用户组共享一个已选区，顺序直接来自不可变选择 Map。 */
+function SelectedMemberPanel({ members, lockedIds = [], onRemove, renderSelectedTag }) {
+	const t = useDialogLocale();
+	return /* @__PURE__ */ jsxs("section", {
+		className: "tw-flex tw-h-full tw-min-h-0 tw-flex-col tw-overflow-hidden",
+		"data-testid": "selected-member-panel",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "tw-flex tw-h-10 tw-shrink-0 tw-items-center tw-gap-sp-100 tw-border-b tw-border-solid tw-border-border-default tw-px-sp-150 tw-text-content-primary tw-text-typography-label",
+			children: [t.MemberPickerDialog.selected, /* @__PURE__ */ jsx("span", {
+				className: "tw-text-content-secondary tw-text-typography-caption",
+				children: members.length
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "tw-min-h-0 tw-flex-1 tw-overflow-auto tw-p-sp-150",
+			children: !members.length ? /* @__PURE__ */ jsx(Empty, { description: t.MemberPickerDialog.emptySelected }) : /* @__PURE__ */ jsx("div", {
+				className: "tw-flex tw-flex-wrap tw-content-start tw-gap-sp-100",
+				children: members.map((member) => /* @__PURE__ */ jsx(MemberOption, {
+					member,
+					selected: true,
+					locked: isMemberLocked(member, lockedIds),
+					onRemove,
+					renderSelectedTag
+				}, getMemberKey(member)))
+			})
+		})]
+	});
+}
+//#endregion
+export { SelectedMemberPanel as default };
+
+//# sourceMappingURL=SelectedMemberPanel.js.map

package/dist/MemberPicker/dialog/SelectedMemberPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedMemberPanel.js","names":[],"sources":["../../../src/MemberPicker/dialog/SelectedMemberPanel.tsx"],"sourcesContent":["import Empty from '../../Empty';\nimport type { IMemberPickerProps as MemberPickerProps } from '../interface';\nimport type {\n  TUserGroupValue,\n  TUserValue,\n} from '../../ConfigProvider/getUserList';\nimport type { TUser } from '../../ConfigProvider/getUserList';\nimport useDialogLocale from './useDialogLocale';\nimport { getMemberKey, isMemberLocked } from './helper';\nimport MemberOption from './MemberOption';\nimport type { TMember } from './types';\n\ninterface IProps {\n  members: TUser;\n  lockedIds?: Array<TUserValue | TUserGroupValue>;\n  onRemove: (member: TMember) => void;\n  renderSelectedTag?: MemberPickerProps['renderSelectedTag'];\n}\n\n/** 用户和用户组共享一个已选区，顺序直接来自不可变选择 Map。 */\nexport default function SelectedMemberPanel({\n  members,\n  lockedIds = [],\n  onRemove,\n  renderSelectedTag,\n}: IProps) {\n  const t = useDialogLocale();\n  return (\n    <section\n      className=\"tw-flex tw-h-full tw-min-h-0 tw-flex-col tw-overflow-hidden\"\n      data-testid=\"selected-member-panel\"\n    >\n      <div className=\"tw-flex tw-h-10 tw-shrink-0 tw-items-center tw-gap-sp-100 tw-border-b tw-border-solid tw-border-border-default tw-px-sp-150 tw-text-content-primary tw-text-typography-label\">\n        {t.MemberPickerDialog.selected}\n        <span className=\"tw-text-content-secondary tw-text-typography-caption\">\n          {members.length}\n        </span>\n      </div>\n      <div className=\"tw-min-h-0 tw-flex-1 tw-overflow-auto tw-p-sp-150\">\n        {!members.length ? (\n          <Empty description={t.MemberPickerDialog.emptySelected} />\n        ) : (\n          <div className=\"tw-flex tw-flex-wrap tw-content-start tw-gap-sp-100\">\n            {members.map((member) => (\n              <MemberOption\n                key={getMemberKey(member)}\n                member={member}\n                selected\n                locked={isMemberLocked(member, lockedIds)}\n                onRemove={onRemove}\n                renderSelectedTag={renderSelectedTag}\n              />\n            ))}\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n"],"mappings":";;;;;;;AAoBA,SAAwB,oBAAoB,EAC1C,SACA,YAAY,EAAE,EACd,UACA,qBACS;CACT,MAAM,IAAI,iBAAiB;AAC3B,QACE,qBAAC,WAAD;EACE,WAAU;EACV,eAAY;YAFd,CAIE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,EAAE,mBAAmB,UACtB,oBAAC,QAAD;IAAM,WAAU;cACb,QAAQ;IACJ,CAAA,CACH;MACN,oBAAC,OAAD;GAAK,WAAU;aACZ,CAAC,QAAQ,SACR,oBAAC,OAAD,EAAO,aAAa,EAAE,mBAAmB,eAAiB,CAAA,GAE1D,oBAAC,OAAD;IAAK,WAAU;cACZ,QAAQ,KAAK,WACZ,oBAAC,cAAD;KAEU;KACR,UAAA;KACA,QAAQ,eAAe,QAAQ,UAAU;KAC/B;KACS;KACnB,EANK,aAAa,OAAO,CAMzB,CACF;IACE,CAAA;GAEJ,CAAA,CACE"}

package/dist/MemberPicker/dialog/UserCandidatePanel.d.ts

@@ -0,0 +1,13 @@
+import { IMemberPickerProps as MemberPickerProps } from '../interface';
+import { TMember, TMemberKey } from './types.js';
+interface IProps {
+    selectedByKey: ReadonlyMap<TMemberKey, TMember>;
+    onToggle: (member: TMember) => void;
+    onToggleAll: (members: readonly TMember[], selected: boolean) => void;
+    lockedIds?: MemberPickerProps['lockedIds'];
+    filterItem?: MemberPickerProps['filterItem'];
+    renderItem?: MemberPickerProps['renderItem'];
+}
+/** 用户候选继续使用设计系统既有查询语义，并在前端只接受 USER。 */
+export default function UserCandidatePanel({ selectedByKey, onToggle, onToggleAll, lockedIds, filterItem, renderItem, }: IProps): import("react/jsx-runtime").JSX.Element;
+export {};