@steroidsjs/core 3.0.0-beta.103 → 3.0.0-beta.105

package/ui/form/SliderField/SliderField.d.ts

@@ -43,7 +43,12 @@ export interface ISliderFieldProps extends IFieldWrapperInputProps, IUiComponent
      * Метки на ползунке. В объекте '{'key: value'}' key определяет положение, а value определяет, что будет отображаться.
      * Если вы хотите задать стиль определенной точки метки, значением должен быть объект,
      * содержащий свойства style и label.
-     * @example { min: 20, 40: 40, max: 100 }
+     * @example
+     * {
+     *  min: 20,
+     *  40: 40,
+     *  max: 100
+     * }
      */
     marks?: Record<string, {
         style: {
@@ -54,7 +59,10 @@ export interface ISliderFieldProps extends IFieldWrapperInputProps, IUiComponent
     /**
      * Функция, вызываемая после отпускания tip'а у слайдера (при событии onmouseup)
      * @see https://github.com/schrodinger/rc-slider
-     * @example {() => console.log('Slider handler is released')}
+     * @example
+     * {
+     *  () => console.log('Slider handler is released')
+     * }
      */
     onAfterChange?: (value: any) => void;
     [key: string]: any;

package/ui/form/TimeRangeField/TimeRangeField.d.ts

@@ -40,9 +40,18 @@ export interface ITimeRangeFieldProps extends IDateInputStateInput, Omit<IFieldW
     placeholder?: any;
     /**
      * Свойства для компонента DayPickerInput
-     * @example {dayPickerProps: {showWeekNumbers: true}}
+     * @example
+     * {
+     *  dayPickerProps: {
+     *   showWeekNumbers: true
+     *  }
      */
     pickerProps?: any;
+    /**
+     * Устанавливать ли фокус и показывать панель времени сразу после рендера страницы
+     * @example true
+     */
+    hasInitialFocus?: boolean;
     [key: string]: any;
 }
 export interface ITimeRangeFieldViewProps extends IDateInputStateOutput, Pick<ITimeRangeFieldProps, 'size' | 'errors' | 'showRemove' | 'className' | 'timePanelViewProps' | 'disabled' | 'style' | 'icon'>, Omit<IFieldWrapperOutputProps, 'input'> {

package/ui/form/TimeRangeField/TimeRangeField.js

@@ -62,7 +62,8 @@ function TimeRangeField(props) {
         inputPropsTo: inputPropsTo,
         inputFrom: props.inputFrom,
         inputTo: props.inputTo,
-        useSmartFocus: true
+        useSmartFocus: false,
+        hasInitialFocus: props.hasInitialFocus
     }), focus = _c.focus, onClose = _c.onClose, onClear = _c.onClear, extendedInputPropsFrom = _c.extendedInputPropsFrom, extendedInputPropsTo = _c.extendedInputPropsTo;
     var timePanelFromViewProps = (0, react_1.useMemo)(function () { return (__assign({ onNow: onNowFrom, onClose: onCloseFrom, value: inputPropsFrom.value, onSelect: inputPropsFrom.onChange }, props.timePanelViewProps)); }, [inputPropsFrom.onChange, inputPropsFrom.value, onCloseFrom, onNowFrom, props.timePanelViewProps]);
     var timePanelToViewProps = (0, react_1.useMemo)(function () { return (__assign({ onNow: onNowTo, onClose: onCloseTo, value: inputPropsTo.value, onSelect: inputPropsTo.onChange }, props.timePanelViewProps)); }, [inputPropsTo.onChange, inputPropsTo.value, onCloseTo, onNowTo, props.timePanelViewProps]);
@@ -73,6 +74,7 @@ TimeRangeField.defaultProps = {
     displayFormat: 'HH:mm',
     required: false,
     showRemove: true,
+    hasInitialFocus: false,
     type: 'text',
     valueFormat: 'HH:mm',
     useUTC: true,

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

@@ -72,7 +72,10 @@ export interface ITooltipProps {
     style?: ITooltipStylePosition;
     /**
      * Стили для позиционирования стрелки
-     * @example {left: 10}
+     * @example
+     * {
+     *  left: 10
+     * }
      */
     arrowPosition?: ITooltipArrowPosition;
     /**

package/ui/list/ControlsColumn/ControlsColumn.d.ts

@@ -17,13 +17,27 @@ export interface IControlsColumnProps {
     primaryKey?: string;
     /**
      * Коллекция с контролами
-     * @example [{id: 'delete'}, {id: 'view', position: 'left'}]
+     * @example
+     * [
+     *  {
+     *   id: 'delete'
+     *  },
+     *  {
+     *   id: 'view',
+     *   position: 'left'
+     *  }
+     * ]
      */
     controls?: IControlItem[] | ((item: any, primaryKey: string) => IControlItem[]);
     /**
      * Элемент, для которого будет отображаться список с контролами, в нём можно задать видимость контрола
      * с помощью свойства 'can' + _upperFirst(control.id)
-     * @example {name: 'Ivan', work: 'development', canView: false}
+     * @example
+     * {
+     *  name: 'Ivan',
+     *  work: 'development',
+     *  canView: false
+     * }
      */
     item?: any;
     /**

package/ui/list/FlexGrid/FlexGrid.d.ts

@@ -36,7 +36,17 @@ export interface IFlexGridItem {
 export interface IFlexGridProps extends IUiComponent {
     /**
      * Элементы FlexGrid
-     * @example [{content: 'Block1', col: 4}, {content: 'Block2', col: 6}]
+     * @example
+     * [
+     *  {
+     *   content: 'Block1',
+     *   col: 4
+     *  },
+     *  {
+     *   content: 'Block2',
+     *   col: 6
+     *  }
+     * ]
      */
     items?: IFlexGridItem[];
     /**

package/ui/list/Grid/Grid.d.ts

@@ -18,7 +18,11 @@ export interface IGridColumn {
     attribute?: string;
     /**
      * Свойства для компонента форматирования
-     * @example {component: DateFormatter, format: 'DD MMMM'}
+     * @example
+     * {
+     *  component: DateFormatter,
+     *  format: 'DD MMMM'
+     * }
      */
     formatter?: Record<string, any>;
     /**
@@ -74,7 +78,12 @@ export interface IGridColumn {
     subtitleAttribute?: string;
     /**
      * Параметры для ссылки в колонке
-    * @example {attribute: 'name', linkProps: {target: 'blank'}, url: 'https://kozhindev.com'}
+    * @example
+     * {
+     *  attribute: 'name',
+     *  linkProps: {target: 'blank'},
+     *  url: 'https://kozhindev.com'
+     * }
     */
     link?: {
         attribute: string;
@@ -83,7 +92,11 @@ export interface IGridColumn {
     };
     /**
     * Параметры для иконки в колонке
-    * @example {attribute: 'icon', isLeft: true}
+    * @example
+     * {
+     *  attribute: 'icon',
+     *  isLeft: true
+     * }
     */
     icon?: {
         attribute: string;
@@ -91,7 +104,11 @@ export interface IGridColumn {
     };
     /**
     *  Параметры для картинки в колонке
-    * @example {attribute: 'icon', isLeft: true}
+    * @example
+     * {
+     *  attribute: 'icon',
+     *  isLeft: true
+     * }
     */
     picture?: {
         attribute: string;
@@ -122,13 +139,32 @@ export interface IGridProps extends IListConfig {
     view?: CustomView;
     /**
      * Коллекция с наименованиями и свойствами колонок в таблице
-     * @example [{label: 'Name', attribute: 'name'}, {label: 'Work', attribute: 'work'}]
+     * @example
+     * [
+     *  {
+     *   label: 'Name',
+     *   attribute: 'name'
+     *  },
+     *  {
+     *   label: 'Work',
+     *   attribute: 'work'
+     *  }
+     * ]
      */
     columns: (string | IGridColumn)[];
     /**
      * Коллекция с элементами управления. Данная коллекция отобразится в колонке рядом с каждой записью в таблице.
      * Например, кнопки для удаления и детального просмотра записи.
-     * @example [{id: 'delete'}, {id: 'view', position: 'left'}]
+     * @example
+     * [
+     *  {
+     *   id: 'delete'
+     *  },
+     *  {
+     *   id: 'view',
+     *   position: 'left'
+     *  }
+     * ]
      */
     controls?: IControlItem[] | ((item: any, primaryKey: string) => IControlItem[]);
     /**

package/ui/list/LayoutNames/LayoutNames.d.ts

@@ -34,7 +34,17 @@ export interface ILayoutNamesProps {
     position?: ListControlPosition;
     /**
      * Коллекция с шаблонами
-     * @example [{id: 'list', label: 'List'}, {id: 'grid', label: 'Grid'}]
+     * @example
+     * [
+     *  {
+     *   id: 'list',
+     *   label: 'List'
+     *  },
+     *  {
+     *   id: 'grid',
+     *   label: 'Grid'
+     *  }
+     * ]
      */
     items?: INavItem[];
     /**

package/ui/list/TreeTable/TreeTable.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import { IColumnViewProps, IGridColumn, IGridProps } from '../Grid/Grid';
 export interface ITreeColumnViewProps extends IColumnViewProps {
-    item: {
-        onTreeItemClick?: (uniqueId: string, item: {
-            [key: string]: any;
-        }) => void;
-        [key: string]: any;
+    item: ITreeTableItem & {
+        uniqueId: string;
+        level: number;
+        isOpened: boolean;
+        hasItems: boolean;
+        onClick: () => void;
     };
 }
 export interface ITreeTableItem {
@@ -15,14 +16,15 @@ export interface ITreeTableItem {
     id?: string | number;
     /**
      * Вложенные элементы
-     * @example items: [{id: 3, name: 'Ivan'}]
+     * @example
+     * items: [
+     *  {
+     *   id: 3,
+     *   name: 'Ivan'
+     *  }
+     * ]
      */
-    items?: any[];
-    /**
-     * Уникальный идентификатор,
-     * используется для сохранения состояния открыта или закрыта ячейка
-     */
-    uniqueId?: string;
+    items?: ITreeTableItem[];
 }
 /**
  * TreeTable
@@ -32,9 +34,31 @@ export interface ITreeTableItem {
 export interface ITreeTableProps extends Omit<IGridProps, 'items'> {
     /**
      * Элементы коллекции
-     * @example [{id: 1, name: 'Jane'}, {id: 2, name: 'John', items: [...]}]
+     * @example
+     * [
+     *  {
+     *   id: 1,
+     *   name: 'Jane'
+     *  },
+     *  {
+     *   id: 2,
+     *   name: 'John',
+     *   items: [...]
+     *  }
+     * ]
      */
     items?: ITreeTableItem[];
+    /**
+     * Расстояние вложенных элементов от родителя для каждого уровня
+     * @example 32
+     */
+    levelPadding?: number | string;
+}
+export declare const addTreeColumnFieldsToFirstColumn: (columns: IGridColumn[], levelPadding: string | number) => IGridColumn[];
+declare function TreeTable(props: ITreeTableProps): JSX.Element;
+declare namespace TreeTable {
+    var defaultProps: {
+        levelPadding: number;
+    };
 }
-export declare const addTreeColumnFieldsToFirstColumn: (columns: IGridColumn[]) => IGridColumn[];
-export default function TreeTable(props: ITreeTableProps): JSX.Element;
+export default TreeTable;

package/ui/list/TreeTable/TreeTable.js

@@ -55,15 +55,18 @@ var TREE_COLUMN_VIEW_FIELDS = {
     valueView: 'TreeColumnView',
     headerClassName: 'TreeColumnHeader'
 };
-var addTreeColumnFieldsToFirstColumn = function (columns) {
+var addTreeColumnFieldsToFirstColumn = function (columns, levelPadding) {
     var newColumns = __spreadArray([], columns, true);
     // Add tree view to the first column
-    (0, merge_1["default"])(newColumns[0], TREE_COLUMN_VIEW_FIELDS);
+    (0, merge_1["default"])(newColumns[0], __assign(__assign({}, TREE_COLUMN_VIEW_FIELDS), { levelPadding: levelPadding }));
     return newColumns;
 };
 exports.addTreeColumnFieldsToFirstColumn = addTreeColumnFieldsToFirstColumn;
 function TreeTable(props) {
-    var columns = (0, react_1.useMemo)(function () { return (0, exports.addTreeColumnFieldsToFirstColumn)(props.columns); }, [props.columns]);
+    var columns = (0, react_1.useMemo)(function () { return (0, exports.addTreeColumnFieldsToFirstColumn)(props.columns, props.levelPadding); }, [props.columns, props.levelPadding]);
     return (React.createElement(Grid_1["default"], __assign({}, props, { columns: columns, items: props.items, itemsIndexing: false, hasTreeItems: true })));
 }
 exports["default"] = TreeTable;
+TreeTable.defaultProps = {
+    levelPadding: 32
+};

package/ui/modal/Modal/Modal.d.ts

@@ -21,7 +21,13 @@ export interface IModalProps {
     componentProps?: any;
     /**
      * Коллекция кнопок, которая отобразится в нижней секции Modal
-     * @example [{label: __(('Закрыть')), onClick: () => props.onClose()}]
+     * @example
+     * [
+     *  {
+     *   label: __(('Закрыть')),
+     *   onClick: () => props.onClose()
+     *  }
+     * ]
      */
     buttons?: IButtonProps[];
     /**

package/ui/nav/Breadcrumbs/Breadcrumbs.d.ts

@@ -13,7 +13,17 @@ export interface IBreadcrumbsProps {
     className?: CssClassName;
     /**
      * Коллекция элементов навигационной цепочки
-     * @example [{id: 'root', title: 'Home'}, {id: 'catalog', title: 'Catalog'}]
+     * @example
+     * [
+     *  {
+     *   id: 'root',
+     *   title: 'Home'
+     *  },
+     *  {
+     *   id: 'catalog',
+     *   title: 'Catalog'
+     *  }
+     * ]
      */
     items?: IRouteItem[];
     /**

package/ui/nav/ButtonGroup/ButtonGroup.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { Dispatch, SetStateAction } from 'react';
 import { IButtonProps } from '../../form/Button/Button';
 import { DataProviderItems } from '../../../hooks/useDataProvider';
 /**
@@ -9,14 +9,19 @@ import { DataProviderItems } from '../../../hooks/useDataProvider';
 export interface IButtonGroupProps extends IUiComponent {
     /**
      * Элементы для группы кнопок
-     * @example ['button1', 'button2', 'button3']
+     * @example
+     * [
+     *  'button1',
+     *  'button2',
+     *  'button3'
+     * ]
      */
     items: DataProviderItems;
     /**
      * Функция, которая будет вызываться при клике по кнопке
      * @example setActiveTab
      */
-    onClick: (value: number | string | boolean) => void;
+    onClick: ((value: number | string | boolean) => void) | Dispatch<SetStateAction<string | number | boolean>>;
     /**
      * При указании в связке с onClick предоставляет возможность реализовать two-way binding
      * @example 'button1'
@@ -28,7 +33,11 @@ export interface IButtonGroupProps extends IUiComponent {
     defaultActiveButton?: number | string;
     /**
      * Общие свойства для всех кнопок группы
-     * @example {outline: true, color: 'secondary'}
+     * @example
+     * {
+     *  outline: true,
+     *  color: 'secondary'
+     * }
      */
     buttonProps?: IButtonProps;
 }

package/ui/nav/Controls/Controls.d.ts

@@ -27,7 +27,13 @@ export interface IControlItem extends IButtonProps {
 export interface IControlsProps {
     /**
      * Коллекция контролов
-     * @example [{id: 'delete', onClick: () => alert("It's deleted")}]
+     * @example
+     * [
+     *  {
+     *   id: 'delete',
+     *   onClick: () => alert("It's deleted")
+     *  }
+     * ]
      */
     items?: IControlItem[];
     /**

package/ui/nav/Nav/Nav.d.ts

@@ -41,7 +41,10 @@ export interface INavItem extends IButtonProps {
     content?: any;
     /**
      * Свойства для компонента с контентом
-     * @example {content: 'Some text'}
+     * @example
+     * {
+     *  content: 'Some text'
+     * }
      */
     contentProps?: any;
     /**
@@ -69,7 +72,17 @@ export interface INavProps {
     /**
      * Коллекция с элементами навигации. Также можно передать идентификатор роута, тогда компонент найдет все
      * вложенные роуты и отобразит их в навигации.
-     * @example [{id: 1, label: 'One'}, {id: 2, label: 'Two'}] | 'root'
+     * @example
+     * [
+     *  {
+     *   id: 1,
+     *   label: 'One'
+     *  },
+     *  {
+     *   id: 2,
+     *   label: 'Two'
+     *  }
+     * ] | 'root'
      */
     items?: string | INavItem[];
     /**

package/ui/nav/Router/Router.js

@@ -175,6 +175,9 @@ function Router(props) {
         });
         var result = renderComponent(routeItem, activePath, __assign(__assign({}, routeProps), { children: children }));
         if (!result) {
+            if (children) {
+                return children;
+            }
             // eslint-disable-next-line no-console
             console.error('Not found component for route:', routeItem);
         }

package/ui/nav/Tree/Tree.d.ts

@@ -7,7 +7,14 @@ export interface ITreeItem extends IButtonProps {
     id?: string | number;
     /**
      * Вложенные элементы
-     * @example [{id: 2, label: 'Nested element', items: [...]}]
+     * @example
+     * [
+     *  {
+     *   id: 2,
+     *   label: 'Nested element',
+     *   items: [...]
+     *  }
+     * ]
      */
     items?: any[];
     /**
@@ -29,7 +36,14 @@ export interface ITreeProps {
     /**
      * Коллекция с узлами. Также можно передать идентификатор роута, тогда компонент найдет все
      * вложенные роуты и отобразит их в виде дерева.
-     * @example [{id: 1, label: 'Root', items: [...]}] | 'root'
+     * @example
+     * [
+     *  {
+     *   id: 1,
+     *   label: 'Root',
+     *   items: [...]
+     *  }
+     * ] | 'root'
      */
     items?: ITreeItem[] | string;
     /**

package/utils/calculateComponentAbsolutePosition.js

@@ -1,6 +1,19 @@
 "use strict";
 exports.__esModule = true;
+/* eslint-disable implicit-arrow-linebreak */
 var useAbsolutePositioning_1 = require("../hooks/useAbsolutePositioning");
+var isComponentBeyondTop = function (parentDimensions, componentSize, gap) {
+    return (parentDimensions.top - window.scrollY) <= Math.round(componentSize.height + gap);
+};
+var isComponentBeyondLeft = function (parentDimensions, componentSize, gap) {
+    return parentDimensions.left <= Math.round(componentSize.width + gap);
+};
+var isComponentBeyondRight = function (parentDimensions, componentSize, gap) {
+    return document.body.clientWidth - parentDimensions.right <= Math.round(componentSize.width + gap);
+};
+var isComponentBeyondBottom = function (parentDimensions, componentSize, gap) {
+    return (window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY)) <= Math.round(componentSize.height + gap);
+};
 function calculateComponentAbsolutePosition(gap, position, parentRef, componentSize, arrowSize, hasAutoPositioning) {
     if (arrowSize === void 0) { arrowSize = null; }
     if (hasAutoPositioning === void 0) { hasAutoPositioning = true; }
@@ -17,10 +30,9 @@ function calculateComponentAbsolutePosition(gap, position, parentRef, componentS
         case useAbsolutePositioning_1.Position.TOP:
         case useAbsolutePositioning_1.Position.TOP_LEFT:
         case useAbsolutePositioning_1.Position.TOP_RIGHT:
-            // Проверка - выходит ли tooltip за верхний край страницы?
+            // Проверка - выходит ли component за верхний край страницы?
             // Если да - меняем позицию на bottom
-            if (hasAutoPositioning
-                && ((parentDimensions.top - window.scrollY) <= Math.round(componentSize.height + gap))) {
+            if (hasAutoPositioning && isComponentBeyondTop(parentDimensions, componentSize, gap)) {
                 style.top = parentDimensions.top + parentDimensions.height;
                 position = position.replace(useAbsolutePositioning_1.Position.TOP, useAbsolutePositioning_1.Position.BOTTOM);
             }
@@ -31,11 +43,9 @@ function calculateComponentAbsolutePosition(gap, position, parentRef, componentS
         case useAbsolutePositioning_1.Position.BOTTOM:
         case useAbsolutePositioning_1.Position.BOTTOM_LEFT:
         case useAbsolutePositioning_1.Position.BOTTOM_RIGHT:
-            /// Проверка - выходит ли tooltip за нижний край страницы?
+            /// Проверка - выходит ли component за нижний край страницы?
             // Если да - меняем позицию на top
-            if (hasAutoPositioning
-                && ((window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY))
-                    <= Math.round(componentSize.height + gap))) {
+            if (hasAutoPositioning && isComponentBeyondBottom(parentDimensions, componentSize, gap)) {
                 style.top = parentDimensions.top - componentSize.height;
                 position = position.replace(useAbsolutePositioning_1.Position.BOTTOM, useAbsolutePositioning_1.Position.TOP);
             }
@@ -46,9 +56,9 @@ function calculateComponentAbsolutePosition(gap, position, parentRef, componentS
         case useAbsolutePositioning_1.Position.LEFT:
         case useAbsolutePositioning_1.Position.LEFT_TOP:
         case useAbsolutePositioning_1.Position.LEFT_BOTTOM:
-            // Проверка - выходит ли tooltip за левый край страницы?
+            // Проверка - выходит ли component за левый край страницы?
             // Если да - меняем позицию на right
-            if (hasAutoPositioning && (parentDimensions.left <= Math.round(componentSize.width + gap))) {
+            if (hasAutoPositioning && isComponentBeyondLeft(parentDimensions, componentSize, gap)) {
                 style.left = parentDimensions.right;
                 position = position.replace(useAbsolutePositioning_1.Position.LEFT, useAbsolutePositioning_1.Position.RIGHT);
             }
@@ -59,10 +69,9 @@ function calculateComponentAbsolutePosition(gap, position, parentRef, componentS
         case useAbsolutePositioning_1.Position.RIGHT:
         case useAbsolutePositioning_1.Position.RIGHT_TOP:
         case useAbsolutePositioning_1.Position.RIGHT_BOTTOM:
-            // Проверка - выходит ли tooltip за правый край страницы?
+            // Проверка - выходит ли component за правый край страницы?
             // Если да - меняем позицию на left
-            if (hasAutoPositioning
-                && (document.body.clientWidth - parentDimensions.right <= Math.round(componentSize.width + gap))) {
+            if (hasAutoPositioning && isComponentBeyondRight(parentDimensions, componentSize, gap)) {
                 style.left = parentDimensions.left - componentSize.width;
                 position = position.replace(useAbsolutePositioning_1.Position.RIGHT, useAbsolutePositioning_1.Position.LEFT);
             }
@@ -72,6 +81,31 @@ function calculateComponentAbsolutePosition(gap, position, parentRef, componentS
             break;
     }
     // eslint-disable-next-line default-case
+    switch (position) {
+        case useAbsolutePositioning_1.Position.LEFT:
+        case useAbsolutePositioning_1.Position.LEFT_TOP:
+        case useAbsolutePositioning_1.Position.LEFT_BOTTOM:
+            // Проверка - выходит ли component после изменения позиции на left за левый край страницы?
+            // Если да - меняем позицию на bottom
+            if (hasAutoPositioning && isComponentBeyondLeft(parentDimensions, componentSize, gap)) {
+                style.left = null;
+                style.top = parentDimensions.top + parentDimensions.height;
+                position = useAbsolutePositioning_1.Position.BOTTOM;
+            }
+            break;
+        case useAbsolutePositioning_1.Position.RIGHT:
+        case useAbsolutePositioning_1.Position.RIGHT_TOP:
+        case useAbsolutePositioning_1.Position.RIGHT_BOTTOM:
+            // Проверка - выходит ли component после изменения позиции на right за правый край страницы?
+            // Если да - меняем позицию на bottom
+            if (hasAutoPositioning && isComponentBeyondRight(parentDimensions, componentSize, gap)) {
+                style.left = null;
+                style.top = parentDimensions.top + parentDimensions.height;
+                position = useAbsolutePositioning_1.Position.BOTTOM;
+            }
+            break;
+    }
+    // eslint-disable-next-line default-case
     switch (position) {
         case useAbsolutePositioning_1.Position.TOP:
         case useAbsolutePositioning_1.Position.BOTTOM:
@@ -80,7 +114,7 @@ function calculateComponentAbsolutePosition(gap, position, parentRef, componentS
             break;
         case useAbsolutePositioning_1.Position.TOP_LEFT:
         case useAbsolutePositioning_1.Position.BOTTOM_LEFT:
-            // Ширина tooltip больше родителя - стрелка на середину родителя
+            // Ширина component больше родителя - стрелка на середину родителя
             style.left = parentDimensions.left;
             if (arrowSize && (parentDimensions.width < componentSize.width)) {
                 arrowPosition = { left: parentDimensions.width / 2 };
@@ -88,7 +122,7 @@ function calculateComponentAbsolutePosition(gap, position, parentRef, componentS
             break;
         case useAbsolutePositioning_1.Position.TOP_RIGHT:
         case useAbsolutePositioning_1.Position.BOTTOM_RIGHT:
-            // Ширина tooltip больше родителя - стрелка на середину родителя
+            // Ширина component больше родителя - стрелка на середину родителя
             style.left = parentDimensions.right - componentSize.width;
             if (arrowSize && (parentDimensions.width < componentSize.width)) {
                 arrowPosition = {
@@ -118,13 +152,13 @@ function calculateComponentAbsolutePosition(gap, position, parentRef, componentS
             }
             break;
     }
-    // Проверка - при позиционировании top/bottom tooltip не выходит за пределы страницы по горизонтали
+    //Проверка - при позиционировании top/bottom component не выходит за пределы страницы по горизонтали
     if (position.includes('top') || position.includes('bottom')) {
         if (!position.includes('Left')
-            && (style.left < 0 || parentDimensions.left <= Math.round((componentSize.width - parentDimensions.width) + gap))) {
+            && (parentDimensions.left <= Math.round((componentSize.width - parentDimensions.width) + gap))) {
             style.right = null;
             position = position.replace('Right', 'Left');
-            // Если ширина tooltip больше ширины родителя - выставить стрелку на середину родителя
+            // Если ширина component больше ширины родителя - выставить стрелку на середину родителя
             if (parentDimensions.left < componentSize.width) {
                 arrowPosition = { left: parentDimensions.width / 2 };
             }
@@ -144,15 +178,17 @@ function calculateComponentAbsolutePosition(gap, position, parentRef, componentS
             style.right = document.body.clientWidth - parentDimensions.right;
         }
     }
-    // Проверка - при позиционировании left/right tooltip не выходит за пределы страницы по вертикали
+    // Проверка - при позиционировании left/right component не выходит за пределы страницы по вертикали
     if (position.includes('left') || position.includes('right')) {
         if (!position.includes('Top')
             && parentDimensions.top - window.scrollY <= Math.round((componentSize.height - parentDimensions.height) + gap)) {
             position = position.replace('Bottom', 'Top');
-            if (parentDimensions.height < componentSize.height) {
-                arrowPosition = { top: parentDimensions.height / 2 };
-            }
             style.top = parentDimensions.top;
+            if (arrowSize && parentDimensions.height < componentSize.height) {
+                arrowPosition = {
+                    top: parentDimensions.height / 2
+                };
+            }
         }
         else if (!position.includes('Bottom')
             && (window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY)