@webiny/ui 0.0.0-mt-3 → 0.0.0-unstable.5e7233243f

package/Dialog/Dialog.js

@@ -1,29 +1,51 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+"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 _Helpers = require("../Helpers");
+
 var _excluded = ["children"];
-import * as React from "react";
-import ReactDOM from "react-dom";
-import { Dialog as RmwcDialog, DialogContent as RmwcDialogContent, DialogTitle as RmwcDialogTitle, DialogActions as RmwcDialogActions, DialogButton as RmwcDialogButton } from "@rmwc/dialog";
-import { getClasses } from "../Helpers";
-export var Dialog = /*#__PURE__*/function (_React$Component) {
-  _inherits(Dialog, _React$Component);
 
-  var _super = _createSuper(Dialog);
+var Dialog = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(Dialog, _React$Component);
+
+  var _super = (0, _createSuper2.default)(Dialog);
 
   function Dialog(props) {
     var _this;
 
-    _classCallCheck(this, Dialog);
-
+    (0, _classCallCheck2.default)(this, Dialog);
     _this = _super.call(this, props);
+    /**
+     * We can safely cast
+     */
 
-    _defineProperty(_assertThisInitialized(_this), "container", void 0);
-
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "container", void 0);
     _this.container = document.getElementById("dialog-container");
 
     if (!_this.container) {
@@ -38,64 +60,78 @@ export var Dialog = /*#__PURE__*/function (_React$Component) {
     return _this;
   }
 
-  _createClass(Dialog, [{
+  (0, _createClass2.default)(Dialog, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
           children = _this$props.children,
-          props = _objectWithoutProperties(_this$props, _excluded);
-
+          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.createPortal( /*#__PURE__*/React.createElement(RmwcDialog, getClasses(props, "webiny-ui-dialog"), children), container);
+      return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_dialog.Dialog, (0, _Helpers.getClasses)(props, "webiny-ui-dialog"), children), container);
     }
   }]);
-
   return Dialog;
-}(React.Component);
+}(_react.default.Component);
+
+exports.Dialog = Dialog;
 
 /**
  * Dialog's header, which can accept DialogHeaderTitle component or any other set of components.
  */
