@webiny/ui 5.24.0 → 5.25.0-beta.0

package/List/List.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["List.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","readme","Icon","ButtonPrimary","ReactComponent","AutoRenewIcon","CloudDoneIcon","BaselineDeleteIcon","BaselineDoneIcon","List","ListItem","ListItemText","ListItemTextSecondary","ListItemMeta","ListItemGraphic","ListItemTextPrimary","story","module","add","info","propTables"],"mappings":"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","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 \"./../List/README.md\";\n\nimport { Icon } from \"./../Icon\";\nimport { ButtonPrimary } from \"./../Button\";\n\nimport { ReactComponent as AutoRenewIcon } from \"./icons/baseline-autorenew-24px.svg\";\nimport { ReactComponent as CloudDoneIcon } from \"./icons/baseline-cloud_done-24px.svg\";\nimport { ReactComponent as BaselineDeleteIcon } from \"./icons/baseline-delete-24px.svg\";\nimport { ReactComponent as BaselineDoneIcon } from \"./icons/baseline-done-24px.svg\";\n\nimport {\n    List,\n    ListItem,\n    ListItemText,\n    ListItemTextSecondary,\n    ListItemMeta,\n    ListItemGraphic,\n    ListItemTextPrimary\n} from \"./List\";\n\nconst story = storiesOf(\"Components/List\", module);\n\nstory.add(\n    \"simple list\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Basic list\"}>\n                        <List>\n                            <ListItem>Item 1</ListItem>\n                            <ListItem>\n                                <ListItemGraphic>\n                                    <Icon icon={<BaselineDeleteIcon />} />\n                                </ListItemGraphic>\n                                Item 2 - with icon on left side\n                            </ListItem>\n                            <ListItem>\n                                Item 3 - with icon on right side\n                                <ListItemMeta>\n                                    <Icon icon={<BaselineDoneIcon />} />\n                                </ListItemMeta>\n                            </ListItem>\n                            <ListItem>\n                                <ListItemGraphic>\n                                    <Icon icon={<BaselineDeleteIcon />} />\n                                </ListItemGraphic>\n                                Item 4 - icons on both sides\n                                <ListItemMeta>\n                                    <Icon icon={<BaselineDoneIcon />} />\n                                </ListItemMeta>\n                            </ListItem>\n                        </List>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <List>\n                        <ListItem>\n                            Item 1\n                        </ListItem>\n\n                        <ListItem>\n                            <ListItemGraphic>\n                                <Icon icon={<BaselineDeleteIcon />} />\n                            </ListItemGraphic>\n                            Item 2 - with icon on left side\n                        </ListItem>\n                        <ListItem>\n                            Item 3 - with icon on right side\n                            <ListItemMeta>\n                                <Icon icon={<BaselineDoneIcon />} />\n                            </ListItemMeta>\n                        </ListItem>\n                        <ListItem>\n                            <ListItemGraphic>\n                                <Icon icon={<BaselineDeleteIcon />} />\n                            </ListItemGraphic>\n                            Item 4 - icons on both sides\n                            <ListItemMeta>\n                                <Icon icon={<BaselineDoneIcon />} />\n                            </ListItemMeta>\n                        </ListItem>\n                    </List>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n\n                <StorySandbox>\n                    <StorySandboxExample title={\"List with 2 lines\"}>\n                        <List twoLine>\n                            <ListItem>\n                                <ListItemText>\n                                    <ListItemTextPrimary>Primary text</ListItemTextPrimary>\n                                    <ListItemTextSecondary>Secondary text</ListItemTextSecondary>\n                                </ListItemText>\n                            </ListItem>\n                            <ListItem>\n                                <ListItemText>\n                                    <ListItemTextPrimary>Primary text</ListItemTextPrimary>\n                                    <ListItemTextSecondary>Secondary text</ListItemTextSecondary>\n                                </ListItemText>\n                            </ListItem>\n                            <ListItem>\n                                <ListItemText>\n                                    <ListItemTextPrimary>Primary text</ListItemTextPrimary>\n                                    <ListItemTextSecondary>Secondary text</ListItemTextSecondary>\n                                </ListItemText>\n                            </ListItem>\n                        </List>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <List twoLine>\n                        <ListItem>\n                            <ListItemText>\n                                <ListItemTextPrimary>\n                                    Primary text\n                                </ListItemTextPrimary>\n                                <ListItemTextSecondary>\n                                    Secondary text\n                                </ListItemTextSecondary>\n                            </ListItemText>\n                        </ListItem>\n                        <ListItem>\n                            <ListItemText>\n                                <ListItemTextPrimary>\n                                    Primary text\n                                </ListItemTextPrimary>\n                                <ListItemTextSecondary>\n                                    Secondary text\n                                </ListItemTextSecondary>\n                            </ListItemText>\n                        </ListItem>\n                        <ListItem>\n                            <ListItemText>\n                                <ListItemTextPrimary>\n                                    Primary text\n                                </ListItemTextPrimary>\n                                <ListItemTextSecondary>\n                                    Secondary text\n                                </ListItemTextSecondary>\n                            </ListItemText>\n                        </ListItem>\n                    </List>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n\n                <StorySandbox>\n                    <StorySandboxExample title={\"A list with all possible options\"}>\n                        <List twoLine>\n                            <ListItem>\n                                <ListItemGraphic>\n                                    <Icon icon={<AutoRenewIcon />} />\n                                </ListItemGraphic>\n                                <ListItemText>\n                                    <ListItemTextPrimary>Rocket</ListItemTextPrimary>\n                                    <ListItemTextSecondary>\n                                        This could be a really cool rocket.\n                                    </ListItemTextSecondary>\n                                </ListItemText>\n                                <ListItemMeta>\n                                    <Icon icon={<CloudDoneIcon />} />\n                                </ListItemMeta>\n                            </ListItem>\n\n                            <ListItem>\n                                <ListItemGraphic>\n                                    <Icon icon={<BaselineDeleteIcon />} />\n                                </ListItemGraphic>\n                                <ListItemText>\n                                    <ListItemTextPrimary>Coffee</ListItemTextPrimary>\n                                    <ListItemTextSecondary>\n                                        A nice cup of coffee.\n                                    </ListItemTextSecondary>\n                                </ListItemText>\n                                <ListItemMeta>\n                                    <Icon icon={<BaselineDoneIcon />} />\n                                </ListItemMeta>\n                            </ListItem>\n                            <ListItem>\n                                <ListItemGraphic>\n                                    <Icon icon={<AutoRenewIcon />} />\n                                </ListItemGraphic>\n                                <ListItemText>\n                                    <ListItemTextPrimary>E-mail</ListItemTextPrimary>\n                                    <ListItemTextSecondary>\n                                        Send an e-mail to your best friend.\n                                    </ListItemTextSecondary>\n                                </ListItemText>\n                                <ListItemMeta>\n                                    <ButtonPrimary>Send</ButtonPrimary>\n                                </ListItemMeta>\n                            </ListItem>\n                        </List>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <List twoLine>\n                        <ListItem>\n                            <ListItemGraphic>\n                                <Icon icon={<AutoRenewIcon />} />\n                            </ListItemGraphic>\n                            <ListItemText>\n                                <ListItemTextPrimary>Rocket</ListItemTextPrimary>\n                                <ListItemTextSecondary>\n                                    This could be a really cool rocket.\n                                </ListItemTextSecondary>\n                            </ListItemText>\n                            <ListItemMeta>\n                                <Icon icon={<CloudDoneIcon />} />\n                            </ListItemMeta>\n                        </ListItem>\n\n                        <ListItem>\n                            <ListItemGraphic>\n                                <Icon icon={<BaselineDeleteIcon />} />\n                            </ListItemGraphic>\n                            <ListItemText>\n                                <ListItemTextPrimary>Coffee</ListItemTextPrimary>\n                                <ListItemTextSecondary>A nice cup of coffee.</ListItemTextSecondary>\n                            </ListItemText>\n                            <ListItemMeta>\n                                <Icon icon={<BaselineDoneIcon />} />\n                            </ListItemMeta>\n                        </ListItem>\n                        <ListItem>\n                            <ListItemGraphic>\n                                <Icon icon={<AutoRenewIcon />} />\n                            </ListItemGraphic>\n                            <ListItemText>\n                                <ListItemTextPrimary>E-mail</ListItemTextPrimary>\n                                <ListItemTextSecondary>\n                                    Send an e-mail to your best friend.\n                                </ListItemTextSecondary>\n                            </ListItemText>\n                            <ListItemMeta>\n                                <ButtonPrimary>Send</ButtonPrimary>\n                            </ListItemMeta>\n                        </ListItem>\n                    </List>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    {\n        info: {\n            propTables: [\n                List,\n                ListItem,\n                ListItemText,\n                ListItemTextSecondary,\n                ListItemMeta,\n                ListItemGraphic,\n                ListItemTextPrimary\n            ]\n        }\n    }\n);\n"]}

