@skbkontur/side-menu 1.8.14 → 1.9.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.9.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.8.15...@skbkontur/side-menu@1.9.0) (2024-02-14)
+
+
+### Features
+
+* **SideMenu:** add markers in minimized state ([3f8b193](https://git.skbkontur.ru/ui/ui-parking/commits/3f8b1939fe69bf515ab7470c652d6f9535b6614a))
+
+
+
+
+
+## [1.8.15](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.8.14...@skbkontur/side-menu@1.8.15) (2024-02-06)
+
+
+### Bug Fixes
+
+* **SideMenu:** add href prop forwarding ([7442a4e](https://git.skbkontur.ru/ui/ui-parking/commits/7442a4e089ce211f93626f54b490a36010c9d1dc))
+
+
+
+
+
 ## [1.8.14](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.8.13...@skbkontur/side-menu@1.8.14) (2024-01-30)
 
 

package/internal/themes/SideMenuTheme.js

@@ -196,16 +196,16 @@ var SideMenuTheme = /** @class */ (function (_super) {
     SideMenuTheme.sideMenuSubItemContentPaddingYForTouchScreens = '9px';
     //#endregion
     // #region Marker
-    SideMenuTheme.sideMenuMarkerPaddingX = '6px';
+    SideMenuTheme.sideMenuMarkerPaddingX = '4px';
     SideMenuTheme.sideMenuMarkerPaddingY = '0px';
     SideMenuTheme.sideMenuMarkerColor = '#fff';
-    SideMenuTheme.sideMenuMarkerFontSize = '14px';
+    SideMenuTheme.sideMenuMarkerFontSize = '12px';
     SideMenuTheme.sideMenuSubItemEmptyMarkerBg = '#adadad';
     SideMenuTheme.sideMenuMarkerMarginRight = '8px';
-    SideMenuTheme.sideMenuMarkerFontWeight = '600';
+    SideMenuTheme.sideMenuMarkerFontWeight = '700';
     SideMenuTheme.sideMenuSubItemMarkerFontWeight = '400';
     SideMenuTheme.sideMenuMarkerMultilineMarginTop = '4px';
-    SideMenuTheme.sideMenuMarkerLineHeight = '20px';
+    SideMenuTheme.sideMenuMarkerLineHeight = '16px';
     //#endregion
     // #region Burger
     SideMenuTheme.sideMenuBurgerMarginRight = '8px';

package/package.json

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

package/src/internal/ClickableElement.js

@@ -98,7 +98,7 @@ var ClickableElement = forwardRef(function (_a, ref) {
                 shouldHighlightTopLevelItemWhenSubItemSelectedInSeparatedMenu ||
                 shouldHighlightTopLevelItemWhenMenuIsMinimized,
             _b[jsStyles.activeRootSubItemInSeparatedSubMenu(theme)] = isActive && context.isSeparatedMenu && _isSubMenu,
-            _b), className), onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur, children: (React.createElement(ItemContent, { _isSubMenu: _isSubMenu, icon: icon, _isNestedSubMenu: _isNestedSubMenu, caption: caption, subCaption: subCaption, marker: marker, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar })), ref: ref }, rest);
+            _b), className), onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur, children: (React.createElement(ItemContent, { _isSubMenu: _isSubMenu, icon: icon, _isNestedSubMenu: _isNestedSubMenu, caption: caption, subCaption: subCaption, marker: marker, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar })), ref: ref, href: href }, rest);
     return (React.createElement(Component, null,
         React.cloneElement(React.createElement(Tag, { state: isActive ? 'active' : undefined }), children
             ? __assign(__assign({}, newProps), { 'aria-expanded': isOpened, 'aria-controls': "" + (id || _generatedId) }) : __assign({}, newProps)),

package/src/internal/ItemContent/ItemContent.js

@@ -42,7 +42,6 @@ var ItemContent = forwardRef(function (_a, ref) {
         if (isMultiline)
             setIsMultiline(true);
     }, [caption, context.isBeingTransitioned]);
-    var isSeparatedSubMenuInNarrowDesktop = _isSubMenu && context.isSeparatedMenu && context.isNarrowDesktop;
     return (React.createElement("div", { className: cx((_b = {},
             _b[jsStyles.root(theme)] = true,
             _b[jsStyles.subItemRoot(theme)] = _isSubMenu,
@@ -59,8 +58,8 @@ var ItemContent = forwardRef(function (_a, ref) {
                 _c[jsStyles.textAndMarkerWrapperDropdown()] = _isDropdown,
                 _c[jsStyles.textAndMarkerWrapperMinimized()] = !context.isOpened && !_isSubMenu,
                 _c)) },
-            React.createElement(Caption, { _isSubMenu: _isSubMenu, _isNestedSubMenu: _isNestedSubMenu, hasIcon: !!icon, isMultiline: isMultiline, caption: caption, subCaption: subCaption, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar, ref: textRef }),
-            marker !== undefined && (context.isOpened || isSeparatedSubMenuInNarrowDesktop) && (React.createElement(Marker, { isMultiline: isMultiline, marker: marker, _isSubMenu: _isSubMenu })))));
+            React.createElement(Caption, { _isSubMenu: _isSubMenu, _isNestedSubMenu: _isNestedSubMenu, hasIcon: !!icon, isMultiline: isMultiline, caption: caption, subCaption: subCaption, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar, ref: textRef })),
+        marker !== undefined && (React.createElement(Marker, { isMultiline: isMultiline, marker: marker, _isSubMenu: _isSubMenu, isMinimized: !context.isOpened }))));
 });
 ItemContent.displayName = 'ItemContent';
 var ItemContentWithStaticFields = Object.assign(ItemContent, { __KONTUR_REACT_UI__: 'ItemContent' });

