@steroidsjs/core 3.0.0-beta.98 → 3.0.0

package/ui/content/Chat/hooks/useChat.js

@@ -0,0 +1,58 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = require("react");
+var dayjs_1 = __importDefault(require("dayjs"));
+var uniqueId_1 = __importDefault(require("lodash-es/uniqueId"));
+var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
+var File_1 = __importDefault(require("fileup-core/lib/models/File"));
+var hooks_1 = require("../../../../hooks");
+var form_1 = require("../../../../actions/form");
+var utils_1 = require("../utils");
+var timeTemplatesAndUnits_1 = require("../constants/timeTemplatesAndUnits");
+function useChat(config) {
+    var dispatch = (0, hooks_1.useDispatch)();
+    var _a = (0, react_1.useState)({}), groupedMessagesByDates = _a[0], setGroupedMessagesByDates = _a[1];
+    var _b = (0, react_1.useState)([]), uploadedFiles = _b[0], setUploadedFiles = _b[1];
+    (0, react_1.useEffect)(function () { return setGroupedMessagesByDates((0, utils_1.getMessagesGroupedByDate)(config.messages)); }, [config.messages]);
+    var onUploadFiles = (0, react_1.useCallback)(function (files) {
+        if (!(0, isEqual_1["default"])(uploadedFiles, files)) {
+            setUploadedFiles(files);
+        }
+    }, [uploadedFiles]);
+    var onSendMessage = (0, react_1.useCallback)(function (rawMessage) {
+        if (!rawMessage) {
+            return;
+        }
+        var newMessage = __assign(__assign({}, rawMessage), { id: (0, uniqueId_1["default"])(), user: config.currentUser, timestamp: (0, dayjs_1["default"])().format(timeTemplatesAndUnits_1.ISO_TIMESTAMP_TEMPLATE), files: (uploadedFiles === null || uploadedFiles === void 0 ? void 0 : uploadedFiles.reduce(function (acc, file) {
+                if (file.getResult() !== File_1["default"].RESULT_ERROR) {
+                    acc.push(__assign({}, file._resultHttpMessage));
+                }
+                return acc;
+            }, [])) || null });
+        if (config.onSendMessage) {
+            config.onSendMessage(config.chatId, newMessage);
+        }
+        setGroupedMessagesByDates(function (prevGroupedMessagesByDates) { return (0, utils_1.addNewMessageIntoGroupedMessages)(newMessage, prevGroupedMessagesByDates); });
+        dispatch((0, form_1.formReset)(config.chatId));
+    }, [config, dispatch, uploadedFiles]);
+    return {
+        groupedMessagesByDates: groupedMessagesByDates,
+        onSendMessage: onSendMessage,
+        onUploadFiles: onUploadFiles
+    };
+}
+exports["default"] = useChat;

package/ui/content/Chat/index.d.ts

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

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

package/ui/content/Chat/utils/addNewMessageIntoGroupedMessages.d.ts

@@ -0,0 +1,5 @@
+import { IChatMessage } from '@steroidsjs/core/ui/content/Chat/Chat';
+import { IGroupedMessage, IGroupedMessagesByDates } from '../hooks/useChat';
+export declare const addNewMessageIntoGroupedMessages: (newMessage: IChatMessage, groupedMessagesByDates: IGroupedMessagesByDates) => {
+    [x: string]: IGroupedMessage[][];
+};

package/ui/content/Chat/utils/addNewMessageIntoGroupedMessages.js

