@webiny/ui 5.24.0 → 5.25.0-beta.0

package/Scrollbar/Scrollbar.stories.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { storiesOf } from "@storybook/react";
 import { Story, StoryReadme, StorySandbox } from "@webiny/storybook-utils/Story";
 import readme from "./../Scrollbar/README.md";

package/Scrollbar/Scrollbar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Scrollbar.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandbox","readme","Scrollbar","story","module","add","width","height","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SAASC,KAAT,EAAgBC,WAAhB,EAA6BC,YAA7B,QAAiD,+BAAjD;AACA,OAAOC,MAAP;AACA,SAASC,SAAT;AAEA,IAAMC,KAAK,GAAGN,SAAS,CAAC,sBAAD,EAAyBO,MAAzB,CAAvB;AAEAD,KAAK,CAACE,GAAN,CACI,OADJ,EAEI,YAAM;AACF,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcJ,MAAd,CADJ,eAEI,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAE;AAArB,kBACI,oBAAC,SAAD;AAAW,IAAA,KAAK,EAAE;AAAEK,MAAAA,KAAK,EAAE,GAAT;AAAcC,MAAAA,MAAM,EAAE;AAAtB;AAAlB,u1BADJ,CAFJ,CADJ;AAqBH,CAxBL,EAyBI;AAAEC,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACP,SAAD;AAAd;AAAR,CAzBJ","sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Scrollbar/README.md\";\nimport { Scrollbar } from \"./Scrollbar\";\n\nconst story = storiesOf(\"Components/Scrollbar\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"Scrollbar demo\"}>\n                    <Scrollbar style={{ width: 300, height: 200 }}>\n                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lorem leo,\n                        aliquam aliquet arcu vel, faucibus feugiat est. Nulla facilisi. Donec\n                        lobortis metus dictum sem egestas, non lobortis erat suscipit. Nunc\n                        fermentum tempor nisi, nec venenatis odio egestas at. Nulla facilisi. Fusce\n                        sed venenatis velit, ac rhoncus ligula. Integer hendrerit egestas ante,\n                        tristique posuere augue auctor non. Curabitur accumsan, ipsum cursus euismod\n                        volutpat, enim ligula interdum diam, id suscipit ipsum lectus id ligula. Ut\n                        nec odio vel lacus volutpat commodo. In hac habitasse platea dictumst. Donec\n                        nunc lacus, venenatis non tellus vel, semper porta quam. Ut fermentum mattis\n                        urna non imperdiet. Fusce tincidunt enim nec tincidunt dapibus. Aliquam eu\n                        ligula quis ligula pretium tincidunt non sit amet velit. Curabitur vel\n                        interdum enim, ut molestie ligula.\n                    </Scrollbar>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Scrollbar] } }\n);\n"]}

package/Scrollbar/index.js.map

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

package/Section/Section.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Section.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","readme","Section","styled","story","module","RenderSection","backgroundColor","padding","add","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SACIC,KADJ,EAEIC,WAFJ,EAGIC,gBAHJ,EAIIC,YAJJ,EAKIC,mBALJ,QAMO,+BANP;AAOA,OAAOC,MAAP;AAEA,OAAOC,OAAP;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AAEA,IAAMC,KAAK,GAAGT,SAAS,CAAC,oBAAD,EAAuBU,MAAvB,CAAvB;AAEA,IAAMC,aAAa,gBAAGH,MAAH,CAAU,KAAV;AAAA;AAAA;AAAA,GAAiB;AAChCI,EAAAA,eAAe,EAAE,6BADe;AAEhCC,EAAAA,OAAO,EAAE;AAFuB,CAAjB,CAAnB;AAKAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;AACF,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcR,MAAd,CADJ,eAEI,oBAAC,YAAD,qBACI,oBAAC,mBAAD,qBACI,oBAAC,aAAD,qBACI,oBAAC,OAAD;AAAS,IAAA,KAAK,EAAC;AAAf,mCADJ,eAEI,oBAAC,OAAD;AAAS,IAAA,KAAK,EAAC;AAAf,mDAFJ,CADJ,CADJ,eAOI,oBAAC,gBAAD,yoBAPJ,CAFJ,CADJ;AA4BH,CA/BL,EAgCI;AAAES,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACT,OAAD;AAAd;AAAR,CAhCJ","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 \"./README.md\";\n\nimport Section from \"./index\";\nimport styled from \"@emotion/styled\";\n\nconst story = storiesOf(\"Components/Section\", module);\n\nconst RenderSection = styled(\"div\")({\n    backgroundColor: \"var(--mdc-theme-background)\",\n    padding: \"1px 25px 0 25px\"\n});\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <RenderSection>\n                            <Section title=\"Section 1\">Here goes the first section</Section>\n                            <Section title=\"Section 2\">And this is the second section 🦄</Section>\n                        </RenderSection>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        import styled from \"@emotion/styled\";\n                        \n                        const RenderSection = styled(\"div\")({\n                            backgroundColor: \"var(--mdc-theme-background)\",\n                            padding: \"1px 25px 0 25px\"\n                        });\n\n                         <RenderSection>\n                            <Section title=\"Section 1\">Here goes the first section</Section>\n                            <Section title=\"Section 2\">And this is the second section 🦄</Section>\n                        </RenderSection>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Section] } }\n);\n"]}

package/Section/index.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 interface SectionProps {
     title?: String;
 }

package/Section/index.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "title"];
-import * as React from "react";
+import React from "react";
 import styled from "@emotion/styled";
 import { css } from "emotion";
 import { Typography } from "../Typography";

