@aloudata/aloudata-design 3.0.0-beta.10 → 3.0.0-beta.12

package/dist/RenameInput/index.js

@@ -6,7 +6,6 @@ var defaultWidth = 20;
 var PADDING_WIDTH = 4;
 var RenameInput = ({ value: propsValue, onConfirm, className, width, fontStyle, maxLength, validateValue, onError, readonly = false, isEdit: propsIsEdit = false }) => {
 	const [isEdit, setIsEdit] = useState(propsIsEdit);
-	console.log("%c [ isEdit ]-46", "font-size:13px; background:#134c7e; color:#5790c2;", 1433223, isEdit);
 	const [value, setValue] = useState(propsValue);
 	useEffect(() => {
 		setValue(propsValue);

package/dist/RenameInput/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/RenameInput/index.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../lib/utils';\n\ninterface IProps {\n  value: string;\n  onConfirm?: (value: string) => void;\n  onError?: (value: string) => void;\n  className?: string;\n  width?: number;\n  fontStyle?: CSSProperties;\n  /**\n   * @deprecated 如果要控制编辑态请使用 isEdit\n   */\n  focus?: boolean;\n  isEdit?: boolean;\n  maxLength?: number;\n  distance?: [left: number, right: number];\n  validateValue?: (value: string) => boolean;\n  readonly?: boolean;\n}\n\nconst defaultWidth = 20;\n\nconst PADDING_WIDTH = 4;\n\nconst RenameInput = ({\n  value: propsValue,\n  onConfirm,\n  className,\n  width,\n  fontStyle,\n  maxLength,\n  validateValue,\n  onError,\n  readonly = false,\n  isEdit: propsIsEdit = false,\n}: IProps) => {\n  const [isEdit, setIsEdit] = useState<boolean>(propsIsEdit);\n  console.log(\n    '%c [ isEdit ]-46',\n    'font-size:13px; background:#134c7e; color:#5790c2;',\n    1433223,\n    isEdit,\n  );\n  const [value, setValue] = useState(propsValue);\n\n  useEffect(() => {\n    setValue(propsValue);\n  }, [propsValue]);\n\n  const divRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleBlur = useCallback(() => {\n    onConfirm?.(value);\n    inputRef.current?.blur();\n  }, [onConfirm, value]);\n\n  useEffect(() => {\n    if (!width && divRef.current && inputRef.current) {\n      const tempWidth = divRef.current?.offsetWidth || defaultWidth;\n      inputRef.current.style.width = tempWidth + PADDING_WIDTH + 'px';\n    }\n  }, [width, value, isEdit]);\n\n  useEffect(() => {\n    if (isEdit) {\n      setValue(propsValue);\n    }\n  }, [isEdit, propsValue]);\n\n  useEffect(() => {\n    if (propsIsEdit) {\n      setIsEdit(true);\n      setTimeout(() => {\n        if (inputRef.current) {\n          inputRef.current.focus();\n          inputRef.current.select();\n        }\n      }, 100);\n    } else {\n      setIsEdit(false);\n    }\n  }, [propsIsEdit]);\n\n  if (isEdit && !readonly) {\n    return (\n      <div className=\"ald-rename-input tw-flex tw-h-[22px] tw-min-w-[10px] tw-max-w-full tw-items-center tw-border tw-border-transparent\">\n        <input\n          className={cn(\n            className,\n            'ald-rename-input-wrapper tw-box-border tw-h-[22px] tw-max-w-full tw-border-0 tw-p-[2px] tw-text-[13px]',\n            'hover:tw-border hover:tw-border-solid hover:tw-border-[var(--border-neutral-strong)]',\n            'focus:tw-border focus:tw-border-solid focus:tw-border-[var(--interaction-border-selected)] focus:tw-shadow-[0_0_0_1px_var(--interaction-focus-default)]',\n          )}\n          style={{\n            ...fontStyle,\n            width,\n          }}\n          value={value}\n          ref={inputRef}\n          onChange={(e) => setValue(e.target.value)}\n          onBlur={(e) => {\n            if (!validateValue || validateValue(e.target.value.trim())) {\n              handleBlur();\n            } else {\n              onError?.(value);\n              setValue(propsValue);\n            }\n            setIsEdit(false);\n          }}\n          onFocus={() => {\n            inputRef.current?.select();\n          }}\n          maxLength={maxLength}\n          onKeyUp={(e) => {\n            if (e.key === 'Enter') {\n              if (\n                !validateValue ||\n                validateValue(inputRef.current?.value.trim() || '')\n              ) {\n                inputRef.current?.blur();\n              } else {\n                onError?.(inputRef.current?.value.trim() || '');\n                setValue(propsValue);\n              }\n            }\n          }}\n        />\n        <div\n          ref={divRef}\n          className=\"ald-rename-input-div tw-pointer-events-none tw-invisible tw-fixed tw-bottom-0 tw--ml-px tw-min-w-px tw-max-w-full tw-overflow-hidden tw-whitespace-pre tw-border tw-border-transparent tw-p-0 tw-text-[13px] tw-font-normal\"\n          style={fontStyle}\n        >\n          {value}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={cn(\n        className,\n        'ald-rename-input-text tw-flex tw-h-[22px] tw-items-center tw-border tw-border-transparent tw-p-[2px] tw-text-[13px]',\n      )}\n      style={fontStyle}\n      onMouseMove={() => {\n        setIsEdit(true);\n        setValue(propsValue);\n      }}\n      onClick={() => {\n        inputRef.current?.select();\n      }}\n    >\n      {propsValue}\n    </div>\n  );\n};\n\nexport default RenameInput;\n"],"mappings":";;;;AA2BA,IAAM,eAAe;AAErB,IAAM,gBAAgB;AAEtB,IAAM,eAAe,EACnB,OAAO,YACP,WACA,WACA,OACA,WACA,WACA,eACA,SACA,WAAW,OACX,QAAQ,cAAc,YACV;CACZ,MAAM,CAAC,QAAQ,aAAa,SAAkB,YAAY;AAC1D,SAAQ,IACN,oBACA,sDACA,SACA,OACD;CACD,MAAM,CAAC,OAAO,YAAY,SAAS,WAAW;AAE9C,iBAAgB;AACd,WAAS,WAAW;IACnB,CAAC,WAAW,CAAC;CAEhB,MAAM,SAAS,OAAuB,KAAK;CAC3C,MAAM,WAAW,OAAyB,KAAK;CAE/C,MAAM,aAAa,kBAAkB;AACnC,cAAY,MAAM;AAClB,WAAS,SAAS,MAAM;IACvB,CAAC,WAAW,MAAM,CAAC;AAEtB,iBAAgB;AACd,MAAI,CAAC,SAAS,OAAO,WAAW,SAAS,SAAS;GAChD,MAAM,YAAY,OAAO,SAAS,eAAe;AACjD,YAAS,QAAQ,MAAM,QAAQ,YAAY,gBAAgB;;IAE5D;EAAC;EAAO;EAAO;EAAO,CAAC;AAE1B,iBAAgB;AACd,MAAI,OACF,UAAS,WAAW;IAErB,CAAC,QAAQ,WAAW,CAAC;AAExB,iBAAgB;AACd,MAAI,aAAa;AACf,aAAU,KAAK;AACf,oBAAiB;AACf,QAAI,SAAS,SAAS;AACpB,cAAS,QAAQ,OAAO;AACxB,cAAS,QAAQ,QAAQ;;MAE1B,IAAI;QAEP,WAAU,MAAM;IAEjB,CAAC,YAAY,CAAC;AAEjB,KAAI,UAAU,CAAC,SACb,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,SAAD;GACE,WAAW,GACT,WACA,0GACA,wFACA,0JACD;GACD,OAAO;IACL,GAAG;IACH;IACD;GACM;GACP,KAAK;GACL,WAAW,MAAM,SAAS,EAAE,OAAO,MAAM;GACzC,SAAS,MAAM;AACb,QAAI,CAAC,iBAAiB,cAAc,EAAE,OAAO,MAAM,MAAM,CAAC,CACxD,aAAY;SACP;AACL,eAAU,MAAM;AAChB,cAAS,WAAW;;AAEtB,cAAU,MAAM;;GAElB,eAAe;AACb,aAAS,SAAS,QAAQ;;GAEjB;GACX,UAAU,MAAM;AACd,QAAI,EAAE,QAAQ,QACZ,KACE,CAAC,iBACD,cAAc,SAAS,SAAS,MAAM,MAAM,IAAI,GAAG,CAEnD,UAAS,SAAS,MAAM;SACnB;AACL,eAAU,SAAS,SAAS,MAAM,MAAM,IAAI,GAAG;AAC/C,cAAS,WAAW;;;GAI1B,CAAA,EACF,oBAAC,OAAD;GACE,KAAK;GACL,WAAU;GACV,OAAO;aAEN;GACG,CAAA,CACF;;AAIV,QACE,oBAAC,OAAD;EACE,WAAW,GACT,WACA,sHACD;EACD,OAAO;EACP,mBAAmB;AACjB,aAAU,KAAK;AACf,YAAS,WAAW;;EAEtB,eAAe;AACb,YAAS,SAAS,QAAQ;;YAG3B;EACG,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/RenameInput/index.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../lib/utils';\n\ninterface IProps {\n  value: string;\n  onConfirm?: (value: string) => void;\n  onError?: (value: string) => void;\n  className?: string;\n  width?: number;\n  fontStyle?: CSSProperties;\n  /**\n   * @deprecated 如果要控制编辑态请使用 isEdit\n   */\n  focus?: boolean;\n  isEdit?: boolean;\n  maxLength?: number;\n  distance?: [left: number, right: number];\n  validateValue?: (value: string) => boolean;\n  readonly?: boolean;\n}\n\nconst defaultWidth = 20;\n\nconst PADDING_WIDTH = 4;\n\nconst RenameInput = ({\n  value: propsValue,\n  onConfirm,\n  className,\n  width,\n  fontStyle,\n  maxLength,\n  validateValue,\n  onError,\n  readonly = false,\n  isEdit: propsIsEdit = false,\n}: IProps) => {\n  const [isEdit, setIsEdit] = useState<boolean>(propsIsEdit);\n  const [value, setValue] = useState(propsValue);\n\n  useEffect(() => {\n    setValue(propsValue);\n  }, [propsValue]);\n\n  const divRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleBlur = useCallback(() => {\n    onConfirm?.(value);\n    inputRef.current?.blur();\n  }, [onConfirm, value]);\n\n  useEffect(() => {\n    if (!width && divRef.current && inputRef.current) {\n      const tempWidth = divRef.current?.offsetWidth || defaultWidth;\n      inputRef.current.style.width = tempWidth + PADDING_WIDTH + 'px';\n    }\n  }, [width, value, isEdit]);\n\n  useEffect(() => {\n    if (isEdit) {\n      setValue(propsValue);\n    }\n  }, [isEdit, propsValue]);\n\n  useEffect(() => {\n    if (propsIsEdit) {\n      setIsEdit(true);\n      setTimeout(() => {\n        if (inputRef.current) {\n          inputRef.current.focus();\n          inputRef.current.select();\n        }\n      }, 100);\n    } else {\n      setIsEdit(false);\n    }\n  }, [propsIsEdit]);\n\n  if (isEdit && !readonly) {\n    return (\n      <div className=\"ald-rename-input tw-flex tw-h-[22px] tw-min-w-[10px] tw-max-w-full tw-items-center tw-border tw-border-transparent\">\n        <input\n          className={cn(\n            className,\n            'ald-rename-input-wrapper tw-box-border tw-h-[22px] tw-max-w-full tw-border-0 tw-p-[2px] tw-text-[13px]',\n            'hover:tw-border hover:tw-border-solid hover:tw-border-[var(--border-neutral-strong)]',\n            'focus:tw-border focus:tw-border-solid focus:tw-border-[var(--interaction-border-selected)] focus:tw-shadow-[0_0_0_1px_var(--interaction-focus-default)]',\n          )}\n          style={{\n            ...fontStyle,\n            width,\n          }}\n          value={value}\n          ref={inputRef}\n          onChange={(e) => setValue(e.target.value)}\n          onBlur={(e) => {\n            if (!validateValue || validateValue(e.target.value.trim())) {\n              handleBlur();\n            } else {\n              onError?.(value);\n              setValue(propsValue);\n            }\n            setIsEdit(false);\n          }}\n          onFocus={() => {\n            inputRef.current?.select();\n          }}\n          maxLength={maxLength}\n          onKeyUp={(e) => {\n            if (e.key === 'Enter') {\n              if (\n                !validateValue ||\n                validateValue(inputRef.current?.value.trim() || '')\n              ) {\n                inputRef.current?.blur();\n              } else {\n                onError?.(inputRef.current?.value.trim() || '');\n                setValue(propsValue);\n              }\n            }\n          }}\n        />\n        <div\n          ref={divRef}\n          className=\"ald-rename-input-div tw-pointer-events-none tw-invisible tw-fixed tw-bottom-0 tw--ml-px tw-min-w-px tw-max-w-full tw-overflow-hidden tw-whitespace-pre tw-border tw-border-transparent tw-p-0 tw-text-[13px] tw-font-normal\"\n          style={fontStyle}\n        >\n          {value}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={cn(\n        className,\n        'ald-rename-input-text tw-flex tw-h-[22px] tw-items-center tw-border tw-border-transparent tw-p-[2px] tw-text-[13px]',\n      )}\n      style={fontStyle}\n      onMouseMove={() => {\n        setIsEdit(true);\n        setValue(propsValue);\n      }}\n      onClick={() => {\n        inputRef.current?.select();\n      }}\n    >\n      {propsValue}\n    </div>\n  );\n};\n\nexport default RenameInput;\n"],"mappings":";;;;AA2BA,IAAM,eAAe;AAErB,IAAM,gBAAgB;AAEtB,IAAM,eAAe,EACnB,OAAO,YACP,WACA,WACA,OACA,WACA,WACA,eACA,SACA,WAAW,OACX,QAAQ,cAAc,YACV;CACZ,MAAM,CAAC,QAAQ,aAAa,SAAkB,YAAY;CAC1D,MAAM,CAAC,OAAO,YAAY,SAAS,WAAW;AAE9C,iBAAgB;AACd,WAAS,WAAW;IACnB,CAAC,WAAW,CAAC;CAEhB,MAAM,SAAS,OAAuB,KAAK;CAC3C,MAAM,WAAW,OAAyB,KAAK;CAE/C,MAAM,aAAa,kBAAkB;AACnC,cAAY,MAAM;AAClB,WAAS,SAAS,MAAM;IACvB,CAAC,WAAW,MAAM,CAAC;AAEtB,iBAAgB;AACd,MAAI,CAAC,SAAS,OAAO,WAAW,SAAS,SAAS;GAChD,MAAM,YAAY,OAAO,SAAS,eAAe;AACjD,YAAS,QAAQ,MAAM,QAAQ,YAAY,gBAAgB;;IAE5D;EAAC;EAAO;EAAO;EAAO,CAAC;AAE1B,iBAAgB;AACd,MAAI,OACF,UAAS,WAAW;IAErB,CAAC,QAAQ,WAAW,CAAC;AAExB,iBAAgB;AACd,MAAI,aAAa;AACf,aAAU,KAAK;AACf,oBAAiB;AACf,QAAI,SAAS,SAAS;AACpB,cAAS,QAAQ,OAAO;AACxB,cAAS,QAAQ,QAAQ;;MAE1B,IAAI;QAEP,WAAU,MAAM;IAEjB,CAAC,YAAY,CAAC;AAEjB,KAAI,UAAU,CAAC,SACb,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,SAAD;GACE,WAAW,GACT,WACA,0GACA,wFACA,0JACD;GACD,OAAO;IACL,GAAG;IACH;IACD;GACM;GACP,KAAK;GACL,WAAW,MAAM,SAAS,EAAE,OAAO,MAAM;GACzC,SAAS,MAAM;AACb,QAAI,CAAC,iBAAiB,cAAc,EAAE,OAAO,MAAM,MAAM,CAAC,CACxD,aAAY;SACP;AACL,eAAU,MAAM;AAChB,cAAS,WAAW;;AAEtB,cAAU,MAAM;;GAElB,eAAe;AACb,aAAS,SAAS,QAAQ;;GAEjB;GACX,UAAU,MAAM;AACd,QAAI,EAAE,QAAQ,QACZ,KACE,CAAC,iBACD,cAAc,SAAS,SAAS,MAAM,MAAM,IAAI,GAAG,CAEnD,UAAS,SAAS,MAAM;SACnB;AACL,eAAU,SAAS,SAAS,MAAM,MAAM,IAAI,GAAG;AAC/C,cAAS,WAAW;;;GAI1B,CAAA,EACF,oBAAC,OAAD;GACE,KAAK;GACL,WAAU;GACV,OAAO;aAEN;GACG,CAAA,CACF;;AAIV,QACE,oBAAC,OAAD;EACE,WAAW,GACT,WACA,sHACD;EACD,OAAO;EACP,mBAAmB;AACjB,aAAU,KAAK;AACf,YAAS,WAAW;;EAEtB,eAAe;AACb,YAAS,SAAS,QAAQ;;YAG3B;EACG,CAAA"}

package/dist/Select/BaseSelect.js

@@ -157,14 +157,14 @@ var BaseSelect = React$1.forwardRef((props, ref) => {
 				else onToggleOpen(open);
 			},
 			children: /* @__PURE__ */ jsxs("div", {
-				className: setClassNames("trigger"),
+				className: cn(setClassNames("trigger"), "ant-select-selector"),
 				children: [
 					prefix && /* @__PURE__ */ jsx("div", {
 						className: setClassNames("prefix"),
 						children: prefix
 					}),
 					_.isEmpty(displayValues) && /* @__PURE__ */ jsx("div", {
-						className: setClassNames("placeholder"),
+						className: cn(setClassNames("placeholder"), "ant-select-selection-placeholder"),
 						children: placeholder
 					}),
 					!_.isEmpty(displayValues) && /* @__PURE__ */ jsx(Selector, {

package/dist/Select/BaseSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSelect.js","names":[],"sources":["../../src/Select/BaseSelect.tsx"],"sourcesContent":["import './ald-select.css';\nimport * as React from 'react';\nimport useMergedState from 'rc-util/es/hooks/useMergedState';\nimport { cn } from '../lib/utils';\nimport prefixCls from '../_utils/prefixCls';\n\n/** Align config type (locally defined to avoid rc-trigger dependency) */\nexport interface AlignType {\n  points?: string[];\n  offset?: (number | string)[];\n  targetOffset?: (number | string)[];\n  overflow?: { adjustX?: boolean; adjustY?: boolean };\n  _experimental?: Record<string, any>;\n}\nimport SelectTrigger, { RefTriggerProps } from './SelectTrigger';\nimport Selector from './Selector';\nimport _ from 'lodash';\nimport { useContext, useRef, useState } from 'react';\nimport { FormItemInputContext } from '../Form/FormItemContext';\nimport getWidthStyle from './utils/getWidthStyle';\nimport Suffix from './components/Suffix';\nimport { PlacementType } from '../Dropdown';\nimport {\n  BaseSelectRef,\n  DisplayValueType,\n  ISelectProps,\n  LabelInValueType,\n  SelectMenuProps,\n} from './interface';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { ConfigContext } from '../ConfigProvider';\nimport { useCompactItemContext } from '../Space/CompactContext';\nimport { MenuInfo } from '../Menu';\n\nexport type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);\n\nexport type RenderDOMFunc = (props: any) => HTMLElement;\n\nexport type Mode =\n  | 'multiple'\n  | {\n      type: 'multiple';\n      responsive?: boolean;\n      maxRows?: number;\n      showSelectedSection?: boolean;\n    };\n\nexport type RawValueType = string | number;\n\nexport type CustomTagProps = {\n  label: React.ReactNode;\n  value: any;\n  disabled: boolean;\n  onClose: (event?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  closable: boolean;\n};\nexport interface BaseSelectPrivateProps {\n  // >>> MISC\n  omitDomProps?: string[];\n\n  // >>> Value\n  displayValues: LabelInValueType[];\n  onDisplayValuesChange: (\n    values: LabelInValueType[],\n    info: {\n      type: 'add' | 'remove' | 'clear';\n      values: LabelInValueType[];\n    },\n  ) => void;\n\n  // >>> Active\n  /** Current dropdown list active item string value */\n  activeValue?: string;\n  /** Link search input with target element */\n  activeDescendantId?: string;\n  onActiveValueChange?: (value: string | null) => void;\n}\n\nexport type BaseSelectPropsWithoutPrivate = Omit<\n  BaseSelectProps,\n  keyof BaseSelectPrivateProps\n>;\n\nexport interface BaseSelectProps\n  extends BaseSelectPrivateProps,\n    ISelectProps,\n    React.AriaAttributes {\n  className?: string;\n  style?: React.CSSProperties;\n  notFoundContent?: React.ReactNode;\n  onClear?: () => void;\n  innerSearchValue?: string;\n  setInnerSearchValue?: (value: string) => void;\n  displayMenu?: SelectMenuProps;\n  // >>> Open\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  onOptionSelect?: (val: RawValueType) => void;\n\n  // >>> Icons\n  allowClear?: boolean;\n  showArrow?: boolean;\n  suffixIcon?: React.ReactNode;\n\n  // >>> Dropdown\n  dropdownAlign?: AlignType;\n  placement?: PlacementType;\n  getPopupContainer?: () => HTMLElement;\n\n  // >>> Focus\n  onBlur?: React.FocusEventHandler<HTMLElement>;\n  onFocus?: React.FocusEventHandler<HTMLElement>;\n\n  // >>> Rest Events\n  onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;\n  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;\n  onMouseDown?: React.MouseEventHandler<HTMLDivElement>;\n  onPopupScroll?: React.UIEventHandler<HTMLDivElement>;\n  onInputKeyDown?: React.KeyboardEventHandler<\n    HTMLInputElement | HTMLTextAreaElement\n  >;\n  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\n}\n\nexport function isMultiple(mode?: Mode) {\n  return !!mode;\n}\nexport function isResponsive(mode?: Mode) {\n  return mode === 'multiple' || (typeof mode === 'object' && mode?.responsive);\n}\nexport function isShowSelectedSection(mode?: Mode) {\n  if (!mode || mode === 'multiple') {\n    return false;\n  }\n\n  return (\n    typeof mode === 'object' && mode.showSelectedSection && mode.responsive\n  );\n}\nconst BaseSelect = React.forwardRef(\n  (props: BaseSelectProps, ref: React.Ref<BaseSelectRef>) => {\n    const {\n      id,\n      className,\n      // Value\n      displayValues,\n      onDisplayValuesChange,\n      displayMenu,\n      notFoundContent,\n      onClear,\n      width,\n      mode,\n      status: customStatus,\n      onOptionSelect,\n      onClick,\n      size: customSize,\n      borderLess = false,\n      // Status\n      disabled,\n      placeholder,\n\n      // Open\n      open,\n      defaultOpen,\n      onOpenChange,\n      showSearch,\n      innerSearchValue,\n      setInnerSearchValue,\n      // Icons\n      allowClear,\n      showArrow = true,\n      prefix,\n      suffixIcon,\n      dropdownRender,\n      overlayStyle,\n      dropdownStyle,\n      popupMatchSelectWidth = true,\n      placement,\n      popupClassName,\n      style,\n      ...restProps\n      // Rest Props\n    } = props;\n    const setClassNames = prefixCls('select');\n    const selectRef = useRef<HTMLDivElement>(null);\n    const widthStyle = getWidthStyle(width);\n    const dropdownRef = useRef<RefTriggerProps>(null);\n    const isResponsiveMode = isResponsive(mode);\n    const isMultipleMode = isMultiple(mode);\n    /** Used for component focused management */\n    const contentSize = useContext(SizeContext);\n    const { direction } = React.useContext(ConfigContext);\n    // ===================== Compact Item =====================\n    const { compactSize, compactItemClassnames } = useCompactItemContext(\n      'ald-select',\n      direction,\n    );\n    const size = compactSize || customSize || contentSize || 'middle';\n    const {\n      status: contextStatus,\n      // hasFeedback,\n      // isFormItemInput,\n      // feedbackIcon,\n    } = useContext(FormItemInputContext);\n\n    const mergedStatus = customStatus || contextStatus || undefined;\n\n    // =========================== Imperative ===========================\n    React.useImperativeHandle(ref, () => ({\n      focus: () => setFocus(true),\n      blur: () => setFocus(false),\n      open: () => onToggleOpen(true),\n      close: () => {\n        console.log('ref close');\n        onToggleOpen(false);\n      },\n    }));\n    const [focus, setFocus] = useState(false);\n    const [isHover, setIsHover] = useState(false);\n    // ============================== Open ==============================\n    const [innerOpen, setInnerOpen] = useMergedState<boolean>(false, {\n      defaultValue: defaultOpen,\n      value: open,\n    });\n    const mergedOpen = innerOpen;\n    const onToggleOpen = React.useCallback(\n      (newOpen?: boolean) => {\n        const nextOpen = newOpen !== undefined ? newOpen : !mergedOpen;\n        if (!nextOpen) {\n          setShowResponsiveSelectedSection(false);\n          setFocus(false);\n        }\n        if (mergedOpen !== nextOpen && !disabled) {\n          setInnerOpen(nextOpen);\n          onOpenChange?.(nextOpen);\n        }\n      },\n      [mergedOpen, disabled, setInnerOpen, onOpenChange],\n    );\n    const [showResponsiveSelectedSection, setShowResponsiveSelectedSection] =\n      useState(false);\n\n    // ============================ Selector ============================\n    const onSelectorRemove = (val: DisplayValueType) => {\n      const newValues = displayValues.filter((i) => i !== val);\n\n      onDisplayValuesChange(newValues, {\n        type: 'remove',\n        values: [\n          {\n            label: val.label,\n            value: val.value as RawValueType,\n          },\n        ],\n      });\n    };\n\n    const mergedClassName = cn(\n      setClassNames('beta-ald-select', size, {\n        active: mergedOpen || focus,\n        borderless: borderLess,\n        disabled: disabled,\n        [`${mergedStatus}`]: !!mergedStatus,\n        'multiple-responsive': isResponsiveMode,\n        'multiple-default': isMultipleMode && !isResponsiveMode,\n      }),\n      className,\n      compactItemClassnames,\n    );\n    const showMenu = React.useMemo(() => {\n      if (!displayMenu) {\n        return undefined;\n      }\n\n      return {\n        ...displayMenu,\n        onClick: (info: MenuInfo) => {\n          displayMenu?.onClick?.(info);\n          if (displayMenu && !isMultipleMode) {\n            console.log('menu onClick', info);\n            onToggleOpen(false);\n            setFocus(false);\n          }\n          setIsHover(false);\n          onOptionSelect?.(info.key);\n        },\n      };\n    }, [displayMenu, isMultipleMode, onToggleOpen, onOptionSelect]);\n    const onSelectClick = React.useCallback(\n      (e: React.MouseEvent<HTMLDivElement>) => {\n        if (disabled) {\n          return;\n        }\n        onClick?.(e);\n      },\n      [disabled, onClick],\n    );\n    React.useEffect(() => {\n      const element = selectRef.current;\n      if (element) {\n        const handleMouseOver = () => setIsHover(true);\n        const handleMouseOut = () => setIsHover(false);\n\n        element.addEventListener('mouseover', handleMouseOver);\n        element.addEventListener('mouseout', handleMouseOut);\n\n        return () => {\n          element.removeEventListener('mouseover', handleMouseOver);\n          element.removeEventListener('mouseout', handleMouseOut);\n        };\n      }\n    }, []);\n    return (\n      <div\n        className={mergedClassName}\n        style={{\n          ...widthStyle,\n          ...style,\n        }}\n        ref={selectRef}\n        id={id}\n        onClick={onSelectClick}\n      >\n        <SelectTrigger\n          {...restProps}\n          open={!!mergedOpen}\n          notFoundContent={notFoundContent}\n          menu={showMenu}\n          ref={dropdownRef}\n          showSearch={showSearch}\n          searchValue={innerSearchValue}\n          setInnerSearchValue={setInnerSearchValue}\n          popupMatchSelectWidth={popupMatchSelectWidth}\n          overlayClassName={popupClassName}\n          // @ts-ignore\n          dropdownRender={dropdownRender}\n          overlayStyle={overlayStyle || dropdownStyle}\n          placement={placement}\n          onOpenChange={(open) => {\n            if (isResponsiveMode) {\n              if (\n                !mergedOpen &&\n                !showResponsiveSelectedSection &&\n                displayValues.length > 0 &&\n                isShowSelectedSection(mode)\n              ) {\n                setShowResponsiveSelectedSection(true);\n              } else {\n                onToggleOpen(open);\n              }\n            } else {\n              onToggleOpen(open);\n            }\n          }}\n        >\n          <div className={setClassNames('trigger')}>\n            {prefix && <div className={setClassNames('prefix')}>{prefix}</div>}\n            {_.isEmpty(displayValues) && (\n              <div className={setClassNames('placeholder')}>{placeholder}</div>\n            )}\n            {!_.isEmpty(displayValues) && (\n              <Selector\n                {...restProps}\n                suffixIcon={suffixIcon}\n                size={size}\n                disabled={disabled}\n                mode={mode}\n                dropdownRef={dropdownRef}\n                displayValues={displayValues}\n                onToggleOpen={onToggleOpen}\n                onRemove={onSelectorRemove}\n                showResponsiveSelectedSection={showResponsiveSelectedSection}\n              ></Selector>\n            )}\n          </div>\n        </SelectTrigger>\n        <Suffix\n          showArrow={showArrow}\n          allowClear={allowClear}\n          disabled={disabled}\n          isHover={isHover}\n          onClear={() => {\n            onToggleOpen(false);\n\n            onDisplayValuesChange([], {\n              type: 'clear',\n              values: displayValues,\n            });\n            onClear?.();\n          }}\n          isActive={innerOpen}\n          icon={suffixIcon}\n          displayValues={displayValues}\n        ></Suffix>\n      </div>\n    );\n  },\n);\n\nexport default BaseSelect;\n"],"mappings":"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"}
+{"version":3,"file":"BaseSelect.js","names":[],"sources":["../../src/Select/BaseSelect.tsx"],"sourcesContent":["import './ald-select.css';\nimport * as React from 'react';\nimport useMergedState from 'rc-util/es/hooks/useMergedState';\nimport { cn } from '../lib/utils';\nimport prefixCls from '../_utils/prefixCls';\n\n/** Align config type (locally defined to avoid rc-trigger dependency) */\nexport interface AlignType {\n  points?: string[];\n  offset?: (number | string)[];\n  targetOffset?: (number | string)[];\n  overflow?: { adjustX?: boolean; adjustY?: boolean };\n  _experimental?: Record<string, any>;\n}\nimport SelectTrigger, { RefTriggerProps } from './SelectTrigger';\nimport Selector from './Selector';\nimport _ from 'lodash';\nimport { useContext, useRef, useState } from 'react';\nimport { FormItemInputContext } from '../Form/FormItemContext';\nimport getWidthStyle from './utils/getWidthStyle';\nimport Suffix from './components/Suffix';\nimport { PlacementType } from '../Dropdown';\nimport {\n  BaseSelectRef,\n  DisplayValueType,\n  ISelectProps,\n  LabelInValueType,\n  SelectMenuProps,\n} from './interface';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { ConfigContext } from '../ConfigProvider';\nimport { useCompactItemContext } from '../Space/CompactContext';\nimport { MenuInfo } from '../Menu';\n\nexport type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);\n\nexport type RenderDOMFunc = (props: any) => HTMLElement;\n\nexport type Mode =\n  | 'multiple'\n  | {\n      type: 'multiple';\n      responsive?: boolean;\n      maxRows?: number;\n      showSelectedSection?: boolean;\n    };\n\nexport type RawValueType = string | number;\n\nexport type CustomTagProps = {\n  label: React.ReactNode;\n  value: any;\n  disabled: boolean;\n  onClose: (event?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  closable: boolean;\n};\nexport interface BaseSelectPrivateProps {\n  // >>> MISC\n  omitDomProps?: string[];\n\n  // >>> Value\n  displayValues: LabelInValueType[];\n  onDisplayValuesChange: (\n    values: LabelInValueType[],\n    info: {\n      type: 'add' | 'remove' | 'clear';\n      values: LabelInValueType[];\n    },\n  ) => void;\n\n  // >>> Active\n  /** Current dropdown list active item string value */\n  activeValue?: string;\n  /** Link search input with target element */\n  activeDescendantId?: string;\n  onActiveValueChange?: (value: string | null) => void;\n}\n\nexport type BaseSelectPropsWithoutPrivate = Omit<\n  BaseSelectProps,\n  keyof BaseSelectPrivateProps\n>;\n\nexport interface BaseSelectProps\n  extends BaseSelectPrivateProps,\n    ISelectProps,\n    React.AriaAttributes {\n  className?: string;\n  style?: React.CSSProperties;\n  notFoundContent?: React.ReactNode;\n  onClear?: () => void;\n  innerSearchValue?: string;\n  setInnerSearchValue?: (value: string) => void;\n  displayMenu?: SelectMenuProps;\n  // >>> Open\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  onOptionSelect?: (val: RawValueType) => void;\n\n  // >>> Icons\n  allowClear?: boolean;\n  showArrow?: boolean;\n  suffixIcon?: React.ReactNode;\n\n  // >>> Dropdown\n  dropdownAlign?: AlignType;\n  placement?: PlacementType;\n  getPopupContainer?: () => HTMLElement;\n\n  // >>> Focus\n  onBlur?: React.FocusEventHandler<HTMLElement>;\n  onFocus?: React.FocusEventHandler<HTMLElement>;\n\n  // >>> Rest Events\n  onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;\n  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;\n  onMouseDown?: React.MouseEventHandler<HTMLDivElement>;\n  onPopupScroll?: React.UIEventHandler<HTMLDivElement>;\n  onInputKeyDown?: React.KeyboardEventHandler<\n    HTMLInputElement | HTMLTextAreaElement\n  >;\n  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\n}\n\nexport function isMultiple(mode?: Mode) {\n  return !!mode;\n}\nexport function isResponsive(mode?: Mode) {\n  return mode === 'multiple' || (typeof mode === 'object' && mode?.responsive);\n}\nexport function isShowSelectedSection(mode?: Mode) {\n  if (!mode || mode === 'multiple') {\n    return false;\n  }\n\n  return (\n    typeof mode === 'object' && mode.showSelectedSection && mode.responsive\n  );\n}\nconst BaseSelect = React.forwardRef(\n  (props: BaseSelectProps, ref: React.Ref<BaseSelectRef>) => {\n    const {\n      id,\n      className,\n      // Value\n      displayValues,\n      onDisplayValuesChange,\n      displayMenu,\n      notFoundContent,\n      onClear,\n      width,\n      mode,\n      status: customStatus,\n      onOptionSelect,\n      onClick,\n      size: customSize,\n      borderLess = false,\n      // Status\n      disabled,\n      placeholder,\n\n      // Open\n      open,\n      defaultOpen,\n      onOpenChange,\n      showSearch,\n      innerSearchValue,\n      setInnerSearchValue,\n      // Icons\n      allowClear,\n      showArrow = true,\n      prefix,\n      suffixIcon,\n      dropdownRender,\n      overlayStyle,\n      dropdownStyle,\n      popupMatchSelectWidth = true,\n      placement,\n      popupClassName,\n      style,\n      ...restProps\n      // Rest Props\n    } = props;\n    const setClassNames = prefixCls('select');\n    const selectRef = useRef<HTMLDivElement>(null);\n    const widthStyle = getWidthStyle(width);\n    const dropdownRef = useRef<RefTriggerProps>(null);\n    const isResponsiveMode = isResponsive(mode);\n    const isMultipleMode = isMultiple(mode);\n    /** Used for component focused management */\n    const contentSize = useContext(SizeContext);\n    const { direction } = React.useContext(ConfigContext);\n    // ===================== Compact Item =====================\n    const { compactSize, compactItemClassnames } = useCompactItemContext(\n      'ald-select',\n      direction,\n    );\n    const size = compactSize || customSize || contentSize || 'middle';\n    const {\n      status: contextStatus,\n      // hasFeedback,\n      // isFormItemInput,\n      // feedbackIcon,\n    } = useContext(FormItemInputContext);\n\n    const mergedStatus = customStatus || contextStatus || undefined;\n\n    // =========================== Imperative ===========================\n    React.useImperativeHandle(ref, () => ({\n      focus: () => setFocus(true),\n      blur: () => setFocus(false),\n      open: () => onToggleOpen(true),\n      close: () => {\n        console.log('ref close');\n        onToggleOpen(false);\n      },\n    }));\n    const [focus, setFocus] = useState(false);\n    const [isHover, setIsHover] = useState(false);\n    // ============================== Open ==============================\n    const [innerOpen, setInnerOpen] = useMergedState<boolean>(false, {\n      defaultValue: defaultOpen,\n      value: open,\n    });\n    const mergedOpen = innerOpen;\n    const onToggleOpen = React.useCallback(\n      (newOpen?: boolean) => {\n        const nextOpen = newOpen !== undefined ? newOpen : !mergedOpen;\n        if (!nextOpen) {\n          setShowResponsiveSelectedSection(false);\n          setFocus(false);\n        }\n        if (mergedOpen !== nextOpen && !disabled) {\n          setInnerOpen(nextOpen);\n          onOpenChange?.(nextOpen);\n        }\n      },\n      [mergedOpen, disabled, setInnerOpen, onOpenChange],\n    );\n    const [showResponsiveSelectedSection, setShowResponsiveSelectedSection] =\n      useState(false);\n\n    // ============================ Selector ============================\n    const onSelectorRemove = (val: DisplayValueType) => {\n      const newValues = displayValues.filter((i) => i !== val);\n\n      onDisplayValuesChange(newValues, {\n        type: 'remove',\n        values: [\n          {\n            label: val.label,\n            value: val.value as RawValueType,\n          },\n        ],\n      });\n    };\n\n    const mergedClassName = cn(\n      setClassNames('beta-ald-select', size, {\n        active: mergedOpen || focus,\n        borderless: borderLess,\n        disabled: disabled,\n        [`${mergedStatus}`]: !!mergedStatus,\n        'multiple-responsive': isResponsiveMode,\n        'multiple-default': isMultipleMode && !isResponsiveMode,\n      }),\n      className,\n      compactItemClassnames,\n    );\n    const showMenu = React.useMemo(() => {\n      if (!displayMenu) {\n        return undefined;\n      }\n\n      return {\n        ...displayMenu,\n        onClick: (info: MenuInfo) => {\n          displayMenu?.onClick?.(info);\n          if (displayMenu && !isMultipleMode) {\n            console.log('menu onClick', info);\n            onToggleOpen(false);\n            setFocus(false);\n          }\n          setIsHover(false);\n          onOptionSelect?.(info.key);\n        },\n      };\n    }, [displayMenu, isMultipleMode, onToggleOpen, onOptionSelect]);\n    const onSelectClick = React.useCallback(\n      (e: React.MouseEvent<HTMLDivElement>) => {\n        if (disabled) {\n          return;\n        }\n        onClick?.(e);\n      },\n      [disabled, onClick],\n    );\n    React.useEffect(() => {\n      const element = selectRef.current;\n      if (element) {\n        const handleMouseOver = () => setIsHover(true);\n        const handleMouseOut = () => setIsHover(false);\n\n        element.addEventListener('mouseover', handleMouseOver);\n        element.addEventListener('mouseout', handleMouseOut);\n\n        return () => {\n          element.removeEventListener('mouseover', handleMouseOver);\n          element.removeEventListener('mouseout', handleMouseOut);\n        };\n      }\n    }, []);\n    return (\n      <div\n        className={mergedClassName}\n        style={{\n          ...widthStyle,\n          ...style,\n        }}\n        ref={selectRef}\n        id={id}\n        onClick={onSelectClick}\n      >\n        <SelectTrigger\n          {...restProps}\n          open={!!mergedOpen}\n          notFoundContent={notFoundContent}\n          menu={showMenu}\n          ref={dropdownRef}\n          showSearch={showSearch}\n          searchValue={innerSearchValue}\n          setInnerSearchValue={setInnerSearchValue}\n          popupMatchSelectWidth={popupMatchSelectWidth}\n          overlayClassName={popupClassName}\n          // @ts-ignore\n          dropdownRender={dropdownRender}\n          overlayStyle={overlayStyle || dropdownStyle}\n          placement={placement}\n          onOpenChange={(open) => {\n            if (isResponsiveMode) {\n              if (\n                !mergedOpen &&\n                !showResponsiveSelectedSection &&\n                displayValues.length > 0 &&\n                isShowSelectedSection(mode)\n              ) {\n                setShowResponsiveSelectedSection(true);\n              } else {\n                onToggleOpen(open);\n              }\n            } else {\n              onToggleOpen(open);\n            }\n          }}\n        >\n          {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n          <div className={cn(setClassNames('trigger'), 'ant-select-selector')}>\n            {prefix && <div className={setClassNames('prefix')}>{prefix}</div>}\n            {_.isEmpty(displayValues) && (\n              <div\n                className={cn(\n                  setClassNames('placeholder'),\n                  'ant-select-selection-placeholder',\n                )}\n              >\n                {placeholder}\n              </div>\n            )}\n            {!_.isEmpty(displayValues) && (\n              <Selector\n                {...restProps}\n                suffixIcon={suffixIcon}\n                size={size}\n                disabled={disabled}\n                mode={mode}\n                dropdownRef={dropdownRef}\n                displayValues={displayValues}\n                onToggleOpen={onToggleOpen}\n                onRemove={onSelectorRemove}\n                showResponsiveSelectedSection={showResponsiveSelectedSection}\n              ></Selector>\n            )}\n          </div>\n        </SelectTrigger>\n        <Suffix\n          showArrow={showArrow}\n          allowClear={allowClear}\n          disabled={disabled}\n          isHover={isHover}\n          onClear={() => {\n            onToggleOpen(false);\n\n            onDisplayValuesChange([], {\n              type: 'clear',\n              values: displayValues,\n            });\n            onClear?.();\n          }}\n          isActive={innerOpen}\n          icon={suffixIcon}\n          displayValues={displayValues}\n        ></Suffix>\n      </div>\n    );\n  },\n);\n\nexport default BaseSelect;\n"],"mappings":"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"}

package/dist/Select/Selector/index.js

@@ -15,7 +15,7 @@ function Selector(props) {
 		showResponsiveSelectedSection
 	});
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames("beta-ald-select-selector"),
+		className: classNames("beta-ald-select-selector") + " ant-select-selection-item",
 		children: displayValues.map((item, index) => /* @__PURE__ */ jsx("span", { children: item.label }, item.value ?? `item-${index}`))
 	});
 }

package/dist/Select/Selector/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/Select/Selector/index.tsx"],"sourcesContent":["import prefixCls from '../../_utils/prefixCls';\nimport { DisplayValueType, ISelectProps, LabelInValueType } from '../interface';\nimport React, { RefObject } from 'react';\nimport MultipleSelector from './MultipleSelector';\nimport { isMultiple } from '../BaseSelect';\nimport { RefTriggerProps } from '../SelectTrigger';\nexport interface SelectorProps extends ISelectProps {\n  displayValues: LabelInValueType[];\n  onRemove: (value: DisplayValueType) => void;\n  onToggleOpen: (open?: boolean) => void;\n  showResponsiveSelectedSection: boolean;\n  dropdownRef: RefObject<RefTriggerProps>;\n}\nexport default function Selector(props: SelectorProps) {\n  const classNames = prefixCls('select-selector');\n  const {\n    mode,\n    displayValues,\n    onRemove,\n    onToggleOpen,\n    showResponsiveSelectedSection,\n    dropdownRef,\n  } = props;\n  if (isMultiple(mode)) {\n    return (\n      <MultipleSelector\n        {...props}\n        onRemove={onRemove}\n        dropdownRef={dropdownRef}\n        onToggleOpen={onToggleOpen}\n        showResponsiveSelectedSection={showResponsiveSelectedSection}\n      />\n    );\n  }\n  return (\n    <div className={classNames('beta-ald-select-selector')}>\n      {displayValues.map((item, index) => (\n        <span key={item.value ?? `item-${index}`}>{item.label}</span>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAaA,SAAwB,SAAS,OAAsB;CACrD,MAAM,aAAa,UAAU,kBAAkB;CAC/C,MAAM,EACJ,MACA,eACA,UACA,cACA,+BACA,gBACE;AACJ,KAAI,WAAW,KAAK,CAClB,QACE,oBAAC,kBAAD;EACE,GAAI;EACM;EACG;EACC;EACiB;EAC/B,CAAA;AAGN,QACE,oBAAC,OAAD;EAAK,WAAW,WAAW,2BAA2B;YACnD,cAAc,KAAK,MAAM,UACxB,oBAAC,QAAD,EAAA,UAA2C,KAAK,OAAa,EAAlD,KAAK,SAAS,QAAQ,QAA4B,CAC7D;EACE,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/Select/Selector/index.tsx"],"sourcesContent":["import prefixCls from '../../_utils/prefixCls';\nimport { DisplayValueType, ISelectProps, LabelInValueType } from '../interface';\nimport React, { RefObject } from 'react';\nimport MultipleSelector from './MultipleSelector';\nimport { isMultiple } from '../BaseSelect';\nimport { RefTriggerProps } from '../SelectTrigger';\nexport interface SelectorProps extends ISelectProps {\n  displayValues: LabelInValueType[];\n  onRemove: (value: DisplayValueType) => void;\n  onToggleOpen: (open?: boolean) => void;\n  showResponsiveSelectedSection: boolean;\n  dropdownRef: RefObject<RefTriggerProps>;\n}\nexport default function Selector(props: SelectorProps) {\n  const classNames = prefixCls('select-selector');\n  const {\n    mode,\n    displayValues,\n    onRemove,\n    onToggleOpen,\n    showResponsiveSelectedSection,\n    dropdownRef,\n  } = props;\n  if (isMultiple(mode)) {\n    return (\n      <MultipleSelector\n        {...props}\n        onRemove={onRemove}\n        dropdownRef={dropdownRef}\n        onToggleOpen={onToggleOpen}\n        showResponsiveSelectedSection={showResponsiveSelectedSection}\n      />\n    );\n  }\n  {\n    /* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */\n  }\n  return (\n    <div\n      className={\n        classNames('beta-ald-select-selector') + ' ant-select-selection-item'\n      }\n    >\n      {displayValues.map((item, index) => (\n        <span key={item.value ?? `item-${index}`}>{item.label}</span>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAaA,SAAwB,SAAS,OAAsB;CACrD,MAAM,aAAa,UAAU,kBAAkB;CAC/C,MAAM,EACJ,MACA,eACA,UACA,cACA,+BACA,gBACE;AACJ,KAAI,WAAW,KAAK,CAClB,QACE,oBAAC,kBAAD;EACE,GAAI;EACM;EACG;EACC;EACiB;EAC/B,CAAA;AAMN,QACE,oBAAC,OAAD;EACE,WACE,WAAW,2BAA2B,GAAG;YAG1C,cAAc,KAAK,MAAM,UACxB,oBAAC,QAAD,EAAA,UAA2C,KAAK,OAAa,EAAlD,KAAK,SAAS,QAAQ,QAA4B,CAC7D;EACE,CAAA"}

package/dist/Select/components/Suffix.js

@@ -24,7 +24,7 @@ function Suffix({ showArrow, allowClear, isActive, isHover, icon, onClear, displ
 			size: 16
 		});
 		return /* @__PURE__ */ jsx("div", {
-			className: classNames("suffix", "arrow"),
+			className: classNames("suffix", "arrow") + " ant-select-arrow",
 			children: dropdownIcon
 		});
 	}

package/dist/Select/components/Suffix.js.map

@@ -1 +1 @@
-{"version":3,"file":"Suffix.js","names":[],"sources":["../../../src/Select/components/Suffix.tsx"],"sourcesContent":["import React from 'react';\nimport prefixCls from '../../_utils/prefixCls';\nimport { ArrowDownRightFill, CloseCircleRightFill } from '../../Icon';\nimport { DisplayValueType } from '../interface';\n\nexport default function Suffix({\n  showArrow,\n  allowClear,\n  isActive,\n  isHover,\n  icon,\n  onClear,\n  displayValues,\n  disabled,\n}: {\n  showArrow?: boolean;\n  allowClear?: boolean;\n  isActive?: boolean;\n  isHover?: boolean;\n  disabled?: boolean;\n  icon: React.ReactNode;\n  onClear?: () => void;\n  displayValues: DisplayValueType[];\n}) {\n  const classNames = prefixCls('select');\n\n  if (\n    (isActive || isHover) &&\n    !disabled &&\n    allowClear &&\n    displayValues.length > 0\n  ) {\n    return (\n      <div\n        className={classNames('suffix', 'clear')}\n        onClick={(event) => {\n          event.stopPropagation();\n          event.preventDefault();\n          onClear?.();\n        }}\n      >\n        <CloseCircleRightFill size={16} color=\"#6B7280\" />\n      </div>\n    );\n  }\n  if (showArrow) {\n    const dropdownIcon = icon || (\n      <ArrowDownRightFill color=\"#6B7280\" size={16} />\n    );\n\n    return <div className={classNames('suffix', 'arrow')}>{dropdownIcon}</div>;\n  }\n\n  return null;\n}\n"],"mappings":";;;;;;AAKA,SAAwB,OAAO,EAC7B,WACA,YACA,UACA,SACA,MACA,SACA,eACA,YAUC;CACD,MAAM,aAAa,UAAU,SAAS;AAEtC,MACG,YAAY,YACb,CAAC,YACD,cACA,cAAc,SAAS,EAEvB,QACE,oBAAC,OAAD;EACE,WAAW,WAAW,UAAU,QAAQ;EACxC,UAAU,UAAU;AAClB,SAAM,iBAAiB;AACvB,SAAM,gBAAgB;AACtB,cAAW;;YAGb,oBAAC,QAAD;GAAsB,MAAM;GAAI,OAAM;GAAY,CAAA;EAC9C,CAAA;AAGV,KAAI,WAAW;EACb,MAAM,eAAe,QACnB,oBAAC,MAAD;GAAoB,OAAM;GAAU,MAAM;GAAM,CAAA;AAGlD,SAAO,oBAAC,OAAD;GAAK,WAAW,WAAW,UAAU,QAAQ;aAAG;GAAmB,CAAA;;AAG5E,QAAO"}
+{"version":3,"file":"Suffix.js","names":[],"sources":["../../../src/Select/components/Suffix.tsx"],"sourcesContent":["import React from 'react';\nimport prefixCls from '../../_utils/prefixCls';\nimport { ArrowDownRightFill, CloseCircleRightFill } from '../../Icon';\nimport { DisplayValueType } from '../interface';\n\nexport default function Suffix({\n  showArrow,\n  allowClear,\n  isActive,\n  isHover,\n  icon,\n  onClear,\n  displayValues,\n  disabled,\n}: {\n  showArrow?: boolean;\n  allowClear?: boolean;\n  isActive?: boolean;\n  isHover?: boolean;\n  disabled?: boolean;\n  icon: React.ReactNode;\n  onClear?: () => void;\n  displayValues: DisplayValueType[];\n}) {\n  const classNames = prefixCls('select');\n\n  if (\n    (isActive || isHover) &&\n    !disabled &&\n    allowClear &&\n    displayValues.length > 0\n  ) {\n    return (\n      <div\n        className={classNames('suffix', 'clear')}\n        onClick={(event) => {\n          event.stopPropagation();\n          event.preventDefault();\n          onClear?.();\n        }}\n      >\n        <CloseCircleRightFill size={16} color=\"#6B7280\" />\n      </div>\n    );\n  }\n  if (showArrow) {\n    const dropdownIcon = icon || (\n      <ArrowDownRightFill color=\"#6B7280\" size={16} />\n    );\n\n    // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n    return (\n      <div className={classNames('suffix', 'arrow') + ' ant-select-arrow'}>\n        {dropdownIcon}\n      </div>\n    );\n  }\n\n  return null;\n}\n"],"mappings":";;;;;;AAKA,SAAwB,OAAO,EAC7B,WACA,YACA,UACA,SACA,MACA,SACA,eACA,YAUC;CACD,MAAM,aAAa,UAAU,SAAS;AAEtC,MACG,YAAY,YACb,CAAC,YACD,cACA,cAAc,SAAS,EAEvB,QACE,oBAAC,OAAD;EACE,WAAW,WAAW,UAAU,QAAQ;EACxC,UAAU,UAAU;AAClB,SAAM,iBAAiB;AACvB,SAAM,gBAAgB;AACtB,cAAW;;YAGb,oBAAC,QAAD;GAAsB,MAAM;GAAI,OAAM;GAAY,CAAA;EAC9C,CAAA;AAGV,KAAI,WAAW;EACb,MAAM,eAAe,QACnB,oBAAC,MAAD;GAAoB,OAAM;GAAU,MAAM;GAAM,CAAA;AAIlD,SACE,oBAAC,OAAD;GAAK,WAAW,WAAW,UAAU,QAAQ,GAAG;aAC7C;GACG,CAAA;;AAIV,QAAO"}

package/dist/Steps/index.js

@@ -40,12 +40,12 @@ function Steps({ className, current = 0, direction = "horizontal", status, items
 						})
 					]
 				}), /* @__PURE__ */ jsxs("div", {
-					className: "ald-steps-item-content tw-mt-2 tw-flex tw-flex-col tw-items-center",
+					className: "ald-steps-item-content ant-steps-item-content tw-mt-2 tw-flex tw-flex-col tw-items-center",
 					children: [/* @__PURE__ */ jsx("div", {
-						className: cn("ald-steps-item-title tw-text-sm tw-font-medium tw-leading-5", stepStatus === "finish" && "tw-text-[var(--alias-colors-text-subtlest)]", stepStatus === "process" && "tw-text-[var(--alias-colors-text-selected)]", stepStatus === "wait" && "tw-text-[var(--alias-colors-text-default)]", stepStatus === "error" && "tw-text-[var(--alias-colors-text-danger)]"),
+						className: cn("ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5", stepStatus === "finish" && "tw-text-[var(--alias-colors-text-subtlest)]", stepStatus === "process" && "tw-text-[var(--alias-colors-text-selected)]", stepStatus === "wait" && "tw-text-[var(--alias-colors-text-default)]", stepStatus === "error" && "tw-text-[var(--alias-colors-text-danger)]"),
 						children: item.title
 					}), item.description && /* @__PURE__ */ jsx("div", {
-						className: cn("ald-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4", stepStatus === "finish" || stepStatus === "error" ? "tw-text-[var(--alias-colors-text-subtlest)]" : "tw-text-[var(--alias-colors-text-subtle)]"),
+						className: cn("ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4", stepStatus === "finish" || stepStatus === "error" ? "tw-text-[var(--alias-colors-text-subtlest)]" : "tw-text-[var(--alias-colors-text-subtle)]"),
 						children: item.description
 					})]
 				})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
@@ -61,12 +61,12 @@ function Steps({ className, current = 0, direction = "horizontal", status, items
 						}
 					})]
 				}), /* @__PURE__ */ jsxs("div", {
-					className: "ald-steps-item-content",
+					className: "ald-steps-item-content ant-steps-item-content",
 					children: [/* @__PURE__ */ jsx("div", {
-						className: cn("ald-steps-item-title tw-text-sm tw-font-medium tw-leading-5", stepStatus === "finish" && "tw-text-[var(--alias-colors-text-subtlest)]", stepStatus === "process" && "tw-text-[var(--alias-colors-text-selected)]", stepStatus === "wait" && "tw-text-[var(--alias-colors-text-default)]", stepStatus === "error" && "tw-text-[var(--alias-colors-text-danger)]"),
+						className: cn("ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5", stepStatus === "finish" && "tw-text-[var(--alias-colors-text-subtlest)]", stepStatus === "process" && "tw-text-[var(--alias-colors-text-selected)]", stepStatus === "wait" && "tw-text-[var(--alias-colors-text-default)]", stepStatus === "error" && "tw-text-[var(--alias-colors-text-danger)]"),
 						children: item.title
 					}), item.description && /* @__PURE__ */ jsx("div", {
-						className: cn("ald-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4 tw-text-[var(--content-secondary)]"),
+						className: cn("ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4 tw-text-[var(--content-secondary)]"),
 						children: item.description
 					})]
 				})] })

package/dist/Steps/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Steps/index.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from 'react';\nimport { cn } from '../lib/utils';\nimport { ProcessIcon } from './components/ProcessIcon';\nimport { IStepProps, Step } from './components/Step';\n\nexport type { IStepProps };\nexport type TStatus = 'wait' | 'process' | 'finish' | 'error';\n\nexport interface IStepItem {\n  description?: ReactNode;\n  disabled?: boolean;\n  icon?: ReactNode;\n  status?: TStatus;\n  subTitle?: ReactNode;\n  title: ReactNode;\n}\n\nexport interface IStepsProps {\n  className?: string;\n  current?: number;\n  direction?: 'horizontal' | 'vertical';\n  defaultCurrent?: number;\n  status?: TStatus;\n  items?: IStepItem[];\n  children?: ReactElement<IStepProps>[] | ReactElement<IStepProps>;\n}\n\nfunction getStepStatus(\n  index: number,\n  current: number,\n  globalStatus?: TStatus,\n): TStatus {\n  if (index < current) return 'finish';\n  if (index === current) return globalStatus || 'process';\n  return 'wait';\n}\n\nfunction Steps({\n  className,\n  current = 0,\n  direction = 'horizontal',\n  status,\n  items,\n  children,\n}: IStepsProps) {\n  // Support children-based API: convert children to items\n  const resolvedItems: IStepItem[] =\n    items ||\n    React.Children.toArray(children)\n      .filter(React.isValidElement)\n      .map((child: any) => ({\n        title: child.props.title,\n        description: child.props.description,\n        status: child.props.status,\n        icon: child.props.icon,\n      }));\n\n  return (\n    <div\n      className={cn(\n        'ald-steps tw-flex',\n        direction === 'vertical' ? 'tw-flex-col' : 'tw-flex-row tw-items-start',\n        className,\n      )}\n    >\n      {resolvedItems.map((item, index) => {\n        const stepStatus = item.status || getStepStatus(index, current, status);\n        const isLast = index === resolvedItems.length - 1;\n\n        return (\n          <div\n            key={index}\n            className={cn(\n              'ald-steps-item tw-flex',\n              direction === 'horizontal'\n                ? 'tw-flex-1 tw-flex-col tw-items-center tw-text-center'\n                : 'tw-flex-row tw-gap-3 tw-py-2',\n              `ald-steps-item-${stepStatus}`,\n            )}\n          >\n            {direction === 'horizontal' ? (\n              <>\n                <div className=\"tw-flex tw-w-full tw-items-center\">\n                  {index > 0 && (\n                    <div\n                      className={cn(\n                        'tw-flex-1',\n                        index <= current\n                          ? 'tw-bg-[var(--alias-colors-border-selected)]'\n                          : 'tw-bg-[var(--alias-colors-border-default)]',\n                      )}\n                      style={{ height: 1.5 }}\n                    />\n                  )}\n                  <div className=\"ald-steps-item-icon tw-shrink-0\">\n                    {item.icon || <ProcessIcon type={stepStatus} />}\n                  </div>\n                  {!isLast && (\n                    <div\n                      className={cn(\n                        'tw-flex-1',\n                        index < current\n                          ? 'tw-bg-[var(--alias-colors-border-selected)]'\n                          : 'tw-bg-[var(--alias-colors-border-default)]',\n                      )}\n                      style={{ height: 1.5 }}\n                    />\n                  )}\n                </div>\n                <div className=\"ald-steps-item-content tw-mt-2 tw-flex tw-flex-col tw-items-center\">\n                  <div\n                    className={cn(\n                      'ald-steps-item-title tw-text-sm tw-font-medium tw-leading-5',\n                      stepStatus === 'finish' &&\n                        'tw-text-[var(--alias-colors-text-subtlest)]',\n                      stepStatus === 'process' &&\n                        'tw-text-[var(--alias-colors-text-selected)]',\n                      stepStatus === 'wait' &&\n                        'tw-text-[var(--alias-colors-text-default)]',\n                      stepStatus === 'error' &&\n                        'tw-text-[var(--alias-colors-text-danger)]',\n                    )}\n                  >\n                    {item.title}\n                  </div>\n                  {item.description && (\n                    <div\n                      className={cn(\n                        'ald-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4',\n                        stepStatus === 'finish' || stepStatus === 'error'\n                          ? 'tw-text-[var(--alias-colors-text-subtlest)]'\n                          : 'tw-text-[var(--alias-colors-text-subtle)]',\n                      )}\n                    >\n                      {item.description}\n                    </div>\n                  )}\n                </div>\n              </>\n            ) : (\n              <>\n                <div className=\"tw-relative tw-flex tw-flex-col tw-items-center\">\n                  <div className=\"ald-steps-item-icon tw-shrink-0\">\n                    {item.icon || <ProcessIcon type={stepStatus} />}\n                  </div>\n                  {!isLast && (\n                    <div\n                      className={cn(\n                        'tw-mt-1 tw-flex-1',\n                        index < current\n                          ? 'tw-bg-[var(--alias-colors-border-selected)]'\n                          : 'tw-bg-[var(--alias-colors-border-default)]',\n                      )}\n                      style={{ width: 1.5, minHeight: 24 }}\n                    />\n                  )}\n                </div>\n                <div className=\"ald-steps-item-content\">\n                  <div\n                    className={cn(\n                      'ald-steps-item-title tw-text-sm tw-font-medium tw-leading-5',\n                      stepStatus === 'finish' &&\n                        'tw-text-[var(--alias-colors-text-subtlest)]',\n                      stepStatus === 'process' &&\n                        'tw-text-[var(--alias-colors-text-selected)]',\n                      stepStatus === 'wait' &&\n                        'tw-text-[var(--alias-colors-text-default)]',\n                      stepStatus === 'error' &&\n                        'tw-text-[var(--alias-colors-text-danger)]',\n                    )}\n                  >\n                    {item.title}\n                  </div>\n                  {item.description && (\n                    <div\n                      className={cn(\n                        'ald-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4 tw-text-[var(--content-secondary)]',\n                      )}\n                    >\n                      {item.description}\n                    </div>\n                  )}\n                </div>\n              </>\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nSteps.Step = Step;\n\nexport default Steps;\n"],"mappings":";;;;;;AA2BA,SAAS,cACP,OACA,SACA,cACS;AACT,KAAI,QAAQ,QAAS,QAAO;AAC5B,KAAI,UAAU,QAAS,QAAO,gBAAgB;AAC9C,QAAO;;AAGT,SAAS,MAAM,EACb,WACA,UAAU,GACV,YAAY,cACZ,QACA,OACA,YACc;CAEd,MAAM,gBACJ,SACA,MAAM,SAAS,QAAQ,SAAS,CAC7B,OAAO,MAAM,eAAe,CAC5B,KAAK,WAAgB;EACpB,OAAO,MAAM,MAAM;EACnB,aAAa,MAAM,MAAM;EACzB,QAAQ,MAAM,MAAM;EACpB,MAAM,MAAM,MAAM;EACnB,EAAE;AAEP,QACE,oBAAC,OAAD;EACE,WAAW,GACT,qBACA,cAAc,aAAa,gBAAgB,8BAC3C,UACD;YAEA,cAAc,KAAK,MAAM,UAAU;GAClC,MAAM,aAAa,KAAK,UAAU,cAAc,OAAO,SAAS,OAAO;GACvE,MAAM,SAAS,UAAU,cAAc,SAAS;AAEhD,UACE,oBAAC,OAAD;IAEE,WAAW,GACT,0BACA,cAAc,eACV,yDACA,gCACJ,kBAAkB,aACnB;cAEA,cAAc,eACb,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;eAAf;MACG,QAAQ,KACP,oBAAC,OAAD;OACE,WAAW,GACT,aACA,SAAS,UACL,gDACA,6CACL;OACD,OAAO,EAAE,QAAQ,KAAK;OACtB,CAAA;MAEJ,oBAAC,OAAD;OAAK,WAAU;iBACZ,KAAK,QAAQ,oBAAC,aAAD,EAAa,MAAM,YAAc,CAAA;OAC3C,CAAA;MACL,CAAC,UACA,oBAAC,OAAD;OACE,WAAW,GACT,aACA,QAAQ,UACJ,gDACA,6CACL;OACD,OAAO,EAAE,QAAQ,KAAK;OACtB,CAAA;MAEA;QACN,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MACE,WAAW,GACT,+DACA,eAAe,YACb,+CACF,eAAe,aACb,+CACF,eAAe,UACb,8CACF,eAAe,WACb,4CACH;gBAEA,KAAK;MACF,CAAA,EACL,KAAK,eACJ,oBAAC,OAAD;MACE,WAAW,GACT,4FACA,eAAe,YAAY,eAAe,UACtC,gDACA,4CACL;gBAEA,KAAK;MACF,CAAA,CAEJ;OACL,EAAA,CAAA,GAEH,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MAAK,WAAU;gBACZ,KAAK,QAAQ,oBAAC,aAAD,EAAa,MAAM,YAAc,CAAA;MAC3C,CAAA,EACL,CAAC,UACA,oBAAC,OAAD;MACE,WAAW,GACT,qBACA,QAAQ,UACJ,gDACA,6CACL;MACD,OAAO;OAAE,OAAO;OAAK,WAAW;OAAI;MACpC,CAAA,CAEA;QACN,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MACE,WAAW,GACT,+DACA,eAAe,YACb,+CACF,eAAe,aACb,+CACF,eAAe,UACb,8CACF,eAAe,WACb,4CACH;gBAEA,KAAK;MACF,CAAA,EACL,KAAK,eACJ,oBAAC,OAAD;MACE,WAAW,GACT,8HACD;gBAEA,KAAK;MACF,CAAA,CAEJ;OACL,EAAA,CAAA;IAED,EAlHC,MAkHD;IAER;EACE,CAAA;;AAIV,MAAM,OAAO"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Steps/index.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from 'react';\nimport { cn } from '../lib/utils';\nimport { ProcessIcon } from './components/ProcessIcon';\nimport { IStepProps, Step } from './components/Step';\n\nexport type { IStepProps };\nexport type TStatus = 'wait' | 'process' | 'finish' | 'error';\n\nexport interface IStepItem {\n  description?: ReactNode;\n  disabled?: boolean;\n  icon?: ReactNode;\n  status?: TStatus;\n  subTitle?: ReactNode;\n  title: ReactNode;\n}\n\nexport interface IStepsProps {\n  className?: string;\n  current?: number;\n  direction?: 'horizontal' | 'vertical';\n  defaultCurrent?: number;\n  status?: TStatus;\n  items?: IStepItem[];\n  children?: ReactElement<IStepProps>[] | ReactElement<IStepProps>;\n}\n\nfunction getStepStatus(\n  index: number,\n  current: number,\n  globalStatus?: TStatus,\n): TStatus {\n  if (index < current) return 'finish';\n  if (index === current) return globalStatus || 'process';\n  return 'wait';\n}\n\nfunction Steps({\n  className,\n  current = 0,\n  direction = 'horizontal',\n  status,\n  items,\n  children,\n}: IStepsProps) {\n  // Support children-based API: convert children to items\n  const resolvedItems: IStepItem[] =\n    items ||\n    React.Children.toArray(children)\n      .filter(React.isValidElement)\n      .map((child: any) => ({\n        title: child.props.title,\n        description: child.props.description,\n        status: child.props.status,\n        icon: child.props.icon,\n      }));\n\n  return (\n    <div\n      className={cn(\n        'ald-steps tw-flex',\n        direction === 'vertical' ? 'tw-flex-col' : 'tw-flex-row tw-items-start',\n        className,\n      )}\n    >\n      {resolvedItems.map((item, index) => {\n        const stepStatus = item.status || getStepStatus(index, current, status);\n        const isLast = index === resolvedItems.length - 1;\n\n        return (\n          <div\n            key={index}\n            className={cn(\n              'ald-steps-item tw-flex',\n              direction === 'horizontal'\n                ? 'tw-flex-1 tw-flex-col tw-items-center tw-text-center'\n                : 'tw-flex-row tw-gap-3 tw-py-2',\n              `ald-steps-item-${stepStatus}`,\n            )}\n          >\n            {direction === 'horizontal' ? (\n              <>\n                <div className=\"tw-flex tw-w-full tw-items-center\">\n                  {index > 0 && (\n                    <div\n                      className={cn(\n                        'tw-flex-1',\n                        index <= current\n                          ? 'tw-bg-[var(--alias-colors-border-selected)]'\n                          : 'tw-bg-[var(--alias-colors-border-default)]',\n                      )}\n                      style={{ height: 1.5 }}\n                    />\n                  )}\n                  <div className=\"ald-steps-item-icon tw-shrink-0\">\n                    {item.icon || <ProcessIcon type={stepStatus} />}\n                  </div>\n                  {!isLast && (\n                    <div\n                      className={cn(\n                        'tw-flex-1',\n                        index < current\n                          ? 'tw-bg-[var(--alias-colors-border-selected)]'\n                          : 'tw-bg-[var(--alias-colors-border-default)]',\n                      )}\n                      style={{ height: 1.5 }}\n                    />\n                  )}\n                </div>\n                {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n                <div className=\"ald-steps-item-content ant-steps-item-content tw-mt-2 tw-flex tw-flex-col tw-items-center\">\n                  <div\n                    className={cn(\n                      // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                      'ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5',\n                      stepStatus === 'finish' &&\n                        'tw-text-[var(--alias-colors-text-subtlest)]',\n                      stepStatus === 'process' &&\n                        'tw-text-[var(--alias-colors-text-selected)]',\n                      stepStatus === 'wait' &&\n                        'tw-text-[var(--alias-colors-text-default)]',\n                      stepStatus === 'error' &&\n                        'tw-text-[var(--alias-colors-text-danger)]',\n                    )}\n                  >\n                    {item.title}\n                  </div>\n                  {item.description && (\n                    <div\n                      className={cn(\n                        // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                        'ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4',\n                        stepStatus === 'finish' || stepStatus === 'error'\n                          ? 'tw-text-[var(--alias-colors-text-subtlest)]'\n                          : 'tw-text-[var(--alias-colors-text-subtle)]',\n                      )}\n                    >\n                      {item.description}\n                    </div>\n                  )}\n                </div>\n              </>\n            ) : (\n              <>\n                <div className=\"tw-relative tw-flex tw-flex-col tw-items-center\">\n                  <div className=\"ald-steps-item-icon tw-shrink-0\">\n                    {item.icon || <ProcessIcon type={stepStatus} />}\n                  </div>\n                  {!isLast && (\n                    <div\n                      className={cn(\n                        'tw-mt-1 tw-flex-1',\n                        index < current\n                          ? 'tw-bg-[var(--alias-colors-border-selected)]'\n                          : 'tw-bg-[var(--alias-colors-border-default)]',\n                      )}\n                      style={{ width: 1.5, minHeight: 24 }}\n                    />\n                  )}\n                </div>\n                {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n                <div className=\"ald-steps-item-content ant-steps-item-content\">\n                  <div\n                    className={cn(\n                      // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                      'ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5',\n                      stepStatus === 'finish' &&\n                        'tw-text-[var(--alias-colors-text-subtlest)]',\n                      stepStatus === 'process' &&\n                        'tw-text-[var(--alias-colors-text-selected)]',\n                      stepStatus === 'wait' &&\n                        'tw-text-[var(--alias-colors-text-default)]',\n                      stepStatus === 'error' &&\n                        'tw-text-[var(--alias-colors-text-danger)]',\n                    )}\n                  >\n                    {item.title}\n                  </div>\n                  {item.description && (\n                    <div\n                      className={cn(\n                        // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                        'ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4 tw-text-[var(--content-secondary)]',\n                      )}\n                    >\n                      {item.description}\n                    </div>\n                  )}\n                </div>\n              </>\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nSteps.Step = Step;\n\nexport default Steps;\n"],"mappings":";;;;;;AA2BA,SAAS,cACP,OACA,SACA,cACS;AACT,KAAI,QAAQ,QAAS,QAAO;AAC5B,KAAI,UAAU,QAAS,QAAO,gBAAgB;AAC9C,QAAO;;AAGT,SAAS,MAAM,EACb,WACA,UAAU,GACV,YAAY,cACZ,QACA,OACA,YACc;CAEd,MAAM,gBACJ,SACA,MAAM,SAAS,QAAQ,SAAS,CAC7B,OAAO,MAAM,eAAe,CAC5B,KAAK,WAAgB;EACpB,OAAO,MAAM,MAAM;EACnB,aAAa,MAAM,MAAM;EACzB,QAAQ,MAAM,MAAM;EACpB,MAAM,MAAM,MAAM;EACnB,EAAE;AAEP,QACE,oBAAC,OAAD;EACE,WAAW,GACT,qBACA,cAAc,aAAa,gBAAgB,8BAC3C,UACD;YAEA,cAAc,KAAK,MAAM,UAAU;GAClC,MAAM,aAAa,KAAK,UAAU,cAAc,OAAO,SAAS,OAAO;GACvE,MAAM,SAAS,UAAU,cAAc,SAAS;AAEhD,UACE,oBAAC,OAAD;IAEE,WAAW,GACT,0BACA,cAAc,eACV,yDACA,gCACJ,kBAAkB,aACnB;cAEA,cAAc,eACb,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;eAAf;MACG,QAAQ,KACP,oBAAC,OAAD;OACE,WAAW,GACT,aACA,SAAS,UACL,gDACA,6CACL;OACD,OAAO,EAAE,QAAQ,KAAK;OACtB,CAAA;MAEJ,oBAAC,OAAD;OAAK,WAAU;iBACZ,KAAK,QAAQ,oBAAC,aAAD,EAAa,MAAM,YAAc,CAAA;OAC3C,CAAA;MACL,CAAC,UACA,oBAAC,OAAD;OACE,WAAW,GACT,aACA,QAAQ,UACJ,gDACA,6CACL;OACD,OAAO,EAAE,QAAQ,KAAK;OACtB,CAAA;MAEA;QAEN,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MACE,WAAW,GAET,oFACA,eAAe,YACb,+CACF,eAAe,aACb,+CACF,eAAe,UACb,8CACF,eAAe,WACb,4CACH;gBAEA,KAAK;MACF,CAAA,EACL,KAAK,eACJ,oBAAC,OAAD;MACE,WAAW,GAET,uHACA,eAAe,YAAY,eAAe,UACtC,gDACA,4CACL;gBAEA,KAAK;MACF,CAAA,CAEJ;OACL,EAAA,CAAA,GAEH,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MAAK,WAAU;gBACZ,KAAK,QAAQ,oBAAC,aAAD,EAAa,MAAM,YAAc,CAAA;MAC3C,CAAA,EACL,CAAC,UACA,oBAAC,OAAD;MACE,WAAW,GACT,qBACA,QAAQ,UACJ,gDACA,6CACL;MACD,OAAO;OAAE,OAAO;OAAK,WAAW;OAAI;MACpC,CAAA,CAEA;QAEN,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MACE,WAAW,GAET,oFACA,eAAe,YACb,+CACF,eAAe,aACb,+CACF,eAAe,UACb,8CACF,eAAe,WACb,4CACH;gBAEA,KAAK;MACF,CAAA,EACL,KAAK,eACJ,oBAAC,OAAD;MACE,WAAW,GAET,yJACD;gBAEA,KAAK;MACF,CAAA,CAEJ;OACL,EAAA,CAAA;IAED,EAxHC,MAwHD;IAER;EACE,CAAA;;AAIV,MAAM,OAAO"}

package/dist/Table/hooks/useRowDnd.js

@@ -100,15 +100,9 @@ function useRowDnd(props) {
 	const handleDragging = (dragIndex, hoverIndex) => {
 		setDraggingTempData((currentData) => {
 			const newData = [...currentData];
-			if (dragIndex < 0 || dragIndex >= newData.length) {
-				console.warn(`Drag index ${dragIndex} out of bounds for data length ${newData.length}`);
-				return currentData;
-			}
+			if (dragIndex < 0 || dragIndex >= newData.length) return currentData;
 			const draggedRow = newData.splice(dragIndex, 1)[0];
-			if (draggedRow === void 0) {
-				console.warn(`Dragged item at index ${dragIndex} was undefined during splice.`);
-				return currentData;
-			}
+			if (draggedRow === void 0) return currentData;
 			newData.splice(hoverIndex, 0, draggedRow);
 			return newData;
 		});

package/dist/Table/hooks/useRowDnd.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRowDnd.js","names":[],"sources":["../../../src/Table/hooks/useRowDnd.tsx"],"sourcesContent":["import DragLightLineSvg from '../../Icon/components/DragLightLine';\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { useDrag, useDrop, DragSourceMonitor } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { getRowKey, hasFixedLeftColumn, prefixCls } from '../helper';\nimport { ITableColumn, ITableProps } from '../types';\nimport _ from 'lodash';\n\n// 定义拖拽项类型\nconst ROW_DND_TYPE = 'ALD_TABLE_ROW_DND_TYPE';\n\ninterface DragItem {\n  index: number;\n  id: string;\n}\n\n// 拖拽手柄组件\nconst DragHandle = ({\n  index,\n  id,\n  onDragging,\n  rowRef,\n  onDragStart,\n  onDragComplete,\n}: {\n  index: number;\n  id: string;\n  onDragging: (dragIndex: number, hoverIndex: number) => void;\n  rowRef?: React.RefObject<HTMLDivElement>;\n  onDragStart: (id: string) => void;\n  onDragComplete: () => void;\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n\n  // 使用 ref 来跟踪是否已经通知拖动开始\n  const dragStartedRef = useRef(false);\n\n  const [{ isDragging }, drag, preview] = useDrag({\n    type: ROW_DND_TYPE,\n    item: () => {\n      // 只在拖拽真正开始且尚未通知时触发一次\n      if (!dragStartedRef.current) {\n        // 通知开始拖动，传递行的ID\n        onDragStart(id);\n        dragStartedRef.current = true;\n      }\n\n      return { index, id };\n    },\n    collect: (monitor: DragSourceMonitor) => ({\n      isDragging: monitor.isDragging(),\n    }),\n    end: () => {\n      // 拖拽结束时清除拖动状态和重置标志\n      onDragComplete();\n      dragStartedRef.current = false;\n    },\n  });\n\n  const [, drop] = useDrop({\n    accept: ROW_DND_TYPE,\n    // @ts-ignore - react-dnd类型定义有时与实际用法不一致\n    hover(item: DragItem, monitor) {\n      // 如果有行引用并且行引用有值，使用行引用来判断位置\n      const dropRef = rowRef?.current;\n\n      if (!dropRef) {\n        return;\n      }\n\n      const dragIndex = item.index;\n      const hoverIndex = index;\n\n      // 如果拖动的是自己，不做任何事\n      if (dragIndex === hoverIndex) {\n        return;\n      }\n\n      // 确定鼠标位置\n      const hoverBoundingRect = dropRef.getBoundingClientRect();\n      const hoverMiddleY =\n        (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;\n      const clientOffset = monitor.getClientOffset();\n\n      if (!clientOffset) {\n        return;\n      }\n\n      const hoverClientY = clientOffset.y - hoverBoundingRect.top;\n\n      // 向下拖动，但鼠标还没过半\n      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {\n        return;\n      }\n\n      // 向上拖动，但鼠标还没过半\n      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {\n        return;\n      }\n\n      // 执行排序\n      onDragging(dragIndex, hoverIndex);\n\n      // 更新拖拽项的索引，react-dnd 官方示例推荐这样做以提高性能并避免奇怪行为\n      item.index = hoverIndex;\n    },\n  });\n\n  // 将 drag 连接到手柄 ref 上\n  drag(ref);\n\n  // 设置放置目标\n  if (rowRef?.current) {\n    drop(rowRef.current);\n  }\n\n  preview(getEmptyImage());\n\n  return (\n    <div\n      ref={ref}\n      className={prefixCls('row-dnd-item')}\n      style={{ cursor: 'move', opacity: isDragging ? 0.5 : 1 }}\n    >\n      <DragLightLineSvg />\n    </div>\n  );\n};\n\nexport default function useRowDnd<TDataItem extends object>(\n  props: ITableProps<TDataItem>,\n): IRowDndInfo<TDataItem> {\n  const { columns, rowDnd, data, rowKey } = props;\n  // 跟踪当前正在拖动的行的ID\n  const [draggingRowId, setDraggingRowId] = useState<string | null>(null);\n\n  // 为每一行创建一个 ref，使用 useMemo 缓存 Map 实例\n  const rowRefs = useMemo(\n    () => new Map<string, React.RefObject<HTMLDivElement>>(),\n    [],\n  );\n\n  // 当拖拽过程中，临时存储数据\n  const [draggingTempData, setDraggingTempData] = useState<TDataItem[]>([]);\n\n  const tableData = useMemo(() => {\n    // 拖拽过程中，使用临时数据，这样外部调用方可以不用关心拖拽过程中的数据变化\n    if (draggingRowId) {\n      return draggingTempData;\n    }\n    return data;\n  }, [data, draggingRowId, draggingTempData]);\n\n  // 获取行的 ref，用于设置拖拽预览\n  const getRowRef = useCallback(\n    (record: TDataItem) => {\n      const key = getRowKey(record, rowKey);\n      if (!rowRefs.has(key)) {\n        rowRefs.set(\n          key,\n          React.createRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>,\n        );\n      }\n      return rowRefs.get(key) as React.MutableRefObject<HTMLDivElement>;\n    },\n    [rowKey, rowRefs],\n  );\n\n  const defaultInfo = useMemo(() => {\n    return {\n      columns,\n      getRowRef: () => undefined,\n      draggingRowId: null,\n      tableData: data,\n    };\n  }, [columns, data]);\n\n  if (!rowDnd) {\n    return defaultInfo;\n  }\n  if (props.expandable) {\n    console.error('rowDnd and expandable mode cannot be used together');\n    return defaultInfo;\n  }\n  if (!props.rowKey) {\n    // 如果rowKey没有设置，则无法进行拖拽，因为必须知道每行的唯一标识\n    console.error('rowKey is required in rowDnd mode');\n    return defaultInfo;\n  }\n  const { fixed: rowDndFixed, onChange } = rowDnd;\n\n  const fixed = rowDndFixed || hasFixedLeftColumn(columns);\n\n  const handleDragging = (dragIndex: number, hoverIndex: number) => {\n    // 使用函数式更新，确保基于最新的状态进行操作\n    setDraggingTempData((currentData) => {\n      const newData = [...currentData];\n\n      // 确保 dragIndex 在有效范围内\n      if (dragIndex < 0 || dragIndex >= newData.length) {\n        console.warn(\n          `Drag index ${dragIndex} out of bounds for data length ${newData.length}`,\n        );\n        return currentData; // 返回当前状态，不作修改\n      }\n\n      // 保存被拖拽的行\n      const draggedRow = newData.splice(dragIndex, 1)[0];\n\n      // 如果因为某些原因未能获取到拖拽的行（理论上不应发生）\n      if (draggedRow === undefined) {\n        console.warn(\n          `Dragged item at index ${dragIndex} was undefined during splice.`,\n        );\n        return currentData; // 返回当前状态，不作修改\n      }\n\n      // 插入到新位置\n      newData.splice(hoverIndex, 0, draggedRow);\n\n      return newData;\n    });\n  };\n\n  // 记录拖动开始\n  const handleDragStart = (id: string) => {\n    setDraggingRowId(id);\n    setDraggingTempData(_.cloneDeep(data));\n  };\n\n  // 记录拖动结束\n  const handleDragComplete = () => {\n    // 必须在清空 draggingRowId 之前先找到 draggingRow\n    // 因为 tableData 依赖 draggingRowId，清空后 tableData 会切换回原始 data\n    const draggingRow = tableData.find(\n      (item) => getRowKey(item, rowKey) === draggingRowId,\n    );\n    if (!draggingRow) {\n      // 不应该出现这种情况\n      console.error('draggingRow is not found');\n      setDraggingRowId(null);\n      return;\n    }\n    // 保存当前的 tableData，因为清空 draggingRowId 后 tableData 会变化\n    const finalData = tableData;\n    setDraggingRowId(null);\n    setDraggingTempData([]);\n    onChange(finalData, draggingRow);\n  };\n\n  const dndColumn: ITableColumn<TDataItem> = {\n    dataIndex: '',\n    title: '',\n    width: 48,\n    render: (text: unknown, record: TDataItem, rowIndex: number) => {\n      const key = getRowKey(record, rowKey);\n      const rowRef = getRowRef(record);\n      return (\n        <DragHandle\n          index={rowIndex}\n          id={key}\n          onDragging={handleDragging}\n          onDragStart={handleDragStart}\n          onDragComplete={handleDragComplete}\n          rowRef={rowRef}\n        />\n      );\n    },\n    fixed: fixed ? 'left' : undefined,\n  };\n\n  return {\n    columns: [dndColumn, ...columns],\n    getRowRef,\n    draggingRowId,\n    tableData,\n  };\n}\n\ninterface IRowDndInfo<TDataItem extends object> {\n  columns: ITableProps<TDataItem>['columns'];\n  getRowRef: (\n    record: TDataItem,\n    rowIndex: number,\n  ) => React.MutableRefObject<HTMLDivElement> | undefined;\n  draggingRowId: string | null;\n  tableData: TDataItem[];\n}\n"],"mappings":"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"}
+{"version":3,"file":"useRowDnd.js","names":[],"sources":["../../../src/Table/hooks/useRowDnd.tsx"],"sourcesContent":["import DragLightLineSvg from '../../Icon/components/DragLightLine';\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { useDrag, useDrop, DragSourceMonitor } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { getRowKey, hasFixedLeftColumn, prefixCls } from '../helper';\nimport { ITableColumn, ITableProps } from '../types';\nimport _ from 'lodash';\n\n// 定义拖拽项类型\nconst ROW_DND_TYPE = 'ALD_TABLE_ROW_DND_TYPE';\n\ninterface DragItem {\n  index: number;\n  id: string;\n}\n\n// 拖拽手柄组件\nconst DragHandle = ({\n  index,\n  id,\n  onDragging,\n  rowRef,\n  onDragStart,\n  onDragComplete,\n}: {\n  index: number;\n  id: string;\n  onDragging: (dragIndex: number, hoverIndex: number) => void;\n  rowRef?: React.RefObject<HTMLDivElement>;\n  onDragStart: (id: string) => void;\n  onDragComplete: () => void;\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n\n  // 使用 ref 来跟踪是否已经通知拖动开始\n  const dragStartedRef = useRef(false);\n\n  const [{ isDragging }, drag, preview] = useDrag({\n    type: ROW_DND_TYPE,\n    item: () => {\n      // 只在拖拽真正开始且尚未通知时触发一次\n      if (!dragStartedRef.current) {\n        // 通知开始拖动，传递行的ID\n        onDragStart(id);\n        dragStartedRef.current = true;\n      }\n\n      return { index, id };\n    },\n    collect: (monitor: DragSourceMonitor) => ({\n      isDragging: monitor.isDragging(),\n    }),\n    end: () => {\n      // 拖拽结束时清除拖动状态和重置标志\n      onDragComplete();\n      dragStartedRef.current = false;\n    },\n  });\n\n  const [, drop] = useDrop({\n    accept: ROW_DND_TYPE,\n    // @ts-ignore - react-dnd类型定义有时与实际用法不一致\n    hover(item: DragItem, monitor) {\n      // 如果有行引用并且行引用有值，使用行引用来判断位置\n      const dropRef = rowRef?.current;\n\n      if (!dropRef) {\n        return;\n      }\n\n      const dragIndex = item.index;\n      const hoverIndex = index;\n\n      // 如果拖动的是自己，不做任何事\n      if (dragIndex === hoverIndex) {\n        return;\n      }\n\n      // 确定鼠标位置\n      const hoverBoundingRect = dropRef.getBoundingClientRect();\n      const hoverMiddleY =\n        (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;\n      const clientOffset = monitor.getClientOffset();\n\n      if (!clientOffset) {\n        return;\n      }\n\n      const hoverClientY = clientOffset.y - hoverBoundingRect.top;\n\n      // 向下拖动，但鼠标还没过半\n      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {\n        return;\n      }\n\n      // 向上拖动，但鼠标还没过半\n      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {\n        return;\n      }\n\n      // 执行排序\n      onDragging(dragIndex, hoverIndex);\n\n      // 更新拖拽项的索引，react-dnd 官方示例推荐这样做以提高性能并避免奇怪行为\n      item.index = hoverIndex;\n    },\n  });\n\n  // 将 drag 连接到手柄 ref 上\n  drag(ref);\n\n  // 设置放置目标\n  if (rowRef?.current) {\n    drop(rowRef.current);\n  }\n\n  preview(getEmptyImage());\n\n  return (\n    <div\n      ref={ref}\n      className={prefixCls('row-dnd-item')}\n      style={{ cursor: 'move', opacity: isDragging ? 0.5 : 1 }}\n    >\n      <DragLightLineSvg />\n    </div>\n  );\n};\n\nexport default function useRowDnd<TDataItem extends object>(\n  props: ITableProps<TDataItem>,\n): IRowDndInfo<TDataItem> {\n  const { columns, rowDnd, data, rowKey } = props;\n  // 跟踪当前正在拖动的行的ID\n  const [draggingRowId, setDraggingRowId] = useState<string | null>(null);\n\n  // 为每一行创建一个 ref，使用 useMemo 缓存 Map 实例\n  const rowRefs = useMemo(\n    () => new Map<string, React.RefObject<HTMLDivElement>>(),\n    [],\n  );\n\n  // 当拖拽过程中，临时存储数据\n  const [draggingTempData, setDraggingTempData] = useState<TDataItem[]>([]);\n\n  const tableData = useMemo(() => {\n    // 拖拽过程中，使用临时数据，这样外部调用方可以不用关心拖拽过程中的数据变化\n    if (draggingRowId) {\n      return draggingTempData;\n    }\n    return data;\n  }, [data, draggingRowId, draggingTempData]);\n\n  // 获取行的 ref，用于设置拖拽预览\n  const getRowRef = useCallback(\n    (record: TDataItem) => {\n      const key = getRowKey(record, rowKey);\n      if (!rowRefs.has(key)) {\n        rowRefs.set(\n          key,\n          React.createRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>,\n        );\n      }\n      return rowRefs.get(key) as React.MutableRefObject<HTMLDivElement>;\n    },\n    [rowKey, rowRefs],\n  );\n\n  const defaultInfo = useMemo(() => {\n    return {\n      columns,\n      getRowRef: () => undefined,\n      draggingRowId: null,\n      tableData: data,\n    };\n  }, [columns, data]);\n\n  if (!rowDnd) {\n    return defaultInfo;\n  }\n  if (props.expandable) {\n    console.error('rowDnd and expandable mode cannot be used together');\n    return defaultInfo;\n  }\n  if (!props.rowKey) {\n    // 如果rowKey没有设置，则无法进行拖拽，因为必须知道每行的唯一标识\n    console.error('rowKey is required in rowDnd mode');\n    return defaultInfo;\n  }\n  const { fixed: rowDndFixed, onChange } = rowDnd;\n\n  const fixed = rowDndFixed || hasFixedLeftColumn(columns);\n\n  const handleDragging = (dragIndex: number, hoverIndex: number) => {\n    // 使用函数式更新，确保基于最新的状态进行操作\n    setDraggingTempData((currentData) => {\n      const newData = [...currentData];\n\n      if (dragIndex < 0 || dragIndex >= newData.length) {\n        return currentData;\n      }\n\n      const draggedRow = newData.splice(dragIndex, 1)[0];\n\n      if (draggedRow === undefined) {\n        return currentData;\n      }\n\n      // 插入到新位置\n      newData.splice(hoverIndex, 0, draggedRow);\n\n      return newData;\n    });\n  };\n\n  // 记录拖动开始\n  const handleDragStart = (id: string) => {\n    setDraggingRowId(id);\n    setDraggingTempData(_.cloneDeep(data));\n  };\n\n  // 记录拖动结束\n  const handleDragComplete = () => {\n    // 必须在清空 draggingRowId 之前先找到 draggingRow\n    // 因为 tableData 依赖 draggingRowId，清空后 tableData 会切换回原始 data\n    const draggingRow = tableData.find(\n      (item) => getRowKey(item, rowKey) === draggingRowId,\n    );\n    if (!draggingRow) {\n      // 不应该出现这种情况\n      console.error('draggingRow is not found');\n      setDraggingRowId(null);\n      return;\n    }\n    // 保存当前的 tableData，因为清空 draggingRowId 后 tableData 会变化\n    const finalData = tableData;\n    setDraggingRowId(null);\n    setDraggingTempData([]);\n    onChange(finalData, draggingRow);\n  };\n\n  const dndColumn: ITableColumn<TDataItem> = {\n    dataIndex: '',\n    title: '',\n    width: 48,\n    render: (text: unknown, record: TDataItem, rowIndex: number) => {\n      const key = getRowKey(record, rowKey);\n      const rowRef = getRowRef(record);\n      return (\n        <DragHandle\n          index={rowIndex}\n          id={key}\n          onDragging={handleDragging}\n          onDragStart={handleDragStart}\n          onDragComplete={handleDragComplete}\n          rowRef={rowRef}\n        />\n      );\n    },\n    fixed: fixed ? 'left' : undefined,\n  };\n\n  return {\n    columns: [dndColumn, ...columns],\n    getRowRef,\n    draggingRowId,\n    tableData,\n  };\n}\n\ninterface IRowDndInfo<TDataItem extends object> {\n  columns: ITableProps<TDataItem>['columns'];\n  getRowRef: (\n    record: TDataItem,\n    rowIndex: number,\n  ) => React.MutableRefObject<HTMLDivElement> | undefined;\n  draggingRowId: string | null;\n  tableData: TDataItem[];\n}\n"],"mappings":"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"}

package/dist/Tabs/index.js

@@ -84,14 +84,14 @@ function Tabs(props) {
 	};
 	const showScrollButtons = canScrollLeft || canScrollRight;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("ald-tabs tw-flex", isVertical ? "tw-flex-row" : "tw-flex-col", adaptHeight && "ald-adapt-height tw-h-full", size !== "small" && "ald-tabs-default", monospace && "ald-tabs-monospace", compact && "ald-tabs-compact", !hasDividing && "ald-tabs-no-dividing", className),
+		className: cn("ald-tabs ant-tabs tw-flex", isVertical ? "tw-flex-row" : "tw-flex-col", adaptHeight && "ald-adapt-height tw-h-full", size !== "small" && "ald-tabs-default", monospace && "ald-tabs-monospace", compact && "ald-tabs-compact", !hasDividing && "ald-tabs-no-dividing", className),
 		style: {
 			...style,
 			"--header-bg-color": headerBackgroundColor,
 			"--tabs-padding": `${paddingVal}px`
 		},
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: cn("ald-tabs-nav tw-flex tw-items-center", !isVertical && hasDividing && "tw-mb-5 tw-border-0 tw-border-b tw-border-solid tw-border-b-[var(--global-cool-grey-100)]", !isVertical && compact && "!tw-mb-0", isVertical && "tw-flex-col tw-border-0 tw-border-r tw-border-solid tw-border-r-[var(--global-cool-grey-100)]", paddingVal && `tw-px-[${paddingVal}px]`),
+			className: cn("ald-tabs-nav ant-tabs-nav tw-flex tw-items-center", !isVertical && hasDividing && "tw-mb-5 tw-border-0 tw-border-b tw-border-solid tw-border-b-[var(--global-cool-grey-100)]", !isVertical && compact && "!tw-mb-0", isVertical && "tw-flex-col tw-border-0 tw-border-r tw-border-solid tw-border-r-[var(--global-cool-grey-100)]", paddingVal && `tw-px-[${paddingVal}px]`),
 			style: headerBackgroundColor ? { backgroundColor: headerBackgroundColor } : void 0,
 			children: [
 				extraLeft,
@@ -104,7 +104,7 @@ function Tabs(props) {
 				}),
 				/* @__PURE__ */ jsx("div", {
 					ref: navListRef,
-					className: cn("ald-tabs-nav-list tw-flex tw-flex-1 tw-overflow-hidden", isVertical && "tw-flex-col", monospace && "[&>*]:tw-flex-1", isCard ? "tw-gap-1" : !monospace && "tw-gap-8"),
+					className: cn("ald-tabs-nav-list ant-tabs-nav-list tw-flex tw-flex-1 tw-overflow-hidden", isVertical && "tw-flex-col", monospace && "[&>*]:tw-flex-1", isCard ? "tw-gap-1" : !monospace && "tw-gap-8"),
 					style: !isVertical ? {
 						scrollbarWidth: "none",
 						msOverflowStyle: "none"
@@ -113,18 +113,21 @@ function Tabs(props) {
 						const isActive = activeKey === item.key;
 						const showClose = isEditable && item.closable !== false;
 						return /* @__PURE__ */ jsxs("div", {
-							className: cn("ald-tabs-tab tw-relative tw-flex tw-shrink-0 tw-cursor-pointer tw-items-center tw-gap-2 tw-whitespace-nowrap tw-transition-colors", isCard ? cn("tw-h-10 tw-rounded-t-[6px] tw-border tw-border-b-0 tw-border-solid tw-px-4 tw-text-sm tw-leading-5", "tw-gap-sp-75", isActive ? "tw-border-[var(--alias-colors-border-default)] tw-bg-[var(--background-default)] tw-font-medium tw-text-[var(--alias-colors-text-selected)]" : "tw-border-[var(--alias-colors-border-default)] tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-text-[var(--alias-colors-text-subtle)] hover:tw-text-inherit") : cn(size === "small" ? "tw-py-2 tw-text-xs tw-leading-4" : "tw-py-2.5 tw-text-sm tw-leading-5", monospace && "tw-justify-center", isActive ? "tw-font-medium tw-text-[var(--alias-colors-text-selected)]" : "tw-font-medium tw-text-[var(--alias-colors-text-subtle)] hover:tw-text-inherit"), item.disabled && "tw-pointer-events-none tw-cursor-default tw-opacity-50"),
+							className: cn("ald-tabs-tab ant-tabs-tab tw-relative tw-flex tw-shrink-0 tw-cursor-pointer tw-items-center tw-gap-2 tw-whitespace-nowrap tw-transition-colors", isCard ? cn("tw-h-10 tw-rounded-t-[6px] tw-border tw-border-b-0 tw-border-solid tw-px-4 tw-text-sm tw-leading-5", "tw-gap-sp-75", isActive ? "tw-border-[var(--alias-colors-border-default)] tw-bg-[var(--background-default)] tw-font-medium tw-text-[var(--alias-colors-text-selected)]" : "tw-border-[var(--alias-colors-border-default)] tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-text-[var(--alias-colors-text-subtle)] hover:tw-text-inherit") : cn(size === "small" ? "tw-py-2 tw-text-xs tw-leading-4" : "tw-py-2.5 tw-text-sm tw-leading-5", monospace && "tw-justify-center", isActive ? "tw-font-medium tw-text-[var(--alias-colors-text-selected)]" : "tw-font-medium tw-text-[var(--alias-colors-text-subtle)] hover:tw-text-inherit"), item.disabled && "tw-pointer-events-none tw-cursor-default tw-opacity-50"),
 							onClick: item.disabled ? void 0 : (e) => handleTabClick(item.key, e),
 							children: [
 								item.icon,
-								/* @__PURE__ */ jsx("span", { children: item.label }),
+								/* @__PURE__ */ jsx("span", {
+									className: "ant-tabs-tab-btn",
+									children: item.label
+								}),
 								showClose && /* @__PURE__ */ jsx("span", {
 									className: "ald-tabs-tab-remove tw-m-0 tw-grid tw-size-4 tw-cursor-pointer tw-place-items-center tw-p-0 tw-text-[var(--alias-colors-icon-subtle)] tw-transition-colors hover:tw-text-[var(--alias-colors-text-default)]",
 									onClick: (e) => handleRemove(item.key, e),
 									"aria-label": `Remove ${item.label}`,
 									children: /* @__PURE__ */ jsx(Memo$2, { size: 12 })
 								}),
-								!isCard && isActive && !isVertical && /* @__PURE__ */ jsx("div", { className: "tw-absolute tw-inset-x-0 tw--bottom-px tw-h-[2px] tw-rounded-[2px] tw-bg-[var(--alias-colors-border-selected)]" }),
+								!isCard && isActive && !isVertical && /* @__PURE__ */ jsx("div", { className: "ant-tabs-ink-bar tw-absolute tw-inset-x-0 tw--bottom-px tw-h-[2px] tw-rounded-[2px] tw-bg-[var(--alias-colors-border-selected)]" }),
 								!isCard && isActive && isVertical && /* @__PURE__ */ jsx("div", { className: "tw-absolute tw-inset-y-0 tw--right-px tw-w-[2px] tw-rounded-[2px] tw-bg-[var(--alias-colors-border-selected)]" })
 							]
 						}, item.key);
@@ -168,12 +171,12 @@ function Tabs(props) {
 				extraRight
 			]
 		}), /* @__PURE__ */ jsx("div", {
-			className: "ald-tabs-content tw-min-h-0 tw-flex-1",
+			className: "ald-tabs-content ant-tabs-content ant-tabs-content-holder tw-min-h-0 tw-flex-1",
 			children: resolvedItems.map((item) => {
 				const isActive = item.key === activeKey;
 				if (!isActive && destroyInactiveTabPane && !item.forceRender) return null;
 				return /* @__PURE__ */ jsx("div", {
-					className: cn("ald-tabs-tabpane", isActive ? "tw-block" : "tw-hidden"),
+					className: cn("ald-tabs-tabpane ant-tabs-tabpane", isActive ? "ant-tabs-tabpane-active tw-block" : "tw-hidden"),
 					role: "tabpanel",
 					children: item.children
 				}, item.key);

package/dist/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Tabs/index.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../lib/utils';\nimport { ChevronLeftLine, ChevronRightLine, CloseLightLine } from '../Icon';\nimport TabPane from './TabPane';\n\nexport type TabsSize = 'default' | 'small';\n\ninterface TabItem {\n  key: string;\n  label: React.ReactNode;\n  children?: React.ReactNode;\n  disabled?: boolean;\n  closable?: boolean;\n  icon?: React.ReactNode;\n  forceRender?: boolean;\n  className?: string;\n}\n\nexport interface ITabsProps {\n  size?: TabsSize;\n  activeKey?: string;\n  defaultActiveKey?: string;\n  onChange?: (activeKey: string) => void;\n  onTabClick?: (activeKey: string, e: React.MouseEvent) => void;\n  destroyInactiveTabPane?: boolean;\n  centered?: boolean;\n  adaptHeight?: boolean;\n  tabPosition?: 'left' | 'right' | 'top' | 'bottom';\n  className?: string;\n  children?: React.ReactNode;\n  headerBackgroundColor?: string;\n  monospace?: boolean;\n  padding?: boolean | number;\n  compact?: boolean;\n  hasDividing?: boolean;\n  items?: TabItem[];\n  type?: 'line' | 'card' | 'editable-card';\n  tabBarExtraContent?:\n    | React.ReactNode\n    | { left?: React.ReactNode; right?: React.ReactNode };\n  onEdit?: (\n    targetKey: string | React.MouseEvent | React.KeyboardEvent,\n    action: 'add' | 'remove',\n  ) => void;\n  hideAdd?: boolean;\n  style?: React.CSSProperties;\n  popupClassName?: string;\n  tabBarGutter?: number;\n  moreIcon?: React.ReactNode;\n}\n\nexport default function Tabs(props: ITabsProps) {\n  const {\n    size,\n    className,\n    adaptHeight,\n    style = {},\n    monospace: propsMonospace,\n    tabPosition = 'top',\n    padding: propsPadding = false,\n    compact,\n    hasDividing = true,\n    items,\n    activeKey: controlledActiveKey,\n    defaultActiveKey,\n    onChange,\n    onTabClick,\n    destroyInactiveTabPane,\n    tabBarExtraContent,\n    headerBackgroundColor,\n    children,\n    type,\n    onEdit,\n    hideAdd,\n  } = props;\n\n  const isEditable = type === 'editable-card';\n  const isCard = type === 'card' || type === 'editable-card';\n\n  // Derive items from children if not provided\n  const resolvedItems: TabItem[] = useMemo(() => {\n    if (items) return items;\n    return React.Children.toArray(children)\n      .filter(React.isValidElement)\n      .map((child: any) => ({\n        key: child.key || child.props.key || '',\n        label: child.props.tab,\n        children: child.props.children,\n        disabled: child.props.disabled,\n        closable: child.props.closable,\n        forceRender: child.props.forceRender,\n      }));\n  }, [items, children]);\n\n  const firstKey = resolvedItems[0]?.key || '';\n  const [innerActiveKey, setInnerActiveKey] = useState(\n    defaultActiveKey || firstKey,\n  );\n  const activeKey =\n    controlledActiveKey !== undefined ? controlledActiveKey : innerActiveKey;\n\n  const handleTabClick = (key: string, e: React.MouseEvent) => {\n    if (controlledActiveKey === undefined) {\n      setInnerActiveKey(key);\n    }\n    onChange?.(key);\n    onTabClick?.(key, e);\n  };\n\n  const handleRemove = (key: string, e: React.MouseEvent) => {\n    e.stopPropagation();\n    onEdit?.(key, 'remove');\n  };\n\n  const handleAdd = (e: React.MouseEvent) => {\n    onEdit?.(e, 'add');\n  };\n\n  const monospace = tabPosition !== 'top' ? false : propsMonospace;\n  const paddingVal = useMemo(() => {\n    if (tabPosition !== 'top') return 0;\n    if (typeof propsPadding === 'number') return propsPadding;\n    if (typeof propsPadding === 'boolean' && propsPadding) return 20;\n    return 0;\n  }, [propsPadding, tabPosition]);\n\n  const isVertical = tabPosition === 'left' || tabPosition === 'right';\n\n  const extraLeft =\n    tabBarExtraContent &&\n    typeof tabBarExtraContent === 'object' &&\n    'left' in tabBarExtraContent\n      ? tabBarExtraContent.left\n      : null;\n  const extraRight = tabBarExtraContent\n    ? typeof tabBarExtraContent === 'object' && 'right' in tabBarExtraContent\n      ? tabBarExtraContent.right\n      : React.isValidElement(tabBarExtraContent)\n      ? tabBarExtraContent\n      : null\n    : null;\n\n  // Scroll state for overflow\n  const navListRef = useRef<HTMLDivElement>(null);\n  const [canScrollLeft, setCanScrollLeft] = useState(false);\n  const [canScrollRight, setCanScrollRight] = useState(false);\n\n  const checkScroll = useCallback(() => {\n    const el = navListRef.current;\n    if (!el || isVertical) {\n      setCanScrollLeft(false);\n      setCanScrollRight(false);\n      return;\n    }\n    const { scrollLeft, scrollWidth, clientWidth } = el;\n    setCanScrollLeft(scrollLeft > 1);\n    setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);\n  }, [isVertical]);\n\n  useEffect(() => {\n    checkScroll();\n    const el = navListRef.current;\n    if (!el) return;\n    // Use ResizeObserver to detect size changes\n    let ro: ResizeObserver | undefined;\n    if (typeof ResizeObserver !== 'undefined') {\n      ro = new ResizeObserver(() => checkScroll());\n      ro.observe(el);\n    }\n    el.addEventListener('scroll', checkScroll, { passive: true });\n    return () => {\n      el.removeEventListener('scroll', checkScroll);\n      ro?.disconnect();\n    };\n  }, [checkScroll, resolvedItems.length]);\n\n  const scrollBy = (delta: number) => {\n    const el = navListRef.current;\n    if (el) {\n      el.scrollBy({ left: delta, behavior: 'smooth' });\n    }\n  };\n\n  const showScrollButtons = canScrollLeft || canScrollRight;\n\n  return (\n    <div\n      className={cn(\n        'ald-tabs tw-flex',\n        isVertical ? 'tw-flex-row' : 'tw-flex-col',\n        adaptHeight && 'ald-adapt-height tw-h-full',\n        size !== 'small' && 'ald-tabs-default',\n        monospace && 'ald-tabs-monospace',\n        compact && 'ald-tabs-compact',\n        !hasDividing && 'ald-tabs-no-dividing',\n        className,\n      )}\n      style={\n        {\n          ...style,\n          '--header-bg-color': headerBackgroundColor,\n          '--tabs-padding': `${paddingVal}px`,\n        } as React.CSSProperties\n      }\n    >\n      {/* Tab nav */}\n      <div\n        className={cn(\n          'ald-tabs-nav tw-flex tw-items-center',\n          !isVertical &&\n            hasDividing &&\n            'tw-mb-5 tw-border-0 tw-border-b tw-border-solid tw-border-b-[var(--global-cool-grey-100)]',\n          !isVertical && compact && '!tw-mb-0',\n          isVertical &&\n            'tw-flex-col tw-border-0 tw-border-r tw-border-solid tw-border-r-[var(--global-cool-grey-100)]',\n          paddingVal && `tw-px-[${paddingVal}px]`,\n        )}\n        style={\n          headerBackgroundColor\n            ? { backgroundColor: headerBackgroundColor }\n            : undefined\n        }\n      >\n        {extraLeft}\n\n        {/* Scroll left button */}\n        {showScrollButtons && !isVertical && (\n          <button\n            type=\"button\"\n            className={cn(\n              'ald-tabs-scroll-btn tw-flex tw-shrink-0 tw-items-center tw-justify-center tw-border-none tw-bg-transparent tw-p-1 tw-text-[var(--content-secondary)] tw-transition-colors hover:tw-text-[var(--content-primary)]',\n              !canScrollLeft && 'tw-invisible',\n            )}\n            onClick={() => scrollBy(-200)}\n            aria-label=\"Scroll tabs left\"\n          >\n            <ChevronLeftLine size={16} />\n          </button>\n        )}\n\n        <div\n          ref={navListRef}\n          className={cn(\n            'ald-tabs-nav-list tw-flex tw-flex-1 tw-overflow-hidden',\n            isVertical && 'tw-flex-col',\n            monospace && '[&>*]:tw-flex-1',\n            isCard ? 'tw-gap-1' : !monospace && 'tw-gap-8',\n          )}\n          style={\n            !isVertical\n              ? { scrollbarWidth: 'none', msOverflowStyle: 'none' }\n              : undefined\n          }\n        >\n          {resolvedItems.map((item) => {\n            const isActive = activeKey === item.key;\n            // For editable-card, closable defaults to true unless explicitly set to false\n            const showClose = isEditable && item.closable !== false;\n\n            return (\n              <div\n                key={item.key}\n                className={cn(\n                  'ald-tabs-tab tw-relative tw-flex tw-shrink-0 tw-cursor-pointer tw-items-center tw-gap-2 tw-whitespace-nowrap tw-transition-colors',\n                  // Card / editable-card styling\n                  isCard\n                    ? cn(\n                        'tw-h-10 tw-rounded-t-[6px] tw-border tw-border-b-0 tw-border-solid tw-px-4 tw-text-sm tw-leading-5',\n                        'tw-gap-sp-75',\n                        isActive\n                          ? 'tw-border-[var(--alias-colors-border-default)] tw-bg-[var(--background-default)] tw-font-medium tw-text-[var(--alias-colors-text-selected)]'\n                          : 'tw-border-[var(--alias-colors-border-default)] tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-text-[var(--alias-colors-text-subtle)] hover:tw-text-inherit',\n                      )\n                    : cn(\n                        size === 'small'\n                          ? 'tw-py-2 tw-text-xs tw-leading-4'\n                          : 'tw-py-2.5 tw-text-sm tw-leading-5',\n                        monospace && 'tw-justify-center',\n                        isActive\n                          ? 'tw-font-medium tw-text-[var(--alias-colors-text-selected)]'\n                          : 'tw-font-medium tw-text-[var(--alias-colors-text-subtle)] hover:tw-text-inherit',\n                      ),\n                  item.disabled &&\n                    'tw-pointer-events-none tw-cursor-default tw-opacity-50',\n                )}\n                onClick={\n                  item.disabled ? undefined : (e) => handleTabClick(item.key, e)\n                }\n              >\n                {item.icon}\n                <span>{item.label}</span>\n                {/* Close button for editable-card */}\n                {showClose && (\n                  <span\n                    className=\"ald-tabs-tab-remove tw-m-0 tw-grid tw-size-4 tw-cursor-pointer tw-place-items-center tw-p-0 tw-text-[var(--alias-colors-icon-subtle)] tw-transition-colors hover:tw-text-[var(--alias-colors-text-default)]\"\n                    onClick={(e) => handleRemove(item.key, e)}\n                    aria-label={`Remove ${item.label}`}\n                  >\n                    <CloseLightLine size={12} />\n                  </span>\n                )}\n                {/* Active indicator for non-card line tabs */}\n                {!isCard && isActive && !isVertical && (\n                  <div className=\"tw-absolute tw-inset-x-0 tw--bottom-px tw-h-[2px] tw-rounded-[2px] tw-bg-[var(--alias-colors-border-selected)]\" />\n                )}\n                {!isCard && isActive && isVertical && (\n                  <div className=\"tw-absolute tw-inset-y-0 tw--right-px tw-w-[2px] tw-rounded-[2px] tw-bg-[var(--alias-colors-border-selected)]\" />\n                )}\n              </div>\n            );\n          })}\n        </div>\n\n        {/* Scroll right button */}\n        {showScrollButtons && !isVertical && (\n          <button\n            type=\"button\"\n            className={cn(\n              'ald-tabs-scroll-btn tw-flex tw-shrink-0 tw-items-center tw-justify-center tw-border-none tw-bg-transparent tw-p-1 tw-text-[var(--content-secondary)] tw-transition-colors hover:tw-text-[var(--content-primary)]',\n              !canScrollRight && 'tw-invisible',\n            )}\n            onClick={() => scrollBy(200)}\n            aria-label=\"Scroll tabs right\"\n          >\n            <ChevronRightLine size={16} />\n          </button>\n        )}\n\n        {/* Add button for editable-card */}\n        {isEditable && !hideAdd && (\n          <button\n            type=\"button\"\n            className=\"ald-tabs-nav-add tw-ml-1 tw-flex tw-shrink-0 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded tw-border tw-border-solid tw-border-[var(--border-default)] tw-bg-[var(--background-default)] tw-px-2 tw-py-1 tw-text-[var(--content-secondary)] tw-transition-colors hover:tw-text-[var(--content-primary)]\"\n            onClick={handleAdd}\n            aria-label=\"Add tab\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"14\"\n              height=\"14\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            >\n              <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" />\n              <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n            </svg>\n          </button>\n        )}\n\n        {extraRight}\n      </div>\n\n      {/* Tab content */}\n      <div className=\"ald-tabs-content tw-min-h-0 tw-flex-1\">\n        {resolvedItems.map((item) => {\n          const isActive = item.key === activeKey;\n          if (!isActive && destroyInactiveTabPane && !item.forceRender) {\n            return null;\n          }\n          return (\n            <div\n              key={item.key}\n              className={cn(\n                'ald-tabs-tabpane',\n                isActive ? 'tw-block' : 'tw-hidden',\n              )}\n              role=\"tabpanel\"\n            >\n              {item.children}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nTabs.TabPane = TabPane;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Tabs/index.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../lib/utils';\nimport { ChevronLeftLine, ChevronRightLine, CloseLightLine } from '../Icon';\nimport TabPane from './TabPane';\n\nexport type TabsSize = 'default' | 'small';\n\ninterface TabItem {\n  key: string;\n  label: React.ReactNode;\n  children?: React.ReactNode;\n  disabled?: boolean;\n  closable?: boolean;\n  icon?: React.ReactNode;\n  forceRender?: boolean;\n  className?: string;\n}\n\nexport interface ITabsProps {\n  size?: TabsSize;\n  activeKey?: string;\n  defaultActiveKey?: string;\n  onChange?: (activeKey: string) => void;\n  onTabClick?: (activeKey: string, e: React.MouseEvent) => void;\n  destroyInactiveTabPane?: boolean;\n  centered?: boolean;\n  adaptHeight?: boolean;\n  tabPosition?: 'left' | 'right' | 'top' | 'bottom';\n  className?: string;\n  children?: React.ReactNode;\n  headerBackgroundColor?: string;\n  monospace?: boolean;\n  padding?: boolean | number;\n  compact?: boolean;\n  hasDividing?: boolean;\n  items?: TabItem[];\n  type?: 'line' | 'card' | 'editable-card';\n  tabBarExtraContent?:\n    | React.ReactNode\n    | { left?: React.ReactNode; right?: React.ReactNode };\n  onEdit?: (\n    targetKey: string | React.MouseEvent | React.KeyboardEvent,\n    action: 'add' | 'remove',\n  ) => void;\n  hideAdd?: boolean;\n  style?: React.CSSProperties;\n  popupClassName?: string;\n  tabBarGutter?: number;\n  moreIcon?: React.ReactNode;\n}\n\nexport default function Tabs(props: ITabsProps) {\n  const {\n    size,\n    className,\n    adaptHeight,\n    style = {},\n    monospace: propsMonospace,\n    tabPosition = 'top',\n    padding: propsPadding = false,\n    compact,\n    hasDividing = true,\n    items,\n    activeKey: controlledActiveKey,\n    defaultActiveKey,\n    onChange,\n    onTabClick,\n    destroyInactiveTabPane,\n    tabBarExtraContent,\n    headerBackgroundColor,\n    children,\n    type,\n    onEdit,\n    hideAdd,\n  } = props;\n\n  const isEditable = type === 'editable-card';\n  const isCard = type === 'card' || type === 'editable-card';\n\n  // Derive items from children if not provided\n  const resolvedItems: TabItem[] = useMemo(() => {\n    if (items) return items;\n    return React.Children.toArray(children)\n      .filter(React.isValidElement)\n      .map((child: any) => ({\n        key: child.key || child.props.key || '',\n        label: child.props.tab,\n        children: child.props.children,\n        disabled: child.props.disabled,\n        closable: child.props.closable,\n        forceRender: child.props.forceRender,\n      }));\n  }, [items, children]);\n\n  const firstKey = resolvedItems[0]?.key || '';\n  const [innerActiveKey, setInnerActiveKey] = useState(\n    defaultActiveKey || firstKey,\n  );\n  const activeKey =\n    controlledActiveKey !== undefined ? controlledActiveKey : innerActiveKey;\n\n  const handleTabClick = (key: string, e: React.MouseEvent) => {\n    if (controlledActiveKey === undefined) {\n      setInnerActiveKey(key);\n    }\n    onChange?.(key);\n    onTabClick?.(key, e);\n  };\n\n  const handleRemove = (key: string, e: React.MouseEvent) => {\n    e.stopPropagation();\n    onEdit?.(key, 'remove');\n  };\n\n  const handleAdd = (e: React.MouseEvent) => {\n    onEdit?.(e, 'add');\n  };\n\n  const monospace = tabPosition !== 'top' ? false : propsMonospace;\n  const paddingVal = useMemo(() => {\n    if (tabPosition !== 'top') return 0;\n    if (typeof propsPadding === 'number') return propsPadding;\n    if (typeof propsPadding === 'boolean' && propsPadding) return 20;\n    return 0;\n  }, [propsPadding, tabPosition]);\n\n  const isVertical = tabPosition === 'left' || tabPosition === 'right';\n\n  const extraLeft =\n    tabBarExtraContent &&\n    typeof tabBarExtraContent === 'object' &&\n    'left' in tabBarExtraContent\n      ? tabBarExtraContent.left\n      : null;\n  const extraRight = tabBarExtraContent\n    ? typeof tabBarExtraContent === 'object' && 'right' in tabBarExtraContent\n      ? tabBarExtraContent.right\n      : React.isValidElement(tabBarExtraContent)\n      ? tabBarExtraContent\n      : null\n    : null;\n\n  // Scroll state for overflow\n  const navListRef = useRef<HTMLDivElement>(null);\n  const [canScrollLeft, setCanScrollLeft] = useState(false);\n  const [canScrollRight, setCanScrollRight] = useState(false);\n\n  const checkScroll = useCallback(() => {\n    const el = navListRef.current;\n    if (!el || isVertical) {\n      setCanScrollLeft(false);\n      setCanScrollRight(false);\n      return;\n    }\n    const { scrollLeft, scrollWidth, clientWidth } = el;\n    setCanScrollLeft(scrollLeft > 1);\n    setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);\n  }, [isVertical]);\n\n  useEffect(() => {\n    checkScroll();\n    const el = navListRef.current;\n    if (!el) return;\n    // Use ResizeObserver to detect size changes\n    let ro: ResizeObserver | undefined;\n    if (typeof ResizeObserver !== 'undefined') {\n      ro = new ResizeObserver(() => checkScroll());\n      ro.observe(el);\n    }\n    el.addEventListener('scroll', checkScroll, { passive: true });\n    return () => {\n      el.removeEventListener('scroll', checkScroll);\n      ro?.disconnect();\n    };\n  }, [checkScroll, resolvedItems.length]);\n\n  const scrollBy = (delta: number) => {\n    const el = navListRef.current;\n    if (el) {\n      el.scrollBy({ left: delta, behavior: 'smooth' });\n    }\n  };\n\n  const showScrollButtons = canScrollLeft || canScrollRight;\n\n  return (\n    <div\n      className={cn(\n        // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n        'ald-tabs ant-tabs tw-flex',\n        isVertical ? 'tw-flex-row' : 'tw-flex-col',\n        adaptHeight && 'ald-adapt-height tw-h-full',\n        size !== 'small' && 'ald-tabs-default',\n        monospace && 'ald-tabs-monospace',\n        compact && 'ald-tabs-compact',\n        !hasDividing && 'ald-tabs-no-dividing',\n        className,\n      )}\n      style={\n        {\n          ...style,\n          '--header-bg-color': headerBackgroundColor,\n          '--tabs-padding': `${paddingVal}px`,\n        } as React.CSSProperties\n      }\n    >\n      {/* Tab nav */}\n      <div\n        className={cn(\n          // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n          'ald-tabs-nav ant-tabs-nav tw-flex tw-items-center',\n          !isVertical &&\n            hasDividing &&\n            'tw-mb-5 tw-border-0 tw-border-b tw-border-solid tw-border-b-[var(--global-cool-grey-100)]',\n          !isVertical && compact && '!tw-mb-0',\n          isVertical &&\n            'tw-flex-col tw-border-0 tw-border-r tw-border-solid tw-border-r-[var(--global-cool-grey-100)]',\n          paddingVal && `tw-px-[${paddingVal}px]`,\n        )}\n        style={\n          headerBackgroundColor\n            ? { backgroundColor: headerBackgroundColor }\n            : undefined\n        }\n      >\n        {extraLeft}\n\n        {/* Scroll left button */}\n        {showScrollButtons && !isVertical && (\n          <button\n            type=\"button\"\n            className={cn(\n              'ald-tabs-scroll-btn tw-flex tw-shrink-0 tw-items-center tw-justify-center tw-border-none tw-bg-transparent tw-p-1 tw-text-[var(--content-secondary)] tw-transition-colors hover:tw-text-[var(--content-primary)]',\n              !canScrollLeft && 'tw-invisible',\n            )}\n            onClick={() => scrollBy(-200)}\n            aria-label=\"Scroll tabs left\"\n          >\n            <ChevronLeftLine size={16} />\n          </button>\n        )}\n\n        <div\n          ref={navListRef}\n          className={cn(\n            // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n            'ald-tabs-nav-list ant-tabs-nav-list tw-flex tw-flex-1 tw-overflow-hidden',\n            isVertical && 'tw-flex-col',\n            monospace && '[&>*]:tw-flex-1',\n            isCard ? 'tw-gap-1' : !monospace && 'tw-gap-8',\n          )}\n          style={\n            !isVertical\n              ? { scrollbarWidth: 'none', msOverflowStyle: 'none' }\n              : undefined\n          }\n        >\n          {resolvedItems.map((item) => {\n            const isActive = activeKey === item.key;\n            // For editable-card, closable defaults to true unless explicitly set to false\n            const showClose = isEditable && item.closable !== false;\n\n            return (\n              <div\n                key={item.key}\n                className={cn(\n                  // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                  'ald-tabs-tab ant-tabs-tab tw-relative tw-flex tw-shrink-0 tw-cursor-pointer tw-items-center tw-gap-2 tw-whitespace-nowrap tw-transition-colors',\n                  // Card / editable-card styling\n                  isCard\n                    ? cn(\n                        'tw-h-10 tw-rounded-t-[6px] tw-border tw-border-b-0 tw-border-solid tw-px-4 tw-text-sm tw-leading-5',\n                        'tw-gap-sp-75',\n                        isActive\n                          ? 'tw-border-[var(--alias-colors-border-default)] tw-bg-[var(--background-default)] tw-font-medium tw-text-[var(--alias-colors-text-selected)]'\n                          : 'tw-border-[var(--alias-colors-border-default)] tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-text-[var(--alias-colors-text-subtle)] hover:tw-text-inherit',\n                      )\n                    : cn(\n                        size === 'small'\n                          ? 'tw-py-2 tw-text-xs tw-leading-4'\n                          : 'tw-py-2.5 tw-text-sm tw-leading-5',\n                        monospace && 'tw-justify-center',\n                        isActive\n                          ? 'tw-font-medium tw-text-[var(--alias-colors-text-selected)]'\n                          : 'tw-font-medium tw-text-[var(--alias-colors-text-subtle)] hover:tw-text-inherit',\n                      ),\n                  item.disabled &&\n                    'tw-pointer-events-none tw-cursor-default tw-opacity-50',\n                )}\n                onClick={\n                  item.disabled ? undefined : (e) => handleTabClick(item.key, e)\n                }\n              >\n                {item.icon}\n                {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n                <span className=\"ant-tabs-tab-btn\">{item.label}</span>\n                {/* Close button for editable-card */}\n                {showClose && (\n                  <span\n                    className=\"ald-tabs-tab-remove tw-m-0 tw-grid tw-size-4 tw-cursor-pointer tw-place-items-center tw-p-0 tw-text-[var(--alias-colors-icon-subtle)] tw-transition-colors hover:tw-text-[var(--alias-colors-text-default)]\"\n                    onClick={(e) => handleRemove(item.key, e)}\n                    aria-label={`Remove ${item.label}`}\n                  >\n                    <CloseLightLine size={12} />\n                  </span>\n                )}\n                {/* Active indicator for non-card line tabs */}\n                {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n                {!isCard && isActive && !isVertical && (\n                  <div className=\"ant-tabs-ink-bar tw-absolute tw-inset-x-0 tw--bottom-px tw-h-[2px] tw-rounded-[2px] tw-bg-[var(--alias-colors-border-selected)]\" />\n                )}\n                {!isCard && isActive && isVertical && (\n                  <div className=\"tw-absolute tw-inset-y-0 tw--right-px tw-w-[2px] tw-rounded-[2px] tw-bg-[var(--alias-colors-border-selected)]\" />\n                )}\n              </div>\n            );\n          })}\n        </div>\n\n        {/* Scroll right button */}\n        {showScrollButtons && !isVertical && (\n          <button\n            type=\"button\"\n            className={cn(\n              'ald-tabs-scroll-btn tw-flex tw-shrink-0 tw-items-center tw-justify-center tw-border-none tw-bg-transparent tw-p-1 tw-text-[var(--content-secondary)] tw-transition-colors hover:tw-text-[var(--content-primary)]',\n              !canScrollRight && 'tw-invisible',\n            )}\n            onClick={() => scrollBy(200)}\n            aria-label=\"Scroll tabs right\"\n          >\n            <ChevronRightLine size={16} />\n          </button>\n        )}\n\n        {/* Add button for editable-card */}\n        {isEditable && !hideAdd && (\n          <button\n            type=\"button\"\n            className=\"ald-tabs-nav-add tw-ml-1 tw-flex tw-shrink-0 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded tw-border tw-border-solid tw-border-[var(--border-default)] tw-bg-[var(--background-default)] tw-px-2 tw-py-1 tw-text-[var(--content-secondary)] tw-transition-colors hover:tw-text-[var(--content-primary)]\"\n            onClick={handleAdd}\n            aria-label=\"Add tab\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"14\"\n              height=\"14\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            >\n              <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" />\n              <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n            </svg>\n          </button>\n        )}\n\n        {extraRight}\n      </div>\n\n      {/* Tab content */}\n      {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n      <div className=\"ald-tabs-content ant-tabs-content ant-tabs-content-holder tw-min-h-0 tw-flex-1\">\n        {resolvedItems.map((item) => {\n          const isActive = item.key === activeKey;\n          if (!isActive && destroyInactiveTabPane && !item.forceRender) {\n            return null;\n          }\n          return (\n            <div\n              key={item.key}\n              className={cn(\n                // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                'ald-tabs-tabpane ant-tabs-tabpane',\n                isActive ? 'ant-tabs-tabpane-active tw-block' : 'tw-hidden',\n              )}\n              role=\"tabpanel\"\n            >\n              {item.children}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nTabs.TabPane = TabPane;\n"],"mappings":"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"}

package/dist/Tree/Tree2.js

@@ -125,7 +125,7 @@ var Tree = React$1.forwardRef((props, ref) => {
 			[`${prefixCls}-rtl`]: direction === "rtl",
 			["ald-draggable-tree"]: draggable,
 			[`${prefixCls}-no-children`]: noChildren
-		}, className),
+		}, "ant-tree", className),
 		direction,
 		checkable: checkable ? /* @__PURE__ */ jsx("span", { className: `${prefixCls}-checkbox-inner` }) : checkable,
 		selectable,