@webiny/ui 5.36.2 → 5.37.0-beta.1

package/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"names":["listStyle","css","Accordion","props","children","elevation","className","other","classNames"],"sources":["Accordion.tsx"],"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:\n        | React.ReactElement<typeof ListItem>[]\n        | React.ReactElement<typeof AccordionItem>\n        | 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        &.mdc-list--two-line .mdc-list-item {\n            height: 48px;\n            padding: 8px 20px;\n        }\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"],"mappings":";;;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAAoC;AAsBpC,IAAMA,SAAS,oBAAGC,YAAG,6GAQpB;AAED,IAAMC,SAAmC,GAAG,SAAtCA,SAAmC,CAAGC,KAAK,EAAI;EACjD,IAAQC,QAAQ,GAAyCD,KAAK,CAAtDC,QAAQ;IAAA,mBAAyCD,KAAK,CAA5CE,SAAS;IAATA,SAAS,iCAAG,CAAC;IAAEC,SAAS,GAAeH,KAAK,CAA7BG,SAAS;IAAKC,KAAK,0CAAKJ,KAAK;EAC9D,oBACI,6BAAC,oBAAS;IAAC,CAAC,EAAEE,SAAU;IAAC,SAAS,EAAE,IAAAG,mBAAU,EAAC,qBAAqB,EAAEF,SAAS;EAAE,gBAC7E,6BAAC,UAAI;IAAC,OAAO;IAAC,SAAS,EAAEN;EAAU,GAAKO,KAAK,GACxCH,QAAQ,CACN,CACC;AAEpB,CAAC;AAAC"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_List","_Elevation","_emotion","_classnames","_excluded","listStyle","css","Accordion","props","children","_props$elevation","elevation","className","other","_objectWithoutProperties2","default","createElement","Elevation","z","classNames","List","Object","assign","twoLine","exports"],"sources":["Accordion.tsx"],"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:\n        | React.ReactElement<typeof ListItem>[]\n        | React.ReactElement<typeof AccordionItem>\n        | 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        &.mdc-list--two-line .mdc-list-item {\n            height: 48px;\n            padding: 8px 20px;\n        }\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"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAEA,IAAAE,UAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAL,sBAAA,CAAAC,OAAA;AAAoC,IAAAK,SAAA;AAsBpC,IAAMC,SAAS,oBAAGC,YAAG,6GAQpB;AAED,IAAMC,SAAmC,GAAG,SAAtCA,SAAmCA,CAAGC,KAAK,EAAI;EACjD,IAAQC,QAAQ,GAAyCD,KAAK,CAAtDC,QAAQ;IAAAC,gBAAA,GAAyCF,KAAK,CAA5CG,SAAS;IAATA,SAAS,GAAAD,gBAAA,cAAG,CAAC,GAAAA,gBAAA;IAAEE,SAAS,GAAeJ,KAAK,CAA7BI,SAAS;IAAKC,KAAK,OAAAC,yBAAA,CAAAC,OAAA,EAAKP,KAAK,EAAAJ,SAAA;EAC9D,oBACIP,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACf,UAAA,CAAAgB,SAAS;IAACC,CAAC,EAAEP,SAAU;IAACC,SAAS,EAAE,IAAAO,mBAAU,EAAC,qBAAqB,EAAEP,SAAS;EAAE,gBAC7Ef,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAAChB,KAAA,CAAAoB,IAAI,EAAAC,MAAA,CAAAC,MAAA;IAACC,OAAO;IAACX,SAAS,EAAEP;EAAU,GAAKQ,KAAK,GACxCJ,QACC,CACC,CAAC;AAEpB,CAAC;AAACe,OAAA,CAAAjB,SAAA,GAAAA,SAAA"}

package/Accordion/Accordion.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Accordion","AccordionItem"],"sources":["Accordion.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./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"],"mappings":";;;AAAA;AACA;AACA;AAOA;AACA;AACA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,sBAAsB,EAAEC,MAAM,CAAC;AAEvDF,KAAK,CAACG,GAAG,CACL,OAAO,EACP,YAAM;EACF,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY;IAAC,KAAK,EAAE;EAAY,gBAC7B,6BAAC,0BAAmB,qBAChB,6BAAC,oBAAS,qBACN,6BAAC,4BAAa;IACV,IAAI,eAAE,6BAAC,iCAAY,OAAI;IACvB,KAAK,EAAC,YAAY;IAClB,WAAW,EAAC,sBAAsB;IAClC,IAAI;EAAA,gBAEJ,0CAAK,eAAa,CAAM,CACZ,eAChB,6BAAC,4BAAa;IACV,IAAI,eAAE,6BAAC,iCAAY,OAAI;IACvB,KAAK,EAAC,YAAY;IAClB,WAAW,EAAC;EAAsB,gBAElC,0CAAK,eAAa,CAAM,CACZ,eAChB,6BAAC,4BAAa;IACV,IAAI,eAAE,6BAAC,iCAAY,OAAI;IACvB,KAAK,EAAC,YAAY;IAClB,WAAW,EAAC;EAAsB,gBAElC,0CAAK,eAAa,CAAM,CACZ,CACR,CACM,eACtB,6BAAC,uBAAgB,qBACb,uDACI,6BAAC,oBAAS,qBACN,6BAAC,4BAAa;IACV,IAAI,eAAE,6BAAC,iCAAY,OAAI;IACvB,KAAK,EAAC,YAAY;IAClB,WAAW,EAAC,sBAAsB;IAClC,IAAI;EAAA,gBAEJ,0CAAK,eAAa,CAAM,CACZ,eAChB,6BAAC,4BAAa;IACV,IAAI,eAAE,6BAAC,iCAAY,OAAI;IACvB,KAAK,EAAC,YAAY;IAClB,WAAW,EAAC;EAAsB,gBAElC,0CAAK,eAAa,CAAM,CACZ,eAChB,6BAAC,4BAAa;IACV,IAAI,eAAE,6BAAC,iCAAY,OAAI;IACvB,KAAK,EAAC,YAAY;IAClB,WAAW,EAAC;EAAsB,gBAElC,0CAAK,eAAa,CAAM,CACZ,CACR,CACV,CACS,CACR,CACX;AAEhB,CAAC,EACD;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,oBAAS,EAAEC,4BAAa;EAAE;AAAE,CAAC,CACvD"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_react2","_Story","_README","_Accordion","_AccordionItem","_roundSettings24px","story","storiesOf","module","add","default","createElement","Story","StoryReadme","readme","StorySandbox","title","StorySandboxExample","Accordion","AccordionItem","icon","ReactComponent","description","open","StorySandboxCode","info","propTables"],"sources":["Accordion.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./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"],"mappings":";;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAOA,IAAAG,OAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,UAAA,GAAAJ,OAAA;AACA,IAAAK,cAAA,GAAAL,OAAA;AACA,IAAAM,kBAAA,GAAAN,OAAA;AAEA,IAAMO,KAAK,GAAG,IAAAC,iBAAS,EAAC,sBAAsB,EAAEC,MAAM,CAAC;AAEvDF,KAAK,CAACG,GAAG,CACL,OAAO,EACP,YAAM;EACF,oBACIZ,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACV,MAAA,CAAAW,KAAK,qBACFf,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACV,MAAA,CAAAY,WAAW,QAAEC,eAAoB,CAAC,eACnCjB,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACV,MAAA,CAAAc,YAAY;IAACC,KAAK,EAAE;EAAY,gBAC7BnB,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACV,MAAA,CAAAgB,mBAAmB,qBAChBpB,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACR,UAAA,CAAAe,SAAS,qBACNrB,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACP,cAAA,CAAAe,aAAa;IACVC,IAAI,eAAEvB,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACN,kBAAA,CAAAgB,cAAY,MAAE,CAAE;IACvBL,KAAK,EAAC,YAAY;IAClBM,WAAW,EAAC,sBAAsB;IAClCC,IAAI;EAAA,gBAEJ1B,MAAA,CAAAa,OAAA,CAAAC,aAAA,cAAK,eAAkB,CACZ,CAAC,eAChBd,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACP,cAAA,CAAAe,aAAa;IACVC,IAAI,eAAEvB,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACN,kBAAA,CAAAgB,cAAY,MAAE,CAAE;IACvBL,KAAK,EAAC,YAAY;IAClBM,WAAW,EAAC;EAAsB,gBAElCzB,MAAA,CAAAa,OAAA,CAAAC,aAAA,cAAK,eAAkB,CACZ,CAAC,eAChBd,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACP,cAAA,CAAAe,aAAa;IACVC,IAAI,eAAEvB,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACN,kBAAA,CAAAgB,cAAY,MAAE,CAAE;IACvBL,KAAK,EAAC,YAAY;IAClBM,WAAW,EAAC;EAAsB,gBAElCzB,MAAA,CAAAa,OAAA,CAAAC,aAAA,cAAK,eAAkB,CACZ,CACR,CACM,CAAC,eACtBd,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACV,MAAA,CAAAuB,gBAAgB,qBACb3B,MAAA,CAAAa,OAAA,CAAAC,aAAA,2BACId,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACR,UAAA,CAAAe,SAAS,qBACNrB,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACP,cAAA,CAAAe,aAAa;IACVC,IAAI,eAAEvB,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACN,kBAAA,CAAAgB,cAAY,MAAE,CAAE;IACvBL,KAAK,EAAC,YAAY;IAClBM,WAAW,EAAC,sBAAsB;IAClCC,IAAI;EAAA,gBAEJ1B,MAAA,CAAAa,OAAA,CAAAC,aAAA,cAAK,eAAkB,CACZ,CAAC,eAChBd,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACP,cAAA,CAAAe,aAAa;IACVC,IAAI,eAAEvB,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACN,kBAAA,CAAAgB,cAAY,MAAE,CAAE;IACvBL,KAAK,EAAC,YAAY;IAClBM,WAAW,EAAC;EAAsB,gBAElCzB,MAAA,CAAAa,OAAA,CAAAC,aAAA,cAAK,eAAkB,CACZ,CAAC,eAChBd,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACP,cAAA,CAAAe,aAAa;IACVC,IAAI,eAAEvB,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACN,kBAAA,CAAAgB,cAAY,MAAE,CAAE;IACvBL,KAAK,EAAC,YAAY;IAClBM,WAAW,EAAC;EAAsB,gBAElCzB,MAAA,CAAAa,OAAA,CAAAC,aAAA,cAAK,eAAkB,CACZ,CACR,CACV,CACS,CACR,CACX,CAAC;AAEhB,CAAC,EACD;EAAEc,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACR,oBAAS,EAAEC,4BAAa;EAAE;AAAE,CACvD,CAAC"}

