@aloudata/aloudata-design 3.1.0 → 3.1.1

package/dist/Radio/components/Group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Radio/components/Group/index.tsx"],"sourcesContent":["import { cn } from '../../../lib/utils';\nimport React, { createContext, useEffect, useState } from 'react';\nimport DisabledContext from '../../../ConfigProvider/DisabledContext';\nimport { IRadioGroupProps } from '../../interface/radioGroup';\n\nexport const RadioGroupContext = createContext<\n  Omit<IRadioGroupProps, 'children' | 'className'>\n>({});\n\nexport default function RadioGroup(props: IRadioGroupProps) {\n  const {\n    children,\n    radioGroupStyle = 'filled',\n    size = 'middle',\n    type = 'radio',\n    className,\n    disabled: customDisabled,\n    'data-testid': dataTestId,\n    'aria-label': ariaLabel,\n  } = props;\n  const isControlled = 'value' in props && props.value !== undefined;\n  const [innerValue, setInnerValue] = useState(props.defaultValue);\n\n  useEffect(() => {\n    if (isControlled) {\n      setInnerValue(props.value);\n    }\n  }, [props.value, isControlled]);\n\n  const value = isControlled ? props.value : innerValue;\n  const setValue = (v: any) => {\n    if (!isControlled) {\n      setInnerValue(v);\n    }\n  };\n  // ===================== Disabled =====================\n  const disabled = React.useContext(DisabledContext);\n  const mergedDisabled = customDisabled ?? disabled;\n  const onRadioChange = (selectedValue: any) => {\n    const lastValue = value;\n\n    setValue(selectedValue);\n    const { onChange } = props;\n    if (onChange && selectedValue !== lastValue) {\n      onChange(selectedValue);\n    }\n  };\n\n  const getWrapperClass = () => {\n    const isButton = ['button', 'iconButton'].includes(type);\n    const tempType = type === 'iconButton' ? 'icon-button' : type;\n    return cn('ald-radio-group', className, `ald-radio-group-${tempType}`, {\n      // 约束只能在type为button和iconbutton的时候才可以设置样式和大小\n      [`ald-radio-group-${radioGroupStyle}`]: isButton,\n      [`ald-radio-group-${size}`]: isButton,\n    });\n  };\n\n  return (\n    <RadioGroupContext.Provider\n      value={{\n        onChange: onRadioChange,\n        value,\n        radioGroupStyle,\n        size,\n        type,\n        disabled: mergedDisabled,\n      }}\n    >\n      <div\n        className={getWrapperClass()}\n        data-testid={dataTestId}\n        aria-label={ariaLabel}\n      >\n        {children}\n      </div>\n    </RadioGroupContext.Provider>\n  );\n}\n"],"mappings":";;;;;AAKA,IAAa,oBAAoB,cAE/B,EAAE,CAAC;AAEL,SAAwB,WAAW,OAAyB;CAC1D,MAAM,EACJ,UACA,kBAAkB,UAClB,OAAO,UACP,OAAO,SACP,WACA,UAAU,gBACV,eAAe,YACf,cAAc,cACZ;CACJ,MAAM,eAAe,WAAW,SAAS,MAAM,UAAU;CACzD,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM,aAAa;AAEhE,iBAAgB;AACd,MAAI,aACF,eAAc,MAAM,MAAM;IAE3B,CAAC,MAAM,OAAO,aAAa,CAAC;CAE/B,MAAM,QAAQ,eAAe,MAAM,QAAQ;CAC3C,MAAM,YAAY,MAAW;AAC3B,MAAI,CAAC,aACH,eAAc,EAAE;;CAIpB,MAAM,WAAW,MAAM,WAAW,gBAAgB;CAClD,MAAM,iBAAiB,kBAAkB;CACzC,MAAM,iBAAiB,kBAAuB;EAC5C,MAAM,YAAY;AAElB,WAAS,cAAc;EACvB,MAAM,EAAE,aAAa;AACrB,MAAI,YAAY,kBAAkB,UAChC,UAAS,cAAc;;CAI3B,MAAM,wBAAwB;EAC5B,MAAM,WAAW,CAAC,UAAU,aAAa,CAAC,SAAS,KAAK;AAExD,SAAO,GAAG,mBAAmB,WAAW,mBADvB,SAAS,eAAe,gBAAgB,QACc;IAEpE,mBAAmB,oBAAoB;IACvC,mBAAmB,SAAS;GAC9B,CAAC;;AAGJ,QACE,oBAAC,kBAAkB,UAAnB;EACE,OAAO;GACL,UAAU;GACV;GACA;GACA;GACA;GACA,UAAU;GACX;YAED,oBAAC,OAAD;GACE,WAAW,iBAAiB;GAC5B,eAAa;GACb,cAAY;GAEX;GACG,CAAA;EACqB,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Radio/components/Group/index.tsx"],"sourcesContent":["import { cn } from '../../../lib/utils';\nimport React, { createContext, useEffect, useState } from 'react';\nimport DisabledContext from '../../../ConfigProvider/DisabledContext';\nimport { IRadioGroupProps } from '../../interface/radioGroup';\n\ntype RadioGroupContextValue = Omit<\n  IRadioGroupProps,\n  'children' | 'className'\n> & {\n  name?: string;\n};\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue>({});\n\nexport default function RadioGroup(props: IRadioGroupProps) {\n  const {\n    children,\n    radioGroupStyle = 'filled',\n    size = 'middle',\n    type = 'radio',\n    className,\n    disabled: customDisabled,\n    'data-testid': dataTestId,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n  } = props;\n  const groupName = React.useId();\n  const isControlled = 'value' in props && props.value !== undefined;\n  const [innerValue, setInnerValue] = useState(props.defaultValue);\n\n  useEffect(() => {\n    if (isControlled) {\n      setInnerValue(props.value);\n    }\n  }, [props.value, isControlled]);\n\n  const value = isControlled ? props.value : innerValue;\n  const setValue = (v: any) => {\n    if (!isControlled) {\n      setInnerValue(v);\n    }\n  };\n  // ===================== Disabled =====================\n  const disabled = React.useContext(DisabledContext);\n  const mergedDisabled = customDisabled ?? disabled;\n  const onRadioChange = (selectedValue: any) => {\n    const lastValue = value;\n\n    setValue(selectedValue);\n    const { onChange } = props;\n    if (onChange && selectedValue !== lastValue) {\n      onChange(selectedValue);\n    }\n  };\n\n  const getWrapperClass = () => {\n    const isButton = ['button', 'iconButton'].includes(type);\n    const tempType = type === 'iconButton' ? 'icon-button' : type;\n    return cn('ald-radio-group', className, `ald-radio-group-${tempType}`, {\n      // 约束只能在type为button和iconbutton的时候才可以设置样式和大小\n      [`ald-radio-group-${radioGroupStyle}`]: isButton,\n      [`ald-radio-group-${size}`]: isButton,\n    });\n  };\n\n  return (\n    <RadioGroupContext.Provider\n      value={{\n        onChange: onRadioChange,\n        value,\n        radioGroupStyle,\n        size,\n        type,\n        disabled: mergedDisabled,\n        name: groupName,\n      }}\n    >\n      <div\n        className={getWrapperClass()}\n        data-testid={dataTestId}\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n      >\n        {children}\n      </div>\n    </RadioGroupContext.Provider>\n  );\n}\n"],"mappings":";;;;;AAYA,IAAa,oBAAoB,cAAsC,EAAE,CAAC;AAE1E,SAAwB,WAAW,OAAyB;CAC1D,MAAM,EACJ,UACA,kBAAkB,UAClB,OAAO,UACP,OAAO,SACP,WACA,UAAU,gBACV,eAAe,YACf,cAAc,WACd,mBAAmB,gBACnB,oBAAoB,oBAClB;CACJ,MAAM,YAAY,MAAM,OAAO;CAC/B,MAAM,eAAe,WAAW,SAAS,MAAM,UAAU;CACzD,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM,aAAa;AAEhE,iBAAgB;AACd,MAAI,aACF,eAAc,MAAM,MAAM;IAE3B,CAAC,MAAM,OAAO,aAAa,CAAC;CAE/B,MAAM,QAAQ,eAAe,MAAM,QAAQ;CAC3C,MAAM,YAAY,MAAW;AAC3B,MAAI,CAAC,aACH,eAAc,EAAE;;CAIpB,MAAM,WAAW,MAAM,WAAW,gBAAgB;CAClD,MAAM,iBAAiB,kBAAkB;CACzC,MAAM,iBAAiB,kBAAuB;EAC5C,MAAM,YAAY;AAElB,WAAS,cAAc;EACvB,MAAM,EAAE,aAAa;AACrB,MAAI,YAAY,kBAAkB,UAChC,UAAS,cAAc;;CAI3B,MAAM,wBAAwB;EAC5B,MAAM,WAAW,CAAC,UAAU,aAAa,CAAC,SAAS,KAAK;AAExD,SAAO,GAAG,mBAAmB,WAAW,mBADvB,SAAS,eAAe,gBAAgB,QACc;IAEpE,mBAAmB,oBAAoB;IACvC,mBAAmB,SAAS;GAC9B,CAAC;;AAGJ,QACE,oBAAC,kBAAkB,UAAnB;EACE,OAAO;GACL,UAAU;GACV;GACA;GACA;GACA;GACA,UAAU;GACV,MAAM;GACP;YAED,oBAAC,OAAD;GACE,WAAW,iBAAiB;GAC5B,eAAa;GACb,MAAK;GACL,cAAY;GACZ,mBAAiB;GACjB,oBAAkB;GAEjB;GACG,CAAA;EACqB,CAAA"}

package/dist/Radio/components/Radio/index.js

@@ -1,4 +1,5 @@
 import { cn } from "../../../lib/utils.js";
+import { getSemanticOwnerAriaProps } from "../../../_utils/formControlSemanticOwner.js";
 import { getUUID } from "../../../_utils/hooks/useId.js";
 import { RadioGroupContext } from "../Group/index.js";
 import { useContext, useRef, useState } from "react";
@@ -56,12 +57,37 @@ function Radio(props) {
 				className: "ald-radio-input",
 				checked: !!checked,
 				disabled: radioProps.disabled,
+				name: groupContext.name,
+				required: props.required,
 				value: props.value,
+				...getSemanticOwnerAriaProps({
+					"aria-label": props["aria-label"],
+					"aria-labelledby": props["aria-labelledby"],
+					"aria-describedby": props["aria-describedby"],
+					"aria-invalid": props["aria-invalid"],
+					"aria-required": props["aria-required"],
+					"aria-disabled": props["aria-disabled"]
+				}),
 				onChange: (e) => {
 					if (radioProps.disabled) return;
 					if (!inGroup && !isControlled) setInnerChecked(e.target.checked);
 					props.onChange?.(e);
 				},
+				onKeyDown: (e) => {
+					if (!inGroup || ![
+						"ArrowUp",
+						"ArrowDown",
+						"ArrowLeft",
+						"ArrowRight"
+					].includes(e.key)) return;
+					const radios = Array.from(document.querySelectorAll("input[type=\"radio\"]")).filter((radio) => radio.name === groupContext.name && !radio.disabled);
+					const currentIndex = radios.indexOf(e.currentTarget);
+					if (currentIndex < 0 || radios.length < 2) return;
+					e.preventDefault();
+					const nextRadio = radios[(currentIndex + (e.key === "ArrowUp" || e.key === "ArrowLeft" ? -1 : 1) + radios.length) % radios.length];
+					nextRadio.focus();
+					nextRadio.click();
+				},
 				onClick: (e) => {
 					props.onClick?.(e);
 					if (inGroup && groupContext?.onChange) groupContext.onChange(props.value);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Radio/components/Radio/index.tsx"],"sourcesContent":["import { cn } from '../../../lib/utils';\nimport _ from 'lodash';\nimport React, { useContext, useRef, useState } from 'react';\n\nimport { getUUID } from '../../../_utils/hooks/useId';\nimport { IRadioProps } from '../../interface/radio';\nimport { RadioGroupContext } from '../Group';\n\nexport default function Radio(props: IRadioProps) {\n  const groupContext = useContext(RadioGroupContext);\n  const labelRef = useRef<HTMLLabelElement>(null);\n  const [id] = useState(() => getUUID().toString());\n\n  const radioProps = { ...props };\n  const inGroup = !_.isEmpty(groupContext);\n  const isControlled = 'checked' in props;\n  const [innerChecked, setInnerChecked] = useState(\n    props.defaultChecked ?? false,\n  );\n\n  if (inGroup) {\n    radioProps.disabled = groupContext.disabled || props.disabled;\n  }\n\n  // checked 直接从 groupContext 或 props 派生，不使用 useState + useEffect，\n  // 避免双重渲染导致切换时视觉抖动。\n  const checked = inGroup\n    ? groupContext.value === props.value\n    : !isControlled\n    ? innerChecked\n    : radioProps.checked;\n\n  // 设置input外层盒子的class\n  const aldRadioClass = cn('ald-radio', {\n    'ald-radio-checked': checked,\n    'ald-radio-disabled': radioProps.disabled,\n  });\n\n  // 根据属性设置最外层的class\n  const getWrapperClass = () => {\n    let otherClass = '';\n    if (groupContext.type === 'button') {\n      if (groupContext.radioGroupStyle === 'filled') {\n        otherClass = 'ald-radio-button-wrapper-filled';\n      } else if (groupContext.radioGroupStyle === 'border') {\n        otherClass = 'ald-radio-button-wrapper-border';\n      } else if (groupContext.radioGroupStyle === 'filter') {\n        otherClass = 'ald-radio-button-wrapper-filter';\n      } else {\n        otherClass = 'ald-radio-button-wrapper-border-primary';\n      }\n    } else if (groupContext.type === 'iconButton') {\n      if (groupContext.radioGroupStyle === 'filled') {\n        otherClass = 'ald-radio-icon-button-wrapper-filled';\n      } else if (groupContext.radioGroupStyle === 'border') {\n        otherClass = 'ald-radio-icon-button-wrapper-border';\n      } else if (groupContext.radioGroupStyle === 'filter') {\n        otherClass = 'ald-radio-icon-button-wrapper-filter';\n      } else {\n        otherClass = 'ald-radio-icon-button-wrapper-border-primary';\n      }\n    } else {\n      // 当type未设置或者是radio时\n      otherClass = 'ald-radio-wrapper';\n      if (props.indeterminate) {\n        otherClass = otherClass + ' ald-radio-wrapper-indeterminate';\n      }\n    }\n    return cn('ald-radio-label', otherClass, props.className, {\n      'ald-radio-wrapper-checked': checked,\n      'ald-radio-wrapper-disabled': radioProps.disabled,\n    });\n  };\n\n  // button / iconButton 模式下，radio 圆圈需要完全隐藏\n  const isButtonMode =\n    groupContext.type === 'button' || groupContext.type === 'iconButton';\n  const radioHideStyle: React.CSSProperties | undefined = isButtonMode\n    ? { width: 0, height: 0, overflow: 'hidden' }\n    : undefined;\n\n  return (\n    <label className={getWrapperClass()} htmlFor={id} ref={labelRef}>\n      <span className={aldRadioClass} style={radioHideStyle}>\n        <input\n          id={id}\n          type=\"radio\"\n          className=\"ald-radio-input\"\n          // 同步派生的 checked 到原生 input，对齐 v2/antd 行为（仅有 class 不更新 input.checked）\n          checked={!!checked}\n          disabled={radioProps.disabled}\n          value={props.value}\n          onChange={(e) => {\n            if (radioProps.disabled) return;\n            if (!inGroup && !isControlled) {\n              setInnerChecked(e.target.checked);\n            }\n            props.onChange?.(e);\n          }}\n          onClick={(e) => {\n            props.onClick?.(e);\n\n            if (inGroup && groupContext?.onChange) {\n              // input事件的value会被toString，所以此处进行一个覆盖\n              groupContext.onChange(props.value);\n            }\n          }}\n        />\n        <span className=\"ald-radio-inner\" />\n      </span>\n      {props.children && (\n        <span className=\"ald-radio-desc tw-text-typography-label\">\n          {props.children}\n        </span>\n      )}\n    </label>\n  );\n}\n"],"mappings":";;;;;;;AAQA,SAAwB,MAAM,OAAoB;CAChD,MAAM,eAAe,WAAW,kBAAkB;CAClD,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,CAAC,MAAM,eAAe,SAAS,CAAC,UAAU,CAAC;CAEjD,MAAM,aAAa,EAAE,GAAG,OAAO;CAC/B,MAAM,UAAU,CAAC,EAAE,QAAQ,aAAa;CACxC,MAAM,eAAe,aAAa;CAClC,MAAM,CAAC,cAAc,mBAAmB,SACtC,MAAM,kBAAkB,MACzB;AAED,KAAI,QACF,YAAW,WAAW,aAAa,YAAY,MAAM;CAKvD,MAAM,UAAU,UACZ,aAAa,UAAU,MAAM,QAC7B,CAAC,eACD,eACA,WAAW;CAGf,MAAM,gBAAgB,GAAG,aAAa;EACpC,qBAAqB;EACrB,sBAAsB,WAAW;EAClC,CAAC;CAGF,MAAM,wBAAwB;EAC5B,IAAI,aAAa;AACjB,MAAI,aAAa,SAAS,SACxB,KAAI,aAAa,oBAAoB,SACnC,cAAa;WACJ,aAAa,oBAAoB,SAC1C,cAAa;WACJ,aAAa,oBAAoB,SAC1C,cAAa;MAEb,cAAa;WAEN,aAAa,SAAS,aAC/B,KAAI,aAAa,oBAAoB,SACnC,cAAa;WACJ,aAAa,oBAAoB,SAC1C,cAAa;WACJ,aAAa,oBAAoB,SAC1C,cAAa;MAEb,cAAa;OAEV;AAEL,gBAAa;AACb,OAAI,MAAM,cACR,cAAa,aAAa;;AAG9B,SAAO,GAAG,mBAAmB,YAAY,MAAM,WAAW;GACxD,6BAA6B;GAC7B,8BAA8B,WAAW;GAC1C,CAAC;;CAMJ,MAAM,iBADJ,aAAa,SAAS,YAAY,aAAa,SAAS,eAEtD;EAAE,OAAO;EAAG,QAAQ;EAAG,UAAU;EAAU,GAC3C;AAEJ,QACE,qBAAC,SAAD;EAAO,WAAW,iBAAiB;EAAE,SAAS;EAAI,KAAK;YAAvD,CACE,qBAAC,QAAD;GAAM,WAAW;GAAe,OAAO;aAAvC,CACE,oBAAC,SAAD;IACM;IACJ,MAAK;IACL,WAAU;IAEV,SAAS,CAAC,CAAC;IACX,UAAU,WAAW;IACrB,OAAO,MAAM;IACb,WAAW,MAAM;AACf,SAAI,WAAW,SAAU;AACzB,SAAI,CAAC,WAAW,CAAC,aACf,iBAAgB,EAAE,OAAO,QAAQ;AAEnC,WAAM,WAAW,EAAE;;IAErB,UAAU,MAAM;AACd,WAAM,UAAU,EAAE;AAElB,SAAI,WAAW,cAAc,SAE3B,cAAa,SAAS,MAAM,MAAM;;IAGtC,CAAA,EACF,oBAAC,QAAD,EAAM,WAAU,mBAAoB,CAAA,CAC/B;MACN,MAAM,YACL,oBAAC,QAAD;GAAM,WAAU;aACb,MAAM;GACF,CAAA,CAEH"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Radio/components/Radio/index.tsx"],"sourcesContent":["import { cn } from '../../../lib/utils';\nimport { getSemanticOwnerAriaProps } from '../../../_utils/formControlSemanticOwner';\nimport _ from 'lodash';\nimport React, { useContext, useRef, useState } from 'react';\n\nimport { getUUID } from '../../../_utils/hooks/useId';\nimport { IRadioProps } from '../../interface/radio';\nimport { RadioGroupContext } from '../Group';\n\nexport default function Radio(props: IRadioProps) {\n  const groupContext = useContext(RadioGroupContext);\n  const labelRef = useRef<HTMLLabelElement>(null);\n  const [id] = useState(() => getUUID().toString());\n\n  const radioProps = { ...props };\n  const inGroup = !_.isEmpty(groupContext);\n  const isControlled = 'checked' in props;\n  const [innerChecked, setInnerChecked] = useState(\n    props.defaultChecked ?? false,\n  );\n\n  if (inGroup) {\n    radioProps.disabled = groupContext.disabled || props.disabled;\n  }\n\n  // checked 直接从 groupContext 或 props 派生，不使用 useState + useEffect，\n  // 避免双重渲染导致切换时视觉抖动。\n  const checked = inGroup\n    ? groupContext.value === props.value\n    : !isControlled\n    ? innerChecked\n    : radioProps.checked;\n\n  // 设置input外层盒子的class\n  const aldRadioClass = cn('ald-radio', {\n    'ald-radio-checked': checked,\n    'ald-radio-disabled': radioProps.disabled,\n  });\n\n  // 根据属性设置最外层的class\n  const getWrapperClass = () => {\n    let otherClass = '';\n    if (groupContext.type === 'button') {\n      if (groupContext.radioGroupStyle === 'filled') {\n        otherClass = 'ald-radio-button-wrapper-filled';\n      } else if (groupContext.radioGroupStyle === 'border') {\n        otherClass = 'ald-radio-button-wrapper-border';\n      } else if (groupContext.radioGroupStyle === 'filter') {\n        otherClass = 'ald-radio-button-wrapper-filter';\n      } else {\n        otherClass = 'ald-radio-button-wrapper-border-primary';\n      }\n    } else if (groupContext.type === 'iconButton') {\n      if (groupContext.radioGroupStyle === 'filled') {\n        otherClass = 'ald-radio-icon-button-wrapper-filled';\n      } else if (groupContext.radioGroupStyle === 'border') {\n        otherClass = 'ald-radio-icon-button-wrapper-border';\n      } else if (groupContext.radioGroupStyle === 'filter') {\n        otherClass = 'ald-radio-icon-button-wrapper-filter';\n      } else {\n        otherClass = 'ald-radio-icon-button-wrapper-border-primary';\n      }\n    } else {\n      // 当type未设置或者是radio时\n      otherClass = 'ald-radio-wrapper';\n      if (props.indeterminate) {\n        otherClass = otherClass + ' ald-radio-wrapper-indeterminate';\n      }\n    }\n    return cn('ald-radio-label', otherClass, props.className, {\n      'ald-radio-wrapper-checked': checked,\n      'ald-radio-wrapper-disabled': radioProps.disabled,\n    });\n  };\n\n  // button / iconButton 模式下，radio 圆圈需要完全隐藏\n  const isButtonMode =\n    groupContext.type === 'button' || groupContext.type === 'iconButton';\n  const radioHideStyle: React.CSSProperties | undefined = isButtonMode\n    ? { width: 0, height: 0, overflow: 'hidden' }\n    : undefined;\n\n  return (\n    <label className={getWrapperClass()} htmlFor={id} ref={labelRef}>\n      <span className={aldRadioClass} style={radioHideStyle}>\n        <input\n          id={id}\n          type=\"radio\"\n          className=\"ald-radio-input\"\n          // 同步派生的 checked 到原生 input，对齐 v2/antd 行为（仅有 class 不更新 input.checked）\n          checked={!!checked}\n          disabled={radioProps.disabled}\n          name={groupContext.name}\n          required={props.required}\n          value={props.value}\n          {...getSemanticOwnerAriaProps({\n            'aria-label': props['aria-label'],\n            'aria-labelledby': props['aria-labelledby'],\n            'aria-describedby': props['aria-describedby'],\n            'aria-invalid': props['aria-invalid'],\n            'aria-required': props['aria-required'],\n            'aria-disabled': props['aria-disabled'],\n          })}\n          onChange={(e) => {\n            if (radioProps.disabled) return;\n            if (!inGroup && !isControlled) {\n              setInnerChecked(e.target.checked);\n            }\n            props.onChange?.(e);\n          }}\n          onKeyDown={(e) => {\n            if (\n              !inGroup ||\n              !['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(\n                e.key,\n              )\n            ) {\n              return;\n            }\n\n            const radios = Array.from(\n              document.querySelectorAll<HTMLInputElement>(\n                'input[type=\"radio\"]',\n              ),\n            ).filter(\n              (radio) => radio.name === groupContext.name && !radio.disabled,\n            );\n            const currentIndex = radios.indexOf(e.currentTarget);\n            if (currentIndex < 0 || radios.length < 2) return;\n\n            e.preventDefault();\n            const direction =\n              e.key === 'ArrowUp' || e.key === 'ArrowLeft' ? -1 : 1;\n            const nextIndex =\n              (currentIndex + direction + radios.length) % radios.length;\n            const nextRadio = radios[nextIndex];\n            nextRadio.focus();\n            nextRadio.click();\n          }}\n          onClick={(e) => {\n            props.onClick?.(e);\n\n            if (inGroup && groupContext?.onChange) {\n              // input事件的value会被toString，所以此处进行一个覆盖\n              groupContext.onChange(props.value);\n            }\n          }}\n        />\n        <span className=\"ald-radio-inner\" />\n      </span>\n      {props.children && (\n        <span className=\"ald-radio-desc tw-text-typography-label\">\n          {props.children}\n        </span>\n      )}\n    </label>\n  );\n}\n"],"mappings":";;;;;;;;AASA,SAAwB,MAAM,OAAoB;CAChD,MAAM,eAAe,WAAW,kBAAkB;CAClD,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,CAAC,MAAM,eAAe,SAAS,CAAC,UAAU,CAAC;CAEjD,MAAM,aAAa,EAAE,GAAG,OAAO;CAC/B,MAAM,UAAU,CAAC,EAAE,QAAQ,aAAa;CACxC,MAAM,eAAe,aAAa;CAClC,MAAM,CAAC,cAAc,mBAAmB,SACtC,MAAM,kBAAkB,MACzB;AAED,KAAI,QACF,YAAW,WAAW,aAAa,YAAY,MAAM;CAKvD,MAAM,UAAU,UACZ,aAAa,UAAU,MAAM,QAC7B,CAAC,eACD,eACA,WAAW;CAGf,MAAM,gBAAgB,GAAG,aAAa;EACpC,qBAAqB;EACrB,sBAAsB,WAAW;EAClC,CAAC;CAGF,MAAM,wBAAwB;EAC5B,IAAI,aAAa;AACjB,MAAI,aAAa,SAAS,SACxB,KAAI,aAAa,oBAAoB,SACnC,cAAa;WACJ,aAAa,oBAAoB,SAC1C,cAAa;WACJ,aAAa,oBAAoB,SAC1C,cAAa;MAEb,cAAa;WAEN,aAAa,SAAS,aAC/B,KAAI,aAAa,oBAAoB,SACnC,cAAa;WACJ,aAAa,oBAAoB,SAC1C,cAAa;WACJ,aAAa,oBAAoB,SAC1C,cAAa;MAEb,cAAa;OAEV;AAEL,gBAAa;AACb,OAAI,MAAM,cACR,cAAa,aAAa;;AAG9B,SAAO,GAAG,mBAAmB,YAAY,MAAM,WAAW;GACxD,6BAA6B;GAC7B,8BAA8B,WAAW;GAC1C,CAAC;;CAMJ,MAAM,iBADJ,aAAa,SAAS,YAAY,aAAa,SAAS,eAEtD;EAAE,OAAO;EAAG,QAAQ;EAAG,UAAU;EAAU,GAC3C;AAEJ,QACE,qBAAC,SAAD;EAAO,WAAW,iBAAiB;EAAE,SAAS;EAAI,KAAK;YAAvD,CACE,qBAAC,QAAD;GAAM,WAAW;GAAe,OAAO;aAAvC,CACE,oBAAC,SAAD;IACM;IACJ,MAAK;IACL,WAAU;IAEV,SAAS,CAAC,CAAC;IACX,UAAU,WAAW;IACrB,MAAM,aAAa;IACnB,UAAU,MAAM;IAChB,OAAO,MAAM;IACb,GAAI,0BAA0B;KAC5B,cAAc,MAAM;KACpB,mBAAmB,MAAM;KACzB,oBAAoB,MAAM;KAC1B,gBAAgB,MAAM;KACtB,iBAAiB,MAAM;KACvB,iBAAiB,MAAM;KACxB,CAAC;IACF,WAAW,MAAM;AACf,SAAI,WAAW,SAAU;AACzB,SAAI,CAAC,WAAW,CAAC,aACf,iBAAgB,EAAE,OAAO,QAAQ;AAEnC,WAAM,WAAW,EAAE;;IAErB,YAAY,MAAM;AAChB,SACE,CAAC,WACD,CAAC;MAAC;MAAW;MAAa;MAAa;MAAa,CAAC,SACnD,EAAE,IACH,CAED;KAGF,MAAM,SAAS,MAAM,KACnB,SAAS,iBACP,wBACD,CACF,CAAC,QACC,UAAU,MAAM,SAAS,aAAa,QAAQ,CAAC,MAAM,SACvD;KACD,MAAM,eAAe,OAAO,QAAQ,EAAE,cAAc;AACpD,SAAI,eAAe,KAAK,OAAO,SAAS,EAAG;AAE3C,OAAE,gBAAgB;KAKlB,MAAM,YAAY,QADf,gBAFD,EAAE,QAAQ,aAAa,EAAE,QAAQ,cAAc,KAAK,KAExB,OAAO,UAAU,OAAO;AAEtD,eAAU,OAAO;AACjB,eAAU,OAAO;;IAEnB,UAAU,MAAM;AACd,WAAM,UAAU,EAAE;AAElB,SAAI,WAAW,cAAc,SAE3B,cAAa,SAAS,MAAM,MAAM;;IAGtC,CAAA,EACF,oBAAC,QAAD,EAAM,WAAU,mBAAoB,CAAA,CAC/B;MACN,MAAM,YACL,oBAAC,QAAD;GAAM,WAAU;aACb,MAAM;GACF,CAAA,CAEH"}

package/dist/Radio/interface/radio.d.ts

@@ -20,6 +20,13 @@ export interface IRadioProps {
      * @default -
      */
     value?: any;
+    required?: boolean;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-required'?: React.AriaAttributes['aria-required'];
+    'aria-disabled'?: React.AriaAttributes['aria-disabled'];
     children?: ReactNode[] | ReactNode;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;

package/dist/Radio/interface/radioGroup.d.ts

@@ -48,4 +48,6 @@ export interface IRadioGroupProps {
     'data-testid'?: string;
     /** 透传到 RadioGroup 根容器的 aria-label，用于可访问性与自动化测试定位 */
     'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
 }

package/dist/RenameInput/index.js

@@ -49,6 +49,7 @@ var RenameInput = ({ value: propsValue, onConfirm, className, width, fontStyle,
 				width
 			},
 			value,
+			"aria-label": `Rename ${propsValue}`,
 			ref: inputRef,
 			onChange: (e) => setValue(e.target.value),
 			onBlur: (e) => {
@@ -80,6 +81,9 @@ var RenameInput = ({ value: propsValue, onConfirm, className, width, fontStyle,
 	return /* @__PURE__ */ jsx("div", {
 		className: cn(className, "ald-rename-input-text tw-flex tw-h-[22px] tw-items-center tw-border tw-border-[var(--action-ghost-normal)] tw-p-[2px] tw-text-[13px]"),
 		style: fontStyle,
+		role: !readonly ? "button" : void 0,
+		tabIndex: !readonly ? 0 : void 0,
+		"aria-label": !readonly ? `Edit ${propsValue}` : void 0,
 		onMouseMove: () => {
 			setIsEdit(true);
 			setValue(propsValue);
@@ -87,6 +91,13 @@ var RenameInput = ({ value: propsValue, onConfirm, className, width, fontStyle,
 		onClick: () => {
 			inputRef.current?.select();
 		},
+		onKeyDown: (e) => {
+			if (!readonly && (e.key === "Enter" || e.key === " ")) {
+				e.preventDefault();
+				setIsEdit(true);
+				setValue(propsValue);
+			}
+		},
 		children: propsValue
 	});
 };

package/dist/RenameInput/index.js.map

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

package/dist/Select/BaseSelect.d.ts

@@ -1,5 +1,6 @@
 import { PlacementType } from '../Dropdown';
 import { BaseSelectRef, ISelectProps, LabelInValueType, SelectMenuProps } from './interface.js';
+import { SelectOptionCollection } from './components/OptionCollection.js';
 import * as React from 'react';
 /** Align config type (locally defined to avoid rc-trigger dependency) */
 export interface AlignType {
@@ -50,10 +51,12 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, ISelectProps, R
     innerSearchValue?: string;
     setInnerSearchValue?: (value: string) => void;
     displayMenu?: SelectMenuProps;
+    optionCollection?: SelectOptionCollection;
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
     onOptionSelect?: (val: RawValueType) => void;
+    onCollectionOptionSelect?: (val: RawValueType) => void;
     allowClear?: boolean;
     showArrow?: boolean;
     suffixIcon?: React.ReactNode;

package/dist/Select/BaseSelect.js

@@ -10,12 +10,23 @@ import Selector from "./Selector/index.js";
 import { FormItemInputContext } from "../Form/FormItemContext.js";
 import getWidthStyle from "./utils/getWidthStyle.js";
 import { ConfigContext } from "../ConfigProvider/index.js";
+import OptionCollection from "./components/OptionCollection.js";
 import * as React$1 from "react";
 import { useContext, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import _ from "lodash";
 import useMergedState from "rc-util/es/hooks/useMergedState";
 //#region src/Select/BaseSelect.tsx
+function splitAriaProps(props) {
+	return Object.keys(props).reduce((result, key) => {
+		if (key.startsWith("aria-")) result.ariaProps[key] = props[key];
+		else result.restProps[key] = props[key];
+		return result;
+	}, {
+		ariaProps: {},
+		restProps: {}
+	});
+}
 function isMultiple(mode) {
 	return !!mode;
 }
@@ -27,10 +38,16 @@ function isShowSelectedSection(mode) {
 	return typeof mode === "object" && mode.showSelectedSection && mode.responsive;
 }
 var BaseSelect = React$1.forwardRef((props, ref) => {
-	const { id, className, displayValues, onDisplayValuesChange, displayMenu, notFoundContent, onClear, width, mode, status: customStatus, onOptionSelect, onClick, size: customSize, borderLess = false, disabled, placeholder, loading = false, open, defaultOpen, onOpenChange, showSearch, innerSearchValue, setInnerSearchValue, allowClear, showArrow = true, prefix, suffixIcon, dropdownRender, overlayStyle, dropdownStyle, popupMatchSelectWidth = true, placement, popupClassName, allowOverlap, style, "data-testid": dataTestid, "aria-label": ariaLabel, ...restProps } = props;
+	const { id, className, displayValues, onDisplayValuesChange, displayMenu, optionCollection, notFoundContent, onClear, width, mode, status: customStatus, onOptionSelect, onCollectionOptionSelect, onClick, size: customSize, borderLess = false, disabled, placeholder, loading = false, open, defaultOpen, onOpenChange, showSearch, innerSearchValue, setInnerSearchValue, onInputKeyDown, allowClear, showArrow = true, prefix, suffixIcon, dropdownRender, overlayStyle, dropdownStyle, popupMatchSelectWidth = true, placement, popupClassName, allowOverlap, style, "data-testid": dataTestid, "aria-label": ariaLabel, ...restProps } = props;
+	const { ariaProps, restProps: passthroughProps } = React$1.useMemo(() => splitAriaProps(restProps), [restProps]);
+	const triggerAriaProps = React$1.useMemo(() => ({
+		...ariaProps,
+		"aria-label": ariaLabel
+	}), [ariaLabel, ariaProps]);
 	const setClassNames = prefixCls("select");
 	const selectRef = useRef(null);
 	const triggerRef = useRef(null);
+	const searchInputRef = useRef(null);
 	const widthStyle = getWidthStyle(width);
 	const dropdownRef = useRef(null);
 	const [matchedPopupWidth, setMatchedPopupWidth] = useState();
@@ -44,8 +61,14 @@ var BaseSelect = React$1.forwardRef((props, ref) => {
 	const { status: contextStatus } = useContext(FormItemInputContext);
 	const mergedStatus = customStatus === null ? void 0 : customStatus || contextStatus;
 	React$1.useImperativeHandle(ref, () => ({
-		focus: () => triggerRef.current?.focus(),
-		blur: () => triggerRef.current?.blur(),
+		focus: () => {
+			if (showSearch && optionCollection) searchInputRef.current?.focus();
+			else triggerRef.current?.focus();
+		},
+		blur: () => {
+			if (showSearch && optionCollection) searchInputRef.current?.blur();
+			else triggerRef.current?.blur();
+		},
 		open: () => onToggleOpen(true),
 		close: () => {
 			console.log("ref close");
@@ -53,6 +76,19 @@ var BaseSelect = React$1.forwardRef((props, ref) => {
 		}
 	}));
 	const [isHover, setIsHover] = useState(false);
+	const [activeOptionKey, setActiveOptionKey] = useState();
+	const [composingSearchValue, setComposingSearchValue] = useState();
+	const isComposingSearchRef = useRef(false);
+	const isSearchableCollection = !!optionCollection && !!showSearch;
+	const ownerAriaProps = React$1.useMemo(() => ({
+		...triggerAriaProps,
+		"aria-busy": loading || triggerAriaProps["aria-busy"] || void 0,
+		"aria-invalid": triggerAriaProps["aria-invalid"] ?? (mergedStatus === "error" ? true : void 0)
+	}), [
+		loading,
+		mergedStatus,
+		triggerAriaProps
+	]);
 	const [innerOpen, setInnerOpen] = useMergedState(false, {
 		defaultValue: defaultOpen,
 		value: open
@@ -79,6 +115,22 @@ var BaseSelect = React$1.forwardRef((props, ref) => {
 		onOpenChange,
 		updateMatchedPopupWidth
 	]);
+	const getInitialActiveOptionKey = React$1.useCallback((position) => {
+		if (!optionCollection) return;
+		if (position === "last") return optionCollection.enabledOptions[optionCollection.enabledOptions.length - 1]?.key;
+		return optionCollection.options.find((option) => !option.disabled && displayValues.some((value) => toString(value.value) === toString(option.value)))?.key ?? optionCollection.enabledOptions[0]?.key;
+	}, [displayValues, optionCollection]);
+	React$1.useEffect(() => {
+		if (!optionCollection || !mergedOpen) {
+			setActiveOptionKey(void 0);
+			return;
+		}
+		setActiveOptionKey((current) => optionCollection.enabledOptions.some((option) => option.key === current) ? current : getInitialActiveOptionKey("first"));
+	}, [
+		getInitialActiveOptionKey,
+		mergedOpen,
+		optionCollection
+	]);
 	React$1.useLayoutEffect(() => {
 		if (!mergedOpen || !shouldMatchPopupWidth) return;
 		const element = selectRef.current;
@@ -164,6 +216,124 @@ var BaseSelect = React$1.forwardRef((props, ref) => {
 		}
 	}, []);
 	const mergedPopupMatchSelectWidth = shouldMatchPopupWidth && matchedPopupWidth !== void 0 ? matchedPopupWidth : popupMatchSelectWidth;
+	const activeOptionId = optionCollection?.options.find((option) => option.key === activeOptionKey)?.id;
+	const moveActiveOption = React$1.useCallback((direction) => {
+		if (!optionCollection || optionCollection.enabledOptions.length === 0) return;
+		const currentIndex = optionCollection.enabledOptions.findIndex((option) => option.key === activeOptionKey);
+		const nextIndex = currentIndex === -1 ? direction === 1 ? 0 : optionCollection.enabledOptions.length - 1 : (currentIndex + direction + optionCollection.enabledOptions.length) % optionCollection.enabledOptions.length;
+		setActiveOptionKey(optionCollection.enabledOptions[nextIndex].key);
+	}, [activeOptionKey, optionCollection]);
+	const typeaheadRef = useRef({
+		value: "",
+		timestamp: 0
+	});
+	const onCollectionKeyDown = React$1.useCallback((event) => {
+		if (!optionCollection || disabled) return;
+		const openCollection = (position) => {
+			event.preventDefault();
+			setActiveOptionKey(getInitialActiveOptionKey(position));
+			onToggleOpen(true);
+		};
+		if (!mergedOpen) {
+			if (event.key === "ArrowDown") openCollection("first");
+			else if (event.key === "ArrowUp") openCollection("last");
+			else if (event.key === "Enter" || event.key === " ") openCollection("first");
+			return;
+		}
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			moveActiveOption(1);
+			return;
+		}
+		if (event.key === "ArrowUp") {
+			event.preventDefault();
+			moveActiveOption(-1);
+			return;
+		}
+		if (event.key === "Home") {
+			event.preventDefault();
+			setActiveOptionKey(optionCollection.enabledOptions[0]?.key);
+			return;
+		}
+		if (event.key === "End") {
+			event.preventDefault();
+			setActiveOptionKey(optionCollection.enabledOptions[optionCollection.enabledOptions.length - 1]?.key);
+			return;
+		}
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			const activeOption = optionCollection.options.find((option) => option.key === activeOptionKey);
+			if (activeOption && !activeOption.disabled) {
+				if (!isMultipleMode) onToggleOpen(false);
+				onCollectionOptionSelect?.(activeOption.value);
+			}
+			return;
+		}
+		if (event.key === "Escape") {
+			event.preventDefault();
+			onToggleOpen(false);
+			if (isSearchableCollection) searchInputRef.current?.focus();
+			else triggerRef.current?.focus();
+			return;
+		}
+		if (event.key === "Tab") {
+			onToggleOpen(false);
+			return;
+		}
+		if (event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey) {
+			const now = Date.now();
+			const query = now - typeaheadRef.current.timestamp > 500 ? event.key : `${typeaheadRef.current.value}${event.key}`;
+			typeaheadRef.current = {
+				value: query,
+				timestamp: now
+			};
+			const normalizedQuery = query.toLocaleLowerCase();
+			const activeIndex = optionCollection.enabledOptions.findIndex((option) => option.key === activeOptionKey);
+			const match = [...optionCollection.enabledOptions.slice(activeIndex + 1), ...optionCollection.enabledOptions.slice(0, activeIndex + 1)].find((option) => String(option.label ?? option.value).toLocaleLowerCase().startsWith(normalizedQuery));
+			if (match) {
+				event.preventDefault();
+				setActiveOptionKey(match.key);
+			}
+		}
+	}, [
+		activeOptionKey,
+		disabled,
+		getInitialActiveOptionKey,
+		mergedOpen,
+		moveActiveOption,
+		onCollectionOptionSelect,
+		onToggleOpen,
+		optionCollection,
+		isSearchableCollection
+	]);
+	const onSearchInputKeyDown = React$1.useCallback((event) => {
+		onInputKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		if (event.key === " " || event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey) return;
+		onCollectionKeyDown(event);
+	}, [onCollectionKeyDown, onInputKeyDown]);
+	const onSearchInputChange = React$1.useCallback((event) => {
+		const nextValue = event.target.value;
+		if (isComposingSearchRef.current) {
+			setComposingSearchValue(nextValue);
+			return;
+		}
+		setInnerSearchValue?.(nextValue);
+	}, [setInnerSearchValue]);
+	const searchInputValue = composingSearchValue ?? innerSearchValue ?? "";
+	const collectionContent = optionCollection ? /* @__PURE__ */ jsx(OptionCollection, {
+		collection: optionCollection,
+		selectedValues: displayValues.map((item) => item.value),
+		activeOptionKey,
+		multiple: isMultipleMode,
+		loading,
+		listHeight: props.listHeight ?? 256,
+		notFoundContent,
+		onSelect: (value) => {
+			if (!isMultipleMode) onToggleOpen(false);
+			onCollectionOptionSelect?.(value);
+		}
+	}) : void 0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: mergedClassName,
 		style: {
@@ -177,10 +347,11 @@ var BaseSelect = React$1.forwardRef((props, ref) => {
 		"data-testid": dataTestid,
 		"aria-label": ariaLabel,
 		children: [/* @__PURE__ */ jsx(RefSelectTrigger, {
-			...restProps,
+			...passthroughProps,
 			open: !!mergedOpen,
 			notFoundContent,
 			menu: showMenu,
+			collection: collectionContent,
 			ref: dropdownRef,
 			showSearch,
 			searchValue: innerSearchValue,
@@ -197,35 +368,61 @@ var BaseSelect = React$1.forwardRef((props, ref) => {
 				else onToggleOpen(open);
 			},
 			children: /* @__PURE__ */ jsxs("div", {
+				...!isSearchableCollection ? ownerAriaProps : {},
 				ref: triggerRef,
-				tabIndex: disabled ? void 0 : 0,
-				role: "combobox",
-				"aria-disabled": disabled || void 0,
-				"aria-expanded": mergedOpen,
+				tabIndex: isSearchableCollection || disabled ? void 0 : 0,
+				role: isSearchableCollection ? void 0 : "combobox",
+				"aria-disabled": isSearchableCollection ? void 0 : disabled || void 0,
+				"aria-expanded": isSearchableCollection ? void 0 : mergedOpen,
+				"aria-haspopup": isSearchableCollection ? void 0 : optionCollection ? "listbox" : void 0,
+				"aria-controls": isSearchableCollection ? void 0 : mergedOpen && optionCollection ? optionCollection.listboxId : void 0,
+				"aria-activedescendant": isSearchableCollection ? void 0 : mergedOpen && optionCollection ? activeOptionId : void 0,
+				onKeyDown: isSearchableCollection ? void 0 : optionCollection ? onCollectionKeyDown : void 0,
 				className: cn(setClassNames("trigger"), "ant-select-selector"),
-				children: [
-					prefix && /* @__PURE__ */ jsx("div", {
-						className: setClassNames("prefix"),
-						children: prefix
-					}),
-					_.isEmpty(displayValues) && /* @__PURE__ */ jsx("div", {
-						className: cn(setClassNames("placeholder"), "ant-select-selection-placeholder"),
-						children: placeholder
-					}),
-					!_.isEmpty(displayValues) && /* @__PURE__ */ jsx(Selector, {
-						...restProps,
-						suffixIcon,
-						size,
-						disabled,
-						mode,
-						dropdownRef,
-						displayValues,
-						onToggleOpen,
-						onRemove: onSelectorRemove,
-						showResponsiveSelectedSection,
-						onOverflowCollapsedChange: setOverflowCollapsed
-					})
-				]
+				children: [prefix && /* @__PURE__ */ jsx("div", {
+					className: setClassNames("prefix"),
+					children: prefix
+				}), isSearchableCollection ? /* @__PURE__ */ jsx("input", {
+					...ownerAriaProps,
+					ref: searchInputRef,
+					type: "text",
+					role: "combobox",
+					className: setClassNames("search-input"),
+					value: searchInputValue,
+					disabled,
+					placeholder: typeof placeholder === "string" ? placeholder : void 0,
+					"aria-disabled": disabled || void 0,
+					"aria-expanded": mergedOpen,
+					"aria-haspopup": "listbox",
+					"aria-controls": mergedOpen ? optionCollection?.listboxId : void 0,
+					"aria-activedescendant": mergedOpen ? activeOptionId : void 0,
+					onFocus: () => onToggleOpen(true),
+					onChange: onSearchInputChange,
+					onCompositionStart: () => {
+						isComposingSearchRef.current = true;
+					},
+					onCompositionEnd: (event) => {
+						isComposingSearchRef.current = false;
+						setComposingSearchValue(void 0);
+						setInnerSearchValue?.(event.currentTarget.value);
+					},
+					onKeyDown: onSearchInputKeyDown
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [_.isEmpty(displayValues) && /* @__PURE__ */ jsx("div", {
+					className: cn(setClassNames("placeholder"), "ant-select-selection-placeholder"),
+					children: placeholder
+				}), !_.isEmpty(displayValues) && /* @__PURE__ */ jsx(Selector, {
+					...passthroughProps,
+					suffixIcon,
+					size,
+					disabled,
+					mode,
+					dropdownRef,
+					displayValues,
+					onToggleOpen,
+					onRemove: onSelectorRemove,
+					showResponsiveSelectedSection,
+					onOverflowCollapsedChange: setOverflowCollapsed
+				})] })]
 			})
 		}), /* @__PURE__ */ jsx(Suffix, {
 			showArrow,