@skbkontur/side-menu 1.0.2 → 1.1.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.1.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.0.2...@skbkontur/side-menu@1.1.0) (2023-08-07)
+
+
+### Features
+
+* **SideMenu:** add component prop to link ([2beb8b3](https://git.skbkontur.ru/ui/ui-parking/commits/2beb8b3cbd81830542554a18fbc26a9a7b2119b0))
+
+
+
+
+
 ## [1.0.2](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.0.1...@skbkontur/side-menu@1.0.2) (2023-08-04)
 
 

package/README.md

@@ -1,5 +1,3 @@
-### Бета-версия компонента SideMenu
-
 SideMenu в фирменном стиле (макеты живут [здесь](https://www.figma.com/file/XA8Ytcx8bxemYAkF7eGVSv/%D0%9A%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82-%D0%BB%D0%B5%D0%B2%D0%BE%D0%B3%D0%BE-%D0%BC%D0%B5%D0%BD%D1%8E?node-id=0%3A1)).
 
 [Пример в песочнице](https://codesandbox.io/s/competent-wiles-k85wlm)
@@ -591,6 +589,30 @@ 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` и остальные пропсы в корневой элемент.
+
+Пример в [песочнице](https://codesandbox.io/s/side-menu-react-router-dom-vtv6r8)
+
 #### Пример кастомизации
 
 ```jsx harmony

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/side-menu",
-  "version": "1.0.2",
+  "version": "1.1.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

@@ -25,7 +25,7 @@ var ClickableElement = forwardRef(function (_a, ref) {
     var isOpened = useOpenedState(id || rest.href, _generatedId, context.openedParents, isActive, children, context.isSeparatedMenuShown, context.isMobile && context.isSeparatedMenu);
     var hasChildren = function (id, generatedId) {
         var _a, _b;
-        var parentId = id ? 'id' : 'generatedParentId';
+        var parentId = id ? 'parentId' : 'generatedParentId';
         var childId = id !== null && id !== void 0 ? id : generatedId;
         return (_b = (_a = context.flattedArrayOfAllElements) === null || _a === void 0 ? void 0 : _a.filter(function (el) { return el[parentId] === childId; })) === null || _b === void 0 ? void 0 : _b.length;
     };