@douyinfe/semi-ui 2.5.0 → 2.6.0-beta.0

package/form/__test__/formApi.test.js

@@ -30,6 +30,11 @@ const fields = (
     </>
 );
 
+const getDomValue = (field, form) => {
+    let inputDOM = form.find(`[x-field-id="${field}"] input`).getDOMNode();
+    return inputDOM.getAttribute("value");
+};
+
 describe('Form-formApi', () => {
     beforeEach(() => {
         document.body.innerHTML = '';
@@ -416,6 +421,183 @@ describe('Form-formApi', () => {
         expect(formApi.getFormState().touched).toEqual({ a: { b: true, c: true }});
     })
 
+        it('formApi-setValue, field path precise', () => {
+        // case like:
+        // Exist 3 Field: a.b、a.c、a.d
+        // formApi.setValue('a.b', '123');
+        let formApi = null;
+        const fields = (
+            <>
+                <Form.Input field='a.b' />
+                <Form.Input field='a.c' />
+                <Form.Input field='a.d' />
+            </>
+        );
+        const props = {
+            children: fields,
+            getFormApi: api => {
+                formApi = api;
+            },
+        };
+        const form = getForm(props);
+        formApi.setValue('a.c', 'semi');
+        // check formState.values
+        let val = formApi.getValue('a.c');
+        expect(val).toEqual('semi');
+        form.update();
+        // check dom render
+        expect(getDomValue('a.c', form)).toEqual('semi');
+    });
+
+    it('formApi-setValue, field path belongs to parent aggregate', () => {
+        // case like:
+        // Exist 3 Field: a.b、a.c、a.d
+        // formApi.setValue('a', { b: 'semi', c: 'design' });
+        let formApi = null;
+        const fields = (
+            <>
+                <Form.Input field='a.b' />
+                <Form.Input field='a.c' />
+                <Form.Input field='a.d' />
+            </>
+        );
+        const props = {
+            children: fields,
+            getFormApi: api => {
+                formApi = api;
+            },
+        };
+        const form = getForm(props);
+        formApi.setValue('a', { b: 'semi', c: 'design' });
+        let acVal = formApi.getValue('a.c');
+        let abVal = formApi.getValue('a.b');
+        expect(abVal).toEqual('semi');
+        expect(acVal).toEqual('design');
+        form.update();
+
+        // check dom render
+        expect(getDomValue('a.b', form)).toEqual('semi');
+        expect(getDomValue('a.c', form)).toEqual('design');
+    });
+
+    it('formApi-setValue with array field path, 0 -> 3', () => {
+
+        const fields = ({ formState, values }) => {
+
+            return values.a && values.a.map((effect, i) => (
+                <div key={effect.key}>
+                    <Form.Input field={`a[${i}].name`} />
+                    <Form.Input field={`a[${i}].type`}  />
+                </div>
+            ));
+        };
+        let formApi = null;
+        const props = {
+            children: fields,
+            getFormApi: api => {
+                formApi = api;
+            },
+        };
+        const form = getForm(props);
+        let targetValue = [
+            { name: '0-name', type: '0-type' },
+            { name: '1-name', type: '1-type' },
+            { name: '2-name', type: '2-type' },
+        ];
+        formApi.setValue('a', targetValue);
+        let formStateValues = formApi.getValue();
+        form.update();
+        // check dom render
+        expect(getDomValue('a[0].name', form)).toEqual('0-name');
+        expect(getDomValue('a[0].type', form)).toEqual('0-type');
+        expect(getDomValue('a[1].name', form)).toEqual('1-name');
+        expect(getDomValue('a[1].type', form)).toEqual('1-type');
+        expect(getDomValue('a[2].name', form)).toEqual('2-name');
+        expect(getDomValue('a[2].type', form)).toEqual('2-type');
+    });
+
+    // // this case result was different in cypress / jest, jest result is wrong
+    // it('formApi-setValue with array field path, 3 -> 2, delete some field', done => {
+    //     const fields = ({ formState, values }) => {
+    //         return values.a && values.a.map((item, i) => (
+    //             <div key={item.key} style={{ width: 300 }}>
+    //                 <Form.Input field={`a[${i}].name`} />
+    //                 <Form.Input field={`a[${i}].type`} />
+    //             </div>
+    //         ));
+    //     };
+    //     let formApi = null;
+    //     const props = {
+    //         children: fields,
+    //         initValues: {
+    //             a: [
+    //                 { name: '0-name', type: '0-type', key: 0 },
+    //                 { name: '1-name', type: '1-type', key: 1 },
+    //                 { name: '2-name', type: '2-type', key: 2 },
+    //             ]
+    //         },
+    //         getFormApi: api => {
+    //             formApi = api;
+    //         },
+    //     };
+    //     let form = getForm(props);
+    //     // remove middle one
+    //     formApi.setValue('a', [
+    //         { name: '0-name', type: '0-type', key: 0 },
+    //         { name: '2-name', type: '2-type', key: 2 },
+    //     ]);
+    //     let formStateValues = formApi.getValue();
+    //     form.update();
+
+    //     setTimeout(() => {
+    //         // check dom render
+    //         expect(getDomValue('a[0].name', form)).toEqual('0-name');
+    //         expect(getDomValue('a[0].type', form)).toEqual('0-type');
+    //         expect(getDomValue('a[1].name', form)).toEqual('2-name');
+    //         expect(getDomValue('a[1].type', form)).toEqual('2-type');
+
+    //         expect(form.exists(`[x-field-id="a[2].name"] input`)).toEqual(false);
+    //         expect(form.exists(`[x-field-id="a[2].type"] input`)).toEqual(false);
+    //         done();
+    //     }, 5000);
+    // });
+
+    it('formApi-setValue with array field path, 1 -> 3, add some field', () => {
+        const fields = ({ formState, values }) => {
+            return values.a && values.a.map((effect, i) => (
+                <div key={effect.key}>
+                    <Form.Input field={`a[${i}].name`} />
+                    <Form.Input field={`a[${i}].type`} />
+                </div>
+            ));
+        };
+        let formApi = null;
+        const props = {
+            children: fields,
+            initValues: {
+                a: [{ name: 'semi', type: 'design' }]
+            },
+            getFormApi: api => {
+                formApi = api;
+            },
+        };
+        let form = getForm(props);
+        formApi.setValue('a', [
+            { name: '0-name', type: '0-type' },
+            { name: '1-name', type: '1-type' },
+            { name: '2-name', type: '2-type' },
+        ]);
+        let formStateValues = formApi.getValue();
+        form.update();
+        // check dom render
+        expect(getDomValue('a[0].name', form)).toEqual('0-name');
+        expect(getDomValue('a[0].type', form)).toEqual('0-type');
+        expect(getDomValue('a[1].name', form)).toEqual('1-name');
+        expect(getDomValue('a[1].type', form)).toEqual('1-type');
+        expect(getDomValue('a[2].name', form)).toEqual('2-name');
+        expect(getDomValue('a[2].type', form)).toEqual('2-type');
+    });
+
     // it('formApi-submitForm', () => {
     //     // submit should call validate first
     // });

package/form/_story/FormApi/arrayDemo.jsx

@@ -24,9 +24,9 @@ class ArrayDemo extends React.Component {
         this.state = {
             initValues: {
                 effects: [
-                    { name: '脸部贴纸', type: '2D', key: 0 },
-                    { name: '美妆', type: '2D', key: 1 },
-                    { name: '前景贴纸', type: '3D', key: 2 },
+                    { name: '1-name', type: '1-type', key: 0 },
+                    { name: '2-name', type: '2-type', key: 1 },
+                    { name: '3-name', type: '3-type', key: 2 },
                 ]
             }
         };
@@ -59,10 +59,7 @@ class ArrayDemo extends React.Component {
         return values.effects && values.effects.map((effect, i) => (
             <div key={effect.key} style={{ width: 1000, display: 'flex' }}>
                 <Form.Input field={`effects[${i}].name`} style={{ width: 200, marginRight: 16 }} />
-                <Form.Select field={`effects[${i}].type`} style={{ width: 90 }}>
-                    <Form.Select.Option value="2D">2D</Form.Select.Option>
-                    <Form.Select.Option value="3D">3D</Form.Select.Option>
-                </Form.Select>
+                <Form.Input field={`effects[${i}].type`} style={{ width: 90 }} />
                 <Button type="danger" onClick={() => this.remove(effect.key)} style={{ margin: 16 }}>Remove</Button>
             </div>
         ));

package/form/_story/Layout/slotDemo.jsx

@@ -98,7 +98,7 @@ class AssistComponent extends React.Component {
                             我是Semi Form SlotB, 我的Label Align、Width与众不同
                         </div>
                     </Form.Slot>
-                </Form>,
+                </Form>
                 <Form.Slot
                     label={{
                         text: 'SlotB',
@@ -117,7 +117,7 @@ class AssistComponent extends React.Component {
                     >
                         我是Slot，我并没有被Form包裹，我是单独使用的
                     </div>
-                </Form.Slot>,
+                </Form.Slot>
             </>
         );
     }

package/form/_story/demo.jsx

@@ -195,7 +195,7 @@ class BasicDemoWithInit extends Component {
                 initValues={formInitValue}
                 onReset={this.handleReset}
                 onValueChange={(v)=>console.log(v)}
-                style={{ padding: '10px', width: 600 }}
+                style={{ padding: '10px', width: 900 }}
                 autoScrollToError
                 aria-label='Demo Form'
                 id='demo-form-id'
@@ -341,6 +341,23 @@ class BasicDemoWithInit extends Component {
                         <Form.Switch field='switch' label='开关(Switch)'/>
                     </Col>
                 </Row>
+                <Form.CheckboxGroup field="cardCheckbox" label='卡片选择' style={{ width: '90%' }} type='card' initValue={['1', '3']} direction={'horizontal'} aria-label="CheckboxGroup 示例">
+                    <Form.Checkbox value={'1'} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+                        单选框标题
+                    </Form.Checkbox>
+                    <Form.Checkbox value={'2'} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+                        单选框标题
+                    </Form.Checkbox>
+                </Form.CheckboxGroup>
+                <Row>
+                    <Col span={12}>
+                        <Form.RadioGroup field='buttonRadio' type='button' buttonSize='middle' defaultValue={1} aria-label="单选组合示例">
+                            <Radio value={1}>即时推送</Radio>
+                            <Radio value={2}>定时推送</Radio>
+                            <Radio value={3}>动态推送</Radio>
+                        </Form.RadioGroup>
+                    </Col>
+                </Row>
                 </Form.Section>
                 <Form.Checkbox value="false" field="agree" useOutSideGroup={true} noLabel={true}>
                     我已阅读并清楚相关规定

package/form/_story/form.stories.js

@@ -158,6 +158,12 @@ FormApiSetValueUsingFieldParentPath.story = {
   name: 'formApi-setValue using field parent path',
 };
 
+export const UseFormApiSetValueUpdateArray = () => <ArrayDemo />;
+
+UseFormApiSetValueUpdateArray.story = {
+  name: 'formApi-setValue set array',
+};
+
 export const DynamicAddRemoveField = () => (
   <Form>
     {({ formState }) => (
@@ -209,12 +215,6 @@ _ArrayFieldCollapseDemo.story = {
   name: 'ArrayField-CollapseDemo',
 };
 
-export const ArrayFieldDynamicUpdate = () => <ArrayDemo />;
-
-ArrayFieldDynamicUpdate.story = {
-  name: 'ArrayField-dynamic update',
-};
-
 export const LinkField = () => <LinkFieldForm />;
 
 LinkField.story = {

package/form/baseForm.tsx

@@ -160,8 +160,8 @@ class Form extends BaseComponent<BaseFormProps, BaseFormState> {
             notifySubmitFail: (errors: ErrorMsg, values: any) => {
                 this.props.onSubmitFail(errors, values);
             },
-            forceUpdate: () => {
-                this.forceUpdate();
+            forceUpdate: (callback?: () => void) => {
+                this.forceUpdate(callback);
             },
             notifyChange: (formState: FormState) => {
                 this.props.onChange(formState);

package/form/hoc/withField.tsx

@@ -499,7 +499,7 @@ function withField<
                         text={label || field}
                         id={labelId}
                         required={required}
-                        name={name || field}
+                        name={a11yId || name || field}
                         width={mergeLabelWidth}
                         align={mergeLabelAlign}
                         {...needSpread}

package/lib/cjs/_base/base.css

@@ -19,7 +19,7 @@ body .semi-always-light {
   --semi-blue-2: 152,205,253;
   --semi-blue-3: 101,178,252;
   --semi-blue-4: 50,149,251;
-  --semi-blue-5: 0,119,250;
+  --semi-blue-5: 0,100,250;
   --semi-blue-6: 0,98,214;
   --semi-blue-7: 0,79,179;
   --semi-blue-8: 0,61,143;
@@ -410,7 +410,7 @@ body, body[theme-mode=dark] .semi-always-light {
   --semi-color-bg-4: rgba(var(--semi-white), 1);
   --semi-color-text-0: rgba(var(--semi-grey-9), 1);
   --semi-color-text-1: rgba(var(--semi-grey-9), .8);
-  --semi-color-text-2: rgba(var(--semi-grey-9), .6);
+  --semi-color-text-2: rgba(var(--semi-grey-9), .62);
   --semi-color-text-3: rgba(var(--semi-grey-9), .35);
   --semi-shadow-elevated: 0 0 1px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .1);
   --semi-border-radius-extra-small: 3px;
@@ -487,9 +487,9 @@ body[theme-mode=dark], body .semi-always-dark {
   --semi-color-nav-bg: rgba(35, 36, 41, 1);
   --semi-shadow-elevated: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 14px rgba(0, 0, 0, .25);
   --semi-color-overlay-bg: rgba(22, 22, 26, .6);
-  --semi-color-fill-0: rgba(var(--semi-white), .05);
-  --semi-color-fill-1: rgba(var(--semi-white), .09);
-  --semi-color-fill-2: rgba(var(--semi-white), .13);
+  --semi-color-fill-0: rgba(var(--semi-white), .12);
+  --semi-color-fill-1: rgba(var(--semi-white), .16);
+  --semi-color-fill-2: rgba(var(--semi-white), .20);
   --semi-color-border: rgba(var(--semi-white), .08);
   --semi-color-shadow: rgba(var(--semi-black), .04);
   --semi-color-bg-0: rgba(22, 22, 26, 1);

package/lib/cjs/calendar/monthCalendar.js

@@ -52,6 +52,7 @@ var _iconButton = _interopRequireDefault(require("../iconButton"));
 
 require("@douyinfe/semi-foundation/lib/cjs/calendar/calendar.css");
 
+/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
 // eslint-disable-next-line max-len
 const toPercent = num => {
   const res = num < 1 ? num * 100 : 100;
@@ -95,11 +96,13 @@ class monthCalendar extends _baseComponent.default {
       } = this.props;
       this.monthlyData = this.foundation.getMonthlyData(displayValue, dateFnsLocale);
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixCls, "-header")
+        className: "".concat(prefixCls, "-header"),
+        role: "presentation"
       }, /*#__PURE__*/_react.default.createElement("div", {
-        role: "gridcell",
+        role: "presentation",
         className: "".concat(prefixCls, "-grid")
       }, /*#__PURE__*/_react.default.createElement("ul", {
+        role: "row",
         className: "".concat(prefixCls, "-grid-row")
       }, (0, _map.default)(_context = this.monthlyData[0]).call(_context, day => {
         const {
@@ -109,6 +112,8 @@ class monthCalendar extends _baseComponent.default {
           ["".concat(_constants.cssClasses.PREFIX, "-weekend")]: markWeekend && day.isWeekend
         });
         return /*#__PURE__*/_react.default.createElement("li", {
+          role: "columnheader",
+          "aria-label": weekday,
           key: "".concat(weekday, "-monthheader"),
           className: listCls
         }, /*#__PURE__*/_react.default.createElement("span", null, weekday));
@@ -195,7 +200,10 @@ class monthCalendar extends _baseComponent.default {
 
       const text = /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
         componentName: "Calendar"
-      }, locale => /*#__PURE__*/_react.default.createElement("div", {
+      }, locale =>
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      _react.default.createElement("div", {
         className: "".concat(cardCls, "-wrapper"),
         style: {
           bottom: 0
@@ -264,11 +272,12 @@ class monthCalendar extends _baseComponent.default {
         day
       } = events;
       return /*#__PURE__*/_react.default.createElement("div", {
-        role: "gridcell",
+        role: "presentation",
         className: "".concat(prefixCls, "-weekrow"),
         ref: _this.cellDom,
         key: "".concat(index, "-weekrow")
       }, /*#__PURE__*/_react.default.createElement("ul", {
+        role: "row",
         className: "".concat(prefixCls, "-skeleton")
       }, (0, _map.default)(weekDay).call(weekDay, each => {
         const {
@@ -288,6 +297,9 @@ class monthCalendar extends _baseComponent.default {
         const shouldRenderCollapsed = Boolean(day && day[ind] && day[ind].length > itemLimit);
 
         const inner = /*#__PURE__*/_react.default.createElement("li", {
+          role: "gridcell",
+          "aria-label": date.toLocaleDateString(),
+          "aria-current": isToday ? "date" : false,
           key: "".concat(date, "-weeksk"),
           className: listCls,
           onClick: e => _this.handleClick(e, [date])
@@ -310,9 +322,10 @@ class monthCalendar extends _baseComponent.default {
         parsedEvents
       } = this.state;
       return /*#__PURE__*/_react.default.createElement("div", {
-        role: "gridcell",
+        role: "presentation",
         className: "".concat(prefixCls, "-week")
       }, /*#__PURE__*/_react.default.createElement("ul", {
+        role: "presentation",
         className: "".concat(prefixCls, "-grid-col")
       }, (0, _map.default)(_context3 = (0, _keys.default)(this.monthlyData)).call(_context3, weekInd => this.renderWeekRow(weekInd, this.monthlyData[weekInd], parsedEvents[weekInd]))));
     };
@@ -439,12 +452,15 @@ class monthCalendar extends _baseComponent.default {
     return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
       componentName: "Calendar"
     }, (locale, localeCode, dateFnsLocale) => /*#__PURE__*/_react.default.createElement("div", {
+      role: "grid",
       className: monthCls,
       key: this.state.itemLimit,
       style: monthStyle
     }, /*#__PURE__*/_react.default.createElement("div", {
+      role: "presentation",
       className: "".concat(prefixCls, "-sticky-top")
     }, header, this.renderHeader(dateFnsLocale)), /*#__PURE__*/_react.default.createElement("div", {
+      role: "presentation",
       className: "".concat(prefixCls, "-grid-wrapper")
     }, this.renderMonthGrid())));
   }

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

@@ -1,4 +1,4 @@
-import React, { ReactNode, CSSProperties, MouseEvent } from 'react';
+import React, { ReactNode, CSSProperties, MouseEvent, KeyboardEvent } from 'react';
 import PropTypes from 'prop-types';
 import { BasicCascaderInnerData, BasicCascaderProps, BasicTriggerRenderProps, BasicScrollPanelProps, CascaderAdapter, CascaderType } from '@douyinfe/semi-foundation/lib/cjs/cascader/foundation';
 import '@douyinfe/semi-foundation/lib/cjs/cascader/cascader.css';
@@ -24,6 +24,7 @@ export interface CascaderProps extends BasicCascaderProps {
     'aria-invalid'?: React.AriaAttributes['aria-invalid'];
     'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
     'aria-required'?: React.AriaAttributes['aria-required'];
+    'aria-label'?: React.AriaAttributes['aria-label'];
     arrowIcon?: ReactNode;
     defaultValue?: Value;
     dropdownStyle?: CSSProperties;
@@ -65,6 +66,7 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         'aria-errormessage': PropTypes.Requireable<string>;
         'aria-describedby': PropTypes.Requireable<string>;
         'aria-required': PropTypes.Requireable<boolean>;
+        'aria-label': PropTypes.Requireable<string>;
         arrowIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         changeOnSelect: PropTypes.Requireable<boolean>;
         defaultValue: PropTypes.Requireable<string | any[]>;
@@ -158,6 +160,7 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         onDropdownVisibleChange: (...args: any[]) => void;
         onListScroll: (...args: any[]) => void;
         enableLeafClick: boolean;
+        'aria-label': string;
     };
     options: any;
     isEmpty: boolean;
@@ -177,7 +180,7 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     renderTagItem: (value: string | Array<string>, idx: number, type: string) => React.ReactNode;
     renderTagInput(): JSX.Element;
     renderInput(): JSX.Element;
-    handleItemClick: (e: MouseEvent, item: Entity | Data) => void;
+    handleItemClick: (e: MouseEvent | KeyboardEvent, item: Entity | Data) => void;
     handleItemHover: (e: MouseEvent, item: Entity) => void;
     onItemCheckboxClick: (item: Entity | Data) => void;
     handleListScroll: (e: React.UIEvent<HTMLUListElement, UIEvent>, ind: number) => void;
@@ -191,6 +194,10 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     handleMouseOver: () => void;
     handleMouseLeave: () => void;
     handleClear: (e: MouseEvent) => void;
+    /**
+     * A11y: simulate clear button click
+     */
+    handleClearEnterPress: (e: KeyboardEvent) => void;
     showClearBtn: () => boolean;
     renderClearBtn: () => JSX.Element;
     renderArrow: () => JSX.Element;

package/lib/cjs/cascader/index.js

@@ -387,6 +387,15 @@ class Cascader extends _baseComponent.default {
       e && e.stopPropagation();
       this.foundation.handleClear();
     };
+    /**
+     * A11y: simulate clear button click
+     */
+
+
+    this.handleClearEnterPress = e => {
+      e && e.stopPropagation();
+      this.foundation.handleClearEnterPress();
+    };
 
     this.showClearBtn = () => {
       const {
@@ -413,6 +422,7 @@ class Cascader extends _baseComponent.default {
         return /*#__PURE__*/_react.default.createElement("div", {
           className: clearCls,
           onClick: this.handleClear,
+          onKeyPress: this.handleClearEnterPress,
           role: 'button',
           tabIndex: 0
         }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, null));
@@ -502,6 +512,7 @@ class Cascader extends _baseComponent.default {
         style: style,
         ref: this.triggerRef,
         onClick: e => this.foundation.handleClick(e),
+        onKeyPress: e => this.foundation.handleSelectionEnterPress(e),
         "aria-invalid": this.props['aria-invalid'],
         "aria-errormessage": this.props['aria-errormessage'],
         "aria-label": this.props['aria-label'],
@@ -941,6 +952,7 @@ Cascader.propTypes = {
   'aria-errormessage': _propTypes.default.string,
   'aria-describedby': _propTypes.default.string,
   'aria-required': _propTypes.default.bool,
+  'aria-label': _propTypes.default.string,
   arrowIcon: _propTypes.default.node,
   changeOnSelect: _propTypes.default.bool,
   defaultValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]),
@@ -1035,7 +1047,8 @@ Cascader.defaultProps = {
   onClear: _noop2.default,
   onDropdownVisibleChange: _noop2.default,
   onListScroll: _noop2.default,
-  enableLeafClick: false
+  enableLeafClick: false,
+  'aria-label': 'Cascader'
 };
 var _default = Cascader;
 exports.default = _default;

package/lib/cjs/cascader/item.d.ts

@@ -22,7 +22,7 @@ export interface CascaderItemProps {
     selectedKeys: Set<string>;
     loadedKeys: Set<string>;
     loadingKeys: Set<string>;
-    onItemClick: (e: React.MouseEvent, item: Entity | Data) => void;
+    onItemClick: (e: React.MouseEvent | React.KeyboardEvent, item: Entity | Data) => void;
     onItemHover: (e: React.MouseEvent, item: Entity) => void;
     showNext: ShowNextType;
     onItemCheckboxClick: (item: Entity | Data) => void;
@@ -57,7 +57,11 @@ export default class Item extends PureComponent<CascaderItemProps> {
     static defaultProps: {
         empty: boolean;
     };
-    onClick: (e: React.MouseEvent, item: Entity | Data) => void;
+    onClick: (e: React.MouseEvent | React.KeyboardEvent, item: Entity | Data) => void;
+    /**
+     * A11y: simulate item click
+     */
+    handleItemEnterPress: (keyboardEvent: React.KeyboardEvent, item: Entity | Data) => void;
     onHover: (e: React.MouseEvent, item: Entity) => void;
     onCheckboxChange: (e: CheckboxEvent, item: Entity | Data) => void;
     getItemStatus: (key: string) => {