@douyinfe/semi-ui 2.14.0-beta.1 → 2.15.0-beta.0

package/dropdown/context.ts

@@ -1,8 +1,10 @@
 import React from 'react';
+import { TooltipProps } from '../tooltip/index';
 
 export interface DropdownContextType {
     level?: number;
     showTick?: boolean;
+    trigger?: TooltipProps['trigger'];
 }
 
 const DropdownContext = React.createContext<DropdownContextType>({

package/dropdown/dropdownItem.tsx

@@ -25,6 +25,7 @@ export interface DropdownItemProps extends BaseProps {
 const prefixCls = css.PREFIX;
 
 class DropdownItem extends BaseComponent<DropdownItemProps> {
+
     static propTypes = {
         children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
         name: PropTypes.string,
@@ -93,7 +94,7 @@ class DropdownItem extends BaseComponent<DropdownItemProps> {
             );
         }
         return (
-            <li role="menuitem" {...events} ref={ref => forwardRef(ref)} className={itemclass} style={style}>
+            <li role="menuitem" tabIndex={-1} aria-disabled={disabled} {...events} ref={ref => forwardRef(ref)} className={itemclass} style={style}>
                 {tick}
                 {iconContent}
                 {children}

package/dropdown/dropdownMenu.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { cssClasses } from '@douyinfe/semi-foundation/dropdown/constants';
+import Foundation from '@douyinfe/semi-foundation/dropdown/menuFoundation';
+import DropdownContext from './context';
 
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 
@@ -15,10 +17,31 @@ class DropdownMenu extends BaseComponent<DropdownMenuProps> {
         style: PropTypes.object,
     };
 
+    static contextType = DropdownContext;
+
+    menuRef: React.RefObject<HTMLUListElement>
+
+    constructor(props: DropdownMenuProps) {
+        super(props);
+
+        this.menuRef = React.createRef();
+        this.foundation = new Foundation(this.adapter);
+    }
+
+    get adapter() {
+        return {
+            ...super.adapter,
+        };
+    }
+
+    componentDidMount() {
+        this.foundation.autoFocus(this.menuRef.current);
+    }
+
     render() {
         const { children, className, style, ...rest } = this.props;
         return (
-            <ul role="menu" aria-orientation="vertical" {...rest} className={classnames(`${prefixCls}-menu`, className)} style={style}>
+            <ul role="menu" aria-orientation="vertical" ref={this.menuRef} {...rest} className={classnames(`${prefixCls}-menu`, className)} style={style} onKeyDown={e => this.foundation.onMenuKeydown(e)}>
                 {children}
             </ul>
         );

package/dropdown/index.tsx

@@ -58,6 +58,8 @@ export interface DropdownProps extends TooltipProps {
     onVisibleChange?: (visible: boolean) => void;
     rePosKey?: string | number;
     showTick?: boolean;
+    closeOnEsc?: TooltipProps['closeOnEsc'];
+    onEscKeyDown?: TooltipProps['onEscKeyDown'];
 }
 
 interface DropdownState {
@@ -106,6 +108,8 @@ class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
         position: 'bottom',
         mouseLeaveDelay: strings.DEFAULT_LEAVE_DELAY,
         showTick: false,
+        closeOnEsc: true,
+        onEscKeyDown: noop,
     };
 
     constructor(props: DropdownProps) {
@@ -131,10 +135,10 @@ class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
     handleVisibleChange = (visible: boolean) => this.foundation.handleVisibleChange(visible);
 
     renderContent() {
-        const { render, menu, contentClassName, style, showTick, prefixCls } = this.props;
+        const { render, menu, contentClassName, style, showTick, prefixCls, trigger } = this.props;
         const className = classnames(prefixCls, contentClassName);
         const { level = 0 } = this.context;
-        const contextValue = { showTick, level: level + 1 };
+        const contextValue = { showTick, level: level + 1, trigger };
         let content = null;
         if (React.isValidElement(render)) {
             content = render;
@@ -233,6 +237,7 @@ class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
                 trigger={trigger}
                 onVisibleChange={this.handleVisibleChange}
                 showArrow={false}
+                returnFocusOnClose={true}
                 {...attr}
             >
                 {React.isValidElement(children) ?
@@ -240,6 +245,9 @@ class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
                         className: classnames(get(children, 'props.className'), {
                             [`${prefixCls}-showing`]: popVisible,
                         }),
+                        'aria-haspopup': true,
+                        'aria-expanded': popVisible,
+                        onKeyDown: e => this.foundation.handleKeyDown(e)
                     }) :
                     children}
             </Tooltip>

package/form/_story/form.stories.tsx

@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from 'react';
 import { storiesOf } from '@storybook/react';
-import { Form, useFormState, useFormApi, withField, Input, Button } from '../../index';
+import { Form, useFormState, useFormApi, withField, Input, Button, Upload } from '../../index';
 import { values } from 'lodash';
 const stories = storiesOf('Form', module);
 
@@ -64,40 +64,44 @@ const htmlInput = (props: any) => {
 const FieldB = withField(Input);
 const FieldA = withField(htmlInput, { valueKey: 'value', onKeyChangeFnName: 'onChange', valuePath: 'target.value' });
 
-const Fields: FunctionComponent<FormFCChild> = ({ formState, values, formApi }) => (
+const Fields: FunctionComponent<FormFCChild> = ({ formState, values, formApi }) => {
+    const ref = React.useRef();
+    return (
     <>
-        <Form.Rating field='test' className='fe' count={2} />
+        <Form.Rating field='test' className='fe' count={2} ref={ref}  />
 
-        <Form.Input field='test' />
+        <Form.Input field='test'  ref={ref}  />
         <Input size='default' showClear insetLabel />
         <FieldB insetLabel placeholder='fe' fieldClassName='fefe' field='custom' />
 
         <Button onClick={() => formApi.setValue('fieldA', 'fe')}>set</Button>
-        <Form.Select field='test'>
+        <Form.Select field='test' ref={ref}>
             <Form.Select.Option value="f1"></Form.Select.Option>
             <Form.Select.Option value="f2"></Form.Select.Option>
         </Form.Select>
-        <Form.Input field="UserName" label="用户名"/>
-        <Form.TextArea field="textarea" onKeyDown={(v: any) => console.log(v)} />
+        <Form.Input field="UserName" label="用户名" ref={ref} />
+        <Form.TextArea field="textarea" onKeyDown={(v: any) => console.log(v)}  ref={ref}  />
         <Form.Input field="Password" label="密码" />
-        <Form.InputNumber field="number" />
+        <Form.InputNumber field="number"  ref={ref} />
         <Form.Rating field="rating" />
-        <Form.Switch field="switch" checkedText="on" uncheckedText="off" />
+        <Form.Switch field="switch" checkedText="on" uncheckedText="off"  ref={ref} />
 
         <Form.Cascader
             placeholder="请选择所在地区"
             field="area"
+            ref={ref} 
             label={{ text: '123', required: true, extra: 123 }}
             treeData={treeData}
         ></Form.Cascader>
-        <Form.TimePicker field="time" minuteStep={2} />
+        <Form.TimePicker field="time" minuteStep={2} ref={ref} />
         <Form.AutoComplete field="fe" />
 
-        <Form.TreeSelect field="treeSelect" treeData={treeData} />
-        <Form.Slider field="slider" />
-        <Form.DatePicker field="datepicker" />
+        <Form.TreeSelect field="treeSelect" treeData={treeData} ref={ref} />
+        <Form.Slider field="slider" ref={ref}  />
+        <Form.DatePicker field="datepicker" ref={ref} />
         <Form.CheckboxGroup
             field="type"
+            ref={ref} 
             label="申请类型（CheckboxGroup）"
             initValue={['user', 'admin']}
             rules={[{ required: true }]}
@@ -109,6 +113,7 @@ const Fields: FunctionComponent<FormFCChild> = ({ formState, values, formApi })
         </Form.CheckboxGroup>
         <Form.RadioGroup
             field="radio"
+            ref={ref} 
             label="是否独占资源（Radio）"
             rules={[{ type: 'boolean' }, { required: true, message: '必须选择是否独占 ' }]}
         >
@@ -122,11 +127,13 @@ const Fields: FunctionComponent<FormFCChild> = ({ formState, values, formApi })
         <Form.ErrorMessage error="errorText" />
         <FieldB field="custom" />
         <FieldA field="cuB" />
-        <Form.Upload fileName='semi' action='https://test.com' field='file' />
+        <Form.TagInput field='tagInput' ref={ref} ></Form.TagInput>
+        <Form.Upload ref={ref} fileName='semi' action='https://test.com' field='file' />
         <Form.Slot />
         <code style={{ marginTop: 30 }}>{JSON.stringify(formState)}</code>
     </>
-);
+    )
+};
 
 stories.add('Form', () => <Form>{Fields}</Form>);
 
@@ -138,14 +145,21 @@ interface IProps {
 interface IState {
     visible: boolean;
 }
+
+interface FData {
+    test: boolean;
+    test2: boolean;
+    test3: string;
+    // [x: string]: unknown;
+}
 class Demo extends React.Component<IProps, IState> {
     constructor(props:any) {
       super(props);
       this.state = { visible: false};
     }
 
-    getFormApi(formApi: FormApi) {
-
+    getFormApi(formApi: FormApi<FData>) {
+        formApi.getValue()
     }
 
     render() {
@@ -153,6 +167,7 @@ class Demo extends React.Component<IProps, IState> {
       return (
         <>
           <Form getFormApi={this.getFormApi}>
+
           </Form>
         </>
       );

package/form/hoc/withField.tsx

@@ -28,7 +28,7 @@ const prefix = cssClasses.PREFIX;
 
 function withField<
     C extends React.ElementType,
-    T extends Subtract<React.ComponentProps<C>, CommonexcludeType> & CommonFieldProps,
+    T extends Subtract<React.ComponentProps<C>, CommonexcludeType> & CommonFieldProps & React.RefAttributes<any>,
     R extends React.ComponentType<T>
 >(Component: C, opts?: WithFieldOption): R {
     let SemiField = (props: any, ref: React.MutableRefObject<any> | ((instance: any) => void)) => {

package/form/interface.ts

@@ -84,7 +84,7 @@ export interface SelectStatic {
     OptGroup: typeof OptGroup;
 }
 
-export class Field<P> extends React.Component<Subtract<P & CommonFieldProps, CommonexcludeType>> {}
+export class Field<P> extends React.Component<Subtract<P & CommonFieldProps, CommonexcludeType> & React.RefAttributes<any>> {}
 export let FormSelectType: React.ComponentType<Subtract<SelectProps & CommonFieldProps, CommonexcludeType>> & SelectStatic;
 export let FormCheckboxType: React.ComponentType<Subtract<CommonFieldProps, RadioCheckboxExcludeProps> & CheckboxProps & RCIncludeType>;
 export let FormRadioType: React.ComponentType<Subtract<CommonFieldProps, RadioCheckboxExcludeProps> & RadioProps & RCIncludeType>;

package/input/__test__/input.test.js

@@ -3,6 +3,7 @@ import Icon from '../../icons/index';
 import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
 import GraphemeSplitter from 'grapheme-splitter';
 import { isString, isFunction } from 'lodash';
+import { InputGroup, InputNumber } from '../../index';
 
 function getValueLength(str) {
   if (isString(str)) {
@@ -251,4 +252,34 @@ describe('Input', () => {
       expect(truncateValue(value, length, fc)).toBe(result);
     }
   })
+
+  it('input group', () => {
+    const groupFocus = sinon.spy(() => {
+      console.log('group focus');
+    });
+    const groupBlur = sinon.spy(() => {
+      console.log('group focus');
+    });
+    const inputFocus = sinon.spy(() => {
+      console.log('input focus');
+    });
+    const inputBlur = sinon.spy(() => {
+      console.log('input blur');
+    });
+    const inputGroup = mount(
+      <InputGroup disabled={true} onFocus={groupFocus} onBlur={groupBlur}>
+          <Input disabled={false} onFocus={inputFocus} onBlur={inputBlur} placeholder="Name" style={{ width: 100 }} />
+          <InputNumber placeholder="Score" style={{ width: 140 }} />
+      </InputGroup>
+    );
+
+    inputGroup.find('input').at(0).simulate('focus');
+    expect(inputFocus.called).toBe(true);
+    expect(groupFocus.called).toBe(true);
+    inputGroup.find('input').at(0).simulate('blur');
+    expect(inputBlur.called).toBe(true);
+    expect(groupBlur.called).toBe(true);
+    expect(inputGroup.find('input').at(0).instance().disabled).toBe(false);
+    expect(inputGroup.find('input').at(1).instance().disabled).toBe(true);
+  })
 });

package/input/_story/input.stories.js

@@ -22,7 +22,8 @@ import {
   Switch,
   Form,
   Space,
-  Radio
+  Radio,
+  InputNumber
 } from '../../index';
 import './input.scss';
 import RTLWrapper from '../../configProvider/_story/RTLDirection/RTLWrapper';
@@ -936,3 +937,25 @@ export const InputA11y = () => {
   );
 }
 InputA11y.storyName = "input a11y";
+
+export const FixInputGroup = () => {
+  const groupFocus = () => {
+    console.log('group focus');
+  }
+  const groupBlur = () => {
+    console.log('group blur');
+  }
+  const inputFocus = () => {
+    console.log('input focus');
+  }
+  const inputBlur = () => {
+    console.log('input blur');
+  }
+
+  return (
+    <InputGroup disabled={true} onFocus={groupFocus} onBlur={groupBlur}>
+        <Input disabled={false} onFocus={inputFocus} onBlur={inputBlur} placeholder="Name" style={{ width: 100 }} />
+        <InputNumber placeholder="Score" style={{ width: 140 }} />
+    </InputGroup>
+  );
+}

package/input/index.tsx

@@ -64,6 +64,7 @@ export interface InputProps extends
     inputStyle?: React.CSSProperties;
     getValueLength?: (value: string) => number;
     forwardRef?: ((instance: any) => void) | React.MutableRefObject<any> | null;
+    preventScroll?: boolean;
 }
 
 export interface InputState {
@@ -117,6 +118,7 @@ class Input extends BaseComponent<InputProps, InputState> {
         insetLabelId: PropTypes.string,
         inputStyle: PropTypes.object,
         getValueLength: PropTypes.func,
+        preventScroll: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -124,7 +126,6 @@ class Input extends BaseComponent<InputProps, InputState> {
         addonAfter: '',
         prefix: '',
         suffix: '',
-        disabled: false,
         readonly: false,
         type: 'text',
         showClear: false,
@@ -174,9 +175,10 @@ class Input extends BaseComponent<InputProps, InputState> {
             setValue: (value: string) => this.setState({ value }),
             setEyeClosed: (value: boolean) => this.setState({ eyeClosed: value }),
             toggleFocusing: (isFocus: boolean) => {
+                const { preventScroll } = this.props;
                 const input = this.inputRef && this.inputRef.current;
                 if (isFocus) {
-                    input && input.focus();
+                    input && input.focus({ preventScroll });
                 } else {
                     input && input.blur();
                 }
@@ -424,6 +426,7 @@ class Input extends BaseComponent<InputProps, InputState> {
             forwardRef,
             maxLength,
             getValueLength,
+            preventScroll,
             ...rest
         } = this.props;
         const { value, paddingLeft, isFocus, minLength: stateMinLength } = this.state;

package/input/inputGroup.tsx

@@ -7,7 +7,7 @@ import BaseComponent from '../_base/baseComponent';
 import Label, { LabelProps } from '../form/label';
 
 import { noop } from '@douyinfe/semi-foundation/utils/function';
-import { isFunction } from 'lodash';
+import { get, isFunction } from 'lodash';
 
 const prefixCls = cssClasses.PREFIX;
 const sizeSet = strings.SIZE;
@@ -84,7 +84,7 @@ export default class inputGroup extends BaseComponent<InputGroupProps, InputGrou
     }
 
     render() {
-        const { size, style, className, children, label, onBlur: groupOnBlur, onFocus: groupOnFocus, ...rest } = this.props;
+        const { size, style, className, children, label, onBlur: groupOnBlur, onFocus: groupOnFocus, disabled: groupDisabled, ...rest } = this.props;
         const groupCls = cls(
             `${prefixCls}-group`,
             {
@@ -96,10 +96,11 @@ export default class inputGroup extends BaseComponent<InputGroupProps, InputGrou
         if (children) {
             inner = (Array.isArray(children) ? children : [children]).map((item, index) => {
                 if (item) {
-                    const { onBlur: itemOnBlur, onFocus: itemOnFocus } = (item as any).props;
-                    const onBlur = isFunction(itemOnBlur) ? itemOnBlur : groupOnBlur;
-                    const onFocus = isFunction(itemOnFocus) ? itemOnFocus : groupOnFocus;
-                    return React.cloneElement(item as any, { key: index, size, onBlur, onFocus, ...rest });
+                    const { onBlur: itemOnBlur, onFocus: itemOnFocus, disabled: itemDisabled } = (item as any).props;
+                    const onBlur = isFunction(itemOnBlur) && get(itemOnBlur, 'name') !== 'noop'  ? itemOnBlur : groupOnBlur;
+                    const onFocus = isFunction(itemOnFocus) && get(itemOnFocus, 'name') !== 'noop' ? itemOnFocus : groupOnFocus;
+                    const disabled = typeof itemDisabled === 'boolean' ? itemDisabled : groupDisabled;
+                    return React.cloneElement(item as any, { key: index, ...rest, size, onBlur, onFocus, disabled });
                 }
                 return null;
             });

package/inputNumber/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable no-unused-vars */
 /* eslint-disable max-depth */
@@ -54,6 +55,7 @@ export interface InputNumberProps extends InputProps {
     onUpClick?: (value: string, e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface InputNumberState extends BaseInputNumberState {}
 
 class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
@@ -82,6 +84,7 @@ class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
         prefixCls: PropTypes.string,
         pressInterval: PropTypes.number,
         pressTimeout: PropTypes.number,
+        preventScroll: PropTypes.bool,
         shiftStep: PropTypes.number,
         step: PropTypes.number,
         style: PropTypes.object,
@@ -96,7 +99,6 @@ class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
     };
 
     static defaultProps: InputNumberProps = {
-        disabled: false,
         forwardedRef: noop,
         innerButtons: false,
         keepFocus: false,
@@ -246,7 +248,7 @@ class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
     }
 
     componentDidUpdate(prevProps: InputNumberProps) {
-        const { value } = this.props;
+        const { value, preventScroll } = this.props;
         const { focusing } = this.state;
         let newValue;
         /**
@@ -338,7 +340,7 @@ class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
 
         if (this.props.keepFocus && this.state.focusing) {
             if (document.activeElement !== this.inputNode) {
-                this.inputNode.focus();
+                this.inputNode.focus({ preventScroll });
             }
         }
     }

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

@@ -143,7 +143,6 @@ declare class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<Au
         position: "bottomLeft";
         data: [];
         showClear: boolean;
-        disabled: boolean;
         size: "default";
         onFocus: (...args: any[]) => void;
         onSearch: (...args: any[]) => void;

package/lib/cjs/autoComplete/index.js

@@ -424,7 +424,6 @@ AutoComplete.defaultProps = {
   position: 'bottomLeft',
   data: [],
   showClear: false,
-  disabled: false,
   size: 'default',
   onFocus: _noop2.default,
   onSearch: _noop2.default,

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

@@ -131,6 +131,7 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         disableStrictly: PropTypes.Requireable<boolean>;
         leafOnly: PropTypes.Requireable<boolean>;
         enableLeafClick: PropTypes.Requireable<boolean>;
+        preventScroll: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         leafOnly: boolean;
@@ -142,7 +143,6 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         showClear: boolean;
         autoClearSearchValue: boolean;
         changeOnSelect: boolean;
-        disabled: boolean;
         disableStrictly: boolean;
         autoMergeValue: boolean;
         multiple: boolean;

package/lib/cjs/cascader/index.js

@@ -611,7 +611,8 @@ class Cascader extends _baseComponent.default {
       loadingKeys: new _set.default(),
 
       /* Mark whether this rendering has triggered asynchronous loading of data */
-      loading: false
+      loading: false,
+      showInput: false
     };
     this.options = {};
     this.isEmpty = false;
@@ -638,9 +639,15 @@ class Cascader extends _baseComponent.default {
         });
       },
       focusInput: () => {
+        const {
+          preventScroll
+        } = this.props;
+
         if (this.inputRef && this.inputRef.current) {
           // TODO: check the reason
-          this.inputRef.current.focus();
+          this.inputRef.current.focus({
+            preventScroll
+          });
         }
       }
     };
@@ -751,7 +758,19 @@ class Cascader extends _baseComponent.default {
         });
       },
       notifyOnExceed: data => this.props.onExceed(data),
-      notifyClear: () => this.props.onClear()
+      notifyClear: () => this.props.onClear(),
+      toggleInputShow: (showInput, cb) => {
+        this.setState({
+          showInput
+        }, () => {
+          cb();
+        });
+      },
+      updateFocusState: isFocus => {
+        this.setState({
+          isFocus
+        });
+      }
     });
   }
 
@@ -922,21 +941,29 @@ class Cascader extends _baseComponent.default {
     const inputcls = (0, _classnames.default)("".concat(prefixcls, "-input"));
     const {
       inputValue,
-      inputPlaceHolder
+      inputPlaceHolder,
+      showInput
     } = this.state;
     const inputProps = {
       disabled,
       value: inputValue,
       className: inputcls,
-      onChange: this.handleInputChange,
-      placeholder: inputPlaceHolder
+      onChange: this.handleInputChange
     };
     const wrappercls = (0, _classnames.default)({
       ["".concat(prefixcls, "-search-wrapper")]: true
     });
+    const displayText = this.renderDisplayText();
+    const spanCls = (0, _classnames.default)({
+      ["".concat(prefixcls, "-selection-placeholder")]: !displayText,
+      ["".concat(prefixcls, "-selection-text-hide")]: showInput && inputValue,
+      ["".concat(prefixcls, "-selection-text-inactive")]: showInput && !inputValue
+    });
     return /*#__PURE__*/_react.default.createElement("div", {
       className: wrappercls
-    }, /*#__PURE__*/_react.default.createElement(_index.default, (0, _assign.default)({
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: spanCls
+    }, displayText ? displayText : inputPlaceHolder), showInput && /*#__PURE__*/_react.default.createElement(_index.default, (0, _assign.default)({
       ref: this.inputRef,
       size: size
     }, inputProps)));
@@ -1053,7 +1080,8 @@ Cascader.propTypes = {
   loadedKeys: _propTypes.default.array,
   disableStrictly: _propTypes.default.bool,
   leafOnly: _propTypes.default.bool,
-  enableLeafClick: _propTypes.default.bool
+  enableLeafClick: _propTypes.default.bool,
+  preventScroll: _propTypes.default.bool
 };
 Cascader.defaultProps = {
   leafOnly: false,
@@ -1065,7 +1093,6 @@ Cascader.defaultProps = {
   showClear: false,
   autoClearSearchValue: true,
   changeOnSelect: false,
-  disabled: false,
   disableStrictly: false,
   autoMergeValue: true,
   multiple: false,

package/lib/cjs/checkbox/checkbox.d.ts

@@ -54,6 +54,7 @@ declare class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
         index: PropTypes.Requireable<number>;
         'aria-label': PropTypes.Requireable<string>;
         tabIndex: PropTypes.Requireable<number>;
+        preventScroll: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         defaultChecked: boolean;

package/lib/cjs/checkbox/checkbox.js

@@ -270,7 +270,8 @@ Checkbox.propTypes = {
   extra: _propTypes.default.node,
   index: _propTypes.default.number,
   'aria-label': _propTypes.default.string,
-  tabIndex: _propTypes.default.number
+  tabIndex: _propTypes.default.number,
+  preventScroll: _propTypes.default.bool
 };
 Checkbox.defaultProps = {
   defaultChecked: false,

package/lib/cjs/checkbox/checkboxInner.d.ts

@@ -19,6 +19,7 @@ export interface CheckboxInnerProps {
     focusInner?: boolean;
     onInputFocus?: (e: any) => void;
     onInputBlur?: (e: any) => void;
+    preventScroll?: boolean;
 }
 declare class CheckboxInner extends PureComponent<CheckboxInnerProps> {
     static contextType: React.Context<import("./context").CheckboxContextType>;
@@ -40,6 +41,7 @@ declare class CheckboxInner extends PureComponent<CheckboxInnerProps> {
         focusInner: PropTypes.Requireable<boolean>;
         onInputFocus: PropTypes.Requireable<(...args: any[]) => any>;
         onInputBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        preventScroll: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         onChange: (...args: any[]) => void;

package/lib/cjs/checkbox/checkboxInner.js

@@ -41,7 +41,12 @@ class CheckboxInner extends _react.PureComponent {
   }
 
   focus() {
-    this.inputEntity.focus();
+    const {
+      preventScroll
+    } = this.props;
+    this.inputEntity.focus({
+      preventScroll
+    });
   }
 
   render() {
@@ -119,7 +124,8 @@ CheckboxInner.propTypes = {
   extraId: _propTypes.default.string,
   focusInner: _propTypes.default.bool,
   onInputFocus: _propTypes.default.func,
-  onInputBlur: _propTypes.default.func
+  onInputBlur: _propTypes.default.func,
+  preventScroll: _propTypes.default.bool
 };
 CheckboxInner.defaultProps = {
   onChange: _noop2.default