更新 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,257 +1,275 @@
 import {
-    registerRenderer,
+  registerRenderer,
-    unRegisterRenderer,
+  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',
-        type: 'my-renderer',
+      a: 23
-        a: 23
+    })
-    }));
+  );
-    await wait(100);
+  await wait(100);
-    expect(container).toMatchSnapshot(); // not found
+  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({
-    await wait(100);
+        loadRenderer: () => Promise.resolve(() => <div>Not Found</div>)
-    expect(container).toMatchSnapshot(); // not found
+      })
+    )
+  );
+  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({
-    await wait(100);
+        loadRenderer: () => () => <div>Not Found</div>
-    expect(container).toMatchSnapshot(); // not found
+      })
+    )
+  );
+  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({
-    await wait(100);
+        loadRenderer: () => <div>Not Found</div>
-    expect(container).toMatchSnapshot(); // not found
+      })
+    )
+  );
+  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 {
+          interface MyProps extends RendererProps {
-                a: number;
+            a: number;
-            };
+          }
-        
+
-            class MyComponent extends React.Component<MyProps> {
+          class MyComponent extends React.Component<MyProps> {
-                render() {
+            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>;
-                }
             }
-        
+          }
-            registerRenderer({
+
-                component: MyComponent,
+          registerRenderer({
-                test: /\bmy-renderer2$/
+            component: MyComponent,
-            });
+            test: /\bmy-renderer2$/
+          });
         }
-    })));
+      })
-    await wait(100);
+    )
-    expect(container).toMatchSnapshot(); // not found
+  );
+  await wait(100);
+  expect(container).toMatchSnapshot(); // not found
 });
 
 test('factory:registerRenderer', () => {
-    interface MyProps extends RendererProps {
+  interface MyProps extends RendererProps {
-        a: number;
+    a: number;
-    };
+  }
 
-    class MyComponent extends React.Component<MyProps> {
+  class MyComponent extends React.Component<MyProps> {
-        render() {
+    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>;
-        }
     }
+  }
 
-    const renderer = registerRenderer({
+  const renderer = registerRenderer({
-        component: MyComponent,
+    component: MyComponent,
-        test: /\bmy-renderer$/
+    test: /\bmy-renderer$/
-    });
+  });
 
-    const {
+  const {container} = render(
-        container
+    amisRender({
-    } = render(amisRender({
+      type: 'my-renderer',
-        type: 'my-renderer',
+      a: 23
-        a: 23
+    })
-    }))
+  );
 
-    expect(container).toMatchSnapshot();
+  expect(container).toMatchSnapshot();
-    unRegisterRenderer(renderer);
+  unRegisterRenderer(renderer);
 });
 
