@webiny/ui 5.24.0 → 5.25.0-beta.0

package/Accordion/Accordion.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { ListItem } from "../List";
 import { AccordionItem } from "./AccordionItem";
 export interface AccordionProps {

package/Accordion/Accordion.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "elevation", "className"];
-import * as React from "react";
+import React from "react";
 import { List } from "../List";
 import { Elevation } from "../Elevation";
 import { css } from "emotion";

package/Accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Accordion.tsx"],"names":["React","List","Elevation","css","classNames","listStyle","padding","Accordion","props","children","elevation","className","other"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT;AAEA,SAASC,SAAT;AACA,SAASC,GAAT,QAAoB,SAApB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAmBA,IAAMC,SAAS,gBAAGF,GAAG,CAAC;AAClB,gBAAc;AACVG,IAAAA,OAAO,EAAE;AADC;AADI,CAAD,qBAArB;;AAMA,IAAMC,SAAmC,GAAG,SAAtCA,SAAsC,CAAAC,KAAK,EAAI;AACjD,MAAQC,QAAR,GAAyDD,KAAzD,CAAQC,QAAR;AAAA,yBAAyDD,KAAzD,CAAkBE,SAAlB;AAAA,MAAkBA,SAAlB,iCAA8B,CAA9B;AAAA,MAAiCC,SAAjC,GAAyDH,KAAzD,CAAiCG,SAAjC;AAAA,MAA+CC,KAA/C,4BAAyDJ,KAAzD;;AACA,sBACI,oBAAC,SAAD;AAAW,IAAA,CAAC,EAAEE,SAAd;AAAyB,IAAA,SAAS,EAAEN,UAAU,CAAC,qBAAD,EAAwBO,SAAxB;AAA9C,kBACI,oBAAC,IAAD;AAAM,IAAA,OAAO,MAAb;AAAc,IAAA,SAAS,EAAEN;AAAzB,KAAwCO,KAAxC,GACKH,QADL,CADJ,CADJ;AAOH,CATD;;AAWA,SAASF,SAAT","sourcesContent":["import React from \"react\";\nimport { List, ListItem } from \"../List\";\nimport { AccordionItem } from \"./AccordionItem\";\nimport { Elevation } from \"../Elevation\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nexport interface AccordionProps {\n    /**\n     * Element displayed when accordion is expanded.\n     */\n    children: React.ReactElement<typeof ListItem>[] | React.ReactElement<typeof AccordionItem>[];\n\n    /**\n     * Elevation number, default set to 2\n     */\n    elevation?: number;\n\n    /**\n     * Append a class name\n     */\n    className?: string;\n}\n\nconst listStyle = css({\n    \"&.mdc-list\": {\n        padding: 0\n    }\n});\n\nconst Accordion: React.FC<AccordionProps> = props => {\n    const { children, elevation = 2, className, ...other } = props;\n    return (\n        <Elevation z={elevation} className={classNames(\"webiny-ui-accordion\", className)}>\n            <List twoLine className={listStyle} {...other}>\n                {children}\n            </List>\n        </Elevation>\n    );\n};\n\nexport { Accordion };\n"]}

package/Accordion/Accordion.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Accordion.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","readme","Accordion","AccordionItem","ReactComponent","SettingsIcon","story","module","add","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SACIC,KADJ,EAEIC,WAFJ,EAGIC,gBAHJ,EAIIC,YAJJ,EAKIC,mBALJ,QAMO,+BANP;AAOA,OAAOC,MAAP;AACA,SAASC,SAAT;AACA,SAASC,aAAT;AACA,SAASC,cAAc,IAAIC,YAA3B;AAEA,IAAMC,KAAK,GAAGX,SAAS,CAAC,sBAAD,EAAyBY,MAAzB,CAAvB;AAEAD,KAAK,CAACE,GAAN,CACI,OADJ,EAEI,YAAM;AACF,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcP,MAAd,CADJ,eAEI,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAE;AAArB,kBACI,oBAAC,mBAAD,qBACI,oBAAC,SAAD,qBACI,oBAAC,aAAD;AACI,IAAA,IAAI,eAAE,oBAAC,YAAD,OADV;AAEI,IAAA,KAAK,EAAC,YAFV;AAGI,IAAA,WAAW,EAAC,sBAHhB;AAII,IAAA,IAAI;AAJR,kBAMI,iDANJ,CADJ,eASI,oBAAC,aAAD;AACI,IAAA,IAAI,eAAE,oBAAC,YAAD,OADV;AAEI,IAAA,KAAK,EAAC,YAFV;AAGI,IAAA,WAAW,EAAC;AAHhB,kBAKI,iDALJ,CATJ,eAgBI,oBAAC,aAAD;AACI,IAAA,IAAI,eAAE,oBAAC,YAAD,OADV;AAEI,IAAA,KAAK,EAAC,YAFV;AAGI,IAAA,WAAW,EAAC;AAHhB,kBAKI,iDALJ,CAhBJ,CADJ,CADJ,eA2BI,oBAAC,gBAAD,qBACI,8CACI,oBAAC,SAAD,qBACI,oBAAC,aAAD;AACI,IAAA,IAAI,eAAE,oBAAC,YAAD,OADV;AAEI,IAAA,KAAK,EAAC,YAFV;AAGI,IAAA,WAAW,EAAC,sBAHhB;AAII,IAAA,IAAI;AAJR,kBAMI,iDANJ,CADJ,eASI,oBAAC,aAAD;AACI,IAAA,IAAI,eAAE,oBAAC,YAAD,OADV;AAEI,IAAA,KAAK,EAAC,YAFV;AAGI,IAAA,WAAW,EAAC;AAHhB,kBAKI,iDALJ,CATJ,eAgBI,oBAAC,aAAD;AACI,IAAA,IAAI,eAAE,oBAAC,YAAD,OADV;AAEI,IAAA,KAAK,EAAC,YAFV;AAGI,IAAA,WAAW,EAAC;AAHhB,kBAKI,iDALJ,CAhBJ,CADJ,CADJ,CA3BJ,CAFJ,CADJ;AA6DH,CAhEL,EAiEI;AAAEQ,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACR,SAAD,EAAYC,aAAZ;AAAd;AAAR,CAjEJ","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 \"./README.md\";\nimport { Accordion } from \"./Accordion\";\nimport { AccordionItem } from \"./AccordionItem\";\nimport { ReactComponent as SettingsIcon } from \"./icons/round-settings-24px.svg\";\n\nconst story = storiesOf(\"Components/Accordion\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"Accordion\"}>\n                    <StorySandboxExample>\n                        <Accordion>\n                            <AccordionItem\n                                icon={<SettingsIcon />}\n                                title=\"Settings 1\"\n                                description=\"Settings description\"\n                                open\n                            >\n                                <div>Inner child 1</div>\n                            </AccordionItem>\n                            <AccordionItem\n                                icon={<SettingsIcon />}\n                                title=\"Settings 2\"\n                                description=\"Settings description\"\n                            >\n                                <div>Inner child 2</div>\n                            </AccordionItem>\n                            <AccordionItem\n                                icon={<SettingsIcon />}\n                                title=\"Settings 3\"\n                                description=\"Settings description\"\n                            >\n                                <div>Inner child 3</div>\n                            </AccordionItem>\n                        </Accordion>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        <div>\n                            <Accordion>\n                                <AccordionItem\n                                    icon={<SettingsIcon />}\n                                    title=\"Settings 1\"\n                                    description=\"Settings description\"\n                                    open\n                                >\n                                    <div>Inner child 1</div>\n                                </AccordionItem>\n                                <AccordionItem\n                                    icon={<SettingsIcon />}\n                                    title=\"Settings 2\"\n                                    description=\"Settings description\"\n                                >\n                                    <div>Inner child 2</div>\n                                </AccordionItem>\n                                <AccordionItem\n                                    icon={<SettingsIcon />}\n                                    title=\"Settings 3\"\n                                    description=\"Settings description\"\n                                >\n                                    <div>Inner child 3</div>\n                                </AccordionItem>\n                            </Accordion>\n                        </div>\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Accordion, AccordionItem] } }\n);\n"]}

package/Accordion/AccordionItem.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
-export declare type AccordionItemProps = {
+export interface AccordionItemProps {
     /**
      * Left side icon
      */
-    icon: React.ReactElement;
+    icon?: React.ReactElement | null;
     /**
      * Accordion title
      */
@@ -12,10 +12,6 @@ export declare type AccordionItemProps = {
      * Optional description
      */
     description?: string;
-    /**
-     * Element displayed when accordion is expanded
-     */
-    children?: React.ReactNode;
     /**
      * Append a class name
      */
@@ -28,6 +24,6 @@ export declare type AccordionItemProps = {
      * For testing purpose
      */
     "data-testid"?: string;
-};
-declare const AccordionItem: (props: AccordionItemProps) => JSX.Element;
+}
+declare const AccordionItem: React.FC<AccordionItemProps>;
 export { AccordionItem };

package/Accordion/AccordionItem.js

@@ -98,7 +98,7 @@ var AccordionItem = function AccordionItem(props) {
     setState(!open);
   }, [open]);
   useEffect(function () {
-    setState(props.open);
+    setState(props.open ? true : false);
   }, [props.open]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames("webiny-ui-accordion-item", props.className)

package/Accordion/AccordionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["AccordionItem.tsx"],"names":["React","useState","useCallback","useEffect","ListItem","ListItemGraphic","ListItemMeta","Transition","Icon","styled","css","Typography","ReactComponent","UpArrow","DownArrow","classNames","Content","width","borderRight","borderBottom","borderLeft","boxSizing","listItem","padding","cursor","marginRight","ListItemTitle","fontWeight","marginBottom","ListItemDescription","TitleContent","display","flexDirection","openedState","backgroundColor","duration","defaultStyle","transition","opacity","height","pointerEvents","overflow","transitionStyles","entering","entered","exiting","AccordionItem","props","open","setState","toggleState","className","icon","title","description","state","children"],"mappings":"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","sourcesContent":["import React, { useState, useCallback, useEffect } from \"react\";\nimport { ListItem, ListItemGraphic, ListItemMeta } from \"../List\";\nimport Transition from \"react-transition-group/Transition\";\nimport { Icon } from \"~/Icon\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport { Typography } from \"~/Typography\";\n\nimport { ReactComponent as UpArrow } from \"./icons/round-keyboard_arrow_up-24px.svg\";\nimport { ReactComponent as DownArrow } from \"./icons/round-keyboard_arrow_down-24px.svg\";\nimport classNames from \"classnames\";\n\nconst Content = styled(\"div\")({\n    width: \"100%\",\n    borderRight: \"1px solid var(--mdc-theme-background)\",\n    borderBottom: \"1px solid var(--mdc-theme-background)\",\n    borderLeft: \"1px solid var(--mdc-theme-background)\",\n    boxSizing: \"border-box\"\n});\n\nconst listItem = css({\n    padding: \"15px 20px\",\n    cursor: \"pointer\",\n    borderBottom: \"1px solid var(--mdc-theme-background)\",\n    \"&:last-child\": {\n        borderBottom: \"none\"\n    },\n    \".mdc-list-item__graphic\": {\n        marginRight: 20\n    }\n});\n\nconst ListItemTitle = styled(\"div\")({\n    fontWeight: 600,\n    marginBottom: 5\n});\n\nconst ListItemDescription = styled(\"div\")({});\n\nconst TitleContent = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"column\"\n});\n\nconst openedState = css({\n    backgroundColor: \"var(--mdc-theme-on-background)\"\n});\n\nconst duration = 150;\nconst defaultStyle = {\n    transition: `all ${duration}ms ease-in-out`,\n    opacity: 0,\n    height: 0,\n    pointerEvents: \"none\",\n    overflow: \"hidden\"\n};\n\ntype TransitionStylesState = \"entering\" | \"entered\" | \"exiting\";\n\n/**\n * We are casting pointerEvents as any because csstype does not have PointerEvents exported. Or at least, that is the error.\n */\nconst transitionStyles = {\n    entering: {\n        opacity: 0,\n        height: 0,\n        padding: \"20px 20px 20px 65px\",\n        pointerEvents: \"auto\" as any,\n        overflow: \"initial\"\n    },\n    entered: {\n        opacity: 1,\n        height: \"auto\",\n        padding: \"20px 20px 20px 65px\",\n        pointerEvents: \"auto\" as any,\n        overflow: \"initial\"\n    },\n    exiting: {\n        height: \"auto\",\n        padding: \"20px 20px 20px 65px\",\n        pointerEvents: \"auto\" as any,\n        overflow: \"initial\"\n    }\n};\n\nexport interface AccordionItemProps {\n    /**\n     * Left side icon\n     */\n    icon?: React.ReactElement | null;\n\n    /**\n     * Accordion title\n     */\n    title?: React.ReactNode;\n\n    /**\n     * Optional description\n     */\n    description?: string;\n\n    /**\n     * Append a class name\n     */\n    className?: string;\n\n    /**\n     * Render item opened by default\n     */\n    open?: boolean;\n    /**\n     * For testing purpose\n     */\n    \"data-testid\"?: string;\n}\n\nconst AccordionItem: React.FC<AccordionItemProps> = props => {\n    const [open, setState] = useState<boolean>(props.open ? props.open : false);\n\n    const toggleState = useCallback(() => {\n        setState(!open);\n    }, [open]);\n\n    useEffect(() => {\n        setState(props.open ? true : false);\n    }, [props.open]);\n\n    return (\n        <div className={classNames(\"webiny-ui-accordion-item\", props.className)}>\n            <ListItem\n                className={classNames(\n                    listItem,\n                    { [openedState]: open },\n                    \"webiny-ui-accordion-item__list-item\"\n                )}\n                onClick={toggleState}\n                data-testid={props[\"data-testid\"]}\n            >\n                {props.icon && (\n                    <ListItemGraphic>\n                        <Icon icon={props.icon} />\n                    </ListItemGraphic>\n                )}\n\n                <TitleContent className=\"webiny-ui-accordion-item__title\">\n                    <ListItemTitle>{props.title}</ListItemTitle>\n                    {props.description && (\n                        <ListItemDescription>\n                            <Typography use={\"subtitle2\"}>{props.description}</Typography>\n                        </ListItemDescription>\n                    )}\n                </TitleContent>\n                <ListItemMeta>\n                    <Icon icon={!open ? <DownArrow /> : <UpArrow />} />\n                </ListItemMeta>\n            </ListItem>\n            <Transition in={open} timeout={duration}>\n                {(state: TransitionStylesState) => (\n                    <Content\n                        style={{ ...defaultStyle, ...transitionStyles[state] }}\n                        className=\"webiny-ui-accordion-item__content\"\n                    >\n                        {props.children}\n                    </Content>\n                )}\n            </Transition>\n        </div>\n    );\n};\n\nexport { AccordionItem };\n"]}

package/Accordion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA;AACA","sourcesContent":["export * from \"./Accordion\";\nexport * from \"./AccordionItem\";\n"]}

package/Alert/Alert.d.ts

@@ -1,14 +1,14 @@
-import * as React from "react";
+import React from "react";
 export declare type AlertType = "success" | "info" | "warning" | "danger";
-declare type AlertProps = {
+interface AlertProps {
     title: string;
     type: AlertType;
     children?: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
-};
+}
 /**
  * Use Alert component to display user's avatar.
  */
-declare const Alert: (props: AlertProps) => JSX.Element;
+declare const Alert: React.FC<AlertProps>;
 export { Alert };

package/Alert/Alert.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["title", "type", "children"];
-import * as React from "react";
+import React from "react";
 import { css } from "emotion";
 var alertStyles = /*#__PURE__*/css({
   borderLeft: "3px solid red",

package/Alert/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Alert.tsx"],"names":["React","css","alertStyles","borderLeft","margin","padding","fontWeight","lineHeight","color","marginBottom","fontSize","borderColor","Alert","props","title","type","children","rest"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,GAAT,QAAoB,SAApB;AAEA,IAAMC,WAAW,gBAAGD,GAAG,CAAC;AACpBE,EAAAA,UAAU,EAAE,eADQ;AAEpBC,EAAAA,MAAM,EAAE,cAFY;AAGpBC,EAAAA,OAAO,EAAE,gBAHW;AAIpB,6BAA2B;AACvBC,IAAAA,UAAU,EAAE,GADW;AAEvBC,IAAAA,UAAU,EAAE,MAFW;AAGvBC,IAAAA,KAAK,EAAE,6BAHgB;AAIvBC,IAAAA,YAAY,EAAE;AAJS,GAJP;AAUpB,+BAA6B;AACzBF,IAAAA,UAAU,EAAE,MADa;AAEzBG,IAAAA,QAAQ,EAAE,EAFe;AAGzBF,IAAAA,KAAK,EAAE;AAHkB,GAVT;AAepB,gCAA8B;AAC1BG,IAAAA,WAAW,EAAE;AADa,GAfV;AAkBpB,6BAA2B;AACvBA,IAAAA,WAAW,EAAE;AADU,GAlBP;AAqBpB,gCAA8B;AAC1BA,IAAAA,WAAW,EAAE;AADa,GArBV;AAwBpB,+BAA6B;AACzBA,IAAAA,WAAW,EAAE;AADY;AAxBT,CAAD,uBAAvB;;AAgDA;AACA;AACA;AACA,IAAMC,KAA2B,GAAG,SAA9BA,KAA8B,CAAAC,KAAK,EAAI;AACzC,MAAQC,KAAR,GAA2CD,KAA3C,CAAQC,KAAR;AAAA,MAAeC,IAAf,GAA2CF,KAA3C,CAAeE,IAAf;AAAA,MAAqBC,QAArB,GAA2CH,KAA3C,CAAqBG,QAArB;AAAA,MAAkCC,IAAlC,4BAA2CJ,KAA3C;;AAEA,sBACI,6CAASI,IAAT;AAAe,IAAA,SAAS,EAAEf,WAAW,GAAG,oCAAd,GAAqDa;AAA/E,mBACI;AAAG,IAAA,SAAS,EAAE;AAAd,KAAyCD,KAAzC,CADJ,eAEI;AAAG,IAAA,SAAS,EAAE;AAAd,KAA2CE,QAA3C,CAFJ,CADJ;AAMH,CATD;;AAWA,SAASJ,KAAT","sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\n\nconst alertStyles = css({\n    borderLeft: \"3px solid red\",\n    margin: \"5px 0 15px 0\",\n    padding: \"2px 0 2px 10px\",\n    \".webiny-ui-alert__title\": {\n        fontWeight: 600,\n        lineHeight: \"150%\",\n        color: \"var(--mdc-theme-on-surface)\",\n        marginBottom: 5\n    },\n    \".webiny-ui-alert__message\": {\n        lineHeight: \"100%\",\n        fontSize: 14,\n        color: \"var(--mdc-theme-on-surface)\"\n    },\n    \"&.webiny-ui-alert--success\": {\n        borderColor: \"#21CEAF\"\n    },\n    \"&.webiny-ui-alert--info\": {\n        borderColor: \"#29A9DB\"\n    },\n    \"&.webiny-ui-alert--warning\": {\n        borderColor: \"#F45C3C\"\n    },\n    \"&.webiny-ui-alert--danger\": {\n        borderColor: \"#E4495C\"\n    }\n});\n\nexport type AlertType = \"success\" | \"info\" | \"warning\" | \"danger\";\n\ninterface AlertProps {\n    // Alert title.\n    title: string;\n\n    // Alert type.\n    type: AlertType;\n\n    // Alert message.\n    children?: React.ReactNode;\n\n    // CSS class name\n    className?: string;\n\n    // Style object\n    style?: React.CSSProperties;\n}\n\n/**\n * Use Alert component to display user's avatar.\n */\nconst Alert: React.FC<AlertProps> = props => {\n    const { title, type, children, ...rest } = props;\n\n    return (\n        <div {...rest} className={alertStyles + \" webiny-ui-alert webiny-ui-alert--\" + type}>\n            <p className={\"webiny-ui-alert__title\"}>{title}</p>\n            <p className={\"webiny-ui-alert__message\"}>{children}</p>\n        </div>\n    );\n};\n\nexport { Alert };\n"]}

package/Alert/Alert.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Alert.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","readme","Alert","story","module","add","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SACIC,KADJ,EAEIC,WAFJ,EAGIC,gBAHJ,EAIIC,YAJJ,EAKIC,mBALJ,QAMO,+BANP;AAOA,OAAOC,MAAP;AAEA,SAASC,KAAT;AAEA,IAAMC,KAAK,GAAGR,SAAS,CAAC,kBAAD,EAAqBS,MAArB,CAAvB;AAEAD,KAAK,CAACE,GAAN,CACI,OADJ,EAEI,YAAM;AACF,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcJ,MAAd,CADJ,eAEI,oBAAC,YAAD,qBACI,oBAAC,mBAAD;AAAqB,IAAA,KAAK,EAAE;AAA5B,kBACI,oBAAC,KAAD;AAAO,IAAA,KAAK,EAAE,uBAAd;AAAuC,IAAA,IAAI,EAAE;AAA7C,qCADJ,CADJ,eAMI,oBAAC,gBAAD,qBACI,oBAAC,KAAD;AAAO,IAAA,KAAK,EAAE,uBAAd;AAAuC,IAAA,IAAI,EAAE;AAA7C,qCADJ,CANJ,CAFJ,eAcI,oBAAC,YAAD,qBACI,oBAAC,mBAAD;AAAqB,IAAA,KAAK,EAAE;AAA5B,kBACI,oBAAC,KAAD;AAAO,IAAA,KAAK,EAAE,uBAAd;AAAuC,IAAA,IAAI,EAAE;AAA7C,+BADJ,CADJ,eAMI,oBAAC,gBAAD,qBACI,oBAAC,KAAD;AAAO,IAAA,KAAK,EAAE,uBAAd;AAAuC,IAAA,IAAI,EAAE;AAA7C,+BADJ,CANJ,CAdJ,CADJ;AA6BH,CAhCL,EAiCI;AAAEK,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACL,KAAD;AAAd;AAAR,CAjCJ","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 \"./README.md\";\n\nimport { Alert } from \"./Alert\";\n\nconst story = storiesOf(\"Components/Alert\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Info\"}>\n                        <Alert title={\"Something went wrong!\"} type={\"info\"}>\n                            We failed to fetch your data.\n                        </Alert>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        <Alert title={\"Something went wrong!\"} type={\"info\"}>\n                            We failed to fetch your data.\n                        </Alert>\n                    </StorySandboxCode>\n                </StorySandbox>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Danger\"}>\n                        <Alert title={\"Something went wrong!\"} type={\"danger\"}>\n                            Please contact support!\n                        </Alert>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        <Alert title={\"Something went wrong!\"} type={\"danger\"}>\n                            Please contact support!\n                        </Alert>\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Alert] } }\n);\n"]}

package/Alert/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA","sourcesContent":["export * from \"./Alert\";\n"]}

package/AutoComplete/AutoComplete.d.ts

@@ -1,5 +1,4 @@
-import * as React from "react";
-import { ControllerStateAndHelpers } from "downshift";
+import React from "react";
 import { AutoCompleteBaseProps } from "./types";
 export declare enum Placement {
     top = "top",
@@ -9,14 +8,10 @@ export interface AutoCompleteProps extends Omit<AutoCompleteBaseProps, "onChange
     placement?: Placement;
     onChange?: (value: any, selection?: any) => void;
     loading?: boolean;
-    noResultFound?: Function;
+    noResultFound?: React.ReactNode;
 }
-declare type State = {
+interface State {
     inputValue: string;
-};
-interface RenderOptionsParams extends Omit<ControllerStateAndHelpers<any>, "getInputProps" | "openMenu"> {
-    options: AutoCompleteProps["options"];
-    placement: AutoCompleteProps["placement"];
 }
 declare class AutoComplete extends React.Component<AutoCompleteProps, State> {
     static defaultProps: Partial<AutoCompleteProps>;
@@ -25,11 +20,11 @@ declare class AutoComplete extends React.Component<AutoCompleteProps, State> {
      * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.
      */
     downshift: any;
-    componentDidUpdate(previousProps: any): void;
+    componentDidUpdate(previousProps: AutoCompleteProps): void;
     /**
      * Renders options - based on user's input. It will try to match input text with available options.
      */
-    renderOptions({ options, isOpen, highlightedIndex, selectedItem, getMenuProps, getItemProps, placement }: RenderOptionsParams): JSX.Element;
+    private renderOptions;
     render(): JSX.Element;
 }
 export { AutoComplete };

package/AutoComplete/AutoComplete.js

@@ -9,7 +9,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _isEqual from "lodash/isEqual";
 var _excluded = ["className", "options", "onChange", "value", "onInput", "validation", "placement"],
     _excluded2 = ["getInputProps", "openMenu"];
-import * as React from "react";
+import React from "react";
 import Downshift from "downshift";
 import { Input } from "../Input";
 import classNames from "classnames";
@@ -40,14 +40,14 @@ export var Placement;
   Placement["bottom"] = "bottom";
 })(Placement || (Placement = {}));
 
