@aloudata/aloudata-design 3.1.1 → 3.1.2

package/dist/Drawer/index.js

@@ -59,9 +59,10 @@ function Drawer(props) {
 	};
 	const drawerNode = /* @__PURE__ */ jsxs("div", {
 		className: cn("ald-drawer-root tw-pointer-events-none tw-inset-0", inline ? "tw-absolute" : "tw-fixed", rootClassName),
+		style: { zIndex: maskZIndex },
 		children: [mask && isTop && /* @__PURE__ */ jsx("div", {
 			"data-state": open ? "open" : "closed",
-			className: "ald-drawer-mask tw-pointer-events-auto tw-absolute tw-inset-0 tw-bg-[var(--background-inverted)] tw-opacity-45 data-[state=closed]:tw-animate-mask-out data-[state=open]:tw-animate-mask-in",
+			className: "ald-drawer-mask tw-pointer-events-auto tw-absolute tw-inset-0 tw-bg-[var(--background-mask)] data-[state=closed]:tw-animate-mask-out data-[state=open]:tw-animate-mask-in",
 			style: { zIndex: maskZIndex },
 			onClick: maskClosable ? () => onClose?.() : void 0
 		}), /* @__PURE__ */ jsx(DialogPrimitive.Content, {

package/dist/Drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Drawer/index.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { hideOthers } from 'aria-hidden';\nimport React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { CloseLightLine } from '../Icon';\nimport {\n  FLOATING_LAYER_BASE_Z_INDEX,\n  FLOATING_LAYER_STEP,\n  FloatingLayerProvider,\n} from '../_utils/floatingLayer';\nimport {\n  ModalLayerProvider,\n  useModalLayer,\n} from '../_utils/overlayCoordinator';\nimport {\n  focusInitialDialogTarget,\n  markDialogEscapeEvent,\n  useDialogAccessibility,\n} from '../_utils/dialogAccessibility';\nimport { cn } from '../lib/utils';\n\nexport interface DrawerProps {\n  open?: boolean;\n  onClose?: (e?: React.MouseEvent | React.KeyboardEvent) => void;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  placement?: 'top' | 'right' | 'bottom' | 'left';\n  width?: number | string;\n  height?: number | string;\n  size?: 'default' | 'large';\n  closable?: boolean;\n  mask?: boolean;\n  maskClosable?: boolean;\n  destroyOnClose?: boolean;\n  className?: string;\n  rootClassName?: string;\n  /** Pass through to the drawer content root for automated testing. */\n  'data-testid'?: string;\n  /** Pass through to the drawer content root when no title is rendered. */\n  'aria-label'?: string;\n  style?: React.CSSProperties;\n  contentWrapperStyle?: React.CSSProperties;\n  bodyStyle?: React.CSSProperties;\n  headerStyle?: React.CSSProperties;\n  maskStyle?: React.CSSProperties;\n  footer?: React.ReactNode;\n  footerStyle?: React.CSSProperties;\n  extra?: React.ReactNode;\n  children?: React.ReactNode;\n  zIndex?: number;\n  keyboard?: boolean;\n  getContainer?:\n    | string\n    | Element\n    | DocumentFragment\n    | (() => Element | DocumentFragment)\n    | false;\n}\n\nconst sizePresets: Record<string, number> = {\n  default: 378,\n  large: 736,\n};\n\nconst placementStyles: Record<string, string> = {\n  right: 'tw-inset-y-0 tw-right-0 tw-h-full',\n  left: 'tw-inset-y-0 tw-left-0 tw-h-full',\n  top: 'tw-inset-x-0 tw-top-0 tw-w-full',\n  bottom: 'tw-inset-x-0 tw-bottom-0 tw-w-full',\n};\n\nconst slideAnimationStyles: Record<string, string> = {\n  right:\n    'data-[state=open]:tw-animate-drawer-in-right data-[state=closed]:tw-animate-drawer-out-right',\n  left: 'data-[state=open]:tw-animate-drawer-in-left data-[state=closed]:tw-animate-drawer-out-left',\n  top: 'data-[state=open]:tw-animate-drawer-in-top data-[state=closed]:tw-animate-drawer-out-top',\n  bottom:\n    'data-[state=open]:tw-animate-drawer-in-bottom data-[state=closed]:tw-animate-drawer-out-bottom',\n};\n\nfunction Drawer(props: DrawerProps) {\n  const {\n    open = false,\n    onClose,\n    title,\n    description,\n    placement = 'right',\n    width,\n    height,\n    size = 'default',\n    closable = true,\n    mask = true,\n    maskClosable = true,\n    className,\n    rootClassName,\n    'data-testid': dataTestId,\n    'aria-label': ariaLabel,\n    style,\n    contentWrapperStyle,\n    bodyStyle,\n    headerStyle,\n    footer,\n    footerStyle,\n    extra,\n    children,\n    zIndex = 1000,\n    keyboard = true,\n    getContainer,\n  } = props;\n\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [portalContainer, setPortalContainer] = useState<\n    Element | DocumentFragment\n  >();\n  const inline = getContainer === false;\n  const drawerLayer = useModalLayer(open, zIndex);\n  const { id: drawerLayerId, maskZIndex, contentZIndex, isTop } = drawerLayer;\n  const nextFloatingLevel =\n    (maskZIndex - FLOATING_LAYER_BASE_Z_INDEX) / FLOATING_LAYER_STEP + 1;\n\n  useDialogAccessibility({\n    open,\n    isTop,\n    keyboard,\n    containerRef: contentRef,\n    onEscape: (event) => onClose?.(event as unknown as React.KeyboardEvent),\n  });\n\n  useLayoutEffect(() => {\n    if (getContainer === undefined || getContainer === false) {\n      setPortalContainer(undefined);\n    } else if (typeof getContainer === 'string') {\n      setPortalContainer(document.querySelector(getContainer) ?? undefined);\n    } else if (typeof getContainer === 'function') {\n      setPortalContainer(getContainer());\n    } else {\n      setPortalContainer(getContainer);\n    }\n  }, [getContainer]);\n\n  // ---- modal={false} 补偿：aria-hidden（屏幕阅读器只感知抽屉） ----\n  useEffect(() => {\n    if (!open || !isTop || !contentRef.current) return;\n    return hideOthers(contentRef.current);\n  }, [isTop, open]);\n\n  const isHorizontal = placement === 'left' || placement === 'right';\n  const preset = sizePresets[size] || sizePresets.default;\n  const effectiveWidth = width ?? preset;\n  const effectiveHeight = height ?? preset;\n  const sizeStyle = isHorizontal\n    ? { width: effectiveWidth, maxWidth: '100vw' }\n    : { height: effectiveHeight, maxHeight: '100vh' };\n  const drawerNode = (\n    <div\n      className={cn(\n        'ald-drawer-root tw-pointer-events-none tw-inset-0',\n        inline ? 'tw-absolute' : 'tw-fixed',\n        rootClassName,\n      )}\n    >\n      {/* modal={false} 时 DialogPrimitive.Overlay 不渲染，用普通 div 替代 */}\n      {mask && isTop && (\n        <div\n          data-state={open ? 'open' : 'closed'}\n          className=\"ald-drawer-mask tw-pointer-events-auto tw-absolute tw-inset-0 tw-bg-[var(--background-inverted)] tw-opacity-45 data-[state=closed]:tw-animate-mask-out data-[state=open]:tw-animate-mask-in\"\n          style={{ zIndex: maskZIndex }}\n          onClick={maskClosable ? () => onClose?.() : undefined}\n        />\n      )}\n      <DialogPrimitive.Content\n        ref={contentRef}\n        tabIndex={-1}\n        role=\"dialog\"\n        data-testid={dataTestId}\n        aria-modal={isTop || undefined}\n        aria-label={ariaLabel}\n        {...(description ? {} : { 'aria-describedby': undefined })}\n        {...(!isTop ? { inert: '' } : {})}\n        aria-hidden={!isTop || undefined}\n        className={cn(\n          'ald-drawer tw-pointer-events-auto tw-absolute tw-flex tw-flex-col tw-bg-[var(--background-default)] tw-shadow-[var(--elevation-bottom-bottom-xl)]',\n          placementStyles[placement],\n          slideAnimationStyles[placement],\n          className,\n        )}\n        style={{\n          zIndex: contentZIndex,\n          ...sizeStyle,\n          ...contentWrapperStyle,\n          ...style,\n        }}\n        onOpenAutoFocus={(event) => {\n          event.preventDefault();\n          requestAnimationFrame(() => {\n            const drawer = contentRef.current;\n            if (drawer) focusInitialDialogTarget(drawer);\n          });\n        }}\n        onEscapeKeyDown={(event) => {\n          if (!event.defaultPrevented) markDialogEscapeEvent(event);\n          event.preventDefault();\n        }}\n        onInteractOutside={(event) => {\n          if (!maskClosable) {\n            event.preventDefault();\n          }\n        }}\n      >\n        <ModalLayerProvider id={drawerLayerId}>\n          <FloatingLayerProvider value={nextFloatingLevel}>\n            {!title && (\n              <DialogPrimitive.Title className=\"tw-sr-only\">\n                {ariaLabel || 'Drawer'}\n              </DialogPrimitive.Title>\n            )}\n            {(title || description || closable || extra) && (\n              <>\n                {/* antd 兼容：保留 ant-drawer-header / ant-drawer-header-title class，消费方 CSS 可能依赖这些选择器 */}\n                <div\n                  className=\"ald-drawer-header ant-drawer-header tw-flex tw-flex-col tw-items-start tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-bg-[var(--background-default)] tw-px-6 tw-pb-0 tw-pt-4\"\n                  style={headerStyle}\n                >\n                  <div className=\"tw-flex tw-w-full tw-flex-col tw-gap-[6px]\">\n                    <div className=\"tw-flex tw-w-full tw-items-start tw-justify-between tw-gap-[var(--component-gap-sm)]\">\n                      <DialogPrimitive.Title className='ald-drawer-title ant-drawer-header-title tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-m-0 tw-flex-[1_0_0] tw-text-lg tw-font-semibold tw-leading-7 tw-text-[var(--content-primary)]'>\n                        {title}\n                      </DialogPrimitive.Title>\n                      {extra || closable ? (\n                        <div className=\"ald-drawer-actions tw-flex tw-items-center tw-gap-[var(--component-gap-sm)]\">\n                          {extra}\n                          {closable && (\n                            <DialogPrimitive.Close asChild>\n                              <button\n                                type=\"button\"\n                                className=\"ald-drawer-close tw-flex tw-size-8 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-r-50 tw-border-0 tw-bg-[var(--action-ghost-normal)] hover:tw-bg-[var(--action-ghost-hover)] focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-[var(--focus-ring)] forced-colors:focus-visible:tw-outline-[Highlight]\"\n                                aria-label=\"Close\"\n                                data-overlay-close=\"true\"\n                                onClick={() => onClose?.()}\n                              >\n                                <CloseLightLine\n                                  size={20}\n                                  color=\"var(--content-secondary)\"\n                                />\n                              </button>\n                            </DialogPrimitive.Close>\n                          )}\n                        </div>\n                      ) : null}\n                    </div>\n                    {description ? (\n                      <DialogPrimitive.Description asChild>\n                        <div className='ald-drawer-description tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-self-stretch tw-text-sm tw-font-normal tw-leading-5 tw-text-[var(--content-secondary)]'>\n                          {description}\n                        </div>\n                      </DialogPrimitive.Description>\n                    ) : null}\n                  </div>\n                </div>\n              </>\n            )}\n            {/* antd 兼容：保留 ant-drawer-body class */}\n            <div\n              className=\"ald-drawer-body ant-drawer-body tw-min-w-0 tw-flex-[1_0_0] tw-self-stretch tw-overflow-auto tw-p-[var(--component-padding-2xl)]\"\n              style={bodyStyle}\n            >\n              {children}\n            </div>\n            {footer && (\n              <>\n                <div className=\"ald-drawer-footer-divider tw-h-px tw-bg-[var(--border-default)]\" />\n                {/* antd 兼容：antd .ant-drawer-footer 使用 text-align:right 让 inline 按钮右对齐，\n                此处加 tw-text-right 保持消费方传入 width:100% 子容器时 inline 元素仍右对齐。 */}\n                <div\n                  className=\"ald-drawer-footer ant-drawer-footer tw-flex tw-items-center tw-justify-end tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-px-[var(--component-padding-2xl)] tw-py-[var(--component-padding-lg)]\"\n                  style={footerStyle}\n                >\n                  {footer}\n                </div>\n              </>\n            )}\n          </FloatingLayerProvider>\n        </ModalLayerProvider>\n      </DialogPrimitive.Content>\n    </div>\n  );\n\n  // modal={false}：禁用 Radix FocusScope 的 MutationObserver，\n  // 避免表单校验触发 DOM 变动时劫持焦点。手动补偿滚动锁定、aria-hidden、Tab 循环。\n  return (\n    <DialogPrimitive.Root open={open} modal={false}>\n      {inline ? (\n        open ? (\n          drawerNode\n        ) : null\n      ) : (\n        <DialogPrimitive.Portal container={portalContainer}>\n          {drawerNode}\n        </DialogPrimitive.Portal>\n      )}\n    </DialogPrimitive.Root>\n  );\n}\n\nexport default Drawer;\n"],"mappings":";;;;;;;;;;AA0DA,IAAM,cAAsC;CAC1C,SAAS;CACT,OAAO;CACR;AAED,IAAM,kBAA0C;CAC9C,OAAO;CACP,MAAM;CACN,KAAK;CACL,QAAQ;CACT;AAED,IAAM,uBAA+C;CACnD,OACE;CACF,MAAM;CACN,KAAK;CACL,QACE;CACH;AAED,SAAS,OAAO,OAAoB;CAClC,MAAM,EACJ,OAAO,OACP,SACA,OACA,aACA,YAAY,SACZ,OACA,QACA,OAAO,WACP,WAAW,MACX,OAAO,MACP,eAAe,MACf,WACA,eACA,eAAe,YACf,cAAc,WACd,OACA,qBACA,WACA,aACA,QACA,aACA,OACA,UACA,SAAS,KACT,WAAW,MACX,iBACE;CAEJ,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,CAAC,iBAAiB,sBAAsB,UAE3C;CACH,MAAM,SAAS,iBAAiB;CAEhC,MAAM,EAAE,IAAI,eAAe,YAAY,eAAe,UADlC,cAAc,MAAM,OAAO;CAE/C,MAAM,qBACH,aAAa,+BAAA,KAAqD;AAErE,wBAAuB;EACrB;EACA;EACA;EACA,cAAc;EACd,WAAW,UAAU,UAAU,MAAwC;EACxE,CAAC;AAEF,uBAAsB;AACpB,MAAI,iBAAiB,UAAa,iBAAiB,MACjD,oBAAmB,OAAU;WACpB,OAAO,iBAAiB,SACjC,oBAAmB,SAAS,cAAc,aAAa,IAAI,OAAU;WAC5D,OAAO,iBAAiB,WACjC,oBAAmB,cAAc,CAAC;MAElC,oBAAmB,aAAa;IAEjC,CAAC,aAAa,CAAC;AAGlB,iBAAgB;AACd,MAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,WAAW,QAAS;AAC5C,SAAO,WAAW,WAAW,QAAQ;IACpC,CAAC,OAAO,KAAK,CAAC;CAEjB,MAAM,eAAe,cAAc,UAAU,cAAc;CAC3D,MAAM,SAAS,YAAY,SAAS,YAAY;CAGhD,MAAM,YAAY,eACd;EAAE,OAHiB,SAAS;EAGH,UAAU;EAAS,GAC5C;EAAE,QAHkB,UAAU;EAGH,WAAW;EAAS;CACnD,MAAM,aACJ,qBAAC,OAAD;EACE,WAAW,GACT,qDACA,SAAS,gBAAgB,YACzB,cACD;YALH,CAQG,QAAQ,SACP,oBAAC,OAAD;GACE,cAAY,OAAO,SAAS;GAC5B,WAAU;GACV,OAAO,EAAE,QAAQ,YAAY;GAC7B,SAAS,qBAAqB,WAAW,GAAG;GAC5C,CAAA,EAEJ,oBAAC,gBAAgB,SAAjB;GACE,KAAK;GACL,UAAU;GACV,MAAK;GACL,eAAa;GACb,cAAY,SAAS;GACrB,cAAY;GACZ,GAAK,cAAc,EAAE,GAAG,EAAE,oBAAoB,QAAW;GACzD,GAAK,CAAC,QAAQ,EAAE,OAAO,IAAI,GAAG,EAAE;GAChC,eAAa,CAAC,SAAS;GACvB,WAAW,GACT,qJACA,gBAAgB,YAChB,qBAAqB,YACrB,UACD;GACD,OAAO;IACL,QAAQ;IACR,GAAG;IACH,GAAG;IACH,GAAG;IACJ;GACD,kBAAkB,UAAU;AAC1B,UAAM,gBAAgB;AACtB,gCAA4B;KAC1B,MAAM,SAAS,WAAW;AAC1B,SAAI,OAAQ,0BAAyB,OAAO;MAC5C;;GAEJ,kBAAkB,UAAU;AAC1B,QAAI,CAAC,MAAM,iBAAkB,uBAAsB,MAAM;AACzD,UAAM,gBAAgB;;GAExB,oBAAoB,UAAU;AAC5B,QAAI,CAAC,aACH,OAAM,gBAAgB;;aAI1B,oBAAC,oBAAD;IAAoB,IAAI;cACtB,qBAAC,uBAAD;KAAuB,OAAO;eAA9B;MACG,CAAC,SACA,oBAAC,gBAAgB,OAAjB;OAAuB,WAAU;iBAC9B,aAAa;OACQ,CAAA;OAExB,SAAS,eAAe,YAAY,UACpC,oBAAA,UAAA,EAAA,UAEE,oBAAC,OAAD;OACE,WAAU;OACV,OAAO;iBAEP,qBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,qBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,oBAAC,gBAAgB,OAAjB;UAAuB,WAAU;oBAC9B;UACqB,CAAA,EACvB,SAAS,WACR,qBAAC,OAAD;UAAK,WAAU;oBAAf,CACG,OACA,YACC,oBAAC,gBAAgB,OAAjB;WAAuB,SAAA;qBACrB,oBAAC,UAAD;YACE,MAAK;YACL,WAAU;YACV,cAAW;YACX,sBAAmB;YACnB,eAAe,WAAW;sBAE1B,oBAAC,MAAD;aACE,MAAM;aACN,OAAM;aACN,CAAA;YACK,CAAA;WACa,CAAA,CAEtB;cACJ,KACA;YACL,cACC,oBAAC,gBAAgB,aAAjB;SAA6B,SAAA;mBAC3B,oBAAC,OAAD;UAAK,WAAU;oBACZ;UACG,CAAA;SACsB,CAAA,GAC5B,KACA;;OACF,CAAA,EACL,CAAA;MAGL,oBAAC,OAAD;OACE,WAAU;OACV,OAAO;OAEN;OACG,CAAA;MACL,UACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD,EAAK,WAAU,mEAAoE,CAAA,EAGnF,oBAAC,OAAD;OACE,WAAU;OACV,OAAO;iBAEN;OACG,CAAA,CACL,EAAA,CAAA;MAEiB;;IACL,CAAA;GACG,CAAA,CACtB;;AAKR,QACE,oBAAC,gBAAgB,MAAjB;EAA4B;EAAM,OAAO;YACtC,SACC,OACE,aACE,OAEJ,oBAAC,gBAAgB,QAAjB;GAAwB,WAAW;aAChC;GACsB,CAAA;EAEN,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Drawer/index.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { hideOthers } from 'aria-hidden';\nimport React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { CloseLightLine } from '../Icon';\nimport {\n  FLOATING_LAYER_BASE_Z_INDEX,\n  FLOATING_LAYER_STEP,\n  FloatingLayerProvider,\n} from '../_utils/floatingLayer';\nimport {\n  ModalLayerProvider,\n  useModalLayer,\n} from '../_utils/overlayCoordinator';\nimport {\n  focusInitialDialogTarget,\n  markDialogEscapeEvent,\n  useDialogAccessibility,\n} from '../_utils/dialogAccessibility';\nimport { cn } from '../lib/utils';\n\nexport interface DrawerProps {\n  open?: boolean;\n  onClose?: (e?: React.MouseEvent | React.KeyboardEvent) => void;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  placement?: 'top' | 'right' | 'bottom' | 'left';\n  width?: number | string;\n  height?: number | string;\n  size?: 'default' | 'large';\n  closable?: boolean;\n  mask?: boolean;\n  maskClosable?: boolean;\n  destroyOnClose?: boolean;\n  className?: string;\n  rootClassName?: string;\n  /** Pass through to the drawer content root for automated testing. */\n  'data-testid'?: string;\n  /** Pass through to the drawer content root when no title is rendered. */\n  'aria-label'?: string;\n  style?: React.CSSProperties;\n  contentWrapperStyle?: React.CSSProperties;\n  bodyStyle?: React.CSSProperties;\n  headerStyle?: React.CSSProperties;\n  maskStyle?: React.CSSProperties;\n  footer?: React.ReactNode;\n  footerStyle?: React.CSSProperties;\n  extra?: React.ReactNode;\n  children?: React.ReactNode;\n  zIndex?: number;\n  keyboard?: boolean;\n  getContainer?:\n    | string\n    | Element\n    | DocumentFragment\n    | (() => Element | DocumentFragment)\n    | false;\n}\n\nconst sizePresets: Record<string, number> = {\n  default: 378,\n  large: 736,\n};\n\nconst placementStyles: Record<string, string> = {\n  right: 'tw-inset-y-0 tw-right-0 tw-h-full',\n  left: 'tw-inset-y-0 tw-left-0 tw-h-full',\n  top: 'tw-inset-x-0 tw-top-0 tw-w-full',\n  bottom: 'tw-inset-x-0 tw-bottom-0 tw-w-full',\n};\n\nconst slideAnimationStyles: Record<string, string> = {\n  right:\n    'data-[state=open]:tw-animate-drawer-in-right data-[state=closed]:tw-animate-drawer-out-right',\n  left: 'data-[state=open]:tw-animate-drawer-in-left data-[state=closed]:tw-animate-drawer-out-left',\n  top: 'data-[state=open]:tw-animate-drawer-in-top data-[state=closed]:tw-animate-drawer-out-top',\n  bottom:\n    'data-[state=open]:tw-animate-drawer-in-bottom data-[state=closed]:tw-animate-drawer-out-bottom',\n};\n\nfunction Drawer(props: DrawerProps) {\n  const {\n    open = false,\n    onClose,\n    title,\n    description,\n    placement = 'right',\n    width,\n    height,\n    size = 'default',\n    closable = true,\n    mask = true,\n    maskClosable = true,\n    className,\n    rootClassName,\n    'data-testid': dataTestId,\n    'aria-label': ariaLabel,\n    style,\n    contentWrapperStyle,\n    bodyStyle,\n    headerStyle,\n    footer,\n    footerStyle,\n    extra,\n    children,\n    zIndex = 1000,\n    keyboard = true,\n    getContainer,\n  } = props;\n\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [portalContainer, setPortalContainer] = useState<\n    Element | DocumentFragment\n  >();\n  const inline = getContainer === false;\n  const drawerLayer = useModalLayer(open, zIndex);\n  const { id: drawerLayerId, maskZIndex, contentZIndex, isTop } = drawerLayer;\n  const nextFloatingLevel =\n    (maskZIndex - FLOATING_LAYER_BASE_Z_INDEX) / FLOATING_LAYER_STEP + 1;\n\n  useDialogAccessibility({\n    open,\n    isTop,\n    keyboard,\n    containerRef: contentRef,\n    onEscape: (event) => onClose?.(event as unknown as React.KeyboardEvent),\n  });\n\n  useLayoutEffect(() => {\n    if (getContainer === undefined || getContainer === false) {\n      setPortalContainer(undefined);\n    } else if (typeof getContainer === 'string') {\n      setPortalContainer(document.querySelector(getContainer) ?? undefined);\n    } else if (typeof getContainer === 'function') {\n      setPortalContainer(getContainer());\n    } else {\n      setPortalContainer(getContainer);\n    }\n  }, [getContainer]);\n\n  // ---- modal={false} 补偿：aria-hidden（屏幕阅读器只感知抽屉） ----\n  useEffect(() => {\n    if (!open || !isTop || !contentRef.current) return;\n    return hideOthers(contentRef.current);\n  }, [isTop, open]);\n\n  const isHorizontal = placement === 'left' || placement === 'right';\n  const preset = sizePresets[size] || sizePresets.default;\n  const effectiveWidth = width ?? preset;\n  const effectiveHeight = height ?? preset;\n  const sizeStyle = isHorizontal\n    ? { width: effectiveWidth, maxWidth: '100vw' }\n    : { height: effectiveHeight, maxHeight: '100vh' };\n  const drawerNode = (\n    <div\n      className={cn(\n        'ald-drawer-root tw-pointer-events-none tw-inset-0',\n        inline ? 'tw-absolute' : 'tw-fixed',\n        rootClassName,\n      )}\n      style={{ zIndex: maskZIndex }}\n    >\n      {/* modal={false} 时 DialogPrimitive.Overlay 不渲染，用普通 div 替代 */}\n      {mask && isTop && (\n        <div\n          data-state={open ? 'open' : 'closed'}\n          className=\"ald-drawer-mask tw-pointer-events-auto tw-absolute tw-inset-0 tw-bg-[var(--background-mask)] data-[state=closed]:tw-animate-mask-out data-[state=open]:tw-animate-mask-in\"\n          style={{ zIndex: maskZIndex }}\n          onClick={maskClosable ? () => onClose?.() : undefined}\n        />\n      )}\n      <DialogPrimitive.Content\n        ref={contentRef}\n        tabIndex={-1}\n        role=\"dialog\"\n        data-testid={dataTestId}\n        aria-modal={isTop || undefined}\n        aria-label={ariaLabel}\n        {...(description ? {} : { 'aria-describedby': undefined })}\n        {...(!isTop ? { inert: '' } : {})}\n        aria-hidden={!isTop || undefined}\n        className={cn(\n          'ald-drawer tw-pointer-events-auto tw-absolute tw-flex tw-flex-col tw-bg-[var(--background-default)] tw-shadow-[var(--elevation-bottom-bottom-xl)]',\n          placementStyles[placement],\n          slideAnimationStyles[placement],\n          className,\n        )}\n        style={{\n          zIndex: contentZIndex,\n          ...sizeStyle,\n          ...contentWrapperStyle,\n          ...style,\n        }}\n        onOpenAutoFocus={(event) => {\n          event.preventDefault();\n          requestAnimationFrame(() => {\n            const drawer = contentRef.current;\n            if (drawer) focusInitialDialogTarget(drawer);\n          });\n        }}\n        onEscapeKeyDown={(event) => {\n          if (!event.defaultPrevented) markDialogEscapeEvent(event);\n          event.preventDefault();\n        }}\n        onInteractOutside={(event) => {\n          if (!maskClosable) {\n            event.preventDefault();\n          }\n        }}\n      >\n        <ModalLayerProvider id={drawerLayerId}>\n          <FloatingLayerProvider value={nextFloatingLevel}>\n            {!title && (\n              <DialogPrimitive.Title className=\"tw-sr-only\">\n                {ariaLabel || 'Drawer'}\n              </DialogPrimitive.Title>\n            )}\n            {(title || description || closable || extra) && (\n              <>\n                {/* antd 兼容：保留 ant-drawer-header / ant-drawer-header-title class，消费方 CSS 可能依赖这些选择器 */}\n                <div\n                  className=\"ald-drawer-header ant-drawer-header tw-flex tw-flex-col tw-items-start tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-bg-[var(--background-default)] tw-px-6 tw-pb-0 tw-pt-4\"\n                  style={headerStyle}\n                >\n                  <div className=\"tw-flex tw-w-full tw-flex-col tw-gap-[6px]\">\n                    <div className=\"tw-flex tw-w-full tw-items-start tw-justify-between tw-gap-[var(--component-gap-sm)]\">\n                      <DialogPrimitive.Title className='ald-drawer-title ant-drawer-header-title tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-m-0 tw-flex-[1_0_0] tw-text-lg tw-font-semibold tw-leading-7 tw-text-[var(--content-primary)]'>\n                        {title}\n                      </DialogPrimitive.Title>\n                      {extra || closable ? (\n                        <div className=\"ald-drawer-actions tw-flex tw-items-center tw-gap-[var(--component-gap-sm)]\">\n                          {extra}\n                          {closable && (\n                            <DialogPrimitive.Close asChild>\n                              <button\n                                type=\"button\"\n                                className=\"ald-drawer-close tw-flex tw-size-8 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-r-50 tw-border-0 tw-bg-[var(--action-ghost-normal)] hover:tw-bg-[var(--action-ghost-hover)] focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-[var(--focus-ring)] forced-colors:focus-visible:tw-outline-[Highlight]\"\n                                aria-label=\"Close\"\n                                data-overlay-close=\"true\"\n                                onClick={() => onClose?.()}\n                              >\n                                <CloseLightLine\n                                  size={20}\n                                  color=\"var(--content-secondary)\"\n                                />\n                              </button>\n                            </DialogPrimitive.Close>\n                          )}\n                        </div>\n                      ) : null}\n                    </div>\n                    {description ? (\n                      <DialogPrimitive.Description asChild>\n                        <div className='ald-drawer-description tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-self-stretch tw-text-sm tw-font-normal tw-leading-5 tw-text-[var(--content-secondary)]'>\n                          {description}\n                        </div>\n                      </DialogPrimitive.Description>\n                    ) : null}\n                  </div>\n                </div>\n              </>\n            )}\n            {/* antd 兼容：保留 ant-drawer-body class */}\n            <div\n              className=\"ald-drawer-body ant-drawer-body tw-min-w-0 tw-flex-[1_0_0] tw-self-stretch tw-overflow-auto tw-p-[var(--component-padding-2xl)]\"\n              style={bodyStyle}\n            >\n              {children}\n            </div>\n            {footer && (\n              <>\n                <div className=\"ald-drawer-footer-divider tw-h-px tw-bg-[var(--border-default)]\" />\n                {/* antd 兼容：antd .ant-drawer-footer 使用 text-align:right 让 inline 按钮右对齐，\n                此处加 tw-text-right 保持消费方传入 width:100% 子容器时 inline 元素仍右对齐。 */}\n                <div\n                  className=\"ald-drawer-footer ant-drawer-footer tw-flex tw-items-center tw-justify-end tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-px-[var(--component-padding-2xl)] tw-py-[var(--component-padding-lg)]\"\n                  style={footerStyle}\n                >\n                  {footer}\n                </div>\n              </>\n            )}\n          </FloatingLayerProvider>\n        </ModalLayerProvider>\n      </DialogPrimitive.Content>\n    </div>\n  );\n\n  // modal={false}：禁用 Radix FocusScope 的 MutationObserver，\n  // 避免表单校验触发 DOM 变动时劫持焦点。手动补偿滚动锁定、aria-hidden、Tab 循环。\n  return (\n    <DialogPrimitive.Root open={open} modal={false}>\n      {inline ? (\n        open ? (\n          drawerNode\n        ) : null\n      ) : (\n        <DialogPrimitive.Portal container={portalContainer}>\n          {drawerNode}\n        </DialogPrimitive.Portal>\n      )}\n    </DialogPrimitive.Root>\n  );\n}\n\nexport default Drawer;\n"],"mappings":"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"}

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

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

package/dist/MemberPicker/components/MemberSelection.js

@@ -1,5 +1,7 @@
 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";
@@ -12,7 +14,7 @@ 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, searchValue = "" } = props;
+	const { className, userList, multiple, onChange, selectedUsers, onSearchValueChange, loading, width, lockedIds, filterItem, renderItem, searchValue = "", showSearch } = props;
 	const filteredList = useMemo(() => {
 		return userList.filter((item) => {
 			if (filterItem) return filterItem(item);
@@ -31,95 +33,106 @@ function MemberSelection(props) {
 	}, [deferredSearchValue, onSearchValueChange]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn(className, "ald-member-picker-member-list-wrap"),
-		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: [
+			showSearch && /* @__PURE__ */ jsx(Input, {
+				prefix: /* @__PURE__ */ jsx(Memo, { size: 16 }),
+				className: "ald-member-picker-search-input",
+				"aria-label": t.InputSearch.search,
+				autoFocus: true,
+				value: searchValue,
+				onChange: (event) => onSearchValueChange?.(event.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: /* @__PURE__ */ jsx("div", {
-					role: "listbox",
-					"aria-label": "Members",
-					"aria-multiselectable": multiple || void 0,
-					className: "ald-member-picker-member-list-inner",
+					ref: parentRef,
 					style: {
-						width: multiple ? width : void 0,
-						overflow: "hidden",
-						position: "relative",
-						height: `${rowVirtualizer.getTotalSize()}px`
+						height: 300,
+						overflowY: "auto",
+						overflowX: "hidden"
 					},
-					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,
+					className: cn("ald-member-picker-member-list", { "ald-member-picker-member-list-null": filteredList.length === 0 && !loading }),
+					children: /* @__PURE__ */ jsx("div", {
+						role: "listbox",
+						"aria-label": "Members",
+						"aria-multiselectable": multiple || void 0,
+						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,
 								disabled,
-								onClick: () => {
-									if (!disabled) onChange(!isSelected, user);
+								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)`
 								},
-								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);
+								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)`
+								},
+								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, { 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"}
+{"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 { SearchLine } from '../../Icon';\nimport Input 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  searchValue?: string;\n  showSearch?: 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    searchValue = '',\n    showSearch,\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      {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      {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":"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"}

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

@@ -24,6 +24,7 @@ interface IPanelProps {
     renderSelectedTag?: (user: IUser | IUserGroup, originNode: ReactNode) => ReactNode;
     filterItem?: (item: IUser | IUserGroup) => boolean;
     searchValue?: string;
+    showSearch?: boolean;
 }
 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, searchValue = "" } = props;
+	const { type, multiple, dropdownWidth, value, onChange, dataList, onSearchValueChange, className, lockedIds, footer, onCancel, renderItem, renderSelectedTag, filterItem, searchValue = "", showSearch } = props;
 	const [selectedUsers, setSelected] = useState([]);
 	const onSelectionChange = useCallback((selected, user) => {
 		if (multiple) if (selected) setSelected([...selectedUsers, user]);
@@ -53,6 +53,7 @@ function Panel(props) {
 			onChange: onSelectionChange,
 			onSearchValueChange,
 			searchValue,
+			showSearch,
 			multiple: true,
 			lockedIds,
 			loading: props.loading,
@@ -67,6 +68,7 @@ function Panel(props) {
 			onChange: onSelectionChange,
 			onSearchValueChange,
 			searchValue,
+			showSearch,
 			multiple: true,
 			lockedIds,
 			loading: props.loading,
@@ -96,6 +98,7 @@ function Panel(props) {
 		onSelectionChange,
 		onSearchValueChange,
 		searchValue,
+		showSearch,
 		lockedIds,
 		props.loading,
 		type,
@@ -137,6 +140,8 @@ function Panel(props) {
 			onChange: onSelectionChange,
 			selectedUsers: selectedUsers.filter(isUser),
 			onSearchValueChange,
+			searchValue,
+			showSearch,
 			multiple: false,
 			lockedIds,
 			loading: props.loading,
@@ -148,6 +153,8 @@ function Panel(props) {
 			selectedUsersGroup: selectedUsers.filter(isUserGroup),
 			onChange: onSelectionChange,
 			onSearchValueChange,
+			searchValue,
+			showSearch,
 			multiple: false,
 			lockedIds,
 			loading: props.loading,

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

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","names":[],"sources":["../../../src/MemberPicker/components/Panel.tsx"],"sourcesContent":["import { cn } from '../../lib/utils';\n\nimport React, {\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport {\n  EUserType,\n  IUserGroup,\n  TUser,\n  TUserGroupValue,\n  TUserValue,\n} from '../../ConfigProvider/getUserList';\nimport Tabs from '../../Tabs';\nimport { LocaleContext, getTranslator } from '../../locale/default';\nimport { EMemberPicker, IUser } from '../interface';\nimport { getId } from '../utils';\nimport { isUser, isUserGroup } from '../utils/getUsersWithUserId';\nimport MemberSelection from './MemberSelection';\nimport SelectedMemberTags from './SelectedMemberTags';\nimport SelectorFooter from './SelectorFooter';\nimport UserGroupSelection from './UserGroupSelection';\n\ninterface IPanelProps {\n  type: EMemberPicker;\n  multiple?: boolean;\n  onChange?: (value: TUser) => void;\n  dropdownWidth?: number;\n  value?: TUser | (IUser | IUserGroup);\n  dataList: TUser;\n  onSearchValueChange?: (value: string) => void;\n  onCancel?: () => void;\n  loading: boolean;\n  className?: string;\n  lockedIds: Array<TUserValue | TUserGroupValue>;\n  footer?: ReactNode;\n  renderItem?: (\n    item: IUser | IUserGroup,\n    context: {\n      isSelected: boolean;\n      disabled: boolean;\n      onClick: () => void;\n      onNextLevel?: () => void;\n      originNode: ReactNode;\n    },\n  ) => ReactNode;\n  renderSelectedTag?: (\n    user: IUser | IUserGroup,\n    originNode: ReactNode,\n  ) => ReactNode;\n  filterItem?: (item: IUser | IUserGroup) => boolean;\n  searchValue?: string;\n}\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":"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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  showSearch?: boolean;\n}\n\nexport const userDisplayNameIsRepeated = (\n  userList: TUser,\n  displayName?: string,\n) => {\n  return (\n    userList.filter(\n      (user) => user.type === EUserType.USER && user.nickname === displayName,\n    ).length > 1\n  );\n};\n\nexport default function Panel(props: IPanelProps) {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const {\n    type,\n    multiple,\n    dropdownWidth,\n    value,\n    onChange,\n    dataList,\n    onSearchValueChange,\n    className,\n    lockedIds,\n    footer,\n    onCancel,\n    renderItem,\n    renderSelectedTag,\n    filterItem,\n    searchValue = '',\n    showSearch,\n  } = props;\n\n  const [selectedUsers, setSelected] = useState<TUser>([]);\n\n  const onSelectionChange = useCallback(\n    (selected: boolean, user: IUser | IUserGroup) => {\n      if (multiple) {\n        if (selected) {\n          setSelected([...selectedUsers, user]);\n        } else {\n          setSelected(\n            selectedUsers.filter((item) => getId(item) !== getId(user)),\n          );\n        }\n      } else {\n        if (selected) {\n          setSelected([user]);\n          onChange?.([user]);\n        } else {\n          setSelected([]);\n          onChange?.([]);\n        }\n      }\n    },\n    [multiple, selectedUsers, onChange],\n  );\n\n  const onRemove = useCallback(\n    (user: IUser | IUserGroup) => {\n      setSelected(selectedUsers.filter((item) => getId(item) !== getId(user)));\n    },\n    [selectedUsers],\n  );\n\n  const panelwidth = useMemo(() => {\n    if (dropdownWidth) {\n      return dropdownWidth;\n    } else if (multiple) {\n      return 480;\n    } else {\n      return 160;\n    }\n  }, [dropdownWidth, multiple]);\n\n  useEffect(() => {\n    if (value) {\n      if (Array.isArray(value)) {\n        setSelected(value);\n      } else {\n        setSelected([value]);\n      }\n    }\n  }, [setSelected, value]);\n\n  const renderDropdown = useCallback(() => {\n    const userSelection = (\n      <MemberSelection\n        className={'ald-member-picker-member-selection-multiple'}\n        userList={dataList.filter(isUser)}\n        filterItem={filterItem}\n        width={(panelwidth - 6) / 2}\n        selectedUsers={selectedUsers.filter(isUser)}\n        onChange={onSelectionChange}\n        onSearchValueChange={onSearchValueChange}\n        searchValue={searchValue}\n        showSearch={showSearch}\n        multiple={true}\n        lockedIds={lockedIds}\n        loading={props.loading}\n        renderItem={renderItem}\n      ></MemberSelection>\n    );\n    const userGroupSelection = (\n      <UserGroupSelection\n        className={'ald-member-picker-member-selection-multiple'}\n        userGroupList={dataList.filter(isUserGroup)}\n        filterItem={filterItem}\n        width={(panelwidth - 6) / 2}\n        selectedUsersGroup={selectedUsers.filter(isUserGroup)}\n        onChange={onSelectionChange}\n        onSearchValueChange={onSearchValueChange}\n        searchValue={searchValue}\n        showSearch={showSearch}\n        multiple={true}\n        lockedIds={lockedIds}\n        loading={props.loading}\n        renderItem={renderItem}\n      ></UserGroupSelection>\n    );\n    if (type === EMemberPicker.USER) {\n      return userSelection;\n    }\n    if (type === EMemberPicker.GROUP) {\n      return userGroupSelection;\n    }\n    if (type === EMemberPicker.BOTH) {\n      return (\n        <Tabs\n          centered\n          destroyInactiveTabPane\n          items={[\n            {\n              key: 'user',\n              label: t.MemberPicker.users,\n              children: userSelection,\n            },\n            {\n              key: 'userGroup',\n              label: t.MemberPicker.userGroups,\n              children: userGroupSelection,\n            },\n          ]}\n          className=\"ald-member-tabs\"\n        ></Tabs>\n      );\n    }\n  }, [\n    t,\n    dataList,\n    panelwidth,\n    selectedUsers,\n    onSelectionChange,\n    onSearchValueChange,\n    searchValue,\n    showSearch,\n    lockedIds,\n    props.loading,\n    type,\n    renderItem,\n    filterItem,\n  ]);\n\n  // 单选 + 调用方未传 dropdownWidth 时让 wrapper 跟随父级（popupMatchSelectWidth=true 的浮窗 = 触发器宽度），\n  // 否则按具体数字（多选 480 / 调用方自定义）固定宽度。\n  const wrapperWidth: number | string =\n    dropdownWidth ?? (multiple ? panelwidth : '100%');\n\n  return (\n    <div\n      className={cn(className, 'ald-member-picker-wrapper', {\n        ['ald-member-picker-multiple']: multiple,\n        ['ald-member-picker-single']: !multiple,\n      })}\n      style={{ width: wrapperWidth }}\n    >\n      {multiple ? (\n        <>\n          <div className=\"ald-member-picker-inner\">\n            <div className=\"ald-member-picker-member-selection-wrapper\">\n              {renderDropdown()}\n            </div>\n            <SelectedMemberTags\n              className={'ald-member-picker-selected-member-tags'}\n              selectedUsers={selectedUsers}\n              width={(panelwidth - 3) / 2}\n              onRemove={onRemove}\n              lockedIds={lockedIds}\n              userList={dataList}\n              renderSelectedTag={renderSelectedTag}\n            ></SelectedMemberTags>\n          </div>\n          <SelectorFooter\n            className={'ald-member-picker-selector-footer'}\n            onCancel={onCancel}\n            onOk={() => {\n              onChange?.(selectedUsers);\n            }}\n            footer={footer}\n          ></SelectorFooter>\n        </>\n      ) : (\n        <>\n          {type === EMemberPicker.USER && (\n            <MemberSelection\n              className={'ald-member-picker-member-selection-single'}\n              userList={dataList.filter(isUser)}\n              width={panelwidth - 2}\n              onChange={onSelectionChange}\n              selectedUsers={selectedUsers.filter(isUser)}\n              onSearchValueChange={onSearchValueChange}\n              searchValue={searchValue}\n              showSearch={showSearch}\n              multiple={false && multiple}\n              lockedIds={lockedIds}\n              loading={props.loading}\n              renderItem={renderItem}\n            ></MemberSelection>\n          )}\n          {type === EMemberPicker.GROUP && (\n            <UserGroupSelection\n              className={'ald-member-picker-member-selection-multiple'}\n              userGroupList={dataList.filter(isUserGroup)}\n              width={(panelwidth - 3) / 2}\n              selectedUsersGroup={selectedUsers.filter(isUserGroup)}\n              onChange={onSelectionChange}\n              onSearchValueChange={onSearchValueChange}\n              searchValue={searchValue}\n              showSearch={showSearch}\n              multiple={false}\n              lockedIds={lockedIds}\n              loading={props.loading}\n              renderItem={renderItem}\n            ></UserGroupSelection>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/MemberPicker/components/PanelWrapper.js

@@ -82,6 +82,8 @@ var PanelWrapper = ({ type = EMemberPicker.USER, value, multiple, dropdownWidth,
 		loading,
 		dropdownWidth,
 		onSearchValueChange,
+		searchValue: searchString,
+		showSearch: true,
 		onChange: useCallback((users) => {
 			if (multiple) onChange?.(users);
 			else onChange?.(users[0]);

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

@@ -1 +1 @@
-{"version":3,"file":"PanelWrapper.js","names":[],"sources":["../../../src/MemberPicker/components/PanelWrapper.tsx"],"sourcesContent":["import { useRequest } from 'ahooks';\nimport _ from 'lodash';\nimport React, {\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { message } from '../../';\nimport ConfigProvider from '../../ConfigProvider';\nimport {\n  EUserType,\n  IUserGroup,\n  TUser,\n  TUserGroupValue,\n  TUserValue,\n} from '../../ConfigProvider/getUserList';\nimport { LocaleContext, getTranslator } from '../../locale/default';\nimport { EMemberPicker, IUser, TMemberPickerValue } from '../interface';\nimport { isUser, isUserGroup } from '../utils/getUsersWithUserId';\nimport Panel from './Panel';\n\ninterface IProps {\n  type?: EMemberPicker;\n  multiple?: boolean;\n  onChange?(v: TUser | (IUser | IUserGroup)): void;\n  dropdownWidth?: number;\n  value?: TMemberPickerValue;\n  className?: string;\n  onCancel?: () => void;\n  lockedIds?: Array<TUserValue | TUserGroupValue>;\n  showUserId?: boolean;\n  footer?: ReactNode;\n  renderItem?: (\n    item: IUser | IUserGroup,\n    context: {\n      isSelected: boolean;\n      disabled: boolean;\n      onClick: () => void;\n      onNextLevel?: () => void;\n      originNode: ReactNode;\n    },\n  ) => ReactNode;\n  renderSelectedTag?: (\n    user: IUser | IUserGroup,\n    originNode: ReactNode,\n  ) => ReactNode;\n  filterItem?: (item: IUser | IUserGroup) => boolean;\n}\n\nexport const PanelWrapper = ({\n  type = EMemberPicker.USER,\n  value,\n  multiple,\n  dropdownWidth,\n  onChange,\n  onCancel,\n  className,\n  footer,\n  lockedIds = [],\n  renderItem,\n  renderSelectedTag,\n  filterItem,\n}: IProps) => {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const { getUsersByIds, getUsersByKeywords } = ConfigProvider.useGetUserList();\n  const [selectedUserList, setSelectedUserList] = useState<TUser>([]);\n  const [searchUserList, setSearchUserList] = useState<TUser>([]);\n  const [searchString, setSearchString] = useState<string>('');\n\n  const onSearchValueChange = useCallback((v: string) => {\n    setSearchString(v);\n  }, []);\n\n  const queryByKeywords = useMemo(() => {\n    if (getUsersByKeywords) {\n      return getUsersByKeywords;\n    }\n    return (_params = {}) =>\n      Promise.reject({\n        message: t.MemberPicker.pleaseConfigGetUserByKeywordsMethod,\n      });\n  }, [getUsersByKeywords, t.MemberPicker.pleaseConfigGetUserByKeywordsMethod]);\n  const queryByIds = useMemo(() => {\n    if (getUsersByIds) {\n      return getUsersByIds;\n    }\n    return (_params = {}) =>\n      Promise.reject({\n        message: t.MemberPicker.pleaseConfigGetUserByIdsMethod,\n      });\n  }, [getUsersByIds, t.MemberPicker.pleaseConfigGetUserByIdsMethod]);\n  const { loading, run } = useRequest(() => queryByKeywords(searchString), {\n    refreshDeps: [searchString],\n    manual: true,\n    cacheKey: 'member-selector',\n    cacheTime: 1000 * 60 * 2, // 2分钟内不重复请求\n    onSuccess: (result) => {\n      setSearchUserList(result);\n    },\n    onError: (error) => {\n      message.error(error.message);\n    },\n  });\n  const totalUserList: TUser = useMemo(() => {\n    const totalUsers = searchUserList\n      .concat(selectedUserList)\n      .filter((item) => {\n        if (filterItem) {\n          return filterItem(item);\n        }\n        return true;\n      });\n    return _.uniqBy(totalUsers, (data: IUser | IUserGroup) => {\n      if (data.type === EUserType.USER) return data.userId;\n      return data.groupId;\n    });\n  }, [searchUserList, selectedUserList, filterItem]);\n\n  useEffect(() => {\n    run();\n  }, [run, searchString]);\n\n  useEffect(() => {\n    if (Array.isArray(value) && (isUser(value[0]) || isUserGroup(value[0]))) {\n      setSelectedUserList(value as TUser);\n    } else if (isUser(value) || isUserGroup(value)) {\n      setSelectedUserList([value]);\n    } else {\n      let param: Array<TUserValue | TUserGroupValue> = [];\n      if (!value) return;\n      if (Array.isArray(value) && value.length === 0) {\n        setSelectedUserList([]);\n        return;\n      }\n      if (!Array.isArray(value)) {\n        param = [value];\n      } else {\n        param = value;\n      }\n      queryByIds(param).then((result) => {\n        setSelectedUserList(result);\n      });\n    }\n  }, [value, queryByIds]);\n\n  const onSelectedChange = useCallback(\n    (users: TUser) => {\n      if (multiple) {\n        onChange?.(users);\n      } else {\n        onChange?.(users[0]);\n      }\n    },\n    [multiple, onChange],\n  );\n\n  return (\n    <Panel\n      type={type}\n      value={selectedUserList}\n      dataList={totalUserList}\n      multiple={multiple}\n      loading={loading}\n      dropdownWidth={dropdownWidth}\n      onSearchValueChange={onSearchValueChange}\n      onChange={onSelectedChange}\n      className={className}\n      onCancel={onCancel}\n      lockedIds={lockedIds}\n      footer={footer}\n      renderItem={renderItem}\n      renderSelectedTag={renderSelectedTag}\n    ></Panel>\n  );\n};\n\nexport default PanelWrapper;\n"],"mappings":";;;;;;;;;;;;AAoDA,IAAa,gBAAgB,EAC3B,OAAO,cAAc,MACrB,OACA,UACA,eACA,UACA,UACA,WACA,QACA,YAAY,EAAE,EACd,YACA,mBACA,iBACY;CACZ,MAAM,EAAE,WAAW,WAAW,cAAc;CAC5C,MAAM,IAAI,cAAc,OAAO;CAE/B,MAAM,EAAE,eAAe,uBAAuB,wBAAe,gBAAgB;CAC7E,MAAM,CAAC,kBAAkB,uBAAuB,SAAgB,EAAE,CAAC;CACnE,MAAM,CAAC,gBAAgB,qBAAqB,SAAgB,EAAE,CAAC;CAC/D,MAAM,CAAC,cAAc,mBAAmB,SAAiB,GAAG;CAE5D,MAAM,sBAAsB,aAAa,MAAc;AACrD,kBAAgB,EAAE;IACjB,EAAE,CAAC;CAEN,MAAM,kBAAkB,cAAc;AACpC,MAAI,mBACF,QAAO;AAET,UAAQ,UAAU,EAAE,KAClB,QAAQ,OAAO,EACb,SAAS,EAAE,aAAa,qCACzB,CAAC;IACH,CAAC,oBAAoB,EAAE,aAAa,oCAAoC,CAAC;CAC5E,MAAM,aAAa,cAAc;AAC/B,MAAI,cACF,QAAO;AAET,UAAQ,UAAU,EAAE,KAClB,QAAQ,OAAO,EACb,SAAS,EAAE,aAAa,gCACzB,CAAC;IACH,CAAC,eAAe,EAAE,aAAa,+BAA+B,CAAC;CAClE,MAAM,EAAE,SAAS,QAAQ,iBAAiB,gBAAgB,aAAa,EAAE;EACvE,aAAa,CAAC,aAAa;EAC3B,QAAQ;EACR,UAAU;EACV,WAAW,MAAO,KAAK;EACvB,YAAY,WAAW;AACrB,qBAAkB,OAAO;;EAE3B,UAAU,UAAU;AAClB,WAAQ,MAAM,MAAM,QAAQ;;EAE/B,CAAC;CACF,MAAM,gBAAuB,cAAc;EACzC,MAAM,aAAa,eAChB,OAAO,iBAAiB,CACxB,QAAQ,SAAS;AAChB,OAAI,WACF,QAAO,WAAW,KAAK;AAEzB,UAAO;IACP;AACJ,SAAO,EAAE,OAAO,aAAa,SAA6B;AACxD,OAAI,KAAK,SAAS,UAAU,KAAM,QAAO,KAAK;AAC9C,UAAO,KAAK;IACZ;IACD;EAAC;EAAgB;EAAkB;EAAW,CAAC;AAElD,iBAAgB;AACd,OAAK;IACJ,CAAC,KAAK,aAAa,CAAC;AAEvB,iBAAgB;AACd,MAAI,MAAM,QAAQ,MAAM,KAAK,OAAO,MAAM,GAAG,IAAI,YAAY,MAAM,GAAG,EACpE,qBAAoB,MAAe;WAC1B,OAAO,MAAM,IAAI,YAAY,MAAM,CAC5C,qBAAoB,CAAC,MAAM,CAAC;OACvB;GACL,IAAI,QAA6C,EAAE;AACnD,OAAI,CAAC,MAAO;AACZ,OAAI,MAAM,QAAQ,MAAM,IAAI,MAAM,WAAW,GAAG;AAC9C,wBAAoB,EAAE,CAAC;AACvB;;AAEF,OAAI,CAAC,MAAM,QAAQ,MAAM,CACvB,SAAQ,CAAC,MAAM;OAEf,SAAQ;AAEV,cAAW,MAAM,CAAC,MAAM,WAAW;AACjC,wBAAoB,OAAO;KAC3B;;IAEH,CAAC,OAAO,WAAW,CAAC;AAavB,QACE,oBAAC,OAAD;EACQ;EACN,OAAO;EACP,UAAU;EACA;EACD;EACM;EACM;EACrB,UApBqB,aACtB,UAAiB;AAChB,OAAI,SACF,YAAW,MAAM;OAEjB,YAAW,MAAM,GAAG;KAGxB,CAAC,UAAU,SAAS,CACrB;EAYc;EACD;EACC;EACH;EACI;EACO;EACZ,CAAA"}
+{"version":3,"file":"PanelWrapper.js","names":[],"sources":["../../../src/MemberPicker/components/PanelWrapper.tsx"],"sourcesContent":["import { useRequest } from 'ahooks';\nimport _ from 'lodash';\nimport React, {\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { message } from '../../';\nimport ConfigProvider from '../../ConfigProvider';\nimport {\n  EUserType,\n  IUserGroup,\n  TUser,\n  TUserGroupValue,\n  TUserValue,\n} from '../../ConfigProvider/getUserList';\nimport { LocaleContext, getTranslator } from '../../locale/default';\nimport { EMemberPicker, IUser, TMemberPickerValue } from '../interface';\nimport { isUser, isUserGroup } from '../utils/getUsersWithUserId';\nimport Panel from './Panel';\n\ninterface IProps {\n  type?: EMemberPicker;\n  multiple?: boolean;\n  onChange?(v: TUser | (IUser | IUserGroup)): void;\n  dropdownWidth?: number;\n  value?: TMemberPickerValue;\n  className?: string;\n  onCancel?: () => void;\n  lockedIds?: Array<TUserValue | TUserGroupValue>;\n  showUserId?: boolean;\n  footer?: ReactNode;\n  renderItem?: (\n    item: IUser | IUserGroup,\n    context: {\n      isSelected: boolean;\n      disabled: boolean;\n      onClick: () => void;\n      onNextLevel?: () => void;\n      originNode: ReactNode;\n    },\n  ) => ReactNode;\n  renderSelectedTag?: (\n    user: IUser | IUserGroup,\n    originNode: ReactNode,\n  ) => ReactNode;\n  filterItem?: (item: IUser | IUserGroup) => boolean;\n}\n\nexport const PanelWrapper = ({\n  type = EMemberPicker.USER,\n  value,\n  multiple,\n  dropdownWidth,\n  onChange,\n  onCancel,\n  className,\n  footer,\n  lockedIds = [],\n  renderItem,\n  renderSelectedTag,\n  filterItem,\n}: IProps) => {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const { getUsersByIds, getUsersByKeywords } = ConfigProvider.useGetUserList();\n  const [selectedUserList, setSelectedUserList] = useState<TUser>([]);\n  const [searchUserList, setSearchUserList] = useState<TUser>([]);\n  const [searchString, setSearchString] = useState<string>('');\n\n  const onSearchValueChange = useCallback((v: string) => {\n    setSearchString(v);\n  }, []);\n\n  const queryByKeywords = useMemo(() => {\n    if (getUsersByKeywords) {\n      return getUsersByKeywords;\n    }\n    return (_params = {}) =>\n      Promise.reject({\n        message: t.MemberPicker.pleaseConfigGetUserByKeywordsMethod,\n      });\n  }, [getUsersByKeywords, t.MemberPicker.pleaseConfigGetUserByKeywordsMethod]);\n  const queryByIds = useMemo(() => {\n    if (getUsersByIds) {\n      return getUsersByIds;\n    }\n    return (_params = {}) =>\n      Promise.reject({\n        message: t.MemberPicker.pleaseConfigGetUserByIdsMethod,\n      });\n  }, [getUsersByIds, t.MemberPicker.pleaseConfigGetUserByIdsMethod]);\n  const { loading, run } = useRequest(() => queryByKeywords(searchString), {\n    refreshDeps: [searchString],\n    manual: true,\n    cacheKey: 'member-selector',\n    cacheTime: 1000 * 60 * 2, // 2分钟内不重复请求\n    onSuccess: (result) => {\n      setSearchUserList(result);\n    },\n    onError: (error) => {\n      message.error(error.message);\n    },\n  });\n  const totalUserList: TUser = useMemo(() => {\n    const totalUsers = searchUserList\n      .concat(selectedUserList)\n      .filter((item) => {\n        if (filterItem) {\n          return filterItem(item);\n        }\n        return true;\n      });\n    return _.uniqBy(totalUsers, (data: IUser | IUserGroup) => {\n      if (data.type === EUserType.USER) return data.userId;\n      return data.groupId;\n    });\n  }, [searchUserList, selectedUserList, filterItem]);\n\n  useEffect(() => {\n    run();\n  }, [run, searchString]);\n\n  useEffect(() => {\n    if (Array.isArray(value) && (isUser(value[0]) || isUserGroup(value[0]))) {\n      setSelectedUserList(value as TUser);\n    } else if (isUser(value) || isUserGroup(value)) {\n      setSelectedUserList([value]);\n    } else {\n      let param: Array<TUserValue | TUserGroupValue> = [];\n      if (!value) return;\n      if (Array.isArray(value) && value.length === 0) {\n        setSelectedUserList([]);\n        return;\n      }\n      if (!Array.isArray(value)) {\n        param = [value];\n      } else {\n        param = value;\n      }\n      queryByIds(param).then((result) => {\n        setSelectedUserList(result);\n      });\n    }\n  }, [value, queryByIds]);\n\n  const onSelectedChange = useCallback(\n    (users: TUser) => {\n      if (multiple) {\n        onChange?.(users);\n      } else {\n        onChange?.(users[0]);\n      }\n    },\n    [multiple, onChange],\n  );\n\n  return (\n    <Panel\n      type={type}\n      value={selectedUserList}\n      dataList={totalUserList}\n      multiple={multiple}\n      loading={loading}\n      dropdownWidth={dropdownWidth}\n      onSearchValueChange={onSearchValueChange}\n      searchValue={searchString}\n      showSearch\n      onChange={onSelectedChange}\n      className={className}\n      onCancel={onCancel}\n      lockedIds={lockedIds}\n      footer={footer}\n      renderItem={renderItem}\n      renderSelectedTag={renderSelectedTag}\n    ></Panel>\n  );\n};\n\nexport default PanelWrapper;\n"],"mappings":";;;;;;;;;;;;AAoDA,IAAa,gBAAgB,EAC3B,OAAO,cAAc,MACrB,OACA,UACA,eACA,UACA,UACA,WACA,QACA,YAAY,EAAE,EACd,YACA,mBACA,iBACY;CACZ,MAAM,EAAE,WAAW,WAAW,cAAc;CAC5C,MAAM,IAAI,cAAc,OAAO;CAE/B,MAAM,EAAE,eAAe,uBAAuB,wBAAe,gBAAgB;CAC7E,MAAM,CAAC,kBAAkB,uBAAuB,SAAgB,EAAE,CAAC;CACnE,MAAM,CAAC,gBAAgB,qBAAqB,SAAgB,EAAE,CAAC;CAC/D,MAAM,CAAC,cAAc,mBAAmB,SAAiB,GAAG;CAE5D,MAAM,sBAAsB,aAAa,MAAc;AACrD,kBAAgB,EAAE;IACjB,EAAE,CAAC;CAEN,MAAM,kBAAkB,cAAc;AACpC,MAAI,mBACF,QAAO;AAET,UAAQ,UAAU,EAAE,KAClB,QAAQ,OAAO,EACb,SAAS,EAAE,aAAa,qCACzB,CAAC;IACH,CAAC,oBAAoB,EAAE,aAAa,oCAAoC,CAAC;CAC5E,MAAM,aAAa,cAAc;AAC/B,MAAI,cACF,QAAO;AAET,UAAQ,UAAU,EAAE,KAClB,QAAQ,OAAO,EACb,SAAS,EAAE,aAAa,gCACzB,CAAC;IACH,CAAC,eAAe,EAAE,aAAa,+BAA+B,CAAC;CAClE,MAAM,EAAE,SAAS,QAAQ,iBAAiB,gBAAgB,aAAa,EAAE;EACvE,aAAa,CAAC,aAAa;EAC3B,QAAQ;EACR,UAAU;EACV,WAAW,MAAO,KAAK;EACvB,YAAY,WAAW;AACrB,qBAAkB,OAAO;;EAE3B,UAAU,UAAU;AAClB,WAAQ,MAAM,MAAM,QAAQ;;EAE/B,CAAC;CACF,MAAM,gBAAuB,cAAc;EACzC,MAAM,aAAa,eAChB,OAAO,iBAAiB,CACxB,QAAQ,SAAS;AAChB,OAAI,WACF,QAAO,WAAW,KAAK;AAEzB,UAAO;IACP;AACJ,SAAO,EAAE,OAAO,aAAa,SAA6B;AACxD,OAAI,KAAK,SAAS,UAAU,KAAM,QAAO,KAAK;AAC9C,UAAO,KAAK;IACZ;IACD;EAAC;EAAgB;EAAkB;EAAW,CAAC;AAElD,iBAAgB;AACd,OAAK;IACJ,CAAC,KAAK,aAAa,CAAC;AAEvB,iBAAgB;AACd,MAAI,MAAM,QAAQ,MAAM,KAAK,OAAO,MAAM,GAAG,IAAI,YAAY,MAAM,GAAG,EACpE,qBAAoB,MAAe;WAC1B,OAAO,MAAM,IAAI,YAAY,MAAM,CAC5C,qBAAoB,CAAC,MAAM,CAAC;OACvB;GACL,IAAI,QAA6C,EAAE;AACnD,OAAI,CAAC,MAAO;AACZ,OAAI,MAAM,QAAQ,MAAM,IAAI,MAAM,WAAW,GAAG;AAC9C,wBAAoB,EAAE,CAAC;AACvB;;AAEF,OAAI,CAAC,MAAM,QAAQ,MAAM,CACvB,SAAQ,CAAC,MAAM;OAEf,SAAQ;AAEV,cAAW,MAAM,CAAC,MAAM,WAAW;AACjC,wBAAoB,OAAO;KAC3B;;IAEH,CAAC,OAAO,WAAW,CAAC;AAavB,QACE,oBAAC,OAAD;EACQ;EACN,OAAO;EACP,UAAU;EACA;EACD;EACM;EACM;EACrB,aAAa;EACb,YAAA;EACA,UAtBqB,aACtB,UAAiB;AAChB,OAAI,SACF,YAAW,MAAM;OAEjB,YAAW,MAAM,GAAG;KAGxB,CAAC,UAAU,SAAS,CACrB;EAcc;EACD;EACC;EACH;EACI;EACO;EACZ,CAAA"}

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

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

package/dist/MemberPicker/components/UserGroupSelection.js

@@ -1,7 +1,9 @@
 import { cn } from "../../lib/utils.js";
 import Memo from "../../Icon/components/ChevronLeftLine.js";
+import Memo$1 from "../../Icon/components/SearchLine.js";
 import Breadcrumb from "../../Breadcrumb/index.js";
 import { LocaleContext, getTranslator } from "../../locale/default.js";
+import Input from "../../Input/index.js";
 import Empty from "../../Empty/index.js";
 import ScrollArea_default from "../../ScrollArea/index.js";
 import GetUserListContext from "../../ConfigProvider/getUserList.js";
@@ -13,7 +15,7 @@ import { useContext, useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import _ from "lodash";
 //#region src/MemberPicker/components/UserGroupSelection.tsx
-var UserGroupSelection = ({ className, userGroupList, multiple, onChange, selectedUsersGroup: selectedUsersGroups, loading, onSearchValueChange, width, lockedIds, filterItem, searchValue = "", renderItem }) => {
+var UserGroupSelection = ({ className, userGroupList, multiple, onChange, selectedUsersGroup: selectedUsersGroups, loading, onSearchValueChange, width, lockedIds, filterItem, searchValue = "", showSearch, renderItem }) => {
 	const { locale } = useContext(LocaleContext);
 	const t = getTranslator(locale);
 	const { getNextLevelGroup } = useContext(GetUserListContext);
@@ -67,6 +69,14 @@ var UserGroupSelection = ({ className, userGroupList, multiple, onChange, select
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn(className, "ald-member-picker-member-list-wrap"),
 		children: [
+			showSearch && /* @__PURE__ */ jsx(Input, {
+				prefix: /* @__PURE__ */ jsx(Memo$1, { size: 16 }),
+				className: "ald-member-picker-search-input",
+				"aria-label": t.InputSearch.search,
+				autoFocus: true,
+				value: searchValue,
+				onChange: (event) => onSearchValueChange?.(event.target.value)
+			}),
 			userGroupList.length === 0 && !loading && /* @__PURE__ */ jsx(Empty, {
 				title: t.MemberPicker.noData,
 				size: "small",