docs: update table and form faq

content/input/form/index-en-US.md

@@ -1858,4 +1858,10 @@ const { ErrorMessage } = Form;
 
     If the field has no initial value, `getValues` cannot get this item. You can set `initValues`/`initValue` or set the `allowEmpty` attribute to the form.
 
+-   **Why does hitting enter on the input box trigger the form's submit?**
+
+    This is standard HTML behavior. We do not plan to intervene and we will remain the same as the HTML. If there is really only one input element in the form, and you don't want to trigger the submit callback when you press Enter, it is recommended to use preventDefault for the enter of the keydown event of input to prevent the default behavior.
+
+    Click <a href="https://github.com/DouyinFE/semi-design/issues/767" target="_blank">#767</a> for background and content.
+
 -   **[🔍 🧾 More FAQ](https://bytedance.feishu.cn/docs/doccnNKaGhZMqyu0FufD1JGHOjf)**

content/input/form/index.md

@@ -2132,5 +2132,11 @@ const { ErrorMessage } = Form;
 
     field 没有初始值的话，`getValues` 获取不到这一项。可以设置 `initValues`/`initValue` 或者给 form 设置 `allowEmpty` 属性。
 
+-   **为什么在输入框上敲击 enter 触发了 Form 的 submit？**
+
+    这个是标准 HTML 行为，我们不计划进行干预，会与原生保持一致。如果表单内确实只有一个 Input 元素，又不想回车时触发 submit 回调，建议对 Input 的 keydown 事件的 enter 采取 preventDefault 阻止默认行为。
+
+    点击 <a href="https://github.com/DouyinFE/semi-design/issues/767" target="_blank">#767</a> 查看相关背景和内容。
+
 -   **[🔍 🧾 更多Form FAQ补充 & 问题自查手册](https://bytedance.feishu.cn/docs/doccnNKaGhZMqyu0FufD1JGHOjf)** 
     

content/show/table/index-en-US.md

@@ -4690,10 +4690,15 @@ function Demo() {
     
     This is for the scenario where the selected row keys are lost when data is selected on the first page during paging, and then the data is selected on the second page. If you don't want to use the cached keys, you can filter it from the current dataSource or use the second parameter of `rowSelection` `onChange`.
 
+- **Does it support single row selection?**
+
+    Table currently does not support single-row selection function, and users can implement single selection in a custom way. Please check the FAQ.
+
 - **How is Table implemented, I want to know more details?**
 
     Please click <a href="https://bytedance.feishu.cn/docs/doccnqLgNefWGMZHFz7j70GKqpY" target="_blank">Semi Table component design</a>
 
+
 See more Table FAQ and demos, please click <a href="https://bytedance.feishu.cn/docs/doccnsYk1qUmsIDP1ihJ9zjG0Ch" target="_blank">Table FAQ</a>
 
 

content/show/table/index.md

@@ -4701,14 +4701,18 @@ function Demo() {
     
     涉及到单个 cell 需要控制样式的，可以通过 column.onHeaderCell、column.onCell 控制。
 
-
 - **为何 rowSelection onChange 的第一个参数缓存了之前选中的 keys ？**
     
     这么做为了在分页受控时，在第一页选中数据后，去第二页选择数据，回到第一页后选择的 row keys 丢失的场景。如果不想用缓存的 keys，可以从当前 dataSource 过滤一遍，或者使用 rowSelection onChange 的第二个参数。
 
+- **支持单行选择吗**
+
+    Table 暂不支持单行选则功能，用户可以通过自定义方式实现单选。实现方式移步 Table FAQ 文档。
+
 - **Table 是如何实现的，我想了解更多细节？**
 
     查看 <a href="https://bytedance.feishu.cn/docs/doccnqLgNefWGMZHFz7j70GKqpY" target="_blank">Semi Table 组件设计方案</a>了解更多。
+    
 
 查看更多 Table FAQ 和用例，点击 <a href="https://bytedance.feishu.cn/docs/doccnsYk1qUmsIDP1ihJ9zjG0Ch" target="_blank">Table FAQ</a>
 

packages/semi-ui/form/_story/FormSubmit/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Form, Tooltip, Button } from '@douyinfe/semi-ui';
+import { IconHelpCircle } from '@douyinfe/semi-icons';
+
+/**
+ * @description input, button may trigger submit of form
+ * 
+ * case 1: 当 form 中只有一个 input，在 input 上敲击 enter 会触发 form submit
+ * case 2: 当 form 中有 2 个 input，在任意一个 input 上敲击 enter 都不会触发 form submit
+ * case 3: 当 from 中有一个 input 和一个 button，在 input 上敲击 enter 会触发 form submit
+ * 
+ * @summary 如果不想触发 form submit，监听 input key down，如果 `e.key` 等于 `Enter` 则调用 e.preventDefault
+ * 
+ * @see https://github.com/DouyinFE/semi-design/issues/767#issuecomment-1098836675
+ */
+const App = () => {
+    const { Option } = Form.Select;
+
+    return (
+        <Form onSubmit={() => { console.log('submit');} }>
+            <Form.Select field="Role" label='角色' style={{ width:176 }}>
+                <Option value="admin">管理员</Option>
+                <Option value="user">普通用户</Option>
+                <Option value="guest">访客</Option>
+            </Form.Select>
+            <Form.Input field='UserName' label='用户名' style={{ width:80 }} onKeyDown={e => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                }
+            }} />
+            <Form.Input
+                field='Password'
+                label={{ 
+                    text: '密码',
+                    extra: <Tooltip content='详情'><IconHelpCircle style={{ color: '--semi-color-text-1' }}/></Tooltip> 
+                }}
+                style={{ width:176 }}
+            />
+            <Button>提交</Button>
+        </Form>
+    );
+};
+App.storyName = 'form submit';
+
+export default App;

packages/semi-ui/form/_story/form.stories.js

@@ -91,6 +91,7 @@ import { SetValuesDemo, SetValuesWithArrayField } from './FormApi/setValuesDemo'
 import { SetValueUsingParentPath } from './FormApi/formApiDemo';
 import { FieldPathWithArrayDemo } from './Debug/bugDemo';
 import ChildDidMount from './Debug/childDidMount';
+export { default as FormSubmit } from './FormSubmit';
 
 export default {
   title: 'Form'
@@ -429,4 +430,4 @@ export const _ChildDidMount = () => <ChildDidMount />;
 
 _ChildDidMount.story = {
   name: 'child did mount',
-};
+};

packages/semi-ui/table/_story/v2/index.js

@@ -5,4 +5,5 @@ export { default as FixedHeaderMerge } from './FixedHeaderMerge';
 export { default as FixedResizable } from './FixedResizable';
 export { default as FixedExpandedRow } from './FixedExpandedRow';
 export { default as FixedMemoryLeak  } from './FixedMemoryLeak';
-export { default as FixedOnHeaderRow } from './FixedOnHeaderRow';
+export { default as FixedOnHeaderRow } from './FixedOnHeaderRow';
+export { default as RadioRowSelection } from './radioRowSelection';

packages/semi-ui/table/_story/v2/radioRowSelection.tsx

@@ -0,0 +1,107 @@
+import React, { useMemo, useState } from 'react';
+import { Table, Avatar, Radio } from '@douyinfe/semi-ui';
+import { IconMore } from '@douyinfe/semi-icons';
+
+App.storyName = '行选择 - 单选';
+export default function App() {
+    const [selectedRowKey, setSelectedRowKey] = useState();
+    const columns = [
+        {
+            title: '',
+            dataIndex: 'selection',
+            width: 20,
+            render: (text, record, index) => {
+                return (
+                    <Radio checked={selectedRowKey === record.key} onChange={() => setSelectedRowKey(record.key)} />
+                );
+            },
+        },
+        {
+            title: '标题',
+            dataIndex: 'name',
+            width: 400,
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        <Avatar
+                            size="small"
+                            shape="square"
+                            src={record.nameIconSrc}
+                            style={{ marginRight: 12 }}
+                        ></Avatar>
+                        {text}
+                    </div>
+                );
+            },
+        },
+        {
+            title: '大小',
+            dataIndex: 'size',
+        },
+        {
+            title: '所有者',
+            dataIndex: 'owner',
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        <Avatar size="small" color={record.avatarBg} style={{ marginRight: 4 }}>
+                            {typeof text === 'string' && text.slice(0, 1)}
+                        </Avatar>
+                        {text}
+                    </div>
+                );
+            },
+        },
+        {
+            title: '更新日期',
+            dataIndex: 'updateTime',
+        },
+        {
+            title: '',
+            dataIndex: 'operate',
+            render: () => {
+                return <IconMore />;
+            },
+        },
+    ];
+    const data = useMemo(() => ([
+        {
+            key: '1',
+            name: 'Semi Design 设计稿.fig',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',
+            size: '2M',
+            owner: '姜鹏志',
+            updateTime: '2020-02-02 05:13',
+            avatarBg: 'grey',
+        },
+        {
+            key: '2',
+            name: 'Semi Design 分享演示文稿',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
+            size: '2M',
+            owner: '郝宣',
+            updateTime: '2020-01-17 05:31',
+            avatarBg: 'red',
+        },
+        {
+            key: '3',
+            name: '设计文档',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
+            size: '34KB',
+            owner: 'Zoey Edwards',
+            updateTime: '2020-01-26 11:01',
+            avatarBg: 'light-blue',
+        },
+        {
+            key: '4',
+            name: 'Semi Pro 设计稿.fig',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',
+            size: '2M',
+            owner: '姜鹏志',
+            updateTime: '2020-02-02 05:13',
+            avatarBg: 'grey',
+        }
+    ]), []);
+
+    return <Table columns={columns} dataSource={data} pagination={{ pageSize: 3 }} />;
+}