@steroidsjs/bootstrap 2.1.0-beta.7 → 2.1.4

package/form/Button/ButtonView.scss

@@ -59,7 +59,7 @@
 
   &_link {
     justify-content: flex-start;
-    background-color: #fff;
+    background-color: transparent;
   }
 
   &__icon {

package/form/DateField/DateFieldView.scss

@@ -1,7 +1,7 @@
 .DateFieldView {
   $root: &;
 
-  padding: 0 8px;
+  padding-right: 8px;
   position: relative;
 
   background-color: $white;
@@ -46,8 +46,7 @@
     border: none;
     outline: none;
     background-color: transparent;
-
-    padding: 10px 5px;
+    padding: $input-padding-y $input-padding-x;
   }
 
   &__icon-container {

package/form/DateTimeField/DateTimeFieldView.scss

@@ -53,7 +53,7 @@
     outline: none;
     background-color: transparent;
 
-    padding: 10px 5px;
+    padding: $input-padding-y $input-padding-x;
   }
 
   &__icon-container {

package/form/DropDownField/DropDownFieldView.js

@@ -29,25 +29,39 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
 exports.__esModule = true;
 var React = __importStar(require("react"));
+var react_1 = require("react");
 var hooks_1 = require("@steroidsjs/core/hooks");
 function DropDownFieldView(props) {
-    /* TODO Move to core component
-    static defaultProps = {
-        searchAutoFocus: true,
-    };
-
-    componentDidUpdate(prevProps) {
-        // Auto focus on search
-        if (props.searchAutoFocus && props.autoComplete && !prevProps.isOpened && props.isOpened) {
-            const element: any = findDOMNode(this);
-            const input = element.querySelector('.' + props.bem.element('search-input'));
-            if (input) {
-                input.focus();
-            }
+    var inputRef = react_1.useRef(null);
+    // Auto focus on search
+    react_1.useEffect(function () {
+        if (props.isSearchAutoFocus && props.isAutoComplete && props.isOpened && (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current)) {
+            inputRef.current.focus();
         }
-    }*/
+    }, [props.isAutoComplete, props.isOpened, props.isSearchAutoFocus]);
+    var renderItem = function (item, level) {
+        if (level === void 0) { level = 0; }
+        if (props.groupAttribute && Array.isArray(item[props.groupAttribute])) {
+            return __spreadArray([
+                (React.createElement("div", { key: String(item[props.primaryKey]), className: bem.element('drop-down-item', 'group') }, item.label))
+            ], item[props.groupAttribute].map(function (subItem) { return renderItem(subItem, level + 1); }));
+        }
+        return (React.createElement("div", { key: String(item[props.primaryKey]), className: bem.element('drop-down-item', {
+                hover: props.hoveredId === item[props.primaryKey],
+                select: props.selectedIds.includes(item[props.primaryKey]),
+                level: level
+            }), onClick: function (e) {
+                e.preventDefault();
+                props.onItemSelect(item[props.primaryKey]);
+            }, onFocus: function () { return props.onItemHover(item[props.primaryKey]); }, onMouseOver: function () { return props.onItemHover(item[props.primaryKey]); } }, item.label));
+    };
     var bem = hooks_1.useBem('DropDownFieldView');
     return (React.createElement("div", { ref: props.forwardedRef, className: bem(bem.block({ size: props.size }), props.className), style: props.style },
         React.createElement("div", { className: bem.element('selected-items', {
@@ -79,13 +93,7 @@ function DropDownFieldView(props) {
         props.showReset && props.selectedIds.length > 0 && (React.createElement("button", { className: bem.element('reset'), onClick: props.onReset, "aria-label": __('Сбросить') })),
         props.isOpened && (React.createElement("div", { className: bem.element('drop-down') },
             props.isAutoComplete && (React.createElement("div", { className: bem.element('search') },
-                React.createElement("input", __assign({}, props.searchInputProps, { onChange: function (e) { return props.searchInputProps.onChange(e.target.value); }, className: bem('form-control', 'form-control-' + props.size, bem.element('search-input'), props.searchInputProps.className) })))),
-            React.createElement("div", { className: bem.element('drop-down-list') }, props.items.map(function (item) { return (React.createElement("button", { key: String(item[props.primaryKey]), type: 'button', className: bem.element('drop-down-item', {
-                    hover: props.hoveredId === item[props.primaryKey],
-                    select: props.selectedIds.includes(item[props.primaryKey])
-                }), onClick: function (e) {
-                    e.preventDefault();
-                    props.onItemSelect(item[props.primaryKey]);
-                }, onFocus: function () { return props.onItemHover(item[props.primaryKey]); }, onMouseOver: function () { return props.onItemHover(item[props.primaryKey]); } }, item.label)); }))))));
+                React.createElement("input", __assign({}, props.searchInputProps, { ref: inputRef, onChange: function (e) { return props.searchInputProps.onChange(e.target.value); }, className: bem('form-control', 'form-control-' + props.size, bem.element('search-input'), props.searchInputProps.className) })))),
+            React.createElement("div", { className: bem.element('drop-down-list') }, props.items.map(function (item) { return renderItem(item); }))))));
 }
 exports["default"] = DropDownFieldView;

