@webiny/ui 0.0.0-mt-2 → 0.0.0-unstable.085ff6572f

package/List/List.stories.js

@@ -1,47 +1,50 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
-import readme from "./../List/README.md";
-import { Icon } from "./../Icon";
-import { ButtonPrimary } from "./../Button";
-import { ReactComponent as AutoRenewIcon } from "@svgr/webpack!./icons/baseline-autorenew-24px.svg";
-import { ReactComponent as CloudDoneIcon } from "@svgr/webpack!./icons/baseline-cloud_done-24px.svg";
-import { ReactComponent as BaselineDeleteIcon } from "@svgr/webpack!./icons/baseline-delete-24px.svg";
-import { ReactComponent as BaselineDoneIcon } from "@svgr/webpack!./icons/baseline-done-24px.svg";
-import { List, ListItem, ListItemText, ListItemTextSecondary, ListItemMeta, ListItemGraphic, ListItemTextPrimary } from "./List";
-var story = storiesOf("Components/List", module);
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@storybook/react");
+var _Story = require("@webiny/storybook-utils/Story");
+var _README = _interopRequireDefault(require("./../List/README.md"));
+var _Icon = require("./../Icon");
+var _Button = require("./../Button");
+var _baselineAutorenew24px = require("./icons/baseline-autorenew-24px.svg");
+var _baselineCloud_done24px = require("./icons/baseline-cloud_done-24px.svg");
+var _baselineDelete24px = require("./icons/baseline-delete-24px.svg");
+var _baselineDone24px = require("./icons/baseline-done-24px.svg");
+var _List = require("./List");
+var story = (0, _react2.storiesOf)("Components/List", module);
 story.add("simple list", function () {
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {
     title: "Basic list"
-  }, /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(ListItem, null, "Item 1"), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(BaselineDeleteIcon, null)
-  })), "Item 2 - with icon on left side"), /*#__PURE__*/React.createElement(ListItem, null, "Item 3 - with icon on right side", /*#__PURE__*/React.createElement(ListItemMeta, null, /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(BaselineDoneIcon, null)
-  }))), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(BaselineDeleteIcon, null)
-  })), "Item 4 - icons on both sides", /*#__PURE__*/React.createElement(ListItemMeta, null, /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(BaselineDoneIcon, null)
-  }))))), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\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                    ")), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+  }, /*#__PURE__*/_react.default.createElement(_List.List, null, /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Item 1"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineDelete24px.ReactComponent, null)
+  })), "Item 2 - with icon on left side"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Item 3 - with icon on right side", /*#__PURE__*/_react.default.createElement(_List.ListItemMeta, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineDone24px.ReactComponent, null)
+  }))), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineDelete24px.ReactComponent, null)
+  })), "Item 4 - icons on both sides", /*#__PURE__*/_react.default.createElement(_List.ListItemMeta, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineDone24px.ReactComponent, null)
+  }))))), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\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                    ")), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {
     title: "List with 2 lines"
