@aloudata/aloudata-design 3.0.0-beta.8 → 3.0.0

package/dist/InputSearch/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/InputSearch/index.tsx"],"sourcesContent":["import { useDebounceFn } from 'ahooks';\nimport { cn } from '../lib/utils';\nimport _ from 'lodash';\nimport React, {\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { SearchLine } from '../Icon';\nimport Input from '../Input';\nimport { ELangType, LocaleContext, getTranslator } from '../locale/default';\nimport './input-search.css';\n\ninterface ICustomCSSProperties extends React.CSSProperties {\n  '--init-width'?: string;\n}\n\nconst DEFAULT_SMALL_WIDTH = 68;\nconst DEFAULT_WIDTH = 78;\nconst DEFAULT_EN_SMALL_WIDTH = 88;\nconst DEFAULT_EN_WIDTH = 98;\nconst DEFAULT_LARGE_WIDTH = 88;\nconst DEFAULT_EN_LARGE_WIDTH = 108;\n\nexport default function InputSearch(props: IProps) {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const {\n    onSearch,\n    onChange,\n    className,\n    debounce = true,\n    placeholder,\n    size = 'small',\n    defaultValue,\n    value,\n    inputMode = false,\n    style,\n    onBlur,\n    disabled,\n  } = props;\n\n  const defaultWidth = useMemo(() => {\n    if (size === 'small') {\n      if (locale === ELangType.EN) {\n        return DEFAULT_EN_SMALL_WIDTH;\n      }\n      return DEFAULT_SMALL_WIDTH;\n    } else if (size === 'middle') {\n      if (locale === ELangType.EN) {\n        return DEFAULT_EN_WIDTH;\n      }\n      return DEFAULT_WIDTH;\n    } else {\n      if (locale === ELangType.EN) {\n        return DEFAULT_EN_LARGE_WIDTH;\n      }\n      return DEFAULT_LARGE_WIDTH;\n    }\n  }, [locale, size]);\n\n  // 判断是否为受控模式\n  const isControlled = 'value' in props;\n  const [searchValue, setSearchValue] = useState(defaultValue || '');\n\n  // 获取当前值：受控模式使用 value，非受控模式使用内部状态\n  const currentValue = isControlled ? value ?? '' : searchValue;\n\n  const isComposing = useRef(false);\n\n  const onPressEnter = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (!isComposing.current) {\n        onSearch(_.trim((e.target as HTMLInputElement).value));\n      }\n    },\n    [onSearch],\n  );\n\n  const DEFAULT_DEBOUNCE_TIME = 500;\n  const { run: debounceSearch } = useDebounceFn<(val: string) => void>(\n    (val) => {\n      if (!isComposing.current) {\n        onSearch(val);\n      }\n    },\n    {\n      wait: DEFAULT_DEBOUNCE_TIME,\n    },\n  );\n\n  const onChangeValue = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = e.target.value;\n\n      // 非受控模式才更新内部状态\n      if (!isControlled) {\n        setSearchValue(newValue);\n      } else {\n        onChange?.(newValue);\n        return;\n      }\n\n      if (!isComposing.current) {\n        // 受控的时候debounce不生效\n        if (debounce && !isControlled) {\n          debounceSearch(newValue);\n        } else {\n          onSearch(newValue);\n        }\n      }\n    },\n    [debounce, debounceSearch, onSearch, isControlled, onChange],\n  );\n\n  const handleCompositionStart = useCallback(() => {\n    isComposing.current = true;\n  }, []);\n\n  const handleCompositionEnd = useCallback(\n    (e: React.CompositionEvent<HTMLInputElement>) => {\n      if (isControlled) {\n        return;\n      }\n      isComposing.current = false;\n      // 在输入法结束后触发一次搜索\n      const value = (e.target as HTMLInputElement).value;\n      if (debounce) {\n        debounceSearch(value);\n      } else {\n        onSearch(value);\n      }\n    },\n    [debounce, debounceSearch, isControlled, onSearch],\n  );\n\n  const iconSize = useMemo(() => {\n    if (size === 'middle' || size === 'large') {\n      return 20;\n    }\n    return 16;\n  }, [size]);\n\n  return (\n    <div\n      className={cn('ald-input-search', className, {\n        ['input-search-size-small']: size === 'small',\n        ['input-search-size-middle']: size === 'middle',\n        ['input-search-size-large']: size === 'large',\n      })}\n      style={\n        {\n          ...style,\n          '--init-width': (props.initWidth || defaultWidth) + 'px',\n        } as ICustomCSSProperties\n      }\n    >\n      <Input\n        className={cn({\n          ['input-search-has-value']: currentValue.length !== 0 || inputMode,\n          ['input-search-has-content']: currentValue.length !== 0,\n          ['inputMode']: inputMode,\n        })}\n        size={size}\n        // @ts-ignore\n        status={'success'}\n        onChange={onChangeValue}\n        onPressEnter={onPressEnter}\n        onCompositionStart={handleCompositionStart}\n        onCompositionEnd={handleCompositionEnd}\n        prefix={<SearchLine size={iconSize} />}\n        placeholder={placeholder || t.InputSearch.search}\n        allowClear\n        disabled={disabled}\n        {...(isControlled\n          ? { value: currentValue }\n          : { defaultValue: defaultValue })}\n        onBlur={(e) => {\n          if (onBlur) {\n            onBlur(currentValue, e);\n          }\n        }}\n      />\n    </div>\n  );\n}\n\ninterface IProps {\n  /** 搜索回调，在输入完成时触发（回车、输入法结束、非输入法输入时） */\n  onSearch: (value: string) => void;\n  /** 值变化回调（受控模式时推荐使用，每次输入都触发，包括输入法期间） */\n  onChange?: (value: string) => void;\n  onBlur?: (value: string, e: React.FocusEvent<HTMLInputElement>) => void;\n  className?: string;\n  // 是否开启防抖\n  debounce?: boolean;\n  placeholder?: string;\n  size?: 'small' | 'middle' | 'large';\n  initWidth?: number;\n  defaultValue?: string;\n  // 受控模式的值\n  value?: string;\n  inputMode?: boolean;\n  style?: React.CSSProperties;\n  disabled?: boolean;\n}\n"],"mappings":";;;;;;;;;;AAmBA,IAAM,sBAAsB;AAC5B,IAAM,gBAAgB;AACtB,IAAM,yBAAyB;AAC/B,IAAM,mBAAmB;AACzB,IAAM,sBAAsB;AAC5B,IAAM,yBAAyB;AAE/B,SAAwB,YAAY,OAAe;CACjD,MAAM,EAAE,WAAW,WAAW,cAAc;CAC5C,MAAM,IAAI,cAAc,OAAO;CAE/B,MAAM,EACJ,UACA,UACA,WACA,WAAW,MACX,aACA,OAAO,SACP,cACA,OACA,YAAY,OACZ,OACA,QACA,aACE;CAEJ,MAAM,eAAe,cAAc;AACjC,MAAI,SAAS,SAAS;AACpB,OAAI,WAAW,UAAU,GACvB,QAAO;AAET,UAAO;aACE,SAAS,UAAU;AAC5B,OAAI,WAAW,UAAU,GACvB,QAAO;AAET,UAAO;SACF;AACL,OAAI,WAAW,UAAU,GACvB,QAAO;AAET,UAAO;;IAER,CAAC,QAAQ,KAAK,CAAC;CAGlB,MAAM,eAAe,WAAW;CAChC,MAAM,CAAC,aAAa,kBAAkB,SAAS,gBAAgB,GAAG;CAGlE,MAAM,eAAe,eAAe,SAAS,KAAK;CAElD,MAAM,cAAc,OAAO,MAAM;CAEjC,MAAM,eAAe,aAClB,MAA6C;AAC5C,MAAI,CAAC,YAAY,QACf,UAAS,EAAE,KAAM,EAAE,OAA4B,MAAM,CAAC;IAG1D,CAAC,SAAS,CACX;CAGD,MAAM,EAAE,KAAK,mBAAmB,eAC7B,QAAQ;AACP,MAAI,CAAC,YAAY,QACf,UAAS,IAAI;IAGjB,EACE,MAR0B,KAS3B,CACF;CAED,MAAM,gBAAgB,aACnB,MAA2C;EAC1C,MAAM,WAAW,EAAE,OAAO;AAG1B,MAAI,CAAC,aACH,gBAAe,SAAS;OACnB;AACL,cAAW,SAAS;AACpB;;AAGF,MAAI,CAAC,YAAY,QAEf,KAAI,YAAY,CAAC,aACf,gBAAe,SAAS;MAExB,UAAS,SAAS;IAIxB;EAAC;EAAU;EAAgB;EAAU;EAAc;EAAS,CAC7D;CAED,MAAM,yBAAyB,kBAAkB;AAC/C,cAAY,UAAU;IACrB,EAAE,CAAC;CAEN,MAAM,uBAAuB,aAC1B,MAAgD;AAC/C,MAAI,aACF;AAEF,cAAY,UAAU;EAEtB,MAAM,QAAS,EAAE,OAA4B;AAC7C,MAAI,SACF,gBAAe,MAAM;MAErB,UAAS,MAAM;IAGnB;EAAC;EAAU;EAAgB;EAAc;EAAS,CACnD;CAED,MAAM,WAAW,cAAc;AAC7B,MAAI,SAAS,YAAY,SAAS,QAChC,QAAO;AAET,SAAO;IACN,CAAC,KAAK,CAAC;AAEV,QACE,oBAAC,OAAD;EACE,WAAW,GAAG,oBAAoB,WAAW;IAC1C,4BAA4B,SAAS;IACrC,6BAA6B,SAAS;IACtC,4BAA4B,SAAS;GACvC,CAAC;EACF,OACE;GACE,GAAG;GACH,iBAAiB,MAAM,aAAa,gBAAgB;GACrD;YAGH,oBAAC,OAAD;GACE,WAAW,GAAG;KACX,2BAA2B,aAAa,WAAW,KAAK;KACxD,6BAA6B,aAAa,WAAW;KACrD,cAAc;IAChB,CAAC;GACI;GAEN,QAAQ;GACR,UAAU;GACI;GACd,oBAAoB;GACpB,kBAAkB;GAClB,QAAQ,oBAAC,MAAD,EAAY,MAAM,UAAY,CAAA;GACtC,aAAa,eAAe,EAAE,YAAY;GAC1C,YAAA;GACU;GACV,GAAK,eACD,EAAE,OAAO,cAAc,GACvB,EAAgB,cAAc;GAClC,SAAS,MAAM;AACb,QAAI,OACF,QAAO,cAAc,EAAE;;GAG3B,CAAA;EACE,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/InputSearch/index.tsx"],"sourcesContent":["import { useDebounceFn } from 'ahooks';\nimport { cn } from '../lib/utils';\nimport _ from 'lodash';\nimport React, {\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { SearchLine } from '../Icon';\nimport Input from '../Input';\nimport { ELangType, LocaleContext, getTranslator } from '../locale/default';\nimport './input-search.css';\n\ninterface ICustomCSSProperties extends React.CSSProperties {\n  '--init-width'?: string;\n}\n\nconst DEFAULT_SMALL_WIDTH = 68;\nconst DEFAULT_WIDTH = 78;\nconst DEFAULT_EN_SMALL_WIDTH = 88;\nconst DEFAULT_EN_WIDTH = 98;\nconst DEFAULT_LARGE_WIDTH = 88;\nconst DEFAULT_EN_LARGE_WIDTH = 108;\n\nexport default function InputSearch(props: IProps) {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const {\n    onSearch,\n    onChange,\n    className,\n    debounce = true,\n    placeholder,\n    size = 'small',\n    defaultValue,\n    value,\n    inputMode = false,\n    style,\n    onBlur,\n    disabled,\n  } = props;\n\n  const defaultWidth = useMemo(() => {\n    if (size === 'small') {\n      if (locale === ELangType.EN) {\n        return DEFAULT_EN_SMALL_WIDTH;\n      }\n      return DEFAULT_SMALL_WIDTH;\n    } else if (size === 'middle') {\n      if (locale === ELangType.EN) {\n        return DEFAULT_EN_WIDTH;\n      }\n      return DEFAULT_WIDTH;\n    } else {\n      if (locale === ELangType.EN) {\n        return DEFAULT_EN_LARGE_WIDTH;\n      }\n      return DEFAULT_LARGE_WIDTH;\n    }\n  }, [locale, size]);\n\n  // 判断是否为受控模式\n  const isControlled = 'value' in props;\n  const [searchValue, setSearchValue] = useState(defaultValue || '');\n\n  // 获取当前值：受控模式使用 value，非受控模式使用内部状态\n  const currentValue = isControlled ? value ?? '' : searchValue;\n\n  const isComposing = useRef(false);\n\n  const onPressEnter = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (!isComposing.current) {\n        onSearch(_.trim((e.target as HTMLInputElement).value));\n      }\n    },\n    [onSearch],\n  );\n\n  const DEFAULT_DEBOUNCE_TIME = 500;\n  const { run: debounceSearch } = useDebounceFn<(val: string) => void>(\n    (val) => {\n      if (!isComposing.current) {\n        onSearch(val);\n      }\n    },\n    {\n      wait: DEFAULT_DEBOUNCE_TIME,\n    },\n  );\n\n  const onChangeValue = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = e.target.value;\n\n      // 非受控模式才更新内部状态\n      if (!isControlled) {\n        setSearchValue(newValue);\n      } else {\n        onChange?.(newValue);\n        return;\n      }\n\n      if (!isComposing.current) {\n        // 受控的时候debounce不生效\n        if (debounce && !isControlled) {\n          debounceSearch(newValue);\n        } else {\n          onSearch(newValue);\n        }\n      }\n    },\n    [debounce, debounceSearch, onSearch, isControlled, onChange],\n  );\n\n  const handleCompositionStart = useCallback(() => {\n    isComposing.current = true;\n  }, []);\n\n  const handleCompositionEnd = useCallback(\n    (e: React.CompositionEvent<HTMLInputElement>) => {\n      if (isControlled) {\n        return;\n      }\n      isComposing.current = false;\n      // 在输入法结束后触发一次搜索\n      const value = (e.target as HTMLInputElement).value;\n      if (debounce) {\n        debounceSearch(value);\n      } else {\n        onSearch(value);\n      }\n    },\n    [debounce, debounceSearch, isControlled, onSearch],\n  );\n\n  const iconSize = useMemo(() => {\n    if (size === 'middle' || size === 'large') {\n      return 20;\n    }\n    return 16;\n  }, [size]);\n\n  return (\n    <div\n      className={cn('ald-input-search', className, {\n        ['input-search-size-small']: size === 'small',\n        ['input-search-size-middle']: size === 'middle',\n        ['input-search-size-large']: size === 'large',\n      })}\n      style={\n        {\n          ...style,\n          '--init-width': (props.initWidth || defaultWidth) + 'px',\n        } as ICustomCSSProperties\n      }\n    >\n      <Input\n        className={cn({\n          ['input-search-has-value']: currentValue.length !== 0 || inputMode,\n          ['input-search-has-content']: currentValue.length !== 0,\n          ['inputMode']: inputMode,\n        })}\n        size={size}\n        onChange={onChangeValue}\n        onPressEnter={onPressEnter}\n        onCompositionStart={handleCompositionStart}\n        onCompositionEnd={handleCompositionEnd}\n        prefix={<SearchLine size={iconSize} />}\n        placeholder={placeholder || t.InputSearch.search}\n        allowClear\n        disabled={disabled}\n        {...(isControlled\n          ? { value: currentValue }\n          : { defaultValue: defaultValue })}\n        onBlur={(e) => {\n          if (onBlur) {\n            onBlur(currentValue, e);\n          }\n        }}\n      />\n    </div>\n  );\n}\n\ninterface IProps {\n  /** 搜索回调，在输入完成时触发（回车、输入法结束、非输入法输入时） */\n  onSearch: (value: string) => void;\n  /** 值变化回调（受控模式时推荐使用，每次输入都触发，包括输入法期间） */\n  onChange?: (value: string) => void;\n  onBlur?: (value: string, e: React.FocusEvent<HTMLInputElement>) => void;\n  className?: string;\n  // 是否开启防抖\n  debounce?: boolean;\n  placeholder?: string;\n  size?: 'small' | 'middle' | 'large';\n  initWidth?: number;\n  defaultValue?: string;\n  // 受控模式的值\n  value?: string;\n  inputMode?: boolean;\n  style?: React.CSSProperties;\n  disabled?: boolean;\n}\n"],"mappings":";;;;;;;;;;AAmBA,IAAM,sBAAsB;AAC5B,IAAM,gBAAgB;AACtB,IAAM,yBAAyB;AAC/B,IAAM,mBAAmB;AACzB,IAAM,sBAAsB;AAC5B,IAAM,yBAAyB;AAE/B,SAAwB,YAAY,OAAe;CACjD,MAAM,EAAE,WAAW,WAAW,cAAc;CAC5C,MAAM,IAAI,cAAc,OAAO;CAE/B,MAAM,EACJ,UACA,UACA,WACA,WAAW,MACX,aACA,OAAO,SACP,cACA,OACA,YAAY,OACZ,OACA,QACA,aACE;CAEJ,MAAM,eAAe,cAAc;AACjC,MAAI,SAAS,SAAS;AACpB,OAAI,WAAW,UAAU,GACvB,QAAO;AAET,UAAO;aACE,SAAS,UAAU;AAC5B,OAAI,WAAW,UAAU,GACvB,QAAO;AAET,UAAO;SACF;AACL,OAAI,WAAW,UAAU,GACvB,QAAO;AAET,UAAO;;IAER,CAAC,QAAQ,KAAK,CAAC;CAGlB,MAAM,eAAe,WAAW;CAChC,MAAM,CAAC,aAAa,kBAAkB,SAAS,gBAAgB,GAAG;CAGlE,MAAM,eAAe,eAAe,SAAS,KAAK;CAElD,MAAM,cAAc,OAAO,MAAM;CAEjC,MAAM,eAAe,aAClB,MAA6C;AAC5C,MAAI,CAAC,YAAY,QACf,UAAS,EAAE,KAAM,EAAE,OAA4B,MAAM,CAAC;IAG1D,CAAC,SAAS,CACX;CAGD,MAAM,EAAE,KAAK,mBAAmB,eAC7B,QAAQ;AACP,MAAI,CAAC,YAAY,QACf,UAAS,IAAI;IAGjB,EACE,MAR0B,KAS3B,CACF;CAED,MAAM,gBAAgB,aACnB,MAA2C;EAC1C,MAAM,WAAW,EAAE,OAAO;AAG1B,MAAI,CAAC,aACH,gBAAe,SAAS;OACnB;AACL,cAAW,SAAS;AACpB;;AAGF,MAAI,CAAC,YAAY,QAEf,KAAI,YAAY,CAAC,aACf,gBAAe,SAAS;MAExB,UAAS,SAAS;IAIxB;EAAC;EAAU;EAAgB;EAAU;EAAc;EAAS,CAC7D;CAED,MAAM,yBAAyB,kBAAkB;AAC/C,cAAY,UAAU;IACrB,EAAE,CAAC;CAEN,MAAM,uBAAuB,aAC1B,MAAgD;AAC/C,MAAI,aACF;AAEF,cAAY,UAAU;EAEtB,MAAM,QAAS,EAAE,OAA4B;AAC7C,MAAI,SACF,gBAAe,MAAM;MAErB,UAAS,MAAM;IAGnB;EAAC;EAAU;EAAgB;EAAc;EAAS,CACnD;CAED,MAAM,WAAW,cAAc;AAC7B,MAAI,SAAS,YAAY,SAAS,QAChC,QAAO;AAET,SAAO;IACN,CAAC,KAAK,CAAC;AAEV,QACE,oBAAC,OAAD;EACE,WAAW,GAAG,oBAAoB,WAAW;IAC1C,4BAA4B,SAAS;IACrC,6BAA6B,SAAS;IACtC,4BAA4B,SAAS;GACvC,CAAC;EACF,OACE;GACE,GAAG;GACH,iBAAiB,MAAM,aAAa,gBAAgB;GACrD;YAGH,oBAAC,OAAD;GACE,WAAW,GAAG;KACX,2BAA2B,aAAa,WAAW,KAAK;KACxD,6BAA6B,aAAa,WAAW;KACrD,cAAc;IAChB,CAAC;GACI;GACN,UAAU;GACI;GACd,oBAAoB;GACpB,kBAAkB;GAClB,QAAQ,oBAAC,MAAD,EAAY,MAAM,UAAY,CAAA;GACtC,aAAa,eAAe,EAAE,YAAY;GAC1C,YAAA;GACU;GACV,GAAK,eACD,EAAE,OAAO,cAAc,GACvB,EAAgB,cAAc;GAClC,SAAS,MAAM;AACb,QAAI,OACF,QAAO,cAAc,EAAE;;GAG3B,CAAA;EACE,CAAA"}

package/dist/Layout/index.js

@@ -48,7 +48,7 @@ function Sider({ className, style, children, width = 200, collapsed: controlledC
 	};
 	const showTrigger = collapsible && trigger !== null;
 	return /* @__PURE__ */ jsxs("aside", {
-		className: cn("ald-layout-sider tw-relative tw-flex tw-flex-none tw-flex-col tw-transition-all", theme === "dark" && "tw-bg-[#001529] tw-text-white", className),
+		className: cn("ald-layout-sider tw-relative tw-flex tw-flex-none tw-flex-col tw-transition-all", theme === "dark" && "tw-bg-[var(--background-inverted)] tw-text-[var(--content-inverted-primary)]", className),
 		style: {
 			width: isCollapsed ? collapsedWidth : width,
 			...style

package/dist/Layout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Layout/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface LayoutProps {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  hasSider?: boolean;\n}\n\nexport interface SiderProps {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  width?: number | string;\n  collapsed?: boolean;\n  collapsedWidth?: number | string;\n  collapsible?: boolean;\n  trigger?: React.ReactNode;\n  onCollapse?: (collapsed: boolean) => void;\n  breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';\n  onBreakpoint?: (broken: boolean) => void;\n  theme?: 'light' | 'dark';\n}\n\ninterface LayoutComponent extends React.FC<LayoutProps> {\n  Header: React.FC<LayoutProps>;\n  Footer: React.FC<LayoutProps>;\n  Content: React.FC<LayoutProps>;\n  Sider: React.FC<SiderProps>;\n}\n\nconst Layout: LayoutComponent = ({ className, style, children, hasSider }) => (\n  <section\n    className={cn(\n      'ald-layout tw-flex tw-flex-auto',\n      hasSider ? 'tw-flex-row' : 'tw-flex-col',\n      className,\n    )}\n    style={style}\n  >\n    {children}\n  </section>\n);\n\nLayout.Header = ({ className, style, children }) => (\n  <header\n    className={cn('ald-layout-header tw-flex-none', className)}\n    style={style}\n  >\n    {children}\n  </header>\n);\n\nLayout.Footer = ({ className, style, children }) => (\n  <footer\n    className={cn('ald-layout-footer tw-flex-none', className)}\n    style={style}\n  >\n    {children}\n  </footer>\n);\n\nLayout.Content = ({ className, style, children }) => (\n  <main\n    className={cn('ald-layout-content tw-flex-auto', className)}\n    style={style}\n  >\n    {children}\n  </main>\n);\n\nconst breakpointWidths: Record<string, number> = {\n  xs: 480,\n  sm: 576,\n  md: 768,\n  lg: 992,\n  xl: 1200,\n  xxl: 1600,\n};\n\nfunction Sider({\n  className,\n  style,\n  children,\n  width = 200,\n  collapsed: controlledCollapsed,\n  collapsedWidth = 80,\n  collapsible = false,\n  trigger,\n  onCollapse,\n  breakpoint,\n  onBreakpoint,\n  theme,\n}: SiderProps) {\n  const [internalCollapsed, setInternalCollapsed] = React.useState(false);\n\n  React.useEffect(() => {\n    if (!breakpoint) return;\n    const mq = window.matchMedia(\n      `(max-width: ${breakpointWidths[breakpoint]}px)`,\n    );\n    const handler = (e: MediaQueryListEvent) => onBreakpoint?.(e.matches);\n    mq.addEventListener('change', handler);\n    onBreakpoint?.(mq.matches);\n    return () => mq.removeEventListener('change', handler);\n  }, [breakpoint, onBreakpoint]);\n  const isCollapsed =\n    controlledCollapsed !== undefined ? controlledCollapsed : internalCollapsed;\n\n  const handleToggle = () => {\n    const next = !isCollapsed;\n    if (controlledCollapsed === undefined) {\n      setInternalCollapsed(next);\n    }\n    onCollapse?.(next);\n  };\n\n  const showTrigger = collapsible && trigger !== null;\n\n  return (\n    <aside\n      className={cn(\n        'ald-layout-sider tw-relative tw-flex tw-flex-none tw-flex-col tw-transition-all',\n        theme === 'dark' && 'tw-bg-[#001529] tw-text-white',\n        className,\n      )}\n      style={{\n        width: isCollapsed ? collapsedWidth : width,\n        ...style,\n      }}\n    >\n      <div className=\"tw-flex-1 tw-overflow-hidden\">{children}</div>\n      {showTrigger && (\n        <div\n          className=\"ald-layout-sider-trigger tw-flex tw-h-12 tw-cursor-pointer tw-items-center tw-justify-center tw-border-t tw-border-solid tw-border-[var(--border-default)] tw-bg-[var(--background-neutral-subtle)] tw-text-[var(--content-secondary)] hover:tw-text-[var(--content-primary)]\"\n          onClick={handleToggle}\n        >\n          {trigger !== undefined ? (\n            trigger\n          ) : (\n            <span\n              className=\"tw-inline-block tw-text-xs tw-transition-transform\"\n              style={{\n                transform: isCollapsed ? 'rotate(0deg)' : 'rotate(180deg)',\n              }}\n            >\n              {'\\u25C0'}\n            </span>\n          )}\n        </div>\n      )}\n    </aside>\n  );\n}\n\nLayout.Sider = Sider;\n\nexport default Layout;\n"],"mappings":";;;;AAgCA,IAAM,UAA2B,EAAE,WAAW,OAAO,UAAU,eAC7D,oBAAC,WAAD;CACE,WAAW,GACT,mCACA,WAAW,gBAAgB,eAC3B,UACD;CACM;CAEN;CACO,CAAA;AAGZ,OAAO,UAAU,EAAE,WAAW,OAAO,eACnC,oBAAC,UAAD;CACE,WAAW,GAAG,kCAAkC,UAAU;CACnD;CAEN;CACM,CAAA;AAGX,OAAO,UAAU,EAAE,WAAW,OAAO,eACnC,oBAAC,UAAD;CACE,WAAW,GAAG,kCAAkC,UAAU;CACnD;CAEN;CACM,CAAA;AAGX,OAAO,WAAW,EAAE,WAAW,OAAO,eACpC,oBAAC,QAAD;CACE,WAAW,GAAG,mCAAmC,UAAU;CACpD;CAEN;CACI,CAAA;AAGT,IAAM,mBAA2C;CAC/C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,KAAK;CACN;AAED,SAAS,MAAM,EACb,WACA,OACA,UACA,QAAQ,KACR,WAAW,qBACX,iBAAiB,IACjB,cAAc,OACd,SACA,YACA,YACA,cACA,SACa;CACb,MAAM,CAAC,mBAAmB,wBAAwB,MAAM,SAAS,MAAM;AAEvE,OAAM,gBAAgB;AACpB,MAAI,CAAC,WAAY;EACjB,MAAM,KAAK,OAAO,WAChB,eAAe,iBAAiB,YAAY,KAC7C;EACD,MAAM,WAAW,MAA2B,eAAe,EAAE,QAAQ;AACrE,KAAG,iBAAiB,UAAU,QAAQ;AACtC,iBAAe,GAAG,QAAQ;AAC1B,eAAa,GAAG,oBAAoB,UAAU,QAAQ;IACrD,CAAC,YAAY,aAAa,CAAC;CAC9B,MAAM,cACJ,wBAAwB,SAAY,sBAAsB;CAE5D,MAAM,qBAAqB;EACzB,MAAM,OAAO,CAAC;AACd,MAAI,wBAAwB,OAC1B,sBAAqB,KAAK;AAE5B,eAAa,KAAK;;CAGpB,MAAM,cAAc,eAAe,YAAY;AAE/C,QACE,qBAAC,SAAD;EACE,WAAW,GACT,mFACA,UAAU,UAAU,iCACpB,UACD;EACD,OAAO;GACL,OAAO,cAAc,iBAAiB;GACtC,GAAG;GACJ;YATH,CAWE,oBAAC,OAAD;GAAK,WAAU;GAAgC;GAAe,CAAA,EAC7D,eACC,oBAAC,OAAD;GACE,WAAU;GACV,SAAS;aAER,YAAY,SACX,UAEA,oBAAC,QAAD;IACE,WAAU;IACV,OAAO,EACL,WAAW,cAAc,iBAAiB,kBAC3C;cAEA;IACI,CAAA;GAEL,CAAA,CAEF;;;AAIZ,OAAO,QAAQ"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Layout/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface LayoutProps {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  hasSider?: boolean;\n}\n\nexport interface SiderProps {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  width?: number | string;\n  collapsed?: boolean;\n  collapsedWidth?: number | string;\n  collapsible?: boolean;\n  trigger?: React.ReactNode;\n  onCollapse?: (collapsed: boolean) => void;\n  breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';\n  onBreakpoint?: (broken: boolean) => void;\n  theme?: 'light' | 'dark';\n}\n\ninterface LayoutComponent extends React.FC<LayoutProps> {\n  Header: React.FC<LayoutProps>;\n  Footer: React.FC<LayoutProps>;\n  Content: React.FC<LayoutProps>;\n  Sider: React.FC<SiderProps>;\n}\n\nconst Layout: LayoutComponent = ({ className, style, children, hasSider }) => (\n  <section\n    className={cn(\n      'ald-layout tw-flex tw-flex-auto',\n      hasSider ? 'tw-flex-row' : 'tw-flex-col',\n      className,\n    )}\n    style={style}\n  >\n    {children}\n  </section>\n);\n\nLayout.Header = ({ className, style, children }) => (\n  <header\n    className={cn('ald-layout-header tw-flex-none', className)}\n    style={style}\n  >\n    {children}\n  </header>\n);\n\nLayout.Footer = ({ className, style, children }) => (\n  <footer\n    className={cn('ald-layout-footer tw-flex-none', className)}\n    style={style}\n  >\n    {children}\n  </footer>\n);\n\nLayout.Content = ({ className, style, children }) => (\n  <main\n    className={cn('ald-layout-content tw-flex-auto', className)}\n    style={style}\n  >\n    {children}\n  </main>\n);\n\nconst breakpointWidths: Record<string, number> = {\n  xs: 480,\n  sm: 576,\n  md: 768,\n  lg: 992,\n  xl: 1200,\n  xxl: 1600,\n};\n\nfunction Sider({\n  className,\n  style,\n  children,\n  width = 200,\n  collapsed: controlledCollapsed,\n  collapsedWidth = 80,\n  collapsible = false,\n  trigger,\n  onCollapse,\n  breakpoint,\n  onBreakpoint,\n  theme,\n}: SiderProps) {\n  const [internalCollapsed, setInternalCollapsed] = React.useState(false);\n\n  React.useEffect(() => {\n    if (!breakpoint) return;\n    const mq = window.matchMedia(\n      `(max-width: ${breakpointWidths[breakpoint]}px)`,\n    );\n    const handler = (e: MediaQueryListEvent) => onBreakpoint?.(e.matches);\n    mq.addEventListener('change', handler);\n    onBreakpoint?.(mq.matches);\n    return () => mq.removeEventListener('change', handler);\n  }, [breakpoint, onBreakpoint]);\n  const isCollapsed =\n    controlledCollapsed !== undefined ? controlledCollapsed : internalCollapsed;\n\n  const handleToggle = () => {\n    const next = !isCollapsed;\n    if (controlledCollapsed === undefined) {\n      setInternalCollapsed(next);\n    }\n    onCollapse?.(next);\n  };\n\n  const showTrigger = collapsible && trigger !== null;\n\n  return (\n    <aside\n      className={cn(\n        'ald-layout-sider tw-relative tw-flex tw-flex-none tw-flex-col tw-transition-all',\n        theme === 'dark' &&\n          'tw-bg-[var(--background-inverted)] tw-text-[var(--content-inverted-primary)]',\n        className,\n      )}\n      style={{\n        width: isCollapsed ? collapsedWidth : width,\n        ...style,\n      }}\n    >\n      <div className=\"tw-flex-1 tw-overflow-hidden\">{children}</div>\n      {showTrigger && (\n        <div\n          className=\"ald-layout-sider-trigger tw-flex tw-h-12 tw-cursor-pointer tw-items-center tw-justify-center tw-border-t tw-border-solid tw-border-[var(--border-default)] tw-bg-[var(--background-neutral-subtle)] tw-text-[var(--content-secondary)] hover:tw-text-[var(--content-primary)]\"\n          onClick={handleToggle}\n        >\n          {trigger !== undefined ? (\n            trigger\n          ) : (\n            <span\n              className=\"tw-inline-block tw-text-xs tw-transition-transform\"\n              style={{\n                transform: isCollapsed ? 'rotate(0deg)' : 'rotate(180deg)',\n              }}\n            >\n              {'\\u25C0'}\n            </span>\n          )}\n        </div>\n      )}\n    </aside>\n  );\n}\n\nLayout.Sider = Sider;\n\nexport default Layout;\n"],"mappings":";;;;AAgCA,IAAM,UAA2B,EAAE,WAAW,OAAO,UAAU,eAC7D,oBAAC,WAAD;CACE,WAAW,GACT,mCACA,WAAW,gBAAgB,eAC3B,UACD;CACM;CAEN;CACO,CAAA;AAGZ,OAAO,UAAU,EAAE,WAAW,OAAO,eACnC,oBAAC,UAAD;CACE,WAAW,GAAG,kCAAkC,UAAU;CACnD;CAEN;CACM,CAAA;AAGX,OAAO,UAAU,EAAE,WAAW,OAAO,eACnC,oBAAC,UAAD;CACE,WAAW,GAAG,kCAAkC,UAAU;CACnD;CAEN;CACM,CAAA;AAGX,OAAO,WAAW,EAAE,WAAW,OAAO,eACpC,oBAAC,QAAD;CACE,WAAW,GAAG,mCAAmC,UAAU;CACpD;CAEN;CACI,CAAA;AAGT,IAAM,mBAA2C;CAC/C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,KAAK;CACN;AAED,SAAS,MAAM,EACb,WACA,OACA,UACA,QAAQ,KACR,WAAW,qBACX,iBAAiB,IACjB,cAAc,OACd,SACA,YACA,YACA,cACA,SACa;CACb,MAAM,CAAC,mBAAmB,wBAAwB,MAAM,SAAS,MAAM;AAEvE,OAAM,gBAAgB;AACpB,MAAI,CAAC,WAAY;EACjB,MAAM,KAAK,OAAO,WAChB,eAAe,iBAAiB,YAAY,KAC7C;EACD,MAAM,WAAW,MAA2B,eAAe,EAAE,QAAQ;AACrE,KAAG,iBAAiB,UAAU,QAAQ;AACtC,iBAAe,GAAG,QAAQ;AAC1B,eAAa,GAAG,oBAAoB,UAAU,QAAQ;IACrD,CAAC,YAAY,aAAa,CAAC;CAC9B,MAAM,cACJ,wBAAwB,SAAY,sBAAsB;CAE5D,MAAM,qBAAqB;EACzB,MAAM,OAAO,CAAC;AACd,MAAI,wBAAwB,OAC1B,sBAAqB,KAAK;AAE5B,eAAa,KAAK;;CAGpB,MAAM,cAAc,eAAe,YAAY;AAE/C,QACE,qBAAC,SAAD;EACE,WAAW,GACT,mFACA,UAAU,UACR,gFACF,UACD;EACD,OAAO;GACL,OAAO,cAAc,iBAAiB;GACtC,GAAG;GACJ;YAVH,CAYE,oBAAC,OAAD;GAAK,WAAU;GAAgC;GAAe,CAAA,EAC7D,eACC,oBAAC,OAAD;GACE,WAAU;GACV,SAAS;aAER,YAAY,SACX,UAEA,oBAAC,QAAD;IACE,WAAU;IACV,OAAO,EACL,WAAW,cAAc,iBAAiB,kBAC3C;cAEA;IACI,CAAA;GAEL,CAAA,CAEF;;;AAIZ,OAAO,QAAQ"}

package/dist/LogicTree/DisplayLogicTree.d.ts

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 import { TNode } from './type.js';
 interface IProps<T> {
     value?: TNode<T>;
-    renderCondition: (data: T) => React.ReactNode;
+    renderCondition: (data: T, nodeId: string) => React.ReactNode;
     backgroundColor?: string;
 }
 export default function DisplayLogicTree<T>({ value, renderCondition, backgroundColor, }: IProps<T>): import("react/jsx-runtime").JSX.Element | null;

package/dist/LogicTree/DisplayLogicTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"DisplayLogicTree.js","names":[],"sources":["../../src/LogicTree/DisplayLogicTree.tsx"],"sourcesContent":["import React from 'react';\nimport { DisplayLogicItem } from './components/DisplayLogicItem';\nimport { TNode } from './type';\n\ninterface IProps<T> {\n  value?: TNode<T>;\n  renderCondition: (data: T) => React.ReactNode;\n  backgroundColor?: string;\n}\nexport default function DisplayLogicTree<T>({\n  value,\n  renderCondition,\n  backgroundColor,\n}: IProps<T>) {\n  if (!value) return null;\n  return (\n    <DisplayLogicItem\n      key={value.id}\n      value={value}\n      renderCondition={renderCondition}\n      backgroundColor={backgroundColor}\n    />\n  );\n}\n"],"mappings":";;;;AASA,SAAwB,iBAAoB,EAC1C,OACA,iBACA,mBACY;AACZ,KAAI,CAAC,MAAO,QAAO;AACnB,QACE,oBAAC,kBAAD;EAES;EACU;EACA;EACjB,EAJK,MAAM,GAIX"}
+{"version":3,"file":"DisplayLogicTree.js","names":[],"sources":["../../src/LogicTree/DisplayLogicTree.tsx"],"sourcesContent":["import React from 'react';\nimport { DisplayLogicItem } from './components/DisplayLogicItem';\nimport { TNode } from './type';\n\ninterface IProps<T> {\n  value?: TNode<T>;\n  renderCondition: (data: T, nodeId: string) => React.ReactNode;\n  backgroundColor?: string;\n}\nexport default function DisplayLogicTree<T>({\n  value,\n  renderCondition,\n  backgroundColor,\n}: IProps<T>) {\n  if (!value) return null;\n  return (\n    <DisplayLogicItem\n      key={value.id}\n      value={value}\n      renderCondition={renderCondition}\n      backgroundColor={backgroundColor}\n    />\n  );\n}\n"],"mappings":";;;;AASA,SAAwB,iBAAoB,EAC1C,OACA,iBACA,mBACY;AACZ,KAAI,CAAC,MAAO,QAAO;AACnB,QACE,oBAAC,kBAAD;EAES;EACU;EACA;EACjB,EAJK,MAAM,GAIX"}

package/dist/LogicTree/components/DisplayLogicItem/index.d.ts

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 import { TNode } from '../../type';
 interface IProps<T> {
     value: TNode<T>;
-    renderCondition: (value: T) => React.ReactNode;
+    renderCondition: (value: T, nodeId: string) => React.ReactNode;
     backgroundColor?: string;
 }
 export declare function DisplayLogicItem<T>({ value, renderCondition, backgroundColor, }: IProps<T>): import("react/jsx-runtime").JSX.Element | null;

package/dist/LogicTree/components/DisplayLogicItem/index.js

@@ -60,7 +60,7 @@ function DisplayLogicItem({ value, renderCondition, backgroundColor }) {
 		className: "ald-logic-tree-display-record-node",
 		children: /* @__PURE__ */ jsx("div", {
 			className: "ald-logic-tree-render-condition-wrap",
-			children: renderCondition(value.data)
+			children: renderCondition(value.data, value.id)
 		})
 	});
 }

package/dist/LogicTree/components/DisplayLogicItem/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/LogicTree/components/DisplayLogicItem/index.tsx"],"sourcesContent":["import _ from 'lodash';\nimport React, { useContext, useState } from 'react';\nimport { LocaleContext, getTranslator } from '../../../locale/default';\nimport { ELogicType, ENodeType, TNode } from '../../type';\n\ninterface IProps<T> {\n  value: TNode<T>;\n  renderCondition: (value: T) => React.ReactNode;\n  backgroundColor?: string;\n}\n\nconst TWO = 2;\n\nexport function DisplayLogicItem<T>({\n  value,\n  renderCondition,\n  backgroundColor,\n}: IProps<T>) {\n  const [firstNodeHight, setFirstNodeHight] = useState(0);\n  const [lastNodeHight, setLastNodeHight] = useState(0);\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const logicTypeTextMap = {\n    [ELogicType.AND]: t.LogicTree.select.and,\n    [ELogicType.OR]: t.LogicTree.select.or,\n  };\n\n  const { type } = value;\n\n  const firstRefCallback = (e: HTMLDivElement) => {\n    if (e) {\n      setFirstNodeHight(e.clientHeight);\n    }\n  };\n\n  const lastRefCallback = (e: HTMLDivElement) => {\n    if (e) {\n      setLastNodeHight(e.clientHeight);\n    }\n  };\n\n  if (type === ENodeType.LOGIC) {\n    const { nodes } = value;\n    if (!_.size(nodes)) return null;\n    return (\n      <div className=\"ald-logic-tree-display-logic-node\">\n        {_.map(nodes, (node, index) => {\n          let ref = null;\n          if (index === 0) {\n            ref = firstRefCallback;\n          } else if (index === nodes.length - 1) {\n            ref = lastRefCallback;\n          }\n\n          return (\n            <div className=\"ald-logic-tree-node-wrap\" ref={ref} key={node.id}>\n              <div className=\"ald-logic-tree-horizontal-line\" />\n              <DisplayLogicItem\n                key={node.id}\n                value={node}\n                renderCondition={renderCondition}\n                backgroundColor={backgroundColor}\n              />\n            </div>\n          );\n        })}\n        <div className=\"ald-logic-tree-logic-type\" style={{ backgroundColor }}>\n          {logicTypeTextMap[value.logicType]}\n        </div>\n        {nodes.length > 1 && (\n          <div\n            className=\"ald-logic-tree-logic-vertical-line\"\n            style={{\n              height: `calc(100% - ${firstNodeHight / TWO}px - ${\n                lastNodeHight / TWO\n              }px`,\n              top: `${firstNodeHight / TWO}px`,\n            }}\n          />\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"ald-logic-tree-display-record-node\">\n      <div className=\"ald-logic-tree-render-condition-wrap\">\n        {renderCondition(value.data)}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAWA,IAAM,MAAM;AAEZ,SAAgB,iBAAoB,EAClC,OACA,iBACA,mBACY;CACZ,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,EAAE;CACvD,MAAM,CAAC,eAAe,oBAAoB,SAAS,EAAE;CACrD,MAAM,EAAE,WAAW,WAAW,cAAc;CAC5C,MAAM,IAAI,cAAc,OAAO;CAE/B,MAAM,mBAAmB;GACtB,WAAW,MAAM,EAAE,UAAU,OAAO;GACpC,WAAW,KAAK,EAAE,UAAU,OAAO;EACrC;CAED,MAAM,EAAE,SAAS;CAEjB,MAAM,oBAAoB,MAAsB;AAC9C,MAAI,EACF,mBAAkB,EAAE,aAAa;;CAIrC,MAAM,mBAAmB,MAAsB;AAC7C,MAAI,EACF,kBAAiB,EAAE,aAAa;;AAIpC,KAAI,SAAS,UAAU,OAAO;EAC5B,MAAM,EAAE,UAAU;AAClB,MAAI,CAAC,EAAE,KAAK,MAAM,CAAE,QAAO;AAC3B,SACE,qBAAC,OAAD;GAAK,WAAU;aAAf;IACG,EAAE,IAAI,QAAQ,MAAM,UAAU;KAC7B,IAAI,MAAM;AACV,SAAI,UAAU,EACZ,OAAM;cACG,UAAU,MAAM,SAAS,EAClC,OAAM;AAGR,YACE,qBAAC,OAAD;MAAK,WAAU;MAAgC;gBAA/C,CACE,oBAAC,OAAD,EAAK,WAAU,kCAAmC,CAAA,EAClD,oBAAC,kBAAD;OAEE,OAAO;OACU;OACA;OACjB,EAJK,KAAK,GAIV,CACE;QARmD,KAAK,GAQxD;MAER;IACF,oBAAC,OAAD;KAAK,WAAU;KAA4B,OAAO,EAAE,iBAAiB;eAClE,iBAAiB,MAAM;KACpB,CAAA;IACL,MAAM,SAAS,KACd,oBAAC,OAAD;KACE,WAAU;KACV,OAAO;MACL,QAAQ,eAAe,iBAAiB,IAAI,OAC1C,gBAAgB,IACjB;MACD,KAAK,GAAG,iBAAiB,IAAI;MAC9B;KACD,CAAA;IAEA;;;AAIV,QACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,OAAD;GAAK,WAAU;aACZ,gBAAgB,MAAM,KAAK;GACxB,CAAA;EACF,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/LogicTree/components/DisplayLogicItem/index.tsx"],"sourcesContent":["import _ from 'lodash';\nimport React, { useContext, useState } from 'react';\nimport { LocaleContext, getTranslator } from '../../../locale/default';\nimport { ELogicType, ENodeType, TNode } from '../../type';\n\ninterface IProps<T> {\n  value: TNode<T>;\n  renderCondition: (value: T, nodeId: string) => React.ReactNode;\n  backgroundColor?: string;\n}\n\nconst TWO = 2;\n\nexport function DisplayLogicItem<T>({\n  value,\n  renderCondition,\n  backgroundColor,\n}: IProps<T>) {\n  const [firstNodeHight, setFirstNodeHight] = useState(0);\n  const [lastNodeHight, setLastNodeHight] = useState(0);\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const logicTypeTextMap = {\n    [ELogicType.AND]: t.LogicTree.select.and,\n    [ELogicType.OR]: t.LogicTree.select.or,\n  };\n\n  const { type } = value;\n\n  const firstRefCallback = (e: HTMLDivElement) => {\n    if (e) {\n      setFirstNodeHight(e.clientHeight);\n    }\n  };\n\n  const lastRefCallback = (e: HTMLDivElement) => {\n    if (e) {\n      setLastNodeHight(e.clientHeight);\n    }\n  };\n\n  if (type === ENodeType.LOGIC) {\n    const { nodes } = value;\n    if (!_.size(nodes)) return null;\n    return (\n      <div className=\"ald-logic-tree-display-logic-node\">\n        {_.map(nodes, (node, index) => {\n          let ref = null;\n          if (index === 0) {\n            ref = firstRefCallback;\n          } else if (index === nodes.length - 1) {\n            ref = lastRefCallback;\n          }\n\n          return (\n            <div className=\"ald-logic-tree-node-wrap\" ref={ref} key={node.id}>\n              <div className=\"ald-logic-tree-horizontal-line\" />\n              <DisplayLogicItem\n                key={node.id}\n                value={node}\n                renderCondition={renderCondition}\n                backgroundColor={backgroundColor}\n              />\n            </div>\n          );\n        })}\n        <div className=\"ald-logic-tree-logic-type\" style={{ backgroundColor }}>\n          {logicTypeTextMap[value.logicType]}\n        </div>\n        {nodes.length > 1 && (\n          <div\n            className=\"ald-logic-tree-logic-vertical-line\"\n            style={{\n              height: `calc(100% - ${firstNodeHight / TWO}px - ${\n                lastNodeHight / TWO\n              }px`,\n              top: `${firstNodeHight / TWO}px`,\n            }}\n          />\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"ald-logic-tree-display-record-node\">\n      <div className=\"ald-logic-tree-render-condition-wrap\">\n        {renderCondition(value.data, value.id)}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAWA,IAAM,MAAM;AAEZ,SAAgB,iBAAoB,EAClC,OACA,iBACA,mBACY;CACZ,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,EAAE;CACvD,MAAM,CAAC,eAAe,oBAAoB,SAAS,EAAE;CACrD,MAAM,EAAE,WAAW,WAAW,cAAc;CAC5C,MAAM,IAAI,cAAc,OAAO;CAE/B,MAAM,mBAAmB;GACtB,WAAW,MAAM,EAAE,UAAU,OAAO;GACpC,WAAW,KAAK,EAAE,UAAU,OAAO;EACrC;CAED,MAAM,EAAE,SAAS;CAEjB,MAAM,oBAAoB,MAAsB;AAC9C,MAAI,EACF,mBAAkB,EAAE,aAAa;;CAIrC,MAAM,mBAAmB,MAAsB;AAC7C,MAAI,EACF,kBAAiB,EAAE,aAAa;;AAIpC,KAAI,SAAS,UAAU,OAAO;EAC5B,MAAM,EAAE,UAAU;AAClB,MAAI,CAAC,EAAE,KAAK,MAAM,CAAE,QAAO;AAC3B,SACE,qBAAC,OAAD;GAAK,WAAU;aAAf;IACG,EAAE,IAAI,QAAQ,MAAM,UAAU;KAC7B,IAAI,MAAM;AACV,SAAI,UAAU,EACZ,OAAM;cACG,UAAU,MAAM,SAAS,EAClC,OAAM;AAGR,YACE,qBAAC,OAAD;MAAK,WAAU;MAAgC;gBAA/C,CACE,oBAAC,OAAD,EAAK,WAAU,kCAAmC,CAAA,EAClD,oBAAC,kBAAD;OAEE,OAAO;OACU;OACA;OACjB,EAJK,KAAK,GAIV,CACE;QARmD,KAAK,GAQxD;MAER;IACF,oBAAC,OAAD;KAAK,WAAU;KAA4B,OAAO,EAAE,iBAAiB;eAClE,iBAAiB,MAAM;KACpB,CAAA;IACL,MAAM,SAAS,KACd,oBAAC,OAAD;KACE,WAAU;KACV,OAAO;MACL,QAAQ,eAAe,iBAAiB,IAAI,OAC1C,gBAAgB,IACjB;MACD,KAAK,GAAG,iBAAiB,IAAI;MAC9B;KACD,CAAA;IAEA;;;AAIV,QACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,OAAD;GAAK,WAAU;aACZ,gBAAgB,MAAM,MAAM,MAAM,GAAG;GAClC,CAAA;EACF,CAAA"}

package/dist/LogicTree/components/LogicItem/index.js

@@ -224,8 +224,7 @@ function LogicItem({ value, addCondition, addRelation, changeRecordData, remove,
 					size: "small",
 					popupMatchSelectWidth: false,
 					value: logicType,
-					onChange: onChangeRelation,
-					disabled: nodes.length <= 1
+					onChange: onChangeRelation
 				}),
 				/* @__PURE__ */ jsx(DragPreviewImage, {
 					connect: preview,
@@ -282,7 +281,7 @@ function LogicItem({ value, addCondition, addRelation, changeRecordData, remove,
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "ald-logic-tree-render-condition-wrap",
-				children: renderCondition(value.data, { changeData: onChangeRecordData })
+				children: renderCondition(value.data, { changeData: onChangeRecordData }, value.id)
 			}),
 			/* @__PURE__ */ jsx(IconButton, {
 				icon: /* @__PURE__ */ jsx(Memo$2, { size: 16 }),

package/dist/LogicTree/components/LogicItem/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/LogicTree/components/LogicItem/index.tsx"],"sourcesContent":["import { cn } from '../../../lib/utils';\nimport _ from 'lodash';\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { DragPreviewImage, useDrag, useDrop } from 'react-dnd';\nimport { EPutPosition, TRenderCondition } from '../..';\nimport DragLightLine from '../../../Icon/components/DragLightLine';\nimport PlusIcon from '../../../Icon/components/SignLightLine';\nimport TrashLightLine from '../../../Icon/components/TrashLightLine';\nimport IconButton from '../../../IconButton';\nimport Select from '../../../Select';\nimport TextLink from '../../../TextLink';\nimport {\n  ELangType,\n  LocaleContext,\n  getTranslator,\n} from '../../../locale/default';\nimport { ELogicType, ENodeType, TNode } from '../../type';\n\nconst dargPreviewImg =\n  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAYSURBVHgB7cAxAQAAAMKg9U9tCU8oAPgYBlQAAX19SpgAAAAASUVORK5CYII=';\n\ninterface IProps<T> {\n  value: TNode<T>;\n  addCondition: (id: string) => void;\n  addRelation: (id: string) => void;\n  remove: (id: string) => void;\n  changeRecordData: (id: string, data: T) => void;\n  changeRelation: (id: string, logicType: ELogicType) => void;\n  renderCondition: TRenderCondition<T>;\n  onDragEnd: (\n    dragId: string,\n    hoverId: string,\n    dropPosition: EPutPosition,\n  ) => void;\n  hoverId: string;\n  setHoverId: (id: string) => void;\n  isRoot?: boolean;\n  hideBottomBtn?: {\n    addRelation?: boolean;\n  };\n}\n\nconst TWO = 2;\n\nexport default function LogicItem<T>({\n  value,\n  addCondition,\n  addRelation,\n  changeRecordData,\n  remove,\n  changeRelation,\n  renderCondition,\n  onDragEnd,\n  hoverId,\n  setHoverId,\n  isRoot = false,\n  hideBottomBtn,\n}: IProps<T>) {\n  const [isHoverDragBox, setIsHoverDragBox] = useState(false);\n  const [firstNodeHight, setFirstNodeHight] = useState(0);\n  const [lastNodeHight, setLastNodeHight] = useState(0);\n  const [dropPosition, setDropPosition] = useState<EPutPosition>();\n\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const logicOptions = [\n    {\n      value: ELogicType.AND,\n      label: t.LogicTree.select.and,\n    },\n    {\n      value: ELogicType.OR,\n      label: t.LogicTree.select.or,\n    },\n  ];\n\n  const { type } = value;\n\n  const ref = useRef<HTMLDivElement>(null);\n  const firstResizeObserverRef = useRef<ResizeObserver | null>(null);\n  const lastResizeObserverRef = useRef<ResizeObserver | null>(null);\n\n  const [{ isDragging }, drag, preview] = useDrag({\n    type: 'LOGIC_ITEM',\n    item: { id: value.id },\n    collect: (monitor) => ({\n      isDragging: monitor.isDragging(),\n    }),\n    canDrag: !isRoot && isHoverDragBox,\n  });\n\n  const [{ isOver, canDrop }, drop] = useDrop({\n    accept: 'LOGIC_ITEM',\n    hover(item: { id: string }, monitor) {\n      if (!ref.current) {\n        return;\n      }\n      const dragId = item.id;\n      const hoverId = value.id;\n\n      if (dragId === hoverId) {\n        return;\n      }\n      // 检查是否为最顶层的放置目标\n      if (monitor.didDrop()) {\n        return;\n      }\n\n      // 获取鼠标位置和目标元素位置\n      const hoverBoundingRect = ref.current.getBoundingClientRect();\n      const hoverMiddleY =\n        (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;\n      const clientOffset = monitor.getClientOffset();\n      if (clientOffset) {\n        const hoverClientY = clientOffset.y - hoverBoundingRect.top;\n\n        const dropPosition =\n          hoverClientY < hoverMiddleY ? EPutPosition.TOP : EPutPosition.BOTTOM;\n\n        setDropPosition(dropPosition);\n      } else setDropPosition(undefined);\n    },\n    drop(item: { id: string }, monitor) {\n      if (!ref.current) {\n        return;\n      }\n      const dragId = item.id;\n      const hoverId = value.id;\n\n      if (dragId === hoverId) {\n        return;\n      }\n      // 检查是否为最顶层的放置目标\n      if (monitor.didDrop()) {\n        return;\n      }\n\n      // 获取鼠标位置和目标元素位置\n      const hoverBoundingRect = ref.current.getBoundingClientRect();\n      const hoverMiddleY =\n        (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;\n      const clientOffset = monitor.getClientOffset();\n      if (clientOffset) {\n        const hoverClientY = clientOffset.y - hoverBoundingRect.top;\n\n        // 确定放置位置\n        const dropPosition =\n          hoverClientY < hoverMiddleY ? EPutPosition.TOP : EPutPosition.BOTTOM;\n\n        onDragEnd(dragId, hoverId, dropPosition);\n      }\n    },\n    collect: (monitor) => ({\n      isOver: monitor.isOver({ shallow: true }),\n      canDrop: monitor.canDrop(),\n    }),\n  });\n\n  drag(drop(ref));\n\n  const isDragOver = isOver && canDrop && !isRoot;\n\n  const firstRef = useCallback((node: HTMLElement | null) => {\n    if (firstResizeObserverRef.current) {\n      firstResizeObserverRef.current.disconnect();\n      firstResizeObserverRef.current = null;\n    }\n\n    if (!node) return;\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        const newHeight = entry.contentRect.height;\n        if (newHeight > 0) {\n          setFirstNodeHight(newHeight);\n        }\n      }\n    });\n    resizeObserver.observe(node);\n    firstResizeObserverRef.current = resizeObserver;\n  }, []);\n\n  const lastRef = useCallback((node: HTMLElement | null) => {\n    if (lastResizeObserverRef.current) {\n      lastResizeObserverRef.current.disconnect();\n      lastResizeObserverRef.current = null;\n    }\n\n    if (!node) return;\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        const newHeight = entry.contentRect.height;\n        if (newHeight > 0) {\n          setLastNodeHight(newHeight);\n        }\n      }\n    });\n    resizeObserver.observe(node);\n    lastResizeObserverRef.current = resizeObserver;\n  }, []);\n\n  const onAddCondition = () => {\n    const { id } = value;\n    addCondition(id);\n  };\n\n  const onAddRelation = () => {\n    const { id } = value;\n    addRelation(id);\n  };\n\n  const onRemove = () => {\n    const { id } = value;\n    remove(id);\n  };\n\n  const onChangeRelation = (logicType: ELogicType) => {\n    const { id } = value;\n    changeRelation(id, logicType);\n  };\n\n  const onChangeRecordData = (data: T) => {\n    const { id } = value;\n    changeRecordData(id, data);\n  };\n\n  useEffect(() => {\n    return () => {\n      if (firstResizeObserverRef.current) {\n        firstResizeObserverRef.current.disconnect();\n        firstResizeObserverRef.current = null;\n      }\n      if (lastResizeObserverRef.current) {\n        lastResizeObserverRef.current.disconnect();\n        lastResizeObserverRef.current = null;\n      }\n    };\n  }, []);\n\n  const isEn = locale === ELangType.EN;\n\n  if (type === ENodeType.LOGIC) {\n    const { nodes, logicType } = value;\n    const verticalLineHeight =\n      nodes.length > 1\n        ? `calc(100% - ${firstNodeHight / TWO}px - ${\n            lastNodeHight / TWO\n          }px - 42px)`\n        : `30px`;\n\n    return (\n      <div\n        className={cn('ald-logic-tree-logic-node', {\n          'is-hover-drag-box': isHoverDragBox,\n          'is-dragging': isDragging,\n          'is-hover-top': isDragOver && dropPosition === EPutPosition.TOP,\n          'is-hover-bottom': isDragOver && dropPosition === EPutPosition.BOTTOM,\n        })}\n        onMouseMove={(e) => {\n          e.stopPropagation();\n          setHoverId(value.id);\n        }}\n        onMouseOut={(e) => {\n          e.stopPropagation();\n          setHoverId('');\n        }}\n        ref={ref}\n      >\n        {_.map(nodes, (node, index) => {\n          let heightRef = null;\n          if (index === 0) {\n            heightRef = firstRef;\n          } else if (index === nodes.length - 1) {\n            heightRef = lastRef;\n          }\n\n          return (\n            <div\n              className=\"ald-logic-tree-node-wrap\"\n              key={node.id}\n              ref={heightRef}\n            >\n              <div className=\"ald-logic-tree-horizontal-line\" />\n              <LogicItem\n                key={node.id}\n                value={node}\n                addCondition={addCondition}\n                addRelation={addRelation}\n                remove={remove}\n                changeRelation={changeRelation}\n                renderCondition={renderCondition}\n                changeRecordData={changeRecordData}\n                hoverId={hoverId}\n                setHoverId={setHoverId}\n                onDragEnd={onDragEnd}\n              />\n            </div>\n          );\n        })}\n        <div className=\"ald-logic-tree-operation\">\n          <div className=\"ald-logic-tree-left-bottom-dash-line\" />\n          <TextLink icon={<PlusIcon size={24} />} onClick={onAddCondition}>\n            {t.LogicTree.btn.addCondition}\n          </TextLink>\n          {!hideBottomBtn?.addRelation && (\n            <TextLink icon={<PlusIcon size={24} />} onClick={onAddRelation}>\n              {t.LogicTree.btn.addRelation}\n            </TextLink>\n          )}\n        </div>\n        {!!_.size(nodes) && (\n          <div\n            className=\"ald-logic-tree-logic-vertical-line\"\n            style={{\n              height: verticalLineHeight,\n              top: `${firstNodeHight / TWO + 4}px`,\n            }}\n          />\n        )}\n        {!isRoot && (hoverId === value.id || isDragging) && (\n          <div\n            className=\"ald-logic-tree-node-drag-icon-wrapper\"\n            onMouseMove={(e) => {\n              e.stopPropagation();\n              setIsHoverDragBox(true);\n              setHoverId(value.id);\n            }}\n            onMouseOut={(e) => {\n              e.stopPropagation();\n              setIsHoverDragBox(false);\n            }}\n          >\n            <DragLightLine\n              onMouseMove={(e) => {\n                e.stopPropagation();\n                setIsHoverDragBox(true);\n                setHoverId(value.id);\n              }}\n              size={16}\n              color=\"#374151\"\n              className=\"ald-logic-tree-node-drag-icon\"\n            />\n          </div>\n        )}\n\n        <Select\n          options={logicOptions}\n          className={cn('ald-logic-tree-select-relation', {\n            'ald-logic-tree-select-relation-en': isEn,\n          })}\n          size=\"small\"\n          popupMatchSelectWidth={false}\n          value={logicType}\n          onChange={onChangeRelation}\n          disabled={nodes.length <= 1}\n        />\n        <DragPreviewImage connect={preview} src={dargPreviewImg} />\n      </div>\n    );\n  }\n\n  return (\n    <>\n      <DragPreviewImage connect={preview} src={dargPreviewImg} />\n      <div\n        className={cn('ald-logic-tree-record-node', {\n          'is-hover-drag-box': isHoverDragBox,\n          'is-dragging': isDragging,\n          'is-hover-top': isDragOver && dropPosition === EPutPosition.TOP,\n          'is-hover-bottom': isDragOver && dropPosition === EPutPosition.BOTTOM,\n        })}\n        ref={ref}\n        onMouseMove={(e) => {\n          e.stopPropagation();\n          setHoverId(value.id);\n        }}\n        onMouseOut={(e) => {\n          e.stopPropagation();\n          setHoverId('');\n        }}\n      >\n        <div\n          className=\"ald-logic-tree-node-drag-icon-preview\"\n          ref={preview}\n        ></div>\n        {(hoverId === value.id || isDragging) && (\n          <div\n            className=\"ald-logic-tree-record-node-drag-icon-wrapper\"\n            onMouseMove={(e) => {\n              e.stopPropagation();\n              setIsHoverDragBox(true);\n              setHoverId(value.id);\n            }}\n            onMouseOut={(e) => {\n              e.stopPropagation();\n              setIsHoverDragBox(false);\n            }}\n          >\n            <DragLightLine\n              onMouseMove={(e) => {\n                e.stopPropagation();\n                setIsHoverDragBox(true);\n                setHoverId(value.id);\n              }}\n              size={16}\n              color=\"#374151\"\n              className=\"ald-logic-tree-record-node-drag-icon\"\n            />\n          </div>\n        )}\n\n        <div className=\"ald-logic-tree-render-condition-wrap\">\n          {renderCondition(value.data, { changeData: onChangeRecordData })}\n        </div>\n        <IconButton\n          icon={<TrashLightLine size={16} />}\n          size={'small'}\n          onClick={onRemove}\n        />\n      </div>\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/LogicTree/components/LogicItem/index.tsx"],"sourcesContent":["import { cn } from '../../../lib/utils';\nimport _ from 'lodash';\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { DragPreviewImage, useDrag, useDrop } from 'react-dnd';\nimport { EPutPosition, TRenderCondition } from '../..';\nimport DragLightLine from '../../../Icon/components/DragLightLine';\nimport PlusIcon from '../../../Icon/components/SignLightLine';\nimport TrashLightLine from '../../../Icon/components/TrashLightLine';\nimport IconButton from '../../../IconButton';\nimport Select from '../../../Select';\nimport TextLink from '../../../TextLink';\nimport {\n  ELangType,\n  LocaleContext,\n  getTranslator,\n} from '../../../locale/default';\nimport { ELogicType, ENodeType, TNode } from '../../type';\n\nconst dargPreviewImg =\n  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAYSURBVHgB7cAxAQAAAMKg9U9tCU8oAPgYBlQAAX19SpgAAAAASUVORK5CYII=';\n\ninterface IProps<T> {\n  value: TNode<T>;\n  addCondition: (id: string) => void;\n  addRelation: (id: string) => void;\n  remove: (id: string) => void;\n  changeRecordData: (id: string, data: T) => void;\n  changeRelation: (id: string, logicType: ELogicType) => void;\n  renderCondition: TRenderCondition<T>;\n  onDragEnd: (\n    dragId: string,\n    hoverId: string,\n    dropPosition: EPutPosition,\n  ) => void;\n  hoverId: string;\n  setHoverId: (id: string) => void;\n  isRoot?: boolean;\n  hideBottomBtn?: {\n    addRelation?: boolean;\n  };\n}\n\nconst TWO = 2;\n\nexport default function LogicItem<T>({\n  value,\n  addCondition,\n  addRelation,\n  changeRecordData,\n  remove,\n  changeRelation,\n  renderCondition,\n  onDragEnd,\n  hoverId,\n  setHoverId,\n  isRoot = false,\n  hideBottomBtn,\n}: IProps<T>) {\n  const [isHoverDragBox, setIsHoverDragBox] = useState(false);\n  const [firstNodeHight, setFirstNodeHight] = useState(0);\n  const [lastNodeHight, setLastNodeHight] = useState(0);\n  const [dropPosition, setDropPosition] = useState<EPutPosition>();\n\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const logicOptions = [\n    {\n      value: ELogicType.AND,\n      label: t.LogicTree.select.and,\n    },\n    {\n      value: ELogicType.OR,\n      label: t.LogicTree.select.or,\n    },\n  ];\n\n  const { type } = value;\n\n  const ref = useRef<HTMLDivElement>(null);\n  const firstResizeObserverRef = useRef<ResizeObserver | null>(null);\n  const lastResizeObserverRef = useRef<ResizeObserver | null>(null);\n\n  const [{ isDragging }, drag, preview] = useDrag({\n    type: 'LOGIC_ITEM',\n    item: { id: value.id },\n    collect: (monitor) => ({\n      isDragging: monitor.isDragging(),\n    }),\n    canDrag: !isRoot && isHoverDragBox,\n  });\n\n  const [{ isOver, canDrop }, drop] = useDrop({\n    accept: 'LOGIC_ITEM',\n    hover(item: { id: string }, monitor) {\n      if (!ref.current) {\n        return;\n      }\n      const dragId = item.id;\n      const hoverId = value.id;\n\n      if (dragId === hoverId) {\n        return;\n      }\n      // 检查是否为最顶层的放置目标\n      if (monitor.didDrop()) {\n        return;\n      }\n\n      // 获取鼠标位置和目标元素位置\n      const hoverBoundingRect = ref.current.getBoundingClientRect();\n      const hoverMiddleY =\n        (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;\n      const clientOffset = monitor.getClientOffset();\n      if (clientOffset) {\n        const hoverClientY = clientOffset.y - hoverBoundingRect.top;\n\n        const dropPosition =\n          hoverClientY < hoverMiddleY ? EPutPosition.TOP : EPutPosition.BOTTOM;\n\n        setDropPosition(dropPosition);\n      } else setDropPosition(undefined);\n    },\n    drop(item: { id: string }, monitor) {\n      if (!ref.current) {\n        return;\n      }\n      const dragId = item.id;\n      const hoverId = value.id;\n\n      if (dragId === hoverId) {\n        return;\n      }\n      // 检查是否为最顶层的放置目标\n      if (monitor.didDrop()) {\n        return;\n      }\n\n      // 获取鼠标位置和目标元素位置\n      const hoverBoundingRect = ref.current.getBoundingClientRect();\n      const hoverMiddleY =\n        (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;\n      const clientOffset = monitor.getClientOffset();\n      if (clientOffset) {\n        const hoverClientY = clientOffset.y - hoverBoundingRect.top;\n\n        // 确定放置位置\n        const dropPosition =\n          hoverClientY < hoverMiddleY ? EPutPosition.TOP : EPutPosition.BOTTOM;\n\n        onDragEnd(dragId, hoverId, dropPosition);\n      }\n    },\n    collect: (monitor) => ({\n      isOver: monitor.isOver({ shallow: true }),\n      canDrop: monitor.canDrop(),\n    }),\n  });\n\n  drag(drop(ref));\n\n  const isDragOver = isOver && canDrop && !isRoot;\n\n  const firstRef = useCallback((node: HTMLElement | null) => {\n    if (firstResizeObserverRef.current) {\n      firstResizeObserverRef.current.disconnect();\n      firstResizeObserverRef.current = null;\n    }\n\n    if (!node) return;\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        const newHeight = entry.contentRect.height;\n        if (newHeight > 0) {\n          setFirstNodeHight(newHeight);\n        }\n      }\n    });\n    resizeObserver.observe(node);\n    firstResizeObserverRef.current = resizeObserver;\n  }, []);\n\n  const lastRef = useCallback((node: HTMLElement | null) => {\n    if (lastResizeObserverRef.current) {\n      lastResizeObserverRef.current.disconnect();\n      lastResizeObserverRef.current = null;\n    }\n\n    if (!node) return;\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        const newHeight = entry.contentRect.height;\n        if (newHeight > 0) {\n          setLastNodeHight(newHeight);\n        }\n      }\n    });\n    resizeObserver.observe(node);\n    lastResizeObserverRef.current = resizeObserver;\n  }, []);\n\n  const onAddCondition = () => {\n    const { id } = value;\n    addCondition(id);\n  };\n\n  const onAddRelation = () => {\n    const { id } = value;\n    addRelation(id);\n  };\n\n  const onRemove = () => {\n    const { id } = value;\n    remove(id);\n  };\n\n  const onChangeRelation = (logicType: ELogicType) => {\n    const { id } = value;\n    changeRelation(id, logicType);\n  };\n\n  const onChangeRecordData = (data: T) => {\n    const { id } = value;\n    changeRecordData(id, data);\n  };\n\n  useEffect(() => {\n    return () => {\n      if (firstResizeObserverRef.current) {\n        firstResizeObserverRef.current.disconnect();\n        firstResizeObserverRef.current = null;\n      }\n      if (lastResizeObserverRef.current) {\n        lastResizeObserverRef.current.disconnect();\n        lastResizeObserverRef.current = null;\n      }\n    };\n  }, []);\n\n  const isEn = locale === ELangType.EN;\n\n  if (type === ENodeType.LOGIC) {\n    const { nodes, logicType } = value;\n    const verticalLineHeight =\n      nodes.length > 1\n        ? `calc(100% - ${firstNodeHight / TWO}px - ${\n            lastNodeHight / TWO\n          }px - 42px)`\n        : `30px`;\n\n    return (\n      <div\n        className={cn('ald-logic-tree-logic-node', {\n          'is-hover-drag-box': isHoverDragBox,\n          'is-dragging': isDragging,\n          'is-hover-top': isDragOver && dropPosition === EPutPosition.TOP,\n          'is-hover-bottom': isDragOver && dropPosition === EPutPosition.BOTTOM,\n        })}\n        onMouseMove={(e) => {\n          e.stopPropagation();\n          setHoverId(value.id);\n        }}\n        onMouseOut={(e) => {\n          e.stopPropagation();\n          setHoverId('');\n        }}\n        ref={ref}\n      >\n        {_.map(nodes, (node, index) => {\n          let heightRef = null;\n          if (index === 0) {\n            heightRef = firstRef;\n          } else if (index === nodes.length - 1) {\n            heightRef = lastRef;\n          }\n\n          return (\n            <div\n              className=\"ald-logic-tree-node-wrap\"\n              key={node.id}\n              ref={heightRef}\n            >\n              <div className=\"ald-logic-tree-horizontal-line\" />\n              <LogicItem\n                key={node.id}\n                value={node}\n                addCondition={addCondition}\n                addRelation={addRelation}\n                remove={remove}\n                changeRelation={changeRelation}\n                renderCondition={renderCondition}\n                changeRecordData={changeRecordData}\n                hoverId={hoverId}\n                setHoverId={setHoverId}\n                onDragEnd={onDragEnd}\n              />\n            </div>\n          );\n        })}\n        <div className=\"ald-logic-tree-operation\">\n          <div className=\"ald-logic-tree-left-bottom-dash-line\" />\n          <TextLink icon={<PlusIcon size={24} />} onClick={onAddCondition}>\n            {t.LogicTree.btn.addCondition}\n          </TextLink>\n          {!hideBottomBtn?.addRelation && (\n            <TextLink icon={<PlusIcon size={24} />} onClick={onAddRelation}>\n              {t.LogicTree.btn.addRelation}\n            </TextLink>\n          )}\n        </div>\n        {!!_.size(nodes) && (\n          <div\n            className=\"ald-logic-tree-logic-vertical-line\"\n            style={{\n              height: verticalLineHeight,\n              top: `${firstNodeHight / TWO + 4}px`,\n            }}\n          />\n        )}\n        {!isRoot && (hoverId === value.id || isDragging) && (\n          <div\n            className=\"ald-logic-tree-node-drag-icon-wrapper\"\n            onMouseMove={(e) => {\n              e.stopPropagation();\n              setIsHoverDragBox(true);\n              setHoverId(value.id);\n            }}\n            onMouseOut={(e) => {\n              e.stopPropagation();\n              setIsHoverDragBox(false);\n            }}\n          >\n            <DragLightLine\n              onMouseMove={(e) => {\n                e.stopPropagation();\n                setIsHoverDragBox(true);\n                setHoverId(value.id);\n              }}\n              size={16}\n              color=\"#374151\"\n              className=\"ald-logic-tree-node-drag-icon\"\n            />\n          </div>\n        )}\n\n        <Select\n          options={logicOptions}\n          className={cn('ald-logic-tree-select-relation', {\n            'ald-logic-tree-select-relation-en': isEn,\n          })}\n          size=\"small\"\n          popupMatchSelectWidth={false}\n          value={logicType}\n          onChange={onChangeRelation}\n        />\n        <DragPreviewImage connect={preview} src={dargPreviewImg} />\n      </div>\n    );\n  }\n\n  return (\n    <>\n      <DragPreviewImage connect={preview} src={dargPreviewImg} />\n      <div\n        className={cn('ald-logic-tree-record-node', {\n          'is-hover-drag-box': isHoverDragBox,\n          'is-dragging': isDragging,\n          'is-hover-top': isDragOver && dropPosition === EPutPosition.TOP,\n          'is-hover-bottom': isDragOver && dropPosition === EPutPosition.BOTTOM,\n        })}\n        ref={ref}\n        onMouseMove={(e) => {\n          e.stopPropagation();\n          setHoverId(value.id);\n        }}\n        onMouseOut={(e) => {\n          e.stopPropagation();\n          setHoverId('');\n        }}\n      >\n        <div\n          className=\"ald-logic-tree-node-drag-icon-preview\"\n          ref={preview}\n        ></div>\n        {(hoverId === value.id || isDragging) && (\n          <div\n            className=\"ald-logic-tree-record-node-drag-icon-wrapper\"\n            onMouseMove={(e) => {\n              e.stopPropagation();\n              setIsHoverDragBox(true);\n              setHoverId(value.id);\n            }}\n            onMouseOut={(e) => {\n              e.stopPropagation();\n              setIsHoverDragBox(false);\n            }}\n          >\n            <DragLightLine\n              onMouseMove={(e) => {\n                e.stopPropagation();\n                setIsHoverDragBox(true);\n                setHoverId(value.id);\n              }}\n              size={16}\n              color=\"#374151\"\n              className=\"ald-logic-tree-record-node-drag-icon\"\n            />\n          </div>\n        )}\n\n        <div className=\"ald-logic-tree-render-condition-wrap\">\n          {renderCondition(\n            value.data,\n            { changeData: onChangeRecordData },\n            value.id,\n          )}\n        </div>\n        <IconButton\n          icon={<TrashLightLine size={16} />}\n          size={'small'}\n          onClick={onRemove}\n        />\n      </div>\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/LogicTree/index.d.ts

@@ -8,7 +8,7 @@ export declare enum EPutPosition {
 }
 export type TRenderCondition<T> = (data: T, { changeData }: {
     changeData: (data: T) => void;
-}) => React.ReactNode;
+}, nodeId: string) => React.ReactNode;
 interface IProps<T> {
     newInitializationData: T;
     onChange: (value: TNode<T>) => void;

package/dist/LogicTree/index.js

@@ -6,10 +6,10 @@ import LogicItem from "./components/LogicItem/index.js";
 import { addLogicNode, addRecordNode, changeRecordData, changeRelation, findNodeById, findParentNodeById, isDescendant, removeNode } from "./helper.js";
 import "./DisplayLogicTree.js";
 import { useCallback, useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx } from "react/jsx-runtime";
 import _ from "lodash";
 import { useControllableValue } from "ahooks";
-import { DndProvider } from "react-dnd";
+import { DndProvider, useDragDropManager } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 //#region src/LogicTree/index.tsx
 var EPutPosition = /* @__PURE__ */ function(EPutPosition) {
@@ -17,8 +17,29 @@ var EPutPosition = /* @__PURE__ */ function(EPutPosition) {
 	EPutPosition["BOTTOM"] = "BOTTOM";
 	return EPutPosition;
 }({});
+function useHasDndContext() {
+	try {
+		return !!useDragDropManager();
+	} catch {
+		return false;
+	}
+}
+function LogicTreeDndProvider({ children }) {
+	const hasDndContext = useHasDndContext();
+	const [rootElement, setRootElement] = useState(null);
+	if (hasDndContext) return /* @__PURE__ */ jsx(Fragment, { children });
+	return /* @__PURE__ */ jsx("div", {
+		ref: setRootElement,
+		style: { display: "contents" },
+		children: rootElement ? /* @__PURE__ */ jsx(DndProvider, {
+			backend: HTML5Backend,
+			options: { rootElement },
+			children
+		}) : null
+	});
+}
 function LogicTree(props) {
-	const { newInitializationData, onChange: propsOnChange, renderCondition, rootNodeAllowedEmpty, className, needDndProvider = false, hideBottomBtn } = props;
+	const { newInitializationData, onChange: propsOnChange, renderCondition, rootNodeAllowedEmpty, className, hideBottomBtn } = props;
 	const initialNode = {
 		id: getUniqId(),
 		type: ENodeType.LOGIC,
@@ -73,7 +94,7 @@ function LogicTree(props) {
 		}
 	}, [innerValue, changeInnerValue]);
 	if (!innerValue) return null;
-	const content = /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsx(LogicTreeDndProvider, { children: /* @__PURE__ */ jsx("div", {
 		className: cn("ald-logic-tree-wrap", className),
 		children: /* @__PURE__ */ jsx(LogicItem, {
 			value: innerValue,
@@ -89,12 +110,7 @@ function LogicTree(props) {
 			isRoot: true,
 			hideBottomBtn
 		})
-	});
-	if (!needDndProvider) return content;
-	return /* @__PURE__ */ jsx(DndProvider, {
-		backend: HTML5Backend,
-		children: content
-	});
+	}) });
 }
 //#endregion
 export { EPutPosition, LogicTree as default };

package/dist/LogicTree/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/LogicTree/index.tsx"],"sourcesContent":["import { useControllableValue } from 'ahooks';\nimport { cn } from '../lib/utils';\nimport './logic-tree.css';\nimport _ from 'lodash';\nimport React, { useCallback, useState } from 'react';\nimport { DndProvider } from 'react-dnd';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\nimport { getUniqId } from '../_utils/getUniqId';\nimport LogicItem from './components/LogicItem';\nimport {\n  addLogicNode,\n  addRecordNode,\n  changeRecordData,\n  changeRelation,\n  findNodeById,\n  findParentNodeById,\n  isDescendant,\n  removeNode,\n} from './helper';\nimport { ELogicType, ENodeType, type TNode } from './type';\n\nexport { default as DisplayLogicTree } from './DisplayLogicTree';\nexport * from './type';\n\nexport enum EPutPosition {\n  TOP = 'TOP',\n  BOTTOM = 'BOTTOM',\n}\n\nexport type TRenderCondition<T> = (\n  data: T,\n  { changeData }: { changeData: (data: T) => void },\n) => React.ReactNode;\n\ninterface IProps<T> {\n  newInitializationData: T;\n  onChange: (value: TNode<T>) => void;\n  value?: TNode<T>;\n  renderCondition: TRenderCondition<T>;\n  rootNodeAllowedEmpty?: boolean;\n  className?: string;\n  needDndProvider?: boolean;\n  hideBottomBtn?: {\n    addRelation?: boolean;\n  };\n}\n\nexport default function LogicTree<T>(props: IProps<T>) {\n  const {\n    newInitializationData,\n    onChange: propsOnChange,\n    renderCondition,\n    rootNodeAllowedEmpty,\n    className,\n    needDndProvider = false,\n    hideBottomBtn,\n  } = props;\n  const initialNode: TNode<T> = {\n    id: getUniqId(),\n    type: ENodeType.LOGIC,\n    logicType: ELogicType.AND,\n    nodes: [\n      {\n        id: getUniqId(),\n        type: ENodeType.RECORD,\n        data: newInitializationData,\n      },\n    ],\n  };\n\n  const [innerValue, setInnerValue] = useControllableValue<TNode<T>>(\n    props.value ? { value: props.value } : {},\n    {\n      defaultValue: initialNode,\n    },\n  );\n  const [hoverItemId, setHoverItemId] = useState<string>('');\n\n  const changeInnerValue = useCallback(\n    (newValue: TNode<T>) => {\n      setInnerValue(newValue);\n      propsOnChange(newValue);\n    },\n    [propsOnChange, setInnerValue],\n  );\n\n  const onAddCondition = (id: string) => {\n    const newRootNode = addRecordNode(id, innerValue, newInitializationData);\n    changeInnerValue(newRootNode);\n  };\n\n  const onAddRelation = (id: string) => {\n    const newRootNode = addLogicNode(id, innerValue, newInitializationData);\n    changeInnerValue(newRootNode);\n  };\n\n  const onChangeRelation = (id: string, logicType: ELogicType) => {\n    const newRootNode = changeRelation(id, logicType, innerValue);\n    changeInnerValue(newRootNode);\n  };\n\n  const onRemove = (id: string) => {\n    const newRootNode = removeNode(\n      id,\n      innerValue,\n      initialNode,\n      rootNodeAllowedEmpty,\n    );\n    changeInnerValue(newRootNode);\n  };\n\n  const onChangeRecordData = (id: string, data: T) => {\n    const newRootNode = changeRecordData(id, data, innerValue);\n    changeInnerValue(newRootNode);\n  };\n\n  const moveNode = useCallback(\n    (dragId: string, hoverId: string, dropPosition: EPutPosition) => {\n      const newRootNode = _.cloneDeep(innerValue);\n      const dragNode = findNodeById(dragId, newRootNode);\n      const hoverNode = findNodeById(hoverId, newRootNode);\n\n      if (dragNode && hoverNode) {\n        if (isDescendant(hoverId, dragNode)) {\n          return;\n        }\n\n        const dragParent = findParentNodeById(dragId, newRootNode);\n        const hoverParent = findParentNodeById(hoverId, newRootNode);\n\n        if (dragParent && hoverParent) {\n          // 从原位置移除节点\n          dragParent.nodes = dragParent.nodes.filter(\n            (node) => node.id !== dragId,\n          );\n\n          // 如果拖拽父节点为空，处理删除逻辑\n          if (dragParent.nodes.length === 0) {\n            const grandParent = findParentNodeById(dragParent.id, newRootNode);\n            if (grandParent) {\n              grandParent.nodes = grandParent.nodes.filter(\n                (node) => node.id !== dragParent.id,\n              );\n            } else {\n              dragParent.nodes = [];\n            }\n          }\n\n          // 插入到新位置\n          const hoverIndex = hoverParent.nodes.findIndex(\n            (node) => node.id === hoverId,\n          );\n          const newIndex =\n            dropPosition === EPutPosition.TOP ? hoverIndex : hoverIndex + 1;\n          hoverParent.nodes.splice(newIndex, 0, dragNode);\n\n          // 更新状态\n          changeInnerValue(newRootNode);\n        }\n      }\n    },\n    [innerValue, changeInnerValue],\n  );\n\n  if (!innerValue) {\n    return null;\n  }\n\n  const content = (\n    <div className={cn('ald-logic-tree-wrap', className)}>\n      <LogicItem\n        value={innerValue}\n        addCondition={onAddCondition}\n        addRelation={onAddRelation}\n        remove={onRemove}\n        changeRecordData={onChangeRecordData}\n        renderCondition={renderCondition}\n        changeRelation={onChangeRelation}\n        onDragEnd={moveNode}\n        hoverId={hoverItemId}\n        setHoverId={setHoverItemId}\n        isRoot={true} // 将最顶层的LogicItem标记为根节点\n        hideBottomBtn={hideBottomBtn}\n      />\n    </div>\n  );\n\n  if (!needDndProvider) {\n    return content;\n  }\n\n  return <DndProvider backend={HTML5Backend}>{content}</DndProvider>;\n}\n"],"mappings":";;;;;;;;;;;;;;AAwBA,IAAY,eAAL,yBAAA,cAAA;AACL,cAAA,SAAA;AACA,cAAA,YAAA;;KACD;AAoBD,SAAwB,UAAa,OAAkB;CACrD,MAAM,EACJ,uBACA,UAAU,eACV,iBACA,sBACA,WACA,kBAAkB,OAClB,kBACE;CACJ,MAAM,cAAwB;EAC5B,IAAI,WAAW;EACf,MAAM,UAAU;EAChB,WAAW,WAAW;EACtB,OAAO,CACL;GACE,IAAI,WAAW;GACf,MAAM,UAAU;GAChB,MAAM;GACP,CACF;EACF;CAED,MAAM,CAAC,YAAY,iBAAiB,qBAClC,MAAM,QAAQ,EAAE,OAAO,MAAM,OAAO,GAAG,EAAE,EACzC,EACE,cAAc,aACf,CACF;CACD,MAAM,CAAC,aAAa,kBAAkB,SAAiB,GAAG;CAE1D,MAAM,mBAAmB,aACtB,aAAuB;AACtB,gBAAc,SAAS;AACvB,gBAAc,SAAS;IAEzB,CAAC,eAAe,cAAc,CAC/B;CAED,MAAM,kBAAkB,OAAe;AAErC,mBADoB,cAAc,IAAI,YAAY,sBAAsB,CAC3C;;CAG/B,MAAM,iBAAiB,OAAe;AAEpC,mBADoB,aAAa,IAAI,YAAY,sBAAsB,CAC1C;;CAG/B,MAAM,oBAAoB,IAAY,cAA0B;AAE9D,mBADoB,eAAe,IAAI,WAAW,WAAW,CAChC;;CAG/B,MAAM,YAAY,OAAe;AAO/B,mBANoB,WAClB,IACA,YACA,aACA,qBACD,CAC4B;;CAG/B,MAAM,sBAAsB,IAAY,SAAY;AAElD,mBADoB,iBAAiB,IAAI,MAAM,WAAW,CAC7B;;CAG/B,MAAM,WAAW,aACd,QAAgB,SAAiB,iBAA+B;EAC/D,MAAM,cAAc,EAAE,UAAU,WAAW;EAC3C,MAAM,WAAW,aAAa,QAAQ,YAAY;EAClD,MAAM,YAAY,aAAa,SAAS,YAAY;AAEpD,MAAI,YAAY,WAAW;AACzB,OAAI,aAAa,SAAS,SAAS,CACjC;GAGF,MAAM,aAAa,mBAAmB,QAAQ,YAAY;GAC1D,MAAM,cAAc,mBAAmB,SAAS,YAAY;AAE5D,OAAI,cAAc,aAAa;AAE7B,eAAW,QAAQ,WAAW,MAAM,QACjC,SAAS,KAAK,OAAO,OACvB;AAGD,QAAI,WAAW,MAAM,WAAW,GAAG;KACjC,MAAM,cAAc,mBAAmB,WAAW,IAAI,YAAY;AAClE,SAAI,YACF,aAAY,QAAQ,YAAY,MAAM,QACnC,SAAS,KAAK,OAAO,WAAW,GAClC;SAED,YAAW,QAAQ,EAAE;;IAKzB,MAAM,aAAa,YAAY,MAAM,WAClC,SAAS,KAAK,OAAO,QACvB;IACD,MAAM,WACJ,iBAAiB,aAAa,MAAM,aAAa,aAAa;AAChE,gBAAY,MAAM,OAAO,UAAU,GAAG,SAAS;AAG/C,qBAAiB,YAAY;;;IAInC,CAAC,YAAY,iBAAiB,CAC/B;AAED,KAAI,CAAC,WACH,QAAO;CAGT,MAAM,UACJ,oBAAC,OAAD;EAAK,WAAW,GAAG,uBAAuB,UAAU;YAClD,oBAAC,WAAD;GACE,OAAO;GACP,cAAc;GACd,aAAa;GACb,QAAQ;GACR,kBAAkB;GACD;GACjB,gBAAgB;GAChB,WAAW;GACX,SAAS;GACT,YAAY;GACZ,QAAQ;GACO;GACf,CAAA;EACE,CAAA;AAGR,KAAI,CAAC,gBACH,QAAO;AAGT,QAAO,oBAAC,aAAD;EAAa,SAAS;YAAe;EAAsB,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/LogicTree/index.tsx"],"sourcesContent":["import { useControllableValue } from 'ahooks';\nimport { cn } from '../lib/utils';\nimport './logic-tree.css';\nimport _ from 'lodash';\nimport React, { useCallback, useState } from 'react';\nimport { DndProvider, useDragDropManager } from 'react-dnd';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\nimport { getUniqId } from '../_utils/getUniqId';\nimport LogicItem from './components/LogicItem';\nimport {\n  addLogicNode,\n  addRecordNode,\n  changeRecordData,\n  changeRelation,\n  findNodeById,\n  findParentNodeById,\n  isDescendant,\n  removeNode,\n} from './helper';\nimport { ELogicType, ENodeType, type TNode } from './type';\n\nexport { default as DisplayLogicTree } from './DisplayLogicTree';\nexport * from './type';\n\nexport enum EPutPosition {\n  TOP = 'TOP',\n  BOTTOM = 'BOTTOM',\n}\n\nexport type TRenderCondition<T> = (\n  data: T,\n  { changeData }: { changeData: (data: T) => void },\n  nodeId: string,\n) => React.ReactNode;\n\ninterface IProps<T> {\n  newInitializationData: T;\n  onChange: (value: TNode<T>) => void;\n  value?: TNode<T>;\n  renderCondition: TRenderCondition<T>;\n  rootNodeAllowedEmpty?: boolean;\n  className?: string;\n  needDndProvider?: boolean;\n  hideBottomBtn?: {\n    addRelation?: boolean;\n  };\n}\n\nfunction useHasDndContext() {\n  try {\n    return !!useDragDropManager();\n  } catch {\n    return false;\n  }\n}\n\nfunction LogicTreeDndProvider({ children }: { children: React.ReactNode }) {\n  const hasDndContext = useHasDndContext();\n  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null);\n\n  if (hasDndContext) {\n    return <>{children}</>;\n  }\n\n  return (\n    <div ref={setRootElement} style={{ display: 'contents' }}>\n      {rootElement ? (\n        <DndProvider backend={HTML5Backend} options={{ rootElement }}>\n          {children}\n        </DndProvider>\n      ) : null}\n    </div>\n  );\n}\n\nexport default function LogicTree<T>(props: IProps<T>) {\n  const {\n    newInitializationData,\n    onChange: propsOnChange,\n    renderCondition,\n    rootNodeAllowedEmpty,\n    className,\n    hideBottomBtn,\n  } = props;\n  const initialNode: TNode<T> = {\n    id: getUniqId(),\n    type: ENodeType.LOGIC,\n    logicType: ELogicType.AND,\n    nodes: [\n      {\n        id: getUniqId(),\n        type: ENodeType.RECORD,\n        data: newInitializationData,\n      },\n    ],\n  };\n\n  const [innerValue, setInnerValue] = useControllableValue<TNode<T>>(\n    props.value ? { value: props.value } : {},\n    {\n      defaultValue: initialNode,\n    },\n  );\n  const [hoverItemId, setHoverItemId] = useState<string>('');\n\n  const changeInnerValue = useCallback(\n    (newValue: TNode<T>) => {\n      setInnerValue(newValue);\n      propsOnChange(newValue);\n    },\n    [propsOnChange, setInnerValue],\n  );\n\n  const onAddCondition = (id: string) => {\n    const newRootNode = addRecordNode(id, innerValue, newInitializationData);\n    changeInnerValue(newRootNode);\n  };\n\n  const onAddRelation = (id: string) => {\n    const newRootNode = addLogicNode(id, innerValue, newInitializationData);\n    changeInnerValue(newRootNode);\n  };\n\n  const onChangeRelation = (id: string, logicType: ELogicType) => {\n    const newRootNode = changeRelation(id, logicType, innerValue);\n    changeInnerValue(newRootNode);\n  };\n\n  const onRemove = (id: string) => {\n    const newRootNode = removeNode(\n      id,\n      innerValue,\n      initialNode,\n      rootNodeAllowedEmpty,\n    );\n    changeInnerValue(newRootNode);\n  };\n\n  const onChangeRecordData = (id: string, data: T) => {\n    const newRootNode = changeRecordData(id, data, innerValue);\n    changeInnerValue(newRootNode);\n  };\n\n  const moveNode = useCallback(\n    (dragId: string, hoverId: string, dropPosition: EPutPosition) => {\n      const newRootNode = _.cloneDeep(innerValue);\n      const dragNode = findNodeById(dragId, newRootNode);\n      const hoverNode = findNodeById(hoverId, newRootNode);\n\n      if (dragNode && hoverNode) {\n        if (isDescendant(hoverId, dragNode)) {\n          return;\n        }\n\n        const dragParent = findParentNodeById(dragId, newRootNode);\n        const hoverParent = findParentNodeById(hoverId, newRootNode);\n\n        if (dragParent && hoverParent) {\n          // 从原位置移除节点\n          dragParent.nodes = dragParent.nodes.filter(\n            (node) => node.id !== dragId,\n          );\n\n          // 如果拖拽父节点为空，处理删除逻辑\n          if (dragParent.nodes.length === 0) {\n            const grandParent = findParentNodeById(dragParent.id, newRootNode);\n            if (grandParent) {\n              grandParent.nodes = grandParent.nodes.filter(\n                (node) => node.id !== dragParent.id,\n              );\n            } else {\n              dragParent.nodes = [];\n            }\n          }\n\n          // 插入到新位置\n          const hoverIndex = hoverParent.nodes.findIndex(\n            (node) => node.id === hoverId,\n          );\n          const newIndex =\n            dropPosition === EPutPosition.TOP ? hoverIndex : hoverIndex + 1;\n          hoverParent.nodes.splice(newIndex, 0, dragNode);\n\n          // 更新状态\n          changeInnerValue(newRootNode);\n        }\n      }\n    },\n    [innerValue, changeInnerValue],\n  );\n\n  if (!innerValue) {\n    return null;\n  }\n\n  const content = (\n    <div className={cn('ald-logic-tree-wrap', className)}>\n      <LogicItem\n        value={innerValue}\n        addCondition={onAddCondition}\n        addRelation={onAddRelation}\n        remove={onRemove}\n        changeRecordData={onChangeRecordData}\n        renderCondition={renderCondition}\n        changeRelation={onChangeRelation}\n        onDragEnd={moveNode}\n        hoverId={hoverItemId}\n        setHoverId={setHoverItemId}\n        isRoot={true} // 将最顶层的LogicItem标记为根节点\n        hideBottomBtn={hideBottomBtn}\n      />\n    </div>\n  );\n\n  return <LogicTreeDndProvider>{content}</LogicTreeDndProvider>;\n}\n"],"mappings":"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"}

package/dist/MemberPicker/components/NickLabel.js

@@ -10,7 +10,7 @@ var NickLabel = ({ photo, name, id, account, type, addonBefore }) => {
 		children: [/* @__PURE__ */ jsx(Avatar, {
 			src: photo,
 			size: 20,
-			type: type === EUserType.USER ? "user" : "userGroup",
+			type: type === EUserType.USER ? "user" : "team",
 			children: innerName
 		}, innerName), /* @__PURE__ */ jsxs("div", {
 			className: "ald-member-picker-nick-label-name",

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

@@ -1 +1 @@
-{"version":3,"file":"NickLabel.js","names":[],"sources":["../../../src/MemberPicker/components/NickLabel.tsx"],"sourcesContent":["import React, { ReactNode, memo } from 'react';\nimport Avatar from '../../Avatar';\nimport { EUserType } from '../../ConfigProvider/getUserList';\n\ninterface INickLabelProps {\n  name?: string;\n  id: string;\n  photo?: React.ReactNode;\n  account?: string;\n  type: EUserType;\n  addonBefore?: ReactNode;\n}\nconst NickLabel: React.FC<INickLabelProps> = ({\n  photo,\n  name,\n  id,\n  account,\n  type,\n  addonBefore,\n}) => {\n  const innerName = name || id;\n\n  return (\n    <div className=\"ald-member-picker-nick-label\">\n      <Avatar\n        key={innerName}\n        src={photo}\n        size={20}\n        type={type === EUserType.USER ? 'user' : 'userGroup'}\n      >\n        {innerName}\n      </Avatar>\n      <div\n        className=\"ald-member-picker-nick-label-name\"\n        title={account ? `${name}(${account})` : `${name}`}\n      >\n        {innerName}\n        {addonBefore}\n      </div>\n    </div>\n  );\n};\n\nexport default memo(NickLabel);\n"],"mappings":";;;;;AAYA,IAAM,aAAwC,EAC5C,OACA,MACA,IACA,SACA,MACA,kBACI;CACJ,MAAM,YAAY,QAAQ;AAE1B,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,QAAD;GAEE,KAAK;GACL,MAAM;GACN,MAAM,SAAS,UAAU,OAAO,SAAS;aAExC;GACM,EANF,UAME,EACT,qBAAC,OAAD;GACE,WAAU;GACV,OAAO,UAAU,GAAG,KAAK,GAAG,QAAQ,KAAK,GAAG;aAF9C,CAIG,WACA,YACG;KACF;;;AAIV,IAAA,oBAAe,KAAK,UAAU"}
+{"version":3,"file":"NickLabel.js","names":[],"sources":["../../../src/MemberPicker/components/NickLabel.tsx"],"sourcesContent":["import React, { ReactNode, memo } from 'react';\nimport Avatar from '../../Avatar';\nimport { EUserType } from '../../ConfigProvider/getUserList';\n\ninterface INickLabelProps {\n  name?: string;\n  id: string;\n  photo?: React.ReactNode;\n  account?: string;\n  type: EUserType;\n  addonBefore?: ReactNode;\n}\nconst NickLabel: React.FC<INickLabelProps> = ({\n  photo,\n  name,\n  id,\n  account,\n  type,\n  addonBefore,\n}) => {\n  const innerName = name || id;\n\n  return (\n    <div className=\"ald-member-picker-nick-label\">\n      <Avatar\n        key={innerName}\n        src={photo}\n        size={20}\n        type={type === EUserType.USER ? 'user' : 'team'}\n      >\n        {innerName}\n      </Avatar>\n      <div\n        className=\"ald-member-picker-nick-label-name\"\n        title={account ? `${name}(${account})` : `${name}`}\n      >\n        {innerName}\n        {addonBefore}\n      </div>\n    </div>\n  );\n};\n\nexport default memo(NickLabel);\n"],"mappings":";;;;;AAYA,IAAM,aAAwC,EAC5C,OACA,MACA,IACA,SACA,MACA,kBACI;CACJ,MAAM,YAAY,QAAQ;AAE1B,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,QAAD;GAEE,KAAK;GACL,MAAM;GACN,MAAM,SAAS,UAAU,OAAO,SAAS;aAExC;GACM,EANF,UAME,EACT,qBAAC,OAAD;GACE,WAAU;GACV,OAAO,UAAU,GAAG,KAAK,GAAG,QAAQ,KAAK,GAAG;aAF9C,CAIG,WACA,YACG;KACF;;;AAIV,IAAA,oBAAe,KAAK,UAAU"}

package/dist/MemberPicker/components/Panel.js

@@ -105,12 +105,12 @@ function Panel(props) {
 			["ald-member-picker-single"]: !multiple
 		}),
 		style: { width: panelwidth },
-		children: multiple ? /* @__PURE__ */ jsxs(Fragment, { children: [
-			/* @__PURE__ */ jsx("div", {
+		children: multiple ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "ald-member-picker-inner",
+			children: [/* @__PURE__ */ jsx("div", {
 				className: "ald-member-picker-member-selection-wrapper",
 				children: renderDropdown()
-			}),
-			/* @__PURE__ */ jsx(SelectedMemberTags, {
+			}), /* @__PURE__ */ jsx(SelectedMemberTags, {
 				className: "ald-member-picker-selected-member-tags",
 				selectedUsers,
 				width: (panelwidth - 3) / 2,
@@ -118,16 +118,15 @@ function Panel(props) {
 				lockedIds,
 				userList: dataList,
 				renderSelectedTag
-			}),
-			/* @__PURE__ */ jsx(SelectorFooter, {
-				className: "ald-member-picker-selector-footer",
-				onCancel,
-				onOk: () => {
-					onChange?.(selectedUsers);
-				},
-				footer
-			})
-		] }) : /* @__PURE__ */ jsxs(Fragment, { children: [type === EMemberPicker.USER && /* @__PURE__ */ jsx(MemberSelection, {
+			})]
+		}), /* @__PURE__ */ jsx(SelectorFooter, {
+			className: "ald-member-picker-selector-footer",
+			onCancel,
+			onOk: () => {
+				onChange?.(selectedUsers);
+			},
+			footer
+		})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [type === EMemberPicker.USER && /* @__PURE__ */ jsx(MemberSelection, {
 			className: "ald-member-picker-member-selection-single",
 			userList: dataList.filter(isUser),
 			width: panelwidth - 2,

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

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","names":[],"sources":["../../../src/MemberPicker/components/Panel.tsx"],"sourcesContent":["import { cn } from '../../lib/utils';\n\nimport React, {\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport {\n  EUserType,\n  IUserGroup,\n  TUser,\n  TUserGroupValue,\n  TUserValue,\n} from '../../ConfigProvider/getUserList';\nimport Tabs from '../../Tabs';\nimport { LocaleContext, getTranslator } from '../../locale/default';\nimport { EMemberPicker, IUser } from '../interface';\nimport { getId } from '../utils';\nimport { isUser, isUserGroup } from '../utils/getUsersWithUserId';\nimport MemberSelection from './MemberSelection';\nimport SelectedMemberTags from './SelectedMemberTags';\nimport SelectorFooter from './SelectorFooter';\nimport UserGroupSelection from './UserGroupSelection';\n\ninterface IPanelProps {\n  type: EMemberPicker;\n  multiple?: boolean;\n  onChange?: (value: TUser) => void;\n  dropdownWidth?: number;\n  value?: TUser | (IUser | IUserGroup);\n  dataList: TUser;\n  onSearchValueChange?: (value: string) => void;\n  onCancel?: () => void;\n  loading: boolean;\n  className?: string;\n  lockedIds: Array<TUserValue | TUserGroupValue>;\n  footer?: ReactNode;\n  renderItem?: (\n    item: IUser | IUserGroup,\n    context: {\n      isSelected: boolean;\n      disabled: boolean;\n      onClick: () => void;\n      onNextLevel?: () => void;\n      originNode: ReactNode;\n    },\n  ) => ReactNode;\n  renderSelectedTag?: (\n    user: IUser | IUserGroup,\n    originNode: ReactNode,\n  ) => ReactNode;\n  filterItem?: (item: IUser | IUserGroup) => boolean;\n}\n\nexport const userDisplayNameIsRepeated = (\n  userList: TUser,\n  displayName?: string,\n) => {\n  return (\n    userList.filter(\n      (user) => user.type === EUserType.USER && user.nickname === displayName,\n    ).length > 1\n  );\n};\n\nexport default function Panel(props: IPanelProps) {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const {\n    type,\n    multiple,\n    dropdownWidth,\n    value,\n    onChange,\n    dataList,\n    onSearchValueChange,\n    className,\n    lockedIds,\n    footer,\n    onCancel,\n    renderItem,\n    renderSelectedTag,\n    filterItem,\n  } = props;\n\n  const [selectedUsers, setSelected] = useState<TUser>([]);\n\n  const onSelectionChange = useCallback(\n    (selected: boolean, user: IUser | IUserGroup) => {\n      if (multiple) {\n        if (selected) {\n          setSelected([...selectedUsers, user]);\n        } else {\n          setSelected(\n            selectedUsers.filter((item) => getId(item) !== getId(user)),\n          );\n        }\n      } else {\n        if (selected) {\n          setSelected([user]);\n          onChange?.([user]);\n        } else {\n          setSelected([]);\n          onChange?.([]);\n        }\n      }\n    },\n    [multiple, selectedUsers, onChange],\n  );\n\n  const onRemove = useCallback(\n    (user: IUser | IUserGroup) => {\n      setSelected(selectedUsers.filter((item) => getId(item) !== getId(user)));\n    },\n    [selectedUsers],\n  );\n\n  const panelwidth = useMemo(() => {\n    if (dropdownWidth) {\n      return dropdownWidth;\n    } else if (multiple) {\n      return 480;\n    } else {\n      return 160;\n    }\n  }, [dropdownWidth, multiple]);\n\n  useEffect(() => {\n    if (value) {\n      if (Array.isArray(value)) {\n        setSelected(value);\n      } else {\n        setSelected([value]);\n      }\n    }\n  }, [setSelected, value]);\n\n  const renderDropdown = useCallback(() => {\n    const userSelection = (\n      <MemberSelection\n        className={'ald-member-picker-member-selection-multiple'}\n        userList={dataList.filter(isUser)}\n        filterItem={filterItem}\n        width={(panelwidth - 6) / 2}\n        selectedUsers={selectedUsers.filter(isUser)}\n        onChange={onSelectionChange}\n        onSearchValueChange={onSearchValueChange}\n        multiple={true}\n        lockedIds={lockedIds}\n        loading={props.loading}\n        renderItem={renderItem}\n      ></MemberSelection>\n    );\n    const userGroupSelection = (\n      <UserGroupSelection\n        className={'ald-member-picker-member-selection-multiple'}\n        userGroupList={dataList.filter(isUserGroup)}\n        filterItem={filterItem}\n        width={(panelwidth - 6) / 2}\n        selectedUsersGroup={selectedUsers.filter(isUserGroup)}\n        onChange={onSelectionChange}\n        onSearchValueChange={onSearchValueChange}\n        multiple={true}\n        lockedIds={lockedIds}\n        loading={props.loading}\n        renderItem={renderItem}\n      ></UserGroupSelection>\n    );\n    if (type === EMemberPicker.USER) {\n      return userSelection;\n    }\n    if (type === EMemberPicker.GROUP) {\n      return userGroupSelection;\n    }\n    if (type === EMemberPicker.BOTH) {\n      return (\n        <Tabs\n          centered\n          destroyInactiveTabPane\n          items={[\n            {\n              key: 'user',\n              label: t.MemberPicker.users,\n              children: userSelection,\n            },\n            {\n              key: 'userGroup',\n              label: t.MemberPicker.userGroups,\n              children: userGroupSelection,\n            },\n          ]}\n          className=\"ald-member-tabs\"\n        ></Tabs>\n      );\n    }\n  }, [\n    t,\n    dataList,\n    panelwidth,\n    selectedUsers,\n    onSelectionChange,\n    onSearchValueChange,\n    lockedIds,\n    props.loading,\n    type,\n    renderItem,\n    filterItem,\n  ]);\n\n  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: panelwidth }}\n    >\n      {multiple ? (\n        <>\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          <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}\n\nexport const userDisplayNameIsRepeated = (\n  userList: TUser,\n  displayName?: string,\n) => {\n  return (\n    userList.filter(\n      (user) => user.type === EUserType.USER && user.nickname === displayName,\n    ).length > 1\n  );\n};\n\nexport default function Panel(props: IPanelProps) {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const {\n    type,\n    multiple,\n    dropdownWidth,\n    value,\n    onChange,\n    dataList,\n    onSearchValueChange,\n    className,\n    lockedIds,\n    footer,\n    onCancel,\n    renderItem,\n    renderSelectedTag,\n    filterItem,\n  } = props;\n\n  const [selectedUsers, setSelected] = useState<TUser>([]);\n\n  const onSelectionChange = useCallback(\n    (selected: boolean, user: IUser | IUserGroup) => {\n      if (multiple) {\n        if (selected) {\n          setSelected([...selectedUsers, user]);\n        } else {\n          setSelected(\n            selectedUsers.filter((item) => getId(item) !== getId(user)),\n          );\n        }\n      } else {\n        if (selected) {\n          setSelected([user]);\n          onChange?.([user]);\n        } else {\n          setSelected([]);\n          onChange?.([]);\n        }\n      }\n    },\n    [multiple, selectedUsers, onChange],\n  );\n\n  const onRemove = useCallback(\n    (user: IUser | IUserGroup) => {\n      setSelected(selectedUsers.filter((item) => getId(item) !== getId(user)));\n    },\n    [selectedUsers],\n  );\n\n  const panelwidth = useMemo(() => {\n    if (dropdownWidth) {\n      return dropdownWidth;\n    } else if (multiple) {\n      return 480;\n    } else {\n      return 160;\n    }\n  }, [dropdownWidth, multiple]);\n\n  useEffect(() => {\n    if (value) {\n      if (Array.isArray(value)) {\n        setSelected(value);\n      } else {\n        setSelected([value]);\n      }\n    }\n  }, [setSelected, value]);\n\n  const renderDropdown = useCallback(() => {\n    const userSelection = (\n      <MemberSelection\n        className={'ald-member-picker-member-selection-multiple'}\n        userList={dataList.filter(isUser)}\n        filterItem={filterItem}\n        width={(panelwidth - 6) / 2}\n        selectedUsers={selectedUsers.filter(isUser)}\n        onChange={onSelectionChange}\n        onSearchValueChange={onSearchValueChange}\n        multiple={true}\n        lockedIds={lockedIds}\n        loading={props.loading}\n        renderItem={renderItem}\n      ></MemberSelection>\n    );\n    const userGroupSelection = (\n      <UserGroupSelection\n        className={'ald-member-picker-member-selection-multiple'}\n        userGroupList={dataList.filter(isUserGroup)}\n        filterItem={filterItem}\n        width={(panelwidth - 6) / 2}\n        selectedUsersGroup={selectedUsers.filter(isUserGroup)}\n        onChange={onSelectionChange}\n        onSearchValueChange={onSearchValueChange}\n        multiple={true}\n        lockedIds={lockedIds}\n        loading={props.loading}\n        renderItem={renderItem}\n      ></UserGroupSelection>\n    );\n    if (type === EMemberPicker.USER) {\n      return userSelection;\n    }\n    if (type === EMemberPicker.GROUP) {\n      return userGroupSelection;\n    }\n    if (type === EMemberPicker.BOTH) {\n      return (\n        <Tabs\n          centered\n          destroyInactiveTabPane\n          items={[\n            {\n              key: 'user',\n              label: t.MemberPicker.users,\n              children: userSelection,\n            },\n            {\n              key: 'userGroup',\n              label: t.MemberPicker.userGroups,\n              children: userGroupSelection,\n            },\n          ]}\n          className=\"ald-member-tabs\"\n        ></Tabs>\n      );\n    }\n  }, [\n    t,\n    dataList,\n    panelwidth,\n    selectedUsers,\n    onSelectionChange,\n    onSearchValueChange,\n    lockedIds,\n    props.loading,\n    type,\n    renderItem,\n    filterItem,\n  ]);\n\n  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: panelwidth }}\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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"}

package/dist/MemberPicker/index.js

@@ -15,16 +15,20 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import _ from "lodash";
 import { usePrevious, useRequest } from "ahooks";
 //#region src/MemberPicker/index.tsx
+var DEFAULT_MULTIPLE_DROPDOWN_WIDTH = 480;
+var DEFAULT_SINGLE_DROPDOWN_WIDTH = 160;
 var Component = (props) => {
 	const { locale } = useContext(LocaleContext);
 	const t = getTranslator(locale);
 	const { value, type = EMemberPicker.USER, onChange, multiple, dropdownWidth, open, onOpenChange, placeholder = t.MemberPicker.select, className, allowClear, disabled, onClear, size, prefix: propPrefix, lockedIds = [], footer, onCancel, filterItem, mode: propsMode, renderItem, renderSelectedTag, ...restProps } = props;
+	const allowOverlap = props.allowOverlap ?? false;
 	const { getUsersByIds, getUsersByKeywords } = AldCustomConfigProvider.useGetUserList();
 	const [selectedUserList, setSelectedUserList] = useState([]);
 	const prevValue = usePrevious(value);
 	const [searchUserList, setSearchUserList] = useState([]);
 	const [searchString, setSearchString] = useState("");
 	const [dropdownContentWidth, setDropdownContentWidth] = useState(dropdownWidth);
+	const panelWidth = dropdownWidth ?? (multiple ? DEFAULT_MULTIPLE_DROPDOWN_WIDTH : DEFAULT_SINGLE_DROPDOWN_WIDTH);
 	const triggerRef = useRef(null);
 	const onSearchValueChange = useCallback((v) => {
 		setSearchString(v);
@@ -164,7 +168,6 @@ var Component = (props) => {
 		}
 		return multiple ? multiple : propsMode;
 	}, [multiple, propsMode]);
-	console.log(mode);
 	const selectOpen = typeof open === "boolean" ? open : dropdownOpen;
 	return /* @__PURE__ */ jsx(Select_default, {
 		prefix: propPrefix,
@@ -214,7 +217,7 @@ var Component = (props) => {
 			else onChange?.();
 			onClear?.();
 		},
-		popupClassName: cn("ald-member-picker-popup", props.popupClassName),
+		popupClassName: cn("ald-member-picker-popup", allowOverlap && "ald-member-picker-popup-adaptive", props.popupClassName),
 		mode,
 		options: selectedUserList.map((item) => {
 			if (item.type === EUserType.USER_GROUP) return {
@@ -223,7 +226,7 @@ var Component = (props) => {
 				tag: /* @__PURE__ */ jsxs("div", {
 					className: "ald-member-picker-tag",
 					children: [/* @__PURE__ */ jsx(Avatar, {
-						type: "userGroup",
+						type: "team",
 						size: 20,
 						children: item.name || item.groupId
 					}), item.name || item.groupId]
@@ -237,7 +240,7 @@ var Component = (props) => {
 					children: [/* @__PURE__ */ jsx(Avatar, {
 						size: 20,
 						src: item.photo,
-						type: item.type === EUserType.USER ? "user" : "userGroup",
+						type: item.type === EUserType.USER ? "user" : "team",
 						children: item.nickname || item.name || item.userId
 					}), item.nickname || item.name || item.userId]
 				})
@@ -246,11 +249,13 @@ var Component = (props) => {
 		optionLabelProp: multiple ? "label" : "tag",
 		open: selectOpen,
 		onOpenChange: onDropdownOpenChange,
-		popupMatchSelectWidth: false,
+		popupMatchSelectWidth: panelWidth,
+		allowOverlap,
 		placeholder,
 		dropdownRender: () => {
 			return /* @__PURE__ */ jsx("div", {
 				ref: triggerRef,
+				className: cn({ "ald-member-picker-popup-body": allowOverlap }),
 				children: /* @__PURE__ */ jsx(Panel, {
 					type,
 					footer,