@steroidsjs/bootstrap 3.0.0-beta.41 → 3.0.0-beta.42

package/content/DropDown/DropDownView.d.ts

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

package/content/DropDown/DropDownView.js

@@ -30,7 +30,6 @@ var isFunction_1 = __importDefault(require("lodash-es/isFunction"));
 var React = __importStar(require("react"));
 var react_use_1 = require("react-use");
 var hooks_1 = require("@steroidsjs/core/hooks");
-require("./DropDownView.scss");
 var react_1 = require("react");
 function DropDownView(props) {
     var _a;

package/content/DropDown/DropDownView.scss

@@ -2,18 +2,18 @@
 
 :root {
     --dropdown-background: #fff;
-    --dropdown-triangle-border: #eef1f2;
-    --dropdown-triangle-svg: url("data:image/svg+xml,%3Csvg width='21' height='11' viewBox='0 0 21 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.0416 0.5L10.1719 10.2567L1.30215 0.499998L19.0416 0.5Z' fill='white' stroke='%23EEF1F2'/%3E%3C/svg%3E%0A");
+    --dropdown-border: #dbe2e6;
+    --dropdown-triangle-svg: url("data:image/svg+xml,%3Csvg width='21' height='11' viewBox='0 0 21 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.0416 0.5L10.1719 10.2567L1.30215 0.499998L19.0416 0.5Z' fill='white' stroke='%23dbe2e6'/%3E%3C/svg%3E%0A");
 }
 
 html[data-theme="dark"] {
     --dropdown-background: #4e4f57;
-    --dropdown-triangle-border: transparent;
+    --dropdown-border: transparent;
     --dropdown-triangle-svg: url("data:image/svg+xml,%3Csvg width='21' height='11' viewBox='0 0 21 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.1719 11L0.171876 -1.74846e-06L20.1719 0L10.1719 11Z' fill='%234E4F57'/%3E%3C/svg%3E%0A");
 }
 
 $dropdown-background: var(--dropdown-background);
-$dropdown-triangle-border: var(--triangle-border);
+$dropdown-border: var(--dropdown-border);
 $dropdown-triangle-svg: var(--dropdown-triangle-svg);
 
 $gap: 12px;
@@ -35,8 +35,8 @@ $gap: 12px;
     width: 16px;
     height: 1px;
     background-color: $dropdown-background;
-    border-left: 2px solid $dropdown-triangle-border;
-    border-right: 2px solid $dropdown-triangle-border;
+    border-left: 2px solid $dropdown-border;
+    border-right: 2px solid $dropdown-border;
 }
 
 @mixin drop($edge, $padding) {
@@ -120,11 +120,11 @@ $gap: 12px;
     transition: opacity 0.15s ease-in, transform 0.15s ease-in;
 
     z-index: 4;
-    width: 200px;
+    min-width: 200px;
     padding: 12px;
     border-radius: $radius-large;
     background-color: $dropdown-background;
-    border: 1px solid $gray;
+    border: 1px solid $dropdown-border;
 
     &_show {
         opacity: 1;

package/content/Menu/MenuItemView.d.ts

@@ -0,0 +1,2 @@
+import { IMenuItemProps } from '@steroidsjs/core/ui/content/Menu/Menu';
+export default function MenuItemView(props: IMenuItemProps): JSX.Element;

package/content/Menu/MenuItemView.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var hooks_1 = require("@steroidsjs/core/hooks");
+var react_1 = __importDefault(require("react"));
+var renderIcon_1 = __importDefault(require("../../utils/renderIcon"));
+function MenuItemView(props) {
+    var bem = (0, hooks_1.useBem)('MenuItemView');
+    return (react_1["default"].createElement("div", { onClick: props.onClick, className: bem.block({ hasBorder: props.hasBorder, noneIcon: !props.icon }) },
+        props.icon && (0, renderIcon_1["default"])(props.icon, { className: bem.element('icon') }),
+        react_1["default"].createElement("span", { className: bem.element('label') }, props.label)));
+}
+exports["default"] = MenuItemView;

package/content/Menu/MenuItemView.scss

@@ -0,0 +1,63 @@
+:root {
+    --color-menu-item: #323232;
+    --color-border: rgba(0, 0, 0, 0.1);
+  }
+  
+  html[data-theme="dark"] { 
+    --color-menu-item: #ffffff;
+    --color-border: rgba(255, 255, 255, 0.1);
+  }
+
+  $color-menu-item: var(--color-menu-item);
+  $color-border: var(--color-border);
+
+.MenuItemView {
+    cursor: pointer;
+    display: flex;
+    padding: 8px 12px;
+
+    &:first-child {
+      border-top-right-radius: 12px;
+      border-top-left-radius: 12px;
+    }
+
+    &:last-child {
+      border-bottom-right-radius: 12px;
+      border-bottom-left-radius: 12px;
+    }
+
+    &__label {
+        color: $color-menu-item;
+        font-size: $font-size-xs;
+        line-height: $line-height-xs;
+    }
+
+    &__icon {
+        display: flex;
+        margin-right: 8px;
+        align-items: center;
+        justify-content: center;
+
+        svg {
+            stroke: $color-menu-item;
+            width: $icon-size;
+            height: $icon-size;
+          }
+
+        svg > * {
+            stroke:inherit;
+        }
+    }
+
+    &_noneIcon {
+      padding-left: 36px;
+    }
+
+    &:hover {
+        background-color: $gray;
+    }
+
+    &_hasBorder{
+        border-bottom: 1px solid $color-border;
+    }
+}

package/content/Menu/MenuView.d.ts

@@ -0,0 +1,2 @@
+import { IMenuViewProps } from '@steroidsjs/core/ui/content/Menu/Menu';
+export default function MenuView(props: IMenuViewProps): JSX.Element;

package/content/Menu/MenuView.js

@@ -0,0 +1,30 @@
+"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 };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var content_1 = require("@steroidsjs/core/ui/content");
+var hooks_1 = require("@steroidsjs/core/hooks");
+var renderIcon_1 = __importDefault(require("../../utils/renderIcon"));
+function MenuView(props) {
+    var bem = (0, hooks_1.useBem)('MenuView');
+    var MenuItemView = props.itemView;
+    var renderMenuItems = react_1["default"].useCallback(function () { return (react_1["default"].createElement(react_1["default"].Fragment, null, props.items.map(function (item, index) { return (react_1["default"].createElement(MenuItemView, __assign({ key: index }, item))); }))); }, [MenuItemView, props.items]);
+    return (react_1["default"].createElement(content_1.DropDown, __assign({}, props.dropDownProps, { className: bem(bem.block(), props.className), content: renderMenuItems }),
+        react_1["default"].createElement("span", { className: bem.element('button') }, props.icon
+            ? (0, renderIcon_1["default"])(props.icon, { className: bem.element('icon') })
+            : (react_1["default"].createElement(content_1.Icon, { name: 'dots', className: bem.element('icon') })))));
+}
+exports["default"] = MenuView;

package/content/Menu/MenuView.scss

@@ -0,0 +1,43 @@
+:root {
+    --color-icon: #323232;
+  }
+  
+  html[data-theme="dark"] { 
+    --color-icon: #ffffff;
+  }
+
+  $color-icon: var(--color-icon);
+
+.MenuView {
+    width: 248px;
+    padding: 0;
+    border: none;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+    
+    &::before, &::after {
+        content: none;
+    }
+
+    &__button {
+        display: inline-flex;
+        cursor: pointer;
+    }
+
+    &__icon {
+        display: inline-flex;
+        
+        svg {
+            stroke: $color-icon;
+            width: $icon-size-lg;
+            height: $icon-size-lg;
+        }
+
+        svg rect {
+           fill : $color-icon;
+        }
+
+        svg > * {
+            stroke:inherit;
+        }
+    }
+}

package/icons/index.js

@@ -272,6 +272,12 @@ exports["default"] = (function (customIcons) {
         'home',
         'arrow-left',
         'double-arrow-left',
+        'copy',
+        'cut',
+        'edit-duotone',
+        'paste',
+        'pin',
+        'trash',
     ];
     steroidsIcons.forEach(function (iconName) {
         icons[iconName] = require("./svgs/".concat(iconName, ".svg"));

package/icons/svgs/copy.svg

@@ -0,0 +1,5 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.13281 4.61729C5.13281 3.77721 5.13281 3.35717 5.2963 3.0363C5.44011 2.75406 5.66958 2.52459 5.95183 2.38078C6.27269 2.21729 6.69273 2.21729 7.53281 2.21729H9.09334C9.4489 2.21729 9.62669 2.21729 9.79459 2.25639C9.94347 2.29107 10.0862 2.34831 10.2178 2.42611C10.3661 2.51386 10.4947 2.6367 10.7517 2.88239L12.3912 4.44954C12.6646 4.71092 12.8013 4.84161 12.8992 4.99585C12.986 5.13258 13.0501 5.28246 13.089 5.43966C13.1328 5.61701 13.1328 5.80615 13.1328 6.18443V9.81729C13.1328 10.6574 13.1328 11.0774 12.9693 11.3983C12.8255 11.6805 12.596 11.91 12.3138 12.0538C11.9929 12.2173 11.5729 12.2173 10.7328 12.2173H7.53281C6.69273 12.2173 6.27269 12.2173 5.95183 12.0538C5.66958 11.91 5.44011 11.6805 5.2963 11.3983C5.13281 11.0774 5.13281 10.6574 5.13281 9.81729V4.61729Z" stroke="#323232"/>
+<path d="M3.30078 4.04736V10.0474C3.30078 11.4475 3.30078 12.1476 3.57326 12.6823C3.81295 13.1527 4.1954 13.5352 4.6658 13.7749C5.20058 14.0474 5.90065 14.0474 7.30078 14.0474H11.3008" stroke="#323232" stroke-linecap="round"/>
+<path d="M9.40234 2.21729V3.81729C9.40234 4.65736 9.40234 5.0774 9.56583 5.39827C9.70964 5.68051 9.93911 5.90998 10.2214 6.0538C10.5422 6.21729 10.9623 6.21729 11.8023 6.21729H13.4023" stroke="#323232"/>
+</svg>

package/icons/svgs/cut.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.09556 10.9895C6.19156 11.1799 6.19156 11.3704 6.19156 11.5609C6.19156 12.6085 5.32756 13.4656 4.27156 13.4656C3.21556 13.4656 2.35156 12.6085 2.35156 11.5609C2.35156 10.5133 3.21556 9.65612 4.27156 9.65612C4.46356 9.65612 4.55956 9.65612 4.65556 9.75136M7.53556 9.56089L11.5676 13.4656H14.2556L6.09556 5.37041C6.19156 5.17993 6.19156 5.0847 6.19156 4.89422C6.19156 3.8466 5.32756 2.98946 4.27156 2.98946C3.21556 2.98946 2.35156 3.8466 2.35156 4.89422C2.35156 5.94184 3.21556 6.79898 4.27156 6.79898C4.46356 6.79898 4.65556 6.79898 4.75156 6.70374L6.19156 8.22755M7.53556 9.56089L6.19156 8.22755M7.53556 9.56089L5.51956 10.2276L6.19156 8.22755M8.49556 5.8466L11.6636 2.79898H14.3516L9.93556 7.27517" stroke="#323232" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/edit-duotone.svg

@@ -0,0 +1,4 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.50076 13.3191L3.85432 12.9655L3.50076 13.3191C3.71017 13.5285 3.97123 13.532 4.12596 13.5169C4.2665 13.5031 4.43384 13.4612 4.59053 13.422C4.59946 13.4197 4.60836 13.4175 4.61722 13.4153L6.04057 13.0594C6.05569 13.0557 6.0707 13.0519 6.08559 13.0482C6.30832 12.9928 6.5055 12.9437 6.68453 12.8424C6.86356 12.741 7.00709 12.5972 7.16922 12.4347C7.18006 12.4238 7.19098 12.4129 7.202 12.4019L11.9949 7.60894L11.9949 7.60894L12.0026 7.60126L12.0026 7.60125L12.0132 7.59067C12.1585 7.44538 12.2838 7.32002 12.3811 7.20947C12.4834 7.09315 12.5776 6.96826 12.6445 6.81726C12.8162 6.4301 12.8162 5.9884 12.6445 5.60123C12.5776 5.45024 12.4834 5.32534 12.3811 5.20903C12.2839 5.09848 12.1585 4.97312 12.0132 4.82784L12.0026 4.81724L12.0026 4.81723L11.992 4.80665C11.8467 4.66135 11.7214 4.53598 11.6108 4.43872C11.4945 4.33639 11.3696 4.24224 11.2186 4.17529C10.8314 4.00362 10.3897 4.00362 10.0026 4.17529C9.85156 4.24224 9.72667 4.33639 9.61035 4.43872C9.4998 4.53598 9.37444 4.66135 9.22915 4.80664L9.21856 4.81723L4.41797 9.61783C4.40695 9.62885 4.396 9.63977 4.38514 9.65061C4.22267 9.81274 4.07884 9.95626 3.97747 10.1353C3.87611 10.3143 3.82703 10.5115 3.7716 10.7342C3.76789 10.7491 3.76416 10.7641 3.76038 10.7793L3.40454 12.2026C3.40233 12.2115 3.4001 12.2204 3.39786 12.2293C3.35862 12.386 3.31671 12.5533 3.30296 12.6939C3.28782 12.8486 3.29135 13.1096 3.50076 13.3191Z" stroke="#323232"/>
+<path d="M8.68359 5.13232L11.3503 7.79899" stroke="#323232"/>
+</svg>

package/icons/svgs/paste.svg

@@ -0,0 +1,8 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.55469 14.1323C3.61188 14.1323 3.14047 14.1323 2.84758 13.7418C2.55469 13.3513 2.55469 12.7227 2.55469 11.4657V4.79899C2.55469 3.54191 2.55469 2.91337 2.84758 2.52285C3.14047 2.13232 3.61188 2.13232 4.55469 2.13232M9.55469 2.13232C10.4975 2.13232 10.9689 2.13232 11.2618 2.52285C11.5547 2.91337 11.5547 3.54191 11.5547 4.79899" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="6.14844" y="6.19141" width="8" height="9" rx="2" stroke="#323232"/>
+<path d="M8.14844 8.19141L11.1484 8.19141" stroke="#323232" stroke-linecap="round"/>
+<path d="M8.14844 13.5247L10.1484 13.5247" stroke="#323232" stroke-linecap="round"/>
+<path d="M8.14844 10.8581L12.1484 10.8581" stroke="#323232" stroke-linecap="round"/>
+<rect x="4.55469" y="0.79895" width="5" height="3" rx="1.5" stroke="#323232"/>
+</svg>

package/icons/svgs/pin.svg

@@ -0,0 +1,4 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.04983 3.54182C9.70288 3.10644 10.0294 2.88876 10.3852 2.92399C10.741 2.95921 11.0184 3.23671 11.5734 3.7917L12.6922 4.91045C13.2472 5.46544 13.5247 5.74293 13.5599 6.0987C13.5951 6.45448 13.3774 6.781 12.9421 7.43406L12.0928 8.70791C11.9799 8.8773 11.9234 8.96199 11.8696 9.04735C11.3845 9.81638 11.034 10.6625 10.8333 11.5493C10.811 11.6477 10.791 11.7475 10.7511 11.9472L10.6198 12.6037C10.5226 13.0899 9.95922 13.3174 9.55159 13.0352V13.0352C7.16695 11.3843 5.09956 9.31694 3.44866 6.9323V6.9323C3.16645 6.52466 3.39402 5.96133 3.88019 5.8641L4.53672 5.73279C4.73635 5.69287 4.83616 5.67291 4.93459 5.65062C5.82141 5.44987 6.66751 5.0994 7.43653 4.61428C7.52189 4.56044 7.60659 4.50398 7.77597 4.39105L9.04983 3.54182Z" stroke="#323232"/>
+<path d="M3.10907 13.2116L5.9375 10.3832" stroke="#323232" stroke-linecap="round"/>
+</svg>

package/icons/svgs/trash.svg

@@ -0,0 +1,6 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.68359 9.79899L6.68359 7.79899" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.0195 9.79899L10.0195 7.79899" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.35156 4.46566H14.3516V4.46566C14.0419 4.46566 13.8871 4.46566 13.7572 4.48277C12.8597 4.60092 12.1535 5.30714 12.0353 6.2046C12.0182 6.33457 12.0182 6.48938 12.0182 6.79899V9.79899C12.0182 11.3627 12.0182 12.1446 11.6049 12.6832C11.4985 12.8218 11.3744 12.946 11.2358 13.0524C10.6971 13.4657 9.91528 13.4657 8.35156 13.4657V13.4657C6.78785 13.4657 6.00599 13.4657 5.46737 13.0524C5.32871 12.946 5.20459 12.8218 5.09819 12.6832C4.6849 12.1446 4.6849 11.3627 4.6849 9.79899V6.79899C4.6849 6.48938 4.6849 6.33457 4.66779 6.2046C4.54963 5.30714 3.84342 4.60092 2.94595 4.48277C2.81598 4.46566 2.66118 4.46566 2.35156 4.46566V4.46566Z" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.01562 2.79895C7.01562 2.79895 7.31562 1.79895 8.51562 1.79895C9.71562 1.79895 10.0156 2.79871 10.0156 2.79871" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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;
     };

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"]; }
     },

package/index.scss

@@ -13,6 +13,9 @@
 @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 './form/AutoCompleteField/AutoCompleteFieldView';
 @import './form/Button/ButtonView';
 @import './form/CheckboxField/CheckboxFieldView';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.41",
+    "version": "3.0.0-beta.42",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -35,7 +35,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.18",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.20",
         "@steroidsjs/eslint-config": "^2.1.4",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",
@@ -53,6 +53,6 @@
         "typescript": "^4.9.5"
     },
     "peerDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.18"
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.20"
     }
 }