@webiny/ui 0.0.0-mt-2 → 0.0.0-unstable.1145e7667f

package/Snackbar/Snackbar.stories.js

@@ -1,48 +1,41 @@
-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";
-import * as React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
-import readme from "./../Snackbar/README.md";
-import { withKnobs, boolean } from "@storybook/addon-knobs";
-import { ButtonPrimary } from "./../Button";
-import { Snackbar } from "./Snackbar";
-var story = storiesOf("Components/Snackbar", module);
-story.addDecorator(withKnobs);
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+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 _react2 = require("@storybook/react");
+var _Story = require("@webiny/storybook-utils/Story");
+var _README = _interopRequireDefault(require("./../Snackbar/README.md"));
+var _addonKnobs = require("@storybook/addon-knobs");
+var _Button = require("./../Button");
+var _Snackbar = require("./Snackbar");
+var story = (0, _react2.storiesOf)("Components/Snackbar", module);
+story.addDecorator(_addonKnobs.withKnobs);
 var SnackbarContainer = /*#__PURE__*/function (_React$Component) {
-  _inherits(SnackbarContainer, _React$Component);
-
-  var _super = _createSuper(SnackbarContainer);
-
+  (0, _inherits2.default)(SnackbarContainer, _React$Component);
+  var _super = (0, _createSuper2.default)(SnackbarContainer);
   function SnackbarContainer() {
     var _this;
-
-    _classCallCheck(this, SnackbarContainer);
-
+    (0, _classCallCheck2.default)(this, SnackbarContainer);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       show: false
     });
-
     return _this;
   }
