@steroidsjs/bootstrap 3.0.29 → 3.0.32

package/form/TimeField/TimePanelView.d.ts

@@ -1,5 +1,10 @@
 /// <reference types="react" />
 import { ITimePanelViewProps } from '@steroidsjs/core/ui/form/TimeField/TimeField';
+export interface ITimePanelColumn {
+    values: string[];
+    currentValueKey: string;
+    onUpdate: (value: string) => void;
+}
 declare function TimePanelView(props: ITimePanelViewProps): JSX.Element;
 declare namespace TimePanelView {
     var defaultProps: {

package/form/TimeField/TimePanelView.js

@@ -29,6 +29,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var padStart_1 = __importDefault(require("lodash-es/padStart"));
+var TimePanelColumn_1 = __importDefault(require("./views/TimePanelColumn"));
 var getHours = function () {
     var result = [];
     for (var i = 0; i < 24; i += 1) {
@@ -48,29 +49,26 @@ var getMinutes = function () {
 function TimePanelView(props) {
     var bem = (0, hooks_1.useBem)('TimePanelView');
     var _a = props.value ? props.value.split(':') : ['00', '00'], hours = _a[0], minutes = _a[1];
+    var currentValues = {
+        hours: hours,
+        minutes: minutes
+    };
+    var COLUMNS = [{
+            values: getHours(),
+            currentValueKey: 'hours',
+            onUpdate: function (value) {
+                props.onSelect(value + ':' + minutes);
+            }
+        }, {
+            values: getMinutes(),
+            currentValueKey: 'minutes',
+            onUpdate: function (value) {
+                props.onSelect(hours + ':' + value);
+            }
+        }];
     return (React.createElement("div", { className: bem(bem.block(), props.className) },
-        props.showHeader && (React.createElement("div", { className: bem.element('header') }, props.value && ("".concat(hours, ":").concat(minutes)))),
-        React.createElement("div", { className: bem.element('body') },
-            React.createElement("div", { className: bem.element('column') }, getHours().map(function (value, index) { return (React.createElement("div", { key: index, className: bem.element('cell', {
-                    selected: value === hours
-                }), onKeyPress: function (e) {
-                    e.preventDefault();
-                    props.onSelect(value + ':' + minutes);
-                }, onClick: function (e) {
-                    e.preventDefault();
-                    props.onSelect(value + ':' + minutes);
-                }, role: 'button', tabIndex: 0 },
-                React.createElement("div", { className: bem.element('cell-value') }, value))); })),
-            React.createElement("div", { className: bem.element('column') }, getMinutes().map(function (value, index) { return (React.createElement("div", { key: index, className: bem.element('cell', {
-                    selected: value === minutes
-                }), onKeyPress: function (e) {
-                    e.preventDefault();
-                    props.onSelect(hours + ':' + value);
-                }, onClick: function (e) {
-                    e.preventDefault();
-                    props.onSelect(hours + ':' + value);
-                }, role: 'button', tabIndex: 0 },
-                React.createElement("div", { className: bem.element('cell-value') }, value))); }))),
+        props.showHeader && (React.createElement("div", { className: bem.element('header') }, props.value && ("".concat(currentValues.hours, ":").concat(currentValues.minutes)))),
+        React.createElement("div", { className: bem.element('body') }, COLUMNS.map(function (column) { return (React.createElement(TimePanelColumn_1["default"], { key: column.currentValueKey, column: column, currentValue: currentValues[column.currentValueKey] })); })),
         React.createElement("div", { className: bem.element('footer', { 'to-end': !props.showNow }) },
             props.showNow && (React.createElement("button", { className: bem.element('button', 'now'), onClick: function (e) {
                     e.preventDefault();

package/form/TimeField/TimePanelView.scss

@@ -21,29 +21,6 @@
         border-radius: variables.$input-border-radius;
     }
 
-    &__column {
-        height: 220px;
-        overflow-y: auto;
-        list-style: none;
-        padding: 0;
-        margin: 0;
-        @include mixins.scrollWrapper(298px, 0, variables.$scroll-thumb-color, variables.$scroll-track-color);
-    }
-
-    &__cell {
-        padding: 5px 20px;
-        cursor: pointer;
-
-        &_selected {
-            background-color: variables.$primary-light;
-        }
-
-        transition: background-color 0.1s ease-in;
-        &:hover {
-            background-color: variables.$back-disabled;
-        }
-    }
-
     &__footer {
         display: flex;
         align-items: center;

package/form/TimeField/views/TimePanelColumn/TimePanelColumn.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ITimePanelColumn } from '../../TimePanelView';
+import './TimePanelColumn.scss';
+export interface ITimePanelColumnProps {
+    column: ITimePanelColumn;
+    currentValue: string;
+}
+export default function TimePanelColumn(props: ITimePanelColumnProps): JSX.Element;

package/form/TimeField/views/TimePanelColumn/TimePanelColumn.js

@@ -0,0 +1,20 @@
+"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");
+require("./TimePanelColumn.scss");
+function TimePanelColumn(props) {
+    var bem = (0, hooks_1.useBem)('TimePanelColumn');
+    var onUpdate = function (value) { return function () {
+        props.column.onUpdate(value);
+    }; };
+    return (react_1["default"].createElement("div", { className: bem.block() },
+        react_1["default"].createElement("div", { className: bem.element('column') }, props.column.values.map(function (value, index) { return (react_1["default"].createElement("div", { key: index, className: bem.element('cell', {
+                selected: value === props.currentValue
+            }), onKeyPress: onUpdate(value), onClick: onUpdate(value), role: 'button', tabIndex: 0 },
+            react_1["default"].createElement("div", { className: bem.element('cell-value') }, value))); }))));
+}
+exports["default"] = TimePanelColumn;

package/form/TimeField/views/TimePanelColumn/TimePanelColumn.scss

@@ -0,0 +1,53 @@
+@use "../../../../scss/variables";
+@use '../../../../scss/mixins';
+
+$color: var(--element-background-color);
+$color-hidden: rgb(from var(--element-background-color) r g b / 0%);
+$background-linear-gradient: linear-gradient(to top, $color-hidden 0%, $color 100%);
+
+.TimePanelColumn {
+    position: relative;
+
+    &__column {
+        height: 220px;
+        overflow-y: auto;
+        list-style: none;
+        padding: 39px 0;
+        margin: 0;
+        @include mixins.scrollWrapper(298px, 0, variables.$scroll-thumb-color, variables.$scroll-track-color);
+    }    
+
+    &__cell {
+        padding: 5px 20px;
+        cursor: pointer;
+
+        transition: background-color 0.1s ease-in;
+
+        &_selected {
+            background-color: variables.$primary-light;
+        }
+
+        &:hover {
+            background-color: variables.$back-disabled;
+        }
+    }
+
+    &::before,
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 39px;
+        width: 100%;
+
+        background: $background-linear-gradient;
+
+        pointer-events: none;
+    }
+    &::after {
+        bottom: 0;
+        top: unset;
+        transform: rotateZ(180deg);
+    }
+}

package/form/TimeField/views/TimePanelColumn/index.d.ts

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

package/form/TimeField/views/TimePanelColumn/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 TimePanelColumn_1 = __importDefault(require("./TimePanelColumn"));
+exports["default"] = TimePanelColumn_1["default"];

package/form/TimeRangeField/TimeRangeFieldView.js

@@ -54,7 +54,7 @@ function TimeRangeFieldView(props) {
                 'is-invalid': !!props.errors
             }), props.className), style: props.style },
             react_1["default"].createElement("div", { className: bem.element('body') },
-                react_1["default"].createElement("input", __assign({}, props.inputPropsFrom, { className: bem(bem.element('input')), onChange: function (e) { return props.inputPropsFrom.onChange(e.target.value); } })),
+                react_1["default"].createElement("input", __assign({}, props.inputPropsFrom, { id: props.id, className: bem(bem.element('input')), onChange: function (e) { return props.inputPropsFrom.onChange(e.target.value); } })),
                 react_1["default"].createElement("input", __assign({}, props.inputPropsTo, { className: bem.element('input'), onChange: function (e) { return props.inputPropsTo.onChange(e.target.value); } })),
                 react_1["default"].createElement("div", { className: bem.element('icon-container') },
                     props.icon && !hasValue && (react_1["default"].createElement(content_1.Icon, { className: bem.element('date-icon'), name: typeof props.icon === 'string' ? props.icon : 'calendar_range', tabIndex: -1 })),

package/form/TimeRangeField/TimeRangeFieldView.scss

@@ -50,6 +50,12 @@
         flex-flow: row nowrap;
         column-gap: 47px;
 
+        .TimePanelView {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
         .TimePanelView__footer { 
             padding: 0;
             padding-top: 10px;

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;
+            }
+        }
+    }
 }

package/list/Grid/views/DiagramColumnView/DiagramColumnView.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "../../../../scss/variables";
 
 .DiagramColumnView {
@@ -68,8 +69,8 @@
                 &_color {
                     @each $color, $color-map in variables.$diagram-colors {
                         &_#{$color} {
-                            background-color: map-get($color-map, color-themed);
-                            border-right: 1px solid map-get($color-map, color);
+                            background-color: map.get($color-map, color-themed);
+                            border-right: 1px solid map.get($color-map, color);
                         }
                     }
                 }
@@ -107,8 +108,8 @@
                 &_color {
                     @each $color, $color-map in variables.$diagram-colors {
                         &_#{$color} {
-                            background-color: map-get($color-map, color-themed);
-                            border-top: 1px solid map-get($color-map, color);
+                            background-color: map.get($color-map, color-themed);
+                            border-top: 1px solid map.get($color-map, color);
                         }
                     }
                 }
@@ -152,7 +153,7 @@
                 &_color {
                     @each $color, $color-map in variables.$diagram-colors {
                         &_#{$color} {
-                            border: 2px solid map-get($color-map, color);
+                            border: 2px solid map.get($color-map, color);
                         }
                     }
                 }

package/modal/Modal/ModalView.js

@@ -42,14 +42,16 @@ var react_modal_1 = __importDefault(require("react-modal"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var content_1 = require("@steroidsjs/core/ui/content");
 var form_1 = require("@steroidsjs/core/ui/form");
+var hooks_2 = require("../../hooks");
 function ModalView(props) {
     var bem = (0, hooks_1.useBem)('ModalView');
+    (0, hooks_2.useHideScroll)();
     var overrideDefaultClasses = {
         base: bem.block('overlay'),
         afterOpen: 'ModalView_overlay-after',
         beforeClose: 'ModalView_overlay-before'
     };
-    return (React.createElement(react_modal_1["default"], __assign({}, props, { ariaHideApp: false, bodyOpenClassName: 'ModalView_body-hide-scroll', className: bem(bem.element('body', { size: props.size }), props.className), closeTimeoutMS: props.closeTimeoutMs, isOpen: !props.isClosing, onRequestClose: props.onClose, overlayClassName: overrideDefaultClasses, shouldCloseOnEsc: props.shouldCloseOnEsc, shouldCloseOnOverlayClick: props.shouldCloseOnOverlayClick }),
+    return (React.createElement(react_modal_1["default"], __assign({}, props, { ariaHideApp: false, className: bem(bem.element('body', { size: props.size }), props.className), closeTimeoutMS: props.closeTimeoutMs, isOpen: !props.isClosing, onRequestClose: props.onClose, overlayClassName: overrideDefaultClasses, shouldCloseOnEsc: props.shouldCloseOnEsc, shouldCloseOnOverlayClick: props.shouldCloseOnOverlayClick }),
         React.createElement("div", { className: bem.element('header') },
             React.createElement("span", { className: bem.element('title') }, props.title),
             React.createElement(content_1.Icon, { name: 'cross_12x12', className: bem.element('close'), onClick: props.onClose })),

package/modal/Modal/ModalView.scss

@@ -148,8 +148,3 @@ $modal-background-color: var(--modal-background-color);
         opacity: 0;
     }
 }
-
-// Class to hide body scroll, when Modal is opened
-.ModalView_body-hide-scroll {
-    overflow: hidden;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.29",
+    "version": "3.0.32",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -35,7 +35,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "3.0.49",
+        "@steroidsjs/core": "3.0.57",
         "@steroidsjs/eslint-config": "^2.1.6",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",

package/scss/mixins/button.scss

@@ -57,25 +57,25 @@
     background-color: transparent;
     color: map.get($colorMap, color);
     stroke: map.get($colorMap, color);
-    border: 1px solid map.get($colorMap, color);
+    outline: 1px solid map.get($colorMap, color);
 
     @include svg-color(map.get($colorMap, text-color));
 
     &:hover {
         @include svg-color(map.get($colorMap, color-dark));
         color: map.get($colorMap, color-dark);
-        border-color: map.get($colorMap, color-dark);
+        outline-color: map.get($colorMap, color-dark);
     }
     &:focus {
         box-shadow:
             0 0 0 4px map.get($colorMap, color-light),
             0 0 0 4px map.get($colorMap, color-light);
-        border: 1px solid transparent;
+        outline: 1px solid transparent;
     }
     &:active {
         @include svg-color(map.get($colorMap, color-light));
         color: map.get($colorMap, color-light);
-        border-color: map.get($colorMap, color-light);
+        outline-color: map.get($colorMap, color-light);
         stroke: map.get($colorMap, color-light);
         box-shadow: none;
     }
@@ -84,7 +84,7 @@
         background-color: transparent;
         @include svg-color(map.get($colorMap, color));
         color: map.get($colorMap, color);
-        border: 1px solid map.get($colorMap, color);
+        outline: 1px solid map.get($colorMap, color);
     }
 
     @if ($colorName == "basic") {

package/scss/mixins/date.scss

@@ -387,7 +387,7 @@ $date-sizes: map.merge(
             margin-top: 2px;
         }
 
-        .TimePanelView__column {
+        .TimePanelView .TimePanelColumn__column {
             height: 298px;
             row-gap: 2px;
             border: none;
@@ -405,7 +405,7 @@ $date-sizes: map.merge(
                 height: 0px;
             }
 
-            .TimePanelView__cell {
+            .TimePanelColumn__cell {
                 padding: 0;
                 border-radius: variables.$radius-large;
 

package/scss/normalize.scss

@@ -23,3 +23,8 @@ button {
 input {
     outline: none;
 }
+
+// Class to hide body scroll, when Modal is opened
+.body-hide-scroll {
+    overflow: hidden;
+}