@steroidsjs/bootstrap 3.0.0-beta.126 → 3.0.0-beta.128

package/content/CalendarSystem/AsideCalendars/AsideCalendars.d.ts

@@ -4,7 +4,6 @@ import './AsideCalendars.scss';
 interface IAsideCalendarsProps {
     eventGroups: IEventGroup[];
     eventGroupsTitle: string;
-    selectedCalendarGroupsIds: number[];
     onChangeEventGroupsIds: (selectedIds: number[]) => void;
     openCreateEventGroupModal: () => void;
 }

package/content/CalendarSystem/AsideCalendars/AsideCalendars.js

@@ -36,7 +36,7 @@ function AsideCalendars(props) {
     return (react_1["default"].createElement("div", { className: bem.block() },
         react_1["default"].createElement(content_1.Accordion, null,
             react_1["default"].createElement(content_1.AccordionItem, { title: props.eventGroupsTitle },
-                react_1["default"].createElement(form_1.CheckboxListField, { items: props.eventGroups, selectedIds: props.selectedCalendarGroupsIds, onChange: function (selectedIds) { return props.onChangeEventGroupsIds(selectedIds); } }),
+                react_1["default"].createElement(form_1.CheckboxListField, { items: props.eventGroups, onChange: function (selectedIds) { return props.onChangeEventGroupsIds(selectedIds); } }),
                 react_1["default"].createElement(form_1.Button, { color: 'basic', className: bem.element('add'), onClick: props.openCreateEventGroupModal, size: 'sm' },
                     react_1["default"].createElement(content_1.Icon, { name: "add_16x16" }))))));
 }

package/content/CalendarSystem/CalendarSystemModalView.js

@@ -19,7 +19,7 @@ function CalendarSystemModalView(props) {
     var dispatch = (0, hooks_1.useDispatch)();
     var eventInitialValues = react_1["default"].useMemo(function () { return props.eventInitialValues; }, [props.eventInitialValues]);
     var callOnEventSubmit = function (fields) {
-        return eventInitialValues && !props.isCreate ? props.onEventSubmit(fields, eventInitialValues) : props.onEventSubmit(fields);
+        return eventInitialValues && !props.isCreate ? props.onModalFormSubmit(fields, eventInitialValues) : props.onModalFormSubmit(fields);
     };
     var onCloseModal = react_1["default"].useCallback(function () {
         props.onClose();

package/content/CalendarSystem/CalendarSystemView.js

@@ -1,4 +1,15 @@
 "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 };
 };
@@ -14,15 +25,20 @@ var MonthGrid_1 = __importDefault(require("./MonthGrid"));
 var WeekGrid_1 = __importDefault(require("./WeekGrid"));
 function CalendarSystemView(props) {
     var bem = (0, useBem_1["default"])('CalendarSystemView');
+    var calendarTypeGrids = react_1["default"].useMemo(function () {
+        var _a;
+        return (_a = {},
+            _a[CalendarType_1["default"].MONTH] = react_1["default"].createElement(MonthGrid_1["default"], __assign({}, props.monthGridProps)),
+            _a[CalendarType_1["default"].WEEK] = react_1["default"].createElement(WeekGrid_1["default"], __assign({}, props.weekGridProps)),
+            _a);
+    }, [props.monthGridProps, props.weekGridProps]);
     return (react_1["default"].createElement("div", { className: bem(bem.block(), props.className), style: props.style },
         react_1["default"].createElement("aside", { className: bem.element('aside') },
             react_1["default"].createElement(AsideHeader_1["default"], { onClick: props.openCreateModal, className: bem.element('aside-header') }),
-            react_1["default"].createElement(Calendar_1["default"], { showFooter: false, onMonthChange: props.onMonthChange }),
-            react_1["default"].createElement(AsideCalendars_1["default"], { eventGroups: props.eventGroups, eventGroupsTitle: props.eventGroupsTitle, selectedCalendarGroupsIds: props.selectedCalendarGroups, onChangeEventGroupsIds: props.onChangeEventGroupsIds, openCreateEventGroupModal: props.openCreateEventGroupModal })),
+            react_1["default"].createElement(Calendar_1["default"], { showFooter: false, onMonthChange: props.onInnerCalendarChangeMonth }),
+            react_1["default"].createElement(AsideCalendars_1["default"], { eventGroups: props.eventGroups, eventGroupsTitle: props.eventGroupsTitle, onChangeEventGroupsIds: props.onChangeEventGroupsIds, openCreateEventGroupModal: props.openCreateEventGroupModal })),
         react_1["default"].createElement("div", { className: bem.element('content') },
-            react_1["default"].createElement(ContentHeader_1["default"], { dateToDisplay: props.dateToDisplay, onChangeCalendarType: props.onChangeCalendarType, applyControl: props.applyControl }),
-            props.calendarType === CalendarType_1["default"].MONTH
-                ? (react_1["default"].createElement(MonthGrid_1["default"], { monthCalendarDays: props.monthCalendarDays, getEventsFromDate: props.getEventsFromDate, weekDays: props.weekDays, openEditModal: props.openEditModal, openCreateModal: props.openCreateModal }))
-                : (react_1["default"].createElement(WeekGrid_1["default"], { allHours: props.allHours, getEventsFromDate: props.getEventsFromDate, currentWeekDays: props.currentWeekDays, openEditModal: props.openEditModal, openCreateModal: props.openCreateModal })))));
+            react_1["default"].createElement(ContentHeader_1["default"], { dateToDisplay: props.dateToDisplay, onChangeCalendarType: props.handleCalendarTypeChange, handleControlClick: props.handleControlClick }),
+            calendarTypeGrids[props.calendarType])));
 }
 exports["default"] = CalendarSystemView;