package/src/internal/ItemContent/ItemContent.styles.js

@@ -3,7 +3,7 @@ import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { memoizeStyle } from '../../../lib/theming/ThemeHelpers';
 var styles = {
     root: function (t) {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      display: flex;\n      align-items: center;\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), t.sideMenuItemContentPaddingY, t.sideMenuItemContentPaddingY);
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      padding-top: ", ";\n      padding-bottom: ", ";\n      position: relative;\n    "], ["\n      display: flex;\n      align-items: center;\n      padding-top: ", ";\n      padding-bottom: ", ";\n      position: relative;\n    "])), t.sideMenuItemContentPaddingY, t.sideMenuItemContentPaddingY);
     },
     largeRoot: function (t) {
         return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding-top: ", " !important;\n      padding-bottom: ", " !important;\n    "], ["\n      padding-top: ", " !important;\n      padding-bottom: ", " !important;\n    "])), t.sideMenuItemContentLargePaddingY, t.sideMenuItemContentLargePaddingY);

package/src/internal/ItemContent/Marker.d.ts

@@ -1,6 +1,7 @@
 import { SideMenuItemProps } from '../../SideMenuItem/SideMenuItem';
 interface MarkerProps extends Pick<SideMenuItemProps, 'marker' | '_isSubMenu'> {
     isMultiline: boolean;
+    isMinimized?: boolean;
 }
-export declare const Marker: ({ isMultiline, marker, _isSubMenu }: MarkerProps) => JSX.Element;
+export declare const Marker: ({ isMultiline, marker, _isSubMenu, isMinimized }: MarkerProps) => JSX.Element;
 export {};

package/src/internal/ItemContent/Marker.js

@@ -5,7 +5,7 @@ import { getSideMenuTheme } from '../../../lib/theming/ThemeHelpers';
 import { ThemeContext } from '@skbkontur/react-ui';
 export var Marker = function (_a) {
     var _b;
-    var isMultiline = _a.isMultiline, marker = _a.marker, _isSubMenu = _a._isSubMenu;
+    var isMultiline = _a.isMultiline, marker = _a.marker, _isSubMenu = _a._isSubMenu, isMinimized = _a.isMinimized;
     var theme = getSideMenuTheme(useContext(ThemeContext));
     var emptyMarker = marker === true || marker === '';
     return (React.createElement("span", { className: cx((_b = {},
@@ -14,5 +14,7 @@ export var Marker = function (_a) {
             _b[jsStyles.rootMultiline(theme)] = isMultiline,
             _b[jsStyles.rootSubMenu(theme)] = _isSubMenu,
             _b[jsStyles.rootSubMenuEmpty(theme)] = _isSubMenu && emptyMarker,
+            _b[jsStyles.rootMinimized()] = isMinimized && !_isSubMenu,
+            _b[jsStyles.rootEmptyMinimized()] = emptyMarker && isMinimized && !_isSubMenu,
             _b)) }, marker));
 };

package/src/internal/ItemContent/Marker.styles.d.ts

@@ -5,4 +5,6 @@ export declare const jsStyles: {
     rootMultiline(t: SideMenuTheme): string;
     rootSubMenu(t: SideMenuTheme): string;
     rootSubMenuEmpty(t: SideMenuTheme): string;
+    rootMinimized(): string;
+    rootEmptyMinimized(): string;
 };

package/src/internal/ItemContent/Marker.styles.js

@@ -17,6 +17,12 @@ var styles = {
     rootSubMenuEmpty: function (t) {
         return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), t.sideMenuSubItemEmptyMarkerBg);
     },
+    rootMinimized: function () {
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      position: absolute;\n      right: 0;\n      top: 0;\n      margin: 0;\n    "], ["\n      position: absolute;\n      right: 0;\n      top: 0;\n      margin: 0;\n    "])));
+    },
+    rootEmptyMinimized: function () {
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      right: 4px;\n      top: 4px;\n    "], ["\n      right: 4px;\n      top: 4px;\n    "])));
+    },
 };
 export var jsStyles = memoizeStyle(styles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;