@gravity-ui/navigation 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## [0.3.0](https://github.com/gravity-ui/navigation/compare/v0.2.1...v0.3.0) (2022-11-24)
+
+
+### ⚠ BREAKING CHANGES
+
+* 
+
+### Features
+
+* better implementation of MenuItem.itemWrapper ([df865df](https://github.com/gravity-ui/navigation/commit/df865df329f6c1e62c09063cdbf1596e634e8145))
+
+
+### Bug Fixes
+
+* footer items should be in bottom even if menuItems is empty ([d55e55e](https://github.com/gravity-ui/navigation/commit/d55e55e267be989b2f94d552476f21c116af9489))
+
+## [0.2.1](https://github.com/gravity-ui/navigation/compare/v0.2.0...v0.2.1) (2022-10-31)
+
+
+### Bug Fixes
+
+* types declaration dir ([#27](https://github.com/gravity-ui/navigation/issues/27)) ([6840db8](https://github.com/gravity-ui/navigation/commit/6840db839a13ac77b13d11c06907b6fff52b4845))
+
 ## [0.2.0](https://github.com/gravity-ui/navigation/compare/v0.1.0...v0.2.0) (2022-10-31)
 
 

package/build/cjs/components/types.d.ts

@@ -1,6 +1,10 @@
 import React from 'react';
 import { IconProps } from '@gravity-ui/uikit';
 export declare type MenuItemType = 'regular' | 'action' | 'divider';
+export interface MakeItemParams {
+    icon?: React.ReactNode;
+    title: React.ReactNode;
+}
 export interface MenuItem {
     id: string;
     title: React.ReactNode;
@@ -11,7 +15,11 @@ export interface MenuItem {
     current?: boolean;
     pinned?: boolean;
     onItemClick?: (item: MenuItem, collapsed: boolean) => void;
-    itemWrapper?: (node: React.ReactNode, item: MenuItem, collapsed: boolean, compact: boolean) => React.ReactNode;
+    itemWrapper?: (p: MakeItemParams, makeItem: (p: MakeItemParams) => React.ReactNode, opts: {
+        collapsed: boolean;
+        compact: boolean;
+        item: MenuItem;
+    }) => React.ReactNode;
     rightAdornment?: React.ReactNode;
     type?: MenuItemType;
     afterMoreButton?: boolean;

package/build/cjs/index.js

@@ -3876,7 +3876,8 @@ function renderItemTitle(item) {
 }
 const defaultPopupPlacement = ['right-end'];
 const defaultPopupOffset = [-20, 8];
-const Item = ({ item, compact, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, renderPopupContent, onClosePopup, onItemClick, }) => {
+const Item = (props) => {
+    const { item, compact, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, renderPopupContent, onClosePopup, onItemClick, } = props;
     if (item.type === 'divider') {
         return React__default["default"].createElement("div", { className: b$6('menu-divider') });
     }
@@ -3899,58 +3900,81 @@ const Item = ({ item, compact, className, collapseItems, onMouseLeave, onMouseEn
         }
         onClosePopup === null || onClosePopup === void 0 ? void 0 : onClosePopup();
     }, [onClosePopup]);
-    const node = (React__default["default"].createElement("div", { className: b$6({ type, current, compact }, className), ref: ref, onClick: () => {
-            if (collapsedItem) {
-                /**
-                 * If we call onItemClick for collapsedItem then:
-                 * - User get unexpected item in onItemClick callback
-                 * - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
-                 */
-                toggleOpen(!open);
-                setTooltipAnchor(null);
-            }
-            else {
-                onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, false);
-            }
-        }, onMouseEnter: () => {
-            if (!compact) {
-                onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
-            }
-        }, onMouseLeave: () => {
-            if (!compact) {
-                onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
-            }
-        } },
-        React__default["default"].createElement("div", { className: b$6('icon-place') }, compact ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement("div", { onMouseEnter: (event) => {
-                    if (!open) {
-                        setTooltipAnchor(event.currentTarget);
-                    }
-                    onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
-                }, onMouseLeave: () => {
+    const makeNode = ({ icon: iconEl, title: titleEl }) => {
+        const createdNode = (React__default["default"].createElement("div", { className: b$6({ type, current, compact }, className), ref: ref, onClick: () => {
+                if (collapsedItem) {
+                    /**
+                     * If we call onItemClick for collapsedItem then:
+                     * - User get unexpected item in onItemClick callback
+                     * - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
+                     */
+                    toggleOpen(!open);
                     setTooltipAnchor(null);
+                }
+                else {
+                    onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, false);
+                }
+            }, onMouseEnter: () => {
+                if (!compact) {
+                    onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
+                }
+            }, onMouseLeave: () => {
+                if (!compact) {
                     onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
-                }, className: b$6('btn-icon') }, icon && React__default["default"].createElement(uikit.Icon, { data: icon, size: iconSize, className: b$6('icon') })),
-            enableTooltip && React__default["default"].createElement(ItemTooltip, { anchor: tooltipAnchor, text: tooltipText }))) : (icon && React__default["default"].createElement(uikit.Icon, { data: icon, size: iconSize, className: b$6('icon') }))),
-        React__default["default"].createElement("div", { className: b$6('title'), title: typeof item.title === 'string' ? item.title : undefined }, renderItemTitle(item)),
-        collapsedItem && (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default["default"].createElement(uikit.Popup, { placement: POPUP_PLACEMENT, open: open, anchorRef: ref, onClose: () => toggleOpen(false) },
-            React__default["default"].createElement("div", { className: b$6('collapse-items-popup-content') },
-                React__default["default"].createElement(uikit.List, { itemClassName: b$6('root-collapse-item'), items: collapseItems, selectedItemIndex: getSelectedItemIndex(collapseItems), itemHeight: POPUP_ITEM_HEIGHT, itemsHeight: collapseItems.length * POPUP_ITEM_HEIGHT, virtualized: false, filterable: false, sortable: false, renderItem: (collapseItem) => {
-                        const collapseNode = (React__default["default"].createElement("div", { className: b$6('collapse-item'), onClick: () => {
-                                onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(collapseItem, true);
-                            } }, renderItemTitle(collapseItem)));
-                        if (typeof collapseItem.itemWrapper === 'function') {
-                            return collapseItem.itemWrapper(collapseNode, collapseItem, true, compact);
+                }
+            } },
+            React__default["default"].createElement("div", { className: b$6('icon-place') }, compact ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement("div", { onMouseEnter: (event) => {
+                        if (!open) {
+                            setTooltipAnchor(event.currentTarget);
                         }
-                        return collapseItem.link ? (React__default["default"].createElement("a", { href: collapseItem.link, className: b$6('link') }, collapseNode)) : (collapseNode);
-                    } })))),
-        renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default["default"].createElement(uikit.Popup, { className: b$6('popup'), open: popupVisible, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
+                        onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
+                    }, onMouseLeave: () => {
+                        setTooltipAnchor(null);
+                        onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
+                    }, className: b$6('btn-icon') }, iconEl),
+                enableTooltip && (React__default["default"].createElement(ItemTooltip, { anchor: tooltipAnchor, text: tooltipText })))) : (iconEl)),
+            React__default["default"].createElement("div", { className: b$6('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl),
+            renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default["default"].createElement(uikit.Popup, { className: b$6('popup'), open: popupVisible, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
+        return item.link ? (React__default["default"].createElement("a", { href: item.link, className: b$6('link') }, createdNode)) : (createdNode);
+    };
+    const iconNode = icon ? React__default["default"].createElement(uikit.Icon, { data: icon, size: iconSize, className: b$6('icon') }) : null;
+    const titleNode = renderItemTitle(item);
+    const params = { icon: iconNode, title: titleNode };
+    let node;
+    const opts = { compact, collapsed: false, item };
     if (typeof item.itemWrapper === 'function') {
-        return item.itemWrapper(node, item, false, compact);
+        node = item.itemWrapper(params, makeNode, opts);
+    }
+    else {
+        node = makeNode(params);
     }
-    return item.link ? (React__default["default"].createElement("a", { href: item.link, className: b$6('link') }, node)) : (node);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        node,
+        open && collapsedItem && (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default["default"].createElement(CollapsedPopup, Object.assign({}, props, { anchorRef: ref, onClose: () => toggleOpen(false) })))));
 };
 Item.displayName = 'Item';
+function CollapsedPopup({ compact, onItemClick, collapseItems, anchorRef, onClose, }) {
+    return (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) ? (React__default["default"].createElement(uikit.Popup, { placement: POPUP_PLACEMENT, open: true, anchorRef: anchorRef, onClose: onClose },
+        React__default["default"].createElement("div", { className: b$6('collapse-items-popup-content') },
+            React__default["default"].createElement(uikit.List, { itemClassName: b$6('root-collapse-item'), items: collapseItems, selectedItemIndex: getSelectedItemIndex(collapseItems), itemHeight: POPUP_ITEM_HEIGHT, itemsHeight: collapseItems.length * POPUP_ITEM_HEIGHT, virtualized: false, filterable: false, sortable: false, renderItem: (collapseItem) => {
+                    const makeCollapseNode = ({ title: titleEl }) => {
+                        const res = (React__default["default"].createElement("div", { className: b$6('collapse-item'), onClick: () => {
+                                onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(collapseItem, true);
+                            } }, titleEl));
+                        return collapseItem.link ? (React__default["default"].createElement("a", { href: collapseItem.link, className: b$6('link') }, res)) : (res);
+                    };
+                    const titleNode = renderItemTitle(collapseItem);
+                    const params = { title: titleNode };
+                    const opts = { compact, collapsed: true, item: collapseItem };
+                    if (typeof collapseItem.itemWrapper === 'function') {
+                        return collapseItem.itemWrapper(params, makeCollapseNode, opts);
+                    }
+                    else {
+                        return makeCollapseNode(params);
+                    }
+                } })))) : null;
+}
 
 var _path$2;
 function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
@@ -4105,7 +4129,7 @@ var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
 };
 var headerDividerCollapsedIcon = SvgDividerCollapsed;
 
-var css_248z$3 = ".yc-root {\n  --aside-header-background-color: var(--yc-color-base-info);\n  --aside-header-collapse-button-divider-line-color: var(\n      --aside-header-header-divider-line-color\n  );\n}\n\n.yc-root_theme_light {\n  --aside-header-divider-line-color: transparent;\n  --aside-header-header-divider-line-color: var(--yc-color-line-generic);\n}\n\n.yc-root_theme_dark {\n  --aside-header-divider-line-color: var(--yc-color-base-light-simple-hover);\n  --aside-header-header-divider-line-color: var(--yc-color-base-light-simple-hover);\n}\n\n.ycn-aside-header {\n  --aside-header-min-width: 56px;\n  height: 100%;\n  width: 100%;\n  position: relative;\n  background-color: var(--yc-color-base-background);\n}\n.ycn-aside-header__aside {\n  position: sticky;\n  top: 0;\n  left: 0;\n  height: 100vh;\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--yc-color-base-background);\n  z-index: 100;\n  box-sizing: border-box;\n}\n.ycn-aside-header__aside::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  width: 1px;\n  height: 100%;\n  content: \"\";\n  background-color: var(--aside-header-divider-line-color);\n}\n.ycn-aside-header__aside-popup-anchor {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1;\n}\n.ycn-aside-header__aside-content {\n  --gradient-height: 334px;\n  display: flex;\n  flex-direction: column;\n  overflow-x: hidden;\n  width: inherit;\n  height: inherit;\n  position: relative;\n  z-index: 2;\n  user-select: none;\n  background: linear-gradient(180deg, var(--aside-header-background-color) calc(var(--gradient-height) * 0.33), transparent calc(var(--gradient-height) * 0.88));\n}\n.ycn-aside-header__aside-content::after {\n  position: absolute;\n  top: 0;\n  right: -100px;\n  bottom: 0;\n  width: 100px;\n  content: \"\";\n  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1), 0px 0px 24px rgba(0, 0, 0, 0.08);\n}\n.ycn-aside-header__aside-content > .ycn-aside-header-logo {\n  margin: 8px 0;\n}\n.ycn-aside-header_compact .ycn-aside-header__aside-content {\n  background: transparent;\n}\n.ycn-aside-header__header {\n  --aside-header-header-divider-height: 29px;\n  position: relative;\n  z-index: 1;\n  flex: none;\n  box-sizing: border-box;\n  width: 100%;\n  padding-top: 8px;\n  padding-bottom: 22px;\n}\n.ycn-aside-header__header .ycn-aside-header__header-divider {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  z-index: -2;\n  display: none;\n  color: var(--aside-header-background-color);\n}\n.ycn-aside-header__header::before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: -2;\n  display: none;\n  width: 100%;\n  height: calc(100% - var(--aside-header-header-divider-height));\n  content: \"\";\n  background-color: var(--aside-header-background-color);\n}\n.ycn-aside-header__header::after {\n  position: absolute;\n  bottom: 12px;\n  left: 0;\n  z-index: -2;\n  width: 100%;\n  height: 1px;\n  content: \"\";\n  background-color: var(--aside-header-header-divider-line-color);\n}\n.ycn-aside-header_compact .ycn-aside-header__header::before {\n  display: block;\n}\n.ycn-aside-header_compact .ycn-aside-header__header::after {\n  display: none;\n}\n.ycn-aside-header_compact .ycn-aside-header__header .ycn-aside-header__header-divider {\n  display: block;\n}\n.ycn-aside-header__footer {\n  flex-shrink: 0;\n  width: 100%;\n  margin: 8px 0;\n  display: flex;\n  flex-direction: column;\n}\n.ycn-aside-header__panels {\n  z-index: 98;\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  overflow: auto;\n}\n.ycn-aside-header__panel {\n  height: 100%;\n}\n.ycn-aside-header__pane-container {\n  display: flex;\n  outline: none;\n  overflow: visible;\n  user-select: text;\n  flex-direction: row;\n}\n.ycn-aside-header__content {\n  width: calc(100% - var(--aside-header-size));\n  z-index: 95;\n}\n.ycn-aside-header__collapse-button {\n  --yc-button-background-color-hover: transparent;\n  overflow: hidden;\n  box-sizing: border-box;\n  flex: none;\n  width: 100%;\n  height: 20px;\n  border-top: 1px solid var(--aside-header-collapse-button-divider-line-color);\n  margin-top: auto;\n}\n.ycn-aside-header__collapse-button:not(.ycn-aside-header__collapse-button_compact) .ycn-aside-header__collapse-icon {\n  transform: rotate(180deg);\n}\n.ycn-aside-header__collapse-button .ycn-aside-header__collapse-icon {\n  color: var(--yc-color-text-secondary);\n}\n.ycn-aside-header__collapse-button:hover .ycn-aside-header__collapse-icon {\n  color: var(--yc-color-text-primary);\n}";
+var css_248z$3 = ".yc-root {\n  --aside-header-background-color: var(--yc-color-base-info);\n  --aside-header-collapse-button-divider-line-color: var(\n      --aside-header-header-divider-line-color\n  );\n}\n\n.yc-root_theme_light {\n  --aside-header-divider-line-color: transparent;\n  --aside-header-header-divider-line-color: var(--yc-color-line-generic);\n}\n\n.yc-root_theme_dark {\n  --aside-header-divider-line-color: var(--yc-color-base-light-simple-hover);\n  --aside-header-header-divider-line-color: var(--yc-color-base-light-simple-hover);\n}\n\n.ycn-aside-header {\n  --aside-header-min-width: 56px;\n  height: 100%;\n  width: 100%;\n  position: relative;\n  background-color: var(--yc-color-base-background);\n}\n.ycn-aside-header__aside {\n  position: sticky;\n  top: 0;\n  left: 0;\n  height: 100vh;\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--yc-color-base-background);\n  z-index: 100;\n  box-sizing: border-box;\n}\n.ycn-aside-header__aside::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  width: 1px;\n  height: 100%;\n  content: \"\";\n  background-color: var(--aside-header-divider-line-color);\n}\n.ycn-aside-header__aside-popup-anchor {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1;\n}\n.ycn-aside-header__aside-content {\n  --gradient-height: 334px;\n  display: flex;\n  flex-direction: column;\n  overflow-x: hidden;\n  width: inherit;\n  height: inherit;\n  position: relative;\n  z-index: 2;\n  user-select: none;\n  background: linear-gradient(180deg, var(--aside-header-background-color) calc(var(--gradient-height) * 0.33), transparent calc(var(--gradient-height) * 0.88));\n}\n.ycn-aside-header__aside-content::after {\n  position: absolute;\n  top: 0;\n  right: -100px;\n  bottom: 0;\n  width: 100px;\n  content: \"\";\n  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1), 0px 0px 24px rgba(0, 0, 0, 0.08);\n}\n.ycn-aside-header__aside-content > .ycn-aside-header-logo {\n  margin: 8px 0;\n}\n.ycn-aside-header_compact .ycn-aside-header__aside-content {\n  background: transparent;\n}\n.ycn-aside-header__header {\n  --aside-header-header-divider-height: 29px;\n  position: relative;\n  z-index: 1;\n  flex: none;\n  box-sizing: border-box;\n  width: 100%;\n  padding-top: 8px;\n  padding-bottom: 22px;\n}\n.ycn-aside-header__header .ycn-aside-header__header-divider {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  z-index: -2;\n  display: none;\n  color: var(--aside-header-background-color);\n}\n.ycn-aside-header__header::before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: -2;\n  display: none;\n  width: 100%;\n  height: calc(100% - var(--aside-header-header-divider-height));\n  content: \"\";\n  background-color: var(--aside-header-background-color);\n}\n.ycn-aside-header__header::after {\n  position: absolute;\n  bottom: 12px;\n  left: 0;\n  z-index: -2;\n  width: 100%;\n  height: 1px;\n  content: \"\";\n  background-color: var(--aside-header-header-divider-line-color);\n}\n.ycn-aside-header_compact .ycn-aside-header__header::before {\n  display: block;\n}\n.ycn-aside-header_compact .ycn-aside-header__header::after {\n  display: none;\n}\n.ycn-aside-header_compact .ycn-aside-header__header .ycn-aside-header__header-divider {\n  display: block;\n}\n.ycn-aside-header__menu-items {\n  flex-grow: 1;\n}\n.ycn-aside-header__footer {\n  flex-shrink: 0;\n  width: 100%;\n  margin: 8px 0;\n  display: flex;\n  flex-direction: column;\n}\n.ycn-aside-header__panels {\n  z-index: 98;\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  overflow: auto;\n}\n.ycn-aside-header__panel {\n  height: 100%;\n}\n.ycn-aside-header__pane-container {\n  display: flex;\n  outline: none;\n  overflow: visible;\n  user-select: text;\n  flex-direction: row;\n}\n.ycn-aside-header__content {\n  width: calc(100% - var(--aside-header-size));\n  z-index: 95;\n}\n.ycn-aside-header__collapse-button {\n  --yc-button-background-color-hover: transparent;\n  overflow: hidden;\n  box-sizing: border-box;\n  flex: none;\n  width: 100%;\n  height: 20px;\n  border-top: 1px solid var(--aside-header-collapse-button-divider-line-color);\n  margin-top: auto;\n}\n.ycn-aside-header__collapse-button:not(.ycn-aside-header__collapse-button_compact) .ycn-aside-header__collapse-icon {\n  transform: rotate(180deg);\n}\n.ycn-aside-header__collapse-button .ycn-aside-header__collapse-icon {\n  color: var(--yc-color-text-secondary);\n}\n.ycn-aside-header__collapse-button:hover .ycn-aside-header__collapse-icon {\n  color: var(--yc-color-text-primary);\n}";
 styleInject(css_248z$3);
 
 const b$4 = block('aside-header');
@@ -4120,7 +4144,7 @@ class AsideHeader extends React__default["default"].Component {
                     React__default["default"].createElement("div", { className: b$4('aside-popup-anchor'), ref: this.asideRef }),
                     React__default["default"].createElement("div", { className: b$4('aside-content') },
                         this.renderHeader(),
-                        React__default["default"].createElement(CompositeBar, { items: menuItems, compact: compact, enableCollapsing: true, dict: dict, onItemClick: this.onItemClick }),
+                        (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default["default"].createElement(CompositeBar, { items: menuItems, compact: compact, enableCollapsing: true, dict: dict, onItemClick: this.onItemClick })) : (React__default["default"].createElement("div", { className: b$4('menu-items') })),
                         this.renderFooter(size),
                         this.renderCollapseButton())),
                 panelItems && this.renderPanels(size)));