@@ -0,0 +1,61 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.addNewMessageIntoGroupedMessages = void 0;
+var dayjs_1 = __importDefault(require("dayjs"));
+var last_1 = __importDefault(require("lodash-es/last"));
+var getMessagesGroupedByDate_1 = require("../utils/getMessagesGroupedByDate");
+var timeTemplatesAndUnits_1 = require("../constants/timeTemplatesAndUnits");
+var addMessageToExistingGroup = function (newMessage, groupedMessagesByDates, dateKey) {
+    var _a;
+    var currentGroupedMessagesByDates = __spreadArray([], groupedMessagesByDates[dateKey], true);
+    // last array of messages for this date
+    var lastMessageGroup = currentGroupedMessagesByDates.pop();
+    // last message for this date
+    var lastMessageFromGroup = (0, last_1["default"])(lastMessageGroup);
+    var messagesGroupForCurrentDate = __spreadArray(__spreadArray([], groupedMessagesByDates[dateKey], true), [[newMessage]], false);
+    if ((0, getMessagesGroupedByDate_1.isWithinTimeThreshold)(lastMessageFromGroup, newMessage)) {
+        // make a new message the last in the group
+        delete lastMessageFromGroup.isLastMessage;
+        delete newMessage.isFirstMessage;
+        if (lastMessageGroup.length === 1) {
+            messagesGroupForCurrentDate = __spreadArray(__spreadArray([], currentGroupedMessagesByDates, true), [[lastMessageFromGroup, newMessage]], false);
+        }
+        else {
+            messagesGroupForCurrentDate = __spreadArray(__spreadArray([], currentGroupedMessagesByDates, true), [__spreadArray(__spreadArray([], lastMessageGroup, true), [newMessage], false)], false);
+        }
+    }
+    return __assign(__assign({}, groupedMessagesByDates), (_a = {}, _a[dateKey] = messagesGroupForCurrentDate, _a));
+};
+var addNewMessageIntoGroupedMessages = function (newMessage, groupedMessagesByDates) {
+    var _a;
+    var dateKey = (0, dayjs_1["default"])(newMessage.timestamp).format(timeTemplatesAndUnits_1.MONTH_AND_DAY_TEMPLATE);
+    var singleMessageInGroup = __assign(__assign({}, newMessage), { isFirstMessage: true, isLastMessage: true });
+    if (groupedMessagesByDates[dateKey]) {
+        return addMessageToExistingGroup(singleMessageInGroup, groupedMessagesByDates, dateKey);
+    }
+    return __assign(__assign({}, groupedMessagesByDates), (_a = {}, _a[dateKey] = [[singleMessageInGroup]], _a));
+};
+exports.addNewMessageIntoGroupedMessages = addNewMessageIntoGroupedMessages;

package/ui/content/Chat/utils/calculateMessageTimeAgo.d.ts

@@ -0,0 +1 @@
+export declare const calculateMessageTimeAgo: (timestamp: any) => string;

package/ui/content/Chat/utils/calculateMessageTimeAgo.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.calculateMessageTimeAgo = void 0;
+var dayjs_1 = __importDefault(require("dayjs"));
+var timeTemplatesAndUnits_1 = require("../constants/timeTemplatesAndUnits");
+var calculateMessageTimeAgo = function (timestamp) {
+    var now = (0, dayjs_1["default"])();
+    var messageTime = (0, dayjs_1["default"])(timestamp);
+    var diffInMinutes = now.diff(messageTime, timeTemplatesAndUnits_1.MINUTE_UNIT);
+    var diffInHours = now.diff(messageTime, timeTemplatesAndUnits_1.HOUR_UNIT);
+    var timeAgo = '';
+    if (diffInMinutes < timeTemplatesAndUnits_1.MINUTES_IN_HOUR_VALUE) {
+        timeAgo = __("".concat(diffInMinutes, " \u043C\u0438\u043D. \u043D\u0430\u0437\u0430\u0434"), { diffInMinutes: diffInMinutes });
+    }
+    else if (diffInHours < timeTemplatesAndUnits_1.HOURS_IN_DAY_VALUE) {
+        timeAgo = __("".concat(diffInHours, " \u0447. \u043D\u0430\u0437\u0430\u0434"), { diffInHours: diffInHours });
+    }
+    else {
+        timeAgo = messageTime.format(timeTemplatesAndUnits_1.HOURS_AND_MINUTES_TEMPLATE);
+    }
+    return timeAgo;
+};
+exports.calculateMessageTimeAgo = calculateMessageTimeAgo;