package/Section/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":["React","styled","css","Typography","Elevation","SectionWrapper","backgroundColor","padding","titleStyle","display","alignItems","color","lineHeight","svg","height","ElevationContent","Section","children","title","props"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,GAAT,QAAoB,SAApB;AACA,SAASC,UAAT;AACA,SAASC,SAAT;AAEA,IAAMC,cAAc,gBAAGJ,MAAH,CAAU,KAAV;AAAA;AAAA;AAAA,GAAiB;AACjCK,EAAAA,eAAe,EAAE,6BADgB;AAEjCC,EAAAA,OAAO,EAAE;AAFwB,CAAjB,CAApB;AAKA,IAAMC,UAAU,gBAAGN,GAAG,CAAC;AACnBO,EAAAA,OAAO,EAAE,MADU;AAEnBC,EAAAA,UAAU,EAAE,QAFO;AAGnBC,EAAAA,KAAK,EAAE,6BAHY;AAInB,8BAA4B;AACxBC,IAAAA,UAAU,EAAE,MADY;AAExBC,IAAAA,GAAG,EAAE;AACDC,MAAAA,MAAM,EAAE,EADP;AAEDH,MAAAA,KAAK,EAAE;AAFN;AAFmB;AAJT,CAAD,sBAAtB;AAaA,IAAMI,gBAAgB,gBAAGd,MAAH,CAAU,KAAV;AAAA;AAAA;AAAA,GAAiB;AACnCM,EAAAA,OAAO,EAAE,EAD0B;AAEnCD,EAAAA,eAAe,EAAE;AAFkB,CAAjB,CAAtB;;AASA,IAAMU,OAA+B,GAAG,SAAlCA,OAAkC,OAAmC;AAAA,MAAhCC,QAAgC,QAAhCA,QAAgC;AAAA,MAAtBC,KAAsB,QAAtBA,KAAsB;AAAA,MAAZC,KAAY;;AACvE,sBACI,oBAAC,cAAD,EAAoBA,KAApB,eACI,6CACI,oBAAC,UAAD;AAAY,IAAA,SAAS,EAAEX,UAAvB;AAAmC,IAAA,GAAG,EAAE;AAAxC,KACKU,KADL,CADJ,CADJ,eAOI,oBAAC,SAAD;AAAW,IAAA,CAAC,EAAE;AAAd,kBACI,oBAAC,gBAAD,QAAmBD,QAAnB,CADJ,CAPJ,CADJ;AAaH,CAdD;;AAgBA,eAAeD,OAAf","sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport { Typography } from \"~/Typography\";\nimport { Elevation } from \"~/Elevation\";\n\nconst SectionWrapper = styled(\"div\")({\n    backgroundColor: \"var(--mdc-theme-background)\",\n    padding: \"0 0 25px 0\"\n});\n\nconst titleStyle = css({\n    display: \"flex\",\n    alignItems: \"center\",\n    color: \"var(--mdc-theme-on-surface)\",\n    \".tooltip-content-wrapper\": {\n        lineHeight: \"100%\",\n        svg: {\n            height: 13,\n            color: \"var(--mdc-theme-on-surface)\"\n        }\n    }\n});\n\nconst ElevationContent = styled(\"div\")({\n    padding: 20,\n    backgroundColor: \"#fff\"\n});\n\ninterface SectionProps {\n    title?: String;\n}\n\nconst Section: React.FC<SectionProps> = ({ children, title, ...props }) => {\n    return (\n        <SectionWrapper {...props}>\n            <h4>\n                <Typography className={titleStyle} use={\"overline\"}>\n                    {title}\n                </Typography>\n            </h4>\n\n            <Elevation z={2}>\n                <ElevationContent>{children}</ElevationContent>\n            </Elevation>\n        </SectionWrapper>\n    );\n};\n\nexport default Section;\n"]}

package/Select/Select.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { SelectProps as RmwcSelectProps } from "@rmwc/select";
 import { FormComponentProps } from "../types";
 export declare type SelectProps = FormComponentProps & RmwcSelectProps & {

package/Select/Select.js

@@ -1,7 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/createForOfIteratorHelper";
 var _excluded = ["value", "description", "validation"];
-import * as React from "react";
+import React from "react";
 import { Select as RmwcSelect } from "@rmwc/select";
 import { FormElementMessage } from "../FormElementMessage";
 import { css } from "emotion";
@@ -20,11 +21,59 @@ var noLabel = /*#__PURE__*/css({
     }
   }
 }, "label:noLabel;");
+/**
+ * TODO verify that this is correct method get all options.
+ */
+
+var getOptions = function getOptions(initialOptions) {
+  if (!initialOptions) {
+    return [];
+  } else if (Array.isArray(initialOptions)) {
+    var options = [];
+
+    var _iterator = _createForOfIteratorHelper(initialOptions),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var option = _step.value;
+
+        if (typeof option === "string") {
+          options.push({
+            label: option,
+            value: option
+          });
+          continue;
+        }
+
+        options.push({
+          label: option.label,
+          value: option.value,
+          options: option.options
+        });
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+
+    return options;
+  }
+
+  return Object.keys(initialOptions).map(function (key) {
+    return {
+      label: initialOptions[key],
+      value: key
+    };
+  });
+};
 /**
  * Select component lets users choose a value from given set of options.
  */
 
-var skipProps = ["validate"];
+
+var skipProps = ["validate", "form"];
 
 var getRmwcProps = function getRmwcProps(props) {
   var newProps = {};
@@ -49,20 +98,21 @@ export var Select = function Select(props) {
       other = _objectWithoutProperties(props, _excluded);
 
   var value = initialValue === null || initialValue === undefined ? "" : initialValue;
+
+  var _ref = validation || {},
+      validationIsValid = _ref.isValid,
+      validationMessage = _ref.message;
+
+  var options = getOptions(other.options);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RmwcSelect, Object.assign({}, getRmwcProps(other), {
+    options: options,
     value: value,
     className: classNames("webiny-ui-select", props.className, _defineProperty({}, noLabel, !props.label)),
     onChange: function onChange(e) {
       props.onChange && props.onChange(e.target.value);
     }
-  })), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+  })), validationIsValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
     error: true
-  }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
-};
-Select.defaultProps = {
-  validation: {
-    isValid: null,
-    message: null
-  }
+  }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
 };
 export default Select;