package/List/icons/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["refreshIcon","deleteIcon"],"mappings":"AAAA,OAAOA,WAAP;AACA,OAAOC,UAAP;AAEA,SAASD,WAAT,EAAsBC,UAAtB","sourcesContent":["import refreshIcon from \"./baseline-autorenew-24px.svg\";\nimport deleteIcon from \"./baseline-delete-24px.svg\";\n\nexport { refreshIcon, deleteIcon };\n"]}

package/List/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["DataList","ScrollList","DataListModalOverlay","DataListModalOverlayAction","CollapsibleList"],"mappings":"AAAA;AAEA,SAASA,QAAT,EAAmBC,UAAnB,EAA+BC,oBAA/B,EAAqDC,0BAArD;AACA,SAASC,eAAT","sourcesContent":["export * from \"./List\";\n\nexport { DataList, ScrollList, DataListModalOverlay, DataListModalOverlayAction } from \"./DataList\";\nexport { CollapsibleList } from \"./CollapsibleList\";\n"]}

package/Menu/Menu.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { MenuProps as RmwcMenuProps, MenuItemProps as BaseMenuItemProps } from "@rmwc/menu";
 declare type MenuProps = RmwcMenuProps & {
     children: React.ReactNode;
@@ -9,32 +9,30 @@ declare type MenuProps = RmwcMenuProps & {
     onClose?: () => void;
     "data-testid"?: string;
 };
-declare type State = {
+interface MenuState {
     menuIsOpen: boolean;
-};
+}
 /**
  * Use Menu component to display a list of choices, once the handler is triggered.
  */
-declare class Menu extends React.Component<MenuProps, State> {
+declare class Menu extends React.Component<MenuProps, MenuState> {
     static defaultProps: Partial<MenuProps>;
-    state: {
-        menuIsOpen: boolean;
-    };
+    state: MenuState;
     anchorRef: React.RefObject<unknown>;
     menuRef: React.RefObject<unknown>;
-    openMenu: () => void;
-    closeMenu: () => void;
-    renderMenuWithPortal: () => JSX.Element;
-    renderCustomContent: () => JSX.Element;
-    renderMenuContent: () => JSX.Element;
-    render(): JSX.Element;
+    private readonly openMenu;
+    private readonly closeMenu;
+    private readonly renderMenuWithPortal;
+    private readonly renderCustomContent;
+    private readonly renderMenuContent;
+    render(): React.ReactNode;
 }
-declare const MenuDivider: () => JSX.Element;
+declare const MenuDivider: React.FC;
 interface MenuItemProps extends BaseMenuItemProps {
     children: React.ReactNode;
     className?: string;
     onClick?: (event: React.MouseEvent) => void;
     "data-testid"?: string;
 }
-declare const MenuItem: ({ disabled, className, ...rest }: MenuItemProps) => JSX.Element;
+declare const MenuItem: React.FC<MenuItemProps>;
 export { Menu, MenuItem, MenuDivider };

package/Menu/Menu.js

@@ -6,7 +6,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["disabled", "className"];
-import * as React from "react";
+import React from "react";
 import { Menu as BaseMenu, MenuItem as BaseMenuItem, MenuSurface, MenuSurfaceAnchor } from "@rmwc/menu";
 import { css } from "emotion";
 import classNames from "classnames";
@@ -104,7 +104,6 @@ var Menu = /*#__PURE__*/function (_React$Component) {
 }(React.Component);
 
 _defineProperty(Menu, "defaultProps", {
-  handle: null,
   anchor: "topStart"
 });
 

package/Menu/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Menu.tsx"],"names":["React","Menu","BaseMenu","MenuItem","BaseMenuItem","MenuSurface","MenuSurfaceAnchor","css","classNames","style","disabledMenuItem","opacity","pointerEvents","menuIsOpen","createRef","setState","props","onOpen","onClose","anchor","state","className","closeMenu","onSelect","children","Array","isArray","renderMenuWithPortal","renderCustomContent","anchorRef","renderMenuContent","handle","cloneElement","onClick","openMenu","Component","MenuDivider","disabled","rest"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport {\n    Menu as BaseMenu,\n    MenuProps as RmwcMenuProps,\n    MenuItem as BaseMenuItem,\n    MenuItemProps as BaseMenuItemProps,\n    MenuSurface,\n    MenuSurfaceAnchor\n} from \"@rmwc/menu\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nconst style = {\n    disabledMenuItem: css({\n        opacity: 0.5,\n        pointerEvents: \"none\"\n    })\n};\n\ntype MenuProps = RmwcMenuProps & {\n    // One or more MenuItem components.\n    children: React.ReactNode;\n\n    // A handler which triggers the menu, eg. button or link.\n    handle?: React.ReactElement;\n\n    // Position the menu to one of anchor corners.\n    // 'bottomEnd' | 'bottomLeft' | 'bottomRight' | 'bottomStart' | 'topEnd' | 'topLeft' | 'topRight' | 'topStart'\n    anchor?:\n        | \"bottomEnd\"\n        | \"bottomLeft\"\n        | \"bottomRight\"\n        | \"bottomStart\"\n        | \"topEnd\"\n        | \"topLeft\"\n        | \"topRight\"\n        | \"topStart\";\n\n    // Class that will be added to the Menu element.\n    className?: string;\n\n    onOpen?: () => void;\n    onClose?: () => void;\n\n    // For testing purposes.\n    \"data-testid\"?: string;\n};\n\ninterface MenuState {\n    menuIsOpen: boolean;\n}\n\n/**\n * Use Menu component to display a list of choices, once the handler is triggered.\n */\nclass Menu extends React.Component<MenuProps, MenuState> {\n    static defaultProps: Partial<MenuProps> = {\n        anchor: \"topStart\"\n    };\n\n    public override state: MenuState = {\n        menuIsOpen: false\n    };\n\n    anchorRef = React.createRef();\n    menuRef = React.createRef();\n\n    private readonly openMenu = () => {\n        this.setState({ menuIsOpen: true }, () => this.props.onOpen && this.props.onOpen());\n    };\n\n    private readonly closeMenu = () => {\n        this.setState({ menuIsOpen: false }, () => this.props.onClose && this.props.onClose());\n    };\n\n    private readonly renderMenuWithPortal = () => {\n        return (\n            <BaseMenu\n                anchorCorner={this.props.anchor}\n                open={this.state.menuIsOpen}\n                className={this.props.className}\n                onClose={this.closeMenu}\n                onSelect={this.props.onSelect}\n                hoistToBody={true}\n            >\n                {this.props.children}\n            </BaseMenu>\n        );\n    };\n\n    private readonly renderCustomContent = () => {\n        const { children } = this.props;\n        return (\n            <MenuSurface open={this.state.menuIsOpen} onClose={this.closeMenu}>\n                {typeof children === \"function\"\n                    ? children({ closeMenu: this.closeMenu })\n                    : children}\n            </MenuSurface>\n        );\n    };\n\n    private readonly renderMenuContent = () => {\n        return Array.isArray(this.props.children)\n            ? this.renderMenuWithPortal()\n            : this.renderCustomContent();\n    };\n\n    public override render(): React.ReactNode {\n        return (\n            <MenuSurfaceAnchor ref={this.anchorRef} data-testid={this.props[\"data-testid\"]}>\n                {this.renderMenuContent()}\n                {this.props.handle &&\n                    React.cloneElement(this.props.handle, { onClick: this.openMenu })}\n            </MenuSurfaceAnchor>\n        );\n    }\n}\n\nconst MenuDivider: React.FC = () => {\n    return <li className=\"mdc-list-divider\" role=\"separator\" />;\n};\n\ninterface MenuItemProps extends BaseMenuItemProps {\n    children: React.ReactNode;\n    className?: string;\n    onClick?: (event: React.MouseEvent) => void;\n    \"data-testid\"?: string;\n}\n\nconst MenuItem: React.FC<MenuItemProps> = ({ disabled, className, ...rest }) => {\n    return (\n        <BaseMenuItem\n            {...rest}\n            className={classNames(className, { [style.disabledMenuItem]: disabled })}\n        />\n    );\n};\n\nexport { Menu, MenuItem, MenuDivider };\n"]}

