@steroidsjs/core 2.2.75 → 2.2.78

package/ui/layout/ProgressBar/demo/type.js

@@ -0,0 +1,40 @@
+"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]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var ProgressBar_1 = __importDefault(require("../ProgressBar"));
+/**
+ * Имеется два типа: 'circle', 'line'. По-умолчанию задается 'line'.
+ * @order 3
+ * @col 6
+ */
+exports["default"] = (function () { return (React.createElement("div", { style: { display: 'grid', gridGap: '10px', paddingRight: '10px' } },
+    React.createElement("div", { style: { display: 'flex', gridGap: '10px' } },
+        React.createElement(ProgressBar_1["default"], { percent: 10, size: 'small', type: 'circle' }),
+        React.createElement(ProgressBar_1["default"], { percent: 50, size: 'small', status: 'exception', type: 'circle' }),
+        React.createElement(ProgressBar_1["default"], { percent: 100, size: 'small', status: 'success', type: 'circle' })),
+    React.createElement("div", { style: { maxWidth: '90%' } },
+        React.createElement(ProgressBar_1["default"], { percent: 10, size: 'small' }),
+        React.createElement(ProgressBar_1["default"], { percent: 50, size: 'small', status: 'exception' }),
+        React.createElement(ProgressBar_1["default"], { percent: 100, size: 'small', status: 'success' })))); });

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

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

package/ui/layout/ProgressBar/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 ProgressBar_1 = __importDefault(require("./ProgressBar"));
+exports["default"] = ProgressBar_1["default"];

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+export interface ISkeletonViewProps {
+    className?: string;
+    children?: React.ReactNode;
+    animation?: 'pulse' | 'wave';
+    type?: 'text' | 'rect' | 'circle';
+    height?: string | number;
+    width?: string | number;
+}
+export interface ISkeletonProps {
+    className?: string;
+    children?: React.ReactNode;
+    animation?: 'pulse' | 'wave';
+    type?: 'text' | 'rect' | 'circle';
+    height?: string | number;
+    width?: string | number;
+}
+declare function Skeleton(props: ISkeletonProps): JSX.Element;
+declare namespace Skeleton {
+    var defaultProps: {
+        animation: string;
+        type: string;
+    };
+}
+export default Skeleton;

package/ui/layout/Skeleton/Skeleton.js

@@ -0,0 +1,11 @@
+"use strict";
+exports.__esModule = true;
+var hooks_1 = require("../../../hooks");
+function Skeleton(props) {
+    return hooks_1.useComponents().ui.renderView('layout.SkeletonView', props);
+}
+Skeleton.defaultProps = {
+    animation: 'pulse',
+    type: 'text'
+};
+exports["default"] = Skeleton;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Демонстрация двух видов анимации и трёх типов Skeleton.
+ * @order 1
+ * @col 3
+ */
+export default _default;

package/ui/layout/Skeleton/demo/animations.js

@@ -0,0 +1,49 @@
+"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]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var Skeleton_1 = __importDefault(require("../Skeleton"));
+/**
+ * Демонстрация двух видов анимации и трёх типов Skeleton.
+ * @order 1
+ * @col 3
+ */
+exports["default"] = (function () { return (React.createElement("div", { style: {
+        display: 'flex',
+        gridGap: '20px'
+    } },
+    React.createElement("div", { style: { display: 'grid', gridGap: '10px' } },
+        React.createElement("div", { style: { width: 100, height: 30 } },
+            React.createElement(Skeleton_1["default"], { animation: 'wave', type: 'text' })),
+        React.createElement("div", { style: { width: 100, height: 100 } },
+            React.createElement(Skeleton_1["default"], { animation: 'wave', type: 'rect' })),
+        React.createElement("div", { style: { width: 100, height: 100 } },
+            React.createElement(Skeleton_1["default"], { animation: 'wave', type: 'circle' }))),
+    React.createElement("div", { style: { display: 'grid', gridGap: '10px' } },
+        React.createElement("div", { style: { width: 100, height: 30 } },
+            React.createElement(Skeleton_1["default"], { animation: 'pulse', type: 'text' })),
+        React.createElement("div", { style: { width: 100, height: 100 } },
+            React.createElement(Skeleton_1["default"], { animation: 'pulse', type: 'rect' })),
+        React.createElement("div", { style: { width: 100, height: 100 } },
+            React.createElement(Skeleton_1["default"], { animation: 'pulse', type: 'circle' }))))); });

package/ui/layout/Skeleton/demo/width height.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Демонстрация задания кастомной ширины и высоты.
+ * @order 2
+ * @col 5
+ */
+export default _default;

package/ui/layout/Skeleton/demo/width height.js

@@ -0,0 +1,38 @@
+"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]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var Skeleton_1 = __importDefault(require("../Skeleton"));
+/**
+ * Демонстрация задания кастомной ширины и высоты.
+ * @order 2
+ * @col 5
+ */
+exports["default"] = (function () { return (React.createElement("div", { style: {
+        display: 'flex',
+        gridGap: '20px'
+    } },
+    React.createElement("div", { style: { display: 'flex', gridGap: '10px' } },
+        React.createElement(Skeleton_1["default"], { animation: 'wave', type: 'text', width: 50, height: 200 }),
+        React.createElement(Skeleton_1["default"], { animation: 'wave', type: 'circle', width: 300, height: 200 })))); });

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

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