package/content/CalendarSystem/ContentHeader/ContentHeader.d.ts

@@ -3,7 +3,7 @@ import './ContentHeader.scss';
 interface IContentHeaderProps {
     dateToDisplay: string;
     onChangeCalendarType: (newType: string) => void;
-    applyControl: (event: React.MouseEvent<HTMLElement>) => void;
+    handleControlClick: (event: React.MouseEvent<HTMLElement>) => void;
 }
 declare function ContentHeader(props: IContentHeaderProps): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof ContentHeader>;

package/content/CalendarSystem/ContentHeader/ContentHeader.js

@@ -16,7 +16,7 @@ function ContentHeader(props) {
     var bem = (0, useBem_1["default"])('ContentHeader');
     return (react_1["default"].createElement("div", { className: bem.block() },
         react_1["default"].createElement(Text_1["default"], { content: props.dateToDisplay, className: bem.element('month') }),
-        react_1["default"].createElement("ul", { className: bem.element('controls'), onClick: props.applyControl }, Object.entries(DateControlType_1["default"].getIcons()).map(function (_a, controlIndex) {
+        react_1["default"].createElement("ul", { className: bem.element('controls'), onClick: props.handleControlClick }, Object.entries(DateControlType_1["default"].getIcons()).map(function (_a, controlIndex) {
             var controlLabel = _a[0], controlIcon = _a[1];
             return (react_1["default"].createElement("li", { key: controlIndex, className: bem.element('controls-item'), "data-control": controlLabel },
                 react_1["default"].createElement(content_1.Icon, { className: bem.element('controls-item-icon'), name: controlIcon })));

package/content/CalendarSystem/MonthGrid/MonthGrid.d.ts

@@ -3,9 +3,9 @@ import { IDay, IEvent } from '@steroidsjs/core/ui/content/CalendarSystem/Calenda
 import CalendarEnum from '@steroidsjs/core/ui/content/CalendarSystem/enums/CalendarType';
 import './MonthGrid.scss';
 interface IMonthGridProps {
-    monthCalendarDays: IDay[];
+    monthGridWeekDays: string[];
+    monthGridCalendarDays: IDay[];
     getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
-    weekDays: string[];
     openEditModal: (event: IEvent) => void;
     openCreateModal: (eventInitialDay?: IDay) => void;
 }

package/content/CalendarSystem/MonthGrid/MonthGrid.js

@@ -33,7 +33,7 @@ var MonthDay_1 = __importDefault(require("./views/MonthDay"));
 function MonthGrid(props) {
     var bem = (0, useBem_1["default"])('MonthGrid');
     return (react_1["default"].createElement("div", { className: bem.block() },
-        react_1["default"].createElement("div", { className: bem.element('week-days') }, props.weekDays.map(function (day, dayIndex) { return (react_1["default"].createElement("span", { key: dayIndex, className: bem.element('week-days-day') }, day)); })),
-        react_1["default"].createElement("div", { className: bem.element('grid') }, props.monthCalendarDays.map(function (day, dayIndex) { return (react_1["default"].createElement(MonthDay_1["default"], { key: dayIndex, openEditModal: props.openEditModal, getEventsFromDate: props.getEventsFromDate, openCreateModal: props.openCreateModal, day: day })); }))));
+        react_1["default"].createElement("div", { className: bem.element('week-days') }, props.monthGridWeekDays.map(function (day, dayIndex) { return (react_1["default"].createElement("span", { key: dayIndex, className: bem.element('week-days-day') }, day)); })),
+        react_1["default"].createElement("div", { className: bem.element('grid') }, props.monthGridCalendarDays.map(function (day, dayIndex) { return (react_1["default"].createElement(MonthDay_1["default"], { key: dayIndex, openEditModal: props.openEditModal, getEventsFromDate: props.getEventsFromDate, openCreateModal: props.openCreateModal, day: day })); }))));
 }
 exports["default"] = (0, react_1.memo)(MonthGrid);

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

@@ -3,8 +3,8 @@ import { IDay, IEvent } from '@steroidsjs/core/ui/content/CalendarSystem/Calenda
 import CalendarEnum from '@steroidsjs/core/ui/content/CalendarSystem/enums/CalendarType';
 import './WeekGrid.scss';
 interface IWeekGridProps {
-    currentWeekDays: IDay[];
-    allHours: string[];
+    weekGridTwentyFourHoursArray: string[];
+    weekGridCurrentWeekDays: IDay[];
     getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
     openEditModal: (event: IEvent) => void;
     openCreateModal: (eventInitialDay?: IDay) => void;

package/content/CalendarSystem/WeekGrid/WeekGrid.js

@@ -10,16 +10,16 @@ var WeekHour_1 = __importDefault(require("./views/WeekHour"));
 require("./WeekGrid.scss");
 function WeekGrid(props) {
     var bem = (0, useBem_1["default"])('WeekGrid');
-    var currentWeekDays = props.currentWeekDays, getEventsFromDate = props.getEventsFromDate;
-    var renderWeekHours = react_1["default"].useCallback(function (hour) { return currentWeekDays.map(function (dayOfWeek, dayOfWeekIndex) { return (react_1["default"].createElement(WeekHour_1["default"], { hour: hour, getEventsFromDate: getEventsFromDate, key: dayOfWeekIndex, dayOfWeek: dayOfWeek, openEditModal: props.openEditModal, openCreateModal: props.openCreateModal })); }); }, [currentWeekDays, getEventsFromDate, props.openCreateModal, props.openEditModal]);
+    var weekGridCurrentWeekDays = props.weekGridCurrentWeekDays, getEventsFromDate = props.getEventsFromDate;
+    var renderWeekHours = react_1["default"].useCallback(function (hour) { return weekGridCurrentWeekDays.map(function (dayOfWeek, dayOfWeekIndex) { return (react_1["default"].createElement(WeekHour_1["default"], { hour: hour, getEventsFromDate: getEventsFromDate, key: dayOfWeekIndex, dayOfWeek: dayOfWeek, openEditModal: props.openEditModal, openCreateModal: props.openCreateModal })); }); }, [weekGridCurrentWeekDays, getEventsFromDate, props.openCreateModal, props.openEditModal]);
     return (react_1["default"].createElement("div", { className: bem.block() },
         react_1["default"].createElement("div", { className: bem.element('content') },
-            react_1["default"].createElement("div", { className: bem.element('hours-time') }, props.allHours.map(function (hour, hourIndex) { return (react_1["default"].createElement("div", { key: hourIndex, className: bem.element('hours-time-item') }, hour)); })),
+            react_1["default"].createElement("div", { className: bem.element('hours-time') }, props.weekGridTwentyFourHoursArray.map(function (hour, hourIndex) { return (react_1["default"].createElement("div", { key: hourIndex, className: bem.element('hours-time-item') }, hour)); })),
             react_1["default"].createElement("div", { className: bem.element('table') },
-                react_1["default"].createElement("div", { className: bem.element('table-heading') }, currentWeekDays.map(function (weekDay, weekDayIndex) { return (react_1["default"].createElement(Text_1["default"], { key: weekDayIndex, className: bem.element('day', {
+                react_1["default"].createElement("div", { className: bem.element('table-heading') }, weekGridCurrentWeekDays.map(function (weekDay, weekDayIndex) { return (react_1["default"].createElement(Text_1["default"], { key: weekDayIndex, className: bem.element('day', {
                         isToday: weekDay.isToday
                     }) },
                     react_1["default"].createElement("span", { className: bem.element('day-wrapper') }, weekDay.formattedDisplay))); })),
-                react_1["default"].createElement("div", { className: bem.element('table-grid') }, props.allHours.map(function (hour, hourIndex) { return (react_1["default"].createElement("div", { key: hourIndex, className: bem.element('table-grid-row') }, renderWeekHours(hour))); }))))));
+                react_1["default"].createElement("div", { className: bem.element('table-grid') }, props.weekGridTwentyFourHoursArray.map(function (hour, hourIndex) { return (react_1["default"].createElement("div", { key: hourIndex, className: bem.element('table-grid-row') }, renderWeekHours(hour))); }))))));
 }
 exports["default"] = react_1["default"].memo(WeekGrid);

package/content/Chat/ChatView.js

@@ -28,10 +28,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var react_1 = __importStar(require("react"));
 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');
+    // Scroll to bottom on new message
     var wrapperRef = (0, react_1.useRef)(null);
     var contentRef = (0, react_1.useRef)(null);
     var prevContentHeightRef = (0, react_1.useRef)(null);
@@ -57,6 +57,6 @@ function ChatView(props) {
             }))))); }, [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, onSendMessage: props.onSendMessage })));
+        props.renderChatInput()));
 }
 exports["default"] = ChatView;

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

