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

package/lib/cjs/datePicker/insetInput.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.InsetDateInput = InsetDateInput;
+exports.InsetTimeInput = InsetTimeInput;
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _input = _interopRequireDefault(require("../input"));
+
+function InsetDateInput(props) {
+  const {
+    insetInputValue,
+    valuePath,
+    onFocus,
+    onChange,
+    placeholder,
+    forwardRef
+  } = props;
+  const value = (0, _get2.default)(insetInputValue, valuePath);
+  return /*#__PURE__*/_react.default.createElement(_input.default, {
+    value: value,
+    onChange: (value, event) => {
+      onChange({
+        value,
+        event,
+        insetInputValue,
+        valuePath
+      });
+    },
+    onFocus: onFocus,
+    placeholder: placeholder,
+    ref: forwardRef
+  });
+}
+
+function InsetTimeInput(props) {
+  const {
+    insetInputValue,
+    valuePath,
+    type,
+    onFocus,
+    onChange,
+    placeholder,
+    disabled
+  } = props;
+
+  const _isTimeType = (0, _includes.default)(type).call(type, 'Time');
+
+  if (!_isTimeType) {
+    return null;
+  }
+
+  const value = (0, _get2.default)(insetInputValue, valuePath);
+  return /*#__PURE__*/_react.default.createElement(_input.default, {
+    value: value,
+    onChange: (value, event) => {
+      onChange({
+        value,
+        event,
+        insetInputValue,
+        valuePath
+      });
+    },
+    onFocus: onFocus,
+    placeholder: placeholder,
+    disabled: disabled
+  });
+}

package/lib/cjs/datePicker/month.d.ts

