@steroidsjs/bootstrap 3.0.30 → 3.0.32

package/form/DateTimeRangeField/DateTimeRangeFieldView.scss

@@ -2,6 +2,26 @@
 @use "../../scss/variables";
 @use '../../scss/mixins';
 
+$positions: (
+  top: (
+    direction: column,
+    responsive: top
+  ),
+  bottom: (
+    direction: column-reverse,
+    responsive: bottom
+  ),
+  left: (
+    direction: row,
+    responsive: left
+  ),
+  right: (
+    direction: row-reverse,
+    responsive: right
+  )
+);
+
+$all-directions: top, bottom, left, right;
 
 .DateTimeRangeFieldView {
     $root: &;
@@ -44,4 +64,38 @@
         @include mixins.calendar-border();
         background-color: variables.$element-background-color;
     }
+    
+    &__calendar-wrapper {
+        display: flex;
+        width: min-content;
+
+        &_position {
+            @each $pos, $config in $positions {
+                &_#{$pos} {
+                    flex-direction: map-get($config, direction);
+                    align-items: center;
+                
+                    @media (max-width: variables.$tablet-width) {
+                        flex-direction: map-get($config, responsive);
+                        align-items: center;
+                    }
+                }
+            }
+            @each $dir1 in $all-directions {
+                @each $dir2 in $all-directions {
+                    @if $dir1 != $dir2 {
+                    &_#{$dir1}-#{$dir2} {
+                        flex-direction: map-get(map-get($positions, $dir1), direction);
+                        align-items: center;
+                
+                        @media (max-width: variables.$tablet-width) {
+                            flex-direction: map-get(map-get($positions, $dir2), direction);
+                            align-items: center;
+                        }
+                    }
+                    }
+                }
+            }
+        }
+    }
 }

package/form/DropDownField/DropDownFieldView.js

@@ -73,7 +73,8 @@ function DropDownFieldView(props) {
             renderPlaceholder(),
             React.createElement("span", { className: bem.element('selected-items') }, props.showEllipses
                 ? (0, utils_1.getSelectedItemsLabel)(props.selectedItems)
-                : (0, utils_1.getSelectedItemsCount)(props.selectedItems))),
+                : (0, utils_1.getSelectedItemsCount)(props.selectedItems)),
+            React.createElement("input", { className: bem.element('input'), ref: props.inputRef })),
         props.showReset && props.selectedIds.length > 0 && (React.createElement(Icon_1["default"], { name: "cross_8x8", className: bem.element('icon-close'), tabIndex: -1, onClick: props.onReset, "aria-label": __('Сбросить') })),
         React.createElement(Icon_1["default"], { name: 'arrow_down_24x24', className: bem.element('icon-chevron'), tabIndex: -1, onClick: props.onOpen }),
         props.isOpened && (React.createElement("div", { className: bem.element('drop-down') },
@@ -81,7 +82,7 @@ function DropDownFieldView(props) {
                     size: props.size
                 }) },
                 React.createElement(Icon_1["default"], { name: 'search', className: bem.element('search-icon') }),
-                React.createElement("input", __assign({}, props.searchInputProps, { ref: props.forwardedInputRef, onChange: function (e) { return props.searchInputProps.onChange(e.target.value); }, className: bem(bem.element('search-input'), props.searchInputProps.className) })))),
+                React.createElement("input", __assign({}, props.searchInputProps, { ref: props.autoCompleteInputForwardedRef, onChange: function (e) { return props.searchInputProps.onChange(e.target.value); }, className: bem(bem.element('search-input'), props.searchInputProps.className) })))),
             React.createElement("div", { className: bem.element('drop-down-list') },
                 props.multiple
                     && props.itemToSelectAll

package/form/DropDownField/DropDownFieldView.scss

@@ -435,4 +435,16 @@ $drop-down-color-themes: map.merge(
         border-color: transparent;
         pointer-events: none;
     }
+
+    &__input {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        opacity: 0;
+        cursor: default;
+        pointer-events: none;
+        user-select: none;
+    }
 }

package/form/InputField/InputFieldView.js

@@ -58,9 +58,9 @@ function InputFieldView(props) {
             hasTextAddonBefore: !!props.textBefore,
             hasTextAddonAfter: !!props.textAfter
         }), props.className), style: props.style },