package/ui/content/Chat/utils/getMessagesGroupedByDate.d.ts

@@ -0,0 +1,4 @@
+import { IGroupedMessagesByDates } from '../hooks/useChat';
+import { IChatMessage } from '../Chat';
+export declare const isWithinTimeThreshold: (firstMessage: IChatMessage, secondMessage: IChatMessage) => boolean;
+export declare const getMessagesGroupedByDate: (messages: IChatMessage[]) => IGroupedMessagesByDates;

package/ui/content/Chat/utils/getMessagesGroupedByDate.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.getMessagesGroupedByDate = exports.isWithinTimeThreshold = void 0;
+var first_1 = __importDefault(require("lodash-es/first"));
+var last_1 = __importDefault(require("lodash-es/last"));
+var dayjs_1 = __importDefault(require("dayjs"));
+var timeTemplatesAndUnits_1 = require("../constants/timeTemplatesAndUnits");
+var isWithinTimeThreshold = function (firstMessage, secondMessage) {
+    var firstMessageTime = new Date(firstMessage.timestamp).getTime();
+    var secondMessageTime = new Date(secondMessage.timestamp).getTime();
+    return firstMessage.user.id === secondMessage.user.id && Math.abs(firstMessageTime - secondMessageTime) <= timeTemplatesAndUnits_1.SECONDS_IN_MINUTE_VALUE;
+};
+exports.isWithinTimeThreshold = isWithinTimeThreshold;
+var addFirstAndLastKeyForMessageGroup = function (messageGroup) {
+    (0, first_1["default"])(messageGroup).isFirstMessage = true;
+    (0, last_1["default"])(messageGroup).isLastMessage = true;
+};
+var getMessagesGroupedByDate = function (messages) {
+    var groupedMessages = {};
+    var prevDateKey = null;
+    messages.forEach(function (message) {
+        var dateKey = (0, dayjs_1["default"])(message.timestamp).format(timeTemplatesAndUnits_1.MONTH_AND_DAY_TEMPLATE);
+        if (!groupedMessages[dateKey]) {
+            groupedMessages[dateKey] = [];
+        }
+        // array of grouped messages for dateKey
+        var messagesGroupFromDate = groupedMessages[dateKey];
+        // last group of messages
+        var lastMessageGroup = (0, last_1["default"])(messagesGroupFromDate);
+        // add fields to the last group of messages for the previous date
+        if (!lastMessageGroup && prevDateKey) {
+            addFirstAndLastKeyForMessageGroup((0, last_1["default"])(groupedMessages[prevDateKey]));
+        }
+        var lastMessageFromGroup = (0, last_1["default"])(lastMessageGroup);
+        // if time difference between messages is less than a minute, and they are from the same user
+        if (lastMessageFromGroup && (0, exports.isWithinTimeThreshold)(lastMessageFromGroup, message)) {
+            lastMessageGroup.push(message);
+        }
+        else if (lastMessageGroup) {
+            // add fields to the previous group of messages for the same date
+            addFirstAndLastKeyForMessageGroup(lastMessageGroup);
+            messagesGroupFromDate.push([message]);
+        }
+        else {
+            prevDateKey = dateKey;
+            messagesGroupFromDate.push([message]);
+        }
+    });
+    // add fields to the last group of messages
+    addFirstAndLastKeyForMessageGroup((0, last_1["default"])(groupedMessages[prevDateKey]));
+    return groupedMessages;
+};
+exports.getMessagesGroupedByDate = getMessagesGroupedByDate;

package/ui/content/Chat/utils/index.d.ts

@@ -0,0 +1,5 @@
+import { getMessagesGroupedByDate, isWithinTimeThreshold } from './getMessagesGroupedByDate';
+import { addNewMessageIntoGroupedMessages } from './addNewMessageIntoGroupedMessages';
+import { calculateMessageTimeAgo } from './calculateMessageTimeAgo';
+import { isTodayMessage } from './isTodayMessage';
+export { getMessagesGroupedByDate, isWithinTimeThreshold, addNewMessageIntoGroupedMessages, calculateMessageTimeAgo, isTodayMessage, };