-export var DialogTitle = function DialogTitle(props) {
-  return /*#__PURE__*/React.createElement(RmwcDialogTitle, getClasses(props, "webiny-ui-dialog__title"));
+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.
  */
-export var DialogContent = function DialogContent(props) {
-  return /*#__PURE__*/React.createElement(RmwcDialogContent, getClasses(props, "webiny-ui-dialog__content"));
+var DialogContent = function DialogContent(props) {
+  return /*#__PURE__*/_react.default.createElement(_dialog.DialogContent, (0, _Helpers.getClasses)(props, "webiny-ui-dialog__content"));
 };
 
+exports.DialogContent = DialogContent;
+
 /**
  * Can be used to show accept and cancel buttons.
  */
-export var DialogActions = function DialogActions(props) {
-  return /*#__PURE__*/React.createElement(RmwcDialogActions, getClasses(props, "webiny-ui-dialog__actions"));
+var DialogActions = function DialogActions(props) {
+  return /*#__PURE__*/_react.default.createElement(_dialog.DialogActions, (0, _Helpers.getClasses)(props, "webiny-ui-dialog__actions"));
 };
 
+exports.DialogActions = DialogActions;
+
 /**
  * Use this to show a simple button.
  */
-export var DialogButton = function DialogButton(props) {
-  return /*#__PURE__*/React.createElement(RmwcDialogButton, getClasses(props, "webiny-ui-dialog__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.
  */
-export var DialogCancel = function DialogCancel(props) {
-  return /*#__PURE__*/React.createElement(DialogButton, Object.assign({}, getClasses(props, "webiny-ui-dialog__button webiny-ui-dialog__button--cancel"), {
-    action: "close"
+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.
  */
-export var DialogAccept = function DialogAccept(props) {
-  return /*#__PURE__*/React.createElement(DialogButton, Object.assign({}, getClasses(props, "webiny-ui-dialog__button webiny-ui-dialog__button--accept"), {
-    action: "accept"
+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","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 { 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\n/**\n * Can be used to show accept and cancel buttons.\n */\nexport const DialogActions: React.FC<DialogActionsProps> = props => (\n    <RmwcDialogActions {...getClasses(props, \"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;;;;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;AACA;AACA;AACO,IAAMgB,aAA2C,GAAG,SAA9CA,aAA8C,CAAAhB,KAAK;EAAA,oBAC5D,6BAAC,qBAAD,EAAuB,IAAAW,mBAAA,EAAWX,KAAX,EAAkB,2BAAlB,CAAvB,CAD4D;AAAA,CAAzD;;;;AAaP;AACA;AACA;AACO,IAAMiB,YAAyC,GAAG,SAA5CA,YAA4C,CAAAjB,KAAK;EAAA,oBAC1D,6BAAC,oBAAD,EAAsB,IAAAW,mBAAA,EAAWX,KAAX,EAAkB,0BAAlB,CAAtB,CAD0D;AAAA,CAAvD;;;;AAWP;AACA;AACA;AACO,IAAMkB,YAAyC,GAAG,SAA5CA,YAA4C,CAAAlB,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,IAAMW,YAAyC,GAAG,SAA5CA,YAA4C,CAAAnB,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.js

@@ -1,30 +1,40 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
-import readme from "./../Dialog/README.md";
-import { withKnobs, boolean } from "@storybook/addon-knobs";
-import { Dialog, DialogButton, DialogAccept, DialogCancel, DialogActions, DialogTitle, DialogContent } from ".";
-var story = storiesOf("Components/Dialog", module);
-story.addDecorator(withKnobs);
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _Story = require("@webiny/storybook-utils/Story");
+
+var _README = _interopRequireDefault(require("./../Dialog/README.md"));
+
+var _addonKnobs = require("@storybook/addon-knobs");
+
+var _ = require(".");
+
+var story = (0, _react2.storiesOf)("Components/Dialog", module);
+story.addDecorator(_addonKnobs.withKnobs);
 story.add("usage", function () {
-  var open = boolean("Open", false);
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
+  var open = (0, _addonKnobs.boolean)("Open", false);
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
     title: "dialog"
-  }, /*#__PURE__*/React.createElement(StorySandboxExample, {
+  }, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {
     title: "A list with all possible options"
-  }, "Toggle ", /*#__PURE__*/React.createElement("code", null, "open"), " prop via the bottom knobs.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "Note that instead of using ", /*#__PURE__*/React.createElement("code", null, "DialogFooter.Button"), " with", " ", /*#__PURE__*/React.createElement("code", null, "accept"), " or ", /*#__PURE__*/React.createElement("code", null, "cancel"), " prop, you can use a shorter", " ", /*#__PURE__*/React.createElement("code", null, "DialogAccept"), " and ", /*#__PURE__*/React.createElement("code", null, "DialogCancel"), " components respectively.", /*#__PURE__*/React.createElement(Dialog, {
+  }, "Toggle ", /*#__PURE__*/_react.default.createElement("code", null, "open"), " prop via the bottom knobs.", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), "Note that instead of using ", /*#__PURE__*/_react.default.createElement("code", null, "DialogFooter.Button"), " with", " ", /*#__PURE__*/_react.default.createElement("code", null, "accept"), " or ", /*#__PURE__*/_react.default.createElement("code", null, "cancel"), " prop, you can use a shorter", " ", /*#__PURE__*/_react.default.createElement("code", null, "DialogAccept"), " and ", /*#__PURE__*/_react.default.createElement("code", null, "DialogCancel"), " components respectively.", /*#__PURE__*/_react.default.createElement(_.Dialog, {
     open: open
-  }, /*#__PURE__*/React.createElement(DialogTitle, null, "Delete confirmation"), /*#__PURE__*/React.createElement(DialogContent, null, "Are you sure you want to delete?"), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(DialogCancel, {
+  }, /*#__PURE__*/_react.default.createElement(_.DialogTitle, null, "Delete confirmation"), /*#__PURE__*/_react.default.createElement(_.DialogContent, null, "Are you sure you want to delete?"), /*#__PURE__*/_react.default.createElement(_.DialogActions, null, /*#__PURE__*/_react.default.createElement(_.DialogCancel, {
     onClick: function onClick() {
       return console.log("Cancel");
     }
-  }, "Cancel"), /*#__PURE__*/React.createElement(DialogAccept, {
+  }, "Cancel"), /*#__PURE__*/_react.default.createElement(_.DialogAccept, {
     onClick: function onClick() {
       return console.log("Accept");
     }
-  }, "OK")))), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                    <Dialog open={".concat(open, "}>\n                        <DialogTitle>\n                            Delete confirmation\n                        </DialogTitle>\n                        <DialogBody>Are you sure you want to delete?</DialogBody>\n                        <DialogFooter>\n                            <DialogCancel onClick={() => console.log(\"Cancel\")}>Cancel</DialogCancel>\n                            <DialogAccept onClick={() => console.log(\"Accept\")}>OK</DialogAccept>\n                        </DialogFooter>\n                    </Dialog>\n                    "))));
+  }, "OK")))), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                    <Dialog open={".concat(open, "}>\n                        <DialogTitle>\n                            Delete confirmation\n                        </DialogTitle>\n                        <DialogBody>Are you sure you want to delete?</DialogBody>\n                        <DialogFooter>\n                            <DialogCancel onClick={() => console.log(\"Cancel\")}>Cancel</DialogCancel>\n                            <DialogAccept onClick={() => console.log(\"Accept\")}>OK</DialogAccept>\n                        </DialogFooter>\n                    </Dialog>\n                    "))));
 }, {
   info: {
-    propTables: [Dialog, DialogButton, DialogAccept, DialogCancel, DialogActions, DialogTitle, DialogContent]
+    propTables: [_.Dialog, _.DialogButton, _.DialogAccept, _.DialogCancel, _.DialogActions, _.DialogTitle, _.DialogContent]
   }
 });

package/Dialog/Dialog.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","open","boolean","readme","console","log","info","propTables","Dialog","DialogButton","DialogAccept","DialogCancel","DialogActions","DialogTitle","DialogContent"],"sources":["Dialog.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Dialog/README.md\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\n\nimport {\n    Dialog,\n    DialogButton,\n    DialogAccept,\n    DialogCancel,\n    DialogActions,\n    DialogTitle,\n    DialogContent\n} from \".\";\n\nconst story = storiesOf(\"Components/Dialog\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const open = boolean(\"Open\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"dialog\"}>\n                    <StorySandboxExample title={\"A list with all possible options\"}>\n                        Toggle <code>open</code> prop via the bottom knobs.\n                        <br />\n                        <br />\n                        Note that instead of using <code>DialogFooter.Button</code> with{\" \"}\n                        <code>accept</code> or <code>cancel</code> prop, you can use a shorter{\" \"}\n                        <code>DialogAccept</code> and <code>DialogCancel</code> components\n                        respectively.\n                        <Dialog open={open}>\n                            <DialogTitle>Delete confirmation</DialogTitle>\n                            <DialogContent>Are you sure you want to delete?</DialogContent>\n                            <DialogActions>\n                                <DialogCancel onClick={() => console.log(\"Cancel\")}>\n                                    Cancel\n                                </DialogCancel>\n                                <DialogAccept onClick={() => console.log(\"Accept\")}>\n                                    OK\n                                </DialogAccept>\n                            </DialogActions>\n                        </Dialog>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Dialog open={${open}}>\n                        <DialogTitle>\n                            Delete confirmation\n                        </DialogTitle>\n                        <DialogBody>Are you sure you want to delete?</DialogBody>\n                        <DialogFooter>\n                            <DialogCancel onClick={() => console.log(\"Cancel\")}>Cancel</DialogCancel>\n                            <DialogAccept onClick={() => console.log(\"Accept\")}>OK</DialogAccept>\n                        </DialogFooter>\n                    </Dialog>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    {\n        info: {\n            propTables: [\n                Dialog,\n                DialogButton,\n                DialogAccept,\n                DialogCancel,\n                DialogActions,\n                DialogTitle,\n                DialogContent\n            ]\n        }\n    }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AAEA;;AAUA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,mBAAV,EAA+BC,MAA/B,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,IAAI,GAAG,IAAAC,mBAAA,EAAQ,MAAR,EAAgB,KAAhB,CAAb;EAEA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,2BACW,kDADX,8CAEI,wCAFJ,eAGI,wCAHJ,8CAI+B,iEAJ/B,WAIqE,GAJrE,eAKI,oDALJ,uBAK2B,oDAL3B,kCAK2E,GAL3E,eAMI,0DANJ,wBAMkC,0DANlC,4CAQI,6BAAC,QAAD;IAAQ,IAAI,EAAEF;EAAd,gBACI,6BAAC,aAAD,8BADJ,eAEI,6BAAC,eAAD,2CAFJ,eAGI,6BAAC,eAAD,qBACI,6BAAC,cAAD;IAAc,OAAO,EAAE;MAAA,OAAMG,OAAO,CAACC,GAAR,CAAY,QAAZ,CAAN;IAAA;EAAvB,YADJ,eAII,6BAAC,cAAD;IAAc,OAAO,EAAE;MAAA,OAAMD,OAAO,CAACC,GAAR,CAAY,QAAZ,CAAN;IAAA;EAAvB,QAJJ,CAHJ,CARJ,CADJ,eAsBI,6BAAC,uBAAD,sDAEgBJ,IAFhB,+iBAtBJ,CAFJ,CADJ;AA0CH,CA/CL,EAgDI;EACIK,IAAI,EAAE;IACFC,UAAU,EAAE,CACRC,QADQ,EAERC,cAFQ,EAGRC,cAHQ,EAIRC,cAJQ,EAKRC,eALQ,EAMRC,aANQ,EAORC,eAPQ;EADV;AADV,CAhDJ"}

package/Dialog/index.js

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

package/Dialog/index.js.map

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

package/Drawer/Drawer.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { DrawerProps as RmwcDrawerProps, DrawerHeaderProps as RmwcDrawerHeaderProps, DrawerContentProps as RmwcDrawerContentProps } from "@rmwc/drawer";
 declare type DrawerHeaderProps = RmwcDrawerHeaderProps & {
     children: any;

package/Drawer/Drawer.js

@@ -1,25 +1,39 @@
-import * as React from "react";
-import { Drawer as RmwcDrawer, DrawerContent as RmwcDrawerContent, DrawerHeader as RmwcDrawerHeader } from "@rmwc/drawer";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerHeader = exports.DrawerContent = exports.Drawer = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _drawer = require("@rmwc/drawer");
 
 /**
  * Shows header of the drawer.
  */
 var DrawerHeader = function DrawerHeader(props) {
-  return /*#__PURE__*/React.createElement(RmwcDrawerHeader, props);
+  return /*#__PURE__*/_react.default.createElement(_drawer.DrawerHeader, props);
 };
 
+exports.DrawerHeader = DrawerHeader;
+
 /**
  * Shows drawer content. It can be anything, but commonly a List component would suffice here.
  */
 var DrawerContent = function DrawerContent(props) {
-  return /*#__PURE__*/React.createElement(RmwcDrawerContent, props);
+  return /*#__PURE__*/_react.default.createElement(_drawer.DrawerContent, props);
 };
 
+exports.DrawerContent = DrawerContent;
+
 /**
  * Use Drawer component to display navigation for the whole app or just a small section of it.
  */
 var Drawer = function Drawer(props) {
-  return /*#__PURE__*/React.createElement(RmwcDrawer, props);
+  return /*#__PURE__*/_react.default.createElement(_drawer.Drawer, props);
 };
 
-export { Drawer, DrawerHeader, DrawerContent };
+exports.Drawer = Drawer;

package/Drawer/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DrawerHeader","props","DrawerContent","Drawer"],"sources":["Drawer.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    Drawer as RmwcDrawer,\n    DrawerContent as RmwcDrawerContent,\n    DrawerHeader as RmwcDrawerHeader,\n    DrawerProps as RmwcDrawerProps,\n    DrawerHeaderProps as RmwcDrawerHeaderProps,\n    DrawerContentProps as RmwcDrawerContentProps\n} from \"@rmwc/drawer\";\n\ntype DrawerHeaderProps = RmwcDrawerHeaderProps & {\n    children: any;\n    className?: string;\n};\n\n/**\n * Shows header of the drawer.\n */\nconst DrawerHeader = (props: DrawerHeaderProps) => <RmwcDrawerHeader {...props} />;\n\nexport type DrawerContentProps = RmwcDrawerContentProps & {\n    /**\n     * Drawer direction.\n     */\n    dir?: string;\n    /**\n     * Drawer content.\n     */\n    children: React.ReactNode;\n\n    /**\n     * CSS class name\n     */\n    className?: string;\n};\n\n/**\n * Shows drawer content. It can be anything, but commonly a List component would suffice here.\n */\nconst DrawerContent = (props: DrawerContentProps) => <RmwcDrawerContent {...props} />;\n\ntype DrawerProps = RmwcDrawerProps & {\n    /**\n     * Drawer direction.\n     */\n    dir?: string;\n    /**\n     * Drawer content.\n     */\n    children: React.ReactNode;\n\n    /**\n     * CSS class name\n     */\n    className?: string;\n};\n/**\n * Use Drawer component to display navigation for the whole app or just a small section of it.\n */\nconst Drawer = (props: DrawerProps) => {\n    return <RmwcDrawer {...props} />;\n};\n\nexport { Drawer, DrawerHeader, DrawerContent };\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAcA;AACA;AACA;AACA,IAAMA,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD;EAAA,oBAA8B,6BAAC,oBAAD,EAAsBA,KAAtB,CAA9B;AAAA,CAArB;;;;AAkBA;AACA;AACA;AACA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACD,KAAD;EAAA,oBAA+B,6BAAC,qBAAD,EAAuBA,KAAvB,CAA/B;AAAA,CAAtB;;;;AAiBA;AACA;AACA;AACA,IAAME,MAAM,GAAG,SAATA,MAAS,CAACF,KAAD,EAAwB;EACnC,oBAAO,6BAAC,cAAD,EAAgBA,KAAhB,CAAP;AACH,CAFD"}

package/Drawer/Drawer.stories.js

@@ -1,23 +1,34 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
-import { List, ListItem } from "./../List";
-import readme from "./../Drawer/README.md";
-import { withKnobs, boolean } from "@storybook/addon-knobs";
-import { Drawer, DrawerHeader, DrawerContent } from "./Drawer";
-var story = storiesOf("Components/Drawer", module);
-story.addDecorator(withKnobs);
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _Story = require("@webiny/storybook-utils/Story");
+
+var _List = require("./../List");
+
+var _README = _interopRequireDefault(require("./../Drawer/README.md"));
+
+var _addonKnobs = require("@storybook/addon-knobs");
+
+var _Drawer = require("./Drawer");
+
+var story = (0, _react2.storiesOf)("Components/Drawer", module);
+story.addDecorator(_addonKnobs.withKnobs);
 story.add("usage", function () {
-  var open = boolean("Open", true);
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
+  var open = (0, _addonKnobs.boolean)("Open", true);
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
     title: "drawer"
-  }, /*#__PURE__*/React.createElement(StorySandboxExample, {
+  }, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {
     title: "A list with all possible options"
-  }, /*#__PURE__*/React.createElement(Drawer, {
+  }, /*#__PURE__*/_react.default.createElement(_Drawer.Drawer, {
     open: open
-  }, /*#__PURE__*/React.createElement(DrawerHeader, null, "Main Menu"), /*#__PURE__*/React.createElement(DrawerContent, null, /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(ListItem, null, "Users"), /*#__PURE__*/React.createElement(ListItem, null, "Companies"), /*#__PURE__*/React.createElement(ListItem, null, "Brands"), /*#__PURE__*/React.createElement(ListItem, null, "ACL"), /*#__PURE__*/React.createElement(ListItem, null, "Settings"))))), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                    <Drawer>\n                        <DrawerHeader>Main Menu</DrawerHeader>\n                        <DrawerContent>\n                            <List>\n                                <ListItem>Users</ListItem>\n                                <ListItem>Companies</ListItem>\n                                <ListItem>Brands</ListItem>\n                                <ListItem>ACL</ListItem>\n                                <ListItem>Settings</ListItem>\n                            </List>\n                        </DrawerContent>\n                    </Drawer>\n                    ")));
+  }, /*#__PURE__*/_react.default.createElement(_Drawer.DrawerHeader, null, "Main Menu"), /*#__PURE__*/_react.default.createElement(_Drawer.DrawerContent, null, /*#__PURE__*/_react.default.createElement(_List.List, null, /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Users"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Companies"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Brands"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "ACL"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Settings"))))), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                    <Drawer>\n                        <DrawerHeader>Main Menu</DrawerHeader>\n                        <DrawerContent>\n                            <List>\n                                <ListItem>Users</ListItem>\n                                <ListItem>Companies</ListItem>\n                                <ListItem>Brands</ListItem>\n                                <ListItem>ACL</ListItem>\n                                <ListItem>Settings</ListItem>\n                            </List>\n                        </DrawerContent>\n                    </Drawer>\n                    ")));
 }, {
   info: {
-    propTables: [Drawer, DrawerHeader, DrawerContent]
+    propTables: [_Drawer.Drawer, _Drawer.DrawerHeader, _Drawer.DrawerContent]
   }
 });

