update

components/modal/useModal/HookModal.tsx

@@ -22,10 +22,9 @@ export interface HookModalRef {
   update: (config: ConfigUpdate) => void;
 }
 
-const HookModal: React.ForwardRefRenderFunction<HookModalRef, HookModalProps> = (
-  { afterClose: hookAfterClose, config, ...restProps },
-  ref,
-) => {
+const HookModal = React.forwardRef<HookModalRef, HookModalProps>((props, ref) => {
+  const { afterClose: hookAfterClose, config, ...restProps } = props;
+
   const [open, setOpen] = React.useState(true);
   const [innerConfig, setInnerConfig] = React.useState(config);
   const { direction, getPrefixCls } = React.useContext(ConfigContext);
@@ -80,6 +79,6 @@ const HookModal: React.ForwardRefRenderFunction<HookModalRef, HookModalProps> =
       {...restProps}
     />
   );
-};
+});
 
-export default React.forwardRef(HookModal);
+export default HookModal;

components/tag/CheckableTagGroup.tsx

@@ -77,13 +77,14 @@ export interface CheckableTagGroupRef {
   nativeElement: HTMLDivElement;
 }
 
-function CheckableTagGroup<CheckableTagValue extends string | number>(
-  props: CheckableTagGroupProps<CheckableTagValue>,
-  ref: React.Ref<CheckableTagGroupRef>,
-) {
+type CheckableTagValue = string | number;
+
+const CheckableTagGroup = React.forwardRef<
+  CheckableTagGroupRef,
+  CheckableTagGroupProps<CheckableTagValue>
+>((props, ref) => {
   const {
     id,
-
     prefixCls: customizePrefixCls,
     rootClassName,
     className,
@@ -126,19 +127,17 @@ function CheckableTagGroup<CheckableTagValue extends string | number>(
   });
 
   // =============================== Option ===============================
-  const parsedOptions = useMemo(
-    () =>
-      (options || []).map((option) => {
-        if (option && typeof option === 'object') {
-          return option;
-        }
-        return {
-          value: option,
-          label: option,
-        };
-      }),
-    [options],
-  );
+  const parsedOptions = useMemo(() => {
+    if (!Array.isArray(options)) {
+      return [];
+    }
+    return options.map((option) => {
+      if (option && typeof option === 'object') {
+        return option;
+      }
+      return { value: option, label: option };
+    });
+  }, [options]);
 
   // =============================== Values ===============================
   const [mergedValue, setMergedValue] = useControlledState(defaultValue, value);
@@ -215,18 +214,10 @@ function CheckableTagGroup<CheckableTagValue extends string | number>(
       ))}
     </div>
   );
-}
-
-const ForwardCheckableTagGroup = React.forwardRef(CheckableTagGroup) as (<
-  CheckableTagValue extends string | number,
->(
-  props: CheckableTagGroupProps<CheckableTagValue> & { ref?: React.Ref<CheckableTagGroupRef> },
-) => React.ReactElement) & {
-  displayName?: string;
-};
+});
 
 if (process.env.NODE_ENV !== 'production') {
-  ForwardCheckableTagGroup.displayName = 'CheckableTagGroup';
+  CheckableTagGroup.displayName = 'CheckableTagGroup';
 }
 
-export default ForwardCheckableTagGroup;
+export default CheckableTagGroup;

components/tag/demo/checkable.tsx