@@ -33,6 +33,7 @@ export default class Month extends BaseComponent<MonthProps, MonthState> {
         endDateOffset: PropTypes.Requireable<(...args: any[]) => any>;
         rangeInputFocus: PropTypes.Requireable<string | boolean>;
         focusRecordsRef: PropTypes.Requireable<object>;
+        multiple: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         month: Date;

package/lib/cjs/datePicker/month.js

@@ -40,6 +40,8 @@ var _index = require("@douyinfe/semi-foundation/lib/cjs/datePicker/_utils/index"
 
 var _dateFns = require("date-fns");
 
+/* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */
+
 /* eslint-disable max-len */
 const prefixCls = _constants.cssClasses.PREFIX;
 
@@ -353,8 +355,10 @@ class Month extends _baseComponent.default {
 
     const weekdaysText = (0, _map.default)(weekdays).call(weekdays, key => locale.weeks[key]);
     return /*#__PURE__*/_react.default.createElement("div", {
+      role: "row",
       className: weekdayCls
     }, (0, _map.default)(weekdaysText).call(weekdaysText, (E, i) => /*#__PURE__*/_react.default.createElement("div", {
+      role: "columnheader",
       key: E + i,
       className: weekdayItemCls
     }, E)));
@@ -389,6 +393,7 @@ class Month extends _baseComponent.default {
   renderWeek(week, weekIndex) {
     const weekCls = _constants.cssClasses.WEEK;
     return /*#__PURE__*/_react.default.createElement("div", {
+      role: "row",
       className: weekCls,
       key: weekIndex
     }, (0, _map.default)(week).call(week, (day, dayIndex) => this.renderDay(day, dayIndex)));
@@ -409,6 +414,8 @@ class Month extends _baseComponent.default {
 
     if (!fullDate) {
       return /*#__PURE__*/_react.default.createElement("div", {
+        role: "gridcell",
+        tabIndex: -1,
         key: dayNumber + dayIndex,
         className: _constants.cssClasses.DAY
       }, /*#__PURE__*/_react.default.createElement("span", null));
@@ -444,6 +451,11 @@ class Month extends _baseComponent.default {
     const fullDateArgs = [dayNumber, fullDate, dayStatus];
     const customRender = (0, _isFunction2.default)(renderFullDate);
     return /*#__PURE__*/_react.default.createElement("div", {
+      role: "gridcell",
+      tabIndex: dayStatus.isDisabled ? -1 : 0,
+      "aria-disabled": dayStatus.isDisabled,
+      "aria-selected": dayStatus.isSelected,
+      "aria-label": fullDate,
       className: !customRender ? dayCls : _constants.cssClasses.DAY,
       title: fullDate,
       key: dayNumber + dayIndex,
@@ -457,13 +469,16 @@ class Month extends _baseComponent.default {
 
   render() {
     const {
-      forwardRef
+      forwardRef,
+      multiple
     } = this.props;
     const weekday = this.renderDayOfWeek();
     const weeks = this.renderWeeks();
     const monthCls = (0, _classnames.default)(_constants.cssClasses.MONTH);
     const ref = forwardRef || this.monthRef;
     return /*#__PURE__*/_react.default.createElement("div", {
+      role: "grid",
+      "aria-multiselectable": multiple,
       ref: ref,
       className: monthCls
     }, weekday, weeks);
@@ -491,7 +506,8 @@ Month.propTypes = {
   startDateOffset: _propTypes.default.func,
   endDateOffset: _propTypes.default.func,
   rangeInputFocus: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  focusRecordsRef: _propTypes.default.object
+  focusRecordsRef: _propTypes.default.object,
+  multiple: _propTypes.default.bool
 };
 Month.defaultProps = {
   month: new Date(),

package/lib/cjs/datePicker/monthsGrid.js

@@ -54,6 +54,10 @@ var _semiIcons = require("@douyinfe/semi-icons");
 
 var _getDefaultFormatToken = require("@douyinfe/semi-foundation/lib/cjs/datePicker/_utils/getDefaultFormatToken");
 
+/* 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 */
@@ -315,6 +319,9 @@ class MonthsGrid extends _baseComponent.default {
       monthRight,
       currentPanelHeight
     } = this.state;
+    const {
+      insetInput
+    } = this.props;
     const panelDetail = panelType === _constants.strings.PANEL_TYPE_RIGHT ? monthRight : monthLeft;
     const {
       isTimePickerOpen,
@@ -337,7 +344,7 @@ class MonthsGrid extends _baseComponent.default {
         style.minWidth = wrap.getBoundingClientRect().width;
       }
 
-      if (this.leftIsYearOrTime() && this.rightIsYearOrTime()) {
+      if (this.leftIsYearOrTime() && this.rightIsYearOrTime() && !insetInput) {
         /**
          * left和right同时为tpk时，panel会有一个minHeight
          * 如果缓存的currentPanelHeight为0，则需要计算滚动列表的高度
@@ -347,7 +354,7 @@ class MonthsGrid extends _baseComponent.default {
          * 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();
       }
@@ -355,10 +362,14 @@ class MonthsGrid extends _baseComponent.default {
       monthCls = (0, _classnames.default)(monthCls, "".concat(prefixCls, "-yam-showing"));
     }
 
+    const _isDatePanelOpen = !(isYearPickerOpen || isTimePickerOpen);
+
+    const xOpenType = _isDatePanelOpen ? 'date' : isYearPickerOpen ? 'year' : 'time';
     return /*#__PURE__*/_react.default.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));
   }
 
@@ -395,7 +406,8 @@ class MonthsGrid extends _baseComponent.default {
       endDateOffset,
       density,
       rangeInputFocus,
-      syncSwitchMonth
+      syncSwitchMonth,
+      multiple
     } = this.props;
     let monthText = ''; // i18n monthText
 
@@ -461,7 +473,8 @@ class MonthsGrid extends _baseComponent.default {
       onWeeksRowNumChange: weeksRowNum => this.handleWeeksRowNumChange(weeksRowNum, panelType),
       startDateOffset: startDateOffset,
       endDateOffset: endDateOffset,
-      focusRecordsRef: this.props.focusRecordsRef
+      focusRecordsRef: this.props.focusRecordsRef,
+      multiple: multiple
     }));
   }
 
@@ -565,10 +578,11 @@ class MonthsGrid extends _baseComponent.default {
       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 (!(0, _includes.default)(type).call(type, 'Time')) {
+    if (!(0, _includes.default)(type).call(type, 'Time') || insetInput) {
       return null;
     } // switch year/month & time
 
@@ -613,14 +627,22 @@ class MonthsGrid extends _baseComponent.default {
       className: switchCls,
       ref: current => this.adapter.setCache("switch-".concat(panelType), current)
     }, /*#__PURE__*/_react.default.createElement("div", {
+      role: "button",
+      "aria-label": "Switch to date panel",
       className: dateCls,
       onClick: e => this.foundation.showDatePanel(panelType)
-    }, showSwithIcon && /*#__PURE__*/_react.default.createElement(_semiIcons.IconCalendar, null), /*#__PURE__*/_react.default.createElement("span", {
+    }, showSwithIcon && /*#__PURE__*/_react.default.createElement(_semiIcons.IconCalendar, {
+      "aria-hidden": true
+    }), /*#__PURE__*/_react.default.createElement("span", {
       className: textCls
     }, dateText || monthText)), /*#__PURE__*/_react.default.createElement("div", {
+      role: "button",
+      "aria-label": "Switch to time panel",
       className: timeCls,
       onClick: e => this.foundation.showTimePicker(panelType, true)
-    }, showSwithIcon && /*#__PURE__*/_react.default.createElement(_semiIcons.IconClock, null), /*#__PURE__*/_react.default.createElement("span", {
+    }, showSwithIcon && /*#__PURE__*/_react.default.createElement(_semiIcons.IconClock, {
+      "aria-hidden": true
+    }), /*#__PURE__*/_react.default.createElement("span", {
       className: textCls
     }, timeText)));
   }
@@ -631,7 +653,8 @@ class MonthsGrid extends _baseComponent.default {
       monthRight
     } = this.state;
     const {
-      type
+      type,
+      insetInput
     } = this.props;
     const monthGridCls = (0, _classnames.default)({
       ["".concat(prefixCls, "-month-grid")]: true
@@ -653,6 +676,7 @@ class MonthsGrid extends _baseComponent.default {
       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/cjs/datePicker/navigation.js

@@ -82,7 +82,9 @@ class Navigation extends _react.PureComponent {
       ref: ref
     }, /*#__PURE__*/_react.default.createElement(_iconButton.default, {
       key: "double-chevron-left",
+      "aria-label": "Previous year",
       icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconDoubleChevronLeft, {
+        "aria-hidden": true,
         size: iconBtnSize
       }),
       size: buttonSize,
@@ -92,7 +94,9 @@ class Navigation extends _react.PureComponent {
       style: leftButtonStyle
     }), /*#__PURE__*/_react.default.createElement(_iconButton.default, {
       key: "chevron-left",
+      "aria-label": "Previous month",
       icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronLeft, {
+        "aria-hidden": true,
         size: iconBtnSize
       }),
       size: buttonSize,
@@ -108,7 +112,9 @@ class Navigation extends _react.PureComponent {
       size: buttonSize
     }, /*#__PURE__*/_react.default.createElement("span", null, monthText))), /*#__PURE__*/_react.default.createElement(_iconButton.default, {
       key: "chevron-right",
+      "aria-label": "Next month",
       icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronRight, {
+        "aria-hidden": true,
         size: iconBtnSize
       }),
       size: buttonSize,
@@ -118,7 +124,9 @@ class Navigation extends _react.PureComponent {
       style: rightButtonStyle
     }), /*#__PURE__*/_react.default.createElement(_iconButton.default, {
       key: "double-chevron-right",
+      "aria-label": "Next year",
       icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconDoubleChevronRight, {
+        "aria-hidden": true,
         size: iconBtnSize
       }),
       size: buttonSize,

package/lib/cjs/datePicker/quickControl.js

@@ -34,6 +34,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+/* eslint-disable jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events */
 const prefixCls = _constants.cssClasses.PREFIX;
 
 class QuickControl extends _react.PureComponent {

package/lib/cjs/datePicker/yearAndMonth.js

@@ -249,6 +249,7 @@ class YearAndMonth extends _baseComponent.default {
     }, /*#__PURE__*/_react.default.createElement(_iconButton.default, {
       noHorizontalPadding: false,
       icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronLeft, {
+        "aria-hidden": true,
         size: iconSize
       }),
       size: buttonSize,

package/lib/cjs/form/hoc/withField.js

@@ -531,7 +531,7 @@ function withField(Component, opts) {
           text: label || field,
           id: labelId,
           required: required,
-          name: name || field,
+          name: a11yId || name || field,
           width: mergeLabelWidth,
           align: mergeLabelAlign
         }, needSpread));

package/lib/cjs/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/cjs/navigation/itemFoundation';
+import ItemFoundation, { ItemAdapter, ItemProps, SelectedItemProps } from '@douyinfe/semi-foundation/lib/cjs/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/cjs/navigation/Item.js

@@ -16,10 +16,10 @@ var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-s
 
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
-var _noop2 = _interopRequireDefault(require("lodash/noop"));
-
 var _times2 = _interopRequireDefault(require("lodash/times"));
 
+var _noop2 = _interopRequireDefault(require("lodash/noop"));
+
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -146,6 +146,7 @@ class NavItem extends _baseComponent.default {
     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;
@@ -166,7 +167,8 @@ class NavItem extends _baseComponent.default {
       ["".concat(clsPrefix, "-icon-info")]: !isToggleIcon
     });
     return /*#__PURE__*/_react.default.createElement("i", {
-      className: className
+      className: className,
+      key: key
     }, (0, _utils.isSemiIcon)(icon) ? /*#__PURE__*/_react.default.cloneElement(icon, {
       size: icon.props.size || iconSize
     }) : icon);
@@ -206,12 +208,12 @@ class NavItem extends _baseComponent.default {
 
       if (mode === _constants.strings.MODE_VERTICAL && !limitIndent && !isCollapsed) {
         const iconAmount = icon && !indent ? level : level - 1;
-        placeholderIcons = (0, _times2.default)(iconAmount, () => this.renderIcon(null, _constants.strings.ICON_POS_RIGHT, false));
+        placeholderIcons = (0, _times2.default)(iconAmount, index => this.renderIcon(null, _constants.strings.ICON_POS_RIGHT, false, index));
       }
 
-      itemChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, placeholderIcons, this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIcon, _constants.strings.ICON_POS_RIGHT, true), icon || indent || isInSubNav ? this.renderIcon(icon, _constants.strings.ICON_POS_LEFT) : null, !(0, _isNullOrUndefined.default)(text) ? /*#__PURE__*/_react.default.createElement("span", {
+      itemChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, placeholderIcons, this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIcon, _constants.strings.ICON_POS_RIGHT, true, 'key-toggle-pos-right'), icon || indent || isInSubNav ? this.renderIcon(icon, _constants.strings.ICON_POS_LEFT, false, 'key-position-left') : null, !(0, _isNullOrUndefined.default)(text) ? /*#__PURE__*/_react.default.createElement("span", {
         className: "".concat(_constants.cssClasses.PREFIX, "-item-text")
-      }, text) : '', this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIcon, _constants.strings.ICON_POS_RIGHT, true));
+      }, text) : '', this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIcon, _constants.strings.ICON_POS_RIGHT, true, 'key-toggle-pos-right'));
     }
 
     if (typeof link === 'string') {

package/lib/cjs/navigation/SubNav.js

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

package/lib/cjs/scrollList/scrollItem.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
 import BaseComponent from '../_base/baseComponent';
 import PropTypes from 'prop-types';
 import { Item, ScrollItemAdapter } from '@douyinfe/semi-foundation/lib/cjs/scrollList/itemFoundation';
@@ -18,6 +18,7 @@ export interface ScrollItemProps<T extends Item> {
     motion?: Motion;
     style?: React.CSSProperties;
     type?: string | number;
+    'aria-label'?: AriaAttributes['aria-label'];
 }
 export interface ScrollItemState {
     prependCount: number;

package/lib/cjs/scrollList/scrollItem.js

@@ -299,13 +299,14 @@ class ScrollItem extends _baseComponent.default {
           transform: itemTrans
         } = item;
         const transform = typeof itemTrans === 'function' ? itemTrans : commonTrans;
+        const selected = selectedIndex === index;
         const cls = (0, _classnames.default)({
-          ["".concat(_constants.cssClasses.PREFIX, "-item-sel")]: selectedIndex === index && mode !== wheelMode,
+          ["".concat(_constants.cssClasses.PREFIX, "-item-sel")]: selected && mode !== wheelMode,
           ["".concat(_constants.cssClasses.PREFIX, "-item-disabled")]: Boolean(item.disabled)
         });
         let text = '';
 
-        if (selectedIndex === index) {
+        if (selected) {
           if (typeof transform === 'function') {
             text = transform(item.value, item.text);
           } else {
@@ -329,7 +330,10 @@ class ScrollItem extends _baseComponent.default {
           _react.default.createElement("li", (0, _assign.default)({
             key: prefixKey + index
           }, events, {
-            className: cls
+            className: cls,
+            role: "option",
+            "aria-selected": selected,
+            "aria-disabled": item.disabled
           }), text)
         );
       });
@@ -348,6 +352,9 @@ class ScrollItem extends _baseComponent.default {
         className: wrapperCls,
         ref: this._cacheWrapperNode
       }, /*#__PURE__*/_react.default.createElement("ul", {
+        role: "listbox",
+        "aria-multiselectable": false,
+        "aria-label": this.props['aria-label'],
         ref: this._cacheListNode
       }, inner));
     };
@@ -402,6 +409,9 @@ class ScrollItem extends _baseComponent.default {
         ref: this._cacheWrapperNode,
         onScroll: this.scrollToSelectItem
       }, /*#__PURE__*/_react.default.createElement("ul", {
+        role: "listbox",
+        "aria-label": this.props['aria-label'],
+        "aria-multiselectable": false,
         ref: this._cacheListNode,
         onClick: this.clickToSelectItem
       }, prependList, inner, appendList)));

package/lib/cjs/table/Body/index.d.ts

@@ -43,6 +43,8 @@ export interface BodyState {
 }
 export interface BodyContext {
     getVirtualizedListRef: GetVirtualizedListRef;
+    flattenedColumns: ColumnProps[];
+    getCellWidths: (flattenedColumns: ColumnProps[]) => number[];
 }
 declare const _default: React.ForwardRefExoticComponent<Omit<BodyProps, "forwardedRef"> & React.RefAttributes<HTMLDivElement>>;
 export default _default;

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

@@ -418,8 +418,13 @@ class Body extends _baseComponent.default {
       const {
         flattenedColumns,
         getCellWidths
-      } = _this.context;
-      const cellWidths = getCellWidths(flattenedColumns);
+      } = _this.context; // we use memoized cellWidths to avoid re-render expanded row (fix #686)
+
+      if (flattenedColumns !== _this.flattenedColumns) {
+        _this.flattenedColumns = flattenedColumns;
+        _this.cellWidths = getCellWidths(flattenedColumns);
+      }
+
       return /*#__PURE__*/_react.default.createElement(_ExpandedRow.default, {
         style: style,
         components: components,
@@ -431,7 +436,7 @@ class Body extends _baseComponent.default {
         index: index,
         virtualized: virtualized,
         key: (0, _utils.genExpandedRowKey)(key),
-        cellWidths: cellWidths
+        cellWidths: _this.cellWidths
       });
     };
     /**
@@ -601,7 +606,9 @@ class Body extends _baseComponent.default {
     };
     this.listRef = /*#__PURE__*/_react.default.createRef();
     const {
-      getVirtualizedListRef
+      getVirtualizedListRef,
+      flattenedColumns,
+      getCellWidths
     } = context;
 
     if (getVirtualizedListRef) {
@@ -613,6 +620,8 @@ class Body extends _baseComponent.default {
     }
 
     this.foundation = new _bodyFoundation.default(this.adapter);
+    this.flattenedColumns = flattenedColumns;
+    this.cellWidths = getCellWidths(flattenedColumns);
     this.observer = null;
   }
 

package/lib/cjs/tree/index.js

@@ -275,7 +275,8 @@ class Tree extends _baseComponent.default {
     const isSeaching = Boolean(props.filterTreeNode && prevState.inputValue && prevState.inputValue.length);
     const newState = {
       prevProps: props
-    }; // Accept a props field as a parameter to determine whether to update the field
+    };
+    const isExpandControlled = ('expandedKeys' in props); // Accept a props field as a parameter to determine whether to update the field
 
     const needUpdate = name => {
       const firstInProps = !prevProps && name in props;
@@ -319,7 +320,8 @@ class Tree extends _baseComponent.default {
       }
     }
 
-    const expandAllWhenDataChange = (needUpdate('treeDataSimpleJson') || needUpdate('treeData')) && props.expandAll;
+    const dataUpdated = needUpdate('treeDataSimpleJson') || needUpdate('treeData');
+    const expandAllWhenDataChange = dataUpdated && props.expandAll;
 
     if (!isSeaching) {
       // Update expandedKeys
@@ -345,7 +347,7 @@ class Tree extends _baseComponent.default {
         newState.expandedKeys = (0, _treeUtil.calcExpandedKeys)(props.defaultExpandedKeys, keyEntities);
       } else if (!prevProps && props.defaultValue) {
         newState.expandedKeys = (0, _treeUtil.calcExpandedKeysForValues)(props.defaultValue, keyEntities, props.multiple, valueEntities);
-      } else if (!prevProps && props.value) {
+      } else if ((!prevProps || !isExpandControlled && dataUpdated) && props.value) {
         newState.expandedKeys = (0, _treeUtil.calcExpandedKeysForValues)(props.value, keyEntities, props.multiple, valueEntities);
       }
 

package/lib/cjs/tree/interface.d.ts

@@ -109,6 +109,7 @@ export interface NodeListProps {
     motionKeys: Set<string>;
     motionType: string;
     flattenList: FlattenNode[] | undefined;
+    searchTargetIsDeep?: boolean;
     renderTreeNode: (treeNode: FlattenNode, ind?: number, style?: React.CSSProperties) => ReactNode;
 }
 export declare type TransitionNodes<T> = Array<T | Array<T>>;

package/lib/cjs/tree/nodeList.js

@@ -107,12 +107,13 @@ class NodeList extends _react.PureComponent {
     const {
       flattenNodes,
       motionType,
+      searchTargetIsDeep,
       renderTreeNode
     } = this.props;
     const {
       transitionNodes
     } = this.state;
-    const mapData = transitionNodes.length ? transitionNodes : flattenNodes;
+    const mapData = transitionNodes.length && !searchTargetIsDeep ? transitionNodes : flattenNodes;
     const options = (0, _map.default)(mapData).call(mapData, treeNode => {
       const isMotionNode = (0, _isArray.default)(treeNode);
 

package/lib/cjs/treeSelect/index.js

@@ -795,7 +795,8 @@ class TreeSelect extends _baseComponent.default {
       const {
         flattenNodes,
         motionKeys,
-        motionType
+        motionType,
+        filteredKeys
       } = this.state;
       const {
         direction
@@ -804,6 +805,7 @@ class TreeSelect extends _baseComponent.default {
         virtualize,
         motionExpand
       } = this.props;
+      const isExpandControlled = ('expandedKeys' in this.props);
 
       if (!virtualize || (0, _isEmpty2.default)(virtualize)) {
         return /*#__PURE__*/_react.default.createElement(_nodeList.default, {
@@ -811,6 +813,8 @@ class TreeSelect extends _baseComponent.default {
           flattenList: this._flattenNodes,
           motionKeys: motionExpand ? motionKeys : new _set.default([]),
           motionType: motionType,
+          // When motionKeys is empty, but filteredKeys is not empty (that is, the search hits), this situation should be distinguished from ordinary motionKeys
+          searchTargetIsDeep: isExpandControlled && motionExpand && (0, _isEmpty2.default)(motionKeys) && !(0, _isEmpty2.default)(filteredKeys),
           onMotionEnd: this.onMotionEnd,
           renderTreeNode: this.renderTreeNode
         });
@@ -1131,8 +1135,8 @@ class TreeSelect extends _baseComponent.default {
       notifySelect: (selectKey, bool, node) => {
         this.props.onSelect && this.props.onSelect(selectKey, bool, node);
       },
-      notifySearch: input => {
-        this.props.onSearch && this.props.onSearch(input);
+      notifySearch: (input, filteredExpandedKeys) => {
+        this.props.onSearch && this.props.onSearch(input, filteredExpandedKeys);
       },
       cacheFlattenNodes: bool => {
         this._flattenNodes = bool ? (0, _treeUtil2.cloneDeep)(this.state.flattenNodes) : null;