@steroidsjs/bootstrap 2.1.0-beta.7 → 2.1.1

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/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/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/package.json

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