@webiny/ui 5.29.0 → 5.30.0

package/List/DataList/DataListWithSections.js

@@ -0,0 +1,356 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScrollListWithSections = exports.DataListWithSections = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Loader = _interopRequireDefault(require("./Loader"));
+
+var _NoData = _interopRequireDefault(require("./NoData"));
+
+var _Typography = require("../../Typography");
+
+var _emotion = require("emotion");
+
+var _noop = _interopRequireDefault(require("lodash/noop"));
+
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+
+var _Checkbox = require("../../Checkbox");
+
+var _Menu = require("../../Menu");
+
+var _Grid = require("../../Grid");
+
+var _icons = require("./icons");
+
+var _ = require("..");
+
+var _DataListModalOverlay = require("./DataListModalOverlay");
+
+var ListContainer = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "exlqcq90",
+  label: "ListContainer"
+})({
+  position: "relative",
+  height: "100%",
+  ".mdc-list": {
+    paddingBottom: 0,
+    paddingTop: 0
+  },
+  ".mdc-list-item": {
+    borderBottom: "1px solid var(--mdc-theme-on-background)",
+    padding: "10px 20px 10px 20px",
+    height: "auto",
+    minHeight: 40,
+    ".mdc-list-item__text, .mdc-list-item__secondary-text, .webiny-list-text-overline": {
+      display: "block"
+    },
+    ".mdc-list-item__graphic": {
+      marginRight: 20
+    },
+    ".mdc-list-item__text": {
+      width: "100%",
+      margin: "-20px 0",
+      padding: "20px 0"
+    },
+    ".mdc-list-item__meta": {
+      alignItems: "center",
+      display: "flex",
+      justifyContent: "space-between",
+      flexDirection: "column",
+      position: "relative",
+      padding: "5px 0",
+      boxSizing: "border-box",
+      height: "100%",
+      whiteSpace: "nowrap",
+      marginTop: -10,
+      marginBottom: -10,
+      ".webiny-list-actions": {
+        display: "none"
+      },
+      ".webiny-list-top-caption, .webiny-list-bottom-caption": {
+        //position: 'absolute',
+        width: "100%",
+        textAlign: "right"
+      },
+      ".webiny-list-top-caption": {
+        marginBottom: 20
+      }
+    },
+    "&:hover": {
+      ".mdc-list-item__meta": {
+        ".webiny-list-top-caption, .webiny-list-bottom-caption": {
+          display: "none"
+        },
+        ".webiny-list-actions": {
+          display: "flex",
+          height: "100%",
+          alignItems: "center"
+        }
+      }
+    }
+  }
+});
+var listHeader = /*#__PURE__*/(0, _emotion.css)({
+  borderBottom: "1px solid var(--mdc-theme-on-background)",
+  color: "var(--mdc-theme-text-primary-on-background)",
+  width: "100%"
+}, "label:listHeader;");
+var listSubHeader = /*#__PURE__*/(0, _emotion.css)({
+  width: "100%",
+  "&.mdc-layout-grid": {
+    borderBottom: "1px solid var(--mdc-theme-on-background)",
+    padding: "10px 24px 10px 12px",
+    color: "var(--mdc-theme-text-primary-on-background)"
+  }
+}, "label:listSubHeader;");
+var ListHeaderItem = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "exlqcq91",
+  label: "ListHeaderItem"
+})({
+  display: "inline-block",
+  verticalAlign: "middle",
+  "&.disabled": {
+    opacity: 0.5,
+    pointerEvents: "none"
+  }
+});
+var listTitle = /*#__PURE__*/(0, _emotion.css)({
+  display: "flex",
+  alignItems: "center"
+}, "label:listTitle;");
+var listActions = /*#__PURE__*/(0, _emotion.css)({
+  textAlign: "right"
+}, "label:listActions;");
+var scrollList = /*#__PURE__*/(0, _emotion.css)({
+  overflow: "auto",
+  height: "calc(100vh - 235px)"
+}, "label:scrollList;");
+var dataListContent = /*#__PURE__*/(0, _emotion.css)({
+  position: "relative",
+  height: "100%",
+  overflow: "auto"
+}, "label:dataListContent;");
+
+var MultiSelectAll = function MultiSelectAll(props) {
+  var multiSelectActions = props.multiSelectActions;
+
+  if (!multiSelectActions) {
+    return null;
+  }
+  /**
+   * We can safely cast because we have defaults.
+   */
+
+
+  var _ref = props,
+      isAllMultiSelected = _ref.isAllMultiSelected,
+      isNoneMultiSelected = _ref.isNoneMultiSelected,
+      multiSelectAll = _ref.multiSelectAll,
+      data = _ref.data;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, typeof multiSelectAll === "function" && /*#__PURE__*/_react.default.createElement(ListHeaderItem, null, /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
+    indeterminate: !isAllMultiSelected(data) && !isNoneMultiSelected(data),
+    value: isAllMultiSelected(data),
+    onClick: function onClick() {
+      multiSelectAll(!isAllMultiSelected(data), data);
+    }
+  })));
+};
+
+var MultiSelectActions = function MultiSelectActions(props) {
+  var multiSelectActions = props.multiSelectActions;
+
+  if (!multiSelectActions) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(ListHeaderItem, null, multiSelectActions);
+};
+
+var RefreshButton = function RefreshButton(props) {
+  var refresh = props.refresh;
+
+  if (!refresh) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(ListHeaderItem, null, /*#__PURE__*/_react.default.createElement(_icons.RefreshIcon, {
+    onClick: function onClick() {
+      return refresh();
+    }
+  }));
+};
+
+var Sorters = function Sorters(props) {
+  var sorters = props.sorters;
+
+  if (!sorters) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(ListHeaderItem, null, /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
+    handle: /*#__PURE__*/_react.default.createElement(_icons.SortIcon, null)
+  }, sorters.map(function (sorter) {
+    return /*#__PURE__*/_react.default.createElement(_Menu.MenuItem, {
+      key: sorter.label,
+      onClick: function onClick() {
+        if (sorters && props.setSorters) {
+          props.setSorters(sorter.value);
+        }
+      }
+    }, sorter.label);
+  })));
+};
+
+var Filters = function Filters(props) {
+  var filters = props.filters;
+
+  if (!filters) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(ListHeaderItem, null, /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
+    handle: /*#__PURE__*/_react.default.createElement(_icons.FilterIcon, null)
+  }, filters));
+};
+
+var Pagination = function Pagination(props) {
+  var pagination = props.pagination;
+
+  if (!pagination) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, pagination.setNextPage && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ListHeaderItem, {
+    className: (0, _classnames.default)({
+      disabled: !pagination.hasPreviousPage
+    })
+  }, /*#__PURE__*/_react.default.createElement(_icons.PreviousPageIcon, {
+    onClick: function onClick() {
+      if (pagination.setPreviousPage && pagination.hasPreviousPage) {
+        pagination.setPreviousPage();
+      }
+    }
+  })), /*#__PURE__*/_react.default.createElement(ListHeaderItem, {
+    className: (0, _classnames.default)({
+      disabled: !pagination.hasNextPage
+    })
+  }, /*#__PURE__*/_react.default.createElement(_icons.NextPageIcon, {
+    onClick: function onClick() {
+      if (pagination.setNextPage && pagination.hasNextPage) {
+        pagination.setNextPage();
+      }
+    }
+  }))), Array.isArray(pagination.perPageOptions) && pagination.setPerPage && /*#__PURE__*/_react.default.createElement(ListHeaderItem, null, /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
+    handle: /*#__PURE__*/_react.default.createElement(_icons.OptionsIcon, null)
+  }, pagination.setPerPage && pagination.perPageOptions.map(function (perPage) {
+    return /*#__PURE__*/_react.default.createElement(_Menu.MenuItem, {
+      key: perPage,
+      onClick: function onClick() {
+        return pagination.setPerPage && pagination.setPerPage(perPage);
+      }
+    }, perPage);
+  }))));
+};
+
+var Search = function Search(props) {
+  if (!props.search) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+    span: 7
+  }, /*#__PURE__*/_react.default.cloneElement(props.search, props));
+};
+
+var DataListWithSections = function DataListWithSections(props) {
+  var render = null;
+
+  if (props.loading) {
+    render = props.loader;
+  } else if ((0, _isEmpty.default)(props.data)) {
+    render = props.noData;
+  } else {
+    var ch = props.children;
+    render = typeof ch === "function" ? ch(props) : null;
+  }
+
+  var showOptions = props.showOptions || {};
+  var listHeaderActionsCellSpan = props.actions ? 7 : 0;
+  var listHeaderTitleCellSpan = 12 - listHeaderActionsCellSpan;
+  return /*#__PURE__*/_react.default.createElement(_DataListModalOverlay.DataListModalOverlayProvider, null, /*#__PURE__*/_react.default.createElement(ListContainer, {
+    className: "webiny-data-list",
+    "data-testid": "ui.list.data-list"
+  }, (props.title || props.actions) && /*#__PURE__*/_react.default.createElement(_Grid.Grid, {
+    className: listHeader
+  }, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+    span: listHeaderTitleCellSpan,
+    className: listTitle
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "headline5"
+  }, props.title)), props.actions && /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+    span: listHeaderActionsCellSpan,
+    className: listActions
+  }, props.actions)), Object.keys(showOptions).length > 0 && /*#__PURE__*/_react.default.createElement(_Grid.Grid, {
+    className: listSubHeader
+  }, /*#__PURE__*/_react.default.createElement(Search, props), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+    span: props.search ? 5 : 12,
+    style: {
+      justifySelf: "end"
+    }
+  }, /*#__PURE__*/_react.default.createElement(MultiSelectAll, props), showOptions.refresh && /*#__PURE__*/_react.default.createElement(RefreshButton, props), showOptions.pagination && /*#__PURE__*/_react.default.createElement(Pagination, props), showOptions.sorters && /*#__PURE__*/_react.default.createElement(Sorters, props), showOptions.filters && /*#__PURE__*/_react.default.createElement(Filters, props), props.modalOverlayAction ? /*#__PURE__*/_react.default.createElement(ListHeaderItem, null, props.modalOverlayAction) : null, /*#__PURE__*/_react.default.createElement(MultiSelectActions, props))), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(dataListContent, "webiny-data-list__content")
+  }, props.subHeader, render, props.modalOverlay)));
+};
+
+exports.DataListWithSections = DataListWithSections;
+DataListWithSections.defaultProps = {
+  children: null,
+  title: null,
+  data: null,
+  meta: null,
+  loading: false,
+  refresh: function refresh() {
+    return void 0;
+  },
+  setPage: null,
+  setPerPage: null,
+  perPageOptions: [10, 25, 50],
+  filters: null,
+  sorters: null,
+  setSorters: null,
+  actions: null,
+  multiSelectAll: _noop.default,
+  isAllMultiSelected: function isAllMultiSelected() {
+    return false;
+  },
+  isNoneMultiSelected: function isNoneMultiSelected() {
+    return false;
+  },
+  loader: /*#__PURE__*/_react.default.createElement(_Loader.default, null),
+  noData: /*#__PURE__*/_react.default.createElement(_NoData.default, null),
+  showOptions: {
+    refresh: true,
+    pagination: true,
+    sorters: true,
+    filters: true
+  }
+};
+
+var ScrollListWithSections = function ScrollListWithSections(props) {
+  return /*#__PURE__*/_react.default.createElement(_.List, Object.assign({}, props, {
+    className: (0, _classnames.default)(props.className, scrollList)
+  }), props.children);
+};
+
+exports.ScrollListWithSections = ScrollListWithSections;

