@webiny/ui 0.0.0-mt-2 → 0.0.0-unstable.06b2ede40f

package/Tabs/Tabs.js

@@ -1,145 +1,68 @@
-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 React from "react";
-import classNames from "classnames";
-import { TabBar } from "@rmwc/tabs";
-import { Tab } from "./Tab";
-var disabledStyles = {
-  opacity: 0.5,
-  pointerEvents: "none"
-};
+import React, { createContext, useCallback, useMemo, useState } from "react";
+import { Tabs as AdminTabs } from "@webiny/admin-ui";
+const VALUE_PREFIX = "tab-";
+export const DeprecatedTabsContext = /*#__PURE__*/createContext(undefined);
+
 /**
- * Use Tabs component to display a list of choices, once the handler is triggered.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Tabs` component from the `@webiny/admin-ui` package instead.
  */
-
-export var Tabs = /*#__PURE__*/function (_React$Component) {
-  _inherits(Tabs, _React$Component);
-
-  var _super = _createSuper(Tabs);
-
-  function Tabs() {
-    var _this;
-
-    _classCallCheck(this, Tabs);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+export const Tabs = ({
+  value,
+  onActivate,
+  ...props
+}) => {
+  const [activeTabIndex, setActiveIndex] = useState(0);
+  const [tabs, setTabs] = useState([]);
+  const activeIndex = value !== undefined ? value : activeTabIndex;
+  const onValueChange = useCallback(value => {
+    const parts = value.split(VALUE_PREFIX);
+    const index = parseInt(parts[1]);
+    if (isNaN(index)) {
+      return;
     }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      activeTabIndex: 0
+    setActiveIndex(index);
+    onActivate && onActivate(index);
+  }, [onActivate]);
+
+  /* We need to generate a key like this to trigger a proper component re-render when child tabs change. */
+  const newTabs = tabs.map((tab, index) => {
+    return /*#__PURE__*/React.createElement(AdminTabs.Tab, {
+      key: `${VALUE_PREFIX}${index}`,
+      value: `${VALUE_PREFIX}${index}`,
+      trigger: tab.label,
+      content: tab.children,
+      icon: tab.icon,
+      disabled: tab.disabled,
+      visible: tab.visible !== false,
+      "data-testid": tab["data-testid"]
     });
-
-    return _this;
-  }
-
-  _createClass(Tabs, [{
-    key: "switchTab",
-    value: function switchTab(activeTabIndex) {
-      if (typeof this.props.updateValue === "function") {
-        this.props.updateValue(activeTabIndex);
-      } else {
-        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 tabBar = /*#__PURE__*/React.createElement(TabBar, {
-        className: "webiny-ui-tabs__tab-bar",
-        activeTabIndex: activeIndex,
-        onActivate: function onActivate(evt) {
-          if (typeof _this2.props.updateValue === "function") {
-            _this2.props.updateValue(evt.detail.index);
-          } else {
-            _this2.setState({
-              activeTabIndex: evt.detail.index
-            });
-          }
-
-          _this2.props.onActivate && _this2.props.onActivate(evt.detail.index);
-        }
-      }, tabs.map(function (item, index) {
-        var style = item.style || {};
-
-        if (item.disabled) {
-          Object.assign(style, disabledStyles);
-        }
-
-        return /*#__PURE__*/React.createElement(Tab, Object.assign({
-          tag: "div",
-          style: style,
-          key: item.label + "-" + index,
-          "data-testid": item["data-testid"]
-        }, item.icon ? {
-          icon: item.icon
-        } : {}, item.label ? {
-          label: item.label
-        } : {}));
-      }));
-      var content = [];
-
-      for (var i = 0; i < tabs.length; i++) {
-        var current = tabs[i];
-
-        if (activeIndex === i) {
-          content.push( /*#__PURE__*/React.createElement("div", {
-            key: i
-          }, current.children));
-        } else {
-          content.push( /*#__PURE__*/React.createElement("div", {
-            key: i,
-            style: {
-              display: "none"
-            }
-          }, current.children));
+  });
+  const context = useMemo(() => ({
+    addTab(props) {
+      setTabs(tabs => {
+        const existingIndex = tabs.findIndex(tab => tab.id === props.id);
+        if (existingIndex > -1) {
+          return [...tabs.slice(0, existingIndex), props, ...tabs.slice(existingIndex + 1)];
         }
-      }
-
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames("webiny-ui-tabs", this.props.className)
-      }, tabBar, /*#__PURE__*/React.createElement("div", {
-        className: "webiny-ui-tabs__content mdc-tab-content"
-      }, content));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var activeIndex = this.props.value !== undefined ? this.props.value : this.state.activeTabIndex;
-      var children = this.props.children;
-
-      if (typeof this.props.children === "function") {
-        // @ts-ignore
-        children = this.props.children({
-          switchTab: this.switchTab.bind(this)
-        });
-      }
-
-      return this.renderChildren(children, activeIndex);
+        return [...tabs, props];
+      });
+    },
+    removeTab(id) {
+      setTabs(tabs => tabs.filter(tab => tab.id === id));
     }
-  }]);
+  }), [setTabs]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AdminTabs, Object.assign({}, props, {
+    value: `${VALUE_PREFIX}${activeIndex}`,
+    onValueChange: onValueChange,
+    tabs: newTabs,
+    size: "md",
+    separator: true,
+    spacing: "lg"
+  })), /*#__PURE__*/React.createElement(DeprecatedTabsContext.Provider, {
+    value: context
+  }, props.children));
+};
+Tabs.displayName = "Tabs";
 
-  return Tabs;
-}(React.Component);
+//# sourceMappingURL=Tabs.js.map

