@arco-design/mobile-react 2.25.3 → 2.26.0

package/umd/_helpers/hooks.js

@@ -30,23 +30,26 @@
   _exports.useSystem = useSystem;
   _exports.useUpdateEffect = useUpdateEffect;
   _exports.useWindowSize = useWindowSize;
+
   /**
    * @type hooks
    * @name 公共hooks
    * @name_en General Hooks
    */
-
   function useListenResize(resizeHandler, deps, needListen) {
     if (deps === void 0) {
       deps = [];
     }
+
     if (needListen === void 0) {
       needListen = true;
     }
+
     (0, _react.useEffect)(function () {
       if (!needListen) {
         return function () {};
       }
+
       window.addEventListener('resize', resizeHandler);
       window.addEventListener('orientationchange', resizeHandler);
       return function () {
@@ -55,7 +58,6 @@
       };
     }, [].concat(deps, [needListen]));
   }
-
   /**
    * useState自定义封装，统一处理在组件卸载后还使用setState的行为
    * tips：在unmount后有异步处理未完成的场景使用，不推荐无脑替换useState
@@ -64,15 +66,19 @@
    * @param initialState 初始状态
    * @param initialState {en} Initial State
    */
+
+
   function useMountedState(initialState) {
     var _useState = (0, _react.useState)(initialState),
-      state = _useState[0],
-      setState = _useState[1];
+        state = _useState[0],
+        setState = _useState[1];
+
     var leavingRef = (0, _react.useRef)(false);
     var setValidState = (0, _react.useCallback)(function (value) {
       if (leavingRef.current) {
         return;
       }
+
       setState(value);
     }, []);
     (0, _react.useEffect)(function () {
@@ -83,30 +89,36 @@
     var result = [state, setValidState];
     return result;
   }
+
   function useRefState(initialValue) {
     var _useState2 = (0, _react.useState)(initialValue),
-      state = _useState2[0],
-      setState = _useState2[1];
+        state = _useState2[0],
+        setState = _useState2[1];
+
     var stateRef = (0, _react.useRef)(state);
     (0, _react.useEffect)(function () {
       stateRef.current = state;
     }, [state]);
     return [state, stateRef, setState];
   }
+
   function useRefMountedState(initialValue) {
     var _useMountedState = useMountedState(initialValue),
-      state = _useMountedState[0],
-      setState = _useMountedState[1];
+        state = _useMountedState[0],
+        setState = _useMountedState[1];
+
     var stateRef = (0, _react.useRef)(state);
     (0, _react.useEffect)(function () {
       stateRef.current = state;
     }, [state]);
     return [state, stateRef, setState];
   }
+
   function useUpdateEffect(effect, dependencies) {
     if (dependencies === void 0) {
       dependencies = [];
     }
+
     var isInitialMount = (0, _react.useRef)(true);
     (0, _react.useEffect)(function () {
       if (isInitialMount.current) {
@@ -116,9 +128,11 @@
       }
     }, dependencies);
   }
+
   function useForceUpdate() {
     var _useState3 = (0, _react.useState)(0),
-      setTick = _useState3[1];
+        setTick = _useState3[1];
+
     var update = (0, _react.useCallback)(function () {
       setTick(function (tick) {
         return tick + 1;
@@ -126,6 +140,7 @@
     }, []);
     return update;
   }
+
   function useLatestRef(variable) {
     var variableRef = (0, _react.useRef)(variable);
     (0, _react.useEffect)(function () {
@@ -133,30 +148,37 @@
     }, [variable]);
     return variableRef;
   }
+
   function useSystem() {
     var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
-      currentSystem = _useContext.system;
+        currentSystem = _useContext.system;
+
     var _useState4 = (0, _react.useState)(function () {
-        return currentSystem || (0, _mobileUtils.getSystem)();
-      }),
-      system = _useState4[0],
-      setSystem = _useState4[1];
+      return currentSystem || (0, _mobileUtils.getSystem)();
+    }),
+        system = _useState4[0],
+        setSystem = _useState4[1];
+
     (0, _react.useEffect)(function () {
       setSystem(currentSystem || (0, _mobileUtils.getSystem)());
     }, [currentSystem]);
     return system;
   }
+
   function useWindowSize(listenResize) {
     var _useState5 = (0, _react.useState)(0),
-      windowWidth = _useState5[0],
-      setWindowWidth = _useState5[1];
+        windowWidth = _useState5[0],
+        setWindowWidth = _useState5[1];
+
     var _useState6 = (0, _react.useState)(0),
-      windowHeight = _useState6[0],
-      setWindowHeight = _useState6[1];
+        windowHeight = _useState6[0],
+        setWindowHeight = _useState6[1];
+
     function setSize() {
       setWindowWidth(window.innerWidth);
       setWindowHeight(window.innerHeight);
     }
+
     useListenResize(setSize, [], listenResize);
     (0, _react.useEffect)(function () {
       setSize();
@@ -166,11 +188,13 @@
       windowHeight: windowHeight
     };
   }
+
   /* eslint-disable max-lines-per-function */
   function usePopupScroll(visible, popupDom, getScrollContainer, orientationDirection, preventCallback, onTouchMove, gestureOutOfControl) {
     if (orientationDirection === void 0) {
       orientationDirection = 'top';
     }
+
     var scrollRef = (0, _react.useRef)([]);
     var touchingRef = (0, _react.useRef)({
       dom: null,
@@ -184,9 +208,11 @@
       if (gestureOutOfControl) {
         return;
       }
+
       touchStartXRef.current = e.touches && e.touches[0] ? e.touches[0].clientX : 0;
       touchStartYRef.current = e.touches && e.touches[0] ? e.touches[0].clientY : 0;
       var ele = getScrollContainer ? getScrollContainer() : null;
+
       if (ele) {
         var actualEle = Array.isArray(ele) ? ele : [ele];
         scrollRef.current = actualEle.reduce(function (acc, nowEle) {
@@ -199,15 +225,19 @@
       } else {
         scrollRef.current = [];
       }
+
       touchingRef.current = {
         dom: null,
         inScrollIndexes: []
       };
     }, [getScrollContainer, gestureOutOfControl, orientationDirection]);
+
     function judgeInScroll(originNode, scroll) {
       var inScrollIndexes = [];
+
       for (var i = 0; i < scroll.length; i += 1) {
         var node = originNode;
+
         while (node && scroll[i]) {
           if (node === scroll[i].ele) {
             inScrollIndexes.push(i);
@@ -217,54 +247,66 @@
           }
         }
       }
+
       touchingRef.current = {
         dom: originNode,
         inScrollIndexes: inScrollIndexes
       };
       return inScrollIndexes;
     }
+
     var handleTouchMove = (0, _react.useCallback)(function (e) {
       function getScrollTop(scroll) {
         var ele = scroll.ele,
-          maxScrollX = scroll.maxScrollX,
-          maxScrollY = scroll.maxScrollY;
+            maxScrollX = scroll.maxScrollX,
+            maxScrollY = scroll.maxScrollY;
+
         switch (orientationDirection) {
           case 'left':
             return maxScrollY - ele.scrollLeft;
+
           case 'right':
             return ele.scrollLeft;
+
           case 'bottom':
             return maxScrollX - ele.scrollTop;
+
           case 'top':
           default:
             return ele.scrollTop;
         }
       }
+
       function getScrollLeft(scroll) {
         var ele = scroll.ele,
-          maxScrollX = scroll.maxScrollX,
-          maxScrollY = scroll.maxScrollY;
+            maxScrollX = scroll.maxScrollX,
+            maxScrollY = scroll.maxScrollY;
+
         switch (orientationDirection) {
           case 'left':
             return ele.scrollTop;
+
           case 'right':
             return maxScrollX - ele.scrollTop;
+
           case 'bottom':
             return maxScrollY - ele.scrollLeft;
+
           case 'top':
           default:
             return ele.scrollLeft;
         }
       }
+
       var touchMoveX = e.changedTouches && e.changedTouches[0] ? e.changedTouches[0].clientX : 0;
       var touchMoveY = e.changedTouches && e.changedTouches[0] ? e.changedTouches[0].clientY : 0;
       var scroll = scrollRef.current;
       var node = e.target;
       var _touchingRef$current = touchingRef.current,
-        touchingDom = _touchingRef$current.dom,
-        touchingIndexes = _touchingRef$current.inScrollIndexes;
-      // target一样就取缓存结果，不取dom判断了
+          touchingDom = _touchingRef$current.dom,
+          touchingIndexes = _touchingRef$current.inScrollIndexes; // target一样就取缓存结果，不取dom判断了
       // @en If the target is the same, the cached result is taken, and the dom judgment is not taken.
+
       var inScrollIndexes = touchingDom === node ? touchingIndexes : judgeInScroll(node, scroll);
       var distanceX = touchMoveX - touchStartXRef.current;
       var distanceY = touchMoveY - touchStartYRef.current;
@@ -272,28 +314,35 @@
       var absY = Math.abs(distanceY);
       var direc = absY > absX ? 'y' : 'x';
       var prevented = false;
+
       if (gestureOutOfControl) {
         onTouchMoveRef.current == null ? void 0 : onTouchMoveRef.current(e, prevented, direc);
         return;
       }
+
       if (scroll.length && inScrollIndexes.length) {
         var needPrevents = [];
+
         for (var i = 0; i < inScrollIndexes.length; i += 1) {
           var touchingScroll = scroll[inScrollIndexes[i]];
           var scrollTop = getScrollTop(touchingScroll);
           var scrollLeft = getScrollLeft(touchingScroll);
+
           if (distanceY > 0 && absY > absX && scrollTop === 0 || distanceX > 0 && absX > absY && scrollLeft === 0) {
             needPrevents.push(true);
             continue;
           }
+
           if (distanceY < 0 && absY > absX && scrollTop + 1 >= touchingScroll.maxScrollY || distanceX < 0 && absX > absY && scrollLeft + 1 >= touchingScroll.maxScrollX) {
             needPrevents.push(true);
             continue;
           }
+
           needPrevents.push(false);
-        }
-        // 满足一个不prevent的条件就停止prevent，否则prevent
+        } // 满足一个不prevent的条件就停止prevent，否则prevent
         // @en Stop prevent if a non-prevent condition is met, otherwise prevent.
+
+
         if (needPrevents.indexOf(false) < 0) {
           preventCallbackRef.current == null ? void 0 : preventCallbackRef.current(e, direc);
           e.cancelable && e.preventDefault();
@@ -304,12 +353,14 @@
         e.cancelable && e.preventDefault();
         prevented = true;
       }
+
       onTouchMoveRef.current == null ? void 0 : onTouchMoveRef.current(e, prevented, direc);
     }, [orientationDirection, gestureOutOfControl]);
     (0, _react.useEffect)(function () {
       if (!visible || !popupDom) {
         return function () {};
       }
+
       popupDom.addEventListener('touchstart', handleTouchStart);
       popupDom.addEventListener('touchmove', handleTouchMove, {
         passive: false
@@ -320,6 +371,7 @@
       };
     }, [visible, popupDom, handleTouchStart, handleTouchMove]);
   }
+
   function useSwiperInnerScroll(getInnerScrollContainer) {
     var stopFunc = (0, _react.useCallback)(function (e) {
       return e.stopPropagation();
@@ -328,6 +380,7 @@
       if (!getInnerScrollContainer) {
         return;
       }
+
       var containers = getInnerScrollContainer();
       var validContainers = Array.isArray(containers) ? containers : [containers];
       validContainers.forEach(function (container) {
@@ -346,17 +399,21 @@
       };
     }, [getInnerScrollContainer]);
   }
+
   function useAddListener(dom, event, handler, options) {
     if (options === void 0) {
       options = {
         capture: true
       };
     }
+
     (0, _react.useEffect)(function () {
       if (!dom) return;
+
       if (handler) {
         dom.addEventListener(event, handler, options);
       }
+
       return function () {
         if (handler) {
           dom.removeEventListener(event, handler, options);
@@ -364,23 +421,26 @@
       };
     }, [handler]);
   }
-
   /**
    * 统计同时出现的全屏组件
    * @en Count simultaneous full-screen components
    */
+
+
   var arcoFullScreenCount = 0;
   var arcoFullScreenOriginOverflow = '';
+
   function usePreventBodyScroll(visible, preventBodyScroll, initialBodyOverflow) {
     // 新出现一个全屏组件则计数+1，并设置body hidden样式
     // @en When a new full-screen component appears, count + 1 and set the body hidden style
     var addFullScreen = (0, _react.useCallback)(function () {
-      var count = arcoFullScreenCount;
-      // 在当前没有全屏组件出现时，记下body overflow的初始值
+      var count = arcoFullScreenCount; // 在当前没有全屏组件出现时，记下body overflow的初始值
       // @en Note the initial value of body overflow when no full-screen components are currently present
+
       if (!count) {
         arcoFullScreenOriginOverflow = initialBodyOverflow !== void 0 ? initialBodyOverflow : document.body.style.overflow;
       }
+
       arcoFullScreenCount += 1;
       document.body.style.overflow = 'hidden';
     }, []);
@@ -388,9 +448,11 @@
      * 移除一个全屏组件时，根据剩余是否还有全屏组件判断是否需要还原overflow样式
      * @en When removing a full-screen component, determine whether the overflow style needs to be restored according to whether there are any remaining full-screen components.
      */
+
     var removeFullScreen = (0, _react.useCallback)(function () {
       var newCount = arcoFullScreenCount - 1;
       arcoFullScreenCount = newCount;
+
       if (!newCount) {
         document.body.style.overflow = arcoFullScreenOriginOverflow;
       }
@@ -398,12 +460,14 @@
     (0, _react.useEffect)(function () {
       if (!preventBodyScroll) {
         return function () {};
-      }
-      // 如果一开始就是visible=true则加上样式
+      } // 如果一开始就是visible=true则加上样式
       // @en If it is visible=true at the beginning, add the style.
+
+
       if (visible) {
         addFullScreen();
       }
+
       return function () {
         // 如果这里visible为true，则说明即将隐藏组件或在展示时卸载组件
         // @en If visible here is true, it means that the component is about to be hidden or unloaded when displayed.
@@ -413,19 +477,25 @@
       };
     }, [visible]);
   }
+
   var useProgress = function useProgress(mountedTransition, percentage, duration, mountedBezier, step) {
     var _useState7 = (0, _react.useState)(0),
-      currentPercentage = _useState7[0],
-      setCurrentPercentage = _useState7[1];
+        currentPercentage = _useState7[0],
+        setCurrentPercentage = _useState7[1];
+
     var _useState8 = (0, _react.useState)(false),
-      transitionControl = _useState8[0],
-      setTransitionControl = _useState8[1];
+        transitionControl = _useState8[0],
+        setTransitionControl = _useState8[1];
+
     var _useState9 = (0, _react.useState)(0),
-      count = _useState9[0],
-      setCount = _useState9[1];
+        count = _useState9[0],
+        setCount = _useState9[1];
+
+    var latestPercentage = (0, _react.useRef)(percentage);
     (0, _react.useEffect)(function () {
       mountedTransition ? (0, _mobileUtils.scrollWithAnimation)(0, percentage, function (progress) {
-        setCurrentPercentage(Math.floor(progress));
+        var targetProgress = progress / percentage * latestPercentage.current;
+        setCurrentPercentage(Math.floor(targetProgress));
       }, duration, mountedBezier) : setCurrentPercentage(percentage);
       var id = setTimeout(function () {
         setTransitionControl(true);
@@ -435,6 +505,7 @@
       };
     }, []);
     (0, _react.useEffect)(function () {
+      latestPercentage.current = percentage;
       setCount(Math.floor(percentage / step));
     }, [percentage, step]);
     (0, _react.useEffect)(function () {
@@ -442,14 +513,18 @@
     }, [count, percentage, step]);
     return [currentPercentage, transitionControl];
   };
+
   _exports.useProgress = useProgress;
+
   function useSingleAndDoubleClick(onClick, onDoubleClick, delay) {
     if (delay === void 0) {
       delay = 200;
     }
+
     var _useState10 = (0, _react.useState)(0),
-      clickTimes = _useState10[0],
-      setClickTimes = _useState10[1];
+        clickTimes = _useState10[0],
+        setClickTimes = _useState10[1];
+
     var eventRef = (0, _react.useRef)();
     (0, _react.useEffect)(function () {
       var timer = setTimeout(function () {
@@ -468,11 +543,14 @@
       });
     };
   }
+
   var arcoSvgKeyCount = 0;
+
   function useGenSvgKey(userSetSvgKey) {
     var _useState11 = (0, _react.useState)(''),
-      innerSvgKey = _useState11[0],
-      setInnerSvgKey = _useState11[1];
+        innerSvgKey = _useState11[0],
+        setInnerSvgKey = _useState11[1];
+
     var svgKey = userSetSvgKey || innerSvgKey;
     (0, _react.useEffect)(function () {
       setInnerSvgKey("inner-" + arcoSvgKeyCount);

package/umd/_helpers/index.js

@@ -14,6 +14,7 @@
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
   _exports.__esModule = true;
   var _exportNames = {
     getStyleWithVendor: true,
@@ -40,15 +41,16 @@
     if (key in _exports && _exports[key] === _reactDom[key]) return;
     _exports[key] = _reactDom[key];
   });
+
   /**
    * @type utils
    * @name componentUtils
    */
-
   function getStyleWithVendor(style) {
     var allowReg = /(transform|transition|animation)/i;
     var newStyle = Object.keys(style).reduce(function (acc, key) {
       var _ref, _extends2;
+
       var webkitStyle = allowReg.test(key) ? (_ref = {}, _ref["Webkit" + key.replace(/^(.)/, function (_, p1) {
         return p1.toUpperCase();
       })] = style[key], _ref) : {};
@@ -56,13 +58,15 @@
     }, {});
     return newStyle;
   }
-
   /**
    * 计算默认值，仅未定义时使用默认值
    * @desc {en} Calculate the default value, use default value only if undefined
    */
+
+
   var getDefaultValue = function getDefaultValue(value, defaultValue) {
     return value === void 0 ? defaultValue : value;
   };
+
   _exports.getDefaultValue = getDefaultValue;
 });

package/umd/_helpers/react-dom.js

@@ -14,17 +14,22 @@
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
   _exports.__esModule = true;
   _exports.render = void 0;
   _reactDom = _interopRequireDefault(_reactDom);
+
   var _CopyReactDOM$version;
+
   function isObject(obj) {
     return Object.prototype.toString.call(obj) === '[object Object]';
   }
+
   var __SECRET_INTERNALS__ = '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED';
   var CopyReactDOM = _reactDom.default;
   var copyRender;
   var isReact18 = Number((_CopyReactDOM$version = CopyReactDOM.version) == null ? void 0 : _CopyReactDOM$version.split('.')[0]) > 17;
+
   var updateUsingClientEntryPoint = function updateUsingClientEntryPoint(skipWarning) {
     // https://github.com/facebook/react/blob/17806594cc28284fe195f918e8d77de3516848ec/packages/react-dom/npm/client.js#L10
     // Avoid console warning
@@ -32,21 +37,26 @@
       CopyReactDOM[__SECRET_INTERNALS__].usingClientEntryPoint = skipWarning;
     }
   };
+
   var createRoot;
+
   try {
     createRoot = CopyReactDOM.createRoot;
   } catch (_) {}
+
   if (isReact18 && createRoot) {
     copyRender = function copyRender(app, container) {
       updateUsingClientEntryPoint(true);
       var root = createRoot(container);
       updateUsingClientEntryPoint(false);
       root.render(app);
+
       root._unmount = function () {
         setTimeout(function () {
           root == null ? void 0 : root.unmount == null ? void 0 : root.unmount();
         });
       };
+
       return root;
     };
   } else {
@@ -62,6 +72,7 @@
       };
     };
   }
+
   var render = copyRender;
   _exports.render = render;
 });

package/umd/_helpers/render.js

@@ -14,35 +14,44 @@
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
   _exports.__esModule = true;
   _exports.ReactDOMRender = void 0;
   _extends2 = _interopRequireDefault(_extends2);
   _react = _interopRequireDefault(_react);
+
   var ReactDOMRender = function ReactDOMRender(app, container, context) {
     var _this = this;
+
     this.root = void 0;
     this.app = void 0;
     this.container = void 0;
     this.context = void 0;
+
     this.render = function (props) {
       var CustomApp = _this.app;
       var propsWithContext = (0, _extends2.default)({}, props, {
         context: _this.context
       });
+
       if (_this.root) {
         _this.root.render( /*#__PURE__*/_react.default.createElement(CustomApp, propsWithContext));
       } else {
         _this.root = (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(CustomApp, propsWithContext), _this.container);
       }
     };
+
     this.unmount = function () {
       var _this$root;
+
       (_this$root = _this.root) == null ? void 0 : _this$root._unmount();
       _this.root = undefined;
     };
+
     this.app = app;
     this.container = container;
     this.context = context;
   };
+
   _exports.ReactDOMRender = ReactDOMRender;
 });

package/umd/action-sheet/index.d.ts

@@ -86,11 +86,11 @@ declare const _default: React.ForwardRefExoticComponent<ActionSheetProps & React
      * @param {ActionSheetProps} config setting
      * @returns {{ close: () => void; update: (newConfig: ActionSheetProps) => void; }}
      */
-    open: (config: Pick<import("../context-provider").WithGlobalContext<ActionSheetProps & React.RefAttributes<ActionSheetRef>>, "title" | "ref" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "needBottomOffset" | "translateZ" | "items" | "cancelText" | "subTitle"> & {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<ActionSheetProps & React.RefAttributes<ActionSheetRef>>, "title" | "ref" | "key" | "context" | "className" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "needBottomOffset" | "translateZ" | "items" | "cancelText" | "subTitle"> & {
         key?: string | undefined;
     }, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ActionSheetProps & React.RefAttributes<ActionSheetRef>>, "title" | "ref" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "needBottomOffset" | "translateZ" | "items" | "cancelText" | "subTitle"> & {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ActionSheetProps & React.RefAttributes<ActionSheetRef>>, "title" | "ref" | "key" | "context" | "className" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "needBottomOffset" | "translateZ" | "items" | "cancelText" | "subTitle"> & {
             key?: string | undefined;
         }) => void;
     };