@webiny/ui 0.0.0-mt-1

package/List/CollapsibleList/index.css

@@ -0,0 +1,31 @@
+.rmwc-collapsible-list {
+  width: 100%;
+}
+
+.rmwc-collapsible-list__children {
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height 0.3s, opacity 0.3s;
+  opacity: 0;
+}
+
+.rmwc-collapsible-list--open > .rmwc-collapsible-list__children {
+  opacity: 1;
+}
+
+.rmwc-collapsible-list__handle .mdc-list-item__meta {
+  transition: transform 0.3s;
+  user-select: none;
+}
+
+.rmwc-collapsible-list--open > .rmwc-collapsible-list__handle .mdc-list-item__meta {
+  transform: rotate(90deg);
+}
+
+.rmwc-collapsible-list__children .mdc-list-item {
+  padding-left: 2rem;
+}
+
+.rmwc-collapsible-list__children-inner {
+  overflow: auto;
+}

package/List/CollapsibleList/index.d.ts

@@ -0,0 +1,8 @@
+import "./index.css";
+import * as React from "react";
+import { CollapsibleListProps as RmwcCollapsibleListProps } from "@rmwc/list";
+export declare type CollapsibleListProps = RmwcCollapsibleListProps & {
+    children: React.ReactNode;
+};
+export declare const CollapsibleList: (props: CollapsibleListProps) => JSX.Element;
+export default CollapsibleList;

package/List/CollapsibleList/index.js

@@ -0,0 +1,7 @@
+import "./index.css";
+import * as React from "react";
+import { CollapsibleList as RmwcCollapsibleList } from "@rmwc/list";
+export var CollapsibleList = function CollapsibleList(props) {
+  return /*#__PURE__*/React.createElement(RmwcCollapsibleList, props);
+};
+export default CollapsibleList;

package/List/DataList/DataList.d.ts

@@ -0,0 +1,61 @@
+import * as React from "react";
+import { ListItem, ListProps } from "..";
+import { PaginationProp, SortersProp } from "./types";
+declare type Props = {
+    children?: Function;
+    title?: React.ReactNode;
+    data?: Object[];
+    refresh?: Function;
+    loading?: boolean;
+    loader?: React.ReactNode;
+    noData?: React.ReactNode;
+    pagination?: PaginationProp;
+    setSorters?: Function;
+    sorters?: SortersProp;
+    actions?: React.ReactNode;
+    filters?: React.ReactNode;
+    multiSelectActions?: React.ReactNode;
+    multiSelectAll?: (value: boolean, data: Object[]) => void;
+    isAllMultiSelected?: (data: Object[]) => boolean;
+    isNoneMultiSelected?: (data: Object[]) => boolean;
+    showOptions?: {
+        [key: string]: any;
+    };
+    search?: React.ReactElement;
+    modalOverlay?: React.ReactElement;
+    modalOverlayAction?: React.ReactElement;
+};
+export declare const DataList: {
+    (props: Props): JSX.Element;
+    defaultProps: {
+        children: any;
+        title: any;
+        data: any;
+        meta: any;
+        loading: boolean;
+        refresh: any;
+        setPage: any;
+        setPerPage: any;
+        perPageOptions: number[];
+        filters: any;
+        sorters: any;
+        setSorters: any;
+        actions: any;
+        multiSelectAll: any;
+        isAllMultiSelected: () => boolean;
+        isNoneMultiSelected: () => boolean;
+        loader: JSX.Element;
+        noData: JSX.Element;
+        showOptions: {
+            refresh: boolean;
+            pagination: boolean;
+            sorters: boolean;
+            filters: boolean;
+        };
+    };
+};
+export declare type ScrollListProps = ListProps & {
+    children: React.ReactElement<typeof ListItem>[];
+};
+export declare const ScrollList: (props: ScrollListProps) => JSX.Element;
+export {};

package/List/DataList/DataList.js

