@steroidsjs/bootstrap 3.0.0-beta.9 → 3.0.0-beta.91

package/layout/Sidebar/SidebarUser/SidebarUser.scss

@@ -0,0 +1,45 @@
+@use "style/variables";
+
+.SidebarUser {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px 0px 12px;
+
+    &__left {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        column-gap: 12px;
+        transform: translateX(1px) translateY(1px);
+
+        .AvatarView { 
+            width: 36px;
+            height: 36px;
+        }
+    }
+
+    &__name {
+        width: 128px;
+
+        font-size: variables.$font-size-sm;
+        font-weight: variables.$font-weight-sm;
+        line-height: variables.$line-height-sm;
+        color: variables.$sidebar-label-color;
+        opacity: 0;
+        transition: opacity 150ms ease-in-out;
+    }
+
+    .MenuView__button .IconView.MenuView__icon {
+        width: 24px;
+        height: 24px;
+        opacity: 0;
+        transition: opacity 150ms ease-in-out;
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}

package/layout/Sidebar/SidebarUser/index.d.ts

@@ -0,0 +1,2 @@
+import SidebarUser from './SidebarUser';
+export default SidebarUser;

package/layout/Sidebar/SidebarUser/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var SidebarUser_1 = __importDefault(require("./SidebarUser"));
+exports["default"] = SidebarUser_1["default"];

package/layout/Sidebar/SidebarView.d.ts

@@ -0,0 +1,2 @@
+import { ISidebarViewProps } from '@steroidsjs/core/ui/layout/Sidebar/Sidebar';
+export default function SidebarView(props: ISidebarViewProps): JSX.Element;

package/layout/Sidebar/SidebarView.js

@@ -0,0 +1,26 @@
+"use strict";
+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 nav_1 = require("@steroidsjs/core/ui/nav");
+var SidebarUser_1 = __importDefault(require("./SidebarUser"));
+var SidebarLogo_1 = __importDefault(require("./SidebarLogo"));
+var FooterIcons_1 = __importDefault(require("./FooterIcons"));
+function SidebarView(props) {
+    var bem = (0, useBem_1["default"])('SidebarView');
+    return (react_1["default"].createElement("aside", { className: bem(bem.block({
+            isOpened: props.isOpened,
+            hasSeparatedItem: props.hasSeparatedNavItem
+        }), props.className), style: props.style },
+        react_1["default"].createElement("header", { className: bem.element('header') },
+            react_1["default"].createElement(SidebarLogo_1["default"], { icon: props.logo.icon, label: props.logo.label, toggleSidebar: props.toggleSidebar }),
+            react_1["default"].createElement(SidebarUser_1["default"], { menu: props.menu, name: props.user.name, picture: props.user.picture })),
+        react_1["default"].createElement(nav_1.Nav, { items: props.items, layout: "icon", className: bem.element('nav'), onChange: props === null || props === void 0 ? void 0 : props.onClickNav }),
+        react_1["default"].createElement("footer", { className: bem.element('footer') },
+            react_1["default"].createElement(FooterIcons_1["default"], { footerIcons: props.footerIcons, isShink: !props.isOpened })),
+        react_1["default"].createElement("div", { className: bem.element('trigger'), onClick: props.toggleSidebar })));
+}
+exports["default"] = SidebarView;

package/layout/Sidebar/SidebarView.scss

@@ -0,0 +1,304 @@
+@use "../../scss/variables";
+
+:root {
+    --sidebar-text-color: #00000099;
+    --sidebar-text-hover-color: #312c3a;
+    --sidebar-text-active-color: #312c3a;
+    --sidebar-item-hover-color: #f1f5f7;
+    --sidebar-item-active-color: #dbe2e6;
+    --sidebar-border-color: rgba(0, 0, 0, 0.1);
+    --sidebar-parent-icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Ikljb25zL0ljb25zMjQmIzIwOTsmIzEzMzsyNC9XaGl0ZS9hcnJvdy9FeHBhbmRfcmlnaHRfOCI+CjxwYXRoIGlkPSJWZWN0b3IgOSIgZD0iTTEwIDguODk3NThMMTQgMTIuODk3NkwxMCAxNi44OTc2IiBzdHJva2U9IiM2MjYyNjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+Cjwvc3ZnPgo=");
+    --sidebar-default-icon-color: #626262;
+    --sidebar-hover-icon-color: #323232;
+    --sidebar-active-icon-color: #323232;
+
+    --sidebar-badge-border-color: #dbe2e6;
+}
+
+html[data-theme="dark"] {
+    --sidebar-text-color: #ffffff99;
+    --sidebar-text-hover-color: #ffffff;
+    --sidebar-text-active-color: #fff;
+    --sidebar-item-hover-color: rgba(0, 0, 0, 0.3);
+    --sidebar-item-active-color: #272a37;
+    --sidebar-border-color: rgba(255, 255, 255, 0.1);
+    --sidebar-parent-icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Ikljb25zL0ljb25zMjQmIzIwOTsmIzEzMzsyNC9XaGl0ZS9hcnJvdy9FeHBhbmRfcmlnaHRfOCI+CjxwYXRoIGlkPSJWZWN0b3IgOSIgZD0iTTEwIDguODk3NThMMTQgMTIuODk3NkwxMCAxNi44OTc2IiBzdHJva2U9IiNBREFDQUMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+Cjwvc3ZnPgo=");
+    --sidebar-default-icon-color: rgba(255, 255, 255, 0.6);
+    --sidebar-hover-icon-color: #ffffff;
+    --sidebar-active-icon-color: #ffffff;
+
+    --sidebar-badge-border-color: #272a37;
+}
+
+$sidebar-text-color: var(--sidebar-text-color);
+$sidebar-text-hover-color: var(--sidebar-text-hover-color);
+$sidebar-text-active-color: var(--sidebar-text-active-color);
+$sidebar-item-hover-color: var(--sidebar-item-hover-color);
+$sidebar-item-active-color: var(--sidebar-item-active-color);
+$sidebar-border-color: var(--sidebar-border-color);
+$sidebar-parent-icon: var(--sidebar-parent-icon);
+$sidebar-default-icon-color: var(--sidebar-default-icon-color);
+$sidebar-hover-icon-color: var(--sidebar-hover-icon-color);
+$sidebar-active-icon-color: var(--sidebar-active-icon-color);
+
+$sidebar-badge-border-color: var(--sidebar-badge-border-color);
+
+.SidebarView {
+    $root: &;
+    position: relative;
+    padding: 8px;
+    max-width: 72px;
+    transition: max-width 250ms ease-in-out;
+    background-color: variables.$element-background-color;
+
+    &__header {
+        margin-bottom: 80px;
+    }
+
+    .ButtonView .ButtonView__link .ButtonView__text {
+        color: $sidebar-text-color;
+        font-size: variables.$font-size-sm;
+        font-weight: variables.$font-weight-sm;
+        line-height: variables.$line-height-sm;
+        transition: color 150ms ease-in-out;
+        opacity: 0;
+    }
+
+    .NavIconView__list-item .ButtonView .ButtonView__link {
+        width: 24px;
+    }
+
+    .ButtonView {
+        width: 100%;
+        padding: 12px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &__icon {
+            margin-right: 0;
+            min-width: 24px;
+        }
+
+        &__link {
+            gap: 8px;
+        }
+    }
+
+    &__nav {
+        .NavIconView__list {
+            flex-flow: column nowrap;
+            align-items: flex-start;
+            gap: 4px;
+
+            &-item {
+                position: relative;
+                width: 100%;
+                border-radius: variables.$radius-large;
+
+                svg path,
+                rect,
+                circle {
+                    stroke: variables.$icon-color;
+                }
+
+                transition: background-color 150ms ease-in-out;
+
+                //Состояние hover для элемента
+                .ButtonView:hover {
+                    background-color: $sidebar-item-hover-color;
+
+                    .ButtonView__icon {
+                        svg path,
+                        circle,
+                        rect {
+                            stroke: $sidebar-hover-icon-color;
+                        }
+                    }
+                    .ButtonView__text {
+                        color: $sidebar-text-hover-color;
+                    }
+                }
+
+                //Состояние active для элемента
+                &_active > .ButtonView {
+                    background-color: $sidebar-item-active-color;
+
+                    .ButtonView__icon {
+                        svg path,
+                        circle,
+                        rect {
+                            stroke: $sidebar-active-icon-color;
+                        }
+                    }
+
+                    .ButtonView__text {
+                        color: $sidebar-text-active-color;
+                    }
+                }
+
+                &_hasBorder {
+                    &::before {
+                        content: "";
+                        top: 0;
+                        left: 0;
+                        width: 100%;
+                        height: 1px;
+                        margin-bottom: 4px;
+                        background-color: $sidebar-border-color;
+                    }
+                }
+
+                //Стрелка для родительского элемента внутри которого есть другие пункты
+                &_hasItems > .ButtonView {
+                    position: relative;
+                    &::after {
+                        content: "";
+                        display: block;
+                        position: absolute;
+                        pointer-events: none;
+                        top: 50%;
+                        right: 12px;
+                        width: 24px;
+                        height: 24px;
+                        background-image: $sidebar-parent-icon;
+                        background-size: cover;
+                        transform: translateY(-50%);
+                        transition: transform 150ms ease-in-out;
+                    }
+                }
+
+                //Поворот стрелки при активации элемента
+                &_active.NavIconView__list-item_hasItems > .ButtonView::after {
+                    transform: translateY(-50%) rotate(90deg);
+                }
+
+                //Поворот стрелки если есть дочерний активированный элемент
+                &_nestedActive > .ButtonView::after {
+                    transform: translateY(-50%) rotate(90deg);
+                }
+
+                .ButtonView__badge {
+                    position: absolute;
+                    bottom: 3px;
+                    top: auto;
+                    right: 7px;
+                    border-radius: 160px;
+                    padding: 1px;
+                    border: 2px solid $sidebar-badge-border-color;
+                }
+
+                .ButtonView__icon {
+                    svg path,
+                    rect,
+                    circle {
+                        stroke: $sidebar-default-icon-color;
+                    }
+                }
+
+                &-nested {
+                    width: 100%;
+                    margin: 0;
+                    &-item {
+                        .ButtonView {
+                            padding-left: 54px;
+                        }
+
+                        //Состояние hover для вложенного элемента
+                        &:hover:not(.NavIconView__list-item-nested-item_active) > .ButtonView {
+                            background-color: $sidebar-item-hover-color;
+
+                            .ButtonView__text {
+                                color: $sidebar-text-hover-color;
+                            }
+                        }
+
+                        //Состояние active для вложенного элемента
+                        &_active > .ButtonView {
+                            background-color: $sidebar-item-active-color;
+
+                            .ButtonView__text {
+                                color: $sidebar-text-active-color;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .NavIconView__list-item:nth-last-child(1) {
+        margin-bottom: 160px;
+    }
+
+    &_hasSeparatedItem {
+        //Декоративный элемент перед последним пунктом
+        .NavIconView__list-item:nth-last-child(2) {
+            margin-bottom: 160px;
+        }
+
+        .NavIconView__list-item:nth-last-child(1) {
+            margin-bottom: 0;
+        }
+    }
+
+    &__footer {
+        border-top: 1px solid variables.$element-border-color;
+    }
+
+    &__trigger {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: transparent;
+        cursor: pointer;
+    }
+
+    &_isOpened {
+        max-width: 276px;
+
+        .SidebarLogo__label {
+            opacity: 1;
+        }
+
+        .SidebarLogo__right {
+            opacity: 1;
+        }
+
+        .SidebarUser__name {
+            opacity: 1;
+        }
+
+        .SidebarUser .MenuView__button .IconView.MenuView__icon {
+            opacity: 1;
+        }
+
+        .ButtonView .ButtonView__link .ButtonView__text {
+            opacity: 1;
+        }
+
+        .NavIconView__list-item .ButtonView .ButtonView__link {
+            width: auto;
+        }
+
+        .ButtonView {
+            justify-content: flex-start;
+        }
+
+        .ButtonView__badge {
+            position: absolute;
+            padding: 3px 8px !important;
+            top: 50%;
+            right: 12px;
+            border-radius: 160px;
+            padding: 1px;
+            border: none;
+            transform: translateY(-30%);
+        }
+        #{$root}__trigger {
+            display: none;
+        }
+    }
+}

package/layout/Sidebar/index.d.ts

@@ -0,0 +1,2 @@
+import SidebarView from './SidebarView';
+export default SidebarView;

package/layout/Sidebar/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var SidebarView_1 = __importDefault(require("./SidebarView"));
+exports["default"] = SidebarView_1["default"];

package/layout/Skeleton/SkeletonView.scss

@@ -1,6 +1,8 @@
+@use "../../scss/variables";
+
 .SkeletonView{
   $root: &;
-  background-color: $grey-darker;
+  background-color: variables.$grey-darker;
   border-radius: 4px;
   position: relative;
   overflow: hidden;
@@ -35,13 +37,13 @@
 
     @keyframes pulse {
       0% {
-        background-color: $grey-darker;
+        background-color: variables.$grey-darker;
       }
       50% {
-        background-color: $grey-light;
+        background-color: variables.$grey-light;
       }
       100% {
-        background-color: $grey-darker;
+        background-color: variables.$grey-darker;
       }
     }
 
@@ -54,7 +56,7 @@
         content: "";
         position: absolute;
         transform: translateX(-100%);
-        background: linear-gradient(90deg, transparent, rgba($grey-light, 0.3), transparent);
+        background: linear-gradient(90deg, transparent, rgba(variables.$grey-light, 0.3), transparent);
         animation: wave-animation 1.6s linear 0.5s infinite;
       }
     }

package/layout/Tooltip/TooltipView.d.ts

@@ -1,3 +1,2 @@
 import { ITooltipViewProps } from '@steroidsjs/core/ui/layout/Tooltip/Tooltip';
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
-export default function TooltipView(props: ITooltipViewProps & IBemHocOutput): JSX.Element;
+export default function TooltipView(props: ITooltipViewProps): JSX.Element;

package/layout/Tooltip/TooltipView.js

@@ -27,18 +27,18 @@ var React = __importStar(require("react"));
 var react_1 = require("react");
 var hooks_1 = require("@steroidsjs/core/hooks");
 function TooltipView(props) {
-    var _a;
     var tooltipRef = (0, react_1.useRef)(null);
     var arrowRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
         props.calculatePosition(tooltipRef.current.getBoundingClientRect(), arrowRef.current.getBoundingClientRect());
     }, [props.calculatePosition]);
     var bem = (0, hooks_1.useBem)('TooltipView');
-    return (React.createElement("div", { ref: tooltipRef, className: bem(bem.block({
-            show: props.isTooltipVisible
-        }), 'tooltip', 'tooltip-position-' + props.position), style: props.style },
-        React.createElement("div", { ref: arrowRef, className: bem.element('arrow', (_a = {}, _a['position-' + props.position] = true, _a)), style: props.arrowPosition }),
-        React.createElement("div", { className: bem(bem.element('content'), 'tooltip-inner') },
+    return (React.createElement("div", { ref: tooltipRef, className: bem.block({
+            show: props.isTooltipVisible,
+            position: props.position
+        }), style: props.style },
+        React.createElement("div", { ref: arrowRef, className: bem.element('arrow', { position: props.position }), style: props.arrowPosition }),
+        React.createElement("div", { className: bem.element('content') },
             React.createElement("span", null, props.content))));
 }
 exports["default"] = TooltipView;

package/layout/Tooltip/TooltipView.scss

@@ -1,8 +1,8 @@
 @use 'sass:math';
+@use "../../scss/variables";
 
-$tooltip-arrow-color: #000;
-$tooltip-arrow-width: 8px;
-$tooltip-arrow-height: 8px;
+$tooltip-arrow-width: 10px;
+$tooltip-arrow-height: 10px;
 $tooltip-arrow-border: math.div($tooltip-arrow-width, 2);
 $tooltip-gap: 12px;
 
@@ -10,10 +10,18 @@ $tooltip-arrow-offset-horizontal: 20px;
 $tooltip-arrow-offset-vertical-top: 15px;
 $tooltip-arrow-offset-vertical-bottom: 7px;
 
+$tooltip-background-color: rgba(65, 65, 65, 0.95);
+
 .TooltipView {
   position: absolute;
   top: 0;
   left: 0;
+  max-width: 300px;
+  word-break: break-all;
+  padding: 8px 12px;
+  border-radius: 6px;
+  background: $tooltip-background-color;
+
   transform: translate(0,0);
   opacity: 0;
   transition: opacity .15s ease-in, transform .15s ease-in;
@@ -22,99 +30,100 @@ $tooltip-arrow-offset-vertical-bottom: 7px;
   &_show {
     opacity: 1;
   }
-  &_show.tooltip-position-top, &_show.tooltip-position-topLeft,  &_show.tooltip-position-topRight{
+
+  &_position{
+    &_top, &_topLeft, &_topRight {
       transform: translateY(-$tooltip-gap);
-  }
-  &_show.tooltip-position-bottom, &_show.tooltip-position-bottomLeft,  &_show.tooltip-position-bottomRight{
-    transform: translateY($tooltip-gap);
-  }
-  &_show.tooltip-position-left, &_show.tooltip-position-leftTop,  &_show.tooltip-position-leftBottom{
-    transform: translateX(-$tooltip-gap);
-  }
-  &_show.tooltip-position-right, &_show.tooltip-position-rightTop,  &_show.tooltip-position-rightBottom{
-    transform: translateX($tooltip-gap);
-  }
+    }
+
+    &_bottom, &_bottomLeft, &_bottomRight {
+      transform: translateY($tooltip-gap);
+    }
+
+    &_left, &_leftTop, &_leftBottom {
+      transform: translateX(-$tooltip-gap);
+    }
 
+    &_right, &_rightTop, &_rightBottom {
+      transform: translateX($tooltip-gap);
+    }
+  }
 
   &__arrow{
     position: absolute;
-
+    
     width: $tooltip-arrow-width;
     height: $tooltip-arrow-height;
 
     border-style: solid;
     border-width: math.div($tooltip-arrow-height, 2);
+    border-color: $tooltip-background-color;
     box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
 
-
-    &_position-top, &_position-topLeft, &_position-topRight{
+    &_position_top, &_position_topLeft, &_position_topRight{
       bottom: -$tooltip-arrow-border;
       left: 50%;
-
       border-top-color: transparent;
       border-left-color: transparent;
-      border-right-color:  $tooltip-arrow-color;
-      border-bottom-color:  $tooltip-arrow-color;
       transform: translateX(-50%) rotate(45deg);
     }
-    &_position-topLeft{
+    &_position_topLeft{
       left: $tooltip-arrow-offset-horizontal;
     }
-    &_position-topRight{
+    &_position_topRight{
       left: unset;
       right: $tooltip-arrow-offset-horizontal;
     }
 
-    &_position-bottom, &_position-bottomLeft, &_position-bottomRight{
+    &_position_bottom, &_position_bottomLeft, &_position_bottomRight{
       top: -$tooltip-arrow-border;
       left: 50%;
-      border-top-color: $tooltip-arrow-color;
-      border-left-color: $tooltip-arrow-color;
       border-right-color: transparent;
       border-bottom-color: transparent;
       transform: translateX(-50%) rotate(45deg);
     }
-    &_position-bottomLeft{
+    &_position_bottomLeft{
       left: $tooltip-arrow-offset-horizontal;
     }
-    &_position-bottomRight{
+    &_position_bottomRight{
       left: unset;
       right: $tooltip-arrow-offset-horizontal;
     }
 
-    &_position-left, &_position-leftTop, &_position-leftBottom{
+    &_position_left, &_position_leftTop, &_position_leftBottom{
       right: -$tooltip-arrow-border;
       top: 50%;
-      border-top-color: $tooltip-arrow-color;
       border-left-color: transparent;
-      border-right-color: $tooltip-arrow-color;
       border-bottom-color: transparent;
       transform: translateY(-50%) rotate(45deg);
     }
-    &_position-leftTop{
+    &_position_leftTop{
       top: $tooltip-arrow-offset-vertical-top;
     }
-    &_position-leftBottom{
+    &_position_leftBottom{
       top: unset;
       bottom: $tooltip-arrow-offset-vertical-bottom;
     }
 
-    &_position-right, &_position-rightTop, &_position-rightBottom{
+    &_position_right, &_position_rightTop, &_position_rightBottom{
       left: -$tooltip-arrow-border;
       top: 50%;
       border-top-color: transparent;
-      border-left-color: $tooltip-arrow-color;
       border-right-color: transparent;
-      border-bottom-color: $tooltip-arrow-color;
       transform: translateY(-50%) rotate(45deg);
     }
-    &_position-rightTop{
+    &_position_rightTop{
       top: $tooltip-arrow-offset-vertical-top;
     }
-    &_position-rightBottom{
+    &_position_rightBottom{
       top: unset;
       bottom: $tooltip-arrow-offset-vertical-bottom;
     }
   }
 
+  &__content{
+    color: variables.$white;
+    font-size: 14px;
+    line-height: 24px;
+  }
 }

package/list/CheckboxColumn/CheckboxColumnView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { ICheckboxColumnViewProps } from '@steroidsjs/core/ui/list/CheckboxColumn/CheckboxColumn';
-export default function CheckboxColumnView(props: ICheckboxColumnViewProps & IBemHocOutput): JSX.Element;
+export default function CheckboxColumnView(props: ICheckboxColumnViewProps): JSX.Element;

package/list/CheckboxColumn/CheckboxColumnView.js

@@ -40,10 +40,11 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var CheckboxField_1 = __importDefault(require("@steroidsjs/core/ui/form/CheckboxField"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var get_1 = __importDefault(require("lodash-es/get"));
 function CheckboxColumnView(props) {
     var bem = (0, hooks_1.useBem)('CheckboxColumnView');
     var CheckboxFieldInternal = CheckboxField_1["default"].WrappedComponent;
     return (React.createElement("div", { className: bem.block() },
-        React.createElement(CheckboxFieldInternal, __assign({}, props.fieldProps, { input: props.input }))));
+        React.createElement(CheckboxFieldInternal, __assign({}, props.fieldProps, { input: props.input, size: props.size, label: (0, get_1["default"])(props.item, props.attribute) }))));
 }
 exports["default"] = CheckboxColumnView;

package/list/ControlsColumnView/ControlsColumnView.d.ts

@@ -1,3 +1,2 @@
 import { IControlsColumnViewProps } from '@steroidsjs/core/ui/list/ControlsColumn/ControlsColumn';
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
-export default function ControlsColumnView(props: IControlsColumnViewProps & IBemHocOutput): JSX.Element;
+export default function ControlsColumnView(props: IControlsColumnViewProps): JSX.Element;

package/list/ControlsColumnView/ControlsColumnView.scss

@@ -1,2 +1,8 @@
 .ControlsColumnView {
-}
+    display: flex;
+    align-items: center;
+
+    .ButtonView {
+        border: none;
+    }
+}