@steroidsjs/bootstrap 3.0.9 → 3.0.11

package/content/CalendarSystem/MonthGrid/views/MonthDay/MonthDay.scss

@@ -75,43 +75,14 @@ $month-day-out-of-range-color-text: var(--month-day-out-of-range-color-text);
         gap: 1px;
 
         &_isExpanded {
-            #{$dayRoot}__event {
+            .MonthEvent__event {
                 display: block;
             }
         }
     }
 
-    &__event {
-        position: relative;
-        display: inline-block;
-        width: 100%;
-        font-size: variables.$font-size-xs;
-        font-weight: variables.$font-weight-sm;
-        line-height: variables.$line-height-xs;
-        color: variables.$text-color;
-
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        cursor: pointer;
-        text-align: left;
-
-        &:nth-child(n + 7) {
-            display: none;
-        }
-
-        &-dot {
-            display: inline-block;
-            width: 6px;
-            height: 6px;
-            margin-right: 8px;
-            border-radius: 100px;
-            pointer-events: none;
-        }
-    }
-
     &__content_isExpanded {
-        #{$dayRoot}__event {
+        .MonthEvent__event {
             display: block;
         }
     }

package/content/CalendarSystem/MonthGrid/views/MonthDay/views/MonthEvent/MonthEvent.d.ts

@@ -0,0 +1,7 @@
+import { IEvent } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
+import './MonthEvent.scss';
+interface IMonthEventProps {
+    event: IEvent;
+}
+export default function MonthEvent({ event }: IMonthEventProps): JSX.Element;
+export {};

package/content/CalendarSystem/MonthGrid/views/MonthDay/views/MonthEvent/MonthEvent.js

@@ -0,0 +1,18 @@
+"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 useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var Tooltip_1 = __importDefault(require("@steroidsjs/core/ui/layout/Tooltip/Tooltip"));
+require("./MonthEvent.scss");
+function MonthEvent(_a) {
+    var event = _a.event;
+    var bem = (0, useBem_1["default"])('MonthEvent');
+    return (react_1["default"].createElement(Tooltip_1["default"], { key: event.id, position: 'rightBottom', content: event.title, className: bem.element('tooltip') },
+        react_1["default"].createElement("span", { className: bem.element('event'), "data-eventid": event.id },
+            react_1["default"].createElement("span", { className: bem.element('event-dot'), style: { backgroundColor: event.color } }),
+            event.title)));
+}
+exports["default"] = MonthEvent;

package/content/CalendarSystem/MonthGrid/views/MonthDay/views/MonthEvent/MonthEvent.scss

@@ -0,0 +1,39 @@
+@use "style/variables";
+@use "../../../../../../../scss/mixins";
+
+.MonthEvent {
+
+
+    &__tooltip {
+        @include mixins.calendar-tooltip();
+    }
+
+    &__event {
+        position: relative;
+        display: inline-block;
+        width: 100%;
+        font-size: variables.$font-size-xs;
+        font-weight: variables.$font-weight-sm;
+        line-height: variables.$line-height-xs;
+        color: variables.$text-color;
+
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        cursor: pointer;
+        text-align: left;
+
+        &:nth-child(n + 7) {
+            display: none;
+        }
+
+        &-dot {
+            display: inline-block;
+            width: 6px;
+            height: 6px;
+            margin-right: 8px;
+            border-radius: 100px;
+            pointer-events: none;
+        }
+    }
+}

package/content/CalendarSystem/MonthGrid/views/MonthDay/views/MonthEvent/index.d.ts

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

package/content/CalendarSystem/MonthGrid/views/MonthDay/views/MonthEvent/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 MonthEvent_1 = __importDefault(require("./MonthEvent"));
+exports["default"] = MonthEvent_1["default"];

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

@@ -1,14 +1,7 @@
 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 { ICalendarSystemViewProps } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
 import './WeekGrid.scss';