package/List/DataList/DataListWithSections.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ListContainer","styled","position","height","paddingBottom","paddingTop","borderBottom","padding","minHeight","display","marginRight","width","margin","alignItems","justifyContent","flexDirection","boxSizing","whiteSpace","marginTop","marginBottom","textAlign","listHeader","css","color","listSubHeader","ListHeaderItem","verticalAlign","opacity","pointerEvents","listTitle","listActions","scrollList","overflow","dataListContent","MultiSelectAll","props","multiSelectActions","isAllMultiSelected","isNoneMultiSelected","multiSelectAll","data","MultiSelectActions","RefreshButton","refresh","Sorters","sorters","map","sorter","label","setSorters","value","Filters","filters","Pagination","pagination","setNextPage","classNames","disabled","hasPreviousPage","setPreviousPage","hasNextPage","Array","isArray","perPageOptions","setPerPage","perPage","Search","search","React","cloneElement","DataListWithSections","render","loading","loader","isEmpty","noData","ch","children","showOptions","listHeaderActionsCellSpan","actions","listHeaderTitleCellSpan","title","Object","keys","length","justifySelf","modalOverlayAction","subHeader","modalOverlay","defaultProps","meta","setPage","noop","ScrollListWithSections","className"],"sources":["DataListWithSections.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport classNames from \"classnames\";\nimport Loader from \"./Loader\";\nimport NoData from \"./NoData\";\nimport { Typography } from \"~/Typography\";\nimport { css } from \"emotion\";\nimport noop from \"lodash/noop\";\nimport isEmpty from \"lodash/isEmpty\";\n\nimport { Checkbox } from \"../../Checkbox\";\nimport { Menu, MenuItem } from \"../../Menu\";\nimport { Grid, Cell } from \"../../Grid\";\n\nimport {\n    RefreshIcon,\n    SortIcon,\n    FilterIcon,\n    PreviousPageIcon,\n    NextPageIcon,\n    OptionsIcon\n} from \"./icons\";\nimport { List, ListItem, ListProps } from \"..\";\nimport { DataListModalOverlayProvider } from \"./DataListModalOverlay\";\nimport { PaginationProp, SortersProp } from \"./types\";\n\nconst ListContainer = styled(\"div\")({\n    position: \"relative\",\n    height: \"100%\",\n    \".mdc-list\": {\n        paddingBottom: 0,\n        paddingTop: 0\n    },\n    \".mdc-list-item\": {\n        borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n        padding: \"10px 20px 10px 20px\",\n        height: \"auto\",\n        minHeight: 40,\n        \".mdc-list-item__text, .mdc-list-item__secondary-text, .webiny-list-text-overline\": {\n            display: \"block\"\n        },\n        \".mdc-list-item__graphic\": {\n            marginRight: 20\n        },\n        \".mdc-list-item__text\": {\n            width: \"100%\",\n            margin: \"-20px 0\",\n            padding: \"20px 0\"\n        },\n        \".mdc-list-item__meta\": {\n            alignItems: \"center\",\n            display: \"flex\",\n            justifyContent: \"space-between\",\n            flexDirection: \"column\",\n            position: \"relative\",\n            padding: \"5px 0\",\n            boxSizing: \"border-box\",\n            height: \"100%\",\n            whiteSpace: \"nowrap\",\n            marginTop: -10,\n            marginBottom: -10,\n            \".webiny-list-actions\": {\n                display: \"none\"\n            },\n            \".webiny-list-top-caption, .webiny-list-bottom-caption\": {\n                //position: 'absolute',\n                width: \"100%\",\n                textAlign: \"right\"\n            },\n            \".webiny-list-top-caption\": {\n                marginBottom: 20\n            }\n        },\n        \"&:hover\": {\n            \".mdc-list-item__meta\": {\n                \".webiny-list-top-caption, .webiny-list-bottom-caption\": {\n                    display: \"none\"\n                },\n                \".webiny-list-actions\": {\n                    display: \"flex\",\n                    height: \"100%\",\n                    alignItems: \"center\"\n                }\n            }\n        }\n    }\n});\n\nconst listHeader = css({\n    borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n    color: \"var(--mdc-theme-text-primary-on-background)\",\n    width: \"100%\"\n});\n\nconst listSubHeader = css({\n    width: \"100%\",\n    \"&.mdc-layout-grid\": {\n        borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n        padding: \"10px 24px 10px 12px\",\n        color: \"var(--mdc-theme-text-primary-on-background)\"\n    }\n});\n\nconst ListHeaderItem = styled(\"div\")({\n    display: \"inline-block\",\n    verticalAlign: \"middle\",\n    \"&.disabled\": {\n        opacity: 0.5,\n        pointerEvents: \"none\"\n    }\n});\n\nconst listTitle = css({\n    display: \"flex\",\n    alignItems: \"center\"\n});\n\nconst listActions = css({\n    textAlign: \"right\"\n});\n\nconst scrollList = css({\n    overflow: \"auto\",\n    height: \"calc(100vh - 235px)\"\n});\n\nconst dataListContent = css({\n    position: \"relative\",\n    height: \"100%\",\n    overflow: \"auto\"\n});\n\ninterface DataListData {\n    [key: string]: Record<string, any>[];\n}\n\n// This was copied from \"./types\" so that it can be outputted in docs.\ninterface DataListWithSectionsProps {\n    // Pass a function to take full control of list render.\n    children?: ((props: any) => React.ReactNode) | null;\n\n    // A title of paginated list.\n    title?: React.ReactNode;\n\n    // FormData that needs to be shown in the list.\n    data?: DataListData | null;\n\n    // A callback that must refresh current view by repeating the previous query.\n    refresh?: (() => void) | null;\n\n    // If true, Loader component will be shown, disallowing any interaction.\n    loading?: boolean;\n\n    // Provide a custom loader. Shown while the content is loading.\n    loader?: React.ReactNode;\n\n    // Provide a custom no data component. Shown while there is no data to be shown.\n    noData?: React.ReactNode;\n\n    // Provide all pagination data, options and callbacks here.\n    pagination?: PaginationProp;\n\n    // Triggered once a sorter has been selected.\n    setSorters?: Function | null;\n\n    // Provide all sorters options and callbacks here.\n    sorters?: SortersProp | null;\n\n    // Provide actions that will be shown in the top right corner (eg. export or import actions).\n    actions?: React.ReactNode;\n\n    // Provide filters that will be shown in the top left corner (eg. filter by category or status).\n    filters?: React.ReactNode;\n\n    // Provide actions that can be executed on one or more multi-selected list items (eg. export or delete).\n    multiSelectActions?: React.ReactNode;\n\n    // Provide callback that will be executed once user selects all list items.\n    multiSelectAll?: (value: boolean, data: DataListData | null) => void;\n\n    // Callback which returns true if all items were selected, otherwise returns false.\n    isAllMultiSelected?: (data: DataListData | null) => boolean;\n\n    // Callback which returns true if none of the items were selected, otherwise returns false.\n    isNoneMultiSelected?: (data: DataListData | null) => boolean;\n\n    showOptions?: {\n        refresh?: boolean;\n        pagination?: boolean;\n        filters?: boolean;\n        sorters?: boolean;\n        [key: string]: any;\n    };\n\n    // Provide search UI that will be shown in the top left corner.\n    search?: React.ReactElement;\n    // Provide simple modal UI that will be shown over the list content.\n    modalOverlay?: React.ReactElement;\n    // Provide an action element that handle toggling the \"Modal overlay\".\n    modalOverlayAction?: React.ReactElement;\n    // Provide additional UI for list sub-header.\n    subHeader?: React.ReactElement;\n\n    meta?: Record<string, any> | null;\n\n    setPage?: ((page: string) => void) | null;\n\n    setPerPage?: ((page: string) => void) | null;\n\n    perPageOptions?: number[];\n}\n\nconst MultiSelectAll: React.FC<DataListWithSectionsProps> = props => {\n    const { multiSelectActions } = props;\n    if (!multiSelectActions) {\n        return null;\n    }\n    /**\n     * We can safely cast because we have defaults.\n     */\n    const { isAllMultiSelected, isNoneMultiSelected, multiSelectAll, data } =\n        props as Required<DataListWithSectionsProps>;\n\n    return (\n        <React.Fragment>\n            {typeof multiSelectAll === \"function\" && (\n                <ListHeaderItem>\n                    <Checkbox\n                        indeterminate={!isAllMultiSelected(data) && !isNoneMultiSelected(data)}\n                        value={isAllMultiSelected(data)}\n                        onClick={() => {\n                            multiSelectAll(!isAllMultiSelected(data), data);\n                        }}\n                    />\n                </ListHeaderItem>\n            )}\n        </React.Fragment>\n    );\n};\n\nconst MultiSelectActions: React.FC<DataListWithSectionsProps> = props => {\n    const { multiSelectActions } = props;\n    if (!multiSelectActions) {\n        return null;\n    }\n\n    return <ListHeaderItem>{multiSelectActions}</ListHeaderItem>;\n};\n\nconst RefreshButton: React.FC<DataListWithSectionsProps> = props => {\n    const refresh = props.refresh;\n    if (!refresh) {\n        return null;\n    }\n\n    return (\n        <ListHeaderItem>\n            <RefreshIcon onClick={() => refresh()} />\n        </ListHeaderItem>\n    );\n};\n\nconst Sorters: React.FC<DataListWithSectionsProps> = props => {\n    const sorters = props.sorters;\n    if (!sorters) {\n        return null;\n    }\n\n    return (\n        <ListHeaderItem>\n            <Menu handle={<SortIcon />}>\n                {sorters.map(sorter => (\n                    <MenuItem\n                        key={sorter.label}\n                        onClick={() => {\n                            if (sorters && props.setSorters) {\n                                props.setSorters(sorter.value);\n                            }\n                        }}\n                    >\n                        {sorter.label}\n                    </MenuItem>\n                ))}\n            </Menu>\n        </ListHeaderItem>\n    );\n};\n\nconst Filters: React.FC<DataListWithSectionsProps> = props => {\n    const filters = props.filters;\n    if (!filters) {\n        return null;\n    }\n\n    return (\n        <ListHeaderItem>\n            <Menu handle={<FilterIcon />}>{filters}</Menu>\n        </ListHeaderItem>\n    );\n};\n\nconst Pagination: React.FC<DataListWithSectionsProps> = props => {\n    const { pagination } = props;\n    if (!pagination) {\n        return null;\n    }\n\n    return (\n        <React.Fragment>\n            {pagination.setNextPage && (\n                <React.Fragment>\n                    <ListHeaderItem\n                        className={classNames({\n                            disabled: !pagination.hasPreviousPage\n                        })}\n                    >\n                        <PreviousPageIcon\n                            onClick={() => {\n                                if (pagination.setPreviousPage && pagination.hasPreviousPage) {\n                                    pagination.setPreviousPage();\n                                }\n                            }}\n                        />\n                    </ListHeaderItem>\n\n                    <ListHeaderItem\n                        className={classNames({\n                            disabled: !pagination.hasNextPage\n                        })}\n                    >\n                        <NextPageIcon\n                            onClick={() => {\n                                if (pagination.setNextPage && pagination.hasNextPage) {\n                                    pagination.setNextPage();\n                                }\n                            }}\n                        />\n                    </ListHeaderItem>\n                </React.Fragment>\n            )}\n\n            {Array.isArray(pagination.perPageOptions) && pagination.setPerPage && (\n                <ListHeaderItem>\n                    <Menu handle={<OptionsIcon />}>\n                        {pagination.setPerPage &&\n                            pagination.perPageOptions.map(perPage => (\n                                <MenuItem\n                                    key={perPage}\n                                    onClick={() =>\n                                        pagination.setPerPage && pagination.setPerPage(perPage)\n                                    }\n                                >\n                                    {perPage}\n                                </MenuItem>\n                            ))}\n                    </Menu>\n                </ListHeaderItem>\n            )}\n        </React.Fragment>\n    );\n};\n\nconst Search: React.FC<DataListWithSectionsProps> = props => {\n    if (!props.search) {\n        return null;\n    }\n    return <Cell span={7}>{React.cloneElement(props.search, props)}</Cell>;\n};\n\nexport const DataListWithSections: React.FC<DataListWithSectionsProps> = props => {\n    let render: React.ReactNode = null;\n\n    if (props.loading) {\n        render = props.loader;\n    } else if (isEmpty(props.data)) {\n        render = props.noData;\n    } else {\n        const ch = props.children;\n        render = typeof ch === \"function\" ? ch(props) : null;\n    }\n\n    const showOptions = props.showOptions || {};\n\n    const listHeaderActionsCellSpan = props.actions ? 7 : 0;\n    const listHeaderTitleCellSpan = 12 - listHeaderActionsCellSpan;\n\n    return (\n        <DataListModalOverlayProvider>\n            <ListContainer className={\"webiny-data-list\"} data-testid={\"ui.list.data-list\"}>\n                {(props.title || props.actions) && (\n                    <Grid className={listHeader}>\n                        <Cell span={listHeaderTitleCellSpan} className={listTitle}>\n                            <Typography use=\"headline5\">{props.title}</Typography>\n                        </Cell>\n                        {props.actions && (\n                            <Cell span={listHeaderActionsCellSpan} className={listActions}>\n                                {props.actions}\n                            </Cell>\n                        )}\n                    </Grid>\n                )}\n\n                {Object.keys(showOptions).length > 0 && (\n                    <Grid className={listSubHeader}>\n                        <Search {...props} />\n                        <Cell span={props.search ? 5 : 12} style={{ justifySelf: \"end\" }}>\n                            <MultiSelectAll {...props} />\n                            {showOptions.refresh && <RefreshButton {...props} />}\n                            {showOptions.pagination && <Pagination {...props} />}\n                            {showOptions.sorters && <Sorters {...props} />}\n                            {showOptions.filters && <Filters {...props} />}\n                            {props.modalOverlayAction ? (\n                                <ListHeaderItem>{props.modalOverlayAction}</ListHeaderItem>\n                            ) : null}\n                            <MultiSelectActions {...props} />\n                        </Cell>\n                    </Grid>\n                )}\n\n                <div className={classNames(dataListContent, \"webiny-data-list__content\")}>\n                    {props.subHeader}\n                    {render}\n                    {props.modalOverlay}\n                </div>\n            </ListContainer>\n        </DataListModalOverlayProvider>\n    );\n};\n\nDataListWithSections.defaultProps = {\n    children: null,\n    title: null,\n    data: null,\n    meta: null,\n    loading: false,\n    refresh: () => {\n        return void 0;\n    },\n    setPage: null,\n    setPerPage: null,\n    perPageOptions: [10, 25, 50],\n    filters: null,\n    sorters: null,\n    setSorters: null,\n    actions: null,\n    multiSelectAll: noop,\n    isAllMultiSelected: () => false,\n    isNoneMultiSelected: () => false,\n    loader: <Loader />,\n    noData: <NoData />,\n    showOptions: {\n        refresh: true,\n        pagination: true,\n        sorters: true,\n        filters: true\n    }\n};\n\ninterface ScrollListWithSectionsProps extends ListProps {\n    children: React.ReactElement<typeof ListItem>[];\n}\n\nexport const ScrollListWithSections: React.FC<ScrollListWithSectionsProps> = props => {\n    return (\n        <List {...props} className={classNames(props.className, scrollList)}>\n            {props.children}\n        </List>\n    );\n};\n"],"mappings":"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"}

package/List/DataList/index.d.ts

@@ -1,3 +1,4 @@
 export { DataList, ScrollList } from "./DataList";
+export { DataListWithSections, ScrollListWithSections } from "./DataListWithSections";
 export { default as NoData } from "./NoData";
 export * from "./DataListModalOverlay";

package/List/DataList/index.js

@@ -8,6 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {
   DataList: true,
   ScrollList: true,
+  DataListWithSections: true,
+  ScrollListWithSections: true,
   NoData: true
 };
 Object.defineProperty(exports, "DataList", {
@@ -16,6 +18,12 @@ Object.defineProperty(exports, "DataList", {
     return _DataList.DataList;
   }
 });
+Object.defineProperty(exports, "DataListWithSections", {
+  enumerable: true,
+  get: function get() {
+    return _DataListWithSections.DataListWithSections;
+  }
+});
 Object.defineProperty(exports, "NoData", {
   enumerable: true,
   get: function get() {
@@ -28,9 +36,17 @@ Object.defineProperty(exports, "ScrollList", {
     return _DataList.ScrollList;
   }
 });
+Object.defineProperty(exports, "ScrollListWithSections", {
+  enumerable: true,
+  get: function get() {
+    return _DataListWithSections.ScrollListWithSections;
+  }
+});
 
 var _DataList = require("./DataList");
 
+var _DataListWithSections = require("./DataListWithSections");
+
 var _NoData = _interopRequireDefault(require("./NoData"));
 
 var _DataListModalOverlay = require("./DataListModalOverlay");

package/List/DataList/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { DataList, ScrollList } from \"./DataList\";\nexport { default as NoData } from \"./NoData\";\nexport * from \"./DataListModalOverlay\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { DataList, ScrollList } from \"./DataList\";\nexport { DataListWithSections, ScrollListWithSections } from \"./DataListWithSections\";\nexport { default as NoData } from \"./NoData\";\nexport * from \"./DataListModalOverlay\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/List/List.d.ts

@@ -27,7 +27,7 @@ export declare class List extends React.Component<ListProps> {
 export declare type ListItemTextProps = RmwcListItemTextProps & {
     children: React.ReactNode;
     className?: string;
-    onClick?: (e: React.SyntheticEvent<MouseEvent>) => void;
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 };
 /**
  * Used to show regular text in list items.

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.SyntheticEvent<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/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

@@ -8,6 +8,8 @@ var _exportNames = {
   ScrollList: true,
   DataListModalOverlay: true,
   DataListModalOverlayAction: true,
+  DataListWithSections: true,
+  ScrollListWithSections: true,
   CollapsibleList: true
 };
 Object.defineProperty(exports, "CollapsibleList", {
@@ -34,12 +36,24 @@ Object.defineProperty(exports, "DataListModalOverlayAction", {
     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");
 

package/List/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./List\";\n\nexport { DataList, ScrollList, DataListModalOverlay, DataListModalOverlayAction } from \"./DataList\";\nexport { CollapsibleList } from \"./CollapsibleList\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA"}
+{"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

@@ -18,8 +18,6 @@ interface MenuState {
 declare class Menu extends React.Component<MenuProps, MenuState> {
     static defaultProps: Partial<MenuProps>;
     state: MenuState;
-    anchorRef: React.RefObject<unknown>;
-    menuRef: React.RefObject<unknown>;
     private readonly openMenu;
     private readonly closeMenu;
     private readonly renderMenuWithPortal;

package/Menu/Menu.js

@@ -58,8 +58,6 @@ var Menu = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       menuIsOpen: false
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "anchorRef", /*#__PURE__*/_react.default.createRef());
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "menuRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "openMenu", function () {
       _this.setState({
         menuIsOpen: true
@@ -81,7 +79,7 @@ var Menu = /*#__PURE__*/function (_React$Component) {
         className: _this.props.className,
         onClose: _this.closeMenu,
         onSelect: _this.props.onSelect,
-        hoistToBody: true
+        renderToPortal: true
       }, _this.props.children);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderCustomContent", function () {
@@ -103,7 +101,6 @@ var Menu = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       return /*#__PURE__*/_react.default.createElement(_menu.MenuSurfaceAnchor, {
-        ref: this.anchorRef,
         "data-testid": this.props["data-testid"]
       }, this.renderMenuContent(), this.props.handle && /*#__PURE__*/_react.default.cloneElement(this.props.handle, {
         onClick: this.openMenu

package/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"names":["style","disabledMenuItem","css","opacity","pointerEvents","Menu","menuIsOpen","React","createRef","setState","props","onOpen","onClose","anchor","state","className","closeMenu","onSelect","children","Array","isArray","renderMenuWithPortal","renderCustomContent","anchorRef","renderMenuContent","handle","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    anchorRef = React.createRef();\n    menuRef = React.createRef();\n\n    private readonly openMenu = () => {\n        this.setState({ menuIsOpen: true }, () => this.props.onOpen && this.props.onOpen());\n    };\n\n    private readonly closeMenu = () => {\n        this.setState({ menuIsOpen: false }, () => this.props.onClose && this.props.onClose());\n    };\n\n    private readonly renderMenuWithPortal = () => {\n        return (\n            <BaseMenu\n                anchorCorner={this.props.anchor}\n                open={this.state.menuIsOpen}\n                className={this.props.className}\n                onClose={this.closeMenu}\n                onSelect={this.props.onSelect}\n                hoistToBody={true}\n            >\n                {this.props.children}\n            </BaseMenu>\n        );\n    };\n\n    private readonly renderCustomContent = () => {\n        const { children } = this.props;\n        return (\n            <MenuSurface open={this.state.menuIsOpen} onClose={this.closeMenu}>\n                {typeof children === \"function\"\n                    ? children({ closeMenu: this.closeMenu })\n                    : children}\n            </MenuSurface>\n        );\n    };\n\n    private readonly renderMenuContent = () => {\n        return Array.isArray(this.props.children)\n            ? this.renderMenuWithPortal()\n            : this.renderCustomContent();\n    };\n\n    public override render(): React.ReactNode {\n        return (\n            <MenuSurfaceAnchor ref={this.anchorRef} data-testid={this.props[\"data-testid\"]}>\n                {this.renderMenuContent()}\n                {this.props.handle &&\n                    React.cloneElement(this.props.handle, { onClick: this.openMenu })}\n            </MenuSurfaceAnchor>\n        );\n    }\n}\n\nconst MenuDivider: React.FC = () => {\n    return <li className=\"mdc-list-divider\" role=\"separator\" />;\n};\n\ninterface MenuItemProps extends BaseMenuItemProps {\n    children: React.ReactNode;\n    className?: string;\n    onClick?: (event: React.MouseEvent) => void;\n    \"data-testid\"?: string;\n}\n\nconst MenuItem: React.FC<MenuItemProps> = ({ disabled, className, ...rest }) => {\n    return (\n        <BaseMenuItem\n            {...rest}\n            className={classNames(className, { [style.disabledMenuItem]: disabled })}\n        />\n    );\n};\n\nexport { Menu, MenuItem, MenuDivider };\n"],"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;yGAIvBC,cAAA,CAAMC,SAAN,E;uGACFD,cAAA,CAAMC,SAAN,E;2FAEkB,YAAM;MAC9B,MAAKC,QAAL,CAAc;QAAEH,UAAU,EAAE;MAAd,CAAd,EAAoC;QAAA,OAAM,MAAKI,KAAL,CAAWC,MAAX,IAAqB,MAAKD,KAAL,CAAWC,MAAX,EAA3B;MAAA,CAApC;IACH,C;4FAE4B,YAAM;MAC/B,MAAKF,QAAL,CAAc;QAAEH,UAAU,EAAE;MAAd,CAAd,EAAqC;QAAA,OAAM,MAAKI,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,CAAWR,UAFrB;QAGI,SAAS,EAAE,MAAKI,KAAL,CAAWK,SAH1B;QAII,OAAO,EAAE,MAAKC,SAJlB;QAKI,QAAQ,EAAE,MAAKN,KAAL,CAAWO,QALzB;QAMI,WAAW,EAAE;MANjB,GAQK,MAAKP,KAAL,CAAWQ,QARhB,CADJ;IAYH,C;sGAEsC,YAAM;MACzC,IAAQA,QAAR,GAAqB,MAAKR,KAA1B,CAAQQ,QAAR;MACA,oBACI,6BAAC,iBAAD;QAAa,IAAI,EAAE,MAAKJ,KAAL,CAAWR,UAA9B;QAA0C,OAAO,EAAE,MAAKU;MAAxD,GACK,OAAOE,QAAP,KAAoB,UAApB,GACKA,QAAQ,CAAC;QAAEF,SAAS,EAAE,MAAKA;MAAlB,CAAD,CADb,GAEKE,QAHV,CADJ;IAOH,C;oGAEoC,YAAM;MACvC,OAAOC,KAAK,CAACC,OAAN,CAAc,MAAKV,KAAL,CAAWQ,QAAzB,IACD,MAAKG,oBAAL,EADC,GAED,MAAKC,mBAAL,EAFN;IAGH,C;;;;;;WAED,kBAA0C;MACtC,oBACI,6BAAC,uBAAD;QAAmB,GAAG,EAAE,KAAKC,SAA7B;QAAwC,eAAa,KAAKb,KAAL,CAAW,aAAX;MAArD,GACK,KAAKc,iBAAL,EADL,EAEK,KAAKd,KAAL,CAAWe,MAAX,iBACGlB,cAAA,CAAMmB,YAAN,CAAmB,KAAKhB,KAAL,CAAWe,MAA9B,EAAsC;QAAEE,OAAO,EAAE,KAAKC;MAAhB,CAAtC,CAHR,CADJ;IAOH;;;EA5DcrB,cAAA,CAAMsB,S;;;8BAAnBxB,I,kBACwC;EACtCQ,MAAM,EAAE;AAD8B,C;;AA8D9C,IAAMiB,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,IAAzBjB,SAAyB,QAAzBA,SAAyB;EAAA,IAAXkB,IAAW;EAC5E,oBACI,6BAAC,cAAD,oBACQA,IADR;IAEI,SAAS,EAAE,IAAAC,mBAAA,EAAWnB,SAAX,oCAAyBf,KAAK,CAACC,gBAA/B,EAAkD+B,QAAlD;EAFf,GADJ;AAMH,CAPD"}
+{"version":3,"names":["style","disabledMenuItem","css","opacity","pointerEvents","Menu","menuIsOpen","setState","props","onOpen","onClose","anchor","state","className","closeMenu","onSelect","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            >\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;MANpB,GAQK,MAAKP,KAAL,CAAWQ,QARhB,CADJ;IAYH,C;sGAEsC,YAAM;MACzC,IAAQA,QAAR,GAAqB,MAAKR,KAA1B,CAAQQ,QAAR;MACA,oBACI,6BAAC,iBAAD;QAAa,IAAI,EAAE,MAAKJ,KAAL,CAAWN,UAA9B;QAA0C,OAAO,EAAE,MAAKQ;MAAxD,GACK,OAAOE,QAAP,KAAoB,UAApB,GACKA,QAAQ,CAAC;QAAEF,SAAS,EAAE,MAAKA;MAAlB,CAAD,CADb,GAEKE,QAHV,CADJ;IAOH,C;oGAEoC,YAAM;MACvC,OAAOC,KAAK,CAACC,OAAN,CAAc,MAAKV,KAAL,CAAWQ,QAAzB,IACD,MAAKG,oBAAL,EADC,GAED,MAAKC,mBAAL,EAFN;IAGH,C;;;;;;WAED,kBAA0C;MACtC,oBACI,6BAAC,uBAAD;QAAmB,eAAa,KAAKZ,KAAL,CAAW,aAAX;MAAhC,GACK,KAAKa,iBAAL,EADL,EAEK,KAAKb,KAAL,CAAWc,MAAX,iBACGC,cAAA,CAAMC,YAAN,CAAmB,KAAKhB,KAAL,CAAWc,MAA9B,EAAsC;QAAEG,OAAO,EAAE,KAAKC;MAAhB,CAAtC,CAHR,CADJ;IAOH;;;EAzDcH,cAAA,CAAMI,S;;;8BAAnBtB,I,kBACwC;EACtCM,MAAM,EAAE;AAD8B,C;;AA2D9C,IAAMiB,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,IAAzBjB,SAAyB,QAAzBA,SAAyB;EAAA,IAAXkB,IAAW;EAC5E,oBACI,6BAAC,cAAD,oBACQA,IADR;IAEI,SAAS,EAAE,IAAAC,mBAAA,EAAWnB,SAAX,oCAAyBb,KAAK,CAACC,gBAA/B,EAAkD6B,QAAlD;EAFf,GADJ;AAMH,CAPD"}