@skbkontur/side-menu 0.4.0 → 0.4.2

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.4.2](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.4.1...@skbkontur/side-menu@0.4.2) (2022-12-22)
+
+**Note:** Version bump only for package @skbkontur/side-menu
+
+
+
+
+
+## [0.4.1](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.4.0...@skbkontur/side-menu@0.4.1) (2022-12-20)
+
+**Note:** Version bump only for package @skbkontur/side-menu
+
+
+
+
+
 # [0.4.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.3.2...@skbkontur/side-menu@0.4.0) (2022-11-30)
 
 

package/README.md

@@ -15,11 +15,12 @@ import {
   BookmarkIcon24Regular,
   StackHDownIcon24Regular,
   SettingsGearIcon24Regular,
-  FaceAHappyIcon24Regular
+  FaceAHappyIcon24Regular,
+  AttachLinkIcon,
 } from '@skbkontur/icons';
 
 <div style={{height: '600px'}}>
-    <SideMenu>
+    <SideMenu disableSwipe={false}>
         <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>}/>
         <SideMenu.Body>
             <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы к подписанию'} marker={'новое'}>
@@ -31,6 +32,7 @@ import {
                 <SideMenu.SubItem caption={'Внутренние'}/>
                 <SideMenu.SubItem caption={'Черновики'}/>
                 <SideMenu.SubItem caption={'Удаленные'}/>
+                <SideMenu.SubLink caption={'Cсылка в подменю'} href={'https://www.google.com/search?q=test'} target={'_blank'}/>
                 <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
                 <SideMenu.SubItem caption={'Требуют обработки'}/>
                 <SideMenu.SubItem caption={'Обработанные'}/>
@@ -45,6 +47,7 @@ import {
             </SideMenu.Item>
             <SideMenu.Item icon={<LightbulbIcon24Regular/>} caption={'Справочная'}/>
             <SideMenu.Divider/>
+            <SideMenu.Link href={'https://google.com'} icon={<AttachLinkIcon />} caption={'Ссылка'} target={'_blank'}/>
             <SideMenu.Item icon={<BookOpenTextIcon24Regular/>} caption={'Еще раздел'}/>
             <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность'}/>
         </SideMenu.Body>
@@ -118,7 +121,7 @@ const renderModal = () => {
 }
 
 <div style={{height: '600px', width: '100%'}}>
-  <SideMenu isSeparatedMenu={true} disableSwipe={true}>
+  <SideMenu isSeparatedMenu={true}>
     <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Buhgalteria/>}/>
     <SideMenu.Body>
       <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы'} marker={'новое'}>
@@ -188,7 +191,8 @@ const renderModal = () => {
 </div>
 ```
 
-SideMenu с ручным управлением
+SideMenu с ручным управлением.
+Для `SideMenu.Link` при отсутствии `id` будет использован `href`
 
 ```jsx harmony
 import { useState } from 'react';
@@ -204,7 +208,8 @@ import {
   BookmarkIcon24Regular,
   StackHDownIcon24Regular,
   SettingsGearIcon24Regular,
-  FaceAHappyIcon24Regular
+  FaceAHappyIcon24Regular,
+  AttachLinkIcon24Regular
 } from '@skbkontur/icons';
 
 
@@ -230,10 +235,11 @@ const items = [
   "400",
   "500",
   "600",
+  "https://google.com"
 ];
 
 <div style={{height: '600px', display: 'flex'}}>
-    <SideMenu value={activeItem} onValueChange={setActiveItem}>
+    <SideMenu value={activeItem} onValueChange={setActiveItem} disableSwipe={false}>
         <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>}/>
         <SideMenu.Body>
             <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы к подписанию id=100'} marker={'новое'} id={'100'}>
@@ -261,6 +267,7 @@ const items = [
             <SideMenu.Divider/>
             <SideMenu.Item icon={<BookOpenTextIcon24Regular/>} caption={'Еще раздел id=500'} id={'500'}/>
             <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность id=600'} id={'600'}/>
+          <SideMenu.Link href={'https://google.com'} icon={<AttachLinkIcon24Regular />} caption={'Ссылка'} target={'_blank'} />
         </SideMenu.Body>
         <SideMenu.Footer>
             <SideMenu.Dropdown icon={<StackHDownIcon24Regular/>}>

package/hooks/UseMemoIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useMemoIcon: (children: React.ReactNode, isOpened: boolean) => JSX.Element | undefined;

package/hooks/UseMemoIcon.js

@@ -0,0 +1,14 @@
+import React, { useMemo } from 'react';
+import { ArrowCDownIcon16Regular, ArrowCRightIcon16Regular } from '@skbkontur/icons';
+export var useMemoIcon = function (children, isOpened) {
+    return useMemo(function () {
+        if (children) {
+            if (isOpened) {
+                return React.createElement(ArrowCDownIcon16Regular, null);
+            }
+            else {
+                return React.createElement(ArrowCRightIcon16Regular, null);
+            }
+        }
+    }, [isOpened, children]);
+};

package/hooks/useActiveState.d.ts

@@ -0,0 +1 @@
+export declare const useActiveState: (id?: string | undefined, href?: string | undefined, generatedId?: string | undefined, activeMenuItem?: string | null | undefined) => boolean;

package/hooks/useActiveState.js

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+import { isIdActive } from '../utils/scripts';
+export var useActiveState = function (id, href, generatedId, activeMenuItem) {
+    var _a = useState(false), isActive = _a[0], setIsActive = _a[1];
+    useEffect(function () {
+        var hrefIsActive = isIdActive(href, activeMenuItem);
+        var idIsActive = isIdActive(id, activeMenuItem);
+        var generatedIdIsActive = isIdActive(generatedId, activeMenuItem);
+        setIsActive(hrefIsActive || idIsActive || generatedIdIsActive);
+    }, [activeMenuItem]);
+    return isActive;
+};

package/hooks/useOpenedState.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useOpenedState: (id?: string | undefined, generatedId?: string | undefined, openedParents?: string[] | undefined, isActive?: boolean, children?: React.ReactNode) => boolean;

package/hooks/useOpenedState.js

@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+import { isOpenedParents } from '../utils/scripts';
+export var useOpenedState = function (id, generatedId, openedParents, isActive, children) {
+    if (isActive === void 0) { isActive = false; }
+    var _a = useState(false), isOpened = _a[0], setIsOpened = _a[1];
+    useEffect(function () {
+        var isOpenedParent = isOpenedParents(id, generatedId, openedParents);
+        setIsOpened(!!children && (isOpenedParent || isActive));
+    }, [openedParents === null || openedParents === void 0 ? void 0 : openedParents.toString(), isActive]);
+    return isOpened;
+};

package/hooks/useOpenedSubElementState.d.ts

@@ -0,0 +1 @@
+export declare const useOpenedSubElementState: (id?: string | undefined, generatedId?: string | undefined, openedParents?: string[] | undefined, activeMenuItem?: string | null | undefined) => boolean;

package/hooks/useOpenedSubElementState.js

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+import { isIdActive, isOpenedParents } from '../utils/scripts';
+export var useOpenedSubElementState = function (id, generatedId, openedParents, activeMenuItem) {
+    var _a = useState(false), isOpened = _a[0], setIsOpened = _a[1];
+    useEffect(function () {
+        var isOpenedParent = isOpenedParents(id, generatedId, openedParents);
+        var idIsActive = isIdActive(id, activeMenuItem);
+        var generatedIdIsActive = isIdActive(generatedId, activeMenuItem);
+        setIsOpened(isOpenedParent || isOpened || idIsActive || generatedIdIsActive);
+    }, [openedParents === null || openedParents === void 0 ? void 0 : openedParents.toString()]);
+    return isOpened;
+};

package/index.d.ts

@@ -1,11 +1,13 @@
-export * from './src/SideMenu';
-export * from './src/SideMenuOrganisations';
-export * from './src/SideMenuBody';
-export * from './src/SideMenuFooter';
-export * from './src/SideMenuHeader';
-export * from './src/SideMenuItem';
-export * from './src/SideMenuAvatar';
-export * from './src/SideMenuSubItem';
-export * from './src/SideMenuDivider';
-export * from './src/SideMenuSubItemHeader';
-export * from './src/SideMenuDropdown';
+export * from './src/SideMenu/SideMenu';
+export * from './src/SideMenuOrganisations/SideMenuOrganisations';
+export * from './src/SideMenuBody/SideMenuBody';
+export * from './src/SideMenuFooter/SideMenuFooter';
+export * from './src/SideMenuHeader/SideMenuHeader';
+export * from './src/SideMenuItem/SideMenuItem';
+export * from './src/SideMenuAvatar/SideMenuAvatar';
+export * from './src/SideMenuSubItem/SideMenuSubItem';
+export * from './src/SideMenuDivider/SideMenuDivider';
+export * from './src/SideMenuSubItemHeader/SideMenuSubItemHeader';
+export * from './src/SideMenuDropdown/SideMenuDropdown';
+export * from './src/SideMenuLink/SideMenuLink';
+export * from './src/SideMenuSubLink/SideMenuSubLink';

package/index.js

@@ -1,11 +1,13 @@
-export * from './src/SideMenu';
-export * from './src/SideMenuOrganisations';
-export * from './src/SideMenuBody';
-export * from './src/SideMenuFooter';
-export * from './src/SideMenuHeader';
-export * from './src/SideMenuItem';
-export * from './src/SideMenuAvatar';
-export * from './src/SideMenuSubItem';
-export * from './src/SideMenuDivider';
-export * from './src/SideMenuSubItemHeader';
-export * from './src/SideMenuDropdown';
+export * from './src/SideMenu/SideMenu';
+export * from './src/SideMenuOrganisations/SideMenuOrganisations';
+export * from './src/SideMenuBody/SideMenuBody';
+export * from './src/SideMenuFooter/SideMenuFooter';
+export * from './src/SideMenuHeader/SideMenuHeader';
+export * from './src/SideMenuItem/SideMenuItem';
+export * from './src/SideMenuAvatar/SideMenuAvatar';
+export * from './src/SideMenuSubItem/SideMenuSubItem';
+export * from './src/SideMenuDivider/SideMenuDivider';
+export * from './src/SideMenuSubItemHeader/SideMenuSubItemHeader';
+export * from './src/SideMenuDropdown/SideMenuDropdown';
+export * from './src/SideMenuLink/SideMenuLink';
+export * from './src/SideMenuSubLink/SideMenuSubLink';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/side-menu",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -23,7 +23,7 @@
     "@skbkontur/react-ui": "4.0.0"
   },
   "dependencies": {
-    "@skbkontur/icons": "0.12.0",
+    "@skbkontur/icons": "^0.12.1",
     "tslib": "^1"
   }
 }

