@douyinfe/semi-ui 2.6.0-beta.0 → 2.7.0

package/lib/es/datePicker/datePicker.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import DatePickerFoundation, { DatePickerAdapter, DatePickerFoundationProps, DatePickerFoundationState, DayStatusType, PresetType, Type } from '@douyinfe/semi-foundation/lib/es/datePicker/foundation';
+import DatePickerFoundation, { DatePickerAdapter, DatePickerFoundationProps, DatePickerFoundationState, DayStatusType, PresetType, Type, RangeType } from '@douyinfe/semi-foundation/lib/es/datePicker/foundation';
 import BaseComponent from '../_base/baseComponent';
 import { DateInputProps } from './dateInput';
 import MonthsGrid, { MonthsGridProps } from './monthsGrid';
 import { YearAndMonthProps } from './yearAndMonth';
 import '@douyinfe/semi-foundation/lib/es/datePicker/datePicker.css';
 import { Locale } from '../locale/interface';
-import { RangeType } from '@douyinfe/semi-foundation/lib/es/datePicker/inputFoundation';
 import { TimePickerProps } from '../timePicker/TimePicker';
+import { InsetInputChangeProps } from '@douyinfe/semi-foundation/lib/es/datePicker/inputFoundation';
 export interface DatePickerProps extends DatePickerFoundationProps {
     'aria-describedby'?: React.AriaAttributes['aria-describedby'];
     'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
@@ -143,6 +143,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         autoSwitchDate: boolean;
         syncSwitchMonth: boolean;
         rangeSeparator: " ~ ";
+        insetInput: boolean;
     };
     triggerElRef: React.MutableRefObject<HTMLElement>;
     panelRef: React.RefObject<HTMLDivElement>;
@@ -171,6 +172,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
     renderQuickControls(): JSX.Element;
     handleOpenPanel: () => void;
     handleInputChange: DatePickerFoundation['handleInputChange'];
+    handleInsetInputChange: (options: InsetInputChangeProps) => void;
     handleInputComplete: DatePickerFoundation['handleInputComplete'];
     handleInputBlur: DateInputProps['onBlur'];
     handleInputFocus: DatePickerFoundation['handleInputFocus'];
@@ -181,6 +183,9 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
     handleRangeInputClear: DatePickerFoundation['handleRangeInputClear'];
     handleRangeEndTabPress: DatePickerFoundation['handleRangeEndTabPress'];
     isAnotherPanelHasOpened: (currentRangeInput: RangeType) => boolean;
+    handleInsetDateFocus: (e: React.FocusEvent, rangeType: 'rangeStart' | 'rangeEnd') => void;
+    handleInsetTimeFocus: () => void;
+    handlePanelVisibleChange: (visible: boolean) => void;
     renderInner(extraProps?: Partial<DatePickerProps>): JSX.Element;
     handleConfirm: (e: React.MouseEvent) => void;
     handleCancel: (e: React.MouseEvent) => void;

package/lib/es/datePicker/datePicker.js

@@ -1,3 +1,4 @@
+import _isEqual from "lodash/isEqual";
 import _isFunction from "lodash/isFunction";
 import _get from "lodash/get";
 import _isDate from "lodash/isDate";
@@ -12,6 +13,10 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/interactive-supports-focus */
 
 /* eslint-disable max-len */
+
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 import React from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
@@ -65,6 +70,8 @@ export default class DatePicker extends BaseComponent {
       return _this.foundation.handleInputChange(...arguments);
     };
 
+    this.handleInsetInputChange = options => this.foundation.handleInsetInputChange(options);
+
     this.handleInputComplete = v => this.foundation.handleInputComplete(v);
 
     this.handleInputBlur = e => this.foundation.handleInputBlur(_get(e, 'nativeEvent.target.value'), e);
@@ -93,6 +100,30 @@ export default class DatePicker extends BaseComponent {
       }
     };
 
