@webiny/ui 0.0.0-ee-vpcs.549378cf03

package/DataTable/README.md

@@ -0,0 +1,72 @@
+# DataTable
+
+### Design
+
+https://material.io/components/data-tables
+
+### Description
+
+Use `DataTable` components to display sets of data across rows and columns.
+
+### Usage
+
+```tsx
+import { DataTable, Columns } from "@webiny/ui/DataTable";
+
+// Declare the data structure.
+interface Entry {
+    name: string;
+    createdBy: string;
+    lastModified: string;
+    status: string;
+}
+
+// Define the data you want to display.
+const data: Entry[] = [
+    {
+        name: "Page 1",
+        createdBy: "John Doe",
+        lastModified: "3 days ago",
+        status: "Draft"
+    },
+    {
+        name: "Page 2",
+        createdBy: "John Doe",
+        lastModified: "1 day ago",
+        status: "Published"
+    },
+    {
+        name: "Page 3",
+        createdBy: "John Doe",
+        lastModified: "1 hour ago",
+        status: "Published"
+    }
+];
+
+// Define the columns structure for your table.
+const columns: Columns<Entry> = {
+    name: {
+        header: "Title"
+    },
+    createdBy: {
+        header: "Author",
+        cell: row => <em>{row.createdBy.toUpperCase()}</em>
+    },
+    lastModified: {
+        header: "Last Modified"
+    },
+    status: {
+        header: "Status",
+        meta: {
+            alignEnd: true
+        }
+    }
+};
+
+...
+
+// Use the <DataTable /> component within your code.
+return(
+    <DataTable data={data} columns={columns} />
+)
+```

package/DataTable/index.d.ts

@@ -0,0 +1 @@
+export * from "./DataTable";

package/DataTable/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _DataTable = require("./DataTable");
+
+Object.keys(_DataTable).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DataTable[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DataTable[key];
+    }
+  });
+});

package/DataTable/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./DataTable\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/DataTable/styled.d.ts

@@ -0,0 +1,2 @@
+import { DataTableProps } from "@rmwc/data-table";
+export declare const Table: import("@emotion/styled-base").StyledComponent<{}, DataTableProps, object>;

package/DataTable/styled.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Table = void 0;
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _dataTable = require("@rmwc/data-table");
+
+var Table = /*#__PURE__*/(0, _styled.default)(_dataTable.DataTable, {
+  label: "Table",
+  target: "er5nqo40"
+})("width:100%;th,td{vertical-align:middle;}.datatable-select-column{width:56px;}");
+exports.Table = Table;

package/DataTable/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Table","styled","RmwcDataTable"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { DataTable as RmwcDataTable, DataTableProps } from \"@rmwc/data-table\";\n\nexport const Table = styled(RmwcDataTable)<DataTableProps>`\n    width: 100%;\n\n    th,\n    td {\n        vertical-align: middle;\n    }\n\n    .datatable-select-column {\n        width: 56px;\n    }\n`;\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;AAEO,IAAMA,KAAK,oBAAGC,eAAH,EAAUC,oBAAV;EAAA;EAAA;AAAA,mFAAX"}

package/DelayedOnChange/DelayedOnChange.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="web" />
+import React from "react";
+interface ApplyValueCb {
+    (value: string, cb: (value: string) => void): void;
+}
+/**
+ * This component is used to wrap Input and Textarea components to optimize form re-render.
+ * These 2 are the only components that trigger form model change on each character input.
+ * This means, whenever you type a letter an entire form re-renders.
+ * On complex forms you will feel and see a significant delay if this component is not used.
+ *
+ * The logic behind this component is to serve as a middleware between Form and Input/Textarea, and only notify form of a change when
+ * a user stops typing for given period of time (400ms by default).
+ */
+interface OnChangeCallable {
+    (value: string, cb?: ApplyValueCb): void;
+}
+interface OnBlurCallable {
+    (ev: React.SyntheticEvent): void;
+}
+interface OnKeyDownCallable {
+    (ev: React.KeyboardEvent<HTMLInputElement>): void;
+}
+interface ChildrenCallableParams {
+    value: string;
+    onChange: OnChangeCallable;
+}
+interface ChildrenCallable {
+    (params: ChildrenCallableParams): React.ReactElement;
+}
+export interface DelayedOnChangeProps {
+    value?: string;
+    delay?: number;
+    onChange?: OnChangeCallable;
+    onBlur?: OnBlurCallable;
+    onKeyDown?: OnKeyDownCallable;
+    children: React.ReactNode | ChildrenCallable;
+}
+export declare const DelayedOnChange: React.FC<DelayedOnChangeProps>;
+export default DelayedOnChange;

