@webiny/ui 5.34.8 → 5.35.0-beta.1

package/List/List.js

@@ -1,30 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SimpleListItem = exports.ListTopCaption = exports.ListTextOverline = exports.ListSelectBox = exports.ListItemTextSecondary = exports.ListItemTextPrimary = exports.ListItemText = exports.ListItemMeta = exports.ListItemGraphic = exports.ListItem = exports.ListBottomCaption = exports.ListActions = exports.List = void 0;
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _list = require("@rmwc/list");
-
 var _Typography = require("../Typography");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 /**
  * ListItem components are placed as direct children to List component.
  * @param props
@@ -34,22 +23,17 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var ListItem = function ListItem(props) {
   return /*#__PURE__*/_react.default.createElement(_list.ListItem, props);
 };
-
 exports.ListItem = ListItem;
-
 /**
  * Use List component to display data and offer additional actions if needed.
  */
 var List = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(List, _React$Component);
-
   var _super = (0, _createSuper2.default)(List);
-
   function List() {
     (0, _classCallCheck2.default)(this, List);
     return _super.apply(this, arguments);
   }
-
   (0, _createClass2.default)(List, [{
     key: "render",
     value: function render() {
@@ -58,9 +42,7 @@ var List = /*#__PURE__*/function (_React$Component) {
   }]);
   return List;
 }(_react.default.Component);
-
 exports.List = List;
-
 /**
  * Used to show regular text in list items.
  * @param props
@@ -70,15 +52,11 @@ exports.List = List;
 var ListItemText = function ListItemText(props) {
   return /*#__PURE__*/_react.default.createElement(_list.ListItemText, props, props.children);
 };
-
 exports.ListItemText = ListItemText;
-
 var ListItemTextPrimary = function ListItemTextPrimary(props) {
   return /*#__PURE__*/_react.default.createElement(_list.ListItemPrimaryText, null, props.children);
 };
-
 exports.ListItemTextPrimary = ListItemTextPrimary;
-
 /**
  * Used to show secondary text in list items.
  * @param props
@@ -88,9 +66,7 @@ exports.ListItemTextPrimary = ListItemTextPrimary;
 var ListItemTextSecondary = function ListItemTextSecondary(props) {
   return /*#__PURE__*/_react.default.createElement(_list.ListItemSecondaryText, null, props.children);
 };
-
 exports.ListItemTextSecondary = ListItemTextSecondary;