package/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Select.tsx"],"names":["React","Select","RmwcSelect","FormElementMessage","css","classNames","noLabel","height","paddingTop","getOptions","initialOptions","Array","isArray","options","option","push","label","value","Object","keys","map","key","skipProps","getRmwcProps","props","newProps","filter","name","includes","forEach","initialValue","description","validation","other","undefined","validationIsValid","isValid","validationMessage","message","className","e","onChange","target"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport {\n    FormattedOption,\n    Select as RmwcSelect,\n    SelectProps as RmwcSelectProps\n} from \"@rmwc/select\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { FormComponentProps } from \"~/types\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nexport type SelectProps = FormComponentProps &\n    RmwcSelectProps & {\n        // Component label.\n        label?: string;\n\n        // Is checkbox disabled?\n        disabled?: boolean;\n\n        // Description beneath the select.\n        description?: string;\n\n        // Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label.\n        placeholder?: string;\n\n        // Makes the Select have a visual box.\n        box?: string;\n\n        // One or more <option> or <optgroup> elements.\n        children?: Array<React.ReactElement<\"option\"> | React.ReactElement<\"optgroup\">>;\n\n        // IconProps for the root element. By default, additional props spread to the native select element.\n        rootProps?: Object;\n\n        // A className for the root element.\n        className?: string;\n    };\n\nconst noLabel = css({\n    \"&.mdc-select\": {\n        height: 35,\n        \".mdc-select__native-control\": {\n            paddingTop: 0\n        },\n        \"&.mdc-select--box\": {\n            \".mdc-select__native-control\": {\n                height: 35,\n                paddingTop: 5\n            }\n        }\n    }\n});\n/**\n * TODO verify that this is correct method get all options.\n */\nconst getOptions = (initialOptions: SelectProps[\"options\"]): FormattedOption[] => {\n    if (!initialOptions) {\n        return [];\n    } else if (Array.isArray(initialOptions)) {\n        const options: FormattedOption[] = [];\n        for (const option of initialOptions) {\n            if (typeof option === \"string\") {\n                options.push({\n                    label: option,\n                    value: option\n                });\n                continue;\n            }\n            options.push({\n                label: option.label,\n                value: option.value,\n                options: option.options\n            });\n        }\n        return options;\n    }\n    return Object.keys(initialOptions).map(key => {\n        return {\n            label: initialOptions[key],\n            value: key\n        };\n    });\n};\n\n/**\n * Select component lets users choose a value from given set of options.\n */\nconst skipProps = [\"validate\", \"form\"];\n\nconst getRmwcProps = (props: SelectProps): FormComponentProps & RmwcSelectProps => {\n    const newProps: FormComponentProps & RmwcSelectProps = {};\n    Object.keys(props)\n        .filter(name => !skipProps.includes(name))\n        // @ts-ignore\n        .forEach((name: any) => (newProps[name] = props[name]));\n\n    return newProps;\n};\n/**\n * We check for null and undefined in the value because React is complaining about those values.\n * Error says to use the empty string in null/undefined case.\n */\nexport const Select: React.FC<SelectProps> = props => {\n    const { value: initialValue, description, validation, ...other } = props;\n\n    const value = initialValue === null || initialValue === undefined ? \"\" : initialValue;\n\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n    const options = getOptions(other.options);\n\n    return (\n        <React.Fragment>\n            <RmwcSelect\n                {...getRmwcProps(other)}\n                options={options}\n                value={value}\n                className={classNames(\"webiny-ui-select\", props.className, {\n                    [noLabel]: !props.label\n                })}\n                onChange={e => {\n                    props.onChange && props.onChange((e.target as any).value);\n                }}\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\nexport default Select;\n"]}

package/Select/Select.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Select.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","withKnobs","boolean","readme","Form","Select","story","module","addDecorator","add","disabled","box","Bind","toString","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SACIC,KADJ,EAEIC,WAFJ,EAGIC,gBAHJ,EAIIC,YAJJ,EAKIC,mBALJ,QAMO,+BANP;AAOA,SAASC,SAAT,EAAoBC,OAApB,QAAmC,wBAAnC;AACA,OAAOC,MAAP;AAEA,SAASC,IAAT,QAAqB,cAArB;AACA,SAASC,MAAT;AAEA,IAAMC,KAAK,GAAGX,SAAS,CAAC,mBAAD,EAAsBY,MAAtB,CAAvB;AACAD,KAAK,CAACE,YAAN,CAAmBP,SAAnB;AAEAK,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;AACF,MAAMC,QAAQ,GAAGR,OAAO,CAAC,UAAD,EAAa,KAAb,CAAxB;AACA,MAAMS,GAAG,GAAGT,OAAO,CAAC,KAAD,EAAQ,KAAR,CAAnB;AAEA,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcC,MAAd,CADJ,eAEI,oBAAC,YAAD,qBACI,oBAAC,mBAAD;AAAqB,IAAA,KAAK,EAAE;AAA5B,kBACI,oBAAC,IAAD,QACK;AAAA,QAAGS,IAAH,QAAGA,IAAH;AAAA,wBACG,oBAAC,IAAD;AAAM,MAAA,IAAI,EAAC;AAAX,oBACI,oBAAC,MAAD;AACI,MAAA,KAAK,EAAC,MADV;AAEI,MAAA,QAAQ,EAAEF,QAFd;AAGI,MAAA,GAAG,EAAEC,GAAG,CAACE,QAAJ,EAHT;AAII,MAAA,WAAW,EAAC;AAJhB,oBAMI;AAAU,MAAA,KAAK,EAAC;AAAhB,oBACI;AAAQ,MAAA,KAAK,EAAC;AAAd,yBADJ,eAEI;AAAQ,MAAA,KAAK,EAAC;AAAd,iBAFJ,eAGI;AAAQ,MAAA,KAAK,EAAC;AAAd,kBAHJ,CANJ,eAWI;AAAU,MAAA,KAAK,EAAC;AAAhB,oBACI;AAAQ,MAAA,KAAK,EAAC;AAAd,gBADJ,eAEI;AAAQ,MAAA,KAAK,EAAC;AAAd,aAFJ,eAGI;AAAQ,MAAA,KAAK,EAAC;AAAd,oBAHJ,CAXJ,CADJ,CADH;AAAA,GADL,CADJ,CADJ,eA0BI,oBAAC,gBAAD,85CA1BJ,CAFJ,CADJ;AA6DH,CAnEL,EAoEI;AAAEC,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACV,MAAD;AAAd;AAAR,CApEJ","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 { Select } from \"./Select\";\n\nconst story = storiesOf(\"Components/Select\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n        const box = boolean(\"Box\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Simple select with a label and description\"}>\n                        <Form>\n                            {({ Bind }) => (\n                                <Bind name=\"pet\">\n                                    <Select\n                                        label=\"Pets\"\n                                        disabled={disabled}\n                                        box={box.toString()}\n                                        description=\"Choose a pet of your liking.\"\n                                    >\n                                        <optgroup label=\"Dogs\">\n                                            <option value=\"germanShepherd\">German Shepherd</option>\n                                            <option value=\"bulldog\">Bulldog</option>\n                                            <option value=\"sharPei\">Shar-Pei</option>\n                                        </optgroup>\n                                        <optgroup label=\"Other\">\n                                            <option value=\"parrot\">Parrot</option>\n                                            <option value=\"cat\">Cat</option>\n                                            <option value=\"guinea \">Guinea Pig</option>\n                                        </optgroup>\n                                    </Select>\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Form>\n                        {({ Bind }) => (\n                            <Bind name=\"pet\">\n                               <Select\n                                    label=\"Pets\"\n                                    disabled={disabled}\n                                    box={box.toString()}\n                                    description=\"Choose a pet of your liking.\"\n                                >\n                                   <optgroup label=\"Dogs\">\n                                        <option value=\"germanShepherd\">\n                                            German Shepherd\n                                        </option>\n                                        <option value=\"bulldog\">Bulldog</option>\n                                        <option value=\"sharPei\">Shar-Pei</option>\n                                    </optgroup>\n                                    <optgroup label=\"Other\">\n                                        <option value=\"parrot\">Parrot</option>\n                                        <option value=\"cat\">Cat</option>\n                                        <option value=\"guinea \">Guinea Pig</option>\n                                    </optgroup>\n                                </Select>\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Select] } }\n);\n"]}

