@douyinfe/semi-ui 2.15.1 → 2.16.0

package/avatar/__test__/avatar.test.js

@@ -261,7 +261,7 @@ describe('Avatar', () => {
     it('src', () => {
         const element = (
            <Avatar
-                src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg"
+                src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png"
                 style={{ margin: 4 }}
             />
         );
@@ -272,7 +272,7 @@ describe('Avatar', () => {
                 .at(0)
                 .props()
                 .src
-        ).toEqual('https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg');
+        ).toEqual('https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png');
     });
 
     it('shape', () => {
@@ -320,7 +320,7 @@ describe('Avatar', () => {
         const avatar = mount(
             <Avatar 
                 onError={spyOnError}
-                src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg"
+                src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png"
             />
         );
         avatar

package/button/buttonGroup.tsx

@@ -33,9 +33,10 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
     };
 
     static defaultProps = {
+        // There are default values ​​for type and theme in Button. 
+        // In order to allow users to individually customize the type and theme of the Button through the parameters of the Button in the ButtonGroup,
+        // the default value of type and theme is not given in the ButtonGroup。
         size: 'default',
-        type: 'primary',
-        theme: 'light',
     };
 
     render() {

package/cascader/index.tsx

@@ -29,6 +29,7 @@ import Tag from '../tag';
 import TagInput from '../tagInput';
 import { Motion } from '../_base/base';
 import { isSemiIcon } from '../_utils';
+import { Position } from '../tooltip/index';
 
 export { CascaderType, ShowNextType } from '@douyinfe/semi-foundation/cascader/foundation';
 export { CascaderData, Entity, Data, CascaderItemProps } from './item';
@@ -82,6 +83,7 @@ export interface CascaderProps extends BasicCascaderProps {
     onBlur?: (e: MouseEvent) => void;
     onFocus?: (e: MouseEvent) => void;
     validateStatus?: ValidateStatus;
+    position?: Position;
 }
 
 export interface CascaderState extends BasicCascaderInnerData {
@@ -169,6 +171,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         leafOnly: PropTypes.bool,
         enableLeafClick: PropTypes.bool,
         preventScroll: PropTypes.bool,
+        position:PropTypes.string
     };
 
     static defaultProps = {
@@ -954,12 +957,13 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             stopPropagation,
             mouseLeaveDelay,
             mouseEnterDelay,
+            position
         } = this.props;
         const { isOpen, rePosKey } = this.state;
         const { direction } = this.context;
         const content = this.renderContent();
         const selection = this.renderSelection();
-        const pos = direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
+        const pos = position ?? (direction === 'rtl' ? 'bottomRight' : 'bottomLeft');
         const mergedMotion: Motion = this.foundation.getMergedMotion();
         return (
             <Popover

package/dist/css/semi.css

@@ -11788,7 +11788,7 @@ body[theme-mode=dark], body .semi-always-dark {
   border-color: var(--semi-color-focus-border);
 }
 .semi-input-wrapper-focus:active {
-  background-color: var(--semi-color-fill-0);
+  background-color: var(--semi-color-fill-2);
   border-color: var(--semi-color-focus-border);
 }
 .semi-input-wrapper.semi-input-readonly {
@@ -11806,6 +11806,10 @@ body[theme-mode=dark], body .semi-always-dark {
   background-color: var(--semi-color-danger-light-default);
   border-color: var(--semi-color-danger);
 }
+.semi-input-wrapper-error:active {
+  background-color: var(--semi-color-danger-light-active);
+  border-color: var(--semi-color-danger);
+}
 .semi-input-wrapper-warning {
   background-color: var(--semi-color-warning-light-default);
   border-color: var(--semi-color-warning-light-default);
@@ -11818,6 +11822,10 @@ body[theme-mode=dark], body .semi-always-dark {
   background-color: var(--semi-color-warning-light-default);
   border-color: var(--semi-color-warning);
 }
+.semi-input-wrapper-warning:active {
+  background-color: var(--semi-color-warning-light-active);
+  border-color: var(--semi-color-warning);
+}
 .semi-input-wrapper__with-prefix {
   display: inline-flex;
   align-items: center;
@@ -11938,6 +11946,12 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus ~ .semi-input-modebtn:not(:last-child), .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus ~ .semi-input-modebtn:not(:last-child) {
   border-radius: 0;
 }
+.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active {
+  background-color: var(--semi-color-fill-2);
+}
+.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active ~ .semi-input-modebtn {
+  background-color: var(--semi-color-fill-2);
+}
 .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:hover {
   background-color: var(--semi-color-fill-0);
 }
@@ -11966,6 +11980,13 @@ body[theme-mode=dark], body .semi-always-dark {
   background-color: var(--semi-color-danger-light-default);
   border-color: var(--semi-color-danger);
 }
+.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active {
+  background-color: var(--semi-color-danger-light-active);
+}
+.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active + .semi-input-modebtn {
+  background-color: var(--semi-color-danger-light-active);
+  border-color: var(--semi-color-danger);
+}
 .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn:hover {
   background-color: var(--semi-color-danger-light-default);
 }
@@ -11994,6 +12015,13 @@ body[theme-mode=dark], body .semi-always-dark {
   background-color: var(--semi-color-warning-light-default);
   border-color: var(--semi-color-warning);
 }
+.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active {
+  background-color: var(--semi-color-warning-light-active);
+}
+.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active + .semi-input-modebtn {
+  background-color: var(--semi-color-warning-light-active);
+  border-color: var(--semi-color-warning);
+}
 .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn:hover {
   background-color: var(--semi-color-warning-light-default);
 }
@@ -15192,11 +15220,11 @@ body[theme-mode=dark], body .semi-always-dark {
   align-items: center;
 }
 .semi-select-prefix-text, .semi-select-suffix-text {
-  margin: 0 12px;
+  margin: 0px 12px;
 }
 .semi-select-prefix-icon, .semi-select-suffix-icon {
   color: var(--semi-color-text-2);
-  margin: 0 8px;
+  margin: 0px 8px;
 }
 .semi-select-suffix {
   display: flex;
@@ -15654,6 +15682,9 @@ body[theme-mode=dark], body .semi-always-dark {
   cursor: pointer;
   transition: #fff 0.3s;
 }
+.semi-slider-handle:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+}
 .semi-slider-handle:hover {
   background-color: var(--semi-color-white);
 }
@@ -19651,6 +19682,7 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-tree-select-arrow {
   display: inline-flex;
   align-items: center;
+  flex-shrink: 0;
   height: 100%;
   justify-content: center;
   width: 32px;
@@ -19675,6 +19707,7 @@ body[theme-mode=dark], body .semi-always-dark {
   display: inline-flex;
   align-items: center;
   height: 100%;
+  flex-shrink: 0;
   justify-content: center;
   width: 32px;
   color: var(--semi-color-text-2);
@@ -20804,7 +20837,7 @@ p.semi-typography-extended,
 }
 .semi-input-textarea-wrapper-error:active {
   background-color: var(--semi-color-danger-light-active);
-  border-color: var(--semi-color-danger-light-active);
+  border-color: var(--semi-color-danger);
 }
 .semi-input-textarea-wrapper-warning {
   background-color: var(--semi-color-warning-light-default);
@@ -20820,7 +20853,7 @@ p.semi-typography-extended,
 }
 .semi-input-textarea-wrapper-warning:active {
   background-color: var(--semi-color-warning-light-active);
-  border-color: var(--semi-color-warning-light-active);
+  border-color: var(--semi-color-warning);
 }
 
 .semi-input-textarea {