更新 snapshot

__mocks__/svgMock.js

@@ -0,0 +1,5 @@
+const React = require('react');
+
+module.exports = React.forwardRef((props, ref) =>
+  React.createElement('icon-mock', {ref, ...props})
+);

__tests__/__snapshots__/factory.test.tsx.snap

@@ -128,6 +128,7 @@ exports[`factory:definitions 1`] = `
                         autocomplete="off"
                         name="ref1"
                         placeholder=""
+                        size="10"
                         type="text"
                         value="ref value"
                       />
@@ -190,6 +191,7 @@ exports[`factory:definitions 1`] = `
                                       autocomplete="off"
                                       name="key"
                                       placeholder=""
+                                      size="10"
                                       type="text"
                                       value=""
                                     />
@@ -216,6 +218,7 @@ exports[`factory:definitions 1`] = `
                                       autocomplete="off"
                                       name="value"
                                       placeholder=""
+                                      size="10"
                                       type="text"
                                       value="ref value"
                                     />
@@ -239,33 +242,6 @@ exports[`factory:definitions 1`] = `
                                     children
                                   </span>
                                 </label>
-                                <div
-                                  class="a-ComboControl a-Form-control"
-                                >
-                                  <div
-                                    class="a-Combo a-Combo--multi a-Combo--ver"
-                                  >
-                                    <div
-                                      class="a-Combo-items"
-                                    />
-                                    <div
-                                      class="a-Combo-toolbar"
-                                    >
-                                      <button
-                                        class="a-Button a-Combo-addBtn"
-                                        data-tooltip="新增一条数据"
-                                        type="button"
-                                      >
-                                        <i
-                                          class="a-Button-icon fa fa-plus"
-                                        />
-                                        <span>
-                                          新增
-                                        </span>
-                                      </button>
-                                    </div>
-                                  </div>
-                                </div>
                                 <div
                                   class="a-Remark a-Form-remark"
                                 >
@@ -284,8 +260,8 @@ exports[`factory:definitions 1`] = `
                               data-position="bottom"
                               data-tooltip="删除"
                             >
-                              <i
+                              <icon-mock
-                                class="glyphicon glyphicon-remove"
+                                icon="close"
                               />
                             </a>
                           </div>
@@ -323,22 +299,40 @@ exports[`factory:definitions 1`] = `
               class="resize-sensor"
               style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
             >
+              
+  
               <div
                 class="resize-sensor-expand"
                 style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
               >
+                
+    
                 <div
                   style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
                 />
+                
+  
               </div>
+              
+  
               <div
                 class="resize-sensor-shrink"
                 style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
               >
+                
+    
                 <div
                   style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
                 />
+                
+  
               </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
             </div>
           </div>
         </div>
@@ -419,6 +413,7 @@ exports[`factory:definitions override 1`] = `
                         autocomplete="off"
                         name="ref1"
                         placeholder=""
+                        size="10"
                         type="text"
                         value=""
                       />
@@ -453,7 +448,9 @@ exports[`factory:definitions override 1`] = `
                         type="checkbox"
                       />
                       <i />
-                      <span>
+                      <span
+                        class=""
+                      >
                         Option A
                       </span>
                     </label>
@@ -464,7 +461,9 @@ exports[`factory:definitions override 1`] = `
                         type="checkbox"
                       />
                       <i />
-                      <span>
+                      <span
+                        class=""
+                      >
                         Option B
                       </span>
                     </label>
@@ -483,22 +482,40 @@ exports[`factory:definitions override 1`] = `
               class="resize-sensor"
               style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
             >
+              
+  
               <div
                 class="resize-sensor-expand"
                 style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
               >
+                
+    
                 <div
                   style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
                 />
+                
+  
               </div>
+              
+  
               <div
                 class="resize-sensor-shrink"
                 style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
               >
+                
+    
                 <div
                   style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
                 />
+                
+  
               </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
             </div>
           </div>
         </div>

__tests__/factory.test.tsx

@@ -1,82 +1,94 @@
 import {
   registerRenderer,
   unRegisterRenderer,
-    RendererProps,
+  RendererProps
 } from '../src/factory';
 import '../src/themes/default';
-import {
+import {render as amisRender} from '../src/index';
-    render as amisRender
-} from '../src/index';
 import React = require('react');
 import {render, fireEvent, cleanup} from 'react-testing-library';
-import { wait, makeEnv } from './helper';
+import {wait, makeEnv} from './helper';
 
 test('factory unregistered Renderer', async () => {
-    const {
+  const {container} = render(
-        container,
+    amisRender({
-    } = render(amisRender({
       type: 'my-renderer',
       a: 23
-    }));
+    })
+  );
   await wait(100);
   expect(container).toMatchSnapshot(); // not found
 });
 
 test('factory custom not found!', async () => {
-    const {
+  const {container} = render(
-        container,
+    amisRender(
-    } = render(amisRender({
+      {
         type: 'my-renderer',
         a: 23
-    }, {}, makeEnv({
+      },
-        loadRenderer: () => Promise.resolve(() => (<div>Not Found</div>))
+      {},
-    })));
+      makeEnv({
+        loadRenderer: () => Promise.resolve(() => <div>Not Found</div>)
+      })
+    )
+  );
   await wait(100);
   expect(container).toMatchSnapshot(); // not found
 });
 
 test('factory custom not found 2!', async () => {
-    const {
+  const {container} = render(
-        container,
+    amisRender(
-    } = render(amisRender({
+      {
         type: 'my-renderer',
         a: 23
-    }, {}, makeEnv({
+      },
-        loadRenderer: () => () => (<div>Not Found</div>)
+      {},
-    })));
+      makeEnv({
+        loadRenderer: () => () => <div>Not Found</div>
+      })
+    )
+  );
   await wait(100);
   expect(container).toMatchSnapshot(); // not found
 });
 
 test('factory custom not found 3!', async () => {
-    const {
+  const {container} = render(
-        container,
+    amisRender(
-    } = render(amisRender({
+      {
         type: 'my-renderer',
         a: 23
-    }, {}, makeEnv({
+      },
-        loadRenderer: () => (<div>Not Found</div>)
+      {},
-    })));
+      makeEnv({
+        loadRenderer: () => <div>Not Found</div>
+      })
+    )
+  );
   await wait(100);
   expect(container).toMatchSnapshot(); // not found
 });
 
 test('factory load Renderer on need', async () => {
-    const {
+  const {container} = render(
-        container,
+    amisRender(
-    } = render(amisRender({
+      {
         type: 'my-renderer2',
         a: 23
-    }, {}, makeEnv({
+      },
+      {},
+      makeEnv({
         session: 'loadRenderer',
-        loadRenderer: (schema) => {
+        loadRenderer: schema => {
           interface MyProps extends RendererProps {
             a: number;
-            };
+          }
 
           class MyComponent extends React.Component<MyProps> {
             render() {
-                    return (<div>This is Custom Renderer2, a is {this.props.a}</div>);
+              return <div>This is Custom Renderer2, a is {this.props.a}</div>;
             }
           }
 
@@ -85,7 +97,9 @@ test('factory load Renderer on need', async () => {
             test: /\bmy-renderer2$/
           });
         }
-    })));
+      })
+    )
+  );
   await wait(100);
   expect(container).toMatchSnapshot(); // not found
 });