-  }, /*#__PURE__*/React.createElement(List, {
+  }, /*#__PURE__*/_react.default.createElement(_List.List, {
     twoLine: true
-  }, /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(ListItemText, null, /*#__PURE__*/React.createElement(ListItemTextPrimary, null, "Primary text"), /*#__PURE__*/React.createElement(ListItemTextSecondary, null, "Secondary text"))), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(ListItemText, null, /*#__PURE__*/React.createElement(ListItemTextPrimary, null, "Primary text"), /*#__PURE__*/React.createElement(ListItemTextSecondary, null, "Secondary text"))), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(ListItemText, null, /*#__PURE__*/React.createElement(ListItemTextPrimary, null, "Primary text"), /*#__PURE__*/React.createElement(ListItemTextSecondary, null, "Secondary text"))))), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\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                    ")), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+  }, /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_List.ListItemText, null, /*#__PURE__*/_react.default.createElement(_List.ListItemTextPrimary, null, "Primary text"), /*#__PURE__*/_react.default.createElement(_List.ListItemTextSecondary, null, "Secondary text"))), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_List.ListItemText, null, /*#__PURE__*/_react.default.createElement(_List.ListItemTextPrimary, null, "Primary text"), /*#__PURE__*/_react.default.createElement(_List.ListItemTextSecondary, null, "Secondary text"))), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_List.ListItemText, null, /*#__PURE__*/_react.default.createElement(_List.ListItemTextPrimary, null, "Primary text"), /*#__PURE__*/_react.default.createElement(_List.ListItemTextSecondary, null, "Secondary text"))))), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\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                    ")), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {
     title: "A list with all possible options"
-  }, /*#__PURE__*/React.createElement(List, {
+  }, /*#__PURE__*/_react.default.createElement(_List.List, {
     twoLine: true
-  }, /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(AutoRenewIcon, null)
-  })), /*#__PURE__*/React.createElement(ListItemText, null, /*#__PURE__*/React.createElement(ListItemTextPrimary, null, "Rocket"), /*#__PURE__*/React.createElement(ListItemTextSecondary, null, "This could be a really cool rocket.")), /*#__PURE__*/React.createElement(ListItemMeta, null, /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(CloudDoneIcon, null)
-  }))), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(BaselineDeleteIcon, null)
-  })), /*#__PURE__*/React.createElement(ListItemText, null, /*#__PURE__*/React.createElement(ListItemTextPrimary, null, "Coffee"), /*#__PURE__*/React.createElement(ListItemTextSecondary, null, "A nice cup of coffee.")), /*#__PURE__*/React.createElement(ListItemMeta, null, /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(BaselineDoneIcon, null)
-  }))), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(AutoRenewIcon, null)
-  })), /*#__PURE__*/React.createElement(ListItemText, null, /*#__PURE__*/React.createElement(ListItemTextPrimary, null, "E-mail"), /*#__PURE__*/React.createElement(ListItemTextSecondary, null, "Send an e-mail to your best friend.")), /*#__PURE__*/React.createElement(ListItemMeta, null, /*#__PURE__*/React.createElement(ButtonPrimary, null, "Send"))))), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\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                    ")));
+  }, /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineAutorenew24px.ReactComponent, null)
+  })), /*#__PURE__*/_react.default.createElement(_List.ListItemText, null, /*#__PURE__*/_react.default.createElement(_List.ListItemTextPrimary, null, "Rocket"), /*#__PURE__*/_react.default.createElement(_List.ListItemTextSecondary, null, "This could be a really cool rocket.")), /*#__PURE__*/_react.default.createElement(_List.ListItemMeta, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineCloud_done24px.ReactComponent, null)
+  }))), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineDelete24px.ReactComponent, null)
+  })), /*#__PURE__*/_react.default.createElement(_List.ListItemText, null, /*#__PURE__*/_react.default.createElement(_List.ListItemTextPrimary, null, "Coffee"), /*#__PURE__*/_react.default.createElement(_List.ListItemTextSecondary, null, "A nice cup of coffee.")), /*#__PURE__*/_react.default.createElement(_List.ListItemMeta, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineDone24px.ReactComponent, null)
+  }))), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineAutorenew24px.ReactComponent, null)
+  })), /*#__PURE__*/_react.default.createElement(_List.ListItemText, null, /*#__PURE__*/_react.default.createElement(_List.ListItemTextPrimary, null, "E-mail"), /*#__PURE__*/_react.default.createElement(_List.ListItemTextSecondary, null, "Send an e-mail to your best friend.")), /*#__PURE__*/_react.default.createElement(_List.ListItemMeta, null, /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, null, "Send"))))), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\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                    ")));
 }, {
   info: {
-    propTables: [List, ListItem, ListItemText, ListItemTextSecondary, ListItemMeta, ListItemGraphic, ListItemTextPrimary]
+    propTables: [_List.List, _List.ListItem, _List.ListItemText, _List.ListItemTextSecondary, _List.ListItemMeta, _List.ListItemGraphic, _List.ListItemTextPrimary]
   }
 });

package/List/List.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","List","ListItem","ListItemText","ListItemTextSecondary","ListItemMeta","ListItemGraphic","ListItemTextPrimary"],"sources":["List.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 \"./../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"],"mappings":"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"}

package/List/icons/index.js

@@ -1,3 +1,20 @@
-import refreshIcon from "./baseline-autorenew-24px.svg";
-import deleteIcon from "./baseline-delete-24px.svg";
-export { refreshIcon, deleteIcon };
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "deleteIcon", {
+  enumerable: true,
+  get: function get() {
+    return _baselineDelete24px.default;
+  }
+});
+Object.defineProperty(exports, "refreshIcon", {
+  enumerable: true,
+  get: function get() {
+    return _baselineAutorenew24px.default;
+  }
+});
+var _baselineAutorenew24px = _interopRequireDefault(require("./baseline-autorenew-24px.svg"));
+var _baselineDelete24px = _interopRequireDefault(require("./baseline-delete-24px.svg"));