package/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","createContext","useCallback","useMemo","useState","Tabs","AdminTabs","VALUE_PREFIX","DeprecatedTabsContext","undefined","value","onActivate","props","activeTabIndex","setActiveIndex","tabs","setTabs","activeIndex","onValueChange","parts","split","index","parseInt","isNaN","newTabs","map","tab","createElement","Tab","key","trigger","label","content","children","icon","disabled","visible","context","addTab","existingIndex","findIndex","id","slice","removeTab","filter","Fragment","Object","assign","size","separator","spacing","Provider","displayName"],"sources":["Tabs.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React, { createContext, useCallback, useMemo, useState } from \"react\";\nimport { Tabs as AdminTabs } from \"@webiny/admin-ui\";\nimport type { TabProps } from \"./Tab\";\n\nconst VALUE_PREFIX = \"tab-\";\n\nexport type TabsProps = PropsWithChildren<{\n    /**\n     * Append an ID.\n     */\n    id?: string;\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     * Tab ID for the testing.\n     */\n    \"data-testid\"?: string;\n}>;\n\ninterface TabItem extends TabProps {\n    id: string;\n}\n\ninterface DeprecatedTabsContext {\n    addTab(props: TabItem): void;\n\n    removeTab(id: string): void;\n}\n\nexport const DeprecatedTabsContext = createContext<DeprecatedTabsContext | undefined>(undefined);\n\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n * Please use the `Tabs` component from the `@webiny/admin-ui` package instead.\n */\nexport const Tabs = ({ value, onActivate, ...props }: TabsProps) => {\n    const [activeTabIndex, setActiveIndex] = useState(0);\n    const [tabs, setTabs] = useState<TabItem[]>([]);\n\n    const activeIndex = value !== undefined ? value : activeTabIndex;\n\n    const onValueChange = useCallback(\n        (value: string) => {\n            const parts = value.split(VALUE_PREFIX);\n            const index = parseInt(parts[1]);\n\n            if (isNaN(index)) {\n                return;\n            }\n\n            setActiveIndex(index);\n            onActivate && onActivate(index);\n        },\n        [onActivate]\n    );\n\n    /* We need to generate a key like this to trigger a proper component re-render when child tabs change. */\n    const newTabs = tabs.map((tab, index) => {\n        return (\n            <AdminTabs.Tab\n                key={`${VALUE_PREFIX}${index}`}\n                value={`${VALUE_PREFIX}${index}`}\n                trigger={tab.label}\n                content={tab.children}\n                icon={tab.icon}\n                disabled={tab.disabled}\n                visible={tab.visible !== false}\n                data-testid={tab[\"data-testid\"]}\n            />\n        );\n    });\n\n    const context: DeprecatedTabsContext = useMemo(\n        () => ({\n            addTab(props) {\n                setTabs(tabs => {\n                    const existingIndex = tabs.findIndex(tab => tab.id === props.id);\n                    if (existingIndex > -1) {\n                        return [\n                            ...tabs.slice(0, existingIndex),\n                            props,\n                            ...tabs.slice(existingIndex + 1)\n                        ];\n                    }\n                    return [...tabs, props];\n                });\n            },\n            removeTab(id) {\n                setTabs(tabs => tabs.filter(tab => tab.id === id));\n            }\n        }),\n        [setTabs]\n    );\n\n    return (\n        <>\n            <AdminTabs\n                {...props}\n                value={`${VALUE_PREFIX}${activeIndex}`}\n                onValueChange={onValueChange}\n                tabs={newTabs}\n                size={\"md\"}\n                separator={true}\n                spacing={\"lg\"}\n            />\n            <DeprecatedTabsContext.Provider value={context}>\n                {props.children}\n            </DeprecatedTabsContext.Provider>\n        </>\n    );\n};\n\nTabs.displayName = \"Tabs\";\n"],"mappings":"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","ignoreList":[]}

