@douyinfe/semi-ui 2.1.5 → 2.1.6-alpha.0

package/form/_story/form.stories.js

@@ -432,73 +432,6 @@ FieldDisplayName.story = {
   name: 'Field displayName',
 };
 
-class ReUseDemo extends React.Component {
-  constructor() {
-    super();
-    this.getFormApi = this.getFormApi.bind(this);
-    this.suppressRankOptions = [
-      { label: '不打压', value: 0 },
-      { label: 'top10以下', value: 10 },
-      { label: 'top30以下', value: 30 },
-    ];
-    this.citySuppressRankOptions = [
-      { label: '不打压', value: 0 },
-      { label: 'top3以下', value: 3 },
-      { label: 'top5以下', value: 5 },
-      { label: 'top10以下', value: 10 },
-    ];
-  }
-
-  getFormApi(formApi) {
-    this.formApi = formApi;
-  }
-
-  render() {
-    return (
-      <Form
-        getFormApi={this.getFormApi}
-        initValues={{ listType: 'online', attr: { suppress_rank: 0, city_suppress_rank: 5 } }}
-        onValueChange={values => console.log(values)}
-        style={{ width: 250 }}
-      >
-        {({ formState }) => (
-          <>
-            <Form.Select
-              field="listType"
-              label="榜单类型"
-              disabled={this.ifUseOld}
-              style={{ width: '100%' }}
-              // onChange={val => this.onChangeListType(val)}
-            >
-              <Option value="online">热点榜</Option>
-              <Option value="riseHot">上升热点榜</Option>
-              <Option value="sameCity">同城热点榜</Option>
-            </Form.Select>
-            {formState.values.listType !== 'sameCity' ? (
-              <Form.Select
-                label="竞品打压类型"
-                field="attr.suppress_rank"
-                optionList={this.suppressRankOptions}
-              />
-            ) : (
-              <Form.Select
-                label="同城竞品打压"
-                field="attr.city_suppress_rank"
-                optionList={this.citySuppressRankOptions}
-              />
-            )}
-          </>
-        )}
-      </Form>
-    );
-  }
-}
-export const SameFieldSwitchCauseReuse = () => <ReUseDemo />;
-
-SameFieldSwitchCauseReuse.story = {
-  name: 'same field switch cause reuse',
-};
-
 export const _ChildDidMount = () => <ChildDidMount />;
 
 _ChildDidMount.story = {

package/lib/cjs/form/baseForm.d.ts

@@ -111,7 +111,7 @@ declare class Form extends BaseComponent<BaseFormProps, BaseFormState> {
         onBlur?: (e: React.FocusEvent<Element, Element>) => void;
         onListScroll?: (e: React.UIEvent<HTMLDivElement, UIEvent>) => void;
         children?: React.ReactNode;
-    } & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & React.RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
+    } & Pick<import("../tooltip").TooltipProps, "getPopupContainer" | "stopPropagation" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & React.RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
     static Checkbox: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox").CheckboxProps & import("./interface").RCIncludeType>;
     static CheckboxGroup: React.ComponentType<import("utility-types").Subtract<import("../checkbox").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
     static Radio: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../radio").RadioProps & import("./interface").RCIncludeType>;

package/lib/cjs/form/field.d.ts

@@ -61,7 +61,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
     onBlur?: (e: import("react").FocusEvent<Element, Element>) => void;
     onListScroll?: (e: import("react").UIEvent<HTMLDivElement, UIEvent>) => void;
     children?: import("react").ReactNode;
-} & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
+} & Pick<import("../tooltip").TooltipProps, "getPopupContainer" | "stopPropagation" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
 declare const FormCheckboxGroup: import("react").ComponentType<import("utility-types").Subtract<import("../checkbox/checkboxGroup").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
 declare const FormCheckbox: import("react").ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox/checkbox").CheckboxProps & import("./interface").RCIncludeType>;
 declare const FormRadioGroup: import("react").ComponentType<import("utility-types").Subtract<import("../radio/radioGroup").RadioGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;

package/lib/cjs/pagination/index.js

@@ -40,6 +40,8 @@ var _constants2 = require("@douyinfe/semi-foundation/lib/cjs/popover/constants")
 
 var _semiIcons = require("@douyinfe/semi-icons");
 
+var _warning = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/warning"));
+
 var _context7 = _interopRequireDefault(require("../configProvider/context"));
 
 var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
