@skbkontur/side-menu 0.2.0 → 0.2.2

package/src/SideMenuBody.js

@@ -1,16 +1,23 @@
-import { __assign } from "tslib";
-import React, { useContext, useState } from 'react';
-import { CommonWrapper } from '@skbkontur/react-ui/internal/CommonWrapper';
-import { SideMenuThemeContext } from './SideMenuContext';
+import { __assign, __rest } from "tslib";
+import React, { forwardRef, useContext, useState } from 'react';
+import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { SideMenuContext } from './SideMenuContext';
 import { jsStyles } from './SideMenu.styles';
-export var SideMenuBody = function (props) {
-    var _a = useState(false), hasIcons = _a[0], setHasIcons = _a[1];
-    var oldContext = useContext(SideMenuThemeContext);
-    var setHasIconsTemp = function () {
-        setHasIcons(true);
-    };
-    return (React.createElement(SideMenuThemeContext.Provider, { value: __assign({ hasIcons: hasIcons, setHasIcons: setHasIconsTemp }, oldContext) },
-        React.createElement(CommonWrapper, __assign({}, props),
-            React.createElement("div", { className: jsStyles.body() }, props.children))));
-};
-SideMenuBody.__KONTUR_REACT_UI__ = 'SideMenuBody';
+import { SideMenuBodyChildren } from './SideMenuBodyChildren';
+/**
+ * Основной контейнер для меню
+ *
+ * @visibleName SideMenu.Body
+ */
+var SideMenuBody = forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
+    var _c = useState(false), hasIcons = _c[0], setHasIcons = _c[1];
+    var context = useContext(SideMenuContext);
+    return (React.createElement(SideMenuContext.Provider, { value: __assign({ hasIcons: hasIcons, setHasIcons: function () { return setHasIcons(true); } }, context) },
+        React.createElement("div", __assign({ className: cx((_b = {}, _b[jsStyles.body()] = true, _b), className), ref: ref }, rest),
+            React.createElement(SideMenuBodyChildren, null, children))));
+});
+SideMenuBody.displayName = 'SideMenuBody';
+var SideMenuBodyWithStaticFields = Object.assign(SideMenuBody, { __KONTUR_REACT_UI__: 'SideMenuBody' });
+export { SideMenuBodyWithStaticFields as SideMenuBody };

package/src/SideMenuBodyChildren.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
+declare const SideMenuBodyChildrenWithStaticFields: React.FC<CommonProps> & {
+    __KONTUR_REACT_UI__: string;
+};
+export { SideMenuBodyChildrenWithStaticFields as SideMenuBodyChildren };

package/src/SideMenuBodyChildren.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { jsStyles } from './SideMenu.styles';
+/**
+ * Внутренняя часть SideMenuBody
+ *
+ * @visibleName SideMenuBodyChildren
+ */
+var SideMenuBodyChildren = function (_a) {
+    var children = _a.children;
+    return (React.createElement(React.Fragment, null, React.Children.map(children, function (child) {
+        if (React.isValidElement(child)) {
+            // @ts-expect-error: accessing private property
+            if ((child === null || child === void 0 ? void 0 : child.type.__KONTUR_REACT_UI__) === 'SideMenuDivider') {
+                return React.cloneElement(child, {
+                    className: jsStyles.dividerInSideMenu(),
+                });
+            }
+            return child;
+        }
+    })));
+};
+SideMenuBodyChildren.displayName = 'SideMenuBodyChildren';
+var SideMenuBodyChildrenWithStaticFields = Object.assign(SideMenuBodyChildren, {
+    __KONTUR_REACT_UI__: 'SideMenuBodyChildren',
+});
+export { SideMenuBodyChildrenWithStaticFields as SideMenuBodyChildren };