package/Accordion/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["Content","styled","listItem","css","ListItemTitle","ListItemDescription","TitleContent","openedState","nonInteractive","duration","defaultStyle","transition","opacity","height","pointerEvents","overflow","transitionStyles","entering","padding","entered","exiting","Divider","Actions","ListItemMeta","AccordionItemComponent","props","useState","open","setState","interactive","actions","toggleState","useCallback","onClick","undefined","divider","arrowIcon","useEffect","classNames","className","icon","iconClassName","title","description","state","children","AccordionItem","Object","assign","Action","AccordionItemAction","AccordionItemActions"],"sources":["AccordionItem.tsx"],"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\";\nimport { AccordionItemAction, AccordionItemActions } from \"~/Accordion/AccordionItemActions\";\n\nconst Content = styled.div`\n    width: 100%;\n    border-right: 1px solid var(--mdc-theme-background);\n    border-bottom: 1px solid var(--mdc-theme-background);\n    border-left: 1px solid var(--mdc-theme-background);\n    box-sizing: border-box;\n    > .mdc-layout-grid {\n        margin: -24px;\n    }\n`;\n\nconst listItem = css`\n    cursor: pointer;\n    border-bottom: 1px solid var(--mdc-theme-background);\n    &:last-child {\n        border-bottom: none;\n    }\n    .mdc-list-item__graphic {\n        margin-right: 20px;\n    }\n`;\n\nconst ListItemTitle = styled.div`\n    font-weight: 600;\n    line-height: 100%;\n`;\n\nconst ListItemDescription = styled.div`\n    line-height: 100%;\n`;\n\nconst TitleContent = styled.div`\n    display: flex;\n    flex-direction: column;\n`;\n\nconst openedState = css`\n    background-color: var(--mdc-theme-on-background);\n`;\n\nconst nonInteractive = css`\n    background-color: var(--mdc-theme-surface);\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\",\n        pointerEvents: \"auto\" as any,\n        overflow: \"initial\"\n    },\n    entered: {\n        opacity: 1,\n        height: \"auto\",\n        padding: \"20px\",\n        pointerEvents: \"auto\" as any,\n        overflow: \"initial\"\n    },\n    exiting: {\n        height: \"auto\",\n        padding: \"20px\",\n        pointerEvents: \"auto\" as any,\n        overflow: \"initial\"\n    }\n};\n\nconst Divider = styled.span`\n    width: 1px;\n    margin: 0 15px;\n    height: 100%;\n    background-color: var(--mdc-theme-on-background);\n`;\n\nconst Actions = styled(ListItemMeta)`\n    display: flex;\n    height: 40%;\n    align-items: center;\n`;\n\nexport interface AccordionItemProps {\n    /**\n     * Can user toggle the accordion item by clicking it? Defaults to `true`.\n     */\n    interactive?: boolean;\n    /**\n     * Actions to show on the right side of the accordion item\n     */\n    actions?: React.ReactElement | null;\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     * Append a class name to Icon\n     */\n    iconClassName?: string;\n}\n\nconst AccordionItemComponent: React.FC<AccordionItemProps> = props => {\n    const [open, setState] = useState<boolean>(props.open ? props.open : false);\n    const { interactive = true, actions } = props;\n\n    const toggleState = useCallback(() => {\n        setState(!open);\n    }, [open]);\n\n    const onClick = interactive ? toggleState : undefined;\n    const divider = interactive && actions ? <Divider /> : null;\n    const arrowIcon = interactive ? <Icon icon={!open ? <DownArrow /> : <UpArrow />} /> : null;\n\n    useEffect(() => {\n        setState(!!props.open);\n    }, [props.open]);\n\n    return (\n        <div className={classNames(\"webiny-ui-accordion-item\", props.className)}>\n            <ListItem\n                disabled={!interactive}\n                className={classNames(\n                    listItem,\n                    { [openedState]: open },\n                    { [nonInteractive]: !interactive },\n                    \"webiny-ui-accordion-item__list-item\"\n                )}\n                onClick={onClick}\n                data-testid={props[\"data-testid\"]}\n            >\n                {props.icon && (\n                    <ListItemGraphic>\n                        <Icon icon={props.icon} className={props.iconClassName} />\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={\"body2\"}>{props.description}</Typography>\n                        </ListItemDescription>\n                    )}\n                </TitleContent>\n                <Actions>\n                    {props.actions ? props.actions : null}\n                    {divider}\n                    {arrowIcon}\n                </Actions>\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\ntype AccordionItem = React.FC<AccordionItemProps> & {\n    Divider: typeof Divider;\n    Actions: typeof AccordionItemActions;\n    Action: typeof AccordionItemAction;\n};\n\nexport const AccordionItem: AccordionItem = Object.assign(AccordionItemComponent, {\n    Divider,\n    Action: AccordionItemAction,\n    Actions: AccordionItemActions\n});\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_List","_Transition","_interopRequireDefault","_Icon","_styled","_emotion","_Typography","_roundKeyboard_arrow_up24px","_roundKeyboard_arrow_down24px","_classnames","_AccordionItemActions","Content","styled","label","target","listItem","css","ListItemTitle","ListItemDescription","TitleContent","openedState","nonInteractive","duration","defaultStyle","transition","concat","opacity","height","pointerEvents","overflow","transitionStyles","entering","padding","entered","exiting","Divider","Actions","ListItemMeta","AccordionItemComponent","props","_useState","useState","open","_useState2","_slicedToArray2","default","setState","_props$interactive","interactive","actions","toggleState","useCallback","onClick","undefined","divider","createElement","arrowIcon","Icon","icon","ReactComponent","useEffect","className","classNames","ListItem","disabled","_defineProperty2","ListItemGraphic","iconClassName","title","description","Typography","use","in","timeout","state","style","_objectSpread2","children","AccordionItem","Object","assign","Action","AccordionItemAction","AccordionItemActions","exports"],"sources":["AccordionItem.tsx"],"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\";\nimport { AccordionItemAction, AccordionItemActions } from \"~/Accordion/AccordionItemActions\";\n\nconst Content = styled.div`\n    width: 100%;\n    border-right: 1px solid var(--mdc-theme-background);\n    border-bottom: 1px solid var(--mdc-theme-background);\n    border-left: 1px solid var(--mdc-theme-background);\n    box-sizing: border-box;\n    > .mdc-layout-grid {\n        margin: -24px;\n    }\n`;\n\nconst listItem = css`\n    cursor: pointer;\n    border-bottom: 1px solid var(--mdc-theme-background);\n    &:last-child {\n        border-bottom: none;\n    }\n    .mdc-list-item__graphic {\n        margin-right: 20px;\n    }\n`;\n\nconst ListItemTitle = styled.div`\n    font-weight: 600;\n    line-height: 100%;\n`;\n\nconst ListItemDescription = styled.div`\n    line-height: 100%;\n`;\n\nconst TitleContent = styled.div`\n    display: flex;\n    flex-direction: column;\n`;\n\nconst openedState = css`\n    background-color: var(--mdc-theme-on-background);\n`;\n\nconst nonInteractive = css`\n    background-color: var(--mdc-theme-surface);\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\",\n        pointerEvents: \"auto\" as any,\n        overflow: \"initial\"\n    },\n    entered: {\n        opacity: 1,\n        height: \"auto\",\n        padding: \"20px\",\n        pointerEvents: \"auto\" as any,\n        overflow: \"initial\"\n    },\n    exiting: {\n        height: \"auto\",\n        padding: \"20px\",\n        pointerEvents: \"auto\" as any,\n        overflow: \"initial\"\n    }\n};\n\nconst Divider = styled.span`\n    width: 1px;\n    margin: 0 15px;\n    height: 100%;\n    background-color: var(--mdc-theme-on-background);\n`;\n\nconst Actions = styled(ListItemMeta)`\n    display: flex;\n    height: 40%;\n    align-items: center;\n`;\n\nexport interface AccordionItemProps {\n    /**\n     * Can user toggle the accordion item by clicking it? Defaults to `true`.\n     */\n    interactive?: boolean;\n    /**\n     * Actions to show on the right side of the accordion item\n     */\n    actions?: React.ReactElement | null;\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     * Append a class name to Icon\n     */\n    iconClassName?: string;\n}\n\nconst AccordionItemComponent: React.FC<AccordionItemProps> = props => {\n    const [open, setState] = useState<boolean>(props.open ? props.open : false);\n    const { interactive = true, actions } = props;\n\n    const toggleState = useCallback(() => {\n        setState(!open);\n    }, [open]);\n\n    const onClick = interactive ? toggleState : undefined;\n    const divider = interactive && actions ? <Divider /> : null;\n    const arrowIcon = interactive ? <Icon icon={!open ? <DownArrow /> : <UpArrow />} /> : null;\n\n    useEffect(() => {\n        setState(!!props.open);\n    }, [props.open]);\n\n    return (\n        <div className={classNames(\"webiny-ui-accordion-item\", props.className)}>\n            <ListItem\n                disabled={!interactive}\n                className={classNames(\n                    listItem,\n                    { [openedState]: open },\n                    { [nonInteractive]: !interactive },\n                    \"webiny-ui-accordion-item__list-item\"\n                )}\n                onClick={onClick}\n                data-testid={props[\"data-testid\"]}\n            >\n                {props.icon && (\n                    <ListItemGraphic>\n                        <Icon icon={props.icon} className={props.iconClassName} />\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={\"body2\"}>{props.description}</Typography>\n                        </ListItemDescription>\n                    )}\n                </TitleContent>\n                <Actions>\n                    {props.actions ? props.actions : null}\n                    {divider}\n                    {arrowIcon}\n                </Actions>\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\ntype AccordionItem = React.FC<AccordionItemProps> & {\n    Divider: typeof Divider;\n    Actions: typeof AccordionItemActions;\n    Action: typeof AccordionItemAction;\n};\n\nexport const AccordionItem: AccordionItem = Object.assign(AccordionItemComponent, {\n    Divider,\n    Action: AccordionItemAction,\n    Actions: AccordionItemActions\n});\n"],"mappings":"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"}

package/Accordion/AccordionItemActions.js.map