package/form/DropDownField/DropDownFieldView.scss

@@ -7,6 +7,7 @@
   &_size_sm {
     font-size: 0.7875rem;
   }
+
   &_size_lg {
     font-size: 1.25rem;
   }
@@ -21,7 +22,6 @@
     background-clip: padding-box;
 
     background-color: #fff;
-    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
     border: 1px solid $border-default;
     border-radius: 0.25rem;
     color: $heading;
@@ -74,12 +74,14 @@
       opacity: .5;
     }
   }
+
   &_size_sm &__selected-items {
     padding: 0.25rem 0.5rem;
     line-height: 1.5;
     border-radius: 0.2rem;
     height: 31px;
   }
+
   &_size_lg &__selected-items {
     padding: 0.5rem 1rem;
     line-height: 1.5;
@@ -87,7 +89,7 @@
     height: 48px;
   }
 
-  &__selected-item-multiple{
+  &__selected-item-multiple {
     cursor: default;
     margin-right: 5px;
     padding: 0 4px 0 8px;
@@ -97,21 +99,22 @@
     border-radius: 2px;
     background: #f5f5f5;
   }
-  &__selected-item-multiple-remove{
+
+  &__selected-item-multiple-remove {
     cursor: pointer;
     margin-left: 6px;
 
     display: flex;
     align-items: center;
 
-    svg{
+    svg {
       width: 10px;
       opacity: .5;
       transition: opacity .1s ease-in;
     }
 
-    &:hover{
-      svg{
+    &:hover {
+      svg {
         opacity: 1;
       }
     }
@@ -127,8 +130,7 @@
     cursor: pointer;
 
     &::before,
-    &::after
-    {
+    &::after {
       display: block;
       position: absolute;
       top: 50%;
@@ -177,6 +179,7 @@
       width: 100%;
     }
   }
+
   &_size_sm &__search {
     padding: 0.1rem 0.2rem;
   }
@@ -190,6 +193,14 @@
     background-color: transparent;
     border: unset;
 
+    &_group {
+      font-weight: bold;
+    }
+
+    &_level_1 {
+      padding-left: 1.25rem
+    }
+
     &_hover {
       background-color: $dropdown-divider-bg;
     }
@@ -199,12 +210,15 @@
       color: #152536;
     }
   }
+
   &_size_sm &__drop-down-item {
     padding: 0.25rem 0.5rem;
   }
+
   &_size_lg &__drop-down-item {
     padding: 0.5rem 1rem;
   }
+
   &__placeholder {
     color: #fff;
   }

package/form/FieldList/FieldListItemView.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { IFieldListItemViewProps } from '@steroidsjs/core/ui/form/FieldList/FieldList';
-declare const _default: React.NamedExoticComponent<IFieldListItemViewProps>;
+declare const _default: React.MemoExoticComponent<(props: IFieldListItemViewProps) => JSX.Element>;
 export default _default;

package/form/FieldList/FieldListItemView.js

@@ -33,7 +33,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var form_1 = require("@steroidsjs/core/ui/form");
-exports["default"] = React.memo(function FieldListItemView(props) {
+exports["default"] = React.memo(function (props) {
     var bem = hooks_1.useBem('FieldListItemView');
     return (React.createElement("tr", null,
         props.items.map(function (field, index) { return (React.createElement("td", { key: index, className: bem(bem.element('table-cell'), field.className) },

package/form/FieldList/FieldListView.js

@@ -21,21 +21,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var form_1 = require("@steroidsjs/core/ui/form");
 function FieldListView(props) {
     var bem = hooks_1.useBem('FieldListView');
     return (React.createElement("div", { className: bem(bem.block(), props.className), style: props.style, ref: props.forwardedRef },
-        React.createElement("table", { className: bem(bem.element('table'), 'table', props.size && 'table-' + props.size) },
+        React.createElement("table", { className: bem(bem.element('table'), 'table', props.size && 'table-' + props.size, props.tableClassName) },
             React.createElement("thead", null,
                 React.createElement("tr", null,
                     props.items.map(function (field, rowIndex) { return (React.createElement("th", { key: rowIndex, className: bem(bem.element('table-cell-header'), field.headerClassName) }, field.label)); }),
                     props.showRemove && (
                     // eslint-disable-next-line jsx-a11y/control-has-associated-label
                     React.createElement("th", null)))),
-            React.createElement("tbody", null, props.children)),
-        props.showAdd && !props.disabled && (React.createElement("button", { className: bem.element('link-add'), onClick: function (e) {
-                e.preventDefault();
-                props.onAdd();
-            } }, __('Добавить ещё')))));
+            React.createElement("tbody", null, props.children),
+            React.createElement("tfoot", null,
+                React.createElement("tr", null,
+                    React.createElement("td", { colSpan: props.items.length }, props.showAdd && !props.disabled && (React.createElement(form_1.Button, { formId: false, layout: false, color: 'secondary', className: bem.element('button-add'), onClick: function (e) {
+                            e.preventDefault();
+                            props.onAdd();
+                        } }, __('Добавить ещё')))))))));
 }
 exports["default"] = FieldListView;
-;

package/form/FieldList/FieldListView.scss

@@ -25,13 +25,8 @@
     color: $danger;
   }
 
-  &__link-add {
+  &__button-add {
     margin-left: 0.75rem;
-    border-bottom: 1px dashed $link-color;
-
-    &:hover {
-      text-decoration: none;
-    }
   }
 
   .FileFieldView__files {

package/form/ImageField/ImageFieldModalView.js

@@ -50,6 +50,6 @@ function ImageFieldModalView(props) {
                 }
             }] },
         React.createElement("div", { className: 'mb-3' },
-            React.createElement(react_image_crop_1["default"], __assign({}, props.crop.reactImageCropProps, { className: bem.element('crop'), src: props.image.url, crop: crop, onChange: setCrop })))));
+            React.createElement(react_image_crop_1["default"], __assign({}, props.crop.reactImageCropProps, { className: bem.element('crop'), src: props.image && props.image.url, crop: crop, onChange: setCrop })))));
 }
 exports["default"] = ImageFieldModalView;

package/form/NumberField/NumberFieldView.js

@@ -36,16 +36,14 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 function NumberFieldView(props) {
     // Input ref
     var inputRef = react_1.useRef(null);
-    // Value state
-    var _a = react_1.useState(null), value = _a[0], setValue = _a[1];
-    var onStepUp = function () {
+    var onStepUp = react_1.useCallback(function () {
         inputRef.current.stepUp();
-        setValue(inputRef.current.value);
-    };
-    var onStepDown = function () {
+        props.inputProps.onChange(inputRef.current.value);
+    }, [inputRef.current]);
+    var onStepDown = react_1.useCallback(function () {
         inputRef.current.stepDown();
-        setValue(inputRef.current.value);
-    };
+        props.inputProps.onChange(inputRef.current.value);
+    }, [inputRef.current]);
     var bem = hooks_1.useBem('NumberFieldView');
     return (React.createElement("div", { className: bem(bem.block({
             disabled: props.inputProps.disabled
@@ -55,13 +53,13 @@ function NumberFieldView(props) {
             }), !!props.errors && 'is-invalid') }, props.inputProps)),
         !props.disabled && !props.errors && (React.createElement("div", { className: bem.element('arrows-container') },
             React.createElement("button", { className: bem.element('arrow', {
-                    disabled: props.inputProps.max && value >= props.inputProps.max
-                }), onClick: onStepUp },
+                    disabled: props.inputProps.max && props.inputProps.value >= props.inputProps.max
+                }), type: 'button', onClick: onStepUp },
                 React.createElement("svg", { viewBox: '64 64 896 896', width: '1em', height: '1em' },
                     React.createElement("path", { d: 'M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140\n                                    768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1\n                                    391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z' }))),
             React.createElement("button", { className: bem.element('arrow', {
-                    disabled: props.inputProps.min && value <= props.inputProps.min
-                }), onClick: onStepDown },
+                    disabled: props.inputProps.min && props.inputProps.value <= props.inputProps.min
+                }), type: 'button', onClick: onStepDown },
                 React.createElement("svg", { viewBox: '64 64 896 896', width: '1em', height: '1em' },
                     React.createElement("path", { d: 'M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5\n                                    0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39\n                                    17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z' })))))));
 }

