@steroidsjs/bootstrap 2.1.21 → 3.0.0-beta.2

package/content/Alert/AlertView.js

@@ -8,7 +8,7 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
 function Alert(props) {
     var _a, _b;
-    var bem = hooks_1.useBem('AlertView');
+    var bem = (0, hooks_1.useBem)('AlertView');
     return (props.isExist && (react_1["default"].createElement("div", { className: bem(bem.block((_a = {},
             _a[props.type] = !!props.type,
             _a['has-description'] = !!props.description,

package/content/Avatar/AvatarGroupView.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -22,7 +26,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function Avatar(props) {
-    var bem = hooks_1.useBem('AvatarGroupView');
+    var bem = (0, hooks_1.useBem)('AvatarGroupView');
     return (React.createElement("div", { className: bem.block() }, props.children));
 }
 exports["default"] = Avatar;

package/content/Avatar/AvatarView.d.ts

@@ -1,3 +1,7 @@
 /// <reference types="react" />
 import { IAvatarViewProps } from '@steroidsjs/core/ui/content/Avatar/Avatar';
-export default function Avatar(props: IAvatarViewProps): JSX.Element;
+interface IAvatarProps extends IAvatarViewProps {
+    formattedTitle: any;
+}
+export default function Avatar(props: IAvatarProps): JSX.Element;
+export {};

package/content/Avatar/AvatarView.js

@@ -17,12 +17,12 @@ exports.__esModule = true;
 var react_1 = __importDefault(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function Avatar(props) {
-    var bem = hooks_1.useBem('AvatarView');
+    var bem = (0, hooks_1.useBem)('AvatarView');
     var customSize = typeof props.size === 'number'
         ? {
             width: props.size,
             height: props.size,
-            lineHeight: props.size + "px",
+            lineHeight: "".concat(props.size, "px"),
             fontSize: props.size / 2
         }
         : {};
@@ -34,7 +34,8 @@ function Avatar(props) {
             'has-status': props.status
         }), props.className) },
         react_1["default"].createElement("span", { className: bem.element('body'), style: __assign(__assign({}, props.style), customSize) },
-            (props.src && renderImage()) || (react_1["default"].createElement("span", null, props.formattedTitle)),
-            props.children)));
+            react_1["default"].createElement(react_1["default"].Fragment, null,
+                (props.src && renderImage()) || (react_1["default"].createElement("span", null, props.formattedTitle)),
+                props.children))));
 }
 exports["default"] = Avatar;

package/content/Calendar/CalendarView.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -40,10 +44,10 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 var react_day_picker_1 = __importStar(require("react-day-picker"));
 var CaptionElement_1 = __importDefault(require("./CaptionElement"));
 function CalendarView(props) {
-    var bem = hooks_1.useBem('CalendarView');
+    var bem = (0, hooks_1.useBem)('CalendarView');
     var month = props.month, toYear = props.toYear, fromYear = props.fromYear, showFooter = props.showFooter, onDaySelect = props.onDaySelect, selectedDates = props.selectedDates, onMonthSelect = props.onMonthSelect, numberOfMonths = props.numberOfMonths, toggleCaptionPanel = props.toggleCaptionPanel, isCaptionPanelVisible = props.isCaptionPanelVisible;
     var isRange = !!selectedDates[1];
-    var _a = react_1.useMemo(function () {
+    var _a = (0, react_1.useMemo)(function () {
         var from = selectedDates[0];
         var to = selectedDates[1];
         var inRange = function (day) { return react_day_picker_1.DateUtils.isDayAfter(day, from) && react_day_picker_1.DateUtils.isDayBefore(day, to); };
@@ -61,7 +65,7 @@ function CalendarView(props) {
                 : undefined
         };
     }, [isRange, selectedDates]), selectedDays = _a.selectedDays, modifiers = _a.modifiers;
-    return (React.createElement(react_day_picker_1["default"], __assign({}, props, { className: bem(bem.block({ ranged: isRange }), props.className), captionElement: react_1.useCallback(function (_a) {
+    return (React.createElement(react_day_picker_1["default"], __assign({}, props, { className: bem(bem.block({ ranged: isRange }), props.className), captionElement: (0, react_1.useCallback)(function (_a) {
             var classNames = _a.classNames, date = _a.date, localeUtils = _a.localeUtils, locale = _a.locale;
             return (React.createElement(CaptionElement_1["default"], { date: date, locale: locale, toYear: toYear, fromYear: fromYear, classNames: classNames, onChange: onMonthSelect, localeUtils: localeUtils, showCalendarFooter: showFooter, toggleCaptionPanel: toggleCaptionPanel, isCaptionPanelVisible: isCaptionPanelVisible }));
         }, [fromYear, isCaptionPanelVisible, onMonthSelect, showFooter, toYear, toggleCaptionPanel]), renderDay: function (day) {

package/content/Calendar/CaptionElement.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -28,7 +32,7 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
 var upperFirst_1 = __importDefault(require("lodash-es/upperFirst"));
 function CaptionElement(props) {
-    var bem = hooks_1.useBem('CaptionElement');
+    var bem = (0, hooks_1.useBem)('CaptionElement');
     var localeUtils = props.localeUtils, locale = props.locale, fromYear = props.fromYear, toYear = props.toYear, date = props.date, isCaptionPanelVisible = props.isCaptionPanelVisible, toggleCaptionPanel = props.toggleCaptionPanel;
     var currentMonth = date.getMonth();
     var currentYear = date.getFullYear();
@@ -42,11 +46,11 @@ function CaptionElement(props) {
             props.onChange(new Date(currentYear, newMonth));
         }
     };
-    var months = react_1.useMemo(function () { return (localeUtils.getMonths(locale).map(function (item, index) { return ({
+    var months = (0, react_1.useMemo)(function () { return (localeUtils.getMonths(locale).map(function (item, index) { return ({
         id: index,
-        label: upperFirst_1["default"](item)
+        label: (0, upperFirst_1["default"])(item)
     }); })); }, [localeUtils, locale]);
-    var years = react_1.useMemo(function () {
+    var years = (0, react_1.useMemo)(function () {
         var result = [];
         for (var i = fromYear.getFullYear(); i <= toYear.getFullYear(); i += 1) {
             result.push(i);

package/content/Card/CardView.js

@@ -6,7 +6,7 @@ exports.__esModule = true;
 var react_1 = __importDefault(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function CardView(props) {
-    var bem = hooks_1.useBem('CardView');
+    var bem = (0, hooks_1.useBem)('CardView');
     return (react_1["default"].createElement("div", { className: bem(bem.block({
             orientation: props.orientation,
             shape: props.shape,
@@ -19,8 +19,9 @@ function CardView(props) {
         react_1["default"].createElement("div", { className: bem.element('content') },
             props.title && (react_1["default"].createElement("div", { className: bem.element('title') }, props.title)),
             react_1["default"].createElement("div", { className: bem.element('content-inner') },
-                props.description && (react_1["default"].createElement("div", { className: bem.element('description') }, props.description)),
-                props.children)),
+                react_1["default"].createElement(react_1["default"].Fragment, null,
+                    props.description && (react_1["default"].createElement("div", { className: bem.element('description') }, props.description)),
+                    props.children))),
         props.footer && (react_1["default"].createElement("div", { className: bem.element('footer') }, props.footer))));
 }
 exports["default"] = CardView;

package/content/Collapse/CollapseItemView.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -26,7 +30,7 @@ var React = __importStar(require("react"));
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function CollapseItemView(props) {
-    var bem = hooks_1.useBem('CollapseItemView');
+    var bem = (0, hooks_1.useBem)('CollapseItemView');
     React.useEffect(function () {
         if (props.isAccordion) {
             props.toggleAccordion(props.activeKey - 1);

package/content/Collapse/CollapseView.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -22,7 +26,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function CollapseView(props) {
-    var bem = hooks_1.useBem('CollapseView');
+    var bem = (0, hooks_1.useBem)('CollapseView');
     return (React.createElement("div", { className: bem(bem.block(), props.className) }, props.children));
 }
 exports["default"] = CollapseView;

package/content/Detail/DetailView.js

@@ -8,7 +8,7 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 var Detail_1 = require("@steroidsjs/core/ui/content/Detail/Detail");
 var Controls_1 = __importDefault(require("@steroidsjs/core/ui/nav/Controls"));
 function DetailView(props) {
-    var bem = hooks_1.useBem('DetailView');
+    var bem = (0, hooks_1.useBem)('DetailView');
     return (react_1["default"].createElement("div", { className: bem(bem.block(), props.className), ref: props.resizedNodeRef },
         (props.title || props.controls) && (react_1["default"].createElement("div", { className: bem.element('header') },
             props.title && (react_1["default"].createElement("div", { className: bem.element('title') }, props.title)),

package/content/DropDown/DropDownView.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -30,22 +34,22 @@ 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 () {
+    var bem = (0, hooks_1.useBem)('DropDownView');
+    var ui = (0, hooks_1.useComponents)().ui;
+    (0, react_use_1.useMount)(function () {
         props.calculatePosition(props.forwardedRef.current.getBoundingClientRect());
     });
-    var contentProps = react_1.useMemo(function () { return ({
+    var contentProps = (0, react_1.useMemo)(function () { return ({
         onClose: props.onClose
     }); }, [props.onClose]);
     var content = props.content();
-    if (isFunction_1["default"](content)) {
+    if ((0, 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["position-".concat(props.position)] = !!props.position,
             _a)), props.className), style: props.style }, content));
 }
 exports["default"] = DropDownView;

package/crud/Crud/CrudView.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -26,7 +30,7 @@ var React = __importStar(require("react"));
 var Controls_1 = __importDefault(require("@steroidsjs/core/ui/nav/Controls"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function CrudView(props) {
-    var bem = hooks_1.useBem('CrudView');
+    var bem = (0, hooks_1.useBem)('CrudView');
     return (React.createElement("div", { className: bem(bem.block(), props.className) },
         props.title && (React.createElement("h1", { className: 'mb-3' }, props.title)),
         props.controls && (React.createElement(Controls_1["default"], { items: props.controls, className: bem.element('controls') })),

package/form/AutoCompleteField/AutoCompleteFieldView.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -34,7 +38,7 @@ var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 require("./AutoCompleteFieldView.scss");
 function AutoCompleteFieldView(props) {
-    var bem = hooks_1.useBem('AutoCompleteFieldView');
+    var bem = (0, hooks_1.useBem)('AutoCompleteFieldView');
     return (React.createElement("div", { ref: props.forwardedRef, className: bem.block({ size: props.size }) },
         React.createElement("input", __assign({}, props.inputProps, { className: bem(bem.block({
                 size: props.size

package/form/Button/ButtonView.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -28,9 +32,9 @@ var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function ButtonView(props) {
     var _a;
-    var bem = hooks_1.useBem('ButtonView');
+    var bem = (0, hooks_1.useBem)('ButtonView');
     var renderLabel = function () {
-        var title = props.label && isString_1["default"](props.label)
+        var title = props.label && (0, isString_1["default"])(props.label)
             ? props.label
             : (props.hint || null);
         return (React.createElement(React.Fragment, null,
@@ -44,13 +48,13 @@ function ButtonView(props) {
         if (!props.badge.enable) {
             return null;
         }
-        return (React.createElement("span", { className: bem('badge', props.badge.color && "badge-" + props.badge.color, bem.element('badge'), props.badge.className) }, props.badge.value));
+        return (React.createElement("span", { className: bem('badge', props.badge.color && "badge-".concat(props.badge.color), bem.element('badge'), props.badge.className) }, props.badge.value));
     };
     var className = bem(bem.block((_a = {
             button: !props.link
         },
-        _a["color_" + props.color] = props.color && !props.outline,
-        _a["outline_" + props.color] = props.outline,
+        _a["color_".concat(props.color)] = props.color && !props.outline,
+        _a["outline_".concat(props.color)] = props.outline,
         _a.outline = props.outline,
         _a.size = props.size,
         _a.disabled = props.disabled,

package/form/CheckboxField/CheckboxFieldView.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -37,8 +41,8 @@ var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var useUniqueId_1 = __importDefault(require("@steroidsjs/core/hooks/useUniqueId"));
 function CheckboxFieldView(props) {
-    var bem = hooks_1.useBem('CheckboxFieldView');
-    var id = useUniqueId_1["default"]('checkbox');
+    var bem = (0, hooks_1.useBem)('CheckboxFieldView');
+    var id = (0, useUniqueId_1["default"])('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 },

package/form/CheckboxListField/CheckboxListFieldView.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -37,11 +41,11 @@ var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var useUniqueId_1 = __importDefault(require("@steroidsjs/core/hooks/useUniqueId"));
 function CheckboxListFieldView(props) {
-    var bem = hooks_1.useBem('CheckboxListFieldView');
-    var prefix = useUniqueId_1["default"]('checkbox');
+    var bem = (0, hooks_1.useBem)('CheckboxListFieldView');
+    var prefix = (0, useUniqueId_1["default"])('checkbox');
     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("input", __assign({}, props.inputProps, { disabled: props.disabled, required: props.required, id: "".concat(prefix, "_").concat(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: "".concat(prefix, "_").concat(item.id) },
             React.createElement("span", { className: bem.element('label-text', { required: props.required }) }, item.label)))); })));
 }
 exports["default"] = CheckboxListFieldView;

package/form/DateField/DateFieldView.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -40,8 +44,8 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 var DropDown_1 = __importDefault(require("@steroidsjs/core/ui/content/DropDown"));
 var Calendar_1 = __importDefault(require("@steroidsjs/core/ui/content/Calendar"));
 function DateFieldView(props) {
-    var bem = hooks_1.useBem('DateFieldView');
-    var renderCalendar = react_1.useCallback(function () { return (React.createElement(Calendar_1["default"], __assign({}, props.calendarProps))); }, [props.calendarProps]);
+    var bem = (0, hooks_1.useBem)('DateFieldView');
+    var renderCalendar = (0, react_1.useCallback)(function () { return (React.createElement(Calendar_1["default"], __assign({}, props.calendarProps))); }, [props.calendarProps]);
     return (React.createElement(DropDown_1["default"], { content: renderCalendar, position: 'bottomLeft', visible: props.isOpened, onClose: props.onClose },
         React.createElement("div", { className: bem(bem.block({
                 size: props.size,

package/form/DateRangeField/DateRangeFieldView.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -41,8 +45,8 @@ var DropDown_1 = __importDefault(require("@steroidsjs/core/ui/content/DropDown")
 var Calendar_1 = __importDefault(require("@steroidsjs/core/ui/content/Calendar"));
 var isString_1 = __importDefault(require("lodash-es/isString"));
 function DateRangeFieldView(props) {
-    var bem = hooks_1.useBem('DateRangeFieldView');
-    var renderCalendar = react_1.useCallback(function () { return (React.createElement(Calendar_1["default"], __assign({}, props.calendarProps))); }, [props.calendarProps]);
+    var bem = (0, hooks_1.useBem)('DateRangeFieldView');
+    var renderCalendar = (0, react_1.useCallback)(function () { return (React.createElement(Calendar_1["default"], __assign({}, props.calendarProps))); }, [props.calendarProps]);
     return (React.createElement(DropDown_1["default"], { content: renderCalendar, position: 'bottomLeft', visible: props.isOpened, onClose: props.onClose },
         React.createElement("div", { className: bem(bem.block({
                 disabled: props.disabled,
@@ -57,7 +61,7 @@ function DateRangeFieldView(props) {
                         size: props.size
                     }), !!props.errorsTo && 'is-invalid'), onChange: function (e) { return props.inputPropsTo.onChange(e.target.value); } })),
                 React.createElement("div", { className: bem.element('icon-container') },
-                    props.icon && (React.createElement(Icon_1["default"], { className: bem.element('icon'), name: isString_1["default"](props.icon) ? props.icon : 'calendar-alt' })),
+                    props.icon && (React.createElement(Icon_1["default"], { className: bem.element('icon'), name: (0, isString_1["default"])(props.icon) ? props.icon : 'calendar-alt' })),
                     props.showRemove && (props.inputPropsFrom.value || props.inputPropsTo.value) && (React.createElement(Icon_1["default"], { className: bem.element('icon', 'close'), onClick: function (e) {
                             e.preventDefault();
                             props.onClear();

package/form/DateTimeField/DateTimeFieldView.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -41,8 +45,8 @@ var Calendar_1 = __importDefault(require("@steroidsjs/core/ui/content/Calendar")
 var DropDown_1 = __importDefault(require("@steroidsjs/core/ui/content/DropDown"));
 var TimePanelView_1 = __importDefault(require("../TimeField/TimePanelView"));
 function DateTimeFieldView(props) {
-    var bem = hooks_1.useBem('DateTimeFieldView');
-    var renderContent = react_1.useCallback(function () { return (React.createElement("div", { className: bem.element('panel-container') },
+    var bem = (0, hooks_1.useBem)('DateTimeFieldView');
+    var renderContent = (0, react_1.useCallback)(function () { return (React.createElement("div", { className: bem.element('panel-container') },
         React.createElement(Calendar_1["default"], __assign({}, props.calendarProps, { className: bem.element('calendar') })),
         React.createElement(TimePanelView_1["default"], __assign({}, props.timePanelViewProps, { className: bem.element('time-panel') })))); }, [bem, props.calendarProps, props.timePanelViewProps]);
     return (React.createElement(DropDown_1["default"], { content: renderContent, position: 'bottomLeft', visible: props.isOpened, onClose: props.onClose },

package/form/DateTimeRangeField/DateTimeRangeFieldView.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -42,8 +46,8 @@ var Calendar_1 = __importDefault(require("@steroidsjs/core/ui/content/Calendar")
 var isString_1 = __importDefault(require("lodash-es/isString"));
 var TimePanelView_1 = __importDefault(require("../TimeField/TimePanelView"));
 function DateTimeRangeFieldView(props) {
-    var bem = hooks_1.useBem('DateTimeRangeFieldView');
-    var renderCalendar = react_1.useCallback(function () { return (React.createElement("div", { className: bem.element('panel-container') },
+    var bem = (0, hooks_1.useBem)('DateTimeRangeFieldView');
+    var renderCalendar = (0, react_1.useCallback)(function () { return (React.createElement("div", { className: bem.element('panel-container') },
         React.createElement(Calendar_1["default"], __assign({}, props.calendarProps, { className: bem.element('calendar') })),
         React.createElement(TimePanelView_1["default"], __assign({}, props.timePanelViewProps, { className: bem.element('time-panel') })))); }, [bem, props.calendarProps, props.timePanelViewProps]);
     return (React.createElement(DropDown_1["default"], { content: renderCalendar, position: 'bottomLeft', visible: props.isOpened, onClose: props.onClose },
@@ -60,7 +64,7 @@ function DateTimeRangeFieldView(props) {
                         size: props.size
                     }), !!props.errorsTo && 'is-invalid'), onChange: function (e) { return props.inputPropsTo.onChange(e.target.value); } })),
                 React.createElement("div", { className: bem.element('icon-container') },
-                    props.icon && (React.createElement(Icon_1["default"], { className: bem.element('icon'), name: isString_1["default"](props.icon) ? props.icon : 'calendar-alt' })),
+                    props.icon && (React.createElement(Icon_1["default"], { className: bem.element('icon'), name: (0, isString_1["default"])(props.icon) ? props.icon : 'calendar-alt' })),
                     props.showRemove && (props.inputPropsFrom.value || props.inputPropsTo.value) && (React.createElement(Icon_1["default"], { className: bem.element('icon', 'close'), onClick: function (e) {
                             e.preventDefault();
                             props.onClear();

package/form/DropDownField/DropDownFieldView.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -29,19 +33,23 @@ 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;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var react_1 = require("react");
 var hooks_1 = require("@steroidsjs/core/hooks");
 function DropDownFieldView(props) {
-    var inputRef = react_1.useRef(null);
+    var inputRef = (0, react_1.useRef)(null);
     // Auto focus on search
-    react_1.useEffect(function () {
+    (0, react_1.useEffect)(function () {
         if (props.isSearchAutoFocus && props.isAutoComplete && props.isOpened && (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current)) {
             inputRef.current.focus();
         }
@@ -51,7 +59,7 @@ function DropDownFieldView(props) {
         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); }));
+            ], item[props.groupAttribute].map(function (subItem) { return renderItem(subItem, level + 1); }), true);
         }
         return (React.createElement("div", { key: String(item[props.primaryKey]), className: bem.element('drop-down-item', {
                 hover: props.hoveredId === item[props.primaryKey],
@@ -62,7 +70,7 @@ function DropDownFieldView(props) {
                 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');
+    var bem = (0, 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', {
                 reset: props.showReset,
@@ -71,18 +79,19 @@ function DropDownFieldView(props) {
                 disabled: props.disabled
             }), onClick: props.onOpen, onKeyPress: props.onOpen, tabIndex: 0, role: 'button' }, props.selectedItems.map(function (item) { return (props.multiple
             ? (React.createElement("span", { key: String(item.id), className: bem.element('selected-item-multiple') },
-                item.label,
-                React.createElement("span", { className: bem.element('selected-item-multiple-remove'), onClick: function (e) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        props.onItemRemove(item[props.primaryKey]);
-                    }, onKeyPress: function (e) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        props.onItemRemove(item[props.primaryKey]);
-                    }, tabIndex: 0, role: 'button' },
-                    React.createElement("svg", { viewBox: "64 64 896 896", className: "", width: "1em", height: "1em" },
-                        React.createElement("path", { d: "M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3\n                                         5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4\n                                         512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3\n                                          3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" })))))
+                React.createElement(React.Fragment, null,
+                    item.label,
+                    React.createElement("span", { className: bem.element('selected-item-multiple-remove'), onClick: function (e) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            props.onItemRemove(item[props.primaryKey]);
+                        }, onKeyPress: function (e) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            props.onItemRemove(item[props.primaryKey]);
+                        }, tabIndex: 0, role: 'button' },
+                        React.createElement("svg", { viewBox: "64 64 896 896", className: "", width: "1em", height: "1em" },
+                            React.createElement("path", { d: "M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3\n                                         5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4\n                                         512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3\n                                          3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" }))))))
             : (React.createElement("span", { key: item.id, className: bem.element('selected-item') }, item.label))); })),
         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') },