@steroidsjs/bootstrap 2.1.0-beta.5 → 2.1.2

package/README.md

@@ -0,0 +1,7 @@
+
+# Bootstrap views for Steroids
+
+Эта библиотека содержит представления (views) для компонентов из [Steroids](https://github.com/steroids/react/),
+стилизованные под UI-фреймворк [Bootstrap](https://getbootstrap.com/).
+
+Подробнее о том как создавать и использовать эти view-файлы можно узнать в [документации Steroids](https://github.com/steroids/react/blob/master/docs/index.md)

package/form/Button/ButtonView.js

@@ -64,7 +64,7 @@ function ButtonView(props) {
             renderLabel(),
             renderBadge()));
     }
-    return (React.createElement("button", { type: props.type, disabled: props.disabled, onClick: props.onClick, style: props.style, className: className },
+    return (React.createElement("button", { title: props.hint, type: props.type, disabled: props.disabled, onClick: props.onClick, style: props.style, className: className },
         renderLabel(),
         renderBadge()));
 }

package/form/Button/ButtonView.scss

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

package/form/CheckboxField/CheckboxFieldView.js

@@ -39,7 +39,7 @@ var useUniqueId_1 = __importDefault(require("@steroidsjs/core/hooks/useUniqueId"
 function CheckboxFieldView(props) {
     var bem = hooks_1.useBem('CheckboxFieldView');
     var id = useUniqueId_1["default"]('checkbox');
-    return (React.createElement("div", { className: bem(bem.block(), 'custom-control', 'custom-checkbox') },
+    return (React.createElement("div", { className: bem(bem.block({ 'is-invalid': !!props.errors }), 'custom-control', 'custom-checkbox') },
         React.createElement("input", __assign({ className: bem(bem.element('input'), 'custom-control-input', !!props.errors && 'is-invalid', props.className), id: id }, props.inputProps, { disabled: props.disabled, required: props.required })),
         React.createElement("label", { className: bem(bem.element('label'), 'custom-control-label'), htmlFor: id },
             React.createElement("span", { className: bem.element('label-text', { required: props.required }) }, props.label))));

package/form/CheckboxField/CheckboxFieldView.scss

@@ -1,12 +1,46 @@
 .CheckboxFieldView {
   display: inline-block;
 
-  &__label-text {
-    &_required:after {
-      display: inline-block;
-      content: '*';
-      color: $danger;
-      margin: 0 0 0 3px;
+  &__label {
+    &-text {
+      &_required:after {
+        display: inline-block;
+        content: '*';
+        color: $danger;
+        margin: 0 0 0 3px;
+      }
+    }
+  }
+  .custom-control-label {
+    &::before, &::after {
+      top: 0;
+    }
+  }
+
+  .custom-control-input {
+    &:checked ~ .custom-control-label {
+      &::before {
+        border-color: $primary;
+        background: $primary;
+      }
+      &:hover {
+        &::before {
+          background: $primary-dark;
+        }
+      }
+      &:active {
+        &::before {
+          background: $primary-light;
+        }
+      }
+    }
+    &:disabled ~ .custom-control-label {
+      color: $border-default;
+
+      &::before {
+        border: unset;
+        background-color: $back-disabled;
+      }
     }
   }
 }

package/form/CheckboxListField/CheckboxListFieldView.js

@@ -39,10 +39,9 @@ var useUniqueId_1 = __importDefault(require("@steroidsjs/core/hooks/useUniqueId"
 function CheckboxListFieldView(props) {
     var bem = hooks_1.useBem('CheckboxListFieldView');
     var prefix = useUniqueId_1["default"]('checkbox');
-    return (React.createElement("div", { className: bem(bem.block(), props.className) }, props.items.map(function (item) { return (React.createElement("div", { key: item.id, className: "custom-control custom-checkbox" },
-        React.createElement("input", __assign({}, props.inputProps, { id: prefix + "_" + item.id, className: bem(bem.element('input'), 'custom-control-input', !!props.errors && 'is-invalid'), checked: props.selectedIds.includes(item.id), disabled: props.disabled, onChange: function () {
-                props.onItemSelect(item.id);
-            }, onMouseOver: function () { return props.onItemHover(item.id); } })),
-        React.createElement("label", { className: "custom-control-label", htmlFor: prefix + "_" + item.id }, item.label))); })));
+    return (React.createElement("div", { className: bem(bem.block({ 'is-invalid': !!props.errors }), props.className) }, props.items.map(function (item) { return (React.createElement("div", { key: item.id, className: "custom-control custom-checkbox" },
+        React.createElement("input", __assign({}, props.inputProps, { disabled: props.disabled, required: props.required, id: prefix + "_" + item.id, className: bem(bem.element('input'), 'custom-control-input', !!props.errors && 'is-invalid'), checked: props.selectedIds.includes(item.id), onChange: function () { return props.onItemSelect(item.id); }, onMouseOver: function () { return props.onItemHover(item.id); } })),
+        React.createElement("label", { className: bem(bem.element('label'), 'custom-control-label'), htmlFor: prefix + "_" + item.id },
+            React.createElement("span", { className: bem.element('label-text', { required: props.required }) }, item.label)))); })));
 }
 exports["default"] = CheckboxListFieldView;

package/form/CheckboxListField/CheckboxListFieldView.scss

@@ -1,3 +1,47 @@
 .CheckboxListFieldView {
+  &__label {
+    &-text {
+      &_required:after {
+        display: inline-block;
+        content: '*';
+        color: $danger;
+        margin: 0 0 0 3px;
+      }
+    }
+  }
 
-}
+  .custom-control-label {
+    &::before, &::after {
+      border-color: $border-default;
+      top: 0;
+    }
+  }
+
+  .custom-control-input {
+    &:checked ~ .custom-control-label {
+      &::before {
+        border-color: $primary;
+        background: $primary;
+      }
+      &:hover {
+        &::before {
+          background: $primary-dark;
+        }
+      }
+      &:active {
+        &::before {
+          background: $primary-light;
+        }
+      }
+    }
+    &:disabled ~ .custom-control-label {
+      color: $border-default;
+
+      &::before {
+        border: unset;
+        background-color: $back-disabled;
+      }
+    }
+  }
+
+}

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,6 +21,7 @@ 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 },
@@ -32,10 +33,9 @@ function FieldListView(props) {
                     // 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) {
+        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/Form/FormView.js

@@ -40,7 +40,10 @@ var Field_1 = __importDefault(require("@steroidsjs/core/ui/form/Field"));
 var Button_1 = __importDefault(require("@steroidsjs/core/ui/form/Button"));
 function FormView(props) {
     var bem = hooks_1.useBem('FormView');
-    return (React.createElement("form", { className: bem(bem.block(), props.className, props.layout.layout === 'horizontal' && 'form-horizontal'), onSubmit: props.onSubmit, style: props.style },
+    return (React.createElement("form", { 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 },
         props.children,
         (props.fields || []).map(function (field, index) { return (React.createElement(Field_1["default"], __assign({ key: index }, (isString_1["default"](field) ? { attribute: field } : field)))); }),
         props.submitLabel && (React.createElement(Button_1["default"], { type: 'submit', label: props.submitLabel }))));

package/form/Form/FormView.scss

@@ -1,3 +1,17 @@
 .FormView {
-
-}
+  &_border {
+    padding: 20px;
+    border: 1px solid $border-default;
+    box-sizing: border-box;
+    box-shadow: $shadow-default;
+    border-radius: 0.5rem;
+  }
+  &_inline {
+    display: flex;
+    grid-gap: 20px;
+    align-items: flex-start;
+  }
+  .form-control {
+    display: flex;
+  }
+}

package/form/ImageField/{ImageFieldModalVIew.d.ts → ImageFieldModalView.d.ts}

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { IImageFieldModalViewProps } from '@steroidsjs/core/ui/form/ImageField/ImageField';
 import 'react-image-crop/dist/ReactCrop.css';
-export default function ImageFieldModalVIew(props: IImageFieldModalViewProps): JSX.Element;
+export default function ImageFieldModalView(props: IImageFieldModalViewProps): JSX.Element;

package/form/ImageField/{ImageFieldModalVIew.js → ImageFieldModalView.js}

@@ -39,8 +39,8 @@ var react_1 = require("react");
 var react_image_crop_1 = __importDefault(require("react-image-crop"));
 var Modal_1 = __importDefault(require("@steroidsjs/core/ui/modal/Modal"));
 require("react-image-crop/dist/ReactCrop.css");
-function ImageFieldModalVIew(props) {
-    var bem = hooks_1.useBem('ImageFieldModalVIew');
+function ImageFieldModalView(props) {
+    var bem = hooks_1.useBem('ImageFieldModalView');
     var _a = react_1.useState(props.crop.initialValues), crop = _a[0], setCrop = _a[1];
     return (React.createElement(Modal_1["default"], { className: bem.block(), title: props.title || __('Выберите область изображения'), onClose: props.onClose, controls: [{
                 label: __(('Сохранить')),
@@ -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;
+exports["default"] = ImageFieldModalView;

package/form/ImageField/{ImageFieldModalVIew.scss → ImageFieldModalView.scss}

@@ -1,4 +1,4 @@
-.ImageFieldModalVIew {
+.ImageFieldModalView {
   &__crop img {
     display: block;
     width: 100%;

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

@@ -58,11 +58,11 @@ function NumberFieldView(props) {
                     disabled: props.inputProps.max && value >= props.inputProps.max
                 }), onClick: onStepUp },
                 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' }))),
+                    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 },
                 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("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' })))))));
 }
 exports["default"] = NumberFieldView;

package/form/NumberField/NumberFieldView.scss

@@ -1,15 +1,30 @@
 .NumberFieldView {
   display: flex;
+  overflow: hidden;
   flex-flow: row nowrap;
   align-items: stretch;
   padding: 0;
+  border: $input-border;
 
+  &:hover {
+    border-color: $border-hover;
+  }
+  &:active {
+    border-color: $border-action;
+    box-shadow: 0 0 0 4px $border-typing;
+  }
 
   &_disabled {
     color: rgba(0, 0, 0, .25);
     background-color: $back-disabled;
+    border: unset;
     cursor: not-allowed;
 
+    &:active, &:hover {
+      border: unset;
+      box-shadow: unset;
+    }
+
     input {
       cursor: inherit;
     }
@@ -33,13 +48,16 @@
     border: none;
     outline: none;
     background-color: transparent;
+    color: $heading;
 
+    width: inherit;
     padding: $input-padding-y $input-padding-x;
   }
 
   &__arrows-container{
     display: flex;
     flex-flow: column;
+    grid-gap: 2px;
     font-size: .6em;
 
     opacity: 0;
@@ -60,13 +78,17 @@
     align-items: center;
     justify-content: center;
 
-    &:nth-child(1){
-      border-left: 1px solid #CCCCCC;
-    }
-    &:nth-child(2){
-      border-top: 1px solid #CCCCCC;
-      border-left: 1px solid #CCCCCC;
+    &:nth-child(1), &:nth-child(2) {
+      background-color: $grey-lighter;
+      &:active, &:hover {
+        background-color: $border-default;
+        fill: $white;
+        svg {
+          fill: $white;
+        }
+      }
     }
+
     &_disabled{
       cursor: not-allowed;
     }
@@ -75,11 +97,6 @@
       transition: fill .1s;
     }
 
-    &:hover{
-      svg{
-        fill: #4a90e2;
-      }
-    }
   }
 }
 

package/form/SliderField/SliderFieldView.js

@@ -29,19 +29,39 @@ 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 React = __importStar(require("react"));
-var rc_slider_1 = __importDefault(require("rc-slider"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var rc_slider_1 = __importStar(require("rc-slider"));
+var createRangeWithTooltip = rc_slider_1["default"].createSliderWithTooltip;
+var createSliderWithTooltip = rc_slider_1["default"].createSliderWithTooltip;
+var RangeComponent = createRangeWithTooltip(rc_slider_1.Range);
+var SliderComponent = createSliderWithTooltip(rc_slider_1["default"]);
 function SliderFieldView(props) {
     var bem = hooks_1.useBem('SliderFieldView');
-    var SliderComponent = rc_slider_1["default"]; // TODO Fix error https://github.com/react-component/slider/issues/656
-    return (React.createElement("div", { className: bem(bem.block({
-            size: props.size
-        }), props.className) },
-        React.createElement(SliderComponent, __assign({}, props.slider, { className: bem.element('slider') }))));
+    var handle = function (prevProps) {
+        var value = prevProps.value;
+        return (React.createElement(rc_slider_1.SliderTooltip, { prefixCls: 'rc-slider-tooltip', placement: 'top', overlay: "" + value },
+            React.createElement(rc_slider_1.Handle, { value: value })));
+    };
+    var commonProps = {
+        slider: props.slider,
+        className: props.className,
+        min: props.min,
+        max: props.max,
+        step: props.step,
+        marks: props.marks,
+        onChange: props.onChange,
+        onAfterChange: props.onAfterChange,
+        defaultValue: props.defaultValue
+            ? props.defaultValue
+            : (props.isRange ? props.rangeDefaultValue : props.sliderDefaultValue),
+        disabled: props.disabled,
+        tipFormatter: function (value) { return "" + (value + props.valuePostfix); },
+        handle: handle
+    };
+    var RangeField = (React.createElement(RangeComponent, __assign({}, commonProps, { draggableTrack: true, areaDisabled: true, pushable: true })));
+    var SliderField = (React.createElement(SliderComponent, __assign({}, commonProps)));
+    return (React.createElement("div", { className: bem(bem.block(), props.className) }, props.isRange ? RangeField : SliderField));
 }
 exports["default"] = SliderFieldView;

package/form/SliderField/SliderFieldView.scss

@@ -1,14 +1,23 @@
 .SliderFieldView {
+  $root: &;
+
+  &_hidden {
+    display: unset;
+  }
 
   .rc-slider {
     position: relative;
     height: 6px;
     width: 100%;
     border-radius: 6px;
-    background-color: #e9e9e9;
+    background-color: $primary-light;
     box-sizing: border-box;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   }
+  .rc-slider-rail {
+    background-color: $primary;
+  }
+
   .rc-slider * {
     box-sizing: border-box;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -18,27 +27,29 @@
     left: 0;
     height: 6px;
     border-radius: 6px;
-    background-color: $primary;
+    background-color: rgba($primary, .7);
     z-index: 1;
   }
   .rc-slider-handle {
     position: absolute;
-    margin-left: -10px;
+    margin-left: 0;
     margin-top: -8px;
     width: 20px;
     height: 20px;
     cursor: pointer;
     border-radius: 50%;
-    border: solid 3px $primary;
-    background-color: #fff;
+    background-color: $primary;
+    box-shadow: $primary-dark 0 0 5px;
     z-index: 2;
-  }
-  .rc-slider-handle:hover {
-    border-color: $primary;
-  }
-  .rc-slider-handle-active:active {
-    border-color: $primary;
-    box-shadow: 0 0 5px $primary;
+    transition: box-shadow 300ms;
+    outline: none;
+
+    &:hover {
+      box-shadow: 0 0 0 10px rgba($primary-light, .3);
+    }
+    &:active {
+      box-shadow: 0 0 0 15px rgba($primary, .3);
+    }
   }
   .rc-slider-mark {
     position: absolute;
@@ -89,6 +100,11 @@
   }
   .rc-slider-disabled {
     background-color: #e9e9e9;
+
+    .rc-slider-handle, .rc-slider-dot {
+      box-shadow: 0 0 4px $border-default;
+      background-color: #ccc;
+    }
   }
   .rc-slider-disabled .rc-slider-track {
     background-color: #ccc;
@@ -238,7 +254,10 @@
       transform: scale(0, 0);
     }
   }
-  .rc-tooltip {
+  .rc-slider-tooltip {
+    display: inline-block;
+  }
+  .rc-slider-tooltip {
     position: absolute;
     left: -9999px;
     top: -9999px;
@@ -247,17 +266,17 @@
     box-sizing: border-box;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   }
-  .rc-tooltip * {
+  .rc-slider-tooltip * {
     box-sizing: border-box;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   }
-  .rc-tooltip-hidden {
+  .rc-slider-tooltip-hidden {
     display: none;
   }
-  .rc-tooltip-placement-top {
+  .rc-slider-tooltip-placement-top {
     padding: 4px 0 8px 0;
   }
-  .rc-tooltip-inner {
+  .rc-slider-tooltip-inner {
     padding: 6px 2px;
     min-width: 24px;
     height: 24px;
@@ -270,18 +289,18 @@
     border-radius: 6px;
     box-shadow: 0 0 4px #d9d9d9;
   }
-  .rc-tooltip-arrow {
+  .rc-slider-tooltip-arrow {
     position: absolute;
     width: 0;
     height: 0;
     border-color: transparent;
     border-style: solid;
   }
-  .rc-tooltip-placement-top .rc-tooltip-arrow {
+  .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
     bottom: 4px;
     left: 50%;
     margin-left: -4px;
     border-width: 4px 4px 0;
     border-top-color: #6c6c6c;
   }
-}
+}

package/form/TextField/TextFieldView.scss

@@ -1,3 +1,4 @@
 .TextFieldView {
-
-}
+  min-height: 38px;
+  box-sizing: border-box;
+}

package/layout/Skeleton/SkeletonView.d.ts

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

package/layout/Skeleton/SkeletonView.js

@@ -22,7 +22,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function SkeletonView(props) {
-    var bem = hooks_1.useBem("SkeletonView");
+    var bem = hooks_1.useBem('SkeletonView');
     return (React.createElement("span", { className: bem(props.className, bem.block({
             type: props.children ? null : props.type,
             animation: props.animation

package/layout/Skeleton/SkeletonView.scss

@@ -23,6 +23,7 @@
     }
 
     &_circle{
+      height: 100%;
       border-radius: 50%;
     }
   }
@@ -67,4 +68,4 @@
       }
     }
   }
-}
+}

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/list/List/ListView.js

@@ -23,6 +23,9 @@ var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function ListView(props) {
     var bem = hooks_1.useBem('ListView');
+    if (!props.list) {
+        return null;
+    }
     var renderPagination = function (pagination, paginationSize, layout) {
         if (!pagination && !paginationSize && !layout) {
             return null;

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({ 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); } }, 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.5",
+  "version": "2.1.2",
   "description": "",
   "main": "index.js",
   "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -19,11 +19,11 @@
   "dependencies": {
     "@ckeditor/ckeditor5-react": "^3.0.2",
     "@steroidsjs/ckeditor5": "^27.0.2-rc.2",
-    "@steroidsjs/core": "^2.1.0-beta.21",
+    "@steroidsjs/core": "^2.2.8",
     "bootstrap": "^4.5.2",
     "lodash": "^4.17.20",
     "lodash-es": "^4.17.20",
-    "rc-slider": "^9.3.1",
+    "rc-slider": "^9.7.4",
     "react": "^17.0.2",
     "react-collapse": "^5.0.1",
     "react-day-picker": "^7.4.8",

package/scss/variables/colors.scss

@@ -1,52 +1,52 @@
-$primary: #651FFF;
-$primary-dark: #410FAD;
-$primary-light: #F0EAFF;
+$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;
@@ -70,3 +70,5 @@ $border-error: #FF4557;
 $back-info: #ECFCFF;
 $back-warning: #FFFCEA;
 
+$shadow-default: 0px 0px 30px rgba(0, 0, 0, 0.1);
+