@steroidsjs/bootstrap 2.1.12 → 2.1.15

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/FileField/FileFieldItemView.js

@@ -27,7 +27,7 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
 function FileFieldItemView(props) {
     var bem = hooks_1.useBem('FileFieldItemView');
-    return (React.createElement("div", { className: bem(bem.block(), 'card float-left mb-1 mr-1', props.error && 'border-danger') },
+    return (React.createElement("div", { className: bem(bem.block(), 'card mb-1 mr-1', props.error && 'border-danger') },
         props.image
             ? (React.createElement("img", { src: props.image.url, className: 'card-img-top', width: props.image.width, height: props.image.height, alt: props.title }))
             : (React.createElement(Icon_1["default"], { className: bem.element('blank-img'), name: props.imagesOnly ? 'file-image' : 'file' })),

package/form/FileField/FileFieldView.js

@@ -42,7 +42,7 @@ function FileFieldView(props) {
     var ButtonComponent = props.buttonComponent || Button_1["default"];
     var FileItemView = props.itemView;
     return (React.createElement("div", { className: bem.block() },
-        React.createElement("div", { className: bem(bem.element('files'), 'clearfix') }, props.items.map(function (item) { return (React.createElement(FileItemView, __assign({ key: item.uid }, item, props.itemProps))); })),
+        React.createElement("div", { className: bem(bem.element('files')) }, props.items.map(function (item) { return (React.createElement(FileItemView, __assign({ key: item.uid }, item, props.itemProps))); })),
         React.createElement("div", { className: bem.element('button') },
             React.createElement(ButtonComponent, __assign({}, props.buttonProps, { layout: false, label: null }),
                 React.createElement(Icon_1["default"], { className: bem.element('button-icon'), name: props.imagesOnly ? 'file-image' : 'upload' }),

package/form/FileField/FileFieldView.scss

@@ -1,6 +1,8 @@
 .FileFieldView {
   &__files {
     margin-bottom: 1em;
+    display: flex;
+    flex-wrap: wrap;
   }
 
   &__button-label {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@steroidsjs/bootstrap",
-  "version": "2.1.12",
+  "version": "2.1.15",
   "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.39",
+    "@steroidsjs/core": "^2.2.44",
     "bootstrap": "^4.5.2",
     "lodash": "^4.17.20",
     "lodash-es": "^4.17.20",