package/DelayedOnChange/DelayedOnChange.js

@@ -0,0 +1,129 @@
+"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.default = exports.DelayedOnChange = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _excluded = ["children"];
+
+var emptyFunction = function emptyFunction() {
+  return undefined;
+};
+
+var DelayedOnChange = function DelayedOnChange(_ref) {
+  var children = _ref.children,
+      other = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var onChange = other.onChange,
+      _other$delay = other.delay,
+      delay = _other$delay === void 0 ? 400 : _other$delay,
+      initialValue = other.value;
+
+  var _useState = (0, _react.useState)(initialValue),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1]; // Sync state and props
+
+
+  (0, _react.useEffect)(function () {
+    if (initialValue !== value) {
+      setValue(initialValue);
+    }
+  }, [initialValue]);
+
+  var localTimeout = _react.default.useRef(null);
+
+  var applyValue = function applyValue(value) {
+    var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : emptyFunction;
+    localTimeout.current && clearTimeout(localTimeout.current);
+    localTimeout.current = null;
+
+    if (!onChange) {
+      return;
+    }
+
+    onChange(value, callback);
+  };
+
+  var onChangeLocal = _react.default.useCallback(function (value) {
+    setValue(value);
+  }, []); // this is fired upon change value state
+
+
+  var onValueStateChanged = function onValueStateChanged(nextValue) {
+    localTimeout.current && clearTimeout(localTimeout.current);
+    localTimeout.current = null;
+    localTimeout.current = setTimeout(function () {
+      return applyValue(nextValue);
+    }, delay);
+  }; // need to clear the timeout when unmounting the component
+
+
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (!localTimeout.current) {
+        return;
+      }
+
+      clearTimeout(localTimeout.current);
+      localTimeout.current = null;
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    onValueStateChanged(value || "");
+  }, [value]);
+  var newProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, other), {}, {
+    value: value || "",
+    onChange: onChangeLocal
+  });
+  var renderProp = typeof children === "function" ? children : null;
+  var child = renderProp ? renderProp(newProps) : /*#__PURE__*/_react.default.cloneElement(children, newProps);
+  var props = (0, _objectSpread2.default)({}, child.props);
+  var realOnKeyDown = props.onKeyDown || emptyFunction;
+  var realOnBlur = props.onBlur || emptyFunction; // Need to apply value if input lost focus
+
+  var onBlur = function onBlur(ev) {
+    ev.persist();
+    applyValue(ev.target.value, function () {
+      return realOnBlur(ev);
+    });
+  }; // Need to listen for TAB key to apply new value immediately, without delay. Otherwise validation will be triggered with old value.
+
+
+  var onKeyDown = function onKeyDown(ev) {
+    ev.persist();
+
+    if (ev.key === "Tab") {
+      applyValue(ev.target.value, function () {
+        return realOnKeyDown(ev);
+      });
+    } else if (ev.key === "Enter" && props["data-on-enter"]) {
+      applyValue(ev.target.value, function () {
+        return realOnKeyDown(ev);
+      });
+    } else {
+      realOnKeyDown(ev);
+    }
+  };
+
+  return /*#__PURE__*/_react.default.cloneElement(child, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    onBlur: onBlur,
+    onKeyDown: onKeyDown
+  }));
+};
+
+exports.DelayedOnChange = DelayedOnChange;
+var _default = DelayedOnChange;
+exports.default = _default;

