@douyinfe/semi-ui 2.4.1 → 2.5.1

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/lib/cjs/autoComplete/index.d.ts

@@ -113,7 +113,7 @@ declare class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<Au
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
+        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
         placeholder: PropTypes.Requireable<string>;
         prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         onChangeWithObject: PropTypes.Requireable<boolean>;

package/lib/cjs/button/Button.d.ts

@@ -46,15 +46,15 @@ export default class Button extends PureComponent<ButtonProps> {
         disabled: PropTypes.Requireable<boolean>;
         prefixCls: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
-        size: PropTypes.Requireable<unknown>;
-        type: PropTypes.Requireable<unknown>;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
+        type: PropTypes.Requireable<"warning" | "primary" | "tertiary" | "secondary" | "danger">;
         block: PropTypes.Requireable<boolean>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseDown: PropTypes.Requireable<(...args: any[]) => any>;
         circle: PropTypes.Requireable<boolean>;
         loading: PropTypes.Requireable<boolean>;
-        htmlType: PropTypes.Requireable<unknown>;
-        theme: PropTypes.Requireable<unknown>;
+        htmlType: PropTypes.Requireable<"button" | "reset" | "submit">;
+        theme: PropTypes.Requireable<"solid" | "light" | "borderless">;
         className: PropTypes.Requireable<string>;
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/cjs/button/buttonGroup.d.ts

@@ -16,8 +16,8 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         disabled: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<unknown>;
-        theme: PropTypes.Requireable<unknown>;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
+        theme: PropTypes.Requireable<"solid" | "light" | "borderless">;
         'aria-label': PropTypes.Requireable<string>;
     };
     static defaultProps: {

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

@@ -1,11 +1,10 @@
 import React from 'react';
-import { ButtonProps as BaseButtonProps } from './Button';
 import { IconButtonProps } from '../iconButton';
 export { ButtonProps as BaseButtonProps, HtmlType, Size, Theme, Type } from './Button';
 export { HorizontalPaddingType } from '../iconButton';
 export { ButtonGroupProps } from './buttonGroup';
 export { SplitButtonGroupProps } from './splitButtonGroup';
-export interface ButtonProps extends IconButtonProps, BaseButtonProps {
+export interface ButtonProps extends IconButtonProps {
 }
 declare class Button extends React.PureComponent<ButtonProps> {
     static propTypes: {
@@ -18,18 +17,18 @@ declare class Button extends React.PureComponent<ButtonProps> {
         noHorizontalPadding: import("prop-types").Requireable<string | boolean | any[]>;
         children: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
         theme: import("prop-types").Requireable<string>;
-        iconPosition: import("prop-types").Requireable<unknown>;
+        iconPosition: import("prop-types").Requireable<"left" | "right">;
         className: import("prop-types").Requireable<string>;
         onMouseEnter: import("prop-types").Requireable<(...args: any[]) => any>;
         onMouseLeave: import("prop-types").Requireable<(...args: any[]) => any>;
         disabled: import("prop-types").Requireable<boolean>;
-        size: import("prop-types").Requireable<unknown>;
-        type: import("prop-types").Requireable<unknown>;
+        size: import("prop-types").Requireable<"default" | "small" | "large">;
+        type: import("prop-types").Requireable<"warning" | "primary" | "tertiary" | "secondary" | "danger">;
         block: import("prop-types").Requireable<boolean>;
         onClick: import("prop-types").Requireable<(...args: any[]) => any>;
         onMouseDown: import("prop-types").Requireable<(...args: any[]) => any>;
         circle: import("prop-types").Requireable<boolean>;
-        htmlType: import("prop-types").Requireable<unknown>;
+        htmlType: import("prop-types").Requireable<"button" | "reset" | "submit">;
         'aria-label': import("prop-types").Requireable<string>;
     };
     constructor(props?: {});

package/lib/cjs/cascader/index.js

@@ -42,6 +42,8 @@ var _isString2 = _interopRequireDefault(require("lodash/isString"));
 
 var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
 
+var _isSet2 = _interopRequireDefault(require("lodash/isSet"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _reactDom = _interopRequireDefault(require("react-dom"));
@@ -776,6 +778,10 @@ class Cascader extends _baseComponent.default {
           realKeys = formatKeys;
         }
 
+        if ((0, _isSet2.default)(realKeys)) {
+          realKeys = [...realKeys];
+        }
+
         const calRes = (0, _treeUtil.calcCheckedKeys)((0, _flatten2.default)(realKeys), keyEntities);
         const checkedKeys = new _set.default(calRes.checkedKeys);
         const halfCheckedKeys = new _set.default(calRes.halfCheckedKeys); // disableStrictly

package/lib/cjs/datePicker/datePicker.js

@@ -434,6 +434,10 @@ class DatePicker extends _baseComponent.default {
 
     if (prevProps.open !== this.props.open) {
       this.foundation.initPanelOpenStatus();
+
+      if (!this.props.open) {
+        this.foundation.clearRangeInputFocus();
+      }
     }
   }
 

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

@@ -58,7 +58,7 @@ declare class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
         render: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         visible: PropTypes.Requireable<boolean>;
-        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
+        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
         getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
         mouseEnterDelay: PropTypes.Requireable<number>;
         mouseLeaveDelay: PropTypes.Requireable<number>;

package/lib/cjs/form/baseForm.d.ts

@@ -80,7 +80,7 @@ declare class Form extends BaseComponent<BaseFormProps, BaseFormState> {
         emptyContent?: React.ReactNode;
         onDropdownVisibleChange?: (visible: boolean) => void;
         zIndex?: number;
-        position?: "top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver";
+        position?: "top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
         onSearch?: (value: string) => void;
         dropdownClassName?: string;
         dropdownStyle?: React.CSSProperties;

package/lib/cjs/form/baseForm.js

@@ -115,8 +115,8 @@ class Form extends _baseComponent.default {
       notifySubmitFail: (errors, values) => {
         this.props.onSubmitFail(errors, values);
       },
-      forceUpdate: () => {
-        this.forceUpdate();
+      forceUpdate: callback => {
+        this.forceUpdate(callback);
       },
       notifyChange: formState => {
         this.props.onChange(formState);

package/lib/cjs/form/field.d.ts

@@ -28,7 +28,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
     emptyContent?: import("react").ReactNode;
     onDropdownVisibleChange?: (visible: boolean) => void;
     zIndex?: number;
-    position?: "top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver";
+    position?: "top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
     onSearch?: (value: string) => void;
     dropdownClassName?: string;
     dropdownStyle?: import("react").CSSProperties;

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

@@ -19,7 +19,7 @@ export interface IconButtonProps extends ButtonProps {
 }
 declare class IconButton extends PureComponent<IconButtonProps> {
     static defaultProps: {
-        iconPosition: any;
+        iconPosition: "left";
         prefixCls: string;
         loading: boolean;
         noHorizontalPadding: boolean;
@@ -36,7 +36,7 @@ declare class IconButton extends PureComponent<IconButtonProps> {
         noHorizontalPadding: PropTypes.Requireable<string | boolean | any[]>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         theme: PropTypes.Requireable<string>;
-        iconPosition: PropTypes.Requireable<unknown>;
+        iconPosition: PropTypes.Requireable<"left" | "right">;
         className: PropTypes.Requireable<string>;
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;

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

@@ -165,7 +165,7 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
         emptyContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         onDropdownVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
         zIndex: PropTypes.Requireable<number>;
-        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
+        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
         onSearch: PropTypes.Requireable<(...args: any[]) => any>;
         getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
         dropdownClassName: PropTypes.Requireable<string>;
@@ -243,8 +243,8 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
     renderOption(option: OptionProps, optionIndex: number, style?: React.CSSProperties): any;
     renderCreateOption(option: OptionProps, isFocused: boolean, optionIndex: number, style: React.CSSProperties): JSX.Element;
     onOptionHover(optionIndex: number): void;
-    renderWithGroup(visibileOptions: OptionProps[]): JSX.Element[];
-    renderVirtualizeList(visibileOptions: OptionProps[]): JSX.Element;
+    renderWithGroup(visibleOptions: OptionProps[]): JSX.Element[];
+    renderVirtualizeList(visibleOptions: OptionProps[]): JSX.Element;
     renderOptions(children?: React.ReactNode): JSX.Element;
     renderSingleSelection(selections: Map<OptionProps['label'], any>, filterable: boolean): JSX.Element;
     renderMultipleSelection(selections: Map<OptionProps['label'], any>, filterable: boolean): JSX.Element;