@steroidsjs/bootstrap 3.0.0-beta.125 → 3.0.0-beta.127

package/content/CalendarSystem/AsideCalendars/AsideCalendars.d.ts

@@ -4,7 +4,6 @@ import './AsideCalendars.scss';
 interface IAsideCalendarsProps {
     eventGroups: IEventGroup[];
     eventGroupsTitle: string;
-    selectedCalendarGroupsIds: number[];
     onChangeEventGroupsIds: (selectedIds: number[]) => void;
     openCreateEventGroupModal: () => void;
 }

package/content/CalendarSystem/AsideCalendars/AsideCalendars.js

@@ -36,7 +36,7 @@ function AsideCalendars(props) {
     return (react_1["default"].createElement("div", { className: bem.block() },
         react_1["default"].createElement(content_1.Accordion, null,
             react_1["default"].createElement(content_1.AccordionItem, { title: props.eventGroupsTitle },
-                react_1["default"].createElement(form_1.CheckboxListField, { items: props.eventGroups, selectedIds: props.selectedCalendarGroupsIds, onChange: function (selectedIds) { return props.onChangeEventGroupsIds(selectedIds); } }),
+                react_1["default"].createElement(form_1.CheckboxListField, { items: props.eventGroups, onChange: function (selectedIds) { return props.onChangeEventGroupsIds(selectedIds); } }),
                 react_1["default"].createElement(form_1.Button, { color: 'basic', className: bem.element('add'), onClick: props.openCreateEventGroupModal, size: 'sm' },
                     react_1["default"].createElement(content_1.Icon, { name: "add_16x16" }))))));
 }

package/content/CalendarSystem/CalendarSystemModalView.js

@@ -19,7 +19,7 @@ function CalendarSystemModalView(props) {
     var dispatch = (0, hooks_1.useDispatch)();
     var eventInitialValues = react_1["default"].useMemo(function () { return props.eventInitialValues; }, [props.eventInitialValues]);
     var callOnEventSubmit = function (fields) {
-        return eventInitialValues && !props.isCreate ? props.onEventSubmit(fields, eventInitialValues) : props.onEventSubmit(fields);
+        return eventInitialValues && !props.isCreate ? props.onModalFormSubmit(fields, eventInitialValues) : props.onModalFormSubmit(fields);
     };
     var onCloseModal = react_1["default"].useCallback(function () {
         props.onClose();

package/content/CalendarSystem/CalendarSystemView.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -14,15 +25,20 @@ var MonthGrid_1 = __importDefault(require("./MonthGrid"));
 var WeekGrid_1 = __importDefault(require("./WeekGrid"));
 function CalendarSystemView(props) {
     var bem = (0, useBem_1["default"])('CalendarSystemView');
+    var calendarTypeGrids = react_1["default"].useMemo(function () {
+        var _a;
+        return (_a = {},
+            _a[CalendarType_1["default"].MONTH] = react_1["default"].createElement(MonthGrid_1["default"], __assign({}, props.monthGridProps)),
+            _a[CalendarType_1["default"].WEEK] = react_1["default"].createElement(WeekGrid_1["default"], __assign({}, props.weekGridProps)),
+            _a);
+    }, [props.monthGridProps, props.weekGridProps]);
     return (react_1["default"].createElement("div", { className: bem(bem.block(), props.className), style: props.style },
         react_1["default"].createElement("aside", { className: bem.element('aside') },
             react_1["default"].createElement(AsideHeader_1["default"], { onClick: props.openCreateModal, className: bem.element('aside-header') }),
-            react_1["default"].createElement(Calendar_1["default"], { showFooter: false, onMonthChange: props.onMonthChange }),
-            react_1["default"].createElement(AsideCalendars_1["default"], { eventGroups: props.eventGroups, eventGroupsTitle: props.eventGroupsTitle, selectedCalendarGroupsIds: props.selectedCalendarGroups, onChangeEventGroupsIds: props.onChangeEventGroupsIds, openCreateEventGroupModal: props.openCreateEventGroupModal })),
+            react_1["default"].createElement(Calendar_1["default"], { showFooter: false, onMonthChange: props.onInnerCalendarChangeMonth }),
+            react_1["default"].createElement(AsideCalendars_1["default"], { eventGroups: props.eventGroups, eventGroupsTitle: props.eventGroupsTitle, onChangeEventGroupsIds: props.onChangeEventGroupsIds, openCreateEventGroupModal: props.openCreateEventGroupModal })),
         react_1["default"].createElement("div", { className: bem.element('content') },
-            react_1["default"].createElement(ContentHeader_1["default"], { dateToDisplay: props.dateToDisplay, onChangeCalendarType: props.onChangeCalendarType, applyControl: props.applyControl }),
-            props.calendarType === CalendarType_1["default"].MONTH
-                ? (react_1["default"].createElement(MonthGrid_1["default"], { monthCalendarDays: props.monthCalendarDays, getEventsFromDate: props.getEventsFromDate, weekDays: props.weekDays, openEditModal: props.openEditModal, openCreateModal: props.openCreateModal }))
-                : (react_1["default"].createElement(WeekGrid_1["default"], { allHours: props.allHours, getEventsFromDate: props.getEventsFromDate, currentWeekDays: props.currentWeekDays, openEditModal: props.openEditModal, openCreateModal: props.openCreateModal })))));
+            react_1["default"].createElement(ContentHeader_1["default"], { dateToDisplay: props.dateToDisplay, onChangeCalendarType: props.handleCalendarTypeChange, handleControlClick: props.handleControlClick }),
+            calendarTypeGrids[props.calendarType])));
 }
 exports["default"] = CalendarSystemView;