-
-  _createClass(SnackbarContainer, [{
+  (0, _createClass2.default)(SnackbarContainer, [{
     key: "render",
     value: function render() {
       var _this2 = this;
-
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Snackbar, {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Snackbar.Snackbar, {
         open: this.state.show,
         onClose: function onClose() {
           return _this2.setState({
@@ -52,7 +45,7 @@ var SnackbarContainer = /*#__PURE__*/function (_React$Component) {
         message: "This is a message.",
         leading: this.props.leading,
         action: "Something"
-      }), /*#__PURE__*/React.createElement(ButtonPrimary, {
+      }), /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
         onClick: function onClick() {
           return _this2.setState({
             show: true
@@ -61,17 +54,15 @@ var SnackbarContainer = /*#__PURE__*/function (_React$Component) {
       }, "Show message"));
     }
   }]);
-
   return SnackbarContainer;
-}(React.Component);
-
+}(_react.default.Component);
 story.add("usage", function () {
-  var leading = boolean("leading", false);
-  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(SnackbarContainer, {
+  var leading = (0, _addonKnobs.boolean)("leading", false);
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, null, /*#__PURE__*/_react.default.createElement(SnackbarContainer, {
     leading: true
-  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                        <div>\n                             <Snackbar\n                                open={this.state.show}\n                                leading={".concat(leading, "}\n                                onHide={() => this.setState({ show: false })}\n                                message=\"This is a message.\"\n                            />\n                            <ButtonPrimary onClick={() => this.setState({ show: true })}>\n                                Show message\n                            </ButtonPrimary>\n                        </div>\n                    "))));
+  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                        <div>\n                             <Snackbar\n                                open={this.state.show}\n                                leading={".concat(leading, "}\n                                onHide={() => this.setState({ show: false })}\n                                message=\"This is a message.\"\n                            />\n                            <ButtonPrimary onClick={() => this.setState({ show: true })}>\n                                Show message\n                            </ButtonPrimary>\n                        </div>\n                    "))));
 }, {
   info: {
-    propTables: [Snackbar]
+    propTables: [_Snackbar.Snackbar]
   }
 });

package/Snackbar/Snackbar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","SnackbarContainer","show","state","setState","props","leading","React","Component","add","boolean","readme","info","propTables","Snackbar"],"sources":["Snackbar.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 \"./../Snackbar/README.md\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport { ButtonPrimary } from \"./../Button\";\nimport { Snackbar } from \"./Snackbar\";\n\nconst story = storiesOf(\"Components/Snackbar\", module);\nstory.addDecorator(withKnobs);\n\nclass SnackbarContainer extends React.Component<{ leading: boolean }, { show: boolean }> {\n    public override state = {\n        show: false\n    };\n\n    public override render() {\n        return (\n            <React.Fragment>\n                <Snackbar\n                    open={this.state.show}\n                    onClose={() => this.setState({ show: false })}\n                    message=\"This is a message.\"\n                    leading={this.props.leading}\n                    action=\"Something\"\n                />\n                <ButtonPrimary onClick={() => this.setState({ show: true })}>\n                    Show message\n                </ButtonPrimary>\n            </React.Fragment>\n        );\n    }\n}\n\nstory.add(\n    \"usage\",\n    () => {\n        const leading = boolean(\"leading\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <SnackbarContainer leading />\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <div>\n                             <Snackbar\n                                open={this.state.show}\n                                leading={${leading}}\n                                onHide={() => this.setState({ show: false })}\n                                message=\"This is a message.\"\n                            />\n                            <ButtonPrimary onClick={() => this.setState({ show: true })}>\n                                Show message\n                            </ButtonPrimary>\n                        </div>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Snackbar] } }\n);\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AAOA;AACA;AACA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,qBAAqB,EAAEC,MAAM,CAAC;AACtDF,KAAK,CAACG,YAAY,CAACC,qBAAS,CAAC;AAAC,IAExBC,iBAAiB;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;MAAA;IAAA;IAAA;IAAA,oFACK;MACpBC,IAAI,EAAE;IACV,CAAC;IAAA;EAAA;EAAA;IAAA;IAAA,OAED,kBAAyB;MAAA;MACrB,oBACI,6BAAC,cAAK,CAAC,QAAQ,qBACX,6BAAC,kBAAQ;QACL,IAAI,EAAE,IAAI,CAACC,KAAK,CAACD,IAAK;QACtB,OAAO,EAAE;UAAA,OAAM,MAAI,CAACE,QAAQ,CAAC;YAAEF,IAAI,EAAE;UAAM,CAAC,CAAC;QAAA,CAAC;QAC9C,OAAO,EAAC,oBAAoB;QAC5B,OAAO,EAAE,IAAI,CAACG,KAAK,CAACC,OAAQ;QAC5B,MAAM,EAAC;MAAW,EACpB,eACF,6BAAC,qBAAa;QAAC,OAAO,EAAE;UAAA,OAAM,MAAI,CAACF,QAAQ,CAAC;YAAEF,IAAI,EAAE;UAAK,CAAC,CAAC;QAAA;MAAC,GAAC,cAE7D,CAAgB,CACH;IAEzB;EAAC;EAAA;AAAA,EApB2BK,cAAK,CAACC,SAAS;AAuB/CZ,KAAK,CAACa,GAAG,CACL,OAAO,EACP,YAAM;EACF,IAAMH,OAAO,GAAG,IAAAI,mBAAO,EAAC,SAAS,EAAE,KAAK,CAAC;EAEzC,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB,qBAChB,6BAAC,iBAAiB;IAAC,OAAO;EAAA,EAAG,CACX,eACtB,6BAAC,uBAAgB,4LAKML,OAAO,maASX,CACR,CACX;AAEhB,CAAC,EACD;EAAEM,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,kBAAQ;EAAE;AAAE,CAAC,CACvC"}

package/Snackbar/index.js

@@ -1 +1,18 @@
-export { Snackbar, SnackbarAction } from "./Snackbar";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Snackbar", {
+  enumerable: true,
+  get: function get() {
+    return _Snackbar.Snackbar;
+  }
+});
+Object.defineProperty(exports, "SnackbarAction", {
+  enumerable: true,
+  get: function get() {
+    return _Snackbar.SnackbarAction;
+  }
+});
+var _Snackbar = require("./Snackbar");

package/Snackbar/index.js.map

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

package/Switch/Switch.d.ts

@@ -1,7 +1,8 @@
-import * as React from "react";
+/// <reference types="web" />
+import React from "react";
 import { SwitchProps } from "@rmwc/switch";
 import { FormComponentProps } from "../types";