-        props.addonBefore && (React.createElement("span", { className: bem.element('addon-before') }, props.addonBefore)),
         props.textBefore && (React.createElement("span", { className: bem.element('text-before') }, props.textBefore)),
         React.createElement("div", { className: bem.element('input-wrapper') },
+            props.addonBefore && (React.createElement("span", { className: bem.element('addon-before') }, props.addonBefore)),
             props.leadIcon && (0, renderIcon_1["default"])(props.leadIcon, {
                 className: bem.element('lead-icon'),
                 tabIndex: -1
@@ -72,8 +72,8 @@ function InputFieldView(props) {
                 : (React.createElement("input", __assign({ className: bem(bem.element('input', {
                         size: props.size
                     })) }, props.inputProps, { type: props.inputProps.type, placeholder: props.placeholder, disabled: props.disabled, required: props.required, id: props.id, ref: props.inputRef }))),
-            !props.disabled && props.showClear && !props.maskProps && !!props.inputProps.value && (React.createElement(Icon_1["default"], { name: 'cross_8x8', className: bem.element('icon-clear'), tabIndex: -1, onClick: props.onClear }))),
-        props.textAfter && (React.createElement("span", { className: bem.element('text-after') }, props.textAfter)),
-        props.addonAfter && (React.createElement("span", { className: bem.element('addon-after') }, props.addonAfter))));
+            !props.disabled && props.showClear && !props.maskProps && !!props.inputProps.value && (React.createElement(Icon_1["default"], { name: 'cross_8x8', className: bem.element('icon-clear'), tabIndex: -1, onClick: props.onClear })),
+            props.addonAfter && (React.createElement("span", { className: bem.element('addon-after') }, props.addonAfter))),
+        props.textAfter && (React.createElement("span", { className: bem.element('text-after') }, props.textAfter))));
 }
 exports["default"] = InputFieldView;

package/form/InputField/InputFieldView.scss

@@ -24,16 +24,74 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
     flex-flow: row nowrap;
     align-items: center;
 
-    height: 34px;
+    height: var(--input-height);
+
 
     font-family: variables.$font-family-nunito;
     font-weight: variables.$font-weight-sm;
     line-height: 24px;
 
+    color: variables.$text-color;
+    border-radius: var(--border-radius);
+
+
+    --input-height: #{variables.$input-height-sm};
+
+    --border-radius: #{variables.$radius-small};
+
+    --colored-border-radius: 12px;
+
+    --addon-padding: 5px 8px;
+
+    --input-font-size: #{variables.$font-size-sm};
+ 
+    //Sizes
+    &_size {
+        &_lg {
+            --input-height: #{variables.$input-height-lg};
+            --border-radius: #{variables.$radius-large};
+            --colored-border-radius: 16px;
+            --addon-padding: 16px;
+            --input-font-size: #{variables.$font-size-lg};
+            --input-border-radius: #{variables.$radius-large};
+        }
+
+        &_md {
+            --input-height: #{variables.$input-height-md};
+            --border-radius: #{variables.$radius-large};
+            --colored-border-radius: 16px;
+            --addon-padding: 11px 12px;
+            --input-font-size: #{variables.$font-size-base};
+            --input-border-radius: #{variables.$radius-large};
+        }
+    }
+
     &__input-wrapper {
+        display: flex;
+
         position: relative;
         width: 100%;
         height: 100%;
+
+        &::before {
+            content: '';
+            position: absolute;
+            z-index: 2;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+
+            pointer-events: none;
+            transform: translate(calc(var(--input-wrapper-border-width) * -1), calc(var(--input-wrapper-border-width) * -1));
+            opacity: var(--input-wrapper-border-opacity);
+            transition: opacity 150ms ease-in-out;
+
+            border-radius: var(--colored-border-radius);
+            border-width: var(--input-wrapper-border-width);
+            border-color: var(--input-wrapper-border-color);
+            border-style: solid;
+        }
     }
 
     &__input {
@@ -47,170 +105,34 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
         outline: none;
 
         background-color: variables.$element-field-background-color;
-        border: 1px solid variables.$element-border-color;
-        border-radius: inherit;
+        border-width: var(--input-border-width);
+        border-color: var(--input-border-color);
+        border-top-left-radius: var(--input-left-border-radius);
+        border-bottom-left-radius: var(--input-left-border-radius);
+        border-top-right-radius: var(--input-right-border-radius);
+        border-bottom-right-radius: var(--input-right-border-radius);
+        border-style: solid;
 
         white-space: nowrap; /* Запретить перенос текста */
         overflow: hidden; /* Скрыть содержимое, выходящее за границы ячейки */
         text-overflow: ellipsis; /* Добавить многоточие, если текст обрезается */
 
+        font-size: var(--input-font-size);
+
         &::placeholder {
             color: variables.$element-placeholder-color;
             font-size: inherit;
         }
 
-        &:not(:disabled):focus {
-            border-color: transparent;
-        }
-    }
-
-    //Statements
-    &::before {
-        content: '';
-        position: absolute;
-        z-index: 2;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-
-        pointer-events: none;
-        transform: translate(-1px, -1px);
-        opacity: 0;
-        transition: opacity 150ms ease-in-out;
-    }
-
-    &:not(#{$root}_disabled):focus-within::before {
-        border: 4px solid variables.$primary-light;
-        transform: translateX(-4px) translateY(-4px);
-        opacity: 1;
-    }
-
-    &:not(#{$root}_disabled):active {
-        #{$root}__input {
-            border-color: transparent;
-        }
-
-        &::before {
-            transform: translate(-1px, -1px);
-            border: 1px solid variables.$primary;
-            opacity: 1;
-        }
     }
 
     &_disabled {
         #{$root}__input {
             background-color: variables.$element-background-color-disabled;
-            border-color: transparent;
             cursor: not-allowed;
         }
     }
 
-    &_hasError {
-        #{$root}__input {
-            border-color: transparent;
-        }
-
-
-        &::before {
-            border: 1px solid variables.$danger;
-            border-radius: 16px;
-            transform: translateX(-1px) translateY(-1px);
-            opacity: 1;
-        }
-    }
-
-    //Sizes
-    &_size {
-        &_lg {
-            color: variables.$text-color;
-            height: variables.$input-height-lg;
-            border-radius: variables.$radius-large;
-
-            #{$root}__input {
-                font-size: variables.$font-size-lg;
-                border-radius: variables.$radius-large;
-            }
-
-            #{$root}__addon-before,
-            #{$root}__addon-after {
-                padding: 16px;
-            }
-            #{$root}__text-before,
-            #{$root}__text-after {
-                padding: 16px 3px;
-            }
-
-            &::before {
-                border-radius: variables.$radius-large;
-            }
-
-            &:focus-within::before {
-                border-radius: 16px;
-            }
-        }
-
-        &_md {
-            color: variables.$text-color;
-            height: variables.$input-height-md;
-            border-radius: variables.$radius-large;
-
-            #{$root}__input {
-                border-radius: variables.$radius-large;
-                font-size: variables.$font-size-base;
-            }
-
-            #{$root}__addon-before,
-            #{$root}__addon-after,
-            #{$root}__text-before,
-            #{$root}__text-after {
-                padding: 11px 12px;
-            }
-
-            #{$root}__text-before,
-            #{$root}__text-after {
-                padding: 11px 3px;
-            }
-
-            &::before {
-                border-radius: variables.$radius-medium;
-            }
-
-            &:focus-within::before {
-                border-radius: 16px;
-            }
-        }
-
-        &_sm {
-            color: variables.$text-color;
-            height: variables.$input-height-sm;
-            border-radius: variables.$radius-small;
-
-            #{$root}__input {
-                font-size: variables.$font-size-sm;
-                border-radius: variables.$radius-small;
-            }
-
-            #{$root}__addon-before,
-            #{$root}__addon-after {
-                padding: 5px 8px;
-            }
-
-            #{$root}__text-before,
-            #{$root}__text-after {
-                padding: 5px 3px;
-            }
-
-            &::before {
-                border-radius: variables.$radius-small;
-            }
-
-            &:focus-within::before {
-                border-radius: 12px;
-            }
-        }
-    }
-
     //LEAD ICON
     &_hasLeadIcon {
         #{$root}__input {
@@ -279,49 +201,81 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
         }
     }
 
-    &_hasAddonBefore {
-        #{$root}__input {
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-            border: none;
-        }
-        &::before {
-            border: 1px solid variables.$element-border-color;
-            opacity: 1;
-        }
-    }
-
-    &_hasAddonAfter {
-        #{$root}__input {
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-        }
-        &::before {
-            border: 1px solid variables.$element-border-color;
-            opacity: 1;
-        }
-    }
-
     &__text-before,
     &__text-after {
         flex-shrink: 0;
+        padding: 0 6px;
     }
 
     &__addon-before,
     &__addon-after {
         flex-shrink: 0;
-        padding: 11px 12px;
+        padding: var(--addon-padding);
         background-color: variables.$element-background-color-disabled;
         color: variables.$text-color;
     }
 
+    // BORDERS 
+    --input-border-radius: #{variables.$radius-small};
+    --input-border-width: 1px;
+    --input-border-color: #{variables.$element-border-color};
+    --input-left-border-radius: var(--input-border-radius);
+    --input-right-border-radius: var(--input-border-radius);
+
+    --input-wrapper-border-width: 1px;
+    --input-wrapper-border-color: transparent;
+    --input-wrapper-border-opacity: 0;
+
+    &_hasError {
+        --input-wrapper-border-width: 1px;
+        --input-wrapper-border-color: #{variables.$danger};
+        --input-wrapper-border-opacity: 1;
+
+        --input-border-color: transparent;
+    }
+
+    &_hasAddon {
+        --input-wrapper-border-width: 1px;
+        --input-wrapper-border-color: #{variables.$element-border-color};
+        --input-wrapper-border-opacity: 1;
+
+        --input-border-width: 0px;
+    }
+    &_hasAddonBefore {
+        --input-left-border-radius: 0;
+    }
+    &_hasAddonAfter {
+        --input-right-border-radius: 0;
+    }
+
+    &:not(&_disabled) {
+        &:focus-within {
+            --input-wrapper-border-width: 4px;
+            --input-wrapper-border-color: #{variables.$primary-light};
+            --input-wrapper-border-opacity: 1;
+
+            --input-border-color: transparent;
+        }
+        &:active {
+            --input-wrapper-border-width: 1px;
+            --input-wrapper-border-color: #{variables.$primary};
+            --input-wrapper-border-opacity: 1;
+
+            --input-border-color: transparent;
+        }
+    }
+
+    &_disabled {
+        --input-border-color: transparent;
+    }
+
     &__addon-before {
-        border-top-left-radius: inherit;
-        border-bottom-left-radius: inherit;
+        border-top-left-radius: var(--input-border-radius);
+        border-bottom-left-radius: var(--input-border-radius);
     }
 
     &__addon-after {
-        border-top-right-radius: inherit;
-        border-bottom-right-radius: inherit;
+        border-top-right-radius: var(--input-border-radius);
+        border-bottom-right-radius: var(--input-border-radius);
     }
 }

package/hooks/index.d.ts

@@ -0,0 +1,2 @@
+import useHideScroll from './useHideScroll';
+export { useHideScroll };

package/hooks/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.useHideScroll = void 0;
+var useHideScroll_1 = __importDefault(require("./useHideScroll"));
+exports.useHideScroll = useHideScroll_1["default"];

package/hooks/useHideScroll.d.ts

@@ -0,0 +1 @@
+export default function useHideScroll(): void;

package/hooks/useHideScroll.js

@@ -0,0 +1,37 @@
+"use strict";
+exports.__esModule = true;
+var react_1 = require("react");
+var react_use_1 = require("react-use");
+var onlyNumbersRegExp = /^\D/g;
+/*
+* Хук устанавливает padding-right для body при открытии модальных окон.
+* Помогает избежать нежелательного смещения контента, когда для body задается свойство overflow: hidden (убирается скролл)
+* */
+var BODY_HIDE_SCROLL_CLASS_NAME = 'body-hide-scroll';
+function useHideScroll() {
+    var defaultPadding = (0, react_1.useRef)(null);
+    (0, react_use_1.useMount)(function () {
+        if (process.env.IS_SSR) {
+            return;
+        }
+        var fullWindowWidth = window.innerWidth; // полная ширина окна;
+        var windowWidthWithoutScrollbar = document.documentElement.clientWidth; // ширина окна за вычетом скролла
+        defaultPadding.current = document.body.style.paddingRight;
+        if (windowWidthWithoutScrollbar < fullWindowWidth) {
+            var defaultPaddingInt = defaultPadding.current
+                ? Number(defaultPadding.current.replace(onlyNumbersRegExp, ''))
+                : 0;
+            var paddingRight = "".concat(fullWindowWidth - windowWidthWithoutScrollbar + defaultPaddingInt, "px");
+            document.body.style.paddingRight = paddingRight;
+            document.body.classList.add(BODY_HIDE_SCROLL_CLASS_NAME);
+        }
+    });
+    (0, react_use_1.useUnmount)(function () {
+        if (process.env.IS_SSR) {
+            return;
+        }
+        document.body.style.paddingRight = defaultPadding.current;
+        document.body.classList.remove(BODY_HIDE_SCROLL_CLASS_NAME);
+    });
+}
+exports["default"] = useHideScroll;

