@webiny/ui 0.0.0-mt-3 → 0.0.0-unstable.3386f66516

package/AutoComplete/AutoComplete.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["menuStyles","css","top","bottom","listStyles","listStyle","paddingLeft","margin","Placement","Spinner","OptionsList","placement","getMenuProps","children","classNames","AutoComplete","inputValue","React","createRef","previousProps","props","value","options","previousValue","item","find","option","getOptionValue","downshift","current","selectItem","isOpen","highlightedIndex","selectedItem","getItemProps","state","length","renderItem","filtered","filter","aliases","findInAliases","getOptionText","toLowerCase","includes","noResultFound","map","index","itemValue","itemClassNames","suggestionList","selected","className","call","onChange","onInput","validation","isValid","message","otherInputProps","downshiftProps","autoCompleteStyle","itemToString","defaultSelectedItem","selection","setState","getInputProps","openMenu","rest","trailingIcon","loading","rawOnChange","ev","onBlur","onFocus","onKeyDown","keyCode","keycode","setTimeout","onKeyUp","target","currentTarget","disabled","readOnly","renderOptions","Component","valueProp","textProp"],"sources":["AutoComplete.tsx"],"sourcesContent":["import React from \"react\";\nimport Downshift, { ControllerStateAndHelpers, PropGetters } from \"downshift\";\nimport { Input } from \"~/Input\";\nimport classNames from \"classnames\";\nimport { Elevation } from \"~/Elevation\";\nimport { Typography } from \"~/Typography\";\nimport keycode from \"keycode\";\nimport { autoCompleteStyle, suggestionList } from \"./styles\";\nimport { AutoCompleteBaseProps } from \"./types\";\nimport { getOptionValue, getOptionText, findInAliases } from \"./utils\";\nimport { isEqual } from \"lodash\";\nimport MaterialSpinner from \"react-spinner-material\";\nimport { css } from \"emotion\";\n\nconst menuStyles = css({\n    top: \"unset !important\",\n    bottom: 75\n});\n\nconst listStyles = css({\n    \"&.autocomplete__options-list\": {\n        listStyle: \"none\",\n        paddingLeft: 0,\n        \"& li\": {\n            margin: 0\n        }\n    }\n});\n\nexport enum Placement {\n    top = \"top\",\n    bottom = \"bottom\"\n}\n\nexport interface AutoCompleteProps extends Omit<AutoCompleteBaseProps, \"onChange\"> {\n    /* Placement position of dropdown menu, can be either `top` or `bottom`. */\n    placement?: Placement;\n\n    /* A callback that is executed each time a value is changed. */\n    onChange?: (value: any, selection?: any) => void;\n\n    /* If true, will show a loading spinner on the right side of the input. */\n    loading?: boolean;\n\n    /* A component that renders supporting UI in case of no result found. */\n    noResultFound?: React.ReactNode;\n}\n\ninterface State {\n    inputValue: string;\n}\n\nconst Spinner: React.FC = () => {\n    return (\n        <MaterialSpinner\n            size={24}\n            spinnerColor={\"var(--mdc-theme-primary)\"}\n            spinnerWidth={2}\n            visible\n        />\n    );\n};\n\ninterface RenderOptionsParams\n    extends Omit<ControllerStateAndHelpers<any>, \"getInputProps\" | \"openMenu\"> {\n    options: AutoCompleteProps[\"options\"];\n    placement?: Placement;\n}\n\ninterface OptionsListProps {\n    placement?: Placement;\n    getMenuProps: PropGetters<Record<string, any>>[\"getMenuProps\"];\n}\n\nconst OptionsList: React.FC<OptionsListProps> = ({ placement, getMenuProps, children }) => {\n    return (\n        <Elevation\n            z={1}\n            className={classNames({\n                [menuStyles]: placement === Placement.top\n            })}\n        >\n            <ul\n                className={classNames(\"autocomplete__options-list\", listStyles)}\n                {...getMenuProps()}\n            >\n                {children}\n            </ul>\n        </Elevation>\n    );\n};\n\nclass AutoComplete extends React.Component<AutoCompleteProps, State> {\n    static defaultProps: Partial<AutoCompleteProps> = {\n        valueProp: \"id\",\n        textProp: \"name\",\n        options: [],\n        placement: Placement.bottom,\n        /**\n         * We cast this as AutoComplete because renderItem() is executed via .call() where AutoComplete instance is assigned as this.\n         */\n        renderItem(item: any) {\n            return (\n                <Typography use={\"body2\"}>\n                    {getOptionText(item, (this as unknown as AutoComplete).props)}\n                </Typography>\n            );\n        }\n    };\n\n    public override state: State = {\n        inputValue: \"\"\n    };\n\n    /**\n     * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.\n     */\n    downshift: any = React.createRef();\n\n    public override componentDidUpdate(previousProps: AutoCompleteProps) {\n        const { value, options } = this.props;\n        const { value: previousValue } = previousProps;\n\n        if (!isEqual(value, previousValue)) {\n            let item = null;\n\n            if (value) {\n                if (typeof value === \"object\") {\n                    item = value;\n                } else {\n                    item =\n                        options.find(option => {\n                            return value === getOptionValue(option, this.props);\n                        }) || null;\n                }\n            }\n\n            const { current: downshift } = this.downshift;\n            downshift && downshift.selectItem(item);\n        }\n    }\n\n    /**\n     * Renders options - based on user's input. It will try to match input text with available options.\n     */\n    private renderOptions({\n        options,\n        isOpen,\n        highlightedIndex,\n        selectedItem,\n        getMenuProps,\n        getItemProps,\n        placement\n    }: RenderOptionsParams) {\n        if (!isOpen) {\n            return null;\n        }\n        /**\n         * Suggest user to start typing when there are no options available to choose from.\n         */\n        if (!this.state.inputValue && !options.length) {\n            return (\n                <OptionsList placement={placement} getMenuProps={getMenuProps}>\n                    <li>\n                        <Typography use={\"body2\"}>Start typing to find entry</Typography>\n                    </li>\n                </OptionsList>\n            );\n        }\n\n        const { renderItem } = this.props;\n\n        const filtered = options.filter(item => {\n            // 2) At the end, we want to show only options that are matched by typed text.\n            if (!this.state.inputValue) {\n                return true;\n            }\n\n            if (item.aliases) {\n                return findInAliases(item, this.state.inputValue);\n            }\n\n            return getOptionText(item, this.props)\n                .toLowerCase()\n                .includes(this.state.inputValue.toLowerCase());\n        });\n\n        if (!filtered.length) {\n            return (\n                <OptionsList placement={placement} getMenuProps={getMenuProps}>\n                    <li>\n                        <Typography use={\"body2\"}>No results.</Typography>\n                        {this.props.noResultFound}\n                    </li>\n                </OptionsList>\n            );\n        }\n\n        return (\n            <OptionsList placement={placement} getMenuProps={getMenuProps}>\n                {filtered.map((item, index) => {\n                    const itemValue = getOptionValue(item, this.props);\n\n                    // Base classes.\n                    const itemClassNames = {\n                        [suggestionList]: true,\n                        highlighted: highlightedIndex === index,\n                        selected: false\n                    };\n\n                    // Add \"selected\" class if the item is selected.\n                    if (selectedItem && getOptionValue(selectedItem, this.props) === itemValue) {\n                        itemClassNames.selected = true;\n                    }\n\n                    // Render the item.\n                    return (\n                        <li\n                            key={itemValue}\n                            {...getItemProps({\n                                index,\n                                item,\n                                className: classNames(itemClassNames)\n                            })}\n                        >\n                            {renderItem.call(this, item, index)}\n                        </li>\n                    );\n                })}\n            </OptionsList>\n        );\n    }\n\n    public override render() {\n        const {\n            className,\n            options,\n            onChange,\n            value,\n            // valueProp,\n            // textProp,\n            onInput,\n            validation = {\n                isValid: null,\n                message: null\n            },\n            placement,\n            ...otherInputProps\n        } = this.props;\n\n        // Downshift related props.\n        const downshiftProps = {\n            className: autoCompleteStyle,\n            itemToString: (item: any) => getOptionText(item, this.props),\n            defaultSelectedItem: value,\n            onChange: (selection: string) => {\n                if (!selection || !onChange) {\n                    return;\n                }\n                onChange(getOptionValue(selection, this.props), selection);\n                this.setState(state => ({\n                    ...state,\n                    inputValue: \"\"\n                }));\n            }\n        };\n\n        return (\n            <div className={classNames(autoCompleteStyle, className)}>\n                <Downshift {...downshiftProps} ref={this.downshift}>\n                    {({ getInputProps, openMenu, ...rest }) => (\n                        <div>\n                            <Input\n                                {...getInputProps({\n                                    // This prop is above `otherInputProps` since it can be overridden by the user.\n                                    trailingIcon: this.props.loading && <Spinner />,\n                                    ...otherInputProps,\n                                    // @ts-ignore\n                                    validation,\n                                    rawOnChange: true,\n                                    onChange: ev => ev,\n                                    onBlur: ev => ev,\n                                    onFocus: ev => {\n                                        openMenu();\n                                        otherInputProps.onFocus && otherInputProps.onFocus(ev);\n                                    },\n                                    onKeyDown: (ev: React.KeyboardEvent<HTMLInputElement>) => {\n                                        const keyCode: string = keycode(ev as unknown as Event);\n\n                                        if (keyCode === \"backspace\") {\n                                            if (onChange) {\n                                                onChange(null);\n                                            }\n                                            setTimeout(() => openMenu(), 50);\n                                        }\n                                    },\n                                    onKeyUp: (ev: React.KeyboardEvent<HTMLInputElement>) => {\n                                        const keyCode: string = keycode(ev as unknown as Event);\n\n                                        const target = ev.currentTarget;\n                                        const inputValue = target.value || \"\";\n\n                                        // If user pressed 'esc', 'enter' or similar...\n                                        if (\n                                            keyCode &&\n                                            keyCode.length > 1 &&\n                                            keyCode !== \"backspace\"\n                                        ) {\n                                            return;\n                                        }\n\n                                        // If values are the same, exit, do not update current search term.\n                                        if (inputValue === this.state.inputValue) {\n                                            return;\n                                        }\n\n                                        this.setState(\n                                            state => ({\n                                                ...state,\n                                                inputValue\n                                            }),\n                                            () => {\n                                                onInput && onInput(inputValue);\n                                            }\n                                        );\n                                    }\n                                })}\n                            />\n                            {!otherInputProps.disabled &&\n                                !otherInputProps.readOnly &&\n                                this.renderOptions({\n                                    ...rest,\n                                    options,\n                                    placement\n                                })}\n                        </div>\n                    )}\n                </Downshift>\n            </div>\n        );\n    }\n}\n\nexport { AutoComplete };\n"],"mappings":"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"}