package/ui/layout/Skeleton/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 Skeleton_1 = __importDefault(require("./Skeleton"));
+exports["default"] = Skeleton_1["default"];

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

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

package/ui/layout/Tooltip/Tooltip.js

@@ -0,0 +1,114 @@
+"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]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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 TooltipPortalInner_1 = __importDefault(require("./TooltipPortalInner"));
+/*
+* @Todo + check all calculations + describe
+*       + 12 positions
+*       - custom styles / classes
+*       - defaultVisible -> logic
+*       - check window resize
+*       - check for more properties
+*       - fix arrow position (right, bottom) NOT centered
+*       - 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 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();
+        }
+    });
+    if (!props.content) {
+        return props.children;
+    }
+    var TooltipView = components.ui.getView('layout.TooltipView');
+    var childrenElement = typeof props.children === 'object'
+        ? React.Children.only(props.children)
+        : undefined;
+    return (React.createElement(React.Fragment, null,
+        childrenElement
+            ? React.cloneElement(childrenElement, {
+                ref: childRef,
+                onMouseOver: onShowTooltip,
+                onMouseOut: onHideTooltip
+            })
+            : (React.createElement("span", { ref: childRef, onFocus: onShowTooltip, onMouseOver: onShowTooltip, onBlur: onHideTooltip, onMouseOut: onHideTooltip }, 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 })))));
+}
+Tooltip.defaultProps = {
+    content: '',
+    position: 'top',
+    defaultVisible: false,
+    gap: 16,
+    animationMs: 300
+};
+exports["default"] = Tooltip;

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { IComponentsHocOutput } from '../../../hoc/components';
+export default class TooltipPortal extends React.PureComponent<IComponentsHocOutput> {
+    componentDidMount(): void;
+    render(): any;
+}

package/ui/layout/Tooltip/TooltipPortalInner.js

@@ -0,0 +1,64 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var react_dom_1 = require("react-dom");
+var hoc_1 = require("../../../hoc");
+var TooltipPortal = /** @class */ (function (_super) {
+    __extends(TooltipPortal, _super);
+    function TooltipPortal() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    TooltipPortal.prototype.componentDidMount = function () {
+        if (!this.props.ui.getPortalElement()) {
+            throw new Error('Not found UI Portal container. Please set <Portal/> in layout.');
+        }
+    };
+    TooltipPortal.prototype.render = function () {
+        return react_dom_1.createPortal(this.props.children, this.props.ui.getPortalElement());
+    };
+    TooltipPortal = __decorate([
+        hoc_1.components('ui')
+    ], TooltipPortal);
+    return TooltipPortal;
+}(React.PureComponent));
+exports["default"] = TooltipPortal;

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

@@ -0,0 +1,6 @@
+import { TooltipArrowPosition, TooltipStylePosition } from '../Tooltip/Tooltip';
+export default function calculate(gap: any, position: any, parentRef: any, tooltipSize: any, arrowSize: any): {
+    style: TooltipStylePosition;
+    position: any;
+    arrowPosition: TooltipArrowPosition;
+};

package/ui/layout/Tooltip/calculate.js