package/icons/index.js

@@ -28,6 +28,8 @@ exports["default"] = (function (customIcons) {
         'arrow_right_24x24',
         'arrow_up_18x18',
         'arrow_up_24x24',
+        'long-arrow-alt-down',
+        'long-arrow-alt-up',
         'blank',
         'calendar_check',
         'chart',

package/icons/svgs/long-arrow-alt-down.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 9.44916L5 13.4492M5 13.4492L9 9.44916M5 13.4492L5 1.44916" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/long-arrow-alt-up.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 5.44916L5 1.44916M5 1.44916L1 5.44916M5 1.44916L5 13.4492" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/list/Grid/GridView.js

@@ -62,9 +62,8 @@ function GridView(props) {
         })));
     }, [props.searchForm, props.columns]);
     var renderSortButton = (0, react_1.useCallback)(function (attribute, direction) {
-        var _a;
         var sortKey = (direction === 'desc' ? '-' : '') + attribute;
-        var isActive = [].concat(((_a = props.list) === null || _a === void 0 ? void 0 : _a.sort) || []).includes(sortKey);
+        var isActive = [].concat((props === null || props === void 0 ? void 0 : props.sort) || []).includes(sortKey);
         return (React.createElement(Button_1["default"], { icon: direction === 'asc' ? 'long-arrow-alt-up' : 'long-arrow-alt-down', className: bem.element('sort-button', {
                 'is-active': isActive
             }), link: true, onClick: function (e) {
@@ -86,7 +85,7 @@ function GridView(props) {
             React.createElement("thead", null,
                 React.createElement("tr", null, props.columns.map(function (column, columnIndex) { return (React.createElement("th", { key: columnIndex, className: column.headerClassName },
                     column.label,
-                    column.sortable && column.attribute && (React.createElement("span", null,
+                    column.sortable && column.attribute && (React.createElement("span", { className: bem.element('sort-buttons') },
                         column.label && React.createElement("span", null, "\u00A0"),
                         renderSortButton(column.attribute, 'asc'),
                         renderSortButton(column.attribute, 'desc'))))); })),

package/list/Grid/GridView.scss

@@ -6,6 +6,9 @@
 
     --grid-td-background-color: #FFFFFF;
     --grid-td-alternating-color: var(--additional-light-gray);
+
+    --sort-button-color: var(--graphite);
+    --sort-button-color-active: var(--graphite-dark);
 }
 
 html[data-theme="dark"] {
@@ -14,6 +17,10 @@ html[data-theme="dark"] {
 
     --grid-td-background-color: var(--graphite);
     --grid-td-alternating-color: var(--graphite-dark);
+
+
+    --sort-button-color: var(--secondary-dark);
+    --sort-button-color-active: var(--secondary);
 }
 
 $grid-header-background-color: var(--grid-header-background-color);
@@ -97,6 +104,13 @@ $grid-td-alternating-color: var(--grid-td-alternating-color);
             td:not(#{$root}__column_isDiagram) {
                 padding: 24px 16px;
             }
+
+            &:has(#{$root}__sort-buttons) {
+                th {
+                    position: relative;
+                    padding: 24px 30px 24px 16px;
+                }
+            }
         }
 
         &_md {
@@ -109,6 +123,13 @@ $grid-td-alternating-color: var(--grid-td-alternating-color);
             td:not(#{$root}__column_isDiagram) {
                 padding: 21px 12px;
             }
+
+            &:has(#{$root}__sort-buttons) {
+                th {
+                    position: relative;
+                    padding: 21px 30px 21px 12px;
+                }
+            }
         }
 
         &_sm {
@@ -121,6 +142,13 @@ $grid-td-alternating-color: var(--grid-td-alternating-color);
             td:not(#{$root}__column_isDiagram) {
                 padding: 16px 8px;
             }
+
+            &:has(#{$root}__sort-buttons) {
+                th {
+                    position: relative;
+                    padding: 16px 30px 16px 8px;
+                }
+            }
         }
     }
 
@@ -171,4 +199,22 @@ $grid-td-alternating-color: var(--grid-td-alternating-color);
             width: 100%;
         }
     }
+
+    &__sort-buttons {
+        position: absolute;
+        right: 5px;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+    &__sort-button {
+        path {
+            stroke: var(--sort-button-color);
+        }
+        &_is-active {
+            path {
+                stroke: var(--sort-button-color-active);
+                stroke-width: 2px;
+            }
+        }
+    }
 }