package/List/icons/index.js.map

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

package/List/index.d.ts

@@ -1,3 +1,3 @@
 export * from "./List";
-export { DataList, ScrollList, DataListModalOverlay, DataListModalOverlayAction } from "./DataList";
+export { DataList, ScrollList, DataListModalOverlay, DataListModalOverlayAction, DataListWithSections, ScrollListWithSections } from "./DataList";
 export { CollapsibleList } from "./CollapsibleList";

package/List/index.js

@@ -1,3 +1,70 @@
-export * from "./List";
-export { DataList, ScrollList, DataListModalOverlay, DataListModalOverlayAction } from "./DataList";
-export { CollapsibleList } from "./CollapsibleList";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  DataList: true,
+  ScrollList: true,
+  DataListModalOverlay: true,
+  DataListModalOverlayAction: true,
+  DataListWithSections: true,
+  ScrollListWithSections: true,
+  CollapsibleList: true
+};
+Object.defineProperty(exports, "CollapsibleList", {
+  enumerable: true,
+  get: function get() {
+    return _CollapsibleList.CollapsibleList;
+  }
+});
+Object.defineProperty(exports, "DataList", {
+  enumerable: true,
+  get: function get() {
+    return _DataList.DataList;
+  }
+});
+Object.defineProperty(exports, "DataListModalOverlay", {
+  enumerable: true,
+  get: function get() {
+    return _DataList.DataListModalOverlay;
+  }
+});
+Object.defineProperty(exports, "DataListModalOverlayAction", {
+  enumerable: true,
+  get: function get() {
+    return _DataList.DataListModalOverlayAction;
+  }
+});
+Object.defineProperty(exports, "DataListWithSections", {
+  enumerable: true,
+  get: function get() {
+    return _DataList.DataListWithSections;
+  }
+});
+Object.defineProperty(exports, "ScrollList", {
+  enumerable: true,
+  get: function get() {
+    return _DataList.ScrollList;
+  }
+});
+Object.defineProperty(exports, "ScrollListWithSections", {
+  enumerable: true,
+  get: function get() {
+    return _DataList.ScrollListWithSections;
+  }
+});
+var _List = require("./List");
+Object.keys(_List).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _List[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _List[key];
+    }
+  });
+});
+var _DataList = require("./DataList");
+var _CollapsibleList = require("./CollapsibleList");