package/Select/index.js.map

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

package/Slider/Slider.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { FormComponentProps } from "../types";
 declare type Props = FormComponentProps & {
     label?: string;
@@ -15,7 +15,6 @@ declare type Props = FormComponentProps & {
  * Slider component lets users choose a value from given range.
  */
 declare class Slider extends React.Component<Props> {
-    static defaultProps: Partial<Props>;
     onChange: (e: {
         detail: {
             value: number;

package/Slider/Slider.js

@@ -4,7 +4,7 @@ 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 React from "react";
 import { Slider as RmwcSlider } from "@rmwc/slider";
 import styled from "@emotion/styled";
 import { FormElementMessage } from "../FormElementMessage";
@@ -63,26 +63,23 @@ var Slider = /*#__PURE__*/function (_React$Component) {
         sliderValue = this.props.min || 0;
       }
 
+      var _ref = validation || {},
+          validationIsValid = _ref.isValid,
+          validationMessage = _ref.message;
+
       return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement("div", {
         className: "mdc-text-field-helper-text mdc-text-field-helper-text--persistent"
       }, label), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(RmwcSlider, Object.assign({}, this.props, {
         value: sliderValue,
         onChange: this.onChange,
         onInput: this.onInput
-      }))), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+      }))), validationIsValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
         error: true
-      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
     }
   }]);
 
   return Slider;
 }(React.Component);
 
-_defineProperty(Slider, "defaultProps", {
-  validation: {
-    isValid: null,
-    message: null
-  }
-});
-
 export default Slider;

package/Slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Slider.tsx"],"names":["React","Slider","RmwcSlider","styled","FormElementMessage","Wrapper","width","left","e","props","onChange","detail","value","onInput","label","description","validation","sliderValue","min","validationIsValid","isValid","validationMessage","message","Component"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAM,IAAIC,UAAnB,QAAqC,cAArC;AAEA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,kBAAT;AA+BA;AACA,IAAMC,OAAO,gBAAGF,MAAH,CAAU,KAAV;AAAA;AAAA;AAAA,GAAiB;AAC1BG,EAAAA,KAAK,EAAE,MADmB;AAE1B,8CAA4C;AACxCC,IAAAA,IAAI,EAAE;AADkC;AAFlB,CAAjB,CAAb;AAOA;AACA;AACA;;IACMN,M;;;;;;;;;;;;;;;;+DACS,UAACO,CAAD,EAAsC;AAC7C,YAAKC,KAAL,CAAWC,QAAX,IAAuB,MAAKD,KAAL,CAAWC,QAAX,CAAoBF,CAAC,CAACG,MAAF,CAASC,KAA7B,CAAvB;AACH,K;;8DAES,UAACJ,CAAD,EAAsC;AAC5C,YAAKC,KAAL,CAAWI,OAAX,IAAsB,MAAKJ,KAAL,CAAWI,OAAX,CAAmBL,CAAC,CAACG,MAAF,CAASC,KAA5B,CAAtB;AACH,K;;;;;;;WAED,kBAAyB;AACrB,wBAAkD,KAAKH,KAAvD;AAAA,UAAQG,KAAR,eAAQA,KAAR;AAAA,UAAeE,KAAf,eAAeA,KAAf;AAAA,UAAsBC,WAAtB,eAAsBA,WAAtB;AAAA,UAAmCC,UAAnC,eAAmCA,UAAnC;AAEA,UAAIC,WAAW,GAAGL,KAAlB;;AACA,UAAIA,KAAK,KAAK,IAAV,IAAkB,OAAOA,KAAP,KAAiB,WAAvC,EAAoD;AAChDK,QAAAA,WAAW,GAAG,KAAKR,KAAL,CAAWS,GAAX,IAAkB,CAAhC;AACH;;AAED,iBAAmEF,UAAU,IAAI,EAAjF;AAAA,UAAiBG,iBAAjB,QAAQC,OAAR;AAAA,UAA6CC,iBAA7C,QAAoCC,OAApC;;AAEA,0BACI,oBAAC,KAAD,CAAO,QAAP,QACKR,KAAK,iBACF;AAAK,QAAA,SAAS,EAAC;AAAf,SACKA,KADL,CAFR,eAOI,oBAAC,OAAD,qBACI,oBAAC,UAAD,oBACQ,KAAKL,KADb;AAEI,QAAA,KAAK,EAAEQ,WAFX;AAGI,QAAA,QAAQ,EAAE,KAAKP,QAHnB;AAII,QAAA,OAAO,EAAE,KAAKG;AAJlB,SADJ,CAPJ,EAgBKM,iBAAiB,KAAK,KAAtB,iBACG,oBAAC,kBAAD;AAAoB,QAAA,KAAK;AAAzB,SAA2BE,iBAA3B,CAjBR,EAoBKF,iBAAiB,KAAK,KAAtB,IAA+BJ,WAA/B,iBACG,oBAAC,kBAAD,QAAqBA,WAArB,CArBR,CADJ;AA0BH;;;;EA7CgBf,KAAK,CAACuB,S;;AAgD3B,eAAetB,MAAf","sourcesContent":["import React from \"react\";\nimport { Slider as RmwcSlider } from \"@rmwc/slider\";\nimport { FormComponentProps } from \"~/types\";\nimport styled from \"@emotion/styled\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\n\ntype Props = FormComponentProps & {\n    // Component label.\n    label?: string;\n\n    // Is checkbox disabled?\n    disabled?: boolean;\n\n    // Description beneath the slider.\n    description?: string;\n\n    // The minimum value of the Slider.\n    min: number | string;\n\n    // The maximum value of the Slider.\n    max: number | string;\n\n    // A step to quantize values by.\n    step?: number | string;\n\n    // Displays the exact value of the Slider on the knob.\n    discrete?: boolean;\n\n    // Displays the individual step markers on the Slider track.\n    displayMarkers?: boolean;\n\n    // Function that gets triggered on each input.\n    onInput?: Function;\n};\n\n// wrapper fixes a bug in slider where the slider handle is rendered outside the bounds of the slider box\nconst Wrapper = styled(\"div\")({\n    width: \"100%\",\n    \".mdc-slider .mdc-slider__thumb-container\": {\n        left: 5\n    }\n});\n\n/**\n * Slider component lets users choose a value from given range.\n */\nclass Slider extends React.Component<Props> {\n    onChange = (e: { detail: { value: number } }) => {\n        this.props.onChange && this.props.onChange(e.detail.value);\n    };\n\n    onInput = (e: { detail: { value: number } }) => {\n        this.props.onInput && this.props.onInput(e.detail.value);\n    };\n\n    public override render() {\n        const { value, label, description, validation } = this.props;\n\n        let sliderValue = value;\n        if (value === null || typeof value === \"undefined\") {\n            sliderValue = this.props.min || 0;\n        }\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <React.Fragment>\n                {label && (\n                    <div className=\"mdc-text-field-helper-text mdc-text-field-helper-text--persistent\">\n                        {label}\n                    </div>\n                )}\n\n                <Wrapper>\n                    <RmwcSlider\n                        {...this.props}\n                        value={sliderValue}\n                        onChange={this.onChange}\n                        onInput={this.onInput}\n                    />\n                </Wrapper>\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 default Slider;\n"]}

