@webiny/ui 5.34.8 → 5.35.0-beta.0

package/List/DataList/DataList.js

@@ -1,40 +1,24 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ScrollList = exports.DataList = 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 _icons = require("./icons");
-
 var _ = require("..");
-
 var _DataListModalOverlay = require("./DataListModalOverlay");
-
 var ListContainer = /*#__PURE__*/(0, _styled.default)("div", {
   target: "e14cccao0",
   label: "ListContainer"
@@ -126,24 +110,23 @@ var dataListContent = /*#__PURE__*/(0, _emotion.css)({
   position: "relative",
   height: "100%",
   overflow: "auto"
-}, "label:dataListContent;"); // This was copied from "./types" so that it can be outputted in docs.
+}, "label:dataListContent;");
+
+// This was copied from "./types" so that it can be outputted in docs.
 
 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;
+    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),
@@ -152,38 +135,29 @@ var MultiSelectAll = function MultiSelectAll(props) {
     }
   })));
 };
-
 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) {
@@ -197,26 +171,20 @@ var Sorters = function Sorters(props) {
     }, 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
@@ -248,10 +216,8 @@ var Pagination = function Pagination(props) {
     }, perPage);
   }))));
 };
-
 var DataList = function DataList(props) {
   var render = null;
-
   if (props.loading) {
     render = props.loader;
   } else if ((0, _isEmpty.default)(props.data)) {
@@ -260,7 +226,6 @@ var DataList = function DataList(props) {
     var ch = props.children;
     render = typeof ch === "function" ? ch(props) : null;
   }
-
   var showOptions = props.showOptions || {};
   return /*#__PURE__*/_react.default.createElement(_DataListModalOverlay.DataListModalOverlayProvider, null, /*#__PURE__*/_react.default.createElement(ListContainer, {
     className: "webiny-data-list",
@@ -271,7 +236,6 @@ var DataList = function DataList(props) {
     className: (0, _classnames.default)(dataListContent, "webiny-data-list__content")
   }, props.subHeader, render, props.modalOverlay)));
 };
-
 exports.DataList = DataList;
 DataList.defaultProps = {
   children: null,
@@ -305,11 +269,9 @@ DataList.defaultProps = {
     filters: true
   }
 };
-
 var ScrollList = function ScrollList(props) {
   return /*#__PURE__*/_react.default.createElement(_.List, Object.assign({}, props, {
     className: (0, _classnames.default)(props.className, scrollList)
   }), props.children);
 };
-
 exports.ScrollList = ScrollList;

package/List/DataList/DataList.js.map

@@ -1 +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","ListSubHeader","ListHeaderItem","verticalAlign","opacity","pointerEvents","scrollList","css","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","DataList","render","loading","loader","isEmpty","noData","ch","children","showOptions","title","actions","Object","keys","length","search","React","cloneElement","modalOverlayAction","subHeader","modalOverlay","defaultProps","meta","setPage","noop","ScrollList","className"],"sources":["DataList.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\";\nimport { Checkbox } from \"../../Checkbox\";\nimport { Menu, MenuItem } from \"~/Menu\";\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 = styled.div`\n    border-bottom: 1px solid var(--mdc-theme-on-background);\n    color: var(--mdc-theme-text-primary-on-background);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 0 24px;\n    max-height: 85px;\n    min-height: 85px;\n`;\n\nconst ListSubHeader = styled.div`\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n    padding: 10px;\n    border-bottom: 1px solid var(--mdc-theme-on-background);\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 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\n// This was copied from \"./types\" so that it can be outputted in docs.\ninterface DataListProps {\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?: Record<string, any>[] | 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: Record<string, any>[] | null) => void;\n\n    // Callback which returns true if all items were selected, otherwise returns false.\n    isAllMultiSelected?: (data: Record<string, any>[] | null) => boolean;\n\n    // Callback which returns true if none of the items were selected, otherwise returns false.\n    isNoneMultiSelected?: (data: Record<string, any>[] | 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<DataListProps> = 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<DataListProps>;\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<DataListProps> = props => {\n    const { multiSelectActions } = props;\n    if (!multiSelectActions) {\n        return null;\n    }\n\n    return <ListHeaderItem>{multiSelectActions}</ListHeaderItem>;\n};\n\nconst RefreshButton: React.FC<DataListProps> = 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<DataListProps> = 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<DataListProps> = 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<DataListProps> = 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\nexport const DataList: React.FC<DataListProps> = props => {\n    let render: React.ReactNode | null = 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    return (\n        <DataListModalOverlayProvider>\n            <ListContainer className={\"webiny-data-list\"} data-testid={\"ui.list.data-list\"}>\n                {(props.title || props.actions) && (\n                    <ListHeader>\n                        <Typography use=\"headline5\">{props.title}</Typography>\n                        {props.actions}\n                    </ListHeader>\n                )}\n\n                {Object.keys(showOptions).length > 0 && (\n                    <ListSubHeader>\n                        {props.search ? React.cloneElement(props.search, props) : null}\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                    </ListSubHeader>\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\nDataList.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\nexport interface ScrollListProps extends ListProps {\n    children: React.ReactElement<typeof ListItem>[];\n}\n\nexport const ScrollList: React.FC<ScrollListProps> = props => {\n    return (\n        <List {...props} className={classNames(props.className, scrollList)}>\n            {props.children}\n        </List>\n    );\n};\n"],"mappings":"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"}
+{"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","ListSubHeader","ListHeaderItem","verticalAlign","opacity","pointerEvents","scrollList","css","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","DataList","render","loading","loader","isEmpty","noData","ch","children","showOptions","title","actions","Object","keys","length","search","React","cloneElement","modalOverlayAction","subHeader","modalOverlay","defaultProps","meta","setPage","noop","ScrollList","className"],"sources":["DataList.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\";\nimport { Checkbox } from \"../../Checkbox\";\nimport { Menu, MenuItem } from \"~/Menu\";\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 = styled.div`\n    border-bottom: 1px solid var(--mdc-theme-on-background);\n    color: var(--mdc-theme-text-primary-on-background);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 0 24px;\n    max-height: 85px;\n    min-height: 85px;\n`;\n\nconst ListSubHeader = styled.div`\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n    padding: 10px;\n    border-bottom: 1px solid var(--mdc-theme-on-background);\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 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\n// This was copied from \"./types\" so that it can be outputted in docs.\ninterface DataListProps {\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?: Record<string, any>[] | 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: Record<string, any>[] | null) => void;\n\n    // Callback which returns true if all items were selected, otherwise returns false.\n    isAllMultiSelected?: (data: Record<string, any>[] | null) => boolean;\n\n    // Callback which returns true if none of the items were selected, otherwise returns false.\n    isNoneMultiSelected?: (data: Record<string, any>[] | 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<DataListProps> = 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<DataListProps>;\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<DataListProps> = props => {\n    const { multiSelectActions } = props;\n    if (!multiSelectActions) {\n        return null;\n    }\n\n    return <ListHeaderItem>{multiSelectActions}</ListHeaderItem>;\n};\n\nconst RefreshButton: React.FC<DataListProps> = 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<DataListProps> = 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<DataListProps> = 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<DataListProps> = 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\nexport const DataList: React.FC<DataListProps> = props => {\n    let render: React.ReactNode | null = 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    return (\n        <DataListModalOverlayProvider>\n            <ListContainer className={\"webiny-data-list\"} data-testid={\"ui.list.data-list\"}>\n                {(props.title || props.actions) && (\n                    <ListHeader>\n                        <Typography use=\"headline5\">{props.title}</Typography>\n                        {props.actions}\n                    </ListHeader>\n                )}\n\n                {Object.keys(showOptions).length > 0 && (\n                    <ListSubHeader>\n                        {props.search ? React.cloneElement(props.search, props) : null}\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                    </ListSubHeader>\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\nDataList.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\nexport interface ScrollListProps extends ListProps {\n    children: React.ReactElement<typeof ListItem>[];\n}\n\nexport const ScrollList: React.FC<ScrollListProps> = 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/DataList.stories.js

@@ -1,23 +1,14 @@
 "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("./../DataList/README.md"));
-
 var _addonKnobs = require("@storybook/addon-knobs");
-
 var _DataList = require("./DataList");
-
 var _icons = require("./icons");
-
 var _List = require("./../List");
-
 var story = (0, _react2.storiesOf)("Components/List", module);
 story.addDecorator(_addonKnobs.withKnobs);
 story.add("data list", function () {
@@ -91,7 +82,8 @@ story.add("data list", function () {
   };
   return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, null, /*#__PURE__*/_react.default.createElement(_DataList.DataList, Object.assign({}, generalOptionsAndCallbacks, {
     data: dataProp,
-    meta: metaProp // @ts-ignore
+    meta: metaProp
+    // @ts-ignore
     ,
     sorters: sortersProp.list
   }), function (_ref) {

package/List/DataList/DataList.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","generalOptionsAndCallbacks","refresh","console","log","loading","boolean","title","text","multiActions","setNextPage","cursor","setPreviousPage","perPageOptions","array","setPerPage","perPage","setSorters","sorter","JSON","stringify","dataProp","object","id","firstName","lastName","email","metaProp","totalPages","totalCount","from","to","previousPage","nextPage","sortersProp","list","label","sorters","createdOn","name","readme","data","map","item","info","propTables","List","ListItem","ListItemText","ListItemTextSecondary","ListItemMeta","ListItemGraphic"],"sources":["DataList.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 \"./../DataList/README.md\";\nimport { withKnobs, boolean, text, object, array } from \"@storybook/addon-knobs\";\n\nimport { DataList } from \"./DataList\";\n\nimport { DeleteIcon, EditIcon } from \"./icons\";\nimport {\n    List,\n    ListItem,\n    ListItemText,\n    ListItemTextSecondary,\n    ListItemMeta,\n    ListItemGraphic\n} from \"./../List\";\n\nconst story = storiesOf(\"Components/List\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"data list\",\n    () => {\n        const generalOptionsAndCallbacks = {\n            refresh: () => {\n                console.log(`Implement \"refresh\" method.`);\n            },\n            loading: boolean(\"Loading\", false, \"Basic\"),\n            title: text(\"Title\", \"A list of all users\", \"Basic\"),\n            multiActions: boolean(\"Multi actions\", false, \"Basic\"),\n\n            setNextPage: (cursor: string) => {\n                console.log(`Implement setNextPage method (selected ${cursor}).`);\n            },\n            setPreviousPage: (cursor: string) => {\n                console.log(`Implement setPreviousPage method (selected ${cursor}).`);\n            },\n            perPageOptions: array(\n                \"perPageOptions\",\n                [\"10\", \"25\", \"50\"],\n                \",\",\n                \"Basic\"\n            ) as unknown as number[],\n            setPerPage: (perPage: string) => {\n                console.log(`Implement setPerPage method (selected ${perPage}).`);\n            },\n            setSorters: (sorter: any) => {\n                console.log(`Implement setSorters method (selected ${JSON.stringify(sorter)}).`);\n            }\n        };\n\n        const dataProp = object(\n            \"Data\",\n            [\n                {\n                    id: \"A\",\n                    firstName: \"John\",\n                    lastName: \"Doe\",\n                    email: \"john.doe@webiny.com\"\n                },\n                {\n                    id: \"B\",\n                    firstName: \"Jane\",\n                    lastName: \"Doe\",\n                    email: \"jane.doe@webiny.com\"\n                },\n                {\n                    id: \"C\",\n                    firstName: \"Foo\",\n                    lastName: \"Bar\",\n                    email: \"foo.bar@webiny.com\"\n                }\n            ],\n            \"Data\"\n        );\n\n        const metaProp = object(\n            \"Meta\",\n            {\n                totalPages: 1,\n                totalCount: 3,\n                from: 1,\n                to: 3,\n                previousPage: null,\n                nextPage: null\n            },\n            \"Meta\"\n        );\n\n        const sortersProp = {\n            list: object(\n                \"Sorters\",\n                [\n                    {\n                        label: \"Newest to oldest\",\n                        sorters: { createdOn: -1 }\n                    },\n                    {\n                        label: \"Oldest to newest\",\n                        sorters: { createdOn: 1 }\n                    },\n                    {\n                        label: \"Name A-Z\",\n                        sorters: { name: 1 }\n                    },\n                    {\n                        label: \"Name Z-A\",\n                        sorters: { name: -1 }\n                    }\n                ],\n                \"Sorters\"\n            )\n        };\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <DataList\n                            {...generalOptionsAndCallbacks}\n                            data={dataProp}\n                            meta={metaProp}\n                            // @ts-ignore\n                            sorters={sortersProp.list}\n                        >\n                            {({ data }: { data: any[] }) => (\n                                <List>\n                                    {data.map(item => (\n                                        <ListItem key={item.id}>\n                                            <ListItemGraphic>\n                                                <img\n                                                    src={\"http://i.pravatar.cc/100?id=\" + item.id}\n                                                />\n                                            </ListItemGraphic>\n                                            <ListItemText>\n                                                {item.firstName} {item.lastName}\n                                                <ListItemTextSecondary>\n                                                    {item.email}\n                                                </ListItemTextSecondary>\n                                            </ListItemText>\n                                            <ListItemMeta>\n                                                <DeleteIcon\n                                                    onClick={() => {\n                                                        console.log(\"Redirect user to form.\");\n                                                    }}\n                                                />\n                                                <EditIcon\n                                                    onClick={() => {\n                                                        console.log(\"Show confirmation dialog.\");\n                                                    }}\n                                                />\n                                            </ListItemMeta>\n                                        </ListItem>\n                                    ))}\n                                </List>\n                            )}\n                        </DataList>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <DataList\n                        {...generalOptionsAndCallbacks}\n                        data={${JSON.stringify(dataProp, null, 2)}}\n                        meta={${JSON.stringify(metaProp, null, 2)}}\n                        sorters={${JSON.stringify(sortersProp.list, null, 2)}}\n                    >\n                      {({ data }) => (\n                            <List>\n                                {data.map(item => (\n                                    <ListItem key={item.id}>\n                                        <ListItemGraphic>\n                                            <img\n                                                src={\n                                                    \"//www.gravatar.com/avatar/\" +\n                                                    item.gravatar +\n                                                    \"?s=48\"\n                                                }\n                                            />\n                                        </ListItemGraphic>\n                                        <ListItemText>\n                                            {item.firstName} {item.lastName}\n                                            <ListItemTextSecondary>\n                                                {item.email}\n                                            </ListItemTextSecondary>\n                                        </ListItemText>\n                                        <ListItemMeta>\n                                                <DeleteIcon\n                                                    onClick={() => {\n                                                        console.log(\"Redirect user to form.\");\n                                                    }}\n                                                />\n                                                <EditIcon\n                                                    onClick={() => {\n                                                        console.log(\"Show confirmation dialog.\");\n                                                    }}\n                                                />\n                                        </ListItemMeta>\n                                    </ListItem>\n                                ))}\n                            </List>\n                        )}\n                    </DataList>\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            ]\n        }\n    }\n);\n"],"mappings":"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"}
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","generalOptionsAndCallbacks","refresh","console","log","loading","boolean","title","text","multiActions","setNextPage","cursor","setPreviousPage","perPageOptions","array","setPerPage","perPage","setSorters","sorter","JSON","stringify","dataProp","object","id","firstName","lastName","email","metaProp","totalPages","totalCount","from","to","previousPage","nextPage","sortersProp","list","label","sorters","createdOn","name","readme","data","map","item","info","propTables","List","ListItem","ListItemText","ListItemTextSecondary","ListItemMeta","ListItemGraphic"],"sources":["DataList.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 \"./../DataList/README.md\";\nimport { withKnobs, boolean, text, object, array } from \"@storybook/addon-knobs\";\n\nimport { DataList } from \"./DataList\";\n\nimport { DeleteIcon, EditIcon } from \"./icons\";\nimport {\n    List,\n    ListItem,\n    ListItemText,\n    ListItemTextSecondary,\n    ListItemMeta,\n    ListItemGraphic\n} from \"./../List\";\n\nconst story = storiesOf(\"Components/List\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"data list\",\n    () => {\n        const generalOptionsAndCallbacks = {\n            refresh: () => {\n                console.log(`Implement \"refresh\" method.`);\n            },\n            loading: boolean(\"Loading\", false, \"Basic\"),\n            title: text(\"Title\", \"A list of all users\", \"Basic\"),\n            multiActions: boolean(\"Multi actions\", false, \"Basic\"),\n\n            setNextPage: (cursor: string) => {\n                console.log(`Implement setNextPage method (selected ${cursor}).`);\n            },\n            setPreviousPage: (cursor: string) => {\n                console.log(`Implement setPreviousPage method (selected ${cursor}).`);\n            },\n            perPageOptions: array(\n                \"perPageOptions\",\n                [\"10\", \"25\", \"50\"],\n                \",\",\n                \"Basic\"\n            ) as unknown as number[],\n            setPerPage: (perPage: string) => {\n                console.log(`Implement setPerPage method (selected ${perPage}).`);\n            },\n            setSorters: (sorter: any) => {\n                console.log(`Implement setSorters method (selected ${JSON.stringify(sorter)}).`);\n            }\n        };\n\n        const dataProp = object(\n            \"Data\",\n            [\n                {\n                    id: \"A\",\n                    firstName: \"John\",\n                    lastName: \"Doe\",\n                    email: \"john.doe@webiny.com\"\n                },\n                {\n                    id: \"B\",\n                    firstName: \"Jane\",\n                    lastName: \"Doe\",\n                    email: \"jane.doe@webiny.com\"\n                },\n                {\n                    id: \"C\",\n                    firstName: \"Foo\",\n                    lastName: \"Bar\",\n                    email: \"foo.bar@webiny.com\"\n                }\n            ],\n            \"Data\"\n        );\n\n        const metaProp = object(\n            \"Meta\",\n            {\n                totalPages: 1,\n                totalCount: 3,\n                from: 1,\n                to: 3,\n                previousPage: null,\n                nextPage: null\n            },\n            \"Meta\"\n        );\n\n        const sortersProp = {\n            list: object(\n                \"Sorters\",\n                [\n                    {\n                        label: \"Newest to oldest\",\n                        sorters: { createdOn: -1 }\n                    },\n                    {\n                        label: \"Oldest to newest\",\n                        sorters: { createdOn: 1 }\n                    },\n                    {\n                        label: \"Name A-Z\",\n                        sorters: { name: 1 }\n                    },\n                    {\n                        label: \"Name Z-A\",\n                        sorters: { name: -1 }\n                    }\n                ],\n                \"Sorters\"\n            )\n        };\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <DataList\n                            {...generalOptionsAndCallbacks}\n                            data={dataProp}\n                            meta={metaProp}\n                            // @ts-ignore\n                            sorters={sortersProp.list}\n                        >\n                            {({ data }: { data: any[] }) => (\n                                <List>\n                                    {data.map(item => (\n                                        <ListItem key={item.id}>\n                                            <ListItemGraphic>\n                                                <img\n                                                    src={\"http://i.pravatar.cc/100?id=\" + item.id}\n                                                />\n                                            </ListItemGraphic>\n                                            <ListItemText>\n                                                {item.firstName} {item.lastName}\n                                                <ListItemTextSecondary>\n                                                    {item.email}\n                                                </ListItemTextSecondary>\n                                            </ListItemText>\n                                            <ListItemMeta>\n                                                <DeleteIcon\n                                                    onClick={() => {\n                                                        console.log(\"Redirect user to form.\");\n                                                    }}\n                                                />\n                                                <EditIcon\n                                                    onClick={() => {\n                                                        console.log(\"Show confirmation dialog.\");\n                                                    }}\n                                                />\n                                            </ListItemMeta>\n                                        </ListItem>\n                                    ))}\n                                </List>\n                            )}\n                        </DataList>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <DataList\n                        {...generalOptionsAndCallbacks}\n                        data={${JSON.stringify(dataProp, null, 2)}}\n                        meta={${JSON.stringify(metaProp, null, 2)}}\n                        sorters={${JSON.stringify(sortersProp.list, null, 2)}}\n                    >\n                      {({ data }) => (\n                            <List>\n                                {data.map(item => (\n                                    <ListItem key={item.id}>\n                                        <ListItemGraphic>\n                                            <img\n                                                src={\n                                                    \"//www.gravatar.com/avatar/\" +\n                                                    item.gravatar +\n                                                    \"?s=48\"\n                                                }\n                                            />\n                                        </ListItemGraphic>\n                                        <ListItemText>\n                                            {item.firstName} {item.lastName}\n                                            <ListItemTextSecondary>\n                                                {item.email}\n                                            </ListItemTextSecondary>\n                                        </ListItemText>\n                                        <ListItemMeta>\n                                                <DeleteIcon\n                                                    onClick={() => {\n                                                        console.log(\"Redirect user to form.\");\n                                                    }}\n                                                />\n                                                <EditIcon\n                                                    onClick={() => {\n                                                        console.log(\"Show confirmation dialog.\");\n                                                    }}\n                                                />\n                                        </ListItemMeta>\n                                    </ListItem>\n                                ))}\n                            </List>\n                        )}\n                    </DataList>\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            ]\n        }\n    }\n);\n"],"mappings":"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"}

package/List/DataList/DataListModalOverlay/DataListModalOverlay.d.ts

@@ -3,15 +3,17 @@ import React from "react";
 export declare type SimpleOverlayProps = {
     showOverlay: boolean;
 };
-export declare const SimpleOverlay: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & SimpleOverlayProps, keyof React.HTMLAttributes<HTMLDivElement> | "showOverlay"> & {
-    theme: object;
-}, object>;
+export declare const SimpleOverlay: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+} & SimpleOverlayProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export interface DataListModalWrapperProps {
     showOverlay: boolean;
 }
-export declare const DataListModalWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & DataListModalWrapperProps, keyof React.HTMLAttributes<HTMLDivElement> | "showOverlay"> & {
-    theme: object;
-}, object>;
+export declare const DataListModalWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+} & DataListModalWrapperProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export interface DataListModalOverlayProps {
     onDismiss?: (event?: React.SyntheticEvent) => void;
 }