package/src/SideMenuContext.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 export interface SideMenuContextType {
     isMinimised?: boolean;
     isTransitioned?: boolean;
@@ -6,10 +5,12 @@ export interface SideMenuContextType {
     size?: 'small' | 'large';
     hasIcons?: boolean;
     setHasIcons?: () => void;
-    activeItem?: React.ReactNode;
-    setActiveItem?: (item: React.ReactNode) => void;
-    activeSubItem?: React.ReactNode;
-    setActiveSubItem?: (item: React.ReactNode) => void;
+    activeItem?: string | null;
+    setActiveItem?: (item: string | null) => void;
+    activeSubItem?: string | null;
+    setActiveSubItem?: (item: string | null) => void;
     hasSubIcons?: boolean;
+    productColor?: string;
+    setProductColor?: (color: string) => void;
 }
-export declare const SideMenuThemeContext: React.Context<SideMenuContextType>;
+export declare const SideMenuContext: import("react").Context<SideMenuContextType>;

package/src/SideMenuContext.js

@@ -1,2 +1,2 @@
 import { createContext } from 'react';
-export var SideMenuThemeContext = createContext({});
+export var SideMenuContext = createContext({});

package/src/SideMenuDivider.d.ts

@@ -1,11 +1,6 @@
 import React from 'react';
-/**
- * Разделитель в главном меню
- *
- * @visibleName SideMenu.Divider
- */
-export declare class SideMenuDivider extends React.Component {
-    static __KONTUR_REACT_UI__: string;
-    render(): JSX.Element;
-    renderMain(): JSX.Element;
-}
+import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
+declare const SideMenuDividerWithStaticFields: React.ForwardRefExoticComponent<CommonProps & React.RefAttributes<HTMLHRElement>> & {
+    __KONTUR_REACT_UI__: string;
+};
+export { SideMenuDividerWithStaticFields as SideMenuDivider };

package/src/SideMenuDivider.js

@@ -1,25 +1,17 @@
-import { __assign, __extends } from "tslib";
-import React from 'react';
-import { CommonWrapper } from '@skbkontur/react-ui/internal/CommonWrapper';
+import { __assign, __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { jsStyles } from './SideMenu.styles';
 /**
  * Разделитель в главном меню
  *
  * @visibleName SideMenu.Divider
  */
-var SideMenuDivider = /** @class */ (function (_super) {
-    __extends(SideMenuDivider, _super);
-    function SideMenuDivider() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    SideMenuDivider.prototype.render = function () {
-        return this.renderMain();
-    };
-    SideMenuDivider.prototype.renderMain = function () {
-        return (React.createElement(CommonWrapper, __assign({}, this.props),
-            React.createElement("hr", { className: jsStyles.divider() })));
-    };
-    SideMenuDivider.__KONTUR_REACT_UI__ = 'SideMenuDivider';
-    return SideMenuDivider;
-}(React.Component));
-export { SideMenuDivider };
+var SideMenuDivider = forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, rest = __rest(_a, ["className"]);
+    return React.createElement("hr", __assign({ className: cx((_b = {}, _b[jsStyles.dividerInDropdown()] = true, _b), className), ref: ref }, rest));
+});
+SideMenuDivider.displayName = 'SideMenuDivider';
+var SideMenuDividerWithStaticFields = Object.assign(SideMenuDivider, { __KONTUR_REACT_UI__: 'SideMenuDivider' });
+export { SideMenuDividerWithStaticFields as SideMenuDivider };

package/src/SideMenuDropdown.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { DropdownMenuProps } from '@skbkontur/react-ui';
+import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
+export interface SideMenuDropdownProps extends CommonProps, Omit<DropdownMenuProps, 'caption' | 'disableAnimations'> {
+    icon?: React.ReactElement;
+    children?: React.ReactNode;
+    caption?: string;
+    disableAnimations?: boolean;
+}
+declare const SideMenuDropdownWithStaticFields: React.ForwardRefExoticComponent<SideMenuDropdownProps & React.RefAttributes<HTMLDivElement>> & {
+    __KONTUR_REACT_UI__: string;
+};
+export { SideMenuDropdownWithStaticFields as SideMenuDropdown };

package/src/SideMenuDropdown.js