+    this.handleInsetDateFocus = (e, rangeType) => {
+      const monthGridFoundation = _get(this, 'monthGrid.current.foundation');
+
+      if (monthGridFoundation) {
+        monthGridFoundation.showDatePanel(strings.PANEL_TYPE_LEFT);
+        monthGridFoundation.showDatePanel(strings.PANEL_TYPE_RIGHT);
+      }
+
+      this.handleInputFocus(e, rangeType);
+    };
+
+    this.handleInsetTimeFocus = () => {
+      const monthGridFoundation = _get(this, 'monthGrid.current.foundation');
+
+      if (monthGridFoundation) {
+        monthGridFoundation.showTimePicker(strings.PANEL_TYPE_LEFT);
+        monthGridFoundation.showTimePicker(strings.PANEL_TYPE_RIGHT);
+      }
+    };
+
+    this.handlePanelVisibleChange = visible => {
+      this.foundation.handlePanelVisibleChange(visible);
+    };
+
     this.handleConfirm = e => this.foundation.handleConfirm();
 
     this.handleCancel = e => this.foundation.handleCancel();
@@ -116,19 +147,43 @@ export default class DatePicker extends BaseComponent {
         dropdownStyle,
         density,
         topSlot,
-        bottomSlot
+        bottomSlot,
+        insetInput,
+        type,
+        format,
+        rangeSeparator
       } = this.props;
+      const {
+        insetInputValue,
+        value
+      } = this.state;
       const wrapCls = classnames(cssClasses.PREFIX, {
         [cssClasses.PANEL_YAM]: this.adapter.typeIsYearOrMonth(),
         ["".concat(cssClasses.PREFIX, "-compact")]: density === 'compact'
       }, dropdownClassName);
+      const insetInputProps = {
+        dateFnsLocale,
+        format,
+        insetInputValue,
+        rangeSeparator,
+        type,
+        value: value,
+        handleInsetDateFocus: this.handleInsetDateFocus,
+        handleInsetTimeFocus: this.handleInsetTimeFocus,
+        onInsetInputChange: this.handleInsetInputChange,
+        rangeInputStartRef: this.rangeInputStartRef,
+        rangeInputEndRef: this.rangeInputEndRef,
+        density
+      };
       return /*#__PURE__*/React.createElement("div", {
         ref: this.panelRef,
         className: wrapCls,
         style: dropdownStyle
       }, topSlot && /*#__PURE__*/React.createElement("div", {
         className: "".concat(cssClasses.PREFIX, "-topSlot")
-      }, topSlot), this.adapter.typeIsYearOrMonth() ? this.renderYearMonthPanel(locale, localeCode) : this.renderMonthGrid(locale, localeCode, dateFnsLocale), this.renderQuickControls(), bottomSlot && /*#__PURE__*/React.createElement("div", {
+      }, topSlot), insetInput && /*#__PURE__*/React.createElement(DateInput, _Object$assign({}, insetInputProps, {
+        insetInput: true
+      })), this.adapter.typeIsYearOrMonth() ? this.renderYearMonthPanel(locale, localeCode) : this.renderMonthGrid(locale, localeCode, dateFnsLocale), this.renderQuickControls(), bottomSlot && /*#__PURE__*/React.createElement("div", {
         className: "".concat(cssClasses.PREFIX, "-bottomSlot")
       }, bottomSlot), this.renderFooter(locale, localeCode));
     };
@@ -192,7 +247,8 @@ export default class DatePicker extends BaseComponent {
         position: position,
         visible: panelShow,
         stopPropagation: stopPropagation,
-        spacing: spacing
+        spacing: spacing,
+        onVisibleChange: this.handlePanelVisibleChange
       }, children);
     };
 
@@ -205,7 +261,9 @@ export default class DatePicker extends BaseComponent {
       prevTimeZone: null,
       motionEnd: false,
       rangeInputFocus: undefined,
-      autofocus: props.autoFocus || this.isRangeType(props.type, props.triggerRender) && (props.open || props.defaultOpen)
+      autofocus: props.autoFocus || this.isRangeType(props.type, props.triggerRender) && (props.open || props.defaultOpen),
+      insetInputValue: null,
+      triggerDisabled: undefined
     };
     this.adapter.setCache('cachedSelectedValue', null);
     this.triggerElRef = /*#__PURE__*/React.createRef();
@@ -308,6 +366,17 @@ export default class DatePicker extends BaseComponent {
           inputValue
         });
       },
