@skbkontur/side-menu 0.1.2 → 0.2.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.2.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.1.4...@skbkontur/side-menu@0.2.0) (2022-07-25)
+
+
+### Features
+
+* add new icons ([381b7a9](https://git.skbkontur.ru/ui/ui-parking/commits/381b7a957404fa36ed389dd249f38fde8024ffcc))
+
+
+
+
+
+## [0.1.4](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.1.2...@skbkontur/side-menu@0.1.4) (2022-07-01)
+
+**Note:** Version bump only for package @skbkontur/side-menu
+
+
+
+
+
+## [0.1.3](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.1.2...@skbkontur/side-menu@0.1.3) (2022-06-22)
+
+**Note:** Version bump only for package @skbkontur/side-menu
+
+
+
+
+
 ## [0.1.2](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.1.1...@skbkontur/side-menu@0.1.2) (2022-06-14)
 
 **Note:** Version bump only for package @skbkontur/side-menu

package/README.md

@@ -64,7 +64,7 @@ const myTheme = ThemeFactory.create({addonsSideMenuHeaderPosition: 'sticky', add
                 <SideMenu.Avatar
                     userName={'Ишматова Елена'}
                     avatarUrl={getKonturAvatarUrl({
-                        userId: ''
+                        userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
                     })}
                 />
             </SideMenu.Footer>
@@ -176,7 +176,7 @@ const myTheme = ThemeFactory.create({ addonsSideMenuHeaderPosition: 'sticky', ad
         <SideMenu.Avatar
           userName={'Ишматова Елена'}
           avatarUrl={getKonturAvatarUrl({
-            userId: ''
+            userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
           })}
         />
       </SideMenu.Footer>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/side-menu",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

package/src/SideMenu.styles.js

@@ -2,7 +2,7 @@ import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
 var styles = {
     root: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      width: 232px;\n      height: 100%;\n      background: #f0f0f0;\n      padding: 0 16px 24px;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      position: relative;\n      box-sizing: border-box;\n      transition: width 1s;\n    "], ["\n      width: 232px;\n      height: 100%;\n      background: #f0f0f0;\n      padding: 0 16px 24px;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      position: relative;\n      box-sizing: border-box;\n      transition: width 1s;\n    "])));
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      width: 232px;\n      height: 100%;\n      background: #f6f6f6;\n      padding: 0 16px 24px;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      position: relative;\n      box-sizing: border-box;\n      transition: width 1s;\n    "], ["\n      width: 232px;\n      height: 100%;\n      background: #f6f6f6;\n      padding: 0 16px 24px;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      position: relative;\n      box-sizing: border-box;\n      transition: width 1s;\n    "])));
     },
     rootSafari: function () {
         return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      &::-webkit-scrollbar {\n        display: block;\n        width: 10px;\n      }\n      &::-webkit-scrollbar-track {\n        background: #f1f1f1;\n      }\n      &::-webkit-scrollbar-thumb {\n        background: #888;\n      }\n    "], ["\n      &::-webkit-scrollbar {\n        display: block;\n        width: 10px;\n      }\n      &::-webkit-scrollbar-track {\n        background: #f1f1f1;\n      }\n      &::-webkit-scrollbar-thumb {\n        background: #888;\n      }\n    "])));
@@ -17,13 +17,13 @@ var styles = {
         return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      overflow-x: hidden;\n    "], ["\n      overflow-x: hidden;\n    "])));
     },
     rootWrapper: function () {
-        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      height: 100%;\n      display: inline-flex;\n    "], ["\n      height: 100%;\n      display: inline-flex;\n    "])));
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      height: 100%;\n      display: inline-flex;\n      position: relative;\n    "], ["\n      height: 100%;\n      display: inline-flex;\n      position: relative;\n    "])));
     },
     rootWrapperIE: function () {
         return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      position: relative;\n      top: -15px;\n    "], ["\n      position: relative;\n      top: -15px;\n    "])));
     },
     rightBorder: function () {
-        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      position: relative;\n      left: -10px;\n      width: 20px;\n      background: transparent;\n    "], ["\n      position: relative;\n      left: -10px;\n      width: 20px;\n      background: transparent;\n    "])));
+        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      position: absolute;\n      width: 20px;\n      height: 100%;\n      right: -10px;\n      background: transparent;\n    "], ["\n      position: absolute;\n      width: 20px;\n      height: 100%;\n      right: -10px;\n      background: transparent;\n    "])));
     },
     resizableRightBorder: function () {
         return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      cursor: col-resize;\n    "], ["\n      cursor: col-resize;\n    "])));
@@ -35,7 +35,7 @@ var styles = {
         return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      flex-grow: 0;\n    "], ["\n      flex-grow: 0;\n    "])));
     },
     headerWrapper: function () {
-        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      position: sticky;\n      width: 186px;\n      top: 0;\n      background: #f0f0f0;\n      z-index: 1;\n      padding: 24px 8px 16px;\n    "], ["\n      position: sticky;\n      width: 186px;\n      top: 0;\n      background: #f0f0f0;\n      z-index: 1;\n      padding: 24px 8px 16px;\n    "])));
+        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      position: sticky;\n      width: 186px;\n      top: 0;\n      background: #f6f6f6;\n      z-index: 1;\n      padding: 24px 8px 16px;\n    "], ["\n      position: sticky;\n      width: 186px;\n      top: 0;\n      background: #f6f6f6;\n      z-index: 1;\n      padding: 24px 8px 16px;\n    "])));
     },
     headerMinimisedWrapper: function () {
         return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      width: 54px;\n      padding-left: 0 !important;\n      padding-right: 0;\n    "], ["\n      width: 54px;\n      padding-left: 0 !important;\n      padding-right: 0;\n    "])));
@@ -44,7 +44,7 @@ var styles = {
         return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      border-bottom: 1px solid #e6e6e6;\n    "], ["\n      border-bottom: 1px solid #e6e6e6;\n    "])));
     },
     item: function () {
-        return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      width: 100%;\n      background: #f0f0f0;\n      border-radius: 8px;\n      box-sizing: border-box;\n      cursor: pointer;\n      &:hover {\n        background: #f6f6f6;\n      }\n      &:focus {\n        outline: none;\n      }\n    "], ["\n      width: 100%;\n      background: #f0f0f0;\n      border-radius: 8px;\n      box-sizing: border-box;\n      cursor: pointer;\n      &:hover {\n        background: #f6f6f6;\n      }\n      &:focus {\n        outline: none;\n      }\n    "])));
+        return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      width: 100%;\n      background: #f6f6f6;\n      border-radius: 8px;\n      box-sizing: border-box;\n      cursor: pointer;\n      &:hover {\n        background: rgba(255, 255, 255, 0.48);\n      }\n      &:focus {\n        outline: none;\n      }\n    "], ["\n      width: 100%;\n      background: #f6f6f6;\n      border-radius: 8px;\n      box-sizing: border-box;\n      cursor: pointer;\n      &:hover {\n        background: rgba(255, 255, 255, 0.48);\n      }\n      &:focus {\n        outline: none;\n      }\n    "])));
     },
     subItem: function () {
         return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      background: #fff;\n    "], ["\n      background: #fff;\n    "])));

package/src/SideMenuItem.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { SideMenuContextType } from './SideMenuContext';
 export declare type SideMenuItemProps = {
-    _onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
-    _onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
     children?: React.ReactNode;
     icon?: React.ReactElement;
     marker?: string;

package/src/SideMenuItem.js

@@ -47,8 +47,8 @@ var SideMenuItem = /** @class */ (function (_super) {
                 React.createElement(SideMenuThemeContext.Provider, { value: __assign({ hasSubIcons: hasSubItems }, _this.context) }, _this.props.children))));
         };
         _this.handleClick = function (e) {
-            if (_this.props._onClick) {
-                _this.props._onClick(e);
+            if (_this.props.onClick) {
+                _this.props.onClick(e);
             }
             _this.setActive();
             _this.setState({ isOpened: !!_this.props.children });
@@ -69,7 +69,7 @@ var SideMenuItem = /** @class */ (function (_super) {
                 _this.setState({ isOpened: !_this.props.children ? false : !_this.state.isOpened });
                 _this.setActive();
             }
-            (_b = (_a = _this.props)._onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+            (_b = (_a = _this.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
         };
         _this.setActive = function () {
             if (_this.props.isSubMenu) {

package/src/SideMenuOrganisations.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 declare type SideMenuOrganisationsProps = {
     icon?: React.ReactElement;
     children?: React.ReactNode;
+    caption?: string;
 };
 /**
  * Список организаций
@@ -10,6 +11,7 @@ declare type SideMenuOrganisationsProps = {
  */
 export declare class SideMenuOrganisations extends React.Component<SideMenuOrganisationsProps> {
     static __KONTUR_REACT_UI__: string;
+    static defaultProps: Partial<SideMenuOrganisationsProps>;
     render(): JSX.Element;
     renderMain(): JSX.Element;
 }

package/src/SideMenuOrganisations.js

@@ -20,7 +20,7 @@ var SideMenuOrganisations = /** @class */ (function (_super) {
     };
     SideMenuOrganisations.prototype.renderMain = function () {
         var label = (React.createElement("div", { className: jsStyles.dropdownLabel() },
-            React.createElement(SideMenuItem, { icon: this.props.icon, caption: 'СКБ Контур' })));
+            React.createElement(SideMenuItem, { icon: this.props.icon, caption: this.props.caption })));
         return (React.createElement(ThemeContext.Provider, { value: ThemeFactory.create({
                 menuItemHoverBg: '#f6f6f6',
                 menuItemHoverColor: '#222',
@@ -32,6 +32,9 @@ var SideMenuOrganisations = /** @class */ (function (_super) {
                     React.createElement(DropdownMenu, { caption: label, menuWidth: '240px', positions: ['top left'] }, this.props.children)))));
     };
     SideMenuOrganisations.__KONTUR_REACT_UI__ = 'SideMenuOrganisations';
+    SideMenuOrganisations.defaultProps = {
+        caption: 'СКБ Контур',
+    };
     return SideMenuOrganisations;
 }(React.Component));
 export { SideMenuOrganisations };

package/src/SideMenuSubItem.js

@@ -22,7 +22,7 @@ var SideMenuSubItem = /** @class */ (function (_super) {
             if (e.key === 'Enter') {
                 _this.setState({ isOpened: true });
             }
-            (_b = (_a = _this.props)._onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+            (_b = (_a = _this.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
         };
         _this.state = {
             isOpened: false,
@@ -44,7 +44,7 @@ var SideMenuSubItem = /** @class */ (function (_super) {
         }
         return (React.createElement(CommonWrapper, __assign({}, this.props),
             React.createElement("div", null,
-                React.createElement(SideMenuItem, __assign({}, this.props, { _onClick: this.handleClick, icon: icon, isSubMenu: true, _onKeyDown: this.handleKeyDown })),
+                React.createElement(SideMenuItem, __assign({}, this.props, { onClick: this.handleClick, icon: icon, isSubMenu: true, onKeyDown: this.handleKeyDown })),
                 this.props.children && this.state.isOpened && (React.createElement("div", { className: jsStyles.subItemMenu() }, this.props.children)))));
     };
     SideMenuSubItem.__KONTUR_REACT_UI__ = 'SideMenuSubItem';