package/Drawer/Drawer.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","open","boolean","readme","info","propTables","Drawer","DrawerHeader","DrawerContent"],"sources":["Drawer.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport { List, ListItem } from \"./../List\";\n\nimport readme from \"./../Drawer/README.md\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport { Drawer, DrawerHeader, DrawerContent } from \"./Drawer\";\n\nconst story = storiesOf(\"Components/Drawer\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const open = boolean(\"Open\", true);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"drawer\"}>\n                    <StorySandboxExample title={\"A list with all possible options\"}>\n                        <Drawer open={open}>\n                            <DrawerHeader>Main Menu</DrawerHeader>\n                            <DrawerContent>\n                                <List>\n                                    <ListItem>Users</ListItem>\n                                    <ListItem>Companies</ListItem>\n                                    <ListItem>Brands</ListItem>\n                                    <ListItem>ACL</ListItem>\n                                    <ListItem>Settings</ListItem>\n                                </List>\n                            </DrawerContent>\n                        </Drawer>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Drawer>\n                        <DrawerHeader>Main Menu</DrawerHeader>\n                        <DrawerContent>\n                            <List>\n                                <ListItem>Users</ListItem>\n                                <ListItem>Companies</ListItem>\n                                <ListItem>Brands</ListItem>\n                                <ListItem>ACL</ListItem>\n                                <ListItem>Settings</ListItem>\n                            </List>\n                        </DrawerContent>\n                    </Drawer>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Drawer, DrawerHeader, DrawerContent] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AAEA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,mBAAV,EAA+BC,MAA/B,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,IAAI,GAAG,IAAAC,mBAAA,EAAQ,MAAR,EAAgB,IAAhB,CAAb;EAEA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI,6BAAC,cAAD;IAAQ,IAAI,EAAEF;EAAd,gBACI,6BAAC,oBAAD,oBADJ,eAEI,6BAAC,qBAAD,qBACI,6BAAC,UAAD,qBACI,6BAAC,cAAD,gBADJ,eAEI,6BAAC,cAAD,oBAFJ,eAGI,6BAAC,cAAD,iBAHJ,eAII,6BAAC,cAAD,cAJJ,eAKI,6BAAC,cAAD,mBALJ,CADJ,CAFJ,CADJ,CADJ,eAeI,6BAAC,uBAAD,4mBAfJ,CAFJ,CADJ;AAqCH,CA1CL,EA2CI;EAAEG,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,cAAD,EAASC,oBAAT,EAAuBC,qBAAvB;EAAd;AAAR,CA3CJ"}