package/Slider/Slider.stories.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+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";

package/Slider/Slider.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Slider.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","withKnobs","boolean","readme","Form","Slider","story","module","addDecorator","add","disabled","width","Bind","value","onChange","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SACIC,KADJ,EAEIC,WAFJ,EAGIC,gBAHJ,EAIIC,YAJJ,EAKIC,mBALJ,QAMO,+BANP;AAOA,SAASC,SAAT,EAAoBC,OAApB,QAAmC,wBAAnC;AACA,OAAOC,MAAP;AAEA,SAASC,IAAT,QAAqB,cAArB;AACA,OAAOC,MAAP;AAEA,IAAMC,KAAK,GAAGX,SAAS,CAAC,mBAAD,EAAsBY,MAAtB,CAAvB;AACAD,KAAK,CAACE,YAAN,CAAmBP,SAAnB;AAEAK,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;AACF,MAAMC,QAAQ,GAAGR,OAAO,CAAC,UAAD,EAAa,KAAb,CAAxB;AAEA,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcC,MAAd,CADJ,eAEI,oBAAC,YAAD,qBACI,oBAAC,mBAAD;AAAqB,IAAA,KAAK,EAAE;AAA5B,kBACI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAE;AAAEQ,MAAAA,KAAK,EAAE;AAAT;AAAZ,KACK;AAAA,QAAGC,IAAH,QAAGA,IAAH;AAAA,wBACG,oBAAC,IAAD;AAAM,MAAA,IAAI,EAAC;AAAX,OACK;AAAA,UAAGC,KAAH,SAAGA,KAAH;AAAA,UAAUC,QAAV,SAAUA,QAAV;AAAA,0BACG,oBAAC,MAAD;AACI,QAAA,KAAK,EAAE,kBADX;AAEI,QAAA,QAAQ,EAAEJ,QAFd;AAGI,QAAA,WAAW,EACP,+CAJR;AAMI,QAAA,QAAQ,MANZ;AAOI,QAAA,cAAc,MAPlB;AAQI,QAAA,GAAG,EAAE,CART;AASI,QAAA,GAAG,EAAE,EATT;AAUI,QAAA,IAAI,EAAE,CAVV;AAWI,QAAA,OAAO,EAAEI,QAXb;AAYI,QAAA,QAAQ,EAAEA,QAZd;AAaI,QAAA,KAAK,EAAED;AAbX,QADH;AAAA,KADL,CADH;AAAA,GADL,CADJ,CADJ,eA0BI,oBAAC,gBAAD,wrCA1BJ,CAFJ,CADJ;AA2DH,CAhEL,EAiEI;AAAEE,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACX,MAAD;AAAd;AAAR,CAjEJ","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"]}

package/Slider/index.js.map

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

package/Snackbar/Snackbar.d.ts

@@ -1,15 +1,12 @@
-import * as React from "react";
+import React from "react";
 import { SnackbarAction, SnackbarProps } from "@rmwc/snackbar";
 declare type Props = SnackbarProps;
 /**
  * Use Snackbar component to display an informative or alert message and allow users to act upon it.
- * @param props
- * @returns {*}
- * @constructor
  */
 declare class Snackbar extends React.Component<Props> {
-    container?: Element;
+    readonly container: HTMLElement | null;
     constructor(props: Props);
-    render(): JSX.Element;
+    render(): React.ReactElement;
 }
 export { Snackbar, SnackbarAction };

package/Snackbar/Snackbar.js

@@ -4,14 +4,11 @@ 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 React from "react";
 import { Snackbar as RmwcSnackbar, SnackbarAction } from "@rmwc/snackbar";
 
 /**
  * Use Snackbar component to display an informative or alert message and allow users to act upon it.
- * @param props
- * @returns {*}
- * @constructor
  */
 var Snackbar = /*#__PURE__*/function (_React$Component) {
   _inherits(Snackbar, _React$Component);
@@ -25,7 +22,7 @@ var Snackbar = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, props);
 
-    _defineProperty(_assertThisInitialized(_this), "container", void 0);
+    _defineProperty(_assertThisInitialized(_this), "container", null);
 
     _this.container = document.getElementById("snackbar-container");
 

package/Snackbar/Snackbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Snackbar.tsx"],"names":["React","Snackbar","RmwcSnackbar","SnackbarAction","props","container","document","getElementById","createElement","setAttribute","body","appendChild","Component"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,QAAQ,IAAIC,YAArB,EAAmCC,cAAnC,QAAwE,gBAAxE;;AAIA;AACA;AACA;IACMF,Q;;;;;AAGF,oBAAmBG,KAAnB,EAAiC;AAAA;;AAAA;;AAC7B,8BAAMA,KAAN;;AAD6B,gEAFe,IAEf;;AAG7B,UAAKC,SAAL,GAAiBC,QAAQ,CAACC,cAAT,CAAwB,oBAAxB,CAAjB;;AAEA,QAAI,CAAC,MAAKF,SAAV,EAAqB;AACjB,YAAKA,SAAL,GAAiBC,QAAQ,CAACE,aAAT,CAAuB,KAAvB,CAAjB;;AACA,YAAKH,SAAL,CAAeI,YAAf,CAA4B,IAA5B,EAAkC,oBAAlC;;AACA,UAAMJ,SAAsB,GAAG,MAAKA,SAApC;AACAC,MAAAA,QAAQ,CAACI,IAAT,IAAiBJ,QAAQ,CAACI,IAAT,CAAcC,WAAd,CAA0BN,SAA1B,CAAjB;AACH;;AAV4B;AAWhC;;;;WAED,kBAA6C;AACzC,0BAAO,oBAAC,YAAD,EAAkB,KAAKD,KAAvB,CAAP;AACH;;;;EAlBkBJ,KAAK,CAACY,S;;AAqB7B,SAASX,QAAT,EAAmBE,cAAnB","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"]}

