@steroidsjs/bootstrap 3.0.0-beta.113 → 3.0.0-beta.114

package/content/CalendarSystem/CalendarSystemEventGroupModalView.js

@@ -14,7 +14,7 @@ function CalendarSystemEventGroupModalView(props) {
         react_1["default"].createElement(form_1.Form, { className: bem.element('form'), onSubmit: function (fields) {
                 props.onEventGroupSubmit(fields);
                 props.onClose();
-            }, submitLabel: props.isCreate ? __('Создать') : __('Сохранить') },
+            }, submitLabel: props.isCreate ? __('Создать') : __('Сохранить'), initialValues: props.eventGroupInitialValues },
             react_1["default"].createElement("div", null,
                 react_1["default"].createElement(typography_1.Text, { className: bem.element('label'), content: __('Имя') }),
                 react_1["default"].createElement(form_1.InputField, { attribute: 'label', required: true, className: bem.element('name-field') })),

package/content/CalendarSystem/WeekGrid/WeekGrid.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import { IDay, IEvent } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
+import CalendarEnum from '@steroidsjs/core/ui/content/CalendarSystem/enums/CalendarType';
 import './WeekGrid.scss';
 interface IWeekGridProps {
     currentWeekDays: IDay[];
     allHours: string[];
-    getEventsFromDate: (dateFromDay: Date, isMonth: boolean) => IEvent[];
+    getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
     openEditModal: (event: IEvent) => void;
     openCreateModal: (eventInitialDay?: IDay) => void;
 }

package/content/Chat/ChatView.d.ts

@@ -0,0 +1,2 @@
+import { IChatViewProps } from '@steroidsjs/core/ui/content/Chat/Chat';
+export default function ChatView(props: IChatViewProps): JSX.Element;

package/content/Chat/ChatView.js

@@ -0,0 +1,52 @@
+"use strict";
+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 = __importStar(require("react"));
+var react_use_1 = require("react-use");
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var ChatInput_1 = __importDefault(require("./views/ChatInput"));
+var BubblesDateGroup_1 = __importDefault(require("./views/BubblesDateGroup"));
+function ChatView(props) {
+    var bem = (0, useBem_1["default"])('ChatView');
+    var endOfMessagesRef = (0, react_1.useRef)(null);
+    (0, react_use_1.useUpdateEffect)(function () {
+        endOfMessagesRef === null || endOfMessagesRef === void 0 ? void 0 : endOfMessagesRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+    }, [props.groupedMessagesByDates]);
+    var renderChatScreen = (0, react_1.useCallback)(function () { return (react_1["default"].createElement("div", { className: bem.element('screen') },
+        react_1["default"].createElement("div", { className: bem.element('content') },
+            Object.entries(props.groupedMessagesByDates)
+                .map(function (_a) {
+                var date = _a[0], groupedMessages = _a[1];
+                return (react_1["default"].createElement(BubblesDateGroup_1["default"], { key: date, date: date, groupedMessages: groupedMessages, currentUser: props.currentUser }));
+            }),
+            react_1["default"].createElement("div", { ref: endOfMessagesRef })))); }, [bem, props.groupedMessagesByDates, props.currentUser]);
+    return (react_1["default"].createElement("div", { className: bem.block() },
+        renderChatScreen(),
+        react_1["default"].createElement(ChatInput_1["default"], { chatId: props.chatId })));
+}
+exports["default"] = ChatView;

package/content/Chat/ChatView.scss

