@webiny/ui 0.0.0-unstable.40876133bb → 0.0.0-unstable.496cf268ac

package/Slider/Slider.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","disabled","boolean","readme","width","Bind","value","onChange","info","propTables","Slider"],"sources":["Slider.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 Slider from \"./Slider\";\n\nconst story = storiesOf(\"Components/Slider\", 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 slider with a label and description\"}>\n                        <Form data={{ width: 200 }}>\n                            {({ Bind }) => (\n                                <Bind name=\"width\">\n                                    {({ value, onChange }) => (\n                                        <Slider\n                                            label={\"Number of rooms:\"}\n                                            disabled={disabled}\n                                            description={\n                                                \"Choose the number of rooms in your apartment.\"\n                                            }\n                                            discrete\n                                            displayMarkers\n                                            min={1}\n                                            max={10}\n                                            step={1}\n                                            onInput={onChange}\n                                            onChange={onChange}\n                                            value={value}\n                                        />\n                                    )}\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                     <Form data={{ width: 200 }}>\n                        {({ Bind }) => (\n                            <Bind name=\"width\">\n                                {({ value, onChange }) => (\n                                    <Slider\n                                        label={\"Number of rooms:\"}\n                                        disabled={disabled}\n                                        description={\n                                            \"Choose the number of rooms in your apartment.\"\n                                        }\n                                        discrete\n                                        displayMarkers\n                                        min={1}\n                                        max={10}\n                                        step={1}\n                                        onInput={onChange}\n                                        onChange={onChange}\n                                        value={value}\n                                    />\n                                )}\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Slider] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AAEA;;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,QAAQ,GAAG,IAAAC,mBAAA,EAAQ,UAAR,EAAoB,KAApB,CAAjB;EAEA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI,6BAAC,UAAD;IAAM,IAAI,EAAE;MAAEC,KAAK,EAAE;IAAT;EAAZ,GACK;IAAA,IAAGC,IAAH,QAAGA,IAAH;IAAA,oBACG,6BAAC,IAAD;MAAM,IAAI,EAAC;IAAX,GACK;MAAA,IAAGC,KAAH,SAAGA,KAAH;MAAA,IAAUC,QAAV,SAAUA,QAAV;MAAA,oBACG,6BAAC,eAAD;QACI,KAAK,EAAE,kBADX;QAEI,QAAQ,EAAEN,QAFd;QAGI,WAAW,EACP,+CAJR;QAMI,QAAQ,MANZ;QAOI,cAAc,MAPlB;QAQI,GAAG,EAAE,CART;QASI,GAAG,EAAE,EATT;QAUI,IAAI,EAAE,CAVV;QAWI,OAAO,EAAEM,QAXb;QAYI,QAAQ,EAAEA,QAZd;QAaI,KAAK,EAAED;MAbX,EADH;IAAA,CADL,CADH;EAAA,CADL,CADJ,CADJ,eA0BI,6BAAC,uBAAD,wrCA1BJ,CAFJ,CADJ;AA2DH,CAhEL,EAiEI;EAAEE,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,eAAD;EAAd;AAAR,CAjEJ"}
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","disabled","boolean","readme","width","Bind","value","onChange","info","propTables","Slider"],"sources":["Slider.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 Slider from \"./Slider\";\n\nconst story = storiesOf(\"Components/Slider\", 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 slider with a label and description\"}>\n                        <Form data={{ width: 200 }}>\n                            {({ Bind }) => (\n                                <Bind name=\"width\">\n                                    {({ value, onChange }) => (\n                                        <Slider\n                                            label={\"Number of rooms:\"}\n                                            disabled={disabled}\n                                            description={\n                                                \"Choose the number of rooms in your apartment.\"\n                                            }\n                                            discrete\n                                            displayMarkers\n                                            min={1}\n                                            max={10}\n                                            step={1}\n                                            onInput={onChange}\n                                            onChange={onChange}\n                                            value={value}\n                                        />\n                                    )}\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                     <Form data={{ width: 200 }}>\n                        {({ Bind }) => (\n                            <Bind name=\"width\">\n                                {({ value, onChange }) => (\n                                    <Slider\n                                        label={\"Number of rooms:\"}\n                                        disabled={disabled}\n                                        description={\n                                            \"Choose the number of rooms in your apartment.\"\n                                        }\n                                        discrete\n                                        displayMarkers\n                                        min={1}\n                                        max={10}\n                                        step={1}\n                                        onInput={onChange}\n                                        onChange={onChange}\n                                        value={value}\n                                    />\n                                )}\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Slider] } }\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,KAAK,EAAE;IAAI;EAAE,GACtB;IAAA,IAAGC,IAAI,QAAJA,IAAI;IAAA,oBACJ,6BAAC,IAAI;MAAC,IAAI,EAAC;IAAO,GACb;MAAA,IAAGC,KAAK,SAALA,KAAK;QAAEC,QAAQ,SAARA,QAAQ;MAAA,oBACf,6BAAC,eAAM;QACH,KAAK,EAAE,kBAAmB;QAC1B,QAAQ,EAAEN,QAAS;QACnB,WAAW,EACP,+CACH;QACD,QAAQ;QACR,cAAc;QACd,GAAG,EAAE,CAAE;QACP,GAAG,EAAE,EAAG;QACR,IAAI,EAAE,CAAE;QACR,OAAO,EAAEM,QAAS;QAClB,QAAQ,EAAEA,QAAS;QACnB,KAAK,EAAED;MAAM,EACf;IAAA,CACL,CACE;EAAA,CACV,CACE,CACW,eACtB,6BAAC,uBAAgB,wrCA0BE,CACR,CACX;AAEhB,CAAC,EACD;EAAEE,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,eAAM;EAAE;AAAE,CAAC,CACrC"}