@@ -78,6 +80,7 @@ class Pagination extends _baseComponent.default {
     this.foundation = new _foundation.default(this.adapter);
     this.renderDefaultPage = (0, _bind.default)(_context = this.renderDefaultPage).call(_context, this);
     this.renderSmallPage = (0, _bind.default)(_context2 = this.renderSmallPage).call(_context2, this);
+    (0, _warning.default)(Boolean(props.showSizeChanger && props.hideOnSinglePage), '[Semi Pagination] You should not use showSizeChanger and hideOnSinglePage in ths same time. At this time, hideOnSinglePage no longer takes effect, otherwise there may be a problem that the switch entry disappears');
   }
 
   get adapter() {
@@ -370,7 +373,8 @@ class Pagination extends _baseComponent.default {
       className,
       style,
       hideOnSinglePage,
-      hoverShowPageSelect
+      hoverShowPageSelect,
+      showSizeChanger
     } = this.props;
     const paginationCls = (0, _classnames.default)("".concat(prefixCls, "-small"), prefixCls, className);
     const {
@@ -380,7 +384,7 @@ class Pagination extends _baseComponent.default {
     } = this.state;
     const totalPageNum = Math.ceil(total / pageSize);
 
-    if (totalPageNum < 2 && hideOnSinglePage) {
+    if (totalPageNum < 2 && hideOnSinglePage && !showSizeChanger) {
       return null;
     }
 
@@ -410,13 +414,14 @@ class Pagination extends _baseComponent.default {
       showTotal,
       className,
       style,
-      hideOnSinglePage
+      hideOnSinglePage,
+      showSizeChanger
     } = this.props;
     const paginationCls = (0, _classnames.default)(className, "".concat(prefixCls));
     const showTotalCls = "".concat(prefixCls, "-total");
     const totalPageNum = Math.ceil(total / pageSize);
 
-    if (totalPageNum < 2 && hideOnSinglePage) {
+    if (totalPageNum < 2 && hideOnSinglePage && !showSizeChanger) {
       return null;
     }
 

package/lib/cjs/select/index.js

@@ -762,7 +762,9 @@ class Select extends _baseComponent.default {
           key: value
         }), content);
       } else {
-        return content;
+        return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+          key: value
+        }, content);
       }
     });
     const contentWrapperCls = (0, _classnames.default)({

package/lib/cjs/typography/title.d.ts

@@ -37,7 +37,7 @@ export default class Title extends PureComponent<TitleProps> {
         underline: PropTypes.Requireable<boolean>;
         strong: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
-        heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 5 | 6>;
+        heading: PropTypes.Requireable<4 | 2 | 1 | 3 | 5 | 6>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         component: PropTypes.Requireable<string>;

package/lib/es/form/baseForm.d.ts

@@ -111,7 +111,7 @@ declare class Form extends BaseComponent<BaseFormProps, BaseFormState> {
         onBlur?: (e: React.FocusEvent<Element, Element>) => void;
         onListScroll?: (e: React.UIEvent<HTMLDivElement, UIEvent>) => void;
         children?: React.ReactNode;
-    } & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & React.RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
+    } & Pick<import("../tooltip").TooltipProps, "getPopupContainer" | "stopPropagation" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & React.RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
     static Checkbox: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox").CheckboxProps & import("./interface").RCIncludeType>;
     static CheckboxGroup: React.ComponentType<import("utility-types").Subtract<import("../checkbox").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
     static Radio: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../radio").RadioProps & import("./interface").RCIncludeType>;

package/lib/es/form/field.d.ts

@@ -61,7 +61,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
     onBlur?: (e: import("react").FocusEvent<Element, Element>) => void;
     onListScroll?: (e: import("react").UIEvent<HTMLDivElement, UIEvent>) => void;
     children?: import("react").ReactNode;
-} & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
+} & Pick<import("../tooltip").TooltipProps, "getPopupContainer" | "stopPropagation" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
 declare const FormCheckboxGroup: import("react").ComponentType<import("utility-types").Subtract<import("../checkbox/checkboxGroup").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
 declare const FormCheckbox: import("react").ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox/checkbox").CheckboxProps & import("./interface").RCIncludeType>;
 declare const FormRadioGroup: import("react").ComponentType<import("utility-types").Subtract<import("../radio/radioGroup").RadioGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;

package/lib/es/pagination/index.js