package/Tabs/index.js

@@ -1,2 +1,4 @@
 export * from "./Tabs";
-export * from "./Tab";
+export * from "./Tab";
+
+//# sourceMappingURL=index.js.map

package/Tabs/index.js.map

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

package/Tags/Tags.d.ts

@@ -1,10 +1,11 @@
-import * as React from "react";
-import { FormComponentProps } from "../types";
-declare type Props = FormComponentProps & {
+import type { FocusEventHandler } from "react";
+import React from "react";
+import type { FormComponentProps } from "../types.js";
+interface TagsProps extends FormComponentProps {
     /**
      * Component label.
      */
-    label?: string;
+    label?: React.ReactNode;
     /**
      * Are input and chosen tags disabled?
      */
@@ -22,37 +23,29 @@ declare type Props = FormComponentProps & {
      */
     className?: string;
     /**
-     * Default structure of value, an object consisting of "id" and "name" keys. Different keys can be set using "valueProp" and "textProp" props.
+     * A list of tags.
      */
-    value?: {
-        id: string;
-        name: string;
-    };
+    value?: string[];
     /**
      * Callback that gets executed on change of input value.
      */
-    onInput?: Function;
+    onInput?: <T = unknown>(value: T) => void;
     /**
      * Callback that gets executed when the input is focused.
      */
-    onFocus?: Function;
+    onFocus?: FocusEventHandler<HTMLInputElement> | undefined;
     /**
      * Automatically focus on the tags input.
      */
     autoFocus?: boolean;
-};
-declare type State = {
-    inputValue: string;
-};
-export declare class Tags extends React.Component<Props, State> {
-    state: {
-        inputValue: string;
-    };
-    static defaultProps: {
-        validation: {
-            isValid: any;
-        };
-    };
-    render(): JSX.Element;
+    /**
+     * Protected tags cannot be removed by the user.
+     */
+    protectedTags?: string[];
 }
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Tags` component from the `@webiny/admin-ui` package instead.
+ */
+export declare const Tags: (props: TagsProps) => React.JSX.Element;
 export default Tags;

package/Tags/Tags.js

@@ -1,148 +1,12 @@
-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";
-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({
-  position: "relative",
-  ".mdc-elevation--z1": {
-    position: "absolute",
-    width: "calc(100% - 2px)",
-    left: 1,
-    top: 56,
-    zIndex: 10,
-    maxHeight: 200,
-    overflowY: "scroll",
-    backgroundColor: "var(--mdc-theme-surface)"
-  },
-  ul: {
-    listStyle: "none",
-    width: "100%",
-    padding: 0,
-    li: {
-      padding: 10
-    }
-  }
-}, "label:tagsStyle;");
-export var Tags = /*#__PURE__*/function (_React$Component) {
-  _inherits(Tags, _React$Component);
-
-  var _super = _createSuper(Tags);
-
-  function Tags() {
-    var _this;
-
-    _classCallCheck(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", {
-      inputValue: ""
-    });
-
-    return _this;
-  }
-
-  _createClass(Tags, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          validation = _this$props.validation,
-          value = _this$props.value,
-          disabled = _this$props.disabled,
-          onChange = _this$props.onChange,
-          description = _this$props.description,
-          otherInputProps = _objectWithoutProperties(_this$props, _excluded);
-
-      var inputProps = _objectSpread(_objectSpread({}, otherInputProps), {}, {
-        value: this.state.inputValue,
-        onChange: function onChange(inputValue) {
-          _this2.setState({
-            inputValue: inputValue
-          });
-        },
-        onKeyDown: function onKeyDown(e) {
-          if (!onChange) {
-            return;
-          }
-
-          var newValue = Array.isArray(value) ? _toConsumableArray(value) : [];
-          var inputValue = _this2.state.inputValue || "";
-
-          switch (keycode(e)) {
-            case "enter":
-              if (inputValue) {
-                newValue.push(inputValue);
-                onChange(newValue);
-
-                _this2.setState({
-                  inputValue: ""
-                });
-              }
-
-              break;
-
-            case "backspace":
-              if (newValue.length && !inputValue) {
-                newValue.splice(-1, 1);
-                onChange(newValue);
-                break;
-              }
-
-          }
-        }
-      });
-
-      return /*#__PURE__*/React.createElement("div", {
-        className: tagsStyle
-      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Input, inputProps), validation.isValid === 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, {
-        disabled: disabled
-      }, value.map(function (item, index) {
-        return /*#__PURE__*/React.createElement(Chip, {
-          label: item,
-          trailingIcon: /*#__PURE__*/React.createElement(BaselineCloseIcon, 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);
-
-              newValue.splice(index, 1);
-              onChange(newValue);
-            }
-          }
-        });
-      })) : null));
-    }
-  }]);
-
-  return Tags;
-}(React.Component);
-
-_defineProperty(Tags, "defaultProps", {
-  validation: {
-    isValid: null
-  }
-});
-
-export default Tags;
+import React from "react";
+import { Tags as AdminTags } from "@webiny/admin-ui";
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Tags` component from the `@webiny/admin-ui` package instead.
+ */
+export const Tags = props => {
+  return /*#__PURE__*/React.createElement(AdminTags, props);
+};
+export default Tags;
+
+//# sourceMappingURL=Tags.js.map

package/Tags/Tags.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Tags","AdminTags","props","createElement"],"sources":["Tags.tsx"],"sourcesContent":["import type { FocusEventHandler } from \"react\";\nimport React from \"react\";\nimport { Tags as AdminTags } from \"@webiny/admin-ui\";\nimport type { FormComponentProps } from \"~/types.js\";\n\ninterface TagsProps extends FormComponentProps {\n    /**\n     * Component label.\n     */\n    label?: React.ReactNode;\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     * A list of tags.\n     */\n    value?: string[];\n\n    /**\n     * Callback that gets executed on change of input value.\n     */\n    onInput?: <T = unknown>(value: T) => void;\n\n    /**\n     * Callback that gets executed when the input is focused.\n     */\n    onFocus?: FocusEventHandler<HTMLInputElement> | undefined;\n\n    /**\n     * Automatically focus on the tags input.\n     */\n    autoFocus?: boolean;\n\n    /**\n     * Protected tags cannot be removed by the user.\n     */\n    protectedTags?: string[];\n}\n\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n * Please use the `Tags` component from the `@webiny/admin-ui` package instead.\n */\nexport const Tags = (props: TagsProps) => {\n    return <AdminTags {...props} />;\n};\n\nexport default Tags;\n"],"mappings":"AACA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,IAAIC,SAAS,QAAQ,kBAAkB;AAuDpD;AACA;AACA;AACA;AACA,OAAO,MAAMD,IAAI,GAAIE,KAAgB,IAAK;EACtC,oBAAOH,KAAA,CAAAI,aAAA,CAACF,SAAS,EAAKC,KAAQ,CAAC;AACnC,CAAC;AAED,eAAeF,IAAI","ignoreList":[]}

