@steroidsjs/bootstrap 3.0.0-beta.93 → 3.0.0-beta.95

package/content/Accordion/AccordionItemView.scss

@@ -101,7 +101,7 @@ $accordion-chevron-color: var(--accordion-chevron-color);
 
     background-color: $accordion-content-background;
     height: 56px;
-    width: 480px;
+    width: 100%;
     height: fit-content;
 
     @each $theme, $themeProperties in $accordion-themes {

package/content/Alert/AlertView.js

@@ -22,9 +22,9 @@ function Alert(props) {
                 react_1["default"].createElement("div", { className: bem.element('text-block') },
                     props.message && (react_1["default"].createElement("div", { className: bem.element('message') }, props.message)),
                     props.description && (react_1["default"].createElement("div", { className: bem.element('description') }, props.description))),
-                react_1["default"].createElement("div", null, props.showClose && (react_1["default"].createElement(Icon_1["default"], { className: bem.element('icon-close', {
+                props.showClose && (react_1["default"].createElement(Icon_1["default"], { className: bem.element('icon-close', {
                         large: !!props.description
-                    }), name: 'circle_cross_16x16', onClick: props.onClose })))),
+                    }), name: 'circle_cross_16x16', onClick: props.onClose }))),
             props.children || null))));
 }
 exports["default"] = Alert;

package/content/Alert/AlertView.scss

@@ -68,6 +68,7 @@ $alert-themes: map.merge(
     &__icon {
         width: 24px;
         height: 24px;
+        min-width: 24px;
         margin-right: 12px;
 
         svg {
@@ -79,6 +80,7 @@ $alert-themes: map.merge(
         display: inline-block;
         width: 24px;
         height: 24px;
+        min-width: 24px;
 
         display: flex;
         justify-content: center;
@@ -121,6 +123,7 @@ $alert-themes: map.merge(
         width: 100%;
         display: flex;
         flex-direction: row;
+        align-items: flex-start;
     }
 
     &__description {

package/content/Calendar/CalendarView.js

@@ -45,6 +45,7 @@ var react_day_picker_1 = __importStar(require("react-day-picker"));
 var CaptionElement_1 = __importDefault(require("./CaptionElement"));
 function CalendarView(props) {
     var bem = (0, hooks_1.useBem)('CalendarView');
+    var locale = (0, hooks_1.useComponents)().locale;
     var month = props.month, toYear = props.toYear, fromYear = props.fromYear, showFooter = props.showFooter, onDaySelect = props.onDaySelect, selectedDates = props.selectedDates, onMonthSelect = props.onMonthSelect, numberOfMonths = props.numberOfMonths, toggleCaptionPanel = props.toggleCaptionPanel, isCaptionPanelVisible = props.isCaptionPanelVisible;
     var isRange = !!selectedDates[0] && !!selectedDates[1];
     var _a = (0, react_1.useMemo)(function () {
@@ -78,6 +79,6 @@ function CalendarView(props) {
             else {
                 onDaySelect(day);
             }
-        }, fixedWeeks: true, month: month, firstDayOfWeek: 1, modifiers: modifiers, canChangeMonth: false, onDayClick: onDaySelect, selectedDays: selectedDays, numberOfMonths: numberOfMonths, localeUtils: moment_1["default"], locale: 'ru' })));
+        }, fixedWeeks: true, month: month, firstDayOfWeek: 1, modifiers: modifiers, canChangeMonth: false, onDayClick: onDaySelect, selectedDays: selectedDays, numberOfMonths: numberOfMonths, localeUtils: moment_1["default"], locale: locale.language })));
 }
 exports["default"] = CalendarView;

package/content/Calendar/CalendarView.scss