-
 /**
  * Can be used to show an icon or any other custom element. Rendered on the left side.
  * @param props
@@ -102,9 +78,7 @@ var ListItemGraphic = function ListItemGraphic(props) {
     className: (0, _classnames.default)("mdc-list-item__graphic", props.className)
   }), props.children);
 };
-
 exports.ListItemGraphic = ListItemGraphic;
-
 /**
  * Can be used to show an icon or any other custom element. Rendered on the right side.
  * @param props
@@ -116,9 +90,7 @@ var ListItemMeta = function ListItemMeta(props) {
     className: (0, _classnames.default)("mdc-list-item__meta", props.className)
   }), props.children);
 };
-
 exports.ListItemMeta = ListItemMeta;
-
 /**
  * Can be used to show a top caption inside ListItemMeta component.
  * @param props
@@ -132,9 +104,7 @@ var ListTopCaption = function ListTopCaption(props) {
     use: "overline"
   }, props.children));
 };
-
 exports.ListTopCaption = ListTopCaption;
-
 /**
  * Can be used to show a bottom caption inside ListItemMeta component.
  * @param props
@@ -148,9 +118,7 @@ var ListBottomCaption = function ListBottomCaption(props) {
     use: "overline"
   }, props.children));
 };
-
 exports.ListBottomCaption = ListBottomCaption;
-
 /**
  * Can be used to show an overline text inside ListItem component.
  * @param props
@@ -164,9 +132,7 @@ var ListTextOverline = function ListTextOverline(props) {
     use: "overline"
   }, props.children));
 };
-
 exports.ListTextOverline = ListTextOverline;
-
 /**
  * Used to contain the actions inside ListItemMate component.
  * @param props
@@ -178,7 +144,6 @@ var ListActions = function ListActions(props) {
     className: "webiny-list-actions"
   }), props.children);
 };
-
 exports.ListActions = ListActions;
 var SelectBoxWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "entzw6n0",
@@ -192,7 +157,6 @@ var SelectBoxWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   alignItems: "center",
   justifyContent: "center"
 });
-
 /**
  * Used to hold the Checkbox element for multi-select options.
  * @param {*} props
@@ -200,11 +164,8 @@ var SelectBoxWrapper = /*#__PURE__*/(0, _styled.default)("div", {
 var ListSelectBox = function ListSelectBox(props) {
   return /*#__PURE__*/_react.default.createElement(ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(SelectBoxWrapper, null, props.children));
 };
-
 exports.ListSelectBox = ListSelectBox;
-
 var SimpleListItem = function SimpleListItem(props) {
   return /*#__PURE__*/_react.default.createElement(_list.SimpleListItem, props);
 };
-
 exports.SimpleListItem = SimpleListItem;

package/List/List.js.map

@@ -1 +1 @@
-{"version":3,"names":["ListItem","props","List","children","React","Component","ListItemText","ListItemTextPrimary","ListItemTextSecondary","ListItemGraphic","classNames","className","ListItemMeta","ListTopCaption","ListBottomCaption","ListTextOverline","ListActions","SelectBoxWrapper","styled","overflow","width","height","display","position","alignItems","justifyContent","ListSelectBox","SimpleListItem"],"sources":["List.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    List as RmwcList,\n    ListProps as RmwcListProps,\n    ListItem as RmwcListItem,\n    ListItemProps as RmwcListItemProps,\n    ListItemText as RmwcListItemText,\n    ListItemTextProps as RmwcListItemTextProps,\n    ListItemPrimaryText as RmwcListItemPrimaryText,\n    ListItemSecondaryText as RmwcListItemSecondaryText,\n    SimpleListItem as RmwcSimpleListItem,\n    SimpleListItemProps as RmwcSimpleListItemProps\n} from \"@rmwc/list\";\nimport { Typography } from \"~/Typography\";\nimport classNames from \"classnames\";\nimport styled from \"@emotion/styled\";\n\nexport type ListItemProps = RmwcListItemProps & {\n    children: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n    onClick?: (e: React.MouseEvent) => void;\n};\n\n/**\n * ListItem components are placed as direct children to List component.\n * @param props\n * @returns {*}\n * @constructor\n */\nexport const ListItem = (props: ListItemProps) => {\n    return <RmwcListItem {...props} />;\n};\n\nexport type ListProps = RmwcListProps & {\n    children?: any;\n\n    className?: string;\n\n    style?: React.CSSProperties;\n};\n\n/**\n * Use List component to display data and offer additional actions if needed.\n */\nexport class List extends React.Component<ListProps> {\n    public override render() {\n        return <RmwcList {...this.props}>{this.props.children}</RmwcList>;\n    }\n}\n\nexport type ListItemTextProps = RmwcListItemTextProps & {\n    children: React.ReactNode;\n    className?: string;\n    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n};\n\n/**\n * Used to show regular text in list items.\n * @param props\n * @returns {*}\n * @constructor\n */\nexport const ListItemText = (props: ListItemTextProps) => {\n    return <RmwcListItemText {...props}>{props.children}</RmwcListItemText>;\n};\n\nexport type ListItemTextPrimaryProps = {\n    /**\n     * Text content\n     */\n    children: React.ReactNode;\n};\n\nexport const ListItemTextPrimary = (props: ListItemTextPrimaryProps) => {\n    return <RmwcListItemPrimaryText>{props.children}</RmwcListItemPrimaryText>;\n};\n\nexport type ListItemTextSecondaryProps = {\n    /**\n     * Text content\n     */\n    children: React.ReactNode;\n};\n\n/**\n * Used to show secondary text in list items.\n * @param props\n * @returns {*}\n * @constructor\n */\nexport const ListItemTextSecondary = (props: ListItemTextSecondaryProps) => {\n    return <RmwcListItemSecondaryText>{props.children}</RmwcListItemSecondaryText>;\n};\n\nexport type ListItemGraphicProps = { children: React.ReactNode; className?: string };\n\n/**\n * Can be used to show an icon or any other custom element. Rendered on the left side.\n * @param props\n * @returns {*}\n * @constructor\n */\nexport const ListItemGraphic = (props: ListItemGraphicProps) => {\n    return (\n        <div {...props} className={classNames(\"mdc-list-item__graphic\", props.className)}>\n            {props.children}\n        </div>\n    );\n};\n\nexport type ListItemMetaProps = { children: React.ReactNode; className?: string };\n\n/**\n * Can be used to show an icon or any other custom element. Rendered on the right side.\n * @param props\n * @returns {*}\n * @constructor\n */\nexport const ListItemMeta = (props: ListItemMetaProps) => {\n    return (\n        <span {...props} className={classNames(\"mdc-list-item__meta\", props.className)}>\n            {props.children}\n        </span>\n    );\n};\n\nexport type ListTopCaptionProps = {\n    children: React.ReactNode;\n};\n\n/**\n * Can be used to show a top caption inside ListItemMeta component.\n * @param props\n * @returns {*}\n * @constructor\n */\nexport const ListTopCaption = (props: ListTopCaptionProps) => {\n    return (\n        <span {...props} className={\"webiny-list-top-caption\"}>\n            <Typography use=\"overline\">{props.children}</Typography>\n        </span>\n    );\n};\n\nexport type ListBottomCaptionProps = {\n    children: React.ReactNode;\n};\n\n/**\n * Can be used to show a bottom caption inside ListItemMeta component.\n * @param props\n * @returns {*}\n * @constructor\n */\nexport const ListBottomCaption = (props: ListBottomCaptionProps) => {\n    return (\n        <span {...props} className={\"webiny-list-bottom-caption\"}>\n            <Typography use=\"overline\">{props.children}</Typography>\n        </span>\n    );\n};\n\nexport type ListTextOverlineProps = {\n    children: React.ReactNode;\n};\n\n/**\n * Can be used to show an overline text inside ListItem component.\n * @param props\n * @returns {*}\n * @constructor\n */\nexport const ListTextOverline = (props: ListTextOverlineProps) => {\n    return (\n        <span {...props} className={\"webiny-list-text-overline\"}>\n            <Typography use=\"overline\">{props.children}</Typography>\n        </span>\n    );\n};\n\nexport type ListActionsProps = {\n    children: React.ReactNode;\n};\n\n/**\n * Used to contain the actions inside ListItemMate component.\n * @param props\n * @returns {*}\n * @constructor\n */\nexport const ListActions = (props: ListActionsProps) => {\n    return (\n        <span {...props} className={\"webiny-list-actions\"}>\n            {props.children}\n        </span>\n    );\n};\n\nconst SelectBoxWrapper = styled(\"div\")({\n    overflow: \"hidden\",\n    width: 25,\n    height: 25,\n    display: \"flex\",\n    position: \"relative\",\n    alignItems: \"center\",\n    justifyContent: \"center\"\n});\n\nexport type ListSelectBoxProps = {\n    children: React.ReactNode;\n};\n\n/**\n * Used to hold the Checkbox element for multi-select options.\n * @param {*} props\n */\nexport const ListSelectBox = (props: ListSelectBoxProps) => {\n    return (\n        <ListItemGraphic>\n            <SelectBoxWrapper>{props.children}</SelectBoxWrapper>\n        </ListItemGraphic>\n    );\n};\n\nexport const SimpleListItem = (props: RmwcSimpleListItemProps & { onClick?: any }) => {\n    return <RmwcSimpleListItem {...props} />;\n};\n"],"mappings":"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"}
+{"version":3,"names":["ListItem","props","List","children","React","Component","ListItemText","ListItemTextPrimary","ListItemTextSecondary","ListItemGraphic","classNames","className","ListItemMeta","ListTopCaption","ListBottomCaption","ListTextOverline","ListActions","SelectBoxWrapper","styled","overflow","width","height","display","position","alignItems","justifyContent","ListSelectBox","SimpleListItem"],"sources":["List.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    List as RmwcList,\n    ListProps as RmwcListProps,\n    ListItem as RmwcListItem,\n    ListItemProps as RmwcListItemProps,\n    ListItemText as RmwcListItemText,\n    ListItemTextProps as RmwcListItemTextProps,\n    ListItemPrimaryText as RmwcListItemPrimaryText,\n    ListItemSecondaryText as RmwcListItemSecondaryText,\n    SimpleListItem as RmwcSimpleListItem,\n    SimpleListItemProps as RmwcSimpleListItemProps\n} from \"@rmwc/list\";\nimport { Typography } from \"~/Typography\";\nimport classNames from \"classnames\";\nimport styled from \"@emotion/styled\";\n\nexport type ListItemProps = RmwcListItemProps & {\n    children: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n    onClick?: (e: React.MouseEvent) => void;\n};\n\n/**\n * ListItem components are placed as direct children to List component.\n * @param props\n * @returns {*}\n * @constructor\n */\nexport const ListItem = (props: ListItemProps) => {\n    return <RmwcListItem {...props} />;\n};\n\nexport type ListProps = RmwcListProps & {\n    children?: any;\n\n    className?: string;\n\n    style?: React.CSSProperties;\n};\n\n/**\n * Use List component to display data and offer additional actions if needed.\n */\nexport class List extends React.Component<ListProps> {\n    public override render() {\n        return <RmwcList {...this.props}>{this.props.children}</RmwcList>;\n    }\n}\n\nexport type ListItemTextProps = RmwcListItemTextProps & {\n    children: React.ReactNode;\n    className?: string;\n    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n};\n\n/**\n * Used to show regular text in list items.\n * @param props\n * @returns {*}\n * @constructor\n */\nexport const ListItemText = (props: ListItemTextProps) => {\n    return <RmwcListItemText {...props}>{props.children}</RmwcListItemText>;\n};\n\nexport type ListItemTextPrimaryProps = {\n    /**\n     * Text content\n     */\n    children: React.ReactNode;\n};\n\nexport const ListItemTextPrimary = (props: ListItemTextPrimaryProps) => {\n    return <RmwcListItemPrimaryText>{props.children}</RmwcListItemPrimaryText>;\n};\n\nexport type ListItemTextSecondaryProps = {\n    /**\n     * Text content\n     */\n    children: React.ReactNode;\n};\n\n/**\n * Used to show secondary text in list items.\n * @param props\n * @returns {*}\n * @constructor\n */\nexport const ListItemTextSecondary = (props: ListItemTextSecondaryProps) => {\n    return <RmwcListItemSecondaryText>{props.children}</RmwcListItemSecondaryText>;\n};\n\nexport type ListItemGraphicProps = { children: React.ReactNode; className?: string };\n\n/**\n * Can be used to show an icon or any other custom element. Rendered on the left side.\n * @param props\n * @returns {*}\n * @constructor\n */\nexport const ListItemGraphic = (props: ListItemGraphicProps) => {\n    return (\n        <div {...props} className={classNames(\"mdc-list-item__graphic\", props.className)}>\n            {props.children}\n        </div>\n    );\n};\n\nexport type ListItemMetaProps = { children: React.ReactNode; className?: string };\n\n/**\n * Can be used to show an icon or any other custom element. Rendered on the right side.\n * @param props\n * @returns {*}\n * @constructor\n */\nexport const ListItemMeta = (props: ListItemMetaProps) => {\n    return (\n        <span {...props} className={classNames(\"mdc-list-item__meta\", props.className)}>\n            {props.children}\n        </span>\n    );\n};\n\nexport type ListTopCaptionProps = {\n    children: React.ReactNode;\n};\n\n/**\n * Can be used to show a top caption inside ListItemMeta component.\n * @param props\n * @returns {*}\n * @constructor\n */\nexport const ListTopCaption = (props: ListTopCaptionProps) => {\n    return (\n        <span {...props} className={\"webiny-list-top-caption\"}>\n            <Typography use=\"overline\">{props.children}</Typography>\n        </span>\n    );\n};\n\nexport type ListBottomCaptionProps = {\n    children: React.ReactNode;\n};\n\n/**\n * Can be used to show a bottom caption inside ListItemMeta component.\n * @param props\n * @returns {*}\n * @constructor\n */\nexport const ListBottomCaption = (props: ListBottomCaptionProps) => {\n    return (\n        <span {...props} className={\"webiny-list-bottom-caption\"}>\n            <Typography use=\"overline\">{props.children}</Typography>\n        </span>\n    );\n};\n\nexport type ListTextOverlineProps = {\n    children: React.ReactNode;\n};\n\n/**\n * Can be used to show an overline text inside ListItem component.\n * @param props\n * @returns {*}\n * @constructor\n */\nexport const ListTextOverline = (props: ListTextOverlineProps) => {\n    return (\n        <span {...props} className={\"webiny-list-text-overline\"}>\n            <Typography use=\"overline\">{props.children}</Typography>\n        </span>\n    );\n};\n\nexport type ListActionsProps = {\n    children: React.ReactNode;\n};\n\n/**\n * Used to contain the actions inside ListItemMate component.\n * @param props\n * @returns {*}\n * @constructor\n */\nexport const ListActions = (props: ListActionsProps) => {\n    return (\n        <span {...props} className={\"webiny-list-actions\"}>\n            {props.children}\n        </span>\n    );\n};\n\nconst SelectBoxWrapper = styled(\"div\")({\n    overflow: \"hidden\",\n    width: 25,\n    height: 25,\n    display: \"flex\",\n    position: \"relative\",\n    alignItems: \"center\",\n    justifyContent: \"center\"\n});\n\nexport type ListSelectBoxProps = {\n    children: React.ReactNode;\n};\n\n/**\n * Used to hold the Checkbox element for multi-select options.\n * @param {*} props\n */\nexport const ListSelectBox = (props: ListSelectBoxProps) => {\n    return (\n        <ListItemGraphic>\n            <SelectBoxWrapper>{props.children}</SelectBoxWrapper>\n        </ListItemGraphic>\n    );\n};\n\nexport const SimpleListItem = (props: RmwcSimpleListItemProps & { onClick?: any }) => {\n    return <RmwcSimpleListItem {...props} />;\n};\n"],"mappings":"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"}

package/List/List.stories.js

@@ -1,29 +1,17 @@
 "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.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, {

package/List/List.stories.js.map

@@ -1 +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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"}
+{"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,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,7 +16,5 @@ Object.defineProperty(exports, "refreshIcon", {
     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

@@ -1 +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"}
+{"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.js

@@ -54,9 +54,7 @@ Object.defineProperty(exports, "ScrollListWithSections", {
     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;
@@ -68,7 +66,5 @@ Object.keys(_List).forEach(function (key) {
     }
   });
 });
-
 var _DataList = require("./DataList");
-
 var _CollapsibleList = require("./CollapsibleList");

package/List/index.js.map

@@ -1 +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"}
+{"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.js

@@ -1,34 +1,21 @@
 "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"];
 var style = {
   disabledMenuItem: /*#__PURE__*/(0, _emotion.css)({
@@ -36,24 +23,18 @@ var style = {
     pointerEvents: "none"
   }, "label:disabledMenuItem;")
 };
-
 /**
  * Use Menu component to display a list of choices, once the handler is triggered.
  */
 var Menu = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(Menu, _React$Component);
-
   var _super = (0, _createSuper2.default)(Menu);
-
   function Menu() {
     var _this;
-
     (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));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       menuIsOpen: false
@@ -83,14 +64,14 @@ var Menu = /*#__PURE__*/function (_React$Component) {
         style: {
           zIndex: 99
         } // Fixes Menu in Drawers
-
       }, _this.props.children);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderCustomContent", function () {
       var children = _this.props.children;
       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);
@@ -100,7 +81,6 @@ var Menu = /*#__PURE__*/function (_React$Component) {
     });
     return _this;
   }