package/Tags/index.js

@@ -1 +1,3 @@
-export * from "./Tags";
+export * from "./Tags";
+
+//# sourceMappingURL=index.js.map

package/Tags/index.js.map

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

package/TimeAgo/index.d.ts

@@ -0,0 +1,7 @@
+import { TimeAgo } from "@webiny/admin-ui";
+export type { TimeAgoProps, Opts, TDate } from "@webiny/admin-ui";
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `TimeAgo` component from the `@webiny/admin-ui` package instead.
+ */
+export { TimeAgo };

package/TimeAgo/index.js

@@ -0,0 +1,8 @@
+import { TimeAgo } from "@webiny/admin-ui";
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `TimeAgo` component from the `@webiny/admin-ui` package instead.
+ */
+export { TimeAgo };
+
+//# sourceMappingURL=index.js.map

package/TimeAgo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TimeAgo"],"sources":["index.ts"],"sourcesContent":["import { TimeAgo } from \"@webiny/admin-ui\";\nexport type { TimeAgoProps, Opts, TDate } from \"@webiny/admin-ui\";\n\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n * Please use the `TimeAgo` component from the `@webiny/admin-ui` package instead.\n */\nexport { TimeAgo };\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,kBAAkB;AAG1C;AACA;AACA;AACA;AACA,SAASA,OAAO","ignoreList":[]}