package/List/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./List\";\n\nexport {\n    DataList,\n    ScrollList,\n    DataListModalOverlay,\n    DataListModalOverlayAction,\n    DataListWithSections,\n    ScrollListWithSections\n} from \"./DataList\";\nexport { CollapsibleList } from \"./CollapsibleList\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AAEA;AAQA"}

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,35 +9,28 @@ 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> {
-    static defaultProps: {
-        handle: any;
-        anchor: string;
-    };
-    state: {
-        menuIsOpen: boolean;
-    };
-    anchorRef: React.RefObject<unknown>;
-    menuRef: React.RefObject<unknown>;
-    openMenu: () => void;
-    closeMenu: () => void;
-    renderMenuWithPortal: () => JSX.Element;
-    renderCustomContent: () => JSX.Element;
-    renderMenuContent: () => JSX.Element;
-    render(): JSX.Element;
+declare class Menu extends React.Component<MenuProps, MenuState> {
+    static defaultProps: Partial<MenuProps>;
+    state: MenuState;
+    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

@@ -1,128 +1,115 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-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";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuItem = exports.MenuDivider = exports.Menu = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+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 _react = _interopRequireDefault(require("react"));
+var _menu = require("@rmwc/menu");
+var _emotion = require("emotion");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _excluded = ["disabled", "className"];
-import * as React from "react";
-import { Menu as BaseMenu, MenuItem as BaseMenuItem, MenuSurface, MenuSurfaceAnchor } from "@rmwc/menu";
-import { css } from "emotion";
-import classNames from "classnames";
 var style = {
-  disabledMenuItem: /*#__PURE__*/css({
+  disabledMenuItem: /*#__PURE__*/(0, _emotion.css)({
     opacity: 0.5,
     pointerEvents: "none"
   }, "label:disabledMenuItem;")
 };
-
 /**
  * Use Menu component to display a list of choices, once the handler is triggered.
  */
 var Menu = /*#__PURE__*/function (_React$Component) {
-  _inherits(Menu, _React$Component);
-
-  var _super = _createSuper(Menu);
-
+  (0, _inherits2.default)(Menu, _React$Component);
+  var _super = (0, _createSuper2.default)(Menu);
   function Menu() {
     var _this;
-
-    _classCallCheck(this, Menu);
-
+    (0, _classCallCheck2.default)(this, Menu);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       menuIsOpen: false
     });
-
-    _defineProperty(_assertThisInitialized(_this), "anchorRef", /*#__PURE__*/React.createRef());
-
-    _defineProperty(_assertThisInitialized(_this), "menuRef", /*#__PURE__*/React.createRef());
-
-    _defineProperty(_assertThisInitialized(_this), "openMenu", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "openMenu", function () {
       _this.setState({
         menuIsOpen: true
       }, function () {
         return _this.props.onOpen && _this.props.onOpen();
       });
     });
-
-    _defineProperty(_assertThisInitialized(_this), "closeMenu", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "closeMenu", function () {
       _this.setState({
         menuIsOpen: false
       }, function () {
         return _this.props.onClose && _this.props.onClose();
       });
     });
-
-    _defineProperty(_assertThisInitialized(_this), "renderMenuWithPortal", function () {
-      return /*#__PURE__*/React.createElement(BaseMenu, {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMenuWithPortal", function () {
+      return /*#__PURE__*/_react.default.createElement(_menu.Menu, {
         anchorCorner: _this.props.anchor,
         open: _this.state.menuIsOpen,
         className: _this.props.className,
         onClose: _this.closeMenu,
         onSelect: _this.props.onSelect,
-        hoistToBody: true
+        renderToPortal: true,
+        style: {
+          zIndex: 99
+        } // Fixes Menu in Drawers
       }, _this.props.children);
     });
-
-    _defineProperty(_assertThisInitialized(_this), "renderCustomContent", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderCustomContent", function () {
       var children = _this.props.children;
-      return /*#__PURE__*/React.createElement(MenuSurface, {
+      return /*#__PURE__*/_react.default.createElement(_menu.MenuSurface, {
         open: _this.state.menuIsOpen,
-        onClose: _this.closeMenu
+        onClose: _this.closeMenu,
+        renderToPortal: _this.props.renderToPortal
       }, typeof children === "function" ? children({
         closeMenu: _this.closeMenu
       }) : children);
     });
-
-    _defineProperty(_assertThisInitialized(_this), "renderMenuContent", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMenuContent", function () {
       return Array.isArray(_this.props.children) ? _this.renderMenuWithPortal() : _this.renderCustomContent();
     });
-
     return _this;
   }
-
-  _createClass(Menu, [{
+  (0, _createClass2.default)(Menu, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(MenuSurfaceAnchor, {
-        ref: this.anchorRef,
+      return /*#__PURE__*/_react.default.createElement(_menu.MenuSurfaceAnchor, {
         "data-testid": this.props["data-testid"]
-      }, this.renderMenuContent(), this.props.handle && /*#__PURE__*/React.cloneElement(this.props.handle, {
+      }, this.renderMenuContent(), this.props.handle && /*#__PURE__*/_react.default.cloneElement(this.props.handle, {
         onClick: this.openMenu
       }));
     }
   }]);
-
   return Menu;
-}(React.Component);
-
-_defineProperty(Menu, "defaultProps", {
-  handle: null,
+}(_react.default.Component);
+exports.Menu = Menu;
+(0, _defineProperty2.default)(Menu, "defaultProps", {
   anchor: "topStart"
 });
-
 var MenuDivider = function MenuDivider() {
-  return /*#__PURE__*/React.createElement("li", {
+  return /*#__PURE__*/_react.default.createElement("li", {
     className: "mdc-list-divider",
     role: "separator"
   });
 };
-
+exports.MenuDivider = MenuDivider;
 var MenuItem = function MenuItem(_ref) {
   var disabled = _ref.disabled,
-      className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/React.createElement(BaseMenuItem, Object.assign({}, rest, {
-    className: classNames(className, _defineProperty({}, style.disabledMenuItem, disabled))
+    className = _ref.className,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_menu.MenuItem, Object.assign({}, rest, {
+    className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, style.disabledMenuItem, disabled))
   }));
 };
-
-export { Menu, MenuItem, MenuDivider };
+exports.MenuItem = MenuItem;

package/Menu/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["style","disabledMenuItem","css","opacity","pointerEvents","Menu","menuIsOpen","setState","props","onOpen","onClose","anchor","state","className","closeMenu","onSelect","zIndex","children","renderToPortal","Array","isArray","renderMenuWithPortal","renderCustomContent","renderMenuContent","handle","React","cloneElement","onClick","openMenu","Component","MenuDivider","MenuItem","disabled","rest","classNames"],"sources":["Menu.tsx"],"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    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                renderToPortal={true}\n                style={{ zIndex: 99 }} // Fixes Menu in Drawers\n            >\n                {this.props.children}\n            </BaseMenu>\n        );\n    };\n\n    private readonly renderCustomContent = () => {\n        const { children } = this.props;\n        return (\n            <MenuSurface\n                open={this.state.menuIsOpen}\n                onClose={this.closeMenu}\n                renderToPortal={this.props.renderToPortal}\n            >\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 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"],"mappings":"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"}

package/Menu/Menu.stories.js

@@ -1,29 +1,32 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandbox, StorySandboxExample, StorySandboxCode } from "@webiny/storybook-utils/Story";
-import { ButtonPrimary } from "./../Button";
-import readme from "./../Menu/README.md";
-import { Menu, MenuItem, MenuDivider } from "./Menu";
-var story = storiesOf("Components/Menu", module);
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@storybook/react");
+var _Story = require("@webiny/storybook-utils/Story");
+var _Button = require("../Button");
+var _README = _interopRequireDefault(require("./../Menu/README.md"));
+var _Menu = require("./Menu");
+var story = (0, _react2.storiesOf)("Components/Menu", module);
 var style = {
   position: "relative",
   width: 200,
   margin: "0 auto"
 };
 story.add("usage", function () {
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {
     title: "A simple menu, triggered with a button"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     style: style
-  }, /*#__PURE__*/React.createElement(Menu, {
-    handle: /*#__PURE__*/React.createElement(ButtonPrimary, null, "Open menu")
-  }, /*#__PURE__*/React.createElement(MenuItem, {
+  }, /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
+    handle: /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, null, "Open menu")
+  }, /*#__PURE__*/_react.default.createElement(_Menu.MenuItem, {
     onClick: function onClick() {
       console.log("Apple selected!");
     }
-  }, "Apple"), /*#__PURE__*/React.createElement(MenuItem, null, "Banana"), /*#__PURE__*/React.createElement(MenuItem, null, "Watermelon")))), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\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                    ")));
+  }, "Apple"), /*#__PURE__*/_react.default.createElement(_Menu.MenuItem, null, "Banana"), /*#__PURE__*/_react.default.createElement(_Menu.MenuItem, null, "Watermelon")))), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\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                    ")));
 }, {
   info: {
-    propTables: [Menu, MenuItem, MenuDivider]
+    propTables: [_Menu.Menu, _Menu.MenuItem, _Menu.MenuDivider]
   }
 });

