@gravity-ui/navigation 6.1.2 → 6.3.0

package/build/docs/components/MobileHeader.md

@@ -0,0 +1,82 @@
+# MobileHeader
+
+Header for Mobile navigation. MobileHeader provides maintaining Panels except for Modals.
+
+Includes auxiliary `MobileHeaderFooterItem` component.
+
+## Properties
+
+| Name                  | Description                                                     | Type                                                       |
+| :-------------------- | :-------------------------------------------------------------- | :--------------------------------------------------------- |
+| logo                  | Service logo properties                                         | `LogoProps`                                                |
+| burgerMenu            | Burger menu properties                                          | `BurgerMenuProps`                                          |
+| overlapPanel          | Overlap panel properties                                        | `OverlapPanelProps`                                        |
+| burgerCloseTitle      | Burger close button title (a11y)                                | `string`                                                   |
+| burgerOpenTitle       | Burger open button title (a11y)                                 | `string`                                                   |
+| panelItems            | Custom panels rendered in the header                            | `PanelItemProps[]`                                         |
+| topAlert              | Top alert properties                                            | `TopAlertProps`                                            |
+| renderContent         | Render function for the header content                          | `RenderContentType`                                        |
+| sideItemRenderContent | Render function for the side item content                       | `RenderContentType`                                        |
+| onEvent               | Inner event handler — receives the item name and the event name | `(itemName: string, eventName: MobileHeaderEvent) => void` |
+| onClosePanel          | Close panel handler                                             | `() => void`                                               |
+| className             | Header class name                                               | `string`                                                   |
+| contentClassName      | Header content class name                                       | `string`                                                   |
+
+### Usage
+
+See storybook example `src/components/MobileHeader/__stories__/MobileHeaderShowcase`.
+
+#### onEvent prop
+
+[onEvent](https://github.com/gravity-ui/navigation/blob/32c6a6f58e0307745e92b041b3d96517e57589c1/src/components/MobileHeader/MobileHeader.tsx#L41) handles MobileHeader inner events.
+
+**Custom events**
+
+You can initiate the event via `CustomEvent`. Support values:
+
+- `MOBILE_PANEL_TOGGLE`
+- `MOBILE_PANEL_OPEN`
+- `MOBILE_PANEL_CLOSE`
+- `MOBILE_BURGER_OPEN`
+- `MOBILE_BURGER_CLOSE`
+
+Panel events in constant [MOBILE_HEADER_EVENT_NAMES](https://github.com/gravity-ui/navigation/blob/main/src/components/MobileHeader/constants.ts#L8-L12)
+
+##### Examples
+
+**Simple event, open burger**
+
+```js
+const customEvent = new CustomEvent('MOBILE_BURGER_OPEN');
+const navRef = React.useRef < HTMLDivElement > null;
+navRef?.current?.dispatchEvent(customEvent);
+```
+
+**Panel event, open custom panel**
+
+```js
+import {getMobileHeaderCustomEvent, MOBILE_HEADER_EVENT_NAMES} from '@gravity-ui/navigation';
+
+const customEvent = getMobileHeaderCustomEvent(MOBILE_HEADER_EVENT_NAMES.closeEvent, {
+  panelName: 'user',
+});
+
+const navRef = React.useRef < HTMLDivElement > null;
+navRef?.current?.dispatchEvent(customEvent);
+
+const customEvent2 = getMobileHeaderCustomEvent('MOBILE_PANEL_TOGGLE', {panelName: 'user'});
+navRef?.current?.dispatchEvent(customEvent2);
+```
+
+Available panelName
+
+1. 'burger'
+2. `id` of element [panelItems prop](https://github.com/gravity-ui/navigation/blob/main/src/components/MobileHeader/MobileHeader.tsx#L38C5-L38C15)
+
+## MobileHeader vars
+
+| Name                               | Description                                    | Default |
+| :--------------------------------- | :--------------------------------------------- | :-----: |
+| z-indexes                          |                                                |         |
+| `--gn-mobile-header-z-index`       | Mobile header z-index                          |  `100`  |
+| `--gn-mobile-header-panel-z-index` | Mobile header panel (Drawer component) z-index |  `98`   |

package/build/docs/components/Settings.md

@@ -0,0 +1,113 @@
+# Settings
+
+The Settings component provides the layout for a settings panel with the following features.
+
+- single-level and two-level grouping of items
+- filtering of the panel's content by headers of items
+- displaying of loading status and content
+
+## Usage
+
+One-level settings example:
+
+```tsx
+<Settings>
+  <Settings.Page title="Appearance">...</Settings.Page>
+  <Settings.Page title="Notifications">...</Settings.Page>
+</Settings>
+```
+
+Two-level settings example:
+_Note:_ `Settings` with `view=mobile` groups `Settings.Group` are ignored.
+
+```tsx
+<Settings>
+  <Settings.Group groupTitle="My service">
+    <Settings.Page title="Appearance">...</Settings.Page>
+    <Settings.Page title="Notifications">...</Settings.Page>
+  </Settings.Group>
+  <Settings.Group groupTitle="General">
+    <Settings.Page title="Appearance">...</Settings.Page>
+    <Settings.Page title="Notifications">...</Settings.Page>
+  </Settings.Group>
+</Settings>
+```
+
+Pages with sections example:
+
+```tsx
+<Settings.Page title="Features" icon={'...'}>
+  <Settings.Section title="Common">
+    <Settings.Item title="Default VCS">...</Settings.Item>
+    <Settings.Item title="Search root">...</Settings.Item>
+  </Settings.Section>
+  <Settings.Section title="Beta functionality">...</Settings.Section>
+</Settings.Page>
+```
+
+## Properties
+
+| Name                           | Description                                                   | Type                         | Default            |
+| :----------------------------- | :------------------------------------------------------------ | :--------------------------- | :----------------- |
+| loading                        | Flag of loading status                                        | `boolean`                    |                    |
+| renderLoading                  | content for loading status                                    | `() => React.ReactNode`      |                    |
+| renderNotFound                 | Empty panel content                                           | `() => React.ReactNode`      |                    |
+| initialPage                    | Inititial page in `/groupId/pageId` format                    | `string`                     |                    |
+| view                           | Change view for Mobile                                        | `"normal"`, `"mobile"`       | `"normal"`         |
+| onPageChange                   | Page change handler                                           | `(newPage?: string) => void` |                    |
+| onClose                        | Settings close handler                                        | `() => void`                 |                    |
+| title                          | Page title                                                    | `string`                     | 'Settings'         |
+| filterPlaceholder              | Filter placeholder text                                       | `string`                     | 'Search settings'  |
+| emptyPlaceholder               | Filter empty text                                             | `string`                     | 'No results found' |
+| enableMobileSettingsTabsScroll | In mobile view tabs will overflow with scroll instead of wrap | `boolean`                    |                    |
+
+## Settings.Group
+
+Optional level for organizing related pages, e.g. "General" vs "Application specific".
+
+### Properties
+
+| Name       | Description        | Type     | Default |
+| :--------- | :----------------- | :------- | :------ |
+| id         | Unique id of group | `string` |         |
+| groupTitle | Header of group    | `string` |         |
+
+## Settings.Page
+
+Collection of related settings sections, e.g. "Appearance" in General group.
+
+### Properties
+
+| Name  | Description                  | Type                                                                                        | Default |
+| :---- | :--------------------------- | :------------------------------------------------------------------------------------------ | :------ |
+| id    | Unique id of page in a group | `string`                                                                                    |         |
+| title | Title of page                | `string`                                                                                    |         |
+| icon  | Properties of icon of page   | [`IconProps`](https://github.com/gravity-ui/uikit/tree/main/src/components/Icon#properties) |         |
+
+## Settings.Section
+
+Category of related settings, e.g. "Theme settings" in Appearance page.
+
+### Properties
+
+| Name      | Description                                                                   | Type              | Default |
+| :-------- | :---------------------------------------------------------------------------- | :---------------- | :------ |
+| title     | Title of section                                                              | `string`          |         |
+| header    | Header of section                                                             | `React.ReactNode` |         |
+| withBadge | Show badge on a section and menu                                              | `boolean`         |         |
+| hideTitle | Hide section title. Prop is needed to hide title in simple settings on Mobile | `boolean`         |         |
+
+## Settings.Item
+
+Individual setting with a title and control component.
+⚠️ In case with only one `Settings.Item` in `Settings.Section` the title is not shown.
+
+### Properties
+
+| Name                 | Description                                                | Type                                                      | Default    |
+| :------------------- | :--------------------------------------------------------- | :-------------------------------------------------------- | :--------- |
+| title                | Title of item                                              | `string`                                                  |            |
+| renderTitleComponent | Cusomt header of                                           | `(highlightedTitle?: React.ReactNode) => React.ReactNode` |
+| align                | Item alignment                                             | `"top"`, `"center"`                                       | `"center"` |
+| mode                 | Layout for mobile. Title and control will be placed in row | `"row"`                                                   |            |
+| description          | Description of item                                        | `React.ReactNode`                                         |            |

package/build/docs/hooks/useOverflowingHorizontalListItems.md

@@ -0,0 +1,16 @@
+# useOverflowingHorizontalListItems
+
+A hook for determining which horizontal list items stay visible and which collapse into an overflow "more" dropdown.
+
+```tsx
+import {useOverflowingHorizontalListItems} from '@gravity-ui/navigation';
+```
+
+## Properties
+
+| Property        | Type                     | Required | Default | Description              |
+| :-------------- | :----------------------- | :------: | :------ | :----------------------- |
+| containerRef    | `RefObject<HTMLElement>` |          |         | List container ref       |
+| items           | `Array`                  |          |         | List items               |
+| itemSelector    | `String`                 |          |         | List item selector       |
+| moreButtonWidth | `Number`                 |          |         | The width of more button |

package/build/esm/components/AsideHeader/components/FirstPanel.js

@@ -15,7 +15,7 @@ import { Panels } from './Panels.js';
 
 const MENU_ITEMS_COMPOSITE_ID = 'gravity-ui/navigation-menu-items-composite-bar';
 const FirstPanel = React__default.forwardRef((_props, ref) => {
-    const { size, onItemClick, headerDecoration, menuMoreTitle, onMenuMoreClick, renderFooter, compact, customBackground, customBackgroundClassName, className, hideCollapseButton, menuGroups, menuOverflow, collapsedMenuGroupIds, defaultCollapsedMenuGroupIds, onToggleMenuGroupCollapsed, qa, } = useAsideHeaderInnerContext();
+    const { size, onItemClick, headerDecoration, menuMoreTitle, onMenuMoreClick, renderFooter, compact, customBackground, customBackgroundClassName, className, hideCollapseButton, menuGroups, menuOverflow, collapsedMenuGroupIds, defaultCollapsedMenuGroupIds, onToggleMenuGroupCollapsed, aboveMenuContent, qa, } = useAsideHeaderInnerContext();
     const visibleMenuItems = useVisibleMenuItems();
     const asideRef = useRef(null);
     React__default.useEffect(() => {
@@ -27,6 +27,7 @@ const FirstPanel = React__default.forwardRef((_props, ref) => {
             customBackground && (React__default.createElement("div", { className: b('aside-custom-background', customBackgroundClassName) }, customBackground)),
             React__default.createElement("div", { className: b('aside-content', { ['with-decoration']: headerDecoration }) },
                 React__default.createElement(Header, null),
+                aboveMenuContent,
                 (visibleMenuItems === null || visibleMenuItems === undefined ? undefined : visibleMenuItems.length) ? (React__default.createElement(CompositeBar, { menuItemClassName: b('menu-item'), compositeId: MENU_ITEMS_COMPOSITE_ID, type: "menu", compact: compact, items: visibleMenuItems, menuGroups: menuGroups, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== undefined ? menuMoreTitle : i18n('label_more'), onItemClick: onItemClick, onMoreClick: onMenuMoreClick, menuOverflow: menuOverflow, collapsedMenuGroupIds: collapsedMenuGroupIds, defaultCollapsedMenuGroupIds: defaultCollapsedMenuGroupIds, onToggleMenuGroupCollapsed: onToggleMenuGroupCollapsed })) : (React__default.createElement("div", { className: b('menu-items') })),
                 React__default.createElement("div", { className: b('footer') }, renderFooter === null || renderFooter === undefined ? undefined : renderFooter({
                     size,

package/build/esm/components/AsideHeader/components/FirstPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FirstPanel.js","sources":["../../../../../../src/components/AsideHeader/components/FirstPanel.tsx"],"sourcesContent":["import React, {useRef} from 'react';\n\nimport {setRef} from '@gravity-ui/uikit';\n\nimport {useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport i18n from '../i18n';\nimport {b} from '../utils';\n\nimport {useVisibleMenuItems} from './AllPagesPanel';\nimport {CollapseButton} from './CollapseButton/CollapseButton';\nimport {CompositeBar} from './CompositeBar';\nimport {Header} from './Header';\nimport {Panels} from './Panels';\n\nconst MENU_ITEMS_COMPOSITE_ID = 'gravity-ui/navigation-menu-items-composite-bar';\n\nexport const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {\n    const {\n        size,\n        onItemClick,\n        headerDecoration,\n        menuMoreTitle,\n        onMenuMoreClick,\n        renderFooter,\n        compact,\n        customBackground,\n        customBackgroundClassName,\n        className,\n        hideCollapseButton,\n        menuGroups,\n        menuOverflow,\n        collapsedMenuGroupIds,\n        defaultCollapsedMenuGroupIds,\n        onToggleMenuGroupCollapsed,\n        qa,\n    } = useAsideHeaderInnerContext();\n    const visibleMenuItems = useVisibleMenuItems();\n\n    const asideRef = useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        setRef<HTMLDivElement>(ref, asideRef.current);\n    }, [ref]);\n\n    return (\n        <React.Fragment>\n            <div\n                className={b(\n                    'aside',\n                    {'menu-overflow-scroll': menuOverflow === 'scroll' && !compact},\n                    className,\n                )}\n                style={{width: size}}\n                data-qa={qa}\n            >\n                <div className={b('aside-popup-anchor')} ref={asideRef} />\n                {customBackground && (\n                    <div className={b('aside-custom-background', customBackgroundClassName)}>\n                        {customBackground}\n                    </div>\n                )}\n\n                <div className={b('aside-content', {['with-decoration']: headerDecoration})}>\n                    <Header />\n                    {visibleMenuItems?.length ? (\n                        <CompositeBar\n                            menuItemClassName={b('menu-item')}\n                            compositeId={MENU_ITEMS_COMPOSITE_ID}\n                            type=\"menu\"\n                            compact={compact}\n                            items={visibleMenuItems}\n                            menuGroups={menuGroups}\n                            menuMoreTitle={menuMoreTitle ?? i18n('label_more')}\n                            onItemClick={onItemClick}\n                            onMoreClick={onMenuMoreClick}\n                            menuOverflow={menuOverflow}\n                            collapsedMenuGroupIds={collapsedMenuGroupIds}\n                            defaultCollapsedMenuGroupIds={defaultCollapsedMenuGroupIds}\n                            onToggleMenuGroupCollapsed={onToggleMenuGroupCollapsed}\n                        />\n                    ) : (\n                        <div className={b('menu-items')} />\n                    )}\n                    <div className={b('footer')}>\n                        {renderFooter?.({\n                            size,\n                            compact: Boolean(compact),\n                            asideRef,\n                        })}\n                    </div>\n                    {!hideCollapseButton && <CollapseButton />}\n                </div>\n            </div>\n            <Panels />\n        </React.Fragment>\n    );\n});\n\nFirstPanel.displayName = 'FirstPanel';\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;AAcA,MAAM,uBAAuB,GAAG,gDAAgD;AAEzE,MAAM,UAAU,GAAGA,cAAK,CAAC,UAAU,CAAiB,CAAC,MAAM,EAAE,GAAG,KAAI;AACvE,IAAA,MAAM,EACF,IAAI,EACJ,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,YAAY,EACZ,OAAO,EACP,gBAAgB,EAChB,yBAAyB,EACzB,SAAS,EACT,kBAAkB,EAClB,UAAU,EACV,YAAY,EACZ,qBAAqB,EACrB,4BAA4B,EAC5B,0BAA0B,EAC1B,EAAE,GACL,GAAG,0BAA0B,EAAE;AAChC,IAAA,MAAM,gBAAgB,GAAG,mBAAmB,EAAE;AAE9C,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC;AAE7C,IAAAA,cAAK,CAAC,SAAS,CAAC,MAAK;AACjB,QAAA,MAAM,CAAiB,GAAG,EAAE,QAAQ,CAAC,OAAO,CAAC;AACjD,KAAC,EAAE,CAAC,GAAG,CAAC,CAAC;AAET,IAAA,QACIA,cAAA,CAAA,aAAA,CAACA,cAAK,CAAC,QAAQ,EAAA,IAAA;AACX,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,CAAC,CACR,OAAO,EACP,EAAC,sBAAsB,EAAE,YAAY,KAAK,QAAQ,IAAI,CAAC,OAAO,EAAC,EAC/D,SAAS,CACZ,EACD,KAAK,EAAE,EAAC,KAAK,EAAE,IAAI,EAAC,EAAA,SAAA,EACX,EAAE,EAAA;YAEXA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,oBAAoB,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAI,CAAA;AACzD,YAAA,gBAAgB,KACbA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,yBAAyB,EAAE,yBAAyB,CAAC,EAClE,EAAA,gBAAgB,CACf,CACT;AAED,YAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,eAAe,EAAE,EAAC,CAAC,iBAAiB,GAAG,gBAAgB,EAAC,CAAC,EAAA;AACvE,gBAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAG,IAAA,CAAA;AACT,gBAAA,CAAA,gBAAgB,KAAhB,IAAA,IAAA,gBAAgB,6BAAhB,gBAAgB,CAAE,MAAM,KACrBA,cAAA,CAAA,aAAA,CAAC,YAAY,EACT,EAAA,iBAAiB,EAAE,CAAC,CAAC,WAAW,CAAC,EACjC,WAAW,EAAE,uBAAuB,EACpC,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,gBAAgB,EACvB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,SAAA,GAAA,aAAa,GAAI,IAAI,CAAC,YAAY,CAAC,EAClD,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,eAAe,EAC5B,YAAY,EAAE,YAAY,EAC1B,qBAAqB,EAAE,qBAAqB,EAC5C,4BAA4B,EAAE,4BAA4B,EAC1D,0BAA0B,EAAE,0BAA0B,EAAA,CACxD,KAEFA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,GAAI,CACtC;AACD,gBAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,EAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,SAAA,GAAA,SAAA,GAAA,YAAY,CAAG;oBACZ,IAAI;AACJ,oBAAA,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC;oBACzB,QAAQ;AACX,iBAAA,CAAC,CACA;AACL,gBAAA,CAAC,kBAAkB,IAAIA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA,CAAG,CACxC,CACJ;AACN,QAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA,CAAG,CACG;AAEzB,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"FirstPanel.js","sources":["../../../../../../src/components/AsideHeader/components/FirstPanel.tsx"],"sourcesContent":["import React, {useRef} from 'react';\n\nimport {setRef} from '@gravity-ui/uikit';\n\nimport {useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport i18n from '../i18n';\nimport {b} from '../utils';\n\nimport {useVisibleMenuItems} from './AllPagesPanel';\nimport {CollapseButton} from './CollapseButton/CollapseButton';\nimport {CompositeBar} from './CompositeBar';\nimport {Header} from './Header';\nimport {Panels} from './Panels';\n\nconst MENU_ITEMS_COMPOSITE_ID = 'gravity-ui/navigation-menu-items-composite-bar';\n\nexport const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {\n    const {\n        size,\n        onItemClick,\n        headerDecoration,\n        menuMoreTitle,\n        onMenuMoreClick,\n        renderFooter,\n        compact,\n        customBackground,\n        customBackgroundClassName,\n        className,\n        hideCollapseButton,\n        menuGroups,\n        menuOverflow,\n        collapsedMenuGroupIds,\n        defaultCollapsedMenuGroupIds,\n        onToggleMenuGroupCollapsed,\n        aboveMenuContent,\n        qa,\n    } = useAsideHeaderInnerContext();\n    const visibleMenuItems = useVisibleMenuItems();\n\n    const asideRef = useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        setRef<HTMLDivElement>(ref, asideRef.current);\n    }, [ref]);\n\n    return (\n        <React.Fragment>\n            <div\n                className={b(\n                    'aside',\n                    {'menu-overflow-scroll': menuOverflow === 'scroll' && !compact},\n                    className,\n                )}\n                style={{width: size}}\n                data-qa={qa}\n            >\n                <div className={b('aside-popup-anchor')} ref={asideRef} />\n                {customBackground && (\n                    <div className={b('aside-custom-background', customBackgroundClassName)}>\n                        {customBackground}\n                    </div>\n                )}\n\n                <div className={b('aside-content', {['with-decoration']: headerDecoration})}>\n                    <Header />\n                    {aboveMenuContent}\n                    {visibleMenuItems?.length ? (\n                        <CompositeBar\n                            menuItemClassName={b('menu-item')}\n                            compositeId={MENU_ITEMS_COMPOSITE_ID}\n                            type=\"menu\"\n                            compact={compact}\n                            items={visibleMenuItems}\n                            menuGroups={menuGroups}\n                            menuMoreTitle={menuMoreTitle ?? i18n('label_more')}\n                            onItemClick={onItemClick}\n                            onMoreClick={onMenuMoreClick}\n                            menuOverflow={menuOverflow}\n                            collapsedMenuGroupIds={collapsedMenuGroupIds}\n                            defaultCollapsedMenuGroupIds={defaultCollapsedMenuGroupIds}\n                            onToggleMenuGroupCollapsed={onToggleMenuGroupCollapsed}\n                        />\n                    ) : (\n                        <div className={b('menu-items')} />\n                    )}\n                    <div className={b('footer')}>\n                        {renderFooter?.({\n                            size,\n                            compact: Boolean(compact),\n                            asideRef,\n                        })}\n                    </div>\n                    {!hideCollapseButton && <CollapseButton />}\n                </div>\n            </div>\n            <Panels />\n        </React.Fragment>\n    );\n});\n\nFirstPanel.displayName = 'FirstPanel';\n"],"names":["React"],"mappings":"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"}

package/build/esm/components/AsideHeader/types.d.ts

@@ -63,6 +63,7 @@ interface AsideHeaderGeneralProps extends QAProps {
     onMenuMoreClick?: () => void;
     onAllPagesClick?: () => void;
     openModalSubscriber?: (subscriber: OpenModalSubscriber) => void;
+    aboveMenuContent?: React.ReactNode;
 }
 interface AsideHeaderDefaultProps {
     panelItems?: PanelItemProps[];

package/build/esm/components/AsideHeader/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../../src/components/AsideHeader/types.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {DrawerProps, PopupProps, QAProps} from '@gravity-ui/uikit';\n\nimport {RenderContentType} from '../Content';\nimport {LogoProps, MenuGroup, MenuItem, OpenModalSubscriber, TopAlertProps} from '../types';\n\nimport {AsideHeaderContextType} from './AsideHeaderContext';\n\nexport interface PanelItemProps extends DrawerProps {\n    id: string;\n}\n\nexport interface LayoutProps {\n    compact: boolean;\n    className?: string;\n    topAlert?: TopAlertProps;\n}\n\ninterface EditMenuProps {\n    onOpenEditMode?: () => void;\n    onToggleMenuItem?: (changedItem: AsideHeaderItem) => void;\n    onResetSettingsToDefault?: () => void;\n    enableSorting?: boolean;\n    onChangeItemsOrder?: (changedItem: AsideHeaderItem, oldIndex: number, newIndex: number) => void;\n    /**\n     * Fired when visibility of a menu group is toggled from the All pages panel (pin on group header).\n     * Use with `onMenuGroupsChanged` / controlled `menuGroups`.\n     */\n    onToggleMenuGroup?: (changedGroup: MenuGroup) => void;\n}\n\n/**\n * Menu overflow behavior.\n * - `collapse` — extra items collapse under a \"More\" popup (default).\n * - `scroll` — all items remain visible inside a scrollable container with a native thin scrollbar.\n *\n * In compact mode the menu always falls back to `collapse` regardless of this value\n * because a scrollbar over icon-only items is awkward.\n */\nexport type AsideHeaderMenuOverflow = 'collapse' | 'scroll';\n\ninterface AsideHeaderGeneralProps extends QAProps {\n    logo?: LogoProps;\n    className?: string;\n    collapseTitle?: string;\n    expandTitle?: string;\n    menuMoreTitle?: string;\n    /**\n     * @see AsideHeaderMenuOverflow\n     * @default 'collapse'\n     */\n    menuOverflow?: AsideHeaderMenuOverflow;\n    topAlert?: TopAlertProps;\n    customBackground?: React.ReactNode;\n    customBackgroundClassName?: string;\n    hideCollapseButton?: boolean;\n    renderContent?: RenderContentType;\n    renderFooter?: (data: {\n        size: number;\n        compact: boolean;\n        asideRef: React.RefObject<HTMLDivElement>;\n    }) => React.ReactNode;\n    collapseButtonWrapper?: (\n        defaultButton: React.ReactNode,\n        data: {\n            compact: boolean;\n            onChangeCompact?: (compact: boolean) => void;\n        },\n    ) => React.ReactNode;\n    editMenuProps?: EditMenuProps;\n    onClosePanel?: () => void;\n    onChangeCompact?: (compact: boolean) => void;\n    onMenuMoreClick?: () => void;\n    onAllPagesClick?: () => void;\n    openModalSubscriber?: (subscriber: OpenModalSubscriber) => void;\n}\n\ninterface AsideHeaderDefaultProps {\n    panelItems?: PanelItemProps[];\n    subheaderItems?: AsideHeaderItem[];\n    menuItems?: AsideHeaderItem[];\n    menuGroups?: MenuGroup[];\n    /**\n     * Called only from **All pages** edit mode when the user toggles visibility of a **menu group** (group header pin), updating `menuGroup.hidden`.\n     * Use with controlled `menuGroups`; not emitted for programmatic `menuGroups` changes outside All pages.\n     */\n    onMenuGroupsChanged?: (menuGroups: MenuGroup[]) => void;\n    defaultMenuItems?: AsideHeaderItem[];\n    onMenuItemsChanged?: (items: AsideHeaderItem[]) => void;\n    headerDecoration?: boolean;\n    /**\n     * When provided, the map is the source of truth for which menu groups are collapsed\n     * in inline (`menuOverflow: 'scroll'`) layout. Keys are `MenuGroup.id`, values mean collapsed.\n     */\n    collapsedMenuGroupIds?: Record<string, boolean>;\n    /**\n     * Initial collapsed state for groups when `collapsedMenuGroupIds` is not controlled.\n     */\n    defaultCollapsedMenuGroupIds?: Record<string, boolean>;\n    /**\n     * Called when the user toggles a group in inline layout. The parent should update\n     * `collapsedMenuGroupIds` when using controlled mode.\n     */\n    onToggleMenuGroupCollapsed?: (groupId: string) => void;\n}\n\nexport type AsideHeaderInnerProps = AsideHeaderGeneralProps &\n    AsideHeaderDefaultProps &\n    AsideHeaderContextType;\n\nexport interface AsideHeaderProps\n    extends AsideHeaderGeneralProps,\n        LayoutProps,\n        Partial<AsideHeaderDefaultProps> {}\n\nexport enum InnerPanels {\n    AllPages = 'all-pages',\n}\n\n/** Menu item id for the All pages row (same value as {@link InnerPanels.AllPages}). */\nexport const ALL_PAGES_ID = InnerPanels.AllPages;\n\nexport interface AsideHeaderItem extends MenuItem {\n    /**\n     * @internal CompositeBar: group children rendered from the \"More\" overflow popover.\n     */\n    compositeBarMenuPopupItems?: AsideHeaderItem[];\n    /**\n     * @internal CompositeBar: optional heading in the overflow popover for a group row.\n     */\n    compositeBarMenuPopupTitle?: string;\n    enableTooltip?: boolean;\n    onItemClick?: (\n        item: AsideHeaderItem,\n        collapsed: boolean,\n        event: React.MouseEvent<HTMLElement, MouseEvent>,\n    ) => void;\n    bringForward?: boolean;\n    compact?: boolean;\n\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupVisible?: PopupProps['open'];\n    /**\n     * Floating element anchor ref object\n     *\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupRef?: React.RefObject<HTMLElement>;\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupPlacement?: PopupProps['placement'];\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupOffset?: PopupProps['offset'];\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupKeepMounted?: PopupProps['keepMounted'];\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    renderPopupContent?: () => React.ReactNode;\n    /**\n     * This callback will be called when Escape key pressed on keyboard, or click outside was made\n     * This behaviour could be disabled with `disableEscapeKeyDown`\n     * and `disableOutsideClick` options\n     *\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    onOpenChangePopup?: PopupProps['onOpenChange'];\n}\n"],"names":[],"mappings":"IAoHY;AAAZ,CAAA,UAAY,WAAW,EAAA;AACnB,IAAA,WAAA,CAAA,UAAA,CAAA,GAAA,WAAsB;AAC1B,CAAC,EAFW,WAAW,KAAX,WAAW,GAEtB,EAAA,CAAA,CAAA;AAED;AACa,MAAA,YAAY,GAAG,WAAW,CAAC;;;;"}
+{"version":3,"file":"types.js","sources":["../../../../../src/components/AsideHeader/types.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {DrawerProps, PopupProps, QAProps} from '@gravity-ui/uikit';\n\nimport {RenderContentType} from '../Content';\nimport {LogoProps, MenuGroup, MenuItem, OpenModalSubscriber, TopAlertProps} from '../types';\n\nimport {AsideHeaderContextType} from './AsideHeaderContext';\n\nexport interface PanelItemProps extends DrawerProps {\n    id: string;\n}\n\nexport interface LayoutProps {\n    compact: boolean;\n    className?: string;\n    topAlert?: TopAlertProps;\n}\n\ninterface EditMenuProps {\n    onOpenEditMode?: () => void;\n    onToggleMenuItem?: (changedItem: AsideHeaderItem) => void;\n    onResetSettingsToDefault?: () => void;\n    enableSorting?: boolean;\n    onChangeItemsOrder?: (changedItem: AsideHeaderItem, oldIndex: number, newIndex: number) => void;\n    /**\n     * Fired when visibility of a menu group is toggled from the All pages panel (pin on group header).\n     * Use with `onMenuGroupsChanged` / controlled `menuGroups`.\n     */\n    onToggleMenuGroup?: (changedGroup: MenuGroup) => void;\n}\n\n/**\n * Menu overflow behavior.\n * - `collapse` — extra items collapse under a \"More\" popup (default).\n * - `scroll` — all items remain visible inside a scrollable container with a native thin scrollbar.\n *\n * In compact mode the menu always falls back to `collapse` regardless of this value\n * because a scrollbar over icon-only items is awkward.\n */\nexport type AsideHeaderMenuOverflow = 'collapse' | 'scroll';\n\ninterface AsideHeaderGeneralProps extends QAProps {\n    logo?: LogoProps;\n    className?: string;\n    collapseTitle?: string;\n    expandTitle?: string;\n    menuMoreTitle?: string;\n    /**\n     * @see AsideHeaderMenuOverflow\n     * @default 'collapse'\n     */\n    menuOverflow?: AsideHeaderMenuOverflow;\n    topAlert?: TopAlertProps;\n    customBackground?: React.ReactNode;\n    customBackgroundClassName?: string;\n    hideCollapseButton?: boolean;\n    renderContent?: RenderContentType;\n    renderFooter?: (data: {\n        size: number;\n        compact: boolean;\n        asideRef: React.RefObject<HTMLDivElement>;\n    }) => React.ReactNode;\n    collapseButtonWrapper?: (\n        defaultButton: React.ReactNode,\n        data: {\n            compact: boolean;\n            onChangeCompact?: (compact: boolean) => void;\n        },\n    ) => React.ReactNode;\n    editMenuProps?: EditMenuProps;\n    onClosePanel?: () => void;\n    onChangeCompact?: (compact: boolean) => void;\n    onMenuMoreClick?: () => void;\n    onAllPagesClick?: () => void;\n    openModalSubscriber?: (subscriber: OpenModalSubscriber) => void;\n    aboveMenuContent?: React.ReactNode;\n}\n\ninterface AsideHeaderDefaultProps {\n    panelItems?: PanelItemProps[];\n    subheaderItems?: AsideHeaderItem[];\n    menuItems?: AsideHeaderItem[];\n    menuGroups?: MenuGroup[];\n    /**\n     * Called only from **All pages** edit mode when the user toggles visibility of a **menu group** (group header pin), updating `menuGroup.hidden`.\n     * Use with controlled `menuGroups`; not emitted for programmatic `menuGroups` changes outside All pages.\n     */\n    onMenuGroupsChanged?: (menuGroups: MenuGroup[]) => void;\n    defaultMenuItems?: AsideHeaderItem[];\n    onMenuItemsChanged?: (items: AsideHeaderItem[]) => void;\n    headerDecoration?: boolean;\n    /**\n     * When provided, the map is the source of truth for which menu groups are collapsed\n     * in inline (`menuOverflow: 'scroll'`) layout. Keys are `MenuGroup.id`, values mean collapsed.\n     */\n    collapsedMenuGroupIds?: Record<string, boolean>;\n    /**\n     * Initial collapsed state for groups when `collapsedMenuGroupIds` is not controlled.\n     */\n    defaultCollapsedMenuGroupIds?: Record<string, boolean>;\n    /**\n     * Called when the user toggles a group in inline layout. The parent should update\n     * `collapsedMenuGroupIds` when using controlled mode.\n     */\n    onToggleMenuGroupCollapsed?: (groupId: string) => void;\n}\n\nexport type AsideHeaderInnerProps = AsideHeaderGeneralProps &\n    AsideHeaderDefaultProps &\n    AsideHeaderContextType;\n\nexport interface AsideHeaderProps\n    extends AsideHeaderGeneralProps,\n        LayoutProps,\n        Partial<AsideHeaderDefaultProps> {}\n\nexport enum InnerPanels {\n    AllPages = 'all-pages',\n}\n\n/** Menu item id for the All pages row (same value as {@link InnerPanels.AllPages}). */\nexport const ALL_PAGES_ID = InnerPanels.AllPages;\n\nexport interface AsideHeaderItem extends MenuItem {\n    /**\n     * @internal CompositeBar: group children rendered from the \"More\" overflow popover.\n     */\n    compositeBarMenuPopupItems?: AsideHeaderItem[];\n    /**\n     * @internal CompositeBar: optional heading in the overflow popover for a group row.\n     */\n    compositeBarMenuPopupTitle?: string;\n    enableTooltip?: boolean;\n    onItemClick?: (\n        item: AsideHeaderItem,\n        collapsed: boolean,\n        event: React.MouseEvent<HTMLElement, MouseEvent>,\n    ) => void;\n    bringForward?: boolean;\n    compact?: boolean;\n\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupVisible?: PopupProps['open'];\n    /**\n     * Floating element anchor ref object\n     *\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupRef?: React.RefObject<HTMLElement>;\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupPlacement?: PopupProps['placement'];\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupOffset?: PopupProps['offset'];\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupKeepMounted?: PopupProps['keepMounted'];\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    renderPopupContent?: () => React.ReactNode;\n    /**\n     * This callback will be called when Escape key pressed on keyboard, or click outside was made\n     * This behaviour could be disabled with `disableEscapeKeyDown`\n     * and `disableOutsideClick` options\n     *\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    onOpenChangePopup?: PopupProps['onOpenChange'];\n}\n"],"names":[],"mappings":"IAqHY;AAAZ,CAAA,UAAY,WAAW,EAAA;AACnB,IAAA,WAAA,CAAA,UAAA,CAAA,GAAA,WAAsB;AAC1B,CAAC,EAFW,WAAW,KAAX,WAAW,GAEtB,EAAA,CAAA,CAAA;AAED;AACa,MAAA,YAAY,GAAG,WAAW,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/navigation",
-  "version": "6.1.2",
+  "version": "6.3.0",
   "description": "Gravity UI Navigation components",
   "license": "MIT",
   "repository": {
@@ -32,6 +32,7 @@
     "test": "node --experimental-vm-modules ./node_modules/jest/bin/jest.js --passWithNoTests",
     "test-storybook": "test-storybook --url ${PR_PREVIEW_URL:-http://localhost:7008}",
     "build": "rimraf build && rollup -c",
+    "build:docs": "node scripts/build-docs.js",
     "lint:js": "eslint src --ext .js,.jsx,.ts,.tsx",
     "lint:styles": "stylelint '{styles,src}/**/*.scss'",
     "lint:prettier": "prettier --check '**/*.md'",
@@ -39,7 +40,7 @@
     "packages:check": "knip",
     "build-storybook": "storybook build",
     "start": "cross-env TS_NODE_PROJECT=.storybook/tsconfig.json storybook dev -p 7008",
-    "prepublishOnly": "npm run build",
+    "prepublishOnly": "npm run build && npm run build:docs",
     "playwright:install": "playwright install --with-deps",
     "playwright": "playwright test --config=playwright/playwright.config.ts",
     "playwright:update": "npm run playwright -- -u",
@@ -67,6 +68,7 @@
     "@commitlint/config-conventional": "^19.6.0",
     "@doc-tools/transform": "^3.11.0",
     "@gravity-ui/eslint-config": "^3.3.0",
+    "@gravity-ui/gulp-utils": "^1.1.1",
     "@gravity-ui/icons": "^2.8.1",
     "@gravity-ui/prettier-config": "^1.0.0",
     "@gravity-ui/stylelint-config": "^4.0.1",