@@ -1 +1 @@
-{"version":3,"names":["AccordionItemActions","children","AccordionItemAction","icon","onClick","disabled","e","stopPropagation"],"sources":["AccordionItemActions.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconButton } from \"~/Button\";\n\nexport const AccordionItemActions: React.FC = ({ children }) => {\n    return <>{children}</>;\n};\n\nexport interface AccordionItemActionProps {\n    icon: JSX.Element;\n    onClick: () => void;\n    disabled?: boolean;\n}\n\nexport const AccordionItemAction = ({ icon, onClick, disabled }: AccordionItemActionProps) => {\n    return (\n        <IconButton\n            disabled={disabled}\n            icon={icon}\n            onClick={e => {\n                e.stopPropagation();\n                onClick();\n            }}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AAEO,IAAMA,oBAA8B,GAAG,SAAjCA,oBAA8B,OAAqB;EAAA,IAAfC,QAAQ,QAARA,QAAQ;EACrD,oBAAO,4DAAGA,QAAQ,CAAI;AAC1B,CAAC;AAAC;AAQK,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,QAA8D;EAAA,IAAxDC,IAAI,SAAJA,IAAI;IAAEC,QAAO,SAAPA,OAAO;IAAEC,QAAQ,SAARA,QAAQ;EACzD,oBACI,6BAAC,kBAAU;IACP,QAAQ,EAAEA,QAAS;IACnB,IAAI,EAAEF,IAAK;IACX,OAAO,EAAE,iBAAAG,CAAC,EAAI;MACVA,CAAC,CAACC,eAAe,EAAE;MACnBH,QAAO,EAAE;IACb;EAAE,EACJ;AAEV,CAAC;AAAC"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_Button","AccordionItemActions","_ref","children","default","createElement","Fragment","exports","AccordionItemAction","_ref2","icon","onClick","disabled","IconButton","e","stopPropagation"],"sources":["AccordionItemActions.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconButton } from \"~/Button\";\n\nexport const AccordionItemActions: React.FC = ({ children }) => {\n    return <>{children}</>;\n};\n\nexport interface AccordionItemActionProps {\n    icon: JSX.Element;\n    onClick: () => void;\n    disabled?: boolean;\n}\n\nexport const AccordionItemAction = ({ icon, onClick, disabled }: AccordionItemActionProps) => {\n    return (\n        <IconButton\n            disabled={disabled}\n            icon={icon}\n            onClick={e => {\n                e.stopPropagation();\n                onClick();\n            }}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAEO,IAAME,oBAA8B,GAAG,SAAjCA,oBAA8BA,CAAAC,IAAA,EAAqB;EAAA,IAAfC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;EACrD,oBAAON,MAAA,CAAAO,OAAA,CAAAC,aAAA,CAAAR,MAAA,CAAAO,OAAA,CAAAE,QAAA,QAAGH,QAAW,CAAC;AAC1B,CAAC;AAACI,OAAA,CAAAN,oBAAA,GAAAA,oBAAA;AAQK,IAAMO,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAAC,KAAA,EAA8D;EAAA,IAAxDC,IAAI,GAAAD,KAAA,CAAJC,IAAI;IAAEC,QAAO,GAAAF,KAAA,CAAPE,OAAO;IAAEC,QAAQ,GAAAH,KAAA,CAARG,QAAQ;EACzD,oBACIf,MAAA,CAAAO,OAAA,CAAAC,aAAA,CAACL,OAAA,CAAAa,UAAU;IACPD,QAAQ,EAAEA,QAAS;IACnBF,IAAI,EAAEA,IAAK;IACXC,OAAO,EAAE,SAAAA,QAAAG,CAAC,EAAI;MACVA,CAAC,CAACC,eAAe,CAAC,CAAC;MACnBJ,QAAO,CAAC,CAAC;IACb;EAAE,CACL,CAAC;AAEV,CAAC;AAACJ,OAAA,CAAAC,mBAAA,GAAAA,mBAAA"}

package/Accordion/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Accordion\";\nexport * from \"./AccordionItem\";\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"names":["_Accordion","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_AccordionItem"],"sources":["index.ts"],"sourcesContent":["export * from \"./Accordion\";\nexport * from \"./AccordionItem\";\n"],"mappings":";;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,UAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,UAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAT,UAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,cAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,cAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,cAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAC,cAAA,CAAAL,GAAA;IAAA;EAAA;AAAA"}

package/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"names":["alertStyles","css","borderLeft","margin","padding","fontWeight","lineHeight","color","marginBottom","fontSize","borderColor","Alert","props","title","type","children","rest"],"sources":["Alert.tsx"],"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: \"120%\",\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\nexport interface 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"],"mappings":";;;;;;;;AAAA;AACA;AAA8B;AAE9B,IAAMA,WAAW,gBAAG,IAAAC,YAAG,EAAC;EACpBC,UAAU,EAAE,eAAe;EAC3BC,MAAM,EAAE,cAAc;EACtBC,OAAO,EAAE,gBAAgB;EACzB,yBAAyB,EAAE;IACvBC,UAAU,EAAE,GAAG;IACfC,UAAU,EAAE,MAAM;IAClBC,KAAK,EAAE,6BAA6B;IACpCC,YAAY,EAAE;EAClB,CAAC;EACD,2BAA2B,EAAE;IACzBF,UAAU,EAAE,MAAM;IAClBG,QAAQ,EAAE,EAAE;IACZF,KAAK,EAAE;EACX,CAAC;EACD,4BAA4B,EAAE;IAC1BG,WAAW,EAAE;EACjB,CAAC;EACD,yBAAyB,EAAE;IACvBA,WAAW,EAAE;EACjB,CAAC;EACD,4BAA4B,EAAE;IAC1BA,WAAW,EAAE;EACjB,CAAC;EACD,2BAA2B,EAAE;IACzBA,WAAW,EAAE;EACjB;AACJ,CAAC,uBAAC;AAqBF;AACA;AACA;AACA,IAAMC,KAA2B,GAAG,SAA9BA,KAA2B,CAAGC,KAAK,EAAI;EACzC,IAAQC,KAAK,GAA8BD,KAAK,CAAxCC,KAAK;IAAEC,IAAI,GAAwBF,KAAK,CAAjCE,IAAI;IAAEC,QAAQ,GAAcH,KAAK,CAA3BG,QAAQ;IAAKC,IAAI,0CAAKJ,KAAK;EAEhD,oBACI,sDAASI,IAAI;IAAE,SAAS,EAAEhB,WAAW,GAAG,oCAAoC,GAAGc;EAAK,iBAChF;IAAG,SAAS,EAAE;EAAyB,GAAED,KAAK,CAAK,eACnD;IAAG,SAAS,EAAE;EAA2B,GAAEE,QAAQ,CAAK,CACtD;AAEd,CAAC;AAAC"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_emotion","_excluded","alertStyles","css","borderLeft","margin","padding","fontWeight","lineHeight","color","marginBottom","fontSize","borderColor","Alert","props","title","type","children","rest","_objectWithoutProperties2","default","createElement","Object","assign","className","exports"],"sources":["Alert.tsx"],"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: \"120%\",\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\nexport interface 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"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAA8B,IAAAE,SAAA;AAE9B,IAAMC,WAAW,gBAAG,IAAAC,YAAG,EAAC;EACpBC,UAAU,EAAE,eAAe;EAC3BC,MAAM,EAAE,cAAc;EACtBC,OAAO,EAAE,gBAAgB;EACzB,yBAAyB,EAAE;IACvBC,UAAU,EAAE,GAAG;IACfC,UAAU,EAAE,MAAM;IAClBC,KAAK,EAAE,6BAA6B;IACpCC,YAAY,EAAE;EAClB,CAAC;EACD,2BAA2B,EAAE;IACzBF,UAAU,EAAE,MAAM;IAClBG,QAAQ,EAAE,EAAE;IACZF,KAAK,EAAE;EACX,CAAC;EACD,4BAA4B,EAAE;IAC1BG,WAAW,EAAE;EACjB,CAAC;EACD,yBAAyB,EAAE;IACvBA,WAAW,EAAE;EACjB,CAAC;EACD,4BAA4B,EAAE;IAC1BA,WAAW,EAAE;EACjB,CAAC;EACD,2BAA2B,EAAE;IACzBA,WAAW,EAAE;EACjB;AACJ,CAAC,uBAAC;AAqBF;AACA;AACA;AACA,IAAMC,KAA2B,GAAG,SAA9BA,KAA2BA,CAAGC,KAAK,EAAI;EACzC,IAAQC,KAAK,GAA8BD,KAAK,CAAxCC,KAAK;IAAEC,IAAI,GAAwBF,KAAK,CAAjCE,IAAI;IAAEC,QAAQ,GAAcH,KAAK,CAA3BG,QAAQ;IAAKC,IAAI,OAAAC,yBAAA,CAAAC,OAAA,EAAKN,KAAK,EAAAb,SAAA;EAEhD,oBACIJ,MAAA,CAAAuB,OAAA,CAAAC,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASL,IAAI;IAAEM,SAAS,EAAEtB,WAAW,GAAG,oCAAoC,GAAGc;EAAK,iBAChFnB,MAAA,CAAAuB,OAAA,CAAAC,aAAA;IAAGG,SAAS,EAAE;EAAyB,GAAET,KAAS,CAAC,eACnDlB,MAAA,CAAAuB,OAAA,CAAAC,aAAA;IAAGG,SAAS,EAAE;EAA2B,GAAEP,QAAY,CACtD,CAAC;AAEd,CAAC;AAACQ,OAAA,CAAAZ,KAAA,GAAAA,KAAA"}

package/Alert/Alert.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Alert"],"sources":["Alert.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./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"],"mappings":";;;AAAA;AACA;AACA;AAOA;AAEA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,kBAAkB,EAAEC,MAAM,CAAC;AAEnDF,KAAK,CAACG,GAAG,CACL,OAAO,EACP,YAAM;EACF,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB;IAAC,KAAK,EAAE;EAAO,gBAC/B,6BAAC,YAAK;IAAC,KAAK,EAAE,uBAAwB;IAAC,IAAI,EAAE;EAAO,GAAC,+BAErD,CAAQ,CACU,eACtB,6BAAC,uBAAgB,qBACb,6BAAC,YAAK;IAAC,KAAK,EAAE,uBAAwB;IAAC,IAAI,EAAE;EAAO,GAAC,+BAErD,CAAQ,CACO,CACR,eACf,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB;IAAC,KAAK,EAAE;EAAS,gBACjC,6BAAC,YAAK;IAAC,KAAK,EAAE,uBAAwB;IAAC,IAAI,EAAE;EAAS,GAAC,yBAEvD,CAAQ,CACU,eACtB,6BAAC,uBAAgB,qBACb,6BAAC,YAAK;IAAC,KAAK,EAAE,uBAAwB;IAAC,IAAI,EAAE;EAAS,GAAC,yBAEvD,CAAQ,CACO,CACR,CACX;AAEhB,CAAC,EACD;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,YAAK;EAAE;AAAE,CAAC,CACpC"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_react2","_Story","_README","_Alert","story","storiesOf","module","add","default","createElement","Story","StoryReadme","readme","StorySandbox","StorySandboxExample","title","Alert","type","StorySandboxCode","info","propTables"],"sources":["Alert.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./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"],"mappings":";;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAOA,IAAAG,OAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAEA,IAAAI,MAAA,GAAAJ,OAAA;AAEA,IAAMK,KAAK,GAAG,IAAAC,iBAAS,EAAC,kBAAkB,EAAEC,MAAM,CAAC;AAEnDF,KAAK,CAACG,GAAG,CACL,OAAO,EACP,YAAM;EACF,oBACIV,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACR,MAAA,CAAAS,KAAK,qBACFb,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACR,MAAA,CAAAU,WAAW,QAAEC,eAAoB,CAAC,eACnCf,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACR,MAAA,CAAAY,YAAY,qBACThB,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACR,MAAA,CAAAa,mBAAmB;IAACC,KAAK,EAAE;EAAO,gBAC/BlB,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACN,MAAA,CAAAa,KAAK;IAACD,KAAK,EAAE,uBAAwB;IAACE,IAAI,EAAE;EAAO,GAAC,+BAE9C,CACU,CAAC,eACtBpB,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACR,MAAA,CAAAiB,gBAAgB,qBACbrB,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACN,MAAA,CAAAa,KAAK;IAACD,KAAK,EAAE,uBAAwB;IAACE,IAAI,EAAE;EAAO,GAAC,+BAE9C,CACO,CACR,CAAC,eACfpB,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACR,MAAA,CAAAY,YAAY,qBACThB,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACR,MAAA,CAAAa,mBAAmB;IAACC,KAAK,EAAE;EAAS,gBACjClB,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACN,MAAA,CAAAa,KAAK;IAACD,KAAK,EAAE,uBAAwB;IAACE,IAAI,EAAE;EAAS,GAAC,yBAEhD,CACU,CAAC,eACtBpB,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACR,MAAA,CAAAiB,gBAAgB,qBACbrB,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACN,MAAA,CAAAa,KAAK;IAACD,KAAK,EAAE,uBAAwB;IAACE,IAAI,EAAE;EAAS,GAAC,yBAEhD,CACO,CACR,CACX,CAAC;AAEhB,CAAC,EACD;EAAEE,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACJ,YAAK;EAAE;AAAE,CACpC,CAAC"}