-function Spinner() {
+var Spinner = function Spinner() {
   return /*#__PURE__*/React.createElement(MaterialSpinner, {
     size: 24,
     spinnerColor: "#fa5723",
     spinnerWidth: 2,
     visible: true
   });
-}
+};
 
 var OptionsList = function OptionsList(_ref) {
   var placement = _ref.placement,
@@ -264,7 +264,9 @@ var AutoComplete = /*#__PURE__*/function (_React$Component) {
             var keyCode = keycode(ev);
 
             if (keyCode === "backspace") {
-              _onChange(null);
+              if (_onChange) {
+                _onChange(null);
+              }
 
               setTimeout(function () {
                 return openMenu();

package/AutoComplete/AutoComplete.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["AutoComplete.tsx"],"names":["React","Downshift","Input","classNames","Elevation","Typography","keycode","autoCompleteStyle","suggestionList","getOptionValue","getOptionText","findInAliases","MaterialSpinner","css","menuStyles","top","bottom","listStyles","listStyle","paddingLeft","margin","Placement","Spinner","OptionsList","placement","getMenuProps","children","AutoComplete","inputValue","createRef","previousProps","props","value","options","previousValue","item","find","option","downshift","current","selectItem","isOpen","highlightedIndex","selectedItem","getItemProps","state","length","renderItem","filtered","filter","aliases","toLowerCase","includes","noResultFound","map","index","itemValue","itemClassNames","selected","className","call","onChange","onInput","validation","isValid","message","otherInputProps","downshiftProps","itemToString","defaultSelectedItem","selection","setState","getInputProps","openMenu","rest","trailingIcon","loading","rawOnChange","ev","onBlur","onFocus","onKeyDown","keyCode","setTimeout","onKeyUp","target","currentTarget","disabled","readOnly","renderOptions","Component","valueProp","textProp"],"mappings":"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","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 <MaterialSpinner size={24} spinnerColor={\"#fa5723\"} spinnerWidth={2} visible />;\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 = { isValid: null, message: null },\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"]}

package/AutoComplete/AutoComplete.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["AutoComplete.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","readme","Form","AutoComplete","story","module","options","name","id","add","country","Bind","JSON","stringify","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SACIC,KADJ,EAEIC,WAFJ,EAGIC,gBAHJ,EAIIC,YAJJ,EAKIC,mBALJ,QAMO,+BANP;AAOA,OAAOC,MAAP;AAEA,SAASC,IAAT,QAAqB,cAArB;AACA,SAASC,YAAT;AAEA,IAAMC,KAAK,GAAGT,SAAS,CAAC,yBAAD,EAA4BU,MAA5B,CAAvB;AAEA,IAAMC,OAAO,GAAG,CACZ;AAAEC,EAAAA,IAAI,EAAE,QAAR;AAAkBC,EAAAA,EAAE,EAAE;AAAtB,CADY,EAEZ;AAAED,EAAAA,IAAI,EAAE,SAAR;AAAmBC,EAAAA,EAAE,EAAE;AAAvB,CAFY,EAGZ;AAAED,EAAAA,IAAI,EAAE,OAAR;AAAiBC,EAAAA,EAAE,EAAE;AAArB,CAHY,EAIZ;AAAED,EAAAA,IAAI,EAAE,OAAR;AAAiBC,EAAAA,EAAE,EAAE;AAArB,CAJY,EAKZ;AAAED,EAAAA,IAAI,EAAE,IAAR;AAAcC,EAAAA,EAAE,EAAE;AAAlB,CALY,EAMZ;AAAED,EAAAA,IAAI,EAAE,IAAR;AAAcC,EAAAA,EAAE,EAAE;AAAlB,CANY,EAOZ;AAAED,EAAAA,IAAI,EAAE,QAAR;AAAkBC,EAAAA,EAAE,EAAE;AAAtB,CAPY,EAQZ;AAAED,EAAAA,IAAI,EAAE,SAAR;AAAmBC,EAAAA,EAAE,EAAE;AAAvB,CARY,EASZ;AAAED,EAAAA,IAAI,EAAE,gBAAR;AAA0BC,EAAAA,EAAE,EAAE;AAA9B,CATY,CAAhB;AAYAJ,KAAK,CAACK,GAAN,CACI,cADJ,EAEI,YAAM;AACF,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcR,MAAd,CADJ,eAEI,oBAAC,YAAD,qBACI,oBAAC,mBAAD;AAAqB,IAAA,KAAK,EAAE;AAA5B,kBACI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAE;AAAES,MAAAA,OAAO,EAAE;AAAEF,QAAAA,EAAE,EAAE,OAAN;AAAeD,QAAAA,IAAI,EAAE;AAArB;AAAX;AAAZ,KACK;AAAA,QAAGI,IAAH,QAAGA,IAAH;AAAA,wBACG,oBAAC,IAAD;AAAM,MAAA,IAAI,EAAC;AAAX,oBACI,oBAAC,YAAD;AACI,MAAA,OAAO,EAAEL,OADb;AAEI,MAAA,KAAK,EAAC,SAFV;AAGI,MAAA,WAAW,EAAC;AAHhB,MADJ,CADH;AAAA,GADL,CADJ,CADJ,eAcI,oBAAC,gBAAD,4OAM2BM,IAAI,CAACC,SAAL,CAAeP,OAAf,CAN3B,gSAdJ,CAFJ,eAiCI,oBAAC,YAAD,qBACI,oBAAC,mBAAD;AAAqB,IAAA,KAAK,EAAE;AAA5B,kBACI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAE;AAAEI,MAAAA,OAAO,EAAE;AAAX;AAAZ,KACK;AAAA,QAAGC,IAAH,SAAGA,IAAH;AAAA,wBACG,oBAAC,IAAD;AAAM,MAAA,IAAI,EAAC;AAAX,oBACI,oBAAC,YAAD;AACI,MAAA,eAAe,MADnB;AAEI,MAAA,OAAO,EAAE,CAAC,QAAD,EAAW,SAAX,EAAsB,OAAtB,EAA+B,OAA/B,CAFb;AAGI,MAAA,KAAK,EAAC,SAHV;AAII,MAAA,WAAW,EAAC;AAJhB,MADJ,CADH;AAAA,GADL,CADJ,CADJ,eAeI,oBAAC,gBAAD,ioBAfJ,CAjCJ,CADJ;AAoEH,CAvEL,EAwEI;AAAEG,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACZ,YAAD;AAAd;AAAR,CAxEJ","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"]}

package/AutoComplete/MultiAutoComplete.d.ts

@@ -1,7 +1,5 @@
-import * as React from "react";
-import { ControllerStateAndHelpers } from "downshift";
+import React from "react";
 import { AutoCompleteBaseProps } from "./types";
-import { AutoCompleteProps } from "./AutoComplete";
 interface SelectionItem {
     name: string;
 }
@@ -27,7 +25,7 @@ export interface MultiAutoCompleteProps extends Omit<AutoCompleteBaseProps, "val
      * Render list item when `useMultipleSelectionList` is used.
      */
     renderListItemLabel?: Function;
-    noResultFound?: Function;
+    noResultFound?: React.ReactNode;
     /**
      * Value is an array of strings. But can be undefined.
      */
@@ -40,10 +38,6 @@ declare type State = {
     reorderFormVisible: string;
     reorderFormValue: string;
 };
-interface RenderOptionsParams extends Omit<ControllerStateAndHelpers<any>, "getInputProps" | "openMenu"> {
-    options: AutoCompleteProps["options"];
-    unique: boolean;
-}
 export declare class MultiAutoComplete extends React.Component<MultiAutoCompleteProps, State> {
     static defaultProps: Partial<MultiAutoCompleteProps>;
     state: State;
@@ -58,13 +52,12 @@ export declare class MultiAutoComplete extends React.Component<MultiAutoComplete
     /**
      * Renders options - based on user's input. It will try to match input text with available options.
      */
-    renderOptions(params: RenderOptionsParams): JSX.Element;
+    private renderOptions;
     /**
      * 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 {};

package/AutoComplete/MultiAutoComplete.js

@@ -9,7 +9,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 var _excluded = ["unique", "value", "onChange", "onInput", "validation", "useMultipleSelectionList", "description"],
     _excluded2 = ["getInputProps", "openMenu"];
-import * as React from "react";
+import React from "react";
 import Downshift from "downshift";
 import MaterialSpinner from "react-spinner-material";
 import { Input } from "../Input";
@@ -302,7 +302,6 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
     /**
      * 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 {*}
      */
 
   }, {
@@ -387,7 +386,10 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
                   var newValue = _toConsumableArray(value);
 
                   newValue.splice(e.target.value - 1, 0, newValue.splice(item.index, 1)[0]);
-                  onChange(newValue);
+
+                  if (onChange) {
+                    onChange(newValue);
+                  }
                 }
 
                 _this4.setState({
@@ -452,9 +454,11 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
           key: "".concat(getOptionValue(item, _this4.props), "-").concat(index),
           trailingIcon: /*#__PURE__*/React.createElement(BaselineCloseIcon, null),
           onRemove: function onRemove() {
-            if (onChange) {
-              onChange([].concat(_toConsumableArray(value.slice(0, index)), _toConsumableArray(value.slice(index + 1))));
+            if (!onChange) {
+              return;
             }
+
+            onChange([].concat(_toConsumableArray(value.slice(0, index)), _toConsumableArray(value.slice(index + 1))));
           }
         });
       }));

