@gravity-ui/navigation 3.3.1 → 3.3.3-beta.0

package/README.md

@@ -1,4 +1,4 @@
-# @gravity-ui/navigation · [![npm package](https://img.shields.io/npm/v/@gravity-ui/navigation)](https://www.npmjs.com/package/@gravity-ui/navigation) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/navigation/.github/workflows/ci.yml?branch=main&label=CI&logo=github)](https://github.com/gravity-ui/navigation/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.yandexcloud.dev/navigation/)
+# @gravity-ui/navigation · [![npm package](https://img.shields.io/npm/v/@gravity-ui/navigation)](https://www.npmjs.com/package/@gravity-ui/navigation) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/navigation/.github/workflows/ci.yml?branch=main&label=CI&logo=github)](https://github.com/gravity-ui/navigation/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/navigation/)
 
 ### Aside Header Navigation · [Preview →](https://preview.yandexcloud.dev/navigation/)
 
@@ -16,6 +16,21 @@ Ensure that peer dependencies are installed in your project
 npm install --dev @gravity-ui/uikit@^6.15.0 @gravity-ui/icons@2.2.0 @gravity-ui/components@3.0.0 @bem-react/classname@1.6.0 react@^18.0.0 react-dom@18.0.0
 ```
 
+## Sandboxes
+
+Basic
+https://codesandbox.io/p/devbox/navigation-demo-simple-x9k5sd
+
+Advanced
+https://codesandbox.io/p/devbox/recursing-dawn-6kc9vh
+
+## Roadmap 2025
+
+1. Support SSR
+2. Add more docs, examples to [Gravity UI](https://gravity-ui.com/ru/components/navigation/aside-header)
+3. Support Navigation at UIKit themer
+4. Unify subheaderItem, menuItem, footerItem API
+
 ## Components
 
 - [AsideHeader](https://github.com/gravity-ui/navigation/tree/main/src/components/AsideHeader/README.md)

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

@@ -13,7 +13,7 @@ declare const PublicActionBar: {
         displayName: string;
     };
     Group: {
-        ({ children, className, pull }: import(".").ActionBarGroupProps): React.JSX.Element;
+        ({ children, className, pull, stretchContainer }: import(".").ActionBarGroupProps): React.JSX.Element;
         displayName: string;
     };
     Item: {

package/build/cjs/components/ActionBar/Group/ActionBarGroup.d.ts

@@ -3,8 +3,9 @@ import { PropsWithPull } from '../types';
 import './ActionBarGroup.scss';
 export type Props = PropsWithChildren<PropsWithPull<{
     className?: string;
+    stretchContainer?: boolean;
 }>>;
 export declare const ActionBarGroup: {
-    ({ children, className, pull }: Props): React.JSX.Element;
+    ({ children, className, pull, stretchContainer }: Props): React.JSX.Element;
     displayName: string;
 };

package/build/cjs/components/ActionBar/__stories__/ActionBar.stories.d.ts

@@ -15,3 +15,9 @@ export declare const SingleSection: import("@storybook/csf").AnnotatedStoryFn<im
 } & {
     children?: React.ReactNode | undefined;
 }>;
+export declare const StretchGroup: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
+    'aria-label'?: string;
+    className?: string;
+} & {
+    children?: React.ReactNode | undefined;
+}>;

package/build/cjs/components/ActionBar/__stories__/ActionBarStretchGroupShowcase.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function ActionBarStretchGroupShowcase(): React.JSX.Element;

package/build/cjs/{index-DJSaylQb.js → index-Bh8tV34w.js}

@@ -140,7 +140,7 @@ function styleInject(css, ref) {
 var css_248z$u = ".g-root{--gn-aside-top-panel-height:0px}.gn-aside-header{--gn-aside-header-min-width:56px;--_--item-icon-background-size:38px;--_--background-color:var(--g-color-base-background);--_--decoration-collapsed-background-color:var(--g-color-base-warning-light);--_--decoration-expanded-background-color:var(--g-color-base-warning-light);--_--vertical-divider-line-color:var(--g-color-line-generic);--_--horizontal-divider-line-color:var(--g-color-line-generic);background-color:var(--g-color-base-background);height:100%;position:relative;width:100%}.gn-aside-header__aside{background-color:var(--gn-aside-header-expanded-background-color,var(--gn-aside-header-background-color,var(--_--background-color)));box-sizing:border-box;display:flex;flex-direction:column;height:100vh;left:0;margin-top:var(--gn-top-alert-height,0);max-height:calc(100vh - var(--gn-top-alert-height, 0));position:sticky;top:var(--gn-top-alert-height,0);width:inherit;z-index:var(--gn-aside-header-z-index,100)}.gn-aside-header__aside:after{background-color:var(--gn-aside-header-divider-vertical-color,var(--_--vertical-divider-line-color));content:\"\";height:100%;position:absolute;right:0;top:0;width:1px;z-index:2}.gn-aside-header__aside-popup-anchor{inset:0;position:absolute;z-index:1}.gn-aside-header__aside-content{--gradient-height:334px;display:flex;flex-direction:column;height:inherit;overflow-x:hidden;padding-top:var(--gn-aside-header-padding-top);position:relative;user-select:none;width:inherit;z-index:2}.gn-aside-header__aside-content>.gn-aside-header-logo{margin:8px 0}.gn-aside-header__aside-content_with-decoration{background:linear-gradient(180deg,var(--gn-aside-header-decoration-expanded-background-color,var(--_--decoration-expanded-background-color)) calc(var(--gradient-height)*.33),transparent calc(var(--gradient-height)*.88))}.gn-aside-header__aside-custom-background{bottom:0;display:flex;position:absolute;top:0;width:var(--gn-aside-header-size);z-index:-1}.gn-aside-header_compact .gn-aside-header__aside{background-color:var(--gn-aside-header-collapsed-background-color,var(--gn-aside-header-background-color,var(--_--background-color)))}.gn-aside-header_compact .gn-aside-header__aside-content{background:transparent}.gn-aside-header__header{--gn-aside-header-header-divider-height:29px;box-sizing:border-box;flex:none;padding-bottom:22px;padding-top:8px;position:relative;width:100%;z-index:1}.gn-aside-header__header .gn-aside-header__header-divider{bottom:0;color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));display:none;left:0;position:absolute;z-index:-2}.gn-aside-header__header_with-decoration:before{background-color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));content:\"\";display:none;height:calc(100% - var(--gn-aside-header-header-divider-height));left:0;position:absolute;top:0;width:100%;z-index:-2}.gn-aside-header__header:after{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));bottom:12px;content:\"\";height:1px;left:0;position:absolute;width:100%;z-index:-2}.gn-aside-header_compact .gn-aside-header__header:before,.gn-aside-header_compact .gn-aside-header__header_with-decoration .gn-aside-header__header-divider{display:block}.gn-aside-header_compact .gn-aside-header__header_with-decoration:after{display:none}.gn-aside-header__logo-button .gn-aside-header__logo-icon-place{height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));width:var(--gn-aside-header-min-width)}.gn-aside-header__menu-items{flex-grow:1}.gn-aside-header__footer{display:flex;flex-direction:column;flex-shrink:0;margin:8px 0;width:100%}.gn-aside-header__panels{inset:var(--gn-top-alert-height,0) 0 0;max-height:calc(100vh - var(--gn-top-alert-height, 0));overflow:auto;position:fixed;z-index:var(--gn-aside-header-panel-z-index,98)}.gn-aside-header__panel{height:100%}.gn-aside-header__pane-container{display:flex;flex-direction:row;outline:none;overflow:visible;user-select:text}.gn-aside-header__top-alert{background:var(--g-color-base-background);position:fixed;top:0;width:100%;z-index:var(--gn-aside-header-pane-top-z-index,98)}.gn-aside-header__content{margin-top:var(--gn-top-alert-height,0);width:calc(100% - var(--gn-aside-header-size));z-index:var(--gn-aside-header-content-z-index,95)}";
 styleInject(css_248z$u);
 
-const TopAlert$1 = React.lazy(() => Promise.resolve().then(function () { return require('./index-BgcyfriO.js'); }).then((module) => ({ default: module.TopAlert })));
+const TopAlert$1 = React.lazy(() => Promise.resolve().then(function () { return require('./index-DI64hfWr.js'); }).then((module) => ({ default: module.TopAlert })));
 const Layout = ({ compact, className, children, topAlert }) => {
     const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
     const asideHeaderContextValue = React.useMemo(() => ({ size, compact }), [compact, size]);
@@ -1567,6 +1567,15 @@ const Item$1 = (props) => {
         }
         onClosePopup === null || onClosePopup === undefined ? undefined : onClosePopup();
     }, [onClosePopup]);
+    const handleOpenChangePopup = React.useCallback((open, event, reason) => {
+        var _a;
+        if (event instanceof MouseEvent &&
+            event.target &&
+            ((_a = ref.current) === null || _a === undefined ? undefined : _a.contains(event.target))) {
+            return;
+        }
+        onOpenChangePopup === null || onOpenChangePopup === undefined ? undefined : onOpenChangePopup(open, event, reason);
+    }, [onClosePopup]);
     if (item.type === 'divider') {
         return React.createElement("div", { className: b$r('menu-divider') });
     }
@@ -1603,7 +1612,7 @@ const Item$1 = (props) => {
                 } }),
                 React.createElement("div", { className: b$r('icon-place'), ref: highlightedRef }, makeIconNode(iconEl)),
                 React.createElement("div", { className: b$r('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl)),
-            renderPopupContent && Boolean(anchorRef === null || anchorRef === undefined ? undefined : anchorRef.current) && (React.createElement(uikit.Popup, { strategy: "fixed", open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: handleClosePopup, onOpenChange: onOpenChangePopup }, renderPopupContent()))));
+            renderPopupContent && Boolean(anchorRef === null || anchorRef === undefined ? undefined : anchorRef.current) && (React.createElement(uikit.Popup, { strategy: "fixed", open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: handleClosePopup, onOpenChange: handleOpenChangePopup }, renderPopupContent()))));
         return createdNode;
     };
     const iconNode = icon ? (React.createElement(uikit.Icon, { qa: iconQa, data: icon, size: iconSize, className: b$r('icon') })) : null;
@@ -4576,12 +4585,12 @@ const AsideFallback = ({ headerDecoration, subheaderItemsCount = 0, qa }) => {
             React.createElement("div", { style: { flex: 1 } }))));
 };
 
-var css_248z$j = ".gn-action-bar-group{align-items:center;display:flex;flex-flow:row nowrap;flex-grow:1;justify-content:flex-start;margin:0;padding:0}.gn-action-bar-group_pull_left{justify-content:flex-start;margin-left:0;margin-right:auto}.gn-action-bar-group_pull_left-grow{flex-grow:1}.gn-action-bar-group_pull_right{justify-content:flex-end;margin-left:auto;margin-right:0}.gn-action-bar-group_pull_right-grow{flex-grow:1}.gn-action-bar-group_pull_center{justify-content:center;margin-left:auto;margin-right:auto}.gn-action-bar-group_pull_center-grow{flex-grow:1}";
+var css_248z$j = ".gn-action-bar-group{align-items:center;display:flex;flex-flow:row nowrap;justify-content:flex-start;margin:0;padding:0}.gn-action-bar-group_pull_left{justify-content:flex-start;margin-left:0;margin-right:auto}.gn-action-bar-group_pull_left-grow{flex-grow:1}.gn-action-bar-group_pull_right{justify-content:flex-end;margin-left:auto;margin-right:0}.gn-action-bar-group_pull_right-grow{flex-grow:1}.gn-action-bar-group_pull_center{justify-content:center;margin-left:auto;margin-right:auto}.gn-action-bar-group_pull_center-grow,.gn-action-bar-group_stretch-container{flex-grow:1}";
 styleInject(css_248z$j);
 
 const b$k = block('action-bar-group');
-const ActionBarGroup = ({ children, className, pull }) => {
-    return (React.createElement("ul", { className: b$k({ pull }, className), role: "group" }, children));
+const ActionBarGroup = ({ children, className, pull, stretchContainer }) => {
+    return (React.createElement("ul", { className: b$k({ pull, 'stretch-container': stretchContainer }, className), role: "group" }, children));
 };
 ActionBarGroup.displayName = 'ActionBar.Group';
 
@@ -5538,7 +5547,7 @@ const OverlapPanel = ({ title, renderContent, className, onClose, action, closeT
 var css_248z$4 = ".gn-mobile-header{--mobile-header-min-heigth:50px;--mobile-header-icon-size:20px;background-color:var(--g-color-base-background)}.gn-mobile-header__header-container{background-color:var(--g-color-base-background);position:sticky;top:0;z-index:var(--gn-mobile-header-z-index,100)}.gn-mobile-header__header{align-items:center;border-bottom:1px solid var(--g-color-line-generic);box-sizing:border-box;display:flex;justify-content:space-between;padding:0 10px}.gn-mobile-header__burger{padding:12px}.gn-mobile-header__panel-item{--gn-drawer-item-position:var(--gn-mobile-header-panel-position,absolute)}.gn-mobile-header__burger-menu,.gn-mobile-header__panel-item{background-color:var(--g-color-base-background);max-height:100%;max-width:90vw;width:320px}.gn-mobile-header__user-menu{overflow-y:auto}.gn-mobile-header__overlap-panel,.gn-mobile-header__panels{z-index:var(--gn-mobile-header-panel-z-index,98)}.gn-mobile-header__panels{inset:var(--mobile-header-min-heigth) 0 0;overflow:hidden;position:fixed}.gn-mobile-header__panel-item{top:unset}.gn-mobile-header__content{overflow:auto}";
 styleInject(css_248z$4);
 
-const TopAlert = React.lazy(() => Promise.resolve().then(function () { return require('./index-BgcyfriO.js'); }).then((module) => ({ default: module.TopAlert })));
+const TopAlert = React.lazy(() => Promise.resolve().then(function () { return require('./index-DI64hfWr.js'); }).then((module) => ({ default: module.TopAlert })));
 const b$4 = block('mobile-header');
 const MobileHeader = React.forwardRef(({ logo, burgerMenu, burgerCloseTitle = i18n('burger_button_close'), burgerOpenTitle = i18n('burger_button_open'), panelItems = [], renderContent, sideItemRenderContent, onClosePanel, onEvent, className, contentClassName, overlapPanel, topAlert, }, ref) => {
     const targetRef = useForwardRef(ref);
@@ -5854,4 +5863,4 @@ exports.styleInject = styleInject;
 exports.useAsideHeaderContext = useAsideHeaderContext;
 exports.useSettingsContext = useSettingsContext;
 exports.useSettingsSelectionContext = useSettingsSelectionContext;
-//# sourceMappingURL=index-DJSaylQb.js.map
+//# sourceMappingURL=index-Bh8tV34w.js.map