package/Slider/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "Slider", {
     return _Slider.default;
   }
 });
-
 var _Slider = _interopRequireDefault(require("./Slider"));

package/Slider/index.js.map

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

package/Snackbar/Snackbar.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,51 +11,34 @@ Object.defineProperty(exports, "SnackbarAction", {
     return _snackbar.SnackbarAction;
   }
 });
-
 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 _snackbar = require("@rmwc/snackbar");
-
 /**
  * Use Snackbar component to display an informative or alert message and allow users to act upon it.
  */
 var Snackbar = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(Snackbar, _React$Component);
-
   var _super = (0, _createSuper2.default)(Snackbar);
-
   function Snackbar(props) {
     var _this;
-
     (0, _classCallCheck2.default)(this, Snackbar);
     _this = _super.call(this, props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "container", null);
     _this.container = document.getElementById("snackbar-container");
-
     if (!_this.container) {
       _this.container = document.createElement("div");
-
       _this.container.setAttribute("id", "snackbar-container");
-
       var container = _this.container;
       document.body && document.body.appendChild(container);
     }
-
     return _this;
   }
-
   (0, _createClass2.default)(Snackbar, [{
     key: "render",
     value: function render() {
@@ -65,5 +47,4 @@ var Snackbar = /*#__PURE__*/function (_React$Component) {
   }]);
   return Snackbar;
 }(_react.default.Component);
-
 exports.Snackbar = Snackbar;

package/Snackbar/Snackbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["Snackbar","props","container","document","getElementById","createElement","setAttribute","body","appendChild","React","Component"],"sources":["Snackbar.tsx"],"sourcesContent":["import React from \"react\";\nimport { Snackbar as RmwcSnackbar, SnackbarAction, SnackbarProps } from \"@rmwc/snackbar\";\n\ntype Props = SnackbarProps;\n\n/**\n * Use Snackbar component to display an informative or alert message and allow users to act upon it.\n */\nclass Snackbar extends React.Component<Props> {\n    public readonly container: HTMLElement | null = null;\n\n    public constructor(props: Props) {\n        super(props);\n\n        this.container = document.getElementById(\"snackbar-container\");\n\n        if (!this.container) {\n            this.container = document.createElement(\"div\");\n            this.container.setAttribute(\"id\", \"snackbar-container\");\n            const container: HTMLElement = this.container;\n            document.body && document.body.appendChild(container);\n        }\n    }\n\n    public override render(): React.ReactElement {\n        return <RmwcSnackbar {...this.props} />;\n    }\n}\n\nexport { Snackbar, SnackbarAction };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAIA;AACA;AACA;IACMA,Q;;;;;EAGF,kBAAmBC,KAAnB,EAAiC;IAAA;;IAAA;IAC7B,0BAAMA,KAAN;IAD6B,wFAFe,IAEf;IAG7B,MAAKC,SAAL,GAAiBC,QAAQ,CAACC,cAAT,CAAwB,oBAAxB,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,oBAAlC;;MACA,IAAMJ,SAAsB,GAAG,MAAKA,SAApC;MACAC,QAAQ,CAACI,IAAT,IAAiBJ,QAAQ,CAACI,IAAT,CAAcC,WAAd,CAA0BN,SAA1B,CAAjB;IACH;;IAV4B;EAWhC;;;;WAED,kBAA6C;MACzC,oBAAO,6BAAC,kBAAD,EAAkB,KAAKD,KAAvB,CAAP;IACH;;;EAlBkBQ,cAAA,CAAMC,S"}
+{"version":3,"names":["Snackbar","props","container","document","getElementById","createElement","setAttribute","body","appendChild","React","Component"],"sources":["Snackbar.tsx"],"sourcesContent":["import React from \"react\";\nimport { Snackbar as RmwcSnackbar, SnackbarAction, SnackbarProps } from \"@rmwc/snackbar\";\n\ntype Props = SnackbarProps;\n\n/**\n * Use Snackbar component to display an informative or alert message and allow users to act upon it.\n */\nclass Snackbar extends React.Component<Props> {\n    public readonly container: HTMLElement | null = null;\n\n    public constructor(props: Props) {\n        super(props);\n\n        this.container = document.getElementById(\"snackbar-container\");\n\n        if (!this.container) {\n            this.container = document.createElement(\"div\");\n            this.container.setAttribute(\"id\", \"snackbar-container\");\n            const container: HTMLElement = this.container;\n            document.body && document.body.appendChild(container);\n        }\n    }\n\n    public override render(): React.ReactElement {\n        return <RmwcSnackbar {...this.props} />;\n    }\n}\n\nexport { Snackbar, SnackbarAction };\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AACA;AAIA;AACA;AACA;AAFA,IAGMA,QAAQ;EAAA;EAAA;EAGV,kBAAmBC,KAAY,EAAE;IAAA;IAAA;IAC7B,0BAAMA,KAAK;IAAE,wFAH+B,IAAI;IAKhD,MAAKC,SAAS,GAAGC,QAAQ,CAACC,cAAc,CAAC,oBAAoB,CAAC;IAE9D,IAAI,CAAC,MAAKF,SAAS,EAAE;MACjB,MAAKA,SAAS,GAAGC,QAAQ,CAACE,aAAa,CAAC,KAAK,CAAC;MAC9C,MAAKH,SAAS,CAACI,YAAY,CAAC,IAAI,EAAE,oBAAoB,CAAC;MACvD,IAAMJ,SAAsB,GAAG,MAAKA,SAAS;MAC7CC,QAAQ,CAACI,IAAI,IAAIJ,QAAQ,CAACI,IAAI,CAACC,WAAW,CAACN,SAAS,CAAC;IACzD;IAAC;EACL;EAAC;IAAA;IAAA,OAED,kBAA6C;MACzC,oBAAO,6BAAC,kBAAY,EAAK,IAAI,CAACD,KAAK,CAAI;IAC3C;EAAC;EAAA;AAAA,EAlBkBQ,cAAK,CAACC,SAAS;AAAA"}

package/Snackbar/Snackbar.stories.js

@@ -1,62 +1,40 @@
 "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) {
   (0, _inherits2.default)(SnackbarContainer, _React$Component);
-
   var _super = (0, _createSuper2.default)(SnackbarContainer);
-
   function SnackbarContainer() {
     var _this;
-
     (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));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       show: false
     });
     return _this;
   }
