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

package/List/DataList/DataListModalOverlay/DataListModalOverlay.js

@@ -1,7 +1,15 @@
-import React, { useContext } from "react";
-import styled from "@emotion/styled";
-import { DataListModalOverlayContext } from "./DataListModalOverlayContext";
-export var SimpleOverlay = /*#__PURE__*/styled("div", {
+"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"
 })(function (_ref) {
@@ -19,7 +27,8 @@ export var SimpleOverlay = /*#__PURE__*/styled("div", {
     opacity: showOverlay ? 1 : 0
   };
 });
-export var DataListModalWrapper = /*#__PURE__*/styled("div", {
+exports.SimpleOverlay = SimpleOverlay;
+var DataListModalWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "e1dhql4g1",
   label: "DataListModalWrapper"
 })(function (_ref2) {
@@ -62,26 +71,25 @@ export var DataListModalWrapper = /*#__PURE__*/styled("div", {
     }
   };
 });
-export var DataListModalOverlay = function DataListModalOverlay(_ref3) {
+exports.DataListModalWrapper = DataListModalWrapper;
+var DataListModalOverlay = function DataListModalOverlay(_ref3) {
   var onDismiss = _ref3.onDismiss,
-      children = _ref3.children;
-
-  var _useContext = useContext(DataListModalOverlayContext),
-      isOpen = _useContext.isOpen,
-      setIsOpen = _useContext.setIsOpen;
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SimpleOverlay, {
+    children = _ref3.children;
+  var _useContext = (0, _react.useContext)(_DataListModalOverlayContext.DataListModalOverlayContext),
+    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.createElement(DataListModalWrapper, {
+  }), /*#__PURE__*/_react.default.createElement(DataListModalWrapper, {
     showOverlay: isOpen
   }, children));
-};
+};
+exports.DataListModalOverlay = DataListModalOverlay;

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

@@ -0,0 +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,eAAM,EAA4B,KAAK;EAAA;EAAA;AAAA,GAAE;EAAA,IAAGC,WAAW,QAAXA,WAAW;EAAA,OAAQ;IACxFC,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;AAKG,IAAMW,oBAAoB,oBAAGZ,eAAM,EAAmC,KAAK;EAAA;EAAA;AAAA,GAC9E;EAAA,IAAGC,WAAW,SAAXA,WAAW;EAAA,OAAQ;IAClBG,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,MAAM;IAChBR,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,CACL;AAAC;AASK,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;EAAO,GAAEH,QAAQ,CAAwB,CAC/D;AAEzB,CAAC;AAAC"}

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

@@ -1,6 +1,6 @@
 import React from "react";
-export declare type DataListModalOverlayActionProps = {
+export interface DataListModalOverlayActionProps {
     icon: React.ReactNode;
     "data-testid"?: string;
-};
-export declare const DataListModalOverlayAction: ({ icon, ...rest }: DataListModalOverlayActionProps) => JSX.Element;
+}
+export declare const DataListModalOverlayAction: React.FC<DataListModalOverlayActionProps>;

package/List/DataList/DataListModalOverlay/DataListModalOverlayAction.js

@@ -1,21 +1,28 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+"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"];
-import React, { useContext } from "react";
-import { IconButton } from "../../../Button";
-import { DataListModalOverlayContext } from "./DataListModalOverlayContext";
-export var DataListModalOverlayAction = function DataListModalOverlayAction(_ref) {
+var DataListModalOverlayAction = function DataListModalOverlayAction(_ref) {
   var icon = _ref.icon,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var _useContext = useContext(DataListModalOverlayContext),
-      isOpen = _useContext.isOpen,
-      setIsOpen = _useContext.setIsOpen;
-
-  return /*#__PURE__*/React.createElement(IconButton, {
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useContext = (0, _react.useContext)(_DataListModalOverlayContext.DataListModalOverlayContext),
+    isOpen = _useContext.isOpen,
+    setIsOpen = _useContext.setIsOpen;
+  return /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
     "data-testid": rest["data-testid"],
     icon: icon,
     onClick: function onClick() {
       return setIsOpen(!isOpen);
     }
   });
-};
+};
+exports.DataListModalOverlayAction = DataListModalOverlayAction;

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