package/Menu/Menu.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Menu.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandbox","StorySandboxExample","StorySandboxCode","ButtonPrimary","readme","Menu","MenuItem","MenuDivider","story","module","style","position","width","margin","add","console","log","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SACIC,KADJ,EAEIC,WAFJ,EAGIC,YAHJ,EAIIC,mBAJJ,EAKIC,gBALJ,QAMO,+BANP;AAOA,SAASC,aAAT;AACA,OAAOC,MAAP;AACA,SAASC,IAAT,EAAeC,QAAf,EAAyBC,WAAzB;AAEA,IAAMC,KAAK,GAAGX,SAAS,CAAC,iBAAD,EAAoBY,MAApB,CAAvB;AAEA,IAAMC,KAA0B,GAAG;AAC/BC,EAAAA,QAAQ,EAAE,UADqB;AAE/BC,EAAAA,KAAK,EAAE,GAFwB;AAG/BC,EAAAA,MAAM,EAAE;AAHuB,CAAnC;AAMAL,KAAK,CAACM,GAAN,CACI,OADJ,EAEI,YAAM;AACF,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcV,MAAd,CADJ,eAEI,oBAAC,YAAD,qBACI,oBAAC,mBAAD;AAAqB,IAAA,KAAK,EAAE;AAA5B,kBACI;AAAK,IAAA,KAAK,EAAEM;AAAZ,kBACI,oBAAC,IAAD;AAAM,IAAA,MAAM,eAAE,oBAAC,aAAD;AAAd,kBACI,oBAAC,QAAD;AACI,IAAA,OAAO,EAAE,mBAAM;AACXK,MAAAA,OAAO,CAACC,GAAR,CAAY,iBAAZ;AACH;AAHL,aADJ,eAQI,oBAAC,QAAD,iBARJ,eASI,oBAAC,QAAD,qBATJ,CADJ,CADJ,CADJ,eAgBI,oBAAC,gBAAD,ghBAhBJ,CAFJ,CADJ;AAqCH,CAxCL,EAyCI;AAAEC,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACb,IAAD,EAAOC,QAAP,EAAiBC,WAAjB;AAAd;AAAR,CAzCJ","sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandbox,\n    StorySandboxExample,\n    StorySandboxCode\n} from \"@webiny/storybook-utils/Story\";\nimport { ButtonPrimary } from \"~/Button\";\nimport readme from \"./../Menu/README.md\";\nimport { Menu, MenuItem, MenuDivider } from \"./Menu\";\n\nconst story = storiesOf(\"Components/Menu\", module);\n\nconst style: React.CSSProperties = {\n    position: \"relative\",\n    width: 200,\n    margin: \"0 auto\"\n};\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"A simple menu, triggered with a button\"}>\n                        <div style={style}>\n                            <Menu handle={<ButtonPrimary>Open menu</ButtonPrimary>}>\n                                <MenuItem\n                                    onClick={() => {\n                                        console.log(\"Apple selected!\");\n                                    }}\n                                >\n                                    Apple\n                                </MenuItem>\n                                <MenuItem>Banana</MenuItem>\n                                <MenuItem>Watermelon</MenuItem>\n                            </Menu>\n                        </div>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                   <Menu handle={<ButtonPrimary>Open menu</ButtonPrimary>}>\n                        <MenuItem\n                            onClick={() => {\n                                console.log(\"Apple selected!\");\n                            }}\n                        >\n                            Apple\n                        </MenuItem>\n                        <MenuItem>Banana</MenuItem>\n                        <MenuItem>Watermelon</MenuItem>\n                    </Menu>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Menu, MenuItem, MenuDivider] } }\n);\n"]}

package/Menu/index.js.map

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

package/Mosaic/Mosaic.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Mosaic.tsx"],"names":["React","Columned","Mosaic","children","columns","className","defaultProps"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA;AACA;AACA;AACA;;AACA,OAAOC,QAAP,MAAqB,gBAArB;;AAYA,IAAMC,MAA6B,GAAG,SAAhCA,MAAgC,OAAsC;AAAA,MAAnCC,QAAmC,QAAnCA,QAAmC;AAAA,MAAzBC,OAAyB,QAAzBA,OAAyB;AAAA,MAAhBC,SAAgB,QAAhBA,SAAgB;AACxE,sBACI,oBAAC,QAAD;AAAU,IAAA,OAAO,EAAED,OAAnB;AAA4B,IAAA,SAAS,EAAEC;AAAvC,KACKF,QADL,CADJ;AAKH,CAND;;AAQAD,MAAM,CAACI,YAAP,GAAsB;AAClBF,EAAAA,OAAO,EAAE;AAAE,SAAK,CAAP;AAAU,SAAK,CAAf;AAAkB,SAAK,CAAvB;AAA0B,UAAM;AAAhC;AADS,CAAtB;AAIA,SAASF,MAAT","sourcesContent":["import React from \"react\";\n/**\n * Package react-columned does not have types.\n */\n// @ts-ignore\nimport Columned from \"react-columned\";\n\nexport interface MosaicProps {\n    // Number of columns, per max screen size, eg. { \"320\": 1, \"480\": 2, \"800\": 3, \"1366\": 4 }.\n    columns?: {\n        [key: string]: number;\n    };\n\n    // Custom class for the mosaic container.\n    className?: string;\n}\n\nconst Mosaic: React.FC<MosaicProps> = ({ children, columns, className }) => {\n    return (\n        <Columned columns={columns} className={className}>\n            {children}\n        </Columned>\n    );\n};\n\nMosaic.defaultProps = {\n    columns: { 320: 1, 480: 2, 800: 3, 1366: 4 }\n};\n\nexport { Mosaic };\n"]}

package/Mosaic/Mosaic.stories.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { storiesOf } from "@storybook/react";
 import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
 import readme from "./../Mosaic/README.md";

package/Mosaic/Mosaic.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Mosaic.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","readme","Mosaic","story","module","add","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SACIC,KADJ,EAEIC,WAFJ,EAGIC,gBAHJ,EAIIC,YAJJ,EAKIC,mBALJ,QAMO,+BANP;AAOA,OAAOC,MAAP;AAEA,SAASC,MAAT;AAEA,IAAMC,KAAK,GAAGR,SAAS,CAAC,mBAAD,EAAsBS,MAAtB,CAAvB;AAEAD,KAAK,CAACE,GAAN,CACI,OADJ,EAEI,YAAM;AACF,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcJ,MAAd,CADJ,eAEI,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAE;AAArB,kBACI,oBAAC,mBAAD,qBACI,oBAAC,MAAD,qBACI;AACI,IAAA,GAAG,EAAC,SADR;AAEI,IAAA,GAAG,EAAE;AAFT,IADJ,eAKI;AACI,IAAA,GAAG,EAAC,SADR;AAEI,IAAA,GAAG,EAAE;AAFT,IALJ,eASI;AACI,IAAA,GAAG,EAAC,SADR;AAEI,IAAA,GAAG,EACC;AAHR,IATJ,eAeI;AACI,IAAA,GAAG,EAAC,SADR;AAEI,IAAA,GAAG,EACC;AAHR,IAfJ,eAqBI;AACI,IAAA,GAAG,EAAC,SADR;AAEI,IAAA,GAAG,EAAE;AAFT,IArBJ,eAyBI;AACI,IAAA,GAAG,EAAC,SADR;AAEI,IAAA,GAAG,EACC;AAHR,IAzBJ,eA+BI;AACI,IAAA,GAAG,EAAC,SADR;AAEI,IAAA,GAAG,EACC;AAHR,IA/BJ,eAqCI;AACI,IAAA,GAAG,EAAC,SADR;AAEI,IAAA,GAAG,EAAE;AAFT,IArCJ,eAyCI;AACI,IAAA,GAAG,EAAC,SADR;AAEI,IAAA,GAAG,EAAE;AAFT,IAzCJ,eA6CI;AACI,IAAA,GAAG,EAAC,UADR;AAEI,IAAA,GAAG,EACC;AAHR,IA7CJ,CADJ,CADJ,eAuDI,oBAAC,gBAAD,qBACI,oBAAC,MAAD,qBACI;AAAK,IAAA,GAAG,EAAC,SAAT;AAAmB,IAAA,GAAG,EAAE;AAAxB,IADJ,eAEI;AAAK,IAAA,GAAG,EAAC,SAAT;AAAmB,IAAA,GAAG,EAAE;AAAxB,IAFJ,eAGI;AAAK,IAAA,GAAG,EAAC,SAAT;AAAmB,IAAA,GAAG,EAAE;AAAxB,IAHJ,eAII;AAAK,IAAA,GAAG,EAAC,SAAT;AAAmB,IAAA,GAAG,EAAE;AAAxB,IAJJ,eAKI;AAAK,IAAA,GAAG,EAAC,SAAT;AAAmB,IAAA,GAAG,EAAE;AAAxB,IALJ,eAMI;AAAK,IAAA,GAAG,EAAC,SAAT;AAAmB,IAAA,GAAG,EAAE;AAAxB,IANJ,eAOI;AAAK,IAAA,GAAG,EAAC,SAAT;AAAmB,IAAA,GAAG,EAAE;AAAxB,IAPJ,eAQI;AAAK,IAAA,GAAG,EAAC,SAAT;AAAmB,IAAA,GAAG,EAAE;AAAxB,IARJ,eASI;AAAK,IAAA,GAAG,EAAC,SAAT;AAAmB,IAAA,GAAG,EAAE;AAAxB,IATJ,eAUI;AAAK,IAAA,GAAG,EAAC,UAAT;AAAoB,IAAA,GAAG,EAAE;AAAzB,IAVJ,CADJ,CAvDJ,CAFJ,CADJ;AA2EH,CA9EL,EA+EI;AAAEK,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACL,MAAD;AAAd;AAAR,CA/EJ","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 \"./../Mosaic/README.md\";\n\nimport { Mosaic } from \"./Mosaic\";\n\nconst story = storiesOf(\"Components/Mosaic\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"A simple responsive mosaic.\"}>\n                    <StorySandboxExample>\n                        <Mosaic>\n                            <img\n                                alt=\"Image 1\"\n                                src={\"https://via.placeholder.com/800x600/001F3F/FFFFFF.png?text=1\"}\n                            />\n                            <img\n                                alt=\"Image 2\"\n                                src={\"https://via.placeholder.com/400x300/0074D9/FFFFFF.png?text=2\"}\n                            />\n                            <img\n                                alt=\"Image 3\"\n                                src={\n                                    \"https://via.placeholder.com/1024x768/7FDBFF/FFFFFF.png?text=3\"\n                                }\n                            />\n                            <img\n                                alt=\"Image 4\"\n                                src={\n                                    \"https://via.placeholder.com/1280x1024/39CCCC/FFFFFF.png?text=4\"\n                                }\n                            />\n                            <img\n                                alt=\"Image 5\"\n                                src={\"https://via.placeholder.com/640x480/3D9970/FFFFFF.png?text=5\"}\n                            />\n                            <img\n                                alt=\"Image 6\"\n                                src={\n                                    \"https://via.placeholder.com/1000x500/2ECC40/FFFFFF.png?text=6\"\n                                }\n                            />\n                            <img\n                                alt=\"Image 7\"\n                                src={\n                                    \"https://via.placeholder.com/700x1000/01FF70/FFFFFF.png?text=7\"\n                                }\n                            />\n                            <img\n                                alt=\"Image 8\"\n                                src={\"https://via.placeholder.com/800x600/FFDC00/FFFFFF.png?text=8\"}\n                            />\n                            <img\n                                alt=\"Image 9\"\n                                src={\"https://via.placeholder.com/200x100/FF851B/FFFFFF.png?text=9\"}\n                            />\n                            <img\n                                alt=\"Image 10\"\n                                src={\n                                    \"https://via.placeholder.com/200x100/FF4136/FFFFFF.png?text=10\"\n                                }\n                            />\n                        </Mosaic>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        <Mosaic>\n                            <img alt=\"Image 1\" src={\"https://...\"} />\n                            <img alt=\"Image 2\" src={\"https://...\"} />\n                            <img alt=\"Image 3\" src={\"https://...\"} />\n                            <img alt=\"Image 4\" src={\"https://...\"} />\n                            <img alt=\"Image 5\" src={\"https://...\"} />\n                            <img alt=\"Image 6\" src={\"https://...\"} />\n                            <img alt=\"Image 7\" src={\"https://...\"} />\n                            <img alt=\"Image 8\" src={\"https://...\"} />\n                            <img alt=\"Image 9\" src={\"https://...\"} />\n                            <img alt=\"Image 10\" src={\"https://...\"} />\n                        </Mosaic>\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Mosaic] } }\n);\n"]}