package/ui/content/Chat/utils/index.js

@@ -0,0 +1,12 @@
+"use strict";
+exports.__esModule = true;
+exports.isTodayMessage = exports.calculateMessageTimeAgo = exports.addNewMessageIntoGroupedMessages = exports.isWithinTimeThreshold = exports.getMessagesGroupedByDate = void 0;
+var getMessagesGroupedByDate_1 = require("./getMessagesGroupedByDate");
+exports.getMessagesGroupedByDate = getMessagesGroupedByDate_1.getMessagesGroupedByDate;
+exports.isWithinTimeThreshold = getMessagesGroupedByDate_1.isWithinTimeThreshold;
+var addNewMessageIntoGroupedMessages_1 = require("./addNewMessageIntoGroupedMessages");
+exports.addNewMessageIntoGroupedMessages = addNewMessageIntoGroupedMessages_1.addNewMessageIntoGroupedMessages;
+var calculateMessageTimeAgo_1 = require("./calculateMessageTimeAgo");
+exports.calculateMessageTimeAgo = calculateMessageTimeAgo_1.calculateMessageTimeAgo;
+var isTodayMessage_1 = require("./isTodayMessage");
+exports.isTodayMessage = isTodayMessage_1.isTodayMessage;

package/ui/content/Chat/utils/isTodayMessage.d.ts

@@ -0,0 +1 @@
+export declare const isTodayMessage: (timestamp: string | Date) => boolean;

package/ui/content/Chat/utils/isTodayMessage.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.isTodayMessage = void 0;
+var dayjs_1 = __importDefault(require("dayjs"));
+var isTodayMessage = function (timestamp) {
+    var messageDate = (0, dayjs_1["default"])(timestamp);
+    var currentDate = (0, dayjs_1["default"])();
+    return currentDate.isSame(messageDate, 'day') || currentDate.isAfter(messageDate);
+};
+exports.isTodayMessage = isTodayMessage;

package/ui/content/CopyToClipboard/CopyToClipboard.d.ts

@@ -33,9 +33,9 @@ export interface ICopyToClipboardProps extends IUiComponent {
     *   message: 'Some value has been copied to buffer',
     *   level: 'info',
     *   params: {
-    *   position: 'top-left',
-    *   timeOut: 100,
-    *  }
+    *     position: 'top-left',
+    *     timeOut: 100,
+    *   }
     * }
     */
     notification?: string | {

package/ui/content/CopyToClipboard/CopyToClipboard.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -87,7 +76,16 @@ function CopyToClipboard(props) {
             }
         });
     }); }, [dispatch, isCopied, notification, props]);
-    return components.ui.renderView(props.view || 'content.CopyToClipboardView', __assign(__assign({}, props), { onClick: onClick }));
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        disabled: props.disabled,
+        showCopyIcon: props.showCopyIcon,
+        icon: props.icon,
+        children: props.children,
+        className: props.className,
+        style: props.style,
+        onClick: onClick
+    }); }, [onClick, props.children, props.className, props.disabled, props.icon, props.showCopyIcon, props.style]);
+    return components.ui.renderView(props.view || 'content.CopyToClipboardView', viewProps);
 }
 CopyToClipboard.defaultProps = {
     showCopyIcon: true

package/ui/content/Dashboard/Dashboard.d.ts

@@ -5,6 +5,10 @@ export interface IDashboardItem extends IFlexGridItem {
     * Заголовок для элемента
     */
     title?: string;
+    /**
+     * Иконка, которая отобразится слева от заголовка
+     */
+    iconName?: string;
 }
 /**
  * Dashboard
@@ -21,9 +25,8 @@ export interface IDashboardProps extends IUiComponent, IFlexGridProps {
      */
     itemView?: CustomView;
 }
-export interface IDashboardItemViewProps {
+export interface IDashboardItemViewProps extends Pick<IDashboardItem, 'title' | 'iconName'> {
     children: React.ReactNode;
-    title?: string;
 }
 declare function Dashboard(props: IDashboardProps): JSX.Element;
 export default Dashboard;

package/ui/content/Dashboard/Dashboard.js

@@ -10,17 +10,41 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = 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];
+}));
+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_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var FlexGrid_1 = __importDefault(require("../../../ui/list/FlexGrid/FlexGrid"));
 var hooks_1 = require("../../../hooks");
 function Dashboard(props) {
     var components = (0, hooks_1.useComponents)();
     var DashboardItemView = props.itemView || components.ui.getView('content.DashboardItemView');
-    var flexGridItems = react_1["default"].useMemo(function () { return props.items.map(function (item) { return (__assign(__assign({}, item), { content: (react_1["default"].createElement(DashboardItemView, { title: item.title }, item.content)) })); }); }, [DashboardItemView, props.items]);
-    return (react_1["default"].createElement(FlexGrid_1["default"], __assign({}, props, { items: flexGridItems })));
+    var flexGridItems = react_1["default"].useMemo(function () { return props.items.map(function (item) { return (__assign(__assign({}, item), { content: (react_1["default"].createElement(DashboardItemView, { title: item.title, iconName: item.iconName }, item.content)) })); }); }, [DashboardItemView, props.items]);
+    var viewProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props), { items: flexGridItems })); }, [flexGridItems, props]);
+    return (react_1["default"].createElement(FlexGrid_1["default"], __assign({}, viewProps)));
 }
 exports["default"] = Dashboard;

package/ui/content/Detail/Detail.d.ts

