@skbkontur/side-menu 2.1.7 → 3.0.0-beta.0

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.1.8](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@2.1.7...@skbkontur/side-menu@2.1.8) (2024-09-18)
+
+**Note:** Version bump only for package @skbkontur/side-menu
+
+
+
+
+
 ## [2.1.7](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@2.1.6...@skbkontur/side-menu@2.1.7) (2024-09-17)
 
 **Note:** Version bump only for package @skbkontur/side-menu

package/lib/theming/ThemeHelpers.d.ts

@@ -11,7 +11,7 @@ import { SideMenuTheme } from './ThemeTypes';
  * and using ReactUI's ThemeContext.Provider for overriding them.
  */
 export declare const createSideMenuTheme: (theme: ReactUITheme | SideMenuTheme) => SideMenuTheme;
-export declare const getSideMenuTheme: (() => Readonly<typeof import("../../internal/themes/SideMenuTheme").SideMenuTheme>) | ((arg: Readonly<typeof import("@skbkontur/react-ui/internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/SideMenuTheme").SideMenuTheme>) => Readonly<typeof import("../../internal/themes/SideMenuTheme").SideMenuTheme>);
+export declare const getSideMenuTheme: (() => Readonly<typeof import("../../internal/themes/SideMenuTheme").SideMenuTheme>) | ((arg: Readonly<typeof import("@skbkontur/react-ui/internal/themes/BasicLightTheme").BasicLightThemeInternal> | Readonly<typeof import("../../internal/themes/SideMenuTheme").SideMenuTheme>) => Readonly<typeof import("../../internal/themes/SideMenuTheme").SideMenuTheme>);
 export declare const memoizeStyle: <S extends {
     [className: string]: (() => string) | ((t: SideMenuTheme) => string);
 }>(styles: S) => S;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/side-menu",
-  "version": "2.1.7",
+  "version": "3.0.0-beta.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -14,16 +14,16 @@
   },
   "author": "Kontur",
   "peerDependencies": {
-    "@skbkontur/react-ui": ">=4.5.0 <5",
+    "@skbkontur/react-ui": ">=5 <6",
     "react": ">=16.9",
     "react-dom": ">=16.9"
   },
   "devDependencies": {
-    "@skbkontur/react-ui": "4.20.0"
+    "@skbkontur/react-ui": "5.0.0-beta.0"
   },
   "dependencies": {
     "@skbkontur/icons": "^1.12.1",
-    "@skbkontur/react-ui-addons": "^4.11.5",
+    "@skbkontur/react-ui-addons": "^4.11.6",
     "tslib": "^1"
   }
 }

package/src/SideMenu/SideMenu.d.ts

