@steroidsjs/bootstrap 3.0.0-beta.35 → 3.0.0-beta.37

package/content/Accordion/AccordionItemView.js

@@ -29,6 +29,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var renderIcon_1 = __importDefault(require("../../utils/renderIcon"));
 function AccordionItemView(props) {
     var _a;
     var bem = (0, hooks_1.useBem)('AccordionItemView');
@@ -48,21 +49,13 @@ function AccordionItemView(props) {
         if (!props.icon) {
             return null;
         }
-        var openIconClassName = bem.element('open-icon');
-        var closeIconClassName = bem.element('close-icon');
         if (typeof props.icon === 'object') {
             var icons = props.icon;
             return (React.createElement(React.Fragment, null,
-                typeof icons.open === 'string'
-                    ? (React.createElement(Icon_1["default"], { name: icons.open, className: openIconClassName }))
-                    : (React.createElement("span", { className: openIconClassName }, icons.open)),
-                typeof icons.close === 'string'
-                    ? (React.createElement(Icon_1["default"], { name: icons.close, className: closeIconClassName }))
-                    : (React.createElement("span", { className: closeIconClassName }, icons.close))));
+                (0, renderIcon_1["default"])(icons.open, { className: bem.element('open-icon') }),
+                (0, renderIcon_1["default"])(icons.close, { className: bem.element('close-icon') })));
         }
-        return typeof props.icon === 'string'
-            ? React.createElement(Icon_1["default"], { name: props.icon })
-            : (React.createElement("span", { className: bem.element('custom-icon') }, props.icon));
+        return (0, renderIcon_1["default"])(props.icon, { className: bem.element('custom-icon') });
     }, [bem, props.icon]);
     var handleHeaderClick = React.useCallback(function () {
         if (props.disabled || !props.toggleAccordion || !props.toggleCollapse) {

package/content/Avatar/AvatarView.scss

@@ -69,8 +69,8 @@ $status-border-color: var(--status-border-color);
 
         &_middle {
             #{$root}__body {
-                height: 46px;
-                width: 46px;
+                height: 50px;
+                width: 50px;
                 line-height: 46px;
                 font-size: $font-size-sm;
             }
@@ -81,8 +81,8 @@ $status-border-color: var(--status-border-color);
 
         &_small {
             #{$root}__body {
-                height: 28px;
-                width: 28px;
+                height: 32px;
+                width: 32px;
                 line-height: 28px;
                 font-size: $font-size-xs;
             }

package/content/Card/CardView.js

@@ -22,11 +22,13 @@ var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var nav_1 = require("@steroidsjs/core/ui/nav");
 function CardView(props) {
     var bem = (0, hooks_1.useBem)('CardView');
-    var hasContent = props.title || props.buttons || props.links || props.description;
+    var hasContent = !!(props.title || props.buttons || props.links || props.description);
     return (react_1["default"].createElement("div", { className: bem(bem.block(), props.className), style: props.style },
-        props.header && (react_1["default"].createElement("div", { className: bem.element('header') },
+        props.header && (react_1["default"].createElement("div", { className: bem.element('header', {
+                withoutCover: !props.cover && hasContent
+            }) },
             react_1["default"].createElement("div", { className: bem.element('header-data') },
-                props.header.avatar && react_1["default"].createElement(Avatar_1["default"], __assign({}, props.header.avatar)),
+                props.header.avatar && (react_1["default"].createElement(Avatar_1["default"], __assign({}, props.header.avatar, { className: bem(props.header.avatar.className, bem.element('header-avatar')) }))),
                 react_1["default"].createElement("div", { className: bem.element('header-text-content') },
                     react_1["default"].createElement("h3", { className: bem.element('header-head') }, props.header.head),
                     react_1["default"].createElement("p", { className: bem.element('header-subhead') }, props.header.subhead))),

package/content/Card/CardView.scss

@@ -52,7 +52,12 @@ $card-dots-color: var(--card-dots-color);
         flex-flow: row nowrap;
         justify-content: space-between;
 
-        padding: 16px;
+        padding: 18px;
+        padding-bottom: 20px;
+
+        &_withoutCover { 
+            padding-bottom: 3px;
+        }
 
         &-data {
             display: flex;
@@ -61,6 +66,10 @@ $card-dots-color: var(--card-dots-color);
             column-gap: 8px;
         }
 
+        &-avatar { 
+            margin-right: 2px;
+        }
+
         &-text-content {
             display: flex;
             flex-flow: column nowrap;
@@ -92,6 +101,10 @@ $card-dots-color: var(--card-dots-color);
             rect {
                 fill: $card-dots-color;
             }
+
+            svg {
+                transform: translateX(5px);
+            }
         }
     }
 
@@ -110,8 +123,7 @@ $card-dots-color: var(--card-dots-color);
     }
 
     &__content {
-        padding: 8px 16px;
-        padding-bottom: 16px;
+        padding: 16px;
     }
 
     &__content-inner {
@@ -133,7 +145,7 @@ $card-dots-color: var(--card-dots-color);
     &__buttons {
         display: flex;
         flex-flow: row wrap;
-        $columnGap: 6px;
+        $columnGap: 8px;
         row-gap: 8px;
         column-gap: $columnGap;
 
@@ -142,7 +154,7 @@ $card-dots-color: var(--card-dots-color);
         }
 
         button:not(:only-of-type) { 
-            width: calc(50% - $columnGap);
+            width: calc(50% - $columnGap / 2);
         }
     }
 
@@ -150,6 +162,10 @@ $card-dots-color: var(--card-dots-color);
         display: flex;
         flex-flow: row wrap;
         column-gap: 16px;
+
+        a {
+            line-height: 18px;
+        }
     }
 
     &__footer {

package/form/Button/ButtonView.scss

@@ -14,6 +14,8 @@ $btn-letter-spacing: 0.1em;
     justify-content: center;
     align-items: center;
 
+    cursor: pointer;
+
     &_button {
         position: relative;
         border-radius: $radius-small;
@@ -105,6 +107,10 @@ $btn-letter-spacing: 0.1em;
             display: inline;
             color: $link-color;
         }
+
+        &:hover {
+            background-color: transparent;
+        }
     }
 
     &__label {
@@ -129,6 +135,10 @@ $btn-letter-spacing: 0.1em;
         }
     }
 
+    &_loading {
+      cursor: default;
+    }
+
     &__preloader {
         position: absolute;
         top: 50%;

package/form/CheckboxField/CheckboxFieldView.js

@@ -47,8 +47,8 @@ function CheckboxFieldView(props) {
             size: props.size,
             hasErrors: !!props.errors
         }), props.className), style: props.style, onClick: props.onChange },
-        React.createElement("input", __assign({ className: bem.element('input'), id: id }, props.inputProps, { disabled: props.disabled, required: props.required })),
-        React.createElement("label", { className: bem.element('label'), htmlFor: id },
+        React.createElement("input", __assign({ className: bem.element('input'), id: props.id || id }, props.inputProps, { checked: props.checked, disabled: props.disabled, required: props.required })),
+        React.createElement("label", { className: bem.element('label'), htmlFor: props.id || id },
             React.createElement("span", { className: bem.element('label-text', { required: props.required }) }, props.label))));
 }
 exports["default"] = CheckboxFieldView;

package/form/CheckboxField/CheckboxFieldView.scss

@@ -98,20 +98,18 @@
         //DISABLED
         &:disabled + #{$root}__label {
             cursor: not-allowed;
-            color: $gray;
-
             span {
-                color: currentColor;
+                color: $black-30;
             }
 
             &::before {
-                background: currentColor;
+                background: $background-disabled-color;
                 border: none;
             }
         }
 
         &:disabled:checked #{$root}__label::before {
-            background-color: $gray;
+            background-color: $background-disabled-color;
             border-color: none;
             background-image: url("data:image/svg+xml,%3Csvg width='11' height='9' viewBox='0 0 11 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.8584 1.48401L4.3584 7.48401L1.8584 4.75674' stroke='black' stroke-opacity='0.1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
         }

package/form/CheckboxListField/CheckboxListFieldView.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -41,11 +30,26 @@ 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 _a;
     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: "".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)))); })));
