@douyinfe/semi-ui 2.9.0-beta.1 → 2.10.0-alpha.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/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/checkbox/checkbox.tsx

@@ -29,9 +29,13 @@ export interface CheckboxProps extends BaseCheckboxProps {
     'aria-label'?: React.AriaAttributes['aria-label'];
     role?: React.HTMLAttributes<HTMLSpanElement>['role']; // a11y: wrapper role
     tabIndex?: number; // a11y: wrapper tabIndex
+    addonId?: string;
+    extraId?: string;
 }
 interface CheckboxState {
     checked: boolean;
+    addonId?: string;
+    extraId?: string;
 }
 class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
     static contextType = Context;
@@ -89,7 +93,13 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             notifyGroupChange: cbContent => {
                 this.context.checkboxGroup.onChange(cbContent);
             },
-            getGroupDisabled: () => (this.context && this.context.checkboxGroup.disabled)
+            getGroupDisabled: () => (this.context && this.context.checkboxGroup.disabled),
+            setAddonId: () => {
+                this.setState({ addonId: getUuidShort({ prefix: 'addon' }) });
+            },
+            setExtraId: () => {
+                this.setState({ extraId: getUuidShort({ prefix: 'extra' }) });
+            }
         };
     }
 
@@ -103,11 +113,11 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
 
         this.state = {
             checked: props.checked || props.defaultChecked || checked,
+            addonId: props.addonId,
+            extraId: props.extraId,
         };
 
         this.checkboxEntity = null;
-        this.addonId = getUuidShort({ prefix: 'addon' });
-        this.extraId = getUuidShort({ prefix: 'extra' });
         this.foundation = new CheckboxFoundation(this.adapter);
     }
 
@@ -153,7 +163,7 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             tabIndex,
             id
         } = this.props;
-        const { checked } = this.state;
+        const { checked, addonId, extraId } = this.state;
         const props: Record<string, any> = {
             checked,
             disabled,
@@ -196,8 +206,8 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
 
         const renderContent = () => (
             <>
-                {children ? <span id={this.addonId} className={`${prefix}-addon`}>{children}</span> : null}
-                {extra ? <div id={this.extraId} className={extraCls}>{extra}</div> : null}
+                {children ? <span id={addonId} className={`${prefix}-addon`}>{children}</span> : null}
+                {extra ? <div id={extraId} className={extraCls}>{extra}</div> : null}
             </>
         );
         return (
@@ -218,8 +228,8 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
                 <CheckboxInner
                     {...this.props}
                     {...props}
-                    addonId={children && this.addonId}
-                    extraId={extra && this.extraId}
+                    addonId={children && addonId}
+                    extraId={extra && extraId}
                     name={name}
                     isPureCardType={props.isPureCardType}
                     ref={ref => {

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/dist/css/semi.css

@@ -4834,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);
@@ -18462,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;
 }