@@ -0,0 +1,312 @@
+import * as React from "react";
+import styled from "@emotion/styled";
+import classNames from "classnames";
+import Loader from "./Loader";
+import NoData from "./NoData";
+import { Typography } from "../../Typography";
+import { css } from "emotion";
+import noop from "lodash/noop";
+import isEmpty from "lodash/isEmpty";
+import { Checkbox } from "../../Checkbox";
+import { Menu, MenuItem } from "../../Menu";
+import { Grid, Cell } from "../../Grid";
+import { RefreshIcon, SortIcon, FilterIcon, PreviousPageIcon, NextPageIcon, OptionsIcon } from "./icons";
+import { List } from "..";
+import { DataListModalOverlayProvider } from "./DataListModalOverlay";
+var ListContainer = /*#__PURE__*/styled("div", {
+  target: "e14cccao0",
+  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__*/css({
+  borderBottom: "1px solid var(--mdc-theme-on-background)",
+  color: "var(--mdc-theme-text-primary-on-background)",
+  width: "100%"
+}, "label:listHeader;");
+var listSubHeader = /*#__PURE__*/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__*/styled("div", {
+  target: "e14cccao1",
+  label: "ListHeaderItem"
+})({
+  display: "inline-block",
+  verticalAlign: "middle",
+  "&.disabled": {
+    opacity: 0.5,
+    pointerEvents: "none"
+  }
+});
+var listTitle = /*#__PURE__*/css({
+  display: "flex",
+  alignItems: "center"
+}, "label:listTitle;");
+var listActions = /*#__PURE__*/css({
+  textAlign: "right"
+}, "label:listActions;");
+var scrollList = /*#__PURE__*/css({
+  overflow: "auto",
+  height: "calc(100vh - 235px)"
+}, "label:scrollList;");
+var dataListContent = /*#__PURE__*/css({
+  position: "relative",
+  height: "100%",
+  overflow: "auto"
+}, "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;
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, typeof props.multiSelectAll === "function" && /*#__PURE__*/React.createElement(ListHeaderItem, null, /*#__PURE__*/React.createElement(Checkbox, {
+    indeterminate: !props.isAllMultiSelected(props.data) && !props.isNoneMultiSelected(props.data),
+    value: props.isAllMultiSelected(props.data),
+    onClick: function onClick() {
+      props.multiSelectAll(!props.isAllMultiSelected(props.data), props.data);
+    }
+  })));
+};
+
+var MultiSelectActions = function MultiSelectActions(props) {
+  var multiSelectActions = props.multiSelectActions;
+
+  if (!multiSelectActions) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(ListHeaderItem, null, multiSelectActions);
+};
+
+var RefreshButton = function RefreshButton(props) {
+  var refresh = props.refresh;
+
+  if (!refresh) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(ListHeaderItem, null, /*#__PURE__*/React.createElement(RefreshIcon, {
+    onClick: function onClick() {
+      return refresh();
+    }
+  }));
+};
+
+var Sorters = function Sorters(props) {
+  var sorters = props.sorters;
+
+  if (!sorters) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(ListHeaderItem, null, /*#__PURE__*/React.createElement(Menu, {
+    handle: /*#__PURE__*/React.createElement(SortIcon, null)
+  }, sorters.map(function (sorter) {
+    return /*#__PURE__*/React.createElement(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.createElement(ListHeaderItem, null, /*#__PURE__*/React.createElement(Menu, {
+    handle: /*#__PURE__*/React.createElement(FilterIcon, null)
+  }, filters));
+};
+
+var Pagination = function Pagination(props) {
+  var pagination = props.pagination;
+
+  if (!pagination) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, pagination.setNextPage && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListHeaderItem, {
+    className: classNames({
+      disabled: !pagination.hasPreviousPage
+    })
+  }, /*#__PURE__*/React.createElement(PreviousPageIcon, {
+    onClick: function onClick() {
+      if (pagination.setPreviousPage && pagination.hasPreviousPage) {
+        pagination.setPreviousPage();
+      }
+    }
+  })), /*#__PURE__*/React.createElement(ListHeaderItem, {
+    className: classNames({
+      disabled: !pagination.hasNextPage
+    })
+  }, /*#__PURE__*/React.createElement(NextPageIcon, {
+    onClick: function onClick() {
+      if (pagination.setNextPage && pagination.hasNextPage) {
+        pagination.setNextPage();
+      }
+    }
+  }))), Array.isArray(pagination.perPageOptions) && pagination.setPerPage && /*#__PURE__*/React.createElement(ListHeaderItem, null, /*#__PURE__*/React.createElement(Menu, {
+    handle: /*#__PURE__*/React.createElement(OptionsIcon, null)
+  }, pagination.setPerPage && pagination.perPageOptions.map(function (perPage) {
+    return /*#__PURE__*/React.createElement(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.createElement(Cell, {
+    span: 7
+  }, /*#__PURE__*/React.cloneElement(props.search, props));
+};
+
+export var DataList = function DataList(props) {
+  var render = null;
+
+  if (props.loading) {
+    render = props.loader;
+  } else if (isEmpty(props.data)) {
+    render = props.noData;
+  } else {
+    render = typeof props.children === "function" ? props.children(props) : null;
+  }
+
+  return /*#__PURE__*/React.createElement(DataListModalOverlayProvider, null, /*#__PURE__*/React.createElement(ListContainer, {
+    className: "webiny-data-list",
+    "data-testid": "ui.list.data-list"
+  }, (props.title || props.actions) && /*#__PURE__*/React.createElement(Grid, {
+    className: listHeader
+  }, /*#__PURE__*/React.createElement(Cell, {
+    span: 5,
+    className: listTitle
+  }, /*#__PURE__*/React.createElement(Typography, {
+    use: "headline5"
+  }, props.title)), /*#__PURE__*/React.createElement(Cell, {
+    span: 7,
+    className: listActions
+  }, props.actions)), Object.keys(props.showOptions).length > 0 && /*#__PURE__*/React.createElement(Grid, {
+    className: listSubHeader
+  }, /*#__PURE__*/React.createElement(Search, props), /*#__PURE__*/React.createElement(Cell, {
+    span: props.search ? 5 : 12,
+    style: {
+      justifySelf: "end"
+    }
+  }, /*#__PURE__*/React.createElement(MultiSelectAll, props), props.showOptions.refresh && /*#__PURE__*/React.createElement(RefreshButton, props), props.showOptions.pagination && /*#__PURE__*/React.createElement(Pagination, props), props.showOptions.sorters && /*#__PURE__*/React.createElement(Sorters, props), props.showOptions.filters && /*#__PURE__*/React.createElement(Filters, props), props.modalOverlayAction ? /*#__PURE__*/React.createElement(ListHeaderItem, null, props.modalOverlayAction) : null, /*#__PURE__*/React.createElement(MultiSelectActions, props))), /*#__PURE__*/React.createElement("div", {
+    className: classNames(dataListContent, "webiny-data-list__content")
+  }, render, props.modalOverlay)));
+};
+DataList.defaultProps = {
+  children: null,
+  title: null,
+  data: null,
+  meta: null,
+  loading: false,
+  refresh: null,
+  setPage: null,
+  setPerPage: null,
+  perPageOptions: [10, 25, 50],
+  filters: null,
+  sorters: null,
+  setSorters: null,
+  actions: null,
+  multiSelectAll: noop,
+  isAllMultiSelected: function isAllMultiSelected() {
+    return false;
+  },
+  isNoneMultiSelected: function isNoneMultiSelected() {
+    return false;
+  },
+  loader: /*#__PURE__*/React.createElement(Loader, null),
+  noData: /*#__PURE__*/React.createElement(NoData, null),
+  showOptions: {
+    refresh: true,
+    pagination: true,
+    sorters: true,
+    filters: true
+  }
+};
+export var ScrollList = function ScrollList(props) {
+  return /*#__PURE__*/React.createElement(List, Object.assign({}, props, {
+    className: scrollList
+  }), props.children);
+};

package/List/DataList/DataList.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/List/DataList/DataList.stories.js

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

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

@@ -0,0 +1,18 @@
+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, "onError" | "className" | "style" | "title" | "children" | "onBlur" | "onClick" | "onContextMenu" | "onCopy" | "onCut" | "onAuxClick" | "onDoubleClick" | "onDragEnd" | "onDragStart" | "onDrop" | "onFocus" | "onInput" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onMouseDown" | "onMouseUp" | "onPaste" | "onPause" | "onPlay" | "onPointerCancel" | "onPointerDown" | "onPointerUp" | "onRateChange" | "onReset" | "onSeeked" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchStart" | "onVolumeChange" | "onAbort" | "onAnimationEnd" | "onAnimationIteration" | "onAnimationStart" | "onCanPlay" | "onCanPlayThrough" | "onDrag" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDurationChange" | "onEmptied" | "onEncrypted" | "onEnded" | "onGotPointerCapture" | "onLoad" | "onLoadedData" | "onLoadedMetadata" | "onLoadStart" | "onLostPointerCapture" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onPlaying" | "onPointerMove" | "onPointerOut" | "onPointerOver" | "onProgress" | "onScroll" | "onSeeking" | "onStalled" | "onSuspend" | "onTimeUpdate" | "onTouchMove" | "onTransitionEnd" | "onWaiting" | "onWheel" | "onMouseEnter" | "onMouseLeave" | "onPointerEnter" | "onPointerLeave" | "onChange" | "onSelect" | "onBeforeInput" | "onCompositionEnd" | "onCompositionStart" | "onCompositionUpdate" | "placeholder" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopyCapture" | "onCutCapture" | "onPasteCapture" | "onCompositionEndCapture" | "onCompositionStartCapture" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInputCapture" | "onInputCapture" | "onResetCapture" | "onSubmitCapture" | "onInvalidCapture" | "onLoadCapture" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbortCapture" | "onCanPlayCapture" | "onCanPlayThroughCapture" | "onDurationChangeCapture" | "onEmptiedCapture" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedDataCapture" | "onLoadedMetadataCapture" | "onLoadStartCapture" | "onPauseCapture" | "onPlayCapture" | "onPlayingCapture" | "onProgressCapture" | "onRateChangeCapture" | "onSeekedCapture" | "onSeekingCapture" | "onStalledCapture" | "onSuspendCapture" | "onTimeUpdateCapture" | "onVolumeChangeCapture" | "onWaitingCapture" | "onAuxClickCapture" | "onClickCapture" | "onContextMenuCapture" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnterCapture" | "onDragExitCapture" | "onDragLeaveCapture" | "onDragOverCapture" | "onDragStartCapture" | "onDropCapture" | "onMouseDownCapture" | "onMouseMoveCapture" | "onMouseOutCapture" | "onMouseOverCapture" | "onMouseUpCapture" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDownCapture" | "onPointerMoveCapture" | "onPointerUpCapture" | "onPointerCancelCapture" | "onPointerEnterCapture" | "onPointerLeaveCapture" | "onPointerOverCapture" | "onPointerOutCapture" | "onGotPointerCaptureCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "translate" | "css" | "showOverlay"> & {
+    theme: object;
+}, object>;
+export declare type 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, "onError" | "className" | "style" | "title" | "children" | "onBlur" | "onClick" | "onContextMenu" | "onCopy" | "onCut" | "onAuxClick" | "onDoubleClick" | "onDragEnd" | "onDragStart" | "onDrop" | "onFocus" | "onInput" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onMouseDown" | "onMouseUp" | "onPaste" | "onPause" | "onPlay" | "onPointerCancel" | "onPointerDown" | "onPointerUp" | "onRateChange" | "onReset" | "onSeeked" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchStart" | "onVolumeChange" | "onAbort" | "onAnimationEnd" | "onAnimationIteration" | "onAnimationStart" | "onCanPlay" | "onCanPlayThrough" | "onDrag" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDurationChange" | "onEmptied" | "onEncrypted" | "onEnded" | "onGotPointerCapture" | "onLoad" | "onLoadedData" | "onLoadedMetadata" | "onLoadStart" | "onLostPointerCapture" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onPlaying" | "onPointerMove" | "onPointerOut" | "onPointerOver" | "onProgress" | "onScroll" | "onSeeking" | "onStalled" | "onSuspend" | "onTimeUpdate" | "onTouchMove" | "onTransitionEnd" | "onWaiting" | "onWheel" | "onMouseEnter" | "onMouseLeave" | "onPointerEnter" | "onPointerLeave" | "onChange" | "onSelect" | "onBeforeInput" | "onCompositionEnd" | "onCompositionStart" | "onCompositionUpdate" | "placeholder" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopyCapture" | "onCutCapture" | "onPasteCapture" | "onCompositionEndCapture" | "onCompositionStartCapture" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInputCapture" | "onInputCapture" | "onResetCapture" | "onSubmitCapture" | "onInvalidCapture" | "onLoadCapture" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbortCapture" | "onCanPlayCapture" | "onCanPlayThroughCapture" | "onDurationChangeCapture" | "onEmptiedCapture" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedDataCapture" | "onLoadedMetadataCapture" | "onLoadStartCapture" | "onPauseCapture" | "onPlayCapture" | "onPlayingCapture" | "onProgressCapture" | "onRateChangeCapture" | "onSeekedCapture" | "onSeekingCapture" | "onStalledCapture" | "onSuspendCapture" | "onTimeUpdateCapture" | "onVolumeChangeCapture" | "onWaitingCapture" | "onAuxClickCapture" | "onClickCapture" | "onContextMenuCapture" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnterCapture" | "onDragExitCapture" | "onDragLeaveCapture" | "onDragOverCapture" | "onDragStartCapture" | "onDropCapture" | "onMouseDownCapture" | "onMouseMoveCapture" | "onMouseOutCapture" | "onMouseOverCapture" | "onMouseUpCapture" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDownCapture" | "onPointerMoveCapture" | "onPointerUpCapture" | "onPointerCancelCapture" | "onPointerEnterCapture" | "onPointerLeaveCapture" | "onPointerOverCapture" | "onPointerOutCapture" | "onGotPointerCaptureCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "translate" | "css" | "showOverlay"> & {
+    theme: object;
+}, object>;
+export declare type DataListModalOverlayProps = {
+    onDismiss?: (event?: React.SyntheticEvent) => void;
+    children: React.ReactNode;
+};
+export declare const DataListModalOverlay: ({ onDismiss, children }: DataListModalOverlayProps) => JSX.Element;

package/List/DataList/DataListModalOverlay/DataListModalOverlay.js

@@ -0,0 +1,87 @@
+import React, { useContext } from "react";
+import styled from "@emotion/styled";
+import { DataListModalOverlayContext } from "./DataListModalOverlayContext";
+export var SimpleOverlay = /*#__PURE__*/styled("div", {
+  target: "e1dhql4g0",
+  label: "SimpleOverlay"
+})(function (_ref) {
+  var showOverlay = _ref.showOverlay;
+  return {
+    width: "100%",
+    height: "100%",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    backgroundColor: showOverlay ? "rgba(0, 0, 0, 0.32)" : "transparent",
+    transition: "150ms all ease-in-out",
+    pointerEvents: showOverlay ? "auto" : "none",
+    zIndex: showOverlay ? 5 : -1,
+    opacity: showOverlay ? 1 : 0
+  };
+});
+export var DataListModalWrapper = /*#__PURE__*/styled("div", {
+  target: "e1dhql4g1",
+  label: "DataListModalWrapper"
+})(function (_ref2) {
+  var showOverlay = _ref2.showOverlay;
+  return {
+    position: "absolute",
+    top: "0px",
+    left: "50%",
+    width: "90%",
+    height: "auto",
+    maxWidth: "426px",
+    maxHeight: "520px",
+    overflow: "auto",
+    backgroundColor: "var(--mdc-theme-surface)",
+    boxShadow: "0px 1px 5px rgba(0, 0, 0, 0.12)",
+    borderRadius: "0px 0px 4px 4px",
+    transition: "150ms opacity ease-in-out",
+    pointerEvents: showOverlay ? "auto" : "none",
+    zIndex: showOverlay ? 5 : -1,
+    opacity: showOverlay ? 1 : 0,
+    transform: showOverlay ? "translateX(-50%)" : "translateX(-1000px)",
+    "& .input-wrapper": {
+      paddingBottom: "16px"
+    },
+    "& .datalist-modal__footer": {
+      padding: "24px",
+      display: "flex",
+      justifyContent: "space-between",
+      "& .mdc-button": {
+        borderRadius: 4,
+        padding: "0px 32px"
+      },
+      "& .datalist-modal__footer__action--secondary": {
+        color: "var(--mdc-theme-text-primary-on-background)",
+        border: "1px solid var(--mdc-theme-on-background)"
+      },
+      "& .datalist-modal__footer__action--primary": {
+        backgroundColor: "var(--mdc-theme-secondary)"
+      }
+    }
+  };
+});
+export 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, {
+    onClick: function onClick(e) {
+      e.stopPropagation(); // Close the modal.
+
+      setIsOpen(false);
+
+      if (typeof onDismiss === "function") {
+        onDismiss();
+      }
+    },
+    showOverlay: isOpen
+  }), /*#__PURE__*/React.createElement(DataListModalWrapper, {
+    showOverlay: isOpen
+  }, children));
+};

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

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