@@ -58,7 +58,16 @@ export interface IDetailProps extends IUiComponent {
     layout?: DetailLayoutEnum;
     /**
      * Перестраивать таблицу при ресайзе
-     * @example {enable: true, media: [{breakpoint: 600, column: 2}]}
+     * @example
+     * {
+     *  enable: true,
+     *  media: [
+     *   {
+     *    breakpoint: 600,
+     *    column: 2
+     *   }
+     *  ]
+     * }
      */
     responsive?: boolean | IDetailResponsive;
     /**
@@ -73,7 +82,11 @@ export interface IDetailProps extends IUiComponent {
     title?: string | React.ReactNode;
     /**
      * Контролы, которые нужно расположить рядом с таблицей
-     * @example [{label: __(('Edit')), onClick: () => props.onClick()}]
+     * @example
+     * [{
+     *  label: __(('Edit')),
+     *  onClick: () => props.onClick()
+     * }]
      */
     controls?: IControlItem[];
     /**

package/ui/content/Detail/Detail.js

@@ -148,7 +148,18 @@ function Detail(props) {
     (0, react_1.useEffect)(function () {
         setRows(createRows(detailItems, column, props.layout));
     }, [column, detailItems, props.layout]);
-    return components.ui.renderView(props.view || 'content.DetailView', __assign(__assign(__assign({}, props), { rows: rows }), (responsiveProps.enable ? { resizedNodeRef: resizedNodeRef } : {})));
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        title: props.title,
+        controls: props.controls,
+        layout: props.layout,
+        rows: rows,
+        resizedNodeRef: responsiveProps.enable ? { resizedNodeRef: resizedNodeRef } : {},
+        size: props.size,
+        className: props.className,
+        style: props.style
+    }); }, [props.title, props.controls, props.layout, props.size, props.className,
+        props.style, rows, responsiveProps.enable, resizedNodeRef]);
+    return components.ui.renderView(props.view || 'content.DetailView', viewProps);
 }
 exports["default"] = Detail;
 Detail.defaultProps = {

package/ui/content/DropDown/DropDown.d.ts

@@ -36,7 +36,7 @@ export interface IDropDownViewProps extends IDropDownProps, IAbsolutePositioning
     /**
      * Рассчет абсолютной позиции
      */
-    calculatePosition: (componentSize: ClientRect) => void;
+    calculatePosition?: (dropDownDimensions: Record<string, any>, arrowDimensions: Record<string, any>) => void;
     /**
      * Ссылка на view
      */

package/ui/content/DropDown/DropDown.js

@@ -45,7 +45,7 @@ var TooltipPortalInner_1 = __importDefault(require("../../layout/Tooltip/Tooltip
 var useAbsolutePositioning_1 = __importDefault(require("../../../hooks/useAbsolutePositioning"));
 function DropDown(props) {
     var components = (0, hooks_1.useComponents)();
-    var _a = (0, useAbsolutePositioning_1["default"])(props), isComponentExist = _a.isComponentExist, isComponentVisible = _a.isComponentVisible, calculateAbsolutePosition = _a.calculateAbsolutePosition, onShow = _a.onShow, onHide = _a.onHide, position = _a.position, style = _a.style;
+    var _a = (0, useAbsolutePositioning_1["default"])(props), 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 isManualControl = props.visible !== undefined;
     // Outside click -> close
@@ -70,8 +70,8 @@ function DropDown(props) {
     }, [isComponentExist, isComponentVisible, onHide, props.closeMode]);
     (0, react_use_1.useEvent)('mousedown', onAnyClick);
     (0, react_use_1.useEvent)('touchstart', onAnyClick);
-    var calculatePosition = (0, react_1.useCallback)(function (componentSize) {
-        calculateAbsolutePosition(position, childRef.current, componentSize);
+    var calculatePosition = (0, react_1.useCallback)(function (componentSize, arrowSize) {
+        calculateAbsolutePosition(position, childRef.current, componentSize, arrowSize);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     var DropDownView = components.ui.getView(props.view || 'content.DropDownView');
@@ -86,6 +86,18 @@ function DropDown(props) {
             onShow();
         };
     }
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        className: props.className,
+        forwardedRef: forwardedRef,
+        content: props.content,
+        position: position,
+        style: style,
+        arrowPosition: arrowPosition,
+        calculatePosition: calculatePosition,
+        isComponentVisible: isComponentVisible,
+        onClose: onHide,
+        hasArrow: props.hasArrow
+    }); }, [arrowPosition, calculatePosition, isComponentVisible, onHide, props.className, props.content, props.hasArrow, position, style]);
     return (React.createElement(React.Fragment, null,
         childrenElement
             ? React.cloneElement(childrenElement, resultProps)
@@ -93,7 +105,7 @@ function DropDown(props) {
         isComponentExist && (
         // TODO Change Portal to global
         React.createElement(TooltipPortalInner_1["default"], null,
-            React.createElement(DropDownView, __assign({}, props, { className: props.className, forwardedRef: forwardedRef, content: props.content, position: position, style: style, calculatePosition: calculatePosition, isComponentVisible: isComponentVisible, onClose: onHide }))))));
+            React.createElement(DropDownView, __assign({}, viewProps))))));
 }
 DropDown.defaultProps = {
     autoPositioning: true,

package/ui/content/Icon/Icon.js

@@ -1,29 +1,16 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
 var isObject_1 = __importDefault(require("lodash-es/isObject"));
 var isString_1 = __importDefault(require("lodash-es/isString"));
+var react_1 = require("react");
 var hooks_1 = require("../../../hooks");
 var DEFAULT_ICON_NAME = 'default_24x24';
 function Icon(props) {
     var components = (0, hooks_1.useComponents)();
     var name = props.name;
-    if (!(0, isString_1["default"])(name)) {
-        return null;
-    }
     var icon;
     if (process.env.PLATFORM === 'mobile') {
         icon = components.ui.getIcon(name) || name;
@@ -48,6 +35,17 @@ function Icon(props) {
             icon = components.ui.getIcon(DEFAULT_ICON_NAME);
         }
     }
-    return components.ui.renderView(props.view || 'content.IconView', __assign(__assign({}, props), { icon: icon }));
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        onClick: props.onClick,
+        tabIndex: props.tabIndex,
+        title: props.title,
+        className: props.className,
+        style: props.style,
+        icon: icon
+    }); }, [props.onClick, props.tabIndex, props.title, props.className, props.style, icon]);
+    if (!(0, isString_1["default"])(name)) {
+        return null;
+    }
+    return components.ui.renderView(props.view || 'content.IconView', viewProps);
 }
 exports["default"] = Icon;