package/DelayedOnChange/DelayedOnChange.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["emptyFunction","undefined","DelayedOnChange","children","other","onChange","delay","initialValue","value","useState","setValue","useEffect","localTimeout","React","useRef","applyValue","callback","current","clearTimeout","onChangeLocal","useCallback","onValueStateChanged","nextValue","setTimeout","newProps","renderProp","child","cloneElement","props","realOnKeyDown","onKeyDown","realOnBlur","onBlur","ev","persist","target","key"],"sources":["DelayedOnChange.ts"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nconst emptyFunction = (): undefined => {\n    return undefined;\n};\n\ninterface ApplyValueCb {\n    (value: string, cb: (value: string) => void): void;\n}\n/**\n * This component is used to wrap Input and Textarea components to optimize form re-render.\n * These 2 are the only components that trigger form model change on each character input.\n * This means, whenever you type a letter an entire form re-renders.\n * On complex forms you will feel and see a significant delay if this component is not used.\n *\n * The logic behind this component is to serve as a middleware between Form and Input/Textarea, and only notify form of a change when\n * a user stops typing for given period of time (400ms by default).\n */\ninterface OnChangeCallable {\n    (value: string, cb?: ApplyValueCb): void;\n}\ninterface OnBlurCallable {\n    (ev: React.SyntheticEvent): void;\n}\ninterface OnKeyDownCallable {\n    (ev: React.KeyboardEvent<HTMLInputElement>): void;\n}\ninterface ChildrenCallableParams {\n    value: string;\n    onChange: OnChangeCallable;\n}\ninterface ChildrenCallable {\n    (params: ChildrenCallableParams): React.ReactElement;\n}\nexport interface DelayedOnChangeProps {\n    value?: string;\n    delay?: number;\n    onChange?: OnChangeCallable;\n    onBlur?: OnBlurCallable;\n    onKeyDown?: OnKeyDownCallable;\n    children: React.ReactNode | ChildrenCallable;\n}\nexport const DelayedOnChange: React.FC<DelayedOnChangeProps> = ({ children, ...other }) => {\n    const { onChange, delay = 400, value: initialValue } = other;\n    const [value, setValue] = useState<string | undefined>(initialValue);\n    // Sync state and props\n    useEffect(() => {\n        if (initialValue !== value) {\n            setValue(initialValue);\n        }\n    }, [initialValue]);\n\n    const localTimeout = React.useRef<number | null>(null);\n\n    const applyValue = (value: string, callback: ApplyValueCb = emptyFunction) => {\n        localTimeout.current && clearTimeout(localTimeout.current);\n        localTimeout.current = null;\n        if (!onChange) {\n            return;\n        }\n        onChange(value, callback);\n    };\n\n    const onChangeLocal = React.useCallback((value: string) => {\n        setValue(value);\n    }, []);\n\n    // this is fired upon change value state\n    const onValueStateChanged = (nextValue: string) => {\n        localTimeout.current && clearTimeout(localTimeout.current);\n        localTimeout.current = null;\n        localTimeout.current = setTimeout(() => applyValue(nextValue), delay) as unknown as number;\n    };\n\n    // need to clear the timeout when unmounting the component\n    useEffect(() => {\n        return () => {\n            if (!localTimeout.current) {\n                return;\n            }\n            clearTimeout(localTimeout.current);\n            localTimeout.current = null;\n        };\n    }, []);\n\n    useEffect(() => {\n        onValueStateChanged(value || \"\");\n    }, [value]);\n\n    const newProps = {\n        ...other,\n        value: value || \"\",\n        onChange: onChangeLocal\n    };\n\n    const renderProp = typeof children === \"function\" ? (children as ChildrenCallable) : null;\n    const child = renderProp\n        ? renderProp(newProps)\n        : React.cloneElement(children as unknown as React.ReactElement, newProps);\n\n    const props = { ...child.props };\n    const realOnKeyDown = props.onKeyDown || emptyFunction;\n    const realOnBlur = props.onBlur || emptyFunction;\n\n    // Need to apply value if input lost focus\n    const onBlur: OnBlurCallable = ev => {\n        ev.persist();\n        applyValue((ev.target as HTMLInputElement).value, () => realOnBlur(ev));\n    };\n\n    // Need to listen for TAB key to apply new value immediately, without delay. Otherwise validation will be triggered with old value.\n    const onKeyDown: OnKeyDownCallable = ev => {\n        ev.persist();\n        if (ev.key === \"Tab\") {\n            applyValue((ev.target as HTMLInputElement).value, () => realOnKeyDown(ev));\n        } else if (ev.key === \"Enter\" && props[\"data-on-enter\"]) {\n            applyValue((ev.target as HTMLInputElement).value, () => realOnKeyDown(ev));\n        } else {\n            realOnKeyDown(ev);\n        }\n    };\n\n    return React.cloneElement(child, { ...props, onBlur, onKeyDown });\n};\n\nexport default DelayedOnChange;\n"],"mappings":"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"}

package/DelayedOnChange/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DelayedOnChange } from "./DelayedOnChange";
+export { default as withDelayedOnChange } from "./withDelayedOnChange";

package/DelayedOnChange/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DelayedOnChange", {
+  enumerable: true,
+  get: function get() {
+    return _DelayedOnChange.default;
+  }
+});
+Object.defineProperty(exports, "withDelayedOnChange", {
+  enumerable: true,
+  get: function get() {
+    return _withDelayedOnChange.default;
+  }
+});
+
+var _DelayedOnChange = _interopRequireDefault(require("./DelayedOnChange"));
+
+var _withDelayedOnChange = _interopRequireDefault(require("./withDelayedOnChange"));