package/content/CalendarSystem/ContentHeader/ContentHeader.d.ts

@@ -3,7 +3,7 @@ import './ContentHeader.scss';
 interface IContentHeaderProps {
     dateToDisplay: string;
     onChangeCalendarType: (newType: string) => void;
-    applyControl: (event: React.MouseEvent<HTMLElement>) => void;
+    handleControlClick: (event: React.MouseEvent<HTMLElement>) => void;
 }
 declare function ContentHeader(props: IContentHeaderProps): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof ContentHeader>;

package/content/CalendarSystem/ContentHeader/ContentHeader.js

@@ -16,7 +16,7 @@ function ContentHeader(props) {
     var bem = (0, useBem_1["default"])('ContentHeader');
     return (react_1["default"].createElement("div", { className: bem.block() },
         react_1["default"].createElement(Text_1["default"], { content: props.dateToDisplay, className: bem.element('month') }),
-        react_1["default"].createElement("ul", { className: bem.element('controls'), onClick: props.applyControl }, Object.entries(DateControlType_1["default"].getIcons()).map(function (_a, controlIndex) {
+        react_1["default"].createElement("ul", { className: bem.element('controls'), onClick: props.handleControlClick }, Object.entries(DateControlType_1["default"].getIcons()).map(function (_a, controlIndex) {
             var controlLabel = _a[0], controlIcon = _a[1];
             return (react_1["default"].createElement("li", { key: controlIndex, className: bem.element('controls-item'), "data-control": controlLabel },
                 react_1["default"].createElement(content_1.Icon, { className: bem.element('controls-item-icon'), name: controlIcon })));

package/content/CalendarSystem/MonthGrid/MonthGrid.d.ts

@@ -3,9 +3,9 @@ import { IDay, IEvent } from '@steroidsjs/core/ui/content/CalendarSystem/Calenda
 import CalendarEnum from '@steroidsjs/core/ui/content/CalendarSystem/enums/CalendarType';
 import './MonthGrid.scss';
 interface IMonthGridProps {
-    monthCalendarDays: IDay[];
+    monthGridWeekDays: string[];
+    monthGridCalendarDays: IDay[];
     getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
-    weekDays: string[];
     openEditModal: (event: IEvent) => void;
     openCreateModal: (eventInitialDay?: IDay) => void;
 }

package/content/CalendarSystem/MonthGrid/MonthGrid.js

@@ -33,7 +33,7 @@ var MonthDay_1 = __importDefault(require("./views/MonthDay"));
 function MonthGrid(props) {
     var bem = (0, useBem_1["default"])('MonthGrid');
     return (react_1["default"].createElement("div", { className: bem.block() },
-        react_1["default"].createElement("div", { className: bem.element('week-days') }, props.weekDays.map(function (day, dayIndex) { return (react_1["default"].createElement("span", { key: dayIndex, className: bem.element('week-days-day') }, day)); })),
-        react_1["default"].createElement("div", { className: bem.element('grid') }, props.monthCalendarDays.map(function (day, dayIndex) { return (react_1["default"].createElement(MonthDay_1["default"], { key: dayIndex, openEditModal: props.openEditModal, getEventsFromDate: props.getEventsFromDate, openCreateModal: props.openCreateModal, day: day })); }))));
+        react_1["default"].createElement("div", { className: bem.element('week-days') }, props.monthGridWeekDays.map(function (day, dayIndex) { return (react_1["default"].createElement("span", { key: dayIndex, className: bem.element('week-days-day') }, day)); })),
+        react_1["default"].createElement("div", { className: bem.element('grid') }, props.monthGridCalendarDays.map(function (day, dayIndex) { return (react_1["default"].createElement(MonthDay_1["default"], { key: dayIndex, openEditModal: props.openEditModal, getEventsFromDate: props.getEventsFromDate, openCreateModal: props.openCreateModal, day: day })); }))));
 }
 exports["default"] = (0, react_1.memo)(MonthGrid);

package/content/CalendarSystem/WeekGrid/WeekGrid.d.ts

@@ -3,8 +3,8 @@ import { IDay, IEvent } from '@steroidsjs/core/ui/content/CalendarSystem/Calenda
 import CalendarEnum from '@steroidsjs/core/ui/content/CalendarSystem/enums/CalendarType';
 import './WeekGrid.scss';
 interface IWeekGridProps {
-    currentWeekDays: IDay[];
-    allHours: string[];
+    weekGridTwentyFourHoursArray: string[];
+    weekGridCurrentWeekDays: IDay[];
     getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
     openEditModal: (event: IEvent) => void;
     openCreateModal: (eventInitialDay?: IDay) => void;

package/content/CalendarSystem/WeekGrid/WeekGrid.js

@@ -10,16 +10,16 @@ var WeekHour_1 = __importDefault(require("./views/WeekHour"));
 require("./WeekGrid.scss");
 function WeekGrid(props) {
     var bem = (0, useBem_1["default"])('WeekGrid');
-    var currentWeekDays = props.currentWeekDays, getEventsFromDate = props.getEventsFromDate;
-    var renderWeekHours = react_1["default"].useCallback(function (hour) { return currentWeekDays.map(function (dayOfWeek, dayOfWeekIndex) { return (react_1["default"].createElement(WeekHour_1["default"], { hour: hour, getEventsFromDate: getEventsFromDate, key: dayOfWeekIndex, dayOfWeek: dayOfWeek, openEditModal: props.openEditModal, openCreateModal: props.openCreateModal })); }); }, [currentWeekDays, getEventsFromDate, props.openCreateModal, props.openEditModal]);
+    var weekGridCurrentWeekDays = props.weekGridCurrentWeekDays, getEventsFromDate = props.getEventsFromDate;
+    var renderWeekHours = react_1["default"].useCallback(function (hour) { return weekGridCurrentWeekDays.map(function (dayOfWeek, dayOfWeekIndex) { return (react_1["default"].createElement(WeekHour_1["default"], { hour: hour, getEventsFromDate: getEventsFromDate, key: dayOfWeekIndex, dayOfWeek: dayOfWeek, openEditModal: props.openEditModal, openCreateModal: props.openCreateModal })); }); }, [weekGridCurrentWeekDays, getEventsFromDate, props.openCreateModal, props.openEditModal]);
     return (react_1["default"].createElement("div", { className: bem.block() },
         react_1["default"].createElement("div", { className: bem.element('content') },
-            react_1["default"].createElement("div", { className: bem.element('hours-time') }, props.allHours.map(function (hour, hourIndex) { return (react_1["default"].createElement("div", { key: hourIndex, className: bem.element('hours-time-item') }, hour)); })),
+            react_1["default"].createElement("div", { className: bem.element('hours-time') }, props.weekGridTwentyFourHoursArray.map(function (hour, hourIndex) { return (react_1["default"].createElement("div", { key: hourIndex, className: bem.element('hours-time-item') }, hour)); })),
             react_1["default"].createElement("div", { className: bem.element('table') },
-                react_1["default"].createElement("div", { className: bem.element('table-heading') }, currentWeekDays.map(function (weekDay, weekDayIndex) { return (react_1["default"].createElement(Text_1["default"], { key: weekDayIndex, className: bem.element('day', {
+                react_1["default"].createElement("div", { className: bem.element('table-heading') }, weekGridCurrentWeekDays.map(function (weekDay, weekDayIndex) { return (react_1["default"].createElement(Text_1["default"], { key: weekDayIndex, className: bem.element('day', {
                         isToday: weekDay.isToday
                     }) },
                     react_1["default"].createElement("span", { className: bem.element('day-wrapper') }, weekDay.formattedDisplay))); })),
-                react_1["default"].createElement("div", { className: bem.element('table-grid') }, props.allHours.map(function (hour, hourIndex) { return (react_1["default"].createElement("div", { key: hourIndex, className: bem.element('table-grid-row') }, renderWeekHours(hour))); }))))));
+                react_1["default"].createElement("div", { className: bem.element('table-grid') }, props.weekGridTwentyFourHoursArray.map(function (hour, hourIndex) { return (react_1["default"].createElement("div", { key: hourIndex, className: bem.element('table-grid-row') }, renderWeekHours(hour))); }))))));
 }
 exports["default"] = react_1["default"].memo(WeekGrid);

package/form/CheckboxField/CheckboxFieldView.js

@@ -50,7 +50,7 @@ function CheckboxFieldView(props) {
         }), props.className), style: __assign(__assign({}, props.style), customVariableColorStyle), onClick: props.onChange },
         React.createElement("input", __assign({ className: bem.element('input', {
                 hasCustomColor: !!props.color
-            }), id: props.id || id }, props.inputProps, { disabled: props.disabled, required: props.required })),
+            }), id: props.id || id, disabled: props.disabled, required: props.required }, props.inputProps)),
         React.createElement("label", { className: bem.element('label'), htmlFor: props.id || id }, props.label && (React.createElement("span", { className: bem.element('label-text', { required: props.required }) }, props.label)))));
 }
 exports["default"] = CheckboxFieldView;

package/form/CheckboxTreeField/CheckboxTreeFieldView.d.ts

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

package/form/CheckboxTreeField/CheckboxTreeFieldView.js

@@ -0,0 +1,30 @@
+"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 hooks_1 = require("@steroidsjs/core/hooks");
+var TreeItemView_1 = __importDefault(require("../../nav/TreeItem/TreeItemView"));
+function CheckboxTreeFieldView(props) {
+    var bem = (0, useBem_1["default"])('CheckboxTreeFieldView');
+    var prefix = (0, hooks_1.useUniqueId)('checkbox');
+    return (react_1["default"].createElement("div", { className: bem.block() }, props.items.map(function (checkbox) { return (react_1["default"].createElement(TreeItemView_1["default"], { key: checkbox.uniqueId, item: checkbox, levelPadding: props.levelPadding, hasIconExpandOnly: true }, props.renderCheckbox({
+        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);
+            },
+            disabled: checkbox.disabled,
+            required: checkbox.required
+        },
+        size: props.size,
+        color: checkbox.color
+    }))); })));
+}
+exports["default"] = CheckboxTreeFieldView;