package/ui/content/Kanban/Kanban.d.ts

@@ -22,7 +22,7 @@ export interface ITaskPriority {
     type: string;
 }
 export interface IKanbanTask {
-    id: string;
+    id: number;
     title: string;
     description?: string;
     fullDescription?: string;
@@ -46,7 +46,7 @@ export interface IDragEndResult {
     combine: null;
 }
 export interface IKanbanColumn {
-    id: string;
+    id: number;
     title: string;
     tasks: IKanbanTask[];
 }
@@ -69,6 +69,17 @@ export interface IKanbanTaskDetailsModalViewProps extends IModalProps {
     bem: IBem;
     task: IKanbanTask;
 }
+/**
+ * Kanban
+ *
+ * Компонент `Kanban` позволяет создать доску для управления задачами.
+ * Количество столбцов задается с помощью пропа `columns`.
+ * Задачи на доске можно создавать, редактировать и перемещать с визуальным отображением.
+ *
+ * Для работы этого компонента необходимо установить в проекте зависимости `react-beautiful-dnd`
+ * и передать в пропсы `droppableComponent`, `draggableComponent` и `dndContext`
+ * компоненты `Droppable`, `Draggable` и `DragDropContext` соответственно.
+ */
 export interface IKanbanProps extends IKanbanConfig, IUiComponent {
     /**
      * Компонент обертка для инициализации области куда можно переместить элемент из библиотеки react-beautiful-dnd
@@ -100,8 +111,8 @@ export interface IKanbanColumnViewProps {
     droppableComponent: any;
     draggableComponent: any;
     task?: IKanbanTask;
-    renderTask: (task: IKanbanTask, columnId: string, index: number) => JSX.Element;
-    onOpenCreateTaskModal: (columnId: string) => void;
+    renderTask: (task: IKanbanTask, columnId: number, index: number) => JSX.Element;
+    onOpenCreateTaskModal: (columnId: number) => void;
 }
 export type IKanbanViewProps = IKanbanProps;
 export default function Kanban(props: IKanbanProps): JSX.Element;

package/ui/content/Kanban/Kanban.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -54,6 +43,13 @@ function Kanban(props) {
     // Column
     var Column = components.ui.getView('content.KanbanColumnView');
     var renderColumn = (0, react_1.useCallback)(function (column, index) { return (react_1["default"].createElement(Column, { key: column.id, column: column, columnIndex: index, draggableComponent: props.draggableComponent, droppableComponent: props.droppableComponent, renderTask: renderTask, onOpenCreateTaskModal: onOpenCreateTaskModal })); }, [Column, onOpenCreateTaskModal, props.draggableComponent, props.droppableComponent, renderTask]);
-    return (react_1["default"].createElement(DragDropContext, { onDragEnd: onDragEnd }, components.ui.renderView(props.view || 'content.KanbanView', __assign(__assign({}, props), { columns: columns, renderColumn: renderColumn }))));
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        columns: columns,
+        renderColumn: renderColumn,
+        droppableComponent: props.droppableComponent,
+        className: props.className,
+        style: props.style
+    }); }, [columns, renderColumn, props.droppableComponent, props.className, props.style]);
+    return (react_1["default"].createElement(DragDropContext, { onDragEnd: onDragEnd }, components.ui.renderView(props.view || 'content.KanbanView', viewProps)));
 }
 exports["default"] = Kanban;