@@ -15,6 +15,7 @@ import { cssClasses, numbers } from '@douyinfe/semi-foundation/lib/es/pagination
 import '@douyinfe/semi-foundation/lib/es/pagination/pagination.css';
 import { numbers as popoverNumbers } from '@douyinfe/semi-foundation/lib/es/popover/constants';
 import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
+import warning from '@douyinfe/semi-foundation/lib/es/utils/warning';
 import ConfigContext from '../configProvider/context';
 import LocaleConsumer from '../locale/localeConsumer';
 import Select from '../select/index';
@@ -45,6 +46,7 @@ export default class Pagination extends BaseComponent {
     this.foundation = new PaginationFoundation(this.adapter);
     this.renderDefaultPage = _bindInstanceProperty(_context = this.renderDefaultPage).call(_context, this);
     this.renderSmallPage = _bindInstanceProperty(_context2 = this.renderSmallPage).call(_context2, this);
+    warning(Boolean(props.showSizeChanger && props.hideOnSinglePage), '[Semi Pagination] You should not use showSizeChanger and hideOnSinglePage in ths same time. At this time, hideOnSinglePage no longer takes effect, otherwise there may be a problem that the switch entry disappears');
   }
 
   get adapter() {
@@ -338,7 +340,8 @@ export default class Pagination extends BaseComponent {
       className,
       style,
       hideOnSinglePage,
-      hoverShowPageSelect
+      hoverShowPageSelect,
+      showSizeChanger
     } = this.props;
     const paginationCls = classNames("".concat(prefixCls, "-small"), prefixCls, className);
     const {
@@ -348,7 +351,7 @@ export default class Pagination extends BaseComponent {
     } = this.state;
     const totalPageNum = Math.ceil(total / pageSize);
 
-    if (totalPageNum < 2 && hideOnSinglePage) {
+    if (totalPageNum < 2 && hideOnSinglePage && !showSizeChanger) {
       return null;
     }
 
@@ -377,13 +380,14 @@ export default class Pagination extends BaseComponent {
       showTotal,
       className,
       style,
-      hideOnSinglePage
+      hideOnSinglePage,
+      showSizeChanger
     } = this.props;
     const paginationCls = classNames(className, "".concat(prefixCls));
     const showTotalCls = "".concat(prefixCls, "-total");
     const totalPageNum = Math.ceil(total / pageSize);
 
-    if (totalPageNum < 2 && hideOnSinglePage) {
+    if (totalPageNum < 2 && hideOnSinglePage && !showSizeChanger) {
       return null;
     }
 

package/lib/es/select/index.js

@@ -704,7 +704,9 @@ class Select extends BaseComponent {
           key: value
         }), content);
       } else {
-        return content;
+        return /*#__PURE__*/React.createElement(Fragment, {
+          key: value
+        }, content);
       }
     });
 

package/lib/es/typography/title.d.ts