@@ -0,0 +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;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.d.ts

@@ -1,6 +1,11 @@
 import React from "react";
-export declare const DataListModalOverlayContext: React.Context<any>;
-export declare type DataListModalOverlayProviderProps = {
+interface DataListModalOverlayProviderContext {
+    isOpen: boolean;
+    setIsOpen: (value: boolean) => void;
+}
+export declare const DataListModalOverlayContext: React.Context<DataListModalOverlayProviderContext>;
+export interface DataListModalOverlayProviderProps {
     children?: React.ReactChild | React.ReactChild[];
-};
-export declare const DataListModalOverlayProvider: ({ children }: DataListModalOverlayProviderProps) => JSX.Element;
+}
+export declare const DataListModalOverlayProvider: React.FC<DataListModalOverlayProviderProps>;
+export {};

package/List/DataList/DataListModalOverlay/DataListModalOverlayContext.js

@@ -1,18 +1,30 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React from "react";
-export var DataListModalOverlayContext = /*#__PURE__*/React.createContext(null);
-export var DataListModalOverlayProvider = function DataListModalOverlayProvider(_ref) {
-  var children = _ref.children;
-
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      isOpen = _React$useState2[0],
-      setIsOpen = _React$useState2[1];
+"use strict";
 
-  return /*#__PURE__*/React.createElement(DataListModalOverlayContext.Provider, {
+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];
+  return /*#__PURE__*/_react.default.createElement(DataListModalOverlayContext.Provider, {
     value: {
       isOpen: isOpen,
       setIsOpen: setIsOpen
     }
   }, children);
-};
+};
+exports.DataListModalOverlayProvider = DataListModalOverlayProvider;

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

@@ -0,0 +1 @@
+{"version":3,"names":["DataListModalOverlayContext","React","createContext","isOpen","setIsOpen","DataListModalOverlayProvider","children","useState"],"sources":["DataListModalOverlayContext.tsx"],"sourcesContent":["import React from \"react\";\n\ninterface DataListModalOverlayProviderContext {\n    isOpen: boolean;\n    setIsOpen: (value: boolean) => void;\n}\nexport const DataListModalOverlayContext = React.createContext<DataListModalOverlayProviderContext>(\n    {\n        isOpen: false,\n        setIsOpen: () => {\n            return void 0;\n        }\n    }\n);\n\nexport interface DataListModalOverlayProviderProps {\n    children?: React.ReactChild | React.ReactChild[];\n}\n\nexport const DataListModalOverlayProvider: React.FC<DataListModalOverlayProviderProps> = ({\n    children\n}) => {\n    const [isOpen, setIsOpen] = React.useState<boolean>(false);\n\n    return (\n        <DataListModalOverlayContext.Provider value={{ isOpen, setIsOpen }}>\n            {children}\n        </DataListModalOverlayContext.Provider>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;AAMO,IAAMA,2BAA2B,gBAAGC,cAAK,CAACC,aAAa,CAC1D;EACIC,MAAM,EAAE,KAAK;EACbC,SAAS,EAAE,qBAAM;IACb,OAAO,KAAK,CAAC;EACjB;AACJ,CAAC,CACJ;AAAC;AAMK,IAAMC,4BAAyE,GAAG,SAA5EA,4BAAyE,OAEhF;EAAA,IADFC,QAAQ,QAARA,QAAQ;EAER,sBAA4BL,cAAK,CAACM,QAAQ,CAAU,KAAK,CAAC;IAAA;IAAnDJ,MAAM;IAAEC,SAAS;EAExB,oBACI,6BAAC,2BAA2B,CAAC,QAAQ;IAAC,KAAK,EAAE;MAAED,MAAM,EAANA,MAAM;MAAEC,SAAS,EAATA;IAAU;EAAE,GAC9DE,QAAQ,CAC0B;AAE/C,CAAC;AAAC"}

package/List/DataList/DataListModalOverlay/index.js

@@ -1,3 +1,32 @@
-export { DataListModalOverlay } from "./DataListModalOverlay";
-export { DataListModalOverlayAction } from "./DataListModalOverlayAction";
-export { DataListModalOverlayContext, DataListModalOverlayProvider } from "./DataListModalOverlayContext";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DataListModalOverlay", {
+  enumerable: true,
+  get: function get() {
+    return _DataListModalOverlay.DataListModalOverlay;
+  }
+});
+Object.defineProperty(exports, "DataListModalOverlayAction", {
+  enumerable: true,
+  get: function get() {
+    return _DataListModalOverlayAction.DataListModalOverlayAction;
+  }
+});
+Object.defineProperty(exports, "DataListModalOverlayContext", {
+  enumerable: true,
+  get: function get() {
+    return _DataListModalOverlayContext.DataListModalOverlayContext;
+  }
+});
+Object.defineProperty(exports, "DataListModalOverlayProvider", {
+  enumerable: true,
+  get: function get() {
+    return _DataListModalOverlayContext.DataListModalOverlayProvider;
+  }
+});
+var _DataListModalOverlay = require("./DataListModalOverlay");
+var _DataListModalOverlayAction = require("./DataListModalOverlayAction");
+var _DataListModalOverlayContext = require("./DataListModalOverlayContext");

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { DataListModalOverlay } from \"./DataListModalOverlay\";\nexport { DataListModalOverlayAction } from \"./DataListModalOverlayAction\";\nexport {\n    DataListModalOverlayContext,\n    DataListModalOverlayProvider\n} from \"./DataListModalOverlayContext\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA"}

