@steroidsjs/bootstrap 3.0.32 → 3.0.34

package/form/CheckboxListField/CheckboxListFieldView.js

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

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/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 { ICheckboxFieldViewProps } from '@steroidsjs/core/ui/form/CheckboxField/CheckboxField';
+export default function RadioFieldView(props: ICheckboxFieldViewProps): 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 { ICheckboxListFieldViewProps } from '@steroidsjs/core/ui/form/CheckboxListField/CheckboxListField';
+export default function RadioListFieldView(props: ICheckboxListFieldViewProps): 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/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 { ICheckboxFieldViewProps } from '@steroidsjs/core/ui/form/CheckboxField/CheckboxField';
+export default function SwitcherFieldView(props: ICheckboxFieldViewProps): 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;

package/form/SwitcherField/SwitcherFieldView.scss

@@ -1,5 +1,5 @@
 @use "sass:map";
-@use "../../scss/variables";
+@use 'style/variables';
 
 :root {
     --switcher-dot-disabled-color: #dbe2e6;
@@ -11,85 +11,79 @@ html[data-theme="dark"] {
     --switcher-slider-disabled-color: #5b5c6b;
 }
 
+
 $switcher-dot-disabled-color: var(--switcher-dot-disabled-color);
 $switcher-slider-disabled-color: var(--switcher-slider-disabled-color);
 
 $background-color-transition-timing: 150ms;
 
-
 .SwitcherFieldView {
     $root: &;
-    display: flex;
-    flex-flow: column nowrap;
-    align-items: flex-start;
-    row-gap: 10px;
-
-    &__switcher {
-        display: inline-flex;
-        column-gap: 12px;
-        align-items: center;
-        position: relative;
-        cursor: pointer;
 
-        $sizes: () !default;
-        $sizes: map.merge(
-            (
-                "lg": (
-                    "width": 40px,
-                    "height": 24px,
-                    "dotSize": 18px,
-                    "dotTranslateDefault": translateY(-50%) translateX(4px),
-                    "dotTranslateActive": translateY(-50%) translateX(16px),
-                    "font-size": variables.$font-size-lg,
-                    "line-height": variables.$line-height-lg,
-                ),
-                "md": (
-                    "width": 34px,
-                    "height": 20px,
-                    "dotSize": 14px,
-                    "dotTranslateDefault": translateY(-50%) translateX(3px),
-                    "dotTranslateActive": translateY(-50%) translateX(15px),
-                    "font-size": variables.$font-size-base,
-                    "line-height": variables.$line-height-base,
-                ),
-                "sm": (
-                    "width": 28px,
-                    "height": 16px,
-                    "dotSize": 12px,
-                    "dotTranslateDefault": translateY(-50%) translateX(2px),
-                    "dotTranslateActive": translateY(-50%) translateX(12px),
-                    "font-size": variables.$font-size-sm,
-                    "line-height": variables.$line-height-sm,
-                ),
+    display: inline-flex;
+    column-gap: 12px;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+
+    $sizes: () !default;
+    $sizes: map.merge(
+        (
+            "lg": (
+                "width": 40px,
+                "height": 24px,
+                "dotSize": 18px,
+                "dotTranslateDefault": translateY(-50%) translateX(4px),
+                "dotTranslateActive": translateY(-50%) translateX(16px),
+                "font-size": variables.$font-size-lg,
+                "line-height": variables.$line-height-lg,
             ),
-            $sizes
-        );
-
-        &_size { 
-            @each $size, $sizeMap in $sizes { 
-                &_#{$size} {
-                    #{$root}__slider {
-                        width: map.get($sizeMap, width);
-                        height: map.get($sizeMap, height);
-    
-                        &::before {
-                            width: map.get($sizeMap, dotSize);
-                            height: map.get($sizeMap, dotSize);
-                            transform: map.get($sizeMap, dotTranslateDefault);
-                        }
-                    }
-    
-                    #{$root}__input:checked + #{$root}__slider {
-                        &::before {
-                            transform: map.get($sizeMap, dotTranslateActive);
-                        }
+            "md": (
+                "width": 34px,
+                "height": 20px,
+                "dotSize": 14px,
+                "dotTranslateDefault": translateY(-50%) translateX(3px),
+                "dotTranslateActive": translateY(-50%) translateX(15px),
+                "font-size": variables.$font-size-base,
+                "line-height": variables.$line-height-base,
+            ),
+            "sm": (
+                "width": 28px,
+                "height": 16px,
+                "dotSize": 12px,
+                "dotTranslateDefault": translateY(-50%) translateX(2px),
+                "dotTranslateActive": translateY(-50%) translateX(12px),
+                "font-size": variables.$font-size-sm,
+                "line-height": variables.$line-height-sm,
+            ),
+        ),
+        $sizes
+    );
+
+    &_size { 
+        @each $size, $sizeMap in $sizes { 
+            &_#{$size} {
+                #{$root}__slider {
+                    width: map.get($sizeMap, width);
+                    height: map.get($sizeMap, height);
+
+                    &::before {
+                        width: map.get($sizeMap, dotSize);
+                        height: map.get($sizeMap, dotSize);
+                        transform: map.get($sizeMap, dotTranslateDefault);
                     }
-    
-                    #{$root}__label {
-                        font-size: map.get($sizeMap, font-size);
-                        line-height: map.get($sizeMap, line-height);
+                }
+
+                #{$root}__input:checked + #{$root}__slider {
+                    &::before {
+                        transform: map.get($sizeMap, dotTranslateActive);
                     }
                 }
+
+                #{$root}__label {
+                    font-size: map.get($sizeMap, font-size);
+                    line-height: map.get($sizeMap, line-height);
+                }
             }
         }
     }
@@ -190,4 +184,4 @@ $background-color-transition-timing: 150ms;
     &__label {
         color: variables.$text-color;
     }
-}
+}