@@ -37,7 +37,7 @@ export default class Title extends PureComponent<TitleProps> {
         underline: PropTypes.Requireable<boolean>;
         strong: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
-        heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 5 | 6>;
+        heading: PropTypes.Requireable<4 | 2 | 1 | 3 | 5 | 6>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         component: PropTypes.Requireable<string>;

package/navigation/__test__/navigation.test.js

@@ -36,7 +36,7 @@ describe(`Navigation`, () => {
                 onSelect={key => console.log(key)}
                 header={{
                     logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwzthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
-                    text: '直播运营后台',
+                    text: 'Semi 运营后台',
                 }}
                 footer={{
                     collapseButton: true,
@@ -71,7 +71,7 @@ describe(`Navigation`, () => {
                 onSelect={data => console.log('trigger onSelect: ', data)}
                 onClick={data => console.log('trigger onClick: ', data)}
             >
-                <Nav.Header logo={'bytedance_logo'} text={'直播运营后台'} />
+                <Nav.Header logo={'bytedance_logo'} text={'Semi 运营后台'} />
                 <Nav.Item itemKey={'union'} text={'公会中心'} icon={'star'} />
                 <Nav.Sub itemKey={'user'} text="用户管理" icon="user">
                     <Nav.Item itemKey={'golder'} text={'金主管理'} />
@@ -135,7 +135,7 @@ describe(`Navigation`, () => {
                 items={items}
                 header={{
                     logo: 'bytedance_logo',
-                    text: '直播运营后台',
+                    text: 'Semi 运营后台',
                 }}
                 footer={{ collapseButton: true }}
             />
@@ -201,7 +201,7 @@ describe(`Navigation`, () => {
                 onClick={onClick}
                 header={{
                     logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwzthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
-                    text: '直播运营后台',
+                    text: 'Semi 运营后台',
                 }}
                 footer={{
                     collapseButton: true,

package/navigation/_story/AutoOpen/index.js

@@ -55,7 +55,7 @@ const Demo = (props = {}) => {
                 onSelect={key => console.log(key)}
                 header={{
                     logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
-                    text: '直播运营后台',
+                    text: 'Semi运营后台',
                 }}
                 footer={{
                     collapseButton: true,

package/navigation/_story/WithChildren/index.js

@@ -106,7 +106,7 @@ const Demo = (props = {}) => {
                 onOpenChange={onOpenChange}
                 header={{
                     logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
-                    text: '直播运营后台',
+                    text: 'Semi 运营后台',
                 }}
                 footer={{
                     collapseButton: true,

package/navigation/_story/navigation.stories.js

@@ -272,7 +272,7 @@ class HorizontalDemo extends React.Component {
             logo: (
               <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />
             ),
-            text: '直播运营后台',
+            text: 'Semi 运营后台',
           }}
           footer={{
             collapseButton: true,

package/navigation/_story/navigation.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { IconHome, IconHistogram, IconSetting, IconLive, IconUser, IconStar } from '@douyinfe/semi-icons';
+import { IconHome, IconHistogram, IconSetting, IconLive, IconUser, IconStar, IconUserGroup } from '@douyinfe/semi-icons';
 
 import Nav from '..';
 
@@ -15,7 +15,7 @@ stories.add(`default`, () => {
                 <Nav onSelect={(...args: any[]) => console.log(...args)}>
                     <Nav.Header logo={<img src={logo} />} text={'火山运营'} />
                     <Nav.Item itemKey={'1'} text={'Option 1'} icon="mail" link="/mail" />
-                    <Nav.Sub text={'Group 2'} icon="folder" stayWhenClick={true} itemKey={'2'}>
+                    <Nav.Sub text={'Group 2'} icon="folder" itemKey={'2'}>
                         {['2-1', '2-2'].map(k => (
                             <Nav.Item key={k} itemKey={String(k)} text={'Option ' + k} link={`folder/${k}`} />
                         ))}
@@ -27,7 +27,7 @@ stories.add(`default`, () => {
                     </Nav.Sub>
                     <Nav.Item key={3} itemKey={'3'} text={'Option 3'} icon="gift" />
                     <Nav.Item key={4} itemKey={'4'} text={'Option 4'} icon="list" />
-                    <Nav.Sub text={'Group 5'} icon="flag" stayWhenClick={true} itemKey={'5'}>
+                    <Nav.Sub text={'Group 5'} icon="flag" itemKey={'5'}>
                         {['5-1', '5-2'].map(k => (
                             <Nav.Item key={k} itemKey={String(k)} text={'Option ' + k} />
                         ))}
@@ -80,7 +80,7 @@ stories.add(`fix 35`, () => {
                     onSelect={data => console.log('trigger onSelect: ', data)}
                     onClick={data => console.log('trigger onClick: ', data)}
                 >
-                    <Nav.Header logo={<img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />} text={'直播运营后台'} />
+                    <Nav.Header logo={<img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />} text={'Semi 运营后台'} />
                     <Nav.Item itemKey={'union'} text={'公会中心'} icon={<IconStar />} />
                     <Nav.Sub itemKey={'user'} text="用户管理" icon={<IconUser />}>
                         <Nav.Item itemKey={'golder'} text={'金主管理'} />

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.1.5",
+    "version": "2.1.6-alpha.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -15,8 +15,8 @@
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
         "@douyinfe/semi-animation-react": "2.1.5",
-        "@douyinfe/semi-foundation": "2.1.5",
-        "@douyinfe/semi-icons": "2.1.5",
+        "@douyinfe/semi-foundation": "2.1.6-alpha.0",
+        "@douyinfe/semi-icons": "2.1.6-alpha.0",
         "@douyinfe/semi-illustrations": "2.1.5",
         "@douyinfe/semi-theme-default": "2.1.5",
         "@types/react-window": "^1.8.2",
@@ -53,6 +53,14 @@
         "pc component",
         "dark mode"
     ],
+    "homepage": "https://semi.design",
+    "bugs": {
+        "url": "https://github.com/DouyinFE/semi-design/issues"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/DouyinFE"
+    },
     "_unpkg": true,
     "unpkgFiles": [
         "dist/css",
@@ -60,13 +68,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "8e2db56ec6e5a3f2ddf47ec03224e5e6adf443c2",
+    "gitHead": "6721f8e4f803913529db3c51d6d0af5dfe616938",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.1.5",
+        "@douyinfe/semi-scss-compile": "2.1.6-alpha.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/pagination/_story/pagination.stories.js

@@ -146,3 +146,14 @@ export const PaginationDynamicUpdatePageSize = () => <DynamicPageSize />;
 PaginationDynamicUpdatePageSize.story = {
   name: 'Pagination dynamic update pageSize',
 };
+
+
+export const HideOnSingePageAndShowChanger = () => {
+  return (
+    <Pagination total={10} hideOnSinglePage showSizeChanger style={{ marginBottom: 12 }}></Pagination>
+  )
+}
+
+HideOnSingePageAndShowChanger.story = {
+  name: 'hideOnSingelePage & showSizeChanger at same time',
+};

package/pagination/index.tsx

@@ -14,6 +14,7 @@ import { cssClasses, numbers } from '@douyinfe/semi-foundation/pagination/consta
 import '@douyinfe/semi-foundation/pagination/pagination.scss';
 import { numbers as popoverNumbers } from '@douyinfe/semi-foundation/popover/constants';
 import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
+import warning from '@douyinfe/semi-foundation/utils/warning';
 
 import ConfigContext from '../configProvider/context';
 import LocaleConsumer from '../locale/localeConsumer';
@@ -127,6 +128,10 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
         this.foundation = new PaginationFoundation(this.adapter);
         this.renderDefaultPage = this.renderDefaultPage.bind(this);
         this.renderSmallPage = this.renderSmallPage.bind(this);
+        warning(
+            Boolean(props.showSizeChanger && props.hideOnSinglePage),
+            '[Semi Pagination] You should not use showSizeChanger and hideOnSinglePage in ths same time. At this time, hideOnSinglePage no longer takes effect, otherwise there may be a problem that the switch entry disappears'
+        );
     }
 
     get adapter(): PaginationAdapter<PaginationProps, PaginationState> {
@@ -377,11 +382,11 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
     }
 
     renderSmallPage(locale: PaginationLocale) {
-        const { className, style, hideOnSinglePage, hoverShowPageSelect } = this.props;
+        const { className, style, hideOnSinglePage, hoverShowPageSelect, showSizeChanger } = this.props;
         const paginationCls = classNames(`${prefixCls}-small`, prefixCls, className);
         const { currentPage, total, pageSize } = this.state;
         const totalPageNum = Math.ceil(total / pageSize);
-        if (totalPageNum < 2 && hideOnSinglePage) {
+        if (totalPageNum < 2 && hideOnSinglePage && !showSizeChanger) {
             return null;
         }
 
@@ -410,11 +415,11 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
 
     renderDefaultPage(locale: PaginationLocale) {
         const { total, pageSize } = this.state;
-        const { showTotal, className, style, hideOnSinglePage } = this.props;
+        const { showTotal, className, style, hideOnSinglePage, showSizeChanger } = this.props;
         const paginationCls = classNames(className, `${prefixCls}`);
         const showTotalCls = `${prefixCls }-total`;
         const totalPageNum = Math.ceil(total / pageSize);
-        if (totalPageNum < 2 && hideOnSinglePage) {
+        if (totalPageNum < 2 && hideOnSinglePage && !showSizeChanger) {
             return null;
         }
         return (

package/select/_story/select.stories.js

@@ -1033,12 +1033,12 @@ class CustomRender extends React.Component {
     };
   }
 
-  renderCustomOption(item) {
-    let optionStyle = {
+  renderCustomOption(item, index) {
+    const optionStyle = {
       display: 'flex',
     };
     return (
-      <Option value={item.name} style={optionStyle} showTick={false} {...item}>
+      <Option key={index} value={item.name} style={optionStyle} showTick={false} {...item}>
         <Avatar color={item.color} size="small">
           {item.abbr}
         </Avatar>
@@ -1098,7 +1098,7 @@ class CustomRender extends React.Component {
     };
   }
 
-  renderMultipleWithoutTag(optionNode, { onClose, index }) {
+  renderMultipleWithoutTag(optionNode) {
     let content = (
       <div>
         <Avatar color={optionNode.color} size="small">
@@ -1125,7 +1125,7 @@ class CustomRender extends React.Component {
           defaultValue={'夏可漫'}
           renderSelectedItem={this.renderSelectedItem}
         >
-          {list.map(item => this.renderCustomOption(item))}
+          {list.map((item, index) => this.renderCustomOption(item, index))}
         </Select>
         <Select
           style={{
@@ -1138,7 +1138,7 @@ class CustomRender extends React.Component {
           multiple
           renderSelectedItem={this.renderMultipleSelectedItem}
         >
-          {list.map(item => this.renderCustomOption(item))}
+          {list.map((item, index) => this.renderCustomOption(item, index))}
         </Select>
         <Select
           style={{
@@ -1151,7 +1151,7 @@ class CustomRender extends React.Component {
           multiple
           renderSelectedItem={this.renderMultipleWithoutTag}
         >
-          {list.map(item => this.renderCustomOption(item))}
+          {list.map((item, index) => this.renderCustomOption(item, index))}
         </Select>
       </React.Fragment>
     );
@@ -2122,15 +2122,15 @@ class OptionGroupDemo extends React.Component {
     });
   }
 
-  renderGroup(group) {
-    let options = group.children.map(option => (
-      <Select.Option value={option.value} label={option.label} key={option.label}></Select.Option>
+  renderGroup(group, index) {
+    const options = group.children.map(option => (
+      <Select.Option value={option.value} label={option.label} key={option.label} />
     ));
-    return <Select.OptGroup label={group.label}>{options}</Select.OptGroup>;
+    return <Select.OptGroup key={`${index}-${group.label}`} label={group.label}>{options}</Select.OptGroup>;
   }
 
   render() {
-    let { groups } = this.state;
+    const { groups } = this.state;
     return (
       <>
         <Select
@@ -2142,14 +2142,14 @@ class OptionGroupDemo extends React.Component {
           onSearch={this.handleSearch}
           remote
         >
-          {groups.map(group => this.renderGroup(group))}
+          {groups.map((group, index) => this.renderGroup(group, index))}
         </Select>
       </>
     );
   }
 }
 
-export const SelectOptionGroup = () => <OptionGroupDemo></OptionGroupDemo>;
+export const SelectOptionGroup = () => <OptionGroupDemo />;
 
 SelectOptionGroup.story = {
   name: 'Select OptionGroup',

package/select/index.tsx

@@ -883,7 +883,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
                     </Tag>
                 );
             } else {
-                return content;
+                return <Fragment key={value}>{content}</Fragment>;
             }
         });
 

package/table/_story/DynamicFilters/index.js

@@ -6,22 +6,19 @@ class App extends React.Component {
     constructor() {
         super();
         const labels = [
-            { text: '范政源测试', value: 1428 },
-            { text: '商业化接单候选人', value: 4 },
-            { text: '华星MCN签约', value: 6 },
-            { text: '抖音', value: 18 },
-            { text: '抖音认证特效师', value: 3 },
-            { text: '测试boe能解决', value: 1427 },
-            { text: 'a哈哈哈哈', value: 1 },
-            { text: '测试啊', value: 1406 },
-            { text: 'asa', value: 1404 },
-            { text: '啊啊啊啊啊啊大 sad但', value: 1401 },
-            { text: 'chess', value: 1397 },
-            { text: '试试看嗷', value: 1396 },
-            { text: '爆款特效师', value: 2 },
-            { text: '123456789123', value: 24 },
-            { text: '哈哈', value: 23 },
-            { text: '匠子空间mcn签约', value: 7 },
+            { text: '测试数据0', value: 4 },
+            { text: '测试数据1', value: 18 },
+            { text: '测试数据2', value: 3 },
+            { text: '测试数据3', value: 1427 },
+            { text: '测试数据4', value: 1 },
+            { text: '测试数据5', value: 1406 },
+            { text: '测试数据6', value: 1404 },
+            { text: '测试数据7', value: 1401 },
+            { text: '测试数据8', value: 1397 },
+            { text: '测试数据9', value: 1396 },
+            { text: '测试数据10', value: 2 },
+            { text: '测试数据11', value: 24 },
+            { text: '测试数据12', value: 23 },
         ];
         this.state = {
             data: datsJson,