@douyinfe/semi-ui 2.9.0-beta.0 → 2.9.1

package/_base/baseComponent.tsx

@@ -2,7 +2,7 @@
  * The Semi Foundation / Adapter architecture split was inspired by Material Component For Web. （https://github.com/material-components/material-components-web）
  * We re-implemented our own code based on the principle and added more functions we need according to actual needs.
  */
-import React, { Component } from 'react';
+import React, { Component, ReactNode } from 'react';
 import log from '@douyinfe/semi-foundation/utils/log';
 import { DefaultAdapter } from '@douyinfe/semi-foundation/base/foundation';
 import { VALIDATE_STATUS } from '@douyinfe/semi-foundation/base/constants';
@@ -15,6 +15,7 @@ export type ValidateStatus = ArrayElement<typeof VALIDATE_STATUS>;
 export interface BaseProps {
     style?: React.CSSProperties;
     className?: string;
+    children?: ReactNode | undefined | any;
 }
 
 // eslint-disable-next-line

package/_portal/index.tsx

@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom';
 import { BASE_CLASS_PREFIX } from '@douyinfe/semi-foundation/base/constants';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import ConfigContext from '../configProvider/context';
+import ConfigContext, { ContextValue } from '../configProvider/context';
 import '@douyinfe/semi-foundation/_portal/portal.scss';
 
 export interface PortalProps {
@@ -37,6 +37,7 @@ class Portal extends PureComponent<PortalProps, PortalState> {
     };
 
     el: HTMLElement;
+    context: ContextValue;
     constructor(props: PortalProps) {
         super(props);
         try {

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/anchor/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/anchor/constants';
@@ -17,6 +17,7 @@ export { LinkProps } from './link';
 export interface AnchorProps {
     autoCollapse?: boolean;
     className?: string;
+    children?: ReactNode | undefined;
     defaultAnchor?: string;
     getContainer?: () => HTMLElement | Window;
     maxHeight?: string | number;

package/anchor/link.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import BaseComponent from '../_base/baseComponent';
@@ -13,6 +13,7 @@ export interface LinkProps {
     href?: string;
     title?: string | React.ReactNode;
     className?: string;
+    children?: ReactNode | undefined;
     style?: React.CSSProperties;
     disabled?: boolean;
 }

package/autoComplete/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-types, max-len */
-import React from 'react';
+import React, { ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import cls from 'classnames';
 import { isEqual, noop } from 'lodash';
@@ -48,7 +48,7 @@ export interface AutoCompleteProps<T extends AutoCompleteItems> {
     autoAdjustOverflow?: boolean;
     autoFocus?: boolean;
     className?: string;
-    children?: React.ReactNode;
+    children?: ReactNode | undefined;
     data?: T[];
     disabled?: boolean;
     defaultOpen?: boolean;

package/avatar/interface.ts

@@ -22,7 +22,7 @@ export type AvatarColor =
     | 'yellow';
 
 export interface AvatarProps extends BaseProps {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
     color?: AvatarColor;
     shape?: AvatarShape;
     size?: AvatarSize;
@@ -42,7 +42,7 @@ export type AvatarGroupSize = 'extra-extra-small' | 'extra-small' | 'small' | 'm
 export type AvatarGroupOverlapFrom = 'start' | 'end';
 
 export interface AvatarGroupProps {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
     shape?: AvatarGroupShape;
     size?: AvatarGroupSize;
     overlapFrom?: AvatarGroupOverlapFrom;

package/backtop/index.tsx

@@ -20,6 +20,7 @@ export interface BackTopProps {
     onClick?: (e: React.MouseEvent) => void;
     style?: React.CSSProperties;
     className?: string;
+    children?: React.ReactNode | undefined;
 }
 
 export interface BackTopState {

package/badge/_story/badge.stories.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import Badge from '../index';
+import { Avatar, Badge } from '../../index';
+import { IconLock } from '@douyinfe/semi-icons';
 
 export default {
   title: 'Badge',
@@ -88,4 +89,35 @@ export const Theme = () => (
       <a style={style}></a>
     </Badge>
   </div>
-);
+);
+
+export const AvatarBadge = () => {
+  const style = {
+      width: '42px',
+      height: '42px',
+      borderRadius: '4px',
+  };
+  return (
+      <div>
+          <Badge count={5}>
+              <Avatar color='blue' shape='square' style={style}>BM</Avatar>
+          </Badge>
+          <br/>
+          <br/>
+          <Badge dot>
+              <Avatar color='blue' shape='square' style={style}>YL</Avatar>
+          </Badge>
+          <br/>
+          <br/>
+          <Badge count={<IconLock style={{color:'var(--semi-color-primary)'}}/>}>
+              <Avatar color='light-blue' shape='square' style={style}>XZ</Avatar>
+          </Badge>
+          <br/>
+          <br/>
+          <Badge count='NEW' >
+              <Avatar color='light-blue' shape='square' style={style}>WF</Avatar>
+          </Badge>
+      </div>
+  );  
+};
+AvatarBadge.storyName = '头像 badge';

package/badge/index.tsx

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { isNumber, isString, noop } from 'lodash';
-import ConfigContext from '../configProvider/context';
+import ConfigContext, { ContextValue } from '../configProvider/context';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/badge/constants';
 import '@douyinfe/semi-foundation/badge/badge.scss';
 
@@ -21,10 +21,10 @@ export interface BadgeProps {
     overflowCount?: number;
     style?: React.CSSProperties;
     className?: string;
-    children?: React.ReactNode;
     onMouseEnter?: (e: React.MouseEvent) => any;
     onMouseLeave?: (e: React.MouseEvent) => any;
     onClick?: (e: React.MouseEvent) => any;
+    children?: React.ReactNode | undefined;
 }
 
 export default class Badge extends PureComponent<BadgeProps> {
@@ -54,6 +54,8 @@ export default class Badge extends PureComponent<BadgeProps> {
         onMouseLeave: () => noop,
     };
 
+    context: ContextValue;
+
     render() {
         const { direction } = this.context;
         // DefaultPosition here, static can't get this

package/banner/index.tsx

@@ -20,6 +20,7 @@ export type Type = 'info' | 'danger' | 'warning' | 'success';
 export interface BannerProps {
     type?: Type;
     className?: string;
+    children?: React.ReactNode | undefined;
     fullMode?: boolean;
     title?: React.ReactNode;
     description?: React.ReactNode;

package/breadcrumb/bread-context.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { showToolTipProps } from './index';
 import { BreadcrumbItemInfo } from './item';
-export interface BreadContextProps {
+export interface BreadContextType {
     onClick?: (info: BreadcrumbItemInfo, event: React.MouseEvent) => void;
     showTooltip?: boolean | showToolTipProps;
     compact?: boolean;
     separator?: string | React.ReactNode;
 }
 
-const BreadContext = React.createContext<BreadContextProps>({});
+const BreadContext = React.createContext<BreadContextType>({});
 
 export default BreadContext;

package/breadcrumb/index.tsx

@@ -11,7 +11,7 @@ import { noop } from '@douyinfe/semi-foundation/utils/function';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import Popover from '../popover';
 import BreadcrumbItem, { RouteProps, BreadcrumbItemInfo } from './item';
-import BreadContext, { BreadContextProps } from './bread-context';
+import BreadContext, { BreadContextType } from './bread-context';
 import { TooltipProps } from '../tooltip';
 import { IconMore } from '@douyinfe/semi-icons';
 
@@ -49,7 +49,7 @@ interface BreadcrumbState {
 }
 
 class Breadcrumb extends BaseComponent<BreadcrumbProps, BreadcrumbState> {
-    static contextType: React.Context<BreadContextProps> = BreadContext;
+    static contextType: React.Context<BreadContextType> = BreadContext;
 
     static Item: typeof BreadcrumbItem = BreadcrumbItem;
 

package/breadcrumb/item.tsx

@@ -5,8 +5,8 @@ import { cssClasses } from '@douyinfe/semi-foundation/breadcrumb/constants';
 import BreadcrumbItemFoundation, { BreadcrumbItemAdapter, BreadcrumbItemInfo, Route } from '@douyinfe/semi-foundation/breadcrumb/itemFoundation';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import { noop } from '@douyinfe/semi-foundation/utils/function';
-import BreadContext from './bread-context';
-import Typography from '../typography';
+import BreadContext, { BreadContextType } from './bread-context';
+import Typography, { EllipsisPos, ShowTooltip as ShowTooltipType } from '../typography';
 import { merge, isUndefined, isNull } from 'lodash';
 
 const clsPrefix = cssClasses.PREFIX;
@@ -29,6 +29,12 @@ export interface BreadcrumbItemProps extends BaseProps {
 
 type BreadcrumbItemState = Record<string, never>;
 
+interface GetTooltipOptType {
+    width: number;
+    ellipsisPos: EllipsisPos;
+    opts?: ShowTooltipType['opts'];
+}
+
 export default class BreadcrumbItem extends BaseComponent<BreadcrumbItemProps, BreadcrumbItemState> {
     static isBreadcrumbItem = true;
     static contextType = BreadContext;
@@ -50,6 +56,8 @@ export default class BreadcrumbItem extends BaseComponent<BreadcrumbItemProps, B
         shouldRenderSeparator: true
     };
 
+    context: BreadContextType;
+
     get adapter(): BreadcrumbItemAdapter<BreadcrumbItemProps, BreadcrumbItemState> {
         return {
             ...super.adapter,
@@ -129,7 +137,7 @@ export default class BreadcrumbItem extends BaseComponent<BreadcrumbItemProps, B
         const showTooltip = this.getTooltipOpt();
         const icon = this.renderIcon();
         if (Boolean(children) && typeof children === 'string') {
-            const { opts, ellipsisPos, width } = showTooltip;
+            const { opts, ellipsisPos, width } = showTooltip as GetTooltipOptType;
             return (
                 <Fragment>
                     {icon}

package/button/Button.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/destructuring-assignment */
-import React, { PureComponent } from 'react';
+import React, { PureComponent, ReactNode } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/button/constants';
@@ -18,6 +18,7 @@ export interface ButtonProps {
     id?: string;
     block?: boolean;
     circle?: boolean;
+    children?: ReactNode | undefined;
     disabled?: boolean;
     className?: string;
     icon?: React.ReactNode;

package/button/buttonGroup.tsx

@@ -15,6 +15,7 @@ export interface ButtonGroupProps extends BaseProps {
     size?: Size;
     theme?: Theme;
     className?: string;
+    children?: React.ReactChild;
     'aria-label'?: React.AriaAttributes['aria-label'];
 }
 
@@ -43,7 +44,7 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
         const cls = classNames(`${prefixCls}-group`, className);
 
         if (children) {
-            inner = ((Array.isArray(children) ? children : [children])).map((itm, index) => (
+            inner = ((Array.isArray(children) ? children : [children])).map((itm: React.ReactChild, index) => (
                 isValidElement(itm)
                     ? cloneElement(itm, { disabled, size, type, ...itm.props, ...rest, key: index })
                     : itm

package/calendar/_story/Demo.tsx

@@ -14,7 +14,7 @@ const Demo = () => {
 
             </Calendar>
         </div>
-    )
-}
+    );
+};
 
-export default Demo
+export default Demo;

package/card/cardGroup.tsx

@@ -11,6 +11,7 @@ export type CardGroupType = 'grid';
 export interface CardGroupProps {
     /** Card group style class name */
     className?: string;
+    children?: React.ReactNode | undefined;
     /** Card Spacing */
     spacing?: number | number[];
     /** Card group inline style */

package/card/index.tsx

@@ -26,6 +26,7 @@ export interface CardProps {
     bordered?: boolean;
     /** Style class name */
     className?: string;
+    children?: React.ReactNode | undefined;
     /** Cover */
     cover?: ReactNode;
     /** Additional additions to the right of the title */

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

@@ -19,7 +19,7 @@ import '@douyinfe/semi-foundation/cascader/cascader.scss';
 import { IconClear, IconChevronDown } from '@douyinfe/semi-icons';
 import { findKeysForValues, convertDataToEntities, calcMergeType } from '@douyinfe/semi-foundation/cascader/util';
 import { calcCheckedKeys, normalizeKeyList, calcDisabledKeys } from '@douyinfe/semi-foundation/tree/treeUtil';
-import ConfigContext from '../configProvider/context';
+import ConfigContext, { ContextValue } from '../configProvider/context';
 import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
 import Input from '../input/index';
 import Popover, { PopoverProps } from '../popover/index';
@@ -62,7 +62,7 @@ export interface CascaderProps extends BasicCascaderProps {
     motion?: Motion;
     treeData?: Array<CascaderData>;
     restTagsPopoverProps?: PopoverProps;
-    children?: ReactNode;
+    children?: React.ReactNode | undefined;
     value?: Value;
     prefix?: ReactNode;
     suffix?: ReactNode;
@@ -209,6 +209,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     optionsRef: React.RefObject<any>;
     clickOutsideHandler: any;
     mergeType: string;
+    context: ContextValue;
 
     constructor(props: CascaderProps) {
         super(props);
@@ -827,7 +828,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
      */
     handleClearEnterPress = (e: KeyboardEvent) => {
         e && e.stopPropagation();
-        this.foundation.handleClearEnterPress();
+        this.foundation.handleClearEnterPress(e);
     };
 
     showClearBtn = () => {

package/cascader/item.tsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/cascader/constants';
 import isEnterPress from '@douyinfe/semi-foundation/utils/isEnterPress';
 import { includes } from 'lodash';
-import ConfigContext from '../configProvider/context';
+import ConfigContext, { ContextValue } from '../configProvider/context';
 import LocaleConsumer from '../locale/localeConsumer';
 import { IconChevronRight, IconTick } from '@douyinfe/semi-icons';
 import { Locale } from '../locale/interface';
@@ -85,6 +85,8 @@ export default class Item extends PureComponent<CascaderItemProps> {
         empty: false,
     };
 
+    context: ContextValue;
+
     onClick = (e: React.MouseEvent | React.KeyboardEvent, item: Entity | Data) => {
         const { onItemClick } = this.props;
         if (item.data.disabled || ('disabled' in item && item.disabled)) {

package/checkbox/_story/checkbox.stories.js

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

package/checkbox/checkbox.tsx

@@ -7,7 +7,7 @@ import CheckboxFoundation, { CheckboxAdapter, BasicCheckboxEvent, BasicTargetObj
 import CheckboxInner from './checkboxInner';
 import BaseComponent from '../_base/baseComponent';
 import '@douyinfe/semi-foundation/checkbox/checkbox.scss';
-import { Context } from './context';
+import { Context, CheckboxContextType } from './context';
 import { isUndefined, isBoolean, noop } from 'lodash';
 import { getUuidShort } from '@douyinfe/semi-foundation/utils/uuid';
 export type CheckboxEvent = BasicCheckboxEvent;
@@ -19,6 +19,7 @@ export interface CheckboxProps extends BaseCheckboxProps {
     'aria-invalid'?: React.AriaAttributes['aria-invalid'];
     'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
     'aria-required'?: React.AriaAttributes['aria-required'];
+    children?: React.ReactNode | undefined;
     onChange?: (e: CheckboxEvent) => any;
     // TODO, docs
     style?: React.CSSProperties;
@@ -71,6 +72,7 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
         onMouseLeave: noop,
     };
     checkboxEntity: CheckboxInner;
+    context: CheckboxContextType;
 
     get adapter(): CheckboxAdapter<CheckboxProps, CheckboxState> {
         return {
@@ -120,7 +122,7 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
     }
 
     isInGroup() {
-        return this.context && this.context.checkboxGroup;
+        return Boolean(this.context && this.context.checkboxGroup);
     }
 
     focus() {

package/checkbox/checkboxGroup.tsx

@@ -24,7 +24,7 @@ export type CheckboxGroupProps = {
     options?: any[];
     value?: any[];
     onChange?: (value: any[]) => void;
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
     prefixCls?: string;
     direction?: CheckboxDirection;
     style?: React.CSSProperties;

package/checkbox/context.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import {  BasicCheckboxEvent } from '@douyinfe/semi-foundation/checkbox/checkboxFoundation';
-type CheckboxContext = {
+type CheckboxContextType = {
     checkboxGroup?: {
         onChange: (evt: BasicCheckboxEvent) => void;
         value: any[];
@@ -10,5 +10,5 @@ type CheckboxContext = {
         isPureCardType: boolean;
     };
 };
-const Context = React.createContext<CheckboxContext>({});
-export { Context };
+const Context = React.createContext<CheckboxContextType>({});
+export { Context, CheckboxContextType };

package/collapse/index.tsx

@@ -20,6 +20,7 @@ export { CollapsePanelProps } from './item';
 export interface CollapseReactProps extends CollapseProps{
     expandIcon?: React.ReactNode;
     collapseIcon?: React.ReactNode;
+    children?: React.ReactNode | undefined;
     style?: CSSProperties;
     onChange?: (activeKey: CollapseProps['activeKey'], e: React.MouseEvent) => void;
 }

package/collapse/item.tsx

@@ -12,6 +12,7 @@ export interface CollapsePanelProps {
     extra?: ReactNode;
     header?: ReactNode;
     className?: string;
+    children?: React.ReactNode | undefined;
     reCalcKey?: number | string;
     style?: CSSProperties;
 }
@@ -35,6 +36,8 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
 
     private ariaID = getUuidShort({});
 
+    context: CollapseContextType;
+
     renderHeader(active: boolean, expandIconEnable = true) {
         const {
             header,
@@ -86,6 +89,8 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
             children,
             itemKey,
             reCalcKey,
+            header,
+            extra,
             ...restProps
         } = this.props;
         const {

package/collapsible/index.tsx

@@ -11,7 +11,7 @@ const ease = 'cubicBezier(.25,.1,.25,1)';
 
 export interface CollapsibleProps {
     motion?: Motion;
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
     isOpen?: boolean;
     duration?: number;
     keepDOM?: boolean;
@@ -72,7 +72,7 @@ const Collapsible = (props: CollapsibleProps) => {
         return isOpen || !shouldKeepDOM() && !motion ? 'none' : collapseHeight;
     }, [collapseHeight, motion, isOpen, shouldKeepDOM]);
 
-    const renderChildren = (transitionStyle: Record<string, any>) => {
+    const renderChildren = (transitionStyle: Record<string, any> | null) => {
         const transition =
             transitionStyle && typeof transitionStyle === 'object' ?
                 formatStyle(transitionStyle) :

package/configProvider/context.tsx

@@ -11,4 +11,4 @@ export interface ContextValue {
 
 const ConfigContext = React.createContext<ContextValue>({});
 
-export default ConfigContext;
+export default ConfigContext;

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/datePicker/datePicker.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { noop, stubFalse, isDate, get, isFunction, isEqual } from 'lodash';
-import ConfigContext from '../configProvider/context';
+import ConfigContext, { ContextValue } from '../configProvider/context';
 import DatePickerFoundation, { DatePickerAdapter, DatePickerFoundationProps, DatePickerFoundationState, DayStatusType, PresetType, Type, RangeType } from '@douyinfe/semi-foundation/datePicker/foundation';
 import { cssClasses, strings, numbers } from '@douyinfe/semi-foundation/datePicker/constants';
 import { strings as popoverStrings, numbers as popoverNumbers } from '@douyinfe/semi-foundation/popover/constants';
@@ -175,6 +175,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
     _mounted: boolean;
 
     foundation: DatePickerFoundation;
+    context: ContextValue;
 
     constructor(props: DatePickerProps) {
         super(props);