@steroidsjs/bootstrap 3.0.0-beta.72 → 3.0.0-beta.74

package/content/Badge/BadgeView.d.ts

@@ -1,3 +1,2 @@
 import { IBadgeViewProps } from '@steroidsjs/core/ui/content/Badge/Badge';
-import './BadgeView.scss';
 export default function BadgeView(props: IBadgeViewProps): JSX.Element;

package/content/Badge/BadgeView.js

@@ -6,7 +6,6 @@ exports.__esModule = true;
 var react_1 = __importDefault(require("react"));
 var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
-require("./BadgeView.scss");
 function BadgeView(props) {
     var _a;
     var bem = (0, useBem_1["default"])('BadgeView');

package/content/Badge/BadgeView.scss

@@ -1,5 +1,3 @@
-@import "../../scss/variables";
-
 :root {
     --counter-background-color: #ffffff;
     --counter-border-color: var(--gray);

package/content/Card/CardView.js

@@ -18,8 +18,8 @@ var react_1 = __importDefault(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var form_1 = require("@steroidsjs/core/ui/form");
 var Avatar_1 = __importDefault(require("@steroidsjs/core/ui/content/Avatar/Avatar"));
-var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var nav_1 = require("@steroidsjs/core/ui/nav");
+var content_1 = require("@steroidsjs/core/ui/content");
 function CardView(props) {
     var bem = (0, hooks_1.useBem)('CardView');
     var hasContent = !!(props.title || props.buttons || props.links || props.description || props.children);
@@ -33,7 +33,7 @@ function CardView(props) {
                     react_1["default"].createElement("h3", { className: bem.element('header-head') }, props.header.head),
                     react_1["default"].createElement("p", { className: bem.element('header-subhead') }, props.header.subhead))),
             props.header.menu && (react_1["default"].createElement("div", { className: bem.element('header-menu'), role: 'button' },
-                react_1["default"].createElement(Icon_1["default"], { name: 'menu_dots', className: bem.element('header-dots') }))))),
+                react_1["default"].createElement(content_1.Menu, __assign({}, props.header.menu)))))),
         props.cover && (react_1["default"].createElement("div", { className: bem.element('cover') },
             react_1["default"].createElement("img", { src: props.cover, alt: 'Card cover img' }))),
         hasContent && (react_1["default"].createElement("div", { className: bem.element('content') },

package/content/Card/CardView.scss

@@ -1,16 +1,13 @@
 :root {
-    --card-background-color: $white;
     --card-footer-background-color: var(--additional-light-blue);
     --card-dots-color: #323232;
 }
 
 html[data-theme="dark"] {
-    --card-background-color: var(--graphite);
     --card-footer-background-color: var(--gray-dark);
     --card-dots-color: #ffffff;
 }
 
-$card-background-color: var(--card-background-color);
 $card-footer-background-color: var(--card-footer-background-color);
 $card-dots-color: var(--card-dots-color);
 
@@ -45,7 +42,7 @@ $card-dots-color: var(--card-dots-color);
     border: 1px solid $element-border-color;
     border-radius: $radius-large;
     color: $text-color;
-    background-color: $card-background-color;
+    background-color: $element-background-color;
 
     &__header {
         display: flex;
@@ -55,7 +52,7 @@ $card-dots-color: var(--card-dots-color);
         padding: 18px;
         padding-bottom: 20px;
 
-        &_withoutCover { 
+        &_withoutCover {
             padding-bottom: 3px;
         }
 
@@ -66,7 +63,7 @@ $card-dots-color: var(--card-dots-color);
             column-gap: 8px;
         }
 
-        &-avatar { 
+        &-avatar {
             margin-right: 2px;
         }
 
@@ -88,22 +85,22 @@ $card-dots-color: var(--card-dots-color);
             justify-content: center;
             align-items: center;
             cursor: pointer;
-        }
 
-        &-dots {
-            width: 24px;
-            height: 24px;
+            .MenuView__icon {
+                width: 24px;
+                height: 24px;
 
-            display: flex;
-            justify-content: center;
-            align-items: center;
+                display: flex;
+                justify-content: center;
+                align-items: center;
 
-            rect {
-                fill: $card-dots-color;
-            }
+                rect {
+                    fill: $card-dots-color;
+                }
 
-            svg {
-                transform: translateX(5px);
+                svg {
+                    transform: translateX(5px);
+                }
             }
         }
     }
@@ -149,11 +146,11 @@ $card-dots-color: var(--card-dots-color);
         row-gap: 8px;
         column-gap: $columnGap;
 
-        button:only-of-type { 
+        button:only-of-type {
             width: 100%;
         }
 
-        button:not(:only-of-type) { 
+        button:not(:only-of-type) {
             width: calc(50% - $columnGap / 2);
         }
     }

package/content/DropDown/DropDownView.scss

@@ -1,5 +1,3 @@
-@import "../../scss/variables/";
-
 :root {
     --dropdown-background: #fff;
     --dropdown-border: #dbe2e6;

package/form/AutoCompleteField/AutoCompleteFieldView.d.ts

@@ -1,3 +1,2 @@
 import { IAutoCompleteFieldViewProps } from '@steroidsjs/core/ui/form/AutoCompleteField/AutoCompleteField';
-import './AutoCompleteFieldView.scss';
 export default function AutoCompleteFieldView(props: IAutoCompleteFieldViewProps): JSX.Element;

package/form/AutoCompleteField/AutoCompleteFieldView.js

@@ -42,7 +42,6 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
 var Text_1 = __importDefault(require("@steroidsjs/core/ui/typography/Text/Text"));
 var content_1 = require("@steroidsjs/core/ui/content");
-require("./AutoCompleteFieldView.scss");
 var normalizeItems = function (items) {
     var categories = {};
     var itemsWithoutCategory = [];

package/form/AutoCompleteField/AutoCompleteFieldView.scss

@@ -1,6 +1,3 @@
-@import "../../scss/variables";
-@import "../../scss/mixins";
-
 :root {
     --autocomplete-hover-color: #f1f5f7;
     --autocomplete-selected-color: #dbe2e6;

package/form/RateField/RateFieldView.js

@@ -26,20 +26,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 function RateFieldView(props) {
+    var _a;
     var bem = (0, hooks_1.useBem)('RateFieldView');
-    return (React.createElement("div", { className: bem(bem.block(), props.className) }, props.items.map(function (item, index) { return (React.createElement("div", { key: index, className: bem.element('rate-item', {
-            'is-full': item.value <= props.inputProps.value
-        }), onClick: function (e) {
-            e.preventDefault();
-            props.onItemClick(item);
-        } },
-        React.createElement("span", { className: bem.element('rate-value-first') },
-            React.createElement(Icon_1["default"], { className: bem.element('rate-icon'), name: 'star' })),
-        React.createElement("span", { className: bem.element('rate-value-second') },
-            React.createElement(Icon_1["default"], { className: bem.element('rate-icon'), name: 'star' })))); })));
+    return (React.createElement("div", { className: bem(bem.block({
+            size: props.size,
+            disabled: props.disabled
+        }), props.className), style: props.style },
+        React.createElement("ul", { className: bem.element('rate-list') }, props.items.map(function (item, index) { return (React.createElement("div", { key: index, className: bem.element('rate-item', {
+                'is-full': item.value <= props.inputProps.value
+            }), onClick: function (e) {
+                e.preventDefault();
+                props.onItemClick(item);
+            } },
+            React.createElement("span", { className: bem.element('rate-value-first') },
+                React.createElement(Icon_1["default"], { className: bem.element('rate-icon'), name: 'star' })),
+            React.createElement("span", { className: bem.element('rate-value-second') },
+                React.createElement(Icon_1["default"], { className: bem.element('rate-icon'), name: 'star' })))); })),
+        props.badge && (React.createElement("span", { className: bem.element('badge') }, (_a = props.badge) === null || _a === void 0 ? void 0 : _a.title))));
 }
 exports["default"] = RateFieldView;

package/form/RateField/RateFieldView.scss

@@ -1,57 +1,130 @@
-@import '../../scss/variables';
+$ratefield-sizes: () !default;
+$ratefield-sizes: map-merge(
+    (
+        "sm": (
+            "size": 18px,
+            "badge-gap": 8px,
+            "badge-paddings": 1px 8px,
+            "badge-radius": 6px,
+        ),
+        "md": (
+            "size": 22px,
+            "badge-gap": 12px,
+            "badge-paddings": 3px 8px,
+            "badge-radius": 6px,
+        ),
+        "lg": (
+            "size": 24px,
+            "badge-gap": 16px,
+            "badge-paddings": 4px 8px,
+            "badge-radius": $radius-small,
+        ),
+    ),
+    $ratefield-sizes
+);
 
 .RateFieldView {
+    $root: &;
 
-  $root: &;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
 
-  &:focus, & *:focus {
-    outline: none!important;
-  }
+    &:focus,
+    & *:focus {
+        outline: none !important;
+    }
 
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
+    &__rate-list {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        column-gap: 2px;
+    }
 
-  &__rate-item {
-    cursor: pointer;
-    position: relative;
-    margin-right: 10px;
-    line-height: 0;
+    &__rate-item {
+        cursor: pointer;
+        position: relative;
+        line-height: 0;
 
-    &_is-full{
-      #{$root}__rate-value-second {
-        width: 100%;
+        &_is-full {
+            #{$root}__rate-value-second {
+                width: 100%;
 
-        #{$root}__rate-icon {
-          path {
-            fill: $icon-color;
-          }
+                #{$root}__rate-icon {
+                    path {
+                        fill: $primary;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 
-  &__rate-value-first, &__rate-value-second {
-    display: inline-block;
-    width: $icon-size;
-    height: $icon-size;
-  }
+    &__rate-value-first,
+    &__rate-value-second {
+        display: inline-block;
+    }
 
-  &__rate-value-second {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 0;
-  }
+    &__rate-value-second {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 0;
+    }
 
-  &__rate-icon {
-    &.IconView svg {
-      width: $icon-size;
+    &__rate-icon {
+        &.IconView svg {
+            path {
+                fill: $gray;
+            }
+        }
+    }
 
-      path {
-        fill: $gray-dark;
-      }
+    &__badge {
+        display: block;
+        background-color: $primary;
+        color: $white;
+        font-size: $font-size-xs;
+        line-height: $line-height-xs;
     }
-  }
 
-}
+    &_size {
+        @each $size, $sizeMap in $ratefield-sizes {
+            &_#{$size} {
+                #{$root}__rate-icon {
+                    &.IconView svg {
+                        width: map-get($sizeMap, size);
+                        height: map-get($sizeMap, size);
+                    }
+                }
+
+                #{$root}__rate-value-first,
+                #{$root}__rate-value-second {
+                    width: map-get($sizeMap, size);
+                    height: map-get($sizeMap, size);
+                }
+
+                #{$root}__badge {
+                    margin-left: map-get($sizeMap, badge-gap);
+                    padding: map-get($sizeMap, badge-paddings);
+                    border-radius: map-get($sizeMap, badge-radius);
+                }
+            }
+        }
+    }
+
+    &_disabled {
+        cursor: not-allowed;
+
+        #{$root}__rate-item {
+            pointer-events: none;
+        }
+        #{$root}__rate-icon {
+            &.IconView svg {
+                path {
+                    fill: $light-gray;
+                }
+            }
+        }
+    }
+}

package/form/ReCaptchaField/ReCaptchaFieldView.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);
@@ -22,19 +33,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 nav_1 = require("@steroidsjs/core/ui/nav");
+var react_google_recaptcha_1 = __importDefault(require("react-google-recaptcha"));
 function ReCaptchaFieldView(props) {
     var bem = (0, hooks_1.useBem)('ReCaptchaFieldView');
-    return (React.createElement("div", { className: bem.block() },
-        React.createElement("small", { className: 'text-muted' },
-            __('This site is protected by reCAPTCHA and the Google') + ' ',
-            React.createElement(nav_1.Link, { url: 'https://policies.google.com/privacy', target: '_blank', label: __('Privacy Policy') }),
-            ' ' + __('and') + ' ',
-            React.createElement(nav_1.Link, { url: 'https://policies.google.com/terms', target: '_blank', label: __('Terms of Service') }),
-            ' ' + __('apply'),
-            ".")));
+    var theme = (0, hooks_1.useTheme)().theme;
+    return (React.createElement("div", { className: bem(bem.block(), props.className), style: props.style },
+        React.createElement(react_google_recaptcha_1["default"], __assign({}, props.recaptchaOptions, { theme: theme }))));
 }
 exports["default"] = ReCaptchaFieldView;

package/form/ReCaptchaField/ReCaptchaFieldView.scss

@@ -1,5 +1 @@
-.ReCaptchaFieldView {}
-
-.grecaptcha-badge {
-  visibility: hidden;
-}
+.ReCaptchaFieldView {}

package/index.scss

@@ -1,3 +1,4 @@
+@import './scss/normalize';
 @import './scss/mixins';
 @import './scss/variables';
 @import './scss/animations';
@@ -14,7 +15,7 @@
 @import './content/Calendar/CaptionElement';
 @import './content/Card/CardView';
 @import './content/Detail/DetailView';
-@import './content/DropDown/DropDownView.scss';
+@import './content/DropDown/DropDownView';
 @import './content/Menu/MenuItemView';
 @import './content/Menu/MenuView';
 @import './content/Icon/IconView';
@@ -63,6 +64,7 @@
 @import './list/CheckboxColumn/CheckboxColumnView';
 @import './list/Empty/EmptyView';
 @import './list/Grid/GridView';
+@import './list/Grid/views/ContentColumnView/ContentColumnView';
 @import './list/FlexGrid/FlexGridView';
 @import './list/List/ListView';
 @import './list/Pagination/PaginationButtonView';

package/layout/Header/HeaderView.scss

@@ -1,5 +1,3 @@
-@import '../../scss/variables';
-
 .HeaderView {
   display: flex;
   justify-content: space-between;

package/list/Empty/EmptyView.scss

@@ -1,4 +1,3 @@
-@import '../../scss/variables';
 
 .EmptyView {
   text-align: center;

package/list/Grid/views/ContentColumnView/ContentColumnView.d.ts

@@ -1,3 +1,2 @@
 import { IContentColumnViewProps } from '@steroidsjs/core/ui/list/Grid/Grid';
-import './ContentColumnView.scss';
 export default function ContentColumnView(props: IContentColumnViewProps): JSX.Element;

package/list/Grid/views/ContentColumnView/ContentColumnView.js

@@ -20,7 +20,6 @@ var Format_1 = __importDefault(require("@steroidsjs/core/ui/format/Format"));
 var get_1 = __importDefault(require("lodash-es/get"));
 var nav_1 = require("@steroidsjs/core/ui/nav");
 var content_1 = require("@steroidsjs/core/ui/content");
-require("./ContentColumnView.scss");
 function ContentColumnView(props) {
     var _a, _b, _c, _d, _e;
     var bem = (0, useBem_1["default"])('ContentColumnView');

package/list/Grid/views/ContentColumnView/ContentColumnView.scss

@@ -1,5 +1,3 @@
-@import "style/variables";
-
 :root {
     --grid-icon-color: #323232;
 }

package/list/List/ListView.scss

@@ -1,5 +1,3 @@
-@import '../../scss/variables';
-
 .ListView {
     color: $text-color;
 

package/modal/TwoFactorModal/TwoFactorModalView.d.ts

@@ -1,3 +1,2 @@
 import { ITwoFactorModalViewProps } from '@steroidsjs/core/ui/modal/TwoFactorModal/TwoFactorModal';
-import './TwoFactorModalView.scss';
 export default function TwoFactorModalView(props: ITwoFactorModalViewProps): JSX.Element;

package/modal/TwoFactorModal/TwoFactorModalView.js

@@ -17,7 +17,6 @@ exports.__esModule = true;
 var react_1 = __importDefault(require("react"));
 var Modal_1 = __importDefault(require("@steroidsjs/core/ui/modal/Modal"));
 var form_1 = require("@steroidsjs/core/ui/form");
-require("./TwoFactorModalView.scss");
 var hooks_1 = require("@steroidsjs/core/hooks");
 function TwoFactorModalView(props) {
     var bem = (0, hooks_1.useBem)('TwoFactorModalView');

package/modal/TwoFactorModal/TwoFactorModalView.scss

@@ -1,4 +1,2 @@
-@import 'style/variables';
-
 .TwoFactorModal {
 }

package/nav/ButtonGroup/ButtonGroupView.scss

@@ -1,5 +1,3 @@
-@import "../../scss/variables/";
-
 :root {
     --button-group-background: #DBE2E6;
     --button-group-separator-color: #CBD5DB;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.72",
+    "version": "3.0.0-beta.74",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -29,13 +29,14 @@
         "react-collapse": "^5.0.1",
         "react-day-picker": "^7.4.10",
         "react-dom": "^18.2.0",
+        "react-google-recaptcha": "^3.1.0",
         "react-image-crop": "^9.0.2",
         "react-modal": "^3.11.2",
         "react-transition-group": "^2.9.0",
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.50",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.53",
         "@steroidsjs/eslint-config": "^2.1.4",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",
@@ -53,6 +54,6 @@
         "typescript": "^4.9.5"
     },
     "peerDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.47"
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.52"
     }
 }

package/scss/variables/index.scss

@@ -1,4 +1,3 @@
-@import 'normalize.scss';
 @import 'common/colors';
 @import 'common/media';
 @import 'common/typography';