@douyinfe/semi-ui 2.22.3 → 2.23.0-alpha.2

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

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import { Subtract } from 'utility-types';
 import type { RuleItem } from 'async-validator';
-import { Options as scrollIntoViewOptions } from 'scroll-into-view-if-needed';
-import { BaseFormApi as FormApi, FormState, WithFieldOption } from '@douyinfe/semi-foundation/lib/es/form/interface';
-import { SelectProps } from '../select/index';
+import type { Options as scrollIntoViewOptions } from 'scroll-into-view-if-needed';
+import type { BaseFormApi as FormApi, FormState, WithFieldOption, AllErrors } from '@douyinfe/semi-foundation/lib/es/form/interface';
+import type { SelectProps } from '../select/index';
 import Option from '../select/option';
 import OptGroup from '../select/optionGroup';
-import { CheckboxProps } from '../checkbox/index';
-import { RadioProps } from '../radio/index';
+import type { CheckboxProps } from '../checkbox/index';
+import type { RadioProps } from '../radio/index';
 import { ReactFieldError as FieldError } from './errorMessage';
-import { LabelProps } from './label';
-export { FormState, FormApi, WithFieldOption, RuleItem };
+import type { LabelProps } from './label';
+export type { FormState, FormApi, WithFieldOption, RuleItem };
 export declare type CommonFieldProps = {
     /** Field is required (except Form. Checkbox within the Group, Form. Radio) */
     field: string;
@@ -81,19 +81,19 @@ export interface FormFCChild<K extends Record<string, any> = any> {
     values: K;
     formApi: FormApi<K>;
 }
-export interface BaseFormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'children' | 'onChange'> {
+export interface BaseFormProps<Values extends Record<string, any> = any> extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'children' | 'onChange' | 'onSubmit' | 'onReset'> {
     'aria-label'?: React.AriaAttributes['aria-label'];
-    onSubmit?: (values: Record<string, any>) => void;
-    onSubmitFail?: (errors: Record<string, FieldError>, values: any) => void;
+    onSubmit?: (values: Values) => void;
+    onSubmitFail?: (errors: Record<keyof Values, FieldError>, values: Partial<Values>) => void;
     onReset?: () => void;
-    onValueChange?: (values: Record<string, any>, changedValue: Record<string, any>) => void;
-    onChange?: (formState: FormState) => void;
-    validateFields?: (values: Record<string, any>) => string | Record<string, any>;
+    onValueChange?: (values: Values, changedValue: Partial<Values>) => void;
+    onChange?: (formState: FormState<Values>) => void;
+    validateFields?: (values: Values) => string | Partial<AllErrors<Values>>;
     /** Use this if you want to populate the form with initial values. */
-    initValues?: Record<string, any>;
+    initValues?: Values;
     id?: string;
     /** getFormApi will be call once when Form mounted, u can save formApi reference in your component  */
-    getFormApi?: (formApi: FormApi) => void;
+    getFormApi?: (formApi: FormApi<Values>) => void;
     style?: React.CSSProperties;
     className?: string;
     layout?: 'horizontal' | 'vertical';

package/lib/es/image/image.js

@@ -1,4 +1,5 @@
 import _isObject from "lodash/isObject";
+import _isBoolean from "lodash/isBoolean";
 
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 
@@ -131,6 +132,16 @@ export default class Image extends BaseComponent {
       willUpdateStates.loadStatus = "loading";
     }
 
+    if (_isObject(props.preview)) {
+      const {
+        visible
+      } = props.preview;
+
+      if (_isBoolean(visible)) {
+        willUpdateStates.previewVisible = visible;
+      }
+    }
+
     return willUpdateStates;
   }
 

package/lib/es/image/interface.d.ts

@@ -60,7 +60,7 @@ export interface PreviewProps extends BaseProps {
     onPrev?: (index: number) => void;
     onNext?: (index: number) => void;
     onRatioChange?: (type: RatioType) => void;
-    onRotateChange?: (angle: number) => void;
+    onRotateLeft?: (angle: number) => void;
     onDownload?: (src: string, index: number) => void;
 }
 export interface MenuProps {

package/lib/es/image/preview.d.ts

@@ -44,8 +44,8 @@ export default class Preview extends BaseComponent<PreviewProps, PreviewState> {
         onPrev: PropTypes.Requireable<(...args: any[]) => any>;
         onNext: PropTypes.Requireable<(...args: any[]) => any>;
         onDownload: PropTypes.Requireable<(...args: any[]) => any>;
+        onRotateLeft: PropTypes.Requireable<(...args: any[]) => any>;
         onRatioChange: PropTypes.Requireable<(...args: any[]) => any>;
-        onRotateChange: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {
         src: any[];

package/lib/es/image/preview.js

@@ -220,8 +220,8 @@ Preview.propTypes = {
   onPrev: PropTypes.func,
   onNext: PropTypes.func,
   onDownload: PropTypes.func,
-  onRatioChange: PropTypes.func,
-  onRotateChange: PropTypes.func
+  onRotateLeft: PropTypes.func,
+  onRatioChange: PropTypes.func
 };
 Preview.defaultProps = {
   src: [],

package/lib/es/image/previewImage.d.ts

@@ -13,7 +13,7 @@ export default class PreviewImage extends BaseComponent<PreviewImageProps, Previ
         zoomStep: PropTypes.Requireable<number>;
         zoom: PropTypes.Requireable<number>;
         ratio: PropTypes.Requireable<string>;
-        disableDownload: PropTypes.Requireable<number>;
+        disableDownload: PropTypes.Requireable<boolean>;
         clickZoom: PropTypes.Requireable<number>;
         setRatio: PropTypes.Requireable<(...args: any[]) => any>;
         onZoom: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/es/image/previewImage.js

@@ -223,7 +223,7 @@ PreviewImage.propTypes = {
   zoomStep: PropTypes.number,
   zoom: PropTypes.number,
   ratio: PropTypes.string,
-  disableDownload: PropTypes.number,
+  disableDownload: PropTypes.bool,
   clickZoom: PropTypes.number,
   setRatio: PropTypes.func,
   onZoom: PropTypes.func,

package/lib/es/image/previewInner.d.ts

@@ -45,7 +45,7 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
         onNext: PropTypes.Requireable<(...args: any[]) => any>;
         onDownload: PropTypes.Requireable<(...args: any[]) => any>;
         onRatioChange: PropTypes.Requireable<(...args: any[]) => any>;
-        onRotateChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onRotateLeft: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {
         showTooltip: boolean;

package/lib/es/image/previewInner.js

@@ -105,11 +105,19 @@ export default class PreviewInner extends BaseComponent {
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
       getIsInGroup: () => this.isInGroup(),
-      notifyChange: index => {
+      notifyChange: (index, direction) => {
         const {
-          onChange
+          onChange,
+          onPrev,
+          onNext
         } = this.props;
         _isFunction(onChange) && onChange(index);
+
+        if (direction === "prev") {
+          onPrev && onPrev(index);
+        } else {
+          onNext && onNext(index);
+        }
       },
       notifyZoom: (zoom, increase) => {
         const {
@@ -143,9 +151,9 @@ export default class PreviewInner extends BaseComponent {
       },
       notifyRotateChange: angle => {
         const {
-          onRotateChange
+          onRotateLeft
         } = this.props;
-        _isFunction(onRotateChange) && onRotateChange(angle);
+        _isFunction(onRotateLeft) && onRotateLeft(angle);
       },
       notifyDownload: (src, index) => {
         const {
@@ -403,7 +411,7 @@ PreviewInner.propTypes = {
   onNext: PropTypes.func,
   onDownload: PropTypes.func,
   onRatioChange: PropTypes.func,
-  onRotateChange: PropTypes.func
+  onRotateLeft: PropTypes.func
 };
 PreviewInner.defaultProps = {
   showTooltip: false,

package/lib/es/locale/source/tr_TR.js

@@ -80,8 +80,8 @@ const local = {
       Wed: 'Çar',
       Thu: 'Perş',
       Fri: 'Cum',
-      Sat: 'Oturdu',
-      Sun: 'Güneş'
+      Sat: 'Cmt',
+      Sun: 'Paz'
     },
     localeFormatToken: {
       FORMAT_SWITCH_DATE: 'yyyy-MM-dd'

package/lib/es/navigation/Item.d.ts

@@ -12,6 +12,7 @@ export interface NavItemProps extends ItemProps, BaseProps {
     level?: number;
     link?: string;
     linkOptions?: React.AnchorHTMLAttributes<HTMLAnchorElement>;
+    tabIndex?: number;
     text?: React.ReactNode;
     tooltipHideDelay?: number;
     tooltipShowDelay?: number;
@@ -45,6 +46,7 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
         link: PropTypes.Requireable<string>;
         linkOptions: PropTypes.Requireable<object>;
         disabled: PropTypes.Requireable<boolean>;
+        tabIndex: PropTypes.Requireable<number>;
     };
     static defaultProps: {
         isSubNav: boolean;
@@ -55,6 +57,7 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
         onMouseEnter: (...args: any[]) => void;
         onMouseLeave: (...args: any[]) => void;
         disabled: boolean;
+        tabIndex: number;
     };
     foundation: ItemFoundation;
     context: NavContextType;

package/lib/es/navigation/Item.js

@@ -148,7 +148,8 @@ export default class NavItem extends BaseComponent {
       link,
       linkOptions,
       disabled,
-      level = 0
+      level = 0,
+      tabIndex
     } = this.props;
     const {
       mode,
@@ -211,7 +212,8 @@ export default class NavItem extends BaseComponent {
         ["".concat(clsPrefix, "-sub")]: isSubNav,
         ["".concat(clsPrefix, "-selected")]: selected && !isSubNav,
         ["".concat(clsPrefix, "-collapsed")]: isCollapsed,
-        ["".concat(clsPrefix, "-disabled")]: disabled
+        ["".concat(clsPrefix, "-disabled")]: disabled,
+        ["".concat(clsPrefix, "-has-link")]: typeof link === 'string'
       });
       const ariaProps = {
         'aria-disabled': disabled
@@ -228,7 +230,7 @@ export default class NavItem extends BaseComponent {
       React.createElement("li", Object.assign({
         // if role = menuitem, the narration will read all expanded li
         role: isSubNav ? null : "menuitem",
-        tabIndex: isSubNav ? -1 : 0
+        tabIndex: isSubNav ? -1 : tabIndex
       }, ariaProps, {
         style: style,
         ref: this.setItemRef,
@@ -267,7 +269,8 @@ NavItem.propTypes = {
   isSubNav: PropTypes.bool,
   link: PropTypes.string,
   linkOptions: PropTypes.object,
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  tabIndex: PropTypes.number
 };
 NavItem.defaultProps = {
   isSubNav: false,
@@ -277,5 +280,6 @@ NavItem.defaultProps = {
   onClick: _noop,
   onMouseEnter: _noop,
   onMouseLeave: _noop,
-  disabled: false
+  disabled: false,
+  tabIndex: 0
 };

package/lib/es/select/index.js

@@ -405,7 +405,7 @@ class Select extends BaseComponent {
     } // Add isOptionChanged: There may be cases where the value is unchanged, but the optionList is updated. At this time, the label corresponding to the value may change, and the selected item needs to be updated
 
 
-    if (prevProps.value !== this.props.value || isOptionsChanged) {
+    if (!_isEqual(this.props.value, prevProps.value) || isOptionsChanged) {
       if ('value' in this.props) {
         this.foundation.handleValueChange(this.props.value);
       } else {

package/lib/es/table/Body/index.js

@@ -30,7 +30,7 @@ import classnames from 'classnames';
 import { VariableSizeList as List } from 'react-window';
 import { arrayAdd, getRecordKey, isExpanded, isSelected, isDisabled, getRecord, genExpandedRowKey, getDefaultVirtualizedRowConfig, isTreeTable } from '@douyinfe/semi-foundation/lib/es/table/utils';
 import BodyFoundation from '@douyinfe/semi-foundation/lib/es/table/bodyFoundation';
-import { strings } from '@douyinfe/semi-foundation/lib/es/table/constants';
+import { strings, numbers } from '@douyinfe/semi-foundation/lib/es/table/constants';
 import BaseComponent from '../../_base/baseComponent';
 import { logger } from '../utils';
 import ColGroup from '../ColGroup';
@@ -247,7 +247,7 @@ class Body extends BaseComponent {
           width: tableWidth
         },
         className: tableCls
-      }, _size(dataSource) === 0 ? emptySlot : children));
+      }, children), _size(dataSource) === 0 && emptySlot);
     });
 
     this.onItemsRendered = props => {
@@ -287,7 +287,7 @@ class Body extends BaseComponent {
 
       const listStyle = {
         width: '100%',
-        height: (virtualizedData === null || virtualizedData === void 0 ? void 0 : virtualizedData.length) ? y : 0,
+        height: (virtualizedData === null || virtualizedData === void 0 ? void 0 : virtualizedData.length) ? y : numbers.DEFAULT_EMPTYSLOT_HEIGHT,
         overflowX: 'auto',
         overflowY: 'auto'
       };

package/lib/es/table/Table.js

@@ -632,8 +632,9 @@ class Table extends BaseComponent {
         useFixedHeader,
         headerRef: this._cacheHeaderRef,
         bodyRef: this.bodyWrapRef,
-        includeHeader: !useFixedHeader
-      })), emptySlot, this.renderFooter(props)];
+        includeHeader: !useFixedHeader,
+        emptySlot
+      })), this.renderFooter(props)];
       return table;
     };
 

package/lib/es/tagInput/index.d.ts

@@ -37,7 +37,7 @@ export interface TagInputProps {
     insetLabel?: React.ReactNode;
     insetLabelId?: string;
     prefix?: React.ReactNode;
-    renderTagItem?: (value: string, index: number) => React.ReactNode;
+    renderTagItem?: (value: string, index: number, onClose: () => void) => React.ReactNode;
     separator?: string | string[] | null;
     showClear?: boolean;
     size?: Size;

package/lib/es/tagInput/index.js

@@ -123,20 +123,22 @@ class TagInput extends BaseComponent {
       return tagsArray.map((value, index) => {
         const elementKey = showIconHandler ? value : "".concat(index).concat(value);
 
+        const onClose = () => {
+          !disabled && this.handleTagClose(index);
+        };
+
         if (_isFunction(renderTagItem)) {
           return showIconHandler ? /*#__PURE__*/React.createElement("div", {
             className: itemWrapperCls,
             key: elementKey
-          }, /*#__PURE__*/React.createElement(DragHandle, null), renderTagItem(value, index)) : renderTagItem(value, index);
+          }, /*#__PURE__*/React.createElement(DragHandle, null), renderTagItem(value, index, onClose)) : renderTagItem(value, index, onClose);
         } else {
           return /*#__PURE__*/React.createElement(Tag, {
             className: tagCls,
             color: "white",
             size: size === 'small' ? 'small' : 'large',
             type: "light",
-            onClose: () => {
-              !disabled && this.handleTagClose(index);
-            },
+            onClose: onClose,
             closable: !disabled,
             key: elementKey,
             visible: true,

package/lib/es/tooltip/index.d.ts

@@ -37,6 +37,12 @@ export interface TooltipProps extends BaseProps {
     onVisibleChange?: (visible: boolean) => void;
     onClickOutSide?: (e: React.MouseEvent) => void;
     spacing?: number;
+    margin?: number | {
+        marginLeft: number;
+        marginTop: number;
+        marginRight: number;
+        marginBottom: number;
+    };
     showArrow?: boolean | React.ReactNode;
     zIndex?: number;
     rePosKey?: string | number;
@@ -96,6 +102,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         onVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
         onClickOutSide: PropTypes.Requireable<(...args: any[]) => any>;
         spacing: PropTypes.Requireable<number>;
+        margin: PropTypes.Requireable<NonNullable<number | object>>;
         showArrow: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         zIndex: PropTypes.Requireable<number>;
         rePosKey: PropTypes.Requireable<NonNullable<string | number>>;
@@ -134,6 +141,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         onVisibleChange: (...args: any[]) => void;
         onClickOutSide: (...args: any[]) => void;
         spacing: 8;
+        margin: 0;
         showArrow: boolean;
         wrapWhenSpecial: boolean;
         zIndex: 1060;

package/lib/es/tooltip/index.js

@@ -1,3 +1,4 @@
+import _isEqual from "lodash/isEqual";
 import _isFunction from "lodash/isFunction";
 import _isEmpty from "lodash/isEmpty";
 import _each from "lodash/each";
@@ -585,7 +586,7 @@ export default class Tooltip extends BaseComponent {
       this.props.visible ? this.foundation.delayShow() : this.foundation.delayHide();
     }
 
-    if (prevProps.rePosKey !== this.props.rePosKey) {
+    if (!_isEqual(prevProps.rePosKey, this.props.rePosKey)) {
       this.rePosition();
     }
   }
@@ -695,6 +696,7 @@ Tooltip.propTypes = {
   onVisibleChange: PropTypes.func,
   onClickOutSide: PropTypes.func,
   spacing: PropTypes.number,
+  margin: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
   showArrow: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
   zIndex: PropTypes.number,
   rePosKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -724,6 +726,7 @@ Tooltip.defaultProps = {
   onVisibleChange: _noop,
   onClickOutSide: _noop,
   spacing: numbers.SPACING,
+  margin: numbers.MARGIN,
   showArrow: true,
   wrapWhenSpecial: true,
   zIndex: numbers.DEFAULT_Z_INDEX,

package/lib/es/transfer/index.d.ts

@@ -152,6 +152,7 @@ declare class Transfer extends BaseComponent<TransferProps, TransferState> {
     static getDerivedStateFromProps(props: TransferProps, state: TransferState): TransferState;
     get adapter(): TransferAdapter<TransferProps, TransferState>;
     onInputChange(value: string): void;
+    search(value: string): void;
     onSelectOrRemove(item: ResolvedDataItem): void;
     onSortEnd(callbackProps: OnSortEndProps): void;
     renderFilter(locale: Locale['Transfer']): JSX.Element;

package/lib/es/transfer/index.js

@@ -125,7 +125,13 @@ class Transfer extends BaseComponent {
   }
 
   onInputChange(value) {
-    this.foundation.handleInputChange(value);
+    this.foundation.handleInputChange(value, true);
+  }
+
+  search(value) {
+    // The search method is used to provide the user with a manually triggered search
+    // Since the method is manually called by the user, setting the second parameter to false does not trigger the onSearch callback to notify the user
+    this.foundation.handleInputChange(value, false);
   }
 
   onSelectOrRemove(item) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.22.3",
+    "version": "2.23.0-alpha.2",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -18,11 +18,11 @@
     ],
     "dependencies": {
         "@douyinfe/semi-animation": "2.12.0",
-        "@douyinfe/semi-animation-react": "2.22.3",
-        "@douyinfe/semi-foundation": "2.22.3",
-        "@douyinfe/semi-icons": "2.22.3",
+        "@douyinfe/semi-animation-react": "2.23.0-alpha.2",
+        "@douyinfe/semi-foundation": "2.23.0-alpha.2",
+        "@douyinfe/semi-icons": "2.23.0-alpha.2",
         "@douyinfe/semi-illustrations": "2.15.0",
-        "@douyinfe/semi-theme-default": "2.22.3",
+        "@douyinfe/semi-theme-default": "2.23.0-alpha.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "8cff064f240ea2a919c3527ae9b84e66c5b7a419",
+    "gitHead": "5671959bf3521da5e2e24b0c7afaf82915f4ce81",
     "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.22.3",
+        "@douyinfe/semi-scss-compile": "2.23.0-alpha.2",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "@types/react": ">=16.0.0",