-interface IWeekGridProps {
-    weekGridTwentyFourHoursArray: string[];
-    weekGridCurrentWeekDays: IDay[];
-    getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
-    openEditModal: (event: IEvent) => void;
-    openCreateModal: (eventInitialDay?: IDay) => void;
-}
+type IWeekGridProps = Pick<ICalendarSystemViewProps, 'openEditModal' | 'openCreateModal' | 'getEventsFromDate'> & ICalendarSystemViewProps['weekGridProps'];
 declare function WeekGrid(props: IWeekGridProps): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof WeekGrid>;
 export default _default;

package/content/CalendarSystem/WeekGrid/WeekGrid.js

@@ -6,12 +6,18 @@ exports.__esModule = true;
 var react_1 = __importDefault(require("react"));
 var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
 var Text_1 = __importDefault(require("@steroidsjs/core/ui/typography/Text/Text"));
-var WeekHour_1 = __importDefault(require("./views/WeekHour"));
 require("./WeekGrid.scss");
 function WeekGrid(props) {
     var bem = (0, useBem_1["default"])('WeekGrid');
-    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]);
+    var weekGridCurrentWeekDays = props.weekGridCurrentWeekDays;
+    var renderWeekHours = react_1["default"].useCallback(function (hour) { return weekGridCurrentWeekDays.map(function (dayOfWeek, dayOfWeekIndex) { return (react_1["default"].createElement(react_1["default"].Fragment, { key: dayOfWeekIndex }, props.renderHourView({
+        openEditModal: props.openEditModal,
+        openCreateModal: props.openCreateModal,
+        getEventsFromDate: props.getEventsFromDate,
+        renderEventView: props.renderEventView,
+        dayOfWeek: dayOfWeek,
+        hour: hour
+    }))); }); }, [weekGridCurrentWeekDays, props]);
     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.weekGridTwentyFourHoursArray.map(function (hour, hourIndex) { return (react_1["default"].createElement("div", { key: hourIndex, className: bem.element('hours-time-item') }, hour)); })),

package/content/CalendarSystem/WeekGrid/WeekGrid.scss