package/form/SwitcherListField/SwitcherListFieldView.d.ts

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

package/form/SwitcherListField/SwitcherListFieldView.js

@@ -0,0 +1,54 @@
+"use strict";
+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 hooks_1 = require("@steroidsjs/core/hooks");
+var SwitcherFieldView_1 = __importDefault(require("../SwitcherField/SwitcherFieldView"));
+function SwitcherListFieldView(props) {
+    var bem = (0, hooks_1.useBem)('SwitcherListFieldView');
+    var prefix = (0, hooks_1.useUniqueId)('switcher');
+    return (React.createElement("div", { className: bem(bem.block(), props.className), style: props.style }, props.items.map(function (checkbox, checkboxIndex) { return props.renderItem({
+        key: checkboxIndex,
+        id: "".concat(prefix, "_").concat(checkbox.id),
+        label: checkbox.label,
+        inputProps: {
+            name: "".concat(prefix, "_").concat(checkbox.id),
+            type: 'checkbox',
+            checked: props.selectedIds.includes(checkbox.id),
+            onChange: function () {
+                props.onItemSelect(checkbox.id);
+            },
+            disabled: props.disabled || checkbox.disabled
+        },
+        size: checkbox.size || props.size,
+        color: checkbox.color,
+        required: checkbox.required,
+        view: SwitcherFieldView_1["default"]
+    }); })));
+}
+exports["default"] = SwitcherListFieldView;

package/form/SwitcherListField/SwitcherListFieldView.scss

@@ -0,0 +1,9 @@
+@use "sass:map";
+@use "../../scss/variables";
+
+.SwitcherListFieldView {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: flex-start;
+    row-gap: 10px;
+}

package/index.d.ts

@@ -161,6 +161,9 @@ declare const _default: {
     'form.SwitcherFieldView': {
         lazy: () => any;
     };
+    'form.SwitcherListFieldView': {
+        lazy: () => any;
+    };
     'form.TextFieldView': {
         lazy: () => any;
     };

package/index.js

@@ -164,6 +164,9 @@ exports["default"] = {
     'form.SwitcherFieldView': {
         lazy: function () { return require('./form/SwitcherField/SwitcherFieldView')["default"]; }
     },
+    'form.SwitcherListFieldView': {
+        lazy: function () { return require('./form/SwitcherListField/SwitcherListFieldView')["default"]; }
+    },
     'form.TextFieldView': {
         lazy: function () { return require('./form/TextField/TextFieldView')["default"]; }
     },

package/index.scss

@@ -65,6 +65,7 @@
 @include meta.load-css('form/ReCaptchaField/ReCaptchaFieldView');
 @include meta.load-css('form/SliderField/SliderFieldView');
 @include meta.load-css('form/SwitcherField/SwitcherFieldView');
+@include meta.load-css('form/SwitcherListField/SwitcherListFieldView');
 @include meta.load-css('form/TextField/TextFieldView');
 @include meta.load-css('form/TimeField/TimeFieldView');
 @include meta.load-css('form/TimeField/TimePanelView');

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.32",
+    "version": "3.0.34",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -35,7 +35,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "3.0.57",
+        "@steroidsjs/core": "3.0.59",
         "@steroidsjs/eslint-config": "^2.1.6",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",