antd-mobile 5.11.1 → 5.12.1

package/es/components/popup/popup.js

@@ -55,7 +55,7 @@ export const Popup = p => {
     className: classPrefix,
     onClick: props.onClick,
     style: {
-      display: active ? 'unset' : 'none'
+      display: active ? undefined : 'none'
     }
   }, props.mask && React.createElement(Mask, {
     visible: props.visible,

package/es/components/swipe-action/swipe-action.js

@@ -185,7 +185,7 @@ export const SwipeAction = forwardRef((p, ref) => {
     }
   }, React.createElement(animated.div, {
     style: {
-      pointerEvents: x.to(v => v !== 0 && x.goal !== 0 ? 'none' : 'unset')
+      pointerEvents: x.to(v => v !== 0 && x.goal !== 0 ? 'none' : 'auto')
     }
   }, props.children)), withStopPropagation(props.stopPropagation, React.createElement("div", {
     className: 'adm-swipe-action-actions adm-swipe-action-actions-right',

package/es/components/tabs/tabs.css

@@ -4,6 +4,7 @@
   --active-line-height: 2px;
   --active-line-border-radius: var(--active-line-height);
   position: relative;
+  min-width: 0;
 }
 .adm-tabs-header {
   position: relative;

package/es/components/text-area/text-area.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
-export declare type TextAreaProps = Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'autoComplete' | 'autoFocus' | 'disabled' | 'readOnly' | 'onFocus' | 'onBlur' | 'onCompositionStart' | 'onCompositionEnd' | 'onClick'> & {
+export declare type TextAreaProps = Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'autoComplete' | 'autoFocus' | 'disabled' | 'readOnly' | 'name' | 'onFocus' | 'onBlur' | 'onCompositionStart' | 'onCompositionEnd' | 'onClick'> & {
     onChange?: (val: string) => void;
     value?: string;
     defaultValue?: string;
@@ -20,7 +20,7 @@ export declare type TextAreaRef = {
     focus: () => void;
     blur: () => void;
 };
-export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "onClick" | "disabled" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "autoComplete" | "autoFocus" | "readOnly"> & {
+export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "onClick" | "disabled" | "name" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "autoComplete" | "autoFocus" | "readOnly"> & {
     onChange?: ((val: string) => void) | undefined;
     value?: string | undefined;
     defaultValue?: string | undefined;

package/es/components/text-area/text-area.js

@@ -1,4 +1,5 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import { useIsomorphicLayoutEffect } from 'ahooks';
 import { withNativeProps } from '../../utils/native-props';
 import { usePropsValue } from '../../utils/use-props-value';
 import { mergeProps } from '../../utils/with-default-props';
@@ -41,7 +42,7 @@ export const TextArea = forwardRef((p, ref) => {
       (_a = nativeTextAreaRef.current) === null || _a === void 0 ? void 0 : _a.blur();
     }
   }));
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!autoSize) return;
     const textArea = nativeTextAreaRef.current;
     if (!textArea) return;
@@ -114,6 +115,7 @@ export const TextArea = forwardRef((p, ref) => {
     autoFocus: props.autoFocus,
     disabled: props.disabled,
     readOnly: props.readOnly,
+    name: props.name,
     onFocus: props.onFocus,
     onBlur: props.onBlur,
     onClick: props.onClick

package/es/components/toast/methods.js

@@ -1,12 +1,12 @@
 import React, { createRef, forwardRef, useEffect, useImperativeHandle, useState } from 'react';
 import { resolveContainer } from '../../utils/get-container';
-import ReactDOM from 'react-dom';
 import { InternalToast } from './toast';
 import { mergeProps } from '../../utils/with-default-props';
+import { render, unmount as reactUnmount } from '../../utils/render';
 const containers = [];
 
 function unmount(container) {
-  const unmountResult = ReactDOM.unmountComponentAtNode(container);
+  const unmountResult = reactUnmount(container);
 
   if (unmountResult && container.parentNode) {
     container.parentNode.removeChild(container);
@@ -64,7 +64,7 @@ export function show(p) {
     }));
   });
   const ref = createRef();
-  ReactDOM.render(React.createElement(TempToast, {
+  render(React.createElement(TempToast, {
     ref: ref
   }), container);
   return {

package/es/components/virtual-input/virtual-input.js

@@ -84,7 +84,8 @@ export const VirtualInput = forwardRef((p, ref) => {
 
       (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.blur();
       (_c = (_b = keyboard.props).onClose) === null || _c === void 0 ? void 0 : _c.call(_b);
-    }
+    },
+    getContainer: null
   });
   return withNativeProps(props, React.createElement("div", {
     ref: rootRef,

package/es/locales/base.d.ts

@@ -86,6 +86,7 @@ export declare const base: {
     };
     ImageUploader: {
         uploading: string;
+        upload: string;
     };
     InfiniteScroll: {
         noMore: string;

package/es/locales/base.js

@@ -86,7 +86,8 @@ export const base = {
     }
   },
   ImageUploader: {
-    uploading: 'Uploading...'
+    uploading: 'Uploading...',
+    upload: 'Upload'
   },
   InfiniteScroll: {
     noMore: 'No more'

package/es/locales/en-US.d.ts

@@ -86,6 +86,7 @@ declare const enUS: {
     };
     ImageUploader: {
         uploading: string;
+        upload: string;
     };
     InfiniteScroll: {
         noMore: string;

package/es/locales/es-ES.d.ts

@@ -86,6 +86,7 @@ declare const esES: {
     };
     ImageUploader: {
         uploading: string;
+        upload: string;
     };
     InfiniteScroll: {
         noMore: string;

package/es/locales/fa-IR.d.ts

@@ -86,6 +86,7 @@ declare const faIR: {
     };
     ImageUploader: {
         uploading: string;
+        upload: string;
     };
     InfiniteScroll: {
         noMore: string;

package/es/locales/ko-KR.d.ts

@@ -86,6 +86,7 @@ declare const koKR: {
     };
     ImageUploader: {
         uploading: string;
+        upload: string;
     };
     InfiniteScroll: {
         noMore: string;

package/es/locales/zh-CN.d.ts

@@ -86,6 +86,7 @@ declare const zhCN: {
     };
     ImageUploader: {
         uploading: string;
+        upload: string;
     };
     InfiniteScroll: {
         noMore: string;

package/es/locales/zh-CN.js

@@ -88,7 +88,8 @@ const zhCN = mergeLocale(base, {
     }
   },
   ImageUploader: {
-    uploading: '上传中...'
+    uploading: '上传中...',
+    upload: '上传'
   },
   InfiniteScroll: {
     noMore: '没有更多了'

package/es/locales/zh-HK.d.ts

@@ -86,6 +86,7 @@ declare const zhHK: {
     };
     ImageUploader: {
         uploading: string;
+        upload: string;
     };
     InfiniteScroll: {
         noMore: string;

package/es/locales/zh-TW.d.ts

@@ -86,6 +86,7 @@ declare const zhTW: {
     };
     ImageUploader: {
         uploading: string;
+        upload: string;
     };
     InfiniteScroll: {
         noMore: string;

package/es/utils/is-node-with-content.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+declare type Regulated<T> = T extends null | undefined | false ? never : T;
+export declare function isNodeWithContent(node: ReactNode): node is Regulated<ReactNode>;
+export {};

package/es/utils/is-node-with-content.js

@@ -0,0 +1,3 @@
+export function isNodeWithContent(node) {
+  return node !== undefined && node !== null && node !== false;
+}

package/es/utils/render-to-body.js

@@ -1,16 +1,16 @@
-import ReactDOM from 'react-dom';
+import { render, unmount as reactUnmount } from './render';
 export function renderToBody(element) {
   const container = document.createElement('div');
   document.body.appendChild(container);
 
   function unmount() {
-    const unmountResult = ReactDOM.unmountComponentAtNode(container);
+    const unmountResult = reactUnmount(container);
 
     if (unmountResult && container.parentNode) {
       container.parentNode.removeChild(container);
     }
   }
 
-  ReactDOM.render(element, container);
+  render(element, container);
   return unmount;
 }

package/es/utils/render.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import type { Root } from 'react-dom/client';
+declare const MARK = "__antd_mobile_root__";
+declare type ContainerType = (Element | DocumentFragment) & {
+    [MARK]?: Root;
+};
+export declare function render(node: ReactElement, container: ContainerType): void;
+export declare function unmount(container: ContainerType): boolean | Promise<void>;
+export {};

package/es/utils/render.js

@@ -0,0 +1,77 @@
+import { __awaiter } from "tslib";
+import * as ReactDOM from 'react-dom'; // Let compiler not to search module usage
+
+const fullClone = Object.assign({}, ReactDOM);
+const {
+  version,
+  render: reactRender,
+  unmountComponentAtNode
+} = fullClone;
+let createRoot;
+
+try {
+  const mainVersion = Number((version || '').split('.')[0]);
+
+  if (mainVersion >= 18 && fullClone.createRoot) {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    createRoot = fullClone.createRoot;
+  }
+} catch (e) {// Do nothing;
+}
+
+function toggleWarning(skip) {
+  const {
+    __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
+  } = fullClone;
+
+  if (__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED && typeof __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED === 'object') {
+    __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.usingClientEntryPoint = skip;
+  }
+}
+
+const MARK = '__antd_mobile_root__';
+
+function legacyRender(node, container) {
+  reactRender(node, container);
+}
+
+function concurrentRender(node, container) {
+  toggleWarning(true);
+  const root = container[MARK] || createRoot(container);
+  toggleWarning(false);
+  root.render(node);
+  container[MARK] = root;
+}
+
+export function render(node, container) {
+  if (createRoot) {
+    concurrentRender(node, container);
+    return;
+  }
+
+  legacyRender(node, container);
+} // ========================== Unmount =========================
+
+function legacyUnmount(container) {
+  return unmountComponentAtNode(container);
+}
+
+function concurrentUnmount(container) {
+  return __awaiter(this, void 0, void 0, function* () {
+    // Delay to unmount to avoid React 18 sync warning
+    return Promise.resolve().then(() => {
+      var _a;
+
+      (_a = container[MARK]) === null || _a === void 0 ? void 0 : _a.unmount();
+      delete container[MARK];
+    });
+  });
+}
+
+export function unmount(container) {
+  if (createRoot) {
+    return concurrentUnmount(container);
+  }
+
+  return legacyUnmount(container);
+}

package/es/utils/use-drag-and-pinch.d.ts

@@ -1 +1 @@
-export declare const useDragAndPinch: <Config extends import("@use-gesture/react").UserGestureConfig = import("@use-gesture/react").UserGestureConfig>(_handlers: Partial<import("@use-gesture/react").NativeHandlers<import("@use-gesture/react").EventTypes> & import("@use-gesture/react").UserHandlers<import("@use-gesture/react").EventTypes>>, _config?: {} | Config | undefined) => Config["target"] extends object ? void : (...args: any[]) => import("@use-gesture/react").ReactDOMAttributes;
+export declare const useDragAndPinch: <Config extends import("@use-gesture/react").UserGestureConfig = import("@use-gesture/react").UserGestureConfig>(_handlers: Partial<import("@use-gesture/react").NativeHandlers<import("@use-gesture/react").EventTypes> & import("@use-gesture/react").UserHandlers<import("@use-gesture/react").EventTypes>>, _config?: Config | undefined) => Config["target"] extends object ? void : (...args: any[]) => import("@use-gesture/react").ReactDOMAttributes;

package/es/utils/use-props-value.d.ts

@@ -4,5 +4,5 @@ declare type Options<T> = {
     defaultValue: T;
     onChange?: (v: T) => void;
 };
-export declare function usePropsValue<T>(options: Options<T>): readonly [T, (this: unknown, v: SetStateAction<T>) => void];
+export declare function usePropsValue<T>(options: Options<T>): readonly [T, (v: SetStateAction<T>) => void];
 export {};

package/package.json

@@ -1,28 +1,28 @@
 {
   "name": "antd-mobile",
-  "version": "5.11.1",
+  "version": "5.12.1",
   "dependencies": {
-    "@floating-ui/dom": "^0.4.2",
-    "@react-spring/web": "^9.4.4",
+    "@floating-ui/dom": "^0.4.5",
+    "@react-spring/web": "^9.4.5",
     "@types/big.js": "^6.1.3",
     "@types/react-is": "^17.0.3",
     "@types/react-virtualized": "^9.21.21",
     "@types/resize-observer-browser": "^0.1.7",
-    "@use-gesture/react": "^10.2.10",
-    "ahooks": "^3.1.14",
+    "@use-gesture/react": "^10.2.12",
+    "ahooks": "^3.3.10",
     "antd-mobile-icons": "^0.2.2",
     "antd-mobile-v5-count": "^1.0.1",
     "big.js": "^6.1.1",
     "classnames": "^2.3.1",
-    "dayjs": "^1.11.0",
+    "dayjs": "^1.11.2",
     "lodash": "^4.17.21",
-    "rc-field-form": "^1.26.2",
+    "rc-field-form": "^1.26.4",
     "react-is": "^17.0.2",
     "staged-components": "^1.1.2",
     "tslib": "^2.3.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "main": "./cjs/index.js",
   "module": "./es/index.js",