@rc-component/util 1.11.0 → 1.12.0

package/README.md

@@ -1,303 +1,92 @@
-# rc-util
+<div align="center">
+  <h1>@rc-component/util</h1>
+  <p><sub><a href="https://ant.design"><img alt="Ant Design" height="14" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" style="vertical-align: -0.125em;" /></a> Part of the Ant Design ecosystem.</sub></p>
+  <p>🛠️ Shared React utilities for rc-component packages.</p>
 
-Common Utils For React Component.
+  <p>
+    <a href="https://npmjs.org/package/@rc-component/util"><img alt="NPM version" src="https://img.shields.io/npm/v/@rc-component/util.svg?style=flat-square"></a>
+    <a href="https://npmjs.org/package/@rc-component/util"><img alt="npm downloads" src="https://img.shields.io/npm/dm/@rc-component/util.svg?style=flat-square"></a>
+    <a href="https://github.com/react-component/util/actions/workflows/react-component-ci.yml"><img alt="build status" src="https://github.com/react-component/util/actions/workflows/react-component-ci.yml/badge.svg"></a>
+    <a href="https://app.codecov.io/gh/react-component/util"><img alt="Codecov" src="https://img.shields.io/codecov/c/github/react-component/util/master.svg?style=flat-square"></a>
+    <a href="https://bundlephobia.com/package/@rc-component/util"><img alt="bundle size" src="https://img.shields.io/bundlephobia/minzip/@rc-component/util?style=flat-square"></a>
+    <a href="https://github.com/umijs/dumi"><img alt="dumi" src="https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square"></a>
+  </p>
+</div>
 
-[![NPM version][npm-image]][npm-url]
-[![npm download][download-image]][download-url]
-[![build status][github-actions-image]][github-actions-url]
-[![Codecov][codecov-image]][codecov-url]
-[![bundle size][bundlephobia-image]][bundlephobia-url]
-[![dumi][dumi-image]][dumi-url]
+<p align="center">English | <a href="./README.zh-CN.md">简体中文</a></p>
 
