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

package/Tags/Tags.js

@@ -1,21 +1,46 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Tags = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Input = require("../Input");
+
+var _Chips = require("../Chips");
+
+var _emotion = require("emotion");
+
+var _keycode = _interopRequireDefault(require("keycode"));
+
+var _baselineClose24px = require("./icons/baseline-close-24px.svg");
+
+var _FormElementMessage = require("../FormElementMessage");
+
 var _excluded = ["validation", "value", "disabled", "onChange", "description"];
-import * as React from "react";
-import { Input } from "../Input";
-import { Chips, Chip } from "../Chips";
-import { css } from "emotion";
-import keycode from "keycode";
-import { ReactComponent as BaselineCloseIcon } from "@svgr/webpack!./icons/baseline-close-24px.svg";
-import { FormElementMessage } from "../FormElementMessage";
-var tagsStyle = /*#__PURE__*/css({
+var tagsStyle = /*#__PURE__*/(0, _emotion.css)({
   position: "relative",
   ".mdc-elevation--z1": {
     position: "absolute",
@@ -36,30 +61,29 @@ var tagsStyle = /*#__PURE__*/css({
     }
   }
 }, "label:tagsStyle;");
-export var Tags = /*#__PURE__*/function (_React$Component) {
-  _inherits(Tags, _React$Component);
 
-  var _super = _createSuper(Tags);
+var Tags = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(Tags, _React$Component);
+
+  var _super = (0, _createSuper2.default)(Tags);
 
   function Tags() {
     var _this;
 
-    _classCallCheck(this, Tags);
+    (0, _classCallCheck2.default)(this, Tags);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       inputValue: ""
     });
-
     return _this;
   }
 
-  _createClass(Tags, [{
+  (0, _createClass2.default)(Tags, [{
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -70,24 +94,26 @@ export var Tags = /*#__PURE__*/function (_React$Component) {
           disabled = _this$props.disabled,
           onChange = _this$props.onChange,
           description = _this$props.description,
-          otherInputProps = _objectWithoutProperties(_this$props, _excluded);
-
-      var inputProps = _objectSpread(_objectSpread({}, otherInputProps), {}, {
+          otherInputProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+      var inputProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, otherInputProps), {}, {
         value: this.state.inputValue,
         onChange: function onChange(inputValue) {
           _this2.setState({
             inputValue: inputValue
           });
         },
-        onKeyDown: function onKeyDown(e) {
+        onKeyDown: function onKeyDown(ev) {
           if (!onChange) {
             return;
           }
 
-          var newValue = Array.isArray(value) ? _toConsumableArray(value) : [];
+          var newValue = Array.isArray(value) ? (0, _toConsumableArray2.default)(value) : [];
           var inputValue = _this2.state.inputValue || "";
+          /**
+           * We must cast as keycode only works with Event | string type.
+           */
 
-          switch (keycode(e)) {
+          switch ((0, _keycode.default)(ev)) {
             case "enter":
               if (inputValue) {
                 newValue.push(inputValue);
@@ -111,22 +137,25 @@ export var Tags = /*#__PURE__*/function (_React$Component) {
         }
       });
 
-      return /*#__PURE__*/React.createElement("div", {
+      var _ref = validation || {},
+          validationIsValid = _ref.isValid,
+          validationMessage = _ref.message;
+
+      return /*#__PURE__*/_react.default.createElement("div", {
         className: tagsStyle
-      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Input, inputProps), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+      }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Input.Input, inputProps), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.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.default.createElement(_FormElementMessage.FormElementMessage, null, description), Array.isArray(value) && value.length ? /*#__PURE__*/_react.default.createElement(_Chips.Chips, {
         disabled: disabled
       }, value.map(function (item, index) {
-        return /*#__PURE__*/React.createElement(Chip, {
+        return /*#__PURE__*/_react.default.createElement(_Chips.Chip, {
           label: item,
-          trailingIcon: /*#__PURE__*/React.createElement(BaselineCloseIcon, null),
+          trailingIcon: /*#__PURE__*/_react.default.createElement(_baselineClose24px.ReactComponent, null),
           key: "".concat(item, "-").concat(index),
           onRemove: function onRemove() {
             // On removal, let's update the value and call "onChange" callback.
             if (onChange) {
-              var newValue = _toConsumableArray(value);
-
+              var newValue = (0, _toConsumableArray2.default)(value);
               newValue.splice(index, 1);
               onChange(newValue);
             }
@@ -135,14 +164,9 @@ export var Tags = /*#__PURE__*/function (_React$Component) {
       })) : null));
     }
   }]);
-
   return Tags;
-}(React.Component);
-
-_defineProperty(Tags, "defaultProps", {
-  validation: {
-    isValid: null
-  }
-});
+}(_react.default.Component);
 
-export default Tags;
+exports.Tags = Tags;
+var _default = Tags;
+exports.default = _default;

package/Tags/Tags.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tagsStyle","css","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","keycode","push","length","splice","validationIsValid","isValid","validationMessage","message","map","item","index","React","Component"],"sources":["Tags.tsx"],"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"],"mappings":"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"}

package/Tags/Tags.stories.js

@@ -1,32 +1,43 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
-import { withKnobs, boolean } from "@storybook/addon-knobs";
-import readme from "./README.md";
-import { Form } from "@webiny/form";
-import { Tags } from "./Tags";
-var story = storiesOf("Components/Tags", module);
-story.addDecorator(withKnobs);
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _Story = require("@webiny/storybook-utils/Story");
+
+var _addonKnobs = require("@storybook/addon-knobs");
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _form = require("@webiny/form");
+
+var _Tags = require("./Tags");
+
+var story = (0, _react2.storiesOf)("Components/Tags", module);
+story.addDecorator(_addonKnobs.withKnobs);
 story.add("usage", function () {
-  var disabled = boolean("Disabled", false);
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+  var disabled = (0, _addonKnobs.boolean)("Disabled", false);
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {
     title: "Single value"
-  }, /*#__PURE__*/React.createElement(Form, {
+  }, /*#__PURE__*/_react.default.createElement(_form.Form, {
     data: {
       tags: ["animals", "dogs", "food"]
     }
   }, function (_ref) {
     var Bind = _ref.Bind;
-    return /*#__PURE__*/React.createElement(Bind, {
+    return /*#__PURE__*/_react.default.createElement(Bind, {
       name: "tags"
-    }, /*#__PURE__*/React.createElement(Tags, {
+    }, /*#__PURE__*/_react.default.createElement(_Tags.Tags, {
       label: "Tags",
       disabled: disabled,
       description: "Choose your tags"
     }));
-  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\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                    ")));
+  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\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                    ")));
 }, {
   info: {
-    propTables: [Tags]
+    propTables: [_Tags.Tags]
   }
 });

package/Tags/Tags.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","disabled","boolean","readme","tags","Bind","info","propTables","Tags"],"sources":["Tags.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\n\nimport { Form } from \"@webiny/form\";\nimport { 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"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AAEA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,iBAAV,EAA6BC,MAA7B,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAA,EAAQ,UAAR,EAAoB,KAApB,CAAjB;EAEA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI,6BAAC,UAAD;IAAM,IAAI,EAAE;MAAEC,IAAI,EAAE,CAAC,SAAD,EAAY,MAAZ,EAAoB,MAApB;IAAR;EAAZ,GACK;IAAA,IAAGC,IAAH,QAAGA,IAAH;IAAA,oBACG,6BAAC,IAAD;MAAM,IAAI,EAAC;IAAX,gBACI,6BAAC,UAAD;MACI,KAAK,EAAC,MADV;MAEI,QAAQ,EAAEJ,QAFd;MAGI,WAAW,EAAC;IAHhB,EADJ,CADH;EAAA,CADL,CADJ,CADJ,eAcI,6BAAC,uBAAD,miBAdJ,CAFJ,CADJ;AAmCH,CAxCL,EAyCI;EAAEK,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,UAAD;EAAd;AAAR,CAzCJ"}

package/Tags/index.js

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

package/Tags/index.js.map

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

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;
+export interface TooltipProps {
     children: React.ReactNode;
-    content: React.ReactNode;
+    content: TooltipPropsContent;
     trigger?: string;
-    placement?: string;
+    placement?: "left" | "right" | "top" | "bottom" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
     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) => void;
     render(): JSX.Element;
 }
 export { Tooltip };

package/Tooltip/Tooltip.js

@@ -1,60 +1,79 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import * as React from "react";
-import { default as RcTooltip } from "rc-tooltip";
-import "rc-tooltip/assets/bootstrap_white.css";
-import "./style.scss";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tooltip = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _rcTooltip = _interopRequireDefault(require("rc-tooltip"));
+
+require("rc-tooltip/assets/bootstrap_white.css");
+
+require("./style.scss");
 
 /**
  * Use Tooltip component to display a list of choices, once the handler is triggered.
  */
 var Tooltip = /*#__PURE__*/function (_React$Component) {
-  _inherits(Tooltip, _React$Component);
+  (0, _inherits2.default)(Tooltip, _React$Component);
 
-  var _super = _createSuper(Tooltip);
+  var _super = (0, _createSuper2.default)(Tooltip);
 
   function Tooltip() {
     var _this;
 
-    _classCallCheck(this, Tooltip);
+    (0, _classCallCheck2.default)(this, Tooltip);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       tooltipIsOpen: false
     });
-
-    _defineProperty(_assertThisInitialized(_this), "onVisibleChange", function (visible) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onVisibleChange", function (visible) {
       _this.setState({
-        tooltipIsOpen: visible
+        tooltipIsOpen: visible || false
       });
     });
-
     return _this;
   }
 
-  _createClass(Tooltip, [{
+  (0, _createClass2.default)(Tooltip, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(RcTooltip, Object.assign({
+      return /*#__PURE__*/_react.default.createElement(_rcTooltip.default
+      /**
+       * 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
-      }, this.props), /*#__PURE__*/React.createElement("span", {
+      }, this.props), /*#__PURE__*/_react.default.createElement("span", {
         className: "webiny-ui-tooltip tooltip-content-wrapper"
       }, this.props.children));
     }
   }]);
-
   return Tooltip;
-}(React.Component);
+}(_react.default.Component);
 
-export { Tooltip };
+exports.Tooltip = Tooltip;

package/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Tooltip","tooltipIsOpen","visible","setState","onVisibleChange","props","content","children","React","Component"],"sources":["Tooltip.tsx"],"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\nexport interface 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?:\n        | \"left\"\n        | \"right\"\n        | \"top\"\n        | \"bottom\"\n        | \"topLeft\"\n        | \"topRight\"\n        | \"bottomLeft\"\n        | \"bottomRight\";\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAqCA;AACA;AACA;IACMA,O;;;;;;;;;;;;;;;wFACsB;MACpBC,aAAa,EAAE;IADK,C;kGAIN,UAACC,OAAD,EAAuB;MACrC,MAAKC,QAAL,CAAc;QACVF,aAAa,EAAEC,OAAO,IAAI;MADhB,CAAd;IAGH,C;;;;;;WAED,kBAAyB;MACrB,oBACI,6BAAC;MACG;AAChB;AACA;MACgB;MAJJ;QAKI,SAAS,EAAE,MALf;QAMI,eAAe,EAAE,KAAKE,eAN1B;QAOI,OAAO,EAAE,KAAKC,KAAL,CAAWC;MAPxB,GAQQ,KAAKD,KARb,gBAUI;QAAM,SAAS,EAAC;MAAhB,GACK,KAAKA,KAAL,CAAWE,QADhB,CAVJ,CADJ;IAgBH;;;EA5BiBC,cAAA,CAAMC,S"}

package/Tooltip/Tooltip.stories.js

@@ -1,17 +1,26 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandbox } from "@webiny/storybook-utils/Story";
-import readme from "./../Tooltip/README.md";
-import { Tooltip } from "./Tooltip";
-var story = storiesOf("Components/Tooltip", module);
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _Story = require("@webiny/storybook-utils/Story");
+
+var _README = _interopRequireDefault(require("./../Tooltip/README.md"));
+
+var _Tooltip = require("./Tooltip");
+
+var story = (0, _react2.storiesOf)("Components/Tooltip", module);
 story.add("usage", function () {
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
     title: "A simple tooltip, triggered with a button"
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    content: /*#__PURE__*/React.createElement("span", null, "This is a tooltip.")
-  }, /*#__PURE__*/React.createElement("span", null, "Hover to see additional information."))));
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+    content: /*#__PURE__*/_react.default.createElement("span", null, "This is a tooltip.")
+  }, /*#__PURE__*/_react.default.createElement("span", null, "Hover to see additional information."))));
 }, {
   info: {
-    propTables: [Tooltip]
+    propTables: [_Tooltip.Tooltip]
   }
 });

package/Tooltip/Tooltip.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Tooltip"],"sources":["Tooltip.stories.tsx"],"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"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,oBAAV,EAAgCC,MAAhC,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,gBAAD;IAAS,OAAO,eAAE;EAAlB,gBACI,kFADJ,CADJ,CAFJ,CADJ;AAUH,CAbL,EAcI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,gBAAD;EAAd;AAAR,CAdJ"}

package/Tooltip/index.js

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

package/Tooltip/index.js.map

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

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,13 +1,24 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TopAppBar = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _topAppBar = require("@rmwc/top-app-bar");
+
 var _excluded = ["children"];
-import * as React from "react";
-import { TopAppBar as RmwcTopAppBar, TopAppBarRow } from "@rmwc/top-app-bar";
 
 var TopAppBar = function TopAppBar(props) {
   var children = props.children,
-      rest = _objectWithoutProperties(props, _excluded);
-
-  return /*#__PURE__*/React.createElement(RmwcTopAppBar, rest, /*#__PURE__*/React.createElement(TopAppBarRow, null, children));
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_topAppBar.TopAppBar, rest, /*#__PURE__*/_react.default.createElement(_topAppBar.TopAppBarRow, null, children));
 };
 
-export { TopAppBar };
+exports.TopAppBar = TopAppBar;

package/TopAppBar/TopAppBar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TopAppBar","props","children","rest"],"sources":["TopAppBar.tsx"],"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"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;;;AAqBA,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,KAAD,EAA2B;EACzC,IAAQC,QAAR,GAA8BD,KAA9B,CAAQC,QAAR;EAAA,IAAqBC,IAArB,0CAA8BF,KAA9B;EACA,oBACI,6BAAC,oBAAD,EAAmBE,IAAnB,eACI,6BAAC,uBAAD,QAAeD,QAAf,CADJ,CADJ;AAKH,CAPD"}