package/Mosaic/index.js.map

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

package/Progress/CircularProgress.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-interface Props {
+import React from "react";
+interface CircularProgressProps {
     label?: React.ReactNode;
     size?: number;
     spinnerColor?: string;
@@ -7,5 +7,5 @@ interface Props {
     visible?: boolean;
     style?: React.CSSProperties;
 }
-declare const CircularProgress: React.FC<Props>;
+declare const CircularProgress: React.FC<CircularProgressProps>;
 export default CircularProgress;

package/Progress/CircularProgress.js

@@ -1,5 +1,5 @@
 // This is just to center the spinner
-import * as React from "react";
+import React from "react";
 import styled from "@emotion/styled";
 import Spinner from "react-spinner-material";
 import { Typography } from "../Typography";
@@ -33,13 +33,17 @@ var Label = /*#__PURE__*/styled("div", {
   marginTop: 15
 });
 
-var CircularProgress = function CircularProgress(_ref) {
-  var label = _ref.label,
-      size = _ref.size,
-      spinnerWidth = _ref.spinnerWidth,
-      spinnerColor = _ref.spinnerColor,
-      visible = _ref.visible,
-      style = _ref.style;
+var CircularProgress = function CircularProgress(props) {
+  var label = props.label,
+      size = props.size,
+      spinnerWidth = props.spinnerWidth,
+      spinnerColor = props.spinnerColor,
+      visible = props.visible,
+      style = props.style;
+  /**
+   * We can safely cast because we have default props
+   */
+
   return /*#__PURE__*/React.createElement(SpinnerWrapper, {
     style: style
   }, /*#__PURE__*/React.createElement("div", {

package/Progress/CircularProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CircularProgress.tsx"],"names":["React","styled","Spinner","Typography","SpinnerWrapper","width","height","position","background","opacity","top","left","zIndex","transform","display","flexDirection","justifyContent","alignItems","Label","marginTop","CircularProgress","props","label","size","spinnerWidth","spinnerColor","visible","style","defaultProps"],"mappings":"AAAA;AACA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,OAAOC,OAAP,MAAoB,wBAApB;AACA,SAASC,UAAT;AAWA,IAAMC,cAAc,gBAAGH,MAAH,CAAU,KAAV;AAAA;AAAA;AAAA,GAAiB;AACjCI,EAAAA,KAAK,EAAE,MAD0B;AAEjCC,EAAAA,MAAM,EAAE,MAFyB;AAGjCC,EAAAA,QAAQ,EAAE,UAHuB;AAIjCC,EAAAA,UAAU,EAAE,0BAJqB;AAKjCC,EAAAA,OAAO,EAAE,IALwB;AAMjCC,EAAAA,GAAG,EAAE,CAN4B;AAOjCC,EAAAA,IAAI,EAAE,CAP2B;AAQjCC,EAAAA,MAAM,EAAE,CARyB;AASjC,+BAA6B;AACzBL,IAAAA,QAAQ,EAAE,UADe;AAEzBG,IAAAA,GAAG,EAAE,KAFoB;AAGzBC,IAAAA,IAAI,EAAE,KAHmB;AAIzBE,IAAAA,SAAS,EAAE,uBAJc;AAKzBC,IAAAA,OAAO,EAAE,MALgB;AAMzBC,IAAAA,aAAa,EAAE,QANU;AAOzBC,IAAAA,cAAc,EAAE,QAPS;AAQzBC,IAAAA,UAAU,EAAE;AARa;AATI,CAAjB,CAApB;AAqBA,IAAMC,KAAK,gBAAGjB,MAAH,CAAU,KAAV;AAAA;AAAA;AAAA,GAAiB;AACxBkB,EAAAA,SAAS,EAAE;AADa,CAAjB,CAAX;;AAIA,IAAMC,gBAAiD,GAAG,SAApDA,gBAAoD,CAAAC,KAAK,EAAI;AAC/D,MAAQC,KAAR,GAAoED,KAApE,CAAQC,KAAR;AAAA,MAAeC,IAAf,GAAoEF,KAApE,CAAeE,IAAf;AAAA,MAAqBC,YAArB,GAAoEH,KAApE,CAAqBG,YAArB;AAAA,MAAmCC,YAAnC,GAAoEJ,KAApE,CAAmCI,YAAnC;AAAA,MAAiDC,OAAjD,GAAoEL,KAApE,CAAiDK,OAAjD;AAAA,MAA0DC,KAA1D,GAAoEN,KAApE,CAA0DM,KAA1D;AACA;AACJ;AACA;;AACI,sBACI,oBAAC,cAAD;AAAgB,IAAA,KAAK,EAAEA;AAAvB,kBACI;AAAK,IAAA,SAAS,EAAE;AAAhB,kBACI,oBAAC,OAAD;AACI,IAAA,IAAI,EAAEJ,IADV;AAEI,IAAA,YAAY,EAAEE,YAFlB;AAGI,IAAA,YAAY,EAAED,YAHlB;AAII,IAAA,OAAO,EAAEE;AAJb,IADJ,EAOKJ,KAAK,iBACF,oBAAC,KAAD,qBACI,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAE;AAAjB,KAA8BA,KAA9B,CADJ,CARR,CADJ,CADJ;AAiBH,CAtBD;;AAwBAF,gBAAgB,CAACQ,YAAjB,GAAgC;AAC5BL,EAAAA,IAAI,EAAE,EADsB;AAE5BE,EAAAA,YAAY,EAAE,SAFc;AAG5BD,EAAAA,YAAY,EAAE,CAHc;AAI5BE,EAAAA,OAAO,EAAE;AAJmB,CAAhC;AAOA,eAAeN,gBAAf","sourcesContent":["// This is just to center the spinner\nimport React from \"react\";\nimport styled from \"@emotion/styled\";\nimport Spinner from \"react-spinner-material\";\nimport { Typography } from \"../Typography\";\n\ninterface CircularProgressProps {\n    label?: React.ReactNode;\n    size?: number;\n    spinnerColor?: string;\n    spinnerWidth?: number;\n    visible?: boolean;\n    style?: React.CSSProperties;\n}\n\nconst SpinnerWrapper = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\",\n    position: \"absolute\",\n    background: \"var(--mdc-theme-surface)\",\n    opacity: 0.92,\n    top: 0,\n    left: 0,\n    zIndex: 3,\n    \"& .spinner__inner-wrapper\": {\n        position: \"absolute\",\n        top: \"50%\",\n        left: \"50%\",\n        transform: \"translate(-50%, -50%)\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        justifyContent: \"center\",\n        alignItems: \"center\"\n    }\n});\n\nconst Label = styled(\"div\")({\n    marginTop: 15\n});\n\nconst CircularProgress: React.FC<CircularProgressProps> = props => {\n    const { label, size, spinnerWidth, spinnerColor, visible, style } = props;\n    /**\n     * We can safely cast because we have default props\n     */\n    return (\n        <SpinnerWrapper style={style}>\n            <div className={\"spinner__inner-wrapper\"}>\n                <Spinner\n                    size={size as number}\n                    spinnerColor={spinnerColor as string}\n                    spinnerWidth={spinnerWidth as number}\n                    visible={visible as boolean}\n                />\n                {label && (\n                    <Label>\n                        <Typography use={\"overline\"}>{label}</Typography>\n                    </Label>\n                )}\n            </div>\n        </SpinnerWrapper>\n    );\n};\n\nCircularProgress.defaultProps = {\n    size: 45,\n    spinnerColor: \"#fa5723\",\n    spinnerWidth: 4,\n    visible: true\n};\n\nexport default CircularProgress;\n"]}

package/Progress/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["default","CircularProgress"],"mappings":"AAAA,SAASA,OAAO,IAAIC,gBAApB","sourcesContent":["export { default as CircularProgress } from \"./CircularProgress\";\n"]}

package/Radio/Radio.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { FormComponentProps } from "../types";
 declare type Props = FormComponentProps & {
     label?: React.ReactNode;
@@ -10,7 +10,6 @@ declare type Props = FormComponentProps & {
  * Each Radio component must receive value and onChange callback via props.
  */
 declare class Radio extends React.Component<Props> {
-    static defaultProps: Partial<Props>;
     onChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
     render(): JSX.Element;
 }

package/Radio/Radio.js

@@ -4,7 +4,7 @@ import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized
 import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import * as React from "react";
+import React from "react";
 import { Radio as RmwcRadio } from "@rmwc/radio";
 import { FormElementMessage } from "../FormElementMessage";
 
@@ -44,26 +44,24 @@ var Radio = /*#__PURE__*/function (_React$Component) {
           disabled = _this$props.disabled,
           description = _this$props.description,
           validation = _this$props.validation;
+
+      var _ref = validation || {},
+          validationIsValid = _ref.isValid,
+          validationMessage = _ref.message;
+
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RmwcRadio, {
         disabled: disabled,
         checked: Boolean(value),
         onChange: this.onChange // @ts-ignore Although the label is React.ReactNode internally, an error is still thrown.
         ,
         label: label
-      }), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+      }), validationIsValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
         error: true
-      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
     }
   }]);
 
   return Radio;
 }(React.Component);
 
-_defineProperty(Radio, "defaultProps", {
-  validation: {
-    isValid: null,
-    message: null
-  }
-});
-
 export default Radio;

package/Radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Radio.tsx"],"names":["React","Radio","RmwcRadio","FormElementMessage","e","props","onChange","target","checked","value","label","disabled","description","validation","validationIsValid","isValid","validationMessage","message","Boolean","Component"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,KAAK,IAAIC,SAAlB,QAAmC,aAAnC;AAEA,SAASC,kBAAT;;AAaA;AACA;AACA;AACA;IACMF,K;;;;;;;;;;;;;;;;+DACS,UAACG,CAAD,EAA+C;AACtD,YAAKC,KAAL,CAAWC,QAAX,IAAuB,MAAKD,KAAL,CAAWC,QAAX,CAAqBF,CAAC,CAACG,MAAH,CAAkBC,OAAtC,CAAvB;AACH,K;;;;;;;WAED,kBAAyB;AACrB,wBAA4D,KAAKH,KAAjE;AAAA,UAAQI,KAAR,eAAQA,KAAR;AAAA,UAAeC,KAAf,eAAeA,KAAf;AAAA,UAAsBC,QAAtB,eAAsBA,QAAtB;AAAA,UAAgCC,WAAhC,eAAgCA,WAAhC;AAAA,UAA6CC,UAA7C,eAA6CA,UAA7C;;AAEA,iBAAmEA,UAAU,IAAI,EAAjF;AAAA,UAAiBC,iBAAjB,QAAQC,OAAR;AAAA,UAA6CC,iBAA7C,QAAoCC,OAApC;;AAEA,0BACI,oBAAC,KAAD,CAAO,QAAP,qBACI,oBAAC,SAAD;AACI,QAAA,QAAQ,EAAEN,QADd;AAEI,QAAA,OAAO,EAAEO,OAAO,CAACT,KAAD,CAFpB;AAGI,QAAA,QAAQ,EAAE,KAAKH,QAHnB,CAII;AAJJ;AAKI,QAAA,KAAK,EAAEI;AALX,QADJ,EAQKI,iBAAiB,KAAK,KAAtB,iBACG,oBAAC,kBAAD;AAAoB,QAAA,KAAK;AAAzB,SAA2BE,iBAA3B,CATR,EAYKF,iBAAiB,KAAK,KAAtB,IAA+BF,WAA/B,iBACG,oBAAC,kBAAD,QAAqBA,WAArB,CAbR,CADJ;AAkBH;;;;EA5BeZ,KAAK,CAACmB,S;;AA+B1B,eAAelB,KAAf","sourcesContent":["import React from \"react\";\nimport { Radio as RmwcRadio } from \"@rmwc/radio\";\nimport { FormComponentProps } from \"~/types\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\n\ntype Props = FormComponentProps & {\n    // Component label.\n    label?: React.ReactNode;\n\n    // Is radio disabled?\n    disabled?: boolean;\n\n    // Description beneath the radio.\n    description?: string;\n};\n\n/**\n * Wrap Radio components with RadioGroup to create a set of options.\n * Each Radio component must receive value and onChange callback via props.\n */\nclass Radio extends React.Component<Props> {\n    onChange = (e: React.SyntheticEvent<HTMLInputElement>) => {\n        this.props.onChange && this.props.onChange((e.target as any).checked);\n    };\n\n    public override render() {\n        const { value, label, disabled, description, validation } = this.props;\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <React.Fragment>\n                <RmwcRadio\n                    disabled={disabled}\n                    checked={Boolean(value)}\n                    onChange={this.onChange}\n                    // @ts-ignore Although the label is React.ReactNode internally, an error is still thrown.\n                    label={label}\n                />\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </React.Fragment>\n        );\n    }\n}\n\nexport default Radio;\n"]}