@@ -47,8 +47,19 @@ $calendar-border-color: var(--calendar-border-color);
     }
 
     .DayPicker-WeekdaysRow {
+        width: 100%;
         display: inline-flex;
         column-gap: 16px;
+
+        @media (max-width: 392px) {
+            column-gap: 10px;
+        }
+        @media (max-width: 370px) {
+            column-gap: 6px;
+        }
+        @media (max-width: 334px) {
+            column-gap: 4px;
+        }
     }
 
     .DayPicker-Weekday {
@@ -83,6 +94,16 @@ $calendar-border-color: var(--calendar-border-color);
         width: 100%;
         column-gap: 16px;
 
+        @media (max-width: 392px) {
+            column-gap: 10px;
+        }
+        @media (max-width: 370px) {
+            column-gap: 6px;
+        }
+        @media (max-width: 334px) {
+            column-gap: 4px;
+        }
+
         &--disabled {
             pointer-events: none;
             opacity: 0.5;
@@ -91,6 +112,7 @@ $calendar-border-color: var(--calendar-border-color);
 
     .DayPicker-Day {
         position: relative;
+        flex-shrink: 0;
         padding: 0;
         border-radius: variables.$radius-large;
 

package/content/Calendar/CaptionElement.scss

@@ -1,5 +1,5 @@
 @use "../../scss/variables";
-@use '../../scss/mixins';
+@use "../../scss/mixins";
 
 :root {
     --caption-arrow-background-color: #f1f5f7;
@@ -123,6 +123,7 @@ $separator-background-color: var(--separator-background-color);
         font-weight: variables.$font-weight-lg;
 
         &_months {
+            height: 32px;
             position: relative;
             grid-area: HeaderMonths;
             border-radius: 8px 0px 0px 8px;
@@ -167,7 +168,7 @@ $separator-background-color: var(--separator-background-color);
     }
 
     &__panel-cell {
-        &:first-child{
+        &:first-child {
             margin-top: 10px;
         }
         display: block;

package/content/Detail/DetailView.scss

@@ -24,7 +24,7 @@ $detail-background-color-label: var(--detail-background-color-label);
     }
 
     &__title {
-        color: variables.$black-30;
+        color: variables.$text-color;
         font-size: 56px;
         line-height: 56px;
         font-weight: variables.$font-weight-lg;

package/form/AutoCompleteField/AutoCompleteFieldView.scss

@@ -59,6 +59,7 @@ $autocomplete-icon-color: var(--autocomplete-icon-color);
 
     &__item {
         width: 100%;
+        flex-shrink: 0;
         background-color: variables.$element-background-color;
         outline: none;
         border: none;
@@ -107,6 +108,7 @@ $autocomplete-icon-color: var(--autocomplete-icon-color);
     &__category {
         background-color: variables.$element-background-color;
         width: 100%;
+        flex-shrink: 0;
 
         &__label {
             display: block;

package/form/CheckboxField/CheckboxFieldView.scss

@@ -12,7 +12,7 @@ $disabled-text-color: var(--disabled-text-color);
 
 .CheckboxFieldView {
     $root: &;
-
+    position: relative;
     display: inline-flex;
 
     font-family: variables.$font-family-nunito;

package/form/DateField/DateFieldView.js

@@ -46,7 +46,7 @@ var Calendar_1 = __importDefault(require("@steroidsjs/core/ui/content/Calendar")
 function DateFieldView(props) {
     var bem = (0, hooks_1.useBem)('DateFieldView');
     var renderCalendar = (0, react_1.useCallback)(function () { return (React.createElement(Calendar_1["default"], __assign({}, props.calendarProps))); }, [props.calendarProps]);
-    return (React.createElement(DropDown_1["default"], { content: renderCalendar, position: 'bottomLeft', visible: props.isOpened, onClose: props.onClose, className: bem.element('dropdown'), hasArrow: false },
+    return (React.createElement(DropDown_1["default"], { content: renderCalendar, position: "bottom", visible: props.isOpened, onClose: props.onClose, className: bem.element('dropdown'), hasArrow: false },
         React.createElement("div", { className: bem(bem.block({
                 size: props.size,
                 disabled: props.disabled,

package/form/DateRangeField/DateRangeFieldView.scss

@@ -18,7 +18,6 @@ $date-range-separator-color: var(--date-range-separator-color);
     @include mixins.date-range-body($root);
     @include mixins.icon-container($root);
     @include mixins.date-range-input();
-
     @include mixins.date-range-sizes($root);
 
     &__split {

package/form/FieldList/FieldListView.scss

@@ -15,6 +15,7 @@ $background-th: var(--background-th);
 $background-td-alternating: var(--background-td-alternating);
 
 .FieldListView {
+    overflow-x: auto;
     table {
         width: 100%;
         background-color: transparent;
@@ -61,6 +62,7 @@ $background-td-alternating: var(--background-td-alternating);
 
     td {
         background: variables.$element-background-color;
+        overflow: hidden;
     }
 
     &_hasAlternatingColors {

package/form/FileField/FileFieldView.scss

@@ -2,6 +2,7 @@
 
 .FileFieldView {
     $root: &;
+    width: 100%;
 
     &__files {
         margin-bottom: 1em;
@@ -26,7 +27,7 @@
         min-width: 200px;
 
         &_isWall {
-            min-width: auto;
+            min-width: 128px;
             width: 128px;
             height: 128px;
             border: 1px dashed #6F6B76;

package/form/HtmlField/HtmlFieldView.scss

@@ -1,7 +1,7 @@
 .HtmlFieldView {
-  --ck-color-toolbar-background: #f1f5f7;
-  --ck-color-toolbar-border: #dbe2e6;
-  --ck-color-base-border: #dbe2e6;
-  --ck-border-radius: 12px;
-  max-width: 610px;
-}
+    --ck-color-toolbar-background: #f1f5f7;
+    --ck-color-toolbar-border: #dbe2e6;
+    --ck-color-base-border: #dbe2e6;
+    --ck-border-radius: 12px;
+
+}

package/form/InputField/InputFieldView.scss

@@ -50,6 +50,10 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
         border: 1px solid variables.$element-border-color;
         border-radius: inherit;
 
+        white-space: nowrap; /* Запретить перенос текста */
+        overflow: hidden; /* Скрыть содержимое, выходящее за границы ячейки */
+        text-overflow: ellipsis; /* Добавить многоточие, если текст обрезается */
+
         &::placeholder {
             color: variables.$element-placeholder-color;
             font-size: inherit;
@@ -283,8 +287,14 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
         }
     }
 
+    &__text-before,
+    &__text-after { 
+        flex-shrink: 0;
+    }
+
     &__addon-before,
     &__addon-after {
+        flex-shrink: 0;
         padding: 11px 12px;
         background-color: variables.$element-background-color-disabled;
         color: variables.$text-color;

package/layout/Header/HeaderView.js

@@ -83,9 +83,9 @@ function HeaderView(props) {
             })),
             React.createElement("span", { className: bem.element('logo-title') }, props.logo.title || ''))),
         props.nav && (React.createElement(Nav_1["default"], __assign({ size: props.size, layout: 'navbar', className: bem.element('nav') }, props.nav))),
-        React.createElement("div", { className: bem.element('interaction') },
+        (props.burgerMenu || props.authParams || props.user) && (React.createElement("div", { className: bem.element('interaction') },
             ((_e = props === null || props === void 0 ? void 0 : props.authParams) === null || _e === void 0 ? void 0 : _e.isAuth) ? renderAuthBlock() : renderUserBlock(),
-            props.burgerMenu && renderBurger()),
+            props.burgerMenu && renderBurger())),
         props.children));
 }
 exports["default"] = HeaderView;

package/layout/Header/HeaderView.scss

@@ -1,9 +1,10 @@
 @use "../../scss/variables";
 
 .HeaderView {
-    width: 1000px;
+    width: 100%;
     display: flex;
     align-items: center;
+    justify-content: space-between;
     background-color: variables.$element-background-color;
     border-bottom: 1px solid variables.$element-placeholder-color-disabled;
     position: relative;
@@ -21,7 +22,6 @@
     }
 
     &__logo {
-        margin-right: 136px;
 
         .ButtonView__text {
             display: flex;
@@ -134,7 +134,6 @@
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
-        margin-left: auto;
         column-gap: 16px;
     }
 }

package/layout/Notifications/NotificationsItemView.scss

@@ -1,56 +1,66 @@
-.NotificationsItemView {
+@use "style/variables";
 
-  overflow: hidden;
-  max-height: 120px;
-  padding: 0;
+.NotificationsItemView {
+    overflow: hidden;
+    max-height: 120px;
+    padding: 0;
 
-  border-width: 0;
+    border-width: 0;
 
-  transition: opacity .6s, transform .4s,
-  max-height .6s .4s, margin .6s .6s;
-  // Styles for React-Transition-Groups
-  ////////////////////////////////////////
+    transition:
+        opacity 0.6s,
+        transform 0.4s,
+        max-height 0.6s 0.4s,
+        margin 0.6s 0.6s;
+    // Styles for React-Transition-Groups
+    ////////////////////////////////////////
+    ///
 
-  // Opacity + Size
-  &_top-right,&_bottom-right,&_top-left,&_bottom-left{
-    &-enter {
-      opacity: 0;
-    }
-    &-enter-active {
-      opacity: 1;
-    }
-    &-exit {
-      opacity: 1;
+    // Opacity + Size
+    &_top-right,
+    &_bottom-right,
+    &_top-left,
+    &_bottom-left {
+        &-enter {
+            opacity: 0;
+        }
+        &-enter-active {
+            opacity: 1;
+        }
+        &-exit {
+            opacity: 1;
+        }
+        &-exit-active {
+            opacity: 0;
+            max-height: 0;
+            margin: 0;
+        }
     }
-    &-exit-active {
-      opacity: 0;
-      max-height: 0;
-      margin: 0;
-    }
-  }
-
-  // Transform-Translate
-  &_top-right,&_bottom-right{
-     &-enter {
-       transform: translateX(450px);
-     }
-     &-enter-active {
-       transform: translateX(0px);
-     }
-     &-exit-active {
-       transform: translateX(450px);
-     }
-   }
 
-  &_top-left,&_bottom-left{
-    &-enter {
-      transform: translateX(-450px);
+    // Transform-Translate
+    &_top-right,
+    &_bottom-right {
+        &-enter {
+            transform: translateX(450px);
+        }
+        &-enter-active {
+            transform: translateX(0px);
+        }
+        &-exit-active {
+            transform: translateX(450px);
+        }
     }
-    &-enter-active {
-      transform: translateX(0px);
-    }
-    &-exit-active {
-      transform: translateX(-450px);
+
+    &_top-left,
+    &_bottom-left {
+        &-enter {
+            transform: translateX(-450px);
+        }
+        &-enter-active {
+            transform: translateX(0px);
+        }
+        &-exit-active {
+            transform: translateX(-450px);
+        }
     }
-  }
 }

package/layout/Notifications/NotificationsView.scss

@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
   row-gap: 10px;
-  width: 400px;
+  min-width: 300px;
 
   margin: 0;
 

package/list/Grid/GridView.scss

@@ -23,6 +23,7 @@ $grid-td-background-color: var(--grid-td-background-color);
 $grid-td-alternating-color: var(--grid-td-alternating-color);
 
 .GridView {
+    overflow-x: auto;
     $root: &;
 
     text-align: left;

package/list/List/ListView.scss

@@ -11,7 +11,7 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
-        flex-flow: row nowrap;
+        flex-flow: row wrap;
         margin-bottom: 3px;
 
         &-sizes {

package/list/Pagination/PaginationButtonView.scss

@@ -5,7 +5,7 @@
     --pagination-hover-background-color: $white;
 
     --pagination-arrow-color: #323232;
-    --pagination-background-color-disabled: #F1F5F7;
+    --pagination-background-color-disabled: #f1f5f7;
 }
 
 html[data-theme="dark"] {
@@ -38,6 +38,14 @@ $pagination-background-color-disabled: var(--pagination-background-color-disable
                     font-size: variables.$font-size-lg;
                     line-height: 24px;
 
+                    @media (max-width: 460px) {
+                        padding: 10px 12px;
+                    }
+
+                    @media (max-width: 372px) {
+                        padding: 10px 6px;
+                    }
+
                     &_hasIcon {
                         padding: 12px;
                     }
@@ -76,6 +84,10 @@ $pagination-background-color-disabled: var(--pagination-background-color-disable
                     font-size: variables.$font-size-base;
                     line-height: 24px;
 
+                    @media (max-width: 428px) {
+                        padding: 8px;
+                    }
+
                     &_hasIcon {
                         padding: 8px 11px;
                     }

package/nav/Controls/ControlsView.js

@@ -41,13 +41,13 @@ var React = __importStar(require("react"));
 var Nav_1 = __importDefault(require("@steroidsjs/core/ui/nav/Nav"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function ControlsView(props) {
+    var bem = (0, hooks_1.useBem)('ControlsView');
     var renderControls = function (items) {
         if (items.length === 0) {
             return null;
         }
         return (React.createElement(Nav_1["default"], __assign({ layout: 'button' }, props.navProps, { items: items })));
     };
-    var bem = (0, hooks_1.useBem)('ControlsView');
     return (React.createElement("div", { className: bem(bem.block(), props.className) },
         renderControls(props.items.filter(function (item) { return item.position !== 'right'; })),
         renderControls(props.items.filter(function (item) { return item.position === 'right'; }))));

package/nav/Controls/ControlsView.scss

@@ -1,7 +1,8 @@
 .ControlsView {
     display: inline-flex;
-    flex-flow: row;
+    flex-flow: row wrap;
     justify-content: space-between;
+    gap: 8px;
 
     .ButtonView__icon { 
          svg {

package/nav/Nav/NavIconView.scss

@@ -3,7 +3,7 @@
 .NavIconView {
     &__list {
         display: flex;
-        flex-flow: row nowrap;
+        flex-flow: row wrap;
         align-items: center;
         column-gap: 24px;
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.93",
+    "version": "3.0.0-beta.95",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",

package/scss/mixins/date.scss

@@ -28,21 +28,21 @@ $date-sizes: map.merge(
             "radius": variables.$radius-large,
             "font-size": variables.$font-size-lg,
             "height": 56px,
-            "first-input-width": 96px,
+            "first-input-width": 200px,
         ),
         "md": (
             "padding": 11px 8px,
             "radius": variables.$radius-large,
             "font-size": variables.$font-size-base,
             "height": 46px,
-            "first-input-width": 86px,
+            "first-input-width": 168px,
         ),
         "sm": (
             "padding": 5px 8px,
             "radius": variables.$radius-small,
             "font-size": variables.$font-size-sm,
             "height": 34px,
-            "first-input-width": 76px,
+            "first-input-width": 142px,
         ),
     ),
     $date-sizes