package/AutoComplete/MultiAutoComplete.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MultiAutoComplete.tsx"],"names":["React","Downshift","MaterialSpinner","Input","Chips","Chip","getOptionValue","getOptionText","findInAliases","List","ListItem","ListItemMeta","IconButton","classNames","Elevation","Typography","autoCompleteStyle","suggestionList","FormElementMessage","ReactComponent","BaselineCloseIcon","PrevIcon","NextIcon","PrevAllIcon","NextAllIcon","DeleteIcon","ReorderIcon","css","ListItemGraphic","style","pagination","bar","display","justifyContent","alignItems","borderBottom","padding","pages","searchInput","height","list","secondaryText","color","listStyles","listStyle","paddingLeft","margin","Spinner","DEFAULT_PER_PAGE","paginateMultipleSelection","multipleSelection","limit","page","search","data","Array","isArray","map","item","index","filter","name","toLowerCase","includes","lastPage","Math","ceil","length","totalCount","slice","from","to","meta","hasData","hasPrevious","hasNext","OptionsList","getMenuProps","children","MultiAutoComplete","inputValue","multipleSelectionPage","multipleSelectionSearch","reorderFormVisible","reorderFormValue","createRef","set","selection","setState","props","unique","value","allowFreeInput","useSimpleValues","options","filtered","values","find","state","aliases","existingValue","unshift","textProp","params","isOpen","highlightedIndex","getItemProps","noResultFound","renderItem","itemValue","itemClassNames","className","call","onChange","disabled","useMultipleSelectionList","description","renderListItemLabel","setMultipleSelectionSearch","setMultipleSelectionPage","key","e","newValue","splice","target","marginRight","minWidth","hasItems","onInput","validation","isValid","message","otherInputProps","getOptions","downshift","assignedValueAfterClearing","current","clearSelection","getInputProps","openMenu","rest","rawOnChange","trailingIcon","loading","onBlur","onKeyUp","onFocus","renderOptions","renderMultipleSelection","Component","valueProp"],"mappings":";;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAkE,WAAlE;AACA,OAAOC,eAAP,MAA4B,wBAA5B;AACA,SAASC,KAAT;AACA,SAASC,KAAT,EAAgBC,IAAhB;AACA,SAASC,cAAT,EAAyBC,aAAzB,EAAwCC,aAAxC;AACA,SAASC,IAAT,EAAeC,QAAf,EAAyBC,YAAzB;AACA,SAASC,UAAT;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,SAAT;AACA,SAASC,UAAT;AACA,SAASC,iBAAT,EAA4BC,cAA5B;AAEA,SAASC,kBAAT;AAEA,SAASC,cAAc,IAAIC,iBAA3B;AACA,SAASD,cAAc,IAAIE,QAA3B;AACA,SAASF,cAAc,IAAIG,QAA3B;AACA,SAASH,cAAc,IAAII,WAA3B;AACA,SAASJ,cAAc,IAAIK,WAA3B;AACA,SAASL,cAAc,IAAIM,UAA3B;AACA,SAASN,cAAc,IAAIO,WAA3B;AAEA,SAASC,GAAT,QAAoB,SAApB;AACA,SAASC,eAAT;AAEA,IAAMC,KAAK,GAAG;AACVC,EAAAA,UAAU,EAAE;AACRC,IAAAA,GAAG,eAAEJ,GAAG,CAAC;AACLK,MAAAA,OAAO,EAAE,MADJ;AAELC,MAAAA,cAAc,EAAE,eAFX;AAGLC,MAAAA,UAAU,EAAE,QAHP;AAILC,MAAAA,YAAY,EAAE,mBAJT;AAKLC,MAAAA,OAAO,EAAE;AALJ,KAAD,eADA;AAQRC,IAAAA,KAAK,eAAEV,GAAG,CAAC;AACPK,MAAAA,OAAO,EAAE,MADF;AAEPC,MAAAA,cAAc,EAAE,eAFT;AAGPC,MAAAA,UAAU,EAAE;AAHL,KAAD,iBARF;AAaRI,IAAAA,WAAW,eAAEX,GAAG,CAAC;AACbY,MAAAA,MAAM,EAAE;AADK,KAAD,uBAbR;AAgBRC,IAAAA,IAAI,eAAEb,GAAG,CAAC;AACNS,MAAAA,OAAO,EAAE,sBADH;AAEN,wBAAkB;AACdD,QAAAA,YAAY,EAAE;AADA;AAFZ,KAAD,gBAhBD;AAsBRM,IAAAA,aAAa,eAAEd,GAAG,CAAC;AACfe,MAAAA,KAAK,EAAE;AADQ,KAAD;AAtBV;AADF,CAAd;AA4BA,IAAMC,UAAU,gBAAGhB,GAAG,CAAC;AACnB,wCAAsC;AAClCiB,IAAAA,SAAS,EAAE,MADuB;AAElCC,IAAAA,WAAW,EAAE,CAFqB;AAGlC,YAAQ;AACJC,MAAAA,MAAM,EAAE;AADJ;AAH0B;AADnB,CAAD,sBAAtB;;AAyDA,SAASC,OAAT,GAAmB;AACf,sBAAO,oBAAC,eAAD;AAAiB,IAAA,IAAI,EAAE,EAAvB;AAA2B,IAAA,YAAY,EAAE,SAAzC;AAAoD,IAAA,YAAY,EAAE,CAAlE;AAAqE,IAAA,OAAO;AAA5E,IAAP;AACH;;AAED,IAAMC,gBAAgB,GAAG,EAAzB;;AAEA,SAASC,yBAAT,CACIC,iBADJ,EAEIC,KAFJ,EAGIC,IAHJ,EAIIC,MAJJ,EAKE;AACE;AACA,MAAIC,IAAI,GAAGC,KAAK,CAACC,OAAN,CAAcN,iBAAd,IACLA,iBAAiB,CAACO,GAAlB,CAAsB,UAACC,IAAD,EAAOC,KAAP;AAAA,2CAAuBD,IAAvB;AAA6BC,MAAAA,KAAK,EAALA;AAA7B;AAAA,GAAtB,CADK,GAEL,EAFN;;AAIA,MAAI,OAAON,MAAP,KAAkB,QAAlB,IAA8BA,MAAlC,EAA0C;AACtCC,IAAAA,IAAI,GAAGA,IAAI,CAACM,MAAL,CAAY,UAAAF,IAAI,EAAI;AACvB,aACI,OAAOA,IAAI,CAACG,IAAZ,KAAqB,QAArB,IACAH,IAAI,CAACG,IAAL,CAAUC,WAAV,GAAwBC,QAAxB,CAAiCV,MAAM,CAACS,WAAP,EAAjC,CAFJ;AAIH,KALM,CAAP;AAMH;;AAED,MAAME,QAAQ,GAAGC,IAAI,CAACC,IAAL,CAAUZ,IAAI,CAACa,MAAL,GAAchB,KAAxB,CAAjB;AACA,MAAMiB,UAAU,GAAGd,IAAI,CAACa,MAAxB;AAEAf,EAAAA,IAAI,GAAGA,IAAI,IAAIY,QAAf;AACAV,EAAAA,IAAI,GAAGA,IAAI,CAACe,KAAL,CAAW,CAACjB,IAAI,GAAG,CAAR,IAAaD,KAAxB,EAA+BC,IAAI,GAAGD,KAAtC,CAAP;AAEA,MAAImB,IAAI,GAAG,CAAX;AACA,MAAIC,EAAE,GAAG,CAAT;;AACA,MAAIjB,IAAI,CAACa,MAAT,EAAiB;AACbG,IAAAA,IAAI,GAAG,CAAClB,IAAI,GAAG,CAAR,IAAaD,KAAb,GAAqB,CAA5B;AACAoB,IAAAA,EAAE,GAAGD,IAAI,IAAIhB,IAAI,CAACa,MAAL,GAAc,CAAlB,CAAT;AACH;;AAED,MAAMK,IAAI,GAAG;AACTC,IAAAA,OAAO,EAAEnB,IAAI,CAACa,MAAL,GAAc,CADd;AAETC,IAAAA,UAAU,EAAVA,UAFS;AAGTE,IAAAA,IAAI,EAAJA,IAHS;AAITC,IAAAA,EAAE,EAAFA,EAJS;AAKTnB,IAAAA,IAAI,EAAEA,IALG;AAMTY,IAAAA,QAAQ,EAARA,QANS;AAOTb,IAAAA,KAAK,EAALA,KAPS;AAQTuB,IAAAA,WAAW,EAAEtB,IAAI,GAAG,CARX;AASTuB,IAAAA,OAAO,EAAEvB,IAAI,GAAGY;AATP,GAAb;AAYA,SAAO;AAAEV,IAAAA,IAAI,EAAJA,IAAF;AAAQkB,IAAAA,IAAI,EAAJA;AAAR,GAAP;AACH;;AAiBD,IAAMI,WAAuC,GAAG,SAA1CA,WAA0C,OAAgC;AAAA,MAA7BC,YAA6B,QAA7BA,YAA6B;AAAA,MAAfC,QAAe,QAAfA,QAAe;AAC5E,sBACI,oBAAC,SAAD;AAAW,IAAA,CAAC,EAAE;AAAd,kBACI;AACI,IAAA,SAAS,EAAEjE,UAAU,CAAC,kCAAD,EAAqC8B,UAArC;AADzB,KAEQkC,YAAY,EAFpB,GAIKC,QAJL,CADJ,CADJ;AAUH,CAXD;;AAaA,WAAaC,iBAAb;AAAA;;AAAA;;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;;AAAA,4DA0BmC;AAC3BC,MAAAA,UAAU,EAAE,EADe;AAE3BC,MAAAA,qBAAqB,EAAE,CAFI;AAG3BC,MAAAA,uBAAuB,EAAE,EAHE;AAI3BC,MAAAA,kBAAkB,EAAE,EAJO;AAK3BC,MAAAA,gBAAgB,EAAE;AALS,KA1BnC;;AAAA,6EAqCwBpF,KAAK,CAACqF,SAAN,EArCxB;;AAAA,iFAuCqE;AAC7DC,MAAAA,GAAG,EAAE,KADwD;AAE7DC,MAAAA,SAAS,EAAE;AAFkD,KAvCrE;;AAAA,+EA4C+B,UAACN,qBAAD,EAAyC;AAChE,YAAKO,QAAL,CAAc;AAAEP,QAAAA,qBAAqB,EAArBA;AAAF,OAAd;AACH,KA9CL;;AAAA,iFAgDiC,UAACC,uBAAD,EAA2C;AACpE,YAAKM,QAAL,CAAc;AAAEN,QAAAA,uBAAuB,EAAvBA;AAAF,OAAd;AACH,KAlDL;;AAAA;AAAA;;AAAA;AAAA;AAAA,WAoDI,sBAAa;AAAA;;AACT,wBAAoE,KAAKO,KAAzE;AAAA,UAAQC,MAAR,eAAQA,MAAR;AAAA,UAAgBC,KAAhB,eAAgBA,KAAhB;AAAA,UAAuBC,cAAvB,eAAuBA,cAAvB;AAAA,UAAuCC,eAAvC,eAAuCA,eAAvC;AAAA,UAAwDC,OAAxD,eAAwDA,OAAxD;AAEA,UAAMC,QAAQ,GAAGD,OAAO,CAAClC,MAAR,CAAe,UAAAF,IAAI,EAAI;AACpC;AACA;AACA,YAAIgC,MAAJ,EAAY;AACR,cAAMM,MAAM,GAAGL,KAAf;;AACA,cAAIpC,KAAK,CAACC,OAAN,CAAcwC,MAAd,CAAJ,EAA2B;AACvB,gBACIA,MAAM,CAACC,IAAP,CACI,UAAAN,KAAK;AAAA,qBACDrF,cAAc,CAACqF,KAAD,EAAQ,MAAI,CAACF,KAAb,CAAd,KACAnF,cAAc,CAACoD,IAAD,EAAO,MAAI,CAAC+B,KAAZ,CAFb;AAAA,aADT,CADJ,EAME;AACE,qBAAO,KAAP;AACH;AACJ;AACJ,SAhBmC,CAkBpC;;;AACA,YAAI,CAAC,MAAI,CAACS,KAAL,CAAWlB,UAAhB,EAA4B;AACxB,iBAAO,IAAP;AACH;;AAED,YAAItB,IAAI,CAACyC,OAAT,EAAkB;AACd,iBAAO3F,aAAa,CAACkD,IAAD,EAAO,MAAI,CAACwC,KAAL,CAAWlB,UAAlB,CAApB;AACH;;AAED,eAAOzE,aAAa,CAACmD,IAAD,EAAO,MAAI,CAAC+B,KAAZ,CAAb,CACF3B,WADE,GAEFC,QAFE,CAEO,MAAI,CAACmC,KAAL,CAAWlB,UAAX,CAAsBlB,WAAtB,EAFP,CAAP;AAGH,OA9BgB,CAAjB,CAHS,CAmCT;;AACA,UAAI8B,cAAc,IAAI,KAAKM,KAAL,CAAWlB,UAAjC,EAA6C;AACzC,YAAIa,eAAJ,EAAqB;AACjB,cAAMO,aAAa,GAAGL,QAAQ,CAAChC,QAAT,CAAkB,KAAKmC,KAAL,CAAWlB,UAA7B,CAAtB;;AACA,cAAI,CAACoB,aAAL,EAAoB;AAChBL,YAAAA,QAAQ,CAACM,OAAT,CAAiB,KAAKH,KAAL,CAAWlB,UAA5B;AACH;AACJ,SALD,MAKO;AACH,cAAMoB,cAAa,GAAGL,QAAQ,CAACE,IAAT,CAClB,UAAAvC,IAAI;AAAA,mBAAI,MAAI,CAACwC,KAAL,CAAWlB,UAAX,KAA0BzE,aAAa,CAACmD,IAAD,EAAO,MAAI,CAAC+B,KAAZ,CAA3C;AAAA,WADc,CAAtB;;AAGA,cAAI,CAACW,cAAL,EAAoB;AAChBL,YAAAA,QAAQ,CAACM,OAAT,qBAAoB,KAAKZ,KAAL,CAAWa,QAA/B,EAA0C,KAAKJ,KAAL,CAAWlB,UAArD;AACH;AACJ;AACJ;;AAED,aAAOe,QAAP;AACH;AAED;AACJ;AACA;;AA7GA;AAAA;AAAA,WA8GI,uBAAsBQ,MAAtB,EAAmD;AAAA;;AAC/C,UAAQT,OAAR,GAA0ES,MAA1E,CAAQT,OAAR;AAAA,UAAiBU,MAAjB,GAA0ED,MAA1E,CAAiBC,MAAjB;AAAA,UAAyBC,gBAAzB,GAA0EF,MAA1E,CAAyBE,gBAAzB;AAAA,UAA2C5B,YAA3C,GAA0E0B,MAA1E,CAA2C1B,YAA3C;AAAA,UAAyD6B,YAAzD,GAA0EH,MAA1E,CAAyDG,YAAzD;;AACA,UAAI,CAACF,MAAL,EAAa;AACT,eAAO,IAAP;AACH;AAED;AACR;AACA;;;AACQ,UAAI,CAAC,KAAKN,KAAL,CAAWlB,UAAZ,IAA0B,CAACc,OAAO,CAAC3B,MAAvC,EAA+C;AAC3C,4BACI,oBAAC,WAAD;AAAa,UAAA,YAAY,EAAEU;AAA3B,wBACI,6CACI,oBAAC,UAAD;AAAY,UAAA,GAAG,EAAE;AAAjB,wCADJ,CADJ,CADJ;AAOH;;AAED,UAAI,CAACiB,OAAO,CAAC3B,MAAb,EAAqB;AACjB,4BACI,oBAAC,SAAD;AAAW,UAAA,CAAC,EAAE;AAAd,wBACI;AACI,UAAA,SAAS,EAAEtD,UAAU,CAAC,kCAAD,EAAqC8B,UAArC;AADzB,WAEQkC,YAAY,EAFpB,gBAII,6CACI,oBAAC,UAAD;AAAY,UAAA,GAAG,EAAE;AAAjB,yBADJ,EAEK,KAAKY,KAAL,CAAWkB,aAFhB,CAJJ,CADJ,CADJ;AAaH;;AAED,UAAQC,UAAR,GAAuB,KAAKnB,KAA5B,CAAQmB,UAAR;AACA,0BACI,oBAAC,SAAD;AAAW,QAAA,CAAC,EAAE;AAAd,sBACI;AACI,QAAA,SAAS,EAAE/F,UAAU,CAAC,kCAAD,EAAqC8B,UAArC;AADzB,SAEQkC,YAAY,EAFpB,GAIKiB,OAAO,CAACrC,GAAR,CAAY,UAACC,IAAD,EAAOC,KAAP,EAAiB;AAAA;;AAC1B,YAAMkD,SAAS,GAAGvG,cAAc,CAACoD,IAAD,EAAO,MAAI,CAAC+B,KAAZ,CAAhC,CAD0B,CAG1B;;AACA,YAAMqB,cAAc,2DACf7F,cADe,EACE,IADF,mDAEHwF,gBAAgB,KAAK9C,KAFlB,gDAGN,KAHM,mBAApB,CAJ0B,CAU1B;;AACA,4BACI;AACI,UAAA,GAAG,EAAEkD,SAAS,GAAGlD;AADrB,WAEQ+C,YAAY,CAAC;AACb/C,UAAAA,KAAK,EAALA,KADa;AAEbD,UAAAA,IAAI,EAAJA,IAFa;AAGbqD,UAAAA,SAAS,EAAElG,UAAU,CAACiG,cAAD;AAHR,SAAD,CAFpB,GAQKF,UAAU,CAACI,IAAX,CAAgB,MAAhB,EAAsBtD,IAAtB,EAA4BC,KAA5B,CARL,CADJ;AAYH,OAvBA,CAJL,CADJ,CADJ;AAiCH;AAED;AACJ;AACA;AACA;;AAxLA;AAAA;AAAA,WAyLI,mCAAiC;AAAA;;AAC7B,yBAOI,KAAK8B,KAPT;AAAA,UACIE,KADJ,gBACIA,KADJ;AAAA,UAEIsB,QAFJ,gBAEIA,QAFJ;AAAA,UAGIC,QAHJ,gBAGIA,QAHJ;AAAA,UAIIC,wBAJJ,gBAIIA,wBAJJ;AAAA,UAKIC,WALJ,gBAKIA,WALJ;AAAA,UAMIC,mBANJ,gBAMIA,mBANJ;;AASA,UAAIF,wBAAJ,EAA8B;AAC1B,oCAAuBlE,yBAAyB,CAC5C0C,KAD4C,EAE5C3C,gBAF4C,EAG5C,KAAKkD,KAAL,CAAWjB,qBAHiC,EAI5C,KAAKiB,KAAL,CAAWhB,uBAJiC,CAAhD;AAAA,YAAQ5B,IAAR,yBAAQA,IAAR;AAAA,YAAckB,IAAd,yBAAcA,IAAd;;AAOA,4BACI,uDACI;AAAK,UAAA,SAAS,EAAE3C,KAAK,CAACC,UAAN,CAAiBC;AAAjC,wBACI,8CACI,oBAAC,KAAD;AACI,UAAA,SAAS,EAAEF,KAAK,CAACC,UAAN,CAAiBQ,WADhC;AAEI,UAAA,WAAW,EAAE,oBAFjB;AAGI,UAAA,KAAK,EAAE,KAAK4D,KAAL,CAAWhB,uBAHtB;AAII,UAAA,QAAQ,EAAE,kBAAAS,KAAK,EAAI;AACf,YAAA,MAAI,CAAC2B,0BAAL,CAAgC3B,KAAhC;;AACA,YAAA,MAAI,CAAC4B,wBAAL,CAA8B5B,KAAK,GAAG,CAAH,GAAO,CAA1C;AACH;AAPL,UADJ,CADJ,eAaI;AAAK,UAAA,SAAS,EAAE9D,KAAK,CAACC,UAAN,CAAiBO;AAAjC,wBACI;AAAK,UAAA,SAAS,EAAEmC,IAAI,CAACC,OAAL,GAAe,EAAf,GAAoB5C,KAAK,CAACC,UAAN,CAAiBW;AAArD,WACK+B,IAAI,CAACF,IADV,SACmBE,IAAI,CAACD,EADxB,UACgCC,IAAI,CAACJ,UADrC,CADJ,eAII,8CACI,oBAAC,UAAD;AACI,UAAA,IAAI,eAAE,oBAAC,WAAD,OADV;AAEI,UAAA,QAAQ,EAAE,CAACI,IAAI,CAACC,OAAN,IAAiBD,IAAI,CAACpB,IAAL,KAAc,CAF7C;AAGI,UAAA,OAAO,EAAE;AAAA,mBAAM,MAAI,CAACmE,wBAAL,CAA8B,CAA9B,CAAN;AAAA;AAHb,UADJ,eAMI,oBAAC,UAAD;AACI,UAAA,IAAI,eAAE,oBAAC,QAAD,OADV;AAEI,UAAA,QAAQ,EAAE,CAAC/C,IAAI,CAACC,OAAN,IAAiB,CAACD,IAAI,CAACE,WAFrC;AAGI,UAAA,OAAO,EAAE;AAAA,mBAAM,MAAI,CAAC6C,wBAAL,CAA8B/C,IAAI,CAACpB,IAAL,GAAY,CAA1C,CAAN;AAAA;AAHb,UANJ,eAWI,oBAAC,UAAD;AACI,UAAA,IAAI,eAAE,oBAAC,QAAD,OADV;AAEI,UAAA,QAAQ,EAAE,CAACoB,IAAI,CAACC,OAAN,IAAiB,CAACD,IAAI,CAACG,OAFrC;AAGI,UAAA,OAAO,EAAE;AAAA,mBAAM,MAAI,CAAC4C,wBAAL,CAA8B/C,IAAI,CAACpB,IAAL,GAAY,CAA1C,CAAN;AAAA;AAHb,UAXJ,eAgBI,oBAAC,UAAD;AACI,UAAA,IAAI,eAAE,oBAAC,WAAD,OADV;AAEI,UAAA,QAAQ,EAAE,CAACoB,IAAI,CAACC,OAAN,IAAiBD,IAAI,CAACpB,IAAL,KAAcoB,IAAI,CAACR,QAFlD;AAGI,UAAA,OAAO,EAAE;AAAA,mBAAM,MAAI,CAACuD,wBAAL,CAA8B/C,IAAI,CAACR,QAAnC,CAAN;AAAA;AAHb,UAhBJ,CAJJ,CAbJ,CADJ,eA2CI,oBAAC,IAAD;AAAM,UAAA,SAAS,EAAEnC,KAAK,CAACC,UAAN,CAAiBU;AAAlC,WACKgC,IAAI,CAACC,OAAL,GACGnB,IAAI,CAACG,GAAL,CAAS,UAACC,IAAD,EAAOC,KAAP,EAAiB;AACtB,cAAM6D,GAAG,aAAMlH,cAAc,CAACoD,IAAD,EAAO,MAAI,CAAC+B,KAAZ,CAApB,cAA0C9B,KAA1C,CAAT;;AACA,cAAI,MAAI,CAACuC,KAAL,CAAWf,kBAAX,KAAkCqC,GAAtC,EAA2C;AACvC,gCACI,oBAAC,QAAD;AAAU,cAAA,GAAG,EAAEA;AAAf,4BACI,oBAAC,eAAD,qBACI,oBAAC,UAAD;AAAY,cAAA,QAAQ,MAApB;AAAqB,cAAA,IAAI,eAAE,oBAAC,WAAD;AAA3B,cADJ,CADJ,eAII,oBAAC,KAAD;AACI,cAAA,KAAK,EAAE,MAAI,CAACtB,KAAL,CAAWd,gBADtB;AAEI,cAAA,SAAS,EAAE,mBAACqC,CAAD,EAAY;AACnB,oBAAMD,GAAG,GAAGC,CAAC,CAACD,GAAd;;AACA,oBAAIA,GAAG,KAAK,QAAR,IAAoBA,GAAG,KAAK,OAAhC,EAAyC;AACrC;AACH;;AAED,oBAAIA,GAAG,KAAK,OAAZ,EAAqB;AACjB;AACA,sBAAME,QAAQ,sBACN/B,KADM,CAAd;;AAGA+B,kBAAAA,QAAQ,CAACC,MAAT,CACIF,CAAC,CAACG,MAAF,CAASjC,KAAT,GAAiB,CADrB,EAEI,CAFJ,EAGI+B,QAAQ,CAACC,MAAT,CAAgBjE,IAAI,CAACC,KAArB,EAA4B,CAA5B,EAA+B,CAA/B,CAHJ;;AAMA,sBAAIsD,QAAJ,EAAc;AACVA,oBAAAA,QAAQ,CAACS,QAAD,CAAR;AACH;AACJ;;AAED,gBAAA,MAAI,CAAClC,QAAL,CAAc;AACVL,kBAAAA,kBAAkB,EAAE,EADV;AAEVC,kBAAAA,gBAAgB,EAAE;AAFR,iBAAd;AAIH,eA5BL;AA6BI,cAAA,QAAQ,EAAE,kBAAAO,KAAK;AAAA,uBACX,MAAI,CAACH,QAAL,CAAc;AAAEJ,kBAAAA,gBAAgB,EAAEO;AAApB,iBAAd,CADW;AAAA,eA7BnB;AAgCI,cAAA,IAAI,EAAE,QAhCV;AAiCI,cAAA,SAAS,MAjCb;AAkCI,cAAA,SAAS,EAAE9D,KAAK,CAACC,UAAN,CAAiBQ,WAlChC;AAmCI,cAAA,WAAW,EACP;AApCR,cAJJ,eA2CI,oBAAC,YAAD,qBACI,oBAAC,UAAD;AAAY,cAAA,IAAI,eAAE,oBAAC,UAAD,OAAlB;AAAkC,cAAA,QAAQ;AAA1C,cADJ,CA3CJ,CADJ;AAiDH;;AAED,8BACI,oBAAC,QAAD;AAAU,YAAA,GAAG,EAAEkF;AAAf,0BACI,oBAAC,eAAD,qBACI,oBAAC,UAAD;AACI,YAAA,IAAI,eAAE,oBAAC,WAAD,OADV;AAEI,YAAA,OAAO,EAAE,mBAAM;AACX,cAAA,MAAI,CAAChC,QAAL,CAAc;AAAEL,gBAAAA,kBAAkB,EAAEqC;AAAtB,eAAd;AACH;AAJL,YADJ,CADJ,eASI;AACI,YAAA,KAAK,EAAE;AACH9E,cAAAA,KAAK,EAAE,+CADJ;AAEHmF,cAAAA,WAAW,EAAE,CAFV;AAGHC,cAAAA,QAAQ,EAAE;AAHP;AADX,aAOKpE,IAAI,CAACC,KAAL,GAAa,CAPlB,MATJ,EAiBW,GAjBX,EAkBM0D,mBAAD,CAAkCL,IAAlC,CAAuC,MAAvC,EAA6CtD,IAA7C,CAlBL,eAmBI,oBAAC,YAAD,qBACI,oBAAC,UAAD;AACI,YAAA,IAAI,eAAE,oBAAC,UAAD,OADV;AAEI,YAAA,OAAO,EAAE,mBAAM;AACX,kBAAIuD,QAAJ,EAAc;AACVA,gBAAAA,QAAQ,8BACAtB,KAAD,CAA2BtB,KAA3B,CACC,CADD,EAECX,IAAI,CAACC,KAFN,CADC,sBAKAgC,KAAD,CAA2BtB,KAA3B,CACCX,IAAI,CAACC,KAAL,GAAa,CADd,CALC,GAAR;AASH;AACJ;AAdL,YADJ,CAnBJ,CADJ;AAwCH,SA9FD,CADH,gBAiGG,oBAAC,QAAD,qBACI;AAAM,UAAA,SAAS,EAAE9B,KAAK,CAACC,UAAN,CAAiBW;AAAlC,8BADJ,CAlGR,CA3CJ,eAoJI,8CACI,oBAAC,kBAAD,QAAqB2E,WAArB,CADJ,CApJJ,CADJ;AA0JH;;AAED,UAAMW,QAAQ,GAAGxE,KAAK,CAACC,OAAN,CAAcmC,KAAd,KAAwBA,KAAK,CAACxB,MAA/C;;AACA,UAAI,CAAC4D,QAAL,EAAe;AACX,eAAO,IAAP;AACH;;AAED,0BACI,oBAAC,KAAD;AAAO,QAAA,QAAQ,EAAEb;AAAjB,SACMvB,KAAD,CAA2BlC,GAA3B,CAA+B,UAACC,IAAD,EAAOC,KAAP;AAAA,4BAC5B,oBAAC,IAAD;AACI,UAAA,KAAK,EAAEpD,aAAa,CAACmD,IAAD,EAAO,MAAI,CAAC+B,KAAZ,CADxB;AAEI,UAAA,GAAG,YAAKnF,cAAc,CAACoD,IAAD,EAAO,MAAI,CAAC+B,KAAZ,CAAnB,cAAyC9B,KAAzC,CAFP;AAGI,UAAA,YAAY,eAAE,oBAAC,iBAAD,OAHlB;AAII,UAAA,QAAQ,EAAE,oBAAM;AACZ,gBAAI,CAACsD,QAAL,EAAe;AACX;AACH;;AACDA,YAAAA,QAAQ,8BACAtB,KAAD,CAA2BtB,KAA3B,CAAiC,CAAjC,EAAoCV,KAApC,CADC,sBAEAgC,KAAD,CAA2BtB,KAA3B,CAAiCV,KAAK,GAAG,CAAzC,CAFC,GAAR;AAIH;AAZL,UAD4B;AAAA,OAA/B,CADL,CADJ;AAoBH;AAhYL;AAAA;AAAA,WAkYI,kBAAyB;AAAA;;AACrB,UACI8B,KADJ,GAiBI,IAjBJ,CACIA,KADJ;AAAA,yBAiBI,IAjBJ,CAEIA,KAFJ;AAAA,UAMQC,MANR,gBAMQA,MANR;AAAA,UAOQC,KAPR,gBAOQA,KAPR;AAAA,UAQQsB,SARR,gBAQQA,QARR;AAAA,UAWQe,OAXR,gBAWQA,OAXR;AAAA,+CAYQC,UAZR;AAAA,UAYQA,UAZR,sCAYqB;AAAEC,QAAAA,OAAO,EAAE,IAAX;AAAiBC,QAAAA,OAAO,EAAE;AAA1B,OAZrB;AAAA,UAaQhB,wBAbR,gBAaQA,wBAbR;AAAA,UAcQC,WAdR,gBAcQA,WAdR;AAAA,UAeWgB,eAfX;;AAmBA,UAAMtC,OAAO,GAAG,KAAKuC,UAAL,EAAhB;AAEA,0BACI;AAAK,QAAA,SAAS,EAAExH,UAAU,CAACG,iBAAD,EAAoByE,KAAK,CAACsB,SAA1B;AAA1B,sBACI,oBAAC,SAAD;AACI,QAAA,mBAAmB,EAAE,IADzB,CAEI;AAFJ;AAGI,QAAA,SAAS,EAAE/F,iBAHf;AAII,QAAA,YAAY,EAAE,sBAAA0C,IAAI;AAAA,iBAAIA,IAAI,IAAInD,aAAa,CAACmD,IAAD,EAAO+B,KAAP,CAAzB;AAAA,SAJtB;AAKI,QAAA,GAAG,EAAE,KAAK6C,SALd;AAMI,QAAA,QAAQ,EAAE,kBAAA/C,SAAS,EAAI;AACnB,cAAI,CAAC,MAAI,CAACgD,0BAAL,CAAgCjD,GAArC,EAA0C;AACtC,YAAA,MAAI,CAACiD,0BAAL,GAAkC;AAC9BjD,cAAAA,GAAG,EAAE,IADyB;AAE9BC,cAAAA,SAAS,EAATA;AAF8B,aAAlC;;AAIA,YAAA,MAAI,CAAC+C,SAAL,CAAeE,OAAf,CAAuBC,cAAvB;;AACA,YAAA,MAAI,CAAClB,wBAAL,CAA8B,CAA9B;;AACA;AACH;;AAED,cAAI,MAAI,CAACgB,0BAAL,CAAgCjD,GAApC,EAAyC;AACrC,YAAA,MAAI,CAACE,QAAL,CAAc;AAAER,cAAAA,UAAU,EAAE;AAAd,aAAd;;AACA,YAAA,MAAI,CAACuD,0BAAL,CAAgCjD,GAAhC,GAAsC,KAAtC;;AACA,gBAAI/B,KAAK,CAACC,OAAN,CAAcmC,KAAd,CAAJ,EAA0B;AACtBsB,cAAAA,SAAQ,IACJA,SAAQ,8BAAKtB,KAAL,IAAY,MAAI,CAAC4C,0BAAL,CAAgChD,SAA5C,GADZ;AAEH,aAHD,MAGO;AACH0B,cAAAA,SAAQ,IAAIA,SAAQ,CAAC,CAAC,MAAI,CAACsB,0BAAL,CAAgChD,SAAjC,CAAD,CAApB;AACH;AACJ;AACJ;AA3BL,SA8BK;AAAA,YAAGmD,aAAH,SAAGA,aAAH;AAAA,YAAkBC,QAAlB,SAAkBA,QAAlB;AAAA,YAA+BC,IAA/B;;AAAA,4BACG,8CACI,oBAAC,KAAD,EACQF,aAAa,iCACVN,eADU;AAEb;AACAH,UAAAA,UAAU,EAAVA,UAHa;AAKb;AACAb,UAAAA,WAAW,EAAED,wBAAwB,GAAG,IAAH,GAAUC,WANlC;AAObyB,UAAAA,WAAW,EAAE,IAPA;AAQbC,UAAAA,YAAY,EAAE,MAAI,CAACrD,KAAL,CAAWsD,OAAX,iBAAsB,oBAAC,OAAD,OARvB;AASb9B,UAAAA,QAAQ,EAAE,kBAAAQ,CAAC;AAAA,mBAAIA,CAAJ;AAAA,WATE;AAUbuB,UAAAA,MAAM,EAAE,gBAAAvB,CAAC;AAAA,mBAAIA,CAAJ;AAAA,WAVI;AAWbwB,UAAAA,OAAO,EAAE,iBAACxB,CAAD,EAAY;AACjB,gBAAMzC,UAAU,GAAGyC,CAAC,CAACG,MAAF,CAASjC,KAAT,IAAkB,EAArC,CADiB,CAGjB;;AACA,gBAAIX,UAAU,KAAK,MAAI,CAACkB,KAAL,CAAWlB,UAA9B,EAA0C;AACtC,cAAA,MAAI,CAACQ,QAAL,CAAc;AAAER,gBAAAA,UAAU,EAAVA;AAAF,eAAd,EAA8B,YAAM;AAChCgD,gBAAAA,OAAO,IAAIA,OAAO,CAAChD,UAAD,CAAlB;AACH,eAFD;AAGH;AACJ,WApBY;AAqBbkE,UAAAA,OAAO,EAAE,iBAAAzB,CAAC,EAAI;AACVkB,YAAAA,QAAQ;AACRP,YAAAA,eAAe,CAACc,OAAhB,IAA2Bd,eAAe,CAACc,OAAhB,CAAwBzB,CAAxB,CAA3B;AACH;AAxBY,WADrB,CADJ,EA6BK,MAAI,CAAC0B,aAAL,iCAAwBP,IAAxB;AAA8BlD,UAAAA,MAAM,EAANA,MAA9B;AAAsCI,UAAAA,OAAO,EAAPA;AAAtC,WA7BL,EA8BK,MAAI,CAACsD,uBAAL,EA9BL,CADH;AAAA,OA9BL,CADJ,CADJ;AAqEH;AA7dL;;AAAA;AAAA,EAAuCpJ,KAAK,CAACqJ,SAA7C;;gBAAatE,iB,kBAC8C;AACnDuE,EAAAA,SAAS,EAAE,IADwC;AAEnDhD,EAAAA,QAAQ,EAAE,MAFyC;AAGnDZ,EAAAA,MAAM,EAAE,IAH2C;AAInDI,EAAAA,OAAO,EAAE,EAJ0C;AAKnDD,EAAAA,eAAe,EAAE,KALkC;AAMnDsB,EAAAA,wBAAwB,EAAE,KANyB;;AAOnD;AACR;AACA;AACQP,EAAAA,UAVmD,sBAUxClD,IAVwC,EAU7B;AAClB,wBACI,oBAAC,UAAD;AAAY,MAAA,GAAG,EAAE;AAAjB,OACKnD,aAAa,CAACmD,IAAD,EAAQ,IAAD,CAAuC+B,KAA9C,CADlB,CADJ;AAKH,GAhBkD;;AAiBnD;AACR;AACA;AACQ4B,EAAAA,mBApBmD,+BAoB/B3D,IApB+B,EAoBpB;AAC3B,WAAOnD,aAAa,CAACmD,IAAD,EAAQ,IAAD,CAAuC+B,KAA9C,CAApB;AACH;AAtBkD,C","sourcesContent":["import React from \"react\";\nimport Downshift, { ControllerStateAndHelpers, PropGetters } from \"downshift\";\nimport MaterialSpinner from \"react-spinner-material\";\nimport { Input } from \"~/Input\";\nimport { Chips, Chip } from \"../Chips\";\nimport { getOptionValue, getOptionText, findInAliases } from \"./utils\";\nimport { List, ListItem, ListItemMeta } from \"~/List\";\nimport { IconButton } from \"~/Button\";\nimport classNames from \"classnames\";\nimport { Elevation } from \"~/Elevation\";\nimport { Typography } from \"~/Typography\";\nimport { autoCompleteStyle, suggestionList } from \"./styles\";\nimport { AutoCompleteBaseProps } from \"./types\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\n\nimport { ReactComponent as BaselineCloseIcon } from \"./icons/baseline-close-24px.svg\";\nimport { ReactComponent as PrevIcon } from \"./icons/navigate_before-24px.svg\";\nimport { ReactComponent as NextIcon } from \"./icons/navigate_next-24px.svg\";\nimport { ReactComponent as PrevAllIcon } from \"./icons/skip_previous-24px.svg\";\nimport { ReactComponent as NextAllIcon } from \"./icons/skip_next-24px.svg\";\nimport { ReactComponent as DeleteIcon } from \"./icons/baseline-close-24px.svg\";\nimport { ReactComponent as ReorderIcon } from \"./icons/reorder_black_24dp.svg\";\n\nimport { css } from \"emotion\";\nimport { ListItemGraphic } from \"~/List\";\nimport { AutoCompleteProps } from \"~/AutoComplete/AutoComplete\";\nconst style = {\n    pagination: {\n        bar: css({\n            display: \"flex\",\n            justifyContent: \"space-between\",\n            alignItems: \"center\",\n            borderBottom: \"2px solid #fa5723\",\n            padding: \"6px 0\"\n        }),\n        pages: css({\n            display: \"flex\",\n            justifyContent: \"space-between\",\n            alignItems: \"center\"\n        }),\n        searchInput: css({\n            height: \"42px !important\"\n        }),\n        list: css({\n            padding: \"0 0 5px 0 !important\",\n            \".mdc-list-item\": {\n                borderBottom: \"1px solid var(--mdc-theme-on-background)\"\n            }\n        }),\n        secondaryText: css({\n            color: \"var(--mdc-theme-text-secondary-on-background)\"\n        })\n    }\n};\nconst listStyles = css({\n    \"&.multi-autocomplete__options-list\": {\n        listStyle: \"none\",\n        paddingLeft: 0,\n        \"& li\": {\n            margin: 0\n        }\n    }\n});\n\ninterface SelectionItem {\n    name: string;\n}\ntype MultiAutoCompletePropsValue = SelectionItem[];\n\nexport interface MultiAutoCompleteProps extends Omit<AutoCompleteBaseProps, \"value\"> {\n    /**\n     * Prevents adding the same item to the list twice.\n     */\n    unique: boolean;\n\n    /**\n     * Set if custom values (not from list of suggestions) are allowed.\n     */\n    allowFreeInput?: boolean;\n\n    /**\n     *  If true, will show a loading spinner on the right side of the input.\n     */\n    loading?: boolean;\n\n    /**\n     * Use data list instead of default Chips component. Useful when expecting a lot of data.\n     */\n    useMultipleSelectionList?: boolean;\n\n    /**\n     * Render list item when `useMultipleSelectionList` is used.\n     */\n    renderListItemLabel?: Function;\n\n    /* A component that renders supporting UI in case of no result found. */\n    noResultFound?: React.ReactNode;\n    /**\n     * Value is an array of strings. But can be undefined.\n     */\n    value?: MultiAutoCompletePropsValue;\n}\n\ntype State = {\n    inputValue: string;\n    multipleSelectionPage: number;\n    multipleSelectionSearch: string;\n    reorderFormVisible: string;\n    reorderFormValue: string;\n};\n\nfunction Spinner() {\n    return <MaterialSpinner size={24} spinnerColor={\"#fa5723\"} spinnerWidth={2} visible />;\n}\n\nconst DEFAULT_PER_PAGE = 10;\n\nfunction paginateMultipleSelection(\n    multipleSelection: MultiAutoCompletePropsValue,\n    limit: number,\n    page: number,\n    search: string\n) {\n    // Assign a real index, so that later when we press delete, we know what is the actual index we're deleting.\n    let data = Array.isArray(multipleSelection)\n        ? multipleSelection.map((item, index) => ({ ...item, index }))\n        : [];\n\n    if (typeof search === \"string\" && search) {\n        data = data.filter(item => {\n            return (\n                typeof item.name === \"string\" &&\n                item.name.toLowerCase().includes(search.toLowerCase())\n            );\n        });\n    }\n\n    const lastPage = Math.ceil(data.length / limit);\n    const totalCount = data.length;\n\n    page = page || lastPage;\n    data = data.slice((page - 1) * limit, page * limit);\n\n    let from = 0;\n    let to = 0;\n    if (data.length) {\n        from = (page - 1) * limit + 1;\n        to = from + (data.length - 1);\n    }\n\n    const meta = {\n        hasData: data.length > 0,\n        totalCount,\n        from,\n        to,\n        page: page,\n        lastPage,\n        limit,\n        hasPrevious: page > 1,\n        hasNext: page < lastPage\n    };\n\n    return { data, meta };\n}\n\ninterface RenderOptionsParams\n    extends Omit<ControllerStateAndHelpers<any>, \"getInputProps\" | \"openMenu\"> {\n    options: AutoCompleteProps[\"options\"];\n    unique: boolean;\n}\n\ninterface OptionsListProps {\n    getMenuProps: PropGetters<Record<string, any>>[\"getMenuProps\"];\n}\n\ninterface AssignedValueAfterClearing {\n    set: boolean;\n    selection: string | null;\n}\n\nconst OptionsList: React.FC<OptionsListProps> = ({ getMenuProps, children }) => {\n    return (\n        <Elevation z={1}>\n            <ul\n                className={classNames(\"multi-autocomplete__options-list\", listStyles)}\n                {...getMenuProps()}\n            >\n                {children}\n            </ul>\n        </Elevation>\n    );\n};\n\nexport class MultiAutoComplete extends React.Component<MultiAutoCompleteProps, State> {\n    static defaultProps: Partial<MultiAutoCompleteProps> = {\n        valueProp: \"id\",\n        textProp: \"name\",\n        unique: true,\n        options: [],\n        useSimpleValues: false,\n        useMultipleSelectionList: false,\n        /**\n         * We cast this as MultiAutoComplete because renderItem() is executed via .call() where this is MultiAutoComplete instance.\n         */\n        renderItem(item: any) {\n            return (\n                <Typography use={\"body2\"}>\n                    {getOptionText(item, (this as unknown as MultiAutoComplete).props)}\n                </Typography>\n            );\n        },\n        /**\n         * We cast this as MultiAutoComplete because renderListItemLabel() is executed via .call() where this is MultiAutoComplete instance.\n         */\n        renderListItemLabel(item: any) {\n            return getOptionText(item, (this as unknown as MultiAutoComplete).props);\n        }\n    };\n\n    public override state: State = {\n        inputValue: \"\",\n        multipleSelectionPage: 0,\n        multipleSelectionSearch: \"\",\n        reorderFormVisible: \"\",\n        reorderFormValue: \"\"\n    };\n\n    /**\n     * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.\n     */\n    private downshift = React.createRef<any>();\n\n    private assignedValueAfterClearing: AssignedValueAfterClearing = {\n        set: false,\n        selection: null\n    };\n\n    setMultipleSelectionPage = (multipleSelectionPage: number): void => {\n        this.setState({ multipleSelectionPage });\n    };\n\n    setMultipleSelectionSearch = (multipleSelectionSearch: string): void => {\n        this.setState({ multipleSelectionSearch });\n    };\n\n    getOptions() {\n        const { unique, value, allowFreeInput, useSimpleValues, options } = this.props;\n\n        const filtered = options.filter(item => {\n            // We need to filter received options.\n            // 1) If \"unique\" prop was passed, we don't want to show already picked options again.\n            if (unique) {\n                const values = value;\n                if (Array.isArray(values)) {\n                    if (\n                        values.find(\n                            value =>\n                                getOptionValue(value, this.props) ===\n                                getOptionValue(item, this.props)\n                        )\n                    ) {\n                        return false;\n                    }\n                }\n            }\n\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 free input is allowed, prepend typed value to the list.\n        if (allowFreeInput && this.state.inputValue) {\n            if (useSimpleValues) {\n                const existingValue = filtered.includes(this.state.inputValue);\n                if (!existingValue) {\n                    filtered.unshift(this.state.inputValue);\n                }\n            } else {\n                const existingValue = filtered.find(\n                    item => this.state.inputValue === getOptionText(item, this.props)\n                );\n                if (!existingValue) {\n                    filtered.unshift({ [this.props.textProp]: this.state.inputValue });\n                }\n            }\n        }\n\n        return filtered;\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(params: RenderOptionsParams) {\n        const { options, isOpen, highlightedIndex, getMenuProps, getItemProps } = params;\n        if (!isOpen) {\n            return null;\n        }\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 getMenuProps={getMenuProps}>\n                    <li>\n                        <Typography use={\"body2\"}>Start typing to find entry</Typography>\n                    </li>\n                </OptionsList>\n            );\n        }\n\n        if (!options.length) {\n            return (\n                <Elevation z={1}>\n                    <ul\n                        className={classNames(\"multi-autocomplete__options-list\", listStyles)}\n                        {...getMenuProps()}\n                    >\n                        <li>\n                            <Typography use={\"body2\"}>No results.</Typography>\n                            {this.props.noResultFound}\n                        </li>\n                    </ul>\n                </Elevation>\n            );\n        }\n\n        const { renderItem } = this.props;\n        return (\n            <Elevation z={1}>\n                <ul\n                    className={classNames(\"multi-autocomplete__options-list\", listStyles)}\n                    {...getMenuProps()}\n                >\n                    {options.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                        // Render the item.\n                        return (\n                            <li\n                                key={itemValue + index}\n                                {...getItemProps({\n                                    index,\n                                    item,\n                                    className: classNames(itemClassNames)\n                                })}\n                            >\n                                {renderItem.call(this, item, index)}\n                            </li>\n                        );\n                    })}\n                </ul>\n            </Elevation>\n        );\n    }\n\n    /**\n     * Once added, items can also be removed by clicking on the ✕ icon. This is the method that is responsible for\n     * rendering selected items (we are using already existing \"Chips\" component).\n     */\n    public renderMultipleSelection() {\n        const {\n            value,\n            onChange,\n            disabled,\n            useMultipleSelectionList,\n            description,\n            renderListItemLabel\n        } = this.props;\n\n        if (useMultipleSelectionList) {\n            const { data, meta } = paginateMultipleSelection(\n                value as SelectionItem[],\n                DEFAULT_PER_PAGE,\n                this.state.multipleSelectionPage,\n                this.state.multipleSelectionSearch\n            );\n\n            return (\n                <>\n                    <div className={style.pagination.bar}>\n                        <div>\n                            <Input\n                                className={style.pagination.searchInput}\n                                placeholder={\"Search selected...\"}\n                                value={this.state.multipleSelectionSearch}\n                                onChange={value => {\n                                    this.setMultipleSelectionSearch(value);\n                                    this.setMultipleSelectionPage(value ? 1 : 0);\n                                }}\n                            />\n                        </div>\n\n                        <div className={style.pagination.pages}>\n                            <div className={meta.hasData ? \"\" : style.pagination.secondaryText}>\n                                {meta.from} - {meta.to} of {meta.totalCount}\n                            </div>\n                            <div>\n                                <IconButton\n                                    icon={<PrevAllIcon />}\n                                    disabled={!meta.hasData || meta.page === 1}\n                                    onClick={() => this.setMultipleSelectionPage(1)}\n                                />\n                                <IconButton\n                                    icon={<PrevIcon />}\n                                    disabled={!meta.hasData || !meta.hasPrevious}\n                                    onClick={() => this.setMultipleSelectionPage(meta.page - 1)}\n                                />\n                                <IconButton\n                                    icon={<NextIcon />}\n                                    disabled={!meta.hasData || !meta.hasNext}\n                                    onClick={() => this.setMultipleSelectionPage(meta.page + 1)}\n                                />\n                                <IconButton\n                                    icon={<NextAllIcon />}\n                                    disabled={!meta.hasData || meta.page === meta.lastPage}\n                                    onClick={() => this.setMultipleSelectionPage(meta.lastPage)}\n                                />\n                            </div>\n                        </div>\n                    </div>\n\n                    <List className={style.pagination.list}>\n                        {meta.hasData ? (\n                            data.map((item, index) => {\n                                const key = `${getOptionValue(item, this.props)}-${index}`;\n                                if (this.state.reorderFormVisible === key) {\n                                    return (\n                                        <ListItem key={key}>\n                                            <ListItemGraphic>\n                                                <IconButton disabled icon={<ReorderIcon />} />\n                                            </ListItemGraphic>\n                                            <Input\n                                                value={this.state.reorderFormValue}\n                                                onKeyDown={(e: any) => {\n                                                    const key = e.key;\n                                                    if (key !== \"Escape\" && key !== \"Enter\") {\n                                                        return;\n                                                    }\n\n                                                    if (key === \"Enter\") {\n                                                        // Reorder the item.\n                                                        const newValue = [\n                                                            ...(value as SelectionItem[])\n                                                        ];\n                                                        newValue.splice(\n                                                            e.target.value - 1,\n                                                            0,\n                                                            newValue.splice(item.index, 1)[0]\n                                                        );\n\n                                                        if (onChange) {\n                                                            onChange(newValue);\n                                                        }\n                                                    }\n\n                                                    this.setState({\n                                                        reorderFormVisible: \"\",\n                                                        reorderFormValue: \"\"\n                                                    });\n                                                }}\n                                                onChange={value =>\n                                                    this.setState({ reorderFormValue: value })\n                                                }\n                                                type={\"number\"}\n                                                autoFocus\n                                                className={style.pagination.searchInput}\n                                                placeholder={\n                                                    \"Type a new order number and press Enter, or press Esc to cancel.\"\n                                                }\n                                            />\n                                            <ListItemMeta>\n                                                <IconButton icon={<DeleteIcon />} disabled />\n                                            </ListItemMeta>\n                                        </ListItem>\n                                    );\n                                }\n\n                                return (\n                                    <ListItem key={key}>\n                                        <ListItemGraphic>\n                                            <IconButton\n                                                icon={<ReorderIcon />}\n                                                onClick={() => {\n                                                    this.setState({ reorderFormVisible: key });\n                                                }}\n                                            />\n                                        </ListItemGraphic>\n                                        <div\n                                            style={{\n                                                color: \"var(--mdc-theme-text-secondary-on-background)\",\n                                                marginRight: 8,\n                                                minWidth: 32\n                                            }}\n                                        >\n                                            {item.index + 1}.\n                                        </div>{\" \"}\n                                        {(renderListItemLabel as Function).call(this, item)}\n                                        <ListItemMeta>\n                                            <IconButton\n                                                icon={<DeleteIcon />}\n                                                onClick={() => {\n                                                    if (onChange) {\n                                                        onChange([\n                                                            ...(value as SelectionItem[]).slice(\n                                                                0,\n                                                                item.index\n                                                            ),\n                                                            ...(value as SelectionItem[]).slice(\n                                                                item.index + 1\n                                                            )\n                                                        ]);\n                                                    }\n                                                }}\n                                            />\n                                        </ListItemMeta>\n                                    </ListItem>\n                                );\n                            })\n                        ) : (\n                            <ListItem>\n                                <span className={style.pagination.secondaryText}>\n                                    Nothing to show.\n                                </span>\n                            </ListItem>\n                        )}\n                    </List>\n                    <div>\n                        <FormElementMessage>{description}</FormElementMessage>\n                    </div>\n                </>\n            );\n        }\n\n        const hasItems = Array.isArray(value) && value.length;\n        if (!hasItems) {\n            return null;\n        }\n\n        return (\n            <Chips disabled={disabled}>\n                {(value as SelectionItem[]).map((item, index) => (\n                    <Chip\n                        label={getOptionText(item, this.props)}\n                        key={`${getOptionValue(item, this.props)}-${index}`}\n                        trailingIcon={<BaselineCloseIcon />}\n                        onRemove={() => {\n                            if (!onChange) {\n                                return;\n                            }\n                            onChange([\n                                ...(value as SelectionItem[]).slice(0, index),\n                                ...(value as SelectionItem[]).slice(index + 1)\n                            ]);\n                        }}\n                    />\n                ))}\n            </Chips>\n        );\n    }\n\n    public override render() {\n        const {\n            props,\n            props: {\n                // options: rawOptions,\n                // allowFreeInput,\n                // useSimpleValues,\n                unique,\n                value,\n                onChange,\n                // valueProp,\n                // textProp,\n                onInput,\n                validation = { isValid: null, message: null },\n                useMultipleSelectionList,\n                description,\n                ...otherInputProps\n            }\n        } = this;\n\n        const options = this.getOptions();\n\n        return (\n            <div className={classNames(autoCompleteStyle, props.className)}>\n                <Downshift\n                    defaultSelectedItem={null}\n                    // @ts-ignore there is no className on Downshift\n                    className={autoCompleteStyle}\n                    itemToString={item => item && getOptionText(item, props)}\n                    ref={this.downshift}\n                    onChange={selection => {\n                        if (!this.assignedValueAfterClearing.set) {\n                            this.assignedValueAfterClearing = {\n                                set: true,\n                                selection\n                            };\n                            this.downshift.current.clearSelection();\n                            this.setMultipleSelectionPage(0);\n                            return;\n                        }\n\n                        if (this.assignedValueAfterClearing.set) {\n                            this.setState({ inputValue: \"\" });\n                            this.assignedValueAfterClearing.set = false;\n                            if (Array.isArray(value)) {\n                                onChange &&\n                                    onChange([...value, this.assignedValueAfterClearing.selection]);\n                            } else {\n                                onChange && onChange([this.assignedValueAfterClearing.selection]);\n                            }\n                        }\n                    }}\n                >\n                    {/* \"getInputProps\" and \"openMenu\" are not needed in renderOptions method. */}\n                    {({ getInputProps, openMenu, ...rest }) => (\n                        <div>\n                            <Input\n                                {...getInputProps({\n                                    ...otherInputProps,\n                                    // @ts-ignore\n                                    validation,\n\n                                    // Only pass description if not using \"useMultipleSelectionList\".\n                                    description: useMultipleSelectionList ? null : description,\n                                    rawOnChange: true,\n                                    trailingIcon: this.props.loading && <Spinner />,\n                                    onChange: e => e,\n                                    onBlur: e => e,\n                                    onKeyUp: (e: any) => {\n                                        const inputValue = e.target.value || \"\";\n\n                                        // Set current input value into state and trigger onInput if different.\n                                        if (inputValue !== this.state.inputValue) {\n                                            this.setState({ inputValue }, () => {\n                                                onInput && onInput(inputValue);\n                                            });\n                                        }\n                                    },\n                                    onFocus: e => {\n                                        openMenu();\n                                        otherInputProps.onFocus && otherInputProps.onFocus(e);\n                                    }\n                                })}\n                            />\n                            {this.renderOptions({ ...rest, unique, options })}\n                            {this.renderMultipleSelection()}\n                        </div>\n                    )}\n                </Downshift>\n            </div>\n        );\n    }\n}\n"]}