package/Radio/Radio.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Radio.styles.ts"],"names":["css","webinyRadioTitle","paddingLeft","marginBottom"],"mappings":"AAAA,SAASA,GAAT,QAAoB,SAApB;AAEA;AACA;AACA;AACA;;AACA,IAAMC,gBAAgB,gBAAGD,GAAG,CACxB,EADwB,EAExB;AACI,kCAAgC;AAC5BE,IAAAA,WAAW,EAAE,EADe;AAE5B;AACA;AACAC,IAAAA,YAAY,EAAE;AAJc;AADpC,CAFwB,4BAA5B;AAYA,SAASF,gBAAT","sourcesContent":["import { css } from \"emotion\";\n\n/**\n * Controls the helper text below the checkbox.\n * @type {string}\n */\nconst webinyRadioTitle = css(\n    {},\n    {\n        \"&.mdc-text-field-helper-text\": {\n            paddingLeft: 10,\n            //textTransform: \"uppercase\",\n            //fontWeight: \"bold\",\n            marginBottom: \"5px\"\n        }\n    }\n);\n\nexport { webinyRadioTitle };\n"]}

package/Radio/RadioGroup.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { FormComponentProps } from "../types";
 interface RadioGroupRenderParams {
     onChange: (id: string | number) => () => void;
@@ -10,7 +10,6 @@ declare type Props = FormComponentProps & {
     children: (props: RadioGroupRenderParams) => React.ReactNode;
 };
 declare class RadioGroup extends React.Component<Props> {
-    static defaultProps: Partial<Props>;
     render(): JSX.Element;
 }
 export default RadioGroup;

package/Radio/RadioGroup.js

@@ -2,8 +2,7 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import * as React from "react";
+import React from "react";
 import { webinyRadioTitle } from "./Radio.styles";
 import { FormElementMessage } from "../FormElementMessage";
 
@@ -27,6 +26,11 @@ var RadioGroup = /*#__PURE__*/function (_React$Component) {
           description = _this$props.description,
           label = _this$props.label,
           validation = _this$props.validation;
+
+      var _ref = validation || {},
+          validationIsValid = _ref.isValid,
+          validationMessage = _ref.message;
+
       return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement("div", {
         className: "mdc-text-field-helper-text mdc-text-field-helper-text--persistent " + webinyRadioTitle
       }, label), this.props.children({
@@ -38,20 +42,13 @@ var RadioGroup = /*#__PURE__*/function (_React$Component) {
         getValue: function getValue(id) {
           return _this.props.value === id;
         }
-      }), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+      }), validationIsValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
         error: true
-      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
     }
   }]);
 
   return RadioGroup;
 }(React.Component);
 