@@ -0,0 +1,162 @@
+"use strict";
+exports.__esModule = true;
+function calculate(gap, position, parentRef, tooltipSize, arrowSize) {
+    var style = { left: null, right: null, top: null };
+    var arrowPosition = null;
+    var _a = parentRef.getBoundingClientRect(), top = _a.top, right = _a.right, left = _a.left, width = _a.width, height = _a.height;
+    var parentDimensions = { top: top, right: right, left: left, width: width, height: height };
+    parentDimensions.top += window.scrollY;
+    // eslint-disable-next-line default-case
+    switch (position) {
+        case 'top':
+        case 'topLeft':
+        case 'topRight':
+            // Проверка - выходит ли tooltip за верхний край страницы?
+            // Если да - меняем позицию на bottom
+            if ((parentDimensions.top - window.scrollY) <= Math.round(tooltipSize.height + gap)) {
+                style.top = parentDimensions.top + parentDimensions.height;
+                position = position.replace('top', 'bottom');
+            }
+            else {
+                style.top = parentDimensions.top - tooltipSize.height;
+            }
+            break;
+        case 'bottom':
+        case 'bottomLeft':
+        case 'bottomRight':
+            /// Проверка - выходит ли tooltip за нижний край страницы?
+            // Если да - меняем позицию на top
+            if ((window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY))
+                <= Math.round(tooltipSize.height + gap)) {
+                style.top = parentDimensions.top - tooltipSize.height;
+                position = position.replace('bottom', 'top');
+            }
+            else {
+                style.top = parentDimensions.top + parentDimensions.height;
+            }
+            break;
+        case 'left':
+        case 'leftTop':
+        case 'leftBottom':
+            // Проверка - выходит ли tooltip за левый край страницы?
+            // Если да - меняем позицию на right
+            if (parentDimensions.left <= Math.round(tooltipSize.width + gap)) {
+                style.left = parentDimensions.right;
+                position = position.replace('left', 'right');
+            }
+            else {
+                style.left = parentDimensions.left - tooltipSize.width;
+            }
+            break;
+        case 'right':
+        case 'rightTop':
+        case 'rightBottom':
+            // Проверка - выходит ли tooltip за правый край страницы?
+            // Если да - меняем позицию на left
+            if (document.body.clientWidth - parentDimensions.right <= Math.round(tooltipSize.width + gap)) {
+                style.left = parentDimensions.left - tooltipSize.width;
+                position = position.replace('right', 'left');
+            }
+            else {
+                style.left = parentDimensions.right;
+            }
+            break;
+    }
+    // eslint-disable-next-line default-case
+    switch (position) {
+        case 'top':
+        case 'bottom':
+            // Выравнивание по середине
+            style.left = (parentDimensions.left + (parentDimensions.width / 2)) - (tooltipSize.width / 2);
+            break;
+        case 'topLeft':
+        case 'bottomLeft':
+            // Ширина tooltip больше родителя - стрелка на середину родителя
+            style.left = parentDimensions.left;
+            if (parentDimensions.width < tooltipSize.width) {
+                arrowPosition = { left: parentDimensions.width / 2 };
+            }
+            break;
+        case 'topRight':
+        case 'bottomRight':
+            // Ширина tooltip больше родителя - стрелка на середину родителя
+            style.right = document.body.clientWidth - parentDimensions.right;
+            if (parentDimensions.width < tooltipSize.width) {
+                arrowPosition = {
+                    left: null,
+                    right: (parentDimensions.width / 2) - (arrowSize.width / 2)
+                };
+            }
+            break;
+        case 'left':
+        case 'right':
+            style.top = (parentDimensions.top + (parentDimensions.height / 2)) - (tooltipSize.height / 2);
+            break;
+        case 'leftTop':
+        case 'rightTop':
+            style.top = parentDimensions.top;
+            if (parentDimensions.height < (tooltipSize.height)) {
+                arrowPosition = { top: parentDimensions.height / 2 };
+            }
+            break;
+        case 'leftBottom':
+        case 'rightBottom':
+            style.top = parentDimensions.top + parentDimensions.height - tooltipSize.height;
+            if (parentDimensions.height < tooltipSize.height) {
+                arrowPosition = {
+                    bottom: (parentDimensions.height / 2) - (arrowSize.height / 2)
+                };
+            }
+            break;
+    }
+    // Проверка - при позиционировании top/bottom tooltip не выходит за пределы страницы по горизонтали
+    if (position.includes('top') || position.includes('bottom')) {
+        if (!position.includes('Left')
+            && (style.left < 0 || parentDimensions.left <= Math.round((tooltipSize.width - parentDimensions.width) + gap))) {
+            style.right = null;
+            position = position.replace('Right', 'Left');
+            // Если ширина tooltip больше ширины родителя - выставить стрелку на середину родителя
+            if (parentDimensions.left < tooltipSize.width) {
+                arrowPosition = { left: parentDimensions.width / 2 };
+            }
+            style.left = parentDimensions.left;
+        }
+        if (!position.includes('Right')
+            && (document.body.clientWidth - parentDimensions.right
+                <= Math.round((tooltipSize.width - parentDimensions.width) + gap))) {
+            position = position.replace('Left', 'Right');
+            if (parentDimensions.width < tooltipSize.width) {
+                arrowPosition = {
+                    left: null,
+                    right: (parentDimensions.width / 2) - (arrowSize.width / 2)
+                };
+            }
+            style.left = null;
+            style.right = document.body.clientWidth - parentDimensions.right;
+        }
+    }
+    // Проверка - при позиционировании left/right tooltip не выходит за пределы страницы по вертикали
+    if (position.includes('left') || position.includes('right')) {
+        if (!position.includes('Top')
+            && parentDimensions.top - window.scrollY <= Math.round((tooltipSize.height - parentDimensions.height) + gap)) {
+            position = position.replace('Bottom', 'Top');
+            if (parentDimensions.height < tooltipSize.height) {
+                arrowPosition = { top: parentDimensions.height / 2 };
+            }
+            style.top = parentDimensions.top;
+        }
+        if (!position.includes('Bottom')
+            && (window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY)
+                <= Math.round((tooltipSize.height - parentDimensions.height) + gap))) {
+            position = position.replace('Top', 'Bottom');
+            if (parentDimensions.height < tooltipSize.height) {
+                arrowPosition = {
+                    bottom: (parentDimensions.height / 2) - (arrowSize.height / 2)
+                };
+            }
+            style.top = parentDimensions.top + parentDimensions.height - tooltipSize.height;
+        }
+    }
+    return { style: style, position: position, arrowPosition: arrowPosition };
+}
+exports["default"] = calculate;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Обычное использование Tooltip c 4-мя разными позициями и по-умолчанию включена видимость.
+ * @order 1
+ * @col 6
+ */
+export default _default;