package/src/SideMenu/SideMenu.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
+import { SideMenuOrganisations } from '../SideMenuOrganisations/SideMenuOrganisations';
+import { SideMenuBody } from '../SideMenuBody/SideMenuBody';
+import { SideMenuFooter } from '../SideMenuFooter/SideMenuFooter';
+import { SideMenuHeader } from '../SideMenuHeader/SideMenuHeader';
+import { SideMenuItem } from '../SideMenuItem/SideMenuItem';
+import { SideMenuAvatar } from '../SideMenuAvatar/SideMenuAvatar';
+import { SideMenuSubItem } from '../SideMenuSubItem/SideMenuSubItem';
+import { SideMenuDivider } from '../SideMenuDivider/SideMenuDivider';
+import { SideMenuSubItemHeader } from '../SideMenuSubItemHeader/SideMenuSubItemHeader';
+import { SideMenuDropdown } from '../SideMenuDropdown/SideMenuDropdown';
+import { SideMenuLink } from '../SideMenuLink/SideMenuLink';
+import { SideMenuSubLink } from '../SideMenuSubLink/SideMenuSubLink';
+export interface SideMenuProps extends CommonProps {
+    children?: React.ReactNode;
+    size?: 'small' | 'large';
+    isSeparatedMenu?: boolean;
+    disableSwipe?: boolean;
+    value?: string;
+    onValueChange?: (value: string) => void;
+}
+interface SubComponents {
+    Body: typeof SideMenuBody;
+    Footer: typeof SideMenuFooter;
+    Header: typeof SideMenuHeader;
+    Item: typeof SideMenuItem;
+    SubItem: typeof SideMenuSubItem;
+    SubItemHeader: typeof SideMenuSubItemHeader;
+    Avatar: typeof SideMenuAvatar;
+    Organisations: typeof SideMenuOrganisations;
+    Divider: typeof SideMenuDivider;
+    Dropdown: typeof SideMenuDropdown;
+    Link: typeof SideMenuLink;
+    SubLink: typeof SideMenuSubLink;
+    __KONTUR_REACT_UI__: string;
+}
+export declare const SideMenuDataTids: {
+    root: string;
+};
+export declare const SideMenu: React.ForwardRefExoticComponent<SideMenuProps & React.RefAttributes<HTMLElement>> & SubComponents;
+export {};

