fix: form reset

.gitignore

@@ -10,6 +10,7 @@ umd/
 cjs/
 esm/
 dist/
+esnext/
 packages/arcodesign/tests/coverage
 packages/arcodesign/style/css
 yarn.lock

packages/arcodesign/CHANGELOG.md

@@ -3,6 +3,51 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.32.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/[email protected]...@arco-design/[email protected]) (2024-08-16)
+
+
+### Features
+
+* build output support esnext ([0308755](https://github.com/arco-design/arco-design-mobile/commit/030875530d1068e801962c6fc57b9b3e1916772e))
+* export helpers render func ([9c0213b](https://github.com/arco-design/arco-design-mobile/commit/9c0213bc3a548b379491ada5fc747657a4a20a85))
+
+
+
+
+
+## [2.31.6](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/[email protected]...@arco-design/[email protected]) (2024-07-09)
+
+
+### Bug Fixes
+
+* change `Stepper` flex to inline-flex ([e191b93](https://github.com/arco-design/arco-design-mobile/commit/e191b9319c918c249ebba24f4f6b336e6220da88))
+
+
+
+
+
+## [2.31.5](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/[email protected]...@arco-design/[email protected]) (2024-07-01)
+
+
+### Bug Fixes
+
+* add `Stepper` width ([#274](https://github.com/arco-design/arco-design-mobile/issues/274)) ([b76f2ca](https://github.com/arco-design/arco-design-mobile/commit/b76f2cae577402979708bba07e864b9d2dca4f93))
+
+
+
+
+
+## [2.31.4](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/[email protected]...@arco-design/[email protected]) (2024-06-26)
+
+
+### Bug Fixes
+
+* stepper controlled value ([4f8d060](https://github.com/arco-design/arco-design-mobile/commit/4f8d0603c3e292a337b0be09266a360d7e91e943))
+
+
+
+
+
 ## [2.31.3](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/[email protected]...@arco-design/[email protected]) (2024-05-11)
 
 

packages/arcodesign/README.en-US.md

@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
 React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.31.3/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.31.3/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.32.0/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.32.0/dist/index.min.js"></script>
 ```
 
 ## Full import

packages/arcodesign/README.md

@@ -59,8 +59,8 @@ React & ReactDOM： **<a href="https://reactjs.org/docs/cdn-links.html" target="
 React Transition Group： **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.31.3/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.31.3/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.32.0/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.32.0/dist/index.min.js"></script>
 ```
 
 ## 引入全部

packages/arcodesign/components/_helpers/index.ts

@@ -6,6 +6,7 @@ import { CSSProperties } from 'react';
 
 export * from './hooks';
 export * from './react-dom';
+export * from './render';
 export * from './type';
 
 /**

packages/arcodesign/components/_helpers/react-dom.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom';
 
 function isObject(obj: any): obj is { [key: string]: any } {
     return Object.prototype.toString.call(obj) === '[object Object]';
@@ -14,12 +14,12 @@ export interface RootTypeReact extends RootType {
 }
 export type CreateRootFnType = (container: Element | DocumentFragment) => RootTypeReact;
 
-const __SECRET_INTERNALS__ = '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED';
-
-const CopyReactDOM = ReactDOM as typeof ReactDOM & {
+const CopyReactDOM = {
+    ...ReactDOM,
+} as typeof ReactDOM & {
     createRoot: CreateRootFnType;
     // https://github.com/facebook/react/blob/4ff5f5719b348d9d8db14aaa49a48532defb4ab7/packages/react-dom/src/client/ReactDOM.js#L181
-    [__SECRET_INTERNALS__]: {
+    __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?: {
         usingClientEntryPoint?: boolean;
     };
 };
@@ -32,19 +32,22 @@ let copyRender: (
     _unmount: () => void;
 };
 
-const isReact18 = Number(CopyReactDOM.version?.split('.')[0]) > 17;
+const { version, render: reactRender, unmountComponentAtNode } = CopyReactDOM;
+
+const isReact18 = Number((version || '').split('.')[0]) > 17;
 
 const updateUsingClientEntryPoint = (skipWarning?: boolean) => {
     // https://github.com/facebook/react/blob/17806594cc28284fe195f918e8d77de3516848ec/packages/react-dom/npm/client.js#L10
     // Avoid console warning
-    if (isObject(CopyReactDOM[__SECRET_INTERNALS__])) {
-        CopyReactDOM[__SECRET_INTERNALS__].usingClientEntryPoint = skipWarning;
+    const { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED } = CopyReactDOM;
+    if (isObject(__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED)) {
+        __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.usingClientEntryPoint = skipWarning;
     }
 };
 
 let createRoot: CreateRootFnType | undefined;
 try {
-    createRoot = CopyReactDOM.createRoot;
+    ({ createRoot } = CopyReactDOM);
 } catch (_) {}
 
 if (isReact18 && createRoot) {
@@ -64,14 +67,14 @@ if (isReact18 && createRoot) {
     };
 } else {
     copyRender = function (app: ReactElement, container: Element | DocumentFragment) {
-        CopyReactDOM.render(app, container);
+        reactRender(app, container);
 
         return {
             render: (comment: ReactElement) => {
-                CopyReactDOM.render(comment, container);
+                reactRender(comment, container);
             },
             _unmount() {
-                CopyReactDOM.unmountComponentAtNode(container);
+                unmountComponentAtNode(container);
             },
         };
     };

packages/arcodesign/components/stepper/hooks/useInputEvent.tsx

@@ -6,6 +6,7 @@ export default function useInputEvent(
     params: Required<Pick<StepperProps, 'defaultValue' | 'min' | 'max' | 'digits' | 'allowEmpty'>> &
         Pick<StepperProps, 'onBlur' | 'onChange' | 'onInput'> & {
             actualInputValue: number;
+            innerValue: number;
             updateValue: (updater: number | ((oldValue: number) => number)) => void;
         },
 ) {
@@ -15,6 +16,7 @@ export default function useInputEvent(
         max,
         digits,
         actualInputValue,
+        innerValue,
         allowEmpty,
         updateValue,
         onBlur,
@@ -53,8 +55,8 @@ export default function useInputEvent(
     };
 
     useUpdateEffect(() => {
-        onChange && onChange(actualInputValue);
-    }, [actualInputValue]);
+        onChange && onChange(innerValue);
+    }, [innerValue]);
 
     return {
         handleInput,

packages/arcodesign/components/stepper/hooks/useValue.tsx

@@ -37,5 +37,6 @@ export default function useValue(
         updateValue,
         actualInputValue,
         showValue,
+        innerValue,
     };
 }

packages/arcodesign/components/stepper/index.tsx

@@ -41,7 +41,7 @@ const Stepper = forwardRef((props: StepperProps, ref: Ref<StepperRef>) => {
 
     // 值的相关逻辑
     // @en The logic is that handle value
-    const { updateValue, actualInputValue, showValue } = useValue({
+    const { updateValue, actualInputValue, showValue, innerValue } = useValue({
         defaultValue,
         formatter,
         min,
@@ -75,6 +75,7 @@ const Stepper = forwardRef((props: StepperProps, ref: Ref<StepperRef>) => {
         digits,
         actualInputValue,
         allowEmpty,
+        innerValue,
         updateValue,
         onBlur,
         onChange,

packages/arcodesign/components/stepper/style/index.less

@@ -1,7 +1,7 @@
 @import '../../../style/mixin.less';
 
 .@{prefix}-stepper {
-    display: flex;
+    display: inline-flex;
     .use-var(font-size, stepper-font-size);
 
     &.@{prefix}-square {

packages/arcodesign/esnext-tsconfig.json

@@ -0,0 +1,23 @@
+{
+    "compilerOptions": {
+        "strictNullChecks": true,
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "experimentalDecorators": true,
+        "allowSyntheticDefaultImports": true,
+        "jsx": "react",
+        "noUnusedParameters": true,
+        "noUnusedLocals": true,
+        "module": "ESNext",
+        "target": "ESNext",
+        "declaration": true,
+        "lib": ["esnext", "dom"]
+    },
+    "include": [
+        "packages/arcodesign/components/**/*.ts",
+        "packages/arcodesign/components/**/*.tsx",
+        "packages/common-widgets/**/*.ts",
+        "sites/**/*.d.ts"
+    ],
+    "exclude": ["node_modules"]
+}

packages/arcodesign/gulpfile.js

@@ -30,6 +30,13 @@ function esmBuild() {
         .pipe(gulp.dest('esm'));
 }
 
+function esnextBuild() {
+    return gulp
+        .src('components/**/*.{ts,tsx}')
+        .pipe(ts.createProject('./esnext-tsconfig.json', { emitDeclarationOnly: false })())
+        .pipe(gulp.dest('esnext'));
+}
+
 function umdBuild() {
     return gulp
         .src('components/**/*.{ts,tsx}')
@@ -58,7 +65,8 @@ function copyLess() {
         )
         .pipe(gulp.dest('esm'))
         .pipe(gulp.dest('umd'))
-        .pipe(gulp.dest('cjs'));
+        .pipe(gulp.dest('cjs'))
+        .pipe(gulp.dest('esnext'));
 }
 
 function buildStyle(src) {
@@ -98,7 +106,7 @@ function entryLessBuild() {
 function moveCss() {
     try {
         allCss.forEach(file => {
-            ['esm', 'umd', 'cjs'].forEach(type => {
+            ['esm', 'umd', 'cjs', 'esnext'].forEach(type => {
                 const filePath = path.join('_temp_style_', file);
                 const newPath = path.join(type, path.dirname(file), 'css');
                 fs.mkdirpSync(newPath);
@@ -131,7 +139,7 @@ function buildCssEntry(type) {
 function moveCssEntry() {
     try {
         allCssEntry.forEach(file => {
-            ['esm', 'umd', 'cjs'].forEach(type => {
+            ['esm', 'umd', 'cjs', 'esnext'].forEach(type => {
                 const filePath = path.join('_temp_style_entry_', type, file);
                 const newPath = path.join(type, path.dirname(file), 'css');
                 fs.mkdirpSync(newPath);
@@ -149,11 +157,11 @@ function moveCssEntry() {
 gulp.task(
     'build',
     gulp.series(
-        gulp.parallel(dtsBuild, esmBuild, umdBuild, cjsBuild), // js 部分编译打包
+        gulp.parallel(dtsBuild, esmBuild, umdBuild, cjsBuild, esnextBuild), // js 部分编译打包
         copyLess, // 复制less文件到产物中
         gulp.parallel(lessBuild, entryLessBuild), // 编译less文件为css
         moveCss, // css产物放到css文件夹中
-        ...['esm', 'umd', 'cjs'].map(type => buildCssEntry(type)), // css中的js入口生成
+        ...['esm', 'umd', 'cjs', 'esnext'].map(type => buildCssEntry(type)), // css中的js入口生成
         moveCssEntry, // css入口js放到css文件夹中
     ),
 );