+      updateInsetInputValue: insetInputValue => {
+        const {
+          insetInput
+        } = this.props;
+
+        if (insetInput && !_isEqual(insetInputValue, this.state.insetInputValue)) {
+          this.setState({
+            insetInputValue
+          });
+        }
+      },
       needConfirm: () => {
         var _context;
 
@@ -382,7 +451,38 @@ export default class DatePicker extends BaseComponent {
         }
       },
       couldPanelClosed: () => this.focusRecordsRef.current.rangeStart && this.focusRecordsRef.current.rangeEnd,
-      isEventTarget: e => e && e.target === e.currentTarget
+      isEventTarget: e => e && e.target === e.currentTarget,
+      setInsetInputFocus: () => {
+        const {
+          rangeInputFocus
+        } = this.state;
+
+        switch (rangeInputFocus) {
+          case 'rangeEnd':
+            if (document.activeElement !== this.rangeInputEndRef.current) {
+              const inputEndNode = _get(this, 'rangeInputEndRef.current');
+
+              inputEndNode && inputEndNode.focus();
+            }
+
+            break;
+
+          case 'rangeStart':
+          default:
+            if (document.activeElement !== this.rangeInputStartRef.current) {
+              const inputStartNode = _get(this, 'rangeInputStartRef.current');
+
+              inputStartNode && inputStartNode.focus();
+            }
+
+            break;
+        }
+      },
+      setTriggerDisabled: disabled => {
+        this.setState({
+          triggerDisabled: disabled
+        });
+      }
     });
   }
 
@@ -440,7 +540,8 @@ export default class DatePicker extends BaseComponent {
       syncSwitchMonth,
       onPanelChange,
       timeZone,
-      triggerRender
+      triggerRender,
+      insetInput
     } = this.props;
     const {
       value,
@@ -488,7 +589,8 @@ export default class DatePicker extends BaseComponent {
       onPanelChange: onPanelChange,
       timeZone: timeZone,
       focusRecordsRef: this.focusRecordsRef,
-      triggerRender: triggerRender
+      triggerRender: triggerRender,
+      insetInput: insetInput
     });
   }
 
@@ -524,20 +626,23 @@ export default class DatePicker extends BaseComponent {
       triggerRender,
       size,
       inputReadOnly,
-      rangeSeparator
+      rangeSeparator,
+      insetInput
     } = this.props;
     const {
       value,
       inputValue,
-      rangeInputFocus
+      rangeInputFocus,
+      triggerDisabled
     } = this.state; // This class is not needed when triggerRender is function
 
     const isRangeType = this.isRangeType(type, triggerRender);
+    const inputDisabled = disabled || insetInput && triggerDisabled;
     const inputCls = classnames("".concat(cssClasses.PREFIX, "-input"), {
       ["".concat(cssClasses.PREFIX, "-range-input")]: isRangeType,
       [_concatInstanceProperty(_context3 = "".concat(cssClasses.PREFIX, "-range-input-")).call(_context3, size)]: isRangeType && size,
-      ["".concat(cssClasses.PREFIX, "-range-input-active")]: isRangeType && rangeInputFocus && !disabled,
-      ["".concat(cssClasses.PREFIX, "-range-input-disabled")]: isRangeType && disabled,
+      ["".concat(cssClasses.PREFIX, "-range-input-active")]: isRangeType && rangeInputFocus && !inputDisabled,
+      ["".concat(cssClasses.PREFIX, "-range-input-disabled")]: isRangeType && inputDisabled,
       [_concatInstanceProperty(_context4 = "".concat(cssClasses.PREFIX, "-range-input-")).call(_context4, validateStatus)]: isRangeType && validateStatus
     });
     const phText = placeholder || locale.placeholder[type]; // i18n