package/src/{SideMenu.js → SideMenu/SideMenu.js}

@@ -2,34 +2,36 @@ import { __assign, __rest } from "tslib";
 import React, { forwardRef, useEffect, useState } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { isIE11, isSafari } from '@skbkontur/react-ui/lib/client';
-import { jsStyles } from './SideMenu.styles';
-import { SideMenuOrganisations } from './SideMenuOrganisations';
-import { SideMenuContext } from './SideMenuContext';
-import { SideMenuBody } from './SideMenuBody';
-import { SideMenuFooter } from './SideMenuFooter';
-import { SideMenuHeader } from './SideMenuHeader';
-import { SideMenuItem } from './SideMenuItem';
-import { SideMenuAvatar } from './SideMenuAvatar';
-import { SideMenuSubItem } from './SideMenuSubItem';
-import { SideMenuDivider } from './SideMenuDivider';
-import { SideMenuSubItemHeader } from './SideMenuSubItemHeader';
-import { RightBorder } from './RightBorder';
-import { SideMenuDropdown } from './SideMenuDropdown';
+import { jsStyles } from '../SideMenu.styles';
+import { SideMenuOrganisations } from '../SideMenuOrganisations/SideMenuOrganisations';
+import { SideMenuContext } from '../SideMenuContext';
+import { SideMenuBody } from '../SideMenuBody/SideMenuBody';
+import { SideMenuFooter } from '../SideMenuFooter/SideMenuFooter';
+import { SideMenuHeader } from '../SideMenuHeader/SideMenuHeader';
+import { SideMenuItem } from '../SideMenuItem/SideMenuItem';
+import { SideMenuAvatar } from '../SideMenuAvatar/SideMenuAvatar';
+import { SideMenuSubItem } from '../SideMenuSubItem/SideMenuSubItem';
+import { SideMenuDivider } from '../SideMenuDivider/SideMenuDivider';
+import { SideMenuSubItemHeader } from '../SideMenuSubItemHeader/SideMenuSubItemHeader';
+import { RightBorder } from '../internal/RightBorder';
+import { SideMenuDropdown } from '../SideMenuDropdown/SideMenuDropdown';
+import { SideMenuLink } from '../SideMenuLink/SideMenuLink';
+import { SideMenuSubLink } from '../SideMenuSubLink/SideMenuSubLink';
 export var SideMenuDataTids = {
     root: 'SideMenu__root',
 };
