@steroidsjs/bootstrap 3.0.29 → 3.0.30

package/content/Calendar/CalendarView.scss

@@ -212,14 +212,6 @@ $calendar-border-color: var(--calendar-border-color);
         background-color: $day-background-color-hover;
     }
 
-    .DayPicker-Day--today:hover {
-        background-color: transparent;
-
-        .CalendarView__day {
-            transition: background-color 150ms ease-in-out;
-        }
-    }
-
     &__day {
         position: relative;
         z-index: 1;

package/form/AutoCompleteField/AutoCompleteFieldView.scss

@@ -45,24 +45,30 @@ $autocomplete-icon-color: var(--autocomplete-icon-color);
     &__input {
         width: 100%;
         padding: 0 8px;
-        border: 1px solid variables.$element-border-color;
+        outline: 1px solid variables.$element-border-color;
+        border: none;
         background-color: variables.$element-field-background-color;
         color: variables.$text-color;
-        transition: border-color 150ms ease-in-out;
+        transition: outline 150ms ease-in-out;
         font-size: inherit;
         line-height: inherit;
+
+        &:active {
+            outline-color: variables.$primary;
+        }
     }
 
     &_opened {
         #{$root}__input {
-            border-color: variables.$primary;
+            outline-width: 4px;
+            outline-color: variables.$primary-light;
         }
     }
 
     &_disabled {
         #{$root}__input {
             background-color: variables.$element-background-color-disabled;
-            border-color: transparent;
+            outline-color: transparent;
             cursor: not-allowed;
         }
     }

package/form/Button/ButtonView.scss

@@ -9,7 +9,7 @@ $btn-letter-spacing: 0.1em;
 .ButtonView {
     $root: &;
 
-    transition-property: color, background-color, border-color, box-shadow;
+    transition-property: color, background-color, outline-color, box-shadow;
     transition-duration: variables.$transition-duration;
     transition-timing-function: ease-in-out;
 
@@ -22,8 +22,9 @@ $btn-letter-spacing: 0.1em;
     &_button {
         position: relative;
         border-radius: variables.$radius-small;
+        border: none;
         user-select: none;
-        border: 3px solid transparent;
+        outline: 3px solid transparent;
 
         padding: 0 20px;
         display: flex;
@@ -140,7 +141,7 @@ $btn-letter-spacing: 0.1em;
     &_failed {
         &,
         &:hover {
-            border-color: variables.$danger;
+            outline-color: variables.$danger;
             box-shadow: 0 0 1rem rgba(variables.$danger, 0.2);
         }
     }

package/form/DateField/DateFieldView.js

@@ -53,7 +53,7 @@ function DateFieldView(props) {
                 'is-invalid': !!props.errors
             }), props.className), style: props.style },
             React.createElement("div", { className: bem.element('body') },
-                React.createElement("input", __assign({}, props.inputProps, { ref: props.maskInputRef, onInput: function (e) {
+                React.createElement("input", __assign({}, props.inputProps, { id: props.id, ref: props.maskInputRef, onInput: function (e) {
                         props.inputProps.onChange(e.currentTarget.value);
                     }, className: bem(bem.element('input'), props.inputProps.className) })),
                 React.createElement("div", { className: bem.element('icon-container') },

package/form/DateRangeField/DateRangeFieldView.js

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

package/form/DateTimeField/DateTimeFieldView.js

@@ -57,7 +57,7 @@ function DateTimeFieldView(props) {
                 'is-invalid': !!props.errors
             }), props.className), style: props.style },
             React.createElement("div", { className: bem.element('body') },
-                React.createElement("input", __assign({}, props.inputProps, { placeholder: props.placeholder
+                React.createElement("input", __assign({}, props.inputProps, { id: props.id, placeholder: props.placeholder
                         ? props.placeholder
                         : props.inputProps.placeholder, className: bem(bem.element('input', {
                         size: props.size

package/form/DateTimeRangeField/DateTimeRangeFieldView.js

@@ -58,7 +58,7 @@ function DateTimeRangeFieldView(props) {
                 'is-invalid': !!props.errors
             }), props.className), style: props.style },
             React.createElement("div", { className: bem.element('body') },
-                React.createElement("input", __assign({}, props.inputPropsFrom, { className: bem(bem.element('input', {
+                React.createElement("input", __assign({}, props.inputPropsFrom, { id: props.id, className: bem(bem.element('input', {
                         size: props.size
                     })), onInput: function (e) { return props.inputPropsFrom.onChange(e.currentTarget.value); } })),
                 React.createElement("input", __assign({}, props.inputPropsTo, { className: bem(bem.element('input', {

package/form/PasswordField/PasswordFieldView.scss

@@ -152,19 +152,23 @@ $eye-filled-color: var(--eye-filled-color);
     }
 
     &__security-bar {
-        position: relative;
+        position: absolute;
         width: 100%;
         height: 4px;
         border-radius: 4px;
-        margin-top: 8px;
+
+        bottom: -12px;
 
         background-color: $security-bar-background;
 
+        opacity: 0;
+        transition: 0.15s ease opacity;
+
         &::before {
             content: "";
             position: absolute;
             width: 0%;
-            height: 4px;
+            height: 100%;
             border-radius: 4px;
             transition: width 1s ease-in-out;
         }
@@ -184,6 +188,11 @@ $eye-filled-color: var(--eye-filled-color);
             background-color: variables.$success;
         }
     }
+    &:focus-within {
+        #{$root}__security-bar {
+            opacity: 1;
+        }
+    }
 
     &__icon-eye {
         outline: none;

package/form/TimeField/TimeFieldView.js

@@ -54,7 +54,7 @@ function TimeFieldView(props) {
                 'is-invalid': !!props.errors
             }), props.className), style: props.style },
             React.createElement("div", { className: bem.element('body') },
-                React.createElement("input", __assign({}, props.inputProps, { className: bem(bem.element('input'), props.inputProps.className), onChange: function (e) { return props.inputProps.onChange(e.target.value); } })),
+                React.createElement("input", __assign({}, props.inputProps, { id: props.id, className: bem(bem.element('input'), props.inputProps.className), onChange: function (e) { return props.inputProps.onChange(e.target.value); } })),
                 React.createElement("div", { className: bem.element('icon-container') },
                     !props.inputProps.value && props.icon && (React.createElement(Icon_1["default"], { className: bem.element('date-icon'), name: typeof props.icon === 'string' ? props.icon : 'calendar_range', tabIndex: -1 })),
                     props.showRemove && props.inputProps.value && props.icon !== false && (React.createElement(Icon_1["default"], { className: bem.element('close-icon'), onClick: function (e) {

package/form/TimeField/TimeFieldView.scss

@@ -18,6 +18,8 @@
     &__dropdown { 
         background: variables.$element-background-color;
 
+        min-width: unset;
+
         @include mixins.calendar-border();
     }
 
@@ -30,7 +32,23 @@
             padding-top: 10px;
             display: flex;
             flex-flow: row nowrap;
-            column-gap: 10px;
+            column-gap: 10px;   
+        }
+
+        &:has(.TimePanelView__button_now) {
+            .TimePanelView {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                &__button_now {
+                    margin-bottom: 6px;
+                }
+            }
+            .TimePanelView__footer {
+                flex-direction: column;
+            }
+            
         }
     }
 }

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/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.29",
+    "version": "3.0.30",
     "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.52",
         "@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;