@@ -64,7 +64,7 @@ $calendar-today-border-style: 1px solid $calendar-system-today-border-color;
         &-heading {
             display: grid;
             max-height: 100%;
-            grid-template-columns: repeat(7, 1fr);
+            grid-template-columns: repeat(7, 300px);
         }
 
         &-grid {
@@ -75,7 +75,8 @@ $calendar-today-border-style: 1px solid $calendar-system-today-border-color;
             &-row {
                 display: grid;
                 height: auto;
-                grid-template-columns: repeat(7, 1fr);
+                grid-template-columns: repeat(7, 300px);
+                grid-template-rows: 150px;
                 min-height: 80px;
 
                 //Borders

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

@@ -1,12 +1,10 @@
-import { IDay, IEvent } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
-import CalendarEnum from '@steroidsjs/core/ui/content/CalendarSystem/enums/CalendarType';
+import React from 'react';
+import { ICalendarSystemViewProps, IDay } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
 import './WeekHour.scss';
-interface IWeekHourProps {
+interface IWeekHourProps extends Pick<ICalendarSystemViewProps, 'openEditModal' | 'openCreateModal' | 'getEventsFromDate'> {
     dayOfWeek: IDay;
-    getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
     hour: string;
-    openEditModal: (event: IEvent) => void;
-    openCreateModal: (eventInitialDay?: IDay) => void;
+    renderEventView: (componentProps: any) => React.ReactNode;
 }
 export default function WeekHour(props: IWeekHourProps): JSX.Element;
 export {};

package/content/CalendarSystem/WeekGrid/views/WeekHour/WeekHour.js

@@ -1,13 +1,4 @@
 "use strict";
-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 };
 };
@@ -16,41 +7,21 @@ exports.__esModule = true;
 var react_1 = __importDefault(require("react"));
 var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
 var calendar_1 = require("@steroidsjs/core/utils/calendar");
-var form_1 = require("@steroidsjs/core/ui/form");
 var CalendarType_1 = __importDefault(require("@steroidsjs/core/ui/content/CalendarSystem/enums/CalendarType"));
-var slice_1 = __importDefault(require("lodash-es/slice"));
 var get_1 = __importDefault(require("lodash-es/get"));
-var Tooltip_1 = __importDefault(require("@steroidsjs/core/ui/layout/Tooltip/Tooltip"));
-var useExpandClickAway_1 = __importDefault(require("@steroidsjs/core/ui/content/CalendarSystem/hooks/useExpandClickAway"));
 var cloneDeep_1 = __importDefault(require("lodash-es/cloneDeep"));
-var getFormattedExpandLabel_1 = require("../../../../../utils/getFormattedExpandLabel");
 require("./WeekHour.scss");
-var FOURTH_ELEMENT_INDEX = 3;
 function WeekHour(props) {
     var bem = (0, useBem_1["default"])('WeekHour');
-    var _a = (0, useExpandClickAway_1["default"])(), isExpanded = _a.isExpanded, setIsExpanded = _a.setIsExpanded, weekHourRef = _a.triggerRef;
-    var _b = react_1["default"].useMemo(function () {
+    var events = react_1["default"].useMemo(function () {
         var callingDate = new Date(props.dayOfWeek.date);
         var timeArray = props.hour.replace(':', '').split('');
         callingDate.setHours(Number(timeArray[0] + timeArray[1]), 0, 0, 0);
         var events = props.getEventsFromDate(callingDate, CalendarType_1["default"].WEEK);
-        var hasOneEvent = events.length === 1;
-        var hasTwoEvents = events.length === 2;
-        var hasMoreThanTreeEvents = events.length >= 3;
-        var hasMoreThanFourEvents = events.length > 3;
         return {
-            events: events,
-            hasOneEvent: hasOneEvent,
-            hasTwoEvents: hasTwoEvents,
-            hasTreeEvents: hasMoreThanTreeEvents,
-            hasMoreThanFourEvents: hasMoreThanFourEvents
+            events: events
         };
-    }, [props]), events = _b.events, hasOneEvent = _b.hasOneEvent, hasTwoEvents = _b.hasTwoEvents, hasTreeEvents = _b.hasTreeEvents, hasMoreThanFourEvents = _b.hasMoreThanFourEvents;
-    var renderEvent = react_1["default"].useCallback(function (event, eventIndex) { return (react_1["default"].createElement(Tooltip_1["default"], { position: 'rightBottom', content: event.title, className: bem.element('tooltip'), key: eventIndex },
-        react_1["default"].createElement("div", { className: bem.element('hour-event'), style: { backgroundColor: event.color }, title: event.title, "data-eventid": event.id },
-            react_1["default"].createElement("span", { className: bem.element('hour-event-title') }, event.title),
-            react_1["default"].createElement("span", { className: bem.element('hour-event-time') }, (0, calendar_1.convertDate)(event.date, null, 'HH:mm'))))); }, [bem]);
-    var formattedExpandLabel = react_1["default"].useMemo(function () { return (0, getFormattedExpandLabel_1.getFormattedExpandRestLabel)((0, slice_1["default"])(__spreadArray([], events, true), FOURTH_ELEMENT_INDEX)); }, [events]);
+    }, [props]).events;
     var handleEventClick = react_1["default"].useCallback(function (event) {
         var eventFromHour = event.target;
         var eventId = (0, get_1["default"])(eventFromHour, 'dataset.eventid');
@@ -67,13 +38,9 @@ function WeekHour(props) {
         props.openCreateModal(day);
     }, [props]);
     return (react_1["default"].createElement("div", { className: bem.element('hour', {
-            isToday: props.dayOfWeek.isToday,
-            hasOneEvent: hasOneEvent,
-            hasTwoEvents: hasTwoEvents,
-            hasTreeEvents: hasTreeEvents,
-            isExpanded: isExpanded
-        }), ref: weekHourRef, onClick: handleEventClick, onContextMenu: handleOnContextMenuCreateClick },
-        events.map(renderEvent),
-        hasMoreThanFourEvents && !isExpanded && (react_1["default"].createElement(form_1.Button, { link: true, className: bem.element('expand-button'), onClick: function () { return setIsExpanded(true); } }, formattedExpandLabel))));
+            isToday: props.dayOfWeek.isToday
+        }), onClick: handleEventClick, onContextMenu: handleOnContextMenuCreateClick }, events.map(function (event) { return props.renderEventView({
+        event: event
+    }); })));
 }
 exports["default"] = WeekHour;