@@ -50,11 +50,6 @@ export interface SideMenuProps extends CommonProps {
     narrowDesktopMediaQuery?: string;
     tabletMediaQuery?: string;
     mobileMediaQuery?: string;
-    /**
-     * Скрывать скроллбар при отсутствии активности пользователя
-     * @deprecated use showScrollBar
-     */
-    hideScrollBar?: boolean;
     /**
      * Показывать скроллбар
      */

package/src/SideMenu/SideMenu.js

@@ -18,7 +18,7 @@ import { RightBorder } from '../internal/RightBorder';
 import { SideMenuDropdown } from '../SideMenuDropdown/SideMenuDropdown';
 import { SideMenuLink } from '../SideMenuLink/SideMenuLink';
 import { SideMenuSubLink } from '../SideMenuSubLink/SideMenuSubLink';
-import { DEFAULT_THEME, ScrollContainer, useResponsiveLayout } from '@skbkontur/react-ui';
+import { LIGHT_THEME, ScrollContainer, useResponsiveLayout } from '@skbkontur/react-ui';
 import { Backdrop } from '../internal/Backdrop';
 import { RenderLayer } from '@skbkontur/react-ui/internal/RenderLayer';
 import { isTouchDevice } from '../../lib/utils/scripts';
@@ -33,7 +33,7 @@ export var burgerTransitionDuration = (transitionDuration * 2) / 3;
 var SideMenuInner = forwardRef(function (_a, ref) {
     var _b, _c, _d, _e;
     var _f, _g;
-    var children = _a.children, value = _a.value, activeItem = _a.activeItem, _h = _a.size, size = _h === void 0 ? 'small' : _h, _j = _a.isSeparatedMenu, isSeparatedMenu = _j === void 0 ? false : _j, className = _a.className, _k = _a.disableSwipe, disableSwipe = _k === void 0 ? false : _k, _l = _a.disableCollapsing, disableCollapsing = _l === void 0 ? false : _l, desktopMediaQuery = _a.desktopMediaQuery, narrowDesktopMediaQuery = _a.narrowDesktopMediaQuery, tabletMediaQuery = _a.tabletMediaQuery, mobileMediaQuery = _a.mobileMediaQuery, _m = _a.hideScrollBar, hideScrollBar = _m === void 0 ? undefined : _m, _o = _a.showScrollBar, showScrollBar = _o === void 0 ? 'hover' : _o, isOpen = _a.isOpen, isPinned = _a.isPinned, onValueChange = _a.onValueChange, onActiveItemChange = _a.onActiveItemChange, onOpen = _a.onOpen, onClose = _a.onClose, onPinnedValueChange = _a.onPinnedValueChange, rest = __rest(_a, ["children", "value", "activeItem", "size", "isSeparatedMenu", "className", "disableSwipe", "disableCollapsing", "desktopMediaQuery", "narrowDesktopMediaQuery", "tabletMediaQuery", "mobileMediaQuery", "hideScrollBar", "showScrollBar", "isOpen", "isPinned", "onValueChange", "onActiveItemChange", "onOpen", "onClose", "onPinnedValueChange"]);
+    var children = _a.children, value = _a.value, activeItem = _a.activeItem, _h = _a.size, size = _h === void 0 ? 'small' : _h, _j = _a.isSeparatedMenu, isSeparatedMenu = _j === void 0 ? false : _j, className = _a.className, _k = _a.disableSwipe, disableSwipe = _k === void 0 ? false : _k, _l = _a.disableCollapsing, disableCollapsing = _l === void 0 ? false : _l, desktopMediaQuery = _a.desktopMediaQuery, narrowDesktopMediaQuery = _a.narrowDesktopMediaQuery, tabletMediaQuery = _a.tabletMediaQuery, mobileMediaQuery = _a.mobileMediaQuery, _m = _a.showScrollBar, showScrollBar = _m === void 0 ? 'hover' : _m, isOpen = _a.isOpen, isPinned = _a.isPinned, onValueChange = _a.onValueChange, onActiveItemChange = _a.onActiveItemChange, onOpen = _a.onOpen, onClose = _a.onClose, onPinnedValueChange = _a.onPinnedValueChange, rest = __rest(_a, ["children", "value", "activeItem", "size", "isSeparatedMenu", "className", "disableSwipe", "disableCollapsing", "desktopMediaQuery", "narrowDesktopMediaQuery", "tabletMediaQuery", "mobileMediaQuery", "showScrollBar", "isOpen", "isPinned", "onValueChange", "onActiveItemChange", "onOpen", "onClose", "onPinnedValueChange"]);
     var transitionTimer = useRef(null);
     var sideMenuRef = useRef(null);
     var contentWrapperRef = useRef(null);
@@ -46,27 +46,27 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         isNarrowDesktopQuery: narrowDesktopMediaQuery || theme.sideMenuNarrowDesktopMediaQuery,
         isDesktopQuery: desktopMediaQuery || theme.sideMenuDesktopMediaQuery,
     };
-    var _p = useResponsiveLayout({
+    var _o = useResponsiveLayout({
         customMediaQueries: customMediaQueries,
-    }), isMobileQuery = _p.isMobileQuery, isTabletQuery = _p.isTabletQuery, isNarrowDesktopQuery = _p.isNarrowDesktopQuery, isDesktopQuery = _p.isDesktopQuery;
+    }), isMobileQuery = _o.isMobileQuery, isTabletQuery = _o.isTabletQuery, isNarrowDesktopQuery = _o.isNarrowDesktopQuery, isDesktopQuery = _o.isDesktopQuery;
     var isNarrowDesktop = isNarrowDesktopQuery && !isDesktopQuery;
     var isTablet = isTabletQuery && !isNarrowDesktopQuery;
     var isMobile = isMobileQuery && !isTabletQuery;
     var isTabletOrMobile = isTablet || isMobile;
     var isTouchScreen = isTouchDevice() || isMobile || isTablet;
     var manual = isOpen !== undefined;
-    var _q = __read(useState(isDesktopQuery && !isPinned), 2), isOpened = _q[0], setIsOpened = _q[1];
-    var _r = __read(useState(false), 2), isBeingTransitioned = _r[0], setIsBeingTransitioned = _r[1];
-    var _s = __read(useState(value !== null && value !== void 0 ? value : activeItem), 2), activeMenuItem = _s[0], setActiveMenuItem = _s[1];
-    var _t = __read(useState(false), 2), isSeparatedMenuShown = _t[0], setIsSeparatedMenuShown = _t[1];
-    var _u = __read(useState(true), 2), isMouseOutside = _u[0], setIsMouseOutside = _u[1];
-    var _v = __read(useState('top'), 2), scrollState = _v[0], setScrollState = _v[1];
-    var _w = __read(useState(false), 2), hasScrollBar = _w[0], setHasScrollBar = _w[1];
-    var _x = __read(useState(0), 2), mousePositionX = _x[0], setMousePositionX = _x[1];
-    var _y = __read(useState(0), 2), headerHeight = _y[0], setHeaderHeight = _y[1];
-    var _z = __read(useState(isNarrowDesktop || (isDesktopQuery && isPinned)), 2), isCollapsable = _z[0], setIsCollapsable = _z[1];
-    var _0 = __read(useState(0), 2), leftPosition = _0[0], setLeftPosition = _0[1];
-    var _1 = __read(useState(false), 2), isHovered = _1[0], setIsHovered = _1[1];
+    var _p = __read(useState(isDesktopQuery && !isPinned), 2), isOpened = _p[0], setIsOpened = _p[1];
+    var _q = __read(useState(false), 2), isBeingTransitioned = _q[0], setIsBeingTransitioned = _q[1];
+    var _r = __read(useState(value !== null && value !== void 0 ? value : activeItem), 2), activeMenuItem = _r[0], setActiveMenuItem = _r[1];
+    var _s = __read(useState(false), 2), isSeparatedMenuShown = _s[0], setIsSeparatedMenuShown = _s[1];
+    var _t = __read(useState(true), 2), isMouseOutside = _t[0], setIsMouseOutside = _t[1];
+    var _u = __read(useState('top'), 2), scrollState = _u[0], setScrollState = _u[1];
+    var _v = __read(useState(false), 2), hasScrollBar = _v[0], setHasScrollBar = _v[1];
+    var _w = __read(useState(0), 2), mousePositionX = _w[0], setMousePositionX = _w[1];
+    var _x = __read(useState(0), 2), headerHeight = _x[0], setHeaderHeight = _x[1];
+    var _y = __read(useState(isNarrowDesktop || (isDesktopQuery && isPinned)), 2), isCollapsable = _y[0], setIsCollapsable = _y[1];
+    var _z = __read(useState(0), 2), leftPosition = _z[0], setLeftPosition = _z[1];
+    var _0 = __read(useState(false), 2), isHovered = _0[0], setIsHovered = _0[1];
     var switchActiveMenuItem = function (id) {
         if (id !== value && id !== activeItem) {
             onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(id);
@@ -215,11 +215,11 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         }
     };
     var isSideMenuOverContent = (isCollapsable || isMobile || (isTablet && !isSeparatedMenuShown)) && isOpened;
-    var _2 = __read(useAnimateOnMount(!!isTabletOrMobile && !!isOpened, burgerTransitionDuration, {
-        opacity: DEFAULT_THEME.sidePageBackingBgOpacity,
+    var _1 = __read(useAnimateOnMount(!!isTabletOrMobile && !!isOpened, burgerTransitionDuration, {
+        opacity: LIGHT_THEME.sidePageBackingBgOpacity,
     }, {
         opacity: 0,
-    }), 2), shouldShowBackdrop = _2[0], backdropStyle = _2[1];
+    }), 2), shouldShowBackdrop = _1[0], backdropStyle = _1[1];
     var isSideMenuOverflowing = (isTabletOrMobile || isCollapsable) && isOpened;
     var setScrollBar = function () {
         var isSeparatedMenuShownInMobile = isMobile && isSeparatedMenuShown;
@@ -255,7 +255,6 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             setHasScrollBar: setHasScrollBar,
             headerHeight: headerHeight,
             setHeaderHeight: setHeaderHeight,
-            hideScrollBar: hideScrollBar,
             showScrollBar: showScrollBar,
             sideMenuRef: sideMenuRef,
             navigation: navigation.current,

package/src/SideMenuContext.d.ts

@@ -23,7 +23,6 @@ export interface SideMenuContextType {
     setHasScrollBar?: (hasScrollBar: boolean) => void;
     headerHeight?: number;
     setHeaderHeight?: (mobileHeaderHeight: number) => void;
-    hideScrollBar?: boolean;
     showScrollBar?: showScrollBarType;
     sideMenuRef?: RefObject<HTMLDivElement>;
     navigation?: MenuNavigation | null;

package/src/internal/Backdrop.js

@@ -2,12 +2,12 @@ import { __assign } from "tslib";
 import React from 'react';
 import { HideBodyVerticalScroll } from '@skbkontur/react-ui/internal/HideBodyVerticalScroll';
 import { jsStyles } from './Backdrop.styles';
-import { DEFAULT_THEME } from '@skbkontur/react-ui';
+import { LIGHT_THEME } from '@skbkontur/react-ui';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 export var Backdrop = function (props) {
     var _a;
     return (React.createElement("div", { className: cx((_a = {},
             _a[jsStyles.rootForTabletsOrMobiles()] = true,
-            _a)), style: __assign({ background: DEFAULT_THEME.sidePageBackingBg }, props.style) },
+            _a)), style: __assign({ background: LIGHT_THEME.sidePageBackingBg }, props.style) },
         React.createElement(HideBodyVerticalScroll, null)));
 };

package/src/internal/SeparatedSubMenu.js

@@ -50,7 +50,7 @@ var SeparatedSubMenu = forwardRef(function (_a, ref) {
         React.createElement(ScrollContainer, { onScrollStateChangeY: function (state) {
                 var _a;
                 (_a = context.setScrollState) === null || _a === void 0 ? void 0 : _a.call(context, state);
-            }, ref: scrollContainerRef, showScrollBar: context.isTouchScreen ? 'always' : context.showScrollBar, hideScrollBar: context.hideScrollBar },
+            }, ref: scrollContainerRef, showScrollBar: context.isTouchScreen ? 'always' : context.showScrollBar },
             React.createElement("ul", { className: cx((_d = {},
                     _d[jsStylesForSideMenu.list()] = true,
                     _d[jsStyles.contentWrapper(theme)] = true,