-_defineProperty(RadioGroup, "defaultProps", {
-  validation: {
-    isValid: null,
-    message: null
-  }
-});
-
 export default RadioGroup;

package/Radio/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["RadioGroup.tsx"],"names":["React","webinyRadioTitle","FormElementMessage","RadioGroup","props","description","label","validation","validationIsValid","isValid","validationMessage","message","children","onChange","value","getValue","id","Component"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,gBAAT;AACA,SAASC,kBAAT;;IAkBMC,U;;;;;;;;;;;;;WACF,kBAAyB;AAAA;;AACrB,wBAA2C,KAAKC,KAAhD;AAAA,UAAQC,WAAR,eAAQA,WAAR;AAAA,UAAqBC,KAArB,eAAqBA,KAArB;AAAA,UAA4BC,UAA5B,eAA4BA,UAA5B;;AAEA,iBAAmEA,UAAU,IAAI,EAAjF;AAAA,UAAiBC,iBAAjB,QAAQC,OAAR;AAAA,UAA6CC,iBAA7C,QAAoCC,OAApC;;AAEA,0BACI,oBAAC,KAAD,CAAO,QAAP,QACKL,KAAK,iBACF;AACI,QAAA,SAAS,EACL,uEACAL;AAHR,SAMKK,KANL,CAFR,EAYK,KAAKF,KAAL,CAAWQ,QAAX,CAAoB;AACjBC,QAAAA,QAAQ,EAAE,kBAAAC,KAAK;AAAA,iBAAI;AAAA,mBAAM,KAAI,CAACV,KAAL,CAAWS,QAAX,IAAuB,KAAI,CAACT,KAAL,CAAWS,QAAX,CAAoBC,KAApB,CAA7B;AAAA,WAAJ;AAAA,SADE;AAEjBC,QAAAA,QAAQ,EAAE,kBAAAC,EAAE;AAAA,iBAAI,KAAI,CAACZ,KAAL,CAAWU,KAAX,KAAqBE,EAAzB;AAAA;AAFK,OAApB,CAZL,EAiBKR,iBAAiB,KAAK,KAAtB,iBACG,oBAAC,kBAAD;AAAoB,QAAA,KAAK;AAAzB,SAA2BE,iBAA3B,CAlBR,EAqBKF,iBAAiB,KAAK,KAAtB,IAA+BH,WAA/B,iBACG,oBAAC,kBAAD,QAAqBA,WAArB,CAtBR,CADJ;AA2BH;;;;EAjCoBL,KAAK,CAACiB,S;;AAoC/B,eAAed,UAAf","sourcesContent":["import React from \"react\";\nimport { FormComponentProps } from \"~/types\";\nimport { webinyRadioTitle } from \"./Radio.styles\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\n\ninterface RadioGroupRenderParams {\n    onChange: (id: string | number) => () => void;\n    getValue: (id: string | number) => boolean;\n}\n\ntype Props = FormComponentProps & {\n    // Form element's label.\n    label?: string;\n\n    // Form element's description.\n    description?: string;\n\n    // An array of Radio components.\n    children: (props: RadioGroupRenderParams) => React.ReactNode;\n};\n\nclass RadioGroup extends React.Component<Props> {\n    public override render() {\n        const { description, label, validation } = this.props;\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <React.Fragment>\n                {label && (\n                    <div\n                        className={\n                            \"mdc-text-field-helper-text mdc-text-field-helper-text--persistent \" +\n                            webinyRadioTitle\n                        }\n                    >\n                        {label}\n                    </div>\n                )}\n\n                {this.props.children({\n                    onChange: value => () => this.props.onChange && this.props.onChange(value),\n                    getValue: id => this.props.value === id\n                })}\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </React.Fragment>\n        );\n    }\n}\n\nexport default RadioGroup;\n"]}

package/Radio/RadioGroup.stories.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { storiesOf } from "@storybook/react";
 import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
 import { withKnobs, boolean } from "@storybook/addon-knobs";

package/Radio/RadioGroup.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["RadioGroup.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","withKnobs","boolean","readme","Form","Radio","RadioGroup","story","module","addDecorator","add","disabled","options","id","name","fruits","Bind","onChange","getValue","map","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SACIC,KADJ,EAEIC,WAFJ,EAGIC,gBAHJ,EAIIC,YAJJ,EAKIC,mBALJ,QAMO,+BANP;AAOA,SAASC,SAAT,EAAoBC,OAApB,QAAmC,wBAAnC;AACA,OAAOC,MAAP;AAEA,SAASC,IAAT,QAAqB,cAArB;AACA,SAASC,KAAT,EAAgBC,UAAhB,QAAkC,GAAlC;AAEA,IAAMC,KAAK,GAAGZ,SAAS,CAAC,kBAAD,EAAqBa,MAArB,CAAvB;AACAD,KAAK,CAACE,YAAN,CAAmBR,SAAnB;AAEAM,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;AACF,MAAMC,QAAQ,GAAGT,OAAO,CAAC,UAAD,EAAa,KAAb,CAAxB;AAEA,MAAMU,OAAO,GAAG,CACZ;AAAEC,IAAAA,EAAE,EAAE,OAAN;AAAeC,IAAAA,IAAI,EAAE;AAArB,GADY,EAEZ;AAAED,IAAAA,EAAE,EAAE,MAAN;AAAcC,IAAAA,IAAI,EAAE;AAApB,GAFY,EAGZ;AAAED,IAAAA,EAAE,EAAE,QAAN;AAAgBC,IAAAA,IAAI,EAAE;AAAtB,GAHY,CAAhB;AAMA,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcX,MAAd,CADJ,eAEI,oBAAC,YAAD,qBACI,oBAAC,mBAAD;AAAqB,IAAA,KAAK,EAAE;AAA5B,kBACI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAE;AAAEY,MAAAA,MAAM,EAAE;AAAV;AAAZ,KACK;AAAA,QAAGC,IAAH,QAAGA,IAAH;AAAA,wBACG,oBAAC,IAAD;AAAM,MAAA,IAAI,EAAC;AAAX,oBACI,oBAAC,UAAD;AACI,MAAA,KAAK,EAAC,iBADV;AAEI,MAAA,WAAW,EAAE;AAFjB,OAIK;AAAA,UAAGC,QAAH,SAAGA,QAAH;AAAA,UAAaC,QAAb,SAAaA,QAAb;AAAA,0BACG,oBAAC,KAAD,CAAO,QAAP,QACKN,OAAO,CAACO,GAAR,CAAY;AAAA,YAAGN,EAAH,SAAGA,EAAH;AAAA,YAAOC,IAAP,SAAOA,IAAP;AAAA,4BACT,oBAAC,KAAD;AACI,UAAA,QAAQ,EAAEH,QADd;AAEI,UAAA,GAAG,EAAEE,EAFT;AAGI,UAAA,KAAK,EAAEC,IAHX;AAII,UAAA,KAAK,EAAEI,QAAQ,CAACL,EAAD,CAJnB;AAKI,UAAA,QAAQ,EAAEI,QAAQ,CAACJ,EAAD;AALtB,UADS;AAAA,OAAZ,CADL,CADH;AAAA,KAJL,CADJ,CADH;AAAA,GADL,CADJ,CADJ,eA2BI,oBAAC,gBAAD,i1CA3BJ,CAFJ,CADJ;AA6DH,CAxEL,EAyEI;AAAEO,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAAChB,KAAD,EAAQC,UAAR;AAAd;AAAR,CAzEJ","sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\n\nimport { Form } from \"@webiny/form\";\nimport { Radio, RadioGroup } from \".\";\n\nconst story = storiesOf(\"Components/Radio\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n\n        const options = [\n            { id: \"apple\", name: \"Apple\" },\n            { id: \"pear\", name: \"Pear\" },\n            { id: \"orange\", name: \"Orange\" }\n        ];\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Simple radio with label and description\"}>\n                        <Form data={{ fruits: \"pear\" }}>\n                            {({ Bind }) => (\n                                <Bind name=\"fruits\">\n                                    <RadioGroup\n                                        label=\"Fruit selection\"\n                                        description={\"Choose fruit you like the most.\"}\n                                    >\n                                        {({ onChange, getValue }) => (\n                                            <React.Fragment>\n                                                {options.map(({ id, name }) => (\n                                                    <Radio\n                                                        disabled={disabled}\n                                                        key={id}\n                                                        label={name}\n                                                        value={getValue(id)}\n                                                        onChange={onChange(id)}\n                                                    />\n                                                ))}\n                                            </React.Fragment>\n                                        )}\n                                    </RadioGroup>\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                     <Form data={{fruits: ['pear']}}>\n                        {({ Bind }) => (\n                            <Bind name=\"fruits\">\n                                <RadioGroup\n                                    label=\"Fruits selection\"\n                                    description={\"Choose only fruits you like.\"}\n                                >\n                                    {({ onChange, getValue }) => (\n                                        <React.Fragment>\n                                            {options.map(({id, name}) => (\n                                                <Radio\n                                                    disabled={disabled}\n                                                    key={id}\n                                                    label={name}\n                                                    value={getValue(id)}\n                                                    onChange={onChange(id)}\n                                                />\n                                            ))}\n                                        </React.Fragment>\n                                    )}\n                                </RadioGroup>\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Radio, RadioGroup] } }\n);\n"]}