package/content/CalendarSystem/WeekGrid/views/WeekHour/WeekHour.scss

@@ -3,106 +3,10 @@
 
 .WeekHour {
     height: max-content;
-
+    
     &__hour {
+        position: relative;
         $rootHour: &;
-        display: flex;
-        flex-flow: column nowrap;
-        gap: 1px;
         min-height: 80px;
-        
-        &-event {
-            position: relative;
-            padding: 4px 8px;
-            overflow: hidden;
-            border-radius: 4px;
-            max-height: 78px;
-            cursor: pointer;
-
-            &:nth-child(n+4) {
-                display: none;
-            }
-
-            &-title {
-                font-size: variables.$font-size-sm;
-                font-weight: variables.$font-weight-sm;
-                line-height: variables.$line-height-sm;
-                color: #312c3a;
-
-                padding-right: 36px;
-                pointer-events: none;
-            }
-
-            &-time {
-                top: 4px;
-                right: 8px;
-                position: absolute;
-                display: inline-block;
-                font-size: variables.$font-size-xs;
-                font-weight: variables.$font-weight-sm;
-                line-height: variables.$line-height-xs;
-                pointer-events: none;
-
-            }
-        }
-
-        &_hasOneEvent {
-            #{$rootHour}-event-title {
-                -webkit-line-clamp: 4; /* Число отображаемых строк */
-                display: -webkit-box; /* Включаем флексбоксы */
-                -webkit-box-orient: vertical; /* Вертикальная ориентация */
-                overflow: hidden;
-            }
-
-            #{$rootHour}-event {
-                max-height: 78px;
-            }
-        }
-
-        &_hasTwoEvents {
-            #{$rootHour}-event-title {
-                -webkit-line-clamp: 2; /* Число отображаемых строк */
-                display: -webkit-box; /* Включаем флексбоксы */
-                -webkit-box-orient: vertical; /* Вертикальная ориентация */
-                overflow: hidden;
-            }
-
-            #{$rootHour}-event {
-                max-height: 38px;
-            }
-        }
-
-        &_hasTreeEvents {
-            #{$rootHour}-event-title {
-                -webkit-line-clamp: 1; /* Число отображаемых строк */
-                display: -webkit-box; /* Включаем флексбоксы */
-                -webkit-box-orient: vertical; /* Вертикальная ориентация */
-                overflow: hidden;
-            }
-
-            #{$rootHour}-event {
-                max-height: 26px;
-                padding: 0 8px;
-            }
-
-            #{$rootHour}-event-time {
-                top: 0;
-                right: 8px;
-            }
-        }
-
-        &_isExpanded #{$rootHour}-event  { 
-            &:nth-child(n+4) {
-                display: block;
-            }
-        }
-    }
-
-    &__expand-button {
-        @include mixins.expand-button();
-    }
-
-    &__tooltip {
-        @include mixins.calendar-tooltip();
     }
 }

package/content/CalendarSystem/WeekGrid/views/WeekHour/views/WeekEvent/WeekEvent.d.ts

@@ -0,0 +1,7 @@
+import { IEvent } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
+import './WeekEvent.scss';
+interface IWeekEventProps {
+    event: IEvent;
+}
+export default function WeekEvent({ event }: IWeekEventProps): JSX.Element;
+export {};

package/content/CalendarSystem/WeekGrid/views/WeekHour/views/WeekEvent/WeekEvent.js

