fix: fix

.github/workflows/test.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Get pnpm store directory
         id: pnpm-cache
         run: |
-          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+          echo "pnpm_cache_dir=$(pnpm store path)" >> "$GITHUB_OUTPUT"
 
       - name: Setup pnpm cache
         uses: actions/cache@v3

config/config.ts

@@ -9,6 +9,8 @@ export default {
     type: 'none',
     exclude: [],
   },
+  // https://github.com/alibaba/hooks/issues/2155
+  extraBabelIncludes: ['filter-obj'],
   extraBabelPlugins: [
     [
       'babel-plugin-import',

jest.config.js

@@ -1,3 +1,12 @@
+/** esm modules to transform */
+const esmModules = [
+  // `query-string` and its related dependencies
+  'query-string',
+  'decode-uri-component',
+  'split-on-first',
+  'filter-obj',
+];
+
 module.exports = {
   preset: 'ts-jest/presets/js-with-ts',
   testEnvironment: 'jsdom',
@@ -18,7 +27,7 @@ module.exports = {
     '!**/lib/**',
     '!**/dist/**',
   ],
-  transformIgnorePatterns: ['^.+\\.js$'],
+  transformIgnorePatterns: [`node_modules/(?!(?:.pnpm/)?(${esmModules.join('|')}))`],
   moduleNameMapper: {
     'lodash-es': 'lodash',
   },

package.json

@@ -68,10 +68,10 @@
     "react-shadow": "^19.0.3",
     "rimraf": "^3.0.2",
     "surge": "^0.21.3",
-    "ts-jest": "^29.0.5",
+    "ts-jest": "^29.1.1",
     "typescript": "^5.1.3",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.10",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
     "webpack-merge": "^4.2.2"
   },
   "commitlint": {

packages/hooks/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ahooks",
-  "version": "3.7.8",
+  "version": "3.7.9",
   "description": "react hooks library",
   "keywords": [
     "ahooks",

packages/hooks/src/useAntdTable/demo/cache.tsx

@@ -136,7 +136,7 @@ const UserList = () => {
   return (
     <div>
       {type === 'simple' ? searchForm : advanceSearchForm}
-      <Table columns={columns} rowKey="email" {...tableProps} />
+      <Table columns={columns} rowKey="email" style={{ overflow: 'auto' }} {...tableProps} />
 
       <div style={{ background: '#f5f5f5', padding: 8 }}>
         <p>Current Table:</p>

packages/hooks/src/useAntdTable/demo/form.tsx

@@ -122,7 +122,7 @@ export default () => {
   return (
     <div>
       {type === 'simple' ? searchForm : advanceSearchForm}
-      <Table columns={columns} rowKey="email" {...tableProps} />
+      <Table columns={columns} rowKey="email" style={{ overflow: 'auto' }} {...tableProps} />
 
       <div style={{ background: '#f5f5f5', padding: 8 }}>
         <p>Current Table:</p>

packages/hooks/src/useAntdTable/demo/init.tsx

@@ -126,7 +126,7 @@ export default () => {
   return (
     <div>
       {type === 'simple' ? searchForm : advanceSearchForm}
-      <Table columns={columns} rowKey="email" {...tableProps} />
+      <Table columns={columns} rowKey="email" style={{ overflow: 'auto' }} {...tableProps} />
 
       <div style={{ background: '#f5f5f5', padding: 8 }}>
         <p>Current Table:</p>

packages/hooks/src/useAntdTable/demo/ready.tsx

@@ -131,7 +131,7 @@ export default () => {
     <div>
       <Button onClick={() => setReady((r) => !r)}>toggle ready</Button>
       {type === 'simple' ? searchForm : advanceSearchForm}
-      <Table columns={columns} rowKey="email" {...tableProps} />
+      <Table columns={columns} rowKey="email" style={{ overflow: 'auto' }} {...tableProps} />
 
       <div style={{ background: '#f5f5f5', padding: 8 }}>
         <p>Current Table:</p>

packages/hooks/src/useAntdTable/demo/table.tsx

@@ -49,5 +49,5 @@ export default () => {
     },
   ];
 
-  return <Table columns={columns} rowKey="email" {...tableProps} />;
+  return <Table columns={columns} rowKey="email" style={{ overflow: 'auto' }} {...tableProps} />;
 };

packages/hooks/src/useAntdTable/demo/validate.tsx

@@ -88,7 +88,7 @@ export default () => {
   return (
     <div>
       {searchForm}
-      <Table columns={columns} rowKey="email" {...tableProps} />
+      <Table columns={columns} rowKey="email" style={{ overflow: 'auto' }} {...tableProps} />
 
       <div style={{ background: '#f5f5f5', padding: 8 }}>
         <p>Current Table:</p>

packages/hooks/src/useDocumentVisibility/index.ts

@@ -12,7 +12,7 @@ const getVisibility = () => {
 };
 
 function useDocumentVisibility(): VisibilityState {
-  const [documentVisibility, setDocumentVisibility] = useState(() => getVisibility());
+  const [documentVisibility, setDocumentVisibility] = useState(getVisibility);
 
   useEventListener(
     'visibilitychange',

packages/hooks/src/useDrop/demo/demo1.tsx

@@ -70,8 +70,8 @@ export default () => {
         {isHovering ? 'release here' : 'drop here'}
       </div>
 
-      <div style={{ display: 'flex', marginTop: 8 }}>
-        {['1', '2', '3', '4', '5'].map((e, i) => (
+      <div style={{ display: 'flex', marginTop: 8, overflow: 'auto' }}>
+        {['1', '2', '3', '4', '5'].map((e) => (
           <DragItem key={e} data={e} />
         ))}
       </div>

packages/hooks/src/useDynamicList/demo/demo4.tsx

@@ -84,6 +84,7 @@ export default () => {
             dataSource={list}
             rowKey={(r: Item, index: number) => getKey(index).toString()}
             pagination={false}
+            style={{ overflow: 'auto' }}
           />
         </ReactDragListView>
       </Form>

packages/hooks/src/useInViewport/index.en-US.md

@@ -34,10 +34,10 @@ const [inViewport, ratio] = useInViewport(
 
 ### Params
 
-| Property | Description                        | Type                   | Default |
-| -------- | ---------------------------------- | ---------------------- | ------- |
-| target   | DOM elements or Ref, support array | `Target` \| `Target[]` | -       |
-| options  | Setting                            | `Options`              | -       |
+| Property | Description                        | Type                     | Default |
+| -------- | ---------------------------------- | ------------------------ | ------- |
+| target   | DOM elements or Ref, support array | `Target` \| `Target[]`   | -       |
+| options  | Setting                            | `Options` \| `undefined` | -       |
 
 ### Options
 

packages/hooks/src/useInViewport/index.zh-CN.md

@@ -34,10 +34,10 @@ const [inViewport, ratio] = useInViewport(
 
 ### Params
 
-| 参数    | 说明                       | 类型                   | 默认值 |
-| ------- | -------------------------- | ---------------------- | ------ |
-| target  | DOM 节点或者 Ref，支持数组 | `Target` \| `Target[]` | -      |
-| options | 设置                       | `Options`              | -      |
+| 参数    | 说明                       | 类型                     | 默认值 |
+| ------- | -------------------------- | ------------------------ | ------ |
+| target  | DOM 节点或者 Ref，支持数组 | `Target` \| `Target[]`   | -      |
+| options | 设置                       | `Options` \| `undefined` | -      |
 
 ### Options
 

packages/hooks/src/useInfiniteScroll/index.en-US.md

@@ -69,6 +69,7 @@ const {
   data: TData;
   loading: boolean;
   loadingMore: boolean;
+  error?: Error;
   noMore: boolean;
   loadMore: () => void;
   loadMoreAsync: () => Promise<TData>;

packages/hooks/src/useInfiniteScroll/index.zh-CN.md

@@ -69,6 +69,7 @@ const {
   data: TData;
   loading: boolean;
   loadingMore: boolean;
+  error?: Error;
   noMore: boolean;
   loadMore: () => void;
   loadMoreAsync: () => Promise<TData>;

packages/hooks/src/useInfiniteScroll/types.ts

@@ -9,6 +9,7 @@ export interface InfiniteScrollResult<TData extends Data> {
   data: TData;
   loading: boolean;
   loadingMore: boolean;
+  error?: Error;
   noMore: boolean;
 
   loadMore: () => void;

packages/hooks/src/useTimeout/index.en-US.md

@@ -19,7 +19,7 @@ A hook that handles the `setTimeout` timer function.
 ```typescript
 useTimeout(
   fn: () => void,
-  delay?: number | null
+  delay?: number | undefined
 ): fn: () => void;
 ```
 

packages/hooks/src/useTimeout/index.zh-CN.md

@@ -19,7 +19,7 @@ nav:
 ```typescript
 useTimeout(
   fn: () => void,
-  delay?: number | null
+  delay?: number | undefined
 ): fn: () => void;
 ```
 

packages/use-url-state/package.json

@@ -34,7 +34,7 @@
   "dependencies": {
     "@babel/runtime": "^7.21.0",
     "ahooks": "^3.4.1",
-    "query-string": "^6.9.0",
+    "query-string": "^8.1.0",
     "tslib": "^2.4.1"
   },
   "gitHead": "11f6ad571bd365c95ecb9409ca3050cbbfc9b34a"

packages/use-url-state/src/index.ts

@@ -1,5 +1,5 @@
 import { useMemoizedFn, useUpdate } from 'ahooks';
-import { parse, stringify } from 'query-string';
+import qs from 'query-string';
 import type { ParseOptions, StringifyOptions } from 'query-string';
 import { useMemo, useRef } from 'react';
 import type * as React from 'react';
@@ -50,7 +50,7 @@ const useUrlState = <S extends UrlState = UrlState>(
   );
 
   const queryFromUrl = useMemo(() => {
-    return parse(location.search, mergedParseOptions);
+    return qs.parse(location.search, mergedParseOptions);
   }, [location.search]);
 
   const targetQuery: State = useMemo(
@@ -71,7 +71,7 @@ const useUrlState = <S extends UrlState = UrlState>(
       history[navigateMode](
         {
           hash: location.hash,
-          search: stringify({ ...queryFromUrl, ...newQuery }, mergedStringifyOptions) || '?',
+          search: qs.stringify({ ...queryFromUrl, ...newQuery }, mergedStringifyOptions) || '?',
         },
         location.state,
       );
@@ -80,7 +80,7 @@ const useUrlState = <S extends UrlState = UrlState>(
       navigate(
         {
           hash: location.hash,
-          search: stringify({ ...queryFromUrl, ...newQuery }, mergedStringifyOptions) || '?',
+          search: qs.stringify({ ...queryFromUrl, ...newQuery }, mergedStringifyOptions) || '?',
         },
         {
           replace: navigateMode === 'replace',