-test('factory:definitions', () => {
+test('factory:definitions', async () => {
-    const {
+  const {container, getByText} = render(
-        container,
+    amisRender(
-        getByText
+      {
-    } = render(amisRender({
         definitions: {
-            aa: {
+          aa: {
+            type: 'text',
+            name: 'jack',
+            value: 'ref value',
+            remark: '通过<code>\\$ref</code>引入的组件'
+          },
+          bb: {
+            type: 'combo',
+            multiple: true,
+            multiLine: true,
+            remark: '<code>combo</code>中的子项引入自身，实现嵌套的效果',
+            controls: [
+              {
+                label: 'combo 1',
                 type: 'text',
-                name: 'jack',
+                name: 'key'
-                value: 'ref value',
+              },
-                remark: '通过<code>\\$ref</code>引入的组件'
+              {
-            },
+                label: 'combo 2',
-            bb: {
+                name: 'value',
-                type: 'combo',
+                $ref: 'aa'
-                multiple: true,
+              },
-                multiLine: true,
+              {
-                remark: '<code>combo</code>中的子项引入自身，实现嵌套的效果',
+                name: 'children',
-                controls: [
+                label: 'children',
-                    {
+                $ref: 'bb'
-                        label: 'combo 1',
+              }
-                        type: 'text',
+            ]
-                        name: 'key'
+          }
-                    },
-                    {
-                        label: 'combo 2',
-                        name: 'value',
-                        $ref: 'aa'
-                    },
-                    {
-                        name: 'children',
-                        label: 'children',
-                        $ref: 'bb'
-                    }
-                ]
-            }
         },
         type: 'page',
         title: '引用',
         body: [
-            {
+          {
-                type: 'form',
+            type: 'form',
-                api: 'api/xxx',
+            api: 'api/xxx',
-                actions: [],
+            actions: [],
-                controls: [
+            controls: [
-                    {
+              {
-                        label: 'text2',
+                label: 'text2',
-                        $ref: 'aa',
+                $ref: 'aa',
-                        name: 'ref1'
+                name: 'ref1'
-                    },
+              },
-                    {
+              {
-                        label: 'combo',
+                label: 'combo',
-                        $ref: 'bb',
+                $ref: 'bb',
-                        name: 'ref2'
+                name: 'ref2'
-                    }
+              }
-                ]
+            ]
-            }
+          }
         ]
-    }, {
+      },
-    }, makeEnv({
+      {},
-    })));
+      makeEnv({})
+    )
+  );
 
-    fireEvent.click(getByText('新增'));
+  await wait(100);
-    expect(container).toMatchSnapshot();
+  fireEvent.click(getByText('新增'));
+  expect(container).toMatchSnapshot();
 });
 
 test('factory:definitions override', () => {
-    const {
+  const {container} = render(
-        container
+    amisRender(
-    } = render(amisRender({
+      {
         definitions: {
-            aa: {
+          aa: {
+            type: 'text',
+            name: 'jack',
+            remark: '通过<code>\\$ref</code>引入的组件'
+          },
+          bb: {
+            type: 'combo',
+            multiple: true,
+            multiLine: true,
+            remark: '<code>combo</code>中的子项引入自身，实现嵌套的效果',
+            controls: [
+              {
+                label: 'combo 1',
                 type: 'text',
-                name: 'jack',
+                name: 'key'
-                remark: '通过<code>\\$ref</code>引入的组件'
+              },
-            },
+              {
-            bb: {
+                label: 'combo 2',
-                type: 'combo',
+                name: 'value',
-                multiple: true,
+                $ref: 'aa'
-                multiLine: true,
+              },
-                remark: '<code>combo</code>中的子项引入自身，实现嵌套的效果',
+              {
-                controls: [
+                name: 'children',
-                    {
+                label: 'children',
-                        label: 'combo 1',
+                $ref: 'bb'
-                        type: 'text',
+              }
-                        name: 'key'
+            ]
-                    },
+          }
-                    {
-                        label: 'combo 2',
-                        name: 'value',
-                        $ref: 'aa'
-                    },
-                    {
-                        name: 'children',
-                        label: 'children',
-                        $ref: 'bb'
-                    }
-                ]
-            }
         },
         type: 'page',
         title: '引用',
         body: [
-            {
+          {
-                type: 'form',
+            type: 'form',
-                api: 'api/xxx',
+            api: 'api/xxx',
-                actions: [],
+            actions: [],
-                controls: [
+            controls: [
-                    {
+              {
-                        label: 'text2',
+                label: 'text2',
-                        $ref: 'aa',
+                $ref: 'aa',
-                        name: 'ref1'
+                name: 'ref1'
-                    },
+              },
-                    {
+              {
-                        label: 'combo',
+                label: 'combo',
-                        $ref: 'bb',
+                $ref: 'bb',
-                        name: 'ref2',
+                name: 'ref2',
-                        type: 'checkboxes',
+                type: 'checkboxes',
-                        value: 1,
+                value: 1,
-                        options: [
+                options: [
-                            {
+                  {
-                                label: 'Option A',
+                    label: 'Option A',
-                                value: 1
+                    value: 1
-                            },
+                  },
-                            {
+                  {
-                                label: 'Option B',
+                    label: 'Option B',
-                                value: 2
+                    value: 2
-                            }
+                  }
-                        ]
-                    }
                 ]
-            }
+              }
+            ]
+          }
         ]
-    }, {
+      },
-    }, makeEnv({
+      {},
-    })));
+      makeEnv({})
+    )
+  );
 
-    expect(container).toMatchSnapshot();
+  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"
-    role="dialog"
-  >
-    <div
-      class="a-Modal-overlay in"
-    />
-    <div
-      class="a-Modal-content in"
-    >
       <div
-        class="a-Modal-header"
+        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;"
-        <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"
-    role="dialog"
-  >
-    <div
-      class="a-Modal-overlay in"
-    />
-    <div
-      class="a-Modal-content in"
-    >
       <div
-        class="a-Modal-header"
+        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;"
-        <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>
@@ -125,43 +143,49 @@ exports[`Renderer:panel 1`] = `
                     </h3>
                   </div>
                   <div
-                    class="a-Form--normal"
+                    class="a-Panel-body"
                   >
                     <div
-                      class="a-Form-item a-Form-item--normal"
+                      class="a-Form--normal"
                     >
                       <div
-                        class="a-Form-control a-TextControl"
+                        class="a-Form-item a-Form-item--normal"
                       >
                         <div
-                          class="a-TextControl-input"
+                          class="a-Form-control a-TextControl"
                         >
-                          <input
+                          <div
-                            autocomplete="off"
+                            class="a-TextControl-input"
-                            name="text"
+                          >
-                            placeholder="Text 1"
+                            <input
-                            type="text"
+                              autocomplete="off"
-                            value=""
+                              name="text"
-                          />
+                              placeholder="Text 1"
+                              size="10"
+                              type="text"
+                              value=""
+                            />
+                          </div>
                         </div>
                       </div>
-                    </div>
-                    <div
-                      class="a-Form-item a-Form-item--normal"
-                    >
                       <div
-                        class="a-Form-control a-TextControl"
+                        class="a-Form-item a-Form-item--normal"
                       >
                         <div
-                          class="a-TextControl-input"
+                          class="a-Form-control a-TextControl"
                         >
-                          <input
+                          <div
-                            autocomplete="off"
+                            class="a-TextControl-input"
-                            name="text2"
+                          >
-                            placeholder="Text 2"
+                            <input
-                            type="text"
+                              autocomplete="off"
-                            value=""
+                              name="text2"
-                          />
+                              placeholder="Text 2"
+                              size="10"
+                              type="text"
+                              value=""
+                            />
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -170,22 +194,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>
@@ -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
+              <a>
-                aria-controls="0-pane-0"
+                 
-                aria-selected="true"
-                href="#"
-                id="0-tab-0"
-                role="tab"
-              >
                 基本配置
               </a>
             </li>
             <li
               class="a-Tabs-link"
-              role="presentation"
             >
-              <a
+              <a>
-                aria-controls="0-pane-1"
+                 
-                aria-selected="false"
-                href="#"
-                id="0-tab-1"
-                role="tab"
-                tabindex="-1"
-              >
                 其他配置
               </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

@@ -5,23 +5,26 @@ exports[`Renderer:image 1`] = `
   <div
     class="a-ImageField show"
   >
-    <img
-      class="b"
-      src="https://www.baidu.com/img/bd_logo1.png"
-    />
     <div
-      class="a-ImageField-caption"
+      class="a-Image"
     >
       <div
-        class="text-md"
+        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>
-      <span
+      <div
-        class="a-TplField"
+        class="a-Image-info"
       >
-        图片描述
+        <div
-      </span>
+          class="a-Image-title"
+        >
+          图片
+        </div>
+      </div>
     </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"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
             >
               <i
                 className="a-Remark-icon fa fa-question-circle"
+                onBlur={[Function]}
+                onFocus={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
               />
             </div>
           </h2>
@@ -107,13 +107,13 @@ exports[`Renderer:Page classNames 1`] = `
             </span>
             <div
               className="a-Remark a-Remark--warning"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
             >
               <i
                 className="a-Remark-icon fa fa-question-circle"
+                onBlur={[Function]}
+                onFocus={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
               />
             </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
+        <a>
-          aria-controls="0-pane-0"
+           
-          aria-selected="true"
-          href="#"
-          id="0-tab-0"
-          role="tab"
-        >
           基本配置
         </a>
       </li>
       <li
         class="a-Tabs-link"
-        role="presentation"
       >
-        <a
+        <a>
-          aria-controls="0-pane-1"
+           
-          aria-selected="false"
-          href="#"
-          id="0-tab-1"
-          role="tab"
-          tabindex="-1"
-        >
           其他配置
         </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"
           >

examples/components/Page/Form.jsx

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

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)}
         >