@@ -0,0 +1,30 @@
+"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 = __importDefault(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var utils_1 = require("@steroidsjs/core/ui/content/CalendarSystem/utils/utils");
+var Tooltip_1 = __importDefault(require("@steroidsjs/core/ui/layout/Tooltip/Tooltip"));
+require("./WeekEvent.scss");
+function WeekEvent(_a) {
+    var event = _a.event;
+    var bem = (0, useBem_1["default"])('WeekEvent');
+    return (react_1["default"].createElement(Tooltip_1["default"], { position: 'rightBottom', content: event.title, className: bem.element('tooltip'), key: event.id },
+        react_1["default"].createElement("div", { className: bem.element('event'), style: __assign({ backgroundColor: event.color, height: "".concat((0, utils_1.getProportionFromEvent)(event), "%") }, (0, utils_1.getTopMarginFromEvent)(event)), title: event.title, "data-eventid": event.id },
+            react_1["default"].createElement("span", { className: bem.element('event-time') }, "".concat((0, utils_1.formatEventTime)(event.startDate), " - ").concat((0, utils_1.formatEventTime)(event.endDate))),
+            react_1["default"].createElement("span", { className: bem.element('event-title') }, event.title))));
+}
+exports["default"] = WeekEvent;

package/content/CalendarSystem/WeekGrid/views/WeekHour/views/WeekEvent/WeekEvent.scss

@@ -0,0 +1,42 @@
+@use 'style/variables';
+@use "../../../../../../../scss/mixins";
+
+.WeekEvent {
+    &__tooltip {
+        @include mixins.calendar-tooltip();
+    }
+
+    &__event {
+        width: 100%;
+        position: absolute;
+        padding: 4px 8px;
+        overflow: hidden;
+        border-radius: 4px;
+        cursor: pointer;
+
+        &-title {
+            font-size: variables.$font-size-sm;
+            font-weight: variables.$font-weight-sm;
+            line-height: variables.$line-height-sm;
+            color: #312c3a;
+
+            padding-right: 36px;
+            pointer-events: none;
+
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+        }
+
+        &-time {
+            text-align: right;
+            display: block;
+            font-size: variables.$font-size-xs;
+            font-weight: variables.$font-weight-sm;
+            line-height: variables.$line-height-xs;
+            pointer-events: none;
+        }
+    }
+}

package/content/CalendarSystem/WeekGrid/views/WeekHour/views/WeekEvent/index.d.ts

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

package/content/CalendarSystem/WeekGrid/views/WeekHour/views/WeekEvent/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 WeekEvent_1 = __importDefault(require("./WeekEvent"));
+exports["default"] = WeekEvent_1["default"];

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

@@ -52,11 +52,11 @@ function ChatInputView(props) {
         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(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]);
+        react_1["default"].createElement(ButtonView_1["default"], { className: bem.element('action'), icon: "clip", onClick: onBrowseFile, type: 'button' }),
+        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", placeholder: props.inputPlaceholder, 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)))));

package/content/Icon/IconView.js

@@ -44,9 +44,9 @@ function IconView(props) {
     var bem = (0, hooks_1.useBem)('IconView');
     var omittedProps = (0, omit_1["default"])(props, 'contentEditable', 'icon');
     if (typeof props.icon === 'string' && props.icon.indexOf('<svg') === 0) {
-        return (React.createElement("span", __assign({}, omittedProps, { dangerouslySetInnerHTML: { __html: props.icon } /* eslint-disable-line react/no-danger */, "aria-label": props.title, title: props.title, className: bem(bem.block(), props.className), onClick: props.onClick, onKeyPress: props.onClick, role: 'button', tabIndex: props.tabIndex || 0 })));
+        return (React.createElement("span", __assign({}, omittedProps, { dangerouslySetInnerHTML: { __html: props.icon } /* eslint-disable-line react/no-danger */, "aria-label": props.title, title: props.title, className: bem(bem.block(), props.className), onClick: props.onClick, onKeyPress: props.onClick, role: 'button', tabIndex: props.tabIndex || 0, "data-icon": props.dataIcon })));
     }
-    return (React.createElement("span", __assign({}, omittedProps, { onClick: props.onClick, onKeyPress: props.onClick, role: 'button', tabIndex: props.tabIndex || 0 }),
+    return (React.createElement("span", __assign({}, omittedProps, { onClick: props.onClick, onKeyPress: props.onClick, role: 'button', tabIndex: props.tabIndex || 0, "data-icon": props.dataIcon }),
         React.createElement("img", { alt: props.title, title: props.title, src: props.icon, className: bem(bem.block(), props.className) })));
 }
 exports["default"] = IconView;

package/form/CheckboxField/CheckboxFieldView.js

@@ -52,7 +52,7 @@ function CheckboxFieldView(props) {
                 hasCustomColor: !!props.color
             }), id: props.id || id, disabled: props.disabled, required: props.required }, props.inputProps)),
         React.createElement("label", { className: bem.element('label', {
-                'has-label-only': !props.id
+                'has-label-only': props.hasOnlyLeafCheckboxes && !props.id
             }), htmlFor: props.id || id }, props.label && (React.createElement("span", { className: bem.element('label-text', { required: props.required }) }, props.label)))));
 }
 exports["default"] = CheckboxFieldView;

