@skbkontur/side-menu 1.0.0 → 1.0.1-router-test.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.1](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.0.0...@skbkontur/side-menu@1.0.1) (2023-08-03)
+
+
+### Bug Fixes
+
+* **SideMenu:** dropdown click fix ([6b729f5](https://git.skbkontur.ru/ui/ui-parking/commits/6b729f51fbd4d7b8f8e3ce54ceb2a09df4f2a3b5))
+
+
+
+
+
 # [1.0.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.14.8...@skbkontur/side-menu@1.0.0) (2023-08-02)
 
 

package/README.md

@@ -591,6 +591,29 @@ import { useHistory } from "react-router-dom";
 
 При необходимости вы можете повторить часть этой логики в своей обёртке.
 
+---
+
+Также можно использовать `SideMenu.Link` передав туда компонент ссылки, например обертку со ссылкой из `react-router-dom`:
+
+```ts static
+import { Link } from 'react-router-dom';
+
+interface SideMenuReactRouterLinkProps extends SideMenuLinkProps {
+  href: string;
+}
+
+const LinkWrapper = React.forwardRef<HTMLAnchorElement, SideMenuReactRouterLinkProps>(({ href, ...rest }, ref) => (
+  <Link {...rest} to={href} ref={ref} />
+));
+
+const SideMenuReactRouterLink: React.FunctionComponent<SideMenuReactRouterLinkProps> = (props) => (
+  <SideMenu.Link {...props} component={LinkWrapper} />
+);
+```
+
+Если вы используете кастомную ссылку, то убедитесь, что она прокидывает `ref` и остальные пропсы в корневой элемент.
+
+
 #### Пример кастомизации
 
 ```jsx harmony

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/side-menu",
-  "version": "1.0.0",
+  "version": "1.0.1-router-test.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

package/src/SideMenuItem/SideMenuItem.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { CommonClickableElementProps } from '../internal/ClickableElement';
 export interface SideMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonClickableElementProps {
+    component?: React.ComponentType<any>;
 }
 /**
  * Элемент списка

package/src/SideMenuItem/SideMenuItem.js

@@ -1,8 +1,9 @@
-import { __assign } from "tslib";
+import { __assign, __rest } from "tslib";
 import React, { forwardRef } from 'react';
 import { ClickableElement } from '../internal/ClickableElement';
-var SideMenuItemInner = forwardRef(function (props, ref) {
-    return React.createElement(ClickableElement, __assign({}, props, { ref: ref, element: 'button' }));
+var SideMenuItemInner = forwardRef(function (_a, ref) {
+    var component = _a.component, rest = __rest(_a, ["component"]);
+    return React.createElement(ClickableElement, __assign({}, rest, { ref: ref, element: component !== null && component !== void 0 ? component : 'button' }));
 });
 SideMenuItemInner.displayName = 'SideMenuItem';
 /**

package/src/SideMenuLink/SideMenuLink.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { CommonClickableElementProps } from '../internal/ClickableElement';
 export interface SideMenuLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>, CommonClickableElementProps {
+    component?: React.ComponentType<any>;
 }
 /**
  * Ссылка для `SideMenu`

package/src/SideMenuLink/SideMenuLink.js

@@ -5,8 +5,8 @@ import { jsStyles } from './SideMenuLink.styles';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 var SideMenuLinkInner = forwardRef(function (_a, ref) {
     var _b;
-    var className = _a.className, rest = __rest(_a, ["className"]);
-    return React.createElement(ClickableElement, __assign({}, rest, { ref: ref, element: 'a', className: cx((_b = {}, _b[jsStyles.link()] = true, _b), className) }));
+    var className = _a.className, component = _a.component, rest = __rest(_a, ["className", "component"]);
+    return (React.createElement(ClickableElement, __assign({}, rest, { ref: ref, element: component !== null && component !== void 0 ? component : 'a', className: cx((_b = {}, _b[jsStyles.link()] = true, _b), className) })));
 });
 SideMenuLinkInner.displayName = 'SideMenuLink';
 /**

package/src/internal/ClickableElement.d.ts

@@ -21,7 +21,7 @@ export interface CommonClickableElementProps extends CommonProps {
     _isBackButton?: boolean;
 }
 export interface ClickableElementProps extends CommonClickableElementProps {
-    element: 'a' | 'button';
+    element: 'a' | 'button' | React.ComponentType<any>;
     href?: string;
     onClick?: React.EventHandler<React.MouseEvent<Element>>;
     onKeyDown?: React.EventHandler<React.KeyboardEvent<Element>>;

package/src/internal/ClickableElement.js

@@ -65,11 +65,13 @@ var ClickableElement = forwardRef(function (_a, ref) {
     };
     var setSeparatedMenuIsShown = function () {
         var _a, _b;
-        if (!_isSubMenu && context.isSeparatedMenu) {
-            (_a = context.setIsSeparatedMenuShown) === null || _a === void 0 ? void 0 : _a.call(context, false);
+        if (_isDropdown || _isSubMenu || !context.isSeparatedMenu)
+            return;
+        if (children) {
+            (_a = context.setIsSeparatedMenuShown) === null || _a === void 0 ? void 0 : _a.call(context, true);
         }
-        if (context.isSeparatedMenu && !_isSubMenu && children) {
-            (_b = context.setIsSeparatedMenuShown) === null || _b === void 0 ? void 0 : _b.call(context, true);
+        else {
+            (_b = context.setIsSeparatedMenuShown) === null || _b === void 0 ? void 0 : _b.call(context, false);
         }
     };
     var handleClick = function (e) {