-declare type Props = FormComponentProps & SwitchProps & {
+declare type Props = Omit<SwitchProps, "value"> & FormComponentProps<boolean> & {
     description?: string;
     className?: string;
 };
@@ -9,11 +10,6 @@ declare type Props = FormComponentProps & SwitchProps & {
  * Switch component can be used to store simple boolean values.
  */
 declare class Switch extends React.Component<Props> {
-    static defaultProps: {
-        validation: {
-            isValid: any;
-        };
-    };
     static rmwcProps: string[];
     onChange: (e: React.SyntheticEvent<HTMLElement>) => void;
     render(): JSX.Element;

package/Switch/Switch.js

@@ -1,67 +1,59 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-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";
-import * as React from "react";
-import { Switch as RmwcSwitch } from "@rmwc/switch";
-import pick from "lodash/pick";
-import { FormElementMessage } from "../FormElementMessage";
-import { getClasses } from "../Helpers";
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Switch = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+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 _switch = require("@rmwc/switch");
+var _pick = _interopRequireDefault(require("lodash/pick"));
+var _FormElementMessage = require("../FormElementMessage");
+var _Helpers = require("../Helpers");
 /**
  * Switch component can be used to store simple boolean values.
  */
 var Switch = /*#__PURE__*/function (_React$Component) {
-  _inherits(Switch, _React$Component);
-
-  var _super = _createSuper(Switch);
-
+  (0, _inherits2.default)(Switch, _React$Component);
+  var _super = (0, _createSuper2.default)(Switch);
   function Switch() {
     var _this;
-
-    _classCallCheck(this, Switch);
-
+    (0, _classCallCheck2.default)(this, Switch);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "onChange", function (e) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onChange", function (e) {
       _this.props.onChange && _this.props.onChange(e.target.checked);
     });
-
     return _this;
   }
-
-  _createClass(Switch, [{
+  (0, _createClass2.default)(Switch, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          value = _this$props.value,
-          description = _this$props.description,
-          validation = _this$props.validation;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RmwcSwitch, Object.assign({}, getClasses(_objectSpread({}, pick(this.props, Switch.rmwcProps)), "webiny-ui-switch"), {
+        value = _this$props.value,
+        description = _this$props.description,
+        validation = _this$props.validation;
+      var _ref = validation || {},
+        validationIsValid = _ref.isValid,
+        validationMessage = _ref.message;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_switch.Switch, Object.assign({}, (0, _Helpers.getClasses)((0, _objectSpread2.default)({}, (0, _pick.default)(this.props, Switch.rmwcProps)), "webiny-ui-switch"), {
         checked: Boolean(value),
         onChange: this.onChange
-      })), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+      })), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
         error: true
-      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
     }
   }]);
-
   return Switch;
-}(React.Component);
-
-_defineProperty(Switch, "defaultProps", {
-  validation: {
-    isValid: null
-  }
-});
-
-_defineProperty(Switch, "rmwcProps", ["id", "disabled", "checked", "label", "rootProps", "className"]);
-
-export { Switch };
+}(_react.default.Component);
+exports.Switch = Switch;
+(0, _defineProperty2.default)(Switch, "rmwcProps", ["id", "disabled", "checked", "label", "rootProps", "className"]);

