@webiny/ui 5.23.1 → 5.25.0-beta.0

package/Accordion/Accordion.d.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
+import React from "react";
 import { ListItem } from "../List";
 import { AccordionItem } from "./AccordionItem";
-export declare type AccordionProps = {
+export interface AccordionProps {
     /**
      * Element displayed when accordion is expanded.
      */
@@ -14,6 +14,6 @@ export declare type AccordionProps = {
      * Append a class name
      */
     className?: string;
-};
-declare const Accordion: (props: AccordionProps) => JSX.Element;
+}
+declare const Accordion: React.FC<AccordionProps>;
 export { Accordion };

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

@@ -61,6 +61,10 @@ var defaultStyle = {
   pointerEvents: "none",
   overflow: "hidden"
 };
+
+/**
+ * We are casting pointerEvents as any because csstype does not have PointerEvents exported. Or at least, that is the error.
+ */
 var transitionStyles = {
   entering: {
     opacity: 0,
@@ -94,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,46 +1,30 @@
-import * as React from "react";
-import { ControllerStateAndHelpers } from "downshift";
+import React from "react";
 import { AutoCompleteBaseProps } from "./types";
 export declare enum Placement {
     top = "top",
     bottom = "bottom"
 }
-export declare type Props = AutoCompleteBaseProps & {
+export interface AutoCompleteProps extends Omit<AutoCompleteBaseProps, "onChange"> {
     placement?: Placement;
-    onChange?: (value: any, selection: any) => void;
+    onChange?: (value: any, selection?: any) => void;
     loading?: boolean;
-    noResultFound?: Function;
-};
-declare type State = {
+    noResultFound?: React.ReactNode;
+}
+interface State {
     inputValue: string;
-};
-interface RenderOptionsParams extends Omit<ControllerStateAndHelpers<any>, "getInputProps" | "openMenu"> {
-    options: Props["options"];
-    placement: Props["placement"];
 }
-declare class AutoComplete extends React.Component<Props, State> {
-    static defaultProps: {
-        valueProp: string;
-        textProp: string;
-        options: any[];
-        placement: Placement;
-        /**
-         * We cast this as AutoComplete because renderItem() is executed via .call() where AutoComplete instance is assigned as this.
-         */
-        renderItem(item: any): JSX.Element;
-    };
-    state: {
-        inputValue: string;
-    };
+declare class AutoComplete extends React.Component<AutoCompleteProps, State> {
+    static defaultProps: Partial<AutoCompleteProps>;
+    state: 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

@@ -7,9 +7,9 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _isEqual from "lodash/isEqual";
-var _excluded = ["className", "options", "onChange", "value", "valueProp", "textProp", "onInput", "validation", "placement"],
+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,
@@ -204,12 +204,11 @@ var AutoComplete = /*#__PURE__*/function (_React$Component) {
           options = _this$props2.options,
           _onChange = _this$props2.onChange,
           value = _this$props2.value,
-          valueProp = _this$props2.valueProp,
-          textProp = _this$props2.textProp,
           onInput = _this$props2.onInput,
           _this$props2$validati = _this$props2.validation,
           validation = _this$props2$validati === void 0 ? {
-        isValid: null
+        isValid: null,
+        message: null
       } : _this$props2$validati,
           placement = _this$props2.placement,
           otherInputProps = _objectWithoutProperties(_this$props2, _excluded); // Downshift related props.
@@ -265,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,8 +1,10 @@
-import * as React from "react";
-import { ControllerStateAndHelpers } from "downshift";
+import React from "react";
 import { AutoCompleteBaseProps } from "./types";
-import { Props } from "./AutoComplete";
-export declare type MultiAutoCompleteProps = AutoCompleteBaseProps & {
+interface SelectionItem {
+    name: string;
+}
+declare type MultiAutoCompletePropsValue = SelectionItem[];
+export interface MultiAutoCompleteProps extends Omit<AutoCompleteBaseProps, "value"> {
     /**
      * Prevents adding the same item to the list twice.
      */
@@ -23,8 +25,12 @@ export declare type MultiAutoCompleteProps = AutoCompleteBaseProps & {
      * Render list item when `useMultipleSelectionList` is used.
      */
     renderListItemLabel?: Function;
-    noResultFound?: Function;
-};
+    noResultFound?: React.ReactNode;
+    /**
+     * Value is an array of strings. But can be undefined.
+     */
+    value?: MultiAutoCompletePropsValue;
+}
 declare type State = {
     inputValue: string;
     multipleSelectionPage: number;
@@ -32,55 +38,26 @@ declare type State = {
     reorderFormVisible: string;
     reorderFormValue: string;
 };
-interface RenderOptionsParams extends Omit<ControllerStateAndHelpers<any>, "getInputProps" | "openMenu"> {
-    options: Props["options"];
-    unique: boolean;
-}
 export declare class MultiAutoComplete extends React.Component<MultiAutoCompleteProps, State> {
-    static defaultProps: {
-        valueProp: string;
-        textProp: string;
-        unique: boolean;
-        options: any[];
-        useSimpleValues: boolean;
-        useMultipleSelectionList: boolean;
-        /**
-         * We cast this as MultiAutoComplete because renderItem() is executed via .call() where this is MultiAutoComplete instance.
-         */
-        renderItem(item: any): JSX.Element;
-        /**
-         * We cast this as MultiAutoComplete because renderListItemLabel() is executed via .call() where this is MultiAutoComplete instance.
-         */
-        renderListItemLabel(item: any): any;
-    };
-    state: {
-        inputValue: string;
-        multipleSelectionPage: number;
-        multipleSelectionSearch: string;
-        reorderFormVisible: string;
-        reorderFormValue: string;
-    };
+    static defaultProps: Partial<MultiAutoCompleteProps>;
+    state: State;
     /**
      * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.
      */
-    downshift: React.RefObject<any>;
-    assignedValueAfterClearing: {
-        set: boolean;
-        selection: any;
-    };
-    setMultipleSelectionPage: (multipleSelectionPage: any) => void;
-    setMultipleSelectionSearch: (multipleSelectionSearch: any) => void;
+    private downshift;
+    private assignedValueAfterClearing;
+    setMultipleSelectionPage: (multipleSelectionPage: number) => void;
+    setMultipleSelectionSearch: (multipleSelectionSearch: string) => void;
     getOptions(): any[];
     /**
      * Renders options - based on user's input. It will try to match input text with available options.
      */
-    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

@@ -7,9 +7,9 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-var _excluded = ["options", "allowFreeInput", "useSimpleValues", "unique", "value", "onChange", "valueProp", "textProp", "onInput", "validation", "useMultipleSelectionList", "description"],
+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))));
           }
         });
       }));
@@ -466,18 +470,14 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
 
       var props = this.props,
           _this$props3 = this.props,
-          rawOptions = _this$props3.options,
-          allowFreeInput = _this$props3.allowFreeInput,
-          useSimpleValues = _this$props3.useSimpleValues,
           unique = _this$props3.unique,
           value = _this$props3.value,
           _onChange = _this$props3.onChange,
-          valueProp = _this$props3.valueProp,
-          textProp = _this$props3.textProp,
           onInput = _this$props3.onInput,
           _this$props3$validati = _this$props3.validation,
           validation = _this$props3$validati === void 0 ? {
-        isValid: null
+        isValid: null,
+        message: null
       } : _this$props3$validati,
           useMultipleSelectionList = _this$props3.useMultipleSelectionList,
           description = _this$props3.description,
@@ -487,7 +487,7 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement("div", {
         className: classNames(autoCompleteStyle, props.className)
       }, /*#__PURE__*/React.createElement(Downshift, {
-        defaultSelectedItem: null // @ts-ignore
+        defaultSelectedItem: null // @ts-ignore there is no className on Downshift
         ,
         className: autoCompleteStyle,
         itemToString: function itemToString(item) {