package/Drawer/index.js

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

package/Drawer/index.js.map

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

package/DynamicFieldset/Fieldset.d.ts

@@ -1,28 +1,38 @@
-import * as React from "react";
+import React from "react";
+interface ChildrenRenderPropRowCallableParams {
+    index: number;
+    data: any;
+}
+interface ChildrenRenderPropRowCallable {
+    (params: ChildrenRenderPropRowCallableParams): React.ReactNode;
+}
+interface ChildrenRenderPropHeaderCallable {
+    (): React.ReactNode;
+}
+interface ChildrenRenderPropEmptyCallable {
+    (): React.ReactNode;
+}
 interface ChildrenRenderProp {
     actions: {
         add: Function;
         remove: Function;
     };
-    header: Function;
-    row: Function;
-    empty: Function;
+    header: (cb: ChildrenRenderPropHeaderCallable) => React.ReactNode;
+    row: (cb: ChildrenRenderPropRowCallable) => React.ReactNode;
+    empty: (cb: ChildrenRenderPropEmptyCallable) => React.ReactNode;
 }
-declare type FieldsetProps = {
-    value?: Array<Object>;
+interface FieldsetProps {
+    value?: any[];
     description?: string;
     validation?: {
         isValid: null | boolean;
         message?: string;
     };
-    onChange?: Function;
+    onChange: Function;
     children: (props: ChildrenRenderProp) => React.ReactNode;
-};
+}
 declare class Fieldset extends React.Component<FieldsetProps> {
-    static defaultProps: {
-        value: any[];
-        description: any;
-    };
+    static defaultProps: Partial<FieldsetProps>;
     header: React.ReactNode;
     rows: React.ReactNode;
     empty: React.ReactNode;
@@ -32,10 +42,10 @@ declare class Fieldset extends React.Component<FieldsetProps> {
     };
     removeData: (index: number) => void;
     addData: (index?: number) => void;
-    renderHeader: (cb: () => React.ReactNode) => void;
-    renderRow: (cb: (params: Object) => React.ReactNode) => void;
-    renderEmpty: (cb: () => React.ReactNode) => void;
-    renderComponent(): {};
+    renderHeader: (cb: () => React.ReactNode) => React.ReactNode;
+    renderRow: (cb: ChildrenRenderPropRowCallable) => React.ReactNode;
+    renderEmpty: (cb: () => React.ReactNode) => React.ReactNode;
+    renderComponent(): React.ReactNode;
     render(): JSX.Element;
 }
 export default Fieldset;