package/Switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Switch","e","props","onChange","target","checked","value","description","validation","validationIsValid","isValid","validationMessage","message","getClasses","pick","rmwcProps","Boolean","React","Component"],"sources":["Switch.tsx"],"sourcesContent":["import React from \"react\";\nimport { Switch as RmwcSwitch, SwitchProps } from \"@rmwc/switch\";\nimport { FormComponentProps } from \"~/types\";\nimport pick from \"lodash/pick\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { getClasses } from \"~/Helpers\";\n\ntype Props = Omit<SwitchProps, \"value\"> &\n    FormComponentProps<boolean> & {\n        // Description beneath the switch.\n        description?: string;\n\n        // Optional class name.\n        className?: string;\n    };\n\n/**\n * Switch component can be used to store simple boolean values.\n */\nclass Switch extends React.Component<Props> {\n    static rmwcProps = [\"id\", \"disabled\", \"checked\", \"label\", \"rootProps\", \"className\"];\n\n    onChange = (e: React.SyntheticEvent<HTMLElement>) => {\n        this.props.onChange && this.props.onChange((e.target as any).checked);\n    };\n\n    public override render() {\n        const { value, description, validation } = this.props;\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <React.Fragment>\n                <RmwcSwitch\n                    {...getClasses({ ...pick(this.props, Switch.rmwcProps) }, \"webiny-ui-switch\")}\n                    checked={Boolean(value)}\n                    onChange={this.onChange}\n                />\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </React.Fragment>\n        );\n    }\n}\n\nexport { Switch };\n"],"mappings":";;;;;;;;;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAWA;AACA;AACA;AAFA,IAGMA,MAAM;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;MAAA;IAAA;IAAA;IAAA,uFAGG,UAACC,CAAoC,EAAK;MACjD,MAAKC,KAAK,CAACC,QAAQ,IAAI,MAAKD,KAAK,CAACC,QAAQ,CAAEF,CAAC,CAACG,MAAM,CAASC,OAAO,CAAC;IACzE,CAAC;IAAA;EAAA;EAAA;IAAA;IAAA,OAED,kBAAyB;MACrB,kBAA2C,IAAI,CAACH,KAAK;QAA7CI,KAAK,eAALA,KAAK;QAAEC,WAAW,eAAXA,WAAW;QAAEC,UAAU,eAAVA,UAAU;MAEtC,WAAmEA,UAAU,IAAI,CAAC,CAAC;QAAlEC,iBAAiB,QAA1BC,OAAO;QAA8BC,iBAAiB,QAA1BC,OAAO;MAE3C,oBACI,6BAAC,cAAK,CAAC,QAAQ,qBACX,6BAAC,cAAU,oBACH,IAAAC,mBAAU,kCAAM,IAAAC,aAAI,EAAC,IAAI,CAACZ,KAAK,EAAEF,MAAM,CAACe,SAAS,CAAC,GAAI,kBAAkB,CAAC;QAC7E,OAAO,EAAEC,OAAO,CAACV,KAAK,CAAE;QACxB,QAAQ,EAAE,IAAI,CAACH;MAAS,GAC1B,EAEDM,iBAAiB,KAAK,KAAK,iBACxB,6BAAC,sCAAkB;QAAC,KAAK;MAAA,GAAEE,iBAAiB,CAC/C,EAEAF,iBAAiB,KAAK,KAAK,IAAIF,WAAW,iBACvC,6BAAC,sCAAkB,QAAEA,WAAW,CACnC,CACY;IAEzB;EAAC;EAAA;AAAA,EA7BgBU,cAAK,CAACC,SAAS;AAAA;AAAA,8BAA9BlB,MAAM,eACW,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,CAAC"}

package/Switch/Switch.stories.js