package/DelayedOnChange/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as DelayedOnChange } from \"./DelayedOnChange\";\nexport { default as withDelayedOnChange } from \"./withDelayedOnChange\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA"}

package/DelayedOnChange/withDelayedOnChange.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { DelayedOnChangeProps } from "./DelayedOnChange";
+export default function withDelayedOnChange(): (Component: React.FC<DelayedOnChangeProps>) => (props: DelayedOnChangeProps) => JSX.Element;

package/DelayedOnChange/withDelayedOnChange.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = withDelayedOnChange;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _DelayedOnChange = _interopRequireDefault(require("./DelayedOnChange"));
+
+var _excluded = ["value", "onChange"];
+
+function withDelayedOnChange() {
+  return function decorator(Component) {
+    return function WithDelayedOnChange(props) {
+      var value = props.value,
+          onChange = props.onChange,
+          rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+      return /*#__PURE__*/_react.default.createElement(_DelayedOnChange.default, {
+        value: value,
+        onChange: onChange
+      }, function (_ref) {
+        var value = _ref.value,
+            onChange = _ref.onChange;
+        return /*#__PURE__*/_react.default.createElement(Component, Object.assign({}, rest, {
+          value: value,
+          onChange: onChange
+        }));
+      });
+    };
+  };
+}

package/DelayedOnChange/withDelayedOnChange.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["withDelayedOnChange","decorator","Component","WithDelayedOnChange","props","value","onChange","rest"],"sources":["withDelayedOnChange.tsx"],"sourcesContent":["import React from \"react\";\nimport Delayed, { DelayedOnChangeProps } from \"./DelayedOnChange\";\n\nexport default function withDelayedOnChange() {\n    return function decorator(Component: React.FC<DelayedOnChangeProps>) {\n        return function WithDelayedOnChange(props: DelayedOnChangeProps) {\n            const { value, onChange, ...rest } = props;\n            return (\n                <Delayed value={value} onChange={onChange}>\n                    {({ value, onChange }) => (\n                        <Component {...rest} value={value} onChange={onChange} />\n                    )}\n                </Delayed>\n            );\n        };\n    };\n}\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;AAEe,SAASA,mBAAT,GAA+B;EAC1C,OAAO,SAASC,SAAT,CAAmBC,SAAnB,EAA8D;IACjE,OAAO,SAASC,mBAAT,CAA6BC,KAA7B,EAA0D;MAC7D,IAAQC,KAAR,GAAqCD,KAArC,CAAQC,KAAR;MAAA,IAAeC,QAAf,GAAqCF,KAArC,CAAeE,QAAf;MAAA,IAA4BC,IAA5B,0CAAqCH,KAArC;MACA,oBACI,6BAAC,wBAAD;QAAS,KAAK,EAAEC,KAAhB;QAAuB,QAAQ,EAAEC;MAAjC,GACK;QAAA,IAAGD,KAAH,QAAGA,KAAH;QAAA,IAAUC,QAAV,QAAUA,QAAV;QAAA,oBACG,6BAAC,SAAD,oBAAeC,IAAf;UAAqB,KAAK,EAAEF,KAA5B;UAAmC,QAAQ,EAAEC;QAA7C,GADH;MAAA,CADL,CADJ;IAOH,CATD;EAUH,CAXD;AAYH"}

package/Dialog/Dialog.d.ts