package/form/CheckboxTreeField/CheckboxTreeFieldView.js

@@ -27,7 +27,8 @@ function CheckboxTreeFieldView(props) {
             required: checkbox.required
         },
         size: props.size,
-        color: checkbox.color
+        color: checkbox.color,
+        hasOnlyLeafCheckboxes: props.hasOnlyLeafCheckboxes
     }))); })));
 }
 exports["default"] = CheckboxTreeFieldView;

package/form/FieldSet/FieldSetView.scss

@@ -1,16 +1,15 @@
-
 @use "../../scss/variables";
 
 :root {
     --legend-color: #152536;
     --fieldset-border-color: #E6E6E6;
 }
-  
-html[data-theme="dark"] { 
+
+html[data-theme="dark"] {
     --legend-color: #ffffff;
     --fieldset-border-color: #595959;
 }
-  
+
 $legend-color: var(--legend-color);
 $fieldset-border-color: var(--fieldset-border-color);
 
@@ -19,7 +18,6 @@ $fieldset-border-color: var(--fieldset-border-color);
     border-radius: 8px;
 
     &__legend {
-        background-color: variables.$background-color;
         color: $legend-color;
 
         padding: 8px;
@@ -32,11 +30,11 @@ $fieldset-border-color: var(--fieldset-border-color);
     }
 
     .FieldLayoutView {
-        padding: 0px 24px 24px 24px;
-        margin-bottom: 0px;
+        padding: 0 24px 24px 24px;
+        margin-bottom: 0;
     }
 
     .FieldLayoutView + .FieldLayoutView {
-        padding-top: 0px;
+        padding-top: 0;
     }
-}
+}

package/form/FileField/FileFieldView.js

@@ -50,7 +50,7 @@ function FileFieldView(props) {
             isWall: isWall,
             'is-invalid': !!props.errors
         }), props.className) },
-        React.createElement(ButtonView, __assign({ className: bem.element('button', { isWall: isWall }), icon: isWall ? 'add' : 'import' }, props.buttonProps)),
+        React.createElement(ButtonView, __assign({ className: bem.element('button', { isWall: isWall }), icon: isWall ? 'add' : 'export' }, props.buttonProps)),
         React.createElement("div", { className: bem(bem.element('files')) }, props.items.map(function (item) { return (React.createElement(FileItemView, __assign({ key: item.uid, filesLayout: props.filesLayout, imagesOnly: props.imagesOnly, customRemoveIcon: props.customRemoveIcon }, item, props.itemProps))); }))));
 }
 exports["default"] = FileFieldView;

package/form/FileField/FileFieldView.scss

@@ -37,10 +37,18 @@
             background-color: variables.$gray;
             border-radius: 20px;
 
-            .ButtonView__label {
-                flex-direction: column;
-                row-gap: 10px;
+            .ButtonView {
+                &__label {
+                    flex-direction: column;
+                    row-gap: 10px;
+                }
+
+                &__icon {
+                    margin-right: 0;
+                }
             }
+
+
         }
     }
 

package/form/Form/FormView.scss

@@ -0,0 +1,3 @@
+.FormView {
+
+}