@@ -1,32 +1,35 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
-import { withKnobs, boolean } from "@storybook/addon-knobs";
-import readme from "./README.md";
-import { Form } from "@webiny/form";
-import { Switch } from "./Switch";
-var story = storiesOf("Components/Switch", 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 _addonKnobs = require("@storybook/addon-knobs");
+var _README = _interopRequireDefault(require("./README.md"));
+var _form = require("@webiny/form");
+var _Switch = require("./Switch");
+var story = (0, _react2.storiesOf)("Components/Switch", module);
+story.addDecorator(_addonKnobs.withKnobs);
 story.add("usage", function () {
-  var disabled = boolean("Disabled", false);
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+  var disabled = (0, _addonKnobs.boolean)("Disabled", false);
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {
     title: "Simple switch with a label and description"
-  }, /*#__PURE__*/React.createElement(Form, {
+  }, /*#__PURE__*/_react.default.createElement(_form.Form, {
     data: {
       rememberMe: true
     }
   }, function (_ref) {
     var Bind = _ref.Bind;
-    return /*#__PURE__*/React.createElement(Bind, {
+    return /*#__PURE__*/_react.default.createElement(Bind, {
       name: "rememberMe"
-    }, /*#__PURE__*/React.createElement(Switch, {
+    }, /*#__PURE__*/_react.default.createElement(_Switch.Switch, {
       label: "Remember me",
       disabled: disabled,
       description: "You won't be logged out after you leave the app."
     }));
-  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                    <Form>\n                        {({ Bind }) => (\n                            <Bind name=\"rememberMe\">\n                                  <Switch\n                                    label={\"Remember me\"}\n                                    disabled={disabled}\n                                    description={\"You won't be logged out after you leave the app.\"}\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    ")));
+  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                    <Form>\n                        {({ Bind }) => (\n                            <Bind name=\"rememberMe\">\n                                  <Switch\n                                    label={\"Remember me\"}\n                                    disabled={disabled}\n                                    description={\"You won't be logged out after you leave the app.\"}\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    ")));
 }, {
   info: {
-    propTables: [Switch]
+    propTables: [_Switch.Switch]
   }
 });

package/Switch/Switch.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","disabled","boolean","readme","rememberMe","Bind","info","propTables","Switch"],"sources":["Switch.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 { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\n\nimport { Form } from \"@webiny/form\";\nimport { Switch } from \"./Switch\";\n\nconst story = storiesOf(\"Components/Switch\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Simple switch with a label and description\"}>\n                        <Form data={{ rememberMe: true }}>\n                            {({ Bind }) => (\n                                <Bind name=\"rememberMe\">\n                                    <Switch\n                                        label={\"Remember me\"}\n                                        disabled={disabled}\n                                        description={\n                                            \"You won't be logged out after you leave the app.\"\n                                        }\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Form>\n                        {({ Bind }) => (\n                            <Bind name=\"rememberMe\">\n                                  <Switch\n                                    label={\"Remember me\"}\n                                    disabled={disabled}\n                                    description={\"You won't be logged out after you leave the app.\"}\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Switch] } }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AAOA;AACA;AAEA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,mBAAmB,EAAEC,MAAM,CAAC;AACpDF,KAAK,CAACG,YAAY,CAACC,qBAAS,CAAC;AAE7BJ,KAAK,CAACK,GAAG,CACL,OAAO,EACP,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAO,EAAC,UAAU,EAAE,KAAK,CAAC;EAE3C,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB;IAAC,KAAK,EAAE;EAA6C,gBACrE,6BAAC,UAAI;IAAC,IAAI,EAAE;MAAEC,UAAU,EAAE;IAAK;EAAE,GAC5B;IAAA,IAAGC,IAAI,QAAJA,IAAI;IAAA,oBACJ,6BAAC,IAAI;MAAC,IAAI,EAAC;IAAY,gBACnB,6BAAC,cAAM;MACH,KAAK,EAAE,aAAc;MACrB,QAAQ,EAAEJ,QAAS;MACnB,WAAW,EACP;IACH,EACH,CACC;EAAA,CACV,CACE,CACW,eACtB,6BAAC,uBAAgB,0iBAcE,CACR,CACX;AAEhB,CAAC,EACD;EAAEK,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,cAAM;EAAE;AAAE,CAAC,CACrC"}

package/Switch/index.js

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

package/Switch/index.js.map

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

package/Tabs/Tab.d.ts

@@ -1,6 +1,7 @@
-import * as React from "react";
+import React from "react";
 import { TabProps as RmwcTabProps } from "@rmwc/tabs";
 export declare type TabProps = RmwcTabProps & {
+    visible?: boolean;
     tag?: string;
     /**
      * Is tab disabled?
@@ -10,5 +11,9 @@ export declare type TabProps = RmwcTabProps & {
      * Style object
      */
     style?: React.CSSProperties;
+    /**
+     * Tab ID for the testing.
+     */
+    "data-testid"?: string;
 };
-export declare const Tab: (props: TabProps) => JSX.Element;
+export declare const Tab: React.FC<TabProps>;

package/Tabs/Tab.js

@@ -1,10 +1,31 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children"];
-import * as React from "react";
-import { Tab as RmwcTab } from "@rmwc/tabs";
-export var Tab = function Tab(props) {
-  var children = props.children,
-      rest = _objectWithoutProperties(props, _excluded);
+"use strict";
 
-  return /*#__PURE__*/React.createElement(RmwcTab, rest, children);
-};
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tab = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _react = _interopRequireWildcard(require("react"));
+var _shortid = _interopRequireDefault(require("shortid"));
+var _Tabs = require("./Tabs");
+var Tab = /*#__PURE__*/_react.default.memo(function (props) {
+  var tabsContext = (0, _react.useContext)(_Tabs.TabsContext);
+  var idRef = (0, _react.useRef)(_shortid.default.generate());
+  (0, _react.useEffect)(function () {
+    var _props$visible;
+    tabsContext.addTab((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+      id: idRef.current,
+      visible: (_props$visible = props.visible) !== null && _props$visible !== void 0 ? _props$visible : true
+    }));
+  }, [props]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      return tabsContext.removeTab(idRef.current);
+    };
+  }, []);
+  return null;
+});
+exports.Tab = Tab;
+Tab.displayName = "Tab";

package/Tabs/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Tab","React","memo","props","tabsContext","useContext","TabsContext","idRef","useRef","shortid","generate","useEffect","addTab","id","current","visible","removeTab","displayName"],"sources":["Tab.tsx"],"sourcesContent":["import React, { useContext, useEffect, useRef } from \"react\";\nimport { TabProps as RmwcTabProps } from \"@rmwc/tabs\";\nimport shortid from \"shortid\";\nimport { TabsContext } from \"./Tabs\";\n\nexport type TabProps = RmwcTabProps & {\n    visible?: boolean;\n\n    tag?: string;\n    /**\n     * Is tab disabled?\n     */\n    disabled?: boolean;\n    /**\n     * Style object\n     */\n    style?: React.CSSProperties;\n    /**\n     * Tab ID for the testing.\n     */\n    \"data-testid\"?: string;\n};\n\nexport const Tab: React.FC<TabProps> = React.memo(props => {\n    const tabsContext = useContext(TabsContext);\n    const idRef = useRef(shortid.generate());\n\n    useEffect(() => {\n        tabsContext!.addTab({ ...props, id: idRef.current, visible: props.visible ?? true });\n    }, [props]);\n\n    useEffect(() => {\n        return () => {\n            return tabsContext!.removeTab(idRef.current);\n        };\n    }, []);\n\n    return null;\n});\n\nTab.displayName = \"Tab\";\n"],"mappings":";;;;;;;;;AAAA;AAEA;AACA;AAoBO,IAAMA,GAAuB,gBAAGC,cAAK,CAACC,IAAI,CAAC,UAAAC,KAAK,EAAI;EACvD,IAAMC,WAAW,GAAG,IAAAC,iBAAU,EAACC,iBAAW,CAAC;EAC3C,IAAMC,KAAK,GAAG,IAAAC,aAAM,EAACC,gBAAO,CAACC,QAAQ,EAAE,CAAC;EAExC,IAAAC,gBAAS,EAAC,YAAM;IAAA;IACZP,WAAW,CAAEQ,MAAM,6DAAMT,KAAK;MAAEU,EAAE,EAAEN,KAAK,CAACO,OAAO;MAAEC,OAAO,oBAAEZ,KAAK,CAACY,OAAO,2DAAI;IAAI,GAAG;EACxF,CAAC,EAAE,CAACZ,KAAK,CAAC,CAAC;EAEX,IAAAQ,gBAAS,EAAC,YAAM;IACZ,OAAO,YAAM;MACT,OAAOP,WAAW,CAAEY,SAAS,CAACT,KAAK,CAACO,OAAO,CAAC;IAChD,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAI;AACf,CAAC,CAAC;AAAC;AAEHd,GAAG,CAACiB,WAAW,GAAG,KAAK"}

