@douyinfe/semi-ui 2.8.2 → 2.9.0

package/anchor/__test__/anchor.test.js

@@ -23,6 +23,7 @@ describe('Anchor', () => {
   it('anchor small size', () => {
     const smallAnchor = mount(<Anchor size="small" />);
     expect(smallAnchor.find(`.${BASE_CLASS_PREFIX}-anchor-size-small`)).toHaveLength(1);
+    smallAnchor.unmount();
   });
 
   it('anchor rail theme', () => {

package/anchor/_story/anchor.stories.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useState } from 'react';
+import Button from '../../button';
 import { Anchor } from '../../index';
 
 export default {
@@ -264,3 +265,24 @@ export const FixContainerScrollBug1158 = () => (
     </div>
   </div>
 );
+
+export const AutoCollapse = () => {
+  const [href, setHref] = useState('#设计语言');
+  return (
+      <div>
+        <Anchor autoCollapse>
+          <Anchor.Link href="#动态展示" title="1. 动态展示">
+            <Anchor.Link href="#组件" title="1.1 组件">
+                <Anchor.Link href="#头像" title="1.1.1 Avatar" />
+                <Anchor.Link href="#按钮" title="1.1.2 Button" />
+                <Anchor.Link href="#图标" title="1.1.3 Icon" />
+            </Anchor.Link>
+            <Anchor.Link href="#物料" title="1.2 物料" />
+            <Anchor.Link href="#主题商店" title="1.3 主题商店" />
+          </Anchor.Link>
+          <Anchor.Link href={href} title="2. 设计语言" />
+        </Anchor>
+        <Button onClick={()=>{console.log('sdf');setHref('#我改变啦')}}>setHref</Button>
+      </div>
+  )
+};

package/badge/index.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
-import { isNumber, isString } from 'lodash';
+import { isNumber, isString, noop } from 'lodash';
 import ConfigContext, { ContextValue } from '../configProvider/context';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/badge/constants';
 import '@douyinfe/semi-foundation/badge/badge.scss';
@@ -21,6 +21,9 @@ export interface BadgeProps {
     overflowCount?: number;
     style?: React.CSSProperties;
     className?: string;
+    onMouseEnter?: (e: React.MouseEvent) => any;
+    onMouseLeave?: (e: React.MouseEvent) => any;
+    onClick?: (e: React.MouseEvent) => any;
     children?: React.ReactNode | undefined;
 }
 
@@ -36,6 +39,9 @@ export default class Badge extends PureComponent<BadgeProps> {
         style: PropTypes.object,
         className: PropTypes.string,
         children: PropTypes.node,
+        onClick: PropTypes.func,
+        onMouseEnter: PropTypes.func,
+        onMouseLeave: PropTypes.func,
     };
 
     static defaultProps = {
@@ -43,6 +49,9 @@ export default class Badge extends PureComponent<BadgeProps> {
         type: 'primary',
         theme: 'solid',
         className: '',
+        onClick: () => noop,
+        onMouseEnter: () => noop,
+        onMouseLeave: () => noop,
     };
 
     context: ContextValue;
@@ -52,7 +61,7 @@ export default class Badge extends PureComponent<BadgeProps> {
         // DefaultPosition here, static can't get this
         const defaultPosition = direction === 'rtl' ? 'leftTop' : 'rightTop';
         // eslint-disable-next-line max-len
-        const { count, dot, type, theme, position = defaultPosition, overflowCount, style, children, className } = this.props;
+        const { count, dot, type, theme, position = defaultPosition, overflowCount, style, children, className, ...rest } = this.props;
         const custom = count && !(isNumber(count) || isString(count));
         const showBadge = count !== null && typeof count !== 'undefined';
         const wrapper = cls(className, {
@@ -71,7 +80,7 @@ export default class Badge extends PureComponent<BadgeProps> {
             content = count;
         }
         return (
-            <span className={prefixCls}>
+            <span className={prefixCls} {...rest}>
                 {children}
                 <span className={wrapper} style={style}>
                     {dot ? null : content}

package/cascader/_story/cascader.stories.js

@@ -697,7 +697,8 @@ export const ShowClear = () => {
       <Cascader
         style={{ marginLeft: 700, width: 300 }}
         treeData={treeData1}
-        placeholder="Please select"
+        placeholder="Please select when multiple"
+        multiple
         showClear
       />
       <br />
@@ -1434,4 +1435,18 @@ export const DynamicTreeData = () => {
           <br />
       </div>
   );
-}
+}
+
+
+export const SuperLongList = () => {
+    let treeData = new Array(100).fill().map(() => ({ label: '浙江省', value: 'zhejiang' }));
+    treeData.push({ label: '到底啦', value: 'bottom' })
+    return (
+        <Cascader
+            style={{ width: 300 }}
+            treeData={treeData}
+            placeholder="请选择所在地区"
+            onListScroll={()=>{console.log(123)}}
+        />
+    );
+};

package/cascader/index.tsx

@@ -828,7 +828,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
      */
     handleClearEnterPress = (e: KeyboardEvent) => {
         e && e.stopPropagation();
-        this.foundation.handleClearEnterPress();
+        this.foundation.handleClearEnterPress(e);
     };
 
     showClearBtn = () => {

package/checkbox/_story/checkbox.stories.js

@@ -754,7 +754,7 @@ export const CheckboxGroupCardStyle = () => (
       >
         多选框标题
       </Checkbox>
-    </CheckboxGroup> */}
+    </CheckboxGroup>
   </>
 );
 

package/collapse/item.tsx

@@ -89,6 +89,8 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
             children,
             itemKey,
             reCalcKey,
+            header,
+            extra,
             ...restProps
         } = this.props;
         const {

package/datePicker/_story/datePicker.stories.js

@@ -814,3 +814,40 @@ export const FixTriggerRenderClosePanel = () => {
 };
 FixTriggerRenderClosePanel.storyName = "fix triggerRender close bug"
 
+export const A11yKeyboardDemo = () => {
+  const [value, setValue] = useState(new Date('2022-08-08 00:00'));
+  const [rangeValue, setRangeValue] = useState([new Date('2022-08-08 00:00'), new Date('2022-08-09 12:00')]);
+
+  const handleChange = v => {
+    console.log('change', v);
+    setValue(v);
+  };
+
+   const handleRangeChange = v => {
+    console.log('change', v);
+    setRangeValue(v);
+  };
+
+  return (
+    <Space vertical align='start' data-cy="space">
+      <div  data-cy="dateRange">
+        <DatePicker
+          value={rangeValue}
+          type="dateRange"
+          onChange={handleRangeChange}
+          showClear
+        />
+      </div>
+      <div data-cy="date">
+        <DatePicker
+          onChange={handleChange}
+          showClear
+          multiple
+        />
+      </div>
+    </Space>
+  );
+};
+
+A11yKeyboardDemo.storyName = "a11y keyboard demo"
+

package/descriptions/index.tsx

@@ -10,8 +10,7 @@ import Item from './item';
 export { DescriptionsItemProps } from './item';
 export type DescriptionsSize = 'small' | 'medium' | 'large';
 export interface Data {
-    [x: string]: any;
-    key?: string | number;
+    key?: React.ReactNode;
     value?: (() => React.ReactNode) | React.ReactNode;
     hidden?: boolean;
 }
@@ -62,8 +61,8 @@ class Descriptions extends PureComponent<DescriptionsProps> {
             [`${prefixCls}-double-${size}`]: row,
         });
         const childrenList = data && data.length ?
-            data.map(item => (
-                isPlainObject(item) ? <Item key={item.key} itemKey={item.key} {...item}>{item.value}</Item> : null
+            data.map((item, index) => (
+                isPlainObject(item) ? <Item itemKey={item.key} {...item} key={index}>{item.value}</Item> : null
             )) :
             children;
         return (

package/descriptions/item.tsx

@@ -9,7 +9,7 @@ export interface DescriptionsItemProps {
     className?: string;
     children?: React.ReactNode | undefined | (() => React.ReactNode);
     style?: React.CSSProperties;
-    itemKey: string | number;
+    itemKey?: React.ReactNode;
 }
 
 const prefixCls = cssClasses.PREFIX;

package/dist/css/semi.css

@@ -759,12 +759,7 @@ body[theme-mode=dark], body .semi-always-dark {
   font-weight: 600;
 }
 .semi-avatar-content {
-  position: absolute;
   user-select: none;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  transform-origin: center;
 }
 .semi-avatar-extra-extra-small {
   width: 20px;
@@ -772,7 +767,7 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-avatar-extra-extra-small .semi-avatar-content {
   transform-origin: center;
-  transform: scale(0.8) translate(-62.5%, -62.5%);
+  transform: scale(0.8);
 }
 .semi-avatar-extra-extra-small .semi-avatar-label {
   font-size: 10px;
@@ -784,7 +779,7 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-avatar-extra-small .semi-avatar-content {
   transform-origin: center;
-  transform: scale(0.8) translate(-62.5%, -62.5%);
+  transform: scale(0.8);
 }
 .semi-avatar-extra-small .semi-avatar-label {
   font-size: 10px;
@@ -1108,19 +1103,13 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-portal-rtl .semi-avatar {
   direction: rtl;
 }
-.semi-rtl .semi-avatar-content,
-.semi-portal-rtl .semi-avatar-content {
-  left: auto;
-  right: 50%;
-  transform: translate(50%, -50%);
-}
 .semi-rtl .semi-avatar-extra-extra-small .semi-avatar-content,
 .semi-portal-rtl .semi-avatar-extra-extra-small .semi-avatar-content {
-  transform: scale(0.8) translate(62.5%, -62.5%);
+  transform: scale(0.8);
 }
 .semi-rtl .semi-avatar-extra-small .semi-avatar-content,
 .semi-portal-rtl .semi-avatar-extra-small .semi-avatar-content {
-  transform: scale(0.8) translate(62.5%, -62.5%);
+  transform: scale(0.8);
 }
 .semi-rtl .semi-avatar-hover,
 .semi-portal-rtl .semi-avatar-hover {
@@ -4572,6 +4561,64 @@ body[theme-mode=dark], body .semi-always-dark {
   padding-left: 80px;
 }
 
+.semi-divider {
+  margin: 1px 0px 1px 0px;
+  border-bottom: 1px solid var(--semi-color-border);
+  color: var(--semi-color-text-0);
+  box-sizing: border-box;
+}
+.semi-divider-dashed {
+  border-bottom-style: dashed;
+}
+.semi-divider-horizontal {
+  width: 100%;
+  display: flex;
+}
+.semi-divider-vertical {
+  border-bottom: 0;
+  display: inline-block;
+  margin: 0px 1px 0px 1px;
+  border-left: 1px solid var(--semi-color-border);
+  height: 20px;
+  vertical-align: middle;
+}
+.semi-divider-with-text {
+  display: flex;
+  border-bottom: 0;
+  white-space: nowrap;
+  align-items: center;
+}
+.semi-divider-with-text .semi-divider_inner-text {
+  font-weight: 600;
+  padding: 0px 8px 0px 8px;
+  display: inline-block;
+}
+.semi-divider-with-text::before, .semi-divider-with-text::after {
+  content: "";
+  width: 50%;
+  border-bottom: 1px solid var(--semi-color-border);
+}
+.semi-divider-with-text-left::before {
+  width: 40px;
+}
+.semi-divider-with-text-left::after {
+  flex: 1;
+}
+.semi-divider-with-text-right::before {
+  flex: 1;
+}
+.semi-divider-with-text-right::after {
+  width: 40px;
+}
+
+.semi-divider-dashed::before, .semi-divider-dashed::after {
+  border-bottom: 1px dashed var(--semi-color-border);
+}
+
+.semi-divider-vertical.semi-divider-dashed {
+  border-left: 1px dashed var(--semi-color-border);
+}
+
 .semi-dropdown {
   font-size: 14px;
   line-height: 20px;
@@ -4787,7 +4834,6 @@ body[theme-mode=dark], body .semi-always-dark {
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   flex-shrink: 0;
-  user-select: none;
 }
 .semi-form-field-label-disabled {
   color: var(--semi-color-disabled-text);
@@ -18415,7 +18461,7 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-transfer-left-empty {
   height: 36px;
 }
-.semi-transfer-left .semi-spin {
+.semi-transfer-left > .semi-spin {
   width: 100%;
   flex-grow: 1;
 }