package/Tooltip/Tooltip.d.ts

@@ -1,24 +1,13 @@
-import * as React from "react";
-import "rc-tooltip/assets/bootstrap_white.css";
-import "./style.scss";
-declare type TooltipProps = {
+import React from "react";
+export interface TooltipProps {
     children: React.ReactNode;
     content: React.ReactNode;
     trigger?: string;
-    placement?: string;
+    placement?: "left" | "right" | "top" | "bottom" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
     className?: string;
-};
-declare type State = {
-    tooltipIsOpen: boolean;
-};
+}
 /**
- * Use Tooltip component to display a list of choices, once the handler is triggered.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Tooltip` component from the `@webiny/admin-ui` package instead.
  */
-declare class Tooltip extends React.Component<TooltipProps, State> {
-    state: {
-        tooltipIsOpen: boolean;
-    };
-    onVisibleChange: (visible: boolean) => void;
-    render(): JSX.Element;
-}
-export { Tooltip };
+export declare const Tooltip: ({ children, content, placement, className }: TooltipProps) => React.JSX.Element;

package/Tooltip/Tooltip.js

@@ -1,60 +1,65 @@
-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";
-
+import React, { useMemo } from "react";
+import { Tooltip as TooltipBase } from "@webiny/admin-ui";
 /**
- * Use Tooltip component to display a list of choices, once the handler is triggered.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Tooltip` component from the `@webiny/admin-ui` package instead.
  */
-var Tooltip = /*#__PURE__*/function (_React$Component) {
-  _inherits(Tooltip, _React$Component);
-
-  var _super = _createSuper(Tooltip);
-
-  function Tooltip() {
-    var _this;
-
-    _classCallCheck(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", {
-      tooltipIsOpen: false
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onVisibleChange", function (visible) {
-      _this.setState({
-        tooltipIsOpen: visible
-      });
-    });
-
-    return _this;
-  }
-
-  _createClass(Tooltip, [{
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/React.createElement(RcTooltip, Object.assign({
-        animation: "fade",
-        onVisibleChange: this.onVisibleChange,
-        overlay: this.props.content
-      }, this.props), /*#__PURE__*/React.createElement("span", {
-        className: "webiny-ui-tooltip tooltip-content-wrapper"
-      }, this.props.children));
-    }
-  }]);
-
-  return Tooltip;
-}(React.Component);
+export const Tooltip = ({
+  children,
+  content,
+  placement,
+  className = "webiny-ui-tooltip"
+}) => {
+  const {
+    side,
+    align
+  } = useMemo(() => {
+    const placementMapping = {
+      left: {
+        side: "left",
+        align: undefined
+      },
+      right: {
+        side: "right",
+        align: undefined
+      },
+      top: {
+        side: "top",
+        align: undefined
+      },
+      bottom: {
+        side: "bottom",
+        align: undefined
+      },
+      topLeft: {
+        side: "top",
+        align: "start"
+      },
+      topRight: {
+        side: "top",
+        align: "end"
+      },
+      bottomLeft: {
+        side: "bottom",
+        align: "start"
+      },
+      bottomRight: {
+        side: "bottom",
+        align: "end"
+      }
+    };
+    return placementMapping[placement ?? ""] || {
+      side: undefined,
+      align: undefined
+    };
+  }, [placement]);
+  return /*#__PURE__*/React.createElement(TooltipBase, {
+    trigger: children,
+    content: content,
+    className: className,
+    side: side,
+    align: align
+  });
+};
 
-export { Tooltip };
+//# sourceMappingURL=Tooltip.js.map