@@ -0,0 +1,29 @@
+import { __assign, __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
+import { DEFAULT_THEME, DropdownMenu, ThemeFactory } from '@skbkontur/react-ui';
+import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { jsStyles } from './SideMenu.styles';
+import { SideMenuItem } from './SideMenuItem';
+/**
+ * Элемент списка с выпадающим меню
+ *
+ * @visibleName SideMenu.Dropdown
+ */
+var SideMenuDropdown = forwardRef(function (_a, ref) {
+    var _b;
+    var icon = _a.icon, children = _a.children, _c = _a.caption, caption = _c === void 0 ? 'СКБ Контур' : _c, className = _a.className, _d = _a.disableAnimations, disableAnimations = _d === void 0 ? false : _d, menuWidth = _a.menuWidth, rest = __rest(_a, ["icon", "children", "caption", "className", "disableAnimations", "menuWidth"]);
+    var label = (React.createElement("div", { className: jsStyles.dropdownLabel() },
+        React.createElement(SideMenuItem, { icon: icon, caption: caption })));
+    return (React.createElement(ThemeContext.Provider, { value: ThemeFactory.create({
+            menuItemHoverBg: '#f6f6f6',
+            menuItemHoverColor: '#222',
+            popupBorderRadius: '8px',
+            menuItemPaddingX: '32px',
+        }, DEFAULT_THEME) },
+        React.createElement("div", __assign({ className: cx((_b = {}, _b[jsStyles.dropdownWrapper()] = true, _b), className), ref: ref }, rest),
+            React.createElement(DropdownMenu, __assign({ caption: label, positions: ['top left'], disableAnimations: true, menuWidth: menuWidth }, rest), children))));
+});
+SideMenuDropdown.displayName = 'SideMenuDropdown';
+var SideMenuDropdownWithStaticFields = Object.assign(SideMenuDropdown, { __KONTUR_REACT_UI__: 'SideMenuDropdown' });
+export { SideMenuDropdownWithStaticFields as SideMenuDropdown };

package/src/SideMenuFooter.d.ts

@@ -1,11 +1,9 @@
 import React from 'react';
 import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
-/**
- * Нижняя часть меню
- *
- * @visibleName SideMenu.Footer
- */
-export declare type SideMenuFooterProps = CommonProps & {
+export interface SideMenuFooterProps extends CommonProps {
     children?: React.ReactNode;
+}
+declare const SideMenuFooterWithStaticFields: React.FC<SideMenuFooterProps> & {
+    __KONTUR_REACT_UI__: string;
 };
-export declare const SideMenuFooter: React.FC<SideMenuFooterProps>;
+export { SideMenuFooterWithStaticFields as SideMenuFooter };

package/src/SideMenuFooter.js

@@ -1,7 +1,20 @@
-import { __assign } from "tslib";
-import React from 'react';
-import { CommonWrapper } from '@skbkontur/react-ui/internal/CommonWrapper';
+import { __assign, __rest } from "tslib";
+import React, { forwardRef, useContext } from 'react';
+import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { jsStyles } from './SideMenu.styles';
-export var SideMenuFooter = function (props) { return (React.createElement(CommonWrapper, __assign({}, props),
-    React.createElement("footer", { className: jsStyles.footer() }, props.children))); };
-SideMenuFooter.__KONTUR_REACT_UI__ = 'SideMenuFooter';
+import { SideMenuContext } from './SideMenuContext';
+/**
+ * Нижняя часть меню
+ *
+ * @visibleName SideMenu.Footer
+ */
+var SideMenuFooter = forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
+    var context = useContext(SideMenuContext);
+    return (React.createElement(SideMenuContext.Provider, { value: __assign({ hasIcons: true }, context) },
+        React.createElement("footer", __assign({ className: cx((_b = {}, _b[jsStyles.footer()] = true, _b), className), ref: ref }, rest), children)));
+});
+SideMenuFooter.displayName = 'SideMenuFooter';
+var SideMenuFooterWithStaticFields = Object.assign(SideMenuFooter, { __KONTUR_REACT_UI__: 'SideMenuFooter' });
+export { SideMenuFooterWithStaticFields as SideMenuFooter };

package/src/SideMenuHeader.d.ts

@@ -1,31 +1,9 @@
 import React from 'react';
 import { LogotypeProps } from '@skbkontur/react-ui-addons/components/Logotype';
-declare type SideMenuHeaderState = {
-    withWidget: boolean;
-    fixed: boolean;
-    size: number;
-};
 export interface SideMenuHeaderProps extends Partial<LogotypeProps> {
     iconUrl?: string;
 }