@@ -0,0 +1,53 @@
+@use "../../scss/variables";
+@use "../../scss/mixins";
+
+:root {
+  --chat-background-color: #fff;
+}
+
+html[data-theme="dark"] {
+  --chat-background-color: #101216;
+}
+
+$chat-background-color: var(--chat-background-color);
+$sidebar-scroll-thumb-color: var(--sidebar-scroll-thumb-color);
+$sidebar-scroll-track-color: var(--sidebar-scroll-track-color);
+
+.ChatView {
+  display: flex;
+  flex-direction: column;
+
+  padding: 0 16px;
+  background-color: $chat-background-color;
+
+  &__screen {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  &__content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    margin-right: -8px;
+    overflow-y: scroll;
+
+    @include mixins.scrollWrapper(#{700px}, 8px, $sidebar-scroll-thumb-color, $sidebar-scroll-track-color);
+
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-track {
+      margin-bottom: 16px;
+      margin-top: 16px;
+    }
+
+    &:first-child {
+      margin-top: 15px;
+    }
+  }
+}

package/content/Chat/index.d.ts

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

package/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 ChatView_1 = __importDefault(require("./ChatView"));
+exports["default"] = ChatView_1["default"];

package/content/Chat/views/BubbleMessage/BubbleMessageView.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { IChatUser } from '@steroidsjs/core/ui/content/Chat/Chat';
+import './BubbleMessageView.scss';
+interface IBubbleMessageProps {
+    user: IChatUser;
+    text: string;
+    timeAgo: string;
+    isCurrentUser: boolean;
+    isFirstMessage?: boolean;
+    isLastMessage?: boolean;
+}
+declare function BubbleMessageView(props: IBubbleMessageProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof BubbleMessageView>;
+export default _default;

package/content/Chat/views/BubbleMessage/BubbleMessageView.js

@@ -0,0 +1,52 @@
+"use strict";
+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 = __importStar(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var Avatar_1 = require("@steroidsjs/core/ui/content/Avatar");
+var typography_1 = require("@steroidsjs/core/ui/typography");
+var Title_1 = __importDefault(require("@steroidsjs/core/ui/typography/Title"));
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
+require("./BubbleMessageView.scss");
+function BubbleMessageView(props) {
+    var _a, _b;
+    var bem = (0, useBem_1["default"])('BubbleMessageView');
+    return (react_1["default"].createElement("div", { className: bem.block({
+            'another-user': !props.isCurrentUser,
+            'last-message': !!props.isLastMessage
+        }) },
+        react_1["default"].createElement("div", { className: bem.element('user-message') },
+            !props.isCurrentUser && props.isFirstMessage && (react_1["default"].createElement(Title_1["default"], { className: bem.element('username'), type: 'h4', tag: 'h4', content: "".concat(props.user.firstName, " ").concat(props.user.lastName) })),
+            react_1["default"].createElement(typography_1.Text, { className: bem.element('text'), type: "body", content: props.text }),
+            react_1["default"].createElement("div", { className: bem.element('indicators') },
+                react_1["default"].createElement(typography_1.Text, { className: bem.element('time'), type: "body3", content: props.timeAgo }),
+                props.isCurrentUser && (react_1["default"].createElement(Icon_1["default"], { className: bem.element('check'), name: "done-all" })))),
+        props.user && (react_1["default"].createElement("div", { className: bem.element('avatar') },
+            react_1["default"].createElement(Avatar_1.Avatar, { src: (_a = props.user.avatar) === null || _a === void 0 ? void 0 : _a.src, title: "".concat(props.user.firstName, " ").concat(props.user.lastName), status: (_b = props.user.avatar) === null || _b === void 0 ? void 0 : _b.status, size: 'sm' })))));
+}
+exports["default"] = (0, react_1.memo)(BubbleMessageView);

package/content/Chat/views/BubbleMessage/BubbleMessageView.scss

@@ -0,0 +1,157 @@
+@use "../../../../scss/variables";
+
+:root {
+  --bubble-background-color: #6b76ad;
+  --bubble-border-color: #6b76ad;
+  --username-text-color: #fff;
+  --message-text-color: #fff;
+  --message-time-color: #fff;
+
+  --another-user-bubble-background-color: #f8f8f8;
+  --another-user-bubble-border-color: #f1f5f7;
+  --another-user-username-text-color: #fff;
+  --another-user-message-text-color: #323232;
+  --another-user-message-time-color: rgba(0, 0, 0, 0.30);
+}
+
+html[data-theme="dark"] {
+  --bubble-background-color: #727EB7;
+  --bubble-border-color: #727EB7;
+  --message-text-color: #fff;
+  --message-time-color: #fff;
+
+  --another-user-bubble-background-color: #333646;
+  --another-user-bubble-border-color: #333646;
+  --another-user-message-text-color: #fff;
+  --another-user-message-time-color: rgba(255, 255, 255, 0.30);
+}
+
+$bubble-background-color: var(--bubble-background-color);
+$bubble-border-color: var(--bubble-border-color);
+$message-text-color: var(--message-text-color);
+$message-time-color: var(--message-time-color);
+
+$another-user-bubble-background-color: var(--another-user-bubble-background-color);
+$another-user-bubble-border-color: var(--another-user-bubble-border-color);
+$another-user-message-text-color: var(--another-user-message-text-color);
+$another-user-message-time-color: var(--another-user-message-time-color);
+
+.BubbleMessageView {
+  $root: &;
+
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
+  align-items: flex-end;
+  align-self: flex-end;
+  gap: 8px;
+  max-width: 548px;
+  width: 100%;
+  margin-bottom: 4px;
+
+  &_another-user {
+    justify-content: flex-start;
+    align-self: flex-start;
+
+    #{$root}__avatar {
+      order: -1;
+    }
+
+    #{$root}__username {
+      color: $another-user-message-text-color;
+    }
+
+    #{$root}__user-message {
+      border: 1px solid $another-user-bubble-border-color;
+      background: $another-user-bubble-background-color;
+      color: $another-user-message-text-color;
+    }
+
+    #{$root}__text {
+      text-align: left;
+      color: $another-user-message-text-color;
+    }
+
+    #{$root}__time {
+      color: $another-user-message-time-color;
+    }
+
+    &#{$root}_last-message {
+      #{$root}__user-message {
+        border-radius: 16px 16px 16px 0;
+      }
+
+      #{$root}__avatar {
+        visibility: visible;
+      }
+
+      #{$root}__username {
+        color: $another-user-message-text-color;
+      }
+    }
+  }
+
+  &_last-message {
+    margin-bottom: 8px;
+
+    #{$root}__user-message {
+      border-radius: 16px 16px 0 16px;
+    }
+
+    #{$root}__avatar {
+      visibility: visible;
+    }
+  }
+
+  &__avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 36px;
+    min-height: 36px;
+    visibility: hidden;
+  }
+
+  &__username {
+    align-self: flex-start;
+    margin-bottom: 0;
+    color: $message-text-color;
+  }
+
+  &__user-message {
+    display: flex;
+    padding: 12px;
+    flex-flow: column nowrap;
+    justify-content: flex-end;
+    align-items: flex-end;
+    gap: 4px;
+    border-radius: 16px;
+
+    border: 1px solid $bubble-border-color;
+    background: $bubble-background-color;
+    color: $message-text-color;
+  }
+
+  &__text {
+    margin-bottom: 0;
+    white-space: break-spaces;
+    width: 100%;
+    text-align: left;
+    color: $message-text-color;
+  }
+
+  &__indicators {
+    display: flex;
+    flex-flow: row nowrap;
+  }
+
+  &__time {
+    margin-bottom: 0;
+    font-weight: 500;
+    color: $message-time-color;
+  }
+
+  &__check {
+    margin-left: 4px;
+  }
+}

