@aloudata/aloudata-design 3.0.27 → 3.1.1

package/dist/Input/components/Input/index.js

@@ -3,6 +3,7 @@ import Memo from "../../../Icon/components/CloseCircleFill.js";
 import DisabledContext from "../../../ConfigProvider/DisabledContext.js";
 import SizeContext from "../../../ConfigProvider/sizeContext.js";
 import { useCompactItemContext } from "../../../Space/CompactContext.js";
+import { getSemanticOwnerAriaProps } from "../../../_utils/formControlSemanticOwner.js";
 import React, { forwardRef, useContext, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/Input/components/Input/index.tsx
@@ -15,7 +16,7 @@ function getSizeType(sizeType) {
 	return "middle";
 }
 var Input = forwardRef((props, ref) => {
-	const { size: customSize, className, bordered = true, status, disabled, allowClear, prefix, suffix, addonBefore, addonAfter, showCount, maxLength, minLength, value: controlledValue, defaultValue, onChange, onPressEnter, onBlur, onFocus, onKeyDown, onCompositionStart, onCompositionEnd, placeholder, type, id, autoComplete = "off", autoFocus, readOnly, width, style, "data-testid": dataTestid, "aria-label": ariaLabel, ...restInputProps } = props;
+	const { size: customSize, className, bordered = true, status, disabled, allowClear, prefix, suffix, addonBefore, addonAfter, showCount, maxLength, minLength, value: controlledValue, defaultValue, onChange, onPressEnter, onBlur, onFocus, onKeyDown, onCompositionStart, onCompositionEnd, placeholder, type, id, autoComplete = "off", autoFocus, readOnly, width, style, "data-testid": dataTestid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-busy": ariaBusy, "aria-disabled": ariaDisabled, "aria-readonly": ariaReadonly, ...restInputProps } = props;
 	const contextDisabled = useContext(DisabledContext);
 	const mergedDisabled = disabled ?? contextDisabled;
 	const contentSize = useContext(SizeContext);
@@ -54,7 +55,13 @@ var Input = forwardRef((props, ref) => {
 	}) : showCount ? `${currentValue.length}${maxLength ? `/${maxLength}` : ""}` : null;
 	const compactClasses = compactItemClassnames ? cn(!compactItemClassnames["ald-input-compact-first-item"] && "!tw-rounded-l-none", !compactItemClassnames["ald-input-compact-last-item"] && "!tw-rounded-r-none", !compactItemClassnames["ald-input-compact-first-item"] && "-tw-ml-px") : void 0;
 	return /* @__PURE__ */ jsxs("span", {
-		className: cn("ald-input ant-input-affix-wrapper tw-inline-flex tw-w-full tw-items-center tw-bg-[var(--background-default)]", bordered && "tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)]", focused && "ant-input-affix-wrapper-focused tw-border-[var(--border-brand-strong)]", !mergedDisabled && !focused && "hover:tw-border-[var(--border-brand-strong)]", `ald-input-${getSizeType(size)}`, "tw-text-typography-body-dense", size === "small" && "tw-h-7", size === "large" && "tw-h-9", (size === "middle" || !size) && "tw-h-8", status === "error" && `ald-input-error tw-border-[var(--border-negative-strong)]`, status === "warning" && `ald-input-warning tw-border-[var(--border-warning-subtle)]`, mergedDisabled && "ald-input-disabled tw-cursor-not-allowed tw-bg-[var(--background-neutral-on-subtle)] tw-text-[var(--content-secondary)]", compactClasses, className),
+		className: cn("ald-input ant-input-affix-wrapper tw-inline-flex tw-w-full tw-items-center tw-bg-[var(--background-default)] tw-transition-[border-color,box-shadow] tw-duration-150 tw-ease-out", bordered && "tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)]", !mergedDisabled && [
+			"has-[input:focus-visible]:tw-shadow-[inset_0_0_0_1px_var(--focus-ring)]",
+			"forced-colors:has-[input:focus-visible]:tw-outline",
+			"forced-colors:has-[input:focus-visible]:tw-outline-2",
+			"forced-colors:has-[input:focus-visible]:tw-outline-offset-2",
+			"forced-colors:has-[input:focus-visible]:tw-outline-[Highlight]"
+		], focused && "ant-input-affix-wrapper-focused", focused && !status && "!tw-border-[var(--border-brand-strong)]", `ald-input-${getSizeType(size)}`, "tw-text-typography-body-dense", size === "small" && "tw-h-[28px]", size === "large" && "tw-h-[36px]", (size === "middle" || !size) && "tw-h-[32px]", status === "error" && `ald-input-error tw-border-[var(--border-negative-strong)]`, status === "warning" && `ald-input-warning tw-border-[var(--border-warning-subtle)]`, mergedDisabled && "ald-input-disabled tw-cursor-not-allowed tw-bg-[var(--background-neutral-subtle)] tw-text-[var(--content-secondary)]", compactClasses, className),
 		style: {
 			...style,
 			width
@@ -73,7 +80,7 @@ var Input = forwardRef((props, ref) => {
 				children: addonBefore
 			}),
 			prefix && /* @__PURE__ */ jsx("span", {
-				className: "ald-input-prefix ant-input-prefix tw-flex tw-items-center tw-pl-2 tw-text-[var(--content-secondary)]",
+				className: "ald-input-prefix ant-input-prefix tw-flex tw-shrink-0 tw-items-center tw-pl-2 tw-text-[var(--content-secondary)]",
 				children: prefix
 			}),
 			/* @__PURE__ */ jsx("input", {
@@ -103,11 +110,20 @@ var Input = forwardRef((props, ref) => {
 				readOnly,
 				spellCheck: false,
 				"data-testid": dataTestid,
-				"aria-label": ariaLabel,
+				...getSemanticOwnerAriaProps({
+					"aria-label": ariaLabel,
+					"aria-labelledby": ariaLabelledBy,
+					"aria-describedby": ariaDescribedBy,
+					"aria-invalid": ariaInvalid ?? (status === "error" ? true : void 0),
+					"aria-required": ariaRequired,
+					"aria-busy": ariaBusy,
+					"aria-disabled": ariaDisabled,
+					"aria-readonly": ariaReadonly
+				}),
 				...restInputProps
 			}),
 			showClearIcon && /* @__PURE__ */ jsx("span", {
-				className: "ald-input-clear ant-input-clear-icon tw-flex tw-cursor-pointer tw-items-center tw-pr-1",
+				className: "ald-input-clear ant-input-clear-icon tw-flex tw-shrink-0 tw-cursor-pointer tw-items-center tw-pr-1",
 				onClick: handleClear,
 				children: /* @__PURE__ */ jsx(Memo, {
 					size: 16,
@@ -115,11 +131,11 @@ var Input = forwardRef((props, ref) => {
 				})
 			}),
 			suffix && /* @__PURE__ */ jsx("span", {
-				className: "ald-input-suffix ant-input-suffix tw-flex tw-items-center tw-pr-2 tw-text-[var(--content-secondary)]",
+				className: "ald-input-suffix ant-input-suffix tw-flex tw-shrink-0 tw-items-center tw-pr-2 tw-text-[var(--content-secondary)]",
 				children: suffix
 			}),
 			countInfo && /* @__PURE__ */ jsx("span", {
-				className: "ald-input-count tw-pr-2 tw-text-[var(--content-tertiary)] tw-text-typography-caption",
+				className: "ald-input-count tw-shrink-0 tw-pr-2 tw-text-[var(--content-tertiary)] tw-text-typography-caption",
 				children: countInfo
 			}),
 			addonAfter && /* @__PURE__ */ jsx("span", {

package/dist/Input/components/Input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Input/components/Input/index.tsx"],"sourcesContent":["import React, {\n  ReactNode,\n  forwardRef,\n  useContext,\n  useRef,\n  useState,\n} from 'react';\nimport DisabledContext from '../../../ConfigProvider/DisabledContext';\nimport SizeContext, { SizeType } from '../../../ConfigProvider/sizeContext';\nimport { CloseCircleFill } from '../../../Icon';\nimport { cn } from '../../../lib/utils';\nimport { useCompactItemContext } from '../../../Space/CompactContext';\n\ninterface IShowCountProps {\n  formatter: (args: { count: number; maxLength?: number }) => string;\n}\nexport type TSize = SizeType;\nexport type InputRef = HTMLInputElement & {\n  /** antd v4 compat — points to the underlying <input> element */\n  input?: HTMLInputElement | null;\n};\n\ntype ChangeEventHandler = (e: React.ChangeEvent<HTMLInputElement>) => void;\n\nexport interface IInputProps\n  extends Omit<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    | 'size'\n    | 'prefix'\n    | 'value'\n    | 'defaultValue'\n    | 'onChange'\n    | 'disabled'\n    | 'type'\n    | 'max'\n  > {\n  addonAfter?: ReactNode;\n  addonBefore?: ReactNode;\n  size?: TSize;\n  id?: string;\n  prefix?: ReactNode;\n  suffix?: ReactNode;\n  allowClear?: boolean;\n  disabled?: boolean;\n  showCount?: boolean | IShowCountProps;\n  maxLength?: number;\n  minLength?: number;\n  max?: number;\n  value?: string;\n  defaultValue?: string;\n  onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;\n  onChange?: ChangeEventHandler;\n  className?: string;\n  style?: React.CSSProperties;\n  placeholder?: string;\n  type?: string;\n  bordered?: boolean;\n  status?: 'error' | 'warning' | '';\n  autoComplete?: string;\n  autoFocus?: boolean;\n  readOnly?: boolean;\n  width?: number | string;\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n  onCompositionStart?: React.CompositionEventHandler<HTMLInputElement>;\n  onCompositionEnd?: React.CompositionEventHandler<HTMLInputElement>;\n  /** 透传到内部 input 元素的 data-testid，用于自动化测试定位 */\n  'data-testid'?: string;\n  /** 透传到内部 input 元素的 aria-label，用于可访问性与自动化测试定位 */\n  'aria-label'?: string;\n}\n\nexport function getSizeType(sizeType: TSize): TSize {\n  if (['small', 'middle', 'large'].includes(sizeType || '')) {\n    return sizeType;\n  }\n  return 'middle';\n}\n\nconst Input = forwardRef<InputRef, IInputProps>((props, ref) => {\n  const {\n    size: customSize,\n    className,\n    bordered = true,\n    status,\n    disabled,\n    allowClear,\n    prefix,\n    suffix,\n    addonBefore,\n    addonAfter,\n    showCount,\n    maxLength,\n    minLength,\n    value: controlledValue,\n    defaultValue,\n    onChange,\n    onPressEnter,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    onCompositionStart,\n    onCompositionEnd,\n    placeholder,\n    type,\n    id,\n    autoComplete = 'off',\n    autoFocus,\n    readOnly,\n    width,\n    style,\n    'data-testid': dataTestid,\n    'aria-label': ariaLabel,\n    ...restInputProps\n  } = props;\n\n  const contextDisabled = useContext(DisabledContext);\n  const mergedDisabled = disabled ?? contextDisabled;\n\n  const contentSize = useContext(SizeContext);\n  const { compactSize, compactItemClassnames } =\n    useCompactItemContext('ald-input');\n  const size = customSize || compactSize || contentSize || 'middle';\n\n  const isControlled = 'value' in props;\n  const [innerValue, setInnerValue] = useState(defaultValue ?? '');\n  const currentValue = isControlled ? controlledValue ?? '' : innerValue;\n  const [focused, setFocused] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  React.useImperativeHandle(ref, () => {\n    const el = inputRef.current!;\n    // Expose .input for antd v4 compat (ref.current.input.focus())\n    (el as InputRef).input = el;\n    return el as InputRef;\n  });\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!isControlled) setInnerValue(e.target.value);\n    onChange?.(e);\n  };\n\n  const handleClear = () => {\n    // 通过原生 input 事件统一触发 React onChange，确保事件契约完整且只回调一次。\n    const nativeEvent = new Event('input', { bubbles: true });\n    if (inputRef.current) {\n      const nativeSetter = Object.getOwnPropertyDescriptor(\n        HTMLInputElement.prototype,\n        'value',\n      )?.set;\n      nativeSetter?.call(inputRef.current, '');\n      inputRef.current.dispatchEvent(nativeEvent);\n    }\n    if (!isControlled) setInnerValue('');\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Enter') onPressEnter?.(e);\n    onKeyDown?.(e);\n  };\n\n  const showClearIcon = allowClear && currentValue && !mergedDisabled;\n\n  const countInfo =\n    showCount && typeof showCount === 'object'\n      ? showCount.formatter({\n          count: currentValue.length,\n          maxLength,\n        })\n      : showCount\n      ? `${currentValue.length}${maxLength ? `/${maxLength}` : ''}`\n      : null;\n\n  // Build compact-mode border-radius and margin overrides\n  const compactClasses = compactItemClassnames\n    ? cn(\n        !compactItemClassnames['ald-input-compact-first-item'] &&\n          '!tw-rounded-l-none',\n        !compactItemClassnames['ald-input-compact-last-item'] &&\n          '!tw-rounded-r-none',\n        !compactItemClassnames['ald-input-compact-first-item'] && '-tw-ml-px',\n      )\n    : undefined;\n\n  return (\n    <span\n      className={cn(\n        // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n        'ald-input ant-input-affix-wrapper tw-inline-flex tw-w-full tw-items-center tw-bg-[var(--background-default)]',\n        bordered &&\n          'tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)]',\n        // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n        // focus 仅变 border-color，不加额外 box-shadow/outline。\n        // 消费方通过 CSS 将 border 设为 0 后 focus 高亮自然消失，和 antd 行为一致。\n        focused &&\n          'ant-input-affix-wrapper-focused tw-border-[var(--border-brand-strong)]',\n        !mergedDisabled &&\n          !focused &&\n          'hover:tw-border-[var(--border-brand-strong)]',\n        `ald-input-${getSizeType(size)}`,\n        'tw-text-typography-body-dense',\n        size === 'small' && 'tw-h-7',\n        size === 'large' && 'tw-h-9',\n        (size === 'middle' || !size) && 'tw-h-8',\n        status === 'error' &&\n          `ald-input-error tw-border-[var(--border-negative-strong)]`,\n        status === 'warning' &&\n          `ald-input-warning tw-border-[var(--border-warning-subtle)]`,\n        mergedDisabled &&\n          'ald-input-disabled tw-cursor-not-allowed tw-bg-[var(--background-neutral-on-subtle)] tw-text-[var(--content-secondary)]',\n        compactClasses,\n        className,\n      )}\n      style={{\n        ...style,\n        width,\n      }}\n      onMouseDown={(e) => {\n        // 点击 wrapper 非 input 区域时：\n        // 如果 input 已聚焦 → preventDefault 防止点击 wrapper 导致丢焦\n        // 如果 input 未聚焦 → 不阻止默认行为，让浏览器正常处理 blur 上一个元素\n        if (e.target !== inputRef.current) {\n          if (document.activeElement === inputRef.current) {\n            e.preventDefault();\n          }\n        }\n      }}\n      onMouseUp={(e) => {\n        // 在 mouseUp 时将焦点转发给内部 input（兼容 prefix/suffix/padding 区域的点击）\n        if (e.target !== inputRef.current && inputRef.current) {\n          inputRef.current.focus();\n        }\n      }}\n    >\n      {addonBefore && (\n        <span className=\"ald-input-addon tw-flex tw-shrink-0 tw-items-center tw-self-stretch tw-border-r tw-border-solid tw-border-[var(--border-default)] tw-bg-[var(--background-neutral-subtle)] tw-px-3 tw-text-[var(--content-secondary)]\">\n          {addonBefore}\n        </span>\n      )}\n      {/* antd 兼容：保留 ant-input-prefix class，消费方 CSS 可能依赖该选择器 */}\n      {prefix && (\n        <span className=\"ald-input-prefix ant-input-prefix tw-flex tw-items-center tw-pl-2 tw-text-[var(--content-secondary)]\">\n          {prefix}\n        </span>\n      )}\n      <input\n        ref={inputRef}\n        id={id}\n        type={type || 'text'}\n        className=\"tw-min-w-0 tw-flex-1 tw-self-stretch tw-border-0 tw-bg-[var(--action-ghost-normal)] tw-px-2 tw-text-[var(--content-primary)] tw-text-inherit tw-outline-none\"\n        value={currentValue}\n        onChange={handleChange}\n        onBlur={(e) => {\n          setFocused(false);\n          onBlur?.(e);\n        }}\n        onFocus={(e) => {\n          setFocused(true);\n          onFocus?.(e);\n        }}\n        onKeyDown={handleKeyDown}\n        onCompositionStart={onCompositionStart}\n        onCompositionEnd={onCompositionEnd}\n        disabled={mergedDisabled}\n        placeholder={placeholder}\n        maxLength={maxLength}\n        minLength={minLength}\n        autoComplete={autoComplete}\n        autoFocus={autoFocus}\n        readOnly={readOnly}\n        spellCheck={false}\n        data-testid={dataTestid}\n        aria-label={ariaLabel}\n        {...restInputProps}\n      />\n      {showClearIcon && (\n        <span\n          // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n          className=\"ald-input-clear ant-input-clear-icon tw-flex tw-cursor-pointer tw-items-center tw-pr-1\"\n          onClick={handleClear}\n        >\n          <CloseCircleFill size={16} color=\"var(--content-secondary)\" />\n        </span>\n      )}\n      {/* antd 兼容：保留 ant-input-suffix class，消费方 CSS 可能依赖该选择器 */}\n      {suffix && (\n        <span className=\"ald-input-suffix ant-input-suffix tw-flex tw-items-center tw-pr-2 tw-text-[var(--content-secondary)]\">\n          {suffix}\n        </span>\n      )}\n      {countInfo && (\n        <span className=\"ald-input-count tw-pr-2 tw-text-[var(--content-tertiary)] tw-text-typography-caption\">\n          {countInfo}\n        </span>\n      )}\n      {addonAfter && (\n        <span className=\"ald-input-addon tw-border-l tw-border-solid tw-border-[var(--border-default)] tw-px-2 tw-text-[var(--content-secondary)]\">\n          {addonAfter}\n        </span>\n      )}\n    </span>\n  );\n});\n\nexport default Input;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Input/components/Input/index.tsx"],"sourcesContent":["import React, {\n  ReactNode,\n  forwardRef,\n  useContext,\n  useRef,\n  useState,\n} from 'react';\nimport DisabledContext from '../../../ConfigProvider/DisabledContext';\nimport SizeContext, { SizeType } from '../../../ConfigProvider/sizeContext';\nimport { CloseCircleFill } from '../../../Icon';\nimport { cn } from '../../../lib/utils';\nimport { useCompactItemContext } from '../../../Space/CompactContext';\nimport { getSemanticOwnerAriaProps } from '../../privateSemanticOwner';\n\ninterface IShowCountProps {\n  formatter: (args: { count: number; maxLength?: number }) => string;\n}\nexport type TSize = SizeType;\nexport type InputRef = HTMLInputElement & {\n  /** antd v4 compat — points to the underlying <input> element */\n  input?: HTMLInputElement | null;\n};\n\ntype ChangeEventHandler = (e: React.ChangeEvent<HTMLInputElement>) => void;\n\nexport interface IInputProps\n  extends Omit<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    | 'size'\n    | 'prefix'\n    | 'value'\n    | 'defaultValue'\n    | 'onChange'\n    | 'disabled'\n    | 'type'\n    | 'max'\n  > {\n  addonAfter?: ReactNode;\n  addonBefore?: ReactNode;\n  size?: TSize;\n  id?: string;\n  prefix?: ReactNode;\n  suffix?: ReactNode;\n  allowClear?: boolean;\n  disabled?: boolean;\n  showCount?: boolean | IShowCountProps;\n  maxLength?: number;\n  minLength?: number;\n  max?: number;\n  value?: string;\n  defaultValue?: string;\n  onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;\n  onChange?: ChangeEventHandler;\n  className?: string;\n  style?: React.CSSProperties;\n  placeholder?: string;\n  type?: string;\n  bordered?: boolean;\n  status?: 'error' | 'warning' | '';\n  autoComplete?: string;\n  autoFocus?: boolean;\n  readOnly?: boolean;\n  width?: number | string;\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n  onCompositionStart?: React.CompositionEventHandler<HTMLInputElement>;\n  onCompositionEnd?: React.CompositionEventHandler<HTMLInputElement>;\n  /** 透传到内部 input 元素的 data-testid，用于自动化测试定位 */\n  'data-testid'?: string;\n  /** 透传到内部 input 元素的 aria-label，用于可访问性与自动化测试定位 */\n  'aria-label'?: string;\n}\n\nexport function getSizeType(sizeType: TSize): TSize {\n  if (['small', 'middle', 'large'].includes(sizeType || '')) {\n    return sizeType;\n  }\n  return 'middle';\n}\n\nconst Input = forwardRef<InputRef, IInputProps>((props, ref) => {\n  const {\n    size: customSize,\n    className,\n    bordered = true,\n    status,\n    disabled,\n    allowClear,\n    prefix,\n    suffix,\n    addonBefore,\n    addonAfter,\n    showCount,\n    maxLength,\n    minLength,\n    value: controlledValue,\n    defaultValue,\n    onChange,\n    onPressEnter,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    onCompositionStart,\n    onCompositionEnd,\n    placeholder,\n    type,\n    id,\n    autoComplete = 'off',\n    autoFocus,\n    readOnly,\n    width,\n    style,\n    'data-testid': dataTestid,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    'aria-required': ariaRequired,\n    'aria-busy': ariaBusy,\n    'aria-disabled': ariaDisabled,\n    'aria-readonly': ariaReadonly,\n    ...restInputProps\n  } = props;\n\n  const contextDisabled = useContext(DisabledContext);\n  const mergedDisabled = disabled ?? contextDisabled;\n\n  const contentSize = useContext(SizeContext);\n  const { compactSize, compactItemClassnames } =\n    useCompactItemContext('ald-input');\n  const size = customSize || compactSize || contentSize || 'middle';\n\n  const isControlled = 'value' in props;\n  const [innerValue, setInnerValue] = useState(defaultValue ?? '');\n  const currentValue = isControlled ? controlledValue ?? '' : innerValue;\n  const [focused, setFocused] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  React.useImperativeHandle(ref, () => {\n    const el = inputRef.current!;\n    // Expose .input for antd v4 compat (ref.current.input.focus())\n    (el as InputRef).input = el;\n    return el as InputRef;\n  });\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!isControlled) setInnerValue(e.target.value);\n    onChange?.(e);\n  };\n\n  const handleClear = () => {\n    // 通过原生 input 事件统一触发 React onChange，确保事件契约完整且只回调一次。\n    const nativeEvent = new Event('input', { bubbles: true });\n    if (inputRef.current) {\n      const nativeSetter = Object.getOwnPropertyDescriptor(\n        HTMLInputElement.prototype,\n        'value',\n      )?.set;\n      nativeSetter?.call(inputRef.current, '');\n      inputRef.current.dispatchEvent(nativeEvent);\n    }\n    if (!isControlled) setInnerValue('');\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Enter') onPressEnter?.(e);\n    onKeyDown?.(e);\n  };\n\n  const showClearIcon = allowClear && currentValue && !mergedDisabled;\n\n  const countInfo =\n    showCount && typeof showCount === 'object'\n      ? showCount.formatter({\n          count: currentValue.length,\n          maxLength,\n        })\n      : showCount\n      ? `${currentValue.length}${maxLength ? `/${maxLength}` : ''}`\n      : null;\n\n  // Build compact-mode border-radius and margin overrides\n  const compactClasses = compactItemClassnames\n    ? cn(\n        !compactItemClassnames['ald-input-compact-first-item'] &&\n          '!tw-rounded-l-none',\n        !compactItemClassnames['ald-input-compact-last-item'] &&\n          '!tw-rounded-r-none',\n        !compactItemClassnames['ald-input-compact-first-item'] && '-tw-ml-px',\n      )\n    : undefined;\n\n  return (\n    <span\n      className={cn(\n        // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n        'ald-input ant-input-affix-wrapper tw-inline-flex tw-w-full tw-items-center tw-bg-[var(--background-default)] tw-transition-[border-color,box-shadow] tw-duration-150 tw-ease-out',\n        bordered &&\n          'tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)]',\n        !mergedDisabled && [\n          'has-[input:focus-visible]:tw-shadow-[inset_0_0_0_1px_var(--focus-ring)]',\n          'forced-colors:has-[input:focus-visible]:tw-outline',\n          'forced-colors:has-[input:focus-visible]:tw-outline-2',\n          'forced-colors:has-[input:focus-visible]:tw-outline-offset-2',\n          'forced-colors:has-[input:focus-visible]:tw-outline-[Highlight]',\n        ],\n        // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n        // 保留既有 border 状态以维持 antd 兼容；焦点由上方的 Focus State Layer 独立呈现。\n        focused && 'ant-input-affix-wrapper-focused',\n        focused && !status && '!tw-border-[var(--border-brand-strong)]',\n        `ald-input-${getSizeType(size)}`,\n        // Typography Foundation: the wrapper owns the approved Body Dense\n        // context for the editable value and placeholder. Count opts into its\n        // approved Caption role below.\n        'tw-text-typography-body-dense',\n        // Component Geometry: height belongs to the Input envelope, not to a\n        // relationship-spacing Primitive.\n        size === 'small' && 'tw-h-[28px]',\n        size === 'large' && 'tw-h-[36px]',\n        (size === 'middle' || !size) && 'tw-h-[32px]',\n        status === 'error' &&\n          `ald-input-error tw-border-[var(--border-negative-strong)]`,\n        status === 'warning' &&\n          `ald-input-warning tw-border-[var(--border-warning-subtle)]`,\n        mergedDisabled &&\n          'ald-input-disabled tw-cursor-not-allowed tw-bg-[var(--background-neutral-subtle)] tw-text-[var(--content-secondary)]',\n        compactClasses,\n        className,\n      )}\n      style={{\n        ...style,\n        width,\n      }}\n      onMouseDown={(e) => {\n        // 点击 wrapper 非 input 区域时：\n        // 如果 input 已聚焦 → preventDefault 防止点击 wrapper 导致丢焦\n        // 如果 input 未聚焦 → 不阻止默认行为，让浏览器正常处理 blur 上一个元素\n        if (e.target !== inputRef.current) {\n          if (document.activeElement === inputRef.current) {\n            e.preventDefault();\n          }\n        }\n      }}\n      onMouseUp={(e) => {\n        // 在 mouseUp 时将焦点转发给内部 input（兼容 prefix/suffix/padding 区域的点击）\n        if (e.target !== inputRef.current && inputRef.current) {\n          inputRef.current.focus();\n        }\n      }}\n    >\n      {addonBefore && (\n        <span className=\"ald-input-addon tw-flex tw-shrink-0 tw-items-center tw-self-stretch tw-border-r tw-border-solid tw-border-[var(--border-default)] tw-bg-[var(--background-neutral-subtle)] tw-px-3 tw-text-[var(--content-secondary)]\">\n          {addonBefore}\n        </span>\n      )}\n      {/* antd 兼容：保留 ant-input-prefix class，消费方 CSS 可能依赖该选择器 */}\n      {prefix && (\n        <span className=\"ald-input-prefix ant-input-prefix tw-flex tw-shrink-0 tw-items-center tw-pl-2 tw-text-[var(--content-secondary)]\">\n          {prefix}\n        </span>\n      )}\n      {/*\n       * Value Affordance and Text Containment remain Constraint-owned and\n       * Blocked. These shrink guards reserve local Geometry for affordances;\n       * they do not define a spacing Primitive or Mapping.\n       */}\n      <input\n        ref={inputRef}\n        id={id}\n        type={type || 'text'}\n        className=\"tw-min-w-0 tw-flex-1 tw-self-stretch tw-border-0 tw-bg-[var(--action-ghost-normal)] tw-px-2 tw-text-[var(--content-primary)] tw-text-inherit tw-outline-none\"\n        value={currentValue}\n        onChange={handleChange}\n        onBlur={(e) => {\n          setFocused(false);\n          onBlur?.(e);\n        }}\n        onFocus={(e) => {\n          setFocused(true);\n          onFocus?.(e);\n        }}\n        onKeyDown={handleKeyDown}\n        onCompositionStart={onCompositionStart}\n        onCompositionEnd={onCompositionEnd}\n        disabled={mergedDisabled}\n        placeholder={placeholder}\n        maxLength={maxLength}\n        minLength={minLength}\n        autoComplete={autoComplete}\n        autoFocus={autoFocus}\n        readOnly={readOnly}\n        spellCheck={false}\n        data-testid={dataTestid}\n        {...getSemanticOwnerAriaProps({\n          'aria-label': ariaLabel,\n          'aria-labelledby': ariaLabelledBy,\n          'aria-describedby': ariaDescribedBy,\n          'aria-invalid':\n            ariaInvalid ?? (status === 'error' ? true : undefined),\n          'aria-required': ariaRequired,\n          'aria-busy': ariaBusy,\n          'aria-disabled': ariaDisabled,\n          'aria-readonly': ariaReadonly,\n        })}\n        {...restInputProps}\n      />\n      {showClearIcon && (\n        <span\n          // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n          className=\"ald-input-clear ant-input-clear-icon tw-flex tw-shrink-0 tw-cursor-pointer tw-items-center tw-pr-1\"\n          onClick={handleClear}\n        >\n          <CloseCircleFill size={16} color=\"var(--content-secondary)\" />\n        </span>\n      )}\n      {/* antd 兼容：保留 ant-input-suffix class，消费方 CSS 可能依赖该选择器 */}\n      {suffix && (\n        <span className=\"ald-input-suffix ant-input-suffix tw-flex tw-shrink-0 tw-items-center tw-pr-2 tw-text-[var(--content-secondary)]\">\n          {suffix}\n        </span>\n      )}\n      {countInfo && (\n        <span className=\"ald-input-count tw-shrink-0 tw-pr-2 tw-text-[var(--content-tertiary)] tw-text-typography-caption\">\n          {countInfo}\n        </span>\n      )}\n      {addonAfter && (\n        <span className=\"ald-input-addon tw-border-l tw-border-solid tw-border-[var(--border-default)] tw-px-2 tw-text-[var(--content-secondary)]\">\n          {addonAfter}\n        </span>\n      )}\n    </span>\n  );\n});\n\nexport default Input;\n"],"mappings":";;;;;;;;;AA0EA,SAAgB,YAAY,UAAwB;AAClD,KAAI;EAAC;EAAS;EAAU;EAAQ,CAAC,SAAS,YAAY,GAAG,CACvD,QAAO;AAET,QAAO;;AAGT,IAAM,QAAQ,YAAmC,OAAO,QAAQ;CAC9D,MAAM,EACJ,MAAM,YACN,WACA,WAAW,MACX,QACA,UACA,YACA,QACA,QACA,aACA,YACA,WACA,WACA,WACA,OAAO,iBACP,cACA,UACA,cACA,QACA,SACA,WACA,oBACA,kBACA,aACA,MACA,IACA,eAAe,OACf,WACA,UACA,OACA,OACA,eAAe,YACf,cAAc,WACd,mBAAmB,gBACnB,oBAAoB,iBACpB,gBAAgB,aAChB,iBAAiB,cACjB,aAAa,UACb,iBAAiB,cACjB,iBAAiB,cACjB,GAAG,mBACD;CAEJ,MAAM,kBAAkB,WAAW,gBAAgB;CACnD,MAAM,iBAAiB,YAAY;CAEnC,MAAM,cAAc,WAAW,YAAY;CAC3C,MAAM,EAAE,aAAa,0BACnB,sBAAsB,YAAY;CACpC,MAAM,OAAO,cAAc,eAAe,eAAe;CAEzD,MAAM,eAAe,WAAW;CAChC,MAAM,CAAC,YAAY,iBAAiB,SAAS,gBAAgB,GAAG;CAChE,MAAM,eAAe,eAAe,mBAAmB,KAAK;CAC5D,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,WAAW,OAAyB,KAAK;AAE/C,OAAM,oBAAoB,WAAW;EACnC,MAAM,KAAK,SAAS;AAEnB,KAAgB,QAAQ;AACzB,SAAO;GACP;CAEF,MAAM,gBAAgB,MAA2C;AAC/D,MAAI,CAAC,aAAc,eAAc,EAAE,OAAO,MAAM;AAChD,aAAW,EAAE;;CAGf,MAAM,oBAAoB;EAExB,MAAM,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,MAAM,CAAC;AACzD,MAAI,SAAS,SAAS;AAKpB,IAJqB,OAAO,yBAC1B,iBAAiB,WACjB,QACD,EAAE,MACW,KAAK,SAAS,SAAS,GAAG;AACxC,YAAS,QAAQ,cAAc,YAAY;;AAE7C,MAAI,CAAC,aAAc,eAAc,GAAG;;CAGtC,MAAM,iBAAiB,MAA6C;AAClE,MAAI,EAAE,QAAQ,QAAS,gBAAe,EAAE;AACxC,cAAY,EAAE;;CAGhB,MAAM,gBAAgB,cAAc,gBAAgB,CAAC;CAErD,MAAM,YACJ,aAAa,OAAO,cAAc,WAC9B,UAAU,UAAU;EAClB,OAAO,aAAa;EACpB;EACD,CAAC,GACF,YACA,GAAG,aAAa,SAAS,YAAY,IAAI,cAAc,OACvD;CAGN,MAAM,iBAAiB,wBACnB,GACE,CAAC,sBAAsB,mCACrB,sBACF,CAAC,sBAAsB,kCACrB,sBACF,CAAC,sBAAsB,mCAAmC,YAC3D,GACD;AAEJ,QACE,qBAAC,QAAD;EACE,WAAW,GAET,oLACA,YACE,sFACF,CAAC,kBAAkB;GACjB;GACA;GACA;GACA;GACA;GACD,EAGD,WAAW,mCACX,WAAW,CAAC,UAAU,2CACtB,aAAa,YAAY,KAAK,IAI9B,iCAGA,SAAS,WAAW,eACpB,SAAS,WAAW,gBACnB,SAAS,YAAY,CAAC,SAAS,eAChC,WAAW,WACT,6DACF,WAAW,aACT,8DACF,kBACE,wHACF,gBACA,UACD;EACD,OAAO;GACL,GAAG;GACH;GACD;EACD,cAAc,MAAM;AAIlB,OAAI,EAAE,WAAW,SAAS,SACxB;QAAI,SAAS,kBAAkB,SAAS,QACtC,GAAE,gBAAgB;;;EAIxB,YAAY,MAAM;AAEhB,OAAI,EAAE,WAAW,SAAS,WAAW,SAAS,QAC5C,UAAS,QAAQ,OAAO;;YArD9B;GAyDG,eACC,oBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA;GAGR,UACC,oBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA;GAOT,oBAAC,SAAD;IACE,KAAK;IACD;IACJ,MAAM,QAAQ;IACd,WAAU;IACV,OAAO;IACP,UAAU;IACV,SAAS,MAAM;AACb,gBAAW,MAAM;AACjB,cAAS,EAAE;;IAEb,UAAU,MAAM;AACd,gBAAW,KAAK;AAChB,eAAU,EAAE;;IAEd,WAAW;IACS;IACF;IAClB,UAAU;IACG;IACF;IACA;IACG;IACH;IACD;IACV,YAAY;IACZ,eAAa;IACb,GAAI,0BAA0B;KAC5B,cAAc;KACd,mBAAmB;KACnB,oBAAoB;KACpB,gBACE,gBAAgB,WAAW,UAAU,OAAO;KAC9C,iBAAiB;KACjB,aAAa;KACb,iBAAiB;KACjB,iBAAiB;KAClB,CAAC;IACF,GAAI;IACJ,CAAA;GACD,iBACC,oBAAC,QAAD;IAEE,WAAU;IACV,SAAS;cAET,oBAAC,MAAD;KAAiB,MAAM;KAAI,OAAM;KAA6B,CAAA;IACzD,CAAA;GAGR,UACC,oBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA;GAER,aACC,oBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA;GAER,cACC,oBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA;GAEJ;;EAET"}

package/dist/Input/components/TextArea/index.js

@@ -2,12 +2,13 @@ import { cn } from "../../../lib/utils.js";
 import Memo from "../../../Icon/components/CloseCircleFill.js";
 import DisabledContext from "../../../ConfigProvider/DisabledContext.js";
 import SizeContext from "../../../ConfigProvider/sizeContext.js";
+import { getSemanticOwnerAriaProps } from "../../../_utils/formControlSemanticOwner.js";
 import { getSizeType } from "../Input/index.js";
 import React, { forwardRef, useContext, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/Input/components/TextArea/index.tsx
 var TextArea_default = forwardRef((props, ref) => {
-	const { bordered, border, size: customSize, disabled, className = "", allowClear = false, value: controlledValue, defaultValue, onChange, onPressEnter, maxLength, showCount, autoSize, placeholder, rows, onBlur, onFocus, onKeyDown, onCompositionStart, onCompositionEnd, style, ...restTextAreaProps } = props;
+	const { bordered, border, size: customSize, disabled, className = "", allowClear = false, value: controlledValue, defaultValue, onChange, onPressEnter, maxLength, showCount, autoSize, placeholder, rows, onBlur, onFocus, onKeyDown, onCompositionStart, onCompositionEnd, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-busy": ariaBusy, "aria-disabled": ariaDisabled, "aria-readonly": ariaReadonly, ...restTextAreaProps } = props;
 	const isBordered = bordered ?? border ?? true;
 	const contextDisabled = useContext(DisabledContext);
 	const mergedDisabled = disabled ?? contextDisabled;
@@ -33,7 +34,14 @@ var TextArea_default = forwardRef((props, ref) => {
 	const minRows = typeof autoSize === "object" ? autoSize.minRows : void 0;
 	const maxRows = typeof autoSize === "object" ? autoSize.maxRows : void 0;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("ald-input ald-input-textarea tw-relative", `ald-input-textarea-${getSizeType(size)}`, isBordered && "tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)]", mergedDisabled && "ald-input-disabled tw-opacity-50", className),
+		className: cn("ald-input ald-input-textarea tw-relative tw-transition-[border-color,box-shadow] tw-duration-150 tw-ease-out", `ald-input-textarea-${getSizeType(size)}`, isBordered && "tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)]", !mergedDisabled && [
+			"has-[textarea:focus]:!tw-border-[var(--border-brand-strong)]",
+			"has-[textarea:focus-visible]:tw-shadow-[inset_0_0_0_1px_var(--focus-ring)]",
+			"forced-colors:has-[textarea:focus-visible]:tw-outline",
+			"forced-colors:has-[textarea:focus-visible]:tw-outline-2",
+			"forced-colors:has-[textarea:focus-visible]:tw-outline-offset-2",
+			"forced-colors:has-[textarea:focus-visible]:tw-outline-[Highlight]"
+		], mergedDisabled && "ald-input-disabled tw-cursor-not-allowed tw-bg-[var(--background-neutral-subtle)] tw-text-[var(--content-secondary)]", className),
 		style,
 		children: [
 			/* @__PURE__ */ jsx("textarea", {
@@ -52,6 +60,16 @@ var TextArea_default = forwardRef((props, ref) => {
 				rows: rows || (minRows ?? 3),
 				spellCheck: false,
 				autoComplete: "off",
+				...getSemanticOwnerAriaProps({
+					"aria-label": ariaLabel,
+					"aria-labelledby": ariaLabelledBy,
+					"aria-describedby": ariaDescribedBy,
+					"aria-invalid": ariaInvalid,
+					"aria-required": ariaRequired,
+					"aria-busy": ariaBusy,
+					"aria-disabled": ariaDisabled,
+					"aria-readonly": ariaReadonly
+				}),
 				...restTextAreaProps,
 				style: {
 					minHeight: minRows ? `${minRows * 22}px` : void 0,

package/dist/Input/components/TextArea/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Input/components/TextArea/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useRef, useState } from 'react';\nimport DisabledContext from '../../../ConfigProvider/DisabledContext';\nimport SizeContext from '../../../ConfigProvider/sizeContext';\nimport { CloseCircleFill } from '../../../Icon';\nimport { cn } from '../../../lib/utils';\nimport { TSize, getSizeType } from '../Input';\n\nexport type TextAreaRef = HTMLTextAreaElement;\n\nexport interface ITextAreaProps\n  extends Omit<\n    React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    'size' | 'value' | 'defaultValue' | 'onChange' | 'disabled' | 'rows'\n  > {\n  autoFocus?: boolean;\n  allowClear?: boolean;\n  autoSize?: boolean | { minRows?: number; maxRows?: number };\n  defaultValue?: string;\n  maxLength?: number;\n  showCount?:\n    | boolean\n    | { formatter: (args: { count: number; maxLength?: number }) => string };\n  value?: string;\n  onPressEnter?: React.KeyboardEventHandler<HTMLTextAreaElement>;\n  onResize?: (size: { width: number; height: number }) => void;\n  border?: boolean;\n  bordered?: boolean;\n  className?: string;\n  size?: TSize;\n  disabled?: boolean;\n  placeholder?: string;\n  rows?: number;\n  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;\n  onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;\n  onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;\n  onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;\n  onCompositionStart?: React.CompositionEventHandler<HTMLTextAreaElement>;\n  onCompositionEnd?: React.CompositionEventHandler<HTMLTextAreaElement>;\n  style?: React.CSSProperties;\n}\n\nexport default forwardRef<TextAreaRef, ITextAreaProps>((props, ref) => {\n  const {\n    bordered,\n    border,\n    size: customSize,\n    disabled,\n    className = '',\n    allowClear = false,\n    value: controlledValue,\n    defaultValue,\n    onChange,\n    onPressEnter,\n    maxLength,\n    showCount,\n    autoSize,\n    placeholder,\n    rows,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    onCompositionStart,\n    onCompositionEnd,\n    style,\n    ...restTextAreaProps\n  } = props;\n\n  const isBordered = bordered ?? border ?? true;\n\n  const contextDisabled = useContext(DisabledContext);\n  const mergedDisabled = disabled ?? contextDisabled;\n\n  const contentSize = useContext(SizeContext);\n  const size = customSize || contentSize || 'middle';\n  const isControlled = 'value' in props;\n  const [innerValue, setInnerValue] = useState(defaultValue ?? '');\n  const currentValue = isControlled ? controlledValue ?? '' : innerValue;\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n  React.useImperativeHandle(ref, () => textareaRef.current!);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    if (!isControlled) setInnerValue(e.target.value);\n    onChange?.(e);\n  };\n\n  const handleClear = () => {\n    if (!isControlled) setInnerValue('');\n    onChange?.({\n      target: { value: '' },\n    } as React.ChangeEvent<HTMLTextAreaElement>);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (e.key === 'Enter') onPressEnter?.(e);\n    onKeyDown?.(e);\n  };\n\n  const minRows = typeof autoSize === 'object' ? autoSize.minRows : undefined;\n  const maxRows = typeof autoSize === 'object' ? autoSize.maxRows : undefined;\n\n  return (\n    <div\n      className={cn(\n        'ald-input ald-input-textarea tw-relative',\n        `ald-input-textarea-${getSizeType(size)}`,\n        isBordered &&\n          'tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)]',\n        mergedDisabled && 'ald-input-disabled tw-opacity-50',\n        className,\n      )}\n      style={style}\n    >\n      <textarea\n        ref={textareaRef}\n        className=\"tw-w-full tw-resize-y tw-border-0 tw-bg-[var(--action-ghost-normal)] tw-px-3 tw-py-2 tw-text-[var(--content-primary)] tw-outline-none tw-text-typography-body-dense\"\n        value={currentValue}\n        onChange={handleChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={handleKeyDown}\n        onCompositionStart={onCompositionStart}\n        onCompositionEnd={onCompositionEnd}\n        disabled={mergedDisabled}\n        placeholder={placeholder}\n        maxLength={maxLength}\n        rows={rows || (minRows ?? 3)}\n        spellCheck={false}\n        autoComplete=\"off\"\n        {...restTextAreaProps}\n        style={{\n          minHeight: minRows ? `${minRows * 22}px` : undefined,\n          maxHeight: maxRows ? `${maxRows * 22}px` : undefined,\n        }}\n      />\n      {allowClear && currentValue && !mergedDisabled && (\n        <span\n          className=\"tw-absolute tw-right-2 tw-top-2 tw-cursor-pointer\"\n          onClick={handleClear}\n        >\n          <CloseCircleFill size={16} color=\"var(--content-secondary)\" />\n        </span>\n      )}\n      {showCount && (\n        <div className=\"tw-px-2 tw-pb-1 tw-text-right tw-text-[var(--content-tertiary)] tw-text-typography-caption\">\n          {typeof showCount === 'object'\n            ? showCount.formatter({ count: currentValue.length, maxLength })\n            : `${currentValue.length}${maxLength ? `/${maxLength}` : ''}`}\n        </div>\n      )}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;AAyCA,IAAA,mBAAe,YAAyC,OAAO,QAAQ;CACrE,MAAM,EACJ,UACA,QACA,MAAM,YACN,UACA,YAAY,IACZ,aAAa,OACb,OAAO,iBACP,cACA,UACA,cACA,WACA,WACA,UACA,aACA,MACA,QACA,SACA,WACA,oBACA,kBACA,OACA,GAAG,sBACD;CAEJ,MAAM,aAAa,YAAY,UAAU;CAEzC,MAAM,kBAAkB,WAAW,gBAAgB;CACnD,MAAM,iBAAiB,YAAY;CAEnC,MAAM,cAAc,WAAW,YAAY;CAC3C,MAAM,OAAO,cAAc,eAAe;CAC1C,MAAM,eAAe,WAAW;CAChC,MAAM,CAAC,YAAY,iBAAiB,SAAS,gBAAgB,GAAG;CAChE,MAAM,eAAe,eAAe,mBAAmB,KAAK;CAC5D,MAAM,cAAc,OAA4B,KAAK;AAErD,OAAM,oBAAoB,WAAW,YAAY,QAAS;CAE1D,MAAM,gBAAgB,MAA8C;AAClE,MAAI,CAAC,aAAc,eAAc,EAAE,OAAO,MAAM;AAChD,aAAW,EAAE;;CAGf,MAAM,oBAAoB;AACxB,MAAI,CAAC,aAAc,eAAc,GAAG;AACpC,aAAW,EACT,QAAQ,EAAE,OAAO,IAAI,EACtB,CAA2C;;CAG9C,MAAM,iBAAiB,MAAgD;AACrE,MAAI,EAAE,QAAQ,QAAS,gBAAe,EAAE;AACxC,cAAY,EAAE;;CAGhB,MAAM,UAAU,OAAO,aAAa,WAAW,SAAS,UAAU;CAClE,MAAM,UAAU,OAAO,aAAa,WAAW,SAAS,UAAU;AAElE,QACE,qBAAC,OAAD;EACE,WAAW,GACT,4CACA,sBAAsB,YAAY,KAAK,IACvC,cACE,sFACF,kBAAkB,oCAClB,UACD;EACM;YATT;GAWE,oBAAC,YAAD;IACE,KAAK;IACL,WAAU;IACV,OAAO;IACP,UAAU;IACF;IACC;IACT,WAAW;IACS;IACF;IAClB,UAAU;IACG;IACF;IACX,MAAM,SAAS,WAAW;IAC1B,YAAY;IACZ,cAAa;IACb,GAAI;IACJ,OAAO;KACL,WAAW,UAAU,GAAG,UAAU,GAAG,MAAM;KAC3C,WAAW,UAAU,GAAG,UAAU,GAAG,MAAM;KAC5C;IACD,CAAA;GACD,cAAc,gBAAgB,CAAC,kBAC9B,oBAAC,QAAD;IACE,WAAU;IACV,SAAS;cAET,oBAAC,MAAD;KAAiB,MAAM;KAAI,OAAM;KAA6B,CAAA;IACzD,CAAA;GAER,aACC,oBAAC,OAAD;IAAK,WAAU;cACZ,OAAO,cAAc,WAClB,UAAU,UAAU;KAAE,OAAO,aAAa;KAAQ;KAAW,CAAC,GAC9D,GAAG,aAAa,SAAS,YAAY,IAAI,cAAc;IACvD,CAAA;GAEJ;;EAER"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Input/components/TextArea/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useRef, useState } from 'react';\nimport DisabledContext from '../../../ConfigProvider/DisabledContext';\nimport SizeContext from '../../../ConfigProvider/sizeContext';\nimport { CloseCircleFill } from '../../../Icon';\nimport { cn } from '../../../lib/utils';\nimport { TSize, getSizeType } from '../Input';\nimport { getSemanticOwnerAriaProps } from '../../privateSemanticOwner';\n\nexport type TextAreaRef = HTMLTextAreaElement;\n\nexport interface ITextAreaProps\n  extends Omit<\n    React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    'size' | 'value' | 'defaultValue' | 'onChange' | 'disabled' | 'rows'\n  > {\n  autoFocus?: boolean;\n  allowClear?: boolean;\n  autoSize?: boolean | { minRows?: number; maxRows?: number };\n  defaultValue?: string;\n  maxLength?: number;\n  showCount?:\n    | boolean\n    | { formatter: (args: { count: number; maxLength?: number }) => string };\n  value?: string;\n  onPressEnter?: React.KeyboardEventHandler<HTMLTextAreaElement>;\n  onResize?: (size: { width: number; height: number }) => void;\n  border?: boolean;\n  bordered?: boolean;\n  className?: string;\n  size?: TSize;\n  disabled?: boolean;\n  placeholder?: string;\n  rows?: number;\n  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;\n  onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;\n  onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;\n  onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;\n  onCompositionStart?: React.CompositionEventHandler<HTMLTextAreaElement>;\n  onCompositionEnd?: React.CompositionEventHandler<HTMLTextAreaElement>;\n  style?: React.CSSProperties;\n}\n\nexport default forwardRef<TextAreaRef, ITextAreaProps>((props, ref) => {\n  const {\n    bordered,\n    border,\n    size: customSize,\n    disabled,\n    className = '',\n    allowClear = false,\n    value: controlledValue,\n    defaultValue,\n    onChange,\n    onPressEnter,\n    maxLength,\n    showCount,\n    autoSize,\n    placeholder,\n    rows,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    onCompositionStart,\n    onCompositionEnd,\n    style,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    'aria-required': ariaRequired,\n    'aria-busy': ariaBusy,\n    'aria-disabled': ariaDisabled,\n    'aria-readonly': ariaReadonly,\n    ...restTextAreaProps\n  } = props;\n\n  const isBordered = bordered ?? border ?? true;\n\n  const contextDisabled = useContext(DisabledContext);\n  const mergedDisabled = disabled ?? contextDisabled;\n\n  const contentSize = useContext(SizeContext);\n  const size = customSize || contentSize || 'middle';\n  const isControlled = 'value' in props;\n  const [innerValue, setInnerValue] = useState(defaultValue ?? '');\n  const currentValue = isControlled ? controlledValue ?? '' : innerValue;\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n  React.useImperativeHandle(ref, () => textareaRef.current!);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    if (!isControlled) setInnerValue(e.target.value);\n    onChange?.(e);\n  };\n\n  const handleClear = () => {\n    if (!isControlled) setInnerValue('');\n    onChange?.({\n      target: { value: '' },\n    } as React.ChangeEvent<HTMLTextAreaElement>);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (e.key === 'Enter') onPressEnter?.(e);\n    onKeyDown?.(e);\n  };\n\n  const minRows = typeof autoSize === 'object' ? autoSize.minRows : undefined;\n  const maxRows = typeof autoSize === 'object' ? autoSize.maxRows : undefined;\n\n  return (\n    <div\n      className={cn(\n        'ald-input ald-input-textarea tw-relative tw-transition-[border-color,box-shadow] tw-duration-150 tw-ease-out',\n        `ald-input-textarea-${getSizeType(size)}`,\n        isBordered &&\n          'tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)]',\n        !mergedDisabled && [\n          'has-[textarea:focus]:!tw-border-[var(--border-brand-strong)]',\n          'has-[textarea:focus-visible]:tw-shadow-[inset_0_0_0_1px_var(--focus-ring)]',\n          'forced-colors:has-[textarea:focus-visible]:tw-outline',\n          'forced-colors:has-[textarea:focus-visible]:tw-outline-2',\n          'forced-colors:has-[textarea:focus-visible]:tw-outline-offset-2',\n          'forced-colors:has-[textarea:focus-visible]:tw-outline-[Highlight]',\n        ],\n        mergedDisabled &&\n          'ald-input-disabled tw-cursor-not-allowed tw-bg-[var(--background-neutral-subtle)] tw-text-[var(--content-secondary)]',\n        className,\n      )}\n      style={style}\n    >\n      <textarea\n        ref={textareaRef}\n        className=\"tw-w-full tw-resize-y tw-border-0 tw-bg-[var(--action-ghost-normal)] tw-px-3 tw-py-2 tw-text-[var(--content-primary)] tw-outline-none tw-text-typography-body-dense\"\n        value={currentValue}\n        onChange={handleChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={handleKeyDown}\n        onCompositionStart={onCompositionStart}\n        onCompositionEnd={onCompositionEnd}\n        disabled={mergedDisabled}\n        placeholder={placeholder}\n        maxLength={maxLength}\n        rows={rows || (minRows ?? 3)}\n        spellCheck={false}\n        autoComplete=\"off\"\n        {...getSemanticOwnerAriaProps({\n          'aria-label': ariaLabel,\n          'aria-labelledby': ariaLabelledBy,\n          'aria-describedby': ariaDescribedBy,\n          'aria-invalid': ariaInvalid,\n          'aria-required': ariaRequired,\n          'aria-busy': ariaBusy,\n          'aria-disabled': ariaDisabled,\n          'aria-readonly': ariaReadonly,\n        })}\n        {...restTextAreaProps}\n        style={{\n          minHeight: minRows ? `${minRows * 22}px` : undefined,\n          maxHeight: maxRows ? `${maxRows * 22}px` : undefined,\n        }}\n      />\n      {allowClear && currentValue && !mergedDisabled && (\n        <span\n          className=\"tw-absolute tw-right-2 tw-top-2 tw-cursor-pointer\"\n          onClick={handleClear}\n        >\n          <CloseCircleFill size={16} color=\"var(--content-secondary)\" />\n        </span>\n      )}\n      {showCount && (\n        <div className=\"tw-px-2 tw-pb-1 tw-text-right tw-text-[var(--content-tertiary)] tw-text-typography-caption\">\n          {typeof showCount === 'object'\n            ? showCount.formatter({ count: currentValue.length, maxLength })\n            : `${currentValue.length}${maxLength ? `/${maxLength}` : ''}`}\n        </div>\n      )}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;AA0CA,IAAA,mBAAe,YAAyC,OAAO,QAAQ;CACrE,MAAM,EACJ,UACA,QACA,MAAM,YACN,UACA,YAAY,IACZ,aAAa,OACb,OAAO,iBACP,cACA,UACA,cACA,WACA,WACA,UACA,aACA,MACA,QACA,SACA,WACA,oBACA,kBACA,OACA,cAAc,WACd,mBAAmB,gBACnB,oBAAoB,iBACpB,gBAAgB,aAChB,iBAAiB,cACjB,aAAa,UACb,iBAAiB,cACjB,iBAAiB,cACjB,GAAG,sBACD;CAEJ,MAAM,aAAa,YAAY,UAAU;CAEzC,MAAM,kBAAkB,WAAW,gBAAgB;CACnD,MAAM,iBAAiB,YAAY;CAEnC,MAAM,cAAc,WAAW,YAAY;CAC3C,MAAM,OAAO,cAAc,eAAe;CAC1C,MAAM,eAAe,WAAW;CAChC,MAAM,CAAC,YAAY,iBAAiB,SAAS,gBAAgB,GAAG;CAChE,MAAM,eAAe,eAAe,mBAAmB,KAAK;CAC5D,MAAM,cAAc,OAA4B,KAAK;AAErD,OAAM,oBAAoB,WAAW,YAAY,QAAS;CAE1D,MAAM,gBAAgB,MAA8C;AAClE,MAAI,CAAC,aAAc,eAAc,EAAE,OAAO,MAAM;AAChD,aAAW,EAAE;;CAGf,MAAM,oBAAoB;AACxB,MAAI,CAAC,aAAc,eAAc,GAAG;AACpC,aAAW,EACT,QAAQ,EAAE,OAAO,IAAI,EACtB,CAA2C;;CAG9C,MAAM,iBAAiB,MAAgD;AACrE,MAAI,EAAE,QAAQ,QAAS,gBAAe,EAAE;AACxC,cAAY,EAAE;;CAGhB,MAAM,UAAU,OAAO,aAAa,WAAW,SAAS,UAAU;CAClE,MAAM,UAAU,OAAO,aAAa,WAAW,SAAS,UAAU;AAElE,QACE,qBAAC,OAAD;EACE,WAAW,GACT,gHACA,sBAAsB,YAAY,KAAK,IACvC,cACE,sFACF,CAAC,kBAAkB;GACjB;GACA;GACA;GACA;GACA;GACA;GACD,EACD,kBACE,wHACF,UACD;EACM;YAlBT;GAoBE,oBAAC,YAAD;IACE,KAAK;IACL,WAAU;IACV,OAAO;IACP,UAAU;IACF;IACC;IACT,WAAW;IACS;IACF;IAClB,UAAU;IACG;IACF;IACX,MAAM,SAAS,WAAW;IAC1B,YAAY;IACZ,cAAa;IACb,GAAI,0BAA0B;KAC5B,cAAc;KACd,mBAAmB;KACnB,oBAAoB;KACpB,gBAAgB;KAChB,iBAAiB;KACjB,aAAa;KACb,iBAAiB;KACjB,iBAAiB;KAClB,CAAC;IACF,GAAI;IACJ,OAAO;KACL,WAAW,UAAU,GAAG,UAAU,GAAG,MAAM;KAC3C,WAAW,UAAU,GAAG,UAAU,GAAG,MAAM;KAC5C;IACD,CAAA;GACD,cAAc,gBAAgB,CAAC,kBAC9B,oBAAC,QAAD;IACE,WAAU;IACV,SAAS;cAET,oBAAC,MAAD;KAAiB,MAAM;KAAI,OAAM;KAA6B,CAAA;IACzD,CAAA;GAER,aACC,oBAAC,OAAD;IAAK,WAAU;cACZ,OAAO,cAAc,WAClB,UAAU,UAAU;KAAE,OAAO,aAAa;KAAQ;KAAW,CAAC,GAC9D,GAAG,aAAa,SAAS,YAAY,IAAI,cAAc;IACvD,CAAA;GAEJ;;EAER"}

package/dist/Input/privateSemanticOwner.d.ts

@@ -0,0 +1,2 @@
+export { getSemanticOwnerAriaProps } from '../_utils/formControlSemanticOwner';
+export type { SemanticOwnerAriaProps } from '../_utils/formControlSemanticOwner';

package/dist/Input/privateSemanticOwner.js

@@ -0,0 +1 @@
+import "../_utils/formControlSemanticOwner.js";

package/dist/InputNumber/index.js

@@ -4,12 +4,19 @@ import SizeContext from "../ConfigProvider/sizeContext.js";
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/InputNumber/index.tsx
+function pickAriaProps(props) {
+	return Object.keys(props).reduce((ariaProps, key) => {
+		if (key.startsWith("aria-")) ariaProps[key] = props[key];
+		return ariaProps;
+	}, {});
+}
 function InputNumber(props) {
 	const { className, disabled: customDisabled, size: customSize, status, value: controlledValue, defaultValue, min = -Infinity, max = Infinity, step = 1, precision, onChange, onPressEnter, onBlur, onFocus, formatter, parser, prefix, addonBefore, addonAfter, placeholder, autoFocus, bordered = true, keyboard = true, readonly: readOnly, style, id, "data-testid": dataTestId, "aria-label": ariaLabel } = props;
 	const contentSize = useContext(SizeContext);
 	const size = customSize || contentSize || "middle";
 	const disabled = useContext(DisabledContext);
 	const mergedDisabled = customDisabled ?? disabled;
+	const nativeInputAriaProps = pickAriaProps(props);
 	const isControlled = "value" in props;
 	const [innerValue, setInnerValue] = useState(defaultValue ?? null);
 	const currentValue = isControlled ? controlledValue : innerValue;
@@ -83,19 +90,26 @@ function InputNumber(props) {
 	const radiusClasses = cn(size === "large" && "tw-rounded-[8px]", size === "small" && "tw-rounded-[4px]", size !== "large" && size !== "small" && "tw-rounded-[6px]");
 	const inputBox = /* @__PURE__ */ jsxs("div", {
 		"data-testid": !hasAddon ? dataTestId : void 0,
-		"aria-label": !hasAddon ? ariaLabel : void 0,
-		className: cn("ald-input-number tw-inline-flex tw-w-[90px] tw-min-w-0 tw-items-center tw-overflow-hidden", bordered && "tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)]", mergedDisabled ? "ald-input-number-disabled tw-cursor-not-allowed tw-bg-[var(--background-neutral-on-subtle)] tw-text-[var(--content-secondary)]" : "tw-bg-[var(--background-default)] tw-text-[var(--content-primary)] hover:tw-border-[var(--border-brand-strong)]", !hasAddon && sizeClasses, hasAddon ? "tw-h-auto tw-flex-1 tw-self-stretch tw-rounded-none" : radiusClasses, status === "error" && "tw-border-[var(--border-negative-strong)]", status === "warning" && "tw-border-[var(--border-warning-subtle)]", "focus-within:tw-border-[var(--border-brand-strong)] focus-within:tw-outline focus-within:tw-outline-1 focus-within:tw-outline-[var(--border-brand-strong)]", !hasAddon && className),
+		className: cn("ald-input-number tw-inline-flex tw-w-[90px] tw-min-w-0 tw-items-center tw-overflow-hidden tw-transition-[border-color,box-shadow] tw-duration-150 tw-ease-out", bordered && "tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)]", mergedDisabled ? "ald-input-number-disabled tw-cursor-not-allowed tw-bg-[var(--background-neutral-subtle)] tw-text-[var(--content-secondary)]" : "tw-bg-[var(--background-default)] tw-text-[var(--content-primary)] hover:tw-border-[var(--border-brand-strong)]", !hasAddon && sizeClasses, hasAddon ? "tw-h-auto tw-flex-1 tw-self-stretch tw-rounded-none" : radiusClasses, status === "error" && "tw-border-[var(--border-negative-strong)]", status === "warning" && "tw-border-[var(--border-warning-subtle)]", !mergedDisabled && [
+			!status && "has-[input:focus]:!tw-border-[var(--border-brand-strong)]",
+			"has-[input:focus-visible]:tw-shadow-[inset_0_0_0_1px_var(--focus-ring)]",
+			"forced-colors:has-[input:focus-visible]:tw-outline",
+			"forced-colors:has-[input:focus-visible]:tw-outline-2",
+			"forced-colors:has-[input:focus-visible]:tw-outline-offset-2",
+			"forced-colors:has-[input:focus-visible]:tw-outline-[Highlight]"
+		], !hasAddon && className),
 		style: !hasAddon ? style : void 0,
 		children: [prefix && /* @__PURE__ */ jsx("span", {
 			className: "tw-px-2 tw-text-[var(--content-secondary)]",
 			children: prefix
 		}), /* @__PURE__ */ jsx("input", {
+			...nativeInputAriaProps,
 			ref: inputRef,
 			id,
 			type: "text",
 			inputMode: "numeric",
 			size: 1,
-			className: cn("tw-min-w-0 tw-flex-1 tw-border-0 tw-bg-[var(--action-ghost-normal)] tw-px-[7px] tw-text-inherit tw-outline-none", mergedDisabled && "tw-cursor-not-allowed tw-text-[var(--content-secondary)]"),
+			className: cn("tw-min-w-0 tw-flex-1 tw-border-0 tw-bg-[var(--action-ghost-normal)] tw-px-[7px] tw-text-inherit tw-outline-none tw-text-typography-body-dense", mergedDisabled && "tw-cursor-not-allowed tw-text-[var(--content-secondary)]"),
 			value: displayValue,
 			onChange: handleChange,
 			onBlur: handleBlur,
@@ -104,13 +118,13 @@ function InputNumber(props) {
 			disabled: mergedDisabled,
 			readOnly,
 			autoFocus,
-			placeholder
+			placeholder,
+			"aria-label": ariaLabel
 		})]
 	});
 	if (!hasAddon) return inputBox;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-testid": dataTestId,
-		"aria-label": ariaLabel,
 		className: cn("ald-input-number-group tw-inline-flex tw-min-w-0 tw-items-stretch", sizeClasses, radiusClasses, mergedDisabled && "ald-input-number-disabled", className),
 		style,
 		children: [

package/dist/InputNumber/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/InputNumber/index.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { cn } from '../lib/utils';\nimport { IInputNumberProps } from './type';\n\nexport default function InputNumber(props: IInputNumberProps) {\n  const {\n    className,\n    disabled: customDisabled,\n    size: customSize,\n    status,\n    value: controlledValue,\n    defaultValue,\n    min = -Infinity,\n    max = Infinity,\n    step = 1,\n    precision,\n    onChange,\n    onPressEnter,\n    onBlur,\n    onFocus,\n    formatter,\n    parser,\n    prefix,\n    addonBefore,\n    addonAfter,\n    placeholder,\n    autoFocus,\n    bordered = true,\n    keyboard = true,\n    readonly: readOnly,\n    style,\n    id,\n    'data-testid': dataTestId,\n    'aria-label': ariaLabel,\n  } = props;\n\n  const contentSize = useContext(SizeContext);\n  const size = customSize || contentSize || 'middle';\n  const disabled = useContext(DisabledContext);\n  const mergedDisabled = customDisabled ?? disabled;\n\n  const isControlled = 'value' in props;\n  const [innerValue, setInnerValue] = useState<number | null | undefined>(\n    defaultValue ?? null,\n  );\n  const currentValue = isControlled ? controlledValue : innerValue;\n\n  const [inputStr, setInputStr] = useState(\n    currentValue !== null && currentValue !== undefined\n      ? String(currentValue)\n      : '',\n  );\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (currentValue !== null && currentValue !== undefined) {\n      setInputStr(String(currentValue));\n    } else {\n      setInputStr('');\n    }\n  }, [currentValue]);\n\n  const clamp = useCallback(\n    (val: number) => {\n      let v = Math.max(min, Math.min(max, val));\n      if (precision !== undefined) {\n        v = Number(v.toFixed(precision));\n      }\n      return v;\n    },\n    [min, max, precision],\n  );\n\n  const updateValue = useCallback(\n    (newVal: number | null) => {\n      const clamped = newVal !== null ? clamp(newVal) : null;\n      if (!isControlled) setInnerValue(clamped);\n      onChange?.(clamped);\n    },\n    [clamp, isControlled, onChange],\n  );\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const raw = e.target.value;\n    setInputStr(raw);\n    if (raw === '') {\n      // 清空立即同步到 value，对齐 antd 行为。\n      // 否则消费方\"清空后直接点确定\"（未 blur 触发 handleBlur 的 null 兜底）拿到的\n      // 仍是旧值，把已清空的筛选条件错误带进 query（被 release-2.3_test 周期实例\n      // 更多浮窗实测复现）。\n      updateValue(null);\n      return;\n    }\n    if (raw === '-') return;\n    const parsed = parser ? parser(raw) : Number(raw);\n    if (!isNaN(parsed)) {\n      updateValue(parsed);\n    }\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    if (inputStr === '' || inputStr === '-') {\n      updateValue(null);\n      setInputStr('');\n    } else {\n      const parsed = parser ? parser(inputStr) : Number(inputStr);\n      if (!isNaN(parsed)) {\n        const clamped = clamp(parsed);\n        updateValue(clamped);\n        setInputStr(String(clamped));\n      }\n    }\n    onBlur?.(e);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Enter') {\n      onPressEnter?.(e);\n    }\n    if (!keyboard) return;\n    const numStep = typeof step === 'string' ? Number(step) : step;\n    if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      updateValue(clamp((currentValue ?? 0) + numStep));\n    } else if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      updateValue(clamp((currentValue ?? 0) - numStep));\n    }\n  };\n\n  const displayValue = formatter\n    ? formatter(currentValue ?? undefined, {\n        userTyping: document.activeElement === inputRef.current,\n        input: inputStr,\n      })\n    : inputStr;\n\n  const hasAddon = addonBefore || addonAfter;\n\n  const sizeClasses = cn(\n    size === 'large' && 'ald-input-number-large tw-h-9 tw-text-base',\n    size === 'small' && 'ald-input-number-small tw-h-7 tw-text-xs',\n    size !== 'large' &&\n      size !== 'small' &&\n      'ald-input-number-middle tw-h-8 tw-text-sm',\n  );\n\n  const radiusClasses = cn(\n    size === 'large' && 'tw-rounded-[8px]',\n    size === 'small' && 'tw-rounded-[4px]',\n    size !== 'large' && size !== 'small' && 'tw-rounded-[6px]',\n  );\n\n  const inputBox = (\n    <div\n      data-testid={!hasAddon ? dataTestId : undefined}\n      aria-label={!hasAddon ? ariaLabel : undefined}\n      className={cn(\n        // 默认宽度 90px 与 antd InputNumber 对齐：input 上 size={1} 会让 intrinsic\n        // 宽度坍缩到 1 字符，若 wrapper 也不给宽度，整个组件在 flex / inline 上下\n        // 文里就只剩 ~9px。消费方可通过 className（`w-[xxx]`）或 style 覆盖。\n        'ald-input-number tw-inline-flex tw-w-[90px] tw-min-w-0 tw-items-center tw-overflow-hidden',\n        bordered &&\n          'tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)]',\n        mergedDisabled\n          ? 'ald-input-number-disabled tw-cursor-not-allowed tw-bg-[var(--background-neutral-on-subtle)] tw-text-[var(--content-secondary)]'\n          : 'tw-bg-[var(--background-default)] tw-text-[var(--content-primary)] hover:tw-border-[var(--border-brand-strong)]',\n        !hasAddon && sizeClasses,\n        hasAddon\n          ? 'tw-h-auto tw-flex-1 tw-self-stretch tw-rounded-none'\n          : radiusClasses,\n        status === 'error' && 'tw-border-[var(--border-negative-strong)]',\n        status === 'warning' && 'tw-border-[var(--border-warning-subtle)]',\n        'focus-within:tw-border-[var(--border-brand-strong)] focus-within:tw-outline focus-within:tw-outline-1 focus-within:tw-outline-[var(--border-brand-strong)]',\n        !hasAddon && className,\n      )}\n      style={!hasAddon ? style : undefined}\n    >\n      {prefix && (\n        <span className=\"tw-px-2 tw-text-[var(--content-secondary)]\">\n          {prefix}\n        </span>\n      )}\n      <input\n        ref={inputRef}\n        id={id}\n        type=\"text\"\n        inputMode=\"numeric\"\n        // size=1 让 <input> 的 intrinsic 宽度坍缩到 1 个字符，\n        // 在 flex 父容器中按 width / flex-1 受控，避免默认 size=20 把 inline-flex 外层撑出 ~150px 内容宽度。\n        size={1}\n        className={cn(\n          'tw-min-w-0 tw-flex-1 tw-border-0 tw-bg-[var(--action-ghost-normal)] tw-px-[7px] tw-text-inherit tw-outline-none',\n          mergedDisabled &&\n            'tw-cursor-not-allowed tw-text-[var(--content-secondary)]',\n        )}\n        value={displayValue}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        onFocus={onFocus}\n        onKeyDown={handleKeyDown}\n        disabled={mergedDisabled}\n        readOnly={readOnly}\n        autoFocus={autoFocus}\n        placeholder={placeholder}\n      />\n    </div>\n  );\n\n  if (!hasAddon) return inputBox;\n\n  return (\n    <div\n      data-testid={dataTestId}\n      aria-label={ariaLabel}\n      className={cn(\n        // 自然宽 = 内部 inputBox 默认 90px + addonBefore/After 内容宽。inline-flex\n        // 让外层按内容宽呈现，不再 `tw-w-full` 强吞 flex 父级剩余空间——后者会把\n        // 同 flex 行的 Slider 挤成 0 宽（看板\"图形宽度\"行只剩 thumb 圆点的根因）。\n        // `tw-min-w-0` 让本身作为 flex item 时受消费方 `flex-basis` / `width`\n        // 真正约束——默认 `min-width: auto = min-content` 会被内部 input(90px) +\n        // addon 撑到 ~126px，覆盖消费方的 flex-basis。内部 inputBox 已 `tw-min-w-0\n        // tw-overflow-hidden`，被约束后内容会按 input flex-1 收缩，不会溢出。\n        // 消费方需要撑满显式加 `tw-w-full` className，需要更窄/更宽直接覆盖宽度。\n        'ald-input-number-group tw-inline-flex tw-min-w-0 tw-items-stretch',\n        sizeClasses,\n        radiusClasses,\n        mergedDisabled && 'ald-input-number-disabled',\n        className,\n      )}\n      style={style}\n    >\n      {addonBefore && (\n        <span\n          className={cn(\n            'ald-input-number-addon tw-flex tw-shrink-0 tw-items-center tw-border tw-border-r-0 tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-neutral-subtle)] tw-px-3 tw-text-[var(--content-secondary)]',\n            size === 'large' && 'tw-rounded-l-[8px]',\n            size === 'small' && 'tw-rounded-l-[4px]',\n            size !== 'large' && size !== 'small' && 'tw-rounded-l-[6px]',\n          )}\n        >\n          {addonBefore}\n        </span>\n      )}\n      {inputBox}\n      {addonAfter && (\n        <span\n          className={cn(\n            'ald-input-number-addon tw-flex tw-shrink-0 tw-items-center tw-border tw-border-l-0 tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-neutral-subtle)] tw-px-3 tw-text-[var(--content-secondary)]',\n            size === 'large' && 'tw-rounded-r-[8px]',\n            size === 'small' && 'tw-rounded-r-[4px]',\n            size !== 'large' && size !== 'small' && 'tw-rounded-r-[6px]',\n          )}\n        >\n          {addonAfter}\n        </span>\n      )}\n    </div>\n  );\n}\n\nexport type { IInputNumberProps };\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/InputNumber/index.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { cn } from '../lib/utils';\nimport { IInputNumberProps } from './type';\n\nfunction pickAriaProps(props: IInputNumberProps): Record<string, unknown> {\n  return Object.keys(props).reduce<Record<string, unknown>>(\n    (ariaProps, key) => {\n      if (key.startsWith('aria-')) {\n        ariaProps[key] = props[key as keyof IInputNumberProps];\n      }\n      return ariaProps;\n    },\n    {},\n  );\n}\n\nexport default function InputNumber(props: IInputNumberProps) {\n  const {\n    className,\n    disabled: customDisabled,\n    size: customSize,\n    status,\n    value: controlledValue,\n    defaultValue,\n    min = -Infinity,\n    max = Infinity,\n    step = 1,\n    precision,\n    onChange,\n    onPressEnter,\n    onBlur,\n    onFocus,\n    formatter,\n    parser,\n    prefix,\n    addonBefore,\n    addonAfter,\n    placeholder,\n    autoFocus,\n    bordered = true,\n    keyboard = true,\n    readonly: readOnly,\n    style,\n    id,\n    'data-testid': dataTestId,\n    'aria-label': ariaLabel,\n  } = props;\n\n  const contentSize = useContext(SizeContext);\n  const size = customSize || contentSize || 'middle';\n  const disabled = useContext(DisabledContext);\n  const mergedDisabled = customDisabled ?? disabled;\n  const nativeInputAriaProps = pickAriaProps(props);\n\n  const isControlled = 'value' in props;\n  const [innerValue, setInnerValue] = useState<number | null | undefined>(\n    defaultValue ?? null,\n  );\n  const currentValue = isControlled ? controlledValue : innerValue;\n\n  const [inputStr, setInputStr] = useState(\n    currentValue !== null && currentValue !== undefined\n      ? String(currentValue)\n      : '',\n  );\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (currentValue !== null && currentValue !== undefined) {\n      setInputStr(String(currentValue));\n    } else {\n      setInputStr('');\n    }\n  }, [currentValue]);\n\n  const clamp = useCallback(\n    (val: number) => {\n      let v = Math.max(min, Math.min(max, val));\n      if (precision !== undefined) {\n        v = Number(v.toFixed(precision));\n      }\n      return v;\n    },\n    [min, max, precision],\n  );\n\n  const updateValue = useCallback(\n    (newVal: number | null) => {\n      const clamped = newVal !== null ? clamp(newVal) : null;\n      if (!isControlled) setInnerValue(clamped);\n      onChange?.(clamped);\n    },\n    [clamp, isControlled, onChange],\n  );\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const raw = e.target.value;\n    setInputStr(raw);\n    if (raw === '') {\n      // 清空立即同步到 value，对齐 antd 行为。\n      // 否则消费方\"清空后直接点确定\"（未 blur 触发 handleBlur 的 null 兜底）拿到的\n      // 仍是旧值，把已清空的筛选条件错误带进 query（被 release-2.3_test 周期实例\n      // 更多浮窗实测复现）。\n      updateValue(null);\n      return;\n    }\n    if (raw === '-') return;\n    const parsed = parser ? parser(raw) : Number(raw);\n    if (!isNaN(parsed)) {\n      updateValue(parsed);\n    }\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    if (inputStr === '' || inputStr === '-') {\n      updateValue(null);\n      setInputStr('');\n    } else {\n      const parsed = parser ? parser(inputStr) : Number(inputStr);\n      if (!isNaN(parsed)) {\n        const clamped = clamp(parsed);\n        updateValue(clamped);\n        setInputStr(String(clamped));\n      }\n    }\n    onBlur?.(e);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Enter') {\n      onPressEnter?.(e);\n    }\n    if (!keyboard) return;\n    const numStep = typeof step === 'string' ? Number(step) : step;\n    if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      updateValue(clamp((currentValue ?? 0) + numStep));\n    } else if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      updateValue(clamp((currentValue ?? 0) - numStep));\n    }\n  };\n\n  const displayValue = formatter\n    ? formatter(currentValue ?? undefined, {\n        userTyping: document.activeElement === inputRef.current,\n        input: inputStr,\n      })\n    : inputStr;\n\n  const hasAddon = addonBefore || addonAfter;\n\n  const sizeClasses = cn(\n    size === 'large' && 'ald-input-number-large tw-h-9 tw-text-base',\n    size === 'small' && 'ald-input-number-small tw-h-7 tw-text-xs',\n    size !== 'large' &&\n      size !== 'small' &&\n      'ald-input-number-middle tw-h-8 tw-text-sm',\n  );\n\n  const radiusClasses = cn(\n    size === 'large' && 'tw-rounded-[8px]',\n    size === 'small' && 'tw-rounded-[4px]',\n    size !== 'large' && size !== 'small' && 'tw-rounded-[6px]',\n  );\n\n  const inputBox = (\n    <div\n      data-testid={!hasAddon ? dataTestId : undefined}\n      className={cn(\n        // 默认宽度 90px 与 antd InputNumber 对齐：input 上 size={1} 会让 intrinsic\n        // 宽度坍缩到 1 字符，若 wrapper 也不给宽度，整个组件在 flex / inline 上下\n        // 文里就只剩 ~9px。消费方可通过 className（`w-[xxx]`）或 style 覆盖。\n        'ald-input-number tw-inline-flex tw-w-[90px] tw-min-w-0 tw-items-center tw-overflow-hidden tw-transition-[border-color,box-shadow] tw-duration-150 tw-ease-out',\n        bordered &&\n          'tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)]',\n        mergedDisabled\n          ? 'ald-input-number-disabled tw-cursor-not-allowed tw-bg-[var(--background-neutral-subtle)] tw-text-[var(--content-secondary)]'\n          : 'tw-bg-[var(--background-default)] tw-text-[var(--content-primary)] hover:tw-border-[var(--border-brand-strong)]',\n        !hasAddon && sizeClasses,\n        hasAddon\n          ? 'tw-h-auto tw-flex-1 tw-self-stretch tw-rounded-none'\n          : radiusClasses,\n        status === 'error' && 'tw-border-[var(--border-negative-strong)]',\n        status === 'warning' && 'tw-border-[var(--border-warning-subtle)]',\n        // Focus State Layer belongs to the field envelope, while the input\n        // remains the native focus owner. It intentionally does not share\n        // status, hover, or disabled styling and does not affect Geometry.\n        !mergedDisabled && [\n          !status &&\n            'has-[input:focus]:!tw-border-[var(--border-brand-strong)]',\n          'has-[input:focus-visible]:tw-shadow-[inset_0_0_0_1px_var(--focus-ring)]',\n          'forced-colors:has-[input:focus-visible]:tw-outline',\n          'forced-colors:has-[input:focus-visible]:tw-outline-2',\n          'forced-colors:has-[input:focus-visible]:tw-outline-offset-2',\n          'forced-colors:has-[input:focus-visible]:tw-outline-[Highlight]',\n        ],\n        !hasAddon && className,\n      )}\n      style={!hasAddon ? style : undefined}\n    >\n      {prefix && (\n        <span className=\"tw-px-2 tw-text-[var(--content-secondary)]\">\n          {prefix}\n        </span>\n      )}\n      <input\n        {...nativeInputAriaProps}\n        ref={inputRef}\n        id={id}\n        type=\"text\"\n        inputMode=\"numeric\"\n        // size=1 让 <input> 的 intrinsic 宽度坍缩到 1 个字符，\n        // 在 flex 父容器中按 width / flex-1 受控，避免默认 size=20 把 inline-flex 外层撑出 ~150px 内容宽度。\n        size={1}\n        className={cn(\n          // Typography Foundation: editable numeric content and its placeholder\n          // consume the same approved Body Dense contract as Input. Prefix and\n          // add-on surfaces remain outside this Typography ownership.\n          'tw-min-w-0 tw-flex-1 tw-border-0 tw-bg-[var(--action-ghost-normal)] tw-px-[7px] tw-text-inherit tw-outline-none tw-text-typography-body-dense',\n          mergedDisabled &&\n            'tw-cursor-not-allowed tw-text-[var(--content-secondary)]',\n        )}\n        value={displayValue}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        onFocus={onFocus}\n        onKeyDown={handleKeyDown}\n        disabled={mergedDisabled}\n        readOnly={readOnly}\n        autoFocus={autoFocus}\n        placeholder={placeholder}\n        aria-label={ariaLabel}\n      />\n    </div>\n  );\n\n  if (!hasAddon) return inputBox;\n\n  return (\n    <div\n      data-testid={dataTestId}\n      className={cn(\n        // 自然宽 = 内部 inputBox 默认 90px + addonBefore/After 内容宽。inline-flex\n        // 让外层按内容宽呈现，不再 `tw-w-full` 强吞 flex 父级剩余空间——后者会把\n        // 同 flex 行的 Slider 挤成 0 宽（看板\"图形宽度\"行只剩 thumb 圆点的根因）。\n        // `tw-min-w-0` 让本身作为 flex item 时受消费方 `flex-basis` / `width`\n        // 真正约束——默认 `min-width: auto = min-content` 会被内部 input(90px) +\n        // addon 撑到 ~126px，覆盖消费方的 flex-basis。内部 inputBox 已 `tw-min-w-0\n        // tw-overflow-hidden`，被约束后内容会按 input flex-1 收缩，不会溢出。\n        // 消费方需要撑满显式加 `tw-w-full` className，需要更窄/更宽直接覆盖宽度。\n        'ald-input-number-group tw-inline-flex tw-min-w-0 tw-items-stretch',\n        sizeClasses,\n        radiusClasses,\n        mergedDisabled && 'ald-input-number-disabled',\n        className,\n      )}\n      style={style}\n    >\n      {addonBefore && (\n        <span\n          className={cn(\n            'ald-input-number-addon tw-flex tw-shrink-0 tw-items-center tw-border tw-border-r-0 tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-neutral-subtle)] tw-px-3 tw-text-[var(--content-secondary)]',\n            size === 'large' && 'tw-rounded-l-[8px]',\n            size === 'small' && 'tw-rounded-l-[4px]',\n            size !== 'large' && size !== 'small' && 'tw-rounded-l-[6px]',\n          )}\n        >\n          {addonBefore}\n        </span>\n      )}\n      {inputBox}\n      {addonAfter && (\n        <span\n          className={cn(\n            'ald-input-number-addon tw-flex tw-shrink-0 tw-items-center tw-border tw-border-l-0 tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-neutral-subtle)] tw-px-3 tw-text-[var(--content-secondary)]',\n            size === 'large' && 'tw-rounded-r-[8px]',\n            size === 'small' && 'tw-rounded-r-[4px]',\n            size !== 'large' && size !== 'small' && 'tw-rounded-r-[6px]',\n          )}\n        >\n          {addonAfter}\n        </span>\n      )}\n    </div>\n  );\n}\n\nexport type { IInputNumberProps };\n"],"mappings":";;;;;;AAYA,SAAS,cAAc,OAAmD;AACxE,QAAO,OAAO,KAAK,MAAM,CAAC,QACvB,WAAW,QAAQ;AAClB,MAAI,IAAI,WAAW,QAAQ,CACzB,WAAU,OAAO,MAAM;AAEzB,SAAO;IAET,EAAE,CACH;;AAGH,SAAwB,YAAY,OAA0B;CAC5D,MAAM,EACJ,WACA,UAAU,gBACV,MAAM,YACN,QACA,OAAO,iBACP,cACA,MAAM,WACN,MAAM,UACN,OAAO,GACP,WACA,UACA,cACA,QACA,SACA,WACA,QACA,QACA,aACA,YACA,aACA,WACA,WAAW,MACX,WAAW,MACX,UAAU,UACV,OACA,IACA,eAAe,YACf,cAAc,cACZ;CAEJ,MAAM,cAAc,WAAW,YAAY;CAC3C,MAAM,OAAO,cAAc,eAAe;CAC1C,MAAM,WAAW,WAAW,gBAAgB;CAC5C,MAAM,iBAAiB,kBAAkB;CACzC,MAAM,uBAAuB,cAAc,MAAM;CAEjD,MAAM,eAAe,WAAW;CAChC,MAAM,CAAC,YAAY,iBAAiB,SAClC,gBAAgB,KACjB;CACD,MAAM,eAAe,eAAe,kBAAkB;CAEtD,MAAM,CAAC,UAAU,eAAe,SAC9B,iBAAiB,QAAQ,iBAAiB,SACtC,OAAO,aAAa,GACpB,GACL;CACD,MAAM,WAAW,OAAyB,KAAK;AAE/C,iBAAgB;AACd,MAAI,iBAAiB,QAAQ,iBAAiB,OAC5C,aAAY,OAAO,aAAa,CAAC;MAEjC,aAAY,GAAG;IAEhB,CAAC,aAAa,CAAC;CAElB,MAAM,QAAQ,aACX,QAAgB;EACf,IAAI,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,IAAI,CAAC;AACzC,MAAI,cAAc,OAChB,KAAI,OAAO,EAAE,QAAQ,UAAU,CAAC;AAElC,SAAO;IAET;EAAC;EAAK;EAAK;EAAU,CACtB;CAED,MAAM,cAAc,aACjB,WAA0B;EACzB,MAAM,UAAU,WAAW,OAAO,MAAM,OAAO,GAAG;AAClD,MAAI,CAAC,aAAc,eAAc,QAAQ;AACzC,aAAW,QAAQ;IAErB;EAAC;EAAO;EAAc;EAAS,CAChC;CAED,MAAM,gBAAgB,MAA2C;EAC/D,MAAM,MAAM,EAAE,OAAO;AACrB,cAAY,IAAI;AAChB,MAAI,QAAQ,IAAI;AAKd,eAAY,KAAK;AACjB;;AAEF,MAAI,QAAQ,IAAK;EACjB,MAAM,SAAS,SAAS,OAAO,IAAI,GAAG,OAAO,IAAI;AACjD,MAAI,CAAC,MAAM,OAAO,CAChB,aAAY,OAAO;;CAIvB,MAAM,cAAc,MAA0C;AAC5D,MAAI,aAAa,MAAM,aAAa,KAAK;AACvC,eAAY,KAAK;AACjB,eAAY,GAAG;SACV;GACL,MAAM,SAAS,SAAS,OAAO,SAAS,GAAG,OAAO,SAAS;AAC3D,OAAI,CAAC,MAAM,OAAO,EAAE;IAClB,MAAM,UAAU,MAAM,OAAO;AAC7B,gBAAY,QAAQ;AACpB,gBAAY,OAAO,QAAQ,CAAC;;;AAGhC,WAAS,EAAE;;CAGb,MAAM,iBAAiB,MAA6C;AAClE,MAAI,EAAE,QAAQ,QACZ,gBAAe,EAAE;AAEnB,MAAI,CAAC,SAAU;EACf,MAAM,UAAU,OAAO,SAAS,WAAW,OAAO,KAAK,GAAG;AAC1D,MAAI,EAAE,QAAQ,WAAW;AACvB,KAAE,gBAAgB;AAClB,eAAY,OAAO,gBAAgB,KAAK,QAAQ,CAAC;aACxC,EAAE,QAAQ,aAAa;AAChC,KAAE,gBAAgB;AAClB,eAAY,OAAO,gBAAgB,KAAK,QAAQ,CAAC;;;CAIrD,MAAM,eAAe,YACjB,UAAU,gBAAgB,QAAW;EACnC,YAAY,SAAS,kBAAkB,SAAS;EAChD,OAAO;EACR,CAAC,GACF;CAEJ,MAAM,WAAW,eAAe;CAEhC,MAAM,cAAc,GAClB,SAAS,WAAW,8CACpB,SAAS,WAAW,4CACpB,SAAS,WACP,SAAS,WACT,4CACH;CAED,MAAM,gBAAgB,GACpB,SAAS,WAAW,oBACpB,SAAS,WAAW,oBACpB,SAAS,WAAW,SAAS,WAAW,mBACzC;CAED,MAAM,WACJ,qBAAC,OAAD;EACE,eAAa,CAAC,WAAW,aAAa;EACtC,WAAW,GAIT,iKACA,YACE,sEACF,iBACI,gIACA,mHACJ,CAAC,YAAY,aACb,WACI,wDACA,eACJ,WAAW,WAAW,6CACtB,WAAW,aAAa,4CAIxB,CAAC,kBAAkB;GACjB,CAAC,UACC;GACF;GACA;GACA;GACA;GACA;GACD,EACD,CAAC,YAAY,UACd;EACD,OAAO,CAAC,WAAW,QAAQ;YAhC7B,CAkCG,UACC,oBAAC,QAAD;GAAM,WAAU;aACb;GACI,CAAA,EAET,oBAAC,SAAD;GACE,GAAI;GACJ,KAAK;GACD;GACJ,MAAK;GACL,WAAU;GAGV,MAAM;GACN,WAAW,GAIT,iJACA,kBACE,2DACH;GACD,OAAO;GACP,UAAU;GACV,QAAQ;GACC;GACT,WAAW;GACX,UAAU;GACA;GACC;GACE;GACb,cAAY;GACZ,CAAA,CACE;;AAGR,KAAI,CAAC,SAAU,QAAO;AAEtB,QACE,qBAAC,OAAD;EACE,eAAa;EACb,WAAW,GAST,qEACA,aACA,eACA,kBAAkB,6BAClB,UACD;EACM;YAjBT;GAmBG,eACC,oBAAC,QAAD;IACE,WAAW,GACT,mOACA,SAAS,WAAW,sBACpB,SAAS,WAAW,sBACpB,SAAS,WAAW,SAAS,WAAW,qBACzC;cAEA;IACI,CAAA;GAER;GACA,cACC,oBAAC,QAAD;IACE,WAAW,GACT,mOACA,SAAS,WAAW,sBACpB,SAAS,WAAW,sBACpB,SAAS,WAAW,SAAS,WAAW,qBACzC;cAEA;IACI,CAAA;GAEL"}

package/dist/InputNumber/type.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export interface IInputNumberProps {
+export interface IInputNumberProps extends React.AriaAttributes {
     addonBefore?: React.ReactNode;
     addonAfter?: React.ReactNode;
     autoFocus?: boolean;
@@ -42,6 +42,6 @@ export interface IInputNumberProps {
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
     /** 透传到 InputNumber 根容器的 data-testid，用于自动化测试定位 */
     'data-testid'?: string;
-    /** 透传到 InputNumber 根容器的 aria-label，用于可访问性与自动化测试定位 */
+    /** 透传到内部 input 元素的 aria-label，用于可访问性与自动化测试定位 */
     'aria-label'?: string;
 }

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

@@ -15,6 +15,7 @@ interface IProps<T> {
     hideBottomBtn?: {
         addRelation?: boolean;
     };
+    level?: number;
 }
-export default function LogicItem<T>({ value, addCondition, addRelation, changeRecordData, remove, changeRelation, renderCondition, onDragEnd, hoverId, setHoverId, isRoot, hideBottomBtn, }: IProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function LogicItem<T>({ value, addCondition, addRelation, changeRecordData, remove, changeRelation, renderCondition, onDragEnd, hoverId, setHoverId, isRoot, hideBottomBtn, level, }: IProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -15,7 +15,7 @@ import { DragPreviewImage, useDrag, useDrop } from "react-dnd";
 //#region src/LogicTree/components/LogicItem/index.tsx
 var dargPreviewImg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAYSURBVHgB7cAxAQAAAMKg9U9tCU8oAPgYBlQAAX19SpgAAAAASUVORK5CYII=";
 var TWO = 2;
-function LogicItem({ value, addCondition, addRelation, changeRecordData, remove, changeRelation, renderCondition, onDragEnd, hoverId, setHoverId, isRoot = false, hideBottomBtn }) {
+function LogicItem({ value, addCondition, addRelation, changeRecordData, remove, changeRelation, renderCondition, onDragEnd, hoverId, setHoverId, isRoot = false, hideBottomBtn, level = 1 }) {
 	const [isHoverDragBox, setIsHoverDragBox] = useState(false);
 	const [firstNodeHight, setFirstNodeHight] = useState(0);
 	const [lastNodeHight, setLastNodeHight] = useState(0);
@@ -136,6 +136,10 @@ function LogicItem({ value, addCondition, addRelation, changeRecordData, remove,
 		const { nodes, logicType } = value;
 		const verticalLineHeight = nodes.length > 1 ? `calc(100% - ${firstNodeHight / TWO}px - ${lastNodeHight / TWO}px - 42px)` : `30px`;
 		return /* @__PURE__ */ jsxs("div", {
+			role: "treeitem",
+			"aria-label": `${logicType} group`,
+			"aria-level": level,
+			"aria-expanded": nodes.length > 0,
 			className: cn("ald-logic-tree-logic-node", {
 				"is-hover-drag-box": isHoverDragBox,
 				"is-dragging": isDragging,
@@ -157,6 +161,7 @@ function LogicItem({ value, addCondition, addRelation, changeRecordData, remove,
 					if (index === 0) heightRef = firstRef;
 					else if (index === nodes.length - 1) heightRef = lastRef;
 					return /* @__PURE__ */ jsxs("div", {
+						role: "group",
 						className: "ald-logic-tree-node-wrap",
 						ref: heightRef,
 						children: [/* @__PURE__ */ jsx("div", { className: "ald-logic-tree-horizontal-line" }), /* @__PURE__ */ jsx(LogicItem, {
@@ -169,7 +174,8 @@ function LogicItem({ value, addCondition, addRelation, changeRecordData, remove,
 							changeRecordData,
 							hoverId,
 							setHoverId,
-							onDragEnd
+							onDragEnd,
+							level: level + 1
 						}, node.id)]
 					}, node.id);
 				}),
@@ -219,6 +225,7 @@ function LogicItem({ value, addCondition, addRelation, changeRecordData, remove,
 					})
 				}),
 				/* @__PURE__ */ jsx(Select_default, {
+					"aria-label": `${logicType} relation`,
 					options: logicOptions,
 					className: cn("ald-logic-tree-select-relation", { "ald-logic-tree-select-relation-en": isEn }),
 					size: "small",
@@ -237,6 +244,9 @@ function LogicItem({ value, addCondition, addRelation, changeRecordData, remove,
 		connect: preview,
 		src: dargPreviewImg
 	}), /* @__PURE__ */ jsxs("div", {
+		role: "treeitem",
+		"aria-label": "Condition",
+		"aria-level": level,
 		className: cn("ald-logic-tree-record-node", {
 			"is-hover-drag-box": isHoverDragBox,
 			"is-dragging": isDragging,
@@ -284,6 +294,7 @@ function LogicItem({ value, addCondition, addRelation, changeRecordData, remove,
 				children: renderCondition(value.data, { changeData: onChangeRecordData }, value.id)
 			}),
 			/* @__PURE__ */ jsx(IconButton, {
+				"aria-label": "Remove condition",
 				icon: /* @__PURE__ */ jsx(Memo$2, { size: 16 }),
 				size: "small",
 				onClick: onRemove

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

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

package/dist/LogicTree/index.js

@@ -96,6 +96,8 @@ function LogicTree(props) {
 	if (!innerValue) return null;
 	return /* @__PURE__ */ jsx(LogicTreeDndProvider, { children: /* @__PURE__ */ jsx("div", {
 		className: cn("ald-logic-tree-wrap", className),
+		role: "tree",
+		"aria-label": "Logic tree",
 		children: /* @__PURE__ */ jsx(LogicItem, {
 			value: innerValue,
 			addCondition: onAddCondition,