@@ -5,13 +5,16 @@ const tagsData = ['Movies', 'Books', 'Music', 'Sports'];
 
 const App: React.FC = () => {
   const [checked, setChecked] = useState(true);
-  const [singleSelected, setSingleSelected] = useState<string | null>('Books');
-  const [multipleSelected, setMultipleSelected] = useState<string[]>(['Movies', 'Music']);
+  const [singleSelected, setSingleSelected] = useState<string | number | null>('Books');
+  const [multipleSelected, setMultipleSelected] = useState<(string | number)[]>([
+    'Movies',
+    'Music',
+  ]);
 
   return (
     <Form labelCol={{ span: 6 }}>
       <Form.Item label="Checkable">
-        <Tag.CheckableTag checked={checked} onChange={(val) => setChecked(val)}>
+        <Tag.CheckableTag checked={checked} onChange={setChecked}>
           Yes
         </Tag.CheckableTag>
       </Form.Item>
@@ -19,7 +22,7 @@ const App: React.FC = () => {
         <Tag.CheckableTagGroup
           options={tagsData}
           value={singleSelected}
-          onChange={(val) => setSingleSelected(val)}
+          onChange={setSingleSelected}
         />
       </Form.Item>
       <Form.Item label="Multiple">
@@ -27,7 +30,7 @@ const App: React.FC = () => {
           multiple
           options={tagsData}
           value={multipleSelected}
-          onChange={(val) => setMultipleSelected(val)}
+          onChange={setMultipleSelected}
         />
       </Form.Item>
     </Form>

components/tag/index.tsx

@@ -167,7 +167,7 @@ const InternalTag = React.forwardRef<HTMLSpanElement | HTMLAnchorElement, TagPro
     );
 
     // ===================== Closable =====================
-    const handleCloseClick = (e: React.MouseEvent<HTMLElement>) => {
+    const handleCloseClick: React.MouseEventHandler<HTMLSpanElement> = (e) => {
       if (mergedDisabled) {
         return;
       }
@@ -205,9 +205,7 @@ const InternalTag = React.forwardRef<HTMLSpanElement | HTMLAnchorElement, TagPro
 
     const iconNode: React.ReactNode = cloneElement(icon, {
       className: clsx(
-        React.isValidElement(icon)
-          ? (icon as React.ReactElement<{ className?: string }>).props?.className
-          : '',
+        React.isValidElement<{ className?: string }>(icon) ? icon.props?.className : undefined,
         mergedClassNames.icon,
       ),
       style: mergedStyles.icon,

components/tree/DirectoryTree.tsx

@@ -20,11 +20,6 @@ export interface DirectoryTreeProps<T extends BasicDataNode = DataNode> extends
   expandAction?: ExpandAction;
 }
 
-type DirectoryTreeCompoundedComponent = (<T extends BasicDataNode | DataNode = DataNode>(
-  props: React.PropsWithChildren<DirectoryTreeProps<T>> & React.RefAttributes<RcTree>,
-) => React.ReactElement) &
-  Pick<React.FC, 'displayName'>;
-
 export interface DirectoryTreeState {
   expandedKeys?: Key[];
   selectedKeys?: Key[];
@@ -42,10 +37,9 @@ function getTreeData({ treeData, children }: DirectoryTreeProps) {
   return treeData || convertTreeToData(children);
 }
 
-const DirectoryTree: React.ForwardRefRenderFunction<RcTree, DirectoryTreeProps> = (
-  { defaultExpandAll, defaultExpandParent, defaultExpandedKeys, ...props },
-  ref,
-) => {
+const DirectoryTree = React.forwardRef<RcTree, DirectoryTreeProps>((oriProps, ref) => {
+  const { defaultExpandAll, defaultExpandParent, defaultExpandedKeys, ...props } = oriProps;
+
   // Shift click usage
   const lastSelectedKey = React.useRef<Key>(null);
 
@@ -73,6 +67,7 @@ const DirectoryTree: React.ForwardRefRenderFunction<RcTree, DirectoryTreeProps>
   const [selectedKeys, setSelectedKeys] = React.useState(
     props.selectedKeys || props.defaultSelectedKeys || [],
   );
+
   const [expandedKeys, setExpandedKeys] = React.useState(() => getInitExpandedKeys());
 
   React.useEffect(() => {
@@ -200,14 +195,10 @@ const DirectoryTree: React.ForwardRefRenderFunction<RcTree, DirectoryTreeProps>
       onExpand={onExpand}
     />
   );
-};
-
-const ForwardDirectoryTree = React.forwardRef(
-  DirectoryTree,
-) as unknown as DirectoryTreeCompoundedComponent;
+});
 
 if (process.env.NODE_ENV !== 'production') {
-  ForwardDirectoryTree.displayName = 'DirectoryTree';
+  DirectoryTree.displayName = 'DirectoryTree';
 }
 
-export default ForwardDirectoryTree;
+export default DirectoryTree;

components/typography/Text.tsx

@@ -11,7 +11,7 @@ export interface TextProps
   ellipsis?: boolean | Omit<EllipsisConfig, 'expandable' | 'rows' | 'onExpand'>;
 }
 
-const Text: React.ForwardRefRenderFunction<HTMLSpanElement, TextProps> = (props, ref) => {
+const Text = React.forwardRef<HTMLSpanElement, TextProps>((props, ref) => {
   const { ellipsis, children, ...restProps } = props;
   const mergedEllipsis = React.useMemo(() => {
     if (ellipsis && typeof ellipsis === 'object') {
@@ -37,6 +37,6 @@ const Text: React.ForwardRefRenderFunction<HTMLSpanElement, TextProps> = (props,
       {children}
     </Base>
   );
-};
+});
 
-export default React.forwardRef(Text);
+export default Text;

package.json

@@ -162,7 +162,7 @@
     "@ant-design/x": "^2.2.0",
     "@ant-design/x-sdk": "^2.2.0",
     "@antfu/eslint-config": "^7.3.0",
-    "@biomejs/biome": "~2.3.10",
+    "@biomejs/biome": "^2.4.2",
     "@blazediff/core": "^1.7.0",
     "@codecov/webpack-plugin": "^1.9.1",
     "@codesandbox/sandpack-react": "^2.20.0",