package/content/Chat/views/BubbleMessage/index.d.ts

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

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

package/content/Chat/views/BubblesDateGroup/BubblesDateGroup.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { IGroupedMessage } from '@steroidsjs/core/ui/content/Chat/hooks/useChat';
+import { IChatUser } from '@steroidsjs/core/ui/content/Chat/Chat';
+import './BubblesDateGroup.scss';
+interface IBubblesDateGroupProps {
+    date: string;
+    groupedMessages: IGroupedMessage[][];
+    currentUser: IChatUser;
+}
+declare function BubblesDateGroup(props: IBubblesDateGroupProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof BubblesDateGroup>;
+export default _default;

package/content/Chat/views/BubblesDateGroup/BubblesDateGroup.js

@@ -0,0 +1,48 @@
+"use strict";
+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 = __importStar(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var utils_1 = require("@steroidsjs/core/ui/content/Chat/utils");
+var BubbleMessage_1 = __importDefault(require("../BubbleMessage"));
+require("./BubblesDateGroup.scss");
+function BubblesDateGroup(props) {
+    var _a;
+    var bem = (0, useBem_1["default"])('BubblesDateGroup');
+    var toBubbles = (0, react_1.useCallback)(function (groupedMessages) { return (react_1["default"].createElement("div", { className: bem.element('bubbles') }, groupedMessages.map(function (bubbleMessage) { return (react_1["default"].createElement(BubbleMessage_1["default"], { key: bubbleMessage.id, user: bubbleMessage.user, text: bubbleMessage.text, timeAgo: (0, utils_1.calculateMessageTimeAgo)(bubbleMessage.timestamp), isCurrentUser: bubbleMessage.user.id === props.currentUser.id, isFirstMessage: bubbleMessage.isFirstMessage, isLastMessage: bubbleMessage.isLastMessage })); }))); }, [bem, props.currentUser.id]);
+    var renderDate = (0, react_1.useCallback)(function () { return (react_1["default"].createElement(react_1["default"].Fragment, null,
+        react_1["default"].createElement("div", { className: bem.element('date') },
+            react_1["default"].createElement("div", { className: bem.element('date-wrapper') },
+                react_1["default"].createElement("span", { className: bem.element('date-text') }, props.date))),
+        react_1["default"].createElement("div", { className: bem.element('date', 'invisible-date') },
+            react_1["default"].createElement("div", { className: bem.element('date-wrapper', 'invisible-date') }, props.date)))); }, [bem, props.date]);
+    return (react_1["default"].createElement("div", { className: bem.block() },
+        renderDate(), (_a = props.groupedMessages) === null || _a === void 0 ? void 0 :
+        _a.map(toBubbles)));
+}
+exports["default"] = (0, react_1.memo)(BubblesDateGroup);

package/content/Chat/views/BubblesDateGroup/BubblesDateGroup.scss

@@ -0,0 +1,78 @@
+@use "../../../../scss/variables";
+
+:root {
+  --date-text-color: #191b1f;
+  --date-background-color: #f1f5f7;
+  --decorative-line-color: rgba(0, 0, 0, 0.10);
+}
+
+html[data-theme="dark"] {
+  --date-text-color: #fff;
+  --date-background-color: #272a37;
+  --decorative-line-color: rgba(255, 255, 255, 0.10);
+}
+
+$date-text-color: var(--date-text-color);
+$date-background-color: var(--date-background-color);
+$decorative-line-color: var(--decorative-line-color);
+
+.BubblesDateGroup {
+  display: flex;
+  flex-flow: column nowrap;
+  position: relative;
+
+  &__date {
+    display: flex;
+    justify-content: center;
+    position: sticky;
+    top: 10px;
+    width: 100%;
+    text-align: center;
+    font-size: 12px;
+    line-height: 16px;
+    margin: 8px 0 16px 0;
+
+    &_invisible-date {
+      position: absolute;
+      top: 0;
+
+      &::before,
+      &::after {
+        content: "";
+        flex: 1 1;
+        border-bottom: 1px solid;
+        margin: auto;
+        color: $decorative-line-color;
+      }
+
+      &::before {
+        margin-right: 10px
+      }
+
+      &::after {
+        margin-left: 10px
+      }
+    }
+  }
+
+  &__date-wrapper {
+    padding: 8px;
+    border-radius: 16px;
+    background: $date-background-color;
+
+    &_invisible-date {
+      opacity: 0;
+    }
+  }
+
+  &__date-text {
+    font-weight: 700;
+    color: $date-text-color;
+    opacity: 0.4;
+  }
+
+  &__bubbles {
+    display: flex;
+    flex-flow: column nowrap;
+  }
+}

package/content/Chat/views/BubblesDateGroup/index.d.ts

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

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

package/content/Chat/views/ChatInput/ChatInputView.d.ts

@@ -0,0 +1,6 @@
+import './ChatInputView.scss';
+interface IChatInputProps {
+    chatId: string;
+}
+export default function ChatInputView(props: IChatInputProps): JSX.Element;
+export {};

package/content/Chat/views/ChatInput/ChatInputView.js

@@ -0,0 +1,41 @@
+"use strict";
+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 = __importStar(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var form_1 = require("@steroidsjs/core/ui/form");
+require("./ChatInputView.scss");
+function ChatInputView(props) {
+    var bem = (0, useBem_1["default"])('ChatInputView');
+    var renderInputActions = (0, react_1.useCallback)(function () { return (react_1["default"].createElement("div", { className: bem.element('actions') },
+        react_1["default"].createElement(form_1.Button, { className: bem.element('action'), icon: "send", type: "submit" }))); }, [bem]);
+    return (react_1["default"].createElement("div", { className: bem.block() },
+        react_1["default"].createElement(form_1.Form, { formId: props.chatId, className: bem.element('form'), useRedux: true },
+            react_1["default"].createElement(form_1.InputField, { className: bem.element('input'), attribute: "text", size: "lg", required: true, placeholder: __('Введите сообщение'), addonAfter: renderInputActions() }))));
+}
+exports["default"] = ChatInputView;

package/content/Chat/views/ChatInput/ChatInputView.scss

@@ -0,0 +1,36 @@
+@use "../../../../scss/variables";
+
+.ChatInputView {
+  &__actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 24px;
+  }
+
+  &__action {
+    svg > * {
+      stroke: variables.$text-color
+    }
+  }
+
+  &__input {
+    .InputFieldView__addon-after {
+      background-color: inherit;
+    }
+
+    .InputFieldView__input {
+      border: none;
+      padding: 16px 0 16px 16px;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 18px;
+    }
+
+    .ButtonView_button {
+      background-color: inherit;
+      padding: 0;
+    }
+  }
+}

package/content/Chat/views/ChatInput/index.d.ts

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

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

package/icons/index.js

@@ -41,6 +41,7 @@ exports["default"] = (function (customIcons) {
         'cross_8x8',
         'default_16x16',
         'default_24x24',
+        'done-all',
         'cut',
         'error_16x16',
         'error_24x24',
@@ -78,6 +79,7 @@ exports["default"] = (function (customIcons) {
         'pin',
         'sad',
         'search',
+        'send',
         'setting_line',
         'share',
         'star',

package/icons/svgs/done-all.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <path d="M0.999998 9.09091L3.04198 10.4986C3.45739 10.785 4.02106 10.7171 4.35652 10.3402L10 4" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.51367 10.5551L7.80269 10.784C8.44255 11.2907 9.37013 11.1928 9.89012 10.5637L15.0519 4.31856C15.2279 4.10571 15.1979 3.79054 14.9851 3.61462C14.7722 3.43869 14.4571 3.46862 14.2811 3.68147L9.11932 9.92663C8.94599 10.1363 8.6368 10.169 8.42351 10.0001L8.17965 9.80694L7.51367 10.5551Z" fill="white"/>
+</svg>

package/icons/svgs/send.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M6.99811 10.2467L7.43298 11.0077C7.70983 11.4922 7.84825 11.7344 7.84825 12C7.84825 12.2656 7.70983 12.5078 7.43299 12.9923L7.43298 12.9923L6.99811 13.7533C5.75981 15.9203 5.14066 17.0039 5.62348 17.5412C6.1063 18.0785 7.24961 17.5783 9.53623 16.5779L15.8119 13.8323C17.6074 13.0468 18.5051 12.654 18.5051 12C18.5051 11.346 17.6074 10.9532 15.8119 10.1677L9.53624 7.4221C7.24962 6.42171 6.1063 5.92151 5.62348 6.45883C5.14066 6.99615 5.75981 8.07966 6.99811 10.2467Z" stroke="#323232"/>
+</svg>

package/index.d.ts

@@ -59,6 +59,9 @@ declare const _default: {
     'content.CalendarSystemView': {
         lazy: () => any;
     };
+    'content.ChatView': {
+        lazy: () => any;
+    };
     'form.AutoCompleteFieldView': {
         lazy: () => any;
     };

package/index.js

@@ -62,6 +62,9 @@ exports["default"] = {
     'content.CalendarSystemView': {
         lazy: function () { return require('./content/CalendarSystem/CalendarSystemView')["default"]; }
     },
+    'content.ChatView': {
+        lazy: function () { return require('./content/Chat/ChatView')["default"]; }
+    },
     'form.AutoCompleteFieldView': {
         lazy: function () { return require('./form/AutoCompleteField/AutoCompleteFieldView')["default"]; }
     },

package/index.scss

@@ -30,6 +30,7 @@
 @include meta.load-css('content/Kanban/views/KanbanColumn/KanbanColumnView');
 @include meta.load-css('content/Kanban/views/KanbanTask/KanbanTaskView');
 @include meta.load-css('content/Kanban/views/KanbanModal/KanbanModalView');
+@include meta.load-css('content/Chat/ChatView');
 @include meta.load-css('crud/Crud/CrudView');
 @include meta.load-css('form/AutoCompleteField/AutoCompleteFieldView');
 @include meta.load-css('form/Button/ButtonView');

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.113",
+    "version": "3.0.0-beta.114",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -37,7 +37,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.98",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.99",
         "@steroidsjs/eslint-config": "^2.1.4",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",