@hsu-react/ui 2.4.3 → 2.4.4

package/es/components/Icon/index.d.ts

@@ -6,5 +6,11 @@ interface IconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpa
     onRef?: (ref?: React.RefObject<HTMLDivElement>) => void;
     fontSize?: number | string;
 }
-declare const Icon: React.FC<IconProps>;
+/**
+ * `forwardRef` 不是可选的：`Tooltip` / `Dropdown` / `Popover` 都要往触发元素上挂 ref
+ * 才能定位浮层。作为普通函数组件时，把 Icon 直接塞进它们里面会让 React 报
+ * “Function components cannot be given refs”，浮层的定位也失去了锚点。
+ * 图标是这几个组件最常见的触发元素，所以这个坑几乎人人会踩。
+ */
+declare const Icon: React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export default Icon;

package/es/components/Icon/index.js

@@ -9,7 +9,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { Icon as Iconify } from "@iconify/react";
 import * as AntdIcons from "@ant-design/icons";
-import React, { useEffect, useRef } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 import classNames from "classnames";
 import styles from "./index.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -19,7 +19,13 @@ var getAntdIcon = function getAntdIcon(icon) {
   if (!/(?:Outlined|Filled|TwoTone)$/.test(icon)) return undefined;
   return AntdIcons[icon];
 };
-var Icon = function Icon(props) {
+/**
+ * `forwardRef` 不是可选的：`Tooltip` / `Dropdown` / `Popover` 都要往触发元素上挂 ref
+ * 才能定位浮层。作为普通函数组件时，把 Icon 直接塞进它们里面会让 React 报
+ * “Function components cannot be given refs”，浮层的定位也失去了锚点。
+ * 图标是这几个组件最常见的触发元素，所以这个坑几乎人人会踩。
+ */
+var Icon = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
   var iconProps = props.iconProps,
     icon = props.icon,
     className = props.className,
@@ -29,6 +35,17 @@ var Icon = function Icon(props) {
     fontSize = props.fontSize,
     iconConfig = _objectWithoutProperties(props, _excluded);
   var ref = useRef(null);
+
+  // 内外两个 ref 都要喂：内部这个是 `onRef` 回调的载体（老接口，不能动），
+  // 外部那个是浮层组件用来定位的
+  var setRef = useCallback(function (node) {
+    ref.current = node;
+    if (typeof forwardedRef === "function") {
+      forwardedRef(node);
+    } else if (forwardedRef) {
+      forwardedRef.current = node;
+    }
+  }, [forwardedRef]);
   useEffect(function () {
     onRef === null || onRef === void 0 || onRef(ref);
   }, [onRef, ref]);
@@ -43,7 +60,7 @@ var Icon = function Icon(props) {
     return /*#__PURE__*/_jsx(AntdNamedIcon, _objectSpread(_objectSpread({}, iconConfig), {}, {
       className: classNames([styles.icon, className]),
       style: mergedStyle,
-      ref: ref
+      ref: setRef
     }));
   }
 
@@ -51,7 +68,7 @@ var Icon = function Icon(props) {
   // the antd Icon's svg (whose viewBox would scale the inner svg down so much the icon becomes invisible).
   return /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({}, iconConfig), {}, {
     role: "img",
-    ref: ref,
+    ref: setRef,
     className: classNames(["anticon", styles.icon, className]),
     style: mergedStyle,
     children: /*#__PURE__*/_jsx(Iconify, _objectSpread(_objectSpread({}, iconProps), {}, {
@@ -60,5 +77,6 @@ var Icon = function Icon(props) {
       height: "1em"
     }))
   }));
-};
+});
+Icon.displayName = "Icon";
 export default Icon;

package/lib/components/Icon/index.d.ts

@@ -6,5 +6,11 @@ interface IconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpa
     onRef?: (ref?: React.RefObject<HTMLDivElement>) => void;
     fontSize?: number | string;
 }
-declare const Icon: React.FC<IconProps>;
+/**
+ * `forwardRef` 不是可选的：`Tooltip` / `Dropdown` / `Popover` 都要往触发元素上挂 ref
+ * 才能定位浮层。作为普通函数组件时，把 Icon 直接塞进它们里面会让 React 报
+ * “Function components cannot be given refs”，浮层的定位也失去了锚点。
+ * 图标是这几个组件最常见的触发元素，所以这个坑几乎人人会踩。
+ */
+declare const Icon: React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export default Icon;

package/lib/components/Icon/index.js

@@ -19,7 +19,13 @@ const getAntdIcon = icon => {
   if (!/(?:Outlined|Filled|TwoTone)$/.test(icon)) return undefined;
   return AntdIcons[icon];
 };