package/AutoComplete/MultiAutoComplete.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MultiAutoComplete.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","withKnobs","boolean","readme","Form","MultiAutoComplete","story","module","addDecorator","options","name","id","add","disabled","country","Bind","JSON","stringify","map","item","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SACIC,KADJ,EAEIC,WAFJ,EAGIC,gBAHJ,EAIIC,YAJJ,EAKIC,mBALJ,QAMO,+BANP;AAOA,SAASC,SAAT,EAAoBC,OAApB,QAAmC,wBAAnC;AACA,OAAOC,MAAP;AAEA,SAASC,IAAT,QAAqB,cAArB;AACA,SAASC,iBAAT;AAEA,IAAMC,KAAK,GAAGX,SAAS,CAAC,yBAAD,EAA4BY,MAA5B,CAAvB;AACAD,KAAK,CAACE,YAAN,CAAmBP,SAAnB;AAEA,IAAMQ,OAAO,GAAG,CACZ;AAAEC,EAAAA,IAAI,EAAE,QAAR;AAAkBC,EAAAA,EAAE,EAAE;AAAtB,CADY,EAEZ;AAAED,EAAAA,IAAI,EAAE,SAAR;AAAmBC,EAAAA,EAAE,EAAE;AAAvB,CAFY,EAGZ;AAAED,EAAAA,IAAI,EAAE,OAAR;AAAiBC,EAAAA,EAAE,EAAE;AAArB,CAHY,EAIZ;AAAED,EAAAA,IAAI,EAAE,OAAR;AAAiBC,EAAAA,EAAE,EAAE;AAArB,CAJY,EAKZ;AAAED,EAAAA,IAAI,EAAE,IAAR;AAAcC,EAAAA,EAAE,EAAE;AAAlB,CALY,EAMZ;AAAED,EAAAA,IAAI,EAAE,IAAR;AAAcC,EAAAA,EAAE,EAAE;AAAlB,CANY,EAOZ;AAAED,EAAAA,IAAI,EAAE,QAAR;AAAkBC,EAAAA,EAAE,EAAE;AAAtB,CAPY,EAQZ;AAAED,EAAAA,IAAI,EAAE,SAAR;AAAmBC,EAAAA,EAAE,EAAE;AAAvB,CARY,EASZ;AAAED,EAAAA,IAAI,EAAE,gBAAR;AAA0BC,EAAAA,EAAE,EAAE;AAA9B,CATY,CAAhB;AAYAL,KAAK,CAACM,GAAN,CACI,mBADJ,EAEI,YAAM;AACF,MAAMC,QAAQ,GAAGX,OAAO,CAAC,UAAD,EAAa,KAAb,CAAxB;AAEA,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcC,MAAd,CADJ,eAEI,oBAAC,YAAD,qBACI,oBAAC,mBAAD;AAAqB,IAAA,KAAK,EAAE;AAA5B,kBACI,oBAAC,IAAD;AACI,IAAA,IAAI,EAAE;AACFW,MAAAA,OAAO,EAAE,CACL;AAAEH,QAAAA,EAAE,EAAE,IAAN;AAAYD,QAAAA,IAAI,EAAE;AAAlB,OADK,EAEL;AAAEC,QAAAA,EAAE,EAAE,OAAN;AAAeD,QAAAA,IAAI,EAAE;AAArB,OAFK;AADP;AADV,KAQK;AAAA,QAAGK,IAAH,QAAGA,IAAH;AAAA,wBACG,oBAAC,IAAD;AAAM,MAAA,IAAI,EAAC;AAAX,oBACI,oBAAC,iBAAD;AACI,MAAA,OAAO,EAAEN,OADb;AAEI,MAAA,KAAK,EAAC,SAFV;AAGI,MAAA,QAAQ,EAAEI,QAHd;AAII,MAAA,WAAW,EAAC;AAJhB,MADJ,CADH;AAAA,GARL,CADJ,CADJ,eAsBI,oBAAC,gBAAD,qQAM+BG,IAAI,CAACC,SAAL,CAAeR,OAAf,CAN/B,6HAQgCI,QARhC,sQAtBJ,CAFJ,eA0CI,oBAAC,YAAD,qBACI,oBAAC,mBAAD;AAAqB,IAAA,KAAK,EAAE;AAA5B,kBACI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAE;AAAEC,MAAAA,OAAO,EAAE,CAAC,OAAD,EAAU,QAAV;AAAX;AAAZ,KACK;AAAA,QAAGC,IAAH,SAAGA,IAAH;AAAA,wBACG,oBAAC,IAAD;AAAM,MAAA,IAAI,EAAC;AAAX,oBACI,oBAAC,iBAAD;AACI,MAAA,eAAe,MADnB;AAEI,MAAA,OAAO,EAAEN,OAAO,CAACS,GAAR,CAAY,UAAAC,IAAI;AAAA,eAAIA,IAAI,CAACT,IAAT;AAAA,OAAhB,CAFb;AAGI,MAAA,KAAK,EAAC,SAHV;AAII,MAAA,QAAQ,EAAEG,QAJd;AAKI,MAAA,WAAW,EAAC;AALhB,MADJ,CADH;AAAA,GADL,CADJ,CADJ,eAgBI,oBAAC,gBAAD,8TAO+BG,IAAI,CAACC,SAAL,CAAeR,OAAf,CAP/B,6HASgCI,QAThC,sQAhBJ,CA1CJ,eA6EI,oBAAC,YAAD,qBACI,oBAAC,mBAAD;AAAqB,IAAA,KAAK,EAAE;AAA5B,kBACI,oBAAC,IAAD;AACI,IAAA,IAAI,EAAE;AACFC,MAAAA,OAAO,EAAE,CACL;AAAEH,QAAAA,EAAE,EAAE,gBAAN;AAAwBD,QAAAA,IAAI,EAAE;AAA9B,OADK,EAEL;AAAEC,QAAAA,EAAE,EAAE,SAAN;AAAiBD,QAAAA,IAAI,EAAE;AAAvB,OAFK,EAGL;AAAEC,QAAAA,EAAE,EAAE,QAAN;AAAgBD,QAAAA,IAAI,EAAE;AAAtB,OAHK;AADP;AADV,KASK;AAAA,QAAGK,IAAH,SAAGA,IAAH;AAAA,wBACG,oBAAC,IAAD;AAAM,MAAA,IAAI,EAAC;AAAX,oBACI,oBAAC,iBAAD;AACI,MAAA,cAAc,MADlB;AAEI,MAAA,OAAO,EAAEN,OAFb;AAGI,MAAA,KAAK,EAAC,SAHV;AAII,MAAA,QAAQ,EAAEI,QAJd;AAKI,MAAA,WAAW,EAAC;AALhB,MADJ,CADH;AAAA,GATL,CADJ,CADJ,eAwBI,oBAAC,gBAAD,+WAO2BG,IAAI,CAACC,SAAL,CAAeR,OAAf,CAP3B,wVAxBJ,CA7EJ,eAwHI,oBAAC,YAAD,qBACI,oBAAC,mBAAD;AAAqB,IAAA,KAAK,EAAE;AAA5B,kBACI,oBAAC,IAAD;AACI,IAAA,IAAI,EAAE;AACFK,MAAAA,OAAO,EAAE,CAAC,iBAAD,EAAoB,SAApB,EAA+B,QAA/B;AADP;AADV,KAKK;AAAA,QAAGC,IAAH,SAAGA,IAAH;AAAA,wBACG,oBAAC,IAAD;AAAM,MAAA,IAAI,EAAC;AAAX,oBACI,oBAAC,iBAAD;AACI,MAAA,eAAe,MADnB;AAEI,MAAA,cAAc,MAFlB;AAGI,MAAA,OAAO,EAAEN,OAAO,CAACS,GAAR,CAAY,UAAAC,IAAI;AAAA,eAAIA,IAAI,CAACT,IAAT;AAAA,OAAhB,CAHb;AAII,MAAA,KAAK,EAAC,SAJV;AAKI,MAAA,QAAQ,EAAEG,QALd;AAMI,MAAA,WAAW,EAAC;AANhB,MADJ,CADH;AAAA,GALL,CADJ,CADJ,eAqBI,oBAAC,gBAAD,w2BArBJ,CAxHJ,CADJ;AAuKH,CA5KL,EA6KI;AAAEO,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAAChB,iBAAD;AAAd;AAAR,CA7KJ","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 { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./MultiAutoCompleteReadme.md\";\n\nimport { Form } from \"@webiny/form\";\nimport { MultiAutoComplete } from \"./MultiAutoComplete\";\n\nconst story = storiesOf(\"Components/AutoComplete\", module);\nstory.addDecorator(withKnobs);\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    \"MultiAutoComplete\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Values as objects\"}>\n                        <Form\n                            data={{\n                                country: [\n                                    { id: \"uk\", name: \"UK\" },\n                                    { id: \"italy\", name: \"Italy\" }\n                                ]\n                            }}\n                        >\n                            {({ Bind }) => (\n                                <Bind name=\"country\">\n                                    <MultiAutoComplete\n                                        options={options}\n                                        label=\"Country\"\n                                        disabled={disabled}\n                                        description=\"Choose one or more countries.\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <Form>\n                            {({ Bind }) => (\n                                 <Bind name=\"country\">\n                                    <MultiAutoComplete\n                                        options={${JSON.stringify(options)}}\n                                        label=\"Country\"\n                                        disabled={${disabled}}\n                                        description=\"Choose one or more countries.\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n\n                <StorySandbox>\n                    <StorySandboxExample title={\"Values as strings\"}>\n                        <Form data={{ country: [\"Italy\", \"France\"] }}>\n                            {({ Bind }) => (\n                                <Bind name=\"country\">\n                                    <MultiAutoComplete\n                                        useSimpleValues\n                                        options={options.map(item => item.name)}\n                                        label=\"Country\"\n                                        disabled={disabled}\n                                        description=\"Choose one or more countries.\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <Form>\n                            {({ Bind }) => (\n                                 <Bind name=\"country\">\n                                    <MultiAutoComplete\n                                        useSimpleValues\n                                        options={${JSON.stringify(options)}}\n                                        label=\"Country\"\n                                        disabled={${disabled}}\n                                        description=\"Choose one or more countries.\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n\n                <StorySandbox>\n                    <StorySandboxExample title={\"Allow free input\"}>\n                        <Form\n                            data={{\n                                country: [\n                                    { id: \"anotherCountry\", name: \"Another Country\" },\n                                    { id: \"nowhere\", name: \"Nowhere\" },\n                                    { id: \"france\", name: \"France\" }\n                                ]\n                            }}\n                        >\n                            {({ Bind }) => (\n                                <Bind name=\"country\">\n                                    <MultiAutoComplete\n                                        allowFreeInput\n                                        options={options}\n                                        label=\"Country\"\n                                        disabled={disabled}\n                                        description=\"Choose your country\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Form data={{ country: { id: \"anotherCountry\", name: \"Another Country\" } }}>\n                        {({ Bind }) => (\n                            <Bind name=\"country\">\n                                <MultiAutoComplete\n                                    useSimpleValues\n                                    options={${JSON.stringify(options)}}\n                                    label=\"Country\"\n                                    disabled={disabled}\n                                    description=\"Choose your country\"\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n\n                <StorySandbox>\n                    <StorySandboxExample title={\"Allow free input (values as strings)\"}>\n                        <Form\n                            data={{\n                                country: [\"Another Country\", \"Nowhere\", \"France\"]\n                            }}\n                        >\n                            {({ Bind }) => (\n                                <Bind name=\"country\">\n                                    <MultiAutoComplete\n                                        useSimpleValues\n                                        allowFreeInput\n                                        options={options.map(item => item.name)}\n                                        label=\"Country\"\n                                        disabled={disabled}\n                                        description=\"Choose your country\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                  <Form\n                        data={{\n                            country: [\"Another Country\", \"Nowhere\", \"France\"]\n                        }}\n                    >\n                        {({ Bind }) => (\n                            <Bind name=\"country\">\n                                <MultiAutoComplete\n                                    useSimpleValues\n                                    allowFreeInput\n                                    options={options.map(item => item.name)}\n                                    label=\"Country\"\n                                    disabled={disabled}\n                                    description=\"Choose your country\"\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [MultiAutoComplete] } }\n);\n"]}