package/Radio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["default","Radio","RadioGroup"],"mappings":"AAAA,SAASA,OAAO,IAAIC,KAApB;AACA,SAASD,OAAO,IAAIE,UAApB","sourcesContent":["export { default as Radio } from \"./Radio\";\nexport { default as RadioGroup } from \"./RadioGroup\";\n"]}

package/RichTextEditor/RichTextEditor.js

@@ -49,15 +49,32 @@ export var RichTextEditor = function RichTextEditor(props) {
             while (1) {
               switch (_context.prev = _context.next) {
                 case 0:
-                  _context.next = 2;
-                  return editorRef.current.save();
+                  if (editorRef.current) {
+                    _context.next = 2;
+                    break;
+                  }
+
+                  return _context.abrupt("return");
 
                 case 2:
+                  _context.next = 4;
+                  return editorRef.current.save();
+
+                case 4:
                   _yield$editorRef$curr = _context.sent;
                   data = _yield$editorRef$curr.blocks;
+
+                  if (props.onChange) {
+                    _context.next = 8;
+                    break;
+                  }
+
+                  return _context.abrupt("return");
+
+                case 8:
                   props.onChange(data);
 
-                case 5:
+                case 9:
                 case "end":
                   return _context.stop();
               }
@@ -82,7 +99,12 @@ export var RichTextEditor = function RichTextEditor(props) {
         });
       },
       tools: Object.keys(props.tools || {}).reduce(function (tools, name) {
-        var tool = props.tools[name];
+        var tool = props.tools ? props.tools[name] : null;
+
+        if (!tool) {
+          return tools;
+        }
+
         tools[name] = tool;
 
         if (!tool.config) {

package/RichTextEditor/RichTextEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["RichTextEditor.tsx"],"names":["React","Fragment","useEffect","useRef","shortid","EditorJS","FormElementMessage","css","classNames","classes","wrapper","backgroundColor","padding","label","marginBottom","disable","opacity","pointerEvents","RichTextEditor","props","elementId","generate","editorRef","value","context","onReady","nativeProps","initialData","blocks","current","holder","logLevel","data","onChange","save","editor","tools","Object","keys","reduce","name","tool","config","destroy","description","disabled"],"mappings":"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","sourcesContent":["import React, { Fragment, useEffect, useRef } from \"react\";\nimport shortid from \"shortid\";\nimport EditorJS from \"@editorjs/editorjs\";\nimport {\n    LogLevels,\n    OutputBlockData,\n    OutputData,\n    SanitizerConfig,\n    ToolSettings\n} from \"@editorjs/editorjs/types\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nconst classes = {\n    wrapper: css({\n        backgroundColor: \"var(--mdc-theme-background)\",\n        padding: \"20px 16px 6px\"\n    }),\n    label: css({\n        marginBottom: \"10px !important\"\n    }),\n    disable: css({\n        opacity: 0.7,\n        pointerEvents: \"none\"\n    })\n};\n\ninterface EditorJSType {\n    destroy?: () => void;\n    save: () => Promise<any>;\n}\n\nexport interface OnReadyParams {\n    editor: any;\n    initialData: OutputData;\n}\n\nexport interface RichTextEditorProps {\n    autofocus?: boolean;\n    context?: { [key: string]: any };\n    logLevel?: string;\n    minHeight?: number;\n    onChange?: (data: OutputBlockData[]) => void;\n    onReady?: (params: OnReadyParams) => void;\n    placeholder?: string;\n    readOnly?: boolean;\n    sanitizer?: SanitizerConfig;\n    tools?: {\n        [toolName: string]: ToolSettings;\n    };\n    value?: OutputBlockData[];\n    label?: string;\n    description?: string;\n    disabled?: boolean;\n}\n\nexport const RichTextEditor: React.FC<RichTextEditorProps> = props => {\n    const elementId = useRef(\"rte-\" + shortid.generate());\n    const editorRef = useRef<EditorJSType>();\n\n    useEffect(() => {\n        const { value, context, onReady, ...nativeProps } = props;\n        const initialData = value ? { blocks: value } : { blocks: [] };\n\n        editorRef.current = new EditorJS({\n            ...nativeProps,\n            holder: elementId.current,\n            logLevel: \"ERROR\" as LogLevels.ERROR,\n            data: initialData,\n            onChange: async () => {\n                if (!editorRef.current) {\n                    return;\n                }\n                const { blocks: data } = await editorRef.current.save();\n                if (!props.onChange) {\n                    return;\n                }\n                props.onChange(data);\n            },\n            onReady() {\n                if (typeof onReady !== \"function\") {\n                    return;\n                }\n                onReady({ editor: editorRef.current, initialData });\n            },\n            tools: Object.keys(props.tools || {}).reduce((tools, name) => {\n                const tool = props.tools ? props.tools[name] : null;\n                if (!tool) {\n                    return tools;\n                }\n                tools[name] = tool;\n                if (!tool.config) {\n                    tool.config = { context };\n                } else if (typeof tool.config === \"function\") {\n                    tool.config = tool.config();\n                } else {\n                    tool.config = { ...tool.config, context };\n                }\n                return tools;\n            }, {} as Record<string, ToolSettings>)\n        });\n\n        return () => {\n            if (!editorRef.current || typeof editorRef.current.destroy !== \"function\") {\n                return;\n            }\n\n            editorRef.current.destroy();\n        };\n    }, []);\n\n    const { label, description, disabled } = props;\n\n    return (\n        <Fragment>\n            <div className={classNames(classes.wrapper, { [classes.disable]: disabled })}>\n                {label && (\n                    <div\n                        className={classNames(\n                            \"mdc-text-field-helper-text mdc-text-field-helper-text--persistent\",\n                            classes.label\n                        )}\n                    >\n                        {label}\n                    </div>\n                )}\n                <div id={elementId.current} />\n            </div>\n            {description && <FormElementMessage>{description}</FormElementMessage>}\n        </Fragment>\n    );\n};\n"]}

package/RichTextEditor/RichTextEditor.stories.js

@@ -9,7 +9,7 @@ story.add("usage", function () {
     console.log(data);
   }, []);
   return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, null, /*#__PURE__*/React.createElement(RichTextEditor, {
-    value: null,
+    value: undefined,
     onChange: onChange
   })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                        import { RichTextEditor } from \"..\";\n\n                        <RichTextEditor/>\n                    ")));
 }, {

package/RichTextEditor/RichTextEditor.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["RichTextEditor.stories.tsx"],"names":["React","useCallback","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","readme","RichTextEditor","story","module","add","onChange","data","console","log","undefined","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,WAAhB,QAAmC,OAAnC;AACA,SAASC,SAAT,QAA0B,kBAA1B;AAEA,SACIC,KADJ,EAEIC,WAFJ,EAGIC,gBAHJ,EAIIC,YAJJ,EAKIC,mBALJ,QAMO,+BANP;AAOA,OAAOC,MAAP;AAEA,SAASC,cAAT;AAEA,IAAMC,KAAK,GAAGR,SAAS,CAAC,2BAAD,EAA8BS,MAA9B,CAAvB;AAEAD,KAAK,CAACE,GAAN,CACI,OADJ,EAEI,YAAM;AACF,MAAMC,QAAQ,GAAGZ,WAAW,CAAC,UAAAa,IAAI,EAAI;AACjCC,IAAAA,OAAO,CAACC,GAAR,CAAYF,IAAZ;AACH,GAF2B,EAEzB,EAFyB,CAA5B;AAIA,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcN,MAAd,CADJ,eAEI,oBAAC,YAAD,qBACI,oBAAC,mBAAD,qBACI,oBAAC,cAAD;AAAgB,IAAA,KAAK,EAAES,SAAvB;AAAkC,IAAA,QAAQ,EAAEJ;AAA5C,IADJ,CADJ,eAII,oBAAC,gBAAD,8IAJJ,CAFJ,CADJ;AAiBH,CAxBL,EAyBI;AAAEK,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACV,cAAD;AAAd;AAAR,CAzBJ","sourcesContent":["import React, { useCallback } from \"react\";\nimport { storiesOf } from \"@storybook/react\";\n\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./README.md\";\n\nimport { RichTextEditor } from \"./index\";\n\nconst story = storiesOf(\"Components/RichTextEditor\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        const onChange = useCallback(data => {\n            console.log(data);\n        }, []);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <RichTextEditor value={undefined} onChange={onChange} />\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        import { RichTextEditor } from \"..\";\n\n                        <RichTextEditor/>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [RichTextEditor] } }\n);\n"]}

package/RichTextEditor/createPropsFromConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["createPropsFromConfig.ts"],"names":["createPropsFromConfig","config","configs","Array","isArray","onReady","params","forEach","tools","reduce"],"mappings":";;AAeA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAwB,CACjCC,MADiC,EAEH;AAC9B,MAAMC,OAAO,GAAIC,KAAK,CAACC,OAAN,CAAcH,MAAd,IAAwBA,MAAxB,GAAiC,CAACA,MAAD,CAAlD;AAEA,SAAO;AACHI,IAAAA,OADG,mBACKC,MADL,EAC4B;AAC3BJ,MAAAA,OAAO,CAACK,OAAR,CAAgB,UAAAN,MAAM,EAAI;AACtB,YAAI,OAAOA,MAAM,CAACI,OAAd,KAA0B,UAA9B,EAA0C;AACtCJ,UAAAA,MAAM,CAACI,OAAP,CAAeC,MAAf;AACH;AACJ,OAJD;AAKH,KAPE;AAQHE,IAAAA,KAAK,EAAEN,OAAO,CAACO,MAAR,CAAe,UAACD,KAAD,EAAQP,MAAR,EAAmB;AACrC,6CACOO,KADP,GAEOP,MAAM,CAACO,KAFd;AAIH,KALM,EAKJ,EALI;AARJ,GAAP;AAeH,CApBM","sourcesContent":["import { RichTextEditorProps } from \"./RichTextEditor\";\nimport { ToolSettings } from \"@editorjs/editorjs\";\nimport { OutputData } from \"@editorjs/editorjs/types\";\n\ninterface CreatePropsFromConfigResult {\n    onReady: (editor: any) => void;\n    tools: {\n        [key: string]: ToolSettings;\n    };\n}\n\ninterface OnReadyParams {\n    editor: any;\n    initialData: OutputData;\n}\n/**\n * Creates RichTextEditor props from the given config (or array of configs).\n *\n * TODO: figure out types for editor and return type of the function.\n */\nexport const createPropsFromConfig = (\n    config: RichTextEditorProps[]\n): CreatePropsFromConfigResult => {\n    const configs = (Array.isArray(config) ? config : [config]) as RichTextEditorProps[];\n\n    return {\n        onReady(params: OnReadyParams) {\n            configs.forEach(config => {\n                if (typeof config.onReady === \"function\") {\n                    config.onReady(params);\n                }\n            });\n        },\n        tools: configs.reduce((tools, config) => {\n            return {\n                ...tools,\n                ...config.tools\n            };\n        }, {} as Record<string, ToolSettings>)\n    };\n};\n"]}