package/Alert/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Alert\";\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"names":["_Alert","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["index.ts"],"sourcesContent":["export * from \"./Alert\";\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,MAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,MAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAT,MAAA,CAAAK,GAAA;IAAA;EAAA;AAAA"}

package/AutoComplete/AutoComplete.d.ts

@@ -9,6 +9,7 @@ export interface AutoCompleteProps extends Omit<AutoCompleteBaseProps, "onChange
     onChange?: (value: any, selection?: any) => void;
     loading?: boolean;
     noResultFound?: React.ReactNode;
+    size?: "small" | "medium" | "large";
 }
 interface State {
     inputValue: string;

package/AutoComplete/AutoComplete.js

@@ -13,7 +13,6 @@ var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/hel
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
 var _react = _interopRequireDefault(require("react"));
 var _downshift = _interopRequireDefault(require("downshift"));
 var _Input = require("../Input");
@@ -23,6 +22,7 @@ var _Typography = require("../Typography");
 var _keycode = _interopRequireDefault(require("keycode"));
 var _styles = require("./styles");
 var _utils = require("./utils");
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _reactSpinnerMaterial = _interopRequireDefault(require("react-spinner-material"));
 var _emotion = require("emotion");
 var _excluded = ["className", "options", "onChange", "value", "onInput", "validation", "placement"],
@@ -40,12 +40,12 @@ var listStyles = /*#__PURE__*/(0, _emotion.css)({
     }
   }
 }, "label:listStyles;");
-var Placement;
-exports.Placement = Placement;
-(function (Placement) {
+var Placement = /*#__PURE__*/function (Placement) {
   Placement["top"] = "top";
   Placement["bottom"] = "bottom";
-})(Placement || (exports.Placement = Placement = {}));
+  return Placement;
+}({});
+exports.Placement = Placement;
 var Spinner = function Spinner() {
   return /*#__PURE__*/_react.default.createElement(_reactSpinnerMaterial.default, {
     size: 24,
@@ -78,6 +78,9 @@ var AutoComplete = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       inputValue: ""
     });
+    /**
+     * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.
+     */
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "downshift", /*#__PURE__*/_react.default.createRef());
     return _this;
   }
