@steroidsjs/bootstrap 2.1.13 → 2.1.16

package/content/Calendar/CaptionElement.scss

@@ -21,6 +21,7 @@
 
     cursor: pointer;
     transition: color .1s ease-in;
+
     &:hover, &:active, &:focus {
       color: $calendar-primary-color;
     }
@@ -37,24 +38,27 @@
       fill: rgba(0, 0, 0, 0.25);
       transition: fill .1s ease-in;
     }
-    &_one-arrow.IconView svg{
+
+    &_one-arrow.IconView svg {
       width: 8px;
     }
 
     &:hover svg {
-      fill: rgba(0,0,0,.7);
+      fill: rgba(0, 0, 0, .7);
     }
   }
 
   &__selected-month, &__selected-year {
     font-size: 16px;
   }
+
   &__selected-month {
     margin-right: 5px;
   }
 
   // Panel changing Month/Year
 
+
   &__panel {
     z-index: 10;
     position: absolute;
@@ -63,67 +67,67 @@
     right: 0;
     bottom: 50px;
     background-color: $white;
-    display: flex;
+
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 0fr 1fr;
+    gap: 0 0;
+    grid-template-areas:
+      "HeaderMonths HeaderMonths HeaderYears"
+      "Months1stCol Months2ndCol YearsCol";
 
     &_full-height {
       bottom: 0;
     }
+  }
 
-    &-inner {
-      width: 100%;
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
-      grid-template-rows: 0fr 1fr;
-      gap: 0 0;
-      grid-template-areas:
-      "HeaderMonths HeaderMonths HeaderYears"
-      "Months1stCol Months2ndCol YearsCol";
-    }
+  &__panel-header {
+    padding: 5px;
 
-    &-header {
-      padding: 5px;
+    text-align: center;
+    border-bottom: 1px solid $border-color;
+    background-color: $calendar-primary-light-color;
 
-      text-align: center;
-      border-bottom: 1px solid $border-color;
-      background-color: $calendar-primary-light-color;
+    &_months {
+      grid-area: HeaderMonths;
+      border-right: 1px solid $border-color;
+    }
 
-      &_months {
-        grid-area: HeaderMonths;
-        border-right: 1px solid $border-color;
-      }
-      &_years {
-        grid-area: HeaderYears;
-      }
+    &_years {
+      grid-area: HeaderYears;
     }
+  }
 
-    &-column-months {
-      border-right: 1px solid $border-color;
+  &__panel-column-months {
+    border-right: 1px solid $border-color;
 
-      &_first {
-        grid-area: Months1stCol;
-      }
-      &_second {
-        grid-area: Months2ndCol;
-      }
+    &_first {
+      grid-area: Months1stCol;
     }
-    &-column-years {
-      height: 100%;
-      grid-area: YearsCol;
-      overflow: auto;
+
+    &_second {
+      grid-area: Months2ndCol;
     }
+  }
 
-    &-cell {
-      padding: 5px 15px;
-      cursor: pointer;
+  &__panel-column-years {
+    height: 100%;
+    grid-area: YearsCol;
+    overflow: auto;
+  }
+
+  &__panel-cell {
+    padding: 5px 15px;
+    cursor: pointer;
+
+    &_selected {
+      background-color: $calendar-primary-light-color;
+    }
 
-      &_selected {
-        background-color: $calendar-primary-light-color;
-      }
+    transition: background-color .1s ease-in;
 
-      transition: background-color .1s ease-in;
-      &:hover {
-        background-color: $calendar-secondary-light-color;
-      }
+    &:hover {
+      background-color: $calendar-secondary-light-color;
     }
   }
 }

package/content/DropDown/DropDownView.js

@@ -18,21 +18,34 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 exports.__esModule = true;
+var isFunction_1 = __importDefault(require("lodash-es/isFunction"));
 var React = __importStar(require("react"));
 var react_use_1 = require("react-use");
 var hooks_1 = require("@steroidsjs/core/hooks");
 require("./DropDownView.scss");
+var react_1 = require("react");
 function DropDownView(props) {
     var _a;
     var bem = hooks_1.useBem('DropDownView');
+    var ui = hooks_1.useComponents().ui;
     react_use_1.useMount(function () {
         props.calculatePosition(props.forwardedRef.current.getBoundingClientRect());
     });
+    var contentProps = react_1.useMemo(function () { return ({
+        onClose: props.onClose
+    }); }, [props.onClose]);
+    var content = props.content();
+    if (isFunction_1["default"](content)) {
+        content = ui.renderView(content, contentProps);
+    }
     return (React.createElement("div", { ref: props.forwardedRef, className: bem(bem.block((_a = {
                 show: props.isComponentVisible
             },
             _a["position-" + props.position] = !!props.position,
-            _a)), props.className), style: props.style }, props.content()));
+            _a)), props.className), style: props.style }, content));
 }
 exports["default"] = DropDownView;

package/form/Form/FormView.js

@@ -38,9 +38,23 @@ var isString_1 = __importDefault(require("lodash-es/isString"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var Field_1 = __importDefault(require("@steroidsjs/core/ui/form/Field"));
 var Button_1 = __importDefault(require("@steroidsjs/core/ui/form/Button"));
+var react_use_1 = require("react-use");
+var react_1 = require("react");
 function FormView(props) {
     var bem = hooks_1.useBem('FormView');
-    return (React.createElement("form", { className: bem(bem.block({
+    var formRef = react_1.useRef(null);
+    // Auto focus
+    react_use_1.useMount(function () {
+        if (props.autoFocus) {
+            var inputEl_1 = formRef.current.querySelector('input:not([type=hidden])');
+            setTimeout(function () {
+                if (inputEl_1 && inputEl_1.focus) {
+                    inputEl_1.focus();
+                }
+            }, 10);
+        }
+    });
+    return (React.createElement("form", { ref: formRef, className: bem(bem.block({
             border: props.isBordered,
             inline: props.layout.layout === 'inline'
         }), props.className, props.layout.layout === 'horizontal' && 'form-horizontal'), onSubmit: props.onSubmit, style: props.style },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@steroidsjs/bootstrap",
-  "version": "2.1.13",
+  "version": "2.1.16",
   "description": "",
   "main": "index.js",
   "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -19,7 +19,7 @@
   "dependencies": {
     "@ckeditor/ckeditor5-react": "^3.0.2",
     "@steroidsjs/ckeditor5": "^27.0.2-rc.2",
-    "@steroidsjs/core": "^2.2.40",
+    "@steroidsjs/core": "^2.2.57",
     "bootstrap": "^4.5.2",
     "lodash": "^4.17.20",
     "lodash-es": "^4.17.20",