-
   (0, _createClass2.default)(SnackbarContainer, [{
     key: "render",
     value: function render() {
       var _this2 = this;
-
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Snackbar.Snackbar, {
         open: this.state.show,
         onClose: function onClose() {
@@ -78,7 +56,6 @@ var SnackbarContainer = /*#__PURE__*/function (_React$Component) {
   }]);
   return SnackbarContainer;
 }(_react.default.Component);
-
 story.add("usage", function () {
   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, {

package/Snackbar/Snackbar.stories.js.map

@@ -1 +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,iBAAA,EAAU,qBAAV,EAAiCC,MAAjC,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;;IAEMC,iB;;;;;;;;;;;;;;;wFACsB;MACpBC,IAAI,EAAE;IADc,C;;;;;;WAIxB,kBAAyB;MAAA;;MACrB,oBACI,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,kBAAD;QACI,IAAI,EAAE,KAAKC,KAAL,CAAWD,IADrB;QAEI,OAAO,EAAE;UAAA,OAAM,MAAI,CAACE,QAAL,CAAc;YAAEF,IAAI,EAAE;UAAR,CAAd,CAAN;QAAA,CAFb;QAGI,OAAO,EAAC,oBAHZ;QAII,OAAO,EAAE,KAAKG,KAAL,CAAWC,OAJxB;QAKI,MAAM,EAAC;MALX,EADJ,eAQI,6BAAC,qBAAD;QAAe,OAAO,EAAE;UAAA,OAAM,MAAI,CAACF,QAAL,CAAc;YAAEF,IAAI,EAAE;UAAR,CAAd,CAAN;QAAA;MAAxB,kBARJ,CADJ;IAcH;;;EApB2BK,cAAA,CAAMC,S;;AAuBtCZ,KAAK,CAACa,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMH,OAAO,GAAG,IAAAI,mBAAA,EAAQ,SAAR,EAAmB,KAAnB,CAAhB;EAEA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD,qBACI,6BAAC,iBAAD;IAAmB,OAAO;EAA1B,EADJ,CADJ,eAII,6BAAC,uBAAD,4LAKuBL,OALvB,maAJJ,CAFJ,CADJ;AAyBH,CA9BL,EA+BI;EAAEM,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,kBAAD;EAAd;AAAR,CA/BJ"}
+{"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

@@ -15,5 +15,4 @@ Object.defineProperty(exports, "SnackbarAction", {
     return _Snackbar.SnackbarAction;
   }
 });
-
 var _Snackbar = require("./Snackbar");

package/Snackbar/index.js.map

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

package/Switch/Switch.d.ts

@@ -2,7 +2,7 @@
 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;
 };

package/Switch/Switch.js

@@ -1,72 +1,50 @@
 "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) {
   (0, _inherits2.default)(Switch, _React$Component);
-
   var _super = (0, _createSuper2.default)(Switch);
-
   function Switch() {
     var _this;
-
     (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));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onChange", function (e) {
       _this.props.onChange && _this.props.onChange(e.target.checked);
     });
     return _this;
   }
-
   (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;
-
+        value = _this$props.value,
+        description = _this$props.description,
+        validation = _this$props.validation;
       var _ref = validation || {},
-          validationIsValid = _ref.isValid,
-          validationMessage = _ref.message;
-
+        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
@@ -77,6 +55,5 @@ var Switch = /*#__PURE__*/function (_React$Component) {
   }]);
   return Switch;
 }(_react.default.Component);