package/Snackbar/Snackbar.stories.js

@@ -4,7 +4,7 @@ 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 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";

package/Snackbar/Snackbar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Snackbar.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","readme","withKnobs","boolean","ButtonPrimary","Snackbar","story","module","addDecorator","SnackbarContainer","show","state","setState","props","leading","Component","add","info","propTables"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SACIC,KADJ,EAEIC,WAFJ,EAGIC,gBAHJ,EAIIC,YAJJ,EAKIC,mBALJ,QAMO,+BANP;AAOA,OAAOC,MAAP;AACA,SAASC,SAAT,EAAoBC,OAApB,QAAmC,wBAAnC;AACA,SAASC,aAAT;AACA,SAASC,QAAT;AAEA,IAAMC,KAAK,GAAGX,SAAS,CAAC,qBAAD,EAAwBY,MAAxB,CAAvB;AACAD,KAAK,CAACE,YAAN,CAAmBN,SAAnB;;IAEMO,iB;;;;;;;;;;;;;;;;4DACsB;AACpBC,MAAAA,IAAI,EAAE;AADc,K;;;;;;;WAIxB,kBAAyB;AAAA;;AACrB,0BACI,oBAAC,KAAD,CAAO,QAAP,qBACI,oBAAC,QAAD;AACI,QAAA,IAAI,EAAE,KAAKC,KAAL,CAAWD,IADrB;AAEI,QAAA,OAAO,EAAE;AAAA,iBAAM,MAAI,CAACE,QAAL,CAAc;AAAEF,YAAAA,IAAI,EAAE;AAAR,WAAd,CAAN;AAAA,SAFb;AAGI,QAAA,OAAO,EAAC,oBAHZ;AAII,QAAA,OAAO,EAAE,KAAKG,KAAL,CAAWC,OAJxB;AAKI,QAAA,MAAM,EAAC;AALX,QADJ,eAQI,oBAAC,aAAD;AAAe,QAAA,OAAO,EAAE;AAAA,iBAAM,MAAI,CAACF,QAAL,CAAc;AAAEF,YAAAA,IAAI,EAAE;AAAR,WAAd,CAAN;AAAA;AAAxB,wBARJ,CADJ;AAcH;;;;EApB2BhB,KAAK,CAACqB,S;;AAuBtCT,KAAK,CAACU,GAAN,CACI,OADJ,EAEI,YAAM;AACF,MAAMF,OAAO,GAAGX,OAAO,CAAC,SAAD,EAAY,KAAZ,CAAvB;AAEA,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcF,MAAd,CADJ,eAEI,oBAAC,YAAD,qBACI,oBAAC,mBAAD,qBACI,oBAAC,iBAAD;AAAmB,IAAA,OAAO;AAA1B,IADJ,CADJ,eAII,oBAAC,gBAAD,4LAKuBa,OALvB,maAJJ,CAFJ,CADJ;AAyBH,CA9BL,EA+BI;AAAEG,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACb,QAAD;AAAd;AAAR,CA/BJ","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"]}

package/Snackbar/index.js.map

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

package/Switch/Switch.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { SwitchProps } from "@rmwc/switch";
 import { FormComponentProps } from "../types";
 declare type Props = FormComponentProps & SwitchProps & {
@@ -9,7 +9,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: Partial<Props>;
     static rmwcProps: string[];
     onChange: (e: React.SyntheticEvent<HTMLElement>) => void;
     render(): JSX.Element;

package/Switch/Switch.js

@@ -5,7 +5,7 @@ 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 React from "react";
 import { Switch as RmwcSwitch } from "@rmwc/switch";
 import pick from "lodash/pick";
 import { FormElementMessage } from "../FormElementMessage";
@@ -44,25 +44,23 @@ var Switch = /*#__PURE__*/function (_React$Component) {
           value = _this$props.value,
           description = _this$props.description,
           validation = _this$props.validation;
+
+      var _ref = validation || {},
+          validationIsValid = _ref.isValid,
+          validationMessage = _ref.message;
+
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RmwcSwitch, Object.assign({}, getClasses(_objectSpread({}, pick(this.props, Switch.rmwcProps)), "webiny-ui-switch"), {
         checked: Boolean(value),
         onChange: this.onChange
-      })), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+      })), validationIsValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
         error: true
-      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
     }
   }]);
 
   return Switch;
 }(React.Component);
 
-_defineProperty(Switch, "defaultProps", {
-  validation: {
-    isValid: null,
-    message: null
-  }
-});
-
 _defineProperty(Switch, "rmwcProps", ["id", "disabled", "checked", "label", "rootProps", "className"]);
 
 export { Switch };