+    return (React.createElement("div", { className: bem(bem.block((_a = {},
+            _a["".concat(props.orientation)] = !!props.orientation,
+            _a))) }, props.items.map(function (checkbox, checkboxIndex) { return props.renderCheckbox({
+        inputProps: {
+            name: "".concat(prefix, "_").concat(checkbox.id),
+            checked: null,
+            type: 'checkbox',
+            disabled: false,
+            onChange: function () {
+                props.onItemSelect(checkbox.id);
+            }
+        },
+        disabled: props.disabled,
+        checked: props.selectedIds.includes(checkbox.id),
+        label: checkbox.label,
+        id: "".concat(prefix, "_").concat(checkbox.id),
+        key: checkboxIndex
+    }); })));
 }
 exports["default"] = CheckboxListFieldView;

package/form/CheckboxListField/CheckboxListFieldView.scss

@@ -1,47 +1,13 @@
 .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;
-    }
-  }
+    display: flex;
 
-  .custom-control-input {
-    &:checked ~ .custom-control-label {
-      &::before {
-        border-color: $primary;
-        background: $primary;
-      }
-      &:hover {
-        &::before {
-          background: $primary-dark;
-        }
-      }
-      &:active {
-        &::before {
-          background: $primary-light;
-        }
-      }
+    &_vertical {
+        flex-flow: column wrap;
+        row-gap: 8px;
     }
-    &:disabled ~ .custom-control-label {
-      color: $border-default;
 
-      &::before {
-        border: unset;
-        background-color: $back-disabled;
-      }
+    &_horizontal {
+        flex-flow: row nowrap;
+        column-gap: 8px;
     }
-  }
-
 }

package/form/DropDownField/DropDownFieldView.js

@@ -41,19 +41,7 @@ var React = __importStar(require("react"));
 var react_1 = require("react");
 var hooks_1 = require("@steroidsjs/core/hooks");
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
-var content_1 = require("@steroidsjs/core/ui/content");
-var DropDownItem_1 = __importDefault(require("./views/DropDownItem"));
-var getSelectedItemsLabel = function (selectedItems) { return (selectedItems
-    .map(function (selectedItem) { return selectedItem.label; })
-    .join(', ')); };
-var getSelectedItemsCount = function (selectedItems) {
-    var _a;
-    if (selectedItems.length <= 1) {
-        return (_a = selectedItems[0]) === null || _a === void 0 ? void 0 : _a.label;
-    }
-    return "".concat(__('Выбрано'), " (").concat(selectedItems.length, ")");
-};
-var toDropDownItem = function (props) { return function (item, itemIndex) { return (React.createElement(DropDownItem_1["default"], __assign({}, props, { key: itemIndex, item: item }))); }; };
+var utils_1 = require("./utils");
 function DropDownFieldView(props) {
     var _a;
     var bem = (0, hooks_1.useBem)('DropDownFieldView');
@@ -70,9 +58,6 @@ function DropDownFieldView(props) {
             ? (React.createElement("div", { className: bem.element('placeholder') }, props.placeholder))
             : null;
     }, [bem, props.placeholder, props.selectedIds]);
-    var renderItems = React.useCallback(function () { return props.groupAttribute
-        ? (React.createElement(content_1.Accordion, null, props.items.map(toDropDownItem(props))))
-        : (React.createElement(React.Fragment, null, props.items.map(toDropDownItem(props)))); }, [props]);
     return (React.createElement("div", { ref: props.forwardedRef, className: bem(bem.block((_a = {
                 size: props.size
             },
@@ -86,8 +71,8 @@ function DropDownFieldView(props) {
             }), onClick: props.onOpen, tabIndex: -1, role: 'button' },
             renderPlaceholder(),
             React.createElement("span", { className: bem.element('selected-items') }, props.showEllipses
-                ? getSelectedItemsLabel(props.selectedItems)
-                : getSelectedItemsCount(props.selectedItems))),
+                ? (0, utils_1.getSelectedItemsLabel)(props.selectedItems)
+                : (0, utils_1.getSelectedItemsCount)(props.selectedItems))),
         props.showReset && props.selectedIds.length > 0 && (React.createElement(Icon_1["default"], { name: "field-close", className: bem.element('icon-close'), tabIndex: -1, onClick: props.onReset, "aria-label": __('Сбросить') })),
         React.createElement(Icon_1["default"], { name: 'accordion-chevron', className: bem.element('icon-chevron'), tabIndex: -1, onClick: props.onOpen }),
         props.isOpened && (React.createElement("div", { className: bem.element('drop-down') },
@@ -96,6 +81,6 @@ function DropDownFieldView(props) {
                 }) },
                 React.createElement(Icon_1["default"], { name: 'search', className: bem.element('search-icon') }),
                 React.createElement("input", __assign({}, props.searchInputProps, { ref: inputRef, onChange: function (e) { return props.searchInputProps.onChange(e.target.value); }, className: bem(bem.element('search-input'), props.searchInputProps.className) })))),