-
 exports.Switch = Switch;
 (0, _defineProperty2.default)(Switch, "rmwcProps", ["id", "disabled", "checked", "label", "rootProps", "className"]);

package/Switch/Switch.js.map

@@ -1 +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 = FormComponentProps &\n    SwitchProps & {\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;IACMA,M;;;;;;;;;;;;;;;2FAGS,UAACC,CAAD,EAA0C;MACjD,MAAKC,KAAL,CAAWC,QAAX,IAAuB,MAAKD,KAAL,CAAWC,QAAX,CAAqBF,CAAC,CAACG,MAAH,CAAkBC,OAAtC,CAAvB;IACH,C;;;;;;WAED,kBAAyB;MACrB,kBAA2C,KAAKH,KAAhD;MAAA,IAAQI,KAAR,eAAQA,KAAR;MAAA,IAAeC,WAAf,eAAeA,WAAf;MAAA,IAA4BC,UAA5B,eAA4BA,UAA5B;;MAEA,WAAmEA,UAAU,IAAI,EAAjF;MAAA,IAAiBC,iBAAjB,QAAQC,OAAR;MAAA,IAA6CC,iBAA7C,QAAoCC,OAApC;;MAEA,oBACI,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,cAAD,oBACQ,IAAAC,mBAAA,kCAAgB,IAAAC,aAAA,EAAK,KAAKZ,KAAV,EAAiBF,MAAM,CAACe,SAAxB,CAAhB,GAAsD,kBAAtD,CADR;QAEI,OAAO,EAAEC,OAAO,CAACV,KAAD,CAFpB;QAGI,QAAQ,EAAE,KAAKH;MAHnB,GADJ,EAOKM,iBAAiB,KAAK,KAAtB,iBACG,6BAAC,sCAAD;QAAoB,KAAK;MAAzB,GAA2BE,iBAA3B,CARR,EAWKF,iBAAiB,KAAK,KAAtB,IAA+BF,WAA/B,iBACG,6BAAC,sCAAD,QAAqBA,WAArB,CAZR,CADJ;IAiBH;;;EA7BgBU,cAAA,CAAMC,S;;;8BAArBlB,M,eACiB,CAAC,IAAD,EAAO,UAAP,EAAmB,SAAnB,EAA8B,OAA9B,EAAuC,WAAvC,EAAoD,WAApD,C"}
+{"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,21 +1,13 @@
 "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 () {

package/Switch/Switch.stories.js.map

@@ -1 +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,iBAAA,EAAU,mBAAV,EAA+BC,MAA/B,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAA,EAAQ,UAAR,EAAoB,KAApB,CAAjB;EAEA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI,6BAAC,UAAD;IAAM,IAAI,EAAE;MAAEC,UAAU,EAAE;IAAd;EAAZ,GACK;IAAA,IAAGC,IAAH,QAAGA,IAAH;IAAA,oBACG,6BAAC,IAAD;MAAM,IAAI,EAAC;IAAX,gBACI,6BAAC,cAAD;MACI,KAAK,EAAE,aADX;MAEI,QAAQ,EAAEJ,QAFd;MAGI,WAAW,EACP;IAJR,EADJ,CADH;EAAA,CADL,CADJ,CADJ,eAgBI,6BAAC,uBAAD,0iBAhBJ,CAFJ,CADJ;AAqCH,CA1CL,EA2CI;EAAEK,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,cAAD;EAAd;AAAR,CA3CJ"}
+{"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

@@ -3,9 +3,7 @@
 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;

package/Switch/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Switch\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"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 React from "react";
 import { TabProps as RmwcTabProps } from "@rmwc/tabs";
 export declare type TabProps = RmwcTabProps & {
+    visible?: boolean;
     tag?: string;
     /**
      * Is tab disabled?

package/Tabs/Tab.js

@@ -1,28 +1,23 @@
 "use strict";
 
 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
+      id: idRef.current,
+      visible: (_props$visible = props.visible) !== null && _props$visible !== void 0 ? _props$visible : true
     }));
   }, [props]);
   (0, _react.useEffect)(function () {
@@ -32,6 +27,5 @@ var Tab = /*#__PURE__*/_react.default.memo(function (props) {
   }, []);
   return null;
 });
-
 exports.Tab = Tab;
 Tab.displayName = "Tab";

package/Tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"names":["Tab","React","memo","props","tabsContext","useContext","TabsContext","idRef","useRef","shortid","generate","useEffect","addTab","id","current","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    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 });\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;;AAkBO,IAAMA,GAAuB,gBAAGC,cAAA,CAAMC,IAAN,CAAW,UAAAC,KAAK,EAAI;EACvD,IAAMC,WAAW,GAAG,IAAAC,iBAAA,EAAWC,iBAAX,CAApB;EACA,IAAMC,KAAK,GAAG,IAAAC,aAAA,EAAOC,gBAAA,CAAQC,QAAR,EAAP,CAAd;EAEA,IAAAC,gBAAA,EAAU,YAAM;IACZP,WAAW,CAAEQ,MAAb,6DAAyBT,KAAzB;MAAgCU,EAAE,EAAEN,KAAK,CAACO;IAA1C;EACH,CAFD,EAEG,CAACX,KAAD,CAFH;EAIA,IAAAQ,gBAAA,EAAU,YAAM;IACZ,OAAO,YAAM;MACT,OAAOP,WAAW,CAAEW,SAAb,CAAuBR,KAAK,CAACO,OAA7B,CAAP;IACH,CAFD;EAGH,CAJD,EAIG,EAJH;EAMA,OAAO,IAAP;AACH,CAfsC,CAAhC;;;AAiBPd,GAAG,CAACgB,WAAJ,GAAkB,KAAlB"}
+{"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

@@ -32,6 +32,7 @@ interface TabsContext {
 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.

package/Tabs/Tabs.js

@@ -1,74 +1,64 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TabsContext = exports.Tabs = void 0;
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _tabs = require("@rmwc/tabs");
-
 var disabledStyles = {
   opacity: 0.5,
   pointerEvents: "none"
 };
 var TabsContext = /*#__PURE__*/(0, _react.createContext)(undefined);
 exports.TabsContext = TabsContext;
-
 /**
  * Use Tabs component to display a list of choices, once the handler is triggered.
  */
 var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useState = (0, _react.useState)(0),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      activeTabIndex = _useState2[0],
-      setActiveIndex = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    activeTabIndex = _useState2[0],
+    setActiveIndex = _useState2[1];
   var _useState3 = (0, _react.useState)([]),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      tabs = _useState4[0],
-      setTabs = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    tabs = _useState4[0],
+    setTabs = _useState4[1];
   var activeIndex = props.value !== undefined ? props.value : activeTabIndex;
   var activateTabIndex = (0, _react.useCallback)(function (index) {
     if (typeof props.updateValue === "function") {
       props.updateValue(index);
       return;
     }
-
     setActiveIndex(index);
   }, []);
   (0, _react.useImperativeHandle)(ref, function () {
     return {
+      getActiveIndex: function getActiveIndex() {
+        return activeIndex;
+      },
       switchTab: function switchTab(tabIndex) {
         activateTabIndex(tabIndex);
       }
     };
   });
+
   /**
    * This effect will make sure that disabled tabs automatically switch to the first tab.
    */
-
   (0, _react.useEffect)(function () {
     var _tabs$activeIndex;
-
     if ((_tabs$activeIndex = tabs[activeIndex]) !== null && _tabs$activeIndex !== void 0 && _tabs$activeIndex.disabled) {
       activateTabIndex(0);
     }
   });
-  /* We need to generate a key like this to trigger a proper component re-render when child tabs change. */
 
+  /* We need to generate a key like this to trigger a proper component re-render when child tabs change. */
   var tabBar = /*#__PURE__*/_react.default.createElement(_tabs.TabBar, {
     key: tabs.map(function (tab) {
       return tab.id;
@@ -81,16 +71,16 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       } else {
         setActiveIndex(evt.detail.index);
       }
-
       props.onActivate && props.onActivate(evt.detail.index);
     }
   }, tabs.map(function (item) {
+    if (!item.visible) {
+      return null;
+    }
     var style = item.style || {};
-
     if (item.disabled) {
       Object.assign(style, disabledStyles);
     }
-
     return /*#__PURE__*/_react.default.createElement(_tabs.Tab, Object.assign({
       tag: "div",
       style: style,
@@ -100,8 +90,7 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       icon: item.icon
     } : {}), item.label);
   }));
-
-  var content = tabs.map(function (tab, index) {
+  var content = tabs.filter(Boolean).map(function (tab, index) {
     if (activeIndex === index) {
       return /*#__PURE__*/_react.default.createElement("div", {
         key: index
@@ -122,11 +111,9 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           var existingIndex = tabs.findIndex(function (tab) {
             return tab.id === props.id;
           });
-
           if (existingIndex > -1) {
             return [].concat((0, _toConsumableArray2.default)(tabs.slice(0, existingIndex)), [props], (0, _toConsumableArray2.default)(tabs.slice(existingIndex + 1)));
           }
-
           return [].concat((0, _toConsumableArray2.default)(tabs), [props]);
         });
       },