@@ -10,6 +10,7 @@ interface IBubbleMessageProps {
     isFirstMessage?: boolean;
     isLastMessage?: boolean;
     isTodayMessage?: boolean;
+    files?: any[];
 }
 declare function BubbleMessageView(props: IBubbleMessageProps): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof BubbleMessageView>;

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

@@ -1,4 +1,15 @@
 "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);
@@ -28,6 +39,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var react_1 = __importStar(require("react"));
 var react_use_1 = require("react-use");
+var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
 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");
@@ -36,18 +48,21 @@ var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var timeTemplatesAndUnits_1 = require("@steroidsjs/core/ui/content/Chat/constants/timeTemplatesAndUnits");
 var utils_1 = require("@steroidsjs/core/ui/content/Chat/utils");
 require("./BubbleMessageView.scss");
+var ChatFileItem_1 = __importDefault(require("../ChatFileItem"));
 function BubbleMessageView(props) {
     var _a, _b;
     var bem = (0, useBem_1["default"])('BubbleMessageView');
+    var isMessageByAnotherUser = !props.isCurrentUser;
     var _c = (0, react_1.useState)(props.timeAgo), timeAgo = _c[0], setTimeAgo = _c[1];
     (0, react_use_1.useInterval)(function () { return setTimeAgo((0, utils_1.calculateMessageTimeAgo)(props.timestamp)); }, props.isTodayMessage ? timeTemplatesAndUnits_1.SECONDS_IN_MINUTE_VALUE : null);
     return (react_1["default"].createElement("div", { className: bem.block({
-            'another-user': !props.isCurrentUser,
+            'another-user': isMessageByAnotherUser,
             '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 }),
+            !(0, isEmpty_1["default"])(props.files) && (react_1["default"].createElement("div", { className: bem.element('files') }, props.files.map(function (file) { return (react_1["default"].createElement(ChatFileItem_1["default"], __assign({ key: file.uid, isFileByAnotherUser: isMessageByAnotherUser, isFileFromMessage: true }, file))); }))),
             react_1["default"].createElement("div", { className: bem.element('indicators') },
                 react_1["default"].createElement(typography_1.Text, { className: bem.element('time'), type: "body3", content: timeAgo }),
                 props.isCurrentUser && (react_1["default"].createElement(Icon_1["default"], { className: bem.element('check'), name: "done-all" })))),

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

@@ -36,6 +36,18 @@ $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);
 
+@mixin svg-color($color) {
+  svg {
+    path {
+      stroke: $color;
+    }
+
+    circle {
+      fill: $color;
+    }
+  }
+}
+
 .BubbleMessageView {
   $root: &;
 
@@ -72,6 +84,14 @@ $another-user-message-time-color: var(--another-user-message-time-color);
       color: $another-user-message-text-color;
     }
 
+    #{$root}__files {
+      @include svg-color($another-user-message-text-color);
+
+      .TextView {
+        color: $another-user-message-text-color;
+      }
+    }
+
     #{$root}__time {
       color: $another-user-message-time-color;
     }
@@ -140,6 +160,20 @@ $another-user-message-time-color: var(--another-user-message-time-color);
     color: $message-text-color;
   }
 
+  &__files {
+    @include svg-color($message-text-color);
+
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 8px;
+    width: 100%;
+    padding: 8px 0;
+
+    .TextView {
+      color: $message-text-color;
+    }
+  }
+
   &__indicators {
     display: flex;
     flex-flow: row nowrap;
@@ -154,4 +188,8 @@ $another-user-message-time-color: var(--another-user-message-time-color);
   &__check {
     margin-left: 4px;
   }
+
+  .ChatFileItemView {
+    width: 100%;
+  }
 }

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

@@ -34,7 +34,7 @@ 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, timestamp: bubbleMessage.timestamp, timeAgo: (0, utils_1.calculateMessageTimeAgo)(bubbleMessage.timestamp), isTodayMessage: (0, utils_1.isTodayMessage)(bubbleMessage.timestamp), isCurrentUser: bubbleMessage.user.id === props.currentUser.id, isFirstMessage: bubbleMessage.isFirstMessage, isLastMessage: bubbleMessage.isLastMessage })); }))); }, [bem, props.currentUser.id]);
+    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, files: bubbleMessage.files, timestamp: bubbleMessage.timestamp, timeAgo: (0, utils_1.calculateMessageTimeAgo)(bubbleMessage.timestamp), isTodayMessage: (0, utils_1.isTodayMessage)(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') },

package/content/Chat/views/ChatFileItem/ChatFileItemView.d.ts

@@ -0,0 +1,9 @@
+import { IFileFieldItemViewProps } from '@steroidsjs/core/ui/form/FileField/FileField';
+import { IMessageFile } from '@steroidsjs/core/ui/content/Chat/Chat';
+import './ChatFileItemView.scss';
+interface IChatFileItemViewProps extends IFileFieldItemViewProps, IMessageFile {
+    isFileFromMessage?: boolean;
+    isFileByAnotherUser?: boolean;
+}
+export default function ChatFileItemView(props: IChatFileItemViewProps): JSX.Element;
+export {};

package/content/Chat/views/ChatFileItem/ChatFileItemView.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
+var typography_1 = require("@steroidsjs/core/ui/typography");
+var format_1 = require("@steroidsjs/core/ui/format");
+require("./ChatFileItemView.scss");
+function ChatFileItemView(props) {
+    var _a, _b;
+    var bem = (0, hooks_1.useBem)('ChatFileItemView');
+    var isLoading = props.progress && props.progress.percent !== 100;
+    var renderLink = react_1["default"].useCallback(function () {
+        var _a;
+        return (react_1["default"].createElement("a", { className: bem.element('link'), title: props.title, href: props.error ? '#' : (props.url || ((_a = props.item) === null || _a === void 0 ? void 0 : _a.url)), target: 'blank' }, props.title));
+    }, [bem, props.title, props.error, props.url, (_a = props.item) === null || _a === void 0 ? void 0 : _a.url]);
+    var renderProgressBar = react_1["default"].useCallback(function () { return (react_1["default"].createElement("div", { className: bem.element('progress-track') },
+        react_1["default"].createElement("div", { className: bem.element('progress-bar'), style: { width: "".concat(props.progress.percent, "%") } }))); }, [bem, props.progress]);
+    var renderLoadingState = react_1["default"].useCallback(function () { return (react_1["default"].createElement("div", { className: bem.element('left') },
+        react_1["default"].createElement("div", { className: bem.element('icon-wrapper', 'loading') },
+            react_1["default"].createElement(Icon_1["default"], { className: bem.element('icon-loading'), name: 'loading_default' })),
+        react_1["default"].createElement("div", { className: bem.element('content') },
+            react_1["default"].createElement("span", { className: bem.element('title', 'loading') }, props.title),
+            renderProgressBar()))); }, [bem, props.title, renderProgressBar]);
+    var renderFileItem = react_1["default"].useCallback(function () {
+        var _a;
+        return (react_1["default"].createElement("div", { className: bem.element('left') },
+            react_1["default"].createElement("div", { className: bem.element('icon-wrapper') },
+                react_1["default"].createElement(Icon_1["default"], { className: bem.element('icon'), name: (((_a = props.item) === null || _a === void 0 ? void 0 : _a.fullHeight) || props.fullHeight) ? 'img_box' : 'file_dock' })),
+            react_1["default"].createElement("div", { className: bem.element('content') },
+                react_1["default"].createElement(typography_1.Text, { type: 'boldSpan', content: props.title, className: bem.element('title') }),
+                renderLink(),
+                react_1["default"].createElement(typography_1.Text, { type: 'body2', className: bem.element('size'), color: 'light' },
+                    react_1["default"].createElement(format_1.FileSize, { value: props.size, showZero: true })))));
+    }, [bem, props.fullHeight, (_b = props.item) === null || _b === void 0 ? void 0 : _b.fullHeight, props.size, props.title, renderLink]);
+    return (react_1["default"].createElement("div", { className: bem.block({
+            error: !props.isFileFromMessage && !!props.error,
+            isFileFromMessage: props.isFileFromMessage,
+            isFileForUploading: !props.isFileFromMessage,
+            'another-user': !!props.isFileByAnotherUser
+        }) },
+        isLoading
+            ? renderLoadingState()
+            : renderFileItem(),
+        props.isFileFromMessage ? (react_1["default"].createElement(Icon_1["default"], { name: 'import', className: bem.element('download'), onClick: function () { return window.open(props.downloadUrl || props.url); } })) : (react_1["default"].createElement(Icon_1["default"], { name: props.customRemoveIcon || 'cross_8x8', className: bem.element('remove', { isLoading: isLoading }), onClick: props.onRemove }))));
+}
+exports["default"] = ChatFileItemView;

package/content/Chat/views/ChatFileItem/ChatFileItemView.scss

@@ -0,0 +1,184 @@
+@use "../../../../scss/variables";
+@use "../../../../scss/mixins";
+@use "../../../../scss/animations" as anim;
+
+:root {
+  --file-size-color: rgba(255, 255, 255, 0.60);
+  --file-icon-color: rgb(0, 0, 0);
+  --another-user-file-size-color: rgba(0, 0, 0, 0.60);
+}
+
+html[data-theme="dark"] {
+  --file-size-color: rgba(255, 255, 255, 0.60);
+  --file-icon-color: #fff;
+  --another-user-file-size-color: rgba(255, 255, 255, 0.60);
+}
+
+$file-size-color: var(--file-size-color);
+$file-icon-color: var(--file-icon-color);
+$another-user-file-size-color: var(--another-user-file-size-color);
+
+@mixin svg-color($color) {
+  svg {
+    path {
+      stroke: $color;
+    }
+
+    circle {
+      fill: $color;
+    }
+  }
+}
+
+@mixin textEllipsis {
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+@mixin text {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 18px;
+}
+
+.ChatFileItemView {
+  $root: &;
+
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  column-gap: 8px;
+  padding: 8px;
+  border: 1px solid variables.$gray;
+  border-radius: 12px;
+  min-width: 320px;
+  width: 320px;
+
+  &_isFileFromMessage {
+    padding: 0;
+    border: none;
+    width: 100%;
+  }
+
+  &_isFileForUploading {
+    @include svg-color($file-icon-color);
+  }
+
+  &__icon-wrapper {
+    min-width: 24px;
+    min-height: 24px;
+    width: 24px;
+    height: 24px;
+  }
+
+  &__left {
+    display: flex;
+    align-items: center;
+    column-gap: 8px;
+    width: 100%;
+  }
+
+  &__content {
+    display: flex;
+    flex-flow: column nowrap;
+    //width: 100%;
+  }
+
+  &__title {
+    @include text;
+    @include textEllipsis;
+
+    display: none;
+
+    &_loading {
+      display: block;
+    }
+  }
+
+  &__link {
+    @include text;
+    @include textEllipsis;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &__title,
+  &__size {
+    margin-bottom: 0;
+  }
+
+  &__size {
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px;
+    color: $another-user-file-size-color;
+  }
+
+  &_another-user {
+    #{$root}__size {
+      color: $another-user-file-size-color !important;
+    }
+  }
+
+  &_error {
+    @include mixins.svg-color(variables.$danger);
+
+    #{$root}__icon {
+      circle {
+        fill: variables.$danger;
+      }
+    }
+
+    #{$root}__title,
+    #{$root}__size {
+      color: variables.$danger;
+    }
+
+    a,
+    a:hover {
+      color: variables.$danger;
+      cursor: default;
+      pointer-events: none;
+    }
+  }
+
+  &__remove,
+  &__download {
+    cursor: pointer;
+    z-index: 3;
+    height: 25px;
+
+    svg {
+      min-width: 24px;
+      min-height: 24px;
+    }
+  }
+
+  &__icon-loading {
+    @include anim.loadingAnimation;
+    display: block;
+    width: 24px;
+    height: 24px;
+  }
+
+  &__progress-track {
+    margin-top: 4px;
+    height: 4px;
+    background-color: variables.$gray;
+    border-radius: 4px;
+  }
+
+  &__progress-bar {
+    height: inherit;
+    background-color: variables.$primary;
+    border-radius: 4px;
+  }
+}

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

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

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

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