-var SideMenu = forwardRef(function (_a, ref) {
-    var _b, _c;
-    var children = _a.children, value = _a.value, onValueChange = _a.onValueChange, _d = _a.size, size = _d === void 0 ? 'small' : _d, _e = _a.isSeparatedMenu, isSeparatedMenu = _e === void 0 ? false : _e, className = _a.className, _f = _a.disableSwipe, disableSwipe = _f === void 0 ? false : _f, rest = __rest(_a, ["children", "value", "onValueChange", "size", "isSeparatedMenu", "className", "disableSwipe"]);
+var SideMenuInner = forwardRef(function (_a, ref) {
+    var _b, _c, _d;
+    var children = _a.children, value = _a.value, onValueChange = _a.onValueChange, _e = _a.size, size = _e === void 0 ? 'small' : _e, _f = _a.isSeparatedMenu, isSeparatedMenu = _f === void 0 ? false : _f, className = _a.className, _g = _a.disableSwipe, disableSwipe = _g === void 0 ? true : _g, rest = __rest(_a, ["children", "value", "onValueChange", "size", "isSeparatedMenu", "className", "disableSwipe"]);
     var scrollTimer = null;
     var transitionTimer = null;
     var widgetTimer;
-    var _g = useState(false), isMinimised = _g[0], setIsMinimised = _g[1];
-    var _h = useState(false), hasScrollBar = _h[0], setHasScrollBar = _h[1];
-    var _j = useState(false), isTransitioned = _j[0], setIsTransitioned = _j[1];
-    var _k = useState('#2291ff'), productColor = _k[0], setProductColor = _k[1];
-    var _l = useState(false), showWidget = _l[0], setShowWidget = _l[1];
-    var _m = useState(value), activeMenuItem = _m[0], setActiveMenuItem = _m[1];
+    var _h = useState(false), isMinimised = _h[0], setIsMinimised = _h[1];
+    var _j = useState(false), hasScrollBar = _j[0], setHasScrollBar = _j[1];
+    var _k = useState(false), isTransitioned = _k[0], setIsTransitioned = _k[1];
+    var _l = useState('#2291ff'), productColor = _l[0], setProductColor = _l[1];
+    var _m = useState(false), showWidget = _m[0], setShowWidget = _m[1];
+    var _o = useState(value), activeMenuItem = _o[0], setActiveMenuItem = _o[1];
     useEffect(function () {
         return function () {
             if (scrollTimer) {
@@ -101,11 +103,14 @@ var SideMenu = forwardRef(function (_a, ref) {
                     _c[jsStyles.rootSafari()] = isSafari,
                     _c[jsStyles.minimisedRoot()] = isMinimised,
                     _c[jsStyles.rootWithInnerSubMenu()] = !isSeparatedMenu,
-                    _c[jsStyles.rootWithoutScrollBar()] = !hasScrollBar,
-                    _c)), onMouseOver: showMinimisedRoot, onFocus: showMinimisedRoot, onScroll: handleScroll }, children),
+                    _c)), onMouseOver: showMinimisedRoot, onFocus: showMinimisedRoot, onScroll: handleScroll },
+                React.createElement("div", { className: cx((_d = {},
+                        _d[jsStyles.rootInnerContainer()] = true,
+                        _d[jsStyles.rootWithoutScrollBar()] = !hasScrollBar,
+                        _d)) }, children)),
             !disableSwipe && React.createElement(RightBorder, { setIsMinimised: function (value) { return setIsMinimised(value); } }))));
 });