-/**
- * Контейнер для логотипа
- *
- * @visibleName SideMenu.Header
- */
-export declare class SideMenuHeader extends React.Component<SideMenuHeaderProps, SideMenuHeaderState> {
-    static __KONTUR_REACT_UI__: string;
-    static contextType: React.Context<import("./SideMenuContext").SideMenuContextType>;
-    private widgetTimer;
-    private readonly headerWrapperRef;
-    constructor(props: SideMenuHeaderProps);
-    componentDidMount: () => void;
-    componentWillUnmount(): void;
-    private checkFixed;
-    render(): JSX.Element;
-    renderMain(): JSX.Element;
-    private handleMouseEnter;
-    private handleMouseLeave;
-    private static changeCamelCaseToKebabCase;
-}
-export {};
+declare const SideMenuHeaderWithStaticFields: React.ForwardRefExoticComponent<SideMenuHeaderProps & React.RefAttributes<HTMLDivElement>> & {
+    __KONTUR_REACT_UI__: string;
+};
+export { SideMenuHeaderWithStaticFields as SideMenuHeader };

package/src/SideMenuHeader.js

@@ -1,86 +1,42 @@
-import { __assign, __extends } from "tslib";
-import React from 'react';
+import { __assign, __rest } from "tslib";
+import React, { forwardRef, useContext, useEffect, useRef, useState } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { CommonWrapper } from '@skbkontur/react-ui/internal/CommonWrapper';
-import { Logotype } from '@skbkontur/react-ui-addons/components/Logotype';
+import { mergeRefs } from '@skbkontur/react-ui/lib/utils';
 import { jsStyles } from './SideMenu.styles';
-import { SideMenuThemeContext } from './SideMenuContext';
+import { SideMenuContext } from './SideMenuContext';
+import { SideMenuLogotype } from './SideMenuLogotype';
 /**
  * Контейнер для логотипа
  *
  * @visibleName SideMenu.Header
  */
