@steroidsjs/bootstrap 3.0.0-beta.6 → 3.0.0-beta.61

package/index.d.ts

@@ -2,6 +2,12 @@ declare const _default: {
     'crud.CrudView': {
         lazy: () => any;
     };
+    'content.MenuView': {
+        lazy: () => any;
+    };
+    'content.MenuItemView': {
+        lazy: () => any;
+    };
     'content.DropDownView': {
         lazy: () => any;
     };
@@ -23,6 +29,12 @@ declare const _default: {
     'content.IconView': {
         lazy: () => any;
     };
+    'content.BadgeView': {
+        lazy: () => any;
+    };
+    'content.CopyToClipboardView': {
+        lazy: () => any;
+    };
     'form.AutoCompleteFieldView': {
         lazy: () => any;
     };
@@ -32,10 +44,10 @@ declare const _default: {
     'content.CardView': {
         lazy: () => any;
     };
-    'content.CollapseView': {
+    'content.AccordionView': {
         lazy: () => any;
     };
-    'content.CollapseItemView': {
+    'content.AccordionItemView': {
         lazy: () => any;
     };
     'form.CheckboxFieldView': {
@@ -161,6 +173,9 @@ declare const _default: {
     'list.GridView': {
         lazy: () => any;
     };
+    'list.ContentColumnView': {
+        lazy: () => any;
+    };
     'list.ListView': {
         lazy: () => any;
     };
@@ -215,5 +230,14 @@ declare const _default: {
     'nav.TreeView': {
         lazy: () => any;
     };
+    'nav.ButtonGroupView': {
+        lazy: () => any;
+    };
+    'typography.TextView': {
+        lazy: () => any;
+    };
+    'typography.TitleView': {
+        lazy: () => any;
+    };
 };
 export default _default;

package/index.js

@@ -5,6 +5,12 @@ exports["default"] = {
     'crud.CrudView': {
         lazy: function () { return require('./crud/Crud/CrudView')["default"]; }
     },
+    'content.MenuView': {
+        lazy: function () { return require('./content/Menu/MenuView')["default"]; }
+    },
+    'content.MenuItemView': {
+        lazy: function () { return require('./content/Menu/MenuItemView')["default"]; }
+    },
     'content.DropDownView': {
         lazy: function () { return require('./content/DropDown/DropDownView')["default"]; }
     },
@@ -26,6 +32,12 @@ exports["default"] = {
     'content.IconView': {
         lazy: function () { return require('./content/Icon/IconView')["default"]; }
     },
+    'content.BadgeView': {
+        lazy: function () { return require('./content/Badge/BadgeView')["default"]; }
+    },
+    'content.CopyToClipboardView': {
+        lazy: function () { return require('./content/CopyToClipboard/CopyToClipboardView')["default"]; }
+    },
     'form.AutoCompleteFieldView': {
         lazy: function () { return require('./form/AutoCompleteField/AutoCompleteFieldView')["default"]; }
     },
@@ -35,11 +47,11 @@ exports["default"] = {
     'content.CardView': {
         lazy: function () { return require('./content/Card/CardView')["default"]; }
     },
-    'content.CollapseView': {
-        lazy: function () { return require('./content/Collapse/CollapseView')["default"]; }
+    'content.AccordionView': {
+        lazy: function () { return require('./content/Accordion/AccordionView')["default"]; }
     },
-    'content.CollapseItemView': {
-        lazy: function () { return require('./content/Collapse/CollapseItemView')["default"]; }
+    'content.AccordionItemView': {
+        lazy: function () { return require('./content/Accordion/AccordionItemView')["default"]; }
     },
     'form.CheckboxFieldView': {
         lazy: function () { return require('./form/CheckboxField/CheckboxFieldView')["default"]; }
@@ -164,6 +176,9 @@ exports["default"] = {
     'list.GridView': {
         lazy: function () { return require('./list/Grid/GridView')["default"]; }
     },
+    'list.ContentColumnView': {
+        lazy: function () { return require('./list/Grid/views/ContentColumnView/ContentColumnView')["default"]; }
+    },
     'list.ListView': {
         lazy: function () { return require('./list/List/ListView')["default"]; }
     },
@@ -217,5 +232,14 @@ exports["default"] = {
     },
     'nav.TreeView': {
         lazy: function () { return require('./nav/Tree/TreeView')["default"]; }
+    },
+    'nav.ButtonGroupView': {
+        lazy: function () { return require('./nav/ButtonGroup/ButtonGroupView')["default"]; }
+    },
+    'typography.TextView': {
+        lazy: function () { return require('./typography/Text/TextView')["default"]; }
+    },
+    'typography.TitleView': {
+        lazy: function () { return require('./typography/Title/TitleView')["default"]; }
     }
 };

package/index.scss

@@ -1,16 +1,24 @@
 @import './scss/mixins';
 @import './scss/variables';
+@import './scss/animations';
+@import './scss/fonts';
 
 @import './crud/Crud/CrudView';
 @import './content/Alert/AlertView';
 @import './content/Avatar/AvatarView';
 @import './content/Avatar/AvatarGroupView';
+@import './content/Badge/BadgeView';
 @import './content/Calendar/CalendarView';
 @import './content/Calendar/CaptionElement';
 @import './content/Card/CardView';
-@import './content/Collapse/CollapseView';
-@import './content/Collapse/CollapseItemView';
+@import './content/Accordion/AccordionView';
+@import './content/Accordion/AccordionItemView';
 @import './content/Detail/DetailView';
+@import './content/DropDown/DropDownView.scss';
+@import './content/Menu/MenuItemView';
+@import './content/Menu/MenuView';
+@import './content/Icon/IconView';
+@import './content/CopyToClipboard/CopyToClipboardView';
 @import './form/AutoCompleteField/AutoCompleteFieldView';
 @import './form/Button/ButtonView';
 @import './form/CheckboxField/CheckboxFieldView';
@@ -19,18 +27,21 @@
 @import './form/DateRangeField/DateRangeFieldView';
 @import './form/DateTimeField/DateTimeFieldView';
 @import './form/DateTimeRangeField/DateTimeRangeFieldView';
+@import './form/DropDownFieldItem/DropDownFieldItemView';
 @import './form/DropDownField/DropDownFieldView';
 @import './form/FieldLayout/FieldLayoutView';
 @import './form/FieldList/FieldListView';
 @import './form/FieldList/FieldListItemView';
 @import './form/FileField/FileFieldView';
 @import './form/FileField/FileFieldItemView';
+@import './form/FieldSet/FieldSetView';
 @import './form/Form/FormView';
 @import './form/HtmlField/HtmlFieldView';
 @import './form/InputField/InputFieldView';
 @import './form/NumberField/NumberFieldView';
 @import './form/PasswordField/PasswordFieldView';
 @import './form/RateField/RateFieldView';
+@import './form/RadioField/RadioFieldView';
 @import './form/RadioListField/RadioListFieldView';
 @import './form/ReCaptchaField/ReCaptchaFieldView';
 @import './form/SliderField/SliderFieldView';
@@ -38,7 +49,6 @@
 @import './form/TextField/TextFieldView';
 @import './form/TimeField/TimeFieldView';
 @import './form/TimeField/TimePanelView';
-@import './content/Icon/IconView';
 @import './layout/Header/HeaderView';
 @import './layout/Tooltip/TooltipView';
 @import './layout/Notifications/NotificationsView';
@@ -67,3 +77,6 @@
 @import './nav/Nav/NavListView';
 @import './nav/Nav/NavTabsView';
 @import './nav/Tree/TreeView';
+@import './nav/ButtonGroup/ButtonGroupView';
+@import './typography/Text/TextView';
+@import './typography/Title/TitleView';

package/layout/Header/HeaderView.scss

@@ -1,9 +1,9 @@
+$body-bg: transparent;
+
 .HeaderView {
   box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
   background-color: $body-bg;
-  &, a {
-    color: $body-color;
-  }
+
   a:hover {
     opacity: .7;
   }

package/layout/Loader/LoaderView.d.ts

@@ -1,2 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
-export default function LoaderView(props: IBemHocOutput): JSX.Element;
+import { ILoaderViewProps } from '@steroidsjs/core/ui/layout/Loader/Loader';
+export default function LoaderView(props: ILoaderViewProps): JSX.Element;

package/layout/Loader/LoaderView.js

@@ -25,9 +25,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var content_1 = require("@steroidsjs/core/ui/content");
 function LoaderView(props) {
     var bem = (0, hooks_1.useBem)('LoaderView');
-    return (React.createElement("div", { className: bem.block() },
-        React.createElement("div", { className: bem.element('loader') })));
+    return (React.createElement("div", { className: bem.block({
+            color: props.color,
+            size: props.size
+        }) },
+        React.createElement(content_1.Icon, { className: bem.element('icon'), name: 'loading_purple' })));
 }
 exports["default"] = LoaderView;

package/layout/Loader/LoaderView.scss

@@ -1,27 +1,72 @@
+:root {
+  --gradient-color-primary-first: #651FFF;
+  --gradient-color-primary-second: #BA9BFF;
+}
+
+html[data-theme="dark"] { 
+  --gradient-color-primary-first: #9362FF;
+  --gradient-color-primary-second: #B898FF;
+}
+
+$gradient-color-primary-first: var(--gradient-color-primary-first);
+$gradient-color-primary-second: var(--gradient-color-primary-second);
+
 .LoaderView {
-  position: relative;
-  width: 100%;
-
-  &__loader {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin: -27px 0 0 -27px;
-    z-index: 20;
-    font-size: 10px;
-    text-indent: -9999em;
-    border-top: .9em solid rgba(246, 168, 33, 0.2);
-    border-right: .9em solid rgba(246, 168, 33, 0.2);
-    border-bottom: .9em solid rgba(246, 168, 33, 0.2);
-    border-left: .9em solid #db001f;
-    transform: translateZ(0);
+  $root: &;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &_size {
+    &_sm {
+      svg {
+        height: 33px;
+        width: 33px;
+        path {
+          stroke-width: 4px;
+        }
+      }
+    }
+    &_md {
+      svg {
+        height: 44px;
+        width: 44px;
+        path {
+          stroke-width: 6px;
+        }
+      }
+    }
+    &_lg {
+      svg {
+        height: 55px;
+        width: 55px;
+        path {
+          stroke-width: 7px;
+        }
+      }
+    }
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     animation: Loader-spin 1.1s infinite linear;
-    opacity: 1 !important;
+  }
+
+  &_color_gradient {
+    svg stop:first-child {
+      stop-color: $gradient-color-primary-first;
+    }
+    svg stop:last-child {
+      stop-color: $gradient-color-primary-second;
+    }
+  }
 
-    &, &::after {
-      border-radius: 50%;
-      width: 5em;
-      height: 5em;
+  @each $colorName, $colorMap in $color-themes {
+    &_color_#{$colorName} {
+        @include loader-color($colorMap, $colorName, $root);
     }
   }
 }
@@ -35,4 +80,4 @@
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
-}
+}

package/layout/Notifications/NotificationsItemView.d.ts

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

package/layout/Notifications/NotificationsView.d.ts

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

package/layout/ProgressBar/CircleProgressBarView.d.ts

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

package/layout/ProgressBar/LineProgressBarView.d.ts

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

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,7 @@
 @use 'sass:math';
 
-$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 +9,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 +29,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: $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/Grid/GridView.js

@@ -58,7 +58,7 @@ function GridView(props) {
         var fields = (0, keyBy_1["default"])(props.searchForm.fields.map(function (column) { return (0, isString_1["default"])(column) ? { attribute: column } : column; }), 'attribute');
         return (React.createElement("tr", null, props.columns.map(function (column, columnIndex) {
             var _a;
-            return (React.createElement("td", { key: columnIndex, className: column.headerClassName }, column.attribute && fields[column.attribute] && (React.createElement(Field_1["default"], __assign({ layout: 'inline', size: (_a = props.searchForm) === null || _a === void 0 ? void 0 : _a.size }, fields[column.attribute])))));
+            return (React.createElement("td", { key: columnIndex, className: column.headerClassName }, column.attribute && fields[column.attribute] && (React.createElement(Field_1["default"], __assign({ size: (_a = props.searchForm) === null || _a === void 0 ? void 0 : _a.size }, fields[column.attribute])))));
         })));
     }, [props.searchForm, props.columns]);
     var renderSortButton = (0, react_1.useCallback)(function (attribute, direction) {
@@ -73,10 +73,14 @@ function GridView(props) {
             } }));
     }, [bem, props]);
     var emptyContent = (0, react_1.useMemo)(function () { return props.renderEmpty(); }, [props]);
-    return props.renderList(React.createElement("div", { className: bem(bem.block({ loading: props.isLoading || ((_a = props.list) === null || _a === void 0 ? void 0 : _a.isLoading) }), props.className) },
+    return props.renderList(React.createElement("div", { className: bem(bem.block({
+            loading: props.isLoading || ((_a = props.list) === null || _a === void 0 ? void 0 : _a.isLoading),
+            size: props.size,
+            alternatingColors: props.hasAlternatingColors
+        }), props.className) },
         props.renderSearchForm(),
         props.renderPaginationSize(),
-        React.createElement("table", { className: 'table table-striped' },
+        React.createElement("table", { className: bem.element('table') },
             React.createElement("thead", null,
                 React.createElement("tr", null, props.columns.map(function (column, columnIndex) { return (React.createElement("th", { key: columnIndex, className: column.headerClassName },
                     column.label,
@@ -86,7 +90,7 @@ function GridView(props) {
                         renderSortButton(column.attribute, 'desc'))))); })),
                 renderInsideSearchForm()),
             React.createElement("tbody", null,
-                props.items && props.items.map(function (item, rowIndex) { return (React.createElement("tr", { key: item[props.primaryKey] || rowIndex }, props.columns.map(function (column, columnIndex) { return (React.createElement("td", { key: columnIndex, className: column.className, "data-label": (0, isString_1["default"])(column.label) ? column.label : null }, props.renderValue(item, column))); }))); }),
+                props.items && props.items.map(function (item, rowIndex) { return (React.createElement("tr", { key: item[props.primaryKey] || rowIndex }, props.columns.map(function (column, columnIndex) { return (React.createElement("td", { key: columnIndex, className: bem(bem.element('column'), column.className), "data-label": (0, isString_1["default"])(column.label) ? column.label : null }, props.renderValue(item, column))); }))); }),
                 emptyContent && (React.createElement("tr", null,
                     React.createElement("td", { colSpan: props.columns.length }, emptyContent))))),
         props.renderPagination()));