@skbkontur/side-menu 0.1.4 → 0.2.1

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.2.1](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.2.0...@skbkontur/side-menu@0.2.1) (2022-09-30)
+
+
+### Reverts
+
+* Revert "chore(SideMenuDropdown): delete disable animation" ([4c4f0af](https://git.skbkontur.ru/ui/ui-parking/commits/4c4f0afb573bf62ff749d059b48d650d8d3e7db3))
+* Revert "chore: delete span around icon" ([660b128](https://git.skbkontur.ru/ui/ui-parking/commits/660b128ab4b769446d7a1246727f1fadbe354b4d))
+
+
+
+
+
+# [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

package/README.md

@@ -8,13 +8,13 @@ import {Kontur, Ofd} from '@skbkontur/logos';
 import {MenuItem, ThemeContext, ThemeFactory} from '@skbkontur/react-ui';
 import {SideMenu} from './index';
 import {
-    CheckIcon24Regular,
-  InfoSquareIcon24Regular,
-  DoubleCheckIcon24Regular,
-  QuestionSquareIcon24Regular,
-  DivideCircleIcon24Regular,
-  PlusSquareIcon24Regular,
-  WarningTriangleIcon24Regular
+  DocTextIcon24Regular,
+  CommentRectTextIcon24Regular,
+  LightbulbIcon24Regular,
+  BookOpenTextIcon24Regular,
+  BookmarkIcon24Regular,
+  StackHDownIcon24Regular,
+  SettingsGearIcon24Regular,
 } from '@skbkontur/icons';
 
 
@@ -25,7 +25,7 @@ const myTheme = ThemeFactory.create({addonsSideMenuHeaderPosition: 'sticky', add
         <SideMenu>
             <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>}/>
             <SideMenu.Body>
-                <SideMenu.Item icon={<DoubleCheckIcon24Regular/>} caption={'Документы к подписанию'} marker={'новое'}>
+                <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы к подписанию'} marker={'новое'}>
                     <SideMenu.SubItem caption={'Входящие'}/>
                     <SideMenu.SubItem caption={'Исходящие'} marker={'2'}>
                         <SideMenu.SubItem caption={'Исходящие1'}/>
@@ -39,34 +39,41 @@ const myTheme = ThemeFactory.create({addonsSideMenuHeaderPosition: 'sticky', add
                     <SideMenu.SubItem caption={'Обработанные'}/>
                 </SideMenu.Item>
                 <SideMenu.Item caption={'Контрагенты'}/>
-                <SideMenu.Item icon={<CheckIcon24Regular/>} caption={'Сообщения'} marker={'5'}>
+                <SideMenu.Item icon={<CommentRectTextIcon24Regular/>} caption={'Сообщения'} marker={'5'}>
                     <SideMenu.SubItem caption={'Входящие'} marker={'5'}/>
                     <SideMenu.SubItem caption={'Исходящие'}/>
                     <SideMenu.SubItem caption={'Внутренние'}/>
                     <SideMenu.SubItem caption={'Черновики'}/>
                     <SideMenu.SubItem caption={'Удаленные'}/>
                 </SideMenu.Item>
-                <SideMenu.Item icon={<QuestionSquareIcon24Regular/>} caption={'Справочная'}/>
+                <SideMenu.Item icon={<LightbulbIcon24Regular/>} caption={'Справочная'}/>
                 <SideMenu.Divider/>
-                <SideMenu.Item icon={<InfoSquareIcon24Regular/>} caption={'Еще раздел'}/>
-                <SideMenu.Item icon={<DivideCircleIcon24Regular/>} caption={'Отчетность'}/>
+                <SideMenu.Item icon={<BookOpenTextIcon24Regular/>} caption={'Еще раздел'}/>
+                <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность'}/>
             </SideMenu.Body>
             <SideMenu.Footer>
-                <SideMenu.Organisations icon={<PlusSquareIcon24Regular/>}>
+                <SideMenu.Organisations icon={<StackHDownIcon24Regular/>}>
                     <MenuItem>СКБ Контур</MenuItem>
                     <MenuItem>Сириус Базинес</MenuItem>
                     <MenuItem>Контур НТТ</MenuItem>
                     <MenuItem>Промэлектроника</MenuItem>
-                    <SideMenu.DropdownMenuSeparator/>
+                    <SideMenu.Divider/>
                     <MenuItem>Список организаций</MenuItem>
                 </SideMenu.Organisations>
-                <SideMenu.Item icon={<WarningTriangleIcon24Regular/>} caption={'Реквизиты и настройки'}/>
+                <SideMenu.Item icon={<SettingsGearIcon24Regular/>} caption={'Реквизиты и настройки'}/>
                 <SideMenu.Avatar
                     userName={'Ишматова Елена'}
                     avatarUrl={getKonturAvatarUrl({
                         userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
                     })}
-                />
+                >
+                  <MenuItem href={'https://cabinet.kontur.ru'} target="_blank">
+                    Личный кабинет
+                  </MenuItem>
+                  <MenuItem >Безопасность</MenuItem>
+                  <SideMenu.Divider />
+                  <MenuItem >Выйти</MenuItem>
+                </SideMenu.Avatar>
             </SideMenu.Footer>
         </SideMenu>
     </ThemeContext.Provider>
@@ -78,16 +85,11 @@ SideMenu с меню второго уровня в отдельной коло
 ```jsx harmony
 import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
 import { Buhgalteria, Kontur } from '@skbkontur/logos';
-import { MenuItem, Button, Modal, Input, ThemeContext, ThemeFactory} from '@skbkontur/react-ui';
+import { MenuItem, Modal, Input, ThemeContext, ThemeFactory} from '@skbkontur/react-ui';
 import { SideMenu } from './index';
 import {
-    CheckIcon24Regular,
-  InfoSquareIcon24Regular,
-  DoubleCheckIcon24Regular,
-  QuestionSquareIcon24Regular,
-  DivideCircleIcon24Regular,
-  PlusSquareIcon24Regular,
-  WarningTriangleIcon24Regular
+  StackHDownIcon24Regular,
+  SettingsGearIcon24Regular,
 } from '@skbkontur/icons';
 
 const [opened, setOpened] = React.useState(false);
@@ -121,10 +123,6 @@ const myTheme = ThemeFactory.create({ addonsSideMenuHeaderPosition: 'sticky', ad
       <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Buhgalteria/>}/>
       <SideMenu.Body>
         <SideMenu.Item caption={'Документы'} marker={'новое'}>
-          <SideMenu.SubItemButtons>
-          <Button use="primary">Создать</Button>
-          <Button>Загрузить</Button>
-          </SideMenu.SubItemButtons>
           <SideMenu.SubItem caption={'Входящие'} marker={'5'}>
             <SideMenu.SubItem caption={'Входящие бла-бла-бла'}>
               <SideMenu.SubItem caption={'Входящие11'}>
@@ -170,15 +168,22 @@ const myTheme = ThemeFactory.create({ addonsSideMenuHeaderPosition: 'sticky', ad
       <SideMenu.Footer>
         <div>
           {opened && renderModal()}
-          <SideMenu.Item icon={<PlusSquareIcon24Regular/>} caption={'СКБ Контур'} _onClick={open}/>
+          <SideMenu.Item icon={<StackHDownIcon24Regular/>} caption={'СКБ Контур'} onClick={open}/>
         </div>
-        <SideMenu.Item icon={<WarningTriangleIcon24Regular/>} caption={'Реквизиты и настройки'}/>
+        <SideMenu.Item icon={<SettingsGearIcon24Regular/>} caption={'Реквизиты и настройки'}/>
         <SideMenu.Avatar
           userName={'Ишматова Елена'}
           avatarUrl={getKonturAvatarUrl({
             userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
           })}
-        />
+        >
+          <MenuItem href={'https://cabinet.kontur.ru'} target="_blank">
+            Личный кабинет
+          </MenuItem>
+          <MenuItem >Безопасность</MenuItem>
+          <SideMenu.Divider />
+          <MenuItem >Выйти</MenuItem>
+        </SideMenu.Avatar>
       </SideMenu.Footer>
     </SideMenu>
   </ThemeContext.Provider>

package/index.d.ts

@@ -8,4 +8,4 @@ export * from './src/SideMenuAvatar';
 export * from './src/SideMenuSubItem';
 export * from './src/SideMenuDivider';
 export * from './src/SideMenuSubItemHeader';
-export * from './src/SideMenuSubItemButtons';
+export * from './src/SideMenuDropdown';

package/index.js

@@ -8,4 +8,4 @@ export * from './src/SideMenuAvatar';
 export * from './src/SideMenuSubItem';
 export * from './src/SideMenuDivider';
 export * from './src/SideMenuSubItemHeader';
-export * from './src/SideMenuSubItemButtons';
+export * from './src/SideMenuDropdown';

package/package.json

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

package/src/InnerSubMenu.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface InnerSubMenuProps {
+    children?: React.ReactNode;
+    id: string;
+}
+declare const InnerSubMenuWithStaticFields: React.ForwardRefExoticComponent<InnerSubMenuProps & React.RefAttributes<HTMLDivElement>> & {
+    __KONTUR_REACT_UI__: string;
+};
+export { InnerSubMenuWithStaticFields as InnerSubMenu };

package/src/InnerSubMenu.js

@@ -0,0 +1,18 @@
+import React, { forwardRef } from 'react';
+/**
+ * Подменю, раскрывающееся внутри основного меню
+ *
+ * @visibleName InnerSubMenu
+ */
+var InnerSubMenu = forwardRef(function (_a, ref) {
+    var children = _a.children, id = _a.id;
+    return (React.createElement(React.Fragment, null, React.Children.map(children, function (child) {
+        if (React.isValidElement(child)) {
+            return React.cloneElement(child, { parent: id, ref: ref });
+        }
+        return child;
+    })));
+});
+InnerSubMenu.displayName = 'InnerSubMenu';
+var InnerSubMenuWithStaticFields = Object.assign(InnerSubMenu, { __KONTUR_REACT_UI__: 'InnerSubMenu' });
+export { InnerSubMenuWithStaticFields as InnerSubMenu };

package/src/RightBorder.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface RightBorderProps {
+    setIsMinimised: (value: boolean) => void;
+}
+declare const RightBorderWithStaticFields: React.ForwardRefExoticComponent<RightBorderProps & React.RefAttributes<HTMLDivElement>> & {
+    __KONTUR_REACT_UI__: string;
+};
+export { RightBorderWithStaticFields as RightBorder };

package/src/RightBorder.js

@@ -0,0 +1,71 @@
+import React, { forwardRef, useContext, useEffect, useRef, useState } from 'react';
+import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { customStyles, jsStyles } from './SideMenu.styles';
+import { SideMenuContext } from './SideMenuContext';
+/**
+ * Элемент интерактивной правой границы
+ *
+ * @visibleName RightBorder
+ */
+var RightBorder = forwardRef(function (_a, ref) {
+    var _b;
+    var setIsMinimised = _a.setIsMinimised;
+    var context = useContext(SideMenuContext);
+    var resizeTimer = null;
+    var _c = useState(false), isAbleToResize = _c[0], setIsAbleToResize = _c[1];
+    var rightBorderRef = useRef(null);
+    var handleMouseEnter = function () {
+        resizeTimer = setTimeout(function () {
+            setIsAbleToResize(true);
+        }, 500);
+    };
+    var handleMouseLeave = function () {
+        if (resizeTimer) {
+            clearTimeout(resizeTimer);
+        }
+        setIsAbleToResize(false);
+    };
+    var isMouseDown = false, startX = 0;
+    var checkStart = function (event) {
+        startX = event.pageX;
+        isMouseDown = true;
+    };
+    var checkMove = function (event) {
+        if (!isMouseDown) {
+            return;
+        }
+        if (event.pageX < startX && isAbleToResize) {
+            setIsMinimised(true);
+        }
+        return;
+    };
+    var checkEnd = function () {
+        isMouseDown = false;
+    };
+    var swipe = function (rightBorder) {
+        if (rightBorder) {
+            rightBorder.addEventListener('mousedown', checkStart);
+            rightBorder.addEventListener('mousemove', checkMove);
+            document.addEventListener('mouseup', checkEnd);
+        }
+    };
+    useEffect(function () {
+        if (rightBorderRef.current) {
+            swipe(rightBorderRef.current);
+        }
+        return function () {
+            if (rightBorderRef.current) {
+                rightBorderRef.current.removeEventListener('mousedown', checkStart, true);
+                rightBorderRef.current.removeEventListener('mousemove', checkMove, true);
+            }
+            document.removeEventListener('mouseup', checkEnd, true);
+        };
+    });
+    return (React.createElement("div", { className: cx((_b = {},
+            _b[jsStyles.rightBorder()] = true,
+            _b[jsStyles.resizableRightBorder()] = isAbleToResize,
+            _b)), ref: rightBorderRef || ref, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, isAbleToResize && React.createElement("div", { className: customStyles.rightBorderHovered(context.productColor) })));
+});
+RightBorder.displayName = 'RightBorder';
+var RightBorderWithStaticFields = Object.assign(RightBorder, { __KONTUR_REACT_UI__: 'RightBorder' });
+export { RightBorderWithStaticFields as RightBorder };

package/src/SeparatedSubMenu.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface SeparatedSubMenuProps {
+    children?: React.ReactNode;
+}
+declare const SeparatedSubMenuWithStaticFields: React.ForwardRefExoticComponent<SeparatedSubMenuProps & React.RefAttributes<HTMLDivElement>> & {
+    __KONTUR_REACT_UI__: string;
+};
+export { SeparatedSubMenuWithStaticFields as SeparatedSubMenu };

package/src/SeparatedSubMenu.js

@@ -0,0 +1,32 @@
+import { __assign } from "tslib";
+import React, { forwardRef, useContext } from 'react';
+import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { jsStyles } from './SideMenu.styles';
+import { SideMenuContext } from './SideMenuContext';
+/**
+ * Отдельностоящее подменю
+ *
+ * @visibleName SeparatedSubMenu
+ */
+var SeparatedSubMenu = forwardRef(function (_a, ref) {
+    var _b;
+    var children = _a.children;
+    var context = useContext(SideMenuContext);
+    var isSubItemWithChildren = function (child) {
+        // @ts-expect-error: accessing private property
+        return (child === null || child === void 0 ? void 0 : child.type.__KONTUR_REACT_UI__) === 'SideMenuSubItem' && child.props.children;
+    };
+    var hasSubItems = function (children) {
+        return React.Children.toArray(children).some(function (child) {
+            if (React.isValidElement(child)) {
+                return isSubItemWithChildren(child);
+            }
+            return child;
+        });
+    };
+    return (React.createElement("div", { className: cx((_b = {}, _b[jsStyles.root()] = true, _b[jsStyles.separatedMenu()] = true, _b)), ref: ref },
+        React.createElement(SideMenuContext.Provider, { value: __assign({ hasSubIcons: hasSubItems(children) }, context) }, children)));
+});
+SeparatedSubMenu.displayName = 'SeparatedSubMenu';
+var SeparatedSubMenuWithStaticFields = Object.assign(SeparatedSubMenu, { __KONTUR_REACT_UI__: 'SeparatedSubMenu' });
+export { SeparatedSubMenuWithStaticFields as SeparatedSubMenu };

package/src/SideMenu.d.ts

@@ -1,60 +1,33 @@
 import React from 'react';
-import { Nullable } from '@skbkontur/react-ui-addons/typings/utility-types';
+import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
 import { SideMenuOrganisations } from './SideMenuOrganisations';
+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 { SideMenuSubItemButtons } from './SideMenuSubItemButtons';
-import { SideMenuDropdownMenuSeparator } from './SideMenuDropdownMenuSeparator';
-declare type SideMenuInterface = {
+export interface SideMenuProps extends CommonProps {
     children?: React.ReactNode;
-};
-declare type DefaultProps = {
-    size: 'small' | 'large';
-    isSeparatedMenu: boolean;
-};
-export declare type SideMenuProps = SideMenuInterface & Partial<DefaultProps>;
-declare type SideMenuComponentProps = SideMenuInterface & DefaultProps;
-declare type SideMenuState = {
-    isMinimised: boolean;
-    isAbleToResize: boolean;
-    activeItem: Nullable<React.ReactNode>;
-    activeSubItem: Nullable<React.ReactNode>;
-    hasScrollBar: boolean;
-    isTransitioned: boolean;
-};
-export declare class SideMenu extends React.Component<SideMenuComponentProps, SideMenuState> {
-    static __KONTUR_REACT_UI__: string;
-    private scrollTimer;
-    private transitionTimer;
-    static defaultProps: DefaultProps;
-    constructor(props: SideMenuComponentProps);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    static Body: React.FC<import("./SideMenuBody").SideMenuBodyProps>;
-    static Footer: React.FC<import("./SideMenuFooter").SideMenuFooterProps>;
-    static Header: typeof SideMenuHeader;
-    static Item: typeof SideMenuItem;
-    static SubItem: typeof SideMenuSubItem;
-    static SubItemHeader: typeof SideMenuSubItemHeader;
-    static Avatar: typeof SideMenuAvatar;
-    static Organisations: typeof SideMenuOrganisations;
-    static Divider: typeof SideMenuDivider;
-    static SubItemButtons: typeof SideMenuSubItemButtons;
-    static DropdownMenuSeparator: typeof SideMenuDropdownMenuSeparator;
-    private resizeTimer;
-    private readonly rightBorderRef;
-    render(): JSX.Element;
-    private renderMain;
-    private setActiveItem;
-    private setActiveSubItem;
-    private handleMouseEnter;
-    private handleMouseLeave;
-    private showMinimisedRoot;
-    private handleScroll;
-    private swipe;
+    size?: 'small' | 'large';
+    isSeparatedMenu?: boolean;
 }
-export {};
+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;
+    __KONTUR_REACT_UI__: string;
+}
+export declare const SideMenuDataTids: {
+    root: string;
+};
+declare const SideMenuWithStaticFields: React.ForwardRefExoticComponent<SideMenuProps & React.RefAttributes<HTMLElement>> & SubComponents;
+export { SideMenuWithStaticFields as SideMenu };