@@ -0,0 +1,80 @@
+/// <reference types="web" />
+import React from "react";
+import { DialogProps as RmwcDialogProps, DialogOnCloseEventT, DialogContentProps as RmwcDialogContentProps, DialogTitleProps as RmwcDialogTitleProps, DialogActionsProps as RmwcDialogActionsProps, DialogButtonProps as RmwcDialogButtonProps } from "@rmwc/dialog";
+export declare type DialogOnClose = (event: DialogOnCloseEventT) => void;
+export interface DialogProps extends RmwcDialogProps {
+    className?: string;
+    style?: React.CSSProperties;
+    open?: boolean;
+    onClose?: (evt: DialogOnCloseEventT) => void;
+    preventOutsideDismiss?: boolean;
+}
+export declare class Dialog extends React.Component<DialogProps> {
+    container: HTMLElement;
+    constructor(props: DialogProps);
+    render(): React.ReactPortal;
+}
+export interface DialogTitleProps extends RmwcDialogTitleProps {
+    /**
+     * Title text.
+     */
+    children: React.ReactNode[] | React.ReactNode;
+}
+/**
+ * Dialog's header, which can accept DialogHeaderTitle component or any other set of components.
+ */
+export declare const DialogTitle: React.FC<DialogTitleProps>;
+export declare type DialogContentProps = RmwcDialogContentProps & {
+    /**
+     * Dialog content.
+     */
+    children: React.ReactNode[] | React.ReactNode;
+    className?: string;
+};
+/**
+ * A simple component for showing dialog's body.
+ */
+export declare const DialogContent: React.FC<DialogContentProps>;
+export interface DialogActionsProps extends RmwcDialogActionsProps {
+    /**
+     * Action buttons.
+     */
+    children: React.ReactNode[] | React.ReactNode;
+    style?: React.CSSProperties;
+}
+/**
+ * Can be used to show accept and cancel buttons.
+ */
+export declare const DialogActions: React.FC<DialogActionsProps>;
+interface DialogButtonProps extends RmwcDialogButtonProps {
+    /**
+     * Callback to execute then button is clicked.
+     */
+    onClick?: (e: React.MouseEvent) => void;
+    className?: string;
+}
+/**
+ * Use this to show a simple button.
+ */
+export declare const DialogButton: React.FC<DialogButtonProps>;
+interface DialogCancelProps extends RmwcDialogButtonProps {
+    /**
+     * Callback to execute then button is clicked.
+     */
+    onClick?: (e: React.MouseEvent) => void;
+}
+/**
+ * Use this to close the dialog without taking any additional action.
+ */
+export declare const DialogCancel: React.FC<DialogCancelProps>;
+interface DialogAcceptProps extends RmwcDialogButtonProps {
+    /**
+     * Callback to execute then button is clicked.
+     */
+    onClick?: (e: React.MouseEvent) => void;
+}
+/**
+ * Use this to close the dialog without taking any additional action.
+ */
+export declare const DialogAccept: React.FC<DialogAcceptProps>;
+export {};

package/Dialog/Dialog.js