-            React.createElement("div", { className: bem.element('drop-down-list') }, renderItems())))));
+            React.createElement("div", { className: bem.element('drop-down-list') }, props.items.map(function (item) { return props.renderItem(item); }))))));
 }
 exports["default"] = DropDownFieldView;

package/form/DropDownField/DropDownFieldView.scss

@@ -12,6 +12,9 @@
     --search-color: #626262;
     --search-background-color: #f5f8fa;
     --search-hover-background-color: #eef1f2;
+
+    --drop-down-item-hover-background-color: #f5f8fa;
+    --drop-down-item-select-background-color: #eef1f2;
 }
 
 html[data-theme="dark"] {
@@ -28,6 +31,9 @@ html[data-theme="dark"] {
     --search-color: #adacac;
     --search-background-color: #4e4f57;
     --search-hover-background-color: #5b5c6b;
+
+    --drop-down-item-select-background-color: #5b5c6b;
+    --drop-down-item-hover-background-color: #4e4f57;
 }
 
 $basic-color: var(--basic-color);
@@ -44,6 +50,9 @@ $search-color: var(--search-color);
 $search-background-color: var(--search-background-color);
 $search-hover-background-color: var(--search-hover-background-color);
 
+$drop-down-item-select-background-color: var(--drop-down-item-select-background-color);
+$drop-down-item-hover-background-color: var(--drop-down-item-hover-background-color);
+
 $drop-down-color-themes: () !default;
 $drop-down-color-themes: map-merge(
     (
@@ -183,7 +192,7 @@ $drop-down-color-themes: map-merge(
     $root: &;
 
     position: relative;
-    width: 240px;
+    min-width: 240px;
     outline: none;
     cursor: pointer;
 
@@ -207,10 +216,8 @@ $drop-down-color-themes: map-merge(
             "lg": (
                 "border-radius": $radius-large,
                 "height": $input-height-lg,
-                "beforeTransform": translateX(-1.6%) translateY(-6.5%),
+                "beforeTransform": translateX(-4px) translateY(-4px),
                 "beforeRadius": 16px,
-                "afterTransform": translateX(-0.75%) translateY(-1.75%),
-                "afterRadius": 14px,
                 "selectedItemsPadding": 16px,
                 "font-size": $font-size-lg,
                 "line-height": 24px,
@@ -218,10 +225,8 @@ $drop-down-color-themes: map-merge(
             "md": (
                 "border-radius": $radius-large,
                 "height": $input-height-md,
-                "beforeTransform": translateX(-1.6%) translateY(-7.5%),
+                "beforeTransform": translateX(-4px) translateY(-4px),
                 "beforeRadius": 16px,
-                "afterTransform": translateX(-0.75%) translateY(-2%),
-                "afterRadius": 14px,
                 "selectedItemsPadding": 12px,
                 "font-size": $font-size-base,
                 "line-height": 22px,
@@ -229,10 +234,8 @@ $drop-down-color-themes: map-merge(
             "sm": (
                 "border-radius": $radius-small,
                 "height": $input-height-sm,
-                "beforeTransform": translateX(-1.6%) translateY(-9.5%),
+                "beforeTransform": translateX(-4px) translateY(-4px),
                 "beforeRadius": 12px,
-                "afterTransform": translateX(-0.6%) translateY(-2.5%),
-                "afterRadius": 10px,
                 "selectedItemsPadding": 8px,
                 "font-size": $font-size-sm,
                 "line-height": 18px,
@@ -252,11 +255,6 @@ $drop-down-color-themes: map-merge(
                     border-radius: map-get($sizeMap, beforeRadius);
                 }
 
-                &::after {
-                    transform: map-get($sizeMap, afterTransform);
-                    border-radius: map-get($sizeMap, afterRadius);
-                }
-
                 #{$root}__selected-items {
                     padding-top: map-get($sizeMap, selectedItemsPadding);
                     padding-bottom: map-get($sizeMap, selectedItemsPadding);
@@ -432,4 +430,4 @@ $drop-down-color-themes: map-merge(
         right: 36px;
         transform: translateY(-50%);
     }
-}
+}

package/form/DropDownField/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const getSelectedItemsLabel: (selectedItems: Record<string, any>[]) => string;
+export declare const getSelectedItemsCount: (selectedItems: Record<string, any>) => any;

package/form/DropDownField/utils.js

@@ -0,0 +1,15 @@
+"use strict";
+exports.__esModule = true;
+exports.getSelectedItemsCount = exports.getSelectedItemsLabel = void 0;
+var getSelectedItemsLabel = function (selectedItems) { return (selectedItems
+    .map(function (selectedItem) { return selectedItem.label; })
+    .join(', ')); };
+exports.getSelectedItemsLabel = getSelectedItemsLabel;
+var getSelectedItemsCount = function (selectedItems) {
+    var _a;
+    if (selectedItems.length <= 1) {
+        return (_a = selectedItems[0]) === null || _a === void 0 ? void 0 : _a.label;
+    }
+    return "".concat(__('Выбрано'), " (").concat(selectedItems.length, ")");
+};
+exports.getSelectedItemsCount = getSelectedItemsCount;

package/form/DropDownFieldItem/DropDownFieldItemView.d.ts

@@ -0,0 +1,2 @@
+import { IDropDownFieldItemViewProps } from '@steroidsjs/core/ui/form/DropDownField/DropDownField';
+export default function DropDownItemView(props: IDropDownFieldItemViewProps): JSX.Element;

package/form/DropDownFieldItem/DropDownFieldItemView.js

@@ -0,0 +1,78 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var DropDownField_1 = require("@steroidsjs/core/ui/form/DropDownField/DropDownField");
+var renderIcon_1 = __importDefault(require("../../utils/renderIcon"));
+var AccordionItemView_1 = __importDefault(require("../../content/Accordion/AccordionItemView"));
+var CheckboxFieldView_1 = __importDefault(require("../CheckboxField/CheckboxFieldView"));
+var RadioFieldView_1 = __importDefault(require("../RadioField/RadioFieldView"));
+function DropDownItemView(props) {
+    var _a;
+    var bem = (0, useBem_1["default"])('DropDownItemView');
+    var commonProps = {
+        className: bem.element('option', {
+            hover: props.hoveredId === props.item[props.primaryKey],
+            select: props.selectedIds.includes(props.item[props.primaryKey]),
+            size: props.size
+        }),
+        onFocus: function () { return props.onItemHover(props.item[props.primaryKey]); },
+        onMouseOver: function () { return props.onItemHover(props.item[props.primaryKey]); },
+        onClick: function (e) {
+            e.preventDefault();
+            props.onItemSelect(props.item[props.primaryKey]);
+        }
+    };
+    switch (props.type) {
+        case DropDownField_1.GROUP_CONTENT_TYPE:
+            return (react_1["default"].createElement(AccordionItemView_1["default"], { isShowMore: props.isShowMore, childIndex: props.childIndex, toggleCollapse: props.toggleCollapse, toggleAccordion: function () { }, showIcon: true, title: props.item.label, position: "middle", key: props.item[props.primaryKey], className: bem.element('group', {
+                    size: props.size
+                }) }, (_a = props.item[props.groupAttribute]) === null || _a === void 0 ? void 0 : _a.map(function (subItem, itemIndex) { return (react_1["default"].createElement(DropDownItemView, __assign({}, props, { type: subItem.type ? subItem.type : props.itemsContent.type, key: itemIndex, item: subItem }))); })));
+        case DropDownField_1.ICON_CONTENT_TYPE:
+            return (react_1["default"].createElement("div", __assign({}, commonProps, { key: props.item[props.primaryKey] }),
+                (0, renderIcon_1["default"])(props.item.contentSrc, { className: bem.element('icon') }),
+                react_1["default"].createElement("span", null, props.item.label)));
+        case DropDownField_1.CHECKBOX_CONTENT_TYPE:
+            return (react_1["default"].createElement("div", __assign({}, commonProps, { key: props.item[props.primaryKey] }),
+                react_1["default"].createElement(CheckboxFieldView_1["default"], { label: props.item.label, className: bem.element('checkbox'), size: props.size, inputProps: {
+                        disabled: false,
+                        name: props.item.label,
+                        checked: false,
+                        onChange: function () { },
+                        type: 'checkbox'
+                    }, checked: props.selectedIds.includes(props.item[props.primaryKey]) })));
+        case DropDownField_1.RADIO_CONTENT_TYPE:
+            return (react_1["default"].createElement("div", __assign({}, commonProps, { key: props.item[props.primaryKey] }),
+                react_1["default"].createElement(RadioFieldView_1["default"], { label: props.item.label, className: bem.element('radio', {
+                        size: props.size
+                    }), size: props.size, inputProps: {
+                        disabled: false,
+                        name: props.item.label,
+                        checked: null,
+                        onChange: function () { },
+                        type: 'radio'
+                    }, checked: props.selectedIds.includes(props.item[props.primaryKey]) })));
+        case DropDownField_1.IMG_CONTENT_TYPE:
+            return (react_1["default"].createElement("div", __assign({}, commonProps, { key: props.item[props.primaryKey] }),
+                react_1["default"].createElement("span", { className: bem.element('img') },
+                    react_1["default"].createElement("img", { src: props.item.contentSrc, alt: "custom source for item" })),
+                react_1["default"].createElement("span", null, props.item.label)));
+        default:
+            return (react_1["default"].createElement("div", __assign({}, commonProps, { key: props.item[props.primaryKey] }), props.item.label));
+    }
+}
+exports["default"] = DropDownItemView;

package/form/{DropDownField/views/DropDownItem/DropDownItemView.scss → DropDownFieldItem/DropDownFieldItemView.scss}

@@ -1,4 +1,3 @@
-@import "style/variables";
 
 :root {
     --drop-down-item-hover-background-color: #f5f8fa;
@@ -108,26 +107,26 @@ $drop-down-item-hover-background-color: var(--drop-down-item-hover-background-co
             right: 0;
         }
 
-        .RadioListFieldView__ellipse { 
+        .RadioFieldView__label .RadioFieldView__ellipse { 
             left: auto;
         }
 
         &_size {
             &_lg {
                 span {
-                    right: 6px;
+                    right: 13.5px;
                 }
             }
 
             &_md {
                 span {
-                    right: 5px;
+                    right: 12.5px;
                 }
             }
 
             &_sm {
                 span {
-                    right: 4px;
+                    right: 11.5px;
                 }
             }
         }

package/form/InputField/InputFieldView.js

@@ -40,14 +40,9 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
+var renderIcon_1 = __importDefault(require("../../utils/renderIcon"));
 function InputFieldView(props) {
     var bem = (0, hooks_1.useBem)('InputFieldView');
-    var renderLeadIcon = React.useCallback(function () {
-        var className = bem.element('lead-icon');
-        return typeof props.leadIcon === 'string'
-            ? (React.createElement(Icon_1["default"], { name: props.leadIcon, className: className, tabIndex: -1 }))
-            : React.createElement("span", { className: className }, props.leadIcon);
-    }, [bem, props.leadIcon]);
     return (React.createElement("div", { className: bem(bem.block({
             disabled: props.inputProps.disabled,
             size: props.size,
@@ -65,7 +60,10 @@ function InputFieldView(props) {
         props.addonBefore && (React.createElement("span", { className: bem.element('addon-before') }, props.addonBefore)),
         props.textBefore && (React.createElement("span", { className: bem.element('text-before') }, props.textBefore)),
         React.createElement("div", { className: bem.element('input-wrapper') },
-            props.leadIcon && renderLeadIcon(),
+            props.leadIcon && (0, renderIcon_1["default"])(props.leadIcon, {
+                className: bem.element('lead-icon'),
+                tabIndex: -1
+            }),
             props.maskProps
                 ? (React.createElement("input", __assign({ onBlur: props.onBlur, onFocus: props.onFocus, onMouseDown: props.onMouseDown, className: bem(bem.element('input', {
                         size: props.size

package/form/RadioField/RadioFieldView.d.ts

@@ -0,0 +1,3 @@
+import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
+import { IRadioFieldViewProps } from '@steroidsjs/core/ui/form/RadioField/RadioField';
+export default function RadioFieldView(props: IRadioFieldViewProps & IBemHocOutput): JSX.Element;