@@ -545,9 +650,9 @@ export default class DatePicker extends BaseComponent {
 
     const props = _Object$assign(_Object$assign({}, extraProps), {
       placeholder: phText,
-      disabled,
+      disabled: inputDisabled,
       inputValue,
-      value,
+      value: value,
       onChange: this.handleInputChange,
       onEnterPress: this.handleInputComplete,
       // TODO: remove in next major version
@@ -560,7 +665,7 @@ export default class DatePicker extends BaseComponent {
       format,
       multiple,
       validateStatus,
-      inputReadOnly,
+      inputReadOnly: inputReadOnly || insetInput,
       // onClick: this.handleOpenPanel,
       onBlur: this.handleInputBlur,
       onFocus: this.handleInputFocus,
@@ -569,13 +674,13 @@ export default class DatePicker extends BaseComponent {
       size,
       autofocus: this.state.autofocus,
       dateFnsLocale,
-      rangeInputStartRef: this.rangeInputStartRef,
-      rangeInputEndRef: this.rangeInputEndRef,
       rangeInputFocus,
       rangeSeparator,
       onRangeBlur: this.handleRangeInputBlur,
       onRangeClear: this.handleRangeInputClear,
-      onRangeEndTabPress: this.handleRangeEndTabPress
+      onRangeEndTabPress: this.handleRangeEndTabPress,
+      rangeInputStartRef: insetInput ? null : this.rangeInputStartRef,
+      rangeInputEndRef: insetInput ? null : this.rangeInputEndRef
     });
 
     return /*#__PURE__*/React.createElement("div", {
@@ -723,5 +828,6 @@ DatePicker.defaultProps = {
   spacing: numbers.SPACING,
   autoSwitchDate: true,
   syncSwitchMonth: false,
-  rangeSeparator: strings.DEFAULT_SEPARATOR_RANGE
+  rangeSeparator: strings.DEFAULT_SEPARATOR_RANGE,
+  insetInput: false
 };

package/lib/es/datePicker/index.js

@@ -1,7 +1,9 @@
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/trim";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import React from 'react';
 import { forwardStatics } from '@douyinfe/semi-foundation/lib/es/utils/object';
+import { numbers, strings } from '@douyinfe/semi-foundation/lib/es/datePicker/constants';
 import DatePicker from './datePicker';
 import ConfigContext from '../configProvider/context';
 import LocaleConsumer from '../locale/localeConsumer';
@@ -29,6 +31,24 @@ export default forwardStatics( /*#__PURE__*/React.forwardRef((props, ref) => {
     propsObj.rangeSeparator = " ".concat(_trimInstanceProperty(rangeSeparator).call(rangeSeparator), " ");
   }
 
+  if (propsObj.insetInput) {
+    var _context;
+
+    if (!propsObj.position) {
+      propsObj.position = strings.POSITION_INLINE_INPUT;
+    }
+    /**
+     * When insetInput is `true` and `position` includes `over`, use 1px `spacing` to solve the problem of border-radius leakage in the upper left corner
+     *
+     * @see https://user-images.githubusercontent.com/26477537/158817185-126a5f33-41f7-414a-8e36-8d1be2dda5cd.png
+     */
+
+
+    if (_includesInstanceProperty(_context = propsObj.position).call(_context, 'Over') && !propsObj.spacing) {
+      propsObj.spacing = numbers.SPACING_INSET_INPUT;
+    }
+  }
+
   return /*#__PURE__*/React.createElement(ConfigContext.Consumer, null, _ref => {
     let {
       timeZone

package/lib/es/datePicker/insetInput.d.ts

@@ -0,0 +1,21 @@
+import { InsetInputValue, Type, InsetInputChangeFoundationProps } from '@douyinfe/semi-foundation/lib/es/datePicker/inputFoundation';
+import { InputProps } from '../input';
+export interface InsetDateInputProps {
+    forwardRef: InputProps['forwardRef'];
+    insetInputValue: InsetInputValue;
+    placeholder: string;
+    valuePath: string;
+    onChange: (options: InsetInputChangeFoundationProps) => void;
+    onFocus: InputProps['onFocus'];
+}
+export interface InsetTimeInputProps {
+    disabled: boolean;
+    insetInputValue: InsetInputValue;
+    placeholder: string;
+    valuePath: string;
+    type: Type;
+    onChange: (options: InsetInputChangeFoundationProps) => void;
+    onFocus: InputProps['onFocus'];
+}
+export declare function InsetDateInput(props: InsetDateInputProps): JSX.Element;
+export declare function InsetTimeInput(props: InsetTimeInputProps): JSX.Element;

package/lib/es/datePicker/insetInput.js

@@ -0,0 +1,65 @@
+import _get from "lodash/get";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import React from 'react';
+import Input from '../input';
+export function InsetDateInput(props) {
+  const {
+    insetInputValue,
+    valuePath,
+    onFocus,
+    onChange,
+    placeholder,
+    forwardRef
+  } = props;
+
+  const value = _get(insetInputValue, valuePath);
+
+  return /*#__PURE__*/React.createElement(Input, {
+    value: value,
+    onChange: (value, event) => {
+      onChange({
+        value,
+        event,
+        insetInputValue,
+        valuePath
+      });
+    },
+    onFocus: onFocus,
+    placeholder: placeholder,
+    ref: forwardRef
+  });
+}
+export function InsetTimeInput(props) {
+  const {
+    insetInputValue,
+    valuePath,
+    type,
+    onFocus,
+    onChange,
+    placeholder,
+    disabled
+  } = props;
+
+  const _isTimeType = _includesInstanceProperty(type).call(type, 'Time');
+
+  if (!_isTimeType) {
+    return null;
+  }
+
+  const value = _get(insetInputValue, valuePath);
+
+  return /*#__PURE__*/React.createElement(Input, {
+    value: value,
+    onChange: (value, event) => {
+      onChange({
+        value,
+        event,
+        insetInputValue,
+        valuePath
+      });
+    },
+    onFocus: onFocus,
+    placeholder: placeholder,
+    disabled: disabled
+  });
+}

package/lib/es/datePicker/monthsGrid.js

@@ -9,6 +9,8 @@ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/ins
 
 /* eslint-disable jsx-a11y/interactive-supports-focus,jsx-a11y/click-events-have-key-events */
 
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
 /* eslint-disable react/no-did-update-set-state */
 
 /* eslint-disable max-len */
@@ -284,6 +286,9 @@ export default class MonthsGrid extends BaseComponent {
       monthRight,
       currentPanelHeight
     } = this.state;
+    const {
+      insetInput
+    } = this.props;
     const panelDetail = panelType === strings.PANEL_TYPE_RIGHT ? monthRight : monthLeft;
     const {
       isTimePickerOpen,
@@ -306,7 +311,7 @@ export default class MonthsGrid extends BaseComponent {
         style.minWidth = wrap.getBoundingClientRect().width;
       }
 
-      if (this.leftIsYearOrTime() && this.rightIsYearOrTime()) {
+      if (this.leftIsYearOrTime() && this.rightIsYearOrTime() && !insetInput) {
         /**
          * left和right同时为tpk时，panel会有一个minHeight
          * 如果缓存的currentPanelHeight为0，则需要计算滚动列表的高度
@@ -316,7 +321,7 @@ export default class MonthsGrid extends BaseComponent {
          * When left and right are tpk at the same time, the panel will have a minHeight
          * If the cached currentPanelHeight is 0, you need to calculate the height of the scrolling list
          * If there is a cached value, use currentPanelHeight (if this height is less than the actual value, it will affect the number of cycles in the ScrollList to render the list)
-         * See packages/semi-foundation/scrollList/itemF oundation.js initWheelList function
+         * See packages/semi-foundation/scrollList/itemFoundation.js initWheelList function
          */
         style.minHeight = currentPanelHeight ? currentPanelHeight : this.calcScrollListHeight();
       }
@@ -324,10 +329,14 @@ export default class MonthsGrid extends BaseComponent {
       monthCls = classnames(monthCls, "".concat(prefixCls, "-yam-showing"));
     }
 
+    const _isDatePanelOpen = !(isYearPickerOpen || isTimePickerOpen);
+
+    const xOpenType = _isDatePanelOpen ? 'date' : isYearPickerOpen ? 'year' : 'time';
     return /*#__PURE__*/React.createElement("div", {
       className: monthCls,
       key: panelType,
-      style: style
+      style: style,
+      "x-open-type": xOpenType
     }, yearAndMonthLayer, timePickerLayer, this.foundation.isRangeType() ? panelContent : isYearPickerOpen || isTimePickerOpen ? null : panelContent, this.renderSwitch(panelType));
   }
 
@@ -538,10 +547,11 @@ export default class MonthsGrid extends BaseComponent {
       locale,
       disabledTimePicker,
       density,
-      dateFnsLocale
-    } = this.props; // Type: date, dateRange, year, month, no rendering required
+      dateFnsLocale,
+      insetInput
+    } = this.props; // Type: date, dateRange, year, month, inset input no rendering required
 
-    if (!_includesInstanceProperty(type).call(type, 'Time')) {
+    if (!_includesInstanceProperty(type).call(type, 'Time') || insetInput) {
       return null;
     } // switch year/month & time
 
@@ -614,7 +624,8 @@ export default class MonthsGrid extends BaseComponent {
       monthRight
     } = this.state;
     const {
-      type
+      type,
+      insetInput
     } = this.props;
     const monthGridCls = classnames({
       ["".concat(prefixCls, "-month-grid")]: true
@@ -636,6 +647,7 @@ export default class MonthsGrid extends BaseComponent {
       className: monthGridCls,
       "x-type": type,
       "x-panel-yearandmonth-open-type": yearOpenType,
+      "x-insetInput": insetInput ? "true" : "false",
       ref: current => this.cacheRefCurrent('monthGrid', current)
     }, content);
   }

package/lib/es/form/hooks/useFormApi.d.ts

@@ -1 +1,2 @@
-export default function useFormApi(): import("@douyinfe/semi-foundation/lib/es/form/interface").BaseFormApi<any>;
+import { BaseFormApi } from '@douyinfe/semi-foundation/lib/es/form/interface';
+export default function useFormApi<T extends Record<string, any> = any>(): BaseFormApi<T>;

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

@@ -19,7 +19,7 @@ export interface IconButtonProps extends ButtonProps {
 }
 declare class IconButton extends PureComponent<IconButtonProps> {
     static defaultProps: {
-        iconPosition: any;
+        iconPosition: "left";
         prefixCls: string;
         loading: boolean;
         noHorizontalPadding: boolean;
@@ -36,7 +36,7 @@ declare class IconButton extends PureComponent<IconButtonProps> {
         noHorizontalPadding: PropTypes.Requireable<string | boolean | any[]>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         theme: PropTypes.Requireable<string>;
-        iconPosition: PropTypes.Requireable<unknown>;
+        iconPosition: PropTypes.Requireable<"left" | "right">;
         className: PropTypes.Requireable<string>;
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;

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

@@ -1,7 +1,7 @@
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import React from 'react';
 import PropTypes from 'prop-types';
-import ItemFoundation, { ItemProps, SelectedItemProps, ItemAdapter } from '@douyinfe/semi-foundation/lib/es/navigation/itemFoundation';
+import ItemFoundation, { ItemAdapter, ItemProps, SelectedItemProps } from '@douyinfe/semi-foundation/lib/es/navigation/itemFoundation';
 export interface NavItemProps extends ItemProps, BaseProps {
     children?: React.ReactNode;
     disabled?: boolean;
@@ -63,7 +63,7 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
     constructor(props: NavItemProps);
     _invokeContextFunc(funcName: string, ...args: any[]): any;
     get adapter(): ItemAdapter<NavItemProps, NavItemState>;
-    renderIcon(icon: React.ReactNode, pos: string, isToggleIcon?: boolean): JSX.Element;
+    renderIcon(icon: React.ReactNode, pos: string, isToggleIcon?: boolean, key?: number | string): JSX.Element;
     setItemRef: (ref: HTMLLIElement) => void;
     wrapTooltip: (node: React.ReactNode) => JSX.Element;
     handleClick: (e: React.MouseEvent) => void;

package/lib/es/navigation/Item.js

@@ -1,5 +1,5 @@
-import _noop from "lodash/noop";
 import _times from "lodash/times";
+import _noop from "lodash/noop";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
@@ -14,7 +14,7 @@ import cls from 'classnames';
 import isNullOrUndefined from '@douyinfe/semi-foundation/lib/es/utils/isNullOrUndefined';
 import { cloneDeep, isSemiIcon } from '../_utils';
 import ItemFoundation from '@douyinfe/semi-foundation/lib/es/navigation/itemFoundation';
-import { strings, cssClasses } from '@douyinfe/semi-foundation/lib/es/navigation/constants';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/navigation/constants';
 import Tooltip from '../tooltip';
 import NavContext from './nav-context';
 import Dropdown from '../dropdown';
@@ -118,6 +118,7 @@ export default class NavItem extends BaseComponent {
     var _context3;
 
     let isToggleIcon = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    let key = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
 
     if (this.props.isSubNav) {
       return null;
@@ -138,7 +139,8 @@ export default class NavItem extends BaseComponent {
       ["".concat(clsPrefix, "-icon-info")]: !isToggleIcon
     });
     return /*#__PURE__*/React.createElement("i", {
-      className: className
+      className: className,
+      key: key
     }, isSemiIcon(icon) ? /*#__PURE__*/React.cloneElement(icon, {
       size: icon.props.size || iconSize
     }) : icon);
@@ -178,12 +180,12 @@ export default class NavItem extends BaseComponent {
 
       if (mode === strings.MODE_VERTICAL && !limitIndent && !isCollapsed) {
         const iconAmount = icon && !indent ? level : level - 1;
-        placeholderIcons = _times(iconAmount, () => this.renderIcon(null, strings.ICON_POS_RIGHT, false));
+        placeholderIcons = _times(iconAmount, index => this.renderIcon(null, strings.ICON_POS_RIGHT, false, index));
       }
 
-      itemChildren = /*#__PURE__*/React.createElement(React.Fragment, null, placeholderIcons, this.context.toggleIconPosition === strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIcon, strings.ICON_POS_RIGHT, true), icon || indent || isInSubNav ? this.renderIcon(icon, strings.ICON_POS_LEFT) : null, !isNullOrUndefined(text) ? /*#__PURE__*/React.createElement("span", {
+      itemChildren = /*#__PURE__*/React.createElement(React.Fragment, null, placeholderIcons, this.context.toggleIconPosition === strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIcon, strings.ICON_POS_RIGHT, true, 'key-toggle-pos-right'), icon || indent || isInSubNav ? this.renderIcon(icon, strings.ICON_POS_LEFT, false, 'key-position-left') : null, !isNullOrUndefined(text) ? /*#__PURE__*/React.createElement("span", {
         className: "".concat(cssClasses.PREFIX, "-item-text")
-      }, text) : '', this.context.toggleIconPosition === strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIcon, strings.ICON_POS_RIGHT, true));
+      }, text) : '', this.context.toggleIconPosition === strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIcon, strings.ICON_POS_RIGHT, true, 'key-toggle-pos-right'));
     }
 
     if (typeof link === 'string') {

package/lib/es/navigation/SubNav.js

@@ -203,7 +203,7 @@ export default class SubNav extends BaseComponent {
     if (mode === strings.MODE_VERTICAL && !limitIndent && !isCollapsed) {
       /* Different icons' amount means different indents.*/
       const iconAmount = icon && !indent ? level : level - 1;
-      placeholderIcons = _times(iconAmount, index => this.renderIcon(null, strings.ICON_POS_RIGHT, false, undefined, index));
+      placeholderIcons = _times(iconAmount, index => this.renderIcon(null, strings.ICON_POS_RIGHT, false, false, index));
     }
 
     const titleDiv = /*#__PURE__*/React.createElement("div", {
@@ -215,7 +215,7 @@ export default class SubNav extends BaseComponent {
       onKeyPress: this.handleKeyPress
     }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-item-inner")
-    }, placeholderIcons, this.context.toggleIconPosition === strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIconType, strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-left'), icon || indent || isInSubNav && mode !== strings.MODE_HORIZONTAL ? this.renderIcon(icon, strings.ICON_POS_LEFT, undefined, undefined, 'key-inSubNav-position-left') : null, /*#__PURE__*/React.createElement("span", {
+    }, placeholderIcons, this.context.toggleIconPosition === strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIconType, strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-left'), icon || indent || isInSubNav && mode !== strings.MODE_HORIZONTAL ? this.renderIcon(icon, strings.ICON_POS_LEFT, false, false, 'key-inSubNav-position-left') : null, /*#__PURE__*/React.createElement("span", {
       className: "".concat(prefixCls, "-item-text")
     }, text), this.context.toggleIconPosition === strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIconType, strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-right')));
     return titleDiv;

package/lib/es/radio/radioGroup.js

@@ -32,6 +32,12 @@ class RadioGroup extends BaseComponent {
   }
 
   componentDidUpdate(prevProps) {
+    if (typeof prevProps.value === 'number' && isNaN(prevProps.value) && typeof this.props.value === 'number' && isNaN(this.props.value)) {
+      // `NaN === NaN` returns false, and this will fail the next if check
+      // therefore triggering an infinite loop
+      return;
+    }
+
     if (prevProps.value !== this.props.value) {
       this.foundation.handlePropValueChange(this.props.value);
     }