package/List/DataList/DataListWithSections.d.ts

@@ -0,0 +1,45 @@
+import React from "react";
+import { ListItem, ListProps } from "..";
+import { PaginationProp, SortersProp } from "./types";
+interface DataListData {
+    [key: string]: Record<string, any>[];
+}
+interface DataListWithSectionsProps {
+    children?: ((props: any) => React.ReactNode) | null;
+    title?: React.ReactNode;
+    data?: DataListData | null;
+    refresh?: (() => void) | null;
+    loading?: boolean;
+    loader?: React.ReactNode;
+    noData?: React.ReactNode;
+    pagination?: PaginationProp;
+    setSorters?: Function | null;
+    sorters?: SortersProp | null;
+    actions?: React.ReactNode;
+    filters?: React.ReactNode;
+    multiSelectActions?: React.ReactNode;
+    multiSelectAll?: (value: boolean, data: DataListData | null) => void;
+    isAllMultiSelected?: (data: DataListData | null) => boolean;
+    isNoneMultiSelected?: (data: DataListData | null) => boolean;
+    showOptions?: {
+        refresh?: boolean;
+        pagination?: boolean;
+        filters?: boolean;
+        sorters?: boolean;
+        [key: string]: any;
+    };
+    search?: React.ReactElement;
+    modalOverlay?: React.ReactElement;
+    modalOverlayAction?: React.ReactElement;
+    subHeader?: React.ReactElement;
+    meta?: Record<string, any> | null;
+    setPage?: ((page: string) => void) | null;
+    setPerPage?: ((page: string) => void) | null;
+    perPageOptions?: number[];
+}
+export declare const DataListWithSections: React.FC<DataListWithSectionsProps>;
+interface ScrollListWithSectionsProps extends ListProps {
+    children: React.ReactElement<typeof ListItem>[];
+}
+export declare const ScrollListWithSections: React.FC<ScrollListWithSectionsProps>;
+export {};

package/List/DataList/DataListWithSections.js

@@ -0,0 +1,312 @@
+"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;