package/layout/Tooltip/TooltipView.scss

@@ -15,6 +15,7 @@ $tooltip-arrow-offset-vertical-bottom: 7px;
   transform: translate(0,0);
   opacity: 0;
   transition: opacity .15s ease-in, transform .15s ease-in;
+  z-index: 150;
 
   &_show {
     opacity: 1;

package/nav/Breadcrubms/BreadcrumbsView.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IBreadcrumbsViewProps } from '@steroidsjs/core/ui/nav/Breadcrumbs/Breadcrumbs';
-export default function BreadcrumbsView(props: IBreadcrumbsViewProps & IBemHocOutput): JSX.Element;
+export default function BreadcrumbsView(props: IBreadcrumbsViewProps): JSX.Element;

package/nav/Breadcrubms/BreadcrumbsView.js

@@ -32,7 +32,7 @@ function BreadcrumbsView(props) {
         React.createElement("ol", { className: bem.element('list') }, items.map(function (item, index) {
             var isLastItem = items.length === index + 1;
             return (React.createElement("li", { key: item.id || index, className: bem.element('item') },
-                !isLastItem && item.id && (React.createElement(Link_1["default"], { toRoute: item.id, href: item.id }, item.title)),
+                !isLastItem && item.id && (React.createElement(Link_1["default"], { toRoute: item.id, toRouteParams: props.routeParams, href: item.id }, item.title)),
                 (isLastItem || !item.id) && (React.createElement("span", null, props.pageTitle || item.title))));
         }))));
 }