@@ -0,0 +1,140 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DialogTitle = exports.DialogContent = exports.DialogCancel = exports.DialogButton = exports.DialogActions = exports.DialogAccept = exports.Dialog = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _dialog = require("@rmwc/dialog");
+
+var _emotion = require("emotion");
+
+var _Helpers = require("../Helpers");
+
+var _excluded = ["children"];
+
+var Dialog = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(Dialog, _React$Component);
+
+  var _super = (0, _createSuper2.default)(Dialog);
+
+  function Dialog(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, Dialog);
+    _this = _super.call(this, props);
+    /**
+     * We can safely cast
+     */
+
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "container", void 0);
+    _this.container = document.getElementById("dialog-container");
+
+    if (!_this.container) {
+      _this.container = document.createElement("div");
+
+      _this.container.setAttribute("id", "dialog-container");
+
+      var container = _this.container;
+      document.body && document.body.appendChild(container);
+    }
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(Dialog, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          children = _this$props.children,
+          props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+      var container = this.container; // Let's pass "permanent" / "persistent" / "temporary" flags as "mode" prop instead.
+
+      return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_dialog.Dialog, (0, _Helpers.getClasses)(props, "webiny-ui-dialog"), children), container);
+    }
+  }]);
+  return Dialog;
+}(_react.default.Component);
+
+exports.Dialog = Dialog;
+
+/**
+ * Dialog's header, which can accept DialogHeaderTitle component or any other set of components.
+ */
+var DialogTitle = function DialogTitle(props) {
+  return /*#__PURE__*/_react.default.createElement(_dialog.DialogTitle, (0, _Helpers.getClasses)(props, "webiny-ui-dialog__title"));
+};
+
+exports.DialogTitle = DialogTitle;
+
+/**
+ * A simple component for showing dialog's body.
+ */
+var DialogContent = function DialogContent(props) {
+  return /*#__PURE__*/_react.default.createElement(_dialog.DialogContent, (0, _Helpers.getClasses)(props, "webiny-ui-dialog__content"));
+};
+
+exports.DialogContent = DialogContent;
+var addMargin = /*#__PURE__*/(0, _emotion.css)("button:last-of-type{margin-left:8px;}label:addMargin;");
+/**
+ * Can be used to show accept and cancel buttons.
+ */
+
+var DialogActions = function DialogActions(props) {
+  return /*#__PURE__*/_react.default.createElement(_dialog.DialogActions, (0, _Helpers.getClasses)(props, [addMargin, "webiny-ui-dialog__actions"]));
+};
+
+exports.DialogActions = DialogActions;
+
+/**
+ * Use this to show a simple button.
+ */
+var DialogButton = function DialogButton(props) {
+  return /*#__PURE__*/_react.default.createElement(_dialog.DialogButton, (0, _Helpers.getClasses)(props, "webiny-ui-dialog__button"));
+};
+
+exports.DialogButton = DialogButton;
+
+/**
+ * Use this to close the dialog without taking any additional action.
+ */
+var DialogCancel = function DialogCancel(props) {
+  return /*#__PURE__*/_react.default.createElement(DialogButton, Object.assign({}, (0, _Helpers.getClasses)(props, "webiny-ui-dialog__button webiny-ui-dialog__button--cancel"), {
+    action: "close",
+    "data-testid": "dialog-cancel"
+  }), props.children);
+};
+
+exports.DialogCancel = DialogCancel;
+
+/**
+ * Use this to close the dialog without taking any additional action.
+ */
+var DialogAccept = function DialogAccept(props) {
+  return /*#__PURE__*/_react.default.createElement(DialogButton, Object.assign({}, (0, _Helpers.getClasses)(props, "webiny-ui-dialog__button webiny-ui-dialog__button--accept"), {
+    action: "accept",
+    "data-testid": "dialog-accept"
+  }), props.children);
+};
+
+exports.DialogAccept = DialogAccept;

