@steroidsjs/bootstrap 2.1.0-beta.6 → 2.1.3

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

@@ -31,23 +31,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 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 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,7 +72,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("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 (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])

package/form/DropDownField/DropDownFieldView.scss

@@ -21,7 +21,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;

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/ImageField/ImageFieldView.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { IImageFieldViewProps } from '@steroidsjs/core/ui/form/ImageField/ImageField';
+import { IImageFieldViewProps } from "@steroidsjs/core/ui/form/ImageField/ImageField";
 export default function ImageFieldView(props: IImageFieldViewProps): JSX.Element;

package/form/ImageField/ImageFieldView.js

@@ -26,18 +26,18 @@ var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
 function ImageFieldView(props) {
-    var bem = hooks_1.useBem('ImageFieldView');
+    var bem = hooks_1.useBem("ImageFieldView");
     var item = props.item;
-    return (React.createElement("div", { className: bem.block() }, !item.image ? (React.createElement("button", { className: bem.element('button', {
-            loading: item.progress
+    return (React.createElement("div", { className: bem.block() }, !item || !item.image ? (React.createElement("button", { className: bem.element("button", {
+            loading: item ? item.progress : false
         }), onClick: props.onClick },
-        !item.progress ? (React.createElement(Icon_1["default"], { className: bem.element('button-icon'), name: 'plus' })) : (React.createElement("div", { className: bem.element('progress-bar') },
-            React.createElement("div", { className: bem.element('progress-slider'), style: {
-                    width: item.progress.percent + "%"
+        !item || !item.progress ? (React.createElement(Icon_1["default"], { className: bem.element("button-icon"), name: 'plus' })) : (React.createElement("div", { className: bem.element("progress-bar") },
+            React.createElement("div", { className: bem.element("progress-slider"), style: {
+                    width: (item ? item.progress.percent : 0) + "%"
                 } }))),
-        React.createElement("span", { className: bem.element('button-label') }, !item.progress ? props.label : 'Uploading...'))) : (React.createElement("div", { className: bem.element('content') },
-        React.createElement("img", { className: bem.element('image'), src: item.image.url, width: item.image.width, height: item.image.height, alt: item.title }),
-        React.createElement("div", { className: bem.element('image-controls') },
-            React.createElement(Icon_1["default"], { className: bem.element('delete-icon'), name: 'trash', onClick: item.onRemove }))))));
+        React.createElement("span", { className: bem.element("button-label") }, !item || !item.progress ? props.label : "Uploading..."))) : (React.createElement("div", { className: bem.element("content") },
+        React.createElement("img", { className: bem.element("image"), src: item.image.url, width: item.image.width, height: item.image.height, alt: item.title }),
+        React.createElement("div", { className: bem.element("image-controls") },
+            React.createElement(Icon_1["default"], { className: bem.element("delete-icon"), name: 'trash', onClick: item.onRemove }))))));
 }
 exports["default"] = ImageFieldView;

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.6",
+  "version": "2.1.3",
   "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.27",
+    "@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;