package/Menu/Menu.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","style","position","width","margin","add","readme","console","log","info","propTables","Menu","MenuItem","MenuDivider"],"sources":["Menu.stories.tsx"],"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"],"mappings":";;;AAAA;AACA;AACA;AAOA;AACA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,iBAAiB,EAAEC,MAAM,CAAC;AAElD,IAAMC,KAA0B,GAAG;EAC/BC,QAAQ,EAAE,UAAU;EACpBC,KAAK,EAAE,GAAG;EACVC,MAAM,EAAE;AACZ,CAAC;AAEDN,KAAK,CAACO,GAAG,CACL,OAAO,EACP,YAAM;EACF,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB;IAAC,KAAK,EAAE;EAAyC,gBACjE;IAAK,KAAK,EAAEL;EAAM,gBACd,6BAAC,UAAI;IAAC,MAAM,eAAE,6BAAC,qBAAa,QAAC,WAAS;EAAiB,gBACnD,6BAAC,cAAQ;IACL,OAAO,EAAE,mBAAM;MACXM,OAAO,CAACC,GAAG,CAAC,iBAAiB,CAAC;IAClC;EAAE,GACL,OAED,CAAW,eACX,6BAAC,cAAQ,QAAC,QAAM,CAAW,eAC3B,6BAAC,cAAQ,QAAC,YAAU,CAAW,CAC5B,CACL,CACY,eACtB,6BAAC,uBAAgB,ghBAcE,CACR,CACX;AAEhB,CAAC,EACD;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,UAAI,EAAEC,cAAQ,EAAEC,iBAAW;EAAE;AAAE,CAAC,CAC1D"}

package/Menu/index.js

@@ -1 +1,16 @@
-export * from "./Menu";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Menu = require("./Menu");
+Object.keys(_Menu).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Menu[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Menu[key];
+    }
+  });
+});