@steroidsjs/bootstrap 3.0.18 → 3.0.20

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ICalendarSystemViewProps } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
 import './AsideCalendars.scss';
-type IAsideCalendarsProps = Pick<ICalendarSystemViewProps, 'eventGroups' | 'eventGroupsTitle' | 'onChangeEventGroupsIds' | 'openCreateEventGroupModal'>;
+type IAsideCalendarsProps = Pick<ICalendarSystemViewProps, 'eventGroups' | 'eventGroupsTitle' | 'asideCalendarCheckboxListProps' | 'onChangeEventGroupsIds' | 'openCreateEventGroupModal'>;
 declare function AsideCalendars(props: IAsideCalendarsProps): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof AsideCalendars>;
 export default _default;

package/content/CalendarSystem/AsideCalendars/AsideCalendars.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);
@@ -36,7 +47,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, onChange: function (selectedIds) { return props.onChangeEventGroupsIds(selectedIds); } }),
+                react_1["default"].createElement(form_1.CheckboxListField, __assign({ items: props.eventGroups, onChange: function (selectedIds) { return props.onChangeEventGroupsIds(selectedIds); } }, props.asideCalendarCheckboxListProps)),
                 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/CalendarSystemView.js

@@ -44,7 +44,7 @@ function CalendarSystemView(props) {
             react_1["default"].createElement(AsideHeader_1["default"], { openCreateModal: props.openCreateModal, className: bem.element('aside-header') }),
             react_1["default"].createElement(Calendar_1["default"], __assign({ showFooter: false, onTodayButtonClick: props.onCalendarChangedMonth, onMonthChange: props.onCalendarChangedMonth }, props.asideCalendarProps)),
             props.children,
-            react_1["default"].createElement(AsideCalendars_1["default"], { eventGroups: props.eventGroups, eventGroupsTitle: props.eventGroupsTitle, onChangeEventGroupsIds: props.onChangeEventGroupsIds, openCreateEventGroupModal: props.openCreateEventGroupModal })),
+            react_1["default"].createElement(AsideCalendars_1["default"], { eventGroups: props.eventGroups, eventGroupsTitle: props.eventGroupsTitle, onChangeEventGroupsIds: props.onChangeEventGroupsIds, openCreateEventGroupModal: props.openCreateEventGroupModal, asideCalendarCheckboxListProps: props.asideCalendarCheckboxListProps })),
         react_1["default"].createElement("div", { className: bem.element('content') },
             react_1["default"].createElement(ContentHeader_1["default"], { dateToDisplay: props.dateToDisplay, handleCalendarTypeChange: props.handleCalendarTypeChange, onClickControl: props.onClickControl }),
             calendarTypeGrids[props.calendarType])));

package/form/DropDownField/DropDownFieldView.scss

@@ -410,7 +410,7 @@ $drop-down-color-themes: map.merge(
 
     &__icon-close {
         position: absolute;
-        z-index: 9;
+        z-index: 1;
         width: 24px;
         height: 24px;
 

package/form/InputField/InputFieldView.scss

@@ -60,7 +60,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
         }
 
         &:not(:disabled):focus {
-            border: none;
+            border-color: transparent;
         }
     }
 

package/form/PasswordField/PasswordFieldView.scss

@@ -83,7 +83,7 @@ $eye-filled-color: var(--eye-filled-color);
         }
 
         &:not(:disabled):focus {
-            border: none;
+            border-color: transparent;
         }
 
         &:disabled {

package/form/TextField/TextFieldView.scss

@@ -28,6 +28,28 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
         }
     }
 
+    //Statements
+    &::before {
+        content: '';
+        position: absolute;
+        z-index: 2;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+
+        pointer-events: none;
+        transform: translate(-1px, -1px);
+        opacity: 0;
+        transition: opacity 150ms ease-in-out;
+    }
+
+    &:not(#{$root}_disabled):focus-within::before {
+        border: 4px solid variables.$primary-light;
+        transform: translateX(-4px) translateY(-4px);
+        opacity: 1;
+    }
+
     &__clear {
         position: absolute;
         width: 24px;
@@ -64,6 +86,7 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
 
         padding: 5px 40px 8px 8px;
 
+        font-family: variables.$font-family-nunito;
         font-size: variables.$font-size-sm;
         font-weight: 400;
         line-height: 24px;
@@ -80,10 +103,6 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
             border-color: variables.$element-border-color-hover;
         }
 
-        &:focus {
-            border: 4px solid variables.$primary-light;
-        }
-
         &:active {
             border: 1px solid variables.$primary;
         }
@@ -94,6 +113,10 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
             resize: none;
         }
 
+        &:not(:disabled):focus {
+            border-color: transparent;
+        }
+
         &:disabled::placeholder {
             color: variables.$element-placeholder-color-disabled;
         }
@@ -119,6 +142,14 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
                 border-radius: variables.$radius-large;
                 font-size: variables.$font-size-lg;
             }
+
+            &::before {
+                border-radius: variables.$radius-large;
+            }
+
+            &:focus-within::before {
+                border-radius: 16px;
+            }
         }
 
         &_md {
@@ -128,6 +159,14 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
                 border-radius: variables.$radius-large;
                 font-size: variables.$font-size-base;
             }
+
+            &::before {
+                border-radius: variables.$radius-large;
+            }
+
+            &:focus-within::before {
+                border-radius: 16px;
+            }
         }
 
         &_sm {
@@ -136,6 +175,14 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
                 border-radius: variables.$radius-small;
                 font-size: variables.$font-size-sm;
             }
+
+            &::before {
+                border-radius: variables.$radius-small;
+            }
+
+            &:focus-within::before {
+                border-radius: 12px;
+            }
         }
     }
 

package/package.json

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