package/AutoComplete/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA;AACA","sourcesContent":["export * from \"./AutoComplete\";\nexport * from \"./MultiAutoComplete\";\n"]}

package/AutoComplete/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["styles.ts"],"names":["css","autoCompleteStyle","position","width","left","top","zIndex","maxHeight","overflowY","backgroundColor","ul","listStyle","padding","li","span","color","suggestionList","fontWeight","transition"],"mappings":"AAAA,SAASA,GAAT,QAAoB,SAApB;AAEA,OAAO,IAAMC,iBAAiB,gBAAGD,GAAG,CAAC;AACjCE,EAAAA,QAAQ,EAAE,UADuB;AAEjC,wBAAsB;AAClBA,IAAAA,QAAQ,EAAE,UADQ;AAElBC,IAAAA,KAAK,EAAE,kBAFW;AAGlBC,IAAAA,IAAI,EAAE,CAHY;AAIlBC,IAAAA,GAAG,EAAE,EAJa;AAKlBC,IAAAA,MAAM,EAAE,EALU;AAMlBC,IAAAA,SAAS,EAAE,GANO;AAOlBC,IAAAA,SAAS,EAAE,QAPO;AAQlBC,IAAAA,eAAe,EAAE;AARC,GAFW;AAYjCC,EAAAA,EAAE,EAAE;AACAC,IAAAA,SAAS,EAAE,MADX;AAEAR,IAAAA,KAAK,EAAE,MAFP;AAGAS,IAAAA,OAAO,EAAE,CAHT;AAIAC,IAAAA,EAAE,EAAE;AACAD,MAAAA,OAAO,EAAE,EADT;AAEAE,MAAAA,IAAI,EAAE;AACFC,QAAAA,KAAK,EAAE;AADL;AAFN;AAJJ;AAZ6B,CAAD,6BAA7B;AAyBP,OAAO,IAAMC,cAAc,gBAAGhB,GAAG,CAAC;AAC9BiB,EAAAA,UAAU,EAAE,QADkB;AAE9BR,EAAAA,eAAe,EAAE,0BAFa;AAG9BS,EAAAA,UAAU,EAAE,uBAHkB;AAI9BH,EAAAA,KAAK,EAAE,6CAJuB;AAK9B,gBAAc;AACVE,IAAAA,UAAU,EAAE;AADF,GALgB;AAQ9B,mBAAiB;AACbR,IAAAA,eAAe,EAAE;AADJ;AARa,CAAD,0BAA1B","sourcesContent":["import { css } from \"emotion\";\n\nexport const autoCompleteStyle = css({\n    position: \"relative\",\n    \".mdc-elevation--z1\": {\n        position: \"absolute\",\n        width: \"calc(100% - 2px)\",\n        left: 1,\n        top: 56,\n        zIndex: 10,\n        maxHeight: 200,\n        overflowY: \"scroll\",\n        backgroundColor: \"var(--mdc-theme-surface)\"\n    },\n    ul: {\n        listStyle: \"none\",\n        width: \"100%\",\n        padding: 0,\n        li: {\n            padding: 10,\n            span: {\n                color: \"var(--mdc-theme-on-surface)\"\n            }\n        }\n    }\n});\n\nexport const suggestionList = css({\n    fontWeight: \"normal\",\n    backgroundColor: \"var(--mdc-theme-surface)\",\n    transition: \"background-color 0.2s\",\n    color: \"var(--mdc-theme-text-primary-on-background)\",\n    \"&.selected\": {\n        fontWeight: \"bold\"\n    },\n    \"&.highlighted\": {\n        backgroundColor: \"var(--mdc-theme-on-background)\"\n    }\n});\n"]}