-[npm-image]: http://img.shields.io/npm/v/rc-util.svg?style=flat-square
-[npm-url]: http://npmjs.org/package/rc-util
-[travis-image]: https://img.shields.io/travis/react-component/util/master?style=flat-square
-[travis-url]: https://travis-ci.com/react-component/util
-[github-actions-image]: https://github.com/react-component/util/actions/workflows/react-component-ci.yml/badge.svg
-[github-actions-url]: https://github.com/react-component/util/actions/workflows/react-component-ci.yml
-[codecov-image]: https://img.shields.io/codecov/c/github/react-component/util/master.svg?style=flat-square
-[codecov-url]: https://app.codecov.io/gh/react-component/util
-[david-url]: https://david-dm.org/react-component/util
-[david-image]: https://david-dm.org/react-component/util/status.svg?style=flat-square
-[david-dev-url]: https://david-dm.org/react-component/util?type=dev
-[david-dev-image]: https://david-dm.org/react-component/util/dev-status.svg?style=flat-square
-[download-image]: https://img.shields.io/npm/dm/rc-util.svg?style=flat-square
-[download-url]: https://npmjs.org/package/rc-util
-[bundlephobia-url]: https://bundlephobia.com/package/rc-util
-[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-util
-[dumi-url]: https://github.com/umijs/dumi
-[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
+## Highlights
 
-## Install
-
-[![rc-util](https://nodei.co/npm/rc-util.png)](https://npmjs.org/package/rc-util)
-
-## API
-
-### createChainedFunction
-
-> (...functions): Function
-
-Create a function which will call all the functions with it's arguments from left to right.
-
-```jsx|pure
-import createChainedFunction from 'rc-util/lib/createChainedFunction';
-```
-
-### deprecated
-
-> (prop: string, instead: string, component: string): void
-
-Log an error message to warn developers that `prop` is deprecated.
-
-```jsx|pure
-import deprecated from 'rc-util/lib/deprecated';
-```
-
-### getContainerRenderMixin
-
-> (config: Object): Object
-
-To generate a mixin which will render specific component into specific container automatically.
-
-```jsx|pure
-import getContainerRenderMixin from 'rc-util/lib/getContainerRenderMixin';
-```
-
-Fields in `config` and their meanings.
-
-| Field         | Type                         | Description                                                                | Default |
-| ------------- | ---------------------------- | -------------------------------------------------------------------------- | ------- |
-| autoMount     | boolean                      | Whether to render component into container automatically                   | true    |
-| autoDestroy   | boolean                      | Whether to remove container automatically while the component is unmounted | true    |
-| isVisible     | (instance): boolean          | A function to get current visibility of the component                      | -       |
-| isForceRender | (instance): boolean          | A function to determine whether to render popup even it's not visible      | -       |
-| getComponent  | (instance, extra): ReactNode | A function to get the component which will be rendered into container      | -       |
-| getContainer  | (instance): HTMLElement      | A function to get the container                                            |         |
-
-### Portal
-
-Render children to the specific container;
-
-```jsx|pure
-import Portal from 'rc-util/lib/Portal';
-```
-
-Props:
-
-| Prop         | Type            | Description                     | Default |
-| ------------ | --------------- | ------------------------------- | ------- |
-| children     | ReactChildren   | Content render to the container | -       |
-| getContainer | (): HTMLElement | A function to get the container | -       |
-
-### getScrollBarSize
-
-> (fresh?: boolean): number
-
-Get the width of scrollbar.
-
-```jsx|pure
-import getScrollBarSize from 'rc-util/lib/getScrollBarSize';
-```
-
-### guid
-
-> (): string
-
-To generate a global unique id across current application.
-
-```jsx|pure
-import guid from 'rc-util/lib/guid';
-```
-
-### pickAttrs
-
-> (props: Object): Object
-
-Pick valid HTML attributes and events from props.
-
-```jsx|pure
-import pickAttrs from 'rc-util/lib/pickAttrs';
-```
-
-### warn
-
-> (msg: string): void
-
-A shallow wrapper of `console.warn`.
-
-```jsx|pure
-import warn from 'rc-util/lib/warn';
-```
-
-### warning
-
-> (valid: boolean, msg: string): void
-
-A shallow wrapper of [warning](https://github.com/BerkeleyTrue/warning), but only warning once for the same message.
-
-```jsx|pure
-import warning, { noteOnce } from 'rc-util/lib/warning';
+- Built for React and maintained by the rc-component team.
+- Used by Ant Design and other React component libraries.
+- Ships TypeScript declarations with both ES module and CommonJS outputs.
+- Keeps examples, tests, and preview builds aligned with the package source.
 
-warning(false, '[antd Component] test hello world');
+> This package was historically published as `rc-util`. Prefer the scoped package for new code.
 
-// Low level note
-noteOnce(false, '[antd Component] test hello world');
-```
-
-### Children
-
-A collection of functions to operate React elements' children.
-
-#### Children/mapSelf
-
-> (children): children
-
-Return a shallow copy of children.
-
-```jsx|pure
-import mapSelf from 'rc-util/lib/Children/mapSelf';
-```
-
-#### Children/toArray
-
-> (children: ReactNode[]): ReactNode[]
-
-Convert children into an array.
-
-```jsx|pure
-import toArray from 'rc-util/lib/Children/toArray';
-```
-
-### Dom
-
-A collection of functions to operate DOM elements.
-
-#### Dom/addEventlistener
-
-> (target: ReactNode, eventType: string, listener: Function): { remove: Function }
-
-A shallow wrapper of [add-dom-event-listener](https://github.com/yiminghe/add-dom-event-listener).
-
-```jsx|pure
-import addEventlistener from 'rc-util/lib/Dom/addEventlistener';
-```
-
-#### Dom/canUseDom
-
-> (): boolean
-
-Check if DOM is available.
-
-```jsx|pure
-import canUseDom from 'rc-util/lib/Dom/canUseDom';
-```
-
-#### Dom/class
-
-A collection of functions to operate DOM nodes' class name.
-
-- `hasClass(node: HTMLElement, className: string): boolean`
-- `addClass(node: HTMLElement, className: string): void`
-- `removeClass(node: HTMLElement, className: string): void`
+## Install
 
-```jsx|pure
-import cssClass from 'rc-util/lib/Dom/class;
+```bash
+npm install @rc-component/util
 ```
 
-#### Dom/contains
+## Usage
 
-> (root: HTMLElement, node: HTMLElement): boolean
-
-Check if node is equal to root or in the subtree of root.
-
-```jsx|pure
-import contains from 'rc-util/lib/Dom/contains';
+```tsx | pure
+import {
+  Portal,
+  raf,
+  useEvent,
+  useLayoutEffect,
+  warning,
+} from '@rc-component/util';
 ```
 
-#### Dom/css
-
-A collection of functions to get or set css styles.
+## Examples
 
-- `get(node: HTMLElement, name?: string): any`
-- `set(node: HTMLElement, name?: string, value: any) | set(node, object)`
-- `getOuterWidth(el: HTMLElement): number`
-- `getOuterHeight(el: HTMLElement): number`
-- `getDocSize(): { width: number, height: number }`
-- `getClientSize(): { width: number, height: number }`
-- `getScroll(): { scrollLeft: number, scrollTop: number }`
-- `getOffset(node: HTMLElement): { left: number, top: number }`
+Run the local dumi site:
 
-```jsx|pure
-import css from 'rc-util/lib/Dom/css';
+```bash
+npm install
+npm start
 ```
 
-#### Dom/focus
+Then open `http://localhost:8000`.
 
-A collection of functions to operate focus status of DOM node.
-
-- `saveLastFocusNode(): void`
-- `clearLastFocusNode(): void`
-- `backLastFocusNode(): void`
-- `getFocusNodeList(node: HTMLElement): HTMLElement[]` get a list of focusable nodes from the subtree of node.
-- `limitTabRange(node: HTMLElement, e: Event): void`
+## API
 
-```jsx|pure
-import focus from 'rc-util/lib/Dom/focus';
-```
+The package exposes small, focused helpers used across rc-component and Ant Design packages. Import the public entry when possible, and use subpath imports for specialized DOM, React, or test helpers.
 
-#### Dom/support
+| Area            | Examples                                                                           |
+| --------------- | ---------------------------------------------------------------------------------- |
+| React hooks     | `useEvent`, `useLayoutEffect`, `useMergedState`, `useState` helpers                |
+| React utilities | `Children/toArray`, `composeRef`, `pickAttrs`, `Portal`                            |
+| DOM utilities   | `Dom/canUseDom`, `Dom/contains`, `Dom/dynamicCSS`, `Dom/focus`, `getScrollBarSize` |
+| Async helpers   | `raf`, `raf.cancel`                                                                |
+| Warnings        | `warning`, `noteOnce`, `resetWarned`                                               |
+| Tests           | `test/domHook` for DOM prototype spies                                             |
 
-> { animation: boolean | Object, transition: boolean | Object }
+Examples in `docs/examples` cover the commonly used subpath helpers.
 
-A flag to tell whether current environment supports `animationend` or `transitionend`.
+## Development
 
-```jsx|pure
-import support from 'rc-util/lib/Dom/support';
+```bash
+npm install
+npm start
+npm test
+npm run build
 ```
 
-### KeyCode
+The dumi site runs at `http://localhost:8000` by default.
 
-> Enum
+## Release
 
-Enum of KeyCode, please check the [definition](https://github.com/react-component/util/blob/master/src/KeyCode.ts) of it.
-
-```jsx|pure
-import KeyCode from 'rc-util/lib/KeyCode';
+```bash
+npm run prepublishOnly
 ```
 
-#### KeyCode.isTextModifyingKeyEvent
-
-> (e: Event): boolean
-
-Whether text and modified key is entered at the same time.
-
-#### KeyCode.isCharacterKey
-
-> (keyCode: KeyCode): boolean
-
-Whether character is entered.
-
-### ScrollLocker
-
-> ScrollLocker<{lock: (options: {container: HTMLElement}) => void, unLock: () => void}>
-
-improve shake when page scroll bar hidden.
-
-`ScrollLocker` change body style, and add a class `ant-scrolling-effect` when called, so if you page look abnormal, please check this;
-
-```js
-import ScrollLocker from 'rc-util/lib/Dom/scrollLocker';
-
-const scrollLocker = new ScrollLocker();
-
-// lock
-scrollLocker.lock()
-
-// unLock
-scrollLocker.unLock()
-```
+The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build.
 
 ## License
 
-[MIT](/LICENSE)
+@rc-component/util is released under the [MIT](./LICENSE) license.

package/README.zh-CN.md

@@ -0,0 +1,92 @@
+<div align="center">
+  <h1>@rc-component/util</h1>
+  <p><sub><a href="https://ant.design"><img alt="Ant Design" height="14" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" style="vertical-align: -0.125em;" /></a> Ant Design 生态的一部分。</sub></p>
+  <p>🛠️ rc-component 共享工具集合，包含 DOM、React 和测试辅助能力。</p>
+
+  <p>
+    <a href="https://npmjs.org/package/@rc-component/util"><img alt="NPM version" src="https://img.shields.io/npm/v/@rc-component/util.svg?style=flat-square"></a>
+    <a href="https://npmjs.org/package/@rc-component/util"><img alt="npm downloads" src="https://img.shields.io/npm/dm/@rc-component/util.svg?style=flat-square"></a>
+    <a href="https://github.com/react-component/util/actions/workflows/react-component-ci.yml"><img alt="build status" src="https://github.com/react-component/util/actions/workflows/react-component-ci.yml/badge.svg"></a>
+    <a href="https://app.codecov.io/gh/react-component/util"><img alt="Codecov" src="https://img.shields.io/codecov/c/github/react-component/util/master.svg?style=flat-square"></a>
+    <a href="https://bundlephobia.com/package/@rc-component/util"><img alt="bundle size" src="https://img.shields.io/bundlephobia/minzip/@rc-component/util?style=flat-square"></a>
+    <a href="https://github.com/umijs/dumi"><img alt="dumi" src="https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square"></a>
+  </p>
+</div>
+
+<p align="center"><a href="./README.md">English</a> | 简体中文</p>
+
+## 特性
+
+- 面向 React 构建，并由 rc-component 团队维护。
+- 被 Ant Design 使用和其他 React 组件库使用。
+- 提供 TypeScript 类型声明，同时输出 ES module 和 CommonJS 产物。
+- 示例、测试和预览构建与包源码保持一致。
+
+> 该包历史上曾以 `rc-util` 发布。新代码推荐使用带 scope 的包名。
+
+## 安装
+
+```bash
+npm install @rc-component/util
+```
+
+## 使用
+
+```tsx | pure
+import {
+  Portal,
+  raf,
+  useEvent,
+  useLayoutEffect,
+  warning,
+} from '@rc-component/util';
+```
+
+## 示例
+
+运行本地 dumi 站点：
+
+```bash
+npm install
+npm start
+```
+
+然后打开 `http://localhost:8000`。
+
+## API
+
+该包提供在 rc-component 和 Ant Design 包中复用的小型聚焦工具。优先导入公开入口；针对 DOM、React 或测试辅助能力，可使用子路径导入。
+
+| 范围         | 示例                                                                               |
+| ------------ | ---------------------------------------------------------------------------------- |
+| React hooks  | `useEvent`, `useLayoutEffect`, `useMergedState`, `useState` 辅助方法               |
+| React 工具   | `Children/toArray`, `composeRef`, `pickAttrs`, `Portal`                            |
+| DOM 工具     | `Dom/canUseDom`, `Dom/contains`, `Dom/dynamicCSS`, `Dom/focus`, `getScrollBarSize` |
+| 异步辅助方法 | `raf`, `raf.cancel`                                                                |
+| 警告工具     | `warning`, `noteOnce`, `resetWarned`                                               |
+| 测试工具     | `test/domHook` 用于 DOM 原型 spy                                                   |
+
+`docs/examples` 中的示例覆盖了常用的子路径辅助工具。
+
+## 本地开发
+
+```bash
+npm install
+npm start
+npm test
+npm run build
+```
+
+dumi 站点默认运行在 `http://localhost:8000`。
+
+## 发布
+
+```bash
+npm run prepublishOnly
+```
+
+包构建完成后，发布流程由 `@rc-component/np` 通过 `rc-np` 命令处理。
+
+## 许可证
+
+@rc-component/util 基于 [MIT](./LICENSE) 许可证发布。

package/es/hooks/useDelayState.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export type DelayConfig = {
+    frame: number;
+    ms?: never;
+} | {
+    frame?: never;
+    ms: number;
+};
+export type SetDelayState<T> = (nextValue: React.SetStateAction<T>, 
+/** `true` updates immediately. `false` delays the update by one frame. */
+immediatelyOrDelay?: boolean | DelayConfig) => void;
+/**
+ * Similar to `useState`, but updates on the next frame by default.
+ * Pending updates are always replaced by the latest one.
+ */
+export default function useDelayState<T>(defaultValue: T | (() => T)): [T, SetDelayState<T>];

package/es/hooks/useDelayState.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import raf from "../raf";
+import useEvent from "./useEvent";
+/**
+ * Similar to `useState`, but updates on the next frame by default.
+ * Pending updates are always replaced by the latest one.
+ */
+export default function useDelayState(defaultValue) {
+  const [value, setValue] = React.useState(defaultValue);
+  const delayRef = React.useRef(null);
+  const cancelPending = useEvent(() => {
+    if (delayRef.current) {
+      const [isRaf, delay] = delayRef.current;
+      if (isRaf) {
+        raf.cancel(delay);
+      } else {
+        clearTimeout(delay);
+      }
+      delayRef.current = null;
+    }
+  });
+  const setDelayValue = useEvent((nextValue, immediatelyOrDelay) => {
+    const delayConfig = immediatelyOrDelay || {
+      frame: 1
+    };
+    cancelPending();
+    if (delayConfig === true) {
+      setValue(nextValue);
+    } else if ('ms' in delayConfig) {
+      delayRef.current = [false, setTimeout(() => setValue(nextValue), delayConfig.ms)];
+    } else {
+      delayRef.current = [true, raf(() => setValue(nextValue), delayConfig.frame)];
+    }
+  });
+  return [value, setDelayValue];
+}

package/es/index.d.ts

@@ -1,6 +1,8 @@
 export { default as useEvent } from './hooks/useEvent';
 export { default as useMergedState } from './hooks/useMergedState';
 export { default as useControlledState } from './hooks/useControlledState';
+export { default as useDelayState } from './hooks/useDelayState';
+export type { DelayConfig, SetDelayState } from './hooks/useDelayState';
 export { default as useId, getId } from './hooks/useId';
 export { default as useLayoutEffect, useLayoutUpdateEffect, } from './hooks/useLayoutEffect';
 export { default as useMemo } from './hooks/useMemo';
@@ -10,11 +12,13 @@ export { composeRef, fillRef, getNodeRef, supportNodeRef, supportRef, useCompose
 export { default as canUseDom } from './Dom/canUseDom';
 export { default as contains } from './Dom/contains';
 export { injectCSS, removeCSS, updateCSS } from './Dom/dynamicCSS';
+export type { Prepend } from './Dom/dynamicCSS';
 export { getDOM, isDOM } from './Dom/findDOMNode';
 export { getFocusNodeList, lockFocus, triggerFocus, useLockFocus, } from './Dom/focus';
 export type { InputFocusOptions } from './Dom/focus';
 export { default as isVisible } from './Dom/isVisible';
 export { getShadowRoot } from './Dom/shadow';
+export { isStyleSupport } from './Dom/styleChecker';
 export { default as KeyCode } from './KeyCode';
 export { default as getScrollBarSize, getTargetScrollBarSize, } from './getScrollBarSize';
 export { default as isEqual } from './isEqual';
@@ -24,8 +28,13 @@ export { default as pickAttrs } from './pickAttrs';
 export { default as proxyObject } from './proxyObject';
 export { default as raf } from './raf';
 export { default as toArray } from './Children/toArray';
+export type { Option as ToArrayOptions } from './Children/toArray';
 export { default as mergeProps } from './mergeProps';
 export { default as get } from './utils/get';
 export { default as set, merge, mergeWith } from './utils/set';
-export { default as warning, noteOnce } from './warning';
+export { default as warning, noteOnce, resetWarned } from './warning';
+export { render, unmount } from './React/render';
+export { spyElementPrototype, spyElementPrototypes } from './test/domHook';
+export { default as Portal } from './Portal';
+export type { PortalProps, PortalRef } from './Portal';
 export type { GetContainer } from './PortalWrapper';

package/es/index.js

@@ -1,6 +1,7 @@
 export { default as useEvent } from "./hooks/useEvent";
 export { default as useMergedState } from "./hooks/useMergedState";
 export { default as useControlledState } from "./hooks/useControlledState";
+export { default as useDelayState } from "./hooks/useDelayState";
 export { default as useId, getId } from "./hooks/useId";
 export { default as useLayoutEffect, useLayoutUpdateEffect } from "./hooks/useLayoutEffect";
 export { default as useMemo } from "./hooks/useMemo";
@@ -14,6 +15,7 @@ export { getDOM, isDOM } from "./Dom/findDOMNode";
 export { getFocusNodeList, lockFocus, triggerFocus, useLockFocus } from "./Dom/focus";
 export { default as isVisible } from "./Dom/isVisible";
 export { getShadowRoot } from "./Dom/shadow";
+export { isStyleSupport } from "./Dom/styleChecker";
 export { default as KeyCode } from "./KeyCode";
 export { default as getScrollBarSize, getTargetScrollBarSize } from "./getScrollBarSize";
 export { default as isEqual } from "./isEqual";
@@ -26,4 +28,7 @@ export { default as toArray } from "./Children/toArray";
 export { default as mergeProps } from "./mergeProps";
 export { default as get } from "./utils/get";
 export { default as set, merge, mergeWith } from "./utils/set";
-export { default as warning, noteOnce } from "./warning";
+export { default as warning, noteOnce, resetWarned } from "./warning";
+export { render, unmount } from "./React/render";
+export { spyElementPrototype, spyElementPrototypes } from "./test/domHook";
+export { default as Portal } from "./Portal";

package/es/pickAttrs.js

@@ -16,7 +16,12 @@ const eventsName = `onCopy onCut onPaste onCompositionEnd onCompositionStart onC
     onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp onSelect onTouchCancel
     onTouchEnd onTouchMove onTouchStart onScroll onWheel onAbort onCanPlay onCanPlayThrough
     onDurationChange onEmptied onEncrypted onEnded onError onLoadedData onLoadedMetadata
-    onLoadStart onPause onPlay onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend onTimeUpdate onVolumeChange onWaiting onLoad onError`;
+    onLoadStart onPause onPlay onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend onTimeUpdate onVolumeChange onWaiting onLoad
+    onPointerDown onPointerMove onPointerUp onPointerCancel onPointerEnter onPointerLeave onPointerOver onPointerOut onGotPointerCapture onLostPointerCapture
+    onAnimationStart onAnimationEnd onAnimationIteration
+    onTransitionEnd onTransitionRun onTransitionStart onTransitionCancel
+    onBeforeInput onReset onInvalid
+    onAuxClick onToggle onBeforeToggle onCancel onClose onResize onScrollEnd`;
 const propList = `${attributes} ${eventsName}`.split(/[\s\n]+/);
 
 /* eslint-enable max-len */

package/es/test/domHook.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-types */
 /* eslint-disable no-param-reassign */
 const NO_EXIST = {
   __NOT_EXIST: true

package/lib/hooks/useDelayState.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export type DelayConfig = {
+    frame: number;
+    ms?: never;
+} | {
+    frame?: never;
+    ms: number;
+};
+export type SetDelayState<T> = (nextValue: React.SetStateAction<T>, 
+/** `true` updates immediately. `false` delays the update by one frame. */
+immediatelyOrDelay?: boolean | DelayConfig) => void;
+/**
+ * Similar to `useState`, but updates on the next frame by default.
+ * Pending updates are always replaced by the latest one.
+ */
+export default function useDelayState<T>(defaultValue: T | (() => T)): [T, SetDelayState<T>];

package/lib/hooks/useDelayState.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useDelayState;
+var React = _interopRequireWildcard(require("react"));
+var _raf = _interopRequireDefault(require("../raf"));
+var _useEvent = _interopRequireDefault(require("./useEvent"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * Similar to `useState`, but updates on the next frame by default.
+ * Pending updates are always replaced by the latest one.
+ */
+function useDelayState(defaultValue) {
+  const [value, setValue] = React.useState(defaultValue);
+  const delayRef = React.useRef(null);
+  const cancelPending = (0, _useEvent.default)(() => {
+    if (delayRef.current) {
+      const [isRaf, delay] = delayRef.current;
+      if (isRaf) {
+        _raf.default.cancel(delay);
+      } else {
+        clearTimeout(delay);
+      }
+      delayRef.current = null;
+    }
+  });
+  const setDelayValue = (0, _useEvent.default)((nextValue, immediatelyOrDelay) => {
+    const delayConfig = immediatelyOrDelay || {
+      frame: 1
+    };
+    cancelPending();
+    if (delayConfig === true) {
+      setValue(nextValue);
+    } else if ('ms' in delayConfig) {
+      delayRef.current = [false, setTimeout(() => setValue(nextValue), delayConfig.ms)];
+    } else {
+      delayRef.current = [true, (0, _raf.default)(() => setValue(nextValue), delayConfig.frame)];
+    }
+  });
+  return [value, setDelayValue];
+}

package/lib/index.d.ts

@@ -1,6 +1,8 @@
 export { default as useEvent } from './hooks/useEvent';
 export { default as useMergedState } from './hooks/useMergedState';
 export { default as useControlledState } from './hooks/useControlledState';
+export { default as useDelayState } from './hooks/useDelayState';
+export type { DelayConfig, SetDelayState } from './hooks/useDelayState';
 export { default as useId, getId } from './hooks/useId';
 export { default as useLayoutEffect, useLayoutUpdateEffect, } from './hooks/useLayoutEffect';
 export { default as useMemo } from './hooks/useMemo';
@@ -10,11 +12,13 @@ export { composeRef, fillRef, getNodeRef, supportNodeRef, supportRef, useCompose
 export { default as canUseDom } from './Dom/canUseDom';
 export { default as contains } from './Dom/contains';
 export { injectCSS, removeCSS, updateCSS } from './Dom/dynamicCSS';
+export type { Prepend } from './Dom/dynamicCSS';
 export { getDOM, isDOM } from './Dom/findDOMNode';
 export { getFocusNodeList, lockFocus, triggerFocus, useLockFocus, } from './Dom/focus';
 export type { InputFocusOptions } from './Dom/focus';
 export { default as isVisible } from './Dom/isVisible';
 export { getShadowRoot } from './Dom/shadow';
+export { isStyleSupport } from './Dom/styleChecker';
 export { default as KeyCode } from './KeyCode';
 export { default as getScrollBarSize, getTargetScrollBarSize, } from './getScrollBarSize';
 export { default as isEqual } from './isEqual';
@@ -24,8 +28,13 @@ export { default as pickAttrs } from './pickAttrs';
 export { default as proxyObject } from './proxyObject';
 export { default as raf } from './raf';
 export { default as toArray } from './Children/toArray';
+export type { Option as ToArrayOptions } from './Children/toArray';
 export { default as mergeProps } from './mergeProps';
 export { default as get } from './utils/get';
 export { default as set, merge, mergeWith } from './utils/set';
-export { default as warning, noteOnce } from './warning';
+export { default as warning, noteOnce, resetWarned } from './warning';
+export { render, unmount } from './React/render';
+export { spyElementPrototype, spyElementPrototypes } from './test/domHook';
+export { default as Portal } from './Portal';
+export type { PortalProps, PortalRef } from './Portal';
 export type { GetContainer } from './PortalWrapper';

package/lib/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "KeyCode", {
     return _KeyCode.default;
   }
 });
+Object.defineProperty(exports, "Portal", {
+  enumerable: true,
+  get: function () {
+    return _Portal.default;
+  }
+});
 Object.defineProperty(exports, "canUseDom", {
   enumerable: true,
   get: function () {
@@ -105,6 +111,12 @@ Object.defineProperty(exports, "isMobile", {
     return _isMobile.default;
   }
 });
+Object.defineProperty(exports, "isStyleSupport", {
+  enumerable: true,
+  get: function () {
+    return _styleChecker.isStyleSupport;
+  }
+});
 Object.defineProperty(exports, "isVisible", {
   enumerable: true,
   get: function () {
@@ -171,12 +183,36 @@ Object.defineProperty(exports, "removeCSS", {
     return _dynamicCSS.removeCSS;
   }
 });
+Object.defineProperty(exports, "render", {
+  enumerable: true,
+  get: function () {
+    return _render.render;
+  }
+});
+Object.defineProperty(exports, "resetWarned", {
+  enumerable: true,
+  get: function () {
+    return _warning.resetWarned;
+  }
+});
 Object.defineProperty(exports, "set", {
   enumerable: true,
   get: function () {
     return _set.default;
   }
 });
+Object.defineProperty(exports, "spyElementPrototype", {
+  enumerable: true,
+  get: function () {
+    return _domHook.spyElementPrototype;
+  }
+});
+Object.defineProperty(exports, "spyElementPrototypes", {
+  enumerable: true,
+  get: function () {
+    return _domHook.spyElementPrototypes;
+  }
+});
 Object.defineProperty(exports, "supportNodeRef", {
   enumerable: true,
   get: function () {
@@ -201,6 +237,12 @@ Object.defineProperty(exports, "triggerFocus", {
     return _focus.triggerFocus;
   }
 });
+Object.defineProperty(exports, "unmount", {
+  enumerable: true,
+  get: function () {
+    return _render.unmount;
+  }
+});
 Object.defineProperty(exports, "updateCSS", {
   enumerable: true,
   get: function () {
@@ -219,6 +261,12 @@ Object.defineProperty(exports, "useControlledState", {
     return _useControlledState.default;
   }
 });
+Object.defineProperty(exports, "useDelayState", {
+  enumerable: true,
+  get: function () {
+    return _useDelayState.default;
+  }
+});
 Object.defineProperty(exports, "useEvent", {
   enumerable: true,
   get: function () {
@@ -282,6 +330,7 @@ Object.defineProperty(exports, "warning", {
 var _useEvent = _interopRequireDefault(require("./hooks/useEvent"));
 var _useMergedState = _interopRequireDefault(require("./hooks/useMergedState"));
 var _useControlledState = _interopRequireDefault(require("./hooks/useControlledState"));
+var _useDelayState = _interopRequireDefault(require("./hooks/useDelayState"));
 var _useId = _interopRequireWildcard(require("./hooks/useId"));
 var _useLayoutEffect = _interopRequireWildcard(require("./hooks/useLayoutEffect"));
 var _useMemo = _interopRequireDefault(require("./hooks/useMemo"));
@@ -295,6 +344,7 @@ var _findDOMNode = require("./Dom/findDOMNode");
 var _focus = require("./Dom/focus");
 var _isVisible = _interopRequireDefault(require("./Dom/isVisible"));
 var _shadow = require("./Dom/shadow");
+var _styleChecker = require("./Dom/styleChecker");
 var _KeyCode = _interopRequireDefault(require("./KeyCode"));
 var _getScrollBarSize = _interopRequireWildcard(require("./getScrollBarSize"));
 var _isEqual = _interopRequireDefault(require("./isEqual"));
@@ -308,6 +358,9 @@ var _mergeProps = _interopRequireDefault(require("./mergeProps"));
 var _get = _interopRequireDefault(require("./utils/get"));
 var _set = _interopRequireWildcard(require("./utils/set"));
 var _warning = _interopRequireWildcard(require("./warning"));
+var _render = require("./React/render");
+var _domHook = require("./test/domHook");
+var _Portal = _interopRequireDefault(require("./Portal"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/pickAttrs.js

@@ -22,7 +22,12 @@ const eventsName = `onCopy onCut onPaste onCompositionEnd onCompositionStart onC
     onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp onSelect onTouchCancel
     onTouchEnd onTouchMove onTouchStart onScroll onWheel onAbort onCanPlay onCanPlayThrough
     onDurationChange onEmptied onEncrypted onEnded onError onLoadedData onLoadedMetadata
-    onLoadStart onPause onPlay onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend onTimeUpdate onVolumeChange onWaiting onLoad onError`;
+    onLoadStart onPause onPlay onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend onTimeUpdate onVolumeChange onWaiting onLoad
+    onPointerDown onPointerMove onPointerUp onPointerCancel onPointerEnter onPointerLeave onPointerOver onPointerOut onGotPointerCapture onLostPointerCapture
+    onAnimationStart onAnimationEnd onAnimationIteration
+    onTransitionEnd onTransitionRun onTransitionStart onTransitionCancel
+    onBeforeInput onReset onInvalid
+    onAuxClick onToggle onBeforeToggle onCancel onClose onResize onScrollEnd`;
 const propList = `${attributes} ${eventsName}`.split(/[\s\n]+/);
 
 /* eslint-enable max-len */

package/lib/test/domHook.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.spyElementPrototype = spyElementPrototype;
 exports.spyElementPrototypes = spyElementPrototypes;
-/* eslint-disable @typescript-eslint/ban-types */
 /* eslint-disable no-param-reassign */
 const NO_EXIST = {
   __NOT_EXIST: true

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@rc-component/util",
-  "version": "1.11.0",
-  "description": "Common Utils For React Component",
+  "version": "1.12.0",
+  "description": "Shared React utilities for rc-component packages.",
   "keywords": [
     "react",
     "util"
   ],
-  "homepage": "http://github.com/react-component/util",
+  "homepage": "https://react-component.github.io/util",
   "bugs": {
-    "url": "http://github.com/react-component/util/issues"
+    "url": "https://github.com/react-component/util/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git@github.com:react-component/util.git"
+    "url": "https://github.com/react-component/util.git"
   },
   "license": "MIT",
   "main": "./lib/index",
@@ -22,56 +22,71 @@
     "es"
   ],
   "scripts": {
-    "build": "dumi build",
+    "build": "npm run compile && npm run docs:build",
     "compile": "father build",
-    "coverage": "npm test -- --coverage",
-    "lint": "eslint src/ --ext .tsx,.ts & eslint tests/ --ext .tsx,.ts",
-    "prepare": "husky install",
+    "coverage": "rc-test --coverage",
+    "docs:build": "dumi build",
+    "docs:deploy": "gh-pages -d docs-dist",
+    "deploy": "npm run gh-pages",
+    "gh-pages": "npm run compile && cross-env GH_PAGES=1 npm run docs:build && npm run docs:deploy",
+    "lint": "eslint src/ tests/ docs/examples/ --ext .tsx,.ts,.jsx,.js",
     "prepublishOnly": "npm run compile && rc-np",
+    "prettier": "prettier --write --ignore-unknown .",
     "start": "dumi dev",
-    "test": "rc-test"
+    "test": "rc-test",
+    "tsc": "tsc --noEmit",
+    "prepare": "husky"
   },
   "lint-staged": {
-    "**/*.{js,jsx,tsx,ts,md,json}": [
-      "prettier --write",
-      "git add"
-    ]
+    "*": "prettier --write --ignore-unknown"
   },
   "dependencies": {
     "is-mobile": "^5.0.0",
-    "react-is": "^18.2.0"
+    "react-is": "^19.2.7"
   },
   "devDependencies": {
-    "@rc-component/father-plugin": "^2.0.1",
-    "@rc-component/np": "^1.0.3",
-    "@testing-library/react": "^16.0.0",
+    "@eslint/js": "^10.0.1",
+    "@eslint/compat": "^2.1.0",
+    "@rc-component/father-plugin": "^2.2.0",
+    "@rc-component/np": "^1.0.4",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",
-    "@types/node": "^25.0.3",
-    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19.2.2",
-    "@types/react-is": "^19.0.0",
-    "@types/responselike": "^1.0.0",
-    "@types/warning": "^3.0.0",
-    "@umijs/fabric": "^3.0.0",
+    "@types/node": "^26.0.1",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@types/react-is": "^19.2.0",
+    "@types/responselike": "^1.0.3",
+    "@types/warning": "^3.0.4",
     "cross-env": "^10.1.0",
-    "dumi": "^2.1.3",
-    "eslint": "^8.54.0",
-    "eslint-plugin-jest": "^29.0.1",
-    "eslint-plugin-unicorn": "^56.0.1",
-    "father": "^4.1.3",
-    "glob": "^13.0.0",
-    "husky": "^9.1.6",
-    "lint-staged": "^16.2.7",
-    "prettier": "^3.3.2",
-    "rc-test": "^7.0.14",
-    "react": "^18.0.0",
+    "dumi": "^2.4.38",
+    "eslint": "^10.6.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-jest": "^29.15.4",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "father": "^4.6.24",
+    "gh-pages": "^6.3.0",
+    "glob": "^13.0.6",
+    "globals": "^17.7.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^17.0.8",
+    "prettier": "^3.9.4",
+    "rc-test": "^7.1.3",
+    "react": "^19.2.7",
     "react-19": "npm:react@19.0.0",
-    "react-dom": "^18.0.0",
+    "react-dom": "^19.2.7",
     "react-dom-19": "npm:react-dom@19.0.0",
-    "typescript": "^5.3.2"
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.62.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
-  }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "types": "./es/index.d.ts"
 }