package/RichTextEditor/index.js.map

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

package/Ripple/Ripple.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 interface Props {
     type?: "unbounded" | "primary" | "accent";
     disabled?: boolean;

package/Ripple/Ripple.js

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import * as React from "react";
+import React from "react";
 import { Ripple as RmwcRipple } from "@rmwc/ripple";
 
 /**

package/Ripple/Ripple.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Ripple.tsx"],"names":["React","Ripple","RmwcRipple","props","type","children"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAM,IAAIC,UAAnB,QAAqC,cAArC;;AAUA;AACA;AACA;AACA,IAAMD,MAAuB,GAAG,SAA1BA,MAA0B,CAAAE,KAAK,EAAI;AACrC;AACA,MAAMC,IAAI,GAAGD,KAAK,CAACC,IAAN,IAAc,SAA3B;AAEA,sBACI,oBAAC,UAAD,wCAAmBA,IAAnB,EAA0B,IAA1B,GAAsCD,KAAtC,GACKA,KAAK,CAACE,QADX,CADJ;AAKH,CATD;;AAWA,SAASJ,MAAT","sourcesContent":["import React from \"react\";\nimport { Ripple as RmwcRipple } from \"@rmwc/ripple\";\n\ninterface Props {\n    // Choose the type of ripple.\n    type?: \"unbounded\" | \"primary\" | \"accent\";\n\n    // Makes the ripple disabled.\n    disabled?: boolean;\n}\n\n/**\n * Use Ripple component to display a list of choices, once the handler is triggered.\n */\nconst Ripple: React.FC<Props> = props => {\n    // Let's pass \"unbounded\" / \"primary\" / \"accent\" flags as \"type\" prop instead.\n    const type = props.type || \"surface\";\n\n    return (\n        <RmwcRipple {...{ [type]: true }} {...props}>\n            {props.children}\n        </RmwcRipple>\n    );\n};\n\nexport { Ripple };\n"]}

package/Ripple/Ripple.stories.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { storiesOf } from "@storybook/react";
 import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
 import readme from "./../Ripple/README.md";

package/Ripple/Ripple.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Ripple.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","readme","Icon","withKnobs","boolean","ReactComponent","AutoRenewIcon","CloudDoneIcon","BaselineDeleteIcon","BaselineDoneIcon","Ripple","story","module","addDecorator","add","disabled","style","padding","width","height","display","info","propTables"],"mappings":"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","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 \"./../Ripple/README.md\";\nimport { Icon } from \"~/Icon\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\n\nimport { ReactComponent as AutoRenewIcon } from \"./svg/baseline-autorenew-24px.svg\";\nimport { ReactComponent as CloudDoneIcon } from \"./svg/baseline-cloud_done-24px.svg\";\nimport { ReactComponent as BaselineDeleteIcon } from \"./svg/baseline-delete-24px.svg\";\nimport { ReactComponent as BaselineDoneIcon } from \"./svg/baseline-done-24px.svg\";\n\nimport { Ripple } from \"./Ripple\";\n\nconst story = storiesOf(\"Components/Ripple\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n\n        const style = { padding: 20, width: 20, height: 20, display: \"inline-block\" };\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"Icon with and without ripple\"}>\n                    <StorySandboxExample>\n                        <div>\n                            <div>No effect</div>\n                            <div style={style}>\n                                <Icon icon={<AutoRenewIcon />} />\n                            </div>\n\n                            <div>\n                                <code>unbounded</code>\n                            </div>\n                            <Ripple type=\"unbounded\" disabled={disabled}>\n                                <div style={style}>\n                                    <Icon icon={<CloudDoneIcon />} />\n                                </div>\n                            </Ripple>\n\n                            <div>\n                                <code>primary</code>\n                            </div>\n                            <Ripple type=\"primary\" disabled={disabled}>\n                                <div style={style}>\n                                    <Icon icon={<BaselineDeleteIcon />} />\n                                </div>\n                            </Ripple>\n\n                            <div>\n                                <code>accent</code>\n                            </div>\n                            <Ripple type=\"accent\" disabled={disabled}>\n                                <div style={style}>\n                                    <Icon icon={<BaselineDoneIcon />} />\n                                </div>\n                            </Ripple>\n                        </div>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        <div>\n                            <div>\n                                <Icon icon={<AutoRenewIcon />} />\n                            </div>\n\n                            <Ripple type=\"unbounded\" disabled={disabled}>\n                                <div>\n                                    <Icon icon={<CloudDoneIcon />} />\n                                </div>\n                            </Ripple>\n\n                            <Ripple type=\"primary\" disabled={disabled}>\n                                <div>\n                                    <Icon icon={<BaselineDeleteIcon />} />\n                                </div>\n                            </Ripple>\n\n                            <Ripple type=\"accent\" disabled={disabled}>\n                                <div>\n                                    <Icon icon={<BaselineDoneIcon />} />\n                                </div>\n                            </Ripple>\n                        </div>\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Ripple] } }\n);\n"]}

package/Ripple/index.js.map

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

package/Scrollbar/Scrollbar.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { ScrollbarProps } from "react-custom-scrollbars";
 interface Props extends ScrollbarProps {
     style?: React.CSSProperties;

package/Scrollbar/Scrollbar.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { Scrollbars } from "react-custom-scrollbars";
 
 /**

package/Scrollbar/Scrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Scrollbar.tsx"],"names":["React","Scrollbars","Scrollbar","props"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAyBC,UAAzB,QAA2C,yBAA3C;;AAOA;AACA;AACA;AACA,IAAMC,SAA0B,GAAG,SAA7BA,SAA6B,CAAAC,KAAK,EAAI;AACxC,sBAAO,oBAAC,UAAD,EAAgBA,KAAhB,CAAP;AACH,CAFD;;AAIA,SAASD,SAAT","sourcesContent":["import React from \"react\";\nimport { ScrollbarProps, Scrollbars } from \"react-custom-scrollbars\";\n\ninterface Props extends ScrollbarProps {\n    style?: React.CSSProperties;\n    [key: string]: any;\n}\n\n/**\n * Use Scrollbar component to show vertical or horizontal scrollbars.\n */\nconst Scrollbar: React.FC<Props> = props => {\n    return <Scrollbars {...props} />;\n};\n\nexport { Scrollbar };\n"]}