package/AutoComplete/types.d.ts

@@ -1,5 +1,6 @@
+import React from "react";
 import { FormComponentProps } from "../types";
-export declare type AutoCompleteBaseProps = FormComponentProps & {
+export interface AutoCompleteBaseProps extends FormComponentProps {
     /**
      * Component label.
      */
@@ -19,7 +20,7 @@ export declare type AutoCompleteBaseProps = FormComponentProps & {
     /**
      * Description beneath the autoComplete.
      */
-    description?: string;
+    description?: React.ReactNode;
     /**
      * Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label.
      */
@@ -59,4 +60,4 @@ export declare type AutoCompleteBaseProps = FormComponentProps & {
      * Renders a single suggestion item.
      */
     renderItem: Function;
-};
+}

package/AutoComplete/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/AutoComplete/utils.d.ts

@@ -9,7 +9,7 @@ interface Props {
     valueProp?: string;
     textProp?: string;
 }
-export declare const getOptionValue: (option: Option | string, props: Props) => string | undefined;
-export declare const getOptionText: (option: Option | string, props: Props) => string | undefined;
-export declare const findInAliases: (option: Option, search?: string) => boolean;
+export declare const getOptionValue: (option: Option | string, props: Props) => string;
+export declare const getOptionText: (option: Option | string, props: Props) => string;
+export declare const findInAliases: (option: Option, search?: string | undefined) => boolean;
 export {};

package/AutoComplete/utils.js

@@ -14,6 +14,6 @@ export var getOptionText = function getOptionText(option, props) {
 };
 export var findInAliases = function findInAliases(option, search) {
   return (option.aliases || []).some(function (alias) {
-    return alias.toLowerCase().includes(search.toLowerCase());
+    return alias.toLowerCase().includes((search || "").toLowerCase());
   });
 };