@@ -1,7 +1,3 @@
+import { IChatInputViewProps } from '@steroidsjs/core/ui/content/Chat/Chat';
 import './ChatInputView.scss';
-interface IChatInputProps {
-    chatId: string;
-    onSendMessage: (data: any) => void;
-}
-export default function ChatInputView(props: IChatInputProps): JSX.Element;
-export {};
+export default function ChatInputView(props: IChatInputViewProps): JSX.Element;

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

@@ -1,4 +1,15 @@
 "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);
@@ -29,13 +40,25 @@ 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");
+var ButtonView_1 = __importDefault(require("../../../../form/Button/ButtonView"));
+var ChatFileItem_1 = __importDefault(require("../ChatFileItem"));
 require("./ChatInputView.scss");
+var HiddenUploadFileButton = (0, react_1.forwardRef)(function (props, ref) { return (react_1["default"].createElement("button", __assign({ type: 'button', ref: ref }, props))); });
 function ChatInputView(props) {
     var bem = (0, useBem_1["default"])('ChatInputView');
+    var filePickerRef = (0, react_1.useRef)(null);
+    var onBrowseFile = (0, react_1.useCallback)(function (e) {
+        e.preventDefault();
+        filePickerRef.current.click();
+    }, [filePickerRef]);
     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]);
