feat: InputNumber support stringMode (#29373)

* add input-number demo

* update snapshot

* update demo

* docs: Update desc

* update doc

* clean up React useLayoutEffect warning

* fix ts definition

* re-trigger

* update rc-uitl version

* bump rc-input-number

* update

* update

* fix ts

* update demo snapshot

* update doc

* update demo

components/config-provider/__tests__/__snapshots__/components.test.js.snap

@@ -14108,6 +14108,7 @@ exports[`ConfigProvider components InputNumber configProvider 1`] = `
     class="config-input-number-handler-wrap"
   >
     <span
+      aria-disabled="false"
       aria-label="Increase Value"
       class="config-input-number-handler config-input-number-handler-up"
       role="button"
@@ -14134,6 +14135,7 @@ exports[`ConfigProvider components InputNumber configProvider 1`] = `
       </span>
     </span>
     <span
+      aria-disabled="false"
       aria-label="Decrease Value"
       class="config-input-number-handler config-input-number-handler-down"
       role="button"
@@ -14164,12 +14166,8 @@ exports[`ConfigProvider components InputNumber configProvider 1`] = `
     class="config-input-number-input-wrap"
   >
     <input
-      aria-valuemax="9007199254740991"
-      aria-valuemin="-9007199254740991"
       autocomplete="off"
       class="config-input-number-input"
-      max="9007199254740991"
-      min="-9007199254740991"
       role="spinbutton"
       step="1"
       value=""
@@ -14186,6 +14184,7 @@ exports[`ConfigProvider components InputNumber configProvider componentSize larg
     class="config-input-number-handler-wrap"
   >
     <span
+      aria-disabled="false"
       aria-label="Increase Value"
       class="config-input-number-handler config-input-number-handler-up"
       role="button"
@@ -14212,6 +14211,7 @@ exports[`ConfigProvider components InputNumber configProvider componentSize larg
       </span>
     </span>
     <span
+      aria-disabled="false"
       aria-label="Decrease Value"
       class="config-input-number-handler config-input-number-handler-down"
       role="button"
@@ -14242,12 +14242,8 @@ exports[`ConfigProvider components InputNumber configProvider componentSize larg
     class="config-input-number-input-wrap"
   >
     <input
-      aria-valuemax="9007199254740991"
-      aria-valuemin="-9007199254740991"
       autocomplete="off"
       class="config-input-number-input"
-      max="9007199254740991"
-      min="-9007199254740991"
       role="spinbutton"
       step="1"
       value=""
@@ -14264,6 +14260,7 @@ exports[`ConfigProvider components InputNumber configProvider componentSize midd
     class="config-input-number-handler-wrap"
   >
     <span
+      aria-disabled="false"
       aria-label="Increase Value"
       class="config-input-number-handler config-input-number-handler-up"
       role="button"
@@ -14290,6 +14287,7 @@ exports[`ConfigProvider components InputNumber configProvider componentSize midd
       </span>
     </span>
     <span
+      aria-disabled="false"
       aria-label="Decrease Value"
       class="config-input-number-handler config-input-number-handler-down"
       role="button"
@@ -14320,12 +14318,8 @@ exports[`ConfigProvider components InputNumber configProvider componentSize midd
     class="config-input-number-input-wrap"
   >
     <input
-      aria-valuemax="9007199254740991"
-      aria-valuemin="-9007199254740991"
       autocomplete="off"
       class="config-input-number-input"
-      max="9007199254740991"
-      min="-9007199254740991"
       role="spinbutton"
       step="1"
       value=""
@@ -14342,6 +14336,7 @@ exports[`ConfigProvider components InputNumber configProvider virtual and dropdo
     class="ant-input-number-handler-wrap"
   >
     <span
+      aria-disabled="false"
       aria-label="Increase Value"
       class="ant-input-number-handler ant-input-number-handler-up"
       role="button"
@@ -14368,6 +14363,7 @@ exports[`ConfigProvider components InputNumber configProvider virtual and dropdo
       </span>
     </span>
     <span
+      aria-disabled="false"
       aria-label="Decrease Value"
       class="ant-input-number-handler ant-input-number-handler-down"
       role="button"
@@ -14398,12 +14394,8 @@ exports[`ConfigProvider components InputNumber configProvider virtual and dropdo
     class="ant-input-number-input-wrap"
   >
     <input
-      aria-valuemax="9007199254740991"
-      aria-valuemin="-9007199254740991"
       autocomplete="off"
       class="ant-input-number-input"
-      max="9007199254740991"
-      min="-9007199254740991"
       role="spinbutton"
       step="1"
       value=""
@@ -14420,6 +14412,7 @@ exports[`ConfigProvider components InputNumber normal 1`] = `
     class="ant-input-number-handler-wrap"
   >
     <span
+      aria-disabled="false"
       aria-label="Increase Value"
       class="ant-input-number-handler ant-input-number-handler-up"
       role="button"
@@ -14446,6 +14439,7 @@ exports[`ConfigProvider components InputNumber normal 1`] = `
       </span>
     </span>
     <span
+      aria-disabled="false"
       aria-label="Decrease Value"
       class="ant-input-number-handler ant-input-number-handler-down"
       role="button"
@@ -14476,12 +14470,8 @@ exports[`ConfigProvider components InputNumber normal 1`] = `
     class="ant-input-number-input-wrap"
   >
     <input
-      aria-valuemax="9007199254740991"
-      aria-valuemin="-9007199254740991"
       autocomplete="off"
       class="ant-input-number-input"
-      max="9007199254740991"
-      min="-9007199254740991"
       role="spinbutton"
       step="1"
       value=""
@@ -14498,6 +14488,7 @@ exports[`ConfigProvider components InputNumber prefixCls 1`] = `
     class="prefix-InputNumber-handler-wrap"
   >
     <span
+      aria-disabled="false"
       aria-label="Increase Value"
       class="prefix-InputNumber-handler prefix-InputNumber-handler-up"
       role="button"
@@ -14524,6 +14515,7 @@ exports[`ConfigProvider components InputNumber prefixCls 1`] = `
       </span>
     </span>
     <span
+      aria-disabled="false"
       aria-label="Decrease Value"
       class="prefix-InputNumber-handler prefix-InputNumber-handler-down"
       role="button"
@@ -14554,12 +14546,8 @@ exports[`ConfigProvider components InputNumber prefixCls 1`] = `
     class="prefix-InputNumber-input-wrap"
   >
     <input
-      aria-valuemax="9007199254740991"
-      aria-valuemin="-9007199254740991"
       autocomplete="off"
       class="prefix-InputNumber-input"
-      max="9007199254740991"
-      min="-9007199254740991"
       role="spinbutton"
       step="1"
       value=""

components/form/__tests__/__snapshots__/demo.test.js.snap

@@ -2640,6 +2640,7 @@ exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
               class="ant-input-number-handler-wrap"
             >
               <span
+                aria-disabled="false"
                 aria-label="Increase Value"
                 class="ant-input-number-handler ant-input-number-handler-up"
                 role="button"
@@ -2666,6 +2667,7 @@ exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
                 </span>
               </span>
               <span
+                aria-disabled="false"
                 aria-label="Decrease Value"
                 class="ant-input-number-handler ant-input-number-handler-down"
                 role="button"
@@ -2696,13 +2698,9 @@ exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
               class="ant-input-number-input-wrap"
             >
               <input
-                aria-valuemax="9007199254740991"
-                aria-valuemin="-9007199254740991"
                 autocomplete="off"
                 class="ant-input-number-input"
                 id="nest-messages_user_age"
-                max="9007199254740991"
-                min="-9007199254740991"
                 role="spinbutton"
                 step="1"
                 value=""
@@ -4347,6 +4345,7 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
               class="ant-input-number-handler-wrap"
             >
               <span
+                aria-disabled="false"
                 aria-label="Increase Value"
                 class="ant-input-number-handler ant-input-number-handler-up"
                 role="button"
@@ -4373,6 +4372,7 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
                 </span>
               </span>
               <span
+                aria-disabled="false"
                 aria-label="Decrease Value"
                 class="ant-input-number-handler ant-input-number-handler-down"
                 role="button"
@@ -4403,12 +4403,8 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
               class="ant-input-number-input-wrap"
             >
               <input
-                aria-valuemax="9007199254740991"
-                aria-valuemin="-9007199254740991"
                 autocomplete="off"
                 class="ant-input-number-input"
-                max="9007199254740991"
-                min="-9007199254740991"
                 role="spinbutton"
                 step="1"
                 value=""
@@ -5243,6 +5239,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
               class="ant-input-number-handler-wrap"
             >
               <span
+                aria-disabled="false"
                 aria-label="Increase Value"
                 class="ant-input-number-handler ant-input-number-handler-up"
                 role="button"
@@ -5269,6 +5266,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
                 </span>
               </span>
               <span
+                aria-disabled="false"
                 aria-label="Decrease Value"
                 class="ant-input-number-handler ant-input-number-handler-down"
                 role="button"
@@ -5305,8 +5303,6 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
                 autocomplete="off"
                 class="ant-input-number-input"
                 id="validate_other_input-number"
-                max="10"
-                min="1"
                 role="spinbutton"
                 step="1"
                 value="3"
@@ -7267,6 +7263,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
               class="ant-input-number-handler-wrap"
             >
               <span
+                aria-disabled="false"
                 aria-label="Increase Value"
                 class="ant-input-number-handler ant-input-number-handler-up"
                 role="button"
@@ -7293,6 +7290,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
                 </span>
               </span>
               <span
+                aria-disabled="false"
                 aria-label="Decrease Value"
                 class="ant-input-number-handler ant-input-number-handler-down"
                 role="button"
@@ -7323,12 +7321,8 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
               class="ant-input-number-input-wrap"
             >
               <input
-                aria-valuemax="9007199254740991"
-                aria-valuemin="-9007199254740991"
                 autocomplete="off"
                 class="ant-input-number-input"
-                max="9007199254740991"
-                min="-9007199254740991"
                 role="spinbutton"
                 step="1"
                 value=""
@@ -7675,6 +7669,7 @@ exports[`renders ./components/form/demo/without-form-create.md correctly 1`] = `
               class="ant-input-number-handler-wrap"
             >
               <span
+                aria-disabled="false"
                 aria-label="Increase Value"
                 class="ant-input-number-handler ant-input-number-handler-up"
                 role="button"
@@ -7701,6 +7696,7 @@ exports[`renders ./components/form/demo/without-form-create.md correctly 1`] = `
                 </span>
               </span>
               <span
+                aria-disabled="false"
                 aria-label="Decrease Value"
                 class="ant-input-number-handler ant-input-number-handler-down"
                 role="button"
@@ -7736,8 +7732,6 @@ exports[`renders ./components/form/demo/without-form-create.md correctly 1`] = `
                 aria-valuenow="11"
                 autocomplete="off"
                 class="ant-input-number-input"
-                max="12"
-                min="8"
                 role="spinbutton"
                 step="1"
                 value="11"

components/input-number/__tests__/__snapshots__/demo.test.js.snap

@@ -8,6 +8,7 @@ exports[`renders ./components/input-number/demo/basic.md correctly 1`] = `
     class="ant-input-number-handler-wrap"
   >
     <span
+      aria-disabled="false"
       aria-label="Increase Value"
       class="ant-input-number-handler ant-input-number-handler-up"
       role="button"
@@ -34,6 +35,7 @@ exports[`renders ./components/input-number/demo/basic.md correctly 1`] = `
       </span>
     </span>
     <span
+      aria-disabled="false"
       aria-label="Decrease Value"
       class="ant-input-number-handler ant-input-number-handler-down"
       role="button"
@@ -69,8 +71,6 @@ exports[`renders ./components/input-number/demo/basic.md correctly 1`] = `
       aria-valuenow="3"
       autocomplete="off"
       class="ant-input-number-input"
-      max="10"
-      min="1"
       role="spinbutton"
       step="1"
       value="3"
@@ -87,6 +87,7 @@ exports[`renders ./components/input-number/demo/borderless.md correctly 1`] = `
     class="ant-input-number-handler-wrap"
   >
     <span
+      aria-disabled="false"
       aria-label="Increase Value"
       class="ant-input-number-handler ant-input-number-handler-up"
       role="button"
@@ -113,6 +114,7 @@ exports[`renders ./components/input-number/demo/borderless.md correctly 1`] = `
       </span>
     </span>
     <span
+      aria-disabled="false"
       aria-label="Decrease Value"
       class="ant-input-number-handler ant-input-number-handler-down"
       role="button"
@@ -148,8 +150,6 @@ exports[`renders ./components/input-number/demo/borderless.md correctly 1`] = `
       aria-valuenow="3"
       autocomplete="off"
       class="ant-input-number-input"
-      max="10"
-      min="1"
       role="spinbutton"
       step="1"
       value="3"
@@ -161,11 +161,13 @@ exports[`renders ./components/input-number/demo/borderless.md correctly 1`] = `
 exports[`renders ./components/input-number/demo/digit.md correctly 1`] = `
 <div
   class="ant-input-number"
+  style="width:200px"
 >
   <div
     class="ant-input-number-handler-wrap"
   >
     <span
+      aria-disabled="false"
       aria-label="Increase Value"
       class="ant-input-number-handler ant-input-number-handler-up"
       role="button"
@@ -192,6 +194,7 @@ exports[`renders ./components/input-number/demo/digit.md correctly 1`] = `
       </span>
     </span>
     <span
+      aria-disabled="false"
       aria-label="Decrease Value"
       class="ant-input-number-handler ant-input-number-handler-down"
       role="button"
@@ -224,13 +227,12 @@ exports[`renders ./components/input-number/demo/digit.md correctly 1`] = `
     <input
       aria-valuemax="10"
       aria-valuemin="0"
+      aria-valuenow="1"
       autocomplete="off"
       class="ant-input-number-input"
-      max="10"
-      min="0"
       role="spinbutton"
-      step="0.1"
-      value=""
+      step="0.00000000000001"
+      value="1.00000000000000"
     />
   </div>
 </div>
@@ -245,9 +247,9 @@ Array [
       class="ant-input-number-handler-wrap"
     >
       <span
-        aria-disabled="true"
+        aria-disabled="false"
         aria-label="Increase Value"
-        class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled"
+        class="ant-input-number-handler ant-input-number-handler-up"
         role="button"
         unselectable="on"
       >
@@ -272,9 +274,9 @@ Array [
         </span>
       </span>
       <span
-        aria-disabled="true"
+        aria-disabled="false"
         aria-label="Decrease Value"
-        class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
+        class="ant-input-number-handler ant-input-number-handler-down"
         role="button"
         unselectable="on"
       >
@@ -309,8 +311,6 @@ Array [
         autocomplete="off"
         class="ant-input-number-input"
         disabled=""
-        max="10"
-        min="1"
         role="spinbutton"
         step="1"
         value="3"
@@ -341,6 +341,7 @@ Array [
       class="ant-input-number-handler-wrap"
     >
       <span
+        aria-disabled="false"
         aria-label="Increase Value"
         class="ant-input-number-handler ant-input-number-handler-up"
         role="button"
@@ -367,6 +368,7 @@ Array [
         </span>
       </span>
       <span
+        aria-disabled="false"
         aria-label="Decrease Value"
         class="ant-input-number-handler ant-input-number-handler-down"
         role="button"
@@ -397,13 +399,9 @@ Array [
       class="ant-input-number-input-wrap"
     >
       <input
-        aria-valuemax="9007199254740991"
-        aria-valuemin="-9007199254740991"
         aria-valuenow="1000"
         autocomplete="off"
         class="ant-input-number-input"
-        max="9007199254740991"
-        min="-9007199254740991"
         role="spinbutton"
         step="1"
         value="$ 1,000"
@@ -444,6 +442,7 @@ Array [
         </span>
       </span>
       <span
+        aria-disabled="false"
         aria-label="Decrease Value"
         class="ant-input-number-handler ant-input-number-handler-down"
         role="button"
@@ -479,8 +478,6 @@ Array [
         aria-valuenow="100"
         autocomplete="off"
         class="ant-input-number-input"
-        max="100"
-        min="0"
         role="spinbutton"
         step="1"
         value="100%"
@@ -491,96 +488,214 @@ Array [
 `;
 
 exports[`renders ./components/input-number/demo/keyboard.md correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
   <div
-    class="ant-input-number"
+    class="ant-space-item"
+    style="margin-right:8px"
   >
     <div
-      class="ant-input-number-handler-wrap"
+      class="ant-input-number"
     >
-      <span
-        aria-label="Increase Value"
-        class="ant-input-number-handler ant-input-number-handler-up"
-        role="button"
-        unselectable="on"
+      <div
+        class="ant-input-number-handler-wrap"
       >
         <span
-          aria-label="up"
-          class="anticon anticon-up ant-input-number-handler-up-inner"
-          role="img"
+          aria-disabled="false"
+          aria-label="Increase Value"
+          class="ant-input-number-handler ant-input-number-handler-up"
+          role="button"
+          unselectable="on"
         >
-          <svg
-            aria-hidden="true"
-            data-icon="up"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
+          <span
+            aria-label="up"
+            class="anticon anticon-up ant-input-number-handler-up-inner"
+            role="img"
           >
-            <path
-              d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
-            />
-          </svg>
+            <svg
+              aria-hidden="true"
+              data-icon="up"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+              />
+            </svg>
+          </span>
         </span>
-      </span>
-      <span
-        aria-label="Decrease Value"
-        class="ant-input-number-handler ant-input-number-handler-down"
-        role="button"
-        unselectable="on"
-      >
         <span
-          aria-label="down"
-          class="anticon anticon-down ant-input-number-handler-down-inner"
-          role="img"
+          aria-disabled="false"
+          aria-label="Decrease Value"
+          class="ant-input-number-handler ant-input-number-handler-down"
+          role="button"
+          unselectable="on"
         >
-          <svg
-            aria-hidden="true"
-            data-icon="down"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
+          <span
+            aria-label="down"
+            class="anticon anticon-down ant-input-number-handler-down-inner"
+            role="img"
           >
-            <path
-              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-            />
-          </svg>
+            <svg
+              aria-hidden="true"
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
         </span>
-      </span>
+      </div>
+      <div
+        class="ant-input-number-input-wrap"
+      >
+        <input
+          aria-valuemax="10"
+          aria-valuemin="1"
+          aria-valuenow="3"
+          autocomplete="off"
+          class="ant-input-number-input"
+          role="spinbutton"
+          step="1"
+          value="3"
+        />
+      </div>
     </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <label
+      class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
+    >
+      <span
+        class="ant-checkbox ant-checkbox-checked"
+      >
+        <input
+          checked=""
+          class="ant-checkbox-input"
+          type="checkbox"
+        />
+        <span
+          class="ant-checkbox-inner"
+        />
+      </span>
+      <span>
+        Toggle keyboard
+      </span>
+    </label>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/input-number/demo/out-of-range.md correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
+  >
     <div
-      class="ant-input-number-input-wrap"
+      class="ant-input-number ant-input-number-out-of-range"
     >
-      <input
-        aria-valuemax="10"
-        aria-valuemin="1"
-        aria-valuenow="3"
-        autocomplete="off"
-        class="ant-input-number-input"
-        max="10"
-        min="1"
-        role="spinbutton"
-        step="1"
-        value="3"
-      />
+      <div
+        class="ant-input-number-handler-wrap"
+      >
+        <span
+          aria-disabled="true"
+          aria-label="Increase Value"
+          class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled"
+          role="button"
+          unselectable="on"
+        >
+          <span
+            aria-label="up"
+            class="anticon anticon-up ant-input-number-handler-up-inner"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="up"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
+        <span
+          aria-disabled="false"
+          aria-label="Decrease Value"
+          class="ant-input-number-handler ant-input-number-handler-down"
+          role="button"
+          unselectable="on"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down ant-input-number-handler-down-inner"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+      <div
+        class="ant-input-number-input-wrap"
+      >
+        <input
+          aria-valuemax="10"
+          aria-valuemin="1"
+          aria-valuenow="99"
+          autocomplete="off"
+          class="ant-input-number-input"
+          role="spinbutton"
+          step="1"
+          value="99"
+        />
+      </div>
     </div>
-  </div>,
+  </div>
   <div
-    style="margin-top:20px"
+    class="ant-space-item"
   >
     <button
       class="ant-btn ant-btn-primary"
       type="button"
     >
       <span>
-        Toggle keyboard
+        Reset
       </span>
     </button>
-  </div>,
-]
+  </div>
+</div>
 `;
 
 exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
@@ -594,6 +709,7 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
       class="ant-input-number-handler-wrap"
     >
       <span
+        aria-disabled="false"
         aria-label="Increase Value"
         class="ant-input-number-handler ant-input-number-handler-up"
         role="button"
@@ -620,6 +736,7 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
         </span>
       </span>
       <span
+        aria-disabled="false"
         aria-label="Decrease Value"
         class="ant-input-number-handler ant-input-number-handler-down"
         role="button"
@@ -655,8 +772,6 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
         aria-valuenow="3"
         autocomplete="off"
         class="ant-input-number-input"
-        max="100000"
-        min="1"
         role="spinbutton"
         step="1"
         value="3"
@@ -670,6 +785,7 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
       class="ant-input-number-handler-wrap"
     >
       <span
+        aria-disabled="false"
         aria-label="Increase Value"
         class="ant-input-number-handler ant-input-number-handler-up"
         role="button"
@@ -696,6 +812,7 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
         </span>
       </span>
       <span
+        aria-disabled="false"
         aria-label="Decrease Value"
         class="ant-input-number-handler ant-input-number-handler-down"
         role="button"
@@ -731,8 +848,6 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
         aria-valuenow="3"
         autocomplete="off"
         class="ant-input-number-input"
-        max="100000"
-        min="1"
         role="spinbutton"
         step="1"
         value="3"
@@ -746,6 +861,7 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
       class="ant-input-number-handler-wrap"
     >
       <span
+        aria-disabled="false"
         aria-label="Increase Value"
         class="ant-input-number-handler ant-input-number-handler-up"
         role="button"
@@ -772,6 +888,7 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
         </span>
       </span>
       <span
+        aria-disabled="false"
         aria-label="Decrease Value"
         class="ant-input-number-handler ant-input-number-handler-down"
         role="button"
@@ -807,8 +924,6 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
         aria-valuenow="3"
         autocomplete="off"
         class="ant-input-number-input"
-        max="100000"
-        min="1"
         role="spinbutton"
         step="1"
         value="3"

components/input-number/__tests__/__snapshots__/index.test.js.snap

@@ -8,6 +8,7 @@ exports[`InputNumber rtl render component should be rendered correctly in RTL di
     class="ant-input-number-handler-wrap"
   >
     <span
+      aria-disabled="false"
       aria-label="Increase Value"
       class="ant-input-number-handler ant-input-number-handler-up"
       role="button"
@@ -34,6 +35,7 @@ exports[`InputNumber rtl render component should be rendered correctly in RTL di
       </span>
     </span>
     <span
+      aria-disabled="false"
       aria-label="Decrease Value"
       class="ant-input-number-handler ant-input-number-handler-down"
       role="button"
@@ -64,12 +66,8 @@ exports[`InputNumber rtl render component should be rendered correctly in RTL di
     class="ant-input-number-input-wrap"
   >
     <input
-      aria-valuemax="9007199254740991"
-      aria-valuemin="-9007199254740991"
       autocomplete="off"
       class="ant-input-number-input"
-      max="9007199254740991"
-      min="-9007199254740991"
       role="spinbutton"
       step="1"
       value=""

components/input-number/__tests__/index.test.js

@@ -15,7 +15,8 @@ describe('InputNumber', () => {
     const onChange = jest.fn();
     const wrapper = mount(<InputNumber defaultValue="1" onChange={onChange} />);
     wrapper.find('input').simulate('change', { target: { value: '' } });
-    expect(onChange).toHaveBeenLastCalledWith('');
+    expect(onChange).not.toHaveBeenCalled();
+
     wrapper.find('input').simulate('blur');
     expect(onChange).toHaveBeenLastCalledWith(null);
   });

components/input-number/demo/digit.md

@@ -1,24 +1,35 @@
 ---
 order: 3
 title:
-  zh-CN: 小数
-  en-US: Decimals
+  zh-CN: 高精度小数
+  en-US: High precision decimals
 ---
 
 ## zh-CN
 
-和原生的数字输入框一样，value 的精度由 step 的小数位数决定。
+通过 `stringMode` 开启高精度小数支持，`onChange` 事件将返回 string 类型。对于旧版游览器，你需要 BigInt polyfill。
 
 ## en-US
 
-A numeric-only input box whose values can be increased or decreased using a decimal step. The number of decimals (also known as precision) is determined by the step prop.
+Use `stringMode` to support high precision decimals support. `onChange` will return string value instead. You need polyfill of BigInt if browser not support.
 
-```jsx
+```tsx
 import { InputNumber } from 'antd';
 
-function onChange(value) {
+function onChange(value: string) {
   console.log('changed', value);
 }
 
-ReactDOM.render(<InputNumber min={0} max={10} step={0.1} onChange={onChange} />, mountNode);
+ReactDOM.render(
+  <InputNumber<string>
+    style={{ width: 200 }}
+    defaultValue="1"
+    min="0"
+    max="10"
+    step="0.00000000000001"
+    onChange={onChange}
+    stringMode
+  />,
+  mountNode,
+);
 ```

components/input-number/demo/keyboard.md

@@ -13,33 +13,25 @@ title:
 
 Control keyboard behavior by `keyboard`.
 
-```jsx
-import { InputNumber, Button } from 'antd';
-
-class App extends React.Component {
-  state = {
-    keyboard: true,
-  };
-
-  toggle = () => {
-    this.setState({
-      keyboard: !this.state.keyboard,
-    });
-  };
-
-  render() {
-    return (
-      <>
-        <InputNumber min={1} max={10} keyboard={this.state.keyboard} defaultValue={3} />
-        <div style={{ marginTop: 20 }}>
-          <Button onClick={this.toggle} type="primary">
-            Toggle keyboard
-          </Button>
-        </div>
-      </>
-    );
-  }
-}
+```tsx
+import { InputNumber, Checkbox, Space } from 'antd';
+
+const App = () => {
+  const [keyboard, setKeyboard] = React.useState(true);
+  return (
+    <Space>
+      <InputNumber min={1} max={10} keyboard={keyboard} defaultValue={3} />
+      <Checkbox
+        onChange={() => {
+          setKeyboard(!keyboard);
+        }}
+        checked={keyboard}
+      >
+        Toggle keyboard
+      </Checkbox>
+    </Space>
+  );
+};
 
 ReactDOM.render(<App />, mountNode);
 ```

components/input-number/demo/out-of-range.md

@@ -0,0 +1,38 @@
+---
+order: 6
+title:
+  zh-CN: 超出边界
+  en-US: Out of range
+---
+
+## zh-CN
+
+当通过受控将 `value` 超出边界时，提供警告样式。
+
+## en-US
+
+Show warning style when `value` is out of range by control.
+
+```tsx
+import { InputNumber, Button, Space } from 'antd';
+
+const Demo = () => {
+  const [value, setValue] = React.useState<string | number>('99');
+
+  return (
+    <Space>
+      <InputNumber min={1} max={10} value={value} onChange={setValue} />
+      <Button
+        type="primary"
+        onClick={() => {
+          setValue(99);
+        }}
+      >
+        Reset
+      </Button>
+    </Space>
+  );
+};
+
+ReactDOM.render(<Demo />, mountNode);
+```

components/input-number/index.en-US.md

@@ -29,6 +29,7 @@ When a numeric value needs to be provided.
 | readOnly | If readonly the input | boolean | false | - |
 | size | The height of input box | `large` \| `middle` \| `small` | - | - |
 | step | The number to which the current value is increased or decreased. It can be an integer or decimal | number \| string | 1 | - |
+| stringMode | Set value as string to support high precision decimals. Will return string value by `onChange` | boolean | false | 4.13.0 |
 | value | The current value | number | - | - |
 | onChange | The callback triggered when the value is changed | function(value: number \| string \| null) | - | - |
 | onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - | - |
@@ -44,3 +45,13 @@ When a numeric value needs to be provided.
 ## Notes
 
 Per issues [#21158](https://github.com/ant-design/ant-design/issues/21158), [#17344](https://github.com/ant-design/ant-design/issues/17344), [#9421](https://github.com/ant-design/ant-design/issues/9421), and [documentation about inputs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#Using_number_inputs), it appears this community does not support native inclusion of the `type="number"` in the `<Input />` attributes, so please feel free to include it as needed, and be aware that it is heavily suggested that server side validation be utilized, as client side validation can be edited by power users.
+
+## FAQ
+
+### Why `value` can exceed `min` or `max` in control?
+
+Developer handle data by their own in control. It will make data out of sync if InputNumber change display value. It also cause potential data issues when use in form.
+
+### Why dynamic change `min` or `max` which makes `value` out of range will not trigger `onChange`?
+
+`onChange` is user trigger event. Auto trigger will makes form lib can not detect data modify source.

components/input-number/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import RcInputNumber from 'rc-input-number';
+import RcInputNumber, { InputNumberProps as RcInputNumberProps } from 'rc-input-number';
 import UpOutlined from '@ant-design/icons/UpOutlined';
 import DownOutlined from '@ant-design/icons/DownOutlined';
 
@@ -8,37 +8,16 @@ import { ConfigContext } from '../config-provider';
 import { Omit } from '../_util/type';
 import SizeContext, { SizeType } from '../config-provider/SizeContext';
 
-// omitting this attrs because they conflicts with the ones defined in InputNumberProps
-export type OmitAttrs = 'defaultValue' | 'onChange' | 'size';
+type ValueType = string | number;
 
-export interface InputNumberProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, OmitAttrs> {
+export interface InputNumberProps<T extends ValueType = ValueType>
+  extends Omit<RcInputNumberProps<T>, 'size'> {
   prefixCls?: string;
-  min?: number;
-  max?: number;
-  value?: number;
-  step?: number | string;
-  defaultValue?: number;
-  tabIndex?: number;
-  onChange?: (value: number | string | undefined | null) => void;
-  disabled?: boolean;
-  readOnly?: boolean;
   size?: SizeType;
   bordered?: boolean;
-  formatter?: (value: number | string | undefined) => string;
-  parser?: (displayValue: string | undefined) => number | string;
-  decimalSeparator?: string;
-  placeholder?: string;
-  style?: React.CSSProperties;
-  className?: string;
-  name?: string;
-  id?: string;
-  precision?: number;
-  onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
-  onStep?: (value: number, info: { offset: number; type: 'up' | 'down' }) => void;
 }
 
-const InputNumber = React.forwardRef<unknown, InputNumberProps>((props, ref) => {
+const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props, ref) => {
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const size = React.useContext(SizeContext);
 
@@ -80,8 +59,8 @@ const InputNumber = React.forwardRef<unknown, InputNumberProps>((props, ref) =>
   );
 });
 
-InputNumber.defaultProps = {
-  step: 1,
-};
-
-export default InputNumber;
+export default InputNumber as (<T extends ValueType = ValueType>(
+  props: React.PropsWithChildren<InputNumberProps<T>> & {
+    ref?: React.Ref<HTMLInputElement>;
+  },
+) => React.ReactElement) & { displayName?: string };

components/input-number/index.zh-CN.md

@@ -32,6 +32,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg
 | readOnly | 只读 | boolean | false | - |
 | size | 输入框大小 | `large` \| `middle` \| `small` | - | - |
 | step | 每次改变步数，可以为小数 | number \| string | 1 | - |
+| stringMode | 字符值模式，开启后支持高精度小数。同时 `onChange` 将返回 string 类型 | boolean | false | 4.13.0 |
 | value | 当前值 | number | - | - |
 | onChange | 变化回调 | function(value: number \| string \| null) | - | - |
 | onPressEnter | 按下回车的回调 | function(e) | - | - |
@@ -43,3 +44,13 @@ cover: https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg
 | ------- | -------- |
 | blur()  | 移除焦点 |
 | focus() | 获取焦点 |
+
+## FAQ
+
+### 为何受控模式下，`value` 可以超出 `min` 和 `max` 范围？
+
+在受控模式下，开发者可能自行存储相关数据。如果组件将数据约束回范围内，会导致展示数据与实际存储数据不一致的情况。这使得一些如表单场景存在潜在的数据问题。
+
+### 为何动态修改 `min` 和 `max` 让 `value` 超出范围不会触发 `onChange` 事件？
+
+`onChange` 事件为用户触发事件，自行触发会导致表单库误以为变更来自用户操作。我们以错误样式展示超出范围的数值。

components/input-number/style/index.less

@@ -197,6 +197,13 @@
   &-borderless {
     box-shadow: none;
   }
+
+  // ===================== Out Of Range =====================
+  &-out-of-range {
+    input {
+      color: @error-color;
+    }
+  }
 }
 
 @import './rtl';

components/input/__tests__/__snapshots__/demo.test.js.snap

@@ -360,6 +360,7 @@ Array [
       class="ant-input-number-handler-wrap"
     >
       <span
+        aria-disabled="false"
         aria-label="Increase Value"
         class="ant-input-number-handler ant-input-number-handler-up"
         role="button"
@@ -386,6 +387,7 @@ Array [
         </span>
       </span>
       <span
+        aria-disabled="false"
         aria-label="Decrease Value"
         class="ant-input-number-handler ant-input-number-handler-down"
         role="button"
@@ -416,12 +418,8 @@ Array [
       class="ant-input-number-input-wrap"
     >
       <input
-        aria-valuemax="9007199254740991"
-        aria-valuemin="-9007199254740991"
         autocomplete="off"
         class="ant-input-number-input"
-        max="9007199254740991"
-        min="-9007199254740991"
         role="spinbutton"
         step="1"
         value=""
@@ -1748,6 +1746,7 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
         class="ant-input-number-handler-wrap"
       >
         <span
+          aria-disabled="false"
           aria-label="Increase Value"
           class="ant-input-number-handler ant-input-number-handler-up"
           role="button"
@@ -1774,6 +1773,7 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
           </span>
         </span>
         <span
+          aria-disabled="false"
           aria-label="Decrease Value"
           class="ant-input-number-handler ant-input-number-handler-down"
           role="button"
@@ -1804,12 +1804,8 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
         class="ant-input-number-input-wrap"
       >
         <input
-          aria-valuemax="9007199254740991"
-          aria-valuemin="-9007199254740991"
           autocomplete="off"
           class="ant-input-number-input"
-          max="9007199254740991"
-          min="-9007199254740991"
           role="spinbutton"
           step="1"
           value=""

components/slider/__tests__/__snapshots__/demo.test.js.snap

@@ -311,6 +311,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
           class="ant-input-number-handler-wrap"
         >
           <span
+            aria-disabled="false"
             aria-label="Increase Value"
             class="ant-input-number-handler ant-input-number-handler-up"
             role="button"
@@ -373,8 +374,6 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
             aria-valuenow="1"
             autocomplete="off"
             class="ant-input-number-input"
-            max="20"
-            min="1"
             role="spinbutton"
             step="1"
             value="1"
@@ -428,6 +427,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
           class="ant-input-number-handler-wrap"
         >
           <span
+            aria-disabled="false"
             aria-label="Increase Value"
             class="ant-input-number-handler ant-input-number-handler-up"
             role="button"
@@ -490,8 +490,6 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
             aria-valuenow="0"
             autocomplete="off"
             class="ant-input-number-input"
-            max="1"
-            min="0"
             role="spinbutton"
             step="0.01"
             value="0.00"

package.json

@@ -126,7 +126,7 @@
     "rc-dropdown": "~3.2.0",
     "rc-field-form": "~1.19.0",
     "rc-image": "~5.2.0",
-    "rc-input-number": "~6.2.0",
+    "rc-input-number": "~7.0.0-alpha.4",
     "rc-mentions": "~1.5.0",
     "rc-menu": "~8.10.0",
     "rc-motion": "^2.4.0",
@@ -148,7 +148,7 @@
     "rc-tree-select": "~4.3.0",
     "rc-trigger": "^5.2.1",
     "rc-upload": "~3.3.4",
-    "rc-util": "^5.7.0",
+    "rc-util": "^5.8.1",
     "scroll-into-view-if-needed": "^2.2.25",
     "warning": "^4.0.3"
   },

typings/custom-typings.d.ts

@@ -34,8 +34,6 @@ declare module 'rc-tabs*';
 
 declare module 'rc-tree/lib/util';
 
-declare module 'rc-input-number';
-
 declare module 'rc-collapse';
 
 declare module 'rc-dialog';