@@ -93,11 +107,11 @@ test('factory load Renderer on need', async () => {
 test('factory:registerRenderer', () => {
   interface MyProps extends RendererProps {
     a: number;
-    };
+  }
 
   class MyComponent extends React.Component<MyProps> {
     render() {
-            return (<div>This is Custom Renderer, a is {this.props.a}</div>);
+      return <div>This is Custom Renderer, a is {this.props.a}</div>;
     }
   }
 
@@ -106,22 +120,21 @@ test('factory:registerRenderer', () => {
     test: /\bmy-renderer$/
   });
 
-    const {
+  const {container} = render(
-        container
+    amisRender({
-    } = render(amisRender({
       type: 'my-renderer',
       a: 23
-    }))
+    })
+  );
 
   expect(container).toMatchSnapshot();
   unRegisterRenderer(renderer);
 });
 
-test('factory:definitions', () => {
+test('factory:definitions', async () => {
-    const {
+  const {container, getByText} = render(
-        container,
+    amisRender(
-        getByText
+      {
-    } = render(amisRender({
         definitions: {
           aa: {
             type: 'text',
@@ -174,18 +187,21 @@ test('factory:definitions', () => {
             ]
           }
         ]
-    }, {
+      },
-    }, makeEnv({
+      {},
-    })));
+      makeEnv({})
+    )
+  );
 
+  await wait(100);
   fireEvent.click(getByText('新增'));
   expect(container).toMatchSnapshot();
 });
 
 test('factory:definitions override', () => {
-    const {
+  const {container} = render(
-        container
+    amisRender(
-    } = render(amisRender({
+      {
         definitions: {
           aa: {
             type: 'text',
@@ -249,9 +265,11 @@ test('factory:definitions override', () => {
             ]
           }
         ]
-    }, {
+      },
-    }, makeEnv({
+      {},
-    })));
+      makeEnv({})
+    )
+  );
 
   expect(container).toMatchSnapshot();
 });

__tests__/renderers/Form/__snapshots__/array.test.tsx.snap

@@ -36,107 +36,6 @@ exports[`Renderer:array 1`] = `
               颜色集合
             </span>
           </label>
-          <div
-            class="a-ComboControl a-Form-control is-inline"
-          >
-            <div
-              class="a-Combo a-Combo--multi a-Combo--hor"
-            >
-              <div
-                class="a-Combo-items"
-              >
-                <div
-                  class="a-Combo-item"
-                >
-                  <div
-                    class="a-Combo-itemInner"
-                  >
-                    <div
-                      class="a-Form a-Form--row a-Combo-form"
-                      novalidate=""
-                    >
-                      <div
-                        class="a-Form-row"
-                      >
-                        <div
-                          class="a-Form-col"
-                        >
-                          <div
-                            class="a-Form-item a-Form-item--row"
-                          >
-                            <div
-                              class="a-Form-rowInner"
-                            >
-                              <div
-                                class="a-ColorControl a-Form-control"
-                              >
-                                <div
-                                  class="a-ColorPicker"
-                                >
-                                  <input
-                                    autocomplete="off"
-                                    class="a-ColorPicker-input"
-                                    placeholder="请选择颜色"
-                                    size="10"
-                                    type="text"
-                                    value="red"
-                                  />
-                                  <a
-                                    class="a-ColorPicker-clear"
-                                  >
-                                    <svg
-                                      class="icon"
-                                      p-id="1463"
-                                      version="1.1"
-                                      viewBox="0 0 1024 1024"
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-                                        data-spm-anchor-id="a313x.7781069.0.i0"
-                                        p-id="1464"
-                                      />
-                                    </svg>
-                                  </a>
-                                  <span
-                                    class="a-ColorPicker-preview"
-                                  >
-                                    <i
-                                      class="a-ColorPicker-previewIcon"
-                                      style="background: red;"
-                                    />
-                                  </span>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="a-Combo-toolbar"
-              >
-                <button
-                  class="a-Button a-Combo-addBtn"
-                  data-tooltip="新增一条数据"
-                  type="button"
-                >
-                  <i
-                    class="a-Button-icon fa fa-plus"
-                  />
-                  <span>
-                    新增
-                  </span>
-                </button>
-                <span
-                  class="a-Combo-dragableTip"
-                />
-              </div>
-            </div>
-          </div>
         </div>
       </form>
     </div>
@@ -144,22 +43,40 @@ exports[`Renderer:array 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/button.test.tsx.snap

@@ -83,22 +83,40 @@ exports[`Renderer:button 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -187,90 +205,40 @@ exports[`Renderer:button 2`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
-    </div>
+      
-  </div>
+  
       <div
-    class="amis-dialog-widget a-Modal a-Modal--1th"
+        class="resize-sensor-appear"
-    role="dialog"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
-  >
-    <div
-      class="a-Modal-overlay in"
       />
-    <div
-      class="a-Modal-content in"
-    >
-      <div
-        class="a-Modal-header"
-      >
-        <a
-          class="a-Modal-close"
-          data-tooltip="关闭弹窗"
-        >
-          <svg
-            class="icon"
-            p-id="1463"
-            version="1.1"
-            viewBox="0 0 1024 1024"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-              data-spm-anchor-id="a313x.7781069.0.i0"
-              p-id="1464"
-            />
-          </svg>
-        </a>
-        <div
-          class="a-Modal-title"
-        >
-          提示
-        </div>
-      </div>
-      <div
-        class="a-Modal-body"
-      >
-        <span
-          class="a-TplField"
-        >
-          对，你刚点击了！
-        </span>
-      </div>
-      <div
-        class="a-Modal-footer"
-      >
-        <button
-          class="a-Button a-Button--default"
-          type="button"
-        >
-          <span>
-            取消
-          </span>
-        </button>
-        <button
-          class="a-Button a-Button--primary"
-          type="button"
-        >
-          <span>
-            确认
-          </span>
-        </button>
-      </div>
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/buttonGroup.test.tsx.snap

@@ -95,22 +95,40 @@ exports[`Renderer:button-group 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -196,7 +214,11 @@ exports[`Renderer:button-group:multiple clearable 1`] = `
               <span
                 class="a-TplField"
               >
-                a,b
+                <span
+                  class="text-muted"
+                >
+                  -
+                </span>
               </span>
             </div>
           </div>
@@ -207,22 +229,40 @@ exports[`Renderer:button-group:multiple clearable 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -308,7 +348,11 @@ exports[`Renderer:button-group:multiple clearable 2`] = `
               <span
                 class="a-TplField"
               >
-                a
+                <span
+                  class="text-muted"
+                >
+                  -
+                </span>
               </span>
             </div>
           </div>
@@ -319,22 +363,40 @@ exports[`Renderer:button-group:multiple clearable 2`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/buttonToolBar.test.tsx.snap

@@ -64,22 +64,40 @@ exports[`Renderer:button-toolbar 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -149,90 +167,40 @@ exports[`Renderer:button-toolbar 2`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
-    </div>
+      
-  </div>
+  
       <div
-    class="amis-dialog-widget a-Modal a-Modal--1th"
+        class="resize-sensor-appear"
-    role="dialog"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
-  >
-    <div
-      class="a-Modal-overlay in"
       />
-    <div
-      class="a-Modal-content in"
-    >
-      <div
-        class="a-Modal-header"
-      >
-        <a
-          class="a-Modal-close"
-          data-tooltip="关闭弹窗"
-        >
-          <svg
-            class="icon"
-            p-id="1463"
-            version="1.1"
-            viewBox="0 0 1024 1024"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-              data-spm-anchor-id="a313x.7781069.0.i0"
-              p-id="1464"
-            />
-          </svg>
-        </a>
-        <div
-          class="a-Modal-title"
-        >
-          提示
-        </div>
-      </div>
-      <div
-        class="a-Modal-body"
-      >
-        <span
-          class="a-TplField"
-        >
-          对，你刚点击了！
-        </span>
-      </div>
-      <div
-        class="a-Modal-footer"
-      >
-        <button
-          class="a-Button a-Button--default"
-          type="button"
-        >
-          <span>
-            取消
-          </span>
-        </button>
-        <button
-          class="a-Button a-Button--primary"
-          type="button"
-        >
-          <span>
-            确认
-          </span>
-        </button>
-      </div>
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/checkbox.test.tsx.snap

@@ -46,7 +46,9 @@ exports[`Renderer:checkbox 1`] = `
                 type="checkbox"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 <span
                   class="a-TplField"
                 >
@@ -62,22 +64,40 @@ exports[`Renderer:checkbox 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/checkboxes.test.tsx.snap

@@ -46,7 +46,9 @@ exports[`Renderer:checkboxes 1`] = `
                 type="checkbox"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option A
               </span>
             </label>
@@ -57,7 +59,9 @@ exports[`Renderer:checkboxes 1`] = `
                 type="checkbox"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option B
               </span>
             </label>
@@ -68,7 +72,9 @@ exports[`Renderer:checkboxes 1`] = `
                 type="checkbox"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option C
               </span>
             </label>
@@ -79,7 +85,9 @@ exports[`Renderer:checkboxes 1`] = `
                 type="checkbox"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option D
               </span>
             </label>
@@ -119,22 +127,40 @@ exports[`Renderer:checkboxes 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -186,7 +212,9 @@ exports[`Renderer:checkboxes 2`] = `
                 type="checkbox"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option A
               </span>
             </label>
@@ -197,7 +225,9 @@ exports[`Renderer:checkboxes 2`] = `
                 type="checkbox"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option B
               </span>
             </label>
@@ -208,7 +238,9 @@ exports[`Renderer:checkboxes 2`] = `
                 type="checkbox"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option C
               </span>
             </label>
@@ -219,7 +251,9 @@ exports[`Renderer:checkboxes 2`] = `
                 type="checkbox"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option D
               </span>
             </label>
@@ -259,22 +293,40 @@ exports[`Renderer:checkboxes 2`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/city.test.tsx.snap

@@ -110,22 +110,40 @@ exports[`Renderer:city 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/color.test.tsx.snap

@@ -53,19 +53,10 @@ exports[`Renderer:color 1`] = `
               <a
                 class="a-ColorPicker-clear"
               >
-                <svg
+                <icon-mock
-                  class="icon"
+                  classname="icon"
-                  p-id="1463"
+                  icon="close"
-                  version="1.1"
-                  viewBox="0 0 1024 1024"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-                    data-spm-anchor-id="a313x.7781069.0.i0"
-                    p-id="1464"
                 />
-                </svg>
               </a>
               <span
                 class="a-ColorPicker-preview"
@@ -84,22 +75,40 @@ exports[`Renderer:color 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/container.test.tsx.snap

@@ -51,7 +51,9 @@ exports[`Renderer:container 1`] = `
                   <label
                     class="a-Form-label a-Form-itemColumn--normal"
                   >
-                    <span />
+                    <span>
+                      
+                    </span>
                   </label>
                   <div
                     class="a-Form-value a-Form-itemColumn--7"
@@ -66,6 +68,7 @@ exports[`Renderer:container 1`] = `
                           autocomplete="off"
                           name="text"
                           placeholder=""
+                          size="10"
                           type="text"
                           value=""
                         />
@@ -95,22 +98,40 @@ exports[`Renderer:container 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/date.test.tsx.snap

@@ -51,19 +51,10 @@ exports[`Renderer:date 1`] = `
               <a
                 class="a-DatePicker-clear"
               >
-                <svg
+                <icon-mock
-                  class="icon"
+                  classname="icon"
-                  p-id="1463"
+                  icon="close"
-                  version="1.1"
-                  viewBox="0 0 1024 1024"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-                    data-spm-anchor-id="a313x.7781069.0.i0"
-                    p-id="1464"
                 />
-                </svg>
               </a>
               <a
                 class="a-DatePicker-toggler"
@@ -77,22 +68,40 @@ exports[`Renderer:date 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/dateRang.test.tsx.snap

@@ -51,19 +51,10 @@ exports[`Renderer:dateRange 1`] = `
               <a
                 class="a-DateRangePicker-clear"
               >
-                <svg
+                <icon-mock
-                  class="icon"
+                  classname="icon"
-                  p-id="1463"
+                  icon="close"
-                  version="1.1"
-                  viewBox="0 0 1024 1024"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-                    data-spm-anchor-id="a313x.7781069.0.i0"
-                    p-id="1464"
                 />
-                </svg>
               </a>
               <a
                 class="a-DateRangePicker-toggler"
@@ -81,22 +72,40 @@ exports[`Renderer:dateRange 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/datetime.test.tsx.snap

@@ -51,19 +51,10 @@ exports[`Renderer:date 1`] = `
               <a
                 class="a-DatePicker-clear"
               >
-                <svg
+                <icon-mock
-                  class="icon"
+                  classname="icon"
-                  p-id="1463"
+                  icon="close"
-                  version="1.1"
-                  viewBox="0 0 1024 1024"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-                    data-spm-anchor-id="a313x.7781069.0.i0"
-                    p-id="1464"
                 />
-                </svg>
               </a>
               <a
                 class="a-DatePicker-toggler"
@@ -77,22 +68,40 @@ exports[`Renderer:date 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/fieldSet.test.tsx.snap

@@ -30,7 +30,7 @@ exports[`Renderer:fieldSet 1`] = `
           class="a-Collapse a-Collapse--collapsable no-border"
         >
           <div
-            class="a-Collapse-body bg-white collapse in"
+            class="a-Collapse-content a-Collapse-body bg-white"
           >
             <div
               class="a-Form--horizontal"
@@ -41,7 +41,9 @@ exports[`Renderer:fieldSet 1`] = `
                 <label
                   class="a-Form-label a-Form-itemColumn--normal"
                 >
-                  <span />
+                  <span>
+                    
+                  </span>
                 </label>
                 <div
                   class="a-Form-value a-Form-itemColumn--7"
@@ -56,6 +58,7 @@ exports[`Renderer:fieldSet 1`] = `
                         autocomplete="off"
                         name="text"
                         placeholder=""
+                        size="10"
                         type="text"
                         value=""
                       />
@@ -72,22 +75,40 @@ exports[`Renderer:fieldSet 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/formula.test.tsx.snap

@@ -337,22 +337,40 @@ exports[`Renderer:formula 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/grid.test.tsx.snap

@@ -51,6 +51,7 @@ exports[`Renderer:hbox 1`] = `
                         autocomplete="off"
                         name="text"
                         placeholder="Text"
+                        size="10"
                         type="text"
                         value=""
                       />
@@ -76,22 +77,40 @@ exports[`Renderer:hbox 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/group.test.tsx.snap

@@ -55,6 +55,7 @@ exports[`Renderer:group 1`] = `
                       autocomplete="off"
                       name="test1"
                       placeholder="Placeholder"
+                      size="10"
                       type="text"
                       value=""
                     />
@@ -89,6 +90,7 @@ exports[`Renderer:group 1`] = `
                       autocomplete="off"
                       name="test2"
                       placeholder="Placeholder"
+                      size="10"
                       type="text"
                       value=""
                     />
@@ -124,6 +126,7 @@ exports[`Renderer:group 1`] = `
                     autocomplete="off"
                     name="test1"
                     placeholder="Placeholder"
+                    size="10"
                     type="text"
                     value=""
                   />
@@ -154,6 +157,7 @@ exports[`Renderer:group 1`] = `
                     autocomplete="off"
                     name="test2"
                     placeholder="Placeholder"
+                    size="10"
                     type="text"
                     value=""
                   />
@@ -185,6 +189,7 @@ exports[`Renderer:group 1`] = `
                   autocomplete="off"
                   name="test1"
                   placeholder="Placeholder"
+                  size="10"
                   type="text"
                   value=""
                 />
@@ -211,6 +216,7 @@ exports[`Renderer:group 1`] = `
                   autocomplete="off"
                   name="test2"
                   placeholder="Placeholder"
+                  size="10"
                   type="text"
                   value=""
                 />
@@ -224,22 +230,40 @@ exports[`Renderer:group 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/hbox.test.tsx.snap

@@ -51,6 +51,7 @@ exports[`Renderer:hbox 1`] = `
                         autocomplete="off"
                         name="text"
                         placeholder="Text"
+                        size="10"
                         type="text"
                         value=""
                       />
@@ -76,22 +77,40 @@ exports[`Renderer:hbox 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/iconPicker.test.tsx.snap

@@ -63,6 +63,7 @@ exports[`Renderer:icon-picker 1`] = `
                   autocomplete="off"
                   id="downshift-0-input"
                   name="a"
+                  size="10"
                   value=""
                 />
               </div>
@@ -75,22 +76,40 @@ exports[`Renderer:icon-picker 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/index.test.tsx.snap

@@ -46,6 +46,7 @@ exports[`Renderer:Form 1`] = `
                 autocomplete="off"
                 name="a"
                 placeholder=""
+                size="10"
                 type="text"
                 value="123"
               />
@@ -72,22 +73,40 @@ exports[`Renderer:Form 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -135,6 +154,12 @@ exports[`Renderer:Form initApi 1`] = `
         class="a-Form a-Form--normal"
         novalidate=""
       >
+        <div
+          class="a-Spinner-overlay"
+        />
+        <div
+          class="a-Spinner a-Spinner--overlay"
+        />
         <div
           class="a-Form-item a-Form-item--normal"
         >
@@ -155,6 +180,7 @@ exports[`Renderer:Form initApi 1`] = `
                 autocomplete="off"
                 name="a"
                 placeholder=""
+                size="10"
                 type="text"
                 value="1"
               />
@@ -181,6 +207,7 @@ exports[`Renderer:Form initApi 1`] = `
                 autocomplete="off"
                 name="b"
                 placeholder=""
+                size="10"
                 type="text"
                 value="2"
               />
@@ -207,22 +234,40 @@ exports[`Renderer:Form initApi 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -254,6 +299,12 @@ exports[`Renderer:Form sendOn:true 1`] = `
         class="a-Form a-Form--normal"
         novalidate=""
       >
+        <div
+          class="a-Spinner-overlay"
+        />
+        <div
+          class="a-Spinner a-Spinner--overlay"
+        />
         <div
           class="a-Form-item a-Form-item--normal"
         >
@@ -274,6 +325,7 @@ exports[`Renderer:Form sendOn:true 1`] = `
                 autocomplete="off"
                 name="a"
                 placeholder=""
+                size="10"
                 type="text"
                 value="1"
               />
@@ -300,6 +352,7 @@ exports[`Renderer:Form sendOn:true 1`] = `
                 autocomplete="off"
                 name="b"
                 placeholder=""
+                size="10"
                 type="text"
                 value="2"
               />
@@ -326,22 +379,40 @@ exports[`Renderer:Form sendOn:true 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -393,6 +464,7 @@ exports[`Renderer:Form:onValidate 1`] = `
                 autocomplete="off"
                 name="a"
                 placeholder=""
+                size="10"
                 type="text"
                 value="1"
               />
@@ -426,6 +498,7 @@ exports[`Renderer:Form:onValidate 1`] = `
                 autocomplete="off"
                 name="b"
                 placeholder=""
+                size="10"
                 type="text"
                 value="2"
               />
@@ -462,22 +535,40 @@ exports[`Renderer:Form:onValidate 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -536,6 +627,7 @@ exports[`Renderer:Form:onValidate 3`] = `
                 autocomplete="off"
                 name="a"
                 placeholder=""
+                size="10"
                 type="text"
                 value="1"
               />
@@ -562,6 +654,7 @@ exports[`Renderer:Form:onValidate 3`] = `
                 autocomplete="off"
                 name="b"
                 placeholder=""
+                size="10"
                 type="text"
                 value="2"
               />
@@ -588,22 +681,40 @@ exports[`Renderer:Form:onValidate 3`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -642,6 +753,12 @@ exports[`Renderer:Form:remoteValidate 1`] = `
         class="a-Form a-Form--normal"
         novalidate=""
       >
+        <div
+          class="a-Spinner-overlay"
+        />
+        <div
+          class="a-Spinner a-Spinner--overlay"
+        />
         <div
           class="a-Form-item a-Form-item--normal is-error"
         >
@@ -662,6 +779,7 @@ exports[`Renderer:Form:remoteValidate 1`] = `
                 autocomplete="off"
                 name="a"
                 placeholder=""
+                size="10"
                 type="text"
                 value=""
               />
@@ -695,22 +813,40 @@ exports[`Renderer:Form:remoteValidate 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -767,6 +903,7 @@ exports[`Renderer:Form:valdiate 1`] = `
                 autocomplete="off"
                 name="a"
                 placeholder=""
+                size="10"
                 type="text"
                 value=""
               />
@@ -801,22 +938,40 @@ exports[`Renderer:Form:valdiate 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -873,6 +1028,7 @@ exports[`Renderer:Form:valdiate 2`] = `
                 autocomplete="off"
                 name="a"
                 placeholder=""
+                size="10"
                 type="text"
                 value="123"
               />
@@ -899,22 +1055,40 @@ exports[`Renderer:Form:valdiate 2`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/inputGroup.test.tsx.snap

@@ -49,6 +49,7 @@ exports[`Renderer:fieldSet 1`] = `
                   autocomplete="off"
                   name="text"
                   placeholder=""
+                  size="10"
                   type="text"
                   value=""
                 />
@@ -62,22 +63,40 @@ exports[`Renderer:fieldSet 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/list.test.tsx.snap

@@ -86,22 +86,40 @@ exports[`Renderer:list 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -189,7 +207,11 @@ exports[`Renderer:list:multiple clearable 1`] = `
               <span
                 class="a-TplField"
               >
-                a,b
+                <span
+                  class="text-muted"
+                >
+                  -
+                </span>
               </span>
             </div>
           </div>
@@ -200,22 +222,40 @@ exports[`Renderer:list:multiple clearable 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -303,7 +343,11 @@ exports[`Renderer:list:multiple clearable 2`] = `
               <span
                 class="a-TplField"
               >
-                a
+                <span
+                  class="text-muted"
+                >
+                  -
+                </span>
               </span>
             </div>
           </div>
@@ -314,22 +358,40 @@ exports[`Renderer:list:multiple clearable 2`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/number.test.tsx.snap

@@ -93,22 +93,40 @@ exports[`Renderer:number 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/panel.test.tsx.snap

@@ -85,22 +85,40 @@ exports[`Renderer:panel 1`] = `
                     class="resize-sensor"
                     style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
                   >
+                    
+  
                     <div
                       class="resize-sensor-expand"
                       style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
                     >
+                      
+    
                       <div
                         style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
                       />
+                      
+  
                     </div>
+                    
+  
                     <div
                       class="resize-sensor-shrink"
                       style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
                     >
+                      
+    
                       <div
                         style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
                       />
+                      
+  
                     </div>
+                    
+  
+                    <div
+                      class="resize-sensor-appear"
+                      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+                    />
                   </div>
                 </div>
               </div>
@@ -124,6 +142,9 @@ exports[`Renderer:panel 1`] = `
                       </span>
                     </h3>
                   </div>
+                  <div
+                    class="a-Panel-body"
+                  >
                     <div
                       class="a-Form--normal"
                     >
@@ -140,6 +161,7 @@ exports[`Renderer:panel 1`] = `
                               autocomplete="off"
                               name="text"
                               placeholder="Text 1"
+                              size="10"
                               type="text"
                               value=""
                             />
@@ -159,6 +181,7 @@ exports[`Renderer:panel 1`] = `
                               autocomplete="off"
                               name="text2"
                               placeholder="Text 2"
+                              size="10"
                               type="text"
                               value=""
                             />
@@ -166,26 +189,45 @@ exports[`Renderer:panel 1`] = `
                         </div>
                       </div>
                     </div>
+                  </div>
                   <div
                     class="resize-sensor"
                     style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
                   >
+                    
+  
                     <div
                       class="resize-sensor-expand"
                       style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
                     >
+                      
+    
                       <div
                         style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
                       />
+                      
+  
                     </div>
+                    
+  
                     <div
                       class="resize-sensor-shrink"
                       style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
                     >
+                      
+    
                       <div
                         style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
                       />
+                      
+  
                     </div>
+                    
+  
+                    <div
+                      class="resize-sensor-appear"
+                      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+                    />
                   </div>
                 </div>
               </div>
@@ -198,22 +240,40 @@ exports[`Renderer:panel 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/radios.test.tsx.snap

@@ -46,7 +46,9 @@ exports[`Renderer:radios 1`] = `
                 type="radio"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option A
               </span>
             </label>
@@ -57,7 +59,9 @@ exports[`Renderer:radios 1`] = `
                 type="radio"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option B
               </span>
             </label>
@@ -68,7 +72,9 @@ exports[`Renderer:radios 1`] = `
                 type="radio"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option C
               </span>
             </label>
@@ -79,7 +85,9 @@ exports[`Renderer:radios 1`] = `
                 type="radio"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option D
               </span>
             </label>
@@ -119,22 +127,40 @@ exports[`Renderer:radios 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -186,7 +212,9 @@ exports[`Renderer:radios 2`] = `
                 type="radio"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option A
               </span>
             </label>
@@ -197,7 +225,9 @@ exports[`Renderer:radios 2`] = `
                 type="radio"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option B
               </span>
             </label>
@@ -208,7 +238,9 @@ exports[`Renderer:radios 2`] = `
                 type="radio"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option C
               </span>
             </label>
@@ -219,7 +251,9 @@ exports[`Renderer:radios 2`] = `
                 type="radio"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option D
               </span>
             </label>
@@ -259,22 +293,40 @@ exports[`Renderer:radios 2`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/range.test.tsx.snap

@@ -115,19 +115,10 @@ exports[`Renderer:number 1`] = `
             <a
               class="a-InputRange-clear is-active"
             >
-              <svg
+              <icon-mock
-                class="icon"
+                classname="icon"
-                p-id="1463"
+                icon="close"
-                version="1.1"
-                viewBox="0 0 1024 1024"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-                  data-spm-anchor-id="a313x.7781069.0.i0"
-                  p-id="1464"
               />
-              </svg>
             </a>
           </div>
         </div>
@@ -137,22 +128,40 @@ exports[`Renderer:number 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -307,19 +316,10 @@ exports[`Renderer:range:multiple 1`] = `
             <a
               class="a-InputRange-clear is-active"
             >
-              <svg
+              <icon-mock
-                class="icon"
+                classname="icon"
-                p-id="1463"
+                icon="close"
-                version="1.1"
-                viewBox="0 0 1024 1024"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-                  data-spm-anchor-id="a313x.7781069.0.i0"
-                  p-id="1464"
               />
-              </svg>
             </a>
           </div>
         </div>
@@ -329,22 +329,40 @@ exports[`Renderer:range:multiple 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/rating.test.tsx.snap

@@ -86,22 +86,40 @@ exports[`Renderer:rating 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/repeat.test.tsx.snap

@@ -116,7 +116,7 @@ exports[`Renderer:repeat 1`] = `
                   aria-haspopup="listbox"
                   aria-labelledby="downshift-0-label"
                   aria-owns="downshift-0-menu"
-                  class="a-Select is-opened pull-right"
+                  class="a-Select is-opened pull-right has-popover"
                   role="combobox"
                   tabindex="0"
                 >
@@ -133,8 +133,12 @@ exports[`Renderer:repeat 1`] = `
                     class="a-Select-arrow"
                   />
                   <div
-                    class="a-Select-menuOuter"
+                    class="a-PopOver a-Select-popover a-PopOver--leftBottomLeftTop"
+                    style="display: block; min-width: 0; left: 0px; top: 0px;"
                   >
+                    <div
+                      class="a-PopOver-overlay"
+                    />
                     <div
                       class="a-Select-menu"
                     >
@@ -144,7 +148,9 @@ exports[`Renderer:repeat 1`] = `
                         id="downshift-0-item-0"
                         role="option"
                       >
+                        <span>
                           不重复
+                        </span>
                       </div>
                       <div
                         aria-selected="false"
@@ -152,7 +158,9 @@ exports[`Renderer:repeat 1`] = `
                         id="downshift-0-item-1"
                         role="option"
                       >
+                        <span>
                           秒
+                        </span>
                       </div>
                       <div
                         aria-selected="false"
@@ -160,7 +168,9 @@ exports[`Renderer:repeat 1`] = `
                         id="downshift-0-item-2"
                         role="option"
                       >
+                        <span>
                           分
+                        </span>
                       </div>
                       <div
                         aria-selected="false"
@@ -168,7 +178,9 @@ exports[`Renderer:repeat 1`] = `
                         id="downshift-0-item-3"
                         role="option"
                       >
+                        <span>
                           时
+                        </span>
                       </div>
                       <div
                         aria-selected="false"
@@ -176,7 +188,9 @@ exports[`Renderer:repeat 1`] = `
                         id="downshift-0-item-4"
                         role="option"
                       >
+                        <span>
                           天
+                        </span>
                       </div>
                       <div
                         aria-selected="false"
@@ -184,7 +198,9 @@ exports[`Renderer:repeat 1`] = `
                         id="downshift-0-item-5"
                         role="option"
                       >
+                        <span>
                           周中
+                        </span>
                       </div>
                       <div
                         aria-selected="false"
@@ -192,7 +208,9 @@ exports[`Renderer:repeat 1`] = `
                         id="downshift-0-item-6"
                         role="option"
                       >
+                        <span>
                           周
+                        </span>
                       </div>
                       <div
                         aria-selected="false"
@@ -200,7 +218,9 @@ exports[`Renderer:repeat 1`] = `
                         id="downshift-0-item-7"
                         role="option"
                       >
+                        <span>
                           月
+                        </span>
                       </div>
                       <div
                         aria-selected="false"
@@ -208,7 +228,9 @@ exports[`Renderer:repeat 1`] = `
                         id="downshift-0-item-8"
                         role="option"
                       >
+                        <span>
                           年
+                        </span>
                       </div>
                     </div>
                   </div>
@@ -223,22 +245,40 @@ exports[`Renderer:repeat 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/service.test.tsx.snap

@@ -98,6 +98,7 @@ exports[`Renderer:service 1`] = `
                     autocomplete="off"
                     name="dy_1"
                     placeholder=""
+                    size="10"
                     type="text"
                     value=""
                   />
@@ -124,6 +125,7 @@ exports[`Renderer:service 1`] = `
                     autocomplete="off"
                     name="dy_2"
                     placeholder=""
+                    size="10"
                     type="text"
                     value=""
                   />
@@ -131,6 +133,12 @@ exports[`Renderer:service 1`] = `
               </div>
             </div>
           </div>
+          <div
+            class="a-Spinner-overlay"
+          />
+          <div
+            class="a-Spinner a-Spinner--overlay a-Spinner--lg"
+          />
         </div>
       </form>
     </div>
@@ -138,22 +146,40 @@ exports[`Renderer:service 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/static.test.tsx.snap

@@ -103,22 +103,40 @@ exports[`Renderer:static 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/switch.test.tsx.snap

@@ -61,22 +61,40 @@ exports[`Renderer:switch 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/tabs.test.tsx.snap

@@ -28,51 +28,33 @@ exports[`Renderer:tabs 1`] = `
       >
         <div
           class="a-Tabs"
-          id="0"
         >
           <ul
-            class="a-Tabs-links nav"
+            class="a-Tabs-links"
             role="tablist"
           >
             <li
-              class="a-Tabs-link active"
+              class="a-Tabs-link is-active"
-              role="presentation"
-            >
-              <a
-                aria-controls="0-pane-0"
-                aria-selected="true"
-                href="#"
-                id="0-tab-0"
-                role="tab"
             >
+              <a>
+                 
                 基本配置
               </a>
             </li>
             <li
               class="a-Tabs-link"
-              role="presentation"
-            >
-              <a
-                aria-controls="0-pane-1"
-                aria-selected="false"
-                href="#"
-                id="0-tab-1"
-                role="tab"
-                tabindex="-1"
             >
+              <a>
+                 
                 其他配置
               </a>
             </li>
           </ul>
           <div
-            class="a-Tabs-content tab-content"
+            class="a-Tabs-content"
           >
             <div
-              aria-hidden="false"
+              class="in is-active a-Tabs-pane"
-              aria-labelledby="0-tab-0"
-              class="fade tab-pane active in"
-              id="0-pane-0"
-              role="tabpanel"
             >
               <span
                 class="a-TplField"
@@ -83,11 +65,7 @@ exports[`Renderer:tabs 1`] = `
               </span>
             </div>
             <div
-              aria-hidden="true"
+              class="a-Tabs-pane"
-              aria-labelledby="0-tab-1"
-              class="fade tab-pane"
-              id="0-pane-1"
-              role="tabpanel"
             >
               <div
                 class="a-Form--normal"
@@ -112,6 +90,7 @@ exports[`Renderer:tabs 1`] = `
                         autocomplete="off"
                         name="c"
                         placeholder=""
+                        size="10"
                         type="text"
                         value=""
                       />
@@ -138,6 +117,7 @@ exports[`Renderer:tabs 1`] = `
                         autocomplete="off"
                         name="d"
                         placeholder=""
+                        size="10"
                         type="text"
                         value=""
                       />
@@ -154,22 +134,40 @@ exports[`Renderer:tabs 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/testarea.test.tsx.snap

@@ -52,22 +52,40 @@ exports[`Renderer:textarea 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/Form/__snapshots__/time.test.tsx.snap

@@ -51,19 +51,10 @@ exports[`Renderer:time 1`] = `
               <a
                 class="a-DatePicker-clear"
               >
-                <svg
+                <icon-mock
-                  class="icon"
+                  classname="icon"
-                  p-id="1463"
+                  icon="close"
-                  version="1.1"
-                  viewBox="0 0 1024 1024"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-                    data-spm-anchor-id="a313x.7781069.0.i0"
-                    p-id="1464"
                 />
-                </svg>
               </a>
               <a
                 class="a-DatePicker-toggler"
@@ -77,22 +68,40 @@ exports[`Renderer:time 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>

__tests__/renderers/__snapshots__/Carousel.test.tsx.snap

@@ -82,30 +82,18 @@ exports[`Renderer:carousel 1`] = `
         <div
           class="a-Carousel-leftArrow"
         >
-          <svg
+          <icon-mock
-            class="icon"
+            classname="icon"
-            version="1.1"
+            icon="left-arrow"
-            viewBox="0 0 1024 1024"
-          >
-            <path
-              d="M324.211517 511.805631 787.889594 73.082583c16.19422-16.630365 16.19422-43.974704 0-60.605068-16.19422-16.630365-42.495607-16.630365-58.613976 0L235.750113 479.360302c-8.647031 8.969398-12.344775 20.934917-11.719003 32.445329-0.644735 11.90863 3.071972 23.874149 11.719003 32.824585l493.506542 466.882788c16.118369 16.649327 42.438718 16.649327 58.613976 0 16.19422-17.085471 16.19422-43.974704 0-60.605068L324.211517 511.805631"
-              p-id="2160"
           />
-          </svg>
         </div>
         <div
           class="a-Carousel-rightArrow"
         >
-          <svg
+          <icon-mock
-            class="icon"
+            classname="icon"
-            version="1.1"
+            icon="right-arrow"
-            viewBox="0 0 1024 1024"
-          >
-            <path
-              d="M311.559054 1013.77369L767.908116 512.684524 311.559054 12.234501a31.318073 31.318073 0 1 0-46.657538 41.544383L679.706197 512.684524 267.458094 969.672731a31.318073 31.318073 0 0 0 46.018393 42.183526z"
-              p-id="1981"
           />
-          </svg>
         </div>
       </div>
     </div>

__tests__/renderers/__snapshots__/Image.test.tsx.snap

@@ -4,24 +4,27 @@ exports[`Renderer:image 1`] = `
 <div>
   <div
     class="a-ImageField show"
+  >
+    <div
+      class="a-Image"
+    >
+      <div
+        class="a-Image-thumb a-Image-thumb--contain a-Image-thumb--1-1"
       >
         <img
           class="b"
           src="https://www.baidu.com/img/bd_logo1.png"
         />
+      </div>
       <div
-      class="a-ImageField-caption"
+        class="a-Image-info"
       >
         <div
-        class="text-md"
+          class="a-Image-title"
         >
           图片
         </div>
-      <span
+      </div>
-        class="a-TplField"
-      >
-        图片描述
-      </span>
     </div>
   </div>
 </div>

__tests__/renderers/__snapshots__/Page.test.tsx.snap

@@ -27,13 +27,13 @@ exports[`Renderer:Page 1`] = `
             </span>
             <div
               className="a-Remark a-Remark--warning"
+            >
+              <i
+                className="a-Remark-icon fa fa-question-circle"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
-            >
-              <i
-                className="a-Remark-icon fa fa-question-circle"
               />
             </div>
           </h2>
@@ -107,13 +107,13 @@ exports[`Renderer:Page classNames 1`] = `
             </span>
             <div
               className="a-Remark a-Remark--warning"
+            >
+              <i
+                className="a-Remark-icon fa fa-question-circle"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
-            >
-              <i
-                className="a-Remark-icon fa fa-question-circle"
               />
             </div>
           </h2>
@@ -177,6 +177,12 @@ exports[`Renderer:Page handleAction actionType=ajax & feedback 1`] = `
         <div
           class="a-Page-body"
         >
+          <div
+            class="a-Spinner-overlay"
+          />
+          <div
+            class="a-Spinner a-Spinner--overlay a-Spinner--lg"
+          />
           <span
             class="a-TplField"
           >
@@ -186,74 +192,6 @@ exports[`Renderer:Page handleAction actionType=ajax & feedback 1`] = `
       </div>
     </div>
   </div>
-  <div
-    class="amis-dialog-widget a-Modal a-Modal--1th"
-    role="dialog"
-  >
-    <div
-      class="a-Modal-overlay in"
-    />
-    <div
-      class="a-Modal-content in"
-    >
-      <div
-        class="a-Modal-header"
-      >
-        <a
-          class="a-Modal-close"
-          data-tooltip="关闭弹窗"
-        >
-          <svg
-            class="icon"
-            p-id="1463"
-            version="1.1"
-            viewBox="0 0 1024 1024"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-              data-spm-anchor-id="a313x.7781069.0.i0"
-              p-id="1464"
-            />
-          </svg>
-        </a>
-        <div
-          class="a-Modal-title"
-        >
-          弹框
-        </div>
-      </div>
-      <div
-        class="a-Modal-body"
-      >
-        <span
-          class="a-TplField"
-        >
-          this is feedback
-        </span>
-      </div>
-      <div
-        class="a-Modal-footer"
-      >
-        <button
-          class="a-Button a-Button--default"
-          type="button"
-        >
-          <span>
-            取消
-          </span>
-        </button>
-        <button
-          class="a-Button a-Button--primary"
-          type="button"
-        >
-          <span>
-            确认
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
 </div>
 `;
 
@@ -321,6 +259,12 @@ exports[`Renderer:Page handleAction actionType=ajax 1`] = `
         <div
           class="a-Page-body"
         >
+          <div
+            class="a-Spinner-overlay"
+          />
+          <div
+            class="a-Spinner a-Spinner--overlay a-Spinner--lg"
+          />
           <span
             class="a-TplField"
           >
@@ -362,74 +306,6 @@ exports[`Renderer:Page handleAction actionType=dialog 1`] = `
       </div>
     </div>
   </div>
-  <div
-    class="amis-dialog-widget a-Modal a-Modal--1th"
-    role="dialog"
-  >
-    <div
-      class="a-Modal-overlay in"
-    />
-    <div
-      class="a-Modal-content in"
-    >
-      <div
-        class="a-Modal-header"
-      >
-        <a
-          class="a-Modal-close"
-          data-tooltip="关闭弹窗"
-        >
-          <svg
-            class="icon"
-            p-id="1463"
-            version="1.1"
-            viewBox="0 0 1024 1024"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-              data-spm-anchor-id="a313x.7781069.0.i0"
-              p-id="1464"
-            />
-          </svg>
-        </a>
-        <div
-          class="a-Modal-title"
-        >
-          弹框
-        </div>
-      </div>
-      <div
-        class="a-Modal-body"
-      >
-        <span
-          class="a-TplField"
-        >
-          this is dialog
-        </span>
-      </div>
-      <div
-        class="a-Modal-footer"
-      >
-        <button
-          class="a-Button a-Button--default"
-          type="button"
-        >
-          <span>
-            取消
-          </span>
-        </button>
-        <button
-          class="a-Button a-Button--primary"
-          type="button"
-        >
-          <span>
-            确认
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
 </div>
 `;
 
@@ -500,96 +376,6 @@ exports[`Renderer:Page handleAction actionType=dialog mergeData 1`] = `
       </div>
     </div>
   </div>
-  <div
-    class="amis-dialog-widget a-Modal a-Modal--1th"
-    role="dialog"
-  >
-    <div
-      class="a-Modal-overlay in"
-    />
-    <div
-      class="a-Modal-content in"
-    >
-      <div
-        class="a-Modal-header"
-      >
-        <a
-          class="a-Modal-close"
-          data-tooltip="关闭弹窗"
-        >
-          <svg
-            class="icon"
-            p-id="1463"
-            version="1.1"
-            viewBox="0 0 1024 1024"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-              data-spm-anchor-id="a313x.7781069.0.i0"
-              p-id="1464"
-            />
-          </svg>
-        </a>
-        <div
-          class="a-Modal-title"
-        >
-          弹框
-        </div>
-      </div>
-      <div
-        class="a-Modal-body"
-      >
-        <form
-          class="a-Form a-Form--horizontal"
-          novalidate=""
-        >
-          <div
-            class="a-Form-item a-Form-item--horizontal"
-          >
-            <label
-              class="a-Form-label a-Form-itemColumn--2"
-            >
-              <span>
-                A
-              </span>
-            </label>
-            <div
-              class="a-Form-value"
-            >
-              <div
-                class="a-Form-control a-TextControl"
-              >
-                <div
-                  class="a-TextControl-input"
-                >
-                  <input
-                    autocomplete="off"
-                    name="a"
-                    placeholder=""
-                    type="text"
-                    value="3"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div
-        class="a-Modal-footer"
-      >
-        <button
-          class="a-Button a-Button--default"
-          type="submit"
-        >
-          <span>
-            确认
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
 </div>
 `;
 
@@ -660,67 +446,6 @@ exports[`Renderer:Page handleAction actionType=drawer 1`] = `
       </div>
     </div>
   </div>
-  <div
-    class="amis-dialog-widget a-Drawer a-Drawer--right a-Drawer--md a-Modal--1th"
-    role="dialog"
-  >
-    <div
-      class="a-Drawer-overlay in"
-    />
-    <div
-      class="a-Drawer-content in"
-    >
-      <a
-        class="a-Drawer-close"
-      >
-        <svg
-          class="icon"
-          p-id="1463"
-          version="1.1"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-            data-spm-anchor-id="a313x.7781069.0.i0"
-            p-id="1464"
-          />
-        </svg>
-      </a>
-      <div
-        class="a-Drawer-header"
-      />
-      <div
-        class="a-Drawer-body"
-      >
-        <span
-          class="a-TplField"
-        >
-          this is drawer
-        </span>
-      </div>
-      <div
-        class="a-Drawer-footer"
-      >
-        <button
-          class="a-Button a-Button--default"
-          type="button"
-        >
-          <span>
-            取消
-          </span>
-        </button>
-        <button
-          class="a-Button a-Button--primary"
-          type="button"
-        >
-          <span>
-            确认
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
 </div>
 `;
 
@@ -791,89 +516,6 @@ exports[`Renderer:Page handleAction actionType=drawer mergeData 1`] = `
       </div>
     </div>
   </div>
-  <div
-    class="amis-dialog-widget a-Drawer a-Drawer--right a-Drawer--md a-Modal--1th"
-    role="dialog"
-  >
-    <div
-      class="a-Drawer-overlay in"
-    />
-    <div
-      class="a-Drawer-content in"
-    >
-      <a
-        class="a-Drawer-close"
-      >
-        <svg
-          class="icon"
-          p-id="1463"
-          version="1.1"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-            data-spm-anchor-id="a313x.7781069.0.i0"
-            p-id="1464"
-          />
-        </svg>
-      </a>
-      <div
-        class="a-Drawer-header"
-      />
-      <div
-        class="a-Drawer-body"
-      >
-        <form
-          class="a-Form a-Form--horizontal"
-          novalidate=""
-        >
-          <div
-            class="a-Form-item a-Form-item--horizontal"
-          >
-            <label
-              class="a-Form-label a-Form-itemColumn--2"
-            >
-              <span>
-                A
-              </span>
-            </label>
-            <div
-              class="a-Form-value"
-            >
-              <div
-                class="a-Form-control a-TextControl"
-              >
-                <div
-                  class="a-TextControl-input"
-                >
-                  <input
-                    autocomplete="off"
-                    name="a"
-                    placeholder=""
-                    type="text"
-                    value="3"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div
-        class="a-Drawer-footer"
-      >
-        <button
-          class="a-Button a-Button--default"
-          type="submit"
-        >
-          <span>
-            确认
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
 </div>
 `;
 
@@ -929,6 +571,12 @@ exports[`Renderer:Page initApi 1`] = `
       <div
         className="a-Page-body"
       >
+        <div
+          className="a-Spinner-overlay"
+        />
+        <div
+          className="a-Spinner a-Spinner--overlay a-Spinner--lg"
+        />
         <span
           className="a-TplField"
         >
@@ -954,6 +602,12 @@ exports[`Renderer:Page initApi error show Message 1`] = `
       <div
         className="a-Page-body"
       >
+        <div
+          className="a-Spinner-overlay"
+        />
+        <div
+          className="a-Spinner a-Spinner--overlay a-Spinner--lg"
+        />
         <div
           className="a-Alert a-Alert--danger"
         >
@@ -962,9 +616,10 @@ exports[`Renderer:Page initApi error show Message 1`] = `
             onClick={[Function]}
             type="button"
           >
-            <span>
+            <icon-mock
-              ×
+              className="icon"
-            </span>
+              icon="close"
+            />
           </button>
           Internal Error
         </div>
@@ -988,6 +643,12 @@ exports[`Renderer:Page initApi reFetch when condition changes 1`] = `
       <div
         className="a-Page-body"
       >
+        <div
+          className="a-Spinner-overlay"
+        />
+        <div
+          className="a-Spinner a-Spinner--overlay a-Spinner--lg"
+        />
         <span
           className="a-TplField"
         >
@@ -1050,6 +711,12 @@ exports[`Renderer:Page initApi reload by Dialog action 1`] = `
         <div
           class="a-Page-body"
         >
+          <div
+            class="a-Spinner-overlay"
+          />
+          <div
+            class="a-Spinner a-Spinner--overlay a-Spinner--lg"
+          />
           <span
             class="a-TplField"
           >
@@ -1097,102 +764,6 @@ exports[`Renderer:Page initApi reload by Dialog action 2`] = `
       </div>
     </div>
   </div>
-  <div
-    class="amis-dialog-widget a-Modal a-Modal--1th"
-    role="dialog"
-  >
-    <div
-      class="a-Modal-overlay in"
-    />
-    <div
-      class="a-Modal-content in"
-    >
-      <div
-        class="a-Modal-header"
-      >
-        <a
-          class="a-Modal-close"
-          data-tooltip="关闭弹窗"
-        >
-          <svg
-            class="icon"
-            p-id="1463"
-            version="1.1"
-            viewBox="0 0 1024 1024"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-              data-spm-anchor-id="a313x.7781069.0.i0"
-              p-id="1464"
-            />
-          </svg>
-        </a>
-        <div
-          class="a-Modal-title"
-        >
-          弹框
-        </div>
-      </div>
-      <div
-        class="a-Modal-body"
-      >
-        <form
-          class="a-Form a-Form--horizontal"
-          novalidate=""
-        >
-          <div
-            class="a-Form-item a-Form-item--horizontal"
-          >
-            <label
-              class="a-Form-label a-Form-itemColumn--2"
-            >
-              <span />
-            </label>
-            <div
-              class="a-Form-value"
-            >
-              <div
-                class="a-Form-control a-TextControl"
-              >
-                <div
-                  class="a-TextControl-input"
-                >
-                  <input
-                    autocomplete="off"
-                    name="a"
-                    placeholder=""
-                    type="text"
-                    value="1"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div
-        class="a-Modal-footer"
-      >
-        <button
-          class="a-Button a-Button--default"
-          type="button"
-        >
-          <span>
-            取消
-          </span>
-        </button>
-        <button
-          class="a-Button a-Button--primary"
-          type="button"
-        >
-          <span>
-            确认
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
 </div>
 `;
 
@@ -1260,6 +831,12 @@ exports[`Renderer:Page initApi reload by Drawer action 1`] = `
         <div
           class="a-Page-body"
         >
+          <div
+            class="a-Spinner-overlay"
+          />
+          <div
+            class="a-Spinner a-Spinner--overlay a-Spinner--lg"
+          />
           <span
             class="a-TplField"
           >
@@ -1307,95 +884,6 @@ exports[`Renderer:Page initApi reload by Drawer action 2`] = `
       </div>
     </div>
   </div>
-  <div
-    class="amis-dialog-widget a-Drawer a-Drawer--right a-Drawer--md a-Modal--1th"
-    role="dialog"
-  >
-    <div
-      class="a-Drawer-overlay in"
-    />
-    <div
-      class="a-Drawer-content in"
-    >
-      <a
-        class="a-Drawer-close"
-      >
-        <svg
-          class="icon"
-          p-id="1463"
-          version="1.1"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-            data-spm-anchor-id="a313x.7781069.0.i0"
-            p-id="1464"
-          />
-        </svg>
-      </a>
-      <div
-        class="a-Drawer-header"
-      />
-      <div
-        class="a-Drawer-body"
-      >
-        <form
-          class="a-Form a-Form--horizontal"
-          novalidate=""
-        >
-          <div
-            class="a-Form-item a-Form-item--horizontal"
-          >
-            <label
-              class="a-Form-label a-Form-itemColumn--2"
-            >
-              <span />
-            </label>
-            <div
-              class="a-Form-value"
-            >
-              <div
-                class="a-Form-control a-TextControl"
-              >
-                <div
-                  class="a-TextControl-input"
-                >
-                  <input
-                    autocomplete="off"
-                    name="a"
-                    placeholder=""
-                    type="text"
-                    value="1"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div
-        class="a-Drawer-footer"
-      >
-        <button
-          class="a-Button a-Button--default"
-          type="button"
-        >
-          <span>
-            取消
-          </span>
-        </button>
-        <button
-          class="a-Button a-Button--primary"
-          type="button"
-        >
-          <span>
-            确认
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
 </div>
 `;
 
@@ -1425,6 +913,12 @@ exports[`Renderer:Page initApi reload by Drawer action 3`] = `
         <div
           class="a-Page-body"
         >
+          <div
+            class="a-Spinner-overlay"
+          />
+          <div
+            class="a-Spinner a-Spinner--overlay a-Spinner--lg"
+          />
           <span
             class="a-TplField"
           >
@@ -1488,6 +982,7 @@ exports[`Renderer:Page initApi reload by Form submit 1`] = `
                         autocomplete="off"
                         name="a"
                         placeholder=""
+                        size="10"
                         type="text"
                         value="1"
                       />
@@ -1514,28 +1009,52 @@ exports[`Renderer:Page initApi reload by Form submit 1`] = `
               class="resize-sensor"
               style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
             >
+              
+  
               <div
                 class="resize-sensor-expand"
                 style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
               >
+                
+    
                 <div
                   style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
                 />
+                
+  
               </div>
+              
+  
               <div
                 class="resize-sensor-shrink"
                 style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
               >
+                
+    
                 <div
                   style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
                 />
+                
+  
               </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
             </div>
           </div>
         </div>
         <div
           class="a-Page-body"
         >
+          <div
+            class="a-Spinner-overlay"
+          />
+          <div
+            class="a-Spinner a-Spinner--overlay a-Spinner--lg"
+          />
           <span
             class="a-TplField"
           >
@@ -1599,6 +1118,7 @@ exports[`Renderer:Page initApi reload by Form submit 2`] = `
                         autocomplete="off"
                         name="a"
                         placeholder=""
+                        size="10"
                         type="text"
                         value="2"
                       />
@@ -1625,28 +1145,52 @@ exports[`Renderer:Page initApi reload by Form submit 2`] = `
               class="resize-sensor"
               style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
             >
+              
+  
               <div
                 class="resize-sensor-expand"
                 style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
               >
+                
+    
                 <div
                   style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
                 />
+                
+  
               </div>
+              
+  
               <div
                 class="resize-sensor-shrink"
                 style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
               >
+                
+    
                 <div
                   style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
                 />
+                
+  
               </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
             </div>
           </div>
         </div>
         <div
           class="a-Page-body"
         >
+          <div
+            class="a-Spinner-overlay"
+          />
+          <div
+            class="a-Spinner a-Spinner--overlay a-Spinner--lg"
+          />
           <span
             class="a-TplField"
           >
@@ -1685,6 +1229,12 @@ exports[`Renderer:Page initApi reload by action 1`] = `
         <div
           class="a-Page-body"
         >
+          <div
+            class="a-Spinner-overlay"
+          />
+          <div
+            class="a-Spinner a-Spinner--overlay a-Spinner--lg"
+          />
           <span
             class="a-TplField"
           >
@@ -1723,6 +1273,12 @@ exports[`Renderer:Page initApi reload by action 2`] = `
         <div
           class="a-Page-body"
         >
+          <div
+            class="a-Spinner-overlay"
+          />
+          <div
+            class="a-Spinner a-Spinner--overlay a-Spinner--lg"
+          />
           <span
             class="a-TplField"
           >
@@ -1750,12 +1306,11 @@ exports[`Renderer:Page initApi show loading 1`] = `
         className="a-Page-body"
       >
         <div
-          className="a-Spinner-overlay"
+          className="a-Spinner-overlay in"
-        >
+        />
-          <div
+        <div
-            className="a-Spinner a-Spinner--lg"
+          className="a-Spinner in a-Spinner--overlay a-Spinner--lg"
         />
-        </div>
         <span
           className="a-TplField"
         >
@@ -1781,6 +1336,12 @@ exports[`Renderer:Page initApi show loading 2`] = `
       <div
         className="a-Page-body"
       >
+        <div
+          className="a-Spinner-overlay"
+        />
+        <div
+          className="a-Spinner a-Spinner--overlay a-Spinner--lg"
+        />
         <span
           className="a-TplField"
         >
@@ -1807,12 +1368,11 @@ exports[`Renderer:Page initApi silentPolling 1`] = `
         className="a-Page-body"
       >
         <div
-          className="a-Spinner-overlay"
+          className="a-Spinner-overlay in"
-        >
+        />
-          <div
+        <div
-            className="a-Spinner a-Spinner--lg"
+          className="a-Spinner in a-Spinner--overlay a-Spinner--lg"
         />
-        </div>
         <span
           className="a-TplField"
         >
@@ -1838,6 +1398,12 @@ exports[`Renderer:Page initApi silentPolling 2`] = `
       <div
         className="a-Page-body"
       >
+        <div
+          className="a-Spinner-overlay"
+        />
+        <div
+          className="a-Spinner a-Spinner--overlay a-Spinner--lg"
+        />
         <span
           className="a-TplField"
         >
@@ -1938,6 +1504,12 @@ exports[`Renderer:Page initFetchOn trigger initApi fetch when condition becomes
       <div
         className="a-Page-body"
       >
+        <div
+          className="a-Spinner-overlay"
+        />
+        <div
+          className="a-Spinner a-Spinner--overlay a-Spinner--lg"
+        />
         <span
           className="a-TplField"
         >

__tests__/renderers/__snapshots__/Tabs.test.tsx.snap

@@ -4,51 +4,33 @@ exports[`Renderer:tabs 1`] = `
 <div>
   <div
     class="a-Tabs"
-    id="0"
   >
     <ul
-      class="a-Tabs-links nav"
+      class="a-Tabs-links"
       role="tablist"
     >
       <li
-        class="a-Tabs-link active"
+        class="a-Tabs-link is-active"
-        role="presentation"
-      >
-        <a
-          aria-controls="0-pane-0"
-          aria-selected="true"
-          href="#"
-          id="0-tab-0"
-          role="tab"
       >
+        <a>
+           
           基本配置
         </a>
       </li>
       <li
         class="a-Tabs-link"
-        role="presentation"
-      >
-        <a
-          aria-controls="0-pane-1"
-          aria-selected="false"
-          href="#"
-          id="0-tab-1"
-          role="tab"
-          tabindex="-1"
       >
+        <a>
+           
           其他配置
         </a>
       </li>
     </ul>
     <div
-      class="a-Tabs-content tab-content"
+      class="a-Tabs-content"
     >
       <div
-        aria-hidden="false"
+        class="in is-active a-Tabs-pane"
-        aria-labelledby="0-tab-0"
-        class="fade tab-pane active in"
-        id="0-pane-0"
-        role="tabpanel"
       >
         <span
           class="a-TplField"

__tests__/stores/__snapshots__/index.test.ts.snap

@@ -15,15 +15,18 @@ Object {
       "action": undefined,
       "busying": false,
       "checking": false,
+      "childrenIds": Array [],
       "data": Object {},
       "dialogData": undefined,
       "dialogOpen": false,
+      "disposed": false,
       "drawerData": undefined,
       "drawerOpen": false,
       "error": false,
       "fetching": false,
       "hasRemoteData": false,
       "id": "1",
+      "initedAt": 0,
       "initializing": false,
       "msg": "",
       "parentId": "",
@@ -47,15 +50,20 @@ Object {
       "action": undefined,
       "busying": false,
       "checking": false,
+      "childrenIds": Array [
+        "2",
+      ],
       "data": Object {},
       "dialogData": undefined,
       "dialogOpen": false,
+      "disposed": false,
       "drawerData": undefined,
       "drawerOpen": false,
       "error": false,
       "fetching": false,
       "hasRemoteData": false,
       "id": "1",
+      "initedAt": 0,
       "initializing": false,
       "msg": "",
       "parentId": "",
@@ -71,15 +79,18 @@ Object {
       "action": undefined,
       "busying": false,
       "checking": false,
+      "childrenIds": Array [],
       "data": Object {},
       "dialogData": undefined,
       "dialogOpen": false,
+      "disposed": false,
       "drawerData": undefined,
       "drawerOpen": false,
       "error": false,
       "fetching": false,
       "hasRemoteData": false,
       "id": "2",
+      "initedAt": 0,
       "initializing": false,
       "msg": "",
       "parentId": "1",
@@ -103,15 +114,18 @@ Object {
       "action": undefined,
       "busying": false,
       "checking": false,
+      "childrenIds": Array [],
       "data": Object {},
       "dialogData": undefined,
       "dialogOpen": false,
+      "disposed": false,
       "drawerData": undefined,
       "drawerOpen": false,
       "error": false,
       "fetching": false,
       "hasRemoteData": false,
       "id": "1",
+      "initedAt": 0,
       "initializing": false,
       "msg": "",
       "parentId": "",

__tests__/stores/__snapshots__/service.test.ts.snap

@@ -5,15 +5,18 @@ Object {
   "action": undefined,
   "busying": false,
   "checking": false,
+  "childrenIds": Array [],
   "data": Object {},
   "dialogData": undefined,
   "dialogOpen": false,
+  "disposed": false,
   "drawerData": undefined,
   "drawerOpen": false,
   "error": false,
   "fetching": false,
   "hasRemoteData": false,
   "id": "1",
+  "initedAt": 0,
   "initializing": false,
   "msg": "",
   "parentId": "",
@@ -33,15 +36,18 @@ Array [
     "action": undefined,
     "busying": false,
     "checking": false,
+    "childrenIds": Array [],
     "data": Object {},
     "dialogData": undefined,
     "dialogOpen": false,
+    "disposed": false,
     "drawerData": undefined,
     "drawerOpen": false,
     "error": false,
     "fetching": true,
     "hasRemoteData": false,
     "id": "1",
+    "initedAt": 0,
     "initializing": false,
     "msg": "",
     "parentId": "",
@@ -57,15 +63,18 @@ Array [
     "action": undefined,
     "busying": false,
     "checking": false,
+    "childrenIds": Array [],
     "data": Object {},
     "dialogData": undefined,
     "dialogOpen": false,
+    "disposed": false,
     "drawerData": undefined,
     "drawerOpen": false,
     "error": false,
     "fetching": false,
     "hasRemoteData": false,
     "id": "1",
+    "initedAt": 0,
     "initializing": false,
     "msg": "",
     "parentId": "",
@@ -86,15 +95,18 @@ Array [
     "action": undefined,
     "busying": false,
     "checking": false,
+    "childrenIds": Array [],
     "data": Object {},
     "dialogData": undefined,
     "dialogOpen": false,
+    "disposed": false,
     "drawerData": undefined,
     "drawerOpen": false,
     "error": false,
     "fetching": true,
     "hasRemoteData": false,
     "id": "1",
+    "initedAt": 0,
     "initializing": false,
     "msg": "",
     "parentId": "",
@@ -109,20 +121,23 @@ Array [
     "action": undefined,
     "busying": false,
     "checking": false,
+    "childrenIds": Array [],
     "data": Object {
       "a": 1,
       "b": 2,
     },
     "dialogData": undefined,
     "dialogOpen": false,
+    "disposed": false,
     "drawerData": undefined,
     "drawerOpen": false,
     "error": false,
     "fetching": false,
     "hasRemoteData": true,
     "id": "1",
+    "initedAt": 0,
     "initializing": false,
-    "msg": "undefined",
+    "msg": "",
     "parentId": "",
     "path": "",
     "pristine": Object {

__tests__/utils/__snapshots__/api.test.ts.snap

@@ -26,6 +26,12 @@ exports[`api:cache 1`] = `
         <div
           class="a-Page-body"
         >
+          <div
+            class="a-Spinner-overlay"
+          />
+          <div
+            class="a-Spinner a-Spinner--overlay a-Spinner--lg"
+          />
           <span
             class="a-TplField"
           >
@@ -64,6 +70,12 @@ exports[`api:cache 2`] = `
         <div
           class="a-Page-body"
         >
+          <div
+            class="a-Spinner-overlay"
+          />
+          <div
+            class="a-Spinner a-Spinner--overlay a-Spinner--lg"
+          />
           <span
             class="a-TplField"
           >

__tests__/utils/tpl-builtin.test.ts

@@ -1,3 +1,4 @@
+import '../../src/utils/tpl.ts';
 import {
   resolveVariableAndFilter,
   dataMapping
@@ -53,7 +54,7 @@ const filters = [
   {
     type: 'raw5',
     data: {
-            a: 1,
+      a: 1
     },
     path: '',
     filter: '| raw',
@@ -62,7 +63,7 @@ const filters = [
   {
     type: 'raw6',
     data: {
-            a: 1,
+      a: 1
     },
     path: '$$',
     filter: '| raw',
@@ -71,9 +72,9 @@ const filters = [
   {
     type: 'raw7',
     data: {
-            a: 1,
+      a: 1
     },
-        path: '\$a',
+    path: '$a',
     filter: '| raw',
     expectValue: 1
   },
@@ -87,12 +88,12 @@ const filters = [
     },
     path: '${value}',
     filter: '| json:0',
-        expectValue: "{\"a\":\"a\",\"b\":\"b\"}"
+    expectValue: '{"a":"a","b":"b"}'
   },
   {
     type: 'toJson',
     data: {
-            value: "{\"a\":\"a\",\"b\":\"b\"}",
+      value: '{"a":"a","b":"b"}'
     },
     path: '${value}',
     filter: '| toJson',
@@ -104,7 +105,7 @@ const filters = [
   {
     type: 'date',
     data: {
-            value: 1559649981,
+      value: 1559649981
     },
     path: '${value}',
     filter: '| date',
@@ -163,7 +164,7 @@ const filters = [
     },
     path: '${value}',
     filter: '| duration',
-        expectValue: '3天17时47分13秒'
+    expectValue: '2天16时47分13秒'
   },
   // bytes
   {
@@ -374,7 +375,7 @@ const filters = [
         {
           label: 'C',
           value: 'c'
-                },
+        }
       ]
     },
     path: '${value}',
@@ -396,7 +397,7 @@ const filters = [
         {
           label: 'C',
           value: 'c'
-                },
+        }
       ]
     },
     path: '${value}',
@@ -456,13 +457,14 @@ const filters = [
     path: '${value}',
     filter: '| upperCase',
     expectValue: 'ABC'
-    },
+  }
-
+];
-]
 
 filters.forEach(f => {
   test(`tpl-builtin:resolveVariableAndFilter:${f.type}`, () => {
-        expect(resolveVariableAndFilter(f.path, f.data, f.filter)).toEqual(f.expectValue);
+    expect(resolveVariableAndFilter(f.path, f.data, f.filter)).toEqual(
+      f.expectValue
+    );
   });
 });
 
@@ -473,12 +475,17 @@ test('tpl-builtin:dataMapping', () => {
     c: {
       '1': 'first',
       '2': 'second'
-        },
+    }
   };
 
-    expect(dataMapping({
+  expect(
+    dataMapping(
+      {
         '&': '$$'
-    }, data)).toEqual({
+      },
+      data
+    )
+  ).toEqual({
     a: 1,
     b: '2',
     c: {
@@ -487,19 +494,34 @@ test('tpl-builtin:dataMapping', () => {
     }
   });
 
-    expect(dataMapping({
+  expect(
+    dataMapping(
+      {
         '&': '${b}'
-    }, data)).toEqual('2');
+      },
+      data
+    )
+  ).toEqual('2');
 
-    expect(dataMapping({
+  expect(
-        '&': (data) => ({b: data.b})
+    dataMapping(
-    }, data)).toEqual({
+      {
+        '&': data => ({b: data.b})
+      },
+      data
+    )
+  ).toEqual({
     b: '2'
   });
 
-    expect(dataMapping({
+  expect(
-        'all': '$$'
+    dataMapping(
-    }, data)).toEqual({
+      {
+        all: '$$'
+      },
+      data
+    )
+  ).toEqual({
     all: {
       a: 1,
       b: '2',
@@ -510,26 +532,38 @@ test('tpl-builtin:dataMapping', () => {
     }
   });
 
-    expect(dataMapping({
+  expect(
+    dataMapping(
+      {
         a: '${a}',
         b: '__undefined'
-    }, data)).toEqual({
+      },
+      data
+    )
+  ).toEqual({
     a: 1
   });
 
-    expect(dataMapping({
+  expect(
+    dataMapping(
+      {
         value: {
           a: '${a}',
           d: 'd'
         }
-    }, data)).toEqual({
+      },
+      data
+    )
+  ).toEqual({
     value: {
       a: 1,
       d: 'd'
     }
   });
 
-    expect(dataMapping({
+  expect(
+    dataMapping(
+      {
         value: [
           {
             a: '${a}',
@@ -539,8 +573,11 @@ test('tpl-builtin:dataMapping', () => {
             b: '${b}',
             d: 'd'
           }
-        ],
+        ]
-    }, data)).toEqual({
+      },
+      data
+    )
+  ).toEqual({
     value: [
       {
         a: 1,
@@ -553,15 +590,25 @@ test('tpl-builtin:dataMapping', () => {
     ]
   });
 
-    expect(dataMapping({
+  expect(
-        value: '${a}',
+    dataMapping(
-    }, data)).toEqual({
+      {
+        value: '${a}'
+      },
+      data
+    )
+  ).toEqual({
     value: 1
   });
 
-    expect(dataMapping({
+  expect(
-        value: data => data.a,
+    dataMapping(
-    }, data)).toEqual({
+      {
+        value: data => data.a
+      },
+      data
+    )
+  ).toEqual({
     value: 1
   });
 
@@ -581,18 +628,23 @@ test('tpl-builtin:dataMapping', () => {
         label: 'C',
         value: 'c',
         size: 'sm'
-            },
-        ]
       }
+    ]
+  };
 
-    expect(dataMapping({
+  expect(
+    dataMapping(
+      {
         items: {
           $rows: {
             label: '$label',
             value: '$value'
           }
         }
-    }, data2)).toEqual({
+      },
+      data2
+    )
+  ).toEqual({
     items: [
       {
         label: 'A',
@@ -608,4 +660,4 @@ test('tpl-builtin:dataMapping', () => {
       }
     ]
   });
-})
+});

examples/components/Page/Form.jsx

@@ -1,23 +1,54 @@
 export default {
-  type: 'page',
+  definitions: {
-  title: '表单页面',
+    aa: {
-  body: {
+      type: 'text',
-    type: 'form',
+      name: 'jack',
-    mode: 'horizontal',
+      value: 'ref value',
-    title: '',
+      remark: '通过<code>\\$ref</code>引入的组件'
-    api: '/api/mock2/form/saveForm',
+    },
+    bb: {
+      type: 'combo',
+      multiple: true,
+      multiLine: true,
+      remark: '<code>combo</code>中的子项引入自身，实现嵌套的效果',
       controls: [
         {
-        label: 'Name',
+          label: 'combo 1',
           type: 'text',
-        name: 'name'
+          name: 'key'
         },
-
         {
-        label: 'Email',
+          label: 'combo 2',
-        type: 'email',
+          name: 'value',
-        name: 'email'
+          $ref: 'aa'
+        },
+        {
+          name: 'children',
+          label: 'children',
+          $ref: 'bb'
         }
       ]
     }
+  },
+  type: 'page',
+  title: '引用',
+  body: [
+    {
+      type: 'form',
+      api: 'api/xxx',
+      actions: [],
+      controls: [
+        {
+          label: 'text2',
+          $ref: 'aa',
+          name: 'ref1'
+        },
+        {
+          label: 'combo',
+          $ref: 'bb',
+          name: 'ref2'
+        }
+      ]
+    }
+  ]
 };

package.json

@@ -159,7 +159,8 @@
     ],
     "testRegex": "/.*\\.test\\.(ts|tsx|js)$",
     "moduleNameMapper": {
-      "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js"
+      "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
+      "\\.(svg)$": "<rootDir>/__mocks__/svgMock.js"
     },
     "globals": {
       "ts-jest": {

src/components/icons.tsx

@@ -136,6 +136,11 @@ export function Icon({
 }: {
   icon: string;
 } & React.ComponentProps<any>) {
+  // jest 运行环境下，把指定的 icon 也输出到 snapshot 中。
+  if (typeof jest !== 'undefined') {
+    rest.icon = icon;
+  }
+
   const Component = getIcon(icon);
   return Component ? (
     <Component {...rest} />

src/renderers/Form/Checkbox.tsx

@@ -37,7 +37,6 @@ export default class CheckboxControl extends React.Component<
           value={value || ''}
           trueValue={trueValue}
           falseValue={falseValue}
-          classPrefix={ns}
           disabled={disabled}
           onChange={(value: any) => onChange(value)}
         >