@steroidsjs/bootstrap 3.0.32 → 3.0.35

package/form/DropDownField/DropDownFieldView.js

@@ -38,55 +38,73 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 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 utils_1 = require("./utils");
 function DropDownFieldView(props) {
     var _a;
     var bem = (0, hooks_1.useBem)('DropDownFieldView');
-    // Auto focus on search
-    (0, react_1.useEffect)(function () {
-        var _a;
-        if (props.isSearchAutoFocus && props.isAutoComplete && props.isOpened && ((_a = props.forwardedInputRef) === null || _a === void 0 ? void 0 : _a.current)) {
-            props.forwardedInputRef.current.focus();
+    var onClose = props.onClose;
+    var setFocusOnAutoCompleteInput = React.useCallback(function (isComponentVisible) {
+        if (isComponentVisible && props.autoCompleteInputForwardedRef.current && props.isSearchAutoFocus) {
+            props.autoCompleteInputForwardedRef.current.focus();
         }
-    }, [props.forwardedInputRef, props.isAutoComplete, props.isOpened, props.isSearchAutoFocus]);
+    }, [props.autoCompleteInputForwardedRef, props.isSearchAutoFocus]);
     var renderPlaceholder = React.useCallback(function () {
         var _a;
         return props.placeholder && !((_a = props.selectedIds) === null || _a === void 0 ? void 0 : _a.length)
             ? (React.createElement("div", { className: bem.element('placeholder') }, props.placeholder))
             : null;
     }, [bem, props.placeholder, props.selectedIds]);
-    return (React.createElement("div", { ref: props.forwardedRef, className: bem(bem.block((_a = {
+    var fieldRef = React.useRef(null);
+    var menuWidth = React.useMemo(function () {
+        if (!fieldRef.current) {
+            return 0;
+        }
+        return fieldRef.current.getBoundingClientRect().width;
+        // Отключена проверка, т.к. необходимо пересчитывать ширину меню, когда меняется fieldRef.current
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [fieldRef.current, props.isOpened]);
+    var renderList = React.useCallback(function () { return (React.createElement("div", { className: bem.element('drop-down'), style: {
+            '--width': menuWidth + 'px',
+            '--maxHeight': props.maxHeight
+        } },
+        props.isAutoComplete && (React.createElement("div", { className: bem.element('search', {
                 size: props.size
-            },
-            _a["".concat(props.color)] = !!props.color && !props.outline,
-            _a["outline_".concat(props.color)] = props.outline,
-            _a.opened = props.isOpened,
-            _a['is-invalid'] = !!props.errors,
-            _a.disabled = props.disabled,
-            _a)), props.className), onKeyPress: function (e) { return e.key === 'Enter' && !props.disabled && props.onOpen(); }, style: props.style, role: "button", tabIndex: 0 },
-        React.createElement("div", { className: bem.element('selected-items', {
-                reset: props.showReset
-            }), onClick: props.onOpen, tabIndex: -1, role: 'button' },
-            renderPlaceholder(),
-            React.createElement("span", { className: bem.element('selected-items') }, props.showEllipses
-                ? (0, utils_1.getSelectedItemsLabel)(props.selectedItems)
-                : (0, utils_1.getSelectedItemsCount)(props.selectedItems)),
-            React.createElement("input", { className: bem.element('input'), ref: props.inputRef })),
-        props.showReset && props.selectedIds.length > 0 && (React.createElement(Icon_1["default"], { name: "cross_8x8", className: bem.element('icon-close'), tabIndex: -1, onClick: props.onReset, "aria-label": __('Сбросить') })),
-        React.createElement(Icon_1["default"], { name: 'arrow_down_24x24', className: bem.element('icon-chevron'), tabIndex: -1, onClick: props.onOpen }),
-        props.isOpened && (React.createElement("div", { className: bem.element('drop-down') },
-            props.isAutoComplete && (React.createElement("div", { className: bem.element('search', {
-                    size: props.size
-                }) },
-                React.createElement(Icon_1["default"], { name: 'search', className: bem.element('search-icon') }),
-                React.createElement("input", __assign({}, props.searchInputProps, { ref: props.autoCompleteInputForwardedRef, 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') },
-                props.multiple
-                    && props.itemToSelectAll
-                    && props.renderItem(props.itemToSelectAll),
-                props.items.map(function (item) { return props.renderItem(item); }))))));
+            }) },
+            React.createElement(Icon_1["default"], { name: 'search', className: bem.element('search-icon') }),
+            React.createElement("input", __assign({}, props.searchInputProps, { ref: props.autoCompleteInputForwardedRef, 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') },
+            props.multiple
+                && props.itemToSelectAll
+                && props.renderItem(props.itemToSelectAll),
+            props.items.map(function (item) { return props.renderItem(item); })))); }, [bem, menuWidth, props]);
+    var closeIfOpened = React.useCallback(function () {
+        if (props.isOpened) {
+            onClose();
+        }
+    }, [onClose, props.isOpened]);
+    return (React.createElement(content_1.DropDown, __assign({ content: renderList, onVisibleChange: setFocusOnAutoCompleteInput, visible: props.isOpened, onClose: onClose, hasArrow: false, className: bem.element('wrapper') }, props.dropDownProps),
+        React.createElement("div", null,
+            React.createElement("div", { className: bem(bem.block((_a = {
+                        size: props.size
+                    },
+                    _a["".concat(props.color)] = !!props.color && !props.outline,
+                    _a["outline_".concat(props.color)] = props.outline,
+                    _a.opened = props.isOpened,
+                    _a['is-invalid'] = !!props.errors,
+                    _a.disabled = props.disabled,
+                    _a)), props.className), onKeyPress: function (e) { return e.key === 'Enter' && !props.disabled && props.onOpen(); }, style: props.style, role: "button", tabIndex: 0, onClick: closeIfOpened, ref: fieldRef },
+                React.createElement("div", { className: bem.element('selected-items', {
+                        reset: props.showReset
+                    }), onClick: props.onOpen, tabIndex: -1, role: 'button' },
+                    renderPlaceholder(),
+                    React.createElement("span", { className: bem.element('selected-items') }, props.showEllipses
+                        ? (0, utils_1.getSelectedItemsLabel)(props.selectedItems)
+                        : (0, utils_1.getSelectedItemsCount)(props.selectedItems)),
+                    React.createElement("input", { className: bem.element('input'), ref: props.inputRef })),
+                props.showReset && props.selectedIds.length > 0 && (React.createElement(Icon_1["default"], { name: "cross_8x8", className: bem.element('icon-close'), tabIndex: -1, onClick: props.onReset, "aria-label": __('Сбросить') })),
+                React.createElement(Icon_1["default"], { name: 'arrow_down_24x24', className: bem.element('icon-chevron'), tabIndex: -1, onClick: props.onOpen })))));
 }
 exports["default"] = DropDownFieldView;

package/form/DropDownField/DropDownFieldView.scss

@@ -9,13 +9,13 @@
     --chevron-background-color: #ffffff;
     --chevron-background-color-outline: #f5f8fa;
     --chevron-inner-color: #323232;
-    --drop-down-border-color: #e9e9e9;
-    --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;
+    --drop-down-border-color: #e9e9e9;
+    --search-background-color: #f5f8fa;
+    --search-hover-background-color: #eef1f2;
+    --search-color: #626262;
 }
 
 html[data-theme="dark"] {
@@ -25,13 +25,13 @@ html[data-theme="dark"] {
     --chevron-background-color: #16171b;
     --chevron-background-color-outline: #191b1f;
     --chevron-inner-color: #ffffff;
-    --drop-down-border-color: #595959;
-    --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;
+    --drop-down-border-color: #595959;
+    --search-background-color: #4e4f57;
+    --search-hover-background-color: #5b5c6b;
+    --search-color: #adacac;
 }
 
 $basic-color: var(--basic-color);
@@ -40,13 +40,13 @@ $basic-active-color: var(--basic-active-color);
 $chevron-background-color: var(--chevron-background-color);
 $chevron-background-color-outline: var(--chevron-background-color-outline);
 $chevron-inner-color: var(--chevron-inner-color);
-$drop-down-border-color: var(--drop-down-border-color);
-$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-border-color: var(--drop-down-border-color);
+$search-background-color: var(--search-background-color);
+$search-hover-background-color: var(--search-hover-background-color);
+$search-color: var(--search-color);
 
 $drop-down-color-themes: () !default;
 $drop-down-color-themes: map.merge(
@@ -291,48 +291,20 @@ $drop-down-color-themes: map.merge(
         }
     }
 
-    &__selected-items {
-        position: absolute;
-        width: calc(100% - 29px);
-        height: 100%;
-        top: 0;
-        left: 0;
-        overflow: hidden;
-        padding-left: 8px;
-        outline: none;
-
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-    }
-
     &__drop-down {
-        position: absolute;
-        z-index: 2;
-        width: 100%;
+        width: var(--width);
+        max-height: var(--maxHeight);
         height: fit-content;
-        top: calc(100% + 8px);
-        left: 0;
-
+    
         background-color: variables.$element-background-color;
-
-        border: 1px solid $drop-down-border-color;
+    
         overflow: hidden;
-        border-radius: 12px;
-
+    
         &-list {
             @include mixins.scrollWrapper(240px, 0, variables.$scroll-thumb-color, variables.$scroll-track-color);
         }
     }
 
-    &_opened {
-        #{$root}__icon-chevron {
-            svg {
-                transform: rotate(180deg);
-            }
-        }
-    }
-
     &__search {
         width: 100%;
         padding: 9px;
@@ -402,6 +374,29 @@ $drop-down-color-themes: map.merge(
         }
     }
 
+    &__selected-items {
+        position: absolute;
+        width: calc(100% - 29px);
+        height: 100%;
+        top: 0;
+        left: 0;
+        overflow: hidden;
+        padding-left: 8px;
+        outline: none;
+
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+    }
+
+    &_opened {
+        #{$root}__icon-chevron {
+            svg {
+                transform: rotate(180deg);
+            }
+        }
+    }
+
     &__placeholder {
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -447,4 +442,9 @@ $drop-down-color-themes: map.merge(
         pointer-events: none;
         user-select: none;
     }
+    &__wrapper {
+        padding: unset;
+        overflow: hidden;
+        min-width: unset;
+    }
 }

package/form/DropDownFieldItem/DropDownFieldItemView.d.ts

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

package/form/FieldLayout/FieldLayoutView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IFieldLayoutViewProps } from '@steroidsjs/core/ui/form/FieldLayout/FieldLayout';
-export default function FieldLayoutView(props: IFieldLayoutViewProps): JSX.Element;
+export default function FieldLayoutView(props: IFieldLayoutViewProps): React.JSX.Element;

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.MemoExoticComponent<(props: IFieldListItemViewProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<(props: IFieldListItemViewProps) => React.JSX.Element>;
 export default _default;

package/form/FieldList/FieldListView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IFieldListViewProps } from '@steroidsjs/core/ui/form/FieldList/FieldList';
-export default function FieldListView(props: IFieldListViewProps): JSX.Element;
+export default function FieldListView(props: IFieldListViewProps): React.JSX.Element;

package/form/FieldSet/FieldSetView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IFieldSetViewProps } from '@steroidsjs/core/ui/form/FieldSet/FieldSet';
-export default function FieldSetView(props: IFieldSetViewProps): JSX.Element;
+export default function FieldSetView(props: IFieldSetViewProps): React.JSX.Element;

package/form/FileField/FileFieldItemView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IFileFieldItemViewProps } from '@steroidsjs/core/ui/form/FileField/FileField';
-export default function FileFieldItemView(props: IFileFieldItemViewProps): JSX.Element;
+export default function FileFieldItemView(props: IFileFieldItemViewProps): React.JSX.Element;

package/form/FileField/FileFieldView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IFileFieldViewProps } from '@steroidsjs/core/ui/form/FileField/FileField';
-export default function FileFieldView(props: IFileFieldViewProps): JSX.Element;
+export default function FileFieldView(props: IFileFieldViewProps): React.JSX.Element;

package/form/Form/FormView.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { IFormViewProps } from '@steroidsjs/core/ui/form/Form/Form';
-declare function FormView(props: IFormViewProps): JSX.Element;
+declare function FormView(props: IFormViewProps): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormView>;
 export default _default;

package/form/HtmlField/HtmlFieldView.d.ts

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

package/form/ImageField/ImageFieldModalView.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from '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): React.JSX.Element;

package/form/ImageField/ImageFieldView.d.ts

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

package/form/InputField/InputFieldView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IInputFieldViewProps } from '@steroidsjs/core/ui/form/InputField/InputField';
-export default function InputFieldView(props: IInputFieldViewProps): JSX.Element;
+export default function InputFieldView(props: IInputFieldViewProps): React.JSX.Element;

package/form/NumberField/NumberFieldView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { INumberFieldViewProps } from '@steroidsjs/core/ui/form/NumberField/NumberField';
-export default function NumberFieldView(props: INumberFieldViewProps): JSX.Element;
+export default function NumberFieldView(props: INumberFieldViewProps): React.JSX.Element;

package/form/PasswordField/PasswordFieldView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IPasswordFieldViewProps } from '@steroidsjs/core/ui/form/PasswordField/PasswordField';
-export default function PasswordFieldView(props: IPasswordFieldViewProps): JSX.Element;
+export default function PasswordFieldView(props: IPasswordFieldViewProps): React.JSX.Element;

package/form/RadioField/RadioFieldView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { IRadioFieldViewProps } from '@steroidsjs/core/ui/form/RadioField/RadioField';
-export default function RadioFieldView(props: IRadioFieldViewProps): JSX.Element;
+import * as React from 'react';
+import { ICheckboxFieldViewProps } from '@steroidsjs/core/ui/form/CheckboxField/CheckboxField';
+export default function RadioFieldView(props: ICheckboxFieldViewProps): React.JSX.Element;

package/form/RadioListField/RadioListFieldView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { IRadioListFieldViewProps } from '@steroidsjs/core/ui/form/RadioListField/RadioListField';
-export default function RadioListFieldView(props: IRadioListFieldViewProps): JSX.Element;
+import * as React from 'react';
+import { ICheckboxListFieldViewProps } from '@steroidsjs/core/ui/form/CheckboxListField/CheckboxListField';
+export default function RadioListFieldView(props: ICheckboxListFieldViewProps): React.JSX.Element;

package/form/RadioListField/RadioListFieldView.js

@@ -35,7 +35,7 @@ function RadioListFieldView(props) {
     var prefix = (0, useUniqueId_1["default"])('radio');
     return (React.createElement("div", { className: bem(bem.block((_a = {},
             _a["".concat(props.orientation)] = !!props.orientation,
-            _a)), props.className) }, props.items.map(function (radio, radioIndex) { return props.renderRadio({
+            _a)), props.className) }, props.items.map(function (radio, radioIndex) { return props.renderItem({
         key: radioIndex,
         id: "".concat(prefix, "_").concat(radio.id),
         label: radio.label,

package/form/RateField/RateFieldView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IRateFieldViewProps } from '@steroidsjs/core/ui/form/RateField/RateField';
-export default function RateFieldView(props: IRateFieldViewProps): JSX.Element;
+export default function RateFieldView(props: IRateFieldViewProps): React.JSX.Element;

package/form/ReCaptchaField/ReCaptchaFieldView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IReCaptchaFieldViewProps } from '@steroidsjs/core/ui/form/ReCaptchaField/ReCaptchaField';
-export default function ReCaptchaFieldView(props: IReCaptchaFieldViewProps): JSX.Element;
+export default function ReCaptchaFieldView(props: IReCaptchaFieldViewProps): React.JSX.Element;

package/form/SliderField/SliderFieldView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ISliderFieldViewProps } from '@steroidsjs/core/ui/form/SliderField/SliderField';
-export default function SliderFieldView(props: ISliderFieldViewProps): JSX.Element;
+export default function SliderFieldView(props: ISliderFieldViewProps): React.JSX.Element;

package/form/SwitcherField/SwitcherFieldView.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { ISwitcherFieldViewProps } from '@steroidsjs/core/ui/form/SwitcherField/SwitcherField';
-export default function SwitcherFieldView(props: ISwitcherFieldViewProps): JSX.Element;
+import React from 'react';
+import { ICheckboxFieldViewProps } from '@steroidsjs/core/ui/form/CheckboxField/CheckboxField';
+export default function SwitcherFieldView(props: ICheckboxFieldViewProps): React.JSX.Element;

package/form/SwitcherField/SwitcherFieldView.js

@@ -10,46 +10,28 @@ var __assign = (this && this.__assign) || function () {
     };
     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);
-    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];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __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 react_1 = __importDefault(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function SwitcherFieldView(props) {
     var bem = (0, hooks_1.useBem)('SwitcherFieldView');
-    var prefix = (0, hooks_1.useUniqueId)('switcher');
-    var renderLabel = React.useCallback(function (item) {
-        if (typeof item.label === 'object') {
-            return props.selectedIds.includes(item.id) ? item.label.checked : item.label.unchecked;
+    var uniqueId = (0, hooks_1.useUniqueId)('switcher');
+    var renderLabel = react_1["default"].useCallback(function () {
+        if (typeof props.label === 'object') {
+            return props.inputProps.checked ? props.label.checked : props.label.unchecked;
         }
-        return item.label;
-    }, [props.selectedIds]);
-    return (React.createElement("div", { className: bem(bem.block(), props.className), style: props.style }, props.items.map(function (switcher, switcherIndex) { return (React.createElement("label", { key: switcherIndex, className: bem.element('switcher', {
-            size: props.size
-        }), htmlFor: "".concat(prefix, "_").concat(switcher.id) },
-        React.createElement("input", __assign({}, props.inputProps, { id: "".concat(prefix, "_").concat(switcher.id), onChange: function () { return props.onItemSelect(switcher.id); }, checked: props.selectedIds.includes(switcher.id), className: bem.element('input'), required: switcher.required })),
-        React.createElement("span", { className: bem.element('slider') }),
-        React.createElement("span", { className: bem.element('label') }, renderLabel(switcher)))); })));
+        return props.label;
+    }, [props.inputProps.checked, props.label]);
+    var customVariableColorStyle = { '--checkbox-custom-color': props.color };
+    return (react_1["default"].createElement("div", { className: bem(bem.block({
+            size: props.size,
+            hasErrors: !!props.errors
+        }), props.className), style: __assign(__assign({}, props.style), customVariableColorStyle), onClick: props.onChange },
+        react_1["default"].createElement("input", __assign({ id: props.id || uniqueId, disabled: props.disabled, required: props.required, onChange: function () { return props.onItemSelect(props.id); }, className: bem.element('input') }, props.inputProps)),
+        react_1["default"].createElement("span", { className: bem.element('slider') }),
+        react_1["default"].createElement("span", { className: bem.element('label') }, renderLabel())));
 }
 exports["default"] = SwitcherFieldView;