-SideMenu.displayName = 'SideMenu';
+SideMenuInner.displayName = 'SideMenu';
 var STATIC_PROPS = {
     Body: SideMenuBody,
     Footer: SideMenuFooter,
@@ -116,8 +121,9 @@ var STATIC_PROPS = {
     Avatar: SideMenuAvatar,
     Organisations: SideMenuOrganisations,
     Divider: SideMenuDivider,
+    Link: SideMenuLink,
+    SubLink: SideMenuSubLink,
     Dropdown: SideMenuDropdown,
     __KONTUR_REACT_UI__: 'SideMenu',
 };
-var SideMenuWithStaticFields = Object.assign(SideMenu, STATIC_PROPS);
-export { SideMenuWithStaticFields as SideMenu };
+export var SideMenu = Object.assign(SideMenuInner, STATIC_PROPS);

package/src/SideMenu.styles.d.ts

@@ -7,6 +7,7 @@ export declare const jsStyles: {
     rootWithoutScrollBar(): string;
     minimisedRoot(): string;
     rootWithInnerSubMenu(): string;
+    rootInnerContainer(): string;
     rootWrapper(): string;
     rootWrapperIE(): string;
     resizableRightBorder(): string;
@@ -55,6 +56,7 @@ export declare const jsStyles: {
     dropdownWrapper(): string;
     dropdownLabel(): string;
     dropdownLabelMinimized(): string;
-    subItemMenu(): string;
+    nestedMenu(): string;
     rightBorder(): string;
+    link(): string;
 };