@steroidsjs/core 3.0.0-beta.1 → 3.0.0-beta.100

package/ui/layout/Notifications/Notifications.d.ts

@@ -14,6 +14,9 @@ import * as React from 'react';
  * ```
  */
 interface INotificationItem {
+    /**
+    * Идентификатор уведомления
+    */
     id?: number;
     /**
      * Цвет всплывающего уведомления
@@ -27,15 +30,43 @@ interface INotificationItem {
     message?: string;
     isClosing?: boolean;
 }
+/**
+ * Notifications
+ *
+ * Компонент Notifications представляет собой контейнер для отображения всплывающих уведомлений.
+ **/
 export interface INotificationsProps {
+    /**
+    * Исходные уведомления
+    */
     initialFlashes?: {
         [key: string]: string | any;
     };
+    /**
+    * Коллекция уведомлений
+    */
     notifications?: INotificationItem[];
+    /**
+    * Задержка перед закрытием
+    */
     closeTimeoutMs?: number;
+    /**
+    * Дополнительный CSS-класс для элемента отображения
+    */
     className?: CssClassName;
-    view?: any;
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
+    view?: CustomView;
+    /**
+     * Переопределение view React компонента для кастомизации отображения элемента
+     * @example MyCustomView
+     */
     itemView?: any;
+    /**
+    * Позиционирование элемента уведомления
+    */
     position?: string;
     [key: string]: any;
 }

package/ui/layout/Notifications/Notifications.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -42,17 +46,17 @@ var hooks_1 = require("../../../hooks");
 var notifications_1 = require("../../../actions/notifications");
 var notifications_2 = require("../../../reducers/notifications");
 function Notifications(props) {
-    var _a = hooks_1.useSelector(function (state) { return ({
-        notifications: notifications_2.getNotifications(state),
-        position: notifications_2.getPosition(state)
+    var _a = (0, hooks_1.useSelector)(function (state) { return ({
+        notifications: (0, notifications_2.getNotifications)(state),
+        position: (0, notifications_2.getPosition)(state)
     }); }), notifications = _a.notifications, position = _a.position;
-    var components = hooks_1.useComponents();
-    var _b = react_1.useState(props.notifications || []), innerNotifications = _b[0], setInnerNotifications = _b[1];
-    var _c = react_1.useState([]), closing = _c[0], setClosing = _c[1];
-    var dispatch = useDispatch_1["default"]();
-    react_use_1.useMount(function () {
+    var components = (0, hooks_1.useComponents)();
+    var _b = (0, react_1.useState)(props.notifications || []), innerNotifications = _b[0], setInnerNotifications = _b[1];
+    var _c = (0, react_1.useState)([]), closing = _c[0], setClosing = _c[1];
+    var dispatch = (0, useDispatch_1["default"])();
+    (0, react_use_1.useMount)(function () {
         if (props.initialFlashes) {
-            dispatch(notifications_1.setFlashes(props.initialFlashes));
+            dispatch((0, notifications_1.setFlashes)(props.initialFlashes));
             // Disable scroll or scroll to top on show notifications
             if (!process.env.IS_SSR) {
                 if ('scrollRestoration' in window.history) {
@@ -64,8 +68,8 @@ function Notifications(props) {
             }
         }
     });
-    var prevNotifications = react_use_1.usePrevious(notifications);
-    react_use_1.useUpdateEffect(function () {
+    var prevNotifications = (0, react_use_1.usePrevious)(notifications);
+    (0, react_use_1.useUpdateEffect)(function () {
         if (prevNotifications !== notifications) {
             var propsIds_1 = notifications.map(function (item) { return item.id; });
             var toClose_1 = innerNotifications.filter(function (item) { return !propsIds_1.includes(item.id); });
@@ -76,9 +80,9 @@ function Notifications(props) {
             }
         }
     }, [closing, innerNotifications, notifications, prevNotifications, props.closeTimeoutMs]);
-    var onClose = react_1.useCallback(function (notificationId) { return dispatch(notifications_1.closeNotification(notificationId)); }, [dispatch]);
+    var onClose = (0, react_1.useCallback)(function (notificationId) { return dispatch((0, notifications_1.closeNotification)(notificationId)); }, [dispatch]);
     var closingIds = closing.map(function (item) { return item.id; });
-    var items = react_1.useMemo(function () { return (orderBy_1["default"]([].concat(innerNotifications).concat(closing), ['id'], 'asc')
+    var items = (0, react_1.useMemo)(function () { return ((0, orderBy_1["default"])([].concat(innerNotifications).concat(closing), ['id'], 'asc')
         .map(function (item) { return (__assign(__assign({}, item), { isClosing: closingIds.includes(item.id), onClose: function () { return onClose(item.id); } })); })); }, [innerNotifications, closing, closingIds, onClose]);
     var NotificationsItemView = props.itemView || components.ui.getView('layout.NotificationsItemView');
     return components.ui.renderView(props.view || 'layout.NotificationsView', __assign(__assign({}, props), { position: position || '', children: items.map(function (item) { return (React.createElement(NotificationsItemView, __assign({ key: item.id }, item))); }) }));

package/ui/layout/Portal.d.ts

@@ -1 +1,6 @@
-export default function Portal(props: any): any;
+import React from 'react';
+interface IPortalProps {
+    children?: React.ReactNode;
+}
+export default function Portal(props: IPortalProps): React.ReactPortal;
+export {};

package/ui/layout/Portal.js

@@ -1,21 +1,21 @@
 "use strict";
 exports.__esModule = true;
-var react_dom_1 = require("react-dom");
 var react_1 = require("react");
+var react_dom_1 = require("react-dom");
 var react_use_1 = require("react-use");
 var hooks_1 = require("../../hooks");
 function Portal(props) {
-    var components = hooks_1.useComponents();
-    var elementRef = react_1.useRef(null);
+    var components = (0, hooks_1.useComponents)();
+    var elementRef = (0, react_1.useRef)(null);
     if (!elementRef.current) {
         elementRef.current = document.createElement('div');
         elementRef.current.className = 'Portal';
     }
-    react_use_1.useMount(function () {
+    (0, react_use_1.useMount)(function () {
         document.body.appendChild(elementRef.current);
         components.ui.setPortalElement(elementRef.current);
     });
-    react_use_1.useUnmount(function () {
+    (0, react_use_1.useUnmount)(function () {
         if (elementRef.current) {
             components.ui.setPortalElement(null);
             document.body.removeChild(elementRef.current);
@@ -24,6 +24,6 @@ function Portal(props) {
     if (process.env.IS_SSR) {
         return null;
     }
-    return react_dom_1.createPortal(props.children, elementRef.current);
+    return (0, react_dom_1.createPortal)(props.children, elementRef.current);
 }
 exports["default"] = Portal;

package/ui/layout/ProgressBar/ProgressBar.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -23,19 +27,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var React = __importStar(require("react"));
-var Icon_1 = __importDefault(require("../../icon/Icon/Icon"));
+var Icon_1 = __importDefault(require("../../content/Icon/Icon"));
 var hooks_1 = require("../../../hooks");
 function ProgressBar(props) {
-    var components = hooks_1.useComponents();
+    var components = (0, hooks_1.useComponents)();
     var getLabel = (function () {
-        if (!props.showLabel)
+        if (!props.showLabel) {
             return null;
-        if (props.icon)
+        }
+        if (props.icon) {
             return props.icon(props.status, props.percent);
-        if (props.status === 'success')
+        }
+        if (props.status === 'success') {
             return React.createElement(Icon_1["default"], { name: "check" });
-        if (props.status === 'exception')
+        }
+        if (props.status === 'exception') {
             return React.createElement(Icon_1["default"], { name: "times" });
+        }
         return props.label(props.percent);
     });
     if (props.type === 'line') {
@@ -48,6 +56,6 @@ ProgressBar.defaultProps = {
     size: 'medium',
     type: 'line',
     showLabel: true,
-    label: function (percent) { return percent + "%"; }
+    label: function (percent) { return "".concat(percent, "%"); }
 };
 exports["default"] = ProgressBar;

package/ui/layout/ProgressBar/index.d.ts

@@ -1,2 +1,2 @@
-import ProgressBar from "./ProgressBar";
+import ProgressBar from './ProgressBar';
 export default ProgressBar;

package/ui/layout/Sidebar/Sidebar.d.ts

@@ -0,0 +1,82 @@
+import React from 'react';
+import { IMenuProps } from '../../content/Menu/Menu';
+import { INavItem } from '../../nav/Nav/Nav';
+import { IIconProps } from '../../content/Icon/Icon';
+export interface ISidebarItem extends INavItem {
+    /**
+    * Наличие верней границы у элемента
+    */
+    border?: boolean;
+}
+/**
+* Sidebar
+*
+* Компонент Sidebar представляет собой боковое меню с возможностью гибкой настройки
+*/
+export interface ISidebarProps extends IUiComponent {
+    /**
+     * Объект с информацией о логотипе.
+     */
+    logo?: {
+        /**
+         * Текст или React-элемент для отображения логотипа.
+         */
+        label: string;
+        /**
+         * Путь к иконке или React-элемент для отображения иконки логотипа.
+         */
+        icon: string | React.ReactElement;
+    };
+    /**
+     * Объект с информацией о пользователе.
+     */
+    user?: {
+        /**
+         * URL изображения пользователя.
+         */
+        picture: string;
+        /**
+         * Имя пользователя.
+         */
+        name: string;
+    };
+    /**
+     * Props для компонента Menu.
+     */
+    menu?: IMenuProps;
+    /**
+     * Элементы навигации для компонента Nav.
+     */
+    items?: ISidebarItem[];
+    /**
+     * Флаг, определяющий, следует ли разделять элементы навигации.
+     */
+    hasSeparatedNavItem?: boolean;
+    /**
+     * Массив объектов с информацией об иконках для футера.
+     */
+    footerIcons?: IIconProps[];
+    /**
+     * Флаг, определяющий, будет ли сайдбар открытым по умолчанию.
+     */
+    isOpenedByDefault?: boolean;
+    /**
+     * Callback-функция, вызывается при клике на элемент навигации.
+     * @param itemId - идентификатор элемента навигации, по которому произошел клик.
+     */
+    onClickItem?: (itemId: number) => void;
+    [key: string]: any;
+}
+export interface ISidebarViewProps extends ISidebarProps {
+    isOpened: boolean;
+    toggleSidebar: VoidFunction;
+    onClickNav: (itemId: number) => void;
+}
+declare function Sidebar(props: ISidebarProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare namespace Sidebar {
+    var defaultProps: {
+        hasSeparatedNavItem: boolean;
+        isOpenedByDefault: boolean;
+    };
+}
+export default Sidebar;

package/{hoc/components.js → ui/layout/Sidebar/Sidebar.js}

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -30,29 +34,24 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 exports.__esModule = true;
-var React = __importStar(require("react"));
-var hooks_1 = require("../hooks");
-var exportComponents = function (components, names) {
-    var props = {};
-    names.forEach(function (items) {
-        [].concat(items).forEach(function (name) {
-            props[name] = components[name];
-        });
-    });
-    return props;
+var react_1 = __importStar(require("react"));
+var hooks_1 = require("../../../hooks");
+function Sidebar(props) {
+    var components = (0, hooks_1.useComponents)();
+    var _a = (0, react_1.useState)(props.isOpenedByDefault), isOpened = _a[0], setIsOpened = _a[1];
+    var toggleSidebar = (0, react_1.useCallback)(function () {
+        var newState = !isOpened;
+        setIsOpened(newState);
+    }, [isOpened]);
+    var onClickNav = react_1["default"].useCallback(function (itemId) {
+        if (props === null || props === void 0 ? void 0 : props.onClickItem) {
+            props.onClickItem(itemId);
+        }
+    }, [props]);
+    return components.ui.renderView(props.view || 'layout.SidebarView', __assign(__assign({}, props), { isOpened: isOpened, toggleSidebar: toggleSidebar, onClickNav: onClickNav }));
+}
+exports["default"] = Sidebar;
+Sidebar.defaultProps = {
+    hasSeparatedNavItem: false,
+    isOpenedByDefault: true
 };
-/**
- * Components HOC
- * Прокидывает в пропсы компоненты приложения. Ключ соответствует названию компонента, объявленного при инициализации
- * приложения (см. `Application.tsx`)
- */
-exports["default"] = (function () {
-    var names = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        names[_i] = arguments[_i];
-    }
-    return function (WrappedComponent) { return function ComponentsHoc(props) {
-        var components = hooks_1.useComponents();
-        return (React.createElement(WrappedComponent, __assign({}, props, exportComponents(components, names), { components: components })));
-    }; };
-});

package/ui/layout/Sidebar/index.d.ts

@@ -0,0 +1,2 @@
+import Sidebar from './Sidebar';
+export default Sidebar;

package/ui/layout/Sidebar/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var Sidebar_1 = __importDefault(require("./Sidebar"));
+exports["default"] = Sidebar_1["default"];

package/ui/layout/Skeleton/Skeleton.d.ts

@@ -1,18 +1,41 @@
 import * as React from 'react';
 export interface ISkeletonViewProps {
-    className?: string;
+    className?: CssClassName;
     children?: React.ReactNode;
     animation?: 'pulse' | 'wave';
     type?: 'text' | 'rect' | 'circle';
     height?: string | number;
     width?: string | number;
 }
+/**
+ * Компонент Skeleton представляет собой заглушку для отображения временных данных
+ * во время загрузки или ожидания загрузки реальных данных.
+ **/
 export interface ISkeletonProps {
-    className?: string;
+    /**
+    * Дополнительные CSS классы
+    * @example my-block
+    */
+    className?: CssClassName;
+    /**
+    * Дочерние элементы
+    */
     children?: React.ReactNode;
+    /**
+    * Тип анимации
+    */
     animation?: 'pulse' | 'wave';
+    /**
+    * Тип компонента
+    */
     type?: 'text' | 'rect' | 'circle';
+    /**
+    * Высота элемента
+    */
     height?: string | number;
+    /**
+    * Ширина элемента
+    */
     width?: string | number;
 }
 declare function Skeleton(props: ISkeletonProps): JSX.Element;

package/ui/layout/Skeleton/Skeleton.js

@@ -2,7 +2,7 @@
 exports.__esModule = true;
 var hooks_1 = require("../../../hooks");
 function Skeleton(props) {
-    return hooks_1.useComponents().ui.renderView('layout.SkeletonView', props);
+    return (0, hooks_1.useComponents)().ui.renderView('layout.SkeletonView', props);
 }
 Skeleton.defaultProps = {
     animation: 'pulse',

package/ui/layout/Skeleton/index.d.ts

@@ -1,2 +1,2 @@
-import Skeleton from "./Skeleton";
+import Skeleton from './Skeleton';
 export default Skeleton;

package/ui/layout/Tooltip/Tooltip.d.ts

@@ -1,55 +1,96 @@
 /// <reference types="react" />
-/**
- * Варианты позиций всплывающей подсказки
- * @example 'top'
- */
-declare type TooltipPosition = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | string;
-export interface TooltipArrowPosition {
+import { PositionType } from '../../../hooks/useAbsolutePositioning';
+export interface ITooltipArrowPosition {
+    /**
+    * Позиция стрелки слева
+    */
     left?: number | string;
+    /**
+    * Позиция стрелки справа
+    */
     right?: number | string;
+    /**
+    * Позиция стрелки сверху
+    */
     top?: number | string;
+    /**
+    * Позиция стрелки снизу
+    */
     bottom?: number | string;
 }
-export interface TooltipStylePosition {
+export interface ITooltipStylePosition {
+    /**
+    * Позиция Tooltip слева
+    */
     left: 'unset' | number;
+    /**
+    * Позиция Tooltip справа
+    */
     right: 'unset' | number;
+    /**
+    * Позиция Tooltip сверху
+    */
     top: 'unset' | number;
 }
+/**
+ * Tooltip
+ *
+ * Компонент Tooltip предоставляет всплывающую подсказку для дочерних элементов.
+ **/
 export interface ITooltipProps {
     /**
      * Текст подсказки
      * @example 'Это всплывающая подсказка.'
      */
     content?: string | any;
+    /**
+     * Вложенные элементы
+     */
+    children?: string | any;
     /**
      * Позиционирование подсказки, относительно целевого элемента
      */
-    position?: TooltipPosition;
+    position?: PositionType;
     /**
      * Показывать ли подсказку сразу после рендера страницы
      * @example true
      */
     defaultVisible?: boolean;
+    /**
+     * Время анимации в миллисекундах
+     * @example 200
+     */
+    animationMs?: number;
+    /**
+     * Отступ от элемента
+     * @example 16
+     */
+    gap?: number;
     /**
      * Стили для абсолютного позиционирования подсказки
      */
-    style?: TooltipStylePosition;
+    style?: ITooltipStylePosition;
     /**
      * Стили для позиционирования стрелки
      * @example {left: 10}
      */
-    arrowPosition?: TooltipArrowPosition;
+    arrowPosition?: ITooltipArrowPosition;
     /**
      * Рассчет позиции подсказки
      */
-    calculatePosition?: (tooltipDimensions: object, arrowDimensions: object) => void;
+    calculatePosition?: (tooltipDimensions: Record<string, any>, arrowDimensions: Record<string, any>) => void;
+    /**
+     * Дополнительный CSS-класс для элемента отображения
+     */
+    className?: CssClassName;
     [key: string]: any;
 }
 export interface ITooltipViewProps extends ITooltipProps {
     isTooltipVisible: boolean;
     content: string | any;
-    position: TooltipPosition;
-    style: TooltipStylePosition;
+    position: PositionType;
+    style: ITooltipStylePosition;
+    className?: CssClassName;
 }
 declare function Tooltip(props: ITooltipProps): JSX.Element;
 declare namespace Tooltip {

package/ui/layout/Tooltip/Tooltip.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -25,8 +29,8 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var react_1 = require("react");
 var react_use_1 = require("react-use");
-var calculate_1 = __importDefault(require("../Tooltip/calculate"));
 var hooks_1 = require("../../../hooks");
+var useAbsolutePositioning_1 = __importDefault(require("../../../hooks/useAbsolutePositioning"));
 var TooltipPortalInner_1 = __importDefault(require("./TooltipPortalInner"));
 /*
 * @Todo + check all calculations + describe
@@ -39,51 +43,22 @@ var TooltipPortalInner_1 = __importDefault(require("./TooltipPortalInner"));
 *       - refactor code
 * */
 function Tooltip(props) {
-    var components = hooks_1.useComponents();
-    var _a = react_1.useState(false), isComponentExist = _a[0], setIsComponentExist = _a[1];
-    var _b = react_1.useState(props.defaultVisible), isTooltipVisible = _b[0], setIsTooltipVisible = _b[1];
-    var _c = react_1.useState({
-        left: null,
-        right: null,
-        top: null
-    }), style = _c[0], setStyle = _c[1];
-    var _d = react_1.useState({
-        left: null,
-        right: null,
-        top: null,
-        bottom: null
-    }), arrowPosition = _d[0], setArrowPosition = _d[1];
-    var timerRef = react_1.useRef(null);
-    var positionRef = react_1.useRef(props.position);
-    var childRef = react_1.useRef(null);
-    var onShowTooltip = react_1.useCallback(function () {
-        if (timerRef.current) {
-            clearTimeout(timerRef.current);
-        }
-        setIsComponentExist(true);
-        setIsTooltipVisible(false);
-        // TODO: How to wait setState callback?
-        setTimeout(function () { return setIsTooltipVisible(true); });
+    var components = (0, hooks_1.useComponents)();
+    var _a = (0, useAbsolutePositioning_1["default"])({
+        componentDestroyDelay: props.animationMs,
+        position: props.position,
+        children: props.children,
+        gap: props.gap,
+        defaultVisible: props.defaultVisible
+    }), isComponentExist = _a.isComponentExist, isComponentVisible = _a.isComponentVisible, calculateAbsolutePosition = _a.calculateAbsolutePosition, onShow = _a.onShow, onHide = _a.onHide, position = _a.position, arrowPosition = _a.arrowPosition, style = _a.style;
+    var childRef = (0, react_1.useRef)(null);
+    var calculatePosition = (0, react_1.useCallback)(function (tooltipSize, arrowSize) {
+        calculateAbsolutePosition(position, childRef.current, tooltipSize, arrowSize);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    var onHideTooltip = react_1.useCallback(function () {
-        setIsTooltipVisible(false);
-        if (timerRef.current) {
-            clearTimeout(timerRef.current);
-        }
-        timerRef.current = setTimeout(function () { return setIsComponentExist(false); }, props.animationMs);
-    }, [props.animationMs]);
-    // Основная функция расчета позиции
-    var calculatePosition = react_1.useCallback(function (tooltipSize, arrowSize) {
-        var result = calculate_1["default"](props.gap, positionRef.current, childRef.current, tooltipSize, arrowSize);
-        positionRef.current = result.position;
-        setStyle(result.style);
-        if (result.arrowPosition) {
-            setArrowPosition(result.arrowPosition);
-        }
-    }, [props.gap]);
-    react_use_1.useMount(function () {
-        if (isTooltipVisible) {
-            onShowTooltip();
+    (0, react_use_1.useMount)(function () {
+        if (isComponentVisible) {
+            onShow();
         }
     });
     if (!props.content) {
@@ -97,12 +72,12 @@ function Tooltip(props) {
         childrenElement
             ? React.cloneElement(childrenElement, {
                 ref: childRef,
-                onMouseOver: onShowTooltip,
-                onMouseOut: onHideTooltip
+                onMouseOver: onShow,
+                onMouseOut: onHide
             })
-            : (React.createElement("span", { ref: childRef, onFocus: onShowTooltip, onMouseOver: onShowTooltip, onBlur: onHideTooltip, onMouseOut: onHideTooltip }, props.children)),
+            : (React.createElement("span", { ref: childRef, onFocus: onShow, onMouseOver: onShow, onBlur: onHide, onMouseOut: onHide }, props.children)),
         isComponentExist && (React.createElement(TooltipPortalInner_1["default"], null,
-            React.createElement(TooltipView, { isTooltipVisible: isTooltipVisible, content: props.content, position: positionRef.current, style: style, arrowPosition: arrowPosition, calculatePosition: calculatePosition })))));
+            React.createElement(TooltipView, { isTooltipVisible: isComponentVisible, content: props.content, position: position, style: style, arrowPosition: arrowPosition, calculatePosition: calculatePosition, className: props.className })))));
 }
 Tooltip.defaultProps = {
     content: '',