package/form/CheckboxTreeField/CheckboxTreeFieldView.scss

@@ -0,0 +1,5 @@
+.CheckboxTreeFieldView {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 8px;
+}

package/form/CheckboxTreeField/index.d.ts

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

package/form/CheckboxTreeField/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 CheckboxTreeFieldView_1 = __importDefault(require("./CheckboxTreeFieldView"));
+exports["default"] = CheckboxTreeFieldView_1["default"];

package/form/DropDownFieldItem/DropDownFieldItemView.js

@@ -65,7 +65,7 @@ function DropDownItemView(props) {
                     }), size: props.size, inputProps: {
                         disabled: false,
                         name: props.item.label,
-                        checked: null,
+                        checked: props.selectedIds.includes(uniqItemId),
                         onChange: function () { },
                         type: 'radio'
                     }, checked: props.selectedIds.includes(uniqItemId) })));

package/form/PasswordField/PasswordFieldView.js

@@ -51,7 +51,7 @@ function PasswordFieldView(props) {
         React.createElement("div", { className: bem.element('container', {
                 disabled: props.inputProps.disabled
             }) },
-            React.createElement("input", __assign({ className: bem.element('input') }, props.inputProps, { id: props.id })),
+            React.createElement("input", __assign({ className: bem.element('input') }, props.inputProps, { id: props.id, required: props.required })),
             props.showSecurityIcon && (React.createElement("span", { className: bem(bem.element('icon-eye', {
                     viewHide: props.inputProps.type === PasswordField_1.InputType.PASSWORD
                 })), onClick: props.onShowButtonClick },

package/index.d.ts

@@ -83,6 +83,9 @@ declare const _default: {
     'form.CheckboxListFieldView': {
         lazy: () => any;
     };
+    'form.CheckboxTreeFieldView': {
+        lazy: () => any;
+    };
     'form.DateFieldView': {
         lazy: () => any;
     };

package/index.js

@@ -86,6 +86,9 @@ exports["default"] = {
     'form.CheckboxListFieldView': {
         lazy: function () { return require('./form/CheckboxListField/CheckboxListFieldView')["default"]; }
     },
+    'form.CheckboxTreeFieldView': {
+        lazy: function () { return require('./form/CheckboxTreeField/CheckboxTreeFieldView')["default"]; }
+    },
     'form.DateFieldView': {
         lazy: function () { return require('./form/DateField/DateFieldView')["default"]; }
     },

package/index.scss

@@ -37,6 +37,7 @@
 @include meta.load-css('form/Button/ButtonView');
 @include meta.load-css('form/CheckboxField/CheckboxFieldView');
 @include meta.load-css('form/CheckboxListField/CheckboxListFieldView');
+@include meta.load-css('form/CheckboxTreeField/CheckboxTreeFieldView');
 @include meta.load-css('form/DateField/DateFieldView');
 @include meta.load-css('form/DateRangeField/DateRangeFieldView');
 @include meta.load-css('form/DateTimeField/DateTimeFieldView');

package/list/Grid/views/TreeColumnView/TreeColumnView.js

@@ -22,6 +22,6 @@ function TreeColumnView(props) {
     var bem = (0, hooks_1.useBem)('TreeColumnView');
     var renderFormat = function () { return (react_1["default"].createElement(Format_1["default"], __assign({}, props, (props.formatter || {}), { attribute: props.attribute }))); };
     var renderValue = function () { return (react_1["default"].createElement("span", { className: bem.element('value') }, renderFormat())); };
-    return (react_1["default"].createElement(TreeItemView_1["default"], { item: props.item, levelPadding: props.levelPadding, className: bem.block() }, renderValue()));
+    return (react_1["default"].createElement(TreeItemView_1["default"], { item: props.item, levelPadding: props.levelPadding }, renderValue()));
 }
 exports["default"] = TreeColumnView;

package/list/Grid/views/TreeColumnView/TreeColumnView.scss

@@ -1,7 +1,4 @@
 .TreeColumnView {
-  &__value {
-    margin-left: 8px;
-  }
 }
 
 .TreeColumnHeader {

package/nav/TreeItem/TreeItemView.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -29,22 +40,30 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
 var content_1 = require("@steroidsjs/core/ui/content");
+var react_1 = require("react");
 var PADDING_WITH_ICON = 0;
 var PADDING_WITHOUT_ICON = 24;
 function TreeItemView(props) {
     var bem = (0, useBem_1["default"])('TreeItemView');
     var paddingBasedOnIcon = props.item.hasItems ? PADDING_WITH_ICON : PADDING_WITHOUT_ICON;
-    return (React.createElement("div", { key: props.item.uniqueId, className: bem(bem.block({
+    var onExpandProps = (0, react_1.useMemo)(function () { return ({
+        onClick: props.item.onClick,
+        onKeyDown: function (e) { return e.key === 'Enter' && props.item.onClick(e); },
+        role: 'button',
+        tabIndex: 0
+    }); }, [props.item]);
+    return (React.createElement("div", __assign({ key: props.item.uniqueId, className: bem(bem.block({
             selected: props.item.isSelected,
             opened: props.item.isOpened,
             'has-items': props.item.hasItems,
-            level: props.item.level
+            level: props.item.level,
+            disabled: props.item.disabled
         }), props.className), style: {
             paddingLeft: "".concat(props.item.level * props.levelPadding + paddingBasedOnIcon, "px")
-        }, onClick: props.item.onClick, onKeyDown: function (e) { return e.key === 'Enter' && props.item.onClick(e); }, role: 'button', tabIndex: 0 },
-        props.item.hasItems && (React.createElement(content_1.Icon, { name: 'expand_right', className: bem.element('icon', {
+        } }, (!props.hasIconExpandOnly && onExpandProps)),
+        props.item.hasItems && (React.createElement(content_1.Icon, __assign({ name: 'expand_right', className: bem.element('icon', {
                 opened: props.item.isOpened
-            }), tabIndex: -1 })),
+            }) }, (props.hasIconExpandOnly && onExpandProps)))),
         React.createElement("div", { className: bem.element('item') }, props.children)));
 }
 exports["default"] = TreeItemView;

package/nav/TreeItem/TreeItemView.scss

@@ -11,6 +11,8 @@ html[data-theme="dark"] {
 $grid-icon-color: var(--grid-icon-color);
 
 .TreeItemView {
+  $root: &;
+
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
@@ -21,6 +23,23 @@ $grid-icon-color: var(--grid-icon-color);
     cursor: pointer;
   }
 
+  &_disabled {
+    cursor: not-allowed;
+
+    #{$root}__icon {
+      pointer-events: none;
+
+      svg > * {
+          stroke: var(--disabled-text-color);
+      }
+    }
+  }
+
+  &__item {
+    display: flex;
+    margin-left: 8px;
+  }
+
   &__icon {
     transform: rotate(0);
     transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
@@ -29,10 +48,8 @@ $grid-icon-color: var(--grid-icon-color);
       transform: rotate(90deg);
     }
 
-    svg {
-      > * {
+    svg > * {
         stroke: $grid-icon-color;
-      }
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.125",
+    "version": "3.0.0-beta.127",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -37,7 +37,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.108",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.112",
         "@steroidsjs/eslint-config": "^2.1.4",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",