+        react_1["default"].createElement(ButtonView_1["default"], { className: bem.element('action'), icon: "clip", onClick: onBrowseFile }),
+        react_1["default"].createElement(ButtonView_1["default"], { className: bem.element('action'), icon: "send", type: "submit" }))); }, [bem, onBrowseFile]);
     return (react_1["default"].createElement("div", { className: bem.block() },
         react_1["default"].createElement(form_1.Form, { formId: props.chatId, className: bem.element('form'), onSubmit: props.onSendMessage, useRedux: true },
-            react_1["default"].createElement(form_1.InputField, { className: bem.element('input'), attribute: "text", size: "lg", required: true, placeholder: __('Введите сообщение'), addonAfter: renderInputActions() }))));
+            react_1["default"].createElement(form_1.InputField, { className: bem.element('input'), attribute: "text", size: "lg", placeholder: props.inputPlaceholder, addonAfter: renderInputActions() }),
+            react_1["default"].createElement(form_1.FileField, __assign({ className: bem.element('files'), attribute: 'filesId', itemView: ChatFileItem_1["default"], buttonView: HiddenUploadFileButton, buttonProps: {
+                    ref: filePickerRef
+                }, multiple: false, showRemove: true, onChange: props.onUploadFiles }, props.fileFieldProps)))));
 }
 exports["default"] = ChatInputView;

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