package/Switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Switch.tsx"],"names":["React","Switch","RmwcSwitch","pick","FormElementMessage","getClasses","e","props","onChange","target","checked","value","description","validation","validationIsValid","isValid","validationMessage","message","rmwcProps","Boolean","Component"],"mappings":";;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAM,IAAIC,UAAnB,QAAkD,cAAlD;AAEA,OAAOC,IAAP,MAAiB,aAAjB;AACA,SAASC,kBAAT;AACA,SAASC,UAAT;;AAWA;AACA;AACA;IACMJ,M;;;;;;;;;;;;;;;;+DAGS,UAACK,CAAD,EAA0C;AACjD,YAAKC,KAAL,CAAWC,QAAX,IAAuB,MAAKD,KAAL,CAAWC,QAAX,CAAqBF,CAAC,CAACG,MAAH,CAAkBC,OAAtC,CAAvB;AACH,K;;;;;;;WAED,kBAAyB;AACrB,wBAA2C,KAAKH,KAAhD;AAAA,UAAQI,KAAR,eAAQA,KAAR;AAAA,UAAeC,WAAf,eAAeA,WAAf;AAAA,UAA4BC,UAA5B,eAA4BA,UAA5B;;AAEA,iBAAmEA,UAAU,IAAI,EAAjF;AAAA,UAAiBC,iBAAjB,QAAQC,OAAR;AAAA,UAA6CC,iBAA7C,QAAoCC,OAApC;;AAEA,0BACI,oBAAC,KAAD,CAAO,QAAP,qBACI,oBAAC,UAAD,oBACQZ,UAAU,mBAAMF,IAAI,CAAC,KAAKI,KAAN,EAAaN,MAAM,CAACiB,SAApB,CAAV,GAA4C,kBAA5C,CADlB;AAEI,QAAA,OAAO,EAAEC,OAAO,CAACR,KAAD,CAFpB;AAGI,QAAA,QAAQ,EAAE,KAAKH;AAHnB,SADJ,EAOKM,iBAAiB,KAAK,KAAtB,iBACG,oBAAC,kBAAD;AAAoB,QAAA,KAAK;AAAzB,SAA2BE,iBAA3B,CARR,EAWKF,iBAAiB,KAAK,KAAtB,IAA+BF,WAA/B,iBACG,oBAAC,kBAAD,QAAqBA,WAArB,CAZR,CADJ;AAiBH;;;;EA7BgBZ,KAAK,CAACoB,S;;gBAArBnB,M,eACiB,CAAC,IAAD,EAAO,UAAP,EAAmB,SAAnB,EAA8B,OAA9B,EAAuC,WAAvC,EAAoD,WAApD,C;;AA+BvB,SAASA,MAAT","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"]}

package/Switch/Switch.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Switch.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","withKnobs","boolean","readme","Form","Switch","story","module","addDecorator","add","disabled","rememberMe","Bind","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SACIC,KADJ,EAEIC,WAFJ,EAGIC,gBAHJ,EAIIC,YAJJ,EAKIC,mBALJ,QAMO,+BANP;AAOA,SAASC,SAAT,EAAoBC,OAApB,QAAmC,wBAAnC;AACA,OAAOC,MAAP;AAEA,SAASC,IAAT,QAAqB,cAArB;AACA,SAASC,MAAT;AAEA,IAAMC,KAAK,GAAGX,SAAS,CAAC,mBAAD,EAAsBY,MAAtB,CAAvB;AACAD,KAAK,CAACE,YAAN,CAAmBP,SAAnB;AAEAK,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;AACF,MAAMC,QAAQ,GAAGR,OAAO,CAAC,UAAD,EAAa,KAAb,CAAxB;AAEA,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcC,MAAd,CADJ,eAEI,oBAAC,YAAD,qBACI,oBAAC,mBAAD;AAAqB,IAAA,KAAK,EAAE;AAA5B,kBACI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAE;AAAEQ,MAAAA,UAAU,EAAE;AAAd;AAAZ,KACK;AAAA,QAAGC,IAAH,QAAGA,IAAH;AAAA,wBACG,oBAAC,IAAD;AAAM,MAAA,IAAI,EAAC;AAAX,oBACI,oBAAC,MAAD;AACI,MAAA,KAAK,EAAE,aADX;AAEI,MAAA,QAAQ,EAAEF,QAFd;AAGI,MAAA,WAAW,EACP;AAJR,MADJ,CADH;AAAA,GADL,CADJ,CADJ,eAgBI,oBAAC,gBAAD,0iBAhBJ,CAFJ,CADJ;AAqCH,CA1CL,EA2CI;AAAEG,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACT,MAAD;AAAd;AAAR,CA3CJ","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"]}

package/Switch/index.js.map

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