-var SideMenuHeader = /** @class */ (function (_super) {
-    __extends(SideMenuHeader, _super);
-    function SideMenuHeader(props) {
-        var _this = _super.call(this, props) || this;
-        _this.componentDidMount = function () {
-            window.addEventListener('scroll', _this.checkFixed, true);
-            if (_this.headerWrapperRef.current &&
-                _this.headerWrapperRef.current.scrollWidth > _this.headerWrapperRef.current.clientWidth) {
-                _this.setState({ size: 24 });
-            }
-        };
-        _this.checkFixed = function () {
-            if (_this.headerWrapperRef.current && _this.headerWrapperRef.current.offsetTop > 0) {
-                _this.setState({ fixed: true });
-            }
-            else {
-                _this.setState({ fixed: false });
-            }
-        };
-        _this.handleMouseEnter = function () {
-            _this.widgetTimer = setTimeout(function () {
-                _this.setState({ withWidget: true });
-            }, 500);
-        };
-        _this.handleMouseLeave = function () {
-            if (_this.widgetTimer) {
-                clearTimeout(_this.widgetTimer);
-            }
-            _this.setState({ withWidget: false });
-        };
-        _this.state = {
-            withWidget: false,
-            fixed: false,
-            size: 28,
-        };
-        _this.headerWrapperRef = React.createRef();
-        return _this;
-    }
-    SideMenuHeader.prototype.componentWillUnmount = function () {
-        if (this.widgetTimer) {
-            clearTimeout(this.widgetTimer);
+var SideMenuHeader = forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, productLogo = _a.productLogo, konturLogo = _a.konturLogo, iconUrl = _a.iconUrl, rest = __rest(_a, ["className", "productLogo", "konturLogo", "iconUrl"]);
+    var context = useContext(SideMenuContext);
+    var headerWrapperRef = useRef(null);
+    var _c = useState(false), fixed = _c[0], setFixed = _c[1];
+    var checkFixed = function () {
+        if (headerWrapperRef.current && headerWrapperRef.current.offsetTop > 0) {
+            setFixed(true);
         }
-        window.removeEventListener('scroll', this.checkFixed, true);
-    };
-    SideMenuHeader.prototype.render = function () {
-        return this.renderMain();
-    };
-    SideMenuHeader.prototype.renderMain = function () {
-        var _a;
-        var name = 'kontur';
-        if (this.props.productLogo && typeof this.props.productLogo.type === 'function') {
-            name = this.props.productLogo.type.name;
-            var capitalLetters = name.match(/[A-Z]/g);
-            if (capitalLetters && capitalLetters.length > 1) {
-                name = SideMenuHeader.changeCamelCaseToKebabCase(name, capitalLetters[1]);
-            }
+        else {
+            setFixed(false);
         }
-        return (React.createElement(CommonWrapper, __assign({}, this.props),
-            React.createElement("header", { className: cx((_a = {},
-                    _a[jsStyles.headerWrapper()] = true,
-                    _a[jsStyles.headerFixedWrapper()] = this.state.fixed,
-                    _a[jsStyles.headerMinimisedWrapper()] = this.context.isMinimised || this.context.isTransitioned,
-                    _a)), ref: this.headerWrapperRef }, this.context.isMinimised || this.context.isTransitioned ? (React.createElement("img", { className: jsStyles.headerIcon(), src: this.props.iconUrl || "https://s.kontur.ru/common-v2/icons-products/" + name + "/" + name + "-32.png", alt: name })) : (React.createElement("div", { onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave },
-                React.createElement(Logotype, __assign({ size: this.state.size }, this.props, { withWidget: this.state.withWidget })))))));
     };
-    SideMenuHeader.changeCamelCaseToKebabCase = function (str, capitalLetter) {
-        var index = str.split('').indexOf(capitalLetter);
-        return str.substring(0, index) + '-' + str.substring(index);
-    };
-    SideMenuHeader.__KONTUR_REACT_UI__ = 'SideMenuHeader';
-    SideMenuHeader.contextType = SideMenuThemeContext;
-    return SideMenuHeader;
-}(React.Component));
-export { SideMenuHeader };
+    useEffect(function () {
+        window.addEventListener('scroll', checkFixed, true);
+        return function () {
+            window.removeEventListener('scroll', checkFixed, true);
+        };
+    });
+    return (React.createElement("header", __assign({ className: cx((_b = {},
+            _b[jsStyles.headerWrapper()] = true,
+            _b[jsStyles.headerFixedWrapper()] = fixed,
+            _b[jsStyles.headerMinimisedWrapper()] = context.isMinimised || context.isTransitioned,
+            _b), className), ref: mergeRefs([headerWrapperRef, ref]) }, rest),
+        React.createElement(SideMenuLogotype, __assign({ productLogo: productLogo, konturLogo: konturLogo, iconUrl: iconUrl }, rest))));
+});
+SideMenuHeader.displayName = 'SideMenuHeader';
+var SideMenuHeaderWithStaticFields = Object.assign(SideMenuHeader, { __KONTUR_REACT_UI__: 'SideMenuHeader' });
+export { SideMenuHeaderWithStaticFields as SideMenuHeader };

package/src/SideMenuItem.d.ts

@@ -1,42 +1,16 @@
 import React from 'react';
-import { SideMenuContextType } from './SideMenuContext';
-export declare type SideMenuItemProps = {
-    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
-    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
+export interface SideMenuItemProps extends CommonProps {
+    onClick?: (event: React.MouseEvent) => void;
+    onKeyDown?: (event: React.KeyboardEvent) => void;
     children?: React.ReactNode;
     icon?: React.ReactElement;
     marker?: string;
     caption?: string;
     isSubMenu?: boolean;
-    parent?: React.ReactNode;
-};
-declare type SideMenuItemState = {
-    isOpened: boolean;
-    focusedByTab: boolean;
-    isMultiline: boolean;
-};
-/**
- * Элемент списка
- *
- * @visibleName SideMenu.Item
- */
-export declare class SideMenuItem extends React.Component<SideMenuItemProps, SideMenuItemState> {
-    static __KONTUR_REACT_UI__: string;
-    static contextType: React.Context<SideMenuContextType>;
-    private previousContext;
-    private readonly textRef;
-    private separatedMenu;
-    constructor(props: SideMenuItemProps);
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    render(): JSX.Element;
-    renderMain(): JSX.Element;
-    private renderInnerSubMenu;
-    private renderSeparatedSubMenu;
-    private handleClick;
-    private handleFocus;
-    private handleBlur;
-    private handleKeyDown;
-    private setActive;
+    parent?: string;
 }
-export {};
+declare const SideMenuItemWithStaticFields: React.ForwardRefExoticComponent<SideMenuItemProps & React.RefAttributes<HTMLButtonElement>> & {
+    __KONTUR_REACT_UI__: string;
+};
+export { SideMenuItemWithStaticFields as SideMenuItem };