package/Tabs/Tabs.d.ts

@@ -1,12 +1,6 @@
-import React, { ReactNode } from "react";
-export declare type TabsRenderProps = {
-    switchTab(tabIndex: number): void;
-};
-export declare type TabsProps = {
-    /**
-     * A collection of tabs that needs to be rendered.
-     */
-    children: ((props: TabsRenderProps) => ReactNode) | ReactNode;
+import React, { PropsWithChildren } from "react";
+import { TabProps } from "./Tab";
+export declare type TabsProps = PropsWithChildren<{
     /**
      * Append a class name.
      */
@@ -23,19 +17,48 @@ export declare type TabsProps = {
      * Function to change active tab.
      */
     updateValue?: (index: number) => void;
-};
-declare type State = {
-    activeTabIndex: number;
-};
+    /**
+     * Tab ID for the testing.
+     */
+    "data-testid"?: string;
+}>;
+interface TabItem extends TabProps {
+    id: string;
+}
+interface TabsContext {
+    addTab(props: TabItem): void;
+    removeTab(id: string): void;
+}
+export declare const TabsContext: React.Context<TabsContext | undefined>;
+export interface TabsImperativeApi {
+    switchTab(index: number): void;
+    getActiveIndex(): number;
+}
 /**
  * Use Tabs component to display a list of choices, once the handler is triggered.
  */
-export declare class Tabs extends React.Component<TabsProps, State> {
-    state: {
-        activeTabIndex: number;
-    };
-    switchTab(activeTabIndex: any): void;
-    renderChildren(children: any, activeIndex: any): JSX.Element;
-    render(): JSX.Element;
-}
+export declare const Tabs: React.ForwardRefExoticComponent<{
+    /**
+     * Append a class name.
+     */
+    className?: string | undefined;
+    /**
+     * Callback to execute when a tab is changed.
+     */
+    onActivate?: ((index: number) => void) | undefined;
+    /**
+     * Active tab index value.
+     */
+    value?: number | undefined;
+    /**
+     * Function to change active tab.
+     */
+    updateValue?: ((index: number) => void) | undefined;
+    /**
+     * Tab ID for the testing.
+     */
+    "data-testid"?: string | undefined;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<TabsImperativeApi | undefined>>;
 export {};