@@ -1,4 +1,18 @@
 @use "../../../../scss/variables";
+@use "../../../../scss/mixins";
+
+:root {
+  --sidebar-scroll-thumb-color: #cbd5db;
+  --sidebar-scroll-track-color: rgba(0, 0, 0, 0.04);
+}
+
+html[data-theme="dark"] {
+  --sidebar-scroll-thumb-color: #4B4E5E;
+  --sidebar-scroll-track-color: #272A37;
+}
+
+$sidebar-scroll-thumb-color: var(--sidebar-scroll-thumb-color);
+$sidebar-scroll-track-color: var(--sidebar-scroll-track-color);
 
 .ChatInputView {
   &__actions {
@@ -33,4 +47,36 @@
       padding: 0;
     }
   }
+
+  &__form {
+    >* {
+      margin-bottom: 8px;
+    }
+  }
+
+  .FileFieldView__button {
+    position: absolute;
+    opacity: 0;
+    height: 0;
+    width: 0;
+    line-height: 0;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+
+  &__files .FileFieldView__files {
+    flex-flow: row nowrap;
+    overflow: auto;
+    gap: 8px;
+    padding-bottom: 8px;
+    margin-bottom: 0;
+
+    @include mixins.horizontalScrollWrapper(8px, $sidebar-scroll-thumb-color, $sidebar-scroll-track-color);
+
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+  }
 }

package/index.d.ts

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

package/index.js

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

package/index.scss

@@ -32,6 +32,7 @@
 @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('content/Chat/views/ChatInput/ChatInputView');
 @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.126",
+    "version": "3.0.0-beta.128",
     "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.111",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.117",
         "@steroidsjs/eslint-config": "^2.1.4",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",

package/scss/mixins/scroll.scss

@@ -29,3 +29,9 @@
     max-height: $maxHeight;
     overflow: auto;
 }
+
+@mixin horizontalScrollWrapper($paddingRight: 0, $thumbColor, $backgroundColor) {
+    @include custom-scroll($thumbColor, $backgroundColor);
+    padding-right: $paddingRight;
+    overflow: auto;
+}