package/nav/Breadcrubms/BreadcrumbsView.scss

@@ -4,6 +4,7 @@
   &__list {
     display: flex;
     list-style: none;
+    padding: 0;
   }
 
   &__item {

package/nav/Nav/NavIconView.js

@@ -39,7 +39,7 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 function NavIconView(props) {
     var bem = hooks_1.useBem('NavIconView');
     return (React.createElement("div", { className: bem(bem.block(), props.className) },
-        props.items.map(function (item, index) { return (React.createElement(Button_1["default"], __assign({ icon: props.icon ? props.icon : 'circle-notch', key: item.id || index, link: true, onClick: function () { return props.onClick(item, index); } }, item, { label: null, hint: item.hint || item.label || null }))); }),
+        props.items.map(function (item, index) { return (React.createElement(Button_1["default"], __assign({ icon: props.icon ? props.icon : 'circle-notch', key: item.id || index, link: true, onClick: function () { return props.onClick(item, index); }, layout: false }, item, { label: null, hint: item.hint || item.label || null }))); }),
         props.children));
 }
 exports["default"] = NavIconView;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@steroidsjs/bootstrap",
-  "version": "2.1.0-beta.7",
+  "version": "2.1.4",
   "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.1.0-beta.30",
+    "@steroidsjs/core": "^2.2.9",
     "bootstrap": "^4.5.2",
     "lodash": "^4.17.20",
     "lodash-es": "^4.17.20",

package/scss/variables/colors.scss

@@ -1,52 +1,52 @@
-$primary: #651FFF;
-$primary-dark: #410FAD;
-$primary-light: #D8CCF7;
+$primary: #651FFF !default;
+$primary-dark: darken($primary, 25) !default;
+$primary-light: lighten($primary, 50) !default;
 
-$secondary: #97A7C8;
-$secondary-dark: #596886;
-$secondary-light: #E3EAF9;
+$secondary: #97A7C8 !default;
+$secondary-dark: darken($secondary, 25) !default;
+$secondary-light: lighten($secondary, 50) !default;
 
-$heading: #152536;
-$body: #68717A;
-$white: #FFFFFF;
+$success: #64D03E !default;
+$success-dark: darken($success, 25) !default;
+$success-light: lighten($success, 50) !default;
 
-$success: #64D03E;
-$success-dark: #218838;
-$success-light: #ABED94;
+$danger: #FF4557 !default;
+$danger-dark: darken($danger, 25) !default;
+$danger-light: lighten($danger, 50) !default;
 
-$danger: #FF4557;
-$danger-dark: #DA2839;
-$danger-light: #ff99a3;
+$warning: #fad826 !default;
+$warning-dark: darken($warning, 25) !default;
+$warning-light: lighten($warning, 50) !default;
 
-$warning: #fad826;
-$warning-dark: #dcc131;
-$warning-light: #fff3b2;
+$info: #39bbd8 !default;
+$info-dark: darken($info, 25) !default;
+$info-light: lighten($info, 50) !default;
 
-$info: #39bbd8;
-$info-dark: #2796af;
-$info-light: #a7efff;
+$light: #f8f9fa !default;
+$light-dark: darken($light, 25) !default;
+$light-light: lighten($light, 50) !default;
 
-$light: #f8f9fa;
-$light-dark: #e2e6ea;
-$light-light: #fafafa;
+$dark: #343a40 !default;
+$dark-dark: darken($dark, 25) !default;
+$dark-light: lighten($dark, 50) !default;
 
-$dark: #343a40;
-$dark-dark: #1a1c1e;
-$dark-light: #acacac;
+$heading: #152536 !default;
+$body: #68717A !default;
+$white: #FFFFFF !default;
 
 $color-themes: () !default;
 $color-themes: map-merge(
-  (
-      "primary":   ("color": $primary,   "color-dark": $primary-dark,   "color-light": $primary-light, "text-color": $white),
-      "secondary": ("color": $secondary, "color-dark": $secondary-dark, "color-light": $secondary-light, "text-color": $white),
-      "success":   ("color": $success,   "color-dark": $success-dark,   "color-light": $success-light, "text-color": $white),
-      "danger":    ("color": $danger,    "color-dark": $danger-dark,    "color-light": $danger-light, "text-color": $white),
-      "warning":   ("color": $warning,   "color-dark": $warning-dark,   "color-light": $warning-light, "text-color": $dark),
-      "info":      ("color": $info,      "color-dark": $info-dark,      "color-light": $info-light, "text-color": $white),
-      "light":     ("color": $light,     "color-dark": $light-dark,     "color-light": $light-light, "text-color": $dark),
-      "dark":      ("color": $dark,      "color-dark": $dark-dark,      "color-light": $dark-light, "text-color": $white)
-  ),
-  $color-themes
+                (
+                        "primary": ("color": $primary, "color-dark": $primary-dark, "color-light": $primary-light, "text-color": $white),
+                        "secondary": ("color": $secondary, "color-dark": $secondary-dark, "color-light": $secondary-light, "text-color": $white),
+                        "success": ("color": $success, "color-dark": $success-dark, "color-light": $success-light, "text-color": $white),
+                        "danger": ("color": $danger, "color-dark": $danger-dark, "color-light": $danger-light, "text-color": $white),
+                        "warning": ("color": $warning, "color-dark": $warning-dark, "color-light": $warning-light, "text-color": $dark),
+                        "info": ("color": $info, "color-dark": $info-dark, "color-light": $info-light, "text-color": $white),
+                        "light": ("color": $light, "color-dark": $light-dark, "color-light": $light-light, "text-color": $dark),
+                        "dark": ("color": $dark, "color-dark": $dark-dark, "color-light": $dark-light, "text-color": $white)
+                ),
+                $color-themes
 );
 
 $grey-light: #D9D9D9;