@@ -89,7 +92,7 @@ var AutoComplete = /*#__PURE__*/function (_React$Component) {
         value = _this$props.value,
         options = _this$props.options;
       var previousValue = previousProps.value;
-      if (!(0, _isEqual2.default)(value, previousValue)) {
+      if (!(0, _isEqual.default)(value, previousValue)) {
         var item = null;
         if (value) {
           if (typeof value === "object") {
@@ -215,7 +218,7 @@ var AutoComplete = /*#__PURE__*/function (_React$Component) {
         }
       };
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(_styles.autoCompleteStyle, className)
+        className: (0, _classnames.default)(_styles.autoCompleteStyle, this.props.size ? "webiny-ui-autocomplete--size-".concat(this.props.size) : null, className)
       }, /*#__PURE__*/_react.default.createElement(_downshift.default, Object.assign({}, downshiftProps, {
         ref: this.downshift
       }), function (_ref3) {
@@ -226,6 +229,8 @@ var AutoComplete = /*#__PURE__*/function (_React$Component) {
           // This prop is above `otherInputProps` since it can be overridden by the user.
           trailingIcon: _this4.props.loading && /*#__PURE__*/_react.default.createElement(Spinner, null)
         }, otherInputProps), {}, {
+          // @ts-ignore
+          size: _this4.props.size,
           // @ts-ignore
           validation: validation,
           rawOnChange: true,
@@ -242,11 +247,11 @@ var AutoComplete = /*#__PURE__*/function (_React$Component) {
           onKeyDown: function onKeyDown(ev) {
             var keyCode = (0, _keycode.default)(ev);
             if (keyCode === "backspace") {
-              if (_onChange) {
-                _onChange(null);
-              }
               setTimeout(function () {
-                return openMenu();
+                if (_onChange) {
+                  _onChange(null);
+                  openMenu();
+                }
               }, 50);
             }
           },

package/AutoComplete/AutoComplete.js.map

@@ -1 +1 @@
-{"version":3,"names":["menuStyles","css","top","bottom","listStyles","listStyle","paddingLeft","margin","Placement","Spinner","OptionsList","placement","getMenuProps","children","classNames","AutoComplete","inputValue","React","createRef","previousProps","props","value","options","previousValue","item","find","option","getOptionValue","downshift","current","selectItem","isOpen","highlightedIndex","selectedItem","getItemProps","state","length","renderItem","filtered","filter","aliases","findInAliases","getOptionText","toLowerCase","includes","noResultFound","map","index","itemValue","itemClassNames","suggestionList","selected","className","call","onChange","onInput","validation","isValid","message","otherInputProps","downshiftProps","autoCompleteStyle","itemToString","defaultSelectedItem","selection","setState","getInputProps","openMenu","rest","trailingIcon","loading","rawOnChange","ev","onBlur","onFocus","onKeyDown","keyCode","keycode","setTimeout","onKeyUp","target","currentTarget","disabled","readOnly","renderOptions","Component","valueProp","textProp"],"sources":["AutoComplete.tsx"],"sourcesContent":["import React from \"react\";\nimport Downshift, { ControllerStateAndHelpers, PropGetters } from \"downshift\";\nimport { Input } from \"~/Input\";\nimport classNames from \"classnames\";\nimport { Elevation } from \"~/Elevation\";\nimport { Typography } from \"~/Typography\";\nimport keycode from \"keycode\";\nimport { autoCompleteStyle, suggestionList } from \"./styles\";\nimport { AutoCompleteBaseProps } from \"./types\";\nimport { getOptionValue, getOptionText, findInAliases } from \"./utils\";\nimport { isEqual } from \"lodash\";\nimport MaterialSpinner from \"react-spinner-material\";\nimport { css } from \"emotion\";\n\nconst menuStyles = css({\n    top: \"unset !important\",\n    bottom: 75\n});\n\nconst listStyles = css({\n    \"&.autocomplete__options-list\": {\n        listStyle: \"none\",\n        paddingLeft: 0,\n        \"& li\": {\n            margin: 0\n        }\n    }\n});\n\nexport enum Placement {\n    top = \"top\",\n    bottom = \"bottom\"\n}\n\nexport interface AutoCompleteProps extends Omit<AutoCompleteBaseProps, \"onChange\"> {\n    /* Placement position of dropdown menu, can be either `top` or `bottom`. */\n    placement?: Placement;\n\n    /* A callback that is executed each time a value is changed. */\n    onChange?: (value: any, selection?: any) => void;\n\n    /* If true, will show a loading spinner on the right side of the input. */\n    loading?: boolean;\n\n    /* A component that renders supporting UI in case of no result found. */\n    noResultFound?: React.ReactNode;\n}\n\ninterface State {\n    inputValue: string;\n}\n\nconst Spinner: React.FC = () => {\n    return (\n        <MaterialSpinner\n            size={24}\n            spinnerColor={\"var(--mdc-theme-primary)\"}\n            spinnerWidth={2}\n            visible\n        />\n    );\n};\n\ninterface RenderOptionsParams\n    extends Omit<ControllerStateAndHelpers<any>, \"getInputProps\" | \"openMenu\"> {\n    options: AutoCompleteProps[\"options\"];\n    placement?: Placement;\n}\n\ninterface OptionsListProps {\n    placement?: Placement;\n    getMenuProps: PropGetters<Record<string, any>>[\"getMenuProps\"];\n}\n\nconst OptionsList: React.FC<OptionsListProps> = ({ placement, getMenuProps, children }) => {\n    return (\n        <Elevation\n            z={1}\n            className={classNames({\n                [menuStyles]: placement === Placement.top\n            })}\n        >\n            <ul\n                className={classNames(\"autocomplete__options-list\", listStyles)}\n                {...getMenuProps()}\n            >\n                {children}\n            </ul>\n        </Elevation>\n    );\n};\n\nclass AutoComplete extends React.Component<AutoCompleteProps, State> {\n    static defaultProps: Partial<AutoCompleteProps> = {\n        valueProp: \"id\",\n        textProp: \"name\",\n        options: [],\n        placement: Placement.bottom,\n        /**\n         * We cast this as AutoComplete because renderItem() is executed via .call() where AutoComplete instance is assigned as this.\n         */\n        renderItem(item: any) {\n            return (\n                <Typography use={\"body2\"}>\n                    {getOptionText(item, (this as unknown as AutoComplete).props)}\n                </Typography>\n            );\n        }\n    };\n\n    public override state: State = {\n        inputValue: \"\"\n    };\n\n    /**\n     * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.\n     */\n    downshift: any = React.createRef();\n\n    public override componentDidUpdate(previousProps: AutoCompleteProps) {\n        const { value, options } = this.props;\n        const { value: previousValue } = previousProps;\n\n        if (!isEqual(value, previousValue)) {\n            let item = null;\n\n            if (value) {\n                if (typeof value === \"object\") {\n                    item = value;\n                } else {\n                    item =\n                        options.find(option => {\n                            return value === getOptionValue(option, this.props);\n                        }) || null;\n                }\n            }\n\n            const { current: downshift } = this.downshift;\n            downshift && downshift.selectItem(item);\n        }\n    }\n\n    /**\n     * Renders options - based on user's input. It will try to match input text with available options.\n     */\n    private renderOptions({\n        options,\n        isOpen,\n        highlightedIndex,\n        selectedItem,\n        getMenuProps,\n        getItemProps,\n        placement\n    }: RenderOptionsParams) {\n        if (!isOpen) {\n            return null;\n        }\n        /**\n         * Suggest user to start typing when there are no options available to choose from.\n         */\n        if (!this.state.inputValue && !options.length) {\n            return (\n                <OptionsList placement={placement} getMenuProps={getMenuProps}>\n                    <li>\n                        <Typography use={\"body2\"}>Start typing to find entry</Typography>\n                    </li>\n                </OptionsList>\n            );\n        }\n\n        const { renderItem } = this.props;\n\n        const filtered = options.filter(item => {\n            // 2) At the end, we want to show only options that are matched by typed text.\n            if (!this.state.inputValue) {\n                return true;\n            }\n\n            if (item.aliases) {\n                return findInAliases(item, this.state.inputValue);\n            }\n\n            return getOptionText(item, this.props)\n                .toLowerCase()\n                .includes(this.state.inputValue.toLowerCase());\n        });\n\n        if (!filtered.length) {\n            return (\n                <OptionsList placement={placement} getMenuProps={getMenuProps}>\n                    <li>\n                        <Typography use={\"body2\"}>No results.</Typography>\n                        {this.props.noResultFound}\n                    </li>\n                </OptionsList>\n            );\n        }\n\n        return (\n            <OptionsList placement={placement} getMenuProps={getMenuProps}>\n                {filtered.map((item, index) => {\n                    const itemValue = getOptionValue(item, this.props);\n\n                    // Base classes.\n                    const itemClassNames = {\n                        [suggestionList]: true,\n                        highlighted: highlightedIndex === index,\n                        selected: false\n                    };\n\n                    // Add \"selected\" class if the item is selected.\n                    if (selectedItem && getOptionValue(selectedItem, this.props) === itemValue) {\n                        itemClassNames.selected = true;\n                    }\n\n                    // Render the item.\n                    return (\n                        <li\n                            key={itemValue}\n                            {...getItemProps({\n                                index,\n                                item,\n                                className: classNames(itemClassNames)\n                            })}\n                        >\n                            {renderItem.call(this, item, index)}\n                        </li>\n                    );\n                })}\n            </OptionsList>\n        );\n    }\n\n    public override render() {\n        const {\n            className,\n            options,\n            onChange,\n            value,\n            // valueProp,\n            // textProp,\n            onInput,\n            validation = {\n                isValid: null,\n                message: null\n            },\n            placement,\n            ...otherInputProps\n        } = this.props;\n\n        // Downshift related props.\n        const downshiftProps = {\n            className: autoCompleteStyle,\n            itemToString: (item: any) => getOptionText(item, this.props),\n            defaultSelectedItem: value,\n            onChange: (selection: string) => {\n                if (!selection || !onChange) {\n                    return;\n                }\n                onChange(getOptionValue(selection, this.props), selection);\n                this.setState(state => ({\n                    ...state,\n                    inputValue: \"\"\n                }));\n            }\n        };\n\n        return (\n            <div className={classNames(autoCompleteStyle, className)}>\n                <Downshift {...downshiftProps} ref={this.downshift}>\n                    {({ getInputProps, openMenu, ...rest }) => (\n                        <div>\n                            <Input\n                                {...getInputProps({\n                                    // This prop is above `otherInputProps` since it can be overridden by the user.\n                                    trailingIcon: this.props.loading && <Spinner />,\n                                    ...otherInputProps,\n                                    // @ts-ignore\n                                    validation,\n                                    rawOnChange: true,\n                                    onChange: ev => ev,\n                                    onBlur: ev => ev,\n                                    onFocus: ev => {\n                                        openMenu();\n                                        otherInputProps.onFocus && otherInputProps.onFocus(ev);\n                                    },\n                                    onKeyDown: (ev: React.KeyboardEvent<HTMLInputElement>) => {\n                                        const keyCode: string = keycode(ev as unknown as Event);\n\n                                        if (keyCode === \"backspace\") {\n                                            if (onChange) {\n                                                onChange(null);\n                                            }\n                                            setTimeout(() => openMenu(), 50);\n                                        }\n                                    },\n                                    onKeyUp: (ev: React.KeyboardEvent<HTMLInputElement>) => {\n                                        const keyCode: string = keycode(ev as unknown as Event);\n\n                                        const target = ev.currentTarget;\n                                        const inputValue = target.value || \"\";\n\n                                        // If user pressed 'esc', 'enter' or similar...\n                                        if (\n                                            keyCode &&\n                                            keyCode.length > 1 &&\n                                            keyCode !== \"backspace\"\n                                        ) {\n                                            return;\n                                        }\n\n                                        // If values are the same, exit, do not update current search term.\n                                        if (inputValue === this.state.inputValue) {\n                                            return;\n                                        }\n\n                                        this.setState(\n                                            state => ({\n                                                ...state,\n                                                inputValue\n                                            }),\n                                            () => {\n                                                onInput && onInput(inputValue);\n                                            }\n                                        );\n                                    }\n                                })}\n                            />\n                            {!otherInputProps.disabled &&\n                                !otherInputProps.readOnly &&\n                                this.renderOptions({\n                                    ...rest,\n                                    options,\n                                    placement\n                                })}\n                        </div>\n                    )}\n                </Downshift>\n            </div>\n        );\n    }\n}\n\nexport { AutoComplete };\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_downshift","_Input","_classnames","_Elevation","_Typography","_keycode","_styles","_utils","_isEqual","_reactSpinnerMaterial","_emotion","_excluded","_excluded2","menuStyles","css","top","bottom","listStyles","listStyle","paddingLeft","margin","Placement","exports","Spinner","default","createElement","size","spinnerColor","spinnerWidth","visible","OptionsList","_ref","placement","getMenuProps","children","Elevation","z","className","classNames","_defineProperty2","Object","assign","AutoComplete","_React$Component","_inherits2","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_assertThisInitialized2","inputValue","React","createRef","_createClass2","key","value","componentDidUpdate","previousProps","_this2","_this$props","props","options","previousValue","isEqual","item","find","option","getOptionValue","downshift","current","selectItem","renderOptions","_ref2","_this3","isOpen","highlightedIndex","selectedItem","getItemProps","state","Typography","use","renderItem","filtered","filter","aliases","findInAliases","getOptionText","toLowerCase","includes","noResultFound","map","index","_itemClassNames","itemValue","itemClassNames","suggestionList","selected","render","_this4","_this$props2","onChange","onInput","_this$props2$validati","validation","isValid","message","otherInputProps","_objectWithoutProperties2","downshiftProps","autoCompleteStyle","itemToString","defaultSelectedItem","selection","setState","_objectSpread2","ref","_ref3","getInputProps","openMenu","rest","Input","trailingIcon","loading","rawOnChange","ev","onBlur","onFocus","onKeyDown","keyCode","keycode","setTimeout","onKeyUp","target","currentTarget","disabled","readOnly","Component","valueProp","textProp"],"sources":["AutoComplete.tsx"],"sourcesContent":["import React from \"react\";\nimport Downshift, { ControllerStateAndHelpers, PropGetters } from \"downshift\";\nimport { Input } from \"~/Input\";\nimport classNames from \"classnames\";\nimport { Elevation } from \"~/Elevation\";\nimport { Typography } from \"~/Typography\";\nimport keycode from \"keycode\";\nimport { autoCompleteStyle, suggestionList } from \"./styles\";\nimport { AutoCompleteBaseProps } from \"./types\";\nimport { getOptionValue, getOptionText, findInAliases } from \"./utils\";\nimport isEqual from \"lodash/isEqual\";\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    // Size - small, medium or large\n    size?: \"small\" | \"medium\" | \"large\";\n}\n\ninterface State {\n    inputValue: string;\n}\n\nconst Spinner: React.FC = () => {\n    return (\n        <MaterialSpinner\n            size={24}\n            spinnerColor={\"var(--mdc-theme-primary)\"}\n            spinnerWidth={2}\n            visible\n        />\n    );\n};\n\ninterface RenderOptionsParams\n    extends Omit<ControllerStateAndHelpers<any>, \"getInputProps\" | \"openMenu\"> {\n    options: AutoCompleteProps[\"options\"];\n    placement?: Placement;\n}\n\ninterface OptionsListProps {\n    placement?: Placement;\n    getMenuProps: PropGetters<Record<string, any>>[\"getMenuProps\"];\n}\n\nconst OptionsList: React.FC<OptionsListProps> = ({ placement, getMenuProps, children }) => {\n    return (\n        <Elevation\n            z={1}\n            className={classNames({\n                [menuStyles]: placement === Placement.top\n            })}\n        >\n            <ul\n                className={classNames(\"autocomplete__options-list\", listStyles)}\n                {...getMenuProps()}\n            >\n                {children}\n            </ul>\n        </Elevation>\n    );\n};\n\nclass AutoComplete extends React.Component<AutoCompleteProps, State> {\n    static defaultProps: Partial<AutoCompleteProps> = {\n        valueProp: \"id\",\n        textProp: \"name\",\n        options: [],\n        placement: Placement.bottom,\n        /**\n         * We cast this as AutoComplete because renderItem() is executed via .call() where AutoComplete instance is assigned as this.\n         */\n        renderItem(item: any) {\n            return (\n                <Typography use={\"body2\"}>\n                    {getOptionText(item, (this as unknown as AutoComplete).props)}\n                </Typography>\n            );\n        }\n    };\n\n    public override state: State = {\n        inputValue: \"\"\n    };\n\n    /**\n     * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.\n     */\n    downshift: any = React.createRef();\n\n    public override componentDidUpdate(previousProps: AutoCompleteProps) {\n        const { value, options } = this.props;\n        const { value: previousValue } = previousProps;\n\n        if (!isEqual(value, previousValue)) {\n            let item = null;\n\n            if (value) {\n                if (typeof value === \"object\") {\n                    item = value;\n                } else {\n                    item =\n                        options.find(option => {\n                            return value === getOptionValue(option, this.props);\n                        }) || null;\n                }\n            }\n\n            const { current: downshift } = this.downshift;\n            downshift && downshift.selectItem(item);\n        }\n    }\n\n    /**\n     * Renders options - based on user's input. It will try to match input text with available options.\n     */\n    private renderOptions({\n        options,\n        isOpen,\n        highlightedIndex,\n        selectedItem,\n        getMenuProps,\n        getItemProps,\n        placement\n    }: RenderOptionsParams) {\n        if (!isOpen) {\n            return null;\n        }\n        /**\n         * Suggest user to start typing when there are no options available to choose from.\n         */\n        if (!this.state.inputValue && !options.length) {\n            return (\n                <OptionsList placement={placement} getMenuProps={getMenuProps}>\n                    <li>\n                        <Typography use={\"body2\"}>Start typing to find entry</Typography>\n                    </li>\n                </OptionsList>\n            );\n        }\n\n        const { renderItem } = this.props;\n\n        const filtered = options.filter(item => {\n            // 2) At the end, we want to show only options that are matched by typed text.\n            if (!this.state.inputValue) {\n                return true;\n            }\n\n            if (item.aliases) {\n                return findInAliases(item, this.state.inputValue);\n            }\n\n            return getOptionText(item, this.props)\n                .toLowerCase()\n                .includes(this.state.inputValue.toLowerCase());\n        });\n\n        if (!filtered.length) {\n            return (\n                <OptionsList placement={placement} getMenuProps={getMenuProps}>\n                    <li>\n                        <Typography use={\"body2\"}>No results.</Typography>\n                        {this.props.noResultFound}\n                    </li>\n                </OptionsList>\n            );\n        }\n\n        return (\n            <OptionsList placement={placement} getMenuProps={getMenuProps}>\n                {filtered.map((item, index) => {\n                    const itemValue = getOptionValue(item, this.props);\n\n                    // Base classes.\n                    const itemClassNames = {\n                        [suggestionList]: true,\n                        highlighted: highlightedIndex === index,\n                        selected: false\n                    };\n\n                    // Add \"selected\" class if the item is selected.\n                    if (selectedItem && getOptionValue(selectedItem, this.props) === itemValue) {\n                        itemClassNames.selected = true;\n                    }\n\n                    // Render the item.\n                    return (\n                        <li\n                            key={itemValue}\n                            {...getItemProps({\n                                index,\n                                item,\n                                className: classNames(itemClassNames)\n                            })}\n                        >\n                            {renderItem.call(this, item, index)}\n                        </li>\n                    );\n                })}\n            </OptionsList>\n        );\n    }\n\n    public override render() {\n        const {\n            className,\n            options,\n            onChange,\n            value,\n            // valueProp,\n            // textProp,\n            onInput,\n            validation = {\n                isValid: null,\n                message: null\n            },\n            placement,\n            ...otherInputProps\n        } = this.props;\n\n        // Downshift related props.\n        const downshiftProps = {\n            className: autoCompleteStyle,\n            itemToString: (item: any) => getOptionText(item, this.props),\n            defaultSelectedItem: value,\n            onChange: (selection: string) => {\n                if (!selection || !onChange) {\n                    return;\n                }\n                onChange(getOptionValue(selection, this.props), selection);\n                this.setState(state => ({\n                    ...state,\n                    inputValue: \"\"\n                }));\n            }\n        };\n\n        return (\n            <div\n                className={classNames(\n                    autoCompleteStyle,\n                    this.props.size ? `webiny-ui-autocomplete--size-${this.props.size}` : null,\n                    className\n                )}\n            >\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                                    size: this.props.size,\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                                            setTimeout(() => {\n                                                if (onChange) {\n                                                    onChange(null);\n                                                    openMenu();\n                                                }\n                                            }, 50);\n                                        }\n                                    },\n                                    onKeyUp: (ev: React.KeyboardEvent<HTMLInputElement>) => {\n                                        const keyCode: string = keycode(ev as unknown as Event);\n\n                                        const target = ev.currentTarget;\n                                        const inputValue = target.value || \"\";\n\n                                        // If user pressed 'esc', 'enter' or similar...\n                                        if (\n                                            keyCode &&\n                                            keyCode.length > 1 &&\n                                            keyCode !== \"backspace\"\n                                        ) {\n                                            return;\n                                        }\n\n                                        // If values are the same, exit, do not update current search term.\n                                        if (inputValue === this.state.inputValue) {\n                                            return;\n                                        }\n\n                                        this.setState(\n                                            state => ({\n                                                ...state,\n                                                inputValue\n                                            }),\n                                            () => {\n                                                onInput && onInput(inputValue);\n                                            }\n                                        );\n                                    }\n                                })}\n                            />\n                            {!otherInputProps.disabled &&\n                                !otherInputProps.readOnly &&\n                                this.renderOptions({\n                                    ...rest,\n                                    options,\n                                    placement\n                                })}\n                        </div>\n                    )}\n                </Downshift>\n            </div>\n        );\n    }\n}\n\nexport { AutoComplete };\n"],"mappings":";;;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,UAAA,GAAAJ,OAAA;AACA,IAAAK,WAAA,GAAAL,OAAA;AACA,IAAAM,QAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,OAAA,GAAAP,OAAA;AAEA,IAAAQ,MAAA,GAAAR,OAAA;AACA,IAAAS,QAAA,GAAAV,sBAAA,CAAAC,OAAA;AACA,IAAAU,qBAAA,GAAAX,sBAAA,CAAAC,OAAA;AACA,IAAAW,QAAA,GAAAX,OAAA;AAA8B,IAAAY,SAAA;EAAAC,UAAA;AAE9B,IAAMC,UAAU,gBAAG,IAAAC,YAAG,EAAC;EACnBC,GAAG,EAAE,kBAAkB;EACvBC,MAAM,EAAE;AACZ,CAAC,sBAAC;AAEF,IAAMC,UAAU,gBAAG,IAAAH,YAAG,EAAC;EACnB,8BAA8B,EAAE;IAC5BI,SAAS,EAAE,MAAM;IACjBC,WAAW,EAAE,CAAC;IACd,MAAM,EAAE;MACJC,MAAM,EAAE;IACZ;EACJ;AACJ,CAAC,sBAAC;AAAC,IAESC,SAAS,0BAATA,SAAS;EAATA,SAAS;EAATA,SAAS;EAAA,OAATA,SAAS;AAAA;AAAAC,OAAA,CAAAD,SAAA,GAAAA,SAAA;AA0BrB,IAAME,OAAiB,GAAG,SAApBA,OAAiBA,CAAA,EAAS;EAC5B,oBACI1B,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAAChB,qBAAA,CAAAe,OAAe;IACZE,IAAI,EAAE,EAAG;IACTC,YAAY,EAAE,0BAA2B;IACzCC,YAAY,EAAE,CAAE;IAChBC,OAAO;EAAA,CACV,CAAC;AAEV,CAAC;AAaD,IAAMC,WAAuC,GAAG,SAA1CA,WAAuCA,CAAAC,IAAA,EAA8C;EAAA,IAAxCC,SAAS,GAAAD,IAAA,CAATC,SAAS;IAAEC,YAAY,GAAAF,IAAA,CAAZE,YAAY;IAAEC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;EAChF,oBACIrC,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAACtB,UAAA,CAAAgC,SAAS;IACNC,CAAC,EAAE,CAAE;IACLC,SAAS,EAAE,IAAAC,mBAAU,MAAAC,gBAAA,CAAAf,OAAA,MAChBX,UAAU,EAAGmB,SAAS,KAAKX,SAAS,CAACN,GAAG,CAC5C;EAAE,gBAEHlB,MAAA,CAAA2B,OAAA,CAAAC,aAAA,OAAAe,MAAA,CAAAC,MAAA;IACIJ,SAAS,EAAE,IAAAC,mBAAU,EAAC,4BAA4B,EAAErB,UAAU;EAAE,GAC5DgB,YAAY,CAAC,CAAC,GAEjBC,QACD,CACG,CAAC;AAEpB,CAAC;AAAC,IAEIQ,YAAY,0BAAAC,gBAAA;EAAA,IAAAC,UAAA,CAAApB,OAAA,EAAAkB,YAAA,EAAAC,gBAAA;EAAA,IAAAE,MAAA,OAAAC,aAAA,CAAAtB,OAAA,EAAAkB,YAAA;EAAA,SAAAA,aAAA;IAAA,IAAAK,KAAA;IAAA,IAAAC,gBAAA,CAAAxB,OAAA,QAAAkB,YAAA;IAAA,SAAAO,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;MAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;IAAA;IAAAP,KAAA,GAAAF,MAAA,CAAAU,IAAA,CAAAC,KAAA,CAAAX,MAAA,SAAAY,MAAA,CAAAL,IAAA;IAAA,IAAAb,gBAAA,CAAAf,OAAA,MAAAkC,uBAAA,CAAAlC,OAAA,EAAAuB,KAAA,YAkBiB;MAC3BY,UAAU,EAAE;IAChB,CAAC;IAED;AACJ;AACA;IAFI,IAAApB,gBAAA,CAAAf,OAAA,MAAAkC,uBAAA,CAAAlC,OAAA,EAAAuB,KAAA,6BAGiBa,cAAK,CAACC,SAAS,CAAC,CAAC;IAAA,OAAAd,KAAA;EAAA;EAAA,IAAAe,aAAA,CAAAtC,OAAA,EAAAkB,YAAA;IAAAqB,GAAA;IAAAC,KAAA,EAElC,SAAAC,mBAAmCC,aAAgC,EAAE;MAAA,IAAAC,MAAA;MACjE,IAAAC,WAAA,GAA2B,IAAI,CAACC,KAAK;QAA7BL,KAAK,GAAAI,WAAA,CAALJ,KAAK;QAAEM,OAAO,GAAAF,WAAA,CAAPE,OAAO;MACtB,IAAeC,aAAa,GAAKL,aAAa,CAAtCF,KAAK;MAEb,IAAI,CAAC,IAAAQ,gBAAO,EAACR,KAAK,EAAEO,aAAa,CAAC,EAAE;QAChC,IAAIE,IAAI,GAAG,IAAI;QAEf,IAAIT,KAAK,EAAE;UACP,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;YAC3BS,IAAI,GAAGT,KAAK;UAChB,CAAC,MAAM;YACHS,IAAI,GACAH,OAAO,CAACI,IAAI,CAAC,UAAAC,MAAM,EAAI;cACnB,OAAOX,KAAK,KAAK,IAAAY,qBAAc,EAACD,MAAM,EAAER,MAAI,CAACE,KAAK,CAAC;YACvD,CAAC,CAAC,IAAI,IAAI;UAClB;QACJ;QAEA,IAAiBQ,SAAS,GAAK,IAAI,CAACA,SAAS,CAArCC,OAAO;QACfD,SAAS,IAAIA,SAAS,CAACE,UAAU,CAACN,IAAI,CAAC;MAC3C;IACJ;;IAEA;AACJ;AACA;EAFI;IAAAV,GAAA;IAAAC,KAAA,EAGA,SAAAgB,cAAAC,KAAA,EAQwB;MAAA,IAAAC,MAAA;MAAA,IAPpBZ,OAAO,GAAAW,KAAA,CAAPX,OAAO;QACPa,MAAM,GAAAF,KAAA,CAANE,MAAM;QACNC,gBAAgB,GAAAH,KAAA,CAAhBG,gBAAgB;QAChBC,YAAY,GAAAJ,KAAA,CAAZI,YAAY;QACZpD,YAAY,GAAAgD,KAAA,CAAZhD,YAAY;QACZqD,YAAY,GAAAL,KAAA,CAAZK,YAAY;QACZtD,SAAS,GAAAiD,KAAA,CAATjD,SAAS;MAET,IAAI,CAACmD,MAAM,EAAE;QACT,OAAO,IAAI;MACf;MACA;AACR;AACA;MACQ,IAAI,CAAC,IAAI,CAACI,KAAK,CAAC5B,UAAU,IAAI,CAACW,OAAO,CAACnB,MAAM,EAAE;QAC3C,oBACItD,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAACK,WAAW;UAACE,SAAS,EAAEA,SAAU;UAACC,YAAY,EAAEA;QAAa,gBAC1DpC,MAAA,CAAA2B,OAAA,CAAAC,aAAA,0BACI5B,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAACrB,WAAA,CAAAoF,UAAU;UAACC,GAAG,EAAE;QAAQ,GAAC,4BAAsC,CAChE,CACK,CAAC;MAEtB;MAEA,IAAQC,UAAU,GAAK,IAAI,CAACrB,KAAK,CAAzBqB,UAAU;MAElB,IAAMC,QAAQ,GAAGrB,OAAO,CAACsB,MAAM,CAAC,UAAAnB,IAAI,EAAI;QACpC;QACA,IAAI,CAACS,MAAI,CAACK,KAAK,CAAC5B,UAAU,EAAE;UACxB,OAAO,IAAI;QACf;QAEA,IAAIc,IAAI,CAACoB,OAAO,EAAE;UACd,OAAO,IAAAC,oBAAa,EAACrB,IAAI,EAAES,MAAI,CAACK,KAAK,CAAC5B,UAAU,CAAC;QACrD;QAEA,OAAO,IAAAoC,oBAAa,EAACtB,IAAI,EAAES,MAAI,CAACb,KAAK,CAAC,CACjC2B,WAAW,CAAC,CAAC,CACbC,QAAQ,CAACf,MAAI,CAACK,KAAK,CAAC5B,UAAU,CAACqC,WAAW,CAAC,CAAC,CAAC;MACtD,CAAC,CAAC;MAEF,IAAI,CAACL,QAAQ,CAACxC,MAAM,EAAE;QAClB,oBACItD,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAACK,WAAW;UAACE,SAAS,EAAEA,SAAU;UAACC,YAAY,EAAEA;QAAa,gBAC1DpC,MAAA,CAAA2B,OAAA,CAAAC,aAAA,0BACI5B,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAACrB,WAAA,CAAAoF,UAAU;UAACC,GAAG,EAAE;QAAQ,GAAC,aAAuB,CAAC,EACjD,IAAI,CAACpB,KAAK,CAAC6B,aACZ,CACK,CAAC;MAEtB;MAEA,oBACIrG,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAACK,WAAW;QAACE,SAAS,EAAEA,SAAU;QAACC,YAAY,EAAEA;MAAa,GACzD0D,QAAQ,CAACQ,GAAG,CAAC,UAAC1B,IAAI,EAAE2B,KAAK,EAAK;QAAA,IAAAC,eAAA;QAC3B,IAAMC,SAAS,GAAG,IAAA1B,qBAAc,EAACH,IAAI,EAAES,MAAI,CAACb,KAAK,CAAC;;QAElD;QACA,IAAMkC,cAAc,IAAAF,eAAA,WAAA9D,gBAAA,CAAAf,OAAA,EAAA6E,eAAA,EACfG,sBAAc,EAAG,IAAI,OAAAjE,gBAAA,CAAAf,OAAA,EAAA6E,eAAA,iBACTjB,gBAAgB,KAAKgB,KAAK,OAAA7D,gBAAA,CAAAf,OAAA,EAAA6E,eAAA,cAC7B,KAAK,GAAAA,eAAA,CAClB;;QAED;QACA,IAAIhB,YAAY,IAAI,IAAAT,qBAAc,EAACS,YAAY,EAAEH,MAAI,CAACb,KAAK,CAAC,KAAKiC,SAAS,EAAE;UACxEC,cAAc,CAACE,QAAQ,GAAG,IAAI;QAClC;;QAEA;QACA,oBACI5G,MAAA,CAAA2B,OAAA,CAAAC,aAAA,OAAAe,MAAA,CAAAC,MAAA;UACIsB,GAAG,EAAEuC;QAAU,GACXhB,YAAY,CAAC;UACbc,KAAK,EAALA,KAAK;UACL3B,IAAI,EAAJA,IAAI;UACJpC,SAAS,EAAE,IAAAC,mBAAU,EAACiE,cAAc;QACxC,CAAC,CAAC,GAEDb,UAAU,CAACnC,IAAI,CAAC2B,MAAI,EAAET,IAAI,EAAE2B,KAAK,CAClC,CAAC;MAEb,CAAC,CACQ,CAAC;IAEtB;EAAC;IAAArC,GAAA;IAAAC,KAAA,EAED,SAAA0C,OAAA,EAAyB;MAAA,IAAAC,MAAA;MACrB,IAAAC,YAAA,GAcI,IAAI,CAACvC,KAAK;QAbVhC,SAAS,GAAAuE,YAAA,CAATvE,SAAS;QACTiC,OAAO,GAAAsC,YAAA,CAAPtC,OAAO;QACPuC,SAAQ,GAAAD,YAAA,CAARC,QAAQ;QACR7C,KAAK,GAAA4C,YAAA,CAAL5C,KAAK;QAGL8C,OAAO,GAAAF,YAAA,CAAPE,OAAO;QAAAC,qBAAA,GAAAH,YAAA,CACPI,UAAU;QAAVA,UAAU,GAAAD,qBAAA,cAAG;UACTE,OAAO,EAAE,IAAI;UACbC,OAAO,EAAE;QACb,CAAC,GAAAH,qBAAA;QACD/E,SAAS,GAAA4E,YAAA,CAAT5E,SAAS;QACNmF,eAAe,OAAAC,yBAAA,CAAA5F,OAAA,EAAAoF,YAAA,EAAAjG,SAAA;;MAGtB;MACA,IAAM0G,cAAc,GAAG;QACnBhF,SAAS,EAAEiF,yBAAiB;QAC5BC,YAAY,EAAE,SAAAA,aAAC9C,IAAS;UAAA,OAAK,IAAAsB,oBAAa,EAACtB,IAAI,EAAEkC,MAAI,CAACtC,KAAK,CAAC;QAAA;QAC5DmD,mBAAmB,EAAExD,KAAK;QAC1B6C,QAAQ,EAAE,SAAAA,SAACY,SAAiB,EAAK;UAC7B,IAAI,CAACA,SAAS,IAAI,CAACZ,SAAQ,EAAE;YACzB;UACJ;UACAA,SAAQ,CAAC,IAAAjC,qBAAc,EAAC6C,SAAS,EAAEd,MAAI,CAACtC,KAAK,CAAC,EAAEoD,SAAS,CAAC;UAC1Dd,MAAI,CAACe,QAAQ,CAAC,UAAAnC,KAAK;YAAA,WAAAoC,cAAA,CAAAnG,OAAA,MAAAmG,cAAA,CAAAnG,OAAA,MACZ+D,KAAK;cACR5B,UAAU,EAAE;YAAE;UAAA,CAChB,CAAC;QACP;MACJ,CAAC;MAED,oBACI9D,MAAA,CAAA2B,OAAA,CAAAC,aAAA;QACIY,SAAS,EAAE,IAAAC,mBAAU,EACjBgF,yBAAiB,EACjB,IAAI,CAACjD,KAAK,CAAC3C,IAAI,mCAAA+B,MAAA,CAAmC,IAAI,CAACY,KAAK,CAAC3C,IAAI,IAAK,IAAI,EAC1EW,SACJ;MAAE,gBAEFxC,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAACzB,UAAA,CAAAwB,OAAS,EAAAgB,MAAA,CAAAC,MAAA,KAAK4E,cAAc;QAAEO,GAAG,EAAE,IAAI,CAAC/C;MAAU,IAC9C,UAAAgD,KAAA;QAAA,IAAGC,aAAa,GAAAD,KAAA,CAAbC,aAAa;UAAEC,QAAQ,GAAAF,KAAA,CAARE,QAAQ;UAAKC,IAAI,OAAAZ,yBAAA,CAAA5F,OAAA,EAAAqG,KAAA,EAAAjH,UAAA;QAAA,oBAChCf,MAAA,CAAA2B,OAAA,CAAAC,aAAA,2BACI5B,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAACxB,MAAA,CAAAgI,KAAK,EACEH,aAAa,KAAAH,cAAA,CAAAnG,OAAA,MAAAmG,cAAA,CAAAnG,OAAA;UACb;UACA0G,YAAY,EAAEvB,MAAI,CAACtC,KAAK,CAAC8D,OAAO,iBAAItI,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAACF,OAAO,MAAE;QAAC,GAC5C4F,eAAe;UAClB;UACAzF,IAAI,EAAEiF,MAAI,CAACtC,KAAK,CAAC3C,IAAI;UACrB;UACAsF,UAAU,EAAVA,UAAU;UACVoB,WAAW,EAAE,IAAI;UACjBvB,QAAQ,EAAE,SAAAA,SAAAwB,EAAE;YAAA,OAAIA,EAAE;UAAA;UAClBC,MAAM,EAAE,SAAAA,OAAAD,EAAE;YAAA,OAAIA,EAAE;UAAA;UAChBE,OAAO,EAAE,SAAAA,QAAAF,EAAE,EAAI;YACXN,QAAQ,CAAC,CAAC;YACVZ,eAAe,CAACoB,OAAO,IAAIpB,eAAe,CAACoB,OAAO,CAACF,EAAE,CAAC;UAC1D,CAAC;UACDG,SAAS,EAAE,SAAAA,UAACH,EAAyC,EAAK;YACtD,IAAMI,OAAe,GAAG,IAAAC,gBAAO,EAACL,EAAsB,CAAC;YAEvD,IAAII,OAAO,KAAK,WAAW,EAAE;cACzBE,UAAU,CAAC,YAAM;gBACb,IAAI9B,SAAQ,EAAE;kBACVA,SAAQ,CAAC,IAAI,CAAC;kBACdkB,QAAQ,CAAC,CAAC;gBACd;cACJ,CAAC,EAAE,EAAE,CAAC;YACV;UACJ,CAAC;UACDa,OAAO,EAAE,SAAAA,QAACP,EAAyC,EAAK;YACpD,IAAMI,OAAe,GAAG,IAAAC,gBAAO,EAACL,EAAsB,CAAC;YAEvD,IAAMQ,MAAM,GAAGR,EAAE,CAACS,aAAa;YAC/B,IAAMnF,UAAU,GAAGkF,MAAM,CAAC7E,KAAK,IAAI,EAAE;;YAErC;YACA,IACIyE,OAAO,IACPA,OAAO,CAACtF,MAAM,GAAG,CAAC,IAClBsF,OAAO,KAAK,WAAW,EACzB;cACE;YACJ;;YAEA;YACA,IAAI9E,UAAU,KAAKgD,MAAI,CAACpB,KAAK,CAAC5B,UAAU,EAAE;cACtC;YACJ;YAEAgD,MAAI,CAACe,QAAQ,CACT,UAAAnC,KAAK;cAAA,WAAAoC,cAAA,CAAAnG,OAAA,MAAAmG,cAAA,CAAAnG,OAAA,MACE+D,KAAK;gBACR5B,UAAU,EAAVA;cAAU;YAAA,CACZ,EACF,YAAM;cACFmD,OAAO,IAAIA,OAAO,CAACnD,UAAU,CAAC;YAClC,CACJ,CAAC;UACL;QAAC,EACJ,CACJ,CAAC,EACD,CAACwD,eAAe,CAAC4B,QAAQ,IACtB,CAAC5B,eAAe,CAAC6B,QAAQ,IACzBrC,MAAI,CAAC3B,aAAa,KAAA2C,cAAA,CAAAnG,OAAA,MAAAmG,cAAA,CAAAnG,OAAA,MACXwG,IAAI;UACP1D,OAAO,EAAPA,OAAO;UACPtC,SAAS,EAATA;QAAS,EACZ,CACJ,CAAC;MAAA,CAEH,CACV,CAAC;IAEd;EAAC;EAAA,OAAAU,YAAA;AAAA,EAlQsBkB,cAAK,CAACqF,SAAS;AAAA3H,OAAA,CAAAoB,YAAA,GAAAA,YAAA;AAAA,IAAAH,gBAAA,CAAAf,OAAA,EAApCkB,YAAY,kBACoC;EAC9CwG,SAAS,EAAE,IAAI;EACfC,QAAQ,EAAE,MAAM;EAChB7E,OAAO,EAAE,EAAE;EACXtC,SAAS,EAAEX,SAAS,CAACL,MAAM;EAC3B;AACR;AACA;EACQ0E,UAAU,WAAAA,WAACjB,IAAS,EAAE;IAClB,oBACI5E,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAACrB,WAAA,CAAAoF,UAAU;MAACC,GAAG,EAAE;IAAQ,GACpB,IAAAM,oBAAa,EAACtB,IAAI,EAAG,IAAI,CAA6BJ,KAAK,CACpD,CAAC;EAErB;AACJ,CAAC"}

package/AutoComplete/AutoComplete.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["story","storiesOf","module","options","name","id","add","readme","country","Bind","JSON","stringify","info","propTables","AutoComplete"],"sources":["AutoComplete.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./AutoCompleteReadme.md\";\n\nimport { Form } from \"@webiny/form\";\nimport { AutoComplete } from \"./AutoComplete\";\n\nconst story = storiesOf(\"Components/AutoComplete\", module);\n\nconst options = [\n    { name: \"France\", id: \"france\" },\n    { name: \"Germany\", id: \"germany\" },\n    { name: \"Italy\", id: \"italy\" },\n    { name: \"Spain\", id: \"spain\" },\n    { name: \"UK\", id: \"uk\" },\n    { name: \"US\", id: \"us\" },\n    { name: \"Norway\", id: \"norway\" },\n    { name: \"Finland\", id: \"finland\" },\n    { name: \"Czech Republic\", id: \"czech-republic\" }\n];\n\nstory.add(\n    \"AutoComplete\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Single value\"}>\n                        <Form data={{ country: { id: \"italy\", name: \"Italy\" } }}>\n                            {({ Bind }) => (\n                                <Bind name=\"country\">\n                                    <AutoComplete\n                                        options={options}\n                                        label=\"Country\"\n                                        description=\"Choose your country\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Form>\n                        {({ Bind }) => (\n                             <Bind name=\"country\">\n                                <AutoComplete\n                                    options={${JSON.stringify(options)}}\n                                    label=\"Country\"\n                                    description=\"Choose your country.\"\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n\n                <StorySandbox>\n                    <StorySandboxExample title={\"Single value - use simple strings\"}>\n                        <Form data={{ country: \"Germany\" }}>\n                            {({ Bind }) => (\n                                <Bind name=\"country\">\n                                    <AutoComplete\n                                        useSimpleValues\n                                        options={[\"France\", \"Germany\", \"Italy\", \"Spain\"]}\n                                        label=\"Country\"\n                                        description=\"Choose your country\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Form data={{ country: \"Germany\" }}>\n                        {({ Bind }) => (\n                            <Bind name=\"country\">\n                                <AutoComplete\n                                    useSimpleValues\n                                    options={[\"France\", \"Germany\", \"Italy\", \"Spain\"]}\n                                    label=\"Country\"\n                                    description=\"Choose your country\"\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [AutoComplete] } }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AAOA;AAEA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,yBAAyB,EAAEC,MAAM,CAAC;AAE1D,IAAMC,OAAO,GAAG,CACZ;EAAEC,IAAI,EAAE,QAAQ;EAAEC,EAAE,EAAE;AAAS,CAAC,EAChC;EAAED,IAAI,EAAE,SAAS;EAAEC,EAAE,EAAE;AAAU,CAAC,EAClC;EAAED,IAAI,EAAE,OAAO;EAAEC,EAAE,EAAE;AAAQ,CAAC,EAC9B;EAAED,IAAI,EAAE,OAAO;EAAEC,EAAE,EAAE;AAAQ,CAAC,EAC9B;EAAED,IAAI,EAAE,IAAI;EAAEC,EAAE,EAAE;AAAK,CAAC,EACxB;EAAED,IAAI,EAAE,IAAI;EAAEC,EAAE,EAAE;AAAK,CAAC,EACxB;EAAED,IAAI,EAAE,QAAQ;EAAEC,EAAE,EAAE;AAAS,CAAC,EAChC;EAAED,IAAI,EAAE,SAAS;EAAEC,EAAE,EAAE;AAAU,CAAC,EAClC;EAAED,IAAI,EAAE,gBAAgB;EAAEC,EAAE,EAAE;AAAiB,CAAC,CACnD;AAEDL,KAAK,CAACM,GAAG,CACL,cAAc,EACd,YAAM;EACF,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,2BAAM,CAAe,eACnC,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB;IAAC,KAAK,EAAE;EAAe,gBACvC,6BAAC,UAAI;IAAC,IAAI,EAAE;MAAEC,OAAO,EAAE;QAAEH,EAAE,EAAE,OAAO;QAAED,IAAI,EAAE;MAAQ;IAAE;EAAE,GACnD;IAAA,IAAGK,IAAI,QAAJA,IAAI;IAAA,oBACJ,6BAAC,IAAI;MAAC,IAAI,EAAC;IAAS,gBAChB,6BAAC,0BAAY;MACT,OAAO,EAAEN,OAAQ;MACjB,KAAK,EAAC,SAAS;MACf,WAAW,EAAC;IAAqB,EACnC,CACC;EAAA,CACV,CACE,CACW,eACtB,6BAAC,uBAAgB,4OAMUO,IAAI,CAACC,SAAS,CAACR,OAAO,CAAC,gSAQ/B,CACR,eAEf,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB;IAAC,KAAK,EAAE;EAAoC,gBAC5D,6BAAC,UAAI;IAAC,IAAI,EAAE;MAAEK,OAAO,EAAE;IAAU;EAAE,GAC9B;IAAA,IAAGC,IAAI,SAAJA,IAAI;IAAA,oBACJ,6BAAC,IAAI;MAAC,IAAI,EAAC;IAAS,gBAChB,6BAAC,0BAAY;MACT,eAAe;MACf,OAAO,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,CAAE;MACjD,KAAK,EAAC,SAAS;MACf,WAAW,EAAC;IAAqB,EACnC,CACC;EAAA,CACV,CACE,CACW,eACtB,6BAAC,uBAAgB,ioBAeE,CACR,CACX;AAEhB,CAAC,EACD;EAAEG,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,0BAAY;EAAE;AAAE,CAAC,CAC3C"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_react2","_Story","_AutoCompleteReadme","_form","_AutoComplete","story","storiesOf","module","options","name","id","add","default","createElement","Story","StoryReadme","readme","StorySandbox","StorySandboxExample","title","Form","data","country","_ref","Bind","AutoComplete","label","description","StorySandboxCode","concat","JSON","stringify","_ref2","useSimpleValues","info","propTables"],"sources":["AutoComplete.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./AutoCompleteReadme.md\";\n\nimport { Form } from \"@webiny/form\";\nimport { AutoComplete } from \"./AutoComplete\";\n\nconst story = storiesOf(\"Components/AutoComplete\", module);\n\nconst options = [\n    { name: \"France\", id: \"france\" },\n    { name: \"Germany\", id: \"germany\" },\n    { name: \"Italy\", id: \"italy\" },\n    { name: \"Spain\", id: \"spain\" },\n    { name: \"UK\", id: \"uk\" },\n    { name: \"US\", id: \"us\" },\n    { name: \"Norway\", id: \"norway\" },\n    { name: \"Finland\", id: \"finland\" },\n    { name: \"Czech Republic\", id: \"czech-republic\" }\n];\n\nstory.add(\n    \"AutoComplete\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Single value\"}>\n                        <Form data={{ country: { id: \"italy\", name: \"Italy\" } }}>\n                            {({ Bind }) => (\n                                <Bind name=\"country\">\n                                    <AutoComplete\n                                        options={options}\n                                        label=\"Country\"\n                                        description=\"Choose your country\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Form>\n                        {({ Bind }) => (\n                             <Bind name=\"country\">\n                                <AutoComplete\n                                    options={${JSON.stringify(options)}}\n                                    label=\"Country\"\n                                    description=\"Choose your country.\"\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n\n                <StorySandbox>\n                    <StorySandboxExample title={\"Single value - use simple strings\"}>\n                        <Form data={{ country: \"Germany\" }}>\n                            {({ Bind }) => (\n                                <Bind name=\"country\">\n                                    <AutoComplete\n                                        useSimpleValues\n                                        options={[\"France\", \"Germany\", \"Italy\", \"Spain\"]}\n                                        label=\"Country\"\n                                        description=\"Choose your country\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Form data={{ country: \"Germany\" }}>\n                        {({ Bind }) => (\n                            <Bind name=\"country\">\n                                <AutoComplete\n                                    useSimpleValues\n                                    options={[\"France\", \"Germany\", \"Italy\", \"Spain\"]}\n                                    label=\"Country\"\n                                    description=\"Choose your country\"\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [AutoComplete] } }\n);\n"],"mappings":"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"}

package/AutoComplete/MultiAutoComplete.js

@@ -113,6 +113,9 @@ var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
       reorderFormVisible: "",
       reorderFormValue: ""
     });
+    /**
+     * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.
+     */
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "downshift", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "assignedValueAfterClearing", {
       set: false,