@webiny/ui 5.23.1 → 5.25.0-beta.0

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,24 +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
-  }
-});
-
 _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;
@@ -10,5 +10,9 @@ export declare type TabProps = RmwcTabProps & {
      * Style object
      */
     style?: React.CSSProperties;
+    /**
+     * Tab ID for the testing.
+     */
+    "data-testid"?: string;
 };
-export declare const Tab: (props: TabProps) => JSX.Element;
+export declare const Tab: React.FC<TabProps>;

package/Tabs/Tab.js

@@ -1,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

@@ -1,12 +1,16 @@
 import React, { ReactNode } from "react";
-export declare type TabsRenderProps = {
+export interface TabsRenderProps {
     switchTab(tabIndex: number): void;
-};
-export declare type TabsProps = {
+}
+export interface TabsPropsChildrenCallable {
+    (props: TabsRenderProps): ReactNode;
+}
+declare type TabsPropsChildren = TabsPropsChildrenCallable | ReactNode;
+export interface TabsProps {
     /**
      * A collection of tabs that needs to be rendered.
      */
-    children: ((props: TabsRenderProps) => ReactNode) | ReactNode;
+    children: TabsPropsChildren;
     /**
      * Append a class name.
      */
@@ -23,19 +27,21 @@ export declare type TabsProps = {
      * Function to change active tab.
      */
     updateValue?: (index: number) => void;
-};
-declare type State = {
+    /**
+     * Tab ID for the testing.
+     */
+    "data-testid"?: string;
+}
+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: {
-        activeTabIndex: number;
-    };
-    switchTab(activeTabIndex: any): void;
-    renderChildren(children: any, activeIndex: any): JSX.Element;
+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;
 }
 export {};

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,
@@ -131,8 +143,8 @@ export var Tabs = /*#__PURE__*/function (_React$Component) {
       var children = this.props.children;
 
       if (typeof this.props.children === "function") {
-        // @ts-ignore
-        children = this.props.children({
+        var childrenCallable = this.props.children;
+        children = childrenCallable({
           switchTab: this.switchTab.bind(this)
         });
       }

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";

package/Tabs/Tabs.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Tabs.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","readme","ReactComponent","DeleteIcon","DoneIcon","withKnobs","Tabs","Tab","story","module","addDecorator","add","Div","props","padding","children","overflow","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,SAASC,cAAc,IAAIC,UAA3B;AACA,SAASD,cAAc,IAAIE,QAA3B;AACA,SAASC,SAAT,QAA0B,wBAA1B;AACA,SAASC,IAAT,EAAeC,GAAf;AAEA,IAAMC,KAAK,GAAGb,SAAS,CAAC,iBAAD,EAAoBc,MAApB,CAAvB;AAEAD,KAAK,CAACE,YAAN,CAAmBL,SAAnB;AACAG,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;AACF,MAAMC,GAAa,GAAG,SAAhBA,GAAgB,CAAAC,KAAK,EAAI;AAC3B,wBAAO;AAAK,MAAA,KAAK,EAAE;AAAEC,QAAAA,OAAO,EAAE;AAAX;AAAZ,OAA8BD,KAAK,CAACE,QAApC,CAAP;AACH,GAFD;;AAIA,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcd,MAAd,CADJ,eAEI,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAE;AAArB,kBACI,oBAAC,mBAAD,qBACI;AAAK,IAAA,KAAK,EAAE;AAAEe,MAAAA,QAAQ,EAAE;AAAZ;AAAZ,kBACI,oBAAC,IAAD,qBACI,oBAAC,GAAD;AAAK,IAAA,KAAK,EAAC,OAAX;AAAmB,IAAA,IAAI,eAAE,oBAAC,UAAD;AAAzB,kBACI,oBAAC,GAAD,yBADJ,CADJ,eAII,oBAAC,GAAD;AAAK,IAAA,KAAK,EAAC,OAAX;AAAmB,IAAA,IAAI,eAAE,oBAAC,QAAD;AAAzB,kBACI,oBAAC,GAAD,yBADJ,CAJJ,eAOI,oBAAC,GAAD;AAAK,IAAA,KAAK,EAAC;AAAX,kBACI,oBAAC,GAAD,+CADJ,CAPJ,eAUI,oBAAC,GAAD;AAAK,IAAA,IAAI,eAAE,oBAAC,QAAD;AAAX,kBACI,oBAAC,GAAD,gDADJ,CAVJ,CADJ,CADJ,CADJ,eAmBI,oBAAC,gBAAD,i0BAnBJ,CAFJ,CADJ;AA2CH,CAlDL,EAmDI;AAAEC,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACZ,IAAD,EAAOC,GAAP;AAAd;AAAR,CAnDJ","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 \"./../Tabs/README.md\";\n\nimport { ReactComponent as DeleteIcon } from \"./svg/baseline-delete-24px.svg\";\nimport { ReactComponent as DoneIcon } from \"./svg/baseline-done-24px.svg\";\nimport { withKnobs } from \"@storybook/addon-knobs\";\nimport { Tabs, Tab } from \"./index\";\n\nconst story = storiesOf(\"Components/Tabs\", module);\n\nstory.addDecorator(withKnobs);\nstory.add(\n    \"usage\",\n    () => {\n        const Div: React.FC = props => {\n            return <div style={{ padding: 50 }}>{props.children}</div>;\n        };\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"Tabs example\"}>\n                    <StorySandboxExample>\n                        <div style={{ overflow: \"hidden\" }}>\n                            <Tabs>\n                                <Tab label=\"Tab 1\" icon={<DeleteIcon />}>\n                                    <Div>Tab 1 content.</Div>\n                                </Tab>\n                                <Tab label=\"Tab 2\" icon={<DoneIcon />}>\n                                    <Div>Tab 2 content.</Div>\n                                </Tab>\n                                <Tab label=\"Tab 3\">\n                                    <Div>Tab 3 content - header without icon.</Div>\n                                </Tab>\n                                <Tab icon={<DoneIcon />}>\n                                    <Div>Tab 4 content - header without label.</Div>\n                                </Tab>\n                            </Tabs>\n                        </div>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                            <Tabs>\n                                <Tab label=\"Tab 1\" icon={<DeleteIcon />}>\n                                    <Div>Tab 1 content.</Div>\n                                </Tab>\n                                <Tab label=\"Tab 2\" icon={<DoneIcon />}>\n                                    <Div>Tab 2 content.</Div>\n                                </Tab>\n                                <Tab label=\"Tab 3\">\n                                    <Div>Tab 3 content - header without icon.</Div>\n                                </Tab>\n                                <Tab icon={<DoneIcon />}>\n                                    <Div>Tab 4 content - header without label.</Div>\n                                </Tab>\n                            </Tabs>\n                        `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Tabs, Tab] } }\n);\n"]}

package/Tabs/index.js.map

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

package/Tags/Tags.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
+import React from "react";
 import { FormComponentProps } from "../types";
-declare type Props = FormComponentProps & {
+declare type TagsProps = FormComponentProps & {
     /**
      * Component label.
      */
@@ -41,18 +41,13 @@ declare type Props = FormComponentProps & {
      */
     autoFocus?: boolean;
 };
-declare type State = {
+interface TagsState {
     inputValue: string;
-};
-export declare class Tags extends React.Component<Props, State> {
+}
+export declare class Tags extends React.Component<TagsProps, TagsState> {
     state: {
         inputValue: string;
     };
-    static defaultProps: {
-        validation: {
-            isValid: any;
-        };
-    };
     render(): JSX.Element;
 }
 export default Tags;

package/Tags/Tags.js

@@ -8,7 +8,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["validation", "value", "disabled", "onChange", "description"];
-import * as React from "react";
+import React from "react";
 import { Input } from "../Input";
 import { Chips, Chip } from "../Chips";
 import { css } from "emotion";
@@ -79,15 +79,18 @@ export var Tags = /*#__PURE__*/function (_React$Component) {
             inputValue: inputValue
           });
         },
-        onKeyDown: function onKeyDown(e) {
+        onKeyDown: function onKeyDown(ev) {
           if (!onChange) {
             return;
           }
 
           var newValue = Array.isArray(value) ? _toConsumableArray(value) : [];
           var inputValue = _this2.state.inputValue || "";
+          /**
+           * We must cast as keycode only works with Event | string type.
+           */
 
-          switch (keycode(e)) {
+          switch (keycode(ev)) {
             case "enter":
               if (inputValue) {
                 newValue.push(inputValue);
@@ -111,11 +114,15 @@ export var Tags = /*#__PURE__*/function (_React$Component) {
         }
       });
 
+      var _ref = validation || {},
+          validationIsValid = _ref.isValid,
+          validationMessage = _ref.message;
+
       return /*#__PURE__*/React.createElement("div", {
         className: tagsStyle
-      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Input, inputProps), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Input, inputProps), validationIsValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
         error: true
-      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description), Array.isArray(value) && value.length ? /*#__PURE__*/React.createElement(Chips, {
+      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description), Array.isArray(value) && value.length ? /*#__PURE__*/React.createElement(Chips, {
         disabled: disabled
       }, value.map(function (item, index) {
         return /*#__PURE__*/React.createElement(Chip, {
@@ -138,11 +145,4 @@ export var Tags = /*#__PURE__*/function (_React$Component) {
 
   return Tags;
 }(React.Component);
-
-_defineProperty(Tags, "defaultProps", {
-  validation: {
-    isValid: null
-  }
-});
-
 export default Tags;

package/Tags/Tags.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Tags.tsx"],"names":["React","Input","Chips","Chip","css","keycode","ReactComponent","BaselineCloseIcon","FormElementMessage","tagsStyle","position","width","left","top","zIndex","maxHeight","overflowY","backgroundColor","ul","listStyle","padding","li","Tags","inputValue","props","validation","value","disabled","onChange","description","otherInputProps","inputProps","state","setState","onKeyDown","ev","newValue","Array","isArray","push","length","splice","validationIsValid","isValid","validationMessage","message","map","item","index","Component"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { Input, InputProps } from \"~/Input\";\nimport { Chips, Chip } from \"../Chips\";\nimport { FormComponentProps } from \"~/types\";\nimport { css } from \"emotion\";\nimport keycode from \"keycode\";\nimport { ReactComponent as BaselineCloseIcon } from \"./icons/baseline-close-24px.svg\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { SyntheticEvent } from \"react\";\n\ntype TagsProps = FormComponentProps & {\n    /**\n     * Component label.\n     */\n    label?: string;\n\n    /**\n     * Are input and chosen tags disabled?\n     */\n    disabled?: boolean;\n\n    /**\n     * Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label.\n     */\n    placeholder?: string;\n\n    /**\n     * Description beneath the input.\n     */\n    description?: string;\n\n    /**\n     * A className for the root element.\n     */\n    className?: string;\n\n    /**\n     * Default structure of value, an object consisting of \"id\" and \"name\" keys. Different keys can be set using \"valueProp\" and \"textProp\" props.\n     */\n    value?: { id: string; name: string };\n\n    /**\n     * Callback that gets executed on change of input value.\n     */\n    onInput?: Function;\n\n    /**\n     * Callback that gets executed when the input is focused.\n     */\n    onFocus?: Function;\n\n    /**\n     * Automatically focus on the tags input.\n     */\n    autoFocus?: boolean;\n};\n\ninterface TagsState {\n    inputValue: string;\n}\n\nconst tagsStyle = css({\n    position: \"relative\",\n    \".mdc-elevation--z1\": {\n        position: \"absolute\",\n        width: \"calc(100% - 2px)\",\n        left: 1,\n        top: 56,\n        zIndex: 10,\n        maxHeight: 200,\n        overflowY: \"scroll\",\n        backgroundColor: \"var(--mdc-theme-surface)\"\n    },\n    ul: {\n        listStyle: \"none\",\n        width: \"100%\",\n        padding: 0,\n        li: {\n            padding: 10\n        }\n    }\n});\n\nexport class Tags extends React.Component<TagsProps, TagsState> {\n    public override state = {\n        inputValue: \"\"\n    };\n\n    public override render() {\n        const { validation, value, disabled, onChange, description, ...otherInputProps } =\n            this.props;\n\n        const inputProps: InputProps = {\n            ...otherInputProps,\n            value: this.state.inputValue,\n            onChange: (inputValue: string) => {\n                this.setState({ inputValue });\n            },\n            onKeyDown: (ev: SyntheticEvent) => {\n                if (!onChange) {\n                    return;\n                }\n\n                const newValue = Array.isArray(value) ? [...value] : [];\n                const inputValue = this.state.inputValue || \"\";\n                /**\n                 * We must cast as keycode only works with Event | string type.\n                 */\n                switch (keycode(ev as unknown as Event)) {\n                    case \"enter\":\n                        if (inputValue) {\n                            newValue.push(inputValue);\n                            onChange(newValue);\n                            this.setState({ inputValue: \"\" });\n                        }\n                        break;\n                    case \"backspace\":\n                        if (newValue.length && !inputValue) {\n                            newValue.splice(-1, 1);\n                            onChange(newValue);\n                            break;\n                        }\n                }\n            }\n        };\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <div className={tagsStyle}>\n                <div>\n                    <Input {...inputProps} />\n\n                    {validationIsValid === false && (\n                        <FormElementMessage error>{validationMessage}</FormElementMessage>\n                    )}\n                    {validationIsValid !== false && description && (\n                        <FormElementMessage>{description}</FormElementMessage>\n                    )}\n\n                    {Array.isArray(value) && value.length ? (\n                        <Chips disabled={disabled}>\n                            {value.map((item, index) => (\n                                <Chip\n                                    label={item}\n                                    trailingIcon={<BaselineCloseIcon />}\n                                    key={`${item}-${index}`}\n                                    onRemove={() => {\n                                        // On removal, let's update the value and call \"onChange\" callback.\n                                        if (onChange) {\n                                            const newValue = [...value];\n                                            newValue.splice(index, 1);\n                                            onChange(newValue);\n                                        }\n                                    }}\n                                />\n                            ))}\n                        </Chips>\n                    ) : null}\n                </div>\n            </div>\n        );\n    }\n}\n\nexport default Tags;\n"]}

package/Tags/Tags.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Tags.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","withKnobs","boolean","readme","Form","Tags","story","module","addDecorator","add","disabled","tags","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,IAAT;AAEA,IAAMC,KAAK,GAAGX,SAAS,CAAC,iBAAD,EAAoBY,MAApB,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,IAAI,EAAE,CAAC,SAAD,EAAY,MAAZ,EAAoB,MAApB;AAAR;AAAZ,KACK;AAAA,QAAGC,IAAH,QAAGA,IAAH;AAAA,wBACG,oBAAC,IAAD;AAAM,MAAA,IAAI,EAAC;AAAX,oBACI,oBAAC,IAAD;AACI,MAAA,KAAK,EAAC,MADV;AAEI,MAAA,QAAQ,EAAEF,QAFd;AAGI,MAAA,WAAW,EAAC;AAHhB,MADJ,CADH;AAAA,GADL,CADJ,CADJ,eAcI,oBAAC,gBAAD,miBAdJ,CAFJ,CADJ;AAmCH,CAxCL,EAyCI;AAAEG,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACT,IAAD;AAAd;AAAR,CAzCJ","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 { Tags } from \"./Tags\";\n\nconst story = storiesOf(\"Components/Tags\", 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={\"Single value\"}>\n                        <Form data={{ tags: [\"animals\", \"dogs\", \"food\"] }}>\n                            {({ Bind }) => (\n                                <Bind name=\"tags\">\n                                    <Tags\n                                        label=\"Tags\"\n                                        disabled={disabled}\n                                        description=\"Choose your tags\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                     <Form data={{ tags: ['animals', 'dogs', 'food'] }}>\n                        {({ Bind }) => (\n                            <Bind name=\"tags\">\n                                <Tags\n                                    label=\"Tags\"\n                                    disabled={disabled}\n                                    description=\"Choose your tags\"\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Tags] } }\n);\n"]}

package/Tags/index.js.map

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

package/Tooltip/Tooltip.d.ts

@@ -1,16 +1,17 @@
-import * as React from "react";
+import React from "react";
 import "rc-tooltip/assets/bootstrap_white.css";
 import "./style.scss";
-declare type TooltipProps = {
+declare type TooltipPropsContent = (() => React.ReactChild) | React.ReactChild | React.ReactFragment | React.ReactPortal;
+interface TooltipProps {
     children: React.ReactNode;
-    content: React.ReactNode;
+    content: TooltipPropsContent;
     trigger?: string;
     placement?: string;
     className?: string;
-};
-declare type State = {
+}
+interface State {
     tooltipIsOpen: boolean;
-};
+}
 /**
  * Use Tooltip component to display a list of choices, once the handler is triggered.
  */
@@ -18,7 +19,7 @@ declare class Tooltip extends React.Component<TooltipProps, State> {
     state: {
         tooltipIsOpen: boolean;
     };
-    onVisibleChange: (visible: boolean) => void;
+    onVisibleChange: (visible?: boolean | undefined) => void;
     render(): JSX.Element;
 }
 export { Tooltip };

package/Tooltip/Tooltip.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 { default as RcTooltip } from "rc-tooltip";
 import "rc-tooltip/assets/bootstrap_white.css";
 import "./style.scss";
@@ -34,7 +34,7 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "onVisibleChange", function (visible) {
       _this.setState({
-        tooltipIsOpen: visible
+        tooltipIsOpen: visible || false
       });
     });
 
@@ -44,7 +44,12 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
   _createClass(Tooltip, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(RcTooltip, Object.assign({
+      return /*#__PURE__*/React.createElement(RcTooltip
+      /**
+       * rc-tooltip types do not have animation as prop, but the rc-tooltip lib has.
+       */
+      // @ts-ignore
+      , Object.assign({
         animation: "fade",
         onVisibleChange: this.onVisibleChange,
         overlay: this.props.content

package/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Tooltip.tsx"],"names":["React","default","RcTooltip","Tooltip","tooltipIsOpen","visible","setState","onVisibleChange","props","content","children","Component"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,OAAO,IAAIC,SAApB,QAAqC,YAArC;AACA,OAAO,uCAAP;AACA;;AA6BA;AACA;AACA;IACMC,O;;;;;;;;;;;;;;;;4DACsB;AACpBC,MAAAA,aAAa,EAAE;AADK,K;;sEAIN,UAACC,OAAD,EAAuB;AACrC,YAAKC,QAAL,CAAc;AACVF,QAAAA,aAAa,EAAEC,OAAO,IAAI;AADhB,OAAd;AAGH,K;;;;;;;WAED,kBAAyB;AACrB,0BACI,oBAAC;AACG;AAChB;AACA;AACgB;AAJJ;AAKI,QAAA,SAAS,EAAE,MALf;AAMI,QAAA,eAAe,EAAE,KAAKE,eAN1B;AAOI,QAAA,OAAO,EAAE,KAAKC,KAAL,CAAWC;AAPxB,SAQQ,KAAKD,KARb,gBAUI;AAAM,QAAA,SAAS,EAAC;AAAhB,SACK,KAAKA,KAAL,CAAWE,QADhB,CAVJ,CADJ;AAgBH;;;;EA5BiBV,KAAK,CAACW,S;;AA+B5B,SAASR,OAAT","sourcesContent":["import React from \"react\";\nimport { default as RcTooltip } from \"rc-tooltip\";\nimport \"rc-tooltip/assets/bootstrap_white.css\";\nimport \"./style.scss\";\n\ntype TooltipPropsContent =\n    | (() => React.ReactChild)\n    | React.ReactChild\n    | React.ReactFragment\n    | React.ReactPortal;\n\ninterface TooltipProps {\n    // A component (eg. button) which will trigger the tooltip.\n    children: React.ReactNode;\n\n    // Content which will be shown inside the tooltip.\n    content: TooltipPropsContent;\n\n    // Defines which action will trigger the tooltip: \"hover\", \"click\" or \"focus\".\n    trigger?: string;\n\n    // Can be \"left\",\"right\",\"top\",\"bottom\", \"topLeft\", \"topRight\", \"bottomLeft\" or \"bottomRight\".\n    placement?: string;\n\n    // CSS class name\n    className?: string;\n}\n\ninterface State {\n    tooltipIsOpen: boolean;\n}\n\n/**\n * Use Tooltip component to display a list of choices, once the handler is triggered.\n */\nclass Tooltip extends React.Component<TooltipProps, State> {\n    public override state = {\n        tooltipIsOpen: false\n    };\n\n    onVisibleChange = (visible?: boolean) => {\n        this.setState({\n            tooltipIsOpen: visible || false\n        });\n    };\n\n    public override render() {\n        return (\n            <RcTooltip\n                /**\n                 * rc-tooltip types do not have animation as prop, but the rc-tooltip lib has.\n                 */\n                // @ts-ignore\n                animation={\"fade\"}\n                onVisibleChange={this.onVisibleChange}\n                overlay={this.props.content}\n                {...this.props}\n            >\n                <span className=\"webiny-ui-tooltip tooltip-content-wrapper\">\n                    {this.props.children}\n                </span>\n            </RcTooltip>\n        );\n    }\n}\n\nexport { Tooltip };\n"]}

package/Tooltip/Tooltip.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Tooltip.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandbox","readme","Tooltip","story","module","add","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,OAAT;AAEA,IAAMC,KAAK,GAAGN,SAAS,CAAC,oBAAD,EAAuBO,MAAvB,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,OAAD;AAAS,IAAA,OAAO,eAAE;AAAlB,kBACI,yEADJ,CADJ,CAFJ,CADJ;AAUH,CAbL,EAcI;AAAEK,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACL,OAAD;AAAd;AAAR,CAdJ","sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Tooltip/README.md\";\nimport { Tooltip } from \"./Tooltip\";\n\nconst story = storiesOf(\"Components/Tooltip\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"A simple tooltip, triggered with a button\"}>\n                    <Tooltip content={<span>This is a tooltip.</span>}>\n                        <span>Hover to see additional information.</span>\n                    </Tooltip>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Tooltip] } }\n);\n"]}

package/Tooltip/index.js.map

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

package/TopAppBar/TopAppBar.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { TopAppBarProps as RmwcTopAppBarProps } from "@rmwc/top-app-bar";
 export declare type TopAppBarProps = RmwcTopAppBarProps & {
     /**

package/TopAppBar/TopAppBar.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 { TopAppBar as RmwcTopAppBar, TopAppBarRow } from "@rmwc/top-app-bar";
 
 var TopAppBar = function TopAppBar(props) {

package/TopAppBar/TopAppBar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TopAppBar.tsx"],"names":["React","TopAppBar","RmwcTopAppBar","TopAppBarRow","props","children","rest"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SACIC,SAAS,IAAIC,aADjB,EAGIC,YAHJ,QAIO,mBAJP;;AAqBA,IAAMF,SAAS,GAAG,SAAZA,SAAY,CAACG,KAAD,EAA2B;AACzC,MAAQC,QAAR,GAA8BD,KAA9B,CAAQC,QAAR;AAAA,MAAqBC,IAArB,4BAA8BF,KAA9B;;AACA,sBACI,oBAAC,aAAD,EAAmBE,IAAnB,eACI,oBAAC,YAAD,QAAeD,QAAf,CADJ,CADJ;AAKH,CAPD;;AASA,SAASJ,SAAT","sourcesContent":["import React from \"react\";\n\nimport {\n    TopAppBar as RmwcTopAppBar,\n    TopAppBarProps as RmwcTopAppBarProps,\n    TopAppBarRow\n} from \"@rmwc/top-app-bar\";\n\nexport type TopAppBarProps = RmwcTopAppBarProps & {\n    /**\n     * Element children\n     */\n    children: React.ReactNode[] | React.ReactNode;\n    /**\n     * CSS class name\n     */\n    className?: string;\n    /**\n     * Style object\n     */\n    style?: React.CSSProperties;\n};\n\nconst TopAppBar = (props: TopAppBarProps) => {\n    const { children, ...rest } = props;\n    return (\n        <RmwcTopAppBar {...rest}>\n            <TopAppBarRow>{children}</TopAppBarRow>\n        </RmwcTopAppBar>\n    );\n};\n\nexport { TopAppBar };\n"]}

package/TopAppBar/TopAppBar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TopAppBar.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandbox","readme","withKnobs","text","ReactComponent","AutoRenewIcon","CloudDoneIcon","EnvelopeIcon","MenuIcon","TopAppBar","TopAppBarSection","TopAppBarNavigationIcon","TopAppBarTitle","TopAppBarActionItem","story","module","addDecorator","appendedCssOverrides","appendCssOverrides","css","head","document","getElementsByTagName","style","createElement","type","appendChild","createTextNode","add","title","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,EAAoBC,IAApB,QAAgC,wBAAhC;AAEA,SAASC,cAAc,IAAIC,aAA3B;AACA,SAASD,cAAc,IAAIE,aAA3B;AACA,SAASF,cAAc,IAAIG,YAA3B;AACA,SAASH,cAAc,IAAII,QAA3B;AAEA,SACIC,SADJ,EAEIC,gBAFJ,EAGIC,uBAHJ,EAIIC,cAJJ,EAKIC,mBALJ;AAQA,IAAMC,KAAK,GAAGjB,SAAS,CAAC,sBAAD,EAAyBkB,MAAzB,CAAvB;AACAD,KAAK,CAACE,YAAN,CAAmBd,SAAnB;AAEA;AACA;AACA;AACA;;AAEA,IAAIe,oBAAoB,GAAG,KAA3B;;AACA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,GAAM;AAC7B,MAAID,oBAAJ,EAA0B;AACtB;AACH;;AAEDA,EAAAA,oBAAoB,GAAG,IAAvB;AACA,MAAME,GAAG,yKAAT;AAAA,MAEIC,IAAI,GAAGC,QAAQ,CAACD,IAAT,IAAiBC,QAAQ,CAACC,oBAAT,CAA8B,MAA9B,EAAsC,CAAtC,CAF5B;AAAA,MAGIC,KAAK,GAAGF,QAAQ,CAACG,aAAT,CAAuB,OAAvB,CAHZ;AAKAD,EAAAA,KAAK,CAACE,IAAN,GAAa,UAAb;AACAF,EAAAA,KAAK,CAACG,WAAN,CAAkBL,QAAQ,CAACM,cAAT,CAAwBR,GAAxB,CAAlB;AACAC,EAAAA,IAAI,CAACM,WAAL,CAAiBH,KAAjB;AACH,CAdD;;AAgBAT,KAAK,CAACc,GAAN,CACI,OADJ,EAEI,YAAM;AACFV,EAAAA,kBAAkB;AAElB,MAAMW,KAAK,GAAG1B,IAAI,CAAC,OAAD,EAAU,QAAV,CAAlB;AACA,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcF,MAAd,CADJ,eAEI,oBAAC,YAAD,qBACI;AAAK,IAAA,SAAS,EAAC;AAAf,kBACI,oBAAC,SAAD,qBACI,oBAAC,gBAAD;AAAkB,IAAA,UAAU;AAA5B,kBACI,oBAAC,uBAAD;AAAyB,IAAA,IAAI,eAAE,oBAAC,QAAD;AAA/B,IADJ,eAEI,oBAAC,cAAD,QAAiB4B,KAAjB,CAFJ,CADJ,eAKI,oBAAC,gBAAD;AAAkB,IAAA,QAAQ;AAA1B,kBACI,oBAAC,mBAAD;AAAqB,IAAA,IAAI,eAAE,oBAAC,aAAD;AAA3B,IADJ,eAEI,oBAAC,mBAAD;AAAqB,IAAA,IAAI,eAAE,oBAAC,aAAD;AAA3B,IAFJ,eAGI,oBAAC,mBAAD;AAAqB,IAAA,IAAI,eAAE,oBAAC,YAAD;AAA3B,IAHJ,CALJ,CADJ,CADJ,CAFJ,CADJ;AAoBH,CA1BL,EA2BI;AACIC,EAAAA,IAAI,EAAE;AACFC,IAAAA,UAAU,EAAE,CACRtB,SADQ,EAERC,gBAFQ,EAGRC,uBAHQ,EAIRC,cAJQ,EAKRC,mBALQ;AADV;AADV,CA3BJ","sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../TopAppBar/README.md\";\nimport { withKnobs, text } from \"@storybook/addon-knobs\";\n\nimport { ReactComponent as AutoRenewIcon } from \"./icons/baseline-autorenew-24px.svg\";\nimport { ReactComponent as CloudDoneIcon } from \"./icons/baseline-cloud_done-24px.svg\";\nimport { ReactComponent as EnvelopeIcon } from \"./icons/baseline-email-24px.svg\";\nimport { ReactComponent as MenuIcon } from \"./icons/baseline-menu-24px.svg\";\n\nimport {\n    TopAppBar,\n    TopAppBarSection,\n    TopAppBarNavigationIcon,\n    TopAppBarTitle,\n    TopAppBarActionItem\n} from \"./index\";\n\nconst story = storiesOf(\"Components/TopAppBar\", module);\nstory.addDecorator(withKnobs);\n\n/**\n * Top app bar is by default rendered with \"position: fixed\", which then messes up the presentation.\n * For demonstration purposes, we had to switch to absolute positioning.\n */\n\nlet appendedCssOverrides = false;\nconst appendCssOverrides = () => {\n    if (appendedCssOverrides) {\n        return;\n    }\n\n    appendedCssOverrides = true;\n    const css = `.top-app-bar-storybook .mdc-top-app-bar { position: relative; top: 0 !important }\n                .top-app-bar-storybook .mdc-top-app-bar img { background: none; }`,\n        head = document.head || document.getElementsByTagName(\"head\")[0],\n        style = document.createElement(\"style\");\n\n    style.type = \"text/css\";\n    style.appendChild(document.createTextNode(css));\n    head.appendChild(style);\n};\n\nstory.add(\n    \"usage\",\n    () => {\n        appendCssOverrides();\n\n        const title = text(\"title\", \"Webiny\");\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <div className=\"top-app-bar-storybook\">\n                        <TopAppBar>\n                            <TopAppBarSection alignStart>\n                                <TopAppBarNavigationIcon icon={<MenuIcon />} />\n                                <TopAppBarTitle>{title}</TopAppBarTitle>\n                            </TopAppBarSection>\n                            <TopAppBarSection alignEnd>\n                                <TopAppBarActionItem icon={<CloudDoneIcon />} />\n                                <TopAppBarActionItem icon={<AutoRenewIcon />} />\n                                <TopAppBarActionItem icon={<EnvelopeIcon />} />\n                            </TopAppBarSection>\n                        </TopAppBar>\n                    </div>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    {\n        info: {\n            propTables: [\n                TopAppBar,\n                TopAppBarSection,\n                TopAppBarNavigationIcon,\n                TopAppBarTitle,\n                TopAppBarActionItem\n            ]\n        }\n    }\n);\n"]}

package/TopAppBar/TopAppBarActionItem.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { TopAppBarActionItem as RmwcTopAppBarActionItem } from "@rmwc/top-app-bar";
 
 var TopAppBarActionItem = function TopAppBarActionItem(props) {

package/TopAppBar/TopAppBarActionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TopAppBarActionItem.tsx"],"names":["React","TopAppBarActionItem","RmwcTopAppBarActionItem","props"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SACIC,mBAAmB,IAAIC,uBAD3B,QAGO,mBAHP;;AAOA,IAAMD,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACE,KAAD,EAAqC;AAC7D,sBAAO,oBAAC,uBAAD,EAA6BA,KAA7B,CAAP;AACH,CAFD;;AAIA,SAASF,mBAAT","sourcesContent":["import React from \"react\";\nimport {\n    TopAppBarActionItem as RmwcTopAppBarActionItem,\n    TopAppBarActionItemProps as RmwcTopAppBarActionItemProps\n} from \"@rmwc/top-app-bar\";\n\nexport type TopAppBarActionItemProps = RmwcTopAppBarActionItemProps;\n\nconst TopAppBarActionItem = (props: TopAppBarActionItemProps) => {\n    return <RmwcTopAppBarActionItem {...props} />;\n};\n\nexport { TopAppBarActionItem };\n"]}

package/TopAppBar/TopAppBarNavigationIcon.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { TopAppBarNavigationIcon as RmwcTopAppBarNavigationIcon } from "@rmwc/top-app-bar";
 
 var TopAppBarNavigationIcon = function TopAppBarNavigationIcon(props) {

package/TopAppBar/TopAppBarNavigationIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TopAppBarNavigationIcon.tsx"],"names":["React","TopAppBarNavigationIcon","RmwcTopAppBarNavigationIcon","props"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SACIC,uBAAuB,IAAIC,2BAD/B,QAGO,mBAHP;;AAOA,IAAMD,uBAAuB,GAAG,SAA1BA,uBAA0B,CAACE,KAAD,EAAyC;AACrE,sBAAO,oBAAC,2BAAD,EAAiCA,KAAjC,CAAP;AACH,CAFD;;AAIA,SAASF,uBAAT","sourcesContent":["import React from \"react\";\n\nimport {\n    TopAppBarNavigationIcon as RmwcTopAppBarNavigationIcon,\n    TopAppBarNavigationIconProps as RmwcTopAppBarNavigationIconProps\n} from \"@rmwc/top-app-bar\";\n\nexport type TopAppBarNavigationIconProps = RmwcTopAppBarNavigationIconProps;\n\nconst TopAppBarNavigationIcon = (props: TopAppBarNavigationIconProps) => {\n    return <RmwcTopAppBarNavigationIcon {...props} />;\n};\n\nexport { TopAppBarNavigationIcon };\n"]}

package/TopAppBar/TopAppBarPrimary.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 { TopAppBar } from "./TopAppBar";
 
 var TopAppBarPrimary = function TopAppBarPrimary(props) {

package/TopAppBar/TopAppBarPrimary.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TopAppBarPrimary.tsx"],"names":["React","TopAppBar","TopAppBarPrimary","props","children","other"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT;;AAIA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD,EAAkC;AACvD,MAAQC,QAAR,GAA+BD,KAA/B,CAAQC,QAAR;AAAA,MAAqBC,KAArB,4BAA+BF,KAA/B;;AACA,sBACI,oBAAC,SAAD,oBAAeE,KAAf;AAAsB,IAAA,SAAS,EAAE;AAAjC,MACKD,QADL,CADJ;AAKH,CAPD;;AASA,SAASF,gBAAT","sourcesContent":["import React from \"react\";\nimport { TopAppBar, TopAppBarProps } from \"./TopAppBar\";\n\nexport type TopAppBarPrimaryProps = TopAppBarProps;\n\nconst TopAppBarPrimary = (props: TopAppBarPrimaryProps) => {\n    const { children, ...other } = props;\n    return (\n        <TopAppBar {...other} className={\"primary\"}>\n            {children}\n        </TopAppBar>\n    );\n};\n\nexport { TopAppBarPrimary };\n"]}

package/TopAppBar/TopAppBarSecondary.js

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

package/TopAppBar/TopAppBarSecondary.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TopAppBarSecondary.tsx"],"names":["React","TopAppBar","TopAppBarSecondary","props","style","children","other"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT;;AAIA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAoC;AAC3D,qBAA2CA,KAA3C,CAAQC,KAAR;AAAA,MAAQA,KAAR,6BAAgB,EAAhB;AAAA,MAAoBC,QAApB,GAA2CF,KAA3C,CAAoBE,QAApB;AAAA,MAAiCC,KAAjC,4BAA2CH,KAA3C;;AACA,sBACI,oBAAC,SAAD,oBAAeG,KAAf;AAAsB,IAAA,KAAK,EAAEF;AAA7B,MACKC,QADL,CADJ;AAKH,CAPD;;AASA,SAASH,kBAAT","sourcesContent":["import React from \"react\";\nimport { TopAppBar, TopAppBarProps } from \"./TopAppBar\";\n\nexport type TopAppBarSecondaryProps = TopAppBarProps;\n\nconst TopAppBarSecondary = (props: TopAppBarSecondaryProps) => {\n    const { style = {}, children, ...other } = props;\n    return (\n        <TopAppBar {...other} style={style}>\n            {children}\n        </TopAppBar>\n    );\n};\n\nexport { TopAppBarSecondary };\n"]}

package/TopAppBar/TopAppBarSection.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { TopAppBarSectionProps as RmwcTopAppBarSectionProps } from "@rmwc/top-app-bar";
 export declare type TopAppBarSectionProps = RmwcTopAppBarSectionProps & {
     /**

package/TopAppBar/TopAppBarSection.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 { TopAppBarSection as RmwcTopAppBarSection } from "@rmwc/top-app-bar";
 
 var TopAppBarSection = function TopAppBarSection(props) {

package/TopAppBar/TopAppBarSection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TopAppBarSection.tsx"],"names":["React","TopAppBarSection","RmwcTopAppBarSection","props","children","rest"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SACIC,gBAAgB,IAAIC,oBADxB,QAGO,mBAHP;;AAsBA,IAAMD,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACE,KAAD,EAAkC;AACvD,MAAQC,QAAR,GAA8BD,KAA9B,CAAQC,QAAR;AAAA,MAAqBC,IAArB,4BAA8BF,KAA9B;;AACA,sBAAO,oBAAC,oBAAD,EAA0BE,IAA1B,EAAiCD,QAAjC,CAAP;AACH,CAHD;;AAKA,SAASH,gBAAT","sourcesContent":["import React from \"react\";\nimport {\n    TopAppBarSection as RmwcTopAppBarSection,\n    TopAppBarSectionProps as RmwcTopAppBarSectionProps\n} from \"@rmwc/top-app-bar\";\n\nexport type TopAppBarSectionProps = RmwcTopAppBarSectionProps & {\n    /**\n     * Element children\n     */\n    children: React.ReactNode[] | React.ReactNode;\n\n    /**\n     * Style object.\n     */\n    style?: React.CSSProperties;\n\n    /**\n     * CSS class name.\n     */\n    className?: string;\n};\n\nconst TopAppBarSection = (props: TopAppBarSectionProps) => {\n    const { children, ...rest } = props;\n    return <RmwcTopAppBarSection {...rest}>{children}</RmwcTopAppBarSection>;\n};\n\nexport { TopAppBarSection };\n"]}

package/TopAppBar/TopAppBarTitle.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { TopAppBarTitleProps as RmwcTopAppBarTitleProps } from "@rmwc/top-app-bar";
 export declare type TopAppBarTitleProps = RmwcTopAppBarTitleProps & {
     /**