package/Tabs/Tab.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { TabProps as RmwcTabProps } from "@rmwc/tabs";
 export declare type TabProps = RmwcTabProps & {
     tag?: string;
@@ -15,4 +15,4 @@ export declare type TabProps = RmwcTabProps & {
      */
     "data-testid"?: string;
 };
-export declare const Tab: (props: TabProps) => JSX.Element;
+export declare const Tab: React.FC<TabProps>;

package/Tabs/Tab.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"];
-import * as React from "react";
+import React from "react";
 import { Tab as RmwcTab } from "@rmwc/tabs";
 export var Tab = function Tab(props) {
   var children = props.children,

package/Tabs/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Tab.tsx"],"names":["React","Tab","RmwcTab","props","children","rest"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,GAAG,IAAIC,OAAhB,QAAyD,YAAzD;AAkBA,OAAO,IAAMD,GAAuB,GAAG,SAA1BA,GAA0B,CAAAE,KAAK,EAAI;AAC5C,MAAQC,QAAR,GAA8BD,KAA9B,CAAQC,QAAR;AAAA,MAAqBC,IAArB,4BAA8BF,KAA9B;;AACA,sBAAO,oBAAC,OAAD,EAAaE,IAAb,EAAoBD,QAApB,CAAP;AACH,CAHM","sourcesContent":["import React from \"react\";\nimport { Tab as RmwcTab, TabProps as RmwcTabProps } from \"@rmwc/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> = props => {\n    const { children, ...rest } = props;\n    return <RmwcTab {...rest}>{children}</RmwcTab>;\n};\n"]}

package/Tabs/Tabs.d.ts

@@ -32,14 +32,14 @@ export interface TabsProps {
      */
     "data-testid"?: string;
 }
-interface State {
+interface TabsState {
     activeTabIndex: 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: State;
+export declare class Tabs extends React.Component<TabsProps, TabsState> {
+    state: TabsState;
     switchTab(activeTabIndex: number): void;
     renderChildren(children: React.ReactNode, activeIndex: number): JSX.Element;
     render(): JSX.Element;

package/Tabs/Tabs.js

@@ -12,10 +12,32 @@ var disabledStyles = {
   opacity: 0.5,
   pointerEvents: "none"
 };
+
+var getTabsChildren = function getTabsChildren(children) {
+  var filteredTabs = React.Children.toArray(children).filter(function (c) {
+    return c !== null;
+  }
+  /**
+   * TODO @ts-refactor
+   * Need to cast because TS is complaining due to differences between types that can be in ReactNode
+   */
+  );
+  return filteredTabs.map(function (child) {
+    return {
+      label: child.props.label,
+      children: child.props.children,
+      icon: child.props.icon,
+      disabled: child.props.disabled,
+      style: child.props.style,
+      "data-testid": child.props["data-testid"]
+    };
+  });
+};
 /**
  * Use Tabs component to display a list of choices, once the handler is triggered.
  */
 
+
 export var Tabs = /*#__PURE__*/function (_React$Component) {
   _inherits(Tabs, _React$Component);
 
@@ -44,29 +66,19 @@ export var Tabs = /*#__PURE__*/function (_React$Component) {
     value: function switchTab(activeTabIndex) {
       if (typeof this.props.updateValue === "function") {
         this.props.updateValue(activeTabIndex);
-      } else {
-        this.setState({
-          activeTabIndex: activeTabIndex
-        });
+        return;
       }
+
+      this.setState({
+        activeTabIndex: activeTabIndex
+      });
     }
   }, {
     key: "renderChildren",
     value: function renderChildren(children, activeIndex) {
       var _this2 = this;
 
-      var tabs = React.Children.toArray(children).filter(function (c) {
-        return c !== null;
-      }).map(function (child) {
-        return {
-          label: child.props.label,
-          children: child.props.children,
-          icon: child.props.icon,
-          disabled: child.props.disabled,
-          style: child.props.style,
-          "data-testid": child.props["data-testid"]
-        };
-      });
+      var tabs = getTabsChildren(children);
       var tabBar = /*#__PURE__*/React.createElement(TabBar, {
         className: "webiny-ui-tabs__tab-bar",
         activeTabIndex: activeIndex,

package/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Tabs.tsx"],"names":["React","classNames","TabBar","Tab","disabledStyles","opacity","pointerEvents","getTabsChildren","children","filteredTabs","Children","toArray","filter","c","map","child","label","props","icon","disabled","style","Tabs","activeTabIndex","updateValue","setState","activeIndex","tabs","tabBar","evt","detail","index","onActivate","item","Object","assign","content","i","length","current","push","display","className","value","undefined","state","childrenCallable","switchTab","bind","renderChildren","Component"],"mappings":"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","sourcesContent":["import React, { ReactNode } from \"react\";\nimport classNames from \"classnames\";\nimport { TabBar } from \"@rmwc/tabs\";\nimport { Tab, TabProps } from \"./Tab\";\n\nexport interface TabsRenderProps {\n    switchTab(tabIndex: number): void;\n}\n\nexport interface TabsPropsChildrenCallable {\n    (props: TabsRenderProps): ReactNode;\n}\ntype TabsPropsChildren = TabsPropsChildrenCallable | ReactNode;\nexport interface TabsProps {\n    /**\n     * A collection of tabs that needs to be rendered.\n     */\n    children: TabsPropsChildren;\n\n    /**\n     * Append a class name.\n     */\n    className?: string;\n\n    /**\n     * Callback to execute when a tab is changed.\n     */\n    onActivate?: (index: number) => void;\n\n    /**\n     * Active tab index value.\n     */\n    value?: number;\n\n    /**\n     * Function to change active tab.\n     */\n    updateValue?: (index: number) => void;\n    /**\n     * Tab ID for the testing.\n     */\n    \"data-testid\"?: string;\n}\n\ninterface TabsState {\n    activeTabIndex: number;\n}\n\nconst disabledStyles: Record<string, string | number> = {\n    opacity: 0.5,\n    pointerEvents: \"none\"\n};\n\nconst getTabsChildren = (children: React.ReactNode): TabProps[] => {\n    const filteredTabs = React.Children.toArray(children).filter(\n        c => c !== null\n        /**\n         * TODO @ts-refactor\n         * Need to cast because TS is complaining due to differences between types that can be in ReactNode\n         */\n    ) as React.ReactElement<TabProps>[];\n\n    return filteredTabs.map(child => {\n        return {\n            label: child.props.label,\n            children: child.props.children,\n            icon: child.props.icon,\n            disabled: child.props.disabled,\n            style: child.props.style,\n            \"data-testid\": child.props[\"data-testid\"]\n        };\n    });\n};\n\n/**\n * Use Tabs component to display a list of choices, once the handler is triggered.\n */\nexport class Tabs extends React.Component<TabsProps, TabsState> {\n    public override state: TabsState = {\n        activeTabIndex: 0\n    };\n\n    public switchTab(activeTabIndex: number): void {\n        if (typeof this.props.updateValue === \"function\") {\n            this.props.updateValue(activeTabIndex);\n            return;\n        }\n        this.setState({ activeTabIndex });\n    }\n\n    public renderChildren(children: React.ReactNode, activeIndex: number) {\n        const tabs = getTabsChildren(children);\n\n        const tabBar = (\n            <TabBar\n                className=\"webiny-ui-tabs__tab-bar\"\n                activeTabIndex={activeIndex}\n                onActivate={evt => {\n                    if (typeof this.props.updateValue === \"function\") {\n                        this.props.updateValue(evt.detail.index);\n                    } else {\n                        this.setState({ activeTabIndex: evt.detail.index });\n                    }\n                    this.props.onActivate && this.props.onActivate(evt.detail.index);\n                }}\n            >\n                {tabs.map((item: TabProps, index) => {\n                    const style = item.style || {};\n                    if (item.disabled) {\n                        Object.assign(style, disabledStyles);\n                    }\n\n                    return (\n                        <Tab\n                            tag={\"div\"}\n                            style={style}\n                            key={item.label + \"-\" + index}\n                            data-testid={item[\"data-testid\"]}\n                            {...(item.icon ? { icon: item.icon } : {})}\n                            {...(item.label ? { label: item.label } : {})}\n                        />\n                    );\n                })}\n            </TabBar>\n        );\n\n        const content = [];\n        for (let i = 0; i < tabs.length; i++) {\n            const current = tabs[i];\n            if (activeIndex === i) {\n                content.push(<div key={i}>{current.children}</div>);\n            } else {\n                content.push(\n                    <div key={i} style={{ display: \"none\" }}>\n                        {current.children}\n                    </div>\n                );\n            }\n        }\n\n        return (\n            <div className={classNames(\"webiny-ui-tabs\", this.props.className)}>\n                {tabBar}\n                <div className={\"webiny-ui-tabs__content mdc-tab-content\"}>{content}</div>\n            </div>\n        );\n    }\n\n    public override render() {\n        const activeIndex =\n            this.props.value !== undefined ? this.props.value : this.state.activeTabIndex;\n\n        let children = this.props.children;\n        if (typeof this.props.children === \"function\") {\n            const childrenCallable = this.props.children as TabsPropsChildrenCallable;\n            children = childrenCallable({ switchTab: this.switchTab.bind(this) });\n        }\n\n        return this.renderChildren(children, activeIndex);\n    }\n}\n"]}

package/Tabs/Tabs.stories.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { storiesOf } from "@storybook/react";
 import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
 import readme from "./../Tabs/README.md";