@webiny/ui 0.0.0-mt-3 → 0.0.0-unstable.2af142b57e

package/List/List.js

@@ -1,148 +1,151 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import * as React from "react";
-import { List as RmwcList, ListItem as RmwcListItem, ListItemText as RmwcListItemText, ListItemPrimaryText as RmwcListItemPrimaryText, ListItemSecondaryText as RmwcListItemSecondaryText, SimpleListItem as RmwcSimpleListItem } from "@rmwc/list";
-import { Typography } from "../Typography";
-import classNames from "classnames";
-import styled from "@emotion/styled";
+"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
  * @returns {*}
  * @constructor
  */
-export var ListItem = function ListItem(props) {
-  return /*#__PURE__*/React.createElement(RmwcListItem, props);
+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.
  */
-export var List = /*#__PURE__*/function (_React$Component) {
-  _inherits(List, _React$Component);
-
-  var _super = _createSuper(List);
-
+var List = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(List, _React$Component);
+  var _super = (0, _createSuper2.default)(List);
   function List() {
-    _classCallCheck(this, List);
-
+    (0, _classCallCheck2.default)(this, List);
     return _super.apply(this, arguments);
   }
-
-  _createClass(List, [{
+  (0, _createClass2.default)(List, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(RmwcList, this.props, this.props.children);
+      return /*#__PURE__*/_react.default.createElement(_list.List, this.props, this.props.children);
     }
   }]);
-
   return List;
-}(React.Component);
-
+}(_react.default.Component);
+exports.List = List;
 /**
  * Used to show regular text in list items.
  * @param props
  * @returns {*}
  * @constructor
  */
-export var ListItemText = function ListItemText(props) {
-  return /*#__PURE__*/React.createElement(RmwcListItemText, props, props.children);
+var ListItemText = function ListItemText(props) {
+  return /*#__PURE__*/_react.default.createElement(_list.ListItemText, props, props.children);
 };
-export var ListItemTextPrimary = function ListItemTextPrimary(props) {
-  return /*#__PURE__*/React.createElement(RmwcListItemPrimaryText, null, 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
  * @returns {*}
  * @constructor
  */
-export var ListItemTextSecondary = function ListItemTextSecondary(props) {
-  return /*#__PURE__*/React.createElement(RmwcListItemSecondaryText, null, props.children);
+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
  * @returns {*}
  * @constructor
  */
-export var ListItemGraphic = function ListItemGraphic(props) {
-  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
-    className: classNames("mdc-list-item__graphic", props.className)
+var ListItemGraphic = function ListItemGraphic(props) {
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, 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
  * @returns {*}
  * @constructor
  */
-export var ListItemMeta = function ListItemMeta(props) {
-  return /*#__PURE__*/React.createElement("span", Object.assign({}, props, {
-    className: classNames("mdc-list-item__meta", props.className)
+var ListItemMeta = function ListItemMeta(props) {
+  return /*#__PURE__*/_react.default.createElement("span", Object.assign({}, 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
  * @returns {*}
  * @constructor
  */
-export var ListTopCaption = function ListTopCaption(props) {
-  return /*#__PURE__*/React.createElement("span", Object.assign({}, props, {
+var ListTopCaption = function ListTopCaption(props) {
+  return /*#__PURE__*/_react.default.createElement("span", Object.assign({}, props, {
     className: "webiny-list-top-caption"
-  }), /*#__PURE__*/React.createElement(Typography, {
+  }), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
     use: "overline"
   }, props.children));
 };
-
+exports.ListTopCaption = ListTopCaption;
 /**
  * Can be used to show a bottom caption inside ListItemMeta component.
  * @param props
  * @returns {*}
  * @constructor
  */
-export var ListBottomCaption = function ListBottomCaption(props) {
-  return /*#__PURE__*/React.createElement("span", Object.assign({}, props, {
+var ListBottomCaption = function ListBottomCaption(props) {
+  return /*#__PURE__*/_react.default.createElement("span", Object.assign({}, props, {
     className: "webiny-list-bottom-caption"
-  }), /*#__PURE__*/React.createElement(Typography, {
+  }), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
     use: "overline"
   }, props.children));
 };
-
+exports.ListBottomCaption = ListBottomCaption;
 /**
  * Can be used to show an overline text inside ListItem component.
  * @param props
  * @returns {*}
  * @constructor
  */
-export var ListTextOverline = function ListTextOverline(props) {
-  return /*#__PURE__*/React.createElement("span", Object.assign({}, props, {
+var ListTextOverline = function ListTextOverline(props) {
+  return /*#__PURE__*/_react.default.createElement("span", Object.assign({}, props, {
     className: "webiny-list-text-overline"
-  }), /*#__PURE__*/React.createElement(Typography, {
+  }), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
     use: "overline"
   }, props.children));
 };
-
+exports.ListTextOverline = ListTextOverline;
 /**
  * Used to contain the actions inside ListItemMate component.
  * @param props
  * @returns {*}
  * @constructor
  */
-export var ListActions = function ListActions(props) {
-  return /*#__PURE__*/React.createElement("span", Object.assign({}, props, {
+var ListActions = function ListActions(props) {
+  return /*#__PURE__*/_react.default.createElement("span", Object.assign({}, props, {
     className: "webiny-list-actions"
   }), props.children);
 };
-var SelectBoxWrapper = /*#__PURE__*/styled("div", {
+exports.ListActions = ListActions;
+var SelectBoxWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "entzw6n0",
   label: "SelectBoxWrapper"
 })({
@@ -154,14 +157,15 @@ var SelectBoxWrapper = /*#__PURE__*/styled("div", {
   alignItems: "center",
   justifyContent: "center"
 });
-
 /**
  * Used to hold the Checkbox element for multi-select options.
  * @param {*} props
  */
-export var ListSelectBox = function ListSelectBox(props) {
-  return /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(SelectBoxWrapper, null, props.children));
+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);
 };
-export var SimpleListItem = function SimpleListItem(props) {
-  return /*#__PURE__*/React.createElement(RmwcSimpleListItem, props);
-};
+exports.SimpleListItem = SimpleListItem;

package/List/List.js.map

@@ -0,0 +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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"}

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 };