-
   (0, _createClass2.default)(Menu, [{
     key: "render",
     value: function render() {
@@ -113,28 +93,23 @@ var Menu = /*#__PURE__*/function (_React$Component) {
   }]);
   return Menu;
 }(_react.default.Component);
-
 exports.Menu = Menu;
 (0, _defineProperty2.default)(Menu, "defaultProps", {
   anchor: "topStart"
 });
-
 var MenuDivider = function MenuDivider() {
   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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    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))
   }));
 };
-
 exports.MenuItem = MenuItem;

package/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"names":["style","disabledMenuItem","css","opacity","pointerEvents","Menu","menuIsOpen","setState","props","onOpen","onClose","anchor","state","className","closeMenu","onSelect","zIndex","children","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 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 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":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAQA;;AACA;;;AAEA,IAAMA,KAAK,GAAG;EACVC,gBAAgB,eAAE,IAAAC,YAAA,EAAI;IAClBC,OAAO,EAAE,GADS;IAElBC,aAAa,EAAE;EAFG,CAAJ;AADR,CAAd;;AAwCA;AACA;AACA;IACMC,I;;;;;;;;;;;;;;;wFAKiC;MAC/BC,UAAU,EAAE;IADmB,C;2FAIP,YAAM;MAC9B,MAAKC,QAAL,CAAc;QAAED,UAAU,EAAE;MAAd,CAAd,EAAoC;QAAA,OAAM,MAAKE,KAAL,CAAWC,MAAX,IAAqB,MAAKD,KAAL,CAAWC,MAAX,EAA3B;MAAA,CAApC;IACH,C;4FAE4B,YAAM;MAC/B,MAAKF,QAAL,CAAc;QAAED,UAAU,EAAE;MAAd,CAAd,EAAqC;QAAA,OAAM,MAAKE,KAAL,CAAWE,OAAX,IAAsB,MAAKF,KAAL,CAAWE,OAAX,EAA5B;MAAA,CAArC;IACH,C;uGAEuC,YAAM;MAC1C,oBACI,6BAAC,UAAD;QACI,YAAY,EAAE,MAAKF,KAAL,CAAWG,MAD7B;QAEI,IAAI,EAAE,MAAKC,KAAL,CAAWN,UAFrB;QAGI,SAAS,EAAE,MAAKE,KAAL,CAAWK,SAH1B;QAII,OAAO,EAAE,MAAKC,SAJlB;QAKI,QAAQ,EAAE,MAAKN,KAAL,CAAWO,QALzB;QAMI,cAAc,EAAE,IANpB;QAOI,KAAK,EAAE;UAAEC,MAAM,EAAE;QAAV,CAPX,CAO2B;;MAP3B,GASK,MAAKR,KAAL,CAAWS,QAThB,CADJ;IAaH,C;sGAEsC,YAAM;MACzC,IAAQA,QAAR,GAAqB,MAAKT,KAA1B,CAAQS,QAAR;MACA,oBACI,6BAAC,iBAAD;QAAa,IAAI,EAAE,MAAKL,KAAL,CAAWN,UAA9B;QAA0C,OAAO,EAAE,MAAKQ;MAAxD,GACK,OAAOG,QAAP,KAAoB,UAApB,GACKA,QAAQ,CAAC;QAAEH,SAAS,EAAE,MAAKA;MAAlB,CAAD,CADb,GAEKG,QAHV,CADJ;IAOH,C;oGAEoC,YAAM;MACvC,OAAOC,KAAK,CAACC,OAAN,CAAc,MAAKX,KAAL,CAAWS,QAAzB,IACD,MAAKG,oBAAL,EADC,GAED,MAAKC,mBAAL,EAFN;IAGH,C;;;;;;WAED,kBAA0C;MACtC,oBACI,6BAAC,uBAAD;QAAmB,eAAa,KAAKb,KAAL,CAAW,aAAX;MAAhC,GACK,KAAKc,iBAAL,EADL,EAEK,KAAKd,KAAL,CAAWe,MAAX,iBACGC,cAAA,CAAMC,YAAN,CAAmB,KAAKjB,KAAL,CAAWe,MAA9B,EAAsC;QAAEG,OAAO,EAAE,KAAKC;MAAhB,CAAtC,CAHR,CADJ;IAOH;;;EA1DcH,cAAA,CAAMI,S;;;8BAAnBvB,I,kBACwC;EACtCM,MAAM,EAAE;AAD8B,C;;AA4D9C,IAAMkB,WAAqB,GAAG,SAAxBA,WAAwB,GAAM;EAChC,oBAAO;IAAI,SAAS,EAAC,kBAAd;IAAiC,IAAI,EAAC;EAAtC,EAAP;AACH,CAFD;;;;AAWA,IAAMC,QAAiC,GAAG,SAApCA,QAAoC,OAAsC;EAAA,IAAnCC,QAAmC,QAAnCA,QAAmC;EAAA,IAAzBlB,SAAyB,QAAzBA,SAAyB;EAAA,IAAXmB,IAAW;EAC5E,oBACI,6BAAC,cAAD,oBACQA,IADR;IAEI,SAAS,EAAE,IAAAC,mBAAA,EAAWpB,SAAX,oCAAyBb,KAAK,CAACC,gBAA/B,EAAkD8B,QAAlD;EAFf,GADJ;AAMH,CAPD"}
+{"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,19 +1,12 @@
 "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",

package/Menu/Menu.stories.js.map

@@ -1 +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,iBAAA,EAAU,iBAAV,EAA6BC,MAA7B,CAAd;AAEA,IAAMC,KAA0B,GAAG;EAC/BC,QAAQ,EAAE,UADqB;EAE/BC,KAAK,EAAE,GAFwB;EAG/BC,MAAM,EAAE;AAHuB,CAAnC;AAMAN,KAAK,CAACO,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI;IAAK,KAAK,EAAEL;EAAZ,gBACI,6BAAC,UAAD;IAAM,MAAM,eAAE,6BAAC,qBAAD,QAAe,WAAf;EAAd,gBACI,6BAAC,cAAD;IACI,OAAO,EAAE,mBAAM;MACXM,OAAO,CAACC,GAAR,CAAY,iBAAZ;IACH;EAHL,GAIC,OAJD,CADJ,eAQI,6BAAC,cAAD,QAAU,QAAV,CARJ,eASI,6BAAC,cAAD,QAAU,YAAV,CATJ,CADJ,CADJ,CADJ,eAgBI,6BAAC,uBAAD,ghBAhBJ,CAFJ,CADJ;AAqCH,CAxCL,EAyCI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,UAAD,EAAOC,cAAP,EAAiBC,iBAAjB;EAAd;AAAR,CAzCJ"}
+{"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

@@ -3,9 +3,7 @@
 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;

package/Menu/index.js.map

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

package/Mosaic/Mosaic.js

@@ -1,30 +1,26 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Mosaic = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _reactColumned = _interopRequireDefault(require("react-columned"));
-
 /**
  * Package react-columned does not have types.
  */
 // @ts-ignore
+
 var Mosaic = function Mosaic(_ref) {
   var children = _ref.children,
-      columns = _ref.columns,
-      className = _ref.className;
+    columns = _ref.columns,
+    className = _ref.className;
   return /*#__PURE__*/_react.default.createElement(_reactColumned.default, {
     columns: columns,
     className: className
   }, children);
 };
-
 exports.Mosaic = Mosaic;
 Mosaic.defaultProps = {
   columns: {