-const Icon = props => {
+/**
+ * `forwardRef` 不是可选的：`Tooltip` / `Dropdown` / `Popover` 都要往触发元素上挂 ref
+ * 才能定位浮层。作为普通函数组件时，把 Icon 直接塞进它们里面会让 React 报
+ * “Function components cannot be given refs”，浮层的定位也失去了锚点。
+ * 图标是这几个组件最常见的触发元素，所以这个坑几乎人人会踩。
+ */
+const Icon = /*#__PURE__*/_react2.default.forwardRef((props, forwardedRef) => {
   const {
     iconProps,
     icon,
@@ -31,6 +37,17 @@ const Icon = props => {
     ...iconConfig
   } = props;
   const ref = (0, _react2.useRef)(null);
+
+  // 内外两个 ref 都要喂：内部这个是 `onRef` 回调的载体（老接口，不能动），
+  // 外部那个是浮层组件用来定位的
+  const setRef = (0, _react2.useCallback)(node => {
+    ref.current = node;
+    if (typeof forwardedRef === "function") {
+      forwardedRef(node);
+    } else if (forwardedRef) {
+      forwardedRef.current = node;
+    }
+  }, [forwardedRef]);
   (0, _react2.useEffect)(() => {
     onRef?.(ref);
   }, [onRef, ref]);
@@ -47,7 +64,7 @@ const Icon = props => {
       ...iconConfig,
       className: (0, _classnames.default)([_indexModule.default.icon, className]),
       style: mergedStyle,
-      ref: ref
+      ref: setRef
     });
   }
 
@@ -56,7 +73,7 @@ const Icon = props => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     ...iconConfig,
     role: "img",
-    ref: ref,
+    ref: setRef,
     className: (0, _classnames.default)(["anticon", _indexModule.default.icon, className]),
     style: mergedStyle,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
@@ -66,5 +83,6 @@ const Icon = props => {
       height: "1em"
     })
   });
-};
+});
+Icon.displayName = "Icon";
 var _default = exports.default = Icon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsu-react/ui",
-  "version": "2.4.3",
+  "version": "2.4.4",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",

package/src/components/Icon/index.tsx

@@ -5,7 +5,7 @@ import {
 } from "@iconify/react";
 
 import * as AntdIcons from "@ant-design/icons";
-import React, { useEffect, useRef } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 import classNames from "classnames";
 import styles from "./index.module.scss";
 
@@ -38,7 +38,13 @@ interface IconProps
   fontSize?: number | string;
 }
 
-const Icon: React.FC<IconProps> = (props) => {
+/**
+ * `forwardRef` 不是可选的：`Tooltip` / `Dropdown` / `Popover` 都要往触发元素上挂 ref
+ * 才能定位浮层。作为普通函数组件时，把 Icon 直接塞进它们里面会让 React 报
+ * “Function components cannot be given refs”，浮层的定位也失去了锚点。
+ * 图标是这几个组件最常见的触发元素，所以这个坑几乎人人会踩。
+ */
+const Icon = React.forwardRef<HTMLSpanElement, IconProps>((props, forwardedRef) => {
   const {
     iconProps,
     icon,
@@ -51,6 +57,22 @@ const Icon: React.FC<IconProps> = (props) => {
   } = props;
   const ref = useRef<HTMLDivElement>(null);
 
+  // 内外两个 ref 都要喂：内部这个是 `onRef` 回调的载体（老接口，不能动），
+  // 外部那个是浮层组件用来定位的
+  const setRef = useCallback(
+    (node: HTMLSpanElement | null) => {
+      (ref as React.MutableRefObject<HTMLDivElement | null>).current =
+        node as unknown as HTMLDivElement | null;
+
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else if (forwardedRef) {
+        forwardedRef.current = node;
+      }
+    },
+    [forwardedRef]
+  );
+
   useEffect(() => {
     onRef?.(ref);
   }, [onRef, ref]);
@@ -69,7 +91,7 @@ const Icon: React.FC<IconProps> = (props) => {
         {...iconConfig}
         className={classNames([styles.icon, className])}
         style={mergedStyle}
-        ref={ref as unknown as React.Ref<HTMLSpanElement>}
+        ref={setRef}
       />
     );
   }
@@ -80,13 +102,15 @@ const Icon: React.FC<IconProps> = (props) => {
     <span
       {...iconConfig}
       role="img"
-      ref={ref as unknown as React.Ref<HTMLSpanElement>}
+      ref={setRef}
       className={classNames(["anticon", styles.icon, className])}
       style={mergedStyle}
     >
       <Iconify {...iconProps} icon={icon} width="1em" height="1em" />
     </span>
   );
-};
+});
+
+Icon.displayName = "Icon";
 
 export default Icon;