package/Dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Dialog","props","container","document","getElementById","createElement","setAttribute","body","appendChild","children","ReactDOM","createPortal","getClasses","React","Component","DialogTitle","DialogContent","addMargin","css","DialogActions","DialogButton","DialogCancel","DialogAccept"],"sources":["Dialog.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport {\n    Dialog as RmwcDialog,\n    DialogProps as RmwcDialogProps,\n    DialogOnCloseEventT,\n    DialogContent as RmwcDialogContent,\n    DialogContentProps as RmwcDialogContentProps,\n    DialogTitle as RmwcDialogTitle,\n    DialogTitleProps as RmwcDialogTitleProps,\n    DialogActions as RmwcDialogActions,\n    DialogActionsProps as RmwcDialogActionsProps,\n    DialogButton as RmwcDialogButton,\n    DialogButtonProps as RmwcDialogButtonProps\n} from \"@rmwc/dialog\";\nimport { css } from \"emotion\";\nimport { getClasses } from \"~/Helpers\";\n\nexport type DialogOnClose = (event: DialogOnCloseEventT) => void;\n\nexport interface DialogProps extends RmwcDialogProps {\n    className?: string;\n\n    // Component's custom in-line styles.\n    style?: React.CSSProperties;\n\n    // If true, dialog will be permanently fixed inside of a view (works for temporary and persistent modes).\n    open?: boolean;\n\n    onClose?: (evt: DialogOnCloseEventT) => void;\n\n    preventOutsideDismiss?: boolean;\n}\n\nexport class Dialog extends React.Component<DialogProps> {\n    container: HTMLElement;\n\n    constructor(props: DialogProps) {\n        super(props);\n        /**\n         * We can safely cast\n         */\n        this.container = document.getElementById(\"dialog-container\") as HTMLElement;\n\n        if (!this.container) {\n            this.container = document.createElement(\"div\");\n            this.container.setAttribute(\"id\", \"dialog-container\");\n            const container = this.container;\n            document.body && document.body.appendChild(container);\n        }\n    }\n\n    public override render() {\n        const { children, ...props } = this.props;\n        const container = this.container;\n\n        // Let's pass \"permanent\" / \"persistent\" / \"temporary\" flags as \"mode\" prop instead.\n        return ReactDOM.createPortal(\n            <RmwcDialog {...getClasses(props, \"webiny-ui-dialog\")}>{children}</RmwcDialog>,\n            container\n        );\n    }\n}\n\nexport interface DialogTitleProps extends RmwcDialogTitleProps {\n    /**\n     * Title text.\n     */\n    children: React.ReactNode[] | React.ReactNode;\n}\n\n/**\n * Dialog's header, which can accept DialogHeaderTitle component or any other set of components.\n */\nexport const DialogTitle: React.FC<DialogTitleProps> = props => (\n    <RmwcDialogTitle {...getClasses(props, \"webiny-ui-dialog__title\")} />\n);\n\nexport type DialogContentProps = RmwcDialogContentProps & {\n    /**\n     * Dialog content.\n     */\n    children: React.ReactNode[] | React.ReactNode;\n\n    className?: string;\n};\n\n/**\n * A simple component for showing dialog's body.\n */\nexport const DialogContent: React.FC<DialogContentProps> = props => (\n    <RmwcDialogContent {...getClasses(props, \"webiny-ui-dialog__content\")} />\n);\n\nexport interface DialogActionsProps extends RmwcDialogActionsProps {\n    /**\n     * Action buttons.\n     */\n    children: React.ReactNode[] | React.ReactNode;\n\n    // Dialog component's custom in-line styles.\n    style?: React.CSSProperties;\n}\n\nconst addMargin = css`\n    button:last-of-type {\n        margin-left: 8px;\n    }\n`;\n\n/**\n * Can be used to show accept and cancel buttons.\n */\nexport const DialogActions: React.FC<DialogActionsProps> = props => (\n    <RmwcDialogActions {...getClasses(props, [addMargin, \"webiny-ui-dialog__actions\"])} />\n);\n\ninterface DialogButtonProps extends RmwcDialogButtonProps {\n    /**\n     * Callback to execute then button is clicked.\n     */\n    onClick?: (e: React.MouseEvent) => void;\n\n    className?: string;\n}\n\n/**\n * Use this to show a simple button.\n */\nexport const DialogButton: React.FC<DialogButtonProps> = props => (\n    <RmwcDialogButton {...getClasses(props, \"webiny-ui-dialog__button\")} />\n);\n\ninterface DialogCancelProps extends RmwcDialogButtonProps {\n    /**\n     * Callback to execute then button is clicked.\n     */\n    onClick?: (e: React.MouseEvent) => void;\n}\n\n/**\n * Use this to close the dialog without taking any additional action.\n */\nexport const DialogCancel: React.FC<DialogCancelProps> = props => {\n    return (\n        <DialogButton\n            {...getClasses(props, \"webiny-ui-dialog__button webiny-ui-dialog__button--cancel\")}\n            action=\"close\"\n            data-testid=\"dialog-cancel\"\n        >\n            {props.children}\n        </DialogButton>\n    );\n};\n\ninterface DialogAcceptProps extends RmwcDialogButtonProps {\n    /**\n     * Callback to execute then button is clicked.\n     */\n    onClick?: (e: React.MouseEvent) => void;\n}\n\n/**\n * Use this to close the dialog without taking any additional action.\n */\nexport const DialogAccept: React.FC<DialogAcceptProps> = props => {\n    return (\n        <DialogButton\n            {...getClasses(props, \"webiny-ui-dialog__button webiny-ui-dialog__button--accept\")}\n            action=\"accept\"\n            data-testid=\"dialog-accept\"\n        >\n            {props.children}\n        </DialogButton>\n    );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAaA;;AACA;;;;IAkBaA,M;;;;;EAGT,gBAAYC,KAAZ,EAAgC;IAAA;;IAAA;IAC5B,0BAAMA,KAAN;IACA;AACR;AACA;;IAJoC;IAK5B,MAAKC,SAAL,GAAiBC,QAAQ,CAACC,cAAT,CAAwB,kBAAxB,CAAjB;;IAEA,IAAI,CAAC,MAAKF,SAAV,EAAqB;MACjB,MAAKA,SAAL,GAAiBC,QAAQ,CAACE,aAAT,CAAuB,KAAvB,CAAjB;;MACA,MAAKH,SAAL,CAAeI,YAAf,CAA4B,IAA5B,EAAkC,kBAAlC;;MACA,IAAMJ,SAAS,GAAG,MAAKA,SAAvB;MACAC,QAAQ,CAACI,IAAT,IAAiBJ,QAAQ,CAACI,IAAT,CAAcC,WAAd,CAA0BN,SAA1B,CAAjB;IACH;;IAZ2B;EAa/B;;;;WAED,kBAAyB;MACrB,kBAA+B,KAAKD,KAApC;MAAA,IAAQQ,QAAR,eAAQA,QAAR;MAAA,IAAqBR,KAArB;MACA,IAAMC,SAAS,GAAG,KAAKA,SAAvB,CAFqB,CAIrB;;MACA,oBAAOQ,iBAAA,CAASC,YAAT,eACH,6BAAC,cAAD,EAAgB,IAAAC,mBAAA,EAAWX,KAAX,EAAkB,kBAAlB,CAAhB,EAAwDQ,QAAxD,CADG,EAEHP,SAFG,CAAP;IAIH;;;EA3BuBW,cAAA,CAAMC,S;;;;AAqClC;AACA;AACA;AACO,IAAMC,WAAuC,GAAG,SAA1CA,WAA0C,CAAAd,KAAK;EAAA,oBACxD,6BAAC,mBAAD,EAAqB,IAAAW,mBAAA,EAAWX,KAAX,EAAkB,yBAAlB,CAArB,CADwD;AAAA,CAArD;;;;AAaP;AACA;AACA;AACO,IAAMe,aAA2C,GAAG,SAA9CA,aAA8C,CAAAf,KAAK;EAAA,oBAC5D,6BAAC,qBAAD,EAAuB,IAAAW,mBAAA,EAAWX,KAAX,EAAkB,2BAAlB,CAAvB,CAD4D;AAAA,CAAzD;;;AAcP,IAAMgB,SAAS,oBAAGC,YAAH,0DAAf;AAMA;AACA;AACA;;AACO,IAAMC,aAA2C,GAAG,SAA9CA,aAA8C,CAAAlB,KAAK;EAAA,oBAC5D,6BAAC,qBAAD,EAAuB,IAAAW,mBAAA,EAAWX,KAAX,EAAkB,CAACgB,SAAD,EAAY,2BAAZ,CAAlB,CAAvB,CAD4D;AAAA,CAAzD;;;;AAaP;AACA;AACA;AACO,IAAMG,YAAyC,GAAG,SAA5CA,YAA4C,CAAAnB,KAAK;EAAA,oBAC1D,6BAAC,oBAAD,EAAsB,IAAAW,mBAAA,EAAWX,KAAX,EAAkB,0BAAlB,CAAtB,CAD0D;AAAA,CAAvD;;;;AAWP;AACA;AACA;AACO,IAAMoB,YAAyC,GAAG,SAA5CA,YAA4C,CAAApB,KAAK,EAAI;EAC9D,oBACI,6BAAC,YAAD,oBACQ,IAAAW,mBAAA,EAAWX,KAAX,EAAkB,2DAAlB,CADR;IAEI,MAAM,EAAC,OAFX;IAGI,eAAY;EAHhB,IAKKA,KAAK,CAACQ,QALX,CADJ;AASH,CAVM;;;;AAmBP;AACA;AACA;AACO,IAAMa,YAAyC,GAAG,SAA5CA,YAA4C,CAAArB,KAAK,EAAI;EAC9D,oBACI,6BAAC,YAAD,oBACQ,IAAAW,mBAAA,EAAWX,KAAX,EAAkB,2DAAlB,CADR;IAEI,MAAM,EAAC,QAFX;IAGI,eAAY;EAHhB,IAKKA,KAAK,CAACQ,QALX,CADJ;AASH,CAVM"}

package/Dialog/Dialog.stories.d.ts

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