@douyinfe/semi-ui 2.24.0-beta.0 → 2.24.0

package/lib/cjs/_base/base.css

@@ -456,6 +456,8 @@ body, body[theme-mode=dark] .semi-always-light {
   --semi-border-radius-large: 12px;
   --semi-border-radius-circle: 50%;
   --semi-border-radius-full: 9999px;
+  --semi-color-highlight-bg: rgba(var(--semi-yellow-4), 1);
+  --semi-color-highlight: rgba(var(--semi-black), 1);
 }
 
 body[theme-mode=dark], body .semi-always-dark {
@@ -544,6 +546,8 @@ body[theme-mode=dark], body .semi-always-dark {
   --semi-border-radius-large: 12px;
   --semi-border-radius-circle: 50%;
   --semi-border-radius-full: 9999px;
+  --semi-color-highlight-bg: rgba(var(--semi-yellow-2), 1);
+  --semi-color-highlight: rgba(var(--semi-white), 1);
 }
 
 .semi-light-scrollbar::-webkit-scrollbar, .semi-light-scrollbar *::-webkit-scrollbar {

package/lib/cjs/image/preview.js

@@ -178,7 +178,7 @@ class Preview extends _baseComponent.default {
     const finalSrcList = [...srcArr, ...srcListInChildren];
     return /*#__PURE__*/_react.default.createElement(_previewContext.PreviewContext.Provider, {
       value: {
-        isGroup: finalSrcList.length > 1,
+        isGroup: true,
         previewSrc: finalSrcList,
         titles: titles,
         currentIndex,

package/lib/cjs/input/index.d.ts

@@ -132,6 +132,7 @@ declare class Input extends BaseComponent<InputProps, InputState> {
         setValue: (value: string) => void;
         setEyeClosed: (value: boolean) => void;
         toggleFocusing: (isFocus: boolean) => void;
+        focusInput: () => void;
         toggleHovering: (isHovering: boolean) => void;
         getIfFocusing: () => boolean;
         notifyChange: (cbValue: string, e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -178,6 +179,7 @@ declare class Input extends BaseComponent<InputProps, InputState> {
     renderPrefix(): JSX.Element;
     showClearBtn(): boolean;
     renderSuffix(suffixAllowClear: boolean): JSX.Element;
+    getInputRef(): React.RefObject<HTMLInputElement> | React.MutableRefObject<any> | ((node: HTMLInputElement) => void);
     render(): JSX.Element;
 }
 declare const ForwardInput: React.ForwardRefExoticComponent<Omit<InputProps, "forwardRef"> & React.RefAttributes<HTMLInputElement>>;

package/lib/cjs/input/index.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Input = void 0;
 
+var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
+
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
 
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
@@ -126,21 +128,17 @@ class Input extends _baseComponent.default {
         eyeClosed: value
       }),
       toggleFocusing: isFocus => {
+        this.setState({
+          isFocus
+        });
+      },
+      focusInput: () => {
         const {
           preventScroll
         } = this.props;
         const input = this.inputRef && this.inputRef.current;
-
-        if (isFocus) {
-          input && input.focus({
-            preventScroll
-          });
-        } else {
-          input && input.blur();
-        }
-
-        this.setState({
-          isFocus
+        input && input.focus({
+          preventScroll
         });
       },
       toggleHovering: isHovering => this.setState({
@@ -344,6 +342,28 @@ class Input extends _baseComponent.default {
     );
   }
 
+  getInputRef() {
+    const {
+      forwardRef
+    } = this.props;
+
+    if (!(0, _isUndefined2.default)(forwardRef)) {
+      if (typeof forwardRef === 'function') {
+        return node => {
+          forwardRef(node);
+          this.inputRef = {
+            current: node
+          };
+        };
+      } else if (Object.prototype.toString.call(forwardRef) === '[object Object]') {
+        this.inputRef = forwardRef;
+        return forwardRef;
+      }
+    }
+
+    return this.inputRef;
+  }
+
   render() {
     const _a = this.props,
           {
@@ -383,7 +403,7 @@ class Input extends _baseComponent.default {
     } = this.state;
     const suffixAllowClear = this.showClearBtn();
     const suffixIsIcon = (0, _utils.isSemiIcon)(suffix);
-    const ref = forwardRef || this.inputRef;
+    const ref = this.getInputRef();
     const wrapperPrefix = "".concat(prefixCls, "-wrapper");
     const wrapperCls = (0, _classnames.default)(wrapperPrefix, className, {
       ["".concat(prefixCls, "-wrapper__with-prefix")]: prefix || insetLabel,

package/lib/cjs/tabs/TabBar.js

@@ -112,7 +112,6 @@ class TabBar extends _react.default.Component {
     this.renderTabComponents = list => list.map(panel => this.renderTabItem(panel));
 
     this.handleArrowClick = (items, pos) => {
-      const inline = pos === 'start' ? 'end' : 'start';
       const lastItem = pos === 'start' ? items.pop() : items.shift();
 
       if (!lastItem) {
@@ -126,7 +125,7 @@ class TabBar extends _react.default.Component {
       tabItem.scrollIntoView({
         behavior: 'smooth',
         block: 'nearest',
-        inline
+        inline: 'nearest'
       });
     };
 

package/lib/cjs/treeSelect/index.js

@@ -586,7 +586,9 @@ class TreeSelect extends _baseComponent.default {
         maxTagCount,
         checkRelation,
         showRestTagsPopover,
-        restTagsPopoverProps
+        restTagsPopoverProps,
+        searchPosition,
+        filterTreeNode
       } = this.props;
       const {
         keyEntities,
@@ -600,8 +602,16 @@ class TreeSelect extends _baseComponent.default {
         keyList = (0, _treeUtil.normalizeKeyList)(checkedKeys, keyEntities, leafOnly);
       } else if (checkRelation === 'unRelated') {
         keyList = [...realCheckedKeys];
-      }
+      } // auto focus search input divide into two parts
+      // 1. filterTreeNode && searchPosition === strings.SEARCH_POSITION_TRIGGER
+      //    Implemented by passing autofocus to the underlying input's autofocus
+      // 2. filterTreeNode && searchPosition === strings.SEARCH_POSITION_DROPDOWN
+      //    Due to the off-screen rendering in the tooltip implementation mechanism, if it is implemented through the 
+      //    autofocus of the input, when the option panel is opened, the page will scroll to top, so it is necessary 
+      //    to call the focus method through ref in the onVisibleChange callback of the Popover to achieve focus
+
 
+      const autoFocus = filterTreeNode && searchPosition === _constants.strings.SEARCH_POSITION_TRIGGER ? searchAutoFocus : undefined;
       return /*#__PURE__*/_react.default.createElement(_tagInput.default, {
         maxTagCount: maxTagCount,
         disabled: disabled,
@@ -614,7 +624,7 @@ class TreeSelect extends _baseComponent.default {
         showRestTagsPopover: showRestTagsPopover,
         restTagsPopoverProps: restTagsPopoverProps,
         // eslint-disable-next-line jsx-a11y/no-autofocus
-        autoFocus: searchAutoFocus,
+        autoFocus: autoFocus,
         renderTagItem: (itemKey, index) => this.renderTagItem(itemKey, index),
         onRemove: itemKey => this.removeTag(itemKey),
         expandRestTagsOnClick: false
@@ -650,6 +660,7 @@ class TreeSelect extends _baseComponent.default {
         prefix: /*#__PURE__*/_react.default.createElement(_semiIcons.IconSearch, null)
       };
       const inputTriggerProps = {
+        autofocus: searchAutoFocus,
         onFocus: e => this.foundation.handleInputTriggerFocus(),
         onBlur: e => this.foundation.handleInputTriggerBlur(),
         disabled
@@ -681,7 +692,6 @@ class TreeSelect extends _baseComponent.default {
         return /*#__PURE__*/_react.default.createElement(_index2.default, Object.assign({
           "aria-label": 'Filter TreeSelect item',
           ref: this.inputRef,
-          autofocus: searchAutoFocus,
           placeholder: placeholder
         }, baseInputProps, realInputProps));
       }));
@@ -755,12 +765,18 @@ class TreeSelect extends _baseComponent.default {
 
     this.handlePopoverClose = isVisible => {
       const {
-        filterTreeNode
+        filterTreeNode,
+        searchAutoFocus,
+        searchPosition
       } = this.props;
 
       if (isVisible === false && Boolean(filterTreeNode)) {
         this.foundation.clearInput();
       }
+
+      if (filterTreeNode && searchPosition === _constants.strings.SEARCH_POSITION_DROPDOWN && isVisible && searchAutoFocus) {
+        this.foundation.focusInput(true);
+      }
     };
 
     this.renderTreeNode = (treeNode, ind, style) => {
@@ -1225,7 +1241,25 @@ class TreeSelect extends _baseComponent.default {
           isHovering: bool
         });
       },
-      updateInputFocus: bool => {} // eslint-disable-line
+      updateInputFocus: bool => {
+        if (bool) {
+          if (this.inputRef && this.inputRef.current) {
+            this.inputRef.current.focus();
+          }
+
+          if (this.tagInputRef && this.tagInputRef.current) {
+            this.tagInputRef.current.focus();
+          }
+        } else {
+          if (this.inputRef && this.inputRef.current) {
+            this.inputRef.current.blur();
+          }
+
+          if (this.tagInputRef && this.tagInputRef.current) {
+            this.tagInputRef.current.blur();
+          }
+        }
+      } // eslint-disable-line
 
     });
   }

package/lib/es/_base/base.css

@@ -456,6 +456,8 @@ body, body[theme-mode=dark] .semi-always-light {
   --semi-border-radius-large: 12px;
   --semi-border-radius-circle: 50%;
   --semi-border-radius-full: 9999px;
+  --semi-color-highlight-bg: rgba(var(--semi-yellow-4), 1);
+  --semi-color-highlight: rgba(var(--semi-black), 1);
 }
 
 body[theme-mode=dark], body .semi-always-dark {
@@ -544,6 +546,8 @@ body[theme-mode=dark], body .semi-always-dark {
   --semi-border-radius-large: 12px;
   --semi-border-radius-circle: 50%;
   --semi-border-radius-full: 9999px;
+  --semi-color-highlight-bg: rgba(var(--semi-yellow-2), 1);
+  --semi-color-highlight: rgba(var(--semi-white), 1);
 }
 
 .semi-light-scrollbar::-webkit-scrollbar, .semi-light-scrollbar *::-webkit-scrollbar {

package/lib/es/image/preview.js

@@ -159,7 +159,7 @@ export default class Preview extends BaseComponent {
     const finalSrcList = [...srcArr, ...srcListInChildren];
     return /*#__PURE__*/React.createElement(PreviewContext.Provider, {
       value: {
-        isGroup: finalSrcList.length > 1,
+        isGroup: true,
         previewSrc: finalSrcList,
         titles: titles,
         currentIndex,

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

@@ -132,6 +132,7 @@ declare class Input extends BaseComponent<InputProps, InputState> {
         setValue: (value: string) => void;
         setEyeClosed: (value: boolean) => void;
         toggleFocusing: (isFocus: boolean) => void;
+        focusInput: () => void;
         toggleHovering: (isHovering: boolean) => void;
         getIfFocusing: () => boolean;
         notifyChange: (cbValue: string, e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -178,6 +179,7 @@ declare class Input extends BaseComponent<InputProps, InputState> {
     renderPrefix(): JSX.Element;
     showClearBtn(): boolean;
     renderSuffix(suffixAllowClear: boolean): JSX.Element;
+    getInputRef(): React.RefObject<HTMLInputElement> | React.MutableRefObject<any> | ((node: HTMLInputElement) => void);
     render(): JSX.Element;
 }
 declare const ForwardInput: React.ForwardRefExoticComponent<Omit<InputProps, "forwardRef"> & React.RefAttributes<HTMLInputElement>>;

package/lib/es/input/index.js

@@ -1,3 +1,4 @@
+import _isUndefined from "lodash/isUndefined";
 import _isFunction from "lodash/isFunction";
 import _noop from "lodash/noop";
 import _isString from "lodash/isString";
@@ -106,21 +107,17 @@ class Input extends BaseComponent {
         eyeClosed: value
       }),
       toggleFocusing: isFocus => {
+        this.setState({
+          isFocus
+        });
+      },
+      focusInput: () => {
         const {
           preventScroll
         } = this.props;
         const input = this.inputRef && this.inputRef.current;
-
-        if (isFocus) {
-          input && input.focus({
-            preventScroll
-          });
-        } else {
-          input && input.blur();
-        }
-
-        this.setState({
-          isFocus
+        input && input.focus({
+          preventScroll
         });
       },
       toggleHovering: isHovering => this.setState({
@@ -324,6 +321,28 @@ class Input extends BaseComponent {
     );
   }
 
+  getInputRef() {
+    const {
+      forwardRef
+    } = this.props;
+
+    if (!_isUndefined(forwardRef)) {
+      if (typeof forwardRef === 'function') {
+        return node => {
+          forwardRef(node);
+          this.inputRef = {
+            current: node
+          };
+        };
+      } else if (Object.prototype.toString.call(forwardRef) === '[object Object]') {
+        this.inputRef = forwardRef;
+        return forwardRef;
+      }
+    }
+
+    return this.inputRef;
+  }
+
   render() {
     const _a = this.props,
           {
@@ -363,7 +382,7 @@ class Input extends BaseComponent {
     } = this.state;
     const suffixAllowClear = this.showClearBtn();
     const suffixIsIcon = isSemiIcon(suffix);
-    const ref = forwardRef || this.inputRef;
+    const ref = this.getInputRef();
     const wrapperPrefix = "".concat(prefixCls, "-wrapper");
     const wrapperCls = cls(wrapperPrefix, className, {
       ["".concat(prefixCls, "-wrapper__with-prefix")]: prefix || insetLabel,

package/lib/es/tabs/TabBar.js

@@ -94,7 +94,6 @@ class TabBar extends React.Component {
     this.renderTabComponents = list => list.map(panel => this.renderTabItem(panel));
 
     this.handleArrowClick = (items, pos) => {
-      const inline = pos === 'start' ? 'end' : 'start';
       const lastItem = pos === 'start' ? items.pop() : items.shift();
 
       if (!lastItem) {
@@ -108,7 +107,7 @@ class TabBar extends React.Component {
       tabItem.scrollIntoView({
         behavior: 'smooth',
         block: 'nearest',
-        inline
+        inline: 'nearest'
       });
     };
 

package/lib/es/treeSelect/index.js

@@ -541,7 +541,9 @@ class TreeSelect extends BaseComponent {
         maxTagCount,
         checkRelation,
         showRestTagsPopover,
-        restTagsPopoverProps
+        restTagsPopoverProps,
+        searchPosition,
+        filterTreeNode
       } = this.props;
       const {
         keyEntities,
@@ -555,8 +557,16 @@ class TreeSelect extends BaseComponent {
         keyList = normalizeKeyList(checkedKeys, keyEntities, leafOnly);
       } else if (checkRelation === 'unRelated') {
         keyList = [...realCheckedKeys];
-      }
+      } // auto focus search input divide into two parts
+      // 1. filterTreeNode && searchPosition === strings.SEARCH_POSITION_TRIGGER
+      //    Implemented by passing autofocus to the underlying input's autofocus
+      // 2. filterTreeNode && searchPosition === strings.SEARCH_POSITION_DROPDOWN
+      //    Due to the off-screen rendering in the tooltip implementation mechanism, if it is implemented through the 
+      //    autofocus of the input, when the option panel is opened, the page will scroll to top, so it is necessary 
+      //    to call the focus method through ref in the onVisibleChange callback of the Popover to achieve focus
+
 
+      const autoFocus = filterTreeNode && searchPosition === strings.SEARCH_POSITION_TRIGGER ? searchAutoFocus : undefined;
       return /*#__PURE__*/React.createElement(TagInput, {
         maxTagCount: maxTagCount,
         disabled: disabled,
@@ -569,7 +579,7 @@ class TreeSelect extends BaseComponent {
         showRestTagsPopover: showRestTagsPopover,
         restTagsPopoverProps: restTagsPopoverProps,
         // eslint-disable-next-line jsx-a11y/no-autofocus
-        autoFocus: searchAutoFocus,
+        autoFocus: autoFocus,
         renderTagItem: (itemKey, index) => this.renderTagItem(itemKey, index),
         onRemove: itemKey => this.removeTag(itemKey),
         expandRestTagsOnClick: false
@@ -605,6 +615,7 @@ class TreeSelect extends BaseComponent {
         prefix: /*#__PURE__*/React.createElement(IconSearch, null)
       };
       const inputTriggerProps = {
+        autofocus: searchAutoFocus,
         onFocus: e => this.foundation.handleInputTriggerFocus(),
         onBlur: e => this.foundation.handleInputTriggerBlur(),
         disabled
@@ -636,7 +647,6 @@ class TreeSelect extends BaseComponent {
         return /*#__PURE__*/React.createElement(Input, Object.assign({
           "aria-label": 'Filter TreeSelect item',
           ref: this.inputRef,
-          autofocus: searchAutoFocus,
           placeholder: placeholder
         }, baseInputProps, realInputProps));
       }));
@@ -710,12 +720,18 @@ class TreeSelect extends BaseComponent {
 
     this.handlePopoverClose = isVisible => {
       const {
-        filterTreeNode
+        filterTreeNode,
+        searchAutoFocus,
+        searchPosition
       } = this.props;
 
       if (isVisible === false && Boolean(filterTreeNode)) {
         this.foundation.clearInput();
       }
+
+      if (filterTreeNode && searchPosition === strings.SEARCH_POSITION_DROPDOWN && isVisible && searchAutoFocus) {
+        this.foundation.focusInput(true);
+      }
     };
 
     this.renderTreeNode = (treeNode, ind, style) => {
@@ -1179,7 +1195,25 @@ class TreeSelect extends BaseComponent {
           isHovering: bool
         });
       },
-      updateInputFocus: bool => {} // eslint-disable-line
+      updateInputFocus: bool => {
+        if (bool) {
+          if (this.inputRef && this.inputRef.current) {
+            this.inputRef.current.focus();
+          }
+
+          if (this.tagInputRef && this.tagInputRef.current) {
+            this.tagInputRef.current.focus();
+          }
+        } else {
+          if (this.inputRef && this.inputRef.current) {
+            this.inputRef.current.blur();
+          }
+
+          if (this.tagInputRef && this.tagInputRef.current) {
+            this.tagInputRef.current.blur();
+          }
+        }
+      } // eslint-disable-line
 
     });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.24.0-beta.0",
+    "version": "2.24.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -17,12 +17,12 @@
         "lib/*"
     ],
     "dependencies": {
-        "@douyinfe/semi-animation": "2.24.0-beta.0",
-        "@douyinfe/semi-animation-react": "2.24.0-beta.0",
-        "@douyinfe/semi-foundation": "2.24.0-beta.0",
-        "@douyinfe/semi-icons": "2.24.0-beta.0",
-        "@douyinfe/semi-illustrations": "2.24.0-beta.0",
-        "@douyinfe/semi-theme-default": "2.24.0-beta.0",
+        "@douyinfe/semi-animation": "2.24.0",
+        "@douyinfe/semi-animation-react": "2.24.0",
+        "@douyinfe/semi-foundation": "2.24.0",
+        "@douyinfe/semi-icons": "2.24.0",
+        "@douyinfe/semi-illustrations": "2.24.0",
+        "@douyinfe/semi-theme-default": "2.24.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -69,7 +69,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "31e17a2fa310d85e240da05803b514a08507a451",
+    "gitHead": "3cf6c8a6fa76511fd3797c7168f9ecd4bc0ef662",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",