package/AutoComplete/AutoComplete.stories.js

@@ -1,10 +1,20 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
-import readme from "./AutoCompleteReadme.md";
-import { Form } from "@webiny/form";
-import { AutoComplete } from "./AutoComplete";
-var story = storiesOf("Components/AutoComplete", module);
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _Story = require("@webiny/storybook-utils/Story");
+
+var _AutoCompleteReadme = _interopRequireDefault(require("./AutoCompleteReadme.md"));
+
+var _form = require("@webiny/form");
+
+var _AutoComplete = require("./AutoComplete");
+
+var story = (0, _react2.storiesOf)("Components/AutoComplete", module);
 var options = [{
   name: "France",
   id: "france"
@@ -34,9 +44,9 @@ var options = [{
   id: "czech-republic"
 }];
 story.add("AutoComplete", function () {
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _AutoCompleteReadme.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {
     title: "Single value"
-  }, /*#__PURE__*/React.createElement(Form, {
+  }, /*#__PURE__*/_react.default.createElement(_form.Form, {
     data: {
       country: {
         id: "italy",
@@ -45,32 +55,32 @@ story.add("AutoComplete", function () {
     }
   }, function (_ref) {
     var Bind = _ref.Bind;
-    return /*#__PURE__*/React.createElement(Bind, {
+    return /*#__PURE__*/_react.default.createElement(Bind, {
       name: "country"
-    }, /*#__PURE__*/React.createElement(AutoComplete, {
+    }, /*#__PURE__*/_react.default.createElement(_AutoComplete.AutoComplete, {
       options: options,
       label: "Country",
       description: "Choose your country"
     }));
-  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                    <Form>\n                        {({ Bind }) => (\n                             <Bind name=\"country\">\n                                <AutoComplete\n                                    options={".concat(JSON.stringify(options), "}\n                                    label=\"Country\"\n                                    description=\"Choose your country.\"\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    "))), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                    <Form>\n                        {({ Bind }) => (\n                             <Bind name=\"country\">\n                                <AutoComplete\n                                    options={".concat(JSON.stringify(options), "}\n                                    label=\"Country\"\n                                    description=\"Choose your country.\"\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    "))), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {
     title: "Single value - use simple strings"
-  }, /*#__PURE__*/React.createElement(Form, {
+  }, /*#__PURE__*/_react.default.createElement(_form.Form, {
     data: {
       country: "Germany"
     }
   }, function (_ref2) {
     var Bind = _ref2.Bind;
-    return /*#__PURE__*/React.createElement(Bind, {
+    return /*#__PURE__*/_react.default.createElement(Bind, {
       name: "country"
-    }, /*#__PURE__*/React.createElement(AutoComplete, {
+    }, /*#__PURE__*/_react.default.createElement(_AutoComplete.AutoComplete, {
       useSimpleValues: true,
       options: ["France", "Germany", "Italy", "Spain"],
       label: "Country",
       description: "Choose your country"
     }));
-  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                    <Form data={{ country: \"Germany\" }}>\n                        {({ Bind }) => (\n                            <Bind name=\"country\">\n                                <AutoComplete\n                                    useSimpleValues\n                                    options={[\"France\", \"Germany\", \"Italy\", \"Spain\"]}\n                                    label=\"Country\"\n                                    description=\"Choose your country\"\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    ")));
+  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                    <Form data={{ country: \"Germany\" }}>\n                        {({ Bind }) => (\n                            <Bind name=\"country\">\n                                <AutoComplete\n                                    useSimpleValues\n                                    options={[\"France\", \"Germany\", \"Italy\", \"Spain\"]}\n                                    label=\"Country\"\n                                    description=\"Choose your country\"\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    ")));
 }, {
   info: {
-    propTables: [AutoComplete]
+    propTables: [_AutoComplete.AutoComplete]
   }
 });

package/AutoComplete/AutoComplete.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","options","name","id","add","readme","country","Bind","JSON","stringify","info","propTables","AutoComplete"],"sources":["AutoComplete.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./AutoCompleteReadme.md\";\n\nimport { Form } from \"@webiny/form\";\nimport { AutoComplete } from \"./AutoComplete\";\n\nconst story = storiesOf(\"Components/AutoComplete\", module);\n\nconst options = [\n    { name: \"France\", id: \"france\" },\n    { name: \"Germany\", id: \"germany\" },\n    { name: \"Italy\", id: \"italy\" },\n    { name: \"Spain\", id: \"spain\" },\n    { name: \"UK\", id: \"uk\" },\n    { name: \"US\", id: \"us\" },\n    { name: \"Norway\", id: \"norway\" },\n    { name: \"Finland\", id: \"finland\" },\n    { name: \"Czech Republic\", id: \"czech-republic\" }\n];\n\nstory.add(\n    \"AutoComplete\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Single value\"}>\n                        <Form data={{ country: { id: \"italy\", name: \"Italy\" } }}>\n                            {({ Bind }) => (\n                                <Bind name=\"country\">\n                                    <AutoComplete\n                                        options={options}\n                                        label=\"Country\"\n                                        description=\"Choose your country\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Form>\n                        {({ Bind }) => (\n                             <Bind name=\"country\">\n                                <AutoComplete\n                                    options={${JSON.stringify(options)}}\n                                    label=\"Country\"\n                                    description=\"Choose your country.\"\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n\n                <StorySandbox>\n                    <StorySandboxExample title={\"Single value - use simple strings\"}>\n                        <Form data={{ country: \"Germany\" }}>\n                            {({ Bind }) => (\n                                <Bind name=\"country\">\n                                    <AutoComplete\n                                        useSimpleValues\n                                        options={[\"France\", \"Germany\", \"Italy\", \"Spain\"]}\n                                        label=\"Country\"\n                                        description=\"Choose your country\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Form data={{ country: \"Germany\" }}>\n                        {({ Bind }) => (\n                            <Bind name=\"country\">\n                                <AutoComplete\n                                    useSimpleValues\n                                    options={[\"France\", \"Germany\", \"Italy\", \"Spain\"]}\n                                    label=\"Country\"\n                                    description=\"Choose your country\"\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [AutoComplete] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AAEA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,yBAAV,EAAqCC,MAArC,CAAd;AAEA,IAAMC,OAAO,GAAG,CACZ;EAAEC,IAAI,EAAE,QAAR;EAAkBC,EAAE,EAAE;AAAtB,CADY,EAEZ;EAAED,IAAI,EAAE,SAAR;EAAmBC,EAAE,EAAE;AAAvB,CAFY,EAGZ;EAAED,IAAI,EAAE,OAAR;EAAiBC,EAAE,EAAE;AAArB,CAHY,EAIZ;EAAED,IAAI,EAAE,OAAR;EAAiBC,EAAE,EAAE;AAArB,CAJY,EAKZ;EAAED,IAAI,EAAE,IAAR;EAAcC,EAAE,EAAE;AAAlB,CALY,EAMZ;EAAED,IAAI,EAAE,IAAR;EAAcC,EAAE,EAAE;AAAlB,CANY,EAOZ;EAAED,IAAI,EAAE,QAAR;EAAkBC,EAAE,EAAE;AAAtB,CAPY,EAQZ;EAAED,IAAI,EAAE,SAAR;EAAmBC,EAAE,EAAE;AAAvB,CARY,EASZ;EAAED,IAAI,EAAE,gBAAR;EAA0BC,EAAE,EAAE;AAA9B,CATY,CAAhB;AAYAL,KAAK,CAACM,GAAN,CACI,cADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,2BAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI,6BAAC,UAAD;IAAM,IAAI,EAAE;MAAEC,OAAO,EAAE;QAAEH,EAAE,EAAE,OAAN;QAAeD,IAAI,EAAE;MAArB;IAAX;EAAZ,GACK;IAAA,IAAGK,IAAH,QAAGA,IAAH;IAAA,oBACG,6BAAC,IAAD;MAAM,IAAI,EAAC;IAAX,gBACI,6BAAC,0BAAD;MACI,OAAO,EAAEN,OADb;MAEI,KAAK,EAAC,SAFV;MAGI,WAAW,EAAC;IAHhB,EADJ,CADH;EAAA,CADL,CADJ,CADJ,eAcI,6BAAC,uBAAD,4OAM2BO,IAAI,CAACC,SAAL,CAAeR,OAAf,CAN3B,gSAdJ,CAFJ,eAiCI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI,6BAAC,UAAD;IAAM,IAAI,EAAE;MAAEK,OAAO,EAAE;IAAX;EAAZ,GACK;IAAA,IAAGC,IAAH,SAAGA,IAAH;IAAA,oBACG,6BAAC,IAAD;MAAM,IAAI,EAAC;IAAX,gBACI,6BAAC,0BAAD;MACI,eAAe,MADnB;MAEI,OAAO,EAAE,CAAC,QAAD,EAAW,SAAX,EAAsB,OAAtB,EAA+B,OAA/B,CAFb;MAGI,KAAK,EAAC,SAHV;MAII,WAAW,EAAC;IAJhB,EADJ,CADH;EAAA,CADL,CADJ,CADJ,eAeI,6BAAC,uBAAD,ioBAfJ,CAjCJ,CADJ;AAoEH,CAvEL,EAwEI;EAAEG,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,0BAAD;EAAd;AAAR,CAxEJ"}

package/AutoComplete/MultiAutoComplete.d.ts

@@ -1,6 +1,10 @@
-import * as React from "react";
+import React from "react";
 import { AutoCompleteBaseProps } from "./types";
-export declare type MultiAutoCompleteProps = AutoCompleteBaseProps & {
+interface SelectionItem {
+    name: string;
+}
+declare type MultiAutoCompletePropsValue = SelectionItem[] | string[];
+export interface MultiAutoCompleteProps extends Omit<AutoCompleteBaseProps, "value"> {
     /**
      * Prevents adding the same item to the list twice.
      */
@@ -21,60 +25,60 @@ export declare type MultiAutoCompleteProps = AutoCompleteBaseProps & {
      * Render list item when `useMultipleSelectionList` is used.
      */
     renderListItemLabel?: Function;
-};
-declare type State = {
+    /**
+     * Render in meta wrapper
+     */
+    renderListItemOptions?: (item: any) => React.ReactNode | null;
+    noResultFound?: React.ReactNode;
+    /**
+     * Value is an array of strings. But can be undefined.
+     */
+    value?: MultiAutoCompletePropsValue;
+}
+interface MultiAutoCompleteState {
     inputValue: string;
     multipleSelectionPage: number;
     multipleSelectionSearch: string;
     reorderFormVisible: string;
     reorderFormValue: string;
-};
-export declare class MultiAutoComplete extends React.Component<MultiAutoCompleteProps, State> {
-    static defaultProps: {
-        valueProp: string;
-        textProp: string;
-        unique: boolean;
-        options: any[];
-        useSimpleValues: boolean;
-        useMultipleSelectionList: boolean;
-        renderItem(item: any): JSX.Element;
-        renderListItemLabel(item: any): any;
-    };
-    state: {
-        inputValue: string;
-        multipleSelectionPage: number;
-        multipleSelectionSearch: string;
-        reorderFormVisible: string;
-        reorderFormValue: string;
-    };
+}
+export declare class MultiAutoComplete extends React.Component<MultiAutoCompleteProps, MultiAutoCompleteState> {
+    static defaultProps: Partial<MultiAutoCompleteProps>;
+    state: MultiAutoCompleteState;
     /**
      * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.
      */
-    downshift: any;
-    assignedValueAfterClearing: {
-        set: boolean;
-        selection: any;
-    };
-    setMultipleSelectionPage: (multipleSelectionPage: any) => void;
-    setMultipleSelectionSearch: (multipleSelectionSearch: any) => void;
+    private downshift;
+    private assignedValueAfterClearing;
+    setMultipleSelectionPage: (multipleSelectionPage: number) => void;
+    setMultipleSelectionSearch: (multipleSelectionSearch: string) => void;
     getOptions(): any[];
     /**
      * Renders options - based on user's input. It will try to match input text with available options.
-     * @param options
-     * @param isOpen
-     * @param highlightedIndex
-     * @param selectedItem
-     * @param getMenuProps
-     * @param getItemProps
-     * @returns {*}
      */
-    renderOptions({ options, isOpen, highlightedIndex, getMenuProps, getItemProps }: any): JSX.Element;
+    private renderOptions;
+    paginateMultipleSelection(): {
+        data: {
+            option: string | SelectionItem;
+            index: number;
+        }[];
+        meta: {
+            hasData: boolean;
+            totalCount: number;
+            from: number;
+            to: number;
+            page: number;
+            lastPage: number;
+            limit: number;
+            hasPrevious: boolean;
+            hasNext: boolean;
+        };
+    };
     /**
      * Once added, items can also be removed by clicking on the ✕ icon. This is the method that is responsible for
      * rendering selected items (we are using already existing "Chips" component).
-     * @returns {*}
      */
-    renderMultipleSelection(): JSX.Element;
+    renderMultipleSelection(): JSX.Element | null;
     render(): JSX.Element;
 }
 export {};