package/List/DataList/DataListModalOverlay/DataListModalOverlay.js

@@ -1,20 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SimpleOverlay = exports.DataListModalWrapper = exports.DataListModalOverlay = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _DataListModalOverlayContext = require("./DataListModalOverlayContext");
-
 var SimpleOverlay = /*#__PURE__*/(0, _styled.default)("div", {
   target: "e1dhql4g0",
   label: "SimpleOverlay"
@@ -47,7 +41,7 @@ var DataListModalWrapper = /*#__PURE__*/(0, _styled.default)("div", {
     height: "auto",
     maxWidth: "426px",
     maxHeight: "520px",
-    overflow: "auto",
+    overflow: "visible",
     backgroundColor: "var(--mdc-theme-surface)",
     boxShadow: "0px 1px 5px rgba(0, 0, 0, 0.12)",
     borderRadius: "0px 0px 4px 4px",
@@ -78,29 +72,25 @@ var DataListModalWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   };
 });
 exports.DataListModalWrapper = DataListModalWrapper;
-
 var DataListModalOverlay = function DataListModalOverlay(_ref3) {
   var onDismiss = _ref3.onDismiss,
-      children = _ref3.children;
-
+    children = _ref3.children;
   var _useContext = (0, _react.useContext)(_DataListModalOverlayContext.DataListModalOverlayContext),
-      isOpen = _useContext.isOpen,
-      setIsOpen = _useContext.setIsOpen;
-
+    isOpen = _useContext.isOpen,
+    setIsOpen = _useContext.setIsOpen;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(SimpleOverlay, {
     onClick: function onClick(e) {
-      e.stopPropagation(); // Close the modal.
-
+      e.stopPropagation();
+      // Close the modal.
       setIsOpen(false);
-
       if (typeof onDismiss === "function") {
         onDismiss();
       }
     },
     showOverlay: isOpen
   }), /*#__PURE__*/_react.default.createElement(DataListModalWrapper, {
-    showOverlay: isOpen
+    showOverlay: isOpen,
+    "data-id": "data-list-modal-wrapper"
   }, children));
 };
-
 exports.DataListModalOverlay = DataListModalOverlay;

package/List/DataList/DataListModalOverlay/DataListModalOverlay.js.map

@@ -1 +1 @@
-{"version":3,"names":["SimpleOverlay","styled","showOverlay","width","height","position","top","left","backgroundColor","transition","pointerEvents","zIndex","opacity","DataListModalWrapper","maxWidth","maxHeight","overflow","boxShadow","borderRadius","transform","paddingBottom","padding","display","justifyContent","color","border","DataListModalOverlay","onDismiss","children","useContext","DataListModalOverlayContext","isOpen","setIsOpen","e","stopPropagation"],"sources":["DataListModalOverlay.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { DataListModalOverlayContext } from \"./DataListModalOverlayContext\";\n\nexport type SimpleOverlayProps = { showOverlay: boolean };\nexport const SimpleOverlay = styled<\"div\", SimpleOverlayProps>(\"div\")(({ showOverlay }) => ({\n    width: \"100%\",\n    height: \"100%\",\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    backgroundColor: showOverlay ? \"rgba(0, 0, 0, 0.32)\" : \"transparent\",\n    transition: \"150ms all ease-in-out\",\n    pointerEvents: showOverlay ? \"auto\" : \"none\",\n    zIndex: showOverlay ? 5 : -1,\n    opacity: showOverlay ? 1 : 0\n}));\n\nexport interface DataListModalWrapperProps {\n    showOverlay: boolean;\n}\nexport const DataListModalWrapper = styled<\"div\", DataListModalWrapperProps>(\"div\")(\n    ({ showOverlay }) => ({\n        position: \"absolute\",\n        top: \"0px\",\n        left: \"50%\",\n        width: \"90%\",\n        height: \"auto\",\n        maxWidth: \"426px\",\n        maxHeight: \"520px\",\n        overflow: \"auto\",\n        backgroundColor: \"var(--mdc-theme-surface)\",\n        boxShadow: \"0px 1px 5px rgba(0, 0, 0, 0.12)\",\n        borderRadius: \"0px 0px 4px 4px\",\n        transition: \"150ms opacity ease-in-out\",\n        pointerEvents: showOverlay ? \"auto\" : \"none\",\n        zIndex: showOverlay ? 5 : -1,\n        opacity: showOverlay ? 1 : 0,\n        transform: showOverlay ? \"translateX(-50%)\" : \"translateX(-1000px)\",\n\n        \"& .input-wrapper\": {\n            paddingBottom: \"16px\"\n        },\n\n        \"& .datalist-modal__footer\": {\n            padding: \"24px\",\n            display: \"flex\",\n            justifyContent: \"space-between\",\n            \"& .mdc-button\": {\n                borderRadius: 4,\n                padding: \"0px 32px\"\n            },\n            \"& .datalist-modal__footer__action--secondary\": {\n                color: \"var(--mdc-theme-text-primary-on-background)\",\n                border: \"1px solid var(--mdc-theme-on-background)\"\n            },\n            \"& .datalist-modal__footer__action--primary\": {\n                backgroundColor: \"var(--mdc-theme-secondary)\"\n            }\n        }\n    })\n);\n\nexport interface DataListModalOverlayProps {\n    /*\n     * This function is called after closing the modal overlay.\n     */\n    onDismiss?: (event?: React.SyntheticEvent) => void;\n}\n\nexport const DataListModalOverlay: React.FC<DataListModalOverlayProps> = ({\n    onDismiss,\n    children\n}) => {\n    const { isOpen, setIsOpen } = useContext(DataListModalOverlayContext);\n    return (\n        <React.Fragment>\n            <SimpleOverlay\n                onClick={e => {\n                    e.stopPropagation();\n                    // Close the modal.\n                    setIsOpen(false);\n\n                    if (typeof onDismiss === \"function\") {\n                        onDismiss();\n                    }\n                }}\n                showOverlay={isOpen}\n            />\n            <DataListModalWrapper showOverlay={isOpen}>{children}</DataListModalWrapper>\n        </React.Fragment>\n    );\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAGO,IAAMA,aAAa,oBAAGC,eAAH,EAAqC,KAArC;EAAA;EAAA;AAAA,GAA4C;EAAA,IAAGC,WAAH,QAAGA,WAAH;EAAA,OAAsB;IACxFC,KAAK,EAAE,MADiF;IAExFC,MAAM,EAAE,MAFgF;IAGxFC,QAAQ,EAAE,UAH8E;IAIxFC,GAAG,EAAE,CAJmF;IAKxFC,IAAI,EAAE,CALkF;IAMxFC,eAAe,EAAEN,WAAW,GAAG,qBAAH,GAA2B,aANiC;IAOxFO,UAAU,EAAE,uBAP4E;IAQxFC,aAAa,EAAER,WAAW,GAAG,MAAH,GAAY,MARkD;IASxFS,MAAM,EAAET,WAAW,GAAG,CAAH,GAAO,CAAC,CAT6D;IAUxFU,OAAO,EAAEV,WAAW,GAAG,CAAH,GAAO;EAV6D,CAAtB;AAAA,CAA5C,CAAnB;;AAgBA,IAAMW,oBAAoB,oBAAGZ,eAAH,EAA4C,KAA5C;EAAA;EAAA;AAAA,GAC7B;EAAA,IAAGC,WAAH,SAAGA,WAAH;EAAA,OAAsB;IAClBG,QAAQ,EAAE,UADQ;IAElBC,GAAG,EAAE,KAFa;IAGlBC,IAAI,EAAE,KAHY;IAIlBJ,KAAK,EAAE,KAJW;IAKlBC,MAAM,EAAE,MALU;IAMlBU,QAAQ,EAAE,OANQ;IAOlBC,SAAS,EAAE,OAPO;IAQlBC,QAAQ,EAAE,MARQ;IASlBR,eAAe,EAAE,0BATC;IAUlBS,SAAS,EAAE,iCAVO;IAWlBC,YAAY,EAAE,iBAXI;IAYlBT,UAAU,EAAE,2BAZM;IAalBC,aAAa,EAAER,WAAW,GAAG,MAAH,GAAY,MAbpB;IAclBS,MAAM,EAAET,WAAW,GAAG,CAAH,GAAO,CAAC,CAdT;IAelBU,OAAO,EAAEV,WAAW,GAAG,CAAH,GAAO,CAfT;IAgBlBiB,SAAS,EAAEjB,WAAW,GAAG,kBAAH,GAAwB,qBAhB5B;IAkBlB,oBAAoB;MAChBkB,aAAa,EAAE;IADC,CAlBF;IAsBlB,6BAA6B;MACzBC,OAAO,EAAE,MADgB;MAEzBC,OAAO,EAAE,MAFgB;MAGzBC,cAAc,EAAE,eAHS;MAIzB,iBAAiB;QACbL,YAAY,EAAE,CADD;QAEbG,OAAO,EAAE;MAFI,CAJQ;MAQzB,gDAAgD;QAC5CG,KAAK,EAAE,6CADqC;QAE5CC,MAAM,EAAE;MAFoC,CARvB;MAYzB,8CAA8C;QAC1CjB,eAAe,EAAE;MADyB;IAZrB;EAtBX,CAAtB;AAAA,CAD6B,CAA1B;;;AAiDA,IAAMkB,oBAAyD,GAAG,SAA5DA,oBAA4D,QAGnE;EAAA,IAFFC,SAEE,SAFFA,SAEE;EAAA,IADFC,QACE,SADFA,QACE;;EACF,kBAA8B,IAAAC,iBAAA,EAAWC,wDAAX,CAA9B;EAAA,IAAQC,MAAR,eAAQA,MAAR;EAAA,IAAgBC,SAAhB,eAAgBA,SAAhB;;EACA,oBACI,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,aAAD;IACI,OAAO,EAAE,iBAAAC,CAAC,EAAI;MACVA,CAAC,CAACC,eAAF,GADU,CAEV;;MACAF,SAAS,CAAC,KAAD,CAAT;;MAEA,IAAI,OAAOL,SAAP,KAAqB,UAAzB,EAAqC;QACjCA,SAAS;MACZ;IACJ,CATL;IAUI,WAAW,EAAEI;EAVjB,EADJ,eAaI,6BAAC,oBAAD;IAAsB,WAAW,EAAEA;EAAnC,GAA4CH,QAA5C,CAbJ,CADJ;AAiBH,CAtBM"}
+{"version":3,"names":["SimpleOverlay","styled","showOverlay","width","height","position","top","left","backgroundColor","transition","pointerEvents","zIndex","opacity","DataListModalWrapper","maxWidth","maxHeight","overflow","boxShadow","borderRadius","transform","paddingBottom","padding","display","justifyContent","color","border","DataListModalOverlay","onDismiss","children","useContext","DataListModalOverlayContext","isOpen","setIsOpen","e","stopPropagation"],"sources":["DataListModalOverlay.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { DataListModalOverlayContext } from \"./DataListModalOverlayContext\";\n\nexport type SimpleOverlayProps = { showOverlay: boolean };\nexport const SimpleOverlay = styled.div<SimpleOverlayProps>(({ showOverlay }) => ({\n    width: \"100%\",\n    height: \"100%\",\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    backgroundColor: showOverlay ? \"rgba(0, 0, 0, 0.32)\" : \"transparent\",\n    transition: \"150ms all ease-in-out\",\n    pointerEvents: showOverlay ? \"auto\" : \"none\",\n    zIndex: showOverlay ? 5 : -1,\n    opacity: showOverlay ? 1 : 0\n}));\n\nexport interface DataListModalWrapperProps {\n    showOverlay: boolean;\n}\n\nexport const DataListModalWrapper = styled.div<DataListModalWrapperProps>(({ showOverlay }) => ({\n    position: \"absolute\",\n    top: \"0px\",\n    left: \"50%\",\n    width: \"90%\",\n    height: \"auto\",\n    maxWidth: \"426px\",\n    maxHeight: \"520px\",\n    overflow: \"visible\",\n    backgroundColor: \"var(--mdc-theme-surface)\",\n    boxShadow: \"0px 1px 5px rgba(0, 0, 0, 0.12)\",\n    borderRadius: \"0px 0px 4px 4px\",\n    transition: \"150ms opacity ease-in-out\",\n    pointerEvents: showOverlay ? \"auto\" : \"none\",\n    zIndex: showOverlay ? 5 : -1,\n    opacity: showOverlay ? 1 : 0,\n    transform: showOverlay ? \"translateX(-50%)\" : \"translateX(-1000px)\",\n\n    \"& .input-wrapper\": {\n        paddingBottom: \"16px\"\n    },\n\n    \"& .datalist-modal__footer\": {\n        padding: \"24px\",\n        display: \"flex\",\n        justifyContent: \"space-between\",\n        \"& .mdc-button\": {\n            borderRadius: 4,\n            padding: \"0px 32px\"\n        },\n        \"& .datalist-modal__footer__action--secondary\": {\n            color: \"var(--mdc-theme-text-primary-on-background)\",\n            border: \"1px solid var(--mdc-theme-on-background)\"\n        },\n        \"& .datalist-modal__footer__action--primary\": {\n            backgroundColor: \"var(--mdc-theme-secondary)\"\n        }\n    }\n}));\n\nexport interface DataListModalOverlayProps {\n    /*\n     * This function is called after closing the modal overlay.\n     */\n    onDismiss?: (event?: React.SyntheticEvent) => void;\n}\n\nexport const DataListModalOverlay: React.FC<DataListModalOverlayProps> = ({\n    onDismiss,\n    children\n}) => {\n    const { isOpen, setIsOpen } = useContext(DataListModalOverlayContext);\n    return (\n        <React.Fragment>\n            <SimpleOverlay\n                onClick={e => {\n                    e.stopPropagation();\n                    // Close the modal.\n                    setIsOpen(false);\n\n                    if (typeof onDismiss === \"function\") {\n                        onDismiss();\n                    }\n                }}\n                showOverlay={isOpen}\n            />\n            <DataListModalWrapper showOverlay={isOpen} data-id={\"data-list-modal-wrapper\"}>\n                {children}\n            </DataListModalWrapper>\n        </React.Fragment>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AAGO,IAAMA,aAAa,oBAAGC,eAAM;EAAA;EAAA;AAAA,GAAyB;EAAA,IAAGC,WAAW,QAAXA,WAAW;EAAA,OAAQ;IAC9EC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE,CAAC;IACPC,eAAe,EAAEN,WAAW,GAAG,qBAAqB,GAAG,aAAa;IACpEO,UAAU,EAAE,uBAAuB;IACnCC,aAAa,EAAER,WAAW,GAAG,MAAM,GAAG,MAAM;IAC5CS,MAAM,EAAET,WAAW,GAAG,CAAC,GAAG,CAAC,CAAC;IAC5BU,OAAO,EAAEV,WAAW,GAAG,CAAC,GAAG;EAC/B,CAAC;AAAA,CAAC,CAAC;AAAC;AAMG,IAAMW,oBAAoB,oBAAGZ,eAAM;EAAA;EAAA;AAAA,GAAgC;EAAA,IAAGC,WAAW,SAAXA,WAAW;EAAA,OAAQ;IAC5FG,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,KAAK;IACVC,IAAI,EAAE,KAAK;IACXJ,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,MAAM;IACdU,QAAQ,EAAE,OAAO;IACjBC,SAAS,EAAE,OAAO;IAClBC,QAAQ,EAAE,SAAS;IACnBR,eAAe,EAAE,0BAA0B;IAC3CS,SAAS,EAAE,iCAAiC;IAC5CC,YAAY,EAAE,iBAAiB;IAC/BT,UAAU,EAAE,2BAA2B;IACvCC,aAAa,EAAER,WAAW,GAAG,MAAM,GAAG,MAAM;IAC5CS,MAAM,EAAET,WAAW,GAAG,CAAC,GAAG,CAAC,CAAC;IAC5BU,OAAO,EAAEV,WAAW,GAAG,CAAC,GAAG,CAAC;IAC5BiB,SAAS,EAAEjB,WAAW,GAAG,kBAAkB,GAAG,qBAAqB;IAEnE,kBAAkB,EAAE;MAChBkB,aAAa,EAAE;IACnB,CAAC;IAED,2BAA2B,EAAE;MACzBC,OAAO,EAAE,MAAM;MACfC,OAAO,EAAE,MAAM;MACfC,cAAc,EAAE,eAAe;MAC/B,eAAe,EAAE;QACbL,YAAY,EAAE,CAAC;QACfG,OAAO,EAAE;MACb,CAAC;MACD,8CAA8C,EAAE;QAC5CG,KAAK,EAAE,6CAA6C;QACpDC,MAAM,EAAE;MACZ,CAAC;MACD,4CAA4C,EAAE;QAC1CjB,eAAe,EAAE;MACrB;IACJ;EACJ,CAAC;AAAA,CAAC,CAAC;AAAC;AASG,IAAMkB,oBAAyD,GAAG,SAA5DA,oBAAyD,QAGhE;EAAA,IAFFC,SAAS,SAATA,SAAS;IACTC,QAAQ,SAARA,QAAQ;EAER,kBAA8B,IAAAC,iBAAU,EAACC,wDAA2B,CAAC;IAA7DC,MAAM,eAANA,MAAM;IAAEC,SAAS,eAATA,SAAS;EACzB,oBACI,6BAAC,cAAK,CAAC,QAAQ,qBACX,6BAAC,aAAa;IACV,OAAO,EAAE,iBAAAC,CAAC,EAAI;MACVA,CAAC,CAACC,eAAe,EAAE;MACnB;MACAF,SAAS,CAAC,KAAK,CAAC;MAEhB,IAAI,OAAOL,SAAS,KAAK,UAAU,EAAE;QACjCA,SAAS,EAAE;MACf;IACJ,CAAE;IACF,WAAW,EAAEI;EAAO,EACtB,eACF,6BAAC,oBAAoB;IAAC,WAAW,EAAEA,MAAO;IAAC,WAAS;EAA0B,GACzEH,QAAQ,CACU,CACV;AAEzB,CAAC;AAAC"}

package/List/DataList/DataListModalOverlay/DataListModalOverlayAction.js

@@ -1,32 +1,22 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DataListModalOverlayAction = void 0;
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _Button = require("../../../Button");
-
 var _DataListModalOverlayContext = require("./DataListModalOverlayContext");
-
 var _excluded = ["icon"];
-
 var DataListModalOverlayAction = function DataListModalOverlayAction(_ref) {
   var icon = _ref.icon,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useContext = (0, _react.useContext)(_DataListModalOverlayContext.DataListModalOverlayContext),
-      isOpen = _useContext.isOpen,
-      setIsOpen = _useContext.setIsOpen;
-
+    isOpen = _useContext.isOpen,
+    setIsOpen = _useContext.setIsOpen;
   return /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
     "data-testid": rest["data-testid"],
     icon: icon,
@@ -35,5 +25,4 @@ var DataListModalOverlayAction = function DataListModalOverlayAction(_ref) {
     }
   });
 };
-
 exports.DataListModalOverlayAction = DataListModalOverlayAction;

package/List/DataList/DataListModalOverlay/DataListModalOverlayAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["DataListModalOverlayAction","icon","rest","useContext","DataListModalOverlayContext","isOpen","setIsOpen"],"sources":["DataListModalOverlayAction.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport { IconButton } from \"../../../Button\";\nimport { DataListModalOverlayContext } from \"./DataListModalOverlayContext\";\n\nexport interface DataListModalOverlayActionProps {\n    icon: React.ReactNode;\n    \"data-testid\"?: string;\n}\n\nexport const DataListModalOverlayAction: React.FC<DataListModalOverlayActionProps> = ({\n    icon,\n    ...rest\n}) => {\n    const { isOpen, setIsOpen } = useContext(DataListModalOverlayContext);\n\n    return (\n        <IconButton\n            data-testid={rest[\"data-testid\"]}\n            icon={icon}\n            onClick={() => setIsOpen(!isOpen)}\n        />\n    );\n};\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;AAOO,IAAMA,0BAAqE,GAAG,SAAxEA,0BAAwE,OAG/E;EAAA,IAFFC,IAEE,QAFFA,IAEE;EAAA,IADCC,IACD;;EACF,kBAA8B,IAAAC,iBAAA,EAAWC,wDAAX,CAA9B;EAAA,IAAQC,MAAR,eAAQA,MAAR;EAAA,IAAgBC,SAAhB,eAAgBA,SAAhB;;EAEA,oBACI,6BAAC,kBAAD;IACI,eAAaJ,IAAI,CAAC,aAAD,CADrB;IAEI,IAAI,EAAED,IAFV;IAGI,OAAO,EAAE;MAAA,OAAMK,SAAS,CAAC,CAACD,MAAF,CAAf;IAAA;EAHb,EADJ;AAOH,CAbM"}
+{"version":3,"names":["DataListModalOverlayAction","icon","rest","useContext","DataListModalOverlayContext","isOpen","setIsOpen"],"sources":["DataListModalOverlayAction.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport { IconButton } from \"../../../Button\";\nimport { DataListModalOverlayContext } from \"./DataListModalOverlayContext\";\n\nexport interface DataListModalOverlayActionProps {\n    icon: React.ReactNode;\n    \"data-testid\"?: string;\n}\n\nexport const DataListModalOverlayAction: React.FC<DataListModalOverlayActionProps> = ({\n    icon,\n    ...rest\n}) => {\n    const { isOpen, setIsOpen } = useContext(DataListModalOverlayContext);\n\n    return (\n        <IconButton\n            data-testid={rest[\"data-testid\"]}\n            icon={icon}\n            onClick={() => setIsOpen(!isOpen)}\n        />\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AAA4E;AAOrE,IAAMA,0BAAqE,GAAG,SAAxEA,0BAAqE,OAG5E;EAAA,IAFFC,IAAI,QAAJA,IAAI;IACDC,IAAI;EAEP,kBAA8B,IAAAC,iBAAU,EAACC,wDAA2B,CAAC;IAA7DC,MAAM,eAANA,MAAM;IAAEC,SAAS,eAATA,SAAS;EAEzB,oBACI,6BAAC,kBAAU;IACP,eAAaJ,IAAI,CAAC,aAAa,CAAE;IACjC,IAAI,EAAED,IAAK;IACX,OAAO,EAAE;MAAA,OAAMK,SAAS,CAAC,CAACD,MAAM,CAAC;IAAA;EAAC,EACpC;AAEV,CAAC;AAAC"}

package/List/DataList/DataListModalOverlay/DataListModalOverlayContext.js

@@ -1,33 +1,25 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DataListModalOverlayProvider = exports.DataListModalOverlayContext = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var DataListModalOverlayContext = /*#__PURE__*/_react.default.createContext({
   isOpen: false,
   setIsOpen: function setIsOpen() {
     return void 0;
   }
 });
-
 exports.DataListModalOverlayContext = DataListModalOverlayContext;
-
 var DataListModalOverlayProvider = function DataListModalOverlayProvider(_ref) {
   var children = _ref.children;
-
   var _React$useState = _react.default.useState(false),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      isOpen = _React$useState2[0],
-      setIsOpen = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    isOpen = _React$useState2[0],
+    setIsOpen = _React$useState2[1];
   return /*#__PURE__*/_react.default.createElement(DataListModalOverlayContext.Provider, {
     value: {
       isOpen: isOpen,
@@ -35,5 +27,4 @@ var DataListModalOverlayProvider = function DataListModalOverlayProvider